From aac1f68de43f729dc9cd8680aac2a7994ebf1921 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 13:19:34 +0000 Subject: [PATCH 01/14] Fix CSS Module purity errors for Next.js 16 compatibility After upgrading to Next.js 16.1.6, the build failed with CSS Module purity errors in Popover and Tooltip components. Next.js 16 with Turbopack enforces stricter validation requiring global selectors like [data-theme='dark'] to be combined with local classes. Changed nested selector structure: [data-theme='dark'] { .bui-Popover { ... } } To flattened structure: [data-theme='dark'] .bui-Popover { ... } This matches the pattern used in Dialog.module.css and satisfies Turbopack's CSS Module purity requirements. Signed-off-by: Charles de Dreuille --- .../src/components/Popover/Popover.module.css | 22 +++++++---------- .../src/components/Tooltip/Tooltip.module.css | 24 ++++++++----------- 2 files changed, 19 insertions(+), 27 deletions(-) diff --git a/packages/ui/src/components/Popover/Popover.module.css b/packages/ui/src/components/Popover/Popover.module.css index fe757c8dd4..5156b95ffc 100644 --- a/packages/ui/src/components/Popover/Popover.module.css +++ b/packages/ui/src/components/Popover/Popover.module.css @@ -122,20 +122,16 @@ } } - [data-theme='dark'] { - .bui-Popover { - background: var(--bui-bg-surface-2); - border: 1px solid var(--bui-gray-4); - } + [data-theme='dark'] .bui-Popover { + background: var(--bui-bg-surface-2); + border: 1px solid var(--bui-gray-4); + } - .bui-PopoverArrow { - svg path:nth-child(1) { - fill: var(--bui-bg-surface-2); - } + [data-theme='dark'] .bui-PopoverArrow svg path:nth-child(1) { + fill: var(--bui-bg-surface-2); + } - svg path:nth-child(2) { - fill: var(--bui-gray-4); - } - } + [data-theme='dark'] .bui-PopoverArrow svg path:nth-child(2) { + fill: var(--bui-gray-4); } } diff --git a/packages/ui/src/components/Tooltip/Tooltip.module.css b/packages/ui/src/components/Tooltip/Tooltip.module.css index 5c9c27eb8d..b668952848 100644 --- a/packages/ui/src/components/Tooltip/Tooltip.module.css +++ b/packages/ui/src/components/Tooltip/Tooltip.module.css @@ -106,21 +106,17 @@ } } - [data-theme='dark'] { - .bui-Tooltip { - background: var(--bui-bg-surface-2); - box-shadow: none; - border: 1px solid var(--bui-gray-4); - } + [data-theme='dark'] .bui-Tooltip { + background: var(--bui-bg-surface-2); + box-shadow: none; + border: 1px solid var(--bui-gray-4); + } - .bui-TooltipArrow { - svg path:nth-child(1) { - fill: var(--bui-bg-surface-2); - } + [data-theme='dark'] .bui-TooltipArrow svg path:nth-child(1) { + fill: var(--bui-bg-surface-2); + } - svg path:nth-child(2) { - fill: var(--bui-gray-4); - } - } + [data-theme='dark'] .bui-TooltipArrow svg path:nth-child(2) { + fill: var(--bui-gray-4); } } From 4d1b7f4093aed3c28aa32c5991f56afec32bd9b5 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 13:21:26 +0000 Subject: [PATCH 02/14] Add changeset for CSS Module fixes Signed-off-by: Charles de Dreuille --- .changeset/fix-nextjs16-css-modules.md | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 .changeset/fix-nextjs16-css-modules.md diff --git a/.changeset/fix-nextjs16-css-modules.md b/.changeset/fix-nextjs16-css-modules.md new file mode 100644 index 0000000000..6e49f893c0 --- /dev/null +++ b/.changeset/fix-nextjs16-css-modules.md @@ -0,0 +1,11 @@ +--- +'@backstage/ui': patch +--- + +Fixed CSS Module purity errors for Next.js 16 compatibility + +After upgrading to Next.js 16.1.6, the build failed with CSS Module purity errors. Next.js 16 with Turbopack enforces stricter validation requiring global selectors like `[data-theme='dark']` to be combined with local classes. + +Changed nested selector structure from `[data-theme='dark'] { .class { } }` to flattened `[data-theme='dark'] .class { }`. + +**Affected components:** popover, tooltip From b9be9d33aacc708c2099be6816cdfb7b21fb3254 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 13:30:36 +0000 Subject: [PATCH 03/14] Upgrade to ESLint 9 for Next.js 16 compatibility Next.js 16 requires ESLint 9 for proper flat config support. This commit: - Upgrades eslint from ^8 to ^9 - Migrates from .eslintrc.json to eslint.config.mjs (flat config) - Updates lint script to use eslint directly (next lint removed in Next.js 16) - Adds tsconfig.json includes for Next.js 16 dev types - Fixes layout.tsx to use proper theme CSS link tags Signed-off-by: Charles de Dreuille --- docs-ui/.eslintrc.json | 8 - docs-ui/eslint.config.mjs | 18 ++ docs-ui/package.json | 4 +- docs-ui/src/app/layout.tsx | 6 +- docs-ui/tsconfig.json | 17 +- docs-ui/yarn.lock | 356 ++++++++++++++++--------------------- 6 files changed, 189 insertions(+), 220 deletions(-) delete mode 100644 docs-ui/.eslintrc.json create mode 100644 docs-ui/eslint.config.mjs diff --git a/docs-ui/.eslintrc.json b/docs-ui/.eslintrc.json deleted file mode 100644 index be99640f75..0000000000 --- a/docs-ui/.eslintrc.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "extends": ["next/core-web-vitals", "next/typescript"], - "rules": { - "notice/notice": "off", - "react/forbid-elements": "off", - "jsx-a11y/alt-text": "off" - } -} diff --git a/docs-ui/eslint.config.mjs b/docs-ui/eslint.config.mjs new file mode 100644 index 0000000000..3396ce7946 --- /dev/null +++ b/docs-ui/eslint.config.mjs @@ -0,0 +1,18 @@ +import { defineConfig, globalIgnores } from 'eslint/config'; +import nextCoreWebVitals from 'eslint-config-next/core-web-vitals'; + +const eslintConfig = defineConfig([ + ...nextCoreWebVitals, + globalIgnores(['.next/**', 'dist/**', 'node_modules/**']), + { + rules: { + 'notice/notice': 'off', + 'react/forbid-elements': 'off', + 'jsx-a11y/alt-text': 'off', + '@next/next/no-css-tags': 'off', + 'react-hooks/set-state-in-effect': 'warn', + }, + }, +]); + +export default eslintConfig; diff --git a/docs-ui/package.json b/docs-ui/package.json index 861ba500bf..bb0b1a393d 100644 --- a/docs-ui/package.json +++ b/docs-ui/package.json @@ -5,7 +5,7 @@ "scripts": { "prebuild": "yarn sync:css", "build": "next build", - "lint": "next lint", + "lint": "eslint .", "prestart": "yarn sync:css", "start": "next dev", "sync:changelog": "node scripts/sync-changelog.mjs", @@ -47,7 +47,7 @@ "@types/react": "19.2.10", "@types/react-dom": "19.2.3", "chokidar": "^3.6.0", - "eslint": "^8", + "eslint": "^9", "eslint-config-next": "16.1.6", "lightningcss": "^1.28.2", "typescript": "^5", diff --git a/docs-ui/src/app/layout.tsx b/docs-ui/src/app/layout.tsx index ad056626d8..3647c572f5 100644 --- a/docs-ui/src/app/layout.tsx +++ b/docs-ui/src/app/layout.tsx @@ -8,8 +8,6 @@ import { MobileBottomNav } from '@/components/MobileBottomNav'; import styles from './layout.module.css'; import '../css/globals.css'; -import '/public/theme-backstage.css'; -import '/public/theme-spotify.css'; export const metadata: Metadata = { title: 'Backstage UI', @@ -49,6 +47,10 @@ export default async function RootLayout({ data-theme-name="backstage" suppressHydrationWarning > + + + + diff --git a/docs-ui/tsconfig.json b/docs-ui/tsconfig.json index b913cec0b3..2c7d5e0a3b 100644 --- a/docs-ui/tsconfig.json +++ b/docs-ui/tsconfig.json @@ -1,6 +1,10 @@ { "compilerOptions": { - "lib": ["dom", "dom.iterable", "esnext"], + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], "allowJs": true, "skipLibCheck": true, "strict": false, @@ -19,7 +23,9 @@ } ], "paths": { - "@/*": ["./src/*"] + "@/*": [ + "./src/*" + ] }, "target": "ES2017" }, @@ -30,7 +36,10 @@ ".next/types/**/*.ts", "dist/types/**/*.ts", "src/types/**/*.d.ts", - "dist/dev/types/**/*.ts" + "dist/dev/types/**/*.ts", + ".next/dev/types/**/*.ts" ], - "exclude": ["node_modules"] + "exclude": [ + "node_modules" + ] } diff --git a/docs-ui/yarn.lock b/docs-ui/yarn.lock index 3fb97dd76b..b0a0f4bb8f 100644 --- a/docs-ui/yarn.lock +++ b/docs-ui/yarn.lock @@ -375,7 +375,7 @@ __metadata: languageName: node linkType: hard -"@eslint-community/eslint-utils@npm:^4.2.0, @eslint-community/eslint-utils@npm:^4.9.1": +"@eslint-community/eslint-utils@npm:^4.8.0, @eslint-community/eslint-utils@npm:^4.9.1": version: 4.9.1 resolution: "@eslint-community/eslint-utils@npm:4.9.1" dependencies: @@ -386,34 +386,80 @@ __metadata: languageName: node linkType: hard -"@eslint-community/regexpp@npm:^4.12.2, @eslint-community/regexpp@npm:^4.6.1": +"@eslint-community/regexpp@npm:^4.12.1, @eslint-community/regexpp@npm:^4.12.2": version: 4.12.2 resolution: "@eslint-community/regexpp@npm:4.12.2" checksum: 10/049b280fddf71dd325514e0a520024969431dc3a8b02fa77476e6820e9122f28ab4c9168c11821f91a27982d2453bcd7a66193356ea84e84fb7c8d793be1ba0c languageName: node linkType: hard -"@eslint/eslintrc@npm:^2.1.4": - version: 2.1.4 - resolution: "@eslint/eslintrc@npm:2.1.4" +"@eslint/config-array@npm:^0.21.1": + version: 0.21.1 + resolution: "@eslint/config-array@npm:0.21.1" dependencies: - ajv: "npm:^6.12.4" - debug: "npm:^4.3.2" - espree: "npm:^9.6.0" - globals: "npm:^13.19.0" - ignore: "npm:^5.2.0" - import-fresh: "npm:^3.2.1" - js-yaml: "npm:^4.1.0" + "@eslint/object-schema": "npm:^2.1.7" + debug: "npm:^4.3.1" minimatch: "npm:^3.1.2" - strip-json-comments: "npm:^3.1.1" - checksum: 10/7a3b14f4b40fc1a22624c3f84d9f467a3d9ea1ca6e9a372116cb92507e485260359465b58e25bcb6c9981b155416b98c9973ad9b796053fd7b3f776a6946bce8 + checksum: 10/6eaa0435972f735ce52d581f355a0b616e50a9b8a73304a7015398096e252798b9b3b968a67b524eefb0fdeacc57c4d960f0ec6432abe1c1e24be815b88c5d18 languageName: node linkType: hard -"@eslint/js@npm:8.57.1": - version: 8.57.1 - resolution: "@eslint/js@npm:8.57.1" - checksum: 10/7562b21be10c2adbfa4aa5bb2eccec2cb9ac649a3569560742202c8d1cb6c931ce634937a2f0f551e078403a1c1285d6c2c0aa345dafc986149665cd69fe8b59 +"@eslint/config-helpers@npm:^0.4.2": + version: 0.4.2 + resolution: "@eslint/config-helpers@npm:0.4.2" + dependencies: + "@eslint/core": "npm:^0.17.0" + checksum: 10/3f2b4712d8e391c36ec98bc200f7dea423dfe518e42956569666831b89ede83b33120c761dfd3ab6347d8e8894a6d4af47254a18d464a71c6046fd88065f6daf + languageName: node + linkType: hard + +"@eslint/core@npm:^0.17.0": + version: 0.17.0 + resolution: "@eslint/core@npm:0.17.0" + dependencies: + "@types/json-schema": "npm:^7.0.15" + checksum: 10/f9a428cc651ec15fb60d7d60c2a7bacad4666e12508320eafa98258e976fafaa77d7be7be91519e75f801f15f830105420b14a458d4aab121a2b0a59bc43517b + languageName: node + linkType: hard + +"@eslint/eslintrc@npm:^3.3.1": + version: 3.3.3 + resolution: "@eslint/eslintrc@npm:3.3.3" + dependencies: + ajv: "npm:^6.12.4" + debug: "npm:^4.3.2" + espree: "npm:^10.0.1" + globals: "npm:^14.0.0" + ignore: "npm:^5.2.0" + import-fresh: "npm:^3.2.1" + js-yaml: "npm:^4.1.1" + minimatch: "npm:^3.1.2" + strip-json-comments: "npm:^3.1.1" + checksum: 10/b586a364ff15ce1b68993aefc051ca330b1fece15fb5baf4a708d00113f9a14895cffd84a5f24c5a97bd4b4321130ab2314f90aa462a250f6b859c2da2cba1f3 + languageName: node + linkType: hard + +"@eslint/js@npm:9.39.2": + version: 9.39.2 + resolution: "@eslint/js@npm:9.39.2" + checksum: 10/6b7f676746f3111b5d1b23715319212ab9297868a0fa9980d483c3da8965d5841673aada2d5653e85a3f7156edee0893a7ae7035211b4efdcb2848154bb947f2 + languageName: node + linkType: hard + +"@eslint/object-schema@npm:^2.1.7": + version: 2.1.7 + resolution: "@eslint/object-schema@npm:2.1.7" + checksum: 10/946ef5d6235b4d1c0907c6c6e6429c8895f535380c562b7705c131f63f2e961b06e8785043c86a293da48e0a60c6286d98ba395b8b32ea55561fe6e4417cb7e4 + languageName: node + linkType: hard + +"@eslint/plugin-kit@npm:^0.4.1": + version: 0.4.1 + resolution: "@eslint/plugin-kit@npm:0.4.1" + dependencies: + "@eslint/core": "npm:^0.17.0" + levn: "npm:^0.4.1" + checksum: 10/c5947d0ffeddca77d996ac1b886a66060c1a15ed1d5e425d0c7e7d7044a4bd3813fc968892d03950a7831c9b89368a2f7b281e45dd3c74a048962b74bf3a1cb4 languageName: node linkType: hard @@ -455,14 +501,20 @@ __metadata: languageName: node linkType: hard -"@humanwhocodes/config-array@npm:^0.13.0": - version: 0.13.0 - resolution: "@humanwhocodes/config-array@npm:0.13.0" +"@humanfs/core@npm:^0.19.1": + version: 0.19.1 + resolution: "@humanfs/core@npm:0.19.1" + checksum: 10/270d936be483ab5921702623bc74ce394bf12abbf57d9145a69e8a0d1c87eb1c768bd2d93af16c5705041e257e6d9cc7529311f63a1349f3678abc776fc28523 + languageName: node + linkType: hard + +"@humanfs/node@npm:^0.16.6": + version: 0.16.7 + resolution: "@humanfs/node@npm:0.16.7" dependencies: - "@humanwhocodes/object-schema": "npm:^2.0.3" - debug: "npm:^4.3.1" - minimatch: "npm:^3.0.5" - checksum: 10/524df31e61a85392a2433bf5d03164e03da26c03d009f27852e7dcfdafbc4a23f17f021dacf88e0a7a9fe04ca032017945d19b57a16e2676d9114c22a53a9d11 + "@humanfs/core": "npm:^0.19.1" + "@humanwhocodes/retry": "npm:^0.4.0" + checksum: 10/b3633d3dce898592cac515ba5e6693c78e6be92863541d3eaf2c009b10f52b2fa62ff6e6e06f240f2447ddbe7b5f1890bc34e9308470675c876eee207553a08d languageName: node linkType: hard @@ -473,10 +525,10 @@ __metadata: languageName: node linkType: hard -"@humanwhocodes/object-schema@npm:^2.0.3": - version: 2.0.3 - resolution: "@humanwhocodes/object-schema@npm:2.0.3" - checksum: 10/05bb99ed06c16408a45a833f03a732f59bf6184795d4efadd33238ff8699190a8c871ad1121241bb6501589a9598dc83bf25b99dcbcf41e155cdf36e35e937a3 +"@humanwhocodes/retry@npm:^0.4.0, @humanwhocodes/retry@npm:^0.4.2": + version: 0.4.3 + resolution: "@humanwhocodes/retry@npm:0.4.3" + checksum: 10/0b32cfd362bea7a30fbf80bb38dcaf77fee9c2cae477ee80b460871d03590110ac9c77d654f04ec5beaf71b6f6a89851bdf6c1e34ccdf2f686bd86fcd97d9e61 languageName: node linkType: hard @@ -1005,7 +1057,7 @@ __metadata: languageName: node linkType: hard -"@nodelib/fs.walk@npm:^1.2.3, @nodelib/fs.walk@npm:^1.2.8": +"@nodelib/fs.walk@npm:^1.2.3": version: 1.2.8 resolution: "@nodelib/fs.walk@npm:1.2.8" dependencies: @@ -1305,7 +1357,7 @@ __metadata: languageName: node linkType: hard -"@types/estree@npm:*, @types/estree@npm:^1.0.0": +"@types/estree@npm:*, @types/estree@npm:^1.0.0, @types/estree@npm:^1.0.6": version: 1.0.8 resolution: "@types/estree@npm:1.0.8" checksum: 10/25a4c16a6752538ffde2826c2cc0c6491d90e69cd6187bef4a006dd2c3c45469f049e643d7e516c515f21484dc3d48fd5c870be158a5beb72f5baf3dc43e4099 @@ -1321,6 +1373,13 @@ __metadata: languageName: node linkType: hard +"@types/json-schema@npm:^7.0.15": + version: 7.0.15 + resolution: "@types/json-schema@npm:7.0.15" + checksum: 10/1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7 + languageName: node + linkType: hard + "@types/json5@npm:^0.0.29": version: 0.0.29 resolution: "@types/json5@npm:0.0.29" @@ -1587,7 +1646,7 @@ __metadata: languageName: node linkType: hard -"@ungap/structured-clone@npm:^1.0.0, @ungap/structured-clone@npm:^1.2.0": +"@ungap/structured-clone@npm:^1.0.0": version: 1.3.0 resolution: "@ungap/structured-clone@npm:1.3.0" checksum: 10/80d6910946f2b1552a2406650051c91bbd1f24a6bf854354203d84fe2714b3e8ce4618f49cc3410494173a1c1e8e9777372fe68dce74bd45faf0a7a1a6ccf448 @@ -1745,7 +1804,7 @@ __metadata: languageName: node linkType: hard -"acorn@npm:^8.0.0, acorn@npm:^8.9.0": +"acorn@npm:^8.0.0, acorn@npm:^8.15.0": version: 8.15.0 resolution: "acorn@npm:8.15.0" bin: @@ -2277,7 +2336,7 @@ __metadata: languageName: node linkType: hard -"cross-spawn@npm:^7.0.2, cross-spawn@npm:^7.0.6": +"cross-spawn@npm:^7.0.6": version: 7.0.6 resolution: "cross-spawn@npm:7.0.6" dependencies: @@ -2439,7 +2498,7 @@ __metadata: "@uiw/react-codemirror": "npm:^4.23.7" chokidar: "npm:^3.6.0" clsx: "npm:^2.1.1" - eslint: "npm:^8" + eslint: "npm:^9" eslint-config-next: "npm:16.1.6" html-react-parser: "npm:^5.2.5" lightningcss: "npm:^1.28.2" @@ -2464,15 +2523,6 @@ __metadata: languageName: node linkType: hard -"doctrine@npm:^3.0.0": - version: 3.0.0 - resolution: "doctrine@npm:3.0.0" - dependencies: - esutils: "npm:^2.0.2" - checksum: 10/b4b28f1df5c563f7d876e7461254a4597b8cabe915abe94d7c5d1633fed263fcf9a85e8d3836591fc2d040108e822b0d32758e5ec1fe31c590dc7e08086e3e48 - languageName: node - linkType: hard - "dom-serializer@npm:^2.0.0": version: 2.0.0 resolution: "dom-serializer@npm:2.0.0" @@ -2933,17 +2983,17 @@ __metadata: languageName: node linkType: hard -"eslint-scope@npm:^7.2.2": - version: 7.2.2 - resolution: "eslint-scope@npm:7.2.2" +"eslint-scope@npm:^8.4.0": + version: 8.4.0 + resolution: "eslint-scope@npm:8.4.0" dependencies: esrecurse: "npm:^4.3.0" estraverse: "npm:^5.2.0" - checksum: 10/5c660fb905d5883ad018a6fea2b49f3cb5b1cbf2cd4bd08e98646e9864f9bc2c74c0839bed2d292e90a4a328833accc197c8f0baed89cbe8d605d6f918465491 + checksum: 10/e8e611701f65375e034c62123946e628894f0b54aa8cb11abe224816389abe5cd74cf16b62b72baa36504f22d1a958b9b8b0169b82397fe2e7997674c0d09b06 languageName: node linkType: hard -"eslint-visitor-keys@npm:^3.4.1, eslint-visitor-keys@npm:^3.4.3": +"eslint-visitor-keys@npm:^3.4.3": version: 3.4.3 resolution: "eslint-visitor-keys@npm:3.4.3" checksum: 10/3f357c554a9ea794b094a09bd4187e5eacd1bc0d0653c3adeb87962c548e6a1ab8f982b86963ae1337f5d976004146536dcee5d0e2806665b193fbfbf1a9231b @@ -2957,71 +3007,72 @@ __metadata: languageName: node linkType: hard -"eslint@npm:^8": - version: 8.57.1 - resolution: "eslint@npm:8.57.1" +"eslint@npm:^9": + version: 9.39.2 + resolution: "eslint@npm:9.39.2" dependencies: - "@eslint-community/eslint-utils": "npm:^4.2.0" - "@eslint-community/regexpp": "npm:^4.6.1" - "@eslint/eslintrc": "npm:^2.1.4" - "@eslint/js": "npm:8.57.1" - "@humanwhocodes/config-array": "npm:^0.13.0" + "@eslint-community/eslint-utils": "npm:^4.8.0" + "@eslint-community/regexpp": "npm:^4.12.1" + "@eslint/config-array": "npm:^0.21.1" + "@eslint/config-helpers": "npm:^0.4.2" + "@eslint/core": "npm:^0.17.0" + "@eslint/eslintrc": "npm:^3.3.1" + "@eslint/js": "npm:9.39.2" + "@eslint/plugin-kit": "npm:^0.4.1" + "@humanfs/node": "npm:^0.16.6" "@humanwhocodes/module-importer": "npm:^1.0.1" - "@nodelib/fs.walk": "npm:^1.2.8" - "@ungap/structured-clone": "npm:^1.2.0" + "@humanwhocodes/retry": "npm:^0.4.2" + "@types/estree": "npm:^1.0.6" ajv: "npm:^6.12.4" chalk: "npm:^4.0.0" - cross-spawn: "npm:^7.0.2" + cross-spawn: "npm:^7.0.6" debug: "npm:^4.3.2" - doctrine: "npm:^3.0.0" escape-string-regexp: "npm:^4.0.0" - eslint-scope: "npm:^7.2.2" - eslint-visitor-keys: "npm:^3.4.3" - espree: "npm:^9.6.1" - esquery: "npm:^1.4.2" + eslint-scope: "npm:^8.4.0" + eslint-visitor-keys: "npm:^4.2.1" + espree: "npm:^10.4.0" + esquery: "npm:^1.5.0" esutils: "npm:^2.0.2" fast-deep-equal: "npm:^3.1.3" - file-entry-cache: "npm:^6.0.1" + file-entry-cache: "npm:^8.0.0" find-up: "npm:^5.0.0" glob-parent: "npm:^6.0.2" - globals: "npm:^13.19.0" - graphemer: "npm:^1.4.0" ignore: "npm:^5.2.0" imurmurhash: "npm:^0.1.4" is-glob: "npm:^4.0.0" - is-path-inside: "npm:^3.0.3" - js-yaml: "npm:^4.1.0" json-stable-stringify-without-jsonify: "npm:^1.0.1" - levn: "npm:^0.4.1" lodash.merge: "npm:^4.6.2" minimatch: "npm:^3.1.2" natural-compare: "npm:^1.4.0" optionator: "npm:^0.9.3" - strip-ansi: "npm:^6.0.1" - text-table: "npm:^0.2.0" + peerDependencies: + jiti: "*" + peerDependenciesMeta: + jiti: + optional: true bin: eslint: bin/eslint.js - checksum: 10/5504fa24879afdd9f9929b2fbfc2ee9b9441a3d464efd9790fbda5f05738858530182029f13323add68d19fec749d3ab4a70320ded091ca4432b1e9cc4ed104c + checksum: 10/53ff0e9c8264e7e8d40d50fdc0c0df0b701cfc5289beedfb686c214e3e7b199702f894bbd1bb48653727bb1ecbd1147cf5f555a4ae71e1daf35020cdc9072d9f languageName: node linkType: hard -"espree@npm:^9.6.0, espree@npm:^9.6.1": - version: 9.6.1 - resolution: "espree@npm:9.6.1" +"espree@npm:^10.0.1, espree@npm:^10.4.0": + version: 10.4.0 + resolution: "espree@npm:10.4.0" dependencies: - acorn: "npm:^8.9.0" + acorn: "npm:^8.15.0" acorn-jsx: "npm:^5.3.2" - eslint-visitor-keys: "npm:^3.4.1" - checksum: 10/255ab260f0d711a54096bdeda93adff0eadf02a6f9b92f02b323e83a2b7fc258797919437ad331efec3930475feb0142c5ecaaf3cdab4befebd336d47d3f3134 + eslint-visitor-keys: "npm:^4.2.1" + checksum: 10/9b355b32dbd1cc9f57121d5ee3be258fab87ebeb7c83fc6c02e5af1a74fc8c5ba79fe8c663e69ea112c3e84a1b95e6a2067ac4443ee7813bb85ac7581acb8bf9 languageName: node linkType: hard -"esquery@npm:^1.4.2": - version: 1.6.0 - resolution: "esquery@npm:1.6.0" +"esquery@npm:^1.5.0": + version: 1.7.0 + resolution: "esquery@npm:1.7.0" dependencies: estraverse: "npm:^5.1.0" - checksum: 10/c587fb8ec9ed83f2b1bc97cf2f6854cc30bf784a79d62ba08c6e358bf22280d69aee12827521cf38e69ae9761d23fb7fde593ce315610f85655c139d99b05e5a + checksum: 10/4afaf3089367e1f5885caa116ef386dffd8bfd64da21fd3d0e56e938d2667cfb2e5400ab4a825aa70e799bb3741e5b5d63c0b94d86e2d4cf3095c9e64b2f5a15 languageName: node linkType: hard @@ -3192,12 +3243,12 @@ __metadata: languageName: node linkType: hard -"file-entry-cache@npm:^6.0.1": - version: 6.0.1 - resolution: "file-entry-cache@npm:6.0.1" +"file-entry-cache@npm:^8.0.0": + version: 8.0.0 + resolution: "file-entry-cache@npm:8.0.0" dependencies: - flat-cache: "npm:^3.0.4" - checksum: 10/099bb9d4ab332cb93c48b14807a6918a1da87c45dce91d4b61fd40e6505d56d0697da060cb901c729c90487067d93c9243f5da3dc9c41f0358483bfdebca736b + flat-cache: "npm:^4.0.0" + checksum: 10/afe55c4de4e0d226a23c1eae62a7219aafb390859122608a89fa4df6addf55c7fd3f1a2da6f5b41e7cdff496e4cf28bbd215d53eab5c817afa96d2b40c81bfb0 languageName: node linkType: hard @@ -3220,14 +3271,13 @@ __metadata: languageName: node linkType: hard -"flat-cache@npm:^3.0.4": - version: 3.2.0 - resolution: "flat-cache@npm:3.2.0" +"flat-cache@npm:^4.0.0": + version: 4.0.1 + resolution: "flat-cache@npm:4.0.1" dependencies: flatted: "npm:^3.2.9" - keyv: "npm:^4.5.3" - rimraf: "npm:^3.0.2" - checksum: 10/02381c6ece5e9fa5b826c9bbea481d7fd77645d96e4b0b1395238124d581d10e56f17f723d897b6d133970f7a57f0fab9148cbbb67237a0a0ffe794ba60c0c70 + keyv: "npm:^4.5.4" + checksum: 10/58ce851d9045fffc7871ce2bd718bc485ad7e777bf748c054904b87c351ff1080c2c11da00788d78738bfb51b71e4d5ea12d13b98eb36e3358851ffe495b62dc languageName: node linkType: hard @@ -3288,13 +3338,6 @@ __metadata: languageName: node linkType: hard -"fs.realpath@npm:^1.0.0": - version: 1.0.0 - resolution: "fs.realpath@npm:1.0.0" - checksum: 10/e703107c28e362d8d7b910bbcbfd371e640a3bb45ae157a362b5952c0030c0b6d4981140ec319b347bce7adc025dd7813da1ff908a945ac214d64f5402a51b96 - languageName: node - linkType: hard - "fsevents@npm:~2.3.2": version: 2.3.3 resolution: "fsevents@npm:2.3.3" @@ -3431,20 +3474,6 @@ __metadata: languageName: node linkType: hard -"glob@npm:^7.1.3": - version: 7.2.3 - resolution: "glob@npm:7.2.3" - dependencies: - fs.realpath: "npm:^1.0.0" - inflight: "npm:^1.0.4" - inherits: "npm:2" - minimatch: "npm:^3.1.1" - once: "npm:^1.3.0" - path-is-absolute: "npm:^1.0.0" - checksum: 10/59452a9202c81d4508a43b8af7082ca5c76452b9fcc4a9ab17655822e6ce9b21d4f8fbadabe4fe3faef448294cec249af305e2cd824b7e9aaf689240e5e96a7b - languageName: node - linkType: hard - "globals@npm:16.4.0": version: 16.4.0 resolution: "globals@npm:16.4.0" @@ -3452,12 +3481,10 @@ __metadata: languageName: node linkType: hard -"globals@npm:^13.19.0": - version: 13.24.0 - resolution: "globals@npm:13.24.0" - dependencies: - type-fest: "npm:^0.20.2" - checksum: 10/62c5b1997d06674fc7191d3e01e324d3eda4d65ac9cc4e78329fa3b5c4fd42a0e1c8722822497a6964eee075255ce21ccf1eec2d83f92ef3f06653af4d0ee28e +"globals@npm:^14.0.0": + version: 14.0.0 + resolution: "globals@npm:14.0.0" + checksum: 10/03939c8af95c6df5014b137cac83aa909090c3a3985caef06ee9a5a669790877af8698ab38007e4c0186873adc14c0b13764acc754b16a754c216cc56aa5f021 languageName: node linkType: hard @@ -3485,13 +3512,6 @@ __metadata: languageName: node linkType: hard -"graphemer@npm:^1.4.0": - version: 1.4.0 - resolution: "graphemer@npm:1.4.0" - checksum: 10/6dd60dba97007b21e3a829fab3f771803cc1292977fe610e240ea72afd67e5690ac9eeaafc4a99710e78962e5936ab5a460787c2a1180f1cb0ccfac37d29f897 - languageName: node - linkType: hard - "has-bigints@npm:^1.0.2": version: 1.1.0 resolution: "has-bigints@npm:1.1.0" @@ -3754,23 +3774,6 @@ __metadata: languageName: node linkType: hard -"inflight@npm:^1.0.4": - version: 1.0.6 - resolution: "inflight@npm:1.0.6" - dependencies: - once: "npm:^1.3.0" - wrappy: "npm:1" - checksum: 10/d2ebd65441a38c8336c223d1b80b921b9fa737e37ea466fd7e253cb000c64ae1f17fa59e68130ef5bda92cfd8d36b83d37dab0eb0a4558bcfec8e8cdfd2dcb67 - languageName: node - linkType: hard - -"inherits@npm:2": - version: 2.0.4 - resolution: "inherits@npm:2.0.4" - checksum: 10/cd45e923bee15186c07fa4c89db0aace24824c482fb887b528304694b2aa6ff8a898da8657046a5dcf3e46cd6db6c61629551f9215f208d7c3f157cf9b290521 - languageName: node - linkType: hard - "inline-style-parser@npm:0.2.7": version: 0.2.7 resolution: "inline-style-parser@npm:0.2.7" @@ -4000,13 +4003,6 @@ __metadata: languageName: node linkType: hard -"is-path-inside@npm:^3.0.3": - version: 3.0.3 - resolution: "is-path-inside@npm:3.0.3" - checksum: 10/abd50f06186a052b349c15e55b182326f1936c89a78bf6c8f2b707412517c097ce04bc49a0ca221787bc44e1049f51f09a2ffb63d22899051988d3a618ba13e9 - languageName: node - linkType: hard - "is-plain-obj@npm:^4.0.0": version: 4.1.0 resolution: "is-plain-obj@npm:4.1.0" @@ -4153,7 +4149,7 @@ __metadata: languageName: node linkType: hard -"js-yaml@npm:^4.1.0": +"js-yaml@npm:^4.1.1": version: 4.1.1 resolution: "js-yaml@npm:4.1.1" dependencies: @@ -4226,7 +4222,7 @@ __metadata: languageName: node linkType: hard -"keyv@npm:^4.5.3": +"keyv@npm:^4.5.4": version: 4.5.4 resolution: "keyv@npm:4.5.4" dependencies: @@ -4959,7 +4955,7 @@ __metadata: languageName: node linkType: hard -"minimatch@npm:^3.0.5, minimatch@npm:^3.1.1, minimatch@npm:^3.1.2": +"minimatch@npm:^3.1.2": version: 3.1.2 resolution: "minimatch@npm:3.1.2" dependencies: @@ -5341,15 +5337,6 @@ __metadata: languageName: node linkType: hard -"once@npm:^1.3.0": - version: 1.4.0 - resolution: "once@npm:1.4.0" - dependencies: - wrappy: "npm:1" - checksum: 10/cd0a88501333edd640d95f0d2700fbde6bff20b3d4d9bdc521bdd31af0656b5706570d6c6afe532045a20bb8dc0849f8332d6f2a416e0ba6d3d3b98806c7db68 - languageName: node - linkType: hard - "oniguruma-parser@npm:^0.12.1": version: 0.12.1 resolution: "oniguruma-parser@npm:0.12.1" @@ -5456,13 +5443,6 @@ __metadata: languageName: node linkType: hard -"path-is-absolute@npm:^1.0.0": - version: 1.0.1 - resolution: "path-is-absolute@npm:1.0.1" - checksum: 10/060840f92cf8effa293bcc1bea81281bd7d363731d214cbe5c227df207c34cd727430f70c6037b5159c8a870b9157cba65e775446b0ab06fd5ecc7e54615a3b8 - languageName: node - linkType: hard - "path-key@npm:^3.1.0": version: 3.1.1 resolution: "path-key@npm:3.1.1" @@ -5874,17 +5854,6 @@ __metadata: languageName: node linkType: hard -"rimraf@npm:^3.0.2": - version: 3.0.2 - resolution: "rimraf@npm:3.0.2" - dependencies: - glob: "npm:^7.1.3" - bin: - rimraf: bin.js - checksum: 10/063ffaccaaaca2cfd0ef3beafb12d6a03dd7ff1260d752d62a6077b5dfff6ae81bea571f655bb6b589d366930ec1bdd285d40d560c0dae9b12f125e54eb743d5 - languageName: node - linkType: hard - "run-parallel@npm:^1.1.9": version: 1.2.0 resolution: "run-parallel@npm:1.2.0" @@ -6473,13 +6442,6 @@ __metadata: languageName: node linkType: hard -"text-table@npm:^0.2.0": - version: 0.2.0 - resolution: "text-table@npm:0.2.0" - checksum: 10/4383b5baaeffa9bb4cda2ac33a4aa2e6d1f8aaf811848bf73513a9b88fd76372dc461f6fd6d2e9cb5100f48b473be32c6f95bd983509b7d92bb4d92c10747452 - languageName: node - linkType: hard - "tinyglobby@npm:^0.2.12, tinyglobby@npm:^0.2.13, tinyglobby@npm:^0.2.15": version: 0.2.15 resolution: "tinyglobby@npm:0.2.15" @@ -6550,13 +6512,6 @@ __metadata: languageName: node linkType: hard -"type-fest@npm:^0.20.2": - version: 0.20.2 - resolution: "type-fest@npm:0.20.2" - checksum: 10/8907e16284b2d6cfa4f4817e93520121941baba36b39219ea36acfe64c86b9dbc10c9941af450bd60832c8f43464974d51c0957f9858bc66b952b66b6914cbb9 - languageName: node - linkType: hard - "type-fest@npm:^4.31.0": version: 4.41.0 resolution: "type-fest@npm:4.41.0" @@ -7027,13 +6982,6 @@ __metadata: languageName: node linkType: hard -"wrappy@npm:1": - version: 1.0.2 - resolution: "wrappy@npm:1.0.2" - checksum: 10/159da4805f7e84a3d003d8841557196034155008f817172d4e986bd591f74aa82aa7db55929a54222309e01079a65a92a9e6414da5a6aa4b01ee44a511ac3ee5 - languageName: node - linkType: hard - "yallist@npm:^3.0.2": version: 3.1.1 resolution: "yallist@npm:3.1.1" From e7159c00fe094e1ec09cb521643f146fe3cfd065 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 13:34:12 +0000 Subject: [PATCH 04/14] Cleanup changeset Signed-off-by: Charles de Dreuille --- .changeset/fix-nextjs16-css-modules.md | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/.changeset/fix-nextjs16-css-modules.md b/.changeset/fix-nextjs16-css-modules.md index 6e49f893c0..1cc223fb0d 100644 --- a/.changeset/fix-nextjs16-css-modules.md +++ b/.changeset/fix-nextjs16-css-modules.md @@ -2,10 +2,6 @@ '@backstage/ui': patch --- -Fixed CSS Module purity errors for Next.js 16 compatibility - -After upgrading to Next.js 16.1.6, the build failed with CSS Module purity errors. Next.js 16 with Turbopack enforces stricter validation requiring global selectors like `[data-theme='dark']` to be combined with local classes. - -Changed nested selector structure from `[data-theme='dark'] { .class { } }` to flattened `[data-theme='dark'] .class { }`. +Fixed CSS Module syntax to comply with Next.js 16 Turbopack validation by flattening nested dark theme selectors. **Affected components:** popover, tooltip From 2398c3d1d90fa632831638a11f90bdac53a8d447 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 13:45:37 +0000 Subject: [PATCH 05/14] Update tsconfig.json Signed-off-by: Charles de Dreuille --- docs-ui/tsconfig.json | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/docs-ui/tsconfig.json b/docs-ui/tsconfig.json index 2c7d5e0a3b..bb167b721d 100644 --- a/docs-ui/tsconfig.json +++ b/docs-ui/tsconfig.json @@ -1,10 +1,6 @@ { "compilerOptions": { - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "strict": false, @@ -23,9 +19,7 @@ } ], "paths": { - "@/*": [ - "./src/*" - ] + "@/*": ["./src/*"] }, "target": "ES2017" }, @@ -39,7 +33,5 @@ "dist/dev/types/**/*.ts", ".next/dev/types/**/*.ts" ], - "exclude": [ - "node_modules" - ] + "exclude": ["node_modules"] } From a416231b1c3d4da0e93f706669bab390907598f1 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 14:19:48 +0000 Subject: [PATCH 06/14] Update accept.txt Signed-off-by: Charles de Dreuille --- .github/vale/config/vocabularies/Backstage/accept.txt | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/vale/config/vocabularies/Backstage/accept.txt b/.github/vale/config/vocabularies/Backstage/accept.txt index 62277b26d6..d55d6ab15a 100644 --- a/.github/vale/config/vocabularies/Backstage/accept.txt +++ b/.github/vale/config/vocabularies/Backstage/accept.txt @@ -527,6 +527,7 @@ transpilers trixie truthy tsconfig +Turbopack TSDoc typeahead ui From 9db03083a0b5e2c22955975ce2bfba51f242afb5 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 14:21:02 +0000 Subject: [PATCH 07/14] Update fix-nextjs16-css-modules.md Signed-off-by: Charles de Dreuille --- .changeset/fix-nextjs16-css-modules.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/fix-nextjs16-css-modules.md b/.changeset/fix-nextjs16-css-modules.md index 1cc223fb0d..faa60fc06a 100644 --- a/.changeset/fix-nextjs16-css-modules.md +++ b/.changeset/fix-nextjs16-css-modules.md @@ -4,4 +4,4 @@ Fixed CSS Module syntax to comply with Next.js 16 Turbopack validation by flattening nested dark theme selectors. -**Affected components:** popover, tooltip +**Affected components:** Popover, Tooltip From ad435e4344d9d77d640816bc228eb4262b95a007 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 15:00:58 +0000 Subject: [PATCH 08/14] Fix React hooks ESLint errors without disabling rules Refactored components to avoid synchronous setState calls in effects by using proper React patterns: - TableOfContents: Use requestAnimationFrame to defer setState calls and useLayoutEffect for DOM measurements - CustomTheme: Use lazy state initialization for isClient and defer theme loading with requestAnimationFrame - PlaygroundContext: Use lazy initialization for localStorage hydration These changes maintain functionality while satisfying the strict react-hooks/set-state-in-effect ESLint rule. Signed-off-by: Charles de Dreuille --- docs-ui/eslint.config.mjs | 2 - .../components/CustomTheme/customTheme.tsx | 11 ++- .../TableOfContents/TableOfContents.tsx | 70 +++++++++++-------- docs-ui/src/utils/playground-context.tsx | 37 ++++------ 4 files changed, 59 insertions(+), 61 deletions(-) diff --git a/docs-ui/eslint.config.mjs b/docs-ui/eslint.config.mjs index 3396ce7946..2cb66fd509 100644 --- a/docs-ui/eslint.config.mjs +++ b/docs-ui/eslint.config.mjs @@ -9,8 +9,6 @@ const eslintConfig = defineConfig([ 'notice/notice': 'off', 'react/forbid-elements': 'off', 'jsx-a11y/alt-text': 'off', - '@next/next/no-css-tags': 'off', - 'react-hooks/set-state-in-effect': 'warn', }, }, ]); diff --git a/docs-ui/src/components/CustomTheme/customTheme.tsx b/docs-ui/src/components/CustomTheme/customTheme.tsx index ae765d7d88..3a4ae0edc8 100644 --- a/docs-ui/src/components/CustomTheme/customTheme.tsx +++ b/docs-ui/src/components/CustomTheme/customTheme.tsx @@ -46,7 +46,7 @@ const myTheme = createTheme({ }); export const CustomTheme = () => { - const [isClient, setIsClient] = useState(false); + const [isClient, setIsClient] = useState(() => typeof window !== 'undefined'); const [open, setOpen] = useState(true); const [customTheme, setCustomTheme] = useState(undefined); const { selectedThemeName } = usePlayground(); @@ -73,7 +73,10 @@ export const CustomTheme = () => { storedTheme = defaultTheme; localStorage.setItem('customThemeCss', storedTheme); } - setCustomTheme(storedTheme); + // Defer setState to avoid synchronous call in effect + requestAnimationFrame(() => { + setCustomTheme(storedTheme!); + }); updateStyleElement(storedTheme); } else { const styleElement = document.getElementById( @@ -85,10 +88,6 @@ export const CustomTheme = () => { } }, [selectedThemeName]); - useEffect(() => { - setIsClient(true); - }, []); - const handleSave = () => { if (customTheme) { localStorage.setItem('customThemeCss', customTheme); diff --git a/docs-ui/src/components/TableOfContents/TableOfContents.tsx b/docs-ui/src/components/TableOfContents/TableOfContents.tsx index d18265415b..3da5b95b15 100644 --- a/docs-ui/src/components/TableOfContents/TableOfContents.tsx +++ b/docs-ui/src/components/TableOfContents/TableOfContents.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useLayoutEffect } from 'react'; import { usePathname } from 'next/navigation'; import styles from './TableOfContents.module.css'; @@ -17,6 +17,29 @@ export function TableOfContents() { const [indicatorHeight, setIndicatorHeight] = useState(0); const pathname = usePathname(); + // Update indicator position when activeId changes + useLayoutEffect(() => { + if (!activeId) return; + + // Use requestAnimationFrame to defer setState call + const rafId = requestAnimationFrame(() => { + const activeElement = document.querySelector( + `[data-toc-id="${activeId}"]`, + ) as HTMLElement; + if (activeElement) { + const list = activeElement.closest('ul'); + if (list) { + const listRect = list.getBoundingClientRect(); + const elementRect = activeElement.getBoundingClientRect(); + setIndicatorTop(elementRect.top - listRect.top); + setIndicatorHeight(elementRect.height); + } + } + }); + + return () => cancelAnimationFrame(rafId); + }, [activeId, headings]); + useEffect(() => { // Extract all H2 and H3 headings from the document const elements = Array.from( @@ -29,18 +52,6 @@ export function TableOfContents() { level: parseInt(element.tagName.substring(1)), })); - setHeadings(headingData); - - // Set initial active heading (first visible heading or first heading) - if (headingData.length > 0) { - const viewportTop = window.scrollY + 100; // offset for header - const visibleHeading = elements.find(element => { - const rect = element.getBoundingClientRect(); - return rect.top + window.scrollY >= viewportTop - 200; - }); - setActiveId(visibleHeading?.id || headingData[0].id); - } - // Set up IntersectionObserver to track visible headings const observerOptions = { rootMargin: '-80px 0px -80% 0px', @@ -62,29 +73,26 @@ export function TableOfContents() { elements.forEach(element => observer.observe(element)); + // Initialize headings and active ID after observer is set up + requestAnimationFrame(() => { + setHeadings(headingData); + + // Set initial active heading (first visible heading or first heading) + if (headingData.length > 0) { + const viewportTop = window.scrollY + 100; // offset for header + const visibleHeading = elements.find(element => { + const rect = element.getBoundingClientRect(); + return rect.top + window.scrollY >= viewportTop - 200; + }); + setActiveId(visibleHeading?.id || headingData[0].id); + } + }); + return () => { elements.forEach(element => observer.unobserve(element)); }; }, [pathname]); - // Update indicator position when activeId changes - useEffect(() => { - if (activeId) { - const activeElement = document.querySelector( - `[data-toc-id="${activeId}"]`, - ) as HTMLElement; - if (activeElement) { - const list = activeElement.closest('ul'); - if (list) { - const listRect = list.getBoundingClientRect(); - const elementRect = activeElement.getBoundingClientRect(); - setIndicatorTop(elementRect.top - listRect.top); - setIndicatorHeight(elementRect.height); - } - } - } - }, [activeId, headings]); - const handleClick = (id: string) => { const element = document.getElementById(id); if (element) { diff --git a/docs-ui/src/utils/playground-context.tsx b/docs-ui/src/utils/playground-context.tsx index a1cee6ecba..f4496787a5 100644 --- a/docs-ui/src/utils/playground-context.tsx +++ b/docs-ui/src/utils/playground-context.tsx @@ -22,13 +22,13 @@ const PlaygroundContext = createContext<{ setSelectedThemeName: (themeName: ThemeName) => void; }>({ selectedScreenSizes: [], - setSelectedScreenSizes: () => {}, + setSelectedScreenSizes: () => { }, selectedComponents: [], - setSelectedComponents: () => {}, + setSelectedComponents: () => { }, selectedTheme: new Set(['light']), - setSelectedTheme: () => {}, + setSelectedTheme: () => { }, selectedThemeName: 'backstage', - setSelectedThemeName: () => {}, + setSelectedThemeName: () => { }, }); // Create a provider component @@ -40,37 +40,30 @@ export const PlaygroundProvider = ({ children }: { children: ReactNode }) => { const [selectedComponents, setSelectedComponents] = useState( components.map(component => component.slug), ); - const [selectedTheme, setSelectedTheme] = useState>( - new Set(['light']), - ); - const [selectedThemeName, setSelectedThemeName] = - useState('backstage'); - // Load saved theme from localStorage after hydration - useEffect(() => { - if (isBrowser) { + // Use lazy initialization to load from localStorage + const [selectedTheme, setSelectedTheme] = useState>(() => { + if (typeof window !== 'undefined') { const savedThemeString = localStorage.getItem('theme-mode'); if (savedThemeString) { - // Parse the comma-separated string back into a Set const themeArray = savedThemeString .split(',') .filter(Boolean) as Theme[]; - setSelectedTheme(new Set(themeArray)); - } else { - setSelectedTheme(new Set(['light'])); + return new Set(themeArray); } } - }, [isBrowser]); + return new Set(['light']); + }); - // Load saved theme name from localStorage after hydration - useEffect(() => { - if (isBrowser) { + const [selectedThemeName, setSelectedThemeName] = useState(() => { + if (typeof window !== 'undefined') { const savedThemeName = localStorage.getItem('theme-name') as ThemeName; if (savedThemeName) { - setSelectedThemeName(savedThemeName); + return savedThemeName; } } - }, [isBrowser]); + return 'backstage'; + }); useEffect(() => { if (isBrowser) { From 73b56cc9c4873466f87d2d642b00050dcfede05b Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 15:10:00 +0000 Subject: [PATCH 09/14] Move theme CSS files from public to src and fix imports Next.js cannot import CSS from the /public directory - it's for static assets only. Moved theme-backstage.css and theme-spotify.css from /public to /src/css and updated imports to use proper relative paths. This fixes the @next/next/no-css-tags ESLint warnings and follows Next.js best practices for CSS imports. Signed-off-by: Charles de Dreuille --- docs-ui/src/app/layout.tsx | 7 +++---- docs-ui/{public => src/css}/theme-backstage.css | 0 docs-ui/{public => src/css}/theme-spotify.css | 0 3 files changed, 3 insertions(+), 4 deletions(-) rename docs-ui/{public => src/css}/theme-backstage.css (100%) rename docs-ui/{public => src/css}/theme-spotify.css (100%) diff --git a/docs-ui/src/app/layout.tsx b/docs-ui/src/app/layout.tsx index 3647c572f5..d6a36ef9ac 100644 --- a/docs-ui/src/app/layout.tsx +++ b/docs-ui/src/app/layout.tsx @@ -8,6 +8,9 @@ import { MobileBottomNav } from '@/components/MobileBottomNav'; import styles from './layout.module.css'; import '../css/globals.css'; +import '../css/theme-backstage.css'; +import '../css/theme-spotify.css'; + export const metadata: Metadata = { title: 'Backstage UI', @@ -47,10 +50,6 @@ export default async function RootLayout({ data-theme-name="backstage" suppressHydrationWarning > - - - - diff --git a/docs-ui/public/theme-backstage.css b/docs-ui/src/css/theme-backstage.css similarity index 100% rename from docs-ui/public/theme-backstage.css rename to docs-ui/src/css/theme-backstage.css diff --git a/docs-ui/public/theme-spotify.css b/docs-ui/src/css/theme-spotify.css similarity index 100% rename from docs-ui/public/theme-spotify.css rename to docs-ui/src/css/theme-spotify.css From 29006ec722dc3d7749bc783015605a9d521200dd Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 15:14:03 +0000 Subject: [PATCH 10/14] Update sync-css script to output to src/css instead of public Changed the CSS sync script to output theme files to src/css/ instead of public/, matching the new location for theme CSS files. Updated variable names from publicPath to outputPath for clarity and updated log messages to reflect the correct output location. Signed-off-by: Charles de Dreuille --- docs-ui/scripts/sync-css.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/docs-ui/scripts/sync-css.js b/docs-ui/scripts/sync-css.js index d68a852ce0..a9c228ac27 100644 --- a/docs-ui/scripts/sync-css.js +++ b/docs-ui/scripts/sync-css.js @@ -6,7 +6,7 @@ const chokidar = require('chokidar'); // Configuration const config = { UIPath: '../../packages/ui', - publicPath: '../public', + outputPath: '../src/css', files: [ { source: 'css/styles.css', @@ -24,13 +24,13 @@ const config = { class CSSSync { constructor() { this.UIPath = path.resolve(__dirname, config.UIPath); - this.publicPath = path.resolve(__dirname, config.publicPath); + this.outputPath = path.resolve(__dirname, config.outputPath); this.isWatching = process.argv.includes('--watch'); } async syncFile(fileConfig) { const sourcePath = path.join(this.UIPath, fileConfig.source); - const destPath = path.join(this.publicPath, fileConfig.destination); + const destPath = path.join(this.outputPath, fileConfig.destination); try { // Check if source file exists @@ -76,9 +76,9 @@ class CSSSync { ); if (successCount > 0) { - console.log('\nšŸ“ Available CSS files in public/:'); + console.log('\nšŸ“ Available CSS files in src/css/:'); config.files.forEach(file => { - const destPath = path.join(this.publicPath, file.destination); + const destPath = path.join(this.outputPath, file.destination); if (fs.existsSync(destPath)) { const stats = fs.statSync(destPath); const size = (stats.size / 1024).toFixed(2); @@ -129,7 +129,7 @@ class CSSSync { async run() { console.log('šŸŽØ BUI CSS Sync Tool\n'); console.log(`šŸ“‚ BUI path: ${this.UIPath}`); - console.log(`šŸ“‚ Public path: ${this.publicPath}\n`); + console.log(`šŸ“‚ Output path: ${this.outputPath}\n`); // Initial sync await this.syncAll(); From 62a3add97f475bb92759ee1664f73c2136b26c4e Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 15:15:23 +0000 Subject: [PATCH 11/14] Fix some other issues Signed-off-by: Charles de Dreuille --- docs-ui/scripts/sync-changelog.mjs | 1 - docs-ui/src/components/TableOfContents/TableOfContents.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/docs-ui/scripts/sync-changelog.mjs b/docs-ui/scripts/sync-changelog.mjs index 0745979430..fa59db741b 100644 --- a/docs-ui/scripts/sync-changelog.mjs +++ b/docs-ui/scripts/sync-changelog.mjs @@ -1,5 +1,4 @@ #!/usr/bin/env node -/* eslint-disable no-restricted-syntax */ import fs from 'fs'; import path from 'path'; diff --git a/docs-ui/src/components/TableOfContents/TableOfContents.tsx b/docs-ui/src/components/TableOfContents/TableOfContents.tsx index 3da5b95b15..429d677b80 100644 --- a/docs-ui/src/components/TableOfContents/TableOfContents.tsx +++ b/docs-ui/src/components/TableOfContents/TableOfContents.tsx @@ -20,7 +20,7 @@ export function TableOfContents() { // Update indicator position when activeId changes useLayoutEffect(() => { if (!activeId) return; - + // Use requestAnimationFrame to defer setState call const rafId = requestAnimationFrame(() => { const activeElement = document.querySelector( From 088ec1fa25ce532ce3cc268a64f1a9e936756cc5 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Thu, 29 Jan 2026 15:30:01 +0000 Subject: [PATCH 12/14] Prettier Signed-off-by: Charles de Dreuille --- docs-ui/src/app/layout.tsx | 1 - docs-ui/src/css/theme-backstage.css | 7189 +++++++++++++++++++++- docs-ui/src/css/theme-spotify.css | 244 +- docs-ui/src/utils/playground-context.tsx | 8 +- 4 files changed, 7435 insertions(+), 7 deletions(-) diff --git a/docs-ui/src/app/layout.tsx b/docs-ui/src/app/layout.tsx index d6a36ef9ac..015ee8346c 100644 --- a/docs-ui/src/app/layout.tsx +++ b/docs-ui/src/app/layout.tsx @@ -11,7 +11,6 @@ import '../css/globals.css'; import '../css/theme-backstage.css'; import '../css/theme-spotify.css'; - export const metadata: Metadata = { title: 'Backstage UI', description: 'UI library for Backstage', diff --git a/docs-ui/src/css/theme-backstage.css b/docs-ui/src/css/theme-backstage.css index 2f444f2257..f3bf8bf83a 100644 --- a/docs-ui/src/css/theme-backstage.css +++ b/docs-ui/src/css/theme-backstage.css @@ -1 +1,7188 @@ -@layer tokens{:root{--bui-font-regular:system-ui;--bui-font-monospace:ui-monospace,"Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;--bui-font-weight-regular:400;--bui-font-weight-bold:600;--bui-font-size-1:.625rem;--bui-font-size-2:.75rem;--bui-font-size-3:.875rem;--bui-font-size-4:1rem;--bui-font-size-5:1.25rem;--bui-font-size-6:1.5rem;--bui-font-size-7:2rem;--bui-font-size-8:3rem;--bui-font-size-9:4rem;--bui-font-size-10:5.75rem;--bui-space:.25rem;--bui-space-0_5:calc(var(--bui-space)*.5);--bui-space-1:var(--bui-space);--bui-space-1_5:calc(var(--bui-space)*1.5);--bui-space-2:calc(var(--bui-space)*2);--bui-space-3:calc(var(--bui-space)*3);--bui-space-4:calc(var(--bui-space)*4);--bui-space-5:calc(var(--bui-space)*5);--bui-space-6:calc(var(--bui-space)*6);--bui-space-7:calc(var(--bui-space)*7);--bui-space-8:calc(var(--bui-space)*8);--bui-space-9:calc(var(--bui-space)*9);--bui-space-10:calc(var(--bui-space)*10);--bui-space-11:calc(var(--bui-space)*11);--bui-space-12:calc(var(--bui-space)*12);--bui-space-13:calc(var(--bui-space)*13);--bui-space-14:calc(var(--bui-space)*14);--bui-radius-1:calc(.125rem);--bui-radius-2:calc(.25rem);--bui-radius-3:calc(.5rem);--bui-radius-4:calc(.75rem);--bui-radius-5:calc(1rem);--bui-radius-6:calc(1.25rem);--bui-radius-full:9999px;--bui-black:#000;--bui-white:#fff;--bui-gray-1:#f8f8f8;--bui-gray-2:#ececec;--bui-gray-3:#d9d9d9;--bui-gray-4:#c1c1c1;--bui-gray-5:#9e9e9e;--bui-gray-6:#8c8c8c;--bui-gray-7:#757575;--bui-gray-8:#595959;--bui-bg-surface-0:var(--bui-gray-1);--bui-bg-surface-1:var(--bui-white);--bui-bg-surface-2:var(--bui-gray-1);--bui-bg-surface-3:var(--bui-gray-2);--bui-bg-solid:#1f5493;--bui-bg-solid-hover:#163a66;--bui-bg-solid-pressed:#0f2b4e;--bui-bg-solid-disabled:#163a66;--bui-bg-neutral-on-surface-0:oklch(0% 0 0/.06);--bui-bg-neutral-on-surface-0-hover:oklch(0% 0 0/.12);--bui-bg-neutral-on-surface-0-pressed:oklch(0% 0 0/.16);--bui-bg-neutral-on-surface-0-disabled:oklch(0% 0 0/.06);--bui-bg-neutral-on-surface-1:oklch(0% 0 0/.06);--bui-bg-neutral-on-surface-1-hover:oklch(0% 0 0/.12);--bui-bg-neutral-on-surface-1-pressed:oklch(0% 0 0/.16);--bui-bg-neutral-on-surface-1-disabled:oklch(0% 0 0/.06);--bui-bg-neutral-on-surface-2:oklch(0% 0 0/.06);--bui-bg-neutral-on-surface-2-hover:oklch(0% 0 0/.12);--bui-bg-neutral-on-surface-2-pressed:oklch(0% 0 0/.16);--bui-bg-neutral-on-surface-2-disabled:oklch(0% 0 0/.06);--bui-bg-neutral-on-surface-3:oklch(0% 0 0/.06);--bui-bg-neutral-on-surface-3-hover:oklch(0% 0 0/.12);--bui-bg-neutral-on-surface-3-pressed:oklch(0% 0 0/.16);--bui-bg-neutral-on-surface-3-disabled:oklch(0% 0 0/.06);--bui-bg-danger:#ffe2e2;--bui-bg-warning:#ffedd5;--bui-bg-success:#dcfce7;--bui-bg-info:#dbeafe;--bui-fg-primary:var(--bui-black);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-link:#1f5493;--bui-fg-link-hover:#1f2d5c;--bui-fg-disabled:#9e9e9e;--bui-fg-solid:var(--bui-white);--bui-fg-solid-disabled:#98a8bc;--bui-fg-tint:#1f5493;--bui-fg-tint-disabled:var(--bui-gray-5);--bui-fg-danger:#991919;--bui-fg-warning:#92310a;--bui-fg-success:#116932;--bui-fg-info:#173da6;--bui-border:#0000001a;--bui-border-hover:#0003;--bui-border-pressed:#0006;--bui-border-disabled:#0000001a;--bui-border-info:#7ea9d6;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#1f5493;--bui-scrollbar:#a0a0a03b;--bui-scrollbar-thumb:#a0a0a0;--bui-shadow:0 10px 15px -3px #0000001a,0 4px 6px -4px #0000001a;--bui-animate-pulse:pulse 2s cubic-bezier(.4,0,.6,1)infinite}[data-theme-mode=dark]{--bui-gray-1:#191919;--bui-gray-2:#242424;--bui-gray-3:#373737;--bui-gray-4:#464646;--bui-gray-5:#575757;--bui-gray-6:#7b7b7b;--bui-gray-7:#9e9e9e;--bui-gray-8:#b4b4b4;--bui-bg-surface-0:#333;--bui-bg-surface-1:var(--bui-gray-1);--bui-bg-surface-2:var(--bui-gray-2);--bui-bg-surface-3:var(--bui-gray-3);--bui-bg-solid:#9cc9ff;--bui-bg-solid-hover:#83b9fd;--bui-bg-solid-pressed:#83b9fd;--bui-bg-solid-disabled:#1b3d68;--bui-bg-neutral-on-surface-0:oklch(100% 0 0/.1);--bui-bg-neutral-on-surface-0-hover:oklch(100% 0 0/.14);--bui-bg-neutral-on-surface-0-pressed:oklch(100% 0 0/.2);--bui-bg-neutral-on-surface-0-disabled:oklch(100% 0 0/.1);--bui-bg-neutral-on-surface-1:oklch(100% 0 0/.06);--bui-bg-neutral-on-surface-1-hover:oklch(100% 0 0/.1);--bui-bg-neutral-on-surface-1-pressed:oklch(100% 0 0/.16);--bui-bg-neutral-on-surface-1-disabled:oklch(100% 0 0/.06);--bui-bg-neutral-on-surface-2:oklch(100% 0 0/.08);--bui-bg-neutral-on-surface-2-hover:oklch(100% 0 0/.12);--bui-bg-neutral-on-surface-2-pressed:oklch(100% 0 0/.2);--bui-bg-neutral-on-surface-2-disabled:oklch(100% 0 0/.08);--bui-bg-neutral-on-surface-3:oklch(100% 0 0/.08);--bui-bg-neutral-on-surface-3-hover:oklch(100% 0 0/.12);--bui-bg-neutral-on-surface-3-pressed:oklch(100% 0 0/.2);--bui-bg-neutral-on-surface-3-disabled:oklch(100% 0 0/.08);--bui-bg-danger:#300c0c;--bui-bg-warning:#302008;--bui-bg-success:#042713;--bui-bg-info:#132049;--bui-fg-primary:var(--bui-white);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-link:#9cc9ff;--bui-fg-link-hover:#7eb5f7;--bui-fg-disabled:var(--bui-gray-7);--bui-fg-solid:#101821;--bui-fg-solid-disabled:#6191cc;--bui-fg-tint:#9cc9ff;--bui-fg-tint-disabled:var(--bui-gray-5);--bui-fg-danger:#fca5a5;--bui-fg-warning:#fdba74;--bui-fg-success:#86efac;--bui-fg-info:#a3cfff;--bui-border:#ffffff1f;--bui-border-hover:#fff6;--bui-border-pressed:#ffffff80;--bui-border-disabled:#fff3;--bui-border-info:#7ea9d6;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#1f5493;--bui-scrollbar:#3636363a;--bui-scrollbar-thumb:#575757;--bui-shadow:none}}@layer base{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}:where(a){color:inherit;text-decoration:none}@keyframes pulse{50%{opacity:.5}}body{background-color:var(--bui-bg-surface-0);color:var(--bui-fg-primary);font-family:var(--bui-font-regular);font-weight:var(--bui-font-weight-regular);font-size:var(--bui-font-size-3);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme-mode=dark]{color-scheme:dark}[data-theme-mode=light]{color-scheme:light}}@layer components;@layer utilities{.bui-p{padding:var(--p)}.bui-p-0\.5{padding:var(--bui-space-0_5)}.bui-p-1{padding:var(--bui-space-1)}.bui-p-1\.5{padding:var(--bui-space-1_5)}.bui-p-2{padding:var(--bui-space-2)}.bui-p-3{padding:var(--bui-space-3)}.bui-p-4{padding:var(--bui-space-4)}.bui-p-5{padding:var(--bui-space-5)}.bui-p-6{padding:var(--bui-space-6)}.bui-p-7{padding:var(--bui-space-7)}.bui-p-8{padding:var(--bui-space-8)}.bui-p-9{padding:var(--bui-space-9)}.bui-p-10{padding:var(--bui-space-10)}.bui-p-11{padding:var(--bui-space-11)}.bui-p-12{padding:var(--bui-space-12)}.bui-p-13{padding:var(--bui-space-13)}.bui-p-14{padding:var(--bui-space-14)}@media (width>=640px){.xs\:bui-p{padding:var(--p-xs)}.xs\:bui-p-0\.5{padding:var(--bui-space-0_5)}.xs\:bui-p-1{padding:var(--bui-space-1)}.xs\:bui-p-1\.5{padding:var(--bui-space-1_5)}.xs\:bui-p-2{padding:var(--bui-space-2)}.xs\:bui-p-3{padding:var(--bui-space-3)}.xs\:bui-p-4{padding:var(--bui-space-4)}.xs\:bui-p-5{padding:var(--bui-space-5)}.xs\:bui-p-6{padding:var(--bui-space-6)}.xs\:bui-p-7{padding:var(--bui-space-7)}.xs\:bui-p-8{padding:var(--bui-space-8)}.xs\:bui-p-9{padding:var(--bui-space-9)}.xs\:bui-p-10{padding:var(--bui-space-10)}.xs\:bui-p-11{padding:var(--bui-space-11)}.xs\:bui-p-12{padding:var(--bui-space-12)}.xs\:bui-p-13{padding:var(--bui-space-13)}.xs\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-p{padding:var(--p-sm)}.sm\:bui-p-0\.5{padding:var(--bui-space-0_5)}.sm\:bui-p-1{padding:var(--bui-space-1)}.sm\:bui-p-1\.5{padding:var(--bui-space-1_5)}.sm\:bui-p-2{padding:var(--bui-space-2)}.sm\:bui-p-3{padding:var(--bui-space-3)}.sm\:bui-p-4{padding:var(--bui-space-4)}.sm\:bui-p-5{padding:var(--bui-space-5)}.sm\:bui-p-6{padding:var(--bui-space-6)}.sm\:bui-p-7{padding:var(--bui-space-7)}.sm\:bui-p-8{padding:var(--bui-space-8)}.sm\:bui-p-9{padding:var(--bui-space-9)}.sm\:bui-p-10{padding:var(--bui-space-10)}.sm\:bui-p-11{padding:var(--bui-space-11)}.sm\:bui-p-12{padding:var(--bui-space-12)}.sm\:bui-p-13{padding:var(--bui-space-13)}.sm\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-p{padding:var(--p-md)}.md\:bui-p-0\.5{padding:var(--bui-space-0_5)}.md\:bui-p-1{padding:var(--bui-space-1)}.md\:bui-p-1\.5{padding:var(--bui-space-1_5)}.md\:bui-p-2{padding:var(--bui-space-2)}.md\:bui-p-3{padding:var(--bui-space-3)}.md\:bui-p-4{padding:var(--bui-space-4)}.md\:bui-p-5{padding:var(--bui-space-5)}.md\:bui-p-6{padding:var(--bui-space-6)}.md\:bui-p-7{padding:var(--bui-space-7)}.md\:bui-p-8{padding:var(--bui-space-8)}.md\:bui-p-9{padding:var(--bui-space-9)}.md\:bui-p-10{padding:var(--bui-space-10)}.md\:bui-p-11{padding:var(--bui-space-11)}.md\:bui-p-12{padding:var(--bui-space-12)}.md\:bui-p-13{padding:var(--bui-space-13)}.md\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-p{padding:var(--p-lg)}.lg\:bui-p-0\.5{padding:var(--bui-space-0_5)}.lg\:bui-p-1{padding:var(--bui-space-1)}.lg\:bui-p-1\.5{padding:var(--bui-space-1_5)}.lg\:bui-p-2{padding:var(--bui-space-2)}.lg\:bui-p-3{padding:var(--bui-space-3)}.lg\:bui-p-4{padding:var(--bui-space-4)}.lg\:bui-p-5{padding:var(--bui-space-5)}.lg\:bui-p-6{padding:var(--bui-space-6)}.lg\:bui-p-7{padding:var(--bui-space-7)}.lg\:bui-p-8{padding:var(--bui-space-8)}.lg\:bui-p-9{padding:var(--bui-space-9)}.lg\:bui-p-10{padding:var(--bui-space-10)}.lg\:bui-p-11{padding:var(--bui-space-11)}.lg\:bui-p-12{padding:var(--bui-space-12)}.lg\:bui-p-13{padding:var(--bui-space-13)}.lg\:bui-p-14{padding:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-p{padding:var(--p-xl)}.xl\:bui-p-0\.5{padding:var(--bui-space-0_5)}.xl\:bui-p-1{padding:var(--bui-space-1)}.xl\:bui-p-1\.5{padding:var(--bui-space-1_5)}.xl\:bui-p-2{padding:var(--bui-space-2)}.xl\:bui-p-3{padding:var(--bui-space-3)}.xl\:bui-p-4{padding:var(--bui-space-4)}.xl\:bui-p-5{padding:var(--bui-space-5)}.xl\:bui-p-6{padding:var(--bui-space-6)}.xl\:bui-p-7{padding:var(--bui-space-7)}.xl\:bui-p-8{padding:var(--bui-space-8)}.xl\:bui-p-9{padding:var(--bui-space-9)}.xl\:bui-p-10{padding:var(--bui-space-10)}.xl\:bui-p-11{padding:var(--bui-space-11)}.xl\:bui-p-12{padding:var(--bui-space-12)}.xl\:bui-p-13{padding:var(--bui-space-13)}.xl\:bui-p-14{padding:var(--bui-space-14)}}.bui-pl{padding-left:var(--pl)}.bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.bui-pl-1{padding-left:var(--bui-space-1)}.bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.bui-pl-2{padding-left:var(--bui-space-2)}.bui-pl-3{padding-left:var(--bui-space-3)}.bui-pl-4{padding-left:var(--bui-space-4)}.bui-pl-5{padding-left:var(--bui-space-5)}.bui-pl-6{padding-left:var(--bui-space-6)}.bui-pl-7{padding-left:var(--bui-space-7)}.bui-pl-8{padding-left:var(--bui-space-8)}.bui-pl-9{padding-left:var(--bui-space-9)}.bui-pl-10{padding-left:var(--bui-space-10)}.bui-pl-11{padding-left:var(--bui-space-11)}.bui-pl-12{padding-left:var(--bui-space-12)}.bui-pl-13{padding-left:var(--bui-space-13)}.bui-pl-14{padding-left:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pl{padding-left:var(--pl-xs)}.xs\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.xs\:bui-pl-1{padding-left:var(--bui-space-1)}.xs\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.xs\:bui-pl-2{padding-left:var(--bui-space-2)}.xs\:bui-pl-3{padding-left:var(--bui-space-3)}.xs\:bui-pl-4{padding-left:var(--bui-space-4)}.xs\:bui-pl-5{padding-left:var(--bui-space-5)}.xs\:bui-pl-6{padding-left:var(--bui-space-6)}.xs\:bui-pl-7{padding-left:var(--bui-space-7)}.xs\:bui-pl-8{padding-left:var(--bui-space-8)}.xs\:bui-pl-9{padding-left:var(--bui-space-9)}.xs\:bui-pl-10{padding-left:var(--bui-space-10)}.xs\:bui-pl-11{padding-left:var(--bui-space-11)}.xs\:bui-pl-12{padding-left:var(--bui-space-12)}.xs\:bui-pl-13{padding-left:var(--bui-space-13)}.xs\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pl{padding-left:var(--pl-sm)}.sm\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.sm\:bui-pl-1{padding-left:var(--bui-space-1)}.sm\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.sm\:bui-pl-2{padding-left:var(--bui-space-2)}.sm\:bui-pl-3{padding-left:var(--bui-space-3)}.sm\:bui-pl-4{padding-left:var(--bui-space-4)}.sm\:bui-pl-5{padding-left:var(--bui-space-5)}.sm\:bui-pl-6{padding-left:var(--bui-space-6)}.sm\:bui-pl-7{padding-left:var(--bui-space-7)}.sm\:bui-pl-8{padding-left:var(--bui-space-8)}.sm\:bui-pl-9{padding-left:var(--bui-space-9)}.sm\:bui-pl-10{padding-left:var(--bui-space-10)}.sm\:bui-pl-11{padding-left:var(--bui-space-11)}.sm\:bui-pl-12{padding-left:var(--bui-space-12)}.sm\:bui-pl-13{padding-left:var(--bui-space-13)}.sm\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pl{padding-left:var(--pl-md)}.md\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.md\:bui-pl-1{padding-left:var(--bui-space-1)}.md\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.md\:bui-pl-2{padding-left:var(--bui-space-2)}.md\:bui-pl-3{padding-left:var(--bui-space-3)}.md\:bui-pl-4{padding-left:var(--bui-space-4)}.md\:bui-pl-5{padding-left:var(--bui-space-5)}.md\:bui-pl-6{padding-left:var(--bui-space-6)}.md\:bui-pl-7{padding-left:var(--bui-space-7)}.md\:bui-pl-8{padding-left:var(--bui-space-8)}.md\:bui-pl-9{padding-left:var(--bui-space-9)}.md\:bui-pl-10{padding-left:var(--bui-space-10)}.md\:bui-pl-11{padding-left:var(--bui-space-11)}.md\:bui-pl-12{padding-left:var(--bui-space-12)}.md\:bui-pl-13{padding-left:var(--bui-space-13)}.md\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pl{padding-left:var(--pl-lg)}.lg\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.lg\:bui-pl-1{padding-left:var(--bui-space-1)}.lg\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.lg\:bui-pl-2{padding-left:var(--bui-space-2)}.lg\:bui-pl-3{padding-left:var(--bui-space-3)}.lg\:bui-pl-4{padding-left:var(--bui-space-4)}.lg\:bui-pl-5{padding-left:var(--bui-space-5)}.lg\:bui-pl-6{padding-left:var(--bui-space-6)}.lg\:bui-pl-7{padding-left:var(--bui-space-7)}.lg\:bui-pl-8{padding-left:var(--bui-space-8)}.lg\:bui-pl-9{padding-left:var(--bui-space-9)}.lg\:bui-pl-10{padding-left:var(--bui-space-10)}.lg\:bui-pl-11{padding-left:var(--bui-space-11)}.lg\:bui-pl-12{padding-left:var(--bui-space-12)}.lg\:bui-pl-13{padding-left:var(--bui-space-13)}.lg\:bui-pl-14{padding-left:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pl{padding-left:var(--pl-xl)}.xl\:bui-pl-0\.5{padding-left:var(--bui-space-0_5)}.xl\:bui-pl-1{padding-left:var(--bui-space-1)}.xl\:bui-pl-1\.5{padding-left:var(--bui-space-1_5)}.xl\:bui-pl-2{padding-left:var(--bui-space-2)}.xl\:bui-pl-3{padding-left:var(--bui-space-3)}.xl\:bui-pl-4{padding-left:var(--bui-space-4)}.xl\:bui-pl-5{padding-left:var(--bui-space-5)}.xl\:bui-pl-6{padding-left:var(--bui-space-6)}.xl\:bui-pl-7{padding-left:var(--bui-space-7)}.xl\:bui-pl-8{padding-left:var(--bui-space-8)}.xl\:bui-pl-9{padding-left:var(--bui-space-9)}.xl\:bui-pl-10{padding-left:var(--bui-space-10)}.xl\:bui-pl-11{padding-left:var(--bui-space-11)}.xl\:bui-pl-12{padding-left:var(--bui-space-12)}.xl\:bui-pl-13{padding-left:var(--bui-space-13)}.xl\:bui-pl-14{padding-left:var(--bui-space-14)}}.bui-pr{padding-right:var(--pr)}.bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.bui-pr-1{padding-right:var(--bui-space-1)}.bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.bui-pr-2{padding-right:var(--bui-space-2)}.bui-pr-3{padding-right:var(--bui-space-3)}.bui-pr-4{padding-right:var(--bui-space-4)}.bui-pr-5{padding-right:var(--bui-space-5)}.bui-pr-6{padding-right:var(--bui-space-6)}.bui-pr-7{padding-right:var(--bui-space-7)}.bui-pr-8{padding-right:var(--bui-space-8)}.bui-pr-9{padding-right:var(--bui-space-9)}.bui-pr-10{padding-right:var(--bui-space-10)}.bui-pr-11{padding-right:var(--bui-space-11)}.bui-pr-12{padding-right:var(--bui-space-12)}.bui-pr-13{padding-right:var(--bui-space-13)}.bui-pr-14{padding-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pr{padding-right:var(--pr-xs)}.xs\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.xs\:bui-pr-1{padding-right:var(--bui-space-1)}.xs\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.xs\:bui-pr-2{padding-right:var(--bui-space-2)}.xs\:bui-pr-3{padding-right:var(--bui-space-3)}.xs\:bui-pr-4{padding-right:var(--bui-space-4)}.xs\:bui-pr-5{padding-right:var(--bui-space-5)}.xs\:bui-pr-6{padding-right:var(--bui-space-6)}.xs\:bui-pr-7{padding-right:var(--bui-space-7)}.xs\:bui-pr-8{padding-right:var(--bui-space-8)}.xs\:bui-pr-9{padding-right:var(--bui-space-9)}.xs\:bui-pr-10{padding-right:var(--bui-space-10)}.xs\:bui-pr-11{padding-right:var(--bui-space-11)}.xs\:bui-pr-12{padding-right:var(--bui-space-12)}.xs\:bui-pr-13{padding-right:var(--bui-space-13)}.xs\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pr{padding-right:var(--pr-sm)}.sm\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.sm\:bui-pr-1{padding-right:var(--bui-space-1)}.sm\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.sm\:bui-pr-2{padding-right:var(--bui-space-2)}.sm\:bui-pr-3{padding-right:var(--bui-space-3)}.sm\:bui-pr-4{padding-right:var(--bui-space-4)}.sm\:bui-pr-5{padding-right:var(--bui-space-5)}.sm\:bui-pr-6{padding-right:var(--bui-space-6)}.sm\:bui-pr-7{padding-right:var(--bui-space-7)}.sm\:bui-pr-8{padding-right:var(--bui-space-8)}.sm\:bui-pr-9{padding-right:var(--bui-space-9)}.sm\:bui-pr-10{padding-right:var(--bui-space-10)}.sm\:bui-pr-11{padding-right:var(--bui-space-11)}.sm\:bui-pr-12{padding-right:var(--bui-space-12)}.sm\:bui-pr-13{padding-right:var(--bui-space-13)}.sm\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pr{padding-right:var(--pr-md)}.md\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.md\:bui-pr-1{padding-right:var(--bui-space-1)}.md\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.md\:bui-pr-2{padding-right:var(--bui-space-2)}.md\:bui-pr-3{padding-right:var(--bui-space-3)}.md\:bui-pr-4{padding-right:var(--bui-space-4)}.md\:bui-pr-5{padding-right:var(--bui-space-5)}.md\:bui-pr-6{padding-right:var(--bui-space-6)}.md\:bui-pr-7{padding-right:var(--bui-space-7)}.md\:bui-pr-8{padding-right:var(--bui-space-8)}.md\:bui-pr-9{padding-right:var(--bui-space-9)}.md\:bui-pr-10{padding-right:var(--bui-space-10)}.md\:bui-pr-11{padding-right:var(--bui-space-11)}.md\:bui-pr-12{padding-right:var(--bui-space-12)}.md\:bui-pr-13{padding-right:var(--bui-space-13)}.md\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pr{padding-right:var(--pr-lg)}.lg\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.lg\:bui-pr-1{padding-right:var(--bui-space-1)}.lg\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.lg\:bui-pr-2{padding-right:var(--bui-space-2)}.lg\:bui-pr-3{padding-right:var(--bui-space-3)}.lg\:bui-pr-4{padding-right:var(--bui-space-4)}.lg\:bui-pr-5{padding-right:var(--bui-space-5)}.lg\:bui-pr-6{padding-right:var(--bui-space-6)}.lg\:bui-pr-7{padding-right:var(--bui-space-7)}.lg\:bui-pr-8{padding-right:var(--bui-space-8)}.lg\:bui-pr-9{padding-right:var(--bui-space-9)}.lg\:bui-pr-10{padding-right:var(--bui-space-10)}.lg\:bui-pr-11{padding-right:var(--bui-space-11)}.lg\:bui-pr-12{padding-right:var(--bui-space-12)}.lg\:bui-pr-13{padding-right:var(--bui-space-13)}.lg\:bui-pr-14{padding-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pr{padding-right:var(--pr-xl)}.xl\:bui-pr-0\.5{padding-right:var(--bui-space-0_5)}.xl\:bui-pr-1{padding-right:var(--bui-space-1)}.xl\:bui-pr-1\.5{padding-right:var(--bui-space-1_5)}.xl\:bui-pr-2{padding-right:var(--bui-space-2)}.xl\:bui-pr-3{padding-right:var(--bui-space-3)}.xl\:bui-pr-4{padding-right:var(--bui-space-4)}.xl\:bui-pr-5{padding-right:var(--bui-space-5)}.xl\:bui-pr-6{padding-right:var(--bui-space-6)}.xl\:bui-pr-7{padding-right:var(--bui-space-7)}.xl\:bui-pr-8{padding-right:var(--bui-space-8)}.xl\:bui-pr-9{padding-right:var(--bui-space-9)}.xl\:bui-pr-10{padding-right:var(--bui-space-10)}.xl\:bui-pr-11{padding-right:var(--bui-space-11)}.xl\:bui-pr-12{padding-right:var(--bui-space-12)}.xl\:bui-pr-13{padding-right:var(--bui-space-13)}.xl\:bui-pr-14{padding-right:var(--bui-space-14)}}.bui-pt{padding-top:var(--pt)}.bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.bui-pt-1{padding-top:var(--bui-space-1)}.bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.bui-pt-2{padding-top:var(--bui-space-2)}.bui-pt-3{padding-top:var(--bui-space-3)}.bui-pt-4{padding-top:var(--bui-space-4)}.bui-pt-5{padding-top:var(--bui-space-5)}.bui-pt-6{padding-top:var(--bui-space-6)}.bui-pt-7{padding-top:var(--bui-space-7)}.bui-pt-8{padding-top:var(--bui-space-8)}.bui-pt-9{padding-top:var(--bui-space-9)}.bui-pt-10{padding-top:var(--bui-space-10)}.bui-pt-11{padding-top:var(--bui-space-11)}.bui-pt-12{padding-top:var(--bui-space-12)}.bui-pt-13{padding-top:var(--bui-space-13)}.bui-pt-14{padding-top:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pt{padding-top:var(--pt-xs)}.xs\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.xs\:bui-pt-1{padding-top:var(--bui-space-1)}.xs\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.xs\:bui-pt-2{padding-top:var(--bui-space-2)}.xs\:bui-pt-3{padding-top:var(--bui-space-3)}.xs\:bui-pt-4{padding-top:var(--bui-space-4)}.xs\:bui-pt-5{padding-top:var(--bui-space-5)}.xs\:bui-pt-6{padding-top:var(--bui-space-6)}.xs\:bui-pt-7{padding-top:var(--bui-space-7)}.xs\:bui-pt-8{padding-top:var(--bui-space-8)}.xs\:bui-pt-9{padding-top:var(--bui-space-9)}.xs\:bui-pt-10{padding-top:var(--bui-space-10)}.xs\:bui-pt-11{padding-top:var(--bui-space-11)}.xs\:bui-pt-12{padding-top:var(--bui-space-12)}.xs\:bui-pt-13{padding-top:var(--bui-space-13)}.xs\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pt{padding-top:var(--pt-sm)}.sm\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.sm\:bui-pt-1{padding-top:var(--bui-space-1)}.sm\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.sm\:bui-pt-2{padding-top:var(--bui-space-2)}.sm\:bui-pt-3{padding-top:var(--bui-space-3)}.sm\:bui-pt-4{padding-top:var(--bui-space-4)}.sm\:bui-pt-5{padding-top:var(--bui-space-5)}.sm\:bui-pt-6{padding-top:var(--bui-space-6)}.sm\:bui-pt-7{padding-top:var(--bui-space-7)}.sm\:bui-pt-8{padding-top:var(--bui-space-8)}.sm\:bui-pt-9{padding-top:var(--bui-space-9)}.sm\:bui-pt-10{padding-top:var(--bui-space-10)}.sm\:bui-pt-11{padding-top:var(--bui-space-11)}.sm\:bui-pt-12{padding-top:var(--bui-space-12)}.sm\:bui-pt-13{padding-top:var(--bui-space-13)}.sm\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pt{padding-top:var(--pt-md)}.md\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.md\:bui-pt-1{padding-top:var(--bui-space-1)}.md\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.md\:bui-pt-2{padding-top:var(--bui-space-2)}.md\:bui-pt-3{padding-top:var(--bui-space-3)}.md\:bui-pt-4{padding-top:var(--bui-space-4)}.md\:bui-pt-5{padding-top:var(--bui-space-5)}.md\:bui-pt-6{padding-top:var(--bui-space-6)}.md\:bui-pt-7{padding-top:var(--bui-space-7)}.md\:bui-pt-8{padding-top:var(--bui-space-8)}.md\:bui-pt-9{padding-top:var(--bui-space-9)}.md\:bui-pt-10{padding-top:var(--bui-space-10)}.md\:bui-pt-11{padding-top:var(--bui-space-11)}.md\:bui-pt-12{padding-top:var(--bui-space-12)}.md\:bui-pt-13{padding-top:var(--bui-space-13)}.md\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pt{padding-top:var(--pt-lg)}.lg\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.lg\:bui-pt-1{padding-top:var(--bui-space-1)}.lg\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.lg\:bui-pt-2{padding-top:var(--bui-space-2)}.lg\:bui-pt-3{padding-top:var(--bui-space-3)}.lg\:bui-pt-4{padding-top:var(--bui-space-4)}.lg\:bui-pt-5{padding-top:var(--bui-space-5)}.lg\:bui-pt-6{padding-top:var(--bui-space-6)}.lg\:bui-pt-7{padding-top:var(--bui-space-7)}.lg\:bui-pt-8{padding-top:var(--bui-space-8)}.lg\:bui-pt-9{padding-top:var(--bui-space-9)}.lg\:bui-pt-10{padding-top:var(--bui-space-10)}.lg\:bui-pt-11{padding-top:var(--bui-space-11)}.lg\:bui-pt-12{padding-top:var(--bui-space-12)}.lg\:bui-pt-13{padding-top:var(--bui-space-13)}.lg\:bui-pt-14{padding-top:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pt{padding-top:var(--pt-xl)}.xl\:bui-pt-0\.5{padding-top:var(--bui-space-0_5)}.xl\:bui-pt-1{padding-top:var(--bui-space-1)}.xl\:bui-pt-1\.5{padding-top:var(--bui-space-1_5)}.xl\:bui-pt-2{padding-top:var(--bui-space-2)}.xl\:bui-pt-3{padding-top:var(--bui-space-3)}.xl\:bui-pt-4{padding-top:var(--bui-space-4)}.xl\:bui-pt-5{padding-top:var(--bui-space-5)}.xl\:bui-pt-6{padding-top:var(--bui-space-6)}.xl\:bui-pt-7{padding-top:var(--bui-space-7)}.xl\:bui-pt-8{padding-top:var(--bui-space-8)}.xl\:bui-pt-9{padding-top:var(--bui-space-9)}.xl\:bui-pt-10{padding-top:var(--bui-space-10)}.xl\:bui-pt-11{padding-top:var(--bui-space-11)}.xl\:bui-pt-12{padding-top:var(--bui-space-12)}.xl\:bui-pt-13{padding-top:var(--bui-space-13)}.xl\:bui-pt-14{padding-top:var(--bui-space-14)}}.bui-pb{padding-bottom:var(--pb)}.bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.bui-pb-1{padding-bottom:var(--bui-space-1)}.bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.bui-pb-2{padding-bottom:var(--bui-space-2)}.bui-pb-3{padding-bottom:var(--bui-space-3)}.bui-pb-4{padding-bottom:var(--bui-space-4)}.bui-pb-5{padding-bottom:var(--bui-space-5)}.bui-pb-6{padding-bottom:var(--bui-space-6)}.bui-pb-7{padding-bottom:var(--bui-space-7)}.bui-pb-8{padding-bottom:var(--bui-space-8)}.bui-pb-9{padding-bottom:var(--bui-space-9)}.bui-pb-10{padding-bottom:var(--bui-space-10)}.bui-pb-11{padding-bottom:var(--bui-space-11)}.bui-pb-12{padding-bottom:var(--bui-space-12)}.bui-pb-13{padding-bottom:var(--bui-space-13)}.bui-pb-14{padding-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-pb{padding-bottom:var(--pb-xs)}.xs\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.xs\:bui-pb-1{padding-bottom:var(--bui-space-1)}.xs\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.xs\:bui-pb-2{padding-bottom:var(--bui-space-2)}.xs\:bui-pb-3{padding-bottom:var(--bui-space-3)}.xs\:bui-pb-4{padding-bottom:var(--bui-space-4)}.xs\:bui-pb-5{padding-bottom:var(--bui-space-5)}.xs\:bui-pb-6{padding-bottom:var(--bui-space-6)}.xs\:bui-pb-7{padding-bottom:var(--bui-space-7)}.xs\:bui-pb-8{padding-bottom:var(--bui-space-8)}.xs\:bui-pb-9{padding-bottom:var(--bui-space-9)}.xs\:bui-pb-10{padding-bottom:var(--bui-space-10)}.xs\:bui-pb-11{padding-bottom:var(--bui-space-11)}.xs\:bui-pb-12{padding-bottom:var(--bui-space-12)}.xs\:bui-pb-13{padding-bottom:var(--bui-space-13)}.xs\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-pb{padding-bottom:var(--pb-sm)}.sm\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.sm\:bui-pb-1{padding-bottom:var(--bui-space-1)}.sm\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.sm\:bui-pb-2{padding-bottom:var(--bui-space-2)}.sm\:bui-pb-3{padding-bottom:var(--bui-space-3)}.sm\:bui-pb-4{padding-bottom:var(--bui-space-4)}.sm\:bui-pb-5{padding-bottom:var(--bui-space-5)}.sm\:bui-pb-6{padding-bottom:var(--bui-space-6)}.sm\:bui-pb-7{padding-bottom:var(--bui-space-7)}.sm\:bui-pb-8{padding-bottom:var(--bui-space-8)}.sm\:bui-pb-9{padding-bottom:var(--bui-space-9)}.sm\:bui-pb-10{padding-bottom:var(--bui-space-10)}.sm\:bui-pb-11{padding-bottom:var(--bui-space-11)}.sm\:bui-pb-12{padding-bottom:var(--bui-space-12)}.sm\:bui-pb-13{padding-bottom:var(--bui-space-13)}.sm\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-pb{padding-bottom:var(--pb-md)}.md\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.md\:bui-pb-1{padding-bottom:var(--bui-space-1)}.md\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.md\:bui-pb-2{padding-bottom:var(--bui-space-2)}.md\:bui-pb-3{padding-bottom:var(--bui-space-3)}.md\:bui-pb-4{padding-bottom:var(--bui-space-4)}.md\:bui-pb-5{padding-bottom:var(--bui-space-5)}.md\:bui-pb-6{padding-bottom:var(--bui-space-6)}.md\:bui-pb-7{padding-bottom:var(--bui-space-7)}.md\:bui-pb-8{padding-bottom:var(--bui-space-8)}.md\:bui-pb-9{padding-bottom:var(--bui-space-9)}.md\:bui-pb-10{padding-bottom:var(--bui-space-10)}.md\:bui-pb-11{padding-bottom:var(--bui-space-11)}.md\:bui-pb-12{padding-bottom:var(--bui-space-12)}.md\:bui-pb-13{padding-bottom:var(--bui-space-13)}.md\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-pb{padding-bottom:var(--pb-lg)}.lg\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.lg\:bui-pb-1{padding-bottom:var(--bui-space-1)}.lg\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.lg\:bui-pb-2{padding-bottom:var(--bui-space-2)}.lg\:bui-pb-3{padding-bottom:var(--bui-space-3)}.lg\:bui-pb-4{padding-bottom:var(--bui-space-4)}.lg\:bui-pb-5{padding-bottom:var(--bui-space-5)}.lg\:bui-pb-6{padding-bottom:var(--bui-space-6)}.lg\:bui-pb-7{padding-bottom:var(--bui-space-7)}.lg\:bui-pb-8{padding-bottom:var(--bui-space-8)}.lg\:bui-pb-9{padding-bottom:var(--bui-space-9)}.lg\:bui-pb-10{padding-bottom:var(--bui-space-10)}.lg\:bui-pb-11{padding-bottom:var(--bui-space-11)}.lg\:bui-pb-12{padding-bottom:var(--bui-space-12)}.lg\:bui-pb-13{padding-bottom:var(--bui-space-13)}.lg\:bui-pb-14{padding-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-pb{padding-bottom:var(--pb-xl)}.xl\:bui-pb-0\.5{padding-bottom:var(--bui-space-0_5)}.xl\:bui-pb-1{padding-bottom:var(--bui-space-1)}.xl\:bui-pb-1\.5{padding-bottom:var(--bui-space-1_5)}.xl\:bui-pb-2{padding-bottom:var(--bui-space-2)}.xl\:bui-pb-3{padding-bottom:var(--bui-space-3)}.xl\:bui-pb-4{padding-bottom:var(--bui-space-4)}.xl\:bui-pb-5{padding-bottom:var(--bui-space-5)}.xl\:bui-pb-6{padding-bottom:var(--bui-space-6)}.xl\:bui-pb-7{padding-bottom:var(--bui-space-7)}.xl\:bui-pb-8{padding-bottom:var(--bui-space-8)}.xl\:bui-pb-9{padding-bottom:var(--bui-space-9)}.xl\:bui-pb-10{padding-bottom:var(--bui-space-10)}.xl\:bui-pb-11{padding-bottom:var(--bui-space-11)}.xl\:bui-pb-12{padding-bottom:var(--bui-space-12)}.xl\:bui-pb-13{padding-bottom:var(--bui-space-13)}.xl\:bui-pb-14{padding-bottom:var(--bui-space-14)}}.bui-py{padding-top:var(--py);padding-bottom:var(--py)}.bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-py{padding-top:var(--py-xs);padding-bottom:var(--py-xs)}.xs\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.xs\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.xs\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.xs\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.xs\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.xs\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.xs\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.xs\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.xs\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.xs\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.xs\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.xs\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.xs\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.xs\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.xs\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.xs\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-py{padding-top:var(--py-sm);padding-bottom:var(--py-sm)}.sm\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.sm\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.sm\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.sm\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.sm\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.sm\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.sm\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.sm\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.sm\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.sm\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.sm\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.sm\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.sm\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.sm\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.sm\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.sm\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-py{padding-top:var(--py-md);padding-bottom:var(--py-md)}.md\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.md\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.md\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.md\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.md\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.md\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.md\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.md\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.md\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.md\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.md\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.md\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.md\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.md\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.md\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.md\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-py{padding-top:var(--py-lg);padding-bottom:var(--py-lg)}.lg\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.lg\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.lg\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.lg\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.lg\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.lg\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.lg\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.lg\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.lg\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.lg\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.lg\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.lg\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.lg\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.lg\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.lg\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.lg\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-py{padding-top:var(--py-xl);padding-bottom:var(--py-xl)}.xl\:bui-py-0\.5{padding-top:var(--bui-space-0_5);padding-bottom:var(--bui-space-0_5)}.xl\:bui-py-1{padding-top:var(--bui-space-1);padding-bottom:var(--bui-space-1)}.xl\:bui-py-1\.5{padding-top:var(--bui-space-1_5);padding-bottom:var(--bui-space-1_5)}.xl\:bui-py-2{padding-top:var(--bui-space-2);padding-bottom:var(--bui-space-2)}.xl\:bui-py-3{padding-top:var(--bui-space-3);padding-bottom:var(--bui-space-3)}.xl\:bui-py-4{padding-top:var(--bui-space-4);padding-bottom:var(--bui-space-4)}.xl\:bui-py-5{padding-top:var(--bui-space-5);padding-bottom:var(--bui-space-5)}.xl\:bui-py-6{padding-top:var(--bui-space-6);padding-bottom:var(--bui-space-6)}.xl\:bui-py-7{padding-top:var(--bui-space-7);padding-bottom:var(--bui-space-7)}.xl\:bui-py-8{padding-top:var(--bui-space-8);padding-bottom:var(--bui-space-8)}.xl\:bui-py-9{padding-top:var(--bui-space-9);padding-bottom:var(--bui-space-9)}.xl\:bui-py-10{padding-top:var(--bui-space-10);padding-bottom:var(--bui-space-10)}.xl\:bui-py-11{padding-top:var(--bui-space-11);padding-bottom:var(--bui-space-11)}.xl\:bui-py-12{padding-top:var(--bui-space-12);padding-bottom:var(--bui-space-12)}.xl\:bui-py-13{padding-top:var(--bui-space-13);padding-bottom:var(--bui-space-13)}.xl\:bui-py-14{padding-top:var(--bui-space-14);padding-bottom:var(--bui-space-14)}}.bui-px{padding-left:var(--px);padding-right:var(--px)}.bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-px{padding-left:var(--px-xs);padding-right:var(--px-xs)}.xs\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.xs\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.xs\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.xs\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.xs\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.xs\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.xs\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.xs\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.xs\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.xs\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.xs\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.xs\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.xs\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.xs\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.xs\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.xs\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-px{padding-left:var(--px-sm);padding-right:var(--px-sm)}.sm\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.sm\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.sm\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.sm\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.sm\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.sm\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.sm\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.sm\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.sm\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.sm\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.sm\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.sm\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.sm\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.sm\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.sm\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.sm\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-px{padding-left:var(--px-md);padding-right:var(--px-md)}.md\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.md\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.md\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.md\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.md\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.md\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.md\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.md\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.md\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.md\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.md\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.md\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.md\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.md\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.md\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.md\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-px{padding-left:var(--px-lg);padding-right:var(--px-lg)}.lg\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.lg\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.lg\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.lg\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.lg\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.lg\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.lg\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.lg\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.lg\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.lg\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.lg\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.lg\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.lg\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.lg\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.lg\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.lg\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-px{padding-left:var(--px-xl);padding-right:var(--px-xl)}.xl\:bui-px-0\.5{padding-left:var(--bui-space-0_5);padding-right:var(--bui-space-0_5)}.xl\:bui-px-1{padding-left:var(--bui-space-1);padding-right:var(--bui-space-1)}.xl\:bui-px-1\.5{padding-left:var(--bui-space-1_5);padding-right:var(--bui-space-1_5)}.xl\:bui-px-2{padding-left:var(--bui-space-2);padding-right:var(--bui-space-2)}.xl\:bui-px-3{padding-left:var(--bui-space-3);padding-right:var(--bui-space-3)}.xl\:bui-px-4{padding-left:var(--bui-space-4);padding-right:var(--bui-space-4)}.xl\:bui-px-5{padding-left:var(--bui-space-5);padding-right:var(--bui-space-5)}.xl\:bui-px-6{padding-left:var(--bui-space-6);padding-right:var(--bui-space-6)}.xl\:bui-px-7{padding-left:var(--bui-space-7);padding-right:var(--bui-space-7)}.xl\:bui-px-8{padding-left:var(--bui-space-8);padding-right:var(--bui-space-8)}.xl\:bui-px-9{padding-left:var(--bui-space-9);padding-right:var(--bui-space-9)}.xl\:bui-px-10{padding-left:var(--bui-space-10);padding-right:var(--bui-space-10)}.xl\:bui-px-11{padding-left:var(--bui-space-11);padding-right:var(--bui-space-11)}.xl\:bui-px-12{padding-left:var(--bui-space-12);padding-right:var(--bui-space-12)}.xl\:bui-px-13{padding-left:var(--bui-space-13);padding-right:var(--bui-space-13)}.xl\:bui-px-14{padding-left:var(--bui-space-14);padding-right:var(--bui-space-14)}}.bui-m{margin:var(--m)}.bui-m-0\.5{margin:var(--bui-space-0_5)}.bui-m-1{margin:var(--bui-space-1)}.bui-m-1\.5{margin:var(--bui-space-1_5)}.bui-m-2{margin:var(--bui-space-2)}.bui-m-3{margin:var(--bui-space-3)}.bui-m-4{margin:var(--bui-space-4)}.bui-m-5{margin:var(--bui-space-5)}.bui-m-6{margin:var(--bui-space-6)}.bui-m-7{margin:var(--bui-space-7)}.bui-m-8{margin:var(--bui-space-8)}.bui-m-9{margin:var(--bui-space-9)}.bui-m-10{margin:var(--bui-space-10)}.bui-m-11{margin:var(--bui-space-11)}.bui-m-12{margin:var(--bui-space-12)}.bui-m-13{margin:var(--bui-space-13)}.bui-m-14{margin:var(--bui-space-14)}@media (width>=640px){.xs\:bui-m{margin:var(--p-xs)}.xs\:bui-m-0\.5{margin:var(--bui-space-0_5)}.xs\:bui-m-1{margin:var(--bui-space-1)}.xs\:bui-m-1\.5{margin:var(--bui-space-1_5)}.xs\:bui-m-2{margin:var(--bui-space-2)}.xs\:bui-m-3{margin:var(--bui-space-3)}.xs\:bui-m-4{margin:var(--bui-space-4)}.xs\:bui-m-5{margin:var(--bui-space-5)}.xs\:bui-m-6{margin:var(--bui-space-6)}.xs\:bui-m-7{margin:var(--bui-space-7)}.xs\:bui-m-8{margin:var(--bui-space-8)}.xs\:bui-m-9{margin:var(--bui-space-9)}.xs\:bui-m-10{margin:var(--bui-space-10)}.xs\:bui-m-11{margin:var(--bui-space-11)}.xs\:bui-m-12{margin:var(--bui-space-12)}.xs\:bui-m-13{margin:var(--bui-space-13)}.xs\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-m{margin:var(--p-sm)}.sm\:bui-m-0\.5{margin:var(--bui-space-0_5)}.sm\:bui-m-1{margin:var(--bui-space-1)}.sm\:bui-m-1\.5{margin:var(--bui-space-1_5)}.sm\:bui-m-2{margin:var(--bui-space-2)}.sm\:bui-m-3{margin:var(--bui-space-3)}.sm\:bui-m-4{margin:var(--bui-space-4)}.sm\:bui-m-5{margin:var(--bui-space-5)}.sm\:bui-m-6{margin:var(--bui-space-6)}.sm\:bui-m-7{margin:var(--bui-space-7)}.sm\:bui-m-8{margin:var(--bui-space-8)}.sm\:bui-m-9{margin:var(--bui-space-9)}.sm\:bui-m-10{margin:var(--bui-space-10)}.sm\:bui-m-11{margin:var(--bui-space-11)}.sm\:bui-m-12{margin:var(--bui-space-12)}.sm\:bui-m-13{margin:var(--bui-space-13)}.sm\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-m{margin:var(--p-md)}.md\:bui-m-0\.5{margin:var(--bui-space-0_5)}.md\:bui-m-1{margin:var(--bui-space-1)}.md\:bui-m-1\.5{margin:var(--bui-space-1_5)}.md\:bui-m-2{margin:var(--bui-space-2)}.md\:bui-m-3{margin:var(--bui-space-3)}.md\:bui-m-4{margin:var(--bui-space-4)}.md\:bui-m-5{margin:var(--bui-space-5)}.md\:bui-m-6{margin:var(--bui-space-6)}.md\:bui-m-7{margin:var(--bui-space-7)}.md\:bui-m-8{margin:var(--bui-space-8)}.md\:bui-m-9{margin:var(--bui-space-9)}.md\:bui-m-10{margin:var(--bui-space-10)}.md\:bui-m-11{margin:var(--bui-space-11)}.md\:bui-m-12{margin:var(--bui-space-12)}.md\:bui-m-13{margin:var(--bui-space-13)}.md\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-m{margin:var(--p-lg)}.lg\:bui-m-0\.5{margin:var(--bui-space-0_5)}.lg\:bui-m-1{margin:var(--bui-space-1)}.lg\:bui-m-1\.5{margin:var(--bui-space-1_5)}.lg\:bui-m-2{margin:var(--bui-space-2)}.lg\:bui-m-3{margin:var(--bui-space-3)}.lg\:bui-m-4{margin:var(--bui-space-4)}.lg\:bui-m-5{margin:var(--bui-space-5)}.lg\:bui-m-6{margin:var(--bui-space-6)}.lg\:bui-m-7{margin:var(--bui-space-7)}.lg\:bui-m-8{margin:var(--bui-space-8)}.lg\:bui-m-9{margin:var(--bui-space-9)}.lg\:bui-m-10{margin:var(--bui-space-10)}.lg\:bui-m-11{margin:var(--bui-space-11)}.lg\:bui-m-12{margin:var(--bui-space-12)}.lg\:bui-m-13{margin:var(--bui-space-13)}.lg\:bui-m-14{margin:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-m{margin:var(--p-xl)}.xl\:bui-m-0\.5{margin:var(--bui-space-0_5)}.xl\:bui-m-1{margin:var(--bui-space-1)}.xl\:bui-m-1\.5{margin:var(--bui-space-1_5)}.xl\:bui-m-2{margin:var(--bui-space-2)}.xl\:bui-m-3{margin:var(--bui-space-3)}.xl\:bui-m-4{margin:var(--bui-space-4)}.xl\:bui-m-5{margin:var(--bui-space-5)}.xl\:bui-m-6{margin:var(--bui-space-6)}.xl\:bui-m-7{margin:var(--bui-space-7)}.xl\:bui-m-8{margin:var(--bui-space-8)}.xl\:bui-m-9{margin:var(--bui-space-9)}.xl\:bui-m-10{margin:var(--bui-space-10)}.xl\:bui-m-11{margin:var(--bui-space-11)}.xl\:bui-m-12{margin:var(--bui-space-12)}.xl\:bui-m-13{margin:var(--bui-space-13)}.xl\:bui-m-14{margin:var(--bui-space-14)}}.bui-ml{margin-left:var(--ml)}.bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.bui-ml-1{margin-left:var(--bui-space-1)}.bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.bui-ml-2{margin-left:var(--bui-space-2)}.bui-ml-3{margin-left:var(--bui-space-3)}.bui-ml-4{margin-left:var(--bui-space-4)}.bui-ml-5{margin-left:var(--bui-space-5)}.bui-ml-6{margin-left:var(--bui-space-6)}.bui-ml-7{margin-left:var(--bui-space-7)}.bui-ml-8{margin-left:var(--bui-space-8)}.bui-ml-9{margin-left:var(--bui-space-9)}.bui-ml-10{margin-left:var(--bui-space-10)}.bui-ml-11{margin-left:var(--bui-space-11)}.bui-ml-12{margin-left:var(--bui-space-12)}.bui-ml-13{margin-left:var(--bui-space-13)}.bui-ml-14{margin-left:var(--bui-space-14)}@media (width>=640px){.xs\:bui-ml{margin-left:var(--ml-xs)}.xs\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.xs\:bui-ml-1{margin-left:var(--bui-space-1)}.xs\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.xs\:bui-ml-2{margin-left:var(--bui-space-2)}.xs\:bui-ml-3{margin-left:var(--bui-space-3)}.xs\:bui-ml-4{margin-left:var(--bui-space-4)}.xs\:bui-ml-5{margin-left:var(--bui-space-5)}.xs\:bui-ml-6{margin-left:var(--bui-space-6)}.xs\:bui-ml-7{margin-left:var(--bui-space-7)}.xs\:bui-ml-8{margin-left:var(--bui-space-8)}.xs\:bui-ml-9{margin-left:var(--bui-space-9)}.xs\:bui-ml-10{margin-left:var(--bui-space-10)}.xs\:bui-ml-11{margin-left:var(--bui-space-11)}.xs\:bui-ml-12{margin-left:var(--bui-space-12)}.xs\:bui-ml-13{margin-left:var(--bui-space-13)}.xs\:bui-ml-14{margin-left:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-ml{margin-left:var(--ml-sm)}.sm\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.sm\:bui-ml-1{margin-left:var(--bui-space-1)}.sm\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.sm\:bui-ml-2{margin-left:var(--bui-space-2)}.sm\:bui-ml-3{margin-left:var(--bui-space-3)}.sm\:bui-ml-4{margin-left:var(--bui-space-4)}.sm\:bui-ml-5{margin-left:var(--bui-space-5)}.sm\:bui-ml-6{margin-left:var(--bui-space-6)}.sm\:bui-ml-7{margin-left:var(--bui-space-7)}.sm\:bui-ml-8{margin-left:var(--bui-space-8)}.sm\:bui-ml-9{margin-left:var(--bui-space-9)}.sm\:bui-ml-10{margin-left:var(--bui-space-10)}.sm\:bui-ml-11{margin-left:var(--bui-space-11)}.sm\:bui-ml-12{margin-left:var(--bui-space-12)}.sm\:bui-ml-13{margin-left:var(--bui-space-13)}.sm\:bui-ml-14{margin-left:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-ml{margin-left:var(--ml-md)}.md\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.md\:bui-ml-1{margin-left:var(--bui-space-1)}.md\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.md\:bui-ml-2{margin-left:var(--bui-space-2)}.md\:bui-ml-3{margin-left:var(--bui-space-3)}.md\:bui-ml-4{margin-left:var(--bui-space-4)}.md\:bui-ml-5{margin-left:var(--bui-space-5)}.md\:bui-ml-6{margin-left:var(--bui-space-6)}.md\:bui-ml-7{margin-left:var(--bui-space-7)}.md\:bui-ml-8{margin-left:var(--bui-space-8)}.md\:bui-ml-9{margin-left:var(--bui-space-9)}.md\:bui-ml-10{margin-left:var(--bui-space-10)}.md\:bui-ml-11{margin-left:var(--bui-space-11)}.md\:bui-ml-12{margin-left:var(--bui-space-12)}.md\:bui-ml-13{margin-left:var(--bui-space-13)}.md\:bui-ml-14{margin-left:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-ml{margin-left:var(--ml-lg)}.lg\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.lg\:bui-ml-1{margin-left:var(--bui-space-1)}.lg\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.lg\:bui-ml-2{margin-left:var(--bui-space-2)}.lg\:bui-ml-3{margin-left:var(--bui-space-3)}.lg\:bui-ml-4{margin-left:var(--bui-space-4)}.lg\:bui-ml-5{margin-left:var(--bui-space-5)}.lg\:bui-ml-6{margin-left:var(--bui-space-6)}.lg\:bui-ml-7{margin-left:var(--bui-space-7)}.lg\:bui-ml-8{margin-left:var(--bui-space-8)}.lg\:bui-ml-9{margin-left:var(--bui-space-9)}.lg\:bui-ml-10{margin-left:var(--bui-space-10)}.lg\:bui-ml-11{margin-left:var(--bui-space-11)}.lg\:bui-ml-12{margin-left:var(--bui-space-12)}.lg\:bui-ml-13{margin-left:var(--bui-space-13)}.lg\:bui-ml-14{margin-left:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-ml{margin-left:var(--ml-xl)}.xl\:bui-ml-0\.5{margin-left:var(--bui-space-0_5)}.xl\:bui-ml-1{margin-left:var(--bui-space-1)}.xl\:bui-ml-1\.5{margin-left:var(--bui-space-1_5)}.xl\:bui-ml-2{margin-left:var(--bui-space-2)}.xl\:bui-ml-3{margin-left:var(--bui-space-3)}.xl\:bui-ml-4{margin-left:var(--bui-space-4)}.xl\:bui-ml-5{margin-left:var(--bui-space-5)}.xl\:bui-ml-6{margin-left:var(--bui-space-6)}.xl\:bui-ml-7{margin-left:var(--bui-space-7)}.xl\:bui-ml-8{margin-left:var(--bui-space-8)}.xl\:bui-ml-9{margin-left:var(--bui-space-9)}.xl\:bui-ml-10{margin-left:var(--bui-space-10)}.xl\:bui-ml-11{margin-left:var(--bui-space-11)}.xl\:bui-ml-12{margin-left:var(--bui-space-12)}.xl\:bui-ml-13{margin-left:var(--bui-space-13)}.xl\:bui-ml-14{margin-left:var(--bui-space-14)}}.bui-mr{margin-right:var(--mr)}.bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.bui-mr-1{margin-right:var(--bui-space-1)}.bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.bui-mr-2{margin-right:var(--bui-space-2)}.bui-mr-3{margin-right:var(--bui-space-3)}.bui-mr-4{margin-right:var(--bui-space-4)}.bui-mr-5{margin-right:var(--bui-space-5)}.bui-mr-6{margin-right:var(--bui-space-6)}.bui-mr-7{margin-right:var(--bui-space-7)}.bui-mr-8{margin-right:var(--bui-space-8)}.bui-mr-9{margin-right:var(--bui-space-9)}.bui-mr-10{margin-right:var(--bui-space-10)}.bui-mr-11{margin-right:var(--bui-space-11)}.bui-mr-12{margin-right:var(--bui-space-12)}.bui-mr-13{margin-right:var(--bui-space-13)}.bui-mr-14{margin-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-mr{margin-right:var(--mr-xs)}.xs\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.xs\:bui-mr-1{margin-right:var(--bui-space-1)}.xs\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.xs\:bui-mr-2{margin-right:var(--bui-space-2)}.xs\:bui-mr-3{margin-right:var(--bui-space-3)}.xs\:bui-mr-4{margin-right:var(--bui-space-4)}.xs\:bui-mr-5{margin-right:var(--bui-space-5)}.xs\:bui-mr-6{margin-right:var(--bui-space-6)}.xs\:bui-mr-7{margin-right:var(--bui-space-7)}.xs\:bui-mr-8{margin-right:var(--bui-space-8)}.xs\:bui-mr-9{margin-right:var(--bui-space-9)}.xs\:bui-mr-10{margin-right:var(--bui-space-10)}.xs\:bui-mr-11{margin-right:var(--bui-space-11)}.xs\:bui-mr-12{margin-right:var(--bui-space-12)}.xs\:bui-mr-13{margin-right:var(--bui-space-13)}.xs\:bui-mr-14{margin-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-mr{margin-right:var(--mr-sm)}.sm\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.sm\:bui-mr-1{margin-right:var(--bui-space-1)}.sm\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.sm\:bui-mr-2{margin-right:var(--bui-space-2)}.sm\:bui-mr-3{margin-right:var(--bui-space-3)}.sm\:bui-mr-4{margin-right:var(--bui-space-4)}.sm\:bui-mr-5{margin-right:var(--bui-space-5)}.sm\:bui-mr-6{margin-right:var(--bui-space-6)}.sm\:bui-mr-7{margin-right:var(--bui-space-7)}.sm\:bui-mr-8{margin-right:var(--bui-space-8)}.sm\:bui-mr-9{margin-right:var(--bui-space-9)}.sm\:bui-mr-10{margin-right:var(--bui-space-10)}.sm\:bui-mr-11{margin-right:var(--bui-space-11)}.sm\:bui-mr-12{margin-right:var(--bui-space-12)}.sm\:bui-mr-13{margin-right:var(--bui-space-13)}.sm\:bui-mr-14{margin-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-mr{margin-right:var(--mr-md)}.md\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.md\:bui-mr-1{margin-right:var(--bui-space-1)}.md\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.md\:bui-mr-2{margin-right:var(--bui-space-2)}.md\:bui-mr-3{margin-right:var(--bui-space-3)}.md\:bui-mr-4{margin-right:var(--bui-space-4)}.md\:bui-mr-5{margin-right:var(--bui-space-5)}.md\:bui-mr-6{margin-right:var(--bui-space-6)}.md\:bui-mr-7{margin-right:var(--bui-space-7)}.md\:bui-mr-8{margin-right:var(--bui-space-8)}.md\:bui-mr-9{margin-right:var(--bui-space-9)}.md\:bui-mr-10{margin-right:var(--bui-space-10)}.md\:bui-mr-11{margin-right:var(--bui-space-11)}.md\:bui-mr-12{margin-right:var(--bui-space-12)}.md\:bui-mr-13{margin-right:var(--bui-space-13)}.md\:bui-mr-14{margin-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-mr{margin-right:var(--mr-lg)}.lg\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.lg\:bui-mr-1{margin-right:var(--bui-space-1)}.lg\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.lg\:bui-mr-2{margin-right:var(--bui-space-2)}.lg\:bui-mr-3{margin-right:var(--bui-space-3)}.lg\:bui-mr-4{margin-right:var(--bui-space-4)}.lg\:bui-mr-5{margin-right:var(--bui-space-5)}.lg\:bui-mr-6{margin-right:var(--bui-space-6)}.lg\:bui-mr-7{margin-right:var(--bui-space-7)}.lg\:bui-mr-8{margin-right:var(--bui-space-8)}.lg\:bui-mr-9{margin-right:var(--bui-space-9)}.lg\:bui-mr-10{margin-right:var(--bui-space-10)}.lg\:bui-mr-11{margin-right:var(--bui-space-11)}.lg\:bui-mr-12{margin-right:var(--bui-space-12)}.lg\:bui-mr-13{margin-right:var(--bui-space-13)}.lg\:bui-mr-14{margin-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-mr{margin-right:var(--mr-xl)}.xl\:bui-mr-0\.5{margin-right:var(--bui-space-0_5)}.xl\:bui-mr-1{margin-right:var(--bui-space-1)}.xl\:bui-mr-1\.5{margin-right:var(--bui-space-1_5)}.xl\:bui-mr-2{margin-right:var(--bui-space-2)}.xl\:bui-mr-3{margin-right:var(--bui-space-3)}.xl\:bui-mr-4{margin-right:var(--bui-space-4)}.xl\:bui-mr-5{margin-right:var(--bui-space-5)}.xl\:bui-mr-6{margin-right:var(--bui-space-6)}.xl\:bui-mr-7{margin-right:var(--bui-space-7)}.xl\:bui-mr-8{margin-right:var(--bui-space-8)}.xl\:bui-mr-9{margin-right:var(--bui-space-9)}.xl\:bui-mr-10{margin-right:var(--bui-space-10)}.xl\:bui-mr-11{margin-right:var(--bui-space-11)}.xl\:bui-mr-12{margin-right:var(--bui-space-12)}.xl\:bui-mr-13{margin-right:var(--bui-space-13)}.xl\:bui-mr-14{margin-right:var(--bui-space-14)}}.bui-mt{margin-top:var(--mt)}.bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.bui-mt-1{margin-top:var(--bui-space-1)}.bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.bui-mt-2{margin-top:var(--bui-space-2)}.bui-mt-3{margin-top:var(--bui-space-3)}.bui-mt-4{margin-top:var(--bui-space-4)}.bui-mt-5{margin-top:var(--bui-space-5)}.bui-mt-6{margin-top:var(--bui-space-6)}.bui-mt-7{margin-top:var(--bui-space-7)}.bui-mt-8{margin-top:var(--bui-space-8)}.bui-mt-9{margin-top:var(--bui-space-9)}.bui-mt-10{margin-top:var(--bui-space-10)}.bui-mt-11{margin-top:var(--bui-space-11)}.bui-mt-12{margin-top:var(--bui-space-12)}.bui-mt-13{margin-top:var(--bui-space-13)}.bui-mt-14{margin-top:var(--bui-space-14)}@media (width>=640px){.xs\:bui-mt{margin-top:var(--mt-xs)}.xs\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.xs\:bui-mt-1{margin-top:var(--bui-space-1)}.xs\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.xs\:bui-mt-2{margin-top:var(--bui-space-2)}.xs\:bui-mt-3{margin-top:var(--bui-space-3)}.xs\:bui-mt-4{margin-top:var(--bui-space-4)}.xs\:bui-mt-5{margin-top:var(--bui-space-5)}.xs\:bui-mt-6{margin-top:var(--bui-space-6)}.xs\:bui-mt-7{margin-top:var(--bui-space-7)}.xs\:bui-mt-8{margin-top:var(--bui-space-8)}.xs\:bui-mt-9{margin-top:var(--bui-space-9)}.xs\:bui-mt-10{margin-top:var(--bui-space-10)}.xs\:bui-mt-11{margin-top:var(--bui-space-11)}.xs\:bui-mt-12{margin-top:var(--bui-space-12)}.xs\:bui-mt-13{margin-top:var(--bui-space-13)}.xs\:bui-mt-14{margin-top:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-mt{margin-top:var(--mt-sm)}.sm\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.sm\:bui-mt-1{margin-top:var(--bui-space-1)}.sm\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.sm\:bui-mt-2{margin-top:var(--bui-space-2)}.sm\:bui-mt-3{margin-top:var(--bui-space-3)}.sm\:bui-mt-4{margin-top:var(--bui-space-4)}.sm\:bui-mt-5{margin-top:var(--bui-space-5)}.sm\:bui-mt-6{margin-top:var(--bui-space-6)}.sm\:bui-mt-7{margin-top:var(--bui-space-7)}.sm\:bui-mt-8{margin-top:var(--bui-space-8)}.sm\:bui-mt-9{margin-top:var(--bui-space-9)}.sm\:bui-mt-10{margin-top:var(--bui-space-10)}.sm\:bui-mt-11{margin-top:var(--bui-space-11)}.sm\:bui-mt-12{margin-top:var(--bui-space-12)}.sm\:bui-mt-13{margin-top:var(--bui-space-13)}.sm\:bui-mt-14{margin-top:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-mt{margin-top:var(--mt-md)}.md\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.md\:bui-mt-1{margin-top:var(--bui-space-1)}.md\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.md\:bui-mt-2{margin-top:var(--bui-space-2)}.md\:bui-mt-3{margin-top:var(--bui-space-3)}.md\:bui-mt-4{margin-top:var(--bui-space-4)}.md\:bui-mt-5{margin-top:var(--bui-space-5)}.md\:bui-mt-6{margin-top:var(--bui-space-6)}.md\:bui-mt-7{margin-top:var(--bui-space-7)}.md\:bui-mt-8{margin-top:var(--bui-space-8)}.md\:bui-mt-9{margin-top:var(--bui-space-9)}.md\:bui-mt-10{margin-top:var(--bui-space-10)}.md\:bui-mt-11{margin-top:var(--bui-space-11)}.md\:bui-mt-12{margin-top:var(--bui-space-12)}.md\:bui-mt-13{margin-top:var(--bui-space-13)}.md\:bui-mt-14{margin-top:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-mt{margin-top:var(--mt-lg)}.lg\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.lg\:bui-mt-1{margin-top:var(--bui-space-1)}.lg\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.lg\:bui-mt-2{margin-top:var(--bui-space-2)}.lg\:bui-mt-3{margin-top:var(--bui-space-3)}.lg\:bui-mt-4{margin-top:var(--bui-space-4)}.lg\:bui-mt-5{margin-top:var(--bui-space-5)}.lg\:bui-mt-6{margin-top:var(--bui-space-6)}.lg\:bui-mt-7{margin-top:var(--bui-space-7)}.lg\:bui-mt-8{margin-top:var(--bui-space-8)}.lg\:bui-mt-9{margin-top:var(--bui-space-9)}.lg\:bui-mt-10{margin-top:var(--bui-space-10)}.lg\:bui-mt-11{margin-top:var(--bui-space-11)}.lg\:bui-mt-12{margin-top:var(--bui-space-12)}.lg\:bui-mt-13{margin-top:var(--bui-space-13)}.lg\:bui-mt-14{margin-top:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-mt{margin-top:var(--mt-xl)}.xl\:bui-mt-0\.5{margin-top:var(--bui-space-0_5)}.xl\:bui-mt-1{margin-top:var(--bui-space-1)}.xl\:bui-mt-1\.5{margin-top:var(--bui-space-1_5)}.xl\:bui-mt-2{margin-top:var(--bui-space-2)}.xl\:bui-mt-3{margin-top:var(--bui-space-3)}.xl\:bui-mt-4{margin-top:var(--bui-space-4)}.xl\:bui-mt-5{margin-top:var(--bui-space-5)}.xl\:bui-mt-6{margin-top:var(--bui-space-6)}.xl\:bui-mt-7{margin-top:var(--bui-space-7)}.xl\:bui-mt-8{margin-top:var(--bui-space-8)}.xl\:bui-mt-9{margin-top:var(--bui-space-9)}.xl\:bui-mt-10{margin-top:var(--bui-space-10)}.xl\:bui-mt-11{margin-top:var(--bui-space-11)}.xl\:bui-mt-12{margin-top:var(--bui-space-12)}.xl\:bui-mt-13{margin-top:var(--bui-space-13)}.xl\:bui-mt-14{margin-top:var(--bui-space-14)}}.bui-mb{margin-bottom:var(--mb)}.bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.bui-mb-1{margin-bottom:var(--bui-space-1)}.bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.bui-mb-2{margin-bottom:var(--bui-space-2)}.bui-mb-3{margin-bottom:var(--bui-space-3)}.bui-mb-4{margin-bottom:var(--bui-space-4)}.bui-mb-5{margin-bottom:var(--bui-space-5)}.bui-mb-6{margin-bottom:var(--bui-space-6)}.bui-mb-7{margin-bottom:var(--bui-space-7)}.bui-mb-8{margin-bottom:var(--bui-space-8)}.bui-mb-9{margin-bottom:var(--bui-space-9)}.bui-mb-10{margin-bottom:var(--bui-space-10)}.bui-mb-11{margin-bottom:var(--bui-space-11)}.bui-mb-12{margin-bottom:var(--bui-space-12)}.bui-mb-13{margin-bottom:var(--bui-space-13)}.bui-mb-14{margin-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-mb{margin-bottom:var(--mb-xs)}.xs\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.xs\:bui-mb-1{margin-bottom:var(--bui-space-1)}.xs\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.xs\:bui-mb-2{margin-bottom:var(--bui-space-2)}.xs\:bui-mb-3{margin-bottom:var(--bui-space-3)}.xs\:bui-mb-4{margin-bottom:var(--bui-space-4)}.xs\:bui-mb-5{margin-bottom:var(--bui-space-5)}.xs\:bui-mb-6{margin-bottom:var(--bui-space-6)}.xs\:bui-mb-7{margin-bottom:var(--bui-space-7)}.xs\:bui-mb-8{margin-bottom:var(--bui-space-8)}.xs\:bui-mb-9{margin-bottom:var(--bui-space-9)}.xs\:bui-mb-10{margin-bottom:var(--bui-space-10)}.xs\:bui-mb-11{margin-bottom:var(--bui-space-11)}.xs\:bui-mb-12{margin-bottom:var(--bui-space-12)}.xs\:bui-mb-13{margin-bottom:var(--bui-space-13)}.xs\:bui-mb-14{margin-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-mb{margin-bottom:var(--mb-sm)}.sm\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.sm\:bui-mb-1{margin-bottom:var(--bui-space-1)}.sm\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.sm\:bui-mb-2{margin-bottom:var(--bui-space-2)}.sm\:bui-mb-3{margin-bottom:var(--bui-space-3)}.sm\:bui-mb-4{margin-bottom:var(--bui-space-4)}.sm\:bui-mb-5{margin-bottom:var(--bui-space-5)}.sm\:bui-mb-6{margin-bottom:var(--bui-space-6)}.sm\:bui-mb-7{margin-bottom:var(--bui-space-7)}.sm\:bui-mb-8{margin-bottom:var(--bui-space-8)}.sm\:bui-mb-9{margin-bottom:var(--bui-space-9)}.sm\:bui-mb-10{margin-bottom:var(--bui-space-10)}.sm\:bui-mb-11{margin-bottom:var(--bui-space-11)}.sm\:bui-mb-12{margin-bottom:var(--bui-space-12)}.sm\:bui-mb-13{margin-bottom:var(--bui-space-13)}.sm\:bui-mb-14{margin-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-mb{margin-bottom:var(--mb-md)}.md\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.md\:bui-mb-1{margin-bottom:var(--bui-space-1)}.md\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.md\:bui-mb-2{margin-bottom:var(--bui-space-2)}.md\:bui-mb-3{margin-bottom:var(--bui-space-3)}.md\:bui-mb-4{margin-bottom:var(--bui-space-4)}.md\:bui-mb-5{margin-bottom:var(--bui-space-5)}.md\:bui-mb-6{margin-bottom:var(--bui-space-6)}.md\:bui-mb-7{margin-bottom:var(--bui-space-7)}.md\:bui-mb-8{margin-bottom:var(--bui-space-8)}.md\:bui-mb-9{margin-bottom:var(--bui-space-9)}.md\:bui-mb-10{margin-bottom:var(--bui-space-10)}.md\:bui-mb-11{margin-bottom:var(--bui-space-11)}.md\:bui-mb-12{margin-bottom:var(--bui-space-12)}.md\:bui-mb-13{margin-bottom:var(--bui-space-13)}.md\:bui-mb-14{margin-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-mb{margin-bottom:var(--mb-lg)}.lg\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.lg\:bui-mb-1{margin-bottom:var(--bui-space-1)}.lg\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.lg\:bui-mb-2{margin-bottom:var(--bui-space-2)}.lg\:bui-mb-3{margin-bottom:var(--bui-space-3)}.lg\:bui-mb-4{margin-bottom:var(--bui-space-4)}.lg\:bui-mb-5{margin-bottom:var(--bui-space-5)}.lg\:bui-mb-6{margin-bottom:var(--bui-space-6)}.lg\:bui-mb-7{margin-bottom:var(--bui-space-7)}.lg\:bui-mb-8{margin-bottom:var(--bui-space-8)}.lg\:bui-mb-9{margin-bottom:var(--bui-space-9)}.lg\:bui-mb-10{margin-bottom:var(--bui-space-10)}.lg\:bui-mb-11{margin-bottom:var(--bui-space-11)}.lg\:bui-mb-12{margin-bottom:var(--bui-space-12)}.lg\:bui-mb-13{margin-bottom:var(--bui-space-13)}.lg\:bui-mb-14{margin-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-mb{margin-bottom:var(--mb-xl)}.xl\:bui-mb-0\.5{margin-bottom:var(--bui-space-0_5)}.xl\:bui-mb-1{margin-bottom:var(--bui-space-1)}.xl\:bui-mb-1\.5{margin-bottom:var(--bui-space-1_5)}.xl\:bui-mb-2{margin-bottom:var(--bui-space-2)}.xl\:bui-mb-3{margin-bottom:var(--bui-space-3)}.xl\:bui-mb-4{margin-bottom:var(--bui-space-4)}.xl\:bui-mb-5{margin-bottom:var(--bui-space-5)}.xl\:bui-mb-6{margin-bottom:var(--bui-space-6)}.xl\:bui-mb-7{margin-bottom:var(--bui-space-7)}.xl\:bui-mb-8{margin-bottom:var(--bui-space-8)}.xl\:bui-mb-9{margin-bottom:var(--bui-space-9)}.xl\:bui-mb-10{margin-bottom:var(--bui-space-10)}.xl\:bui-mb-11{margin-bottom:var(--bui-space-11)}.xl\:bui-mb-12{margin-bottom:var(--bui-space-12)}.xl\:bui-mb-13{margin-bottom:var(--bui-space-13)}.xl\:bui-mb-14{margin-bottom:var(--bui-space-14)}}.bui-my{margin-top:var(--my);margin-bottom:var(--my)}.bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}@media (width>=640px){.xs\:bui-my{margin-top:var(--my-xs);margin-bottom:var(--my-xs)}.xs\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.xs\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.xs\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.xs\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.xs\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.xs\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.xs\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.xs\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.xs\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.xs\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.xs\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.xs\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.xs\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.xs\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.xs\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.xs\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-my{margin-top:var(--my-sm);margin-bottom:var(--my-sm)}.sm\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.sm\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.sm\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.sm\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.sm\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.sm\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.sm\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.sm\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.sm\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.sm\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.sm\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.sm\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.sm\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.sm\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.sm\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.sm\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-my{margin-top:var(--my-md);margin-bottom:var(--my-md)}.md\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.md\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.md\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.md\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.md\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.md\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.md\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.md\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.md\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.md\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.md\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.md\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.md\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.md\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.md\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.md\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-my{margin-top:var(--my-lg);margin-bottom:var(--my-lg)}.lg\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.lg\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.lg\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.lg\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.lg\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.lg\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.lg\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.lg\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.lg\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.lg\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.lg\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.lg\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.lg\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.lg\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.lg\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.lg\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-my{margin-top:var(--my-xl);margin-bottom:var(--my-xl)}.xl\:bui-my-0\.5{margin-top:var(--bui-space-0_5);margin-bottom:var(--bui-space-0_5)}.xl\:bui-my-1{margin-top:var(--bui-space-1);margin-bottom:var(--bui-space-1)}.xl\:bui-my-1\.5{margin-top:var(--bui-space-1_5);margin-bottom:var(--bui-space-1_5)}.xl\:bui-my-2{margin-top:var(--bui-space-2);margin-bottom:var(--bui-space-2)}.xl\:bui-my-3{margin-top:var(--bui-space-3);margin-bottom:var(--bui-space-3)}.xl\:bui-my-4{margin-top:var(--bui-space-4);margin-bottom:var(--bui-space-4)}.xl\:bui-my-5{margin-top:var(--bui-space-5);margin-bottom:var(--bui-space-5)}.xl\:bui-my-6{margin-top:var(--bui-space-6);margin-bottom:var(--bui-space-6)}.xl\:bui-my-7{margin-top:var(--bui-space-7);margin-bottom:var(--bui-space-7)}.xl\:bui-my-8{margin-top:var(--bui-space-8);margin-bottom:var(--bui-space-8)}.xl\:bui-my-9{margin-top:var(--bui-space-9);margin-bottom:var(--bui-space-9)}.xl\:bui-my-10{margin-top:var(--bui-space-10);margin-bottom:var(--bui-space-10)}.xl\:bui-my-11{margin-top:var(--bui-space-11);margin-bottom:var(--bui-space-11)}.xl\:bui-my-12{margin-top:var(--bui-space-12);margin-bottom:var(--bui-space-12)}.xl\:bui-my-13{margin-top:var(--bui-space-13);margin-bottom:var(--bui-space-13)}.xl\:bui-my-14{margin-top:var(--bui-space-14);margin-bottom:var(--bui-space-14)}}.bui-mx{margin-left:var(--mx);margin-right:var(--mx)}.bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}@media (width>=640px){.xs\:bui-mx{margin-left:var(--mx-xs);margin-right:var(--mx-xs)}.xs\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.xs\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.xs\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.xs\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.xs\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.xs\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.xs\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.xs\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.xs\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.xs\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.xs\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.xs\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.xs\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.xs\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.xs\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.xs\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-mx{margin-left:var(--mx-sm);margin-right:var(--mx-sm)}.sm\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.sm\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.sm\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.sm\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.sm\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.sm\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.sm\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.sm\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.sm\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.sm\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.sm\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.sm\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.sm\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.sm\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.sm\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.sm\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-mx{margin-left:var(--mx-md);margin-right:var(--mx-md)}.md\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.md\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.md\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.md\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.md\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.md\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.md\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.md\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.md\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.md\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.md\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.md\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.md\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.md\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.md\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.md\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-mx{margin-left:var(--mx-lg);margin-right:var(--mx-lg)}.lg\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.lg\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.lg\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.lg\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.lg\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.lg\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.lg\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.lg\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.lg\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.lg\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.lg\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.lg\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.lg\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.lg\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.lg\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.lg\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-mx{margin-left:var(--mx-xl);margin-right:var(--mx-xl)}.xl\:bui-mx-0\.5{margin-left:var(--bui-space-0_5);margin-right:var(--bui-space-0_5)}.xl\:bui-mx-1{margin-left:var(--bui-space-1);margin-right:var(--bui-space-1)}.xl\:bui-mx-1\.5{margin-left:var(--bui-space-1_5);margin-right:var(--bui-space-1_5)}.xl\:bui-mx-2{margin-left:var(--bui-space-2);margin-right:var(--bui-space-2)}.xl\:bui-mx-3{margin-left:var(--bui-space-3);margin-right:var(--bui-space-3)}.xl\:bui-mx-4{margin-left:var(--bui-space-4);margin-right:var(--bui-space-4)}.xl\:bui-mx-5{margin-left:var(--bui-space-5);margin-right:var(--bui-space-5)}.xl\:bui-mx-6{margin-left:var(--bui-space-6);margin-right:var(--bui-space-6)}.xl\:bui-mx-7{margin-left:var(--bui-space-7);margin-right:var(--bui-space-7)}.xl\:bui-mx-8{margin-left:var(--bui-space-8);margin-right:var(--bui-space-8)}.xl\:bui-mx-9{margin-left:var(--bui-space-9);margin-right:var(--bui-space-9)}.xl\:bui-mx-10{margin-left:var(--bui-space-10);margin-right:var(--bui-space-10)}.xl\:bui-mx-11{margin-left:var(--bui-space-11);margin-right:var(--bui-space-11)}.xl\:bui-mx-12{margin-left:var(--bui-space-12);margin-right:var(--bui-space-12)}.xl\:bui-mx-13{margin-left:var(--bui-space-13);margin-right:var(--bui-space-13)}.xl\:bui-mx-14{margin-left:var(--bui-space-14);margin-right:var(--bui-space-14)}}.bui-display-none{display:none}.bui-display-inline{display:inline}.bui-display-inline-block{display:inline-block}.bui-display-block{display:block}@media (width>=640px){.xs\:bui-display-none{display:none}.xs\:bui-display-inline{display:inline}.xs\:bui-display-inline-block{display:inline-block}.xs\:bui-display-block{display:block}}@media (width>=768px){.sm\:bui-display-none{display:none}.sm\:bui-display-inline{display:inline}.sm\:bui-display-inline-block{display:inline-block}.sm\:bui-display-block{display:block}}@media (width>=1024px){.md\:bui-display-none{display:none}.md\:bui-display-inline{display:inline}.md\:bui-display-inline-block{display:inline-block}.md\:bui-display-block{display:block}}@media (width>=1280px){.lg\:bui-display-none{display:none}.lg\:bui-display-inline{display:inline}.lg\:bui-display-inline-block{display:inline-block}.lg\:bui-display-block{display:block}}@media (width>=1536px){.xl\:bui-display-none{display:none}.xl\:bui-display-inline{display:inline}.xl\:bui-display-inline-block{display:inline-block}.xl\:bui-display-block{display:block}}.bui-w{width:var(--width)}.bui-min-w{min-width:var(--min-width)}.bui-max-w{max-width:var(--max-width)}@media (width>=640px){.xs\:bui-w{width:var(--width)}.xs\:bui-min-w{min-width:var(--min-width)}.xs\:bui-max-w{max-width:var(--max-width)}}@media (width>=768px){.sm\:bui-w{width:var(--width)}.sm\:bui-min-w{min-width:var(--min-width)}.sm\:bui-max-w{max-width:var(--max-width)}}@media (width>=1024px){.md\:bui-w{width:var(--width)}.md\:bui-min-w{min-width:var(--min-width)}.md\:bui-max-w{max-width:var(--max-width)}}@media (width>=1280px){.lg\:bui-w{width:var(--width)}.lg\:bui-min-w{min-width:var(--min-width)}.lg\:bui-max-w{max-width:var(--max-width)}}@media (width>=1536px){.xl\:bui-w{width:var(--width)}.xl\:bui-min-w{min-width:var(--min-width)}.xl\:bui-max-w{max-width:var(--max-width)}}.bui-h{height:var(--height)}.bui-min-h{min-height:var(--min-height)}.bui-max-h{max-height:var(--max-height)}@media (width>=640px){.xs\:bui-h{height:var(--height)}.xs\:bui-min-h{min-height:var(--min-height)}.xs\:bui-max-h{max-height:var(--max-height)}}@media (width>=768px){.sm\:bui-h{height:var(--height)}.sm\:bui-min-h{min-height:var(--min-height)}.sm\:bui-max-h{max-height:var(--max-height)}}@media (width>=1024px){.md\:bui-h{height:var(--height)}.md\:bui-min-h{min-height:var(--min-height)}.md\:bui-max-h{max-height:var(--max-height)}}@media (width>=1280px){.lg\:bui-h{height:var(--height)}.lg\:bui-min-h{min-height:var(--min-height)}.lg\:bui-max-h{max-height:var(--max-height)}}@media (width>=1536px){.xl\:bui-h{height:var(--height)}.xl\:bui-min-h{min-height:var(--min-height)}.xl\:bui-max-h{max-height:var(--max-height)}}.bui-position-absolute{position:absolute}.bui-position-fixed{position:fixed}.bui-position-sticky{position:sticky}.bui-position-relative{position:relative}.bui-position-static{position:static}@media (width>=640px){.xs\:bui-position-absolute{position:absolute}.xs\:bui-position-fixed{position:fixed}.xs\:bui-position-sticky{position:sticky}.xs\:bui-position-relative{position:relative}.xs\:bui-position-static{position:static}}@media (width>=768px){.sm\:bui-position-absolute{position:absolute}.sm\:bui-position-fixed{position:fixed}.sm\:bui-position-sticky{position:sticky}.sm\:bui-position-relative{position:relative}.sm\:bui-position-static{position:static}}@media (width>=1024px){.md\:bui-position-absolute{position:absolute}.md\:bui-position-fixed{position:fixed}.md\:bui-position-sticky{position:sticky}.md\:bui-position-relative{position:relative}.md\:bui-position-static{position:static}}@media (width>=1280px){.lg\:bui-position-absolute{position:absolute}.lg\:bui-position-fixed{position:fixed}.lg\:bui-position-sticky{position:sticky}.lg\:bui-position-relative{position:relative}.lg\:bui-position-static{position:static}}@media (width>=1536px){.xl\:bui-position-absolute{position:absolute}.xl\:bui-position-fixed{position:fixed}.xl\:bui-position-sticky{position:sticky}.xl\:bui-position-relative{position:relative}.xl\:bui-position-static{position:static}}.bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.bui-col-span-1{grid-column:span 1/span 1}.bui-col-span-2{grid-column:span 2/span 2}.bui-col-span-3{grid-column:span 3/span 3}.bui-col-span-4{grid-column:span 4/span 4}.bui-col-span-5{grid-column:span 5/span 5}.bui-col-span-6{grid-column:span 6/span 6}.bui-col-span-7{grid-column:span 7/span 7}.bui-col-span-8{grid-column:span 8/span 8}.bui-col-span-9{grid-column:span 9/span 9}.bui-col-span-10{grid-column:span 10/span 10}.bui-col-span-11{grid-column:span 11/span 11}.bui-col-span-12{grid-column:span 12/span 12}.bui-col-span-auto{grid-column:span auto/span auto}.bui-col-start-1{grid-column-start:1}.bui-col-start-2{grid-column-start:2}.bui-col-start-3{grid-column-start:3}.bui-col-start-4{grid-column-start:4}.bui-col-start-5{grid-column-start:5}.bui-col-start-6{grid-column-start:6}.bui-col-start-7{grid-column-start:7}.bui-col-start-8{grid-column-start:8}.bui-col-start-9{grid-column-start:9}.bui-col-start-10{grid-column-start:10}.bui-col-start-11{grid-column-start:11}.bui-col-start-12{grid-column-start:12}.bui-col-start-13{grid-column-start:13}.bui-col-start-auto{grid-column-start:auto}.bui-col-end-1{grid-column-end:1}.bui-col-end-2{grid-column-end:2}.bui-col-end-3{grid-column-end:3}.bui-col-end-4{grid-column-end:4}.bui-col-end-5{grid-column-end:5}.bui-col-end-6{grid-column-end:6}.bui-col-end-7{grid-column-end:7}.bui-col-end-8{grid-column-end:8}.bui-col-end-9{grid-column-end:9}.bui-col-end-10{grid-column-end:10}.bui-col-end-11{grid-column-end:11}.bui-col-end-12{grid-column-end:12}.bui-col-end-13{grid-column-end:13}.bui-col-end-auto{grid-column-end:auto}.bui-row-span-1{grid-row:span 1/span 1}.bui-row-span-2{grid-row:span 2/span 2}.bui-row-span-3{grid-row:span 3/span 3}.bui-row-span-4{grid-row:span 4/span 4}.bui-row-span-5{grid-row:span 5/span 5}.bui-row-span-6{grid-row:span 6/span 6}.bui-row-span-7{grid-row:span 7/span 7}.bui-row-span-8{grid-row:span 8/span 8}.bui-row-span-9{grid-row:span 9/span 9}.bui-row-span-10{grid-row:span 10/span 10}.bui-row-span-11{grid-row:span 11/span 11}.bui-row-span-12{grid-row:span 12/span 12}.bui-row-span-auto{grid-row:span auto/span auto}@media (width>=640px){.xs\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xs\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xs\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xs\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xs\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xs\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xs\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xs\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xs\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xs\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xs\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xs\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xs\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.xs\:bui-col-span-1{grid-column:span 1/span 1}.xs\:bui-col-span-2{grid-column:span 2/span 2}.xs\:bui-col-span-3{grid-column:span 3/span 3}.xs\:bui-col-span-4{grid-column:span 4/span 4}.xs\:bui-col-span-5{grid-column:span 5/span 5}.xs\:bui-col-span-6{grid-column:span 6/span 6}.xs\:bui-col-span-7{grid-column:span 7/span 7}.xs\:bui-col-span-8{grid-column:span 8/span 8}.xs\:bui-col-span-9{grid-column:span 9/span 9}.xs\:bui-col-span-10{grid-column:span 10/span 10}.xs\:bui-col-span-11{grid-column:span 11/span 11}.xs\:bui-col-span-12{grid-column:span 12/span 12}.xs\:bui-col-span-auto{grid-column:span auto/span auto}.xs\:bui-col-start-1{grid-column-start:1}.xs\:bui-col-start-2{grid-column-start:2}.xs\:bui-col-start-3{grid-column-start:3}.xs\:bui-col-start-4{grid-column-start:4}.xs\:bui-col-start-5{grid-column-start:5}.xs\:bui-col-start-6{grid-column-start:6}.xs\:bui-col-start-7{grid-column-start:7}.xs\:bui-col-start-8{grid-column-start:8}.xs\:bui-col-start-9{grid-column-start:9}.xs\:bui-col-start-10{grid-column-start:10}.xs\:bui-col-start-11{grid-column-start:11}.xs\:bui-col-start-12{grid-column-start:12}.xs\:bui-col-start-13{grid-column-start:13}.xs\:bui-col-start-auto{grid-column-start:auto}.xs\:bui-col-end-1{grid-column-end:1}.xs\:bui-col-end-2{grid-column-end:2}.xs\:bui-col-end-3{grid-column-end:3}.xs\:bui-col-end-4{grid-column-end:4}.xs\:bui-col-end-5{grid-column-end:5}.xs\:bui-col-end-6{grid-column-end:6}.xs\:bui-col-end-7{grid-column-end:7}.xs\:bui-col-end-8{grid-column-end:8}.xs\:bui-col-end-9{grid-column-end:9}.xs\:bui-col-end-10{grid-column-end:10}.xs\:bui-col-end-11{grid-column-end:11}.xs\:bui-col-end-12{grid-column-end:12}.xs\:bui-col-end-13{grid-column-end:13}.xs\:bui-col-end-auto{grid-column-end:auto}.xs\:bui-row-span-1{grid-row:span 1/span 1}.xs\:bui-row-span-2{grid-row:span 2/span 2}.xs\:bui-row-span-3{grid-row:span 3/span 3}.xs\:bui-row-span-4{grid-row:span 4/span 4}.xs\:bui-row-span-5{grid-row:span 5/span 5}.xs\:bui-row-span-6{grid-row:span 6/span 6}.xs\:bui-row-span-7{grid-row:span 7/span 7}.xs\:bui-row-span-8{grid-row:span 8/span 8}.xs\:bui-row-span-9{grid-row:span 9/span 9}.xs\:bui-row-span-10{grid-row:span 10/span 10}.xs\:bui-row-span-11{grid-row:span 11/span 11}.xs\:bui-row-span-12{grid-row:span 12/span 12}.xs\:bui-row-span-auto{grid-row:span auto/span auto}}@media (width>=768px){.sm\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.sm\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.sm\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.sm\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.sm\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.sm\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.sm\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.sm\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.sm\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.sm\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.sm\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.sm\:bui-col-span-1{grid-column:span 1/span 1}.sm\:bui-col-span-2{grid-column:span 2/span 2}.sm\:bui-col-span-3{grid-column:span 3/span 3}.sm\:bui-col-span-4{grid-column:span 4/span 4}.sm\:bui-col-span-5{grid-column:span 5/span 5}.sm\:bui-col-span-6{grid-column:span 6/span 6}.sm\:bui-col-span-7{grid-column:span 7/span 7}.sm\:bui-col-span-8{grid-column:span 8/span 8}.sm\:bui-col-span-9{grid-column:span 9/span 9}.sm\:bui-col-span-10{grid-column:span 10/span 10}.sm\:bui-col-span-11{grid-column:span 11/span 11}.sm\:bui-col-span-12{grid-column:span 12/span 12}.sm\:bui-col-span-auto{grid-column:span auto/span auto}.sm\:bui-col-start-1{grid-column-start:1}.sm\:bui-col-start-2{grid-column-start:2}.sm\:bui-col-start-3{grid-column-start:3}.sm\:bui-col-start-4{grid-column-start:4}.sm\:bui-col-start-5{grid-column-start:5}.sm\:bui-col-start-6{grid-column-start:6}.sm\:bui-col-start-7{grid-column-start:7}.sm\:bui-col-start-8{grid-column-start:8}.sm\:bui-col-start-9{grid-column-start:9}.sm\:bui-col-start-10{grid-column-start:10}.sm\:bui-col-start-11{grid-column-start:11}.sm\:bui-col-start-12{grid-column-start:12}.sm\:bui-col-start-13{grid-column-start:13}.sm\:bui-col-start-auto{grid-column-start:auto}.sm\:bui-col-end-1{grid-column-end:1}.sm\:bui-col-end-2{grid-column-end:2}.sm\:bui-col-end-3{grid-column-end:3}.sm\:bui-col-end-4{grid-column-end:4}.sm\:bui-col-end-5{grid-column-end:5}.sm\:bui-col-end-6{grid-column-end:6}.sm\:bui-col-end-7{grid-column-end:7}.sm\:bui-col-end-8{grid-column-end:8}.sm\:bui-col-end-9{grid-column-end:9}.sm\:bui-col-end-10{grid-column-end:10}.sm\:bui-col-end-11{grid-column-end:11}.sm\:bui-col-end-12{grid-column-end:12}.sm\:bui-col-end-13{grid-column-end:13}.sm\:bui-col-end-auto{grid-column-end:auto}.sm\:bui-row-span-1{grid-row:span 1/span 1}.sm\:bui-row-span-2{grid-row:span 2/span 2}.sm\:bui-row-span-3{grid-row:span 3/span 3}.sm\:bui-row-span-4{grid-row:span 4/span 4}.sm\:bui-row-span-5{grid-row:span 5/span 5}.sm\:bui-row-span-6{grid-row:span 6/span 6}.sm\:bui-row-span-7{grid-row:span 7/span 7}.sm\:bui-row-span-8{grid-row:span 8/span 8}.sm\:bui-row-span-9{grid-row:span 9/span 9}.sm\:bui-row-span-10{grid-row:span 10/span 10}.sm\:bui-row-span-11{grid-row:span 11/span 11}.sm\:bui-row-span-12{grid-row:span 12/span 12}.sm\:bui-row-span-auto{grid-row:span auto/span auto}}@media (width>=1024px){.md\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.md\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.md\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.md\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.md\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.md\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.md\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.md\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.md\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.md\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.md\:bui-col-span-1{grid-column:span 1/span 1}.md\:bui-col-span-2{grid-column:span 2/span 2}.md\:bui-col-span-3{grid-column:span 3/span 3}.md\:bui-col-span-4{grid-column:span 4/span 4}.md\:bui-col-span-5{grid-column:span 5/span 5}.md\:bui-col-span-6{grid-column:span 6/span 6}.md\:bui-col-span-7{grid-column:span 7/span 7}.md\:bui-col-span-8{grid-column:span 8/span 8}.md\:bui-col-span-9{grid-column:span 9/span 9}.md\:bui-col-span-10{grid-column:span 10/span 10}.md\:bui-col-span-11{grid-column:span 11/span 11}.md\:bui-col-span-12{grid-column:span 12/span 12}.md\:bui-col-span-auto{grid-column:span auto/span auto}.md\:bui-col-start-1{grid-column-start:1}.md\:bui-col-start-2{grid-column-start:2}.md\:bui-col-start-3{grid-column-start:3}.md\:bui-col-start-4{grid-column-start:4}.md\:bui-col-start-5{grid-column-start:5}.md\:bui-col-start-6{grid-column-start:6}.md\:bui-col-start-7{grid-column-start:7}.md\:bui-col-start-8{grid-column-start:8}.md\:bui-col-start-9{grid-column-start:9}.md\:bui-col-start-10{grid-column-start:10}.md\:bui-col-start-11{grid-column-start:11}.md\:bui-col-start-12{grid-column-start:12}.md\:bui-col-start-13{grid-column-start:13}.md\:bui-col-start-auto{grid-column-start:auto}.md\:bui-col-end-1{grid-column-end:1}.md\:bui-col-end-2{grid-column-end:2}.md\:bui-col-end-3{grid-column-end:3}.md\:bui-col-end-4{grid-column-end:4}.md\:bui-col-end-5{grid-column-end:5}.md\:bui-col-end-6{grid-column-end:6}.md\:bui-col-end-7{grid-column-end:7}.md\:bui-col-end-8{grid-column-end:8}.md\:bui-col-end-9{grid-column-end:9}.md\:bui-col-end-10{grid-column-end:10}.md\:bui-col-end-11{grid-column-end:11}.md\:bui-col-end-12{grid-column-end:12}.md\:bui-col-end-13{grid-column-end:13}.md\:bui-col-end-auto{grid-column-end:auto}.md\:bui-row-span-1{grid-row:span 1/span 1}.md\:bui-row-span-2{grid-row:span 2/span 2}.md\:bui-row-span-3{grid-row:span 3/span 3}.md\:bui-row-span-4{grid-row:span 4/span 4}.md\:bui-row-span-5{grid-row:span 5/span 5}.md\:bui-row-span-6{grid-row:span 6/span 6}.md\:bui-row-span-7{grid-row:span 7/span 7}.md\:bui-row-span-8{grid-row:span 8/span 8}.md\:bui-row-span-9{grid-row:span 9/span 9}.md\:bui-row-span-10{grid-row:span 10/span 10}.md\:bui-row-span-11{grid-row:span 11/span 11}.md\:bui-row-span-12{grid-row:span 12/span 12}.md\:bui-row-span-auto{grid-row:span auto/span auto}}@media (width>=1280px){.lg\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.lg\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.lg\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.lg\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.lg\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.lg\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.lg\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.lg\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.lg\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.lg\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.lg\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.lg\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.lg\:bui-col-span-1{grid-column:span 1/span 1}.lg\:bui-col-span-2{grid-column:span 2/span 2}.lg\:bui-col-span-3{grid-column:span 3/span 3}.lg\:bui-col-span-4{grid-column:span 4/span 4}.lg\:bui-col-span-5{grid-column:span 5/span 5}.lg\:bui-col-span-6{grid-column:span 6/span 6}.lg\:bui-col-span-7{grid-column:span 7/span 7}.lg\:bui-col-span-8{grid-column:span 8/span 8}.lg\:bui-col-span-9{grid-column:span 9/span 9}.lg\:bui-col-span-10{grid-column:span 10/span 10}.lg\:bui-col-span-11{grid-column:span 11/span 11}.lg\:bui-col-span-12{grid-column:span 12/span 12}.lg\:bui-col-span-auto{grid-column:span auto/span auto}.lg\:bui-col-start-1{grid-column-start:1}.lg\:bui-col-start-2{grid-column-start:2}.lg\:bui-col-start-3{grid-column-start:3}.lg\:bui-col-start-4{grid-column-start:4}.lg\:bui-col-start-5{grid-column-start:5}.lg\:bui-col-start-6{grid-column-start:6}.lg\:bui-col-start-7{grid-column-start:7}.lg\:bui-col-start-8{grid-column-start:8}.lg\:bui-col-start-9{grid-column-start:9}.lg\:bui-col-start-10{grid-column-start:10}.lg\:bui-col-start-11{grid-column-start:11}.lg\:bui-col-start-12{grid-column-start:12}.lg\:bui-col-start-13{grid-column-start:13}.lg\:bui-col-start-auto{grid-column-start:auto}.lg\:bui-col-end-1{grid-column-end:1}.lg\:bui-col-end-2{grid-column-end:2}.lg\:bui-col-end-3{grid-column-end:3}.lg\:bui-col-end-4{grid-column-end:4}.lg\:bui-col-end-5{grid-column-end:5}.lg\:bui-col-end-6{grid-column-end:6}.lg\:bui-col-end-7{grid-column-end:7}.lg\:bui-col-end-8{grid-column-end:8}.lg\:bui-col-end-9{grid-column-end:9}.lg\:bui-col-end-10{grid-column-end:10}.lg\:bui-col-end-11{grid-column-end:11}.lg\:bui-col-end-12{grid-column-end:12}.lg\:bui-col-end-13{grid-column-end:13}.lg\:bui-col-end-auto{grid-column-end:auto}.lg\:bui-row-span-1{grid-row:span 1/span 1}.lg\:bui-row-span-2{grid-row:span 2/span 2}.lg\:bui-row-span-3{grid-row:span 3/span 3}.lg\:bui-row-span-4{grid-row:span 4/span 4}.lg\:bui-row-span-5{grid-row:span 5/span 5}.lg\:bui-row-span-6{grid-row:span 6/span 6}.lg\:bui-row-span-7{grid-row:span 7/span 7}.lg\:bui-row-span-8{grid-row:span 8/span 8}.lg\:bui-row-span-9{grid-row:span 9/span 9}.lg\:bui-row-span-10{grid-row:span 10/span 10}.lg\:bui-row-span-11{grid-row:span 11/span 11}.lg\:bui-row-span-12{grid-row:span 12/span 12}.lg\:bui-row-span-auto{grid-row:span auto/span auto}}@media (width>=1536px){.xl\:bui-columns-1{grid-template-columns:repeat(1,minmax(0,1fr))}.xl\:bui-columns-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:bui-columns-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:bui-columns-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:bui-columns-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:bui-columns-6{grid-template-columns:repeat(6,minmax(0,1fr))}.xl\:bui-columns-7{grid-template-columns:repeat(7,minmax(0,1fr))}.xl\:bui-columns-8{grid-template-columns:repeat(8,minmax(0,1fr))}.xl\:bui-columns-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xl\:bui-columns-10{grid-template-columns:repeat(10,minmax(0,1fr))}.xl\:bui-columns-11{grid-template-columns:repeat(11,minmax(0,1fr))}.xl\:bui-columns-12{grid-template-columns:repeat(12,minmax(0,1fr))}.xl\:bui-columns-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.xl\:bui-col-span-1{grid-column:span 1/span 1}.xl\:bui-col-span-2{grid-column:span 2/span 2}.xl\:bui-col-span-3{grid-column:span 3/span 3}.xl\:bui-col-span-4{grid-column:span 4/span 4}.xl\:bui-col-span-5{grid-column:span 5/span 5}.xl\:bui-col-span-6{grid-column:span 6/span 6}.xl\:bui-col-span-7{grid-column:span 7/span 7}.xl\:bui-col-span-8{grid-column:span 8/span 8}.xl\:bui-col-span-9{grid-column:span 9/span 9}.xl\:bui-col-span-10{grid-column:span 10/span 10}.xl\:bui-col-span-11{grid-column:span 11/span 11}.xl\:bui-col-span-12{grid-column:span 12/span 12}.xl\:bui-col-span-auto{grid-column:span auto/span auto}.xl\:bui-col-start-1{grid-column-start:1}.xl\:bui-col-start-2{grid-column-start:2}.xl\:bui-col-start-3{grid-column-start:3}.xl\:bui-col-start-4{grid-column-start:4}.xl\:bui-col-start-5{grid-column-start:5}.xl\:bui-col-start-6{grid-column-start:6}.xl\:bui-col-start-7{grid-column-start:7}.xl\:bui-col-start-8{grid-column-start:8}.xl\:bui-col-start-9{grid-column-start:9}.xl\:bui-col-start-10{grid-column-start:10}.xl\:bui-col-start-11{grid-column-start:11}.xl\:bui-col-start-12{grid-column-start:12}.xl\:bui-col-start-13{grid-column-start:13}.xl\:bui-col-start-auto{grid-column-start:auto}.xl\:bui-col-end-1{grid-column-end:1}.xl\:bui-col-end-2{grid-column-end:2}.xl\:bui-col-end-3{grid-column-end:3}.xl\:bui-col-end-4{grid-column-end:4}.xl\:bui-col-end-5{grid-column-end:5}.xl\:bui-col-end-6{grid-column-end:6}.xl\:bui-col-end-7{grid-column-end:7}.xl\:bui-col-end-8{grid-column-end:8}.xl\:bui-col-end-9{grid-column-end:9}.xl\:bui-col-end-10{grid-column-end:10}.xl\:bui-col-end-11{grid-column-end:11}.xl\:bui-col-end-12{grid-column-end:12}.xl\:bui-col-end-13{grid-column-end:13}.xl\:bui-col-end-auto{grid-column-end:auto}.xl\:bui-row-span-1{grid-row:span 1/span 1}.xl\:bui-row-span-2{grid-row:span 2/span 2}.xl\:bui-row-span-3{grid-row:span 3/span 3}.xl\:bui-row-span-4{grid-row:span 4/span 4}.xl\:bui-row-span-5{grid-row:span 5/span 5}.xl\:bui-row-span-6{grid-row:span 6/span 6}.xl\:bui-row-span-7{grid-row:span 7/span 7}.xl\:bui-row-span-8{grid-row:span 8/span 8}.xl\:bui-row-span-9{grid-row:span 9/span 9}.xl\:bui-row-span-10{grid-row:span 10/span 10}.xl\:bui-row-span-11{grid-row:span 11/span 11}.xl\:bui-row-span-12{grid-row:span 12/span 12}.xl\:bui-row-span-auto{grid-row:span auto/span auto}}.bui-gap{gap:var(--gap)}.bui-gap-0\.5{gap:var(--bui-space-0_5)}.bui-gap-1{gap:var(--bui-space-1)}.bui-gap-1\.5{gap:var(--bui-space-1_5)}.bui-gap-2{gap:var(--bui-space-2)}.bui-gap-3{gap:var(--bui-space-3)}.bui-gap-4{gap:var(--bui-space-4)}.bui-gap-5{gap:var(--bui-space-5)}.bui-gap-6{gap:var(--bui-space-6)}.bui-gap-7{gap:var(--bui-space-7)}.bui-gap-8{gap:var(--bui-space-8)}.bui-gap-9{gap:var(--bui-space-9)}.bui-gap-10{gap:var(--bui-space-10)}.bui-gap-11{gap:var(--bui-space-11)}.bui-gap-12{gap:var(--bui-space-12)}.bui-gap-13{gap:var(--bui-space-13)}.bui-gap-14{gap:var(--bui-space-14)}@media (width>=640px){.xs\:bui-gap{gap:var(--gap-xs)}.xs\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.xs\:bui-gap-1{gap:var(--bui-space-1)}.xs\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.xs\:bui-gap-2{gap:var(--bui-space-2)}.xs\:bui-gap-3{gap:var(--bui-space-3)}.xs\:bui-gap-4{gap:var(--bui-space-4)}.xs\:bui-gap-5{gap:var(--bui-space-5)}.xs\:bui-gap-6{gap:var(--bui-space-6)}.xs\:bui-gap-7{gap:var(--bui-space-7)}.xs\:bui-gap-8{gap:var(--bui-space-8)}.xs\:bui-gap-9{gap:var(--bui-space-9)}.xs\:bui-gap-10{gap:var(--bui-space-10)}.xs\:bui-gap-11{gap:var(--bui-space-11)}.xs\:bui-gap-12{gap:var(--bui-space-12)}.xs\:bui-gap-13{gap:var(--bui-space-13)}.xs\:bui-gap-14{gap:var(--bui-space-14)}}@media (width>=768px){.sm\:bui-gap{gap:var(--gap-sm)}.sm\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.sm\:bui-gap-1{gap:var(--bui-space-1)}.sm\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.sm\:bui-gap-2{gap:var(--bui-space-2)}.sm\:bui-gap-3{gap:var(--bui-space-3)}.sm\:bui-gap-4{gap:var(--bui-space-4)}.sm\:bui-gap-5{gap:var(--bui-space-5)}.sm\:bui-gap-6{gap:var(--bui-space-6)}.sm\:bui-gap-7{gap:var(--bui-space-7)}.sm\:bui-gap-8{gap:var(--bui-space-8)}.sm\:bui-gap-9{gap:var(--bui-space-9)}.sm\:bui-gap-10{gap:var(--bui-space-10)}.sm\:bui-gap-11{gap:var(--bui-space-11)}.sm\:bui-gap-12{gap:var(--bui-space-12)}.sm\:bui-gap-13{gap:var(--bui-space-13)}.sm\:bui-gap-14{gap:var(--bui-space-14)}}@media (width>=1024px){.md\:bui-gap{gap:var(--gap-md)}.md\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.md\:bui-gap-1{gap:var(--bui-space-1)}.md\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.md\:bui-gap-2{gap:var(--bui-space-2)}.md\:bui-gap-3{gap:var(--bui-space-3)}.md\:bui-gap-4{gap:var(--bui-space-4)}.md\:bui-gap-5{gap:var(--bui-space-5)}.md\:bui-gap-6{gap:var(--bui-space-6)}.md\:bui-gap-7{gap:var(--bui-space-7)}.md\:bui-gap-8{gap:var(--bui-space-8)}.md\:bui-gap-9{gap:var(--bui-space-9)}.md\:bui-gap-10{gap:var(--bui-space-10)}.md\:bui-gap-11{gap:var(--bui-space-11)}.md\:bui-gap-12{gap:var(--bui-space-12)}.md\:bui-gap-13{gap:var(--bui-space-13)}.md\:bui-gap-14{gap:var(--bui-space-14)}}@media (width>=1280px){.lg\:bui-gap{gap:var(--gap-lg)}.lg\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.lg\:bui-gap-1{gap:var(--bui-space-1)}.lg\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.lg\:bui-gap-2{gap:var(--bui-space-2)}.lg\:bui-gap-3{gap:var(--bui-space-3)}.lg\:bui-gap-4{gap:var(--bui-space-4)}.lg\:bui-gap-5{gap:var(--bui-space-5)}.lg\:bui-gap-6{gap:var(--bui-space-6)}.lg\:bui-gap-7{gap:var(--bui-space-7)}.lg\:bui-gap-8{gap:var(--bui-space-8)}.lg\:bui-gap-9{gap:var(--bui-space-9)}.lg\:bui-gap-10{gap:var(--bui-space-10)}.lg\:bui-gap-11{gap:var(--bui-space-11)}.lg\:bui-gap-12{gap:var(--bui-space-12)}.lg\:bui-gap-13{gap:var(--bui-space-13)}.lg\:bui-gap-14{gap:var(--bui-space-14)}}@media (width>=1536px){.xl\:bui-gap{gap:var(--gap-xl)}.xl\:bui-gap-0\.5{gap:var(--bui-space-0_5)}.xl\:bui-gap-1{gap:var(--bui-space-1)}.xl\:bui-gap-1\.5{gap:var(--bui-space-1_5)}.xl\:bui-gap-2{gap:var(--bui-space-2)}.xl\:bui-gap-3{gap:var(--bui-space-3)}.xl\:bui-gap-4{gap:var(--bui-space-4)}.xl\:bui-gap-5{gap:var(--bui-space-5)}.xl\:bui-gap-6{gap:var(--bui-space-6)}.xl\:bui-gap-7{gap:var(--bui-space-7)}.xl\:bui-gap-8{gap:var(--bui-space-8)}.xl\:bui-gap-9{gap:var(--bui-space-9)}.xl\:bui-gap-10{gap:var(--bui-space-10)}.xl\:bui-gap-11{gap:var(--bui-space-11)}.xl\:bui-gap-12{gap:var(--bui-space-12)}.xl\:bui-gap-13{gap:var(--bui-space-13)}.xl\:bui-gap-14{gap:var(--bui-space-14)}}.bui-align-start{align-items:start}.bui-align-center{align-items:center}.bui-align-end{align-items:end}.bui-align-baseline{align-items:baseline}.bui-align-stretch{align-items:stretch}.bui-jc-start{justify-content:start}.bui-jc-center{justify-content:center}.bui-jc-end{justify-content:end}.bui-jc-between{justify-content:space-between}.bui-fd-row{flex-direction:row}.bui-fd-column{flex-direction:column}.bui-fd-row-reverse{flex-direction:row-reverse}.bui-fd-column-reverse{flex-direction:column-reverse}@media (width>=640px){.xs\:bui-align-start{align-items:start}.xs\:bui-align-center{align-items:center}.xs\:bui-align-end{align-items:end}.xs\:bui-align-stretch{align-items:stretch}.xs\:bui-jc-start{justify-content:start}.xs\:bui-jc-center{justify-content:center}.xs\:bui-jc-end{justify-content:end}.xs\:bui-jc-between{justify-content:space-between}.xs\:bui-fd-row{flex-direction:row}.xs\:bui-fd-column{flex-direction:column}.xs\:bui-fd-row-reverse{flex-direction:row-reverse}.xs\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=768px){.sm\:bui-align-start{align-items:start}.sm\:bui-align-center{align-items:center}.sm\:bui-align-end{align-items:end}.sm\:bui-align-stretch{align-items:stretch}.sm\:bui-jc-start{justify-content:start}.sm\:bui-jc-center{justify-content:center}.sm\:bui-jc-end{justify-content:end}.sm\:bui-jc-between{justify-content:space-between}.sm\:bui-fd-row{flex-direction:row}.sm\:bui-fd-column{flex-direction:column}.sm\:bui-fd-row-reverse{flex-direction:row-reverse}.sm\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1024px){.md\:bui-align-start{align-items:start}.md\:bui-align-center{align-items:center}.md\:bui-align-end{align-items:end}.md\:bui-align-stretch{align-items:stretch}.md\:bui-jc-start{justify-content:start}.md\:bui-jc-center{justify-content:center}.md\:bui-jc-end{justify-content:end}.md\:bui-jc-between{justify-content:space-between}.md\:bui-fd-row{flex-direction:row}.md\:bui-fd-column{flex-direction:column}.md\:bui-fd-row-reverse{flex-direction:row-reverse}.md\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1280px){.lg\:bui-align-start{align-items:start}.lg\:bui-align-center{align-items:center}.lg\:bui-align-end{align-items:end}.lg\:bui-align-stretch{align-items:stretch}.lg\:bui-jc-start{justify-content:start}.lg\:bui-jc-center{justify-content:center}.lg\:bui-jc-end{justify-content:end}.lg\:bui-jc-between{justify-content:space-between}.lg\:bui-fd-row{flex-direction:row}.lg\:bui-fd-column{flex-direction:column}.lg\:bui-fd-row-reverse{flex-direction:row-reverse}.lg\:bui-fd-column-reverse{flex-direction:column-reverse}}@media (width>=1536px){.xl\:bui-align-start{align-items:start}.xl\:bui-align-center{align-items:center}.xl\:bui-align-end{align-items:end}.xl\:bui-align-stretch{align-items:stretch}.xl\:bui-jc-start{justify-content:start}.xl\:bui-jc-center{justify-content:center}.xl\:bui-jc-end{justify-content:end}.xl\:bui-jc-between{justify-content:space-between}.xl\:bui-fd-row{flex-direction:row}.xl\:bui-fd-column{flex-direction:column}.xl\:bui-fd-row-reverse{flex-direction:row-reverse}.xl\:bui-fd-column-reverse{flex-direction:column-reverse}}} \ No newline at end of file +@layer tokens { + :root { + --bui-font-regular: system-ui; + --bui-font-monospace: ui-monospace, 'Menlo', 'Monaco', 'Consolas', + 'Liberation Mono', 'Courier New', monospace; + --bui-font-weight-regular: 400; + --bui-font-weight-bold: 600; + --bui-font-size-1: 0.625rem; + --bui-font-size-2: 0.75rem; + --bui-font-size-3: 0.875rem; + --bui-font-size-4: 1rem; + --bui-font-size-5: 1.25rem; + --bui-font-size-6: 1.5rem; + --bui-font-size-7: 2rem; + --bui-font-size-8: 3rem; + --bui-font-size-9: 4rem; + --bui-font-size-10: 5.75rem; + --bui-space: 0.25rem; + --bui-space-0_5: calc(var(--bui-space) * 0.5); + --bui-space-1: var(--bui-space); + --bui-space-1_5: calc(var(--bui-space) * 1.5); + --bui-space-2: calc(var(--bui-space) * 2); + --bui-space-3: calc(var(--bui-space) * 3); + --bui-space-4: calc(var(--bui-space) * 4); + --bui-space-5: calc(var(--bui-space) * 5); + --bui-space-6: calc(var(--bui-space) * 6); + --bui-space-7: calc(var(--bui-space) * 7); + --bui-space-8: calc(var(--bui-space) * 8); + --bui-space-9: calc(var(--bui-space) * 9); + --bui-space-10: calc(var(--bui-space) * 10); + --bui-space-11: calc(var(--bui-space) * 11); + --bui-space-12: calc(var(--bui-space) * 12); + --bui-space-13: calc(var(--bui-space) * 13); + --bui-space-14: calc(var(--bui-space) * 14); + --bui-radius-1: calc(0.125rem); + --bui-radius-2: calc(0.25rem); + --bui-radius-3: calc(0.5rem); + --bui-radius-4: calc(0.75rem); + --bui-radius-5: calc(1rem); + --bui-radius-6: calc(1.25rem); + --bui-radius-full: 9999px; + --bui-black: #000; + --bui-white: #fff; + --bui-gray-1: #f8f8f8; + --bui-gray-2: #ececec; + --bui-gray-3: #d9d9d9; + --bui-gray-4: #c1c1c1; + --bui-gray-5: #9e9e9e; + --bui-gray-6: #8c8c8c; + --bui-gray-7: #757575; + --bui-gray-8: #595959; + --bui-bg-surface-0: var(--bui-gray-1); + --bui-bg-surface-1: var(--bui-white); + --bui-bg-surface-2: var(--bui-gray-1); + --bui-bg-surface-3: var(--bui-gray-2); + --bui-bg-solid: #1f5493; + --bui-bg-solid-hover: #163a66; + --bui-bg-solid-pressed: #0f2b4e; + --bui-bg-solid-disabled: #163a66; + --bui-bg-neutral-on-surface-0: oklch(0% 0 0/0.06); + --bui-bg-neutral-on-surface-0-hover: oklch(0% 0 0/0.12); + --bui-bg-neutral-on-surface-0-pressed: oklch(0% 0 0/0.16); + --bui-bg-neutral-on-surface-0-disabled: oklch(0% 0 0/0.06); + --bui-bg-neutral-on-surface-1: oklch(0% 0 0/0.06); + --bui-bg-neutral-on-surface-1-hover: oklch(0% 0 0/0.12); + --bui-bg-neutral-on-surface-1-pressed: oklch(0% 0 0/0.16); + --bui-bg-neutral-on-surface-1-disabled: oklch(0% 0 0/0.06); + --bui-bg-neutral-on-surface-2: oklch(0% 0 0/0.06); + --bui-bg-neutral-on-surface-2-hover: oklch(0% 0 0/0.12); + --bui-bg-neutral-on-surface-2-pressed: oklch(0% 0 0/0.16); + --bui-bg-neutral-on-surface-2-disabled: oklch(0% 0 0/0.06); + --bui-bg-neutral-on-surface-3: oklch(0% 0 0/0.06); + --bui-bg-neutral-on-surface-3-hover: oklch(0% 0 0/0.12); + --bui-bg-neutral-on-surface-3-pressed: oklch(0% 0 0/0.16); + --bui-bg-neutral-on-surface-3-disabled: oklch(0% 0 0/0.06); + --bui-bg-danger: #ffe2e2; + --bui-bg-warning: #ffedd5; + --bui-bg-success: #dcfce7; + --bui-bg-info: #dbeafe; + --bui-fg-primary: var(--bui-black); + --bui-fg-secondary: var(--bui-gray-7); + --bui-fg-link: #1f5493; + --bui-fg-link-hover: #1f2d5c; + --bui-fg-disabled: #9e9e9e; + --bui-fg-solid: var(--bui-white); + --bui-fg-solid-disabled: #98a8bc; + --bui-fg-tint: #1f5493; + --bui-fg-tint-disabled: var(--bui-gray-5); + --bui-fg-danger: #991919; + --bui-fg-warning: #92310a; + --bui-fg-success: #116932; + --bui-fg-info: #173da6; + --bui-border: #0000001a; + --bui-border-hover: #0003; + --bui-border-pressed: #0006; + --bui-border-disabled: #0000001a; + --bui-border-info: #7ea9d6; + --bui-border-danger: #f87a7a; + --bui-border-warning: #e36d05; + --bui-border-success: #53db83; + --bui-ring: #1f5493; + --bui-scrollbar: #a0a0a03b; + --bui-scrollbar-thumb: #a0a0a0; + --bui-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; + --bui-animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; + } + [data-theme-mode='dark'] { + --bui-gray-1: #191919; + --bui-gray-2: #242424; + --bui-gray-3: #373737; + --bui-gray-4: #464646; + --bui-gray-5: #575757; + --bui-gray-6: #7b7b7b; + --bui-gray-7: #9e9e9e; + --bui-gray-8: #b4b4b4; + --bui-bg-surface-0: #333; + --bui-bg-surface-1: var(--bui-gray-1); + --bui-bg-surface-2: var(--bui-gray-2); + --bui-bg-surface-3: var(--bui-gray-3); + --bui-bg-solid: #9cc9ff; + --bui-bg-solid-hover: #83b9fd; + --bui-bg-solid-pressed: #83b9fd; + --bui-bg-solid-disabled: #1b3d68; + --bui-bg-neutral-on-surface-0: oklch(100% 0 0/0.1); + --bui-bg-neutral-on-surface-0-hover: oklch(100% 0 0/0.14); + --bui-bg-neutral-on-surface-0-pressed: oklch(100% 0 0/0.2); + --bui-bg-neutral-on-surface-0-disabled: oklch(100% 0 0/0.1); + --bui-bg-neutral-on-surface-1: oklch(100% 0 0/0.06); + --bui-bg-neutral-on-surface-1-hover: oklch(100% 0 0/0.1); + --bui-bg-neutral-on-surface-1-pressed: oklch(100% 0 0/0.16); + --bui-bg-neutral-on-surface-1-disabled: oklch(100% 0 0/0.06); + --bui-bg-neutral-on-surface-2: oklch(100% 0 0/0.08); + --bui-bg-neutral-on-surface-2-hover: oklch(100% 0 0/0.12); + --bui-bg-neutral-on-surface-2-pressed: oklch(100% 0 0/0.2); + --bui-bg-neutral-on-surface-2-disabled: oklch(100% 0 0/0.08); + --bui-bg-neutral-on-surface-3: oklch(100% 0 0/0.08); + --bui-bg-neutral-on-surface-3-hover: oklch(100% 0 0/0.12); + --bui-bg-neutral-on-surface-3-pressed: oklch(100% 0 0/0.2); + --bui-bg-neutral-on-surface-3-disabled: oklch(100% 0 0/0.08); + --bui-bg-danger: #300c0c; + --bui-bg-warning: #302008; + --bui-bg-success: #042713; + --bui-bg-info: #132049; + --bui-fg-primary: var(--bui-white); + --bui-fg-secondary: var(--bui-gray-7); + --bui-fg-link: #9cc9ff; + --bui-fg-link-hover: #7eb5f7; + --bui-fg-disabled: var(--bui-gray-7); + --bui-fg-solid: #101821; + --bui-fg-solid-disabled: #6191cc; + --bui-fg-tint: #9cc9ff; + --bui-fg-tint-disabled: var(--bui-gray-5); + --bui-fg-danger: #fca5a5; + --bui-fg-warning: #fdba74; + --bui-fg-success: #86efac; + --bui-fg-info: #a3cfff; + --bui-border: #ffffff1f; + --bui-border-hover: #fff6; + --bui-border-pressed: #ffffff80; + --bui-border-disabled: #fff3; + --bui-border-info: #7ea9d6; + --bui-border-danger: #f87a7a; + --bui-border-warning: #e36d05; + --bui-border-success: #53db83; + --bui-ring: #1f5493; + --bui-scrollbar: #3636363a; + --bui-scrollbar-thumb: #575757; + --bui-shadow: none; + } +} +@layer base { + *, + :before, + :after { + box-sizing: border-box; + } + html { + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, + Apple Color Emoji, Segoe UI Emoji; + line-height: 1.15; + } + body { + margin: 0; + } + b, + strong { + font-weight: bolder; + } + code, + kbd, + samp, + pre { + font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, + monospace; + font-size: 1em; + } + small { + font-size: 80%; + } + sub, + sup { + vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + } + sub { + bottom: -0.25em; + } + sup { + top: -0.5em; + } + table { + border-color: currentColor; + } + button, + input, + optgroup, + select, + textarea { + margin: 0; + font-family: inherit; + font-size: 100%; + line-height: 1.15; + } + button, + [type='button'], + [type='reset'], + [type='submit'] { + -webkit-appearance: button; + } + legend { + padding: 0; + } + progress { + vertical-align: baseline; + } + ::-webkit-inner-spin-button, + ::-webkit-outer-spin-button { + height: auto; + } + [type='search'] { + -webkit-appearance: textfield; + outline-offset: -2px; + } + ::-webkit-search-decoration { + -webkit-appearance: none; + } + ::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; + } + summary { + display: list-item; + } + :where(a) { + color: inherit; + text-decoration: none; + } + @keyframes pulse { + 50% { + opacity: 0.5; + } + } + body { + background-color: var(--bui-bg-surface-0); + color: var(--bui-fg-primary); + font-family: var(--bui-font-regular); + font-weight: var(--bui-font-weight-regular); + font-size: var(--bui-font-size-3); + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + } + [data-theme-mode='dark'] { + color-scheme: dark; + } + [data-theme-mode='light'] { + color-scheme: light; + } +} +@layer components; +@layer utilities { + .bui-p { + padding: var(--p); + } + .bui-p-0\.5 { + padding: var(--bui-space-0_5); + } + .bui-p-1 { + padding: var(--bui-space-1); + } + .bui-p-1\.5 { + padding: var(--bui-space-1_5); + } + .bui-p-2 { + padding: var(--bui-space-2); + } + .bui-p-3 { + padding: var(--bui-space-3); + } + .bui-p-4 { + padding: var(--bui-space-4); + } + .bui-p-5 { + padding: var(--bui-space-5); + } + .bui-p-6 { + padding: var(--bui-space-6); + } + .bui-p-7 { + padding: var(--bui-space-7); + } + .bui-p-8 { + padding: var(--bui-space-8); + } + .bui-p-9 { + padding: var(--bui-space-9); + } + .bui-p-10 { + padding: var(--bui-space-10); + } + .bui-p-11 { + padding: var(--bui-space-11); + } + .bui-p-12 { + padding: var(--bui-space-12); + } + .bui-p-13 { + padding: var(--bui-space-13); + } + .bui-p-14 { + padding: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-p { + padding: var(--p-xs); + } + .xs\:bui-p-0\.5 { + padding: var(--bui-space-0_5); + } + .xs\:bui-p-1 { + padding: var(--bui-space-1); + } + .xs\:bui-p-1\.5 { + padding: var(--bui-space-1_5); + } + .xs\:bui-p-2 { + padding: var(--bui-space-2); + } + .xs\:bui-p-3 { + padding: var(--bui-space-3); + } + .xs\:bui-p-4 { + padding: var(--bui-space-4); + } + .xs\:bui-p-5 { + padding: var(--bui-space-5); + } + .xs\:bui-p-6 { + padding: var(--bui-space-6); + } + .xs\:bui-p-7 { + padding: var(--bui-space-7); + } + .xs\:bui-p-8 { + padding: var(--bui-space-8); + } + .xs\:bui-p-9 { + padding: var(--bui-space-9); + } + .xs\:bui-p-10 { + padding: var(--bui-space-10); + } + .xs\:bui-p-11 { + padding: var(--bui-space-11); + } + .xs\:bui-p-12 { + padding: var(--bui-space-12); + } + .xs\:bui-p-13 { + padding: var(--bui-space-13); + } + .xs\:bui-p-14 { + padding: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-p { + padding: var(--p-sm); + } + .sm\:bui-p-0\.5 { + padding: var(--bui-space-0_5); + } + .sm\:bui-p-1 { + padding: var(--bui-space-1); + } + .sm\:bui-p-1\.5 { + padding: var(--bui-space-1_5); + } + .sm\:bui-p-2 { + padding: var(--bui-space-2); + } + .sm\:bui-p-3 { + padding: var(--bui-space-3); + } + .sm\:bui-p-4 { + padding: var(--bui-space-4); + } + .sm\:bui-p-5 { + padding: var(--bui-space-5); + } + .sm\:bui-p-6 { + padding: var(--bui-space-6); + } + .sm\:bui-p-7 { + padding: var(--bui-space-7); + } + .sm\:bui-p-8 { + padding: var(--bui-space-8); + } + .sm\:bui-p-9 { + padding: var(--bui-space-9); + } + .sm\:bui-p-10 { + padding: var(--bui-space-10); + } + .sm\:bui-p-11 { + padding: var(--bui-space-11); + } + .sm\:bui-p-12 { + padding: var(--bui-space-12); + } + .sm\:bui-p-13 { + padding: var(--bui-space-13); + } + .sm\:bui-p-14 { + padding: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-p { + padding: var(--p-md); + } + .md\:bui-p-0\.5 { + padding: var(--bui-space-0_5); + } + .md\:bui-p-1 { + padding: var(--bui-space-1); + } + .md\:bui-p-1\.5 { + padding: var(--bui-space-1_5); + } + .md\:bui-p-2 { + padding: var(--bui-space-2); + } + .md\:bui-p-3 { + padding: var(--bui-space-3); + } + .md\:bui-p-4 { + padding: var(--bui-space-4); + } + .md\:bui-p-5 { + padding: var(--bui-space-5); + } + .md\:bui-p-6 { + padding: var(--bui-space-6); + } + .md\:bui-p-7 { + padding: var(--bui-space-7); + } + .md\:bui-p-8 { + padding: var(--bui-space-8); + } + .md\:bui-p-9 { + padding: var(--bui-space-9); + } + .md\:bui-p-10 { + padding: var(--bui-space-10); + } + .md\:bui-p-11 { + padding: var(--bui-space-11); + } + .md\:bui-p-12 { + padding: var(--bui-space-12); + } + .md\:bui-p-13 { + padding: var(--bui-space-13); + } + .md\:bui-p-14 { + padding: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-p { + padding: var(--p-lg); + } + .lg\:bui-p-0\.5 { + padding: var(--bui-space-0_5); + } + .lg\:bui-p-1 { + padding: var(--bui-space-1); + } + .lg\:bui-p-1\.5 { + padding: var(--bui-space-1_5); + } + .lg\:bui-p-2 { + padding: var(--bui-space-2); + } + .lg\:bui-p-3 { + padding: var(--bui-space-3); + } + .lg\:bui-p-4 { + padding: var(--bui-space-4); + } + .lg\:bui-p-5 { + padding: var(--bui-space-5); + } + .lg\:bui-p-6 { + padding: var(--bui-space-6); + } + .lg\:bui-p-7 { + padding: var(--bui-space-7); + } + .lg\:bui-p-8 { + padding: var(--bui-space-8); + } + .lg\:bui-p-9 { + padding: var(--bui-space-9); + } + .lg\:bui-p-10 { + padding: var(--bui-space-10); + } + .lg\:bui-p-11 { + padding: var(--bui-space-11); + } + .lg\:bui-p-12 { + padding: var(--bui-space-12); + } + .lg\:bui-p-13 { + padding: var(--bui-space-13); + } + .lg\:bui-p-14 { + padding: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-p { + padding: var(--p-xl); + } + .xl\:bui-p-0\.5 { + padding: var(--bui-space-0_5); + } + .xl\:bui-p-1 { + padding: var(--bui-space-1); + } + .xl\:bui-p-1\.5 { + padding: var(--bui-space-1_5); + } + .xl\:bui-p-2 { + padding: var(--bui-space-2); + } + .xl\:bui-p-3 { + padding: var(--bui-space-3); + } + .xl\:bui-p-4 { + padding: var(--bui-space-4); + } + .xl\:bui-p-5 { + padding: var(--bui-space-5); + } + .xl\:bui-p-6 { + padding: var(--bui-space-6); + } + .xl\:bui-p-7 { + padding: var(--bui-space-7); + } + .xl\:bui-p-8 { + padding: var(--bui-space-8); + } + .xl\:bui-p-9 { + padding: var(--bui-space-9); + } + .xl\:bui-p-10 { + padding: var(--bui-space-10); + } + .xl\:bui-p-11 { + padding: var(--bui-space-11); + } + .xl\:bui-p-12 { + padding: var(--bui-space-12); + } + .xl\:bui-p-13 { + padding: var(--bui-space-13); + } + .xl\:bui-p-14 { + padding: var(--bui-space-14); + } + } + .bui-pl { + padding-left: var(--pl); + } + .bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); + } + .bui-pl-1 { + padding-left: var(--bui-space-1); + } + .bui-pl-1\.5 { + padding-left: var(--bui-space-1_5); + } + .bui-pl-2 { + padding-left: var(--bui-space-2); + } + .bui-pl-3 { + padding-left: var(--bui-space-3); + } + .bui-pl-4 { + padding-left: var(--bui-space-4); + } + .bui-pl-5 { + padding-left: var(--bui-space-5); + } + .bui-pl-6 { + padding-left: var(--bui-space-6); + } + .bui-pl-7 { + padding-left: var(--bui-space-7); + } + .bui-pl-8 { + padding-left: var(--bui-space-8); + } + .bui-pl-9 { + padding-left: var(--bui-space-9); + } + .bui-pl-10 { + padding-left: var(--bui-space-10); + } + .bui-pl-11 { + padding-left: var(--bui-space-11); + } + .bui-pl-12 { + padding-left: var(--bui-space-12); + } + .bui-pl-13 { + padding-left: var(--bui-space-13); + } + .bui-pl-14 { + padding-left: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-pl { + padding-left: var(--pl-xs); + } + .xs\:bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); + } + .xs\:bui-pl-1 { + padding-left: var(--bui-space-1); + } + .xs\:bui-pl-1\.5 { + padding-left: var(--bui-space-1_5); + } + .xs\:bui-pl-2 { + padding-left: var(--bui-space-2); + } + .xs\:bui-pl-3 { + padding-left: var(--bui-space-3); + } + .xs\:bui-pl-4 { + padding-left: var(--bui-space-4); + } + .xs\:bui-pl-5 { + padding-left: var(--bui-space-5); + } + .xs\:bui-pl-6 { + padding-left: var(--bui-space-6); + } + .xs\:bui-pl-7 { + padding-left: var(--bui-space-7); + } + .xs\:bui-pl-8 { + padding-left: var(--bui-space-8); + } + .xs\:bui-pl-9 { + padding-left: var(--bui-space-9); + } + .xs\:bui-pl-10 { + padding-left: var(--bui-space-10); + } + .xs\:bui-pl-11 { + padding-left: var(--bui-space-11); + } + .xs\:bui-pl-12 { + padding-left: var(--bui-space-12); + } + .xs\:bui-pl-13 { + padding-left: var(--bui-space-13); + } + .xs\:bui-pl-14 { + padding-left: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-pl { + padding-left: var(--pl-sm); + } + .sm\:bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); + } + .sm\:bui-pl-1 { + padding-left: var(--bui-space-1); + } + .sm\:bui-pl-1\.5 { + padding-left: var(--bui-space-1_5); + } + .sm\:bui-pl-2 { + padding-left: var(--bui-space-2); + } + .sm\:bui-pl-3 { + padding-left: var(--bui-space-3); + } + .sm\:bui-pl-4 { + padding-left: var(--bui-space-4); + } + .sm\:bui-pl-5 { + padding-left: var(--bui-space-5); + } + .sm\:bui-pl-6 { + padding-left: var(--bui-space-6); + } + .sm\:bui-pl-7 { + padding-left: var(--bui-space-7); + } + .sm\:bui-pl-8 { + padding-left: var(--bui-space-8); + } + .sm\:bui-pl-9 { + padding-left: var(--bui-space-9); + } + .sm\:bui-pl-10 { + padding-left: var(--bui-space-10); + } + .sm\:bui-pl-11 { + padding-left: var(--bui-space-11); + } + .sm\:bui-pl-12 { + padding-left: var(--bui-space-12); + } + .sm\:bui-pl-13 { + padding-left: var(--bui-space-13); + } + .sm\:bui-pl-14 { + padding-left: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-pl { + padding-left: var(--pl-md); + } + .md\:bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); + } + .md\:bui-pl-1 { + padding-left: var(--bui-space-1); + } + .md\:bui-pl-1\.5 { + padding-left: var(--bui-space-1_5); + } + .md\:bui-pl-2 { + padding-left: var(--bui-space-2); + } + .md\:bui-pl-3 { + padding-left: var(--bui-space-3); + } + .md\:bui-pl-4 { + padding-left: var(--bui-space-4); + } + .md\:bui-pl-5 { + padding-left: var(--bui-space-5); + } + .md\:bui-pl-6 { + padding-left: var(--bui-space-6); + } + .md\:bui-pl-7 { + padding-left: var(--bui-space-7); + } + .md\:bui-pl-8 { + padding-left: var(--bui-space-8); + } + .md\:bui-pl-9 { + padding-left: var(--bui-space-9); + } + .md\:bui-pl-10 { + padding-left: var(--bui-space-10); + } + .md\:bui-pl-11 { + padding-left: var(--bui-space-11); + } + .md\:bui-pl-12 { + padding-left: var(--bui-space-12); + } + .md\:bui-pl-13 { + padding-left: var(--bui-space-13); + } + .md\:bui-pl-14 { + padding-left: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-pl { + padding-left: var(--pl-lg); + } + .lg\:bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); + } + .lg\:bui-pl-1 { + padding-left: var(--bui-space-1); + } + .lg\:bui-pl-1\.5 { + padding-left: var(--bui-space-1_5); + } + .lg\:bui-pl-2 { + padding-left: var(--bui-space-2); + } + .lg\:bui-pl-3 { + padding-left: var(--bui-space-3); + } + .lg\:bui-pl-4 { + padding-left: var(--bui-space-4); + } + .lg\:bui-pl-5 { + padding-left: var(--bui-space-5); + } + .lg\:bui-pl-6 { + padding-left: var(--bui-space-6); + } + .lg\:bui-pl-7 { + padding-left: var(--bui-space-7); + } + .lg\:bui-pl-8 { + padding-left: var(--bui-space-8); + } + .lg\:bui-pl-9 { + padding-left: var(--bui-space-9); + } + .lg\:bui-pl-10 { + padding-left: var(--bui-space-10); + } + .lg\:bui-pl-11 { + padding-left: var(--bui-space-11); + } + .lg\:bui-pl-12 { + padding-left: var(--bui-space-12); + } + .lg\:bui-pl-13 { + padding-left: var(--bui-space-13); + } + .lg\:bui-pl-14 { + padding-left: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-pl { + padding-left: var(--pl-xl); + } + .xl\:bui-pl-0\.5 { + padding-left: var(--bui-space-0_5); + } + .xl\:bui-pl-1 { + padding-left: var(--bui-space-1); + } + .xl\:bui-pl-1\.5 { + padding-left: var(--bui-space-1_5); + } + .xl\:bui-pl-2 { + padding-left: var(--bui-space-2); + } + .xl\:bui-pl-3 { + padding-left: var(--bui-space-3); + } + .xl\:bui-pl-4 { + padding-left: var(--bui-space-4); + } + .xl\:bui-pl-5 { + padding-left: var(--bui-space-5); + } + .xl\:bui-pl-6 { + padding-left: var(--bui-space-6); + } + .xl\:bui-pl-7 { + padding-left: var(--bui-space-7); + } + .xl\:bui-pl-8 { + padding-left: var(--bui-space-8); + } + .xl\:bui-pl-9 { + padding-left: var(--bui-space-9); + } + .xl\:bui-pl-10 { + padding-left: var(--bui-space-10); + } + .xl\:bui-pl-11 { + padding-left: var(--bui-space-11); + } + .xl\:bui-pl-12 { + padding-left: var(--bui-space-12); + } + .xl\:bui-pl-13 { + padding-left: var(--bui-space-13); + } + .xl\:bui-pl-14 { + padding-left: var(--bui-space-14); + } + } + .bui-pr { + padding-right: var(--pr); + } + .bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); + } + .bui-pr-1 { + padding-right: var(--bui-space-1); + } + .bui-pr-1\.5 { + padding-right: var(--bui-space-1_5); + } + .bui-pr-2 { + padding-right: var(--bui-space-2); + } + .bui-pr-3 { + padding-right: var(--bui-space-3); + } + .bui-pr-4 { + padding-right: var(--bui-space-4); + } + .bui-pr-5 { + padding-right: var(--bui-space-5); + } + .bui-pr-6 { + padding-right: var(--bui-space-6); + } + .bui-pr-7 { + padding-right: var(--bui-space-7); + } + .bui-pr-8 { + padding-right: var(--bui-space-8); + } + .bui-pr-9 { + padding-right: var(--bui-space-9); + } + .bui-pr-10 { + padding-right: var(--bui-space-10); + } + .bui-pr-11 { + padding-right: var(--bui-space-11); + } + .bui-pr-12 { + padding-right: var(--bui-space-12); + } + .bui-pr-13 { + padding-right: var(--bui-space-13); + } + .bui-pr-14 { + padding-right: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-pr { + padding-right: var(--pr-xs); + } + .xs\:bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); + } + .xs\:bui-pr-1 { + padding-right: var(--bui-space-1); + } + .xs\:bui-pr-1\.5 { + padding-right: var(--bui-space-1_5); + } + .xs\:bui-pr-2 { + padding-right: var(--bui-space-2); + } + .xs\:bui-pr-3 { + padding-right: var(--bui-space-3); + } + .xs\:bui-pr-4 { + padding-right: var(--bui-space-4); + } + .xs\:bui-pr-5 { + padding-right: var(--bui-space-5); + } + .xs\:bui-pr-6 { + padding-right: var(--bui-space-6); + } + .xs\:bui-pr-7 { + padding-right: var(--bui-space-7); + } + .xs\:bui-pr-8 { + padding-right: var(--bui-space-8); + } + .xs\:bui-pr-9 { + padding-right: var(--bui-space-9); + } + .xs\:bui-pr-10 { + padding-right: var(--bui-space-10); + } + .xs\:bui-pr-11 { + padding-right: var(--bui-space-11); + } + .xs\:bui-pr-12 { + padding-right: var(--bui-space-12); + } + .xs\:bui-pr-13 { + padding-right: var(--bui-space-13); + } + .xs\:bui-pr-14 { + padding-right: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-pr { + padding-right: var(--pr-sm); + } + .sm\:bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); + } + .sm\:bui-pr-1 { + padding-right: var(--bui-space-1); + } + .sm\:bui-pr-1\.5 { + padding-right: var(--bui-space-1_5); + } + .sm\:bui-pr-2 { + padding-right: var(--bui-space-2); + } + .sm\:bui-pr-3 { + padding-right: var(--bui-space-3); + } + .sm\:bui-pr-4 { + padding-right: var(--bui-space-4); + } + .sm\:bui-pr-5 { + padding-right: var(--bui-space-5); + } + .sm\:bui-pr-6 { + padding-right: var(--bui-space-6); + } + .sm\:bui-pr-7 { + padding-right: var(--bui-space-7); + } + .sm\:bui-pr-8 { + padding-right: var(--bui-space-8); + } + .sm\:bui-pr-9 { + padding-right: var(--bui-space-9); + } + .sm\:bui-pr-10 { + padding-right: var(--bui-space-10); + } + .sm\:bui-pr-11 { + padding-right: var(--bui-space-11); + } + .sm\:bui-pr-12 { + padding-right: var(--bui-space-12); + } + .sm\:bui-pr-13 { + padding-right: var(--bui-space-13); + } + .sm\:bui-pr-14 { + padding-right: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-pr { + padding-right: var(--pr-md); + } + .md\:bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); + } + .md\:bui-pr-1 { + padding-right: var(--bui-space-1); + } + .md\:bui-pr-1\.5 { + padding-right: var(--bui-space-1_5); + } + .md\:bui-pr-2 { + padding-right: var(--bui-space-2); + } + .md\:bui-pr-3 { + padding-right: var(--bui-space-3); + } + .md\:bui-pr-4 { + padding-right: var(--bui-space-4); + } + .md\:bui-pr-5 { + padding-right: var(--bui-space-5); + } + .md\:bui-pr-6 { + padding-right: var(--bui-space-6); + } + .md\:bui-pr-7 { + padding-right: var(--bui-space-7); + } + .md\:bui-pr-8 { + padding-right: var(--bui-space-8); + } + .md\:bui-pr-9 { + padding-right: var(--bui-space-9); + } + .md\:bui-pr-10 { + padding-right: var(--bui-space-10); + } + .md\:bui-pr-11 { + padding-right: var(--bui-space-11); + } + .md\:bui-pr-12 { + padding-right: var(--bui-space-12); + } + .md\:bui-pr-13 { + padding-right: var(--bui-space-13); + } + .md\:bui-pr-14 { + padding-right: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-pr { + padding-right: var(--pr-lg); + } + .lg\:bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); + } + .lg\:bui-pr-1 { + padding-right: var(--bui-space-1); + } + .lg\:bui-pr-1\.5 { + padding-right: var(--bui-space-1_5); + } + .lg\:bui-pr-2 { + padding-right: var(--bui-space-2); + } + .lg\:bui-pr-3 { + padding-right: var(--bui-space-3); + } + .lg\:bui-pr-4 { + padding-right: var(--bui-space-4); + } + .lg\:bui-pr-5 { + padding-right: var(--bui-space-5); + } + .lg\:bui-pr-6 { + padding-right: var(--bui-space-6); + } + .lg\:bui-pr-7 { + padding-right: var(--bui-space-7); + } + .lg\:bui-pr-8 { + padding-right: var(--bui-space-8); + } + .lg\:bui-pr-9 { + padding-right: var(--bui-space-9); + } + .lg\:bui-pr-10 { + padding-right: var(--bui-space-10); + } + .lg\:bui-pr-11 { + padding-right: var(--bui-space-11); + } + .lg\:bui-pr-12 { + padding-right: var(--bui-space-12); + } + .lg\:bui-pr-13 { + padding-right: var(--bui-space-13); + } + .lg\:bui-pr-14 { + padding-right: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-pr { + padding-right: var(--pr-xl); + } + .xl\:bui-pr-0\.5 { + padding-right: var(--bui-space-0_5); + } + .xl\:bui-pr-1 { + padding-right: var(--bui-space-1); + } + .xl\:bui-pr-1\.5 { + padding-right: var(--bui-space-1_5); + } + .xl\:bui-pr-2 { + padding-right: var(--bui-space-2); + } + .xl\:bui-pr-3 { + padding-right: var(--bui-space-3); + } + .xl\:bui-pr-4 { + padding-right: var(--bui-space-4); + } + .xl\:bui-pr-5 { + padding-right: var(--bui-space-5); + } + .xl\:bui-pr-6 { + padding-right: var(--bui-space-6); + } + .xl\:bui-pr-7 { + padding-right: var(--bui-space-7); + } + .xl\:bui-pr-8 { + padding-right: var(--bui-space-8); + } + .xl\:bui-pr-9 { + padding-right: var(--bui-space-9); + } + .xl\:bui-pr-10 { + padding-right: var(--bui-space-10); + } + .xl\:bui-pr-11 { + padding-right: var(--bui-space-11); + } + .xl\:bui-pr-12 { + padding-right: var(--bui-space-12); + } + .xl\:bui-pr-13 { + padding-right: var(--bui-space-13); + } + .xl\:bui-pr-14 { + padding-right: var(--bui-space-14); + } + } + .bui-pt { + padding-top: var(--pt); + } + .bui-pt-0\.5 { + padding-top: var(--bui-space-0_5); + } + .bui-pt-1 { + padding-top: var(--bui-space-1); + } + .bui-pt-1\.5 { + padding-top: var(--bui-space-1_5); + } + .bui-pt-2 { + padding-top: var(--bui-space-2); + } + .bui-pt-3 { + padding-top: var(--bui-space-3); + } + .bui-pt-4 { + padding-top: var(--bui-space-4); + } + .bui-pt-5 { + padding-top: var(--bui-space-5); + } + .bui-pt-6 { + padding-top: var(--bui-space-6); + } + .bui-pt-7 { + padding-top: var(--bui-space-7); + } + .bui-pt-8 { + padding-top: var(--bui-space-8); + } + .bui-pt-9 { + padding-top: var(--bui-space-9); + } + .bui-pt-10 { + padding-top: var(--bui-space-10); + } + .bui-pt-11 { + padding-top: var(--bui-space-11); + } + .bui-pt-12 { + padding-top: var(--bui-space-12); + } + .bui-pt-13 { + padding-top: var(--bui-space-13); + } + .bui-pt-14 { + padding-top: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-pt { + padding-top: var(--pt-xs); + } + .xs\:bui-pt-0\.5 { + padding-top: var(--bui-space-0_5); + } + .xs\:bui-pt-1 { + padding-top: var(--bui-space-1); + } + .xs\:bui-pt-1\.5 { + padding-top: var(--bui-space-1_5); + } + .xs\:bui-pt-2 { + padding-top: var(--bui-space-2); + } + .xs\:bui-pt-3 { + padding-top: var(--bui-space-3); + } + .xs\:bui-pt-4 { + padding-top: var(--bui-space-4); + } + .xs\:bui-pt-5 { + padding-top: var(--bui-space-5); + } + .xs\:bui-pt-6 { + padding-top: var(--bui-space-6); + } + .xs\:bui-pt-7 { + padding-top: var(--bui-space-7); + } + .xs\:bui-pt-8 { + padding-top: var(--bui-space-8); + } + .xs\:bui-pt-9 { + padding-top: var(--bui-space-9); + } + .xs\:bui-pt-10 { + padding-top: var(--bui-space-10); + } + .xs\:bui-pt-11 { + padding-top: var(--bui-space-11); + } + .xs\:bui-pt-12 { + padding-top: var(--bui-space-12); + } + .xs\:bui-pt-13 { + padding-top: var(--bui-space-13); + } + .xs\:bui-pt-14 { + padding-top: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-pt { + padding-top: var(--pt-sm); + } + .sm\:bui-pt-0\.5 { + padding-top: var(--bui-space-0_5); + } + .sm\:bui-pt-1 { + padding-top: var(--bui-space-1); + } + .sm\:bui-pt-1\.5 { + padding-top: var(--bui-space-1_5); + } + .sm\:bui-pt-2 { + padding-top: var(--bui-space-2); + } + .sm\:bui-pt-3 { + padding-top: var(--bui-space-3); + } + .sm\:bui-pt-4 { + padding-top: var(--bui-space-4); + } + .sm\:bui-pt-5 { + padding-top: var(--bui-space-5); + } + .sm\:bui-pt-6 { + padding-top: var(--bui-space-6); + } + .sm\:bui-pt-7 { + padding-top: var(--bui-space-7); + } + .sm\:bui-pt-8 { + padding-top: var(--bui-space-8); + } + .sm\:bui-pt-9 { + padding-top: var(--bui-space-9); + } + .sm\:bui-pt-10 { + padding-top: var(--bui-space-10); + } + .sm\:bui-pt-11 { + padding-top: var(--bui-space-11); + } + .sm\:bui-pt-12 { + padding-top: var(--bui-space-12); + } + .sm\:bui-pt-13 { + padding-top: var(--bui-space-13); + } + .sm\:bui-pt-14 { + padding-top: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-pt { + padding-top: var(--pt-md); + } + .md\:bui-pt-0\.5 { + padding-top: var(--bui-space-0_5); + } + .md\:bui-pt-1 { + padding-top: var(--bui-space-1); + } + .md\:bui-pt-1\.5 { + padding-top: var(--bui-space-1_5); + } + .md\:bui-pt-2 { + padding-top: var(--bui-space-2); + } + .md\:bui-pt-3 { + padding-top: var(--bui-space-3); + } + .md\:bui-pt-4 { + padding-top: var(--bui-space-4); + } + .md\:bui-pt-5 { + padding-top: var(--bui-space-5); + } + .md\:bui-pt-6 { + padding-top: var(--bui-space-6); + } + .md\:bui-pt-7 { + padding-top: var(--bui-space-7); + } + .md\:bui-pt-8 { + padding-top: var(--bui-space-8); + } + .md\:bui-pt-9 { + padding-top: var(--bui-space-9); + } + .md\:bui-pt-10 { + padding-top: var(--bui-space-10); + } + .md\:bui-pt-11 { + padding-top: var(--bui-space-11); + } + .md\:bui-pt-12 { + padding-top: var(--bui-space-12); + } + .md\:bui-pt-13 { + padding-top: var(--bui-space-13); + } + .md\:bui-pt-14 { + padding-top: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-pt { + padding-top: var(--pt-lg); + } + .lg\:bui-pt-0\.5 { + padding-top: var(--bui-space-0_5); + } + .lg\:bui-pt-1 { + padding-top: var(--bui-space-1); + } + .lg\:bui-pt-1\.5 { + padding-top: var(--bui-space-1_5); + } + .lg\:bui-pt-2 { + padding-top: var(--bui-space-2); + } + .lg\:bui-pt-3 { + padding-top: var(--bui-space-3); + } + .lg\:bui-pt-4 { + padding-top: var(--bui-space-4); + } + .lg\:bui-pt-5 { + padding-top: var(--bui-space-5); + } + .lg\:bui-pt-6 { + padding-top: var(--bui-space-6); + } + .lg\:bui-pt-7 { + padding-top: var(--bui-space-7); + } + .lg\:bui-pt-8 { + padding-top: var(--bui-space-8); + } + .lg\:bui-pt-9 { + padding-top: var(--bui-space-9); + } + .lg\:bui-pt-10 { + padding-top: var(--bui-space-10); + } + .lg\:bui-pt-11 { + padding-top: var(--bui-space-11); + } + .lg\:bui-pt-12 { + padding-top: var(--bui-space-12); + } + .lg\:bui-pt-13 { + padding-top: var(--bui-space-13); + } + .lg\:bui-pt-14 { + padding-top: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-pt { + padding-top: var(--pt-xl); + } + .xl\:bui-pt-0\.5 { + padding-top: var(--bui-space-0_5); + } + .xl\:bui-pt-1 { + padding-top: var(--bui-space-1); + } + .xl\:bui-pt-1\.5 { + padding-top: var(--bui-space-1_5); + } + .xl\:bui-pt-2 { + padding-top: var(--bui-space-2); + } + .xl\:bui-pt-3 { + padding-top: var(--bui-space-3); + } + .xl\:bui-pt-4 { + padding-top: var(--bui-space-4); + } + .xl\:bui-pt-5 { + padding-top: var(--bui-space-5); + } + .xl\:bui-pt-6 { + padding-top: var(--bui-space-6); + } + .xl\:bui-pt-7 { + padding-top: var(--bui-space-7); + } + .xl\:bui-pt-8 { + padding-top: var(--bui-space-8); + } + .xl\:bui-pt-9 { + padding-top: var(--bui-space-9); + } + .xl\:bui-pt-10 { + padding-top: var(--bui-space-10); + } + .xl\:bui-pt-11 { + padding-top: var(--bui-space-11); + } + .xl\:bui-pt-12 { + padding-top: var(--bui-space-12); + } + .xl\:bui-pt-13 { + padding-top: var(--bui-space-13); + } + .xl\:bui-pt-14 { + padding-top: var(--bui-space-14); + } + } + .bui-pb { + padding-bottom: var(--pb); + } + .bui-pb-0\.5 { + padding-bottom: var(--bui-space-0_5); + } + .bui-pb-1 { + padding-bottom: var(--bui-space-1); + } + .bui-pb-1\.5 { + padding-bottom: var(--bui-space-1_5); + } + .bui-pb-2 { + padding-bottom: var(--bui-space-2); + } + .bui-pb-3 { + padding-bottom: var(--bui-space-3); + } + .bui-pb-4 { + padding-bottom: var(--bui-space-4); + } + .bui-pb-5 { + padding-bottom: var(--bui-space-5); + } + .bui-pb-6 { + padding-bottom: var(--bui-space-6); + } + .bui-pb-7 { + padding-bottom: var(--bui-space-7); + } + .bui-pb-8 { + padding-bottom: var(--bui-space-8); + } + .bui-pb-9 { + padding-bottom: var(--bui-space-9); + } + .bui-pb-10 { + padding-bottom: var(--bui-space-10); + } + .bui-pb-11 { + padding-bottom: var(--bui-space-11); + } + .bui-pb-12 { + padding-bottom: var(--bui-space-12); + } + .bui-pb-13 { + padding-bottom: var(--bui-space-13); + } + .bui-pb-14 { + padding-bottom: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-pb { + padding-bottom: var(--pb-xs); + } + .xs\:bui-pb-0\.5 { + padding-bottom: var(--bui-space-0_5); + } + .xs\:bui-pb-1 { + padding-bottom: var(--bui-space-1); + } + .xs\:bui-pb-1\.5 { + padding-bottom: var(--bui-space-1_5); + } + .xs\:bui-pb-2 { + padding-bottom: var(--bui-space-2); + } + .xs\:bui-pb-3 { + padding-bottom: var(--bui-space-3); + } + .xs\:bui-pb-4 { + padding-bottom: var(--bui-space-4); + } + .xs\:bui-pb-5 { + padding-bottom: var(--bui-space-5); + } + .xs\:bui-pb-6 { + padding-bottom: var(--bui-space-6); + } + .xs\:bui-pb-7 { + padding-bottom: var(--bui-space-7); + } + .xs\:bui-pb-8 { + padding-bottom: var(--bui-space-8); + } + .xs\:bui-pb-9 { + padding-bottom: var(--bui-space-9); + } + .xs\:bui-pb-10 { + padding-bottom: var(--bui-space-10); + } + .xs\:bui-pb-11 { + padding-bottom: var(--bui-space-11); + } + .xs\:bui-pb-12 { + padding-bottom: var(--bui-space-12); + } + .xs\:bui-pb-13 { + padding-bottom: var(--bui-space-13); + } + .xs\:bui-pb-14 { + padding-bottom: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-pb { + padding-bottom: var(--pb-sm); + } + .sm\:bui-pb-0\.5 { + padding-bottom: var(--bui-space-0_5); + } + .sm\:bui-pb-1 { + padding-bottom: var(--bui-space-1); + } + .sm\:bui-pb-1\.5 { + padding-bottom: var(--bui-space-1_5); + } + .sm\:bui-pb-2 { + padding-bottom: var(--bui-space-2); + } + .sm\:bui-pb-3 { + padding-bottom: var(--bui-space-3); + } + .sm\:bui-pb-4 { + padding-bottom: var(--bui-space-4); + } + .sm\:bui-pb-5 { + padding-bottom: var(--bui-space-5); + } + .sm\:bui-pb-6 { + padding-bottom: var(--bui-space-6); + } + .sm\:bui-pb-7 { + padding-bottom: var(--bui-space-7); + } + .sm\:bui-pb-8 { + padding-bottom: var(--bui-space-8); + } + .sm\:bui-pb-9 { + padding-bottom: var(--bui-space-9); + } + .sm\:bui-pb-10 { + padding-bottom: var(--bui-space-10); + } + .sm\:bui-pb-11 { + padding-bottom: var(--bui-space-11); + } + .sm\:bui-pb-12 { + padding-bottom: var(--bui-space-12); + } + .sm\:bui-pb-13 { + padding-bottom: var(--bui-space-13); + } + .sm\:bui-pb-14 { + padding-bottom: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-pb { + padding-bottom: var(--pb-md); + } + .md\:bui-pb-0\.5 { + padding-bottom: var(--bui-space-0_5); + } + .md\:bui-pb-1 { + padding-bottom: var(--bui-space-1); + } + .md\:bui-pb-1\.5 { + padding-bottom: var(--bui-space-1_5); + } + .md\:bui-pb-2 { + padding-bottom: var(--bui-space-2); + } + .md\:bui-pb-3 { + padding-bottom: var(--bui-space-3); + } + .md\:bui-pb-4 { + padding-bottom: var(--bui-space-4); + } + .md\:bui-pb-5 { + padding-bottom: var(--bui-space-5); + } + .md\:bui-pb-6 { + padding-bottom: var(--bui-space-6); + } + .md\:bui-pb-7 { + padding-bottom: var(--bui-space-7); + } + .md\:bui-pb-8 { + padding-bottom: var(--bui-space-8); + } + .md\:bui-pb-9 { + padding-bottom: var(--bui-space-9); + } + .md\:bui-pb-10 { + padding-bottom: var(--bui-space-10); + } + .md\:bui-pb-11 { + padding-bottom: var(--bui-space-11); + } + .md\:bui-pb-12 { + padding-bottom: var(--bui-space-12); + } + .md\:bui-pb-13 { + padding-bottom: var(--bui-space-13); + } + .md\:bui-pb-14 { + padding-bottom: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-pb { + padding-bottom: var(--pb-lg); + } + .lg\:bui-pb-0\.5 { + padding-bottom: var(--bui-space-0_5); + } + .lg\:bui-pb-1 { + padding-bottom: var(--bui-space-1); + } + .lg\:bui-pb-1\.5 { + padding-bottom: var(--bui-space-1_5); + } + .lg\:bui-pb-2 { + padding-bottom: var(--bui-space-2); + } + .lg\:bui-pb-3 { + padding-bottom: var(--bui-space-3); + } + .lg\:bui-pb-4 { + padding-bottom: var(--bui-space-4); + } + .lg\:bui-pb-5 { + padding-bottom: var(--bui-space-5); + } + .lg\:bui-pb-6 { + padding-bottom: var(--bui-space-6); + } + .lg\:bui-pb-7 { + padding-bottom: var(--bui-space-7); + } + .lg\:bui-pb-8 { + padding-bottom: var(--bui-space-8); + } + .lg\:bui-pb-9 { + padding-bottom: var(--bui-space-9); + } + .lg\:bui-pb-10 { + padding-bottom: var(--bui-space-10); + } + .lg\:bui-pb-11 { + padding-bottom: var(--bui-space-11); + } + .lg\:bui-pb-12 { + padding-bottom: var(--bui-space-12); + } + .lg\:bui-pb-13 { + padding-bottom: var(--bui-space-13); + } + .lg\:bui-pb-14 { + padding-bottom: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-pb { + padding-bottom: var(--pb-xl); + } + .xl\:bui-pb-0\.5 { + padding-bottom: var(--bui-space-0_5); + } + .xl\:bui-pb-1 { + padding-bottom: var(--bui-space-1); + } + .xl\:bui-pb-1\.5 { + padding-bottom: var(--bui-space-1_5); + } + .xl\:bui-pb-2 { + padding-bottom: var(--bui-space-2); + } + .xl\:bui-pb-3 { + padding-bottom: var(--bui-space-3); + } + .xl\:bui-pb-4 { + padding-bottom: var(--bui-space-4); + } + .xl\:bui-pb-5 { + padding-bottom: var(--bui-space-5); + } + .xl\:bui-pb-6 { + padding-bottom: var(--bui-space-6); + } + .xl\:bui-pb-7 { + padding-bottom: var(--bui-space-7); + } + .xl\:bui-pb-8 { + padding-bottom: var(--bui-space-8); + } + .xl\:bui-pb-9 { + padding-bottom: var(--bui-space-9); + } + .xl\:bui-pb-10 { + padding-bottom: var(--bui-space-10); + } + .xl\:bui-pb-11 { + padding-bottom: var(--bui-space-11); + } + .xl\:bui-pb-12 { + padding-bottom: var(--bui-space-12); + } + .xl\:bui-pb-13 { + padding-bottom: var(--bui-space-13); + } + .xl\:bui-pb-14 { + padding-bottom: var(--bui-space-14); + } + } + .bui-py { + padding-top: var(--py); + padding-bottom: var(--py); + } + .bui-py-0\.5 { + padding-top: var(--bui-space-0_5); + padding-bottom: var(--bui-space-0_5); + } + .bui-py-1 { + padding-top: var(--bui-space-1); + padding-bottom: var(--bui-space-1); + } + .bui-py-1\.5 { + padding-top: var(--bui-space-1_5); + padding-bottom: var(--bui-space-1_5); + } + .bui-py-2 { + padding-top: var(--bui-space-2); + padding-bottom: var(--bui-space-2); + } + .bui-py-3 { + padding-top: var(--bui-space-3); + padding-bottom: var(--bui-space-3); + } + .bui-py-4 { + padding-top: var(--bui-space-4); + padding-bottom: var(--bui-space-4); + } + .bui-py-5 { + padding-top: var(--bui-space-5); + padding-bottom: var(--bui-space-5); + } + .bui-py-6 { + padding-top: var(--bui-space-6); + padding-bottom: var(--bui-space-6); + } + .bui-py-7 { + padding-top: var(--bui-space-7); + padding-bottom: var(--bui-space-7); + } + .bui-py-8 { + padding-top: var(--bui-space-8); + padding-bottom: var(--bui-space-8); + } + .bui-py-9 { + padding-top: var(--bui-space-9); + padding-bottom: var(--bui-space-9); + } + .bui-py-10 { + padding-top: var(--bui-space-10); + padding-bottom: var(--bui-space-10); + } + .bui-py-11 { + padding-top: var(--bui-space-11); + padding-bottom: var(--bui-space-11); + } + .bui-py-12 { + padding-top: var(--bui-space-12); + padding-bottom: var(--bui-space-12); + } + .bui-py-13 { + padding-top: var(--bui-space-13); + padding-bottom: var(--bui-space-13); + } + .bui-py-14 { + padding-top: var(--bui-space-14); + padding-bottom: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-py { + padding-top: var(--py-xs); + padding-bottom: var(--py-xs); + } + .xs\:bui-py-0\.5 { + padding-top: var(--bui-space-0_5); + padding-bottom: var(--bui-space-0_5); + } + .xs\:bui-py-1 { + padding-top: var(--bui-space-1); + padding-bottom: var(--bui-space-1); + } + .xs\:bui-py-1\.5 { + padding-top: var(--bui-space-1_5); + padding-bottom: var(--bui-space-1_5); + } + .xs\:bui-py-2 { + padding-top: var(--bui-space-2); + padding-bottom: var(--bui-space-2); + } + .xs\:bui-py-3 { + padding-top: var(--bui-space-3); + padding-bottom: var(--bui-space-3); + } + .xs\:bui-py-4 { + padding-top: var(--bui-space-4); + padding-bottom: var(--bui-space-4); + } + .xs\:bui-py-5 { + padding-top: var(--bui-space-5); + padding-bottom: var(--bui-space-5); + } + .xs\:bui-py-6 { + padding-top: var(--bui-space-6); + padding-bottom: var(--bui-space-6); + } + .xs\:bui-py-7 { + padding-top: var(--bui-space-7); + padding-bottom: var(--bui-space-7); + } + .xs\:bui-py-8 { + padding-top: var(--bui-space-8); + padding-bottom: var(--bui-space-8); + } + .xs\:bui-py-9 { + padding-top: var(--bui-space-9); + padding-bottom: var(--bui-space-9); + } + .xs\:bui-py-10 { + padding-top: var(--bui-space-10); + padding-bottom: var(--bui-space-10); + } + .xs\:bui-py-11 { + padding-top: var(--bui-space-11); + padding-bottom: var(--bui-space-11); + } + .xs\:bui-py-12 { + padding-top: var(--bui-space-12); + padding-bottom: var(--bui-space-12); + } + .xs\:bui-py-13 { + padding-top: var(--bui-space-13); + padding-bottom: var(--bui-space-13); + } + .xs\:bui-py-14 { + padding-top: var(--bui-space-14); + padding-bottom: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-py { + padding-top: var(--py-sm); + padding-bottom: var(--py-sm); + } + .sm\:bui-py-0\.5 { + padding-top: var(--bui-space-0_5); + padding-bottom: var(--bui-space-0_5); + } + .sm\:bui-py-1 { + padding-top: var(--bui-space-1); + padding-bottom: var(--bui-space-1); + } + .sm\:bui-py-1\.5 { + padding-top: var(--bui-space-1_5); + padding-bottom: var(--bui-space-1_5); + } + .sm\:bui-py-2 { + padding-top: var(--bui-space-2); + padding-bottom: var(--bui-space-2); + } + .sm\:bui-py-3 { + padding-top: var(--bui-space-3); + padding-bottom: var(--bui-space-3); + } + .sm\:bui-py-4 { + padding-top: var(--bui-space-4); + padding-bottom: var(--bui-space-4); + } + .sm\:bui-py-5 { + padding-top: var(--bui-space-5); + padding-bottom: var(--bui-space-5); + } + .sm\:bui-py-6 { + padding-top: var(--bui-space-6); + padding-bottom: var(--bui-space-6); + } + .sm\:bui-py-7 { + padding-top: var(--bui-space-7); + padding-bottom: var(--bui-space-7); + } + .sm\:bui-py-8 { + padding-top: var(--bui-space-8); + padding-bottom: var(--bui-space-8); + } + .sm\:bui-py-9 { + padding-top: var(--bui-space-9); + padding-bottom: var(--bui-space-9); + } + .sm\:bui-py-10 { + padding-top: var(--bui-space-10); + padding-bottom: var(--bui-space-10); + } + .sm\:bui-py-11 { + padding-top: var(--bui-space-11); + padding-bottom: var(--bui-space-11); + } + .sm\:bui-py-12 { + padding-top: var(--bui-space-12); + padding-bottom: var(--bui-space-12); + } + .sm\:bui-py-13 { + padding-top: var(--bui-space-13); + padding-bottom: var(--bui-space-13); + } + .sm\:bui-py-14 { + padding-top: var(--bui-space-14); + padding-bottom: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-py { + padding-top: var(--py-md); + padding-bottom: var(--py-md); + } + .md\:bui-py-0\.5 { + padding-top: var(--bui-space-0_5); + padding-bottom: var(--bui-space-0_5); + } + .md\:bui-py-1 { + padding-top: var(--bui-space-1); + padding-bottom: var(--bui-space-1); + } + .md\:bui-py-1\.5 { + padding-top: var(--bui-space-1_5); + padding-bottom: var(--bui-space-1_5); + } + .md\:bui-py-2 { + padding-top: var(--bui-space-2); + padding-bottom: var(--bui-space-2); + } + .md\:bui-py-3 { + padding-top: var(--bui-space-3); + padding-bottom: var(--bui-space-3); + } + .md\:bui-py-4 { + padding-top: var(--bui-space-4); + padding-bottom: var(--bui-space-4); + } + .md\:bui-py-5 { + padding-top: var(--bui-space-5); + padding-bottom: var(--bui-space-5); + } + .md\:bui-py-6 { + padding-top: var(--bui-space-6); + padding-bottom: var(--bui-space-6); + } + .md\:bui-py-7 { + padding-top: var(--bui-space-7); + padding-bottom: var(--bui-space-7); + } + .md\:bui-py-8 { + padding-top: var(--bui-space-8); + padding-bottom: var(--bui-space-8); + } + .md\:bui-py-9 { + padding-top: var(--bui-space-9); + padding-bottom: var(--bui-space-9); + } + .md\:bui-py-10 { + padding-top: var(--bui-space-10); + padding-bottom: var(--bui-space-10); + } + .md\:bui-py-11 { + padding-top: var(--bui-space-11); + padding-bottom: var(--bui-space-11); + } + .md\:bui-py-12 { + padding-top: var(--bui-space-12); + padding-bottom: var(--bui-space-12); + } + .md\:bui-py-13 { + padding-top: var(--bui-space-13); + padding-bottom: var(--bui-space-13); + } + .md\:bui-py-14 { + padding-top: var(--bui-space-14); + padding-bottom: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-py { + padding-top: var(--py-lg); + padding-bottom: var(--py-lg); + } + .lg\:bui-py-0\.5 { + padding-top: var(--bui-space-0_5); + padding-bottom: var(--bui-space-0_5); + } + .lg\:bui-py-1 { + padding-top: var(--bui-space-1); + padding-bottom: var(--bui-space-1); + } + .lg\:bui-py-1\.5 { + padding-top: var(--bui-space-1_5); + padding-bottom: var(--bui-space-1_5); + } + .lg\:bui-py-2 { + padding-top: var(--bui-space-2); + padding-bottom: var(--bui-space-2); + } + .lg\:bui-py-3 { + padding-top: var(--bui-space-3); + padding-bottom: var(--bui-space-3); + } + .lg\:bui-py-4 { + padding-top: var(--bui-space-4); + padding-bottom: var(--bui-space-4); + } + .lg\:bui-py-5 { + padding-top: var(--bui-space-5); + padding-bottom: var(--bui-space-5); + } + .lg\:bui-py-6 { + padding-top: var(--bui-space-6); + padding-bottom: var(--bui-space-6); + } + .lg\:bui-py-7 { + padding-top: var(--bui-space-7); + padding-bottom: var(--bui-space-7); + } + .lg\:bui-py-8 { + padding-top: var(--bui-space-8); + padding-bottom: var(--bui-space-8); + } + .lg\:bui-py-9 { + padding-top: var(--bui-space-9); + padding-bottom: var(--bui-space-9); + } + .lg\:bui-py-10 { + padding-top: var(--bui-space-10); + padding-bottom: var(--bui-space-10); + } + .lg\:bui-py-11 { + padding-top: var(--bui-space-11); + padding-bottom: var(--bui-space-11); + } + .lg\:bui-py-12 { + padding-top: var(--bui-space-12); + padding-bottom: var(--bui-space-12); + } + .lg\:bui-py-13 { + padding-top: var(--bui-space-13); + padding-bottom: var(--bui-space-13); + } + .lg\:bui-py-14 { + padding-top: var(--bui-space-14); + padding-bottom: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-py { + padding-top: var(--py-xl); + padding-bottom: var(--py-xl); + } + .xl\:bui-py-0\.5 { + padding-top: var(--bui-space-0_5); + padding-bottom: var(--bui-space-0_5); + } + .xl\:bui-py-1 { + padding-top: var(--bui-space-1); + padding-bottom: var(--bui-space-1); + } + .xl\:bui-py-1\.5 { + padding-top: var(--bui-space-1_5); + padding-bottom: var(--bui-space-1_5); + } + .xl\:bui-py-2 { + padding-top: var(--bui-space-2); + padding-bottom: var(--bui-space-2); + } + .xl\:bui-py-3 { + padding-top: var(--bui-space-3); + padding-bottom: var(--bui-space-3); + } + .xl\:bui-py-4 { + padding-top: var(--bui-space-4); + padding-bottom: var(--bui-space-4); + } + .xl\:bui-py-5 { + padding-top: var(--bui-space-5); + padding-bottom: var(--bui-space-5); + } + .xl\:bui-py-6 { + padding-top: var(--bui-space-6); + padding-bottom: var(--bui-space-6); + } + .xl\:bui-py-7 { + padding-top: var(--bui-space-7); + padding-bottom: var(--bui-space-7); + } + .xl\:bui-py-8 { + padding-top: var(--bui-space-8); + padding-bottom: var(--bui-space-8); + } + .xl\:bui-py-9 { + padding-top: var(--bui-space-9); + padding-bottom: var(--bui-space-9); + } + .xl\:bui-py-10 { + padding-top: var(--bui-space-10); + padding-bottom: var(--bui-space-10); + } + .xl\:bui-py-11 { + padding-top: var(--bui-space-11); + padding-bottom: var(--bui-space-11); + } + .xl\:bui-py-12 { + padding-top: var(--bui-space-12); + padding-bottom: var(--bui-space-12); + } + .xl\:bui-py-13 { + padding-top: var(--bui-space-13); + padding-bottom: var(--bui-space-13); + } + .xl\:bui-py-14 { + padding-top: var(--bui-space-14); + padding-bottom: var(--bui-space-14); + } + } + .bui-px { + padding-left: var(--px); + padding-right: var(--px); + } + .bui-px-0\.5 { + padding-left: var(--bui-space-0_5); + padding-right: var(--bui-space-0_5); + } + .bui-px-1 { + padding-left: var(--bui-space-1); + padding-right: var(--bui-space-1); + } + .bui-px-1\.5 { + padding-left: var(--bui-space-1_5); + padding-right: var(--bui-space-1_5); + } + .bui-px-2 { + padding-left: var(--bui-space-2); + padding-right: var(--bui-space-2); + } + .bui-px-3 { + padding-left: var(--bui-space-3); + padding-right: var(--bui-space-3); + } + .bui-px-4 { + padding-left: var(--bui-space-4); + padding-right: var(--bui-space-4); + } + .bui-px-5 { + padding-left: var(--bui-space-5); + padding-right: var(--bui-space-5); + } + .bui-px-6 { + padding-left: var(--bui-space-6); + padding-right: var(--bui-space-6); + } + .bui-px-7 { + padding-left: var(--bui-space-7); + padding-right: var(--bui-space-7); + } + .bui-px-8 { + padding-left: var(--bui-space-8); + padding-right: var(--bui-space-8); + } + .bui-px-9 { + padding-left: var(--bui-space-9); + padding-right: var(--bui-space-9); + } + .bui-px-10 { + padding-left: var(--bui-space-10); + padding-right: var(--bui-space-10); + } + .bui-px-11 { + padding-left: var(--bui-space-11); + padding-right: var(--bui-space-11); + } + .bui-px-12 { + padding-left: var(--bui-space-12); + padding-right: var(--bui-space-12); + } + .bui-px-13 { + padding-left: var(--bui-space-13); + padding-right: var(--bui-space-13); + } + .bui-px-14 { + padding-left: var(--bui-space-14); + padding-right: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-px { + padding-left: var(--px-xs); + padding-right: var(--px-xs); + } + .xs\:bui-px-0\.5 { + padding-left: var(--bui-space-0_5); + padding-right: var(--bui-space-0_5); + } + .xs\:bui-px-1 { + padding-left: var(--bui-space-1); + padding-right: var(--bui-space-1); + } + .xs\:bui-px-1\.5 { + padding-left: var(--bui-space-1_5); + padding-right: var(--bui-space-1_5); + } + .xs\:bui-px-2 { + padding-left: var(--bui-space-2); + padding-right: var(--bui-space-2); + } + .xs\:bui-px-3 { + padding-left: var(--bui-space-3); + padding-right: var(--bui-space-3); + } + .xs\:bui-px-4 { + padding-left: var(--bui-space-4); + padding-right: var(--bui-space-4); + } + .xs\:bui-px-5 { + padding-left: var(--bui-space-5); + padding-right: var(--bui-space-5); + } + .xs\:bui-px-6 { + padding-left: var(--bui-space-6); + padding-right: var(--bui-space-6); + } + .xs\:bui-px-7 { + padding-left: var(--bui-space-7); + padding-right: var(--bui-space-7); + } + .xs\:bui-px-8 { + padding-left: var(--bui-space-8); + padding-right: var(--bui-space-8); + } + .xs\:bui-px-9 { + padding-left: var(--bui-space-9); + padding-right: var(--bui-space-9); + } + .xs\:bui-px-10 { + padding-left: var(--bui-space-10); + padding-right: var(--bui-space-10); + } + .xs\:bui-px-11 { + padding-left: var(--bui-space-11); + padding-right: var(--bui-space-11); + } + .xs\:bui-px-12 { + padding-left: var(--bui-space-12); + padding-right: var(--bui-space-12); + } + .xs\:bui-px-13 { + padding-left: var(--bui-space-13); + padding-right: var(--bui-space-13); + } + .xs\:bui-px-14 { + padding-left: var(--bui-space-14); + padding-right: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-px { + padding-left: var(--px-sm); + padding-right: var(--px-sm); + } + .sm\:bui-px-0\.5 { + padding-left: var(--bui-space-0_5); + padding-right: var(--bui-space-0_5); + } + .sm\:bui-px-1 { + padding-left: var(--bui-space-1); + padding-right: var(--bui-space-1); + } + .sm\:bui-px-1\.5 { + padding-left: var(--bui-space-1_5); + padding-right: var(--bui-space-1_5); + } + .sm\:bui-px-2 { + padding-left: var(--bui-space-2); + padding-right: var(--bui-space-2); + } + .sm\:bui-px-3 { + padding-left: var(--bui-space-3); + padding-right: var(--bui-space-3); + } + .sm\:bui-px-4 { + padding-left: var(--bui-space-4); + padding-right: var(--bui-space-4); + } + .sm\:bui-px-5 { + padding-left: var(--bui-space-5); + padding-right: var(--bui-space-5); + } + .sm\:bui-px-6 { + padding-left: var(--bui-space-6); + padding-right: var(--bui-space-6); + } + .sm\:bui-px-7 { + padding-left: var(--bui-space-7); + padding-right: var(--bui-space-7); + } + .sm\:bui-px-8 { + padding-left: var(--bui-space-8); + padding-right: var(--bui-space-8); + } + .sm\:bui-px-9 { + padding-left: var(--bui-space-9); + padding-right: var(--bui-space-9); + } + .sm\:bui-px-10 { + padding-left: var(--bui-space-10); + padding-right: var(--bui-space-10); + } + .sm\:bui-px-11 { + padding-left: var(--bui-space-11); + padding-right: var(--bui-space-11); + } + .sm\:bui-px-12 { + padding-left: var(--bui-space-12); + padding-right: var(--bui-space-12); + } + .sm\:bui-px-13 { + padding-left: var(--bui-space-13); + padding-right: var(--bui-space-13); + } + .sm\:bui-px-14 { + padding-left: var(--bui-space-14); + padding-right: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-px { + padding-left: var(--px-md); + padding-right: var(--px-md); + } + .md\:bui-px-0\.5 { + padding-left: var(--bui-space-0_5); + padding-right: var(--bui-space-0_5); + } + .md\:bui-px-1 { + padding-left: var(--bui-space-1); + padding-right: var(--bui-space-1); + } + .md\:bui-px-1\.5 { + padding-left: var(--bui-space-1_5); + padding-right: var(--bui-space-1_5); + } + .md\:bui-px-2 { + padding-left: var(--bui-space-2); + padding-right: var(--bui-space-2); + } + .md\:bui-px-3 { + padding-left: var(--bui-space-3); + padding-right: var(--bui-space-3); + } + .md\:bui-px-4 { + padding-left: var(--bui-space-4); + padding-right: var(--bui-space-4); + } + .md\:bui-px-5 { + padding-left: var(--bui-space-5); + padding-right: var(--bui-space-5); + } + .md\:bui-px-6 { + padding-left: var(--bui-space-6); + padding-right: var(--bui-space-6); + } + .md\:bui-px-7 { + padding-left: var(--bui-space-7); + padding-right: var(--bui-space-7); + } + .md\:bui-px-8 { + padding-left: var(--bui-space-8); + padding-right: var(--bui-space-8); + } + .md\:bui-px-9 { + padding-left: var(--bui-space-9); + padding-right: var(--bui-space-9); + } + .md\:bui-px-10 { + padding-left: var(--bui-space-10); + padding-right: var(--bui-space-10); + } + .md\:bui-px-11 { + padding-left: var(--bui-space-11); + padding-right: var(--bui-space-11); + } + .md\:bui-px-12 { + padding-left: var(--bui-space-12); + padding-right: var(--bui-space-12); + } + .md\:bui-px-13 { + padding-left: var(--bui-space-13); + padding-right: var(--bui-space-13); + } + .md\:bui-px-14 { + padding-left: var(--bui-space-14); + padding-right: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-px { + padding-left: var(--px-lg); + padding-right: var(--px-lg); + } + .lg\:bui-px-0\.5 { + padding-left: var(--bui-space-0_5); + padding-right: var(--bui-space-0_5); + } + .lg\:bui-px-1 { + padding-left: var(--bui-space-1); + padding-right: var(--bui-space-1); + } + .lg\:bui-px-1\.5 { + padding-left: var(--bui-space-1_5); + padding-right: var(--bui-space-1_5); + } + .lg\:bui-px-2 { + padding-left: var(--bui-space-2); + padding-right: var(--bui-space-2); + } + .lg\:bui-px-3 { + padding-left: var(--bui-space-3); + padding-right: var(--bui-space-3); + } + .lg\:bui-px-4 { + padding-left: var(--bui-space-4); + padding-right: var(--bui-space-4); + } + .lg\:bui-px-5 { + padding-left: var(--bui-space-5); + padding-right: var(--bui-space-5); + } + .lg\:bui-px-6 { + padding-left: var(--bui-space-6); + padding-right: var(--bui-space-6); + } + .lg\:bui-px-7 { + padding-left: var(--bui-space-7); + padding-right: var(--bui-space-7); + } + .lg\:bui-px-8 { + padding-left: var(--bui-space-8); + padding-right: var(--bui-space-8); + } + .lg\:bui-px-9 { + padding-left: var(--bui-space-9); + padding-right: var(--bui-space-9); + } + .lg\:bui-px-10 { + padding-left: var(--bui-space-10); + padding-right: var(--bui-space-10); + } + .lg\:bui-px-11 { + padding-left: var(--bui-space-11); + padding-right: var(--bui-space-11); + } + .lg\:bui-px-12 { + padding-left: var(--bui-space-12); + padding-right: var(--bui-space-12); + } + .lg\:bui-px-13 { + padding-left: var(--bui-space-13); + padding-right: var(--bui-space-13); + } + .lg\:bui-px-14 { + padding-left: var(--bui-space-14); + padding-right: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-px { + padding-left: var(--px-xl); + padding-right: var(--px-xl); + } + .xl\:bui-px-0\.5 { + padding-left: var(--bui-space-0_5); + padding-right: var(--bui-space-0_5); + } + .xl\:bui-px-1 { + padding-left: var(--bui-space-1); + padding-right: var(--bui-space-1); + } + .xl\:bui-px-1\.5 { + padding-left: var(--bui-space-1_5); + padding-right: var(--bui-space-1_5); + } + .xl\:bui-px-2 { + padding-left: var(--bui-space-2); + padding-right: var(--bui-space-2); + } + .xl\:bui-px-3 { + padding-left: var(--bui-space-3); + padding-right: var(--bui-space-3); + } + .xl\:bui-px-4 { + padding-left: var(--bui-space-4); + padding-right: var(--bui-space-4); + } + .xl\:bui-px-5 { + padding-left: var(--bui-space-5); + padding-right: var(--bui-space-5); + } + .xl\:bui-px-6 { + padding-left: var(--bui-space-6); + padding-right: var(--bui-space-6); + } + .xl\:bui-px-7 { + padding-left: var(--bui-space-7); + padding-right: var(--bui-space-7); + } + .xl\:bui-px-8 { + padding-left: var(--bui-space-8); + padding-right: var(--bui-space-8); + } + .xl\:bui-px-9 { + padding-left: var(--bui-space-9); + padding-right: var(--bui-space-9); + } + .xl\:bui-px-10 { + padding-left: var(--bui-space-10); + padding-right: var(--bui-space-10); + } + .xl\:bui-px-11 { + padding-left: var(--bui-space-11); + padding-right: var(--bui-space-11); + } + .xl\:bui-px-12 { + padding-left: var(--bui-space-12); + padding-right: var(--bui-space-12); + } + .xl\:bui-px-13 { + padding-left: var(--bui-space-13); + padding-right: var(--bui-space-13); + } + .xl\:bui-px-14 { + padding-left: var(--bui-space-14); + padding-right: var(--bui-space-14); + } + } + .bui-m { + margin: var(--m); + } + .bui-m-0\.5 { + margin: var(--bui-space-0_5); + } + .bui-m-1 { + margin: var(--bui-space-1); + } + .bui-m-1\.5 { + margin: var(--bui-space-1_5); + } + .bui-m-2 { + margin: var(--bui-space-2); + } + .bui-m-3 { + margin: var(--bui-space-3); + } + .bui-m-4 { + margin: var(--bui-space-4); + } + .bui-m-5 { + margin: var(--bui-space-5); + } + .bui-m-6 { + margin: var(--bui-space-6); + } + .bui-m-7 { + margin: var(--bui-space-7); + } + .bui-m-8 { + margin: var(--bui-space-8); + } + .bui-m-9 { + margin: var(--bui-space-9); + } + .bui-m-10 { + margin: var(--bui-space-10); + } + .bui-m-11 { + margin: var(--bui-space-11); + } + .bui-m-12 { + margin: var(--bui-space-12); + } + .bui-m-13 { + margin: var(--bui-space-13); + } + .bui-m-14 { + margin: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-m { + margin: var(--p-xs); + } + .xs\:bui-m-0\.5 { + margin: var(--bui-space-0_5); + } + .xs\:bui-m-1 { + margin: var(--bui-space-1); + } + .xs\:bui-m-1\.5 { + margin: var(--bui-space-1_5); + } + .xs\:bui-m-2 { + margin: var(--bui-space-2); + } + .xs\:bui-m-3 { + margin: var(--bui-space-3); + } + .xs\:bui-m-4 { + margin: var(--bui-space-4); + } + .xs\:bui-m-5 { + margin: var(--bui-space-5); + } + .xs\:bui-m-6 { + margin: var(--bui-space-6); + } + .xs\:bui-m-7 { + margin: var(--bui-space-7); + } + .xs\:bui-m-8 { + margin: var(--bui-space-8); + } + .xs\:bui-m-9 { + margin: var(--bui-space-9); + } + .xs\:bui-m-10 { + margin: var(--bui-space-10); + } + .xs\:bui-m-11 { + margin: var(--bui-space-11); + } + .xs\:bui-m-12 { + margin: var(--bui-space-12); + } + .xs\:bui-m-13 { + margin: var(--bui-space-13); + } + .xs\:bui-m-14 { + margin: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-m { + margin: var(--p-sm); + } + .sm\:bui-m-0\.5 { + margin: var(--bui-space-0_5); + } + .sm\:bui-m-1 { + margin: var(--bui-space-1); + } + .sm\:bui-m-1\.5 { + margin: var(--bui-space-1_5); + } + .sm\:bui-m-2 { + margin: var(--bui-space-2); + } + .sm\:bui-m-3 { + margin: var(--bui-space-3); + } + .sm\:bui-m-4 { + margin: var(--bui-space-4); + } + .sm\:bui-m-5 { + margin: var(--bui-space-5); + } + .sm\:bui-m-6 { + margin: var(--bui-space-6); + } + .sm\:bui-m-7 { + margin: var(--bui-space-7); + } + .sm\:bui-m-8 { + margin: var(--bui-space-8); + } + .sm\:bui-m-9 { + margin: var(--bui-space-9); + } + .sm\:bui-m-10 { + margin: var(--bui-space-10); + } + .sm\:bui-m-11 { + margin: var(--bui-space-11); + } + .sm\:bui-m-12 { + margin: var(--bui-space-12); + } + .sm\:bui-m-13 { + margin: var(--bui-space-13); + } + .sm\:bui-m-14 { + margin: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-m { + margin: var(--p-md); + } + .md\:bui-m-0\.5 { + margin: var(--bui-space-0_5); + } + .md\:bui-m-1 { + margin: var(--bui-space-1); + } + .md\:bui-m-1\.5 { + margin: var(--bui-space-1_5); + } + .md\:bui-m-2 { + margin: var(--bui-space-2); + } + .md\:bui-m-3 { + margin: var(--bui-space-3); + } + .md\:bui-m-4 { + margin: var(--bui-space-4); + } + .md\:bui-m-5 { + margin: var(--bui-space-5); + } + .md\:bui-m-6 { + margin: var(--bui-space-6); + } + .md\:bui-m-7 { + margin: var(--bui-space-7); + } + .md\:bui-m-8 { + margin: var(--bui-space-8); + } + .md\:bui-m-9 { + margin: var(--bui-space-9); + } + .md\:bui-m-10 { + margin: var(--bui-space-10); + } + .md\:bui-m-11 { + margin: var(--bui-space-11); + } + .md\:bui-m-12 { + margin: var(--bui-space-12); + } + .md\:bui-m-13 { + margin: var(--bui-space-13); + } + .md\:bui-m-14 { + margin: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-m { + margin: var(--p-lg); + } + .lg\:bui-m-0\.5 { + margin: var(--bui-space-0_5); + } + .lg\:bui-m-1 { + margin: var(--bui-space-1); + } + .lg\:bui-m-1\.5 { + margin: var(--bui-space-1_5); + } + .lg\:bui-m-2 { + margin: var(--bui-space-2); + } + .lg\:bui-m-3 { + margin: var(--bui-space-3); + } + .lg\:bui-m-4 { + margin: var(--bui-space-4); + } + .lg\:bui-m-5 { + margin: var(--bui-space-5); + } + .lg\:bui-m-6 { + margin: var(--bui-space-6); + } + .lg\:bui-m-7 { + margin: var(--bui-space-7); + } + .lg\:bui-m-8 { + margin: var(--bui-space-8); + } + .lg\:bui-m-9 { + margin: var(--bui-space-9); + } + .lg\:bui-m-10 { + margin: var(--bui-space-10); + } + .lg\:bui-m-11 { + margin: var(--bui-space-11); + } + .lg\:bui-m-12 { + margin: var(--bui-space-12); + } + .lg\:bui-m-13 { + margin: var(--bui-space-13); + } + .lg\:bui-m-14 { + margin: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-m { + margin: var(--p-xl); + } + .xl\:bui-m-0\.5 { + margin: var(--bui-space-0_5); + } + .xl\:bui-m-1 { + margin: var(--bui-space-1); + } + .xl\:bui-m-1\.5 { + margin: var(--bui-space-1_5); + } + .xl\:bui-m-2 { + margin: var(--bui-space-2); + } + .xl\:bui-m-3 { + margin: var(--bui-space-3); + } + .xl\:bui-m-4 { + margin: var(--bui-space-4); + } + .xl\:bui-m-5 { + margin: var(--bui-space-5); + } + .xl\:bui-m-6 { + margin: var(--bui-space-6); + } + .xl\:bui-m-7 { + margin: var(--bui-space-7); + } + .xl\:bui-m-8 { + margin: var(--bui-space-8); + } + .xl\:bui-m-9 { + margin: var(--bui-space-9); + } + .xl\:bui-m-10 { + margin: var(--bui-space-10); + } + .xl\:bui-m-11 { + margin: var(--bui-space-11); + } + .xl\:bui-m-12 { + margin: var(--bui-space-12); + } + .xl\:bui-m-13 { + margin: var(--bui-space-13); + } + .xl\:bui-m-14 { + margin: var(--bui-space-14); + } + } + .bui-ml { + margin-left: var(--ml); + } + .bui-ml-0\.5 { + margin-left: var(--bui-space-0_5); + } + .bui-ml-1 { + margin-left: var(--bui-space-1); + } + .bui-ml-1\.5 { + margin-left: var(--bui-space-1_5); + } + .bui-ml-2 { + margin-left: var(--bui-space-2); + } + .bui-ml-3 { + margin-left: var(--bui-space-3); + } + .bui-ml-4 { + margin-left: var(--bui-space-4); + } + .bui-ml-5 { + margin-left: var(--bui-space-5); + } + .bui-ml-6 { + margin-left: var(--bui-space-6); + } + .bui-ml-7 { + margin-left: var(--bui-space-7); + } + .bui-ml-8 { + margin-left: var(--bui-space-8); + } + .bui-ml-9 { + margin-left: var(--bui-space-9); + } + .bui-ml-10 { + margin-left: var(--bui-space-10); + } + .bui-ml-11 { + margin-left: var(--bui-space-11); + } + .bui-ml-12 { + margin-left: var(--bui-space-12); + } + .bui-ml-13 { + margin-left: var(--bui-space-13); + } + .bui-ml-14 { + margin-left: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-ml { + margin-left: var(--ml-xs); + } + .xs\:bui-ml-0\.5 { + margin-left: var(--bui-space-0_5); + } + .xs\:bui-ml-1 { + margin-left: var(--bui-space-1); + } + .xs\:bui-ml-1\.5 { + margin-left: var(--bui-space-1_5); + } + .xs\:bui-ml-2 { + margin-left: var(--bui-space-2); + } + .xs\:bui-ml-3 { + margin-left: var(--bui-space-3); + } + .xs\:bui-ml-4 { + margin-left: var(--bui-space-4); + } + .xs\:bui-ml-5 { + margin-left: var(--bui-space-5); + } + .xs\:bui-ml-6 { + margin-left: var(--bui-space-6); + } + .xs\:bui-ml-7 { + margin-left: var(--bui-space-7); + } + .xs\:bui-ml-8 { + margin-left: var(--bui-space-8); + } + .xs\:bui-ml-9 { + margin-left: var(--bui-space-9); + } + .xs\:bui-ml-10 { + margin-left: var(--bui-space-10); + } + .xs\:bui-ml-11 { + margin-left: var(--bui-space-11); + } + .xs\:bui-ml-12 { + margin-left: var(--bui-space-12); + } + .xs\:bui-ml-13 { + margin-left: var(--bui-space-13); + } + .xs\:bui-ml-14 { + margin-left: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-ml { + margin-left: var(--ml-sm); + } + .sm\:bui-ml-0\.5 { + margin-left: var(--bui-space-0_5); + } + .sm\:bui-ml-1 { + margin-left: var(--bui-space-1); + } + .sm\:bui-ml-1\.5 { + margin-left: var(--bui-space-1_5); + } + .sm\:bui-ml-2 { + margin-left: var(--bui-space-2); + } + .sm\:bui-ml-3 { + margin-left: var(--bui-space-3); + } + .sm\:bui-ml-4 { + margin-left: var(--bui-space-4); + } + .sm\:bui-ml-5 { + margin-left: var(--bui-space-5); + } + .sm\:bui-ml-6 { + margin-left: var(--bui-space-6); + } + .sm\:bui-ml-7 { + margin-left: var(--bui-space-7); + } + .sm\:bui-ml-8 { + margin-left: var(--bui-space-8); + } + .sm\:bui-ml-9 { + margin-left: var(--bui-space-9); + } + .sm\:bui-ml-10 { + margin-left: var(--bui-space-10); + } + .sm\:bui-ml-11 { + margin-left: var(--bui-space-11); + } + .sm\:bui-ml-12 { + margin-left: var(--bui-space-12); + } + .sm\:bui-ml-13 { + margin-left: var(--bui-space-13); + } + .sm\:bui-ml-14 { + margin-left: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-ml { + margin-left: var(--ml-md); + } + .md\:bui-ml-0\.5 { + margin-left: var(--bui-space-0_5); + } + .md\:bui-ml-1 { + margin-left: var(--bui-space-1); + } + .md\:bui-ml-1\.5 { + margin-left: var(--bui-space-1_5); + } + .md\:bui-ml-2 { + margin-left: var(--bui-space-2); + } + .md\:bui-ml-3 { + margin-left: var(--bui-space-3); + } + .md\:bui-ml-4 { + margin-left: var(--bui-space-4); + } + .md\:bui-ml-5 { + margin-left: var(--bui-space-5); + } + .md\:bui-ml-6 { + margin-left: var(--bui-space-6); + } + .md\:bui-ml-7 { + margin-left: var(--bui-space-7); + } + .md\:bui-ml-8 { + margin-left: var(--bui-space-8); + } + .md\:bui-ml-9 { + margin-left: var(--bui-space-9); + } + .md\:bui-ml-10 { + margin-left: var(--bui-space-10); + } + .md\:bui-ml-11 { + margin-left: var(--bui-space-11); + } + .md\:bui-ml-12 { + margin-left: var(--bui-space-12); + } + .md\:bui-ml-13 { + margin-left: var(--bui-space-13); + } + .md\:bui-ml-14 { + margin-left: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-ml { + margin-left: var(--ml-lg); + } + .lg\:bui-ml-0\.5 { + margin-left: var(--bui-space-0_5); + } + .lg\:bui-ml-1 { + margin-left: var(--bui-space-1); + } + .lg\:bui-ml-1\.5 { + margin-left: var(--bui-space-1_5); + } + .lg\:bui-ml-2 { + margin-left: var(--bui-space-2); + } + .lg\:bui-ml-3 { + margin-left: var(--bui-space-3); + } + .lg\:bui-ml-4 { + margin-left: var(--bui-space-4); + } + .lg\:bui-ml-5 { + margin-left: var(--bui-space-5); + } + .lg\:bui-ml-6 { + margin-left: var(--bui-space-6); + } + .lg\:bui-ml-7 { + margin-left: var(--bui-space-7); + } + .lg\:bui-ml-8 { + margin-left: var(--bui-space-8); + } + .lg\:bui-ml-9 { + margin-left: var(--bui-space-9); + } + .lg\:bui-ml-10 { + margin-left: var(--bui-space-10); + } + .lg\:bui-ml-11 { + margin-left: var(--bui-space-11); + } + .lg\:bui-ml-12 { + margin-left: var(--bui-space-12); + } + .lg\:bui-ml-13 { + margin-left: var(--bui-space-13); + } + .lg\:bui-ml-14 { + margin-left: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-ml { + margin-left: var(--ml-xl); + } + .xl\:bui-ml-0\.5 { + margin-left: var(--bui-space-0_5); + } + .xl\:bui-ml-1 { + margin-left: var(--bui-space-1); + } + .xl\:bui-ml-1\.5 { + margin-left: var(--bui-space-1_5); + } + .xl\:bui-ml-2 { + margin-left: var(--bui-space-2); + } + .xl\:bui-ml-3 { + margin-left: var(--bui-space-3); + } + .xl\:bui-ml-4 { + margin-left: var(--bui-space-4); + } + .xl\:bui-ml-5 { + margin-left: var(--bui-space-5); + } + .xl\:bui-ml-6 { + margin-left: var(--bui-space-6); + } + .xl\:bui-ml-7 { + margin-left: var(--bui-space-7); + } + .xl\:bui-ml-8 { + margin-left: var(--bui-space-8); + } + .xl\:bui-ml-9 { + margin-left: var(--bui-space-9); + } + .xl\:bui-ml-10 { + margin-left: var(--bui-space-10); + } + .xl\:bui-ml-11 { + margin-left: var(--bui-space-11); + } + .xl\:bui-ml-12 { + margin-left: var(--bui-space-12); + } + .xl\:bui-ml-13 { + margin-left: var(--bui-space-13); + } + .xl\:bui-ml-14 { + margin-left: var(--bui-space-14); + } + } + .bui-mr { + margin-right: var(--mr); + } + .bui-mr-0\.5 { + margin-right: var(--bui-space-0_5); + } + .bui-mr-1 { + margin-right: var(--bui-space-1); + } + .bui-mr-1\.5 { + margin-right: var(--bui-space-1_5); + } + .bui-mr-2 { + margin-right: var(--bui-space-2); + } + .bui-mr-3 { + margin-right: var(--bui-space-3); + } + .bui-mr-4 { + margin-right: var(--bui-space-4); + } + .bui-mr-5 { + margin-right: var(--bui-space-5); + } + .bui-mr-6 { + margin-right: var(--bui-space-6); + } + .bui-mr-7 { + margin-right: var(--bui-space-7); + } + .bui-mr-8 { + margin-right: var(--bui-space-8); + } + .bui-mr-9 { + margin-right: var(--bui-space-9); + } + .bui-mr-10 { + margin-right: var(--bui-space-10); + } + .bui-mr-11 { + margin-right: var(--bui-space-11); + } + .bui-mr-12 { + margin-right: var(--bui-space-12); + } + .bui-mr-13 { + margin-right: var(--bui-space-13); + } + .bui-mr-14 { + margin-right: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-mr { + margin-right: var(--mr-xs); + } + .xs\:bui-mr-0\.5 { + margin-right: var(--bui-space-0_5); + } + .xs\:bui-mr-1 { + margin-right: var(--bui-space-1); + } + .xs\:bui-mr-1\.5 { + margin-right: var(--bui-space-1_5); + } + .xs\:bui-mr-2 { + margin-right: var(--bui-space-2); + } + .xs\:bui-mr-3 { + margin-right: var(--bui-space-3); + } + .xs\:bui-mr-4 { + margin-right: var(--bui-space-4); + } + .xs\:bui-mr-5 { + margin-right: var(--bui-space-5); + } + .xs\:bui-mr-6 { + margin-right: var(--bui-space-6); + } + .xs\:bui-mr-7 { + margin-right: var(--bui-space-7); + } + .xs\:bui-mr-8 { + margin-right: var(--bui-space-8); + } + .xs\:bui-mr-9 { + margin-right: var(--bui-space-9); + } + .xs\:bui-mr-10 { + margin-right: var(--bui-space-10); + } + .xs\:bui-mr-11 { + margin-right: var(--bui-space-11); + } + .xs\:bui-mr-12 { + margin-right: var(--bui-space-12); + } + .xs\:bui-mr-13 { + margin-right: var(--bui-space-13); + } + .xs\:bui-mr-14 { + margin-right: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-mr { + margin-right: var(--mr-sm); + } + .sm\:bui-mr-0\.5 { + margin-right: var(--bui-space-0_5); + } + .sm\:bui-mr-1 { + margin-right: var(--bui-space-1); + } + .sm\:bui-mr-1\.5 { + margin-right: var(--bui-space-1_5); + } + .sm\:bui-mr-2 { + margin-right: var(--bui-space-2); + } + .sm\:bui-mr-3 { + margin-right: var(--bui-space-3); + } + .sm\:bui-mr-4 { + margin-right: var(--bui-space-4); + } + .sm\:bui-mr-5 { + margin-right: var(--bui-space-5); + } + .sm\:bui-mr-6 { + margin-right: var(--bui-space-6); + } + .sm\:bui-mr-7 { + margin-right: var(--bui-space-7); + } + .sm\:bui-mr-8 { + margin-right: var(--bui-space-8); + } + .sm\:bui-mr-9 { + margin-right: var(--bui-space-9); + } + .sm\:bui-mr-10 { + margin-right: var(--bui-space-10); + } + .sm\:bui-mr-11 { + margin-right: var(--bui-space-11); + } + .sm\:bui-mr-12 { + margin-right: var(--bui-space-12); + } + .sm\:bui-mr-13 { + margin-right: var(--bui-space-13); + } + .sm\:bui-mr-14 { + margin-right: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-mr { + margin-right: var(--mr-md); + } + .md\:bui-mr-0\.5 { + margin-right: var(--bui-space-0_5); + } + .md\:bui-mr-1 { + margin-right: var(--bui-space-1); + } + .md\:bui-mr-1\.5 { + margin-right: var(--bui-space-1_5); + } + .md\:bui-mr-2 { + margin-right: var(--bui-space-2); + } + .md\:bui-mr-3 { + margin-right: var(--bui-space-3); + } + .md\:bui-mr-4 { + margin-right: var(--bui-space-4); + } + .md\:bui-mr-5 { + margin-right: var(--bui-space-5); + } + .md\:bui-mr-6 { + margin-right: var(--bui-space-6); + } + .md\:bui-mr-7 { + margin-right: var(--bui-space-7); + } + .md\:bui-mr-8 { + margin-right: var(--bui-space-8); + } + .md\:bui-mr-9 { + margin-right: var(--bui-space-9); + } + .md\:bui-mr-10 { + margin-right: var(--bui-space-10); + } + .md\:bui-mr-11 { + margin-right: var(--bui-space-11); + } + .md\:bui-mr-12 { + margin-right: var(--bui-space-12); + } + .md\:bui-mr-13 { + margin-right: var(--bui-space-13); + } + .md\:bui-mr-14 { + margin-right: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-mr { + margin-right: var(--mr-lg); + } + .lg\:bui-mr-0\.5 { + margin-right: var(--bui-space-0_5); + } + .lg\:bui-mr-1 { + margin-right: var(--bui-space-1); + } + .lg\:bui-mr-1\.5 { + margin-right: var(--bui-space-1_5); + } + .lg\:bui-mr-2 { + margin-right: var(--bui-space-2); + } + .lg\:bui-mr-3 { + margin-right: var(--bui-space-3); + } + .lg\:bui-mr-4 { + margin-right: var(--bui-space-4); + } + .lg\:bui-mr-5 { + margin-right: var(--bui-space-5); + } + .lg\:bui-mr-6 { + margin-right: var(--bui-space-6); + } + .lg\:bui-mr-7 { + margin-right: var(--bui-space-7); + } + .lg\:bui-mr-8 { + margin-right: var(--bui-space-8); + } + .lg\:bui-mr-9 { + margin-right: var(--bui-space-9); + } + .lg\:bui-mr-10 { + margin-right: var(--bui-space-10); + } + .lg\:bui-mr-11 { + margin-right: var(--bui-space-11); + } + .lg\:bui-mr-12 { + margin-right: var(--bui-space-12); + } + .lg\:bui-mr-13 { + margin-right: var(--bui-space-13); + } + .lg\:bui-mr-14 { + margin-right: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-mr { + margin-right: var(--mr-xl); + } + .xl\:bui-mr-0\.5 { + margin-right: var(--bui-space-0_5); + } + .xl\:bui-mr-1 { + margin-right: var(--bui-space-1); + } + .xl\:bui-mr-1\.5 { + margin-right: var(--bui-space-1_5); + } + .xl\:bui-mr-2 { + margin-right: var(--bui-space-2); + } + .xl\:bui-mr-3 { + margin-right: var(--bui-space-3); + } + .xl\:bui-mr-4 { + margin-right: var(--bui-space-4); + } + .xl\:bui-mr-5 { + margin-right: var(--bui-space-5); + } + .xl\:bui-mr-6 { + margin-right: var(--bui-space-6); + } + .xl\:bui-mr-7 { + margin-right: var(--bui-space-7); + } + .xl\:bui-mr-8 { + margin-right: var(--bui-space-8); + } + .xl\:bui-mr-9 { + margin-right: var(--bui-space-9); + } + .xl\:bui-mr-10 { + margin-right: var(--bui-space-10); + } + .xl\:bui-mr-11 { + margin-right: var(--bui-space-11); + } + .xl\:bui-mr-12 { + margin-right: var(--bui-space-12); + } + .xl\:bui-mr-13 { + margin-right: var(--bui-space-13); + } + .xl\:bui-mr-14 { + margin-right: var(--bui-space-14); + } + } + .bui-mt { + margin-top: var(--mt); + } + .bui-mt-0\.5 { + margin-top: var(--bui-space-0_5); + } + .bui-mt-1 { + margin-top: var(--bui-space-1); + } + .bui-mt-1\.5 { + margin-top: var(--bui-space-1_5); + } + .bui-mt-2 { + margin-top: var(--bui-space-2); + } + .bui-mt-3 { + margin-top: var(--bui-space-3); + } + .bui-mt-4 { + margin-top: var(--bui-space-4); + } + .bui-mt-5 { + margin-top: var(--bui-space-5); + } + .bui-mt-6 { + margin-top: var(--bui-space-6); + } + .bui-mt-7 { + margin-top: var(--bui-space-7); + } + .bui-mt-8 { + margin-top: var(--bui-space-8); + } + .bui-mt-9 { + margin-top: var(--bui-space-9); + } + .bui-mt-10 { + margin-top: var(--bui-space-10); + } + .bui-mt-11 { + margin-top: var(--bui-space-11); + } + .bui-mt-12 { + margin-top: var(--bui-space-12); + } + .bui-mt-13 { + margin-top: var(--bui-space-13); + } + .bui-mt-14 { + margin-top: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-mt { + margin-top: var(--mt-xs); + } + .xs\:bui-mt-0\.5 { + margin-top: var(--bui-space-0_5); + } + .xs\:bui-mt-1 { + margin-top: var(--bui-space-1); + } + .xs\:bui-mt-1\.5 { + margin-top: var(--bui-space-1_5); + } + .xs\:bui-mt-2 { + margin-top: var(--bui-space-2); + } + .xs\:bui-mt-3 { + margin-top: var(--bui-space-3); + } + .xs\:bui-mt-4 { + margin-top: var(--bui-space-4); + } + .xs\:bui-mt-5 { + margin-top: var(--bui-space-5); + } + .xs\:bui-mt-6 { + margin-top: var(--bui-space-6); + } + .xs\:bui-mt-7 { + margin-top: var(--bui-space-7); + } + .xs\:bui-mt-8 { + margin-top: var(--bui-space-8); + } + .xs\:bui-mt-9 { + margin-top: var(--bui-space-9); + } + .xs\:bui-mt-10 { + margin-top: var(--bui-space-10); + } + .xs\:bui-mt-11 { + margin-top: var(--bui-space-11); + } + .xs\:bui-mt-12 { + margin-top: var(--bui-space-12); + } + .xs\:bui-mt-13 { + margin-top: var(--bui-space-13); + } + .xs\:bui-mt-14 { + margin-top: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-mt { + margin-top: var(--mt-sm); + } + .sm\:bui-mt-0\.5 { + margin-top: var(--bui-space-0_5); + } + .sm\:bui-mt-1 { + margin-top: var(--bui-space-1); + } + .sm\:bui-mt-1\.5 { + margin-top: var(--bui-space-1_5); + } + .sm\:bui-mt-2 { + margin-top: var(--bui-space-2); + } + .sm\:bui-mt-3 { + margin-top: var(--bui-space-3); + } + .sm\:bui-mt-4 { + margin-top: var(--bui-space-4); + } + .sm\:bui-mt-5 { + margin-top: var(--bui-space-5); + } + .sm\:bui-mt-6 { + margin-top: var(--bui-space-6); + } + .sm\:bui-mt-7 { + margin-top: var(--bui-space-7); + } + .sm\:bui-mt-8 { + margin-top: var(--bui-space-8); + } + .sm\:bui-mt-9 { + margin-top: var(--bui-space-9); + } + .sm\:bui-mt-10 { + margin-top: var(--bui-space-10); + } + .sm\:bui-mt-11 { + margin-top: var(--bui-space-11); + } + .sm\:bui-mt-12 { + margin-top: var(--bui-space-12); + } + .sm\:bui-mt-13 { + margin-top: var(--bui-space-13); + } + .sm\:bui-mt-14 { + margin-top: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-mt { + margin-top: var(--mt-md); + } + .md\:bui-mt-0\.5 { + margin-top: var(--bui-space-0_5); + } + .md\:bui-mt-1 { + margin-top: var(--bui-space-1); + } + .md\:bui-mt-1\.5 { + margin-top: var(--bui-space-1_5); + } + .md\:bui-mt-2 { + margin-top: var(--bui-space-2); + } + .md\:bui-mt-3 { + margin-top: var(--bui-space-3); + } + .md\:bui-mt-4 { + margin-top: var(--bui-space-4); + } + .md\:bui-mt-5 { + margin-top: var(--bui-space-5); + } + .md\:bui-mt-6 { + margin-top: var(--bui-space-6); + } + .md\:bui-mt-7 { + margin-top: var(--bui-space-7); + } + .md\:bui-mt-8 { + margin-top: var(--bui-space-8); + } + .md\:bui-mt-9 { + margin-top: var(--bui-space-9); + } + .md\:bui-mt-10 { + margin-top: var(--bui-space-10); + } + .md\:bui-mt-11 { + margin-top: var(--bui-space-11); + } + .md\:bui-mt-12 { + margin-top: var(--bui-space-12); + } + .md\:bui-mt-13 { + margin-top: var(--bui-space-13); + } + .md\:bui-mt-14 { + margin-top: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-mt { + margin-top: var(--mt-lg); + } + .lg\:bui-mt-0\.5 { + margin-top: var(--bui-space-0_5); + } + .lg\:bui-mt-1 { + margin-top: var(--bui-space-1); + } + .lg\:bui-mt-1\.5 { + margin-top: var(--bui-space-1_5); + } + .lg\:bui-mt-2 { + margin-top: var(--bui-space-2); + } + .lg\:bui-mt-3 { + margin-top: var(--bui-space-3); + } + .lg\:bui-mt-4 { + margin-top: var(--bui-space-4); + } + .lg\:bui-mt-5 { + margin-top: var(--bui-space-5); + } + .lg\:bui-mt-6 { + margin-top: var(--bui-space-6); + } + .lg\:bui-mt-7 { + margin-top: var(--bui-space-7); + } + .lg\:bui-mt-8 { + margin-top: var(--bui-space-8); + } + .lg\:bui-mt-9 { + margin-top: var(--bui-space-9); + } + .lg\:bui-mt-10 { + margin-top: var(--bui-space-10); + } + .lg\:bui-mt-11 { + margin-top: var(--bui-space-11); + } + .lg\:bui-mt-12 { + margin-top: var(--bui-space-12); + } + .lg\:bui-mt-13 { + margin-top: var(--bui-space-13); + } + .lg\:bui-mt-14 { + margin-top: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-mt { + margin-top: var(--mt-xl); + } + .xl\:bui-mt-0\.5 { + margin-top: var(--bui-space-0_5); + } + .xl\:bui-mt-1 { + margin-top: var(--bui-space-1); + } + .xl\:bui-mt-1\.5 { + margin-top: var(--bui-space-1_5); + } + .xl\:bui-mt-2 { + margin-top: var(--bui-space-2); + } + .xl\:bui-mt-3 { + margin-top: var(--bui-space-3); + } + .xl\:bui-mt-4 { + margin-top: var(--bui-space-4); + } + .xl\:bui-mt-5 { + margin-top: var(--bui-space-5); + } + .xl\:bui-mt-6 { + margin-top: var(--bui-space-6); + } + .xl\:bui-mt-7 { + margin-top: var(--bui-space-7); + } + .xl\:bui-mt-8 { + margin-top: var(--bui-space-8); + } + .xl\:bui-mt-9 { + margin-top: var(--bui-space-9); + } + .xl\:bui-mt-10 { + margin-top: var(--bui-space-10); + } + .xl\:bui-mt-11 { + margin-top: var(--bui-space-11); + } + .xl\:bui-mt-12 { + margin-top: var(--bui-space-12); + } + .xl\:bui-mt-13 { + margin-top: var(--bui-space-13); + } + .xl\:bui-mt-14 { + margin-top: var(--bui-space-14); + } + } + .bui-mb { + margin-bottom: var(--mb); + } + .bui-mb-0\.5 { + margin-bottom: var(--bui-space-0_5); + } + .bui-mb-1 { + margin-bottom: var(--bui-space-1); + } + .bui-mb-1\.5 { + margin-bottom: var(--bui-space-1_5); + } + .bui-mb-2 { + margin-bottom: var(--bui-space-2); + } + .bui-mb-3 { + margin-bottom: var(--bui-space-3); + } + .bui-mb-4 { + margin-bottom: var(--bui-space-4); + } + .bui-mb-5 { + margin-bottom: var(--bui-space-5); + } + .bui-mb-6 { + margin-bottom: var(--bui-space-6); + } + .bui-mb-7 { + margin-bottom: var(--bui-space-7); + } + .bui-mb-8 { + margin-bottom: var(--bui-space-8); + } + .bui-mb-9 { + margin-bottom: var(--bui-space-9); + } + .bui-mb-10 { + margin-bottom: var(--bui-space-10); + } + .bui-mb-11 { + margin-bottom: var(--bui-space-11); + } + .bui-mb-12 { + margin-bottom: var(--bui-space-12); + } + .bui-mb-13 { + margin-bottom: var(--bui-space-13); + } + .bui-mb-14 { + margin-bottom: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-mb { + margin-bottom: var(--mb-xs); + } + .xs\:bui-mb-0\.5 { + margin-bottom: var(--bui-space-0_5); + } + .xs\:bui-mb-1 { + margin-bottom: var(--bui-space-1); + } + .xs\:bui-mb-1\.5 { + margin-bottom: var(--bui-space-1_5); + } + .xs\:bui-mb-2 { + margin-bottom: var(--bui-space-2); + } + .xs\:bui-mb-3 { + margin-bottom: var(--bui-space-3); + } + .xs\:bui-mb-4 { + margin-bottom: var(--bui-space-4); + } + .xs\:bui-mb-5 { + margin-bottom: var(--bui-space-5); + } + .xs\:bui-mb-6 { + margin-bottom: var(--bui-space-6); + } + .xs\:bui-mb-7 { + margin-bottom: var(--bui-space-7); + } + .xs\:bui-mb-8 { + margin-bottom: var(--bui-space-8); + } + .xs\:bui-mb-9 { + margin-bottom: var(--bui-space-9); + } + .xs\:bui-mb-10 { + margin-bottom: var(--bui-space-10); + } + .xs\:bui-mb-11 { + margin-bottom: var(--bui-space-11); + } + .xs\:bui-mb-12 { + margin-bottom: var(--bui-space-12); + } + .xs\:bui-mb-13 { + margin-bottom: var(--bui-space-13); + } + .xs\:bui-mb-14 { + margin-bottom: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-mb { + margin-bottom: var(--mb-sm); + } + .sm\:bui-mb-0\.5 { + margin-bottom: var(--bui-space-0_5); + } + .sm\:bui-mb-1 { + margin-bottom: var(--bui-space-1); + } + .sm\:bui-mb-1\.5 { + margin-bottom: var(--bui-space-1_5); + } + .sm\:bui-mb-2 { + margin-bottom: var(--bui-space-2); + } + .sm\:bui-mb-3 { + margin-bottom: var(--bui-space-3); + } + .sm\:bui-mb-4 { + margin-bottom: var(--bui-space-4); + } + .sm\:bui-mb-5 { + margin-bottom: var(--bui-space-5); + } + .sm\:bui-mb-6 { + margin-bottom: var(--bui-space-6); + } + .sm\:bui-mb-7 { + margin-bottom: var(--bui-space-7); + } + .sm\:bui-mb-8 { + margin-bottom: var(--bui-space-8); + } + .sm\:bui-mb-9 { + margin-bottom: var(--bui-space-9); + } + .sm\:bui-mb-10 { + margin-bottom: var(--bui-space-10); + } + .sm\:bui-mb-11 { + margin-bottom: var(--bui-space-11); + } + .sm\:bui-mb-12 { + margin-bottom: var(--bui-space-12); + } + .sm\:bui-mb-13 { + margin-bottom: var(--bui-space-13); + } + .sm\:bui-mb-14 { + margin-bottom: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-mb { + margin-bottom: var(--mb-md); + } + .md\:bui-mb-0\.5 { + margin-bottom: var(--bui-space-0_5); + } + .md\:bui-mb-1 { + margin-bottom: var(--bui-space-1); + } + .md\:bui-mb-1\.5 { + margin-bottom: var(--bui-space-1_5); + } + .md\:bui-mb-2 { + margin-bottom: var(--bui-space-2); + } + .md\:bui-mb-3 { + margin-bottom: var(--bui-space-3); + } + .md\:bui-mb-4 { + margin-bottom: var(--bui-space-4); + } + .md\:bui-mb-5 { + margin-bottom: var(--bui-space-5); + } + .md\:bui-mb-6 { + margin-bottom: var(--bui-space-6); + } + .md\:bui-mb-7 { + margin-bottom: var(--bui-space-7); + } + .md\:bui-mb-8 { + margin-bottom: var(--bui-space-8); + } + .md\:bui-mb-9 { + margin-bottom: var(--bui-space-9); + } + .md\:bui-mb-10 { + margin-bottom: var(--bui-space-10); + } + .md\:bui-mb-11 { + margin-bottom: var(--bui-space-11); + } + .md\:bui-mb-12 { + margin-bottom: var(--bui-space-12); + } + .md\:bui-mb-13 { + margin-bottom: var(--bui-space-13); + } + .md\:bui-mb-14 { + margin-bottom: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-mb { + margin-bottom: var(--mb-lg); + } + .lg\:bui-mb-0\.5 { + margin-bottom: var(--bui-space-0_5); + } + .lg\:bui-mb-1 { + margin-bottom: var(--bui-space-1); + } + .lg\:bui-mb-1\.5 { + margin-bottom: var(--bui-space-1_5); + } + .lg\:bui-mb-2 { + margin-bottom: var(--bui-space-2); + } + .lg\:bui-mb-3 { + margin-bottom: var(--bui-space-3); + } + .lg\:bui-mb-4 { + margin-bottom: var(--bui-space-4); + } + .lg\:bui-mb-5 { + margin-bottom: var(--bui-space-5); + } + .lg\:bui-mb-6 { + margin-bottom: var(--bui-space-6); + } + .lg\:bui-mb-7 { + margin-bottom: var(--bui-space-7); + } + .lg\:bui-mb-8 { + margin-bottom: var(--bui-space-8); + } + .lg\:bui-mb-9 { + margin-bottom: var(--bui-space-9); + } + .lg\:bui-mb-10 { + margin-bottom: var(--bui-space-10); + } + .lg\:bui-mb-11 { + margin-bottom: var(--bui-space-11); + } + .lg\:bui-mb-12 { + margin-bottom: var(--bui-space-12); + } + .lg\:bui-mb-13 { + margin-bottom: var(--bui-space-13); + } + .lg\:bui-mb-14 { + margin-bottom: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-mb { + margin-bottom: var(--mb-xl); + } + .xl\:bui-mb-0\.5 { + margin-bottom: var(--bui-space-0_5); + } + .xl\:bui-mb-1 { + margin-bottom: var(--bui-space-1); + } + .xl\:bui-mb-1\.5 { + margin-bottom: var(--bui-space-1_5); + } + .xl\:bui-mb-2 { + margin-bottom: var(--bui-space-2); + } + .xl\:bui-mb-3 { + margin-bottom: var(--bui-space-3); + } + .xl\:bui-mb-4 { + margin-bottom: var(--bui-space-4); + } + .xl\:bui-mb-5 { + margin-bottom: var(--bui-space-5); + } + .xl\:bui-mb-6 { + margin-bottom: var(--bui-space-6); + } + .xl\:bui-mb-7 { + margin-bottom: var(--bui-space-7); + } + .xl\:bui-mb-8 { + margin-bottom: var(--bui-space-8); + } + .xl\:bui-mb-9 { + margin-bottom: var(--bui-space-9); + } + .xl\:bui-mb-10 { + margin-bottom: var(--bui-space-10); + } + .xl\:bui-mb-11 { + margin-bottom: var(--bui-space-11); + } + .xl\:bui-mb-12 { + margin-bottom: var(--bui-space-12); + } + .xl\:bui-mb-13 { + margin-bottom: var(--bui-space-13); + } + .xl\:bui-mb-14 { + margin-bottom: var(--bui-space-14); + } + } + .bui-my { + margin-top: var(--my); + margin-bottom: var(--my); + } + .bui-my-0\.5 { + margin-top: var(--bui-space-0_5); + margin-bottom: var(--bui-space-0_5); + } + .bui-my-1 { + margin-top: var(--bui-space-1); + margin-bottom: var(--bui-space-1); + } + .bui-my-1\.5 { + margin-top: var(--bui-space-1_5); + margin-bottom: var(--bui-space-1_5); + } + .bui-my-2 { + margin-top: var(--bui-space-2); + margin-bottom: var(--bui-space-2); + } + .bui-my-3 { + margin-top: var(--bui-space-3); + margin-bottom: var(--bui-space-3); + } + .bui-my-4 { + margin-top: var(--bui-space-4); + margin-bottom: var(--bui-space-4); + } + .bui-my-5 { + margin-top: var(--bui-space-5); + margin-bottom: var(--bui-space-5); + } + .bui-my-6 { + margin-top: var(--bui-space-6); + margin-bottom: var(--bui-space-6); + } + .bui-my-7 { + margin-top: var(--bui-space-7); + margin-bottom: var(--bui-space-7); + } + .bui-my-8 { + margin-top: var(--bui-space-8); + margin-bottom: var(--bui-space-8); + } + .bui-my-9 { + margin-top: var(--bui-space-9); + margin-bottom: var(--bui-space-9); + } + .bui-my-10 { + margin-top: var(--bui-space-10); + margin-bottom: var(--bui-space-10); + } + .bui-my-11 { + margin-top: var(--bui-space-11); + margin-bottom: var(--bui-space-11); + } + .bui-my-12 { + margin-top: var(--bui-space-12); + margin-bottom: var(--bui-space-12); + } + .bui-my-13 { + margin-top: var(--bui-space-13); + margin-bottom: var(--bui-space-13); + } + .bui-my-14 { + margin-top: var(--bui-space-14); + margin-bottom: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-my { + margin-top: var(--my-xs); + margin-bottom: var(--my-xs); + } + .xs\:bui-my-0\.5 { + margin-top: var(--bui-space-0_5); + margin-bottom: var(--bui-space-0_5); + } + .xs\:bui-my-1 { + margin-top: var(--bui-space-1); + margin-bottom: var(--bui-space-1); + } + .xs\:bui-my-1\.5 { + margin-top: var(--bui-space-1_5); + margin-bottom: var(--bui-space-1_5); + } + .xs\:bui-my-2 { + margin-top: var(--bui-space-2); + margin-bottom: var(--bui-space-2); + } + .xs\:bui-my-3 { + margin-top: var(--bui-space-3); + margin-bottom: var(--bui-space-3); + } + .xs\:bui-my-4 { + margin-top: var(--bui-space-4); + margin-bottom: var(--bui-space-4); + } + .xs\:bui-my-5 { + margin-top: var(--bui-space-5); + margin-bottom: var(--bui-space-5); + } + .xs\:bui-my-6 { + margin-top: var(--bui-space-6); + margin-bottom: var(--bui-space-6); + } + .xs\:bui-my-7 { + margin-top: var(--bui-space-7); + margin-bottom: var(--bui-space-7); + } + .xs\:bui-my-8 { + margin-top: var(--bui-space-8); + margin-bottom: var(--bui-space-8); + } + .xs\:bui-my-9 { + margin-top: var(--bui-space-9); + margin-bottom: var(--bui-space-9); + } + .xs\:bui-my-10 { + margin-top: var(--bui-space-10); + margin-bottom: var(--bui-space-10); + } + .xs\:bui-my-11 { + margin-top: var(--bui-space-11); + margin-bottom: var(--bui-space-11); + } + .xs\:bui-my-12 { + margin-top: var(--bui-space-12); + margin-bottom: var(--bui-space-12); + } + .xs\:bui-my-13 { + margin-top: var(--bui-space-13); + margin-bottom: var(--bui-space-13); + } + .xs\:bui-my-14 { + margin-top: var(--bui-space-14); + margin-bottom: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-my { + margin-top: var(--my-sm); + margin-bottom: var(--my-sm); + } + .sm\:bui-my-0\.5 { + margin-top: var(--bui-space-0_5); + margin-bottom: var(--bui-space-0_5); + } + .sm\:bui-my-1 { + margin-top: var(--bui-space-1); + margin-bottom: var(--bui-space-1); + } + .sm\:bui-my-1\.5 { + margin-top: var(--bui-space-1_5); + margin-bottom: var(--bui-space-1_5); + } + .sm\:bui-my-2 { + margin-top: var(--bui-space-2); + margin-bottom: var(--bui-space-2); + } + .sm\:bui-my-3 { + margin-top: var(--bui-space-3); + margin-bottom: var(--bui-space-3); + } + .sm\:bui-my-4 { + margin-top: var(--bui-space-4); + margin-bottom: var(--bui-space-4); + } + .sm\:bui-my-5 { + margin-top: var(--bui-space-5); + margin-bottom: var(--bui-space-5); + } + .sm\:bui-my-6 { + margin-top: var(--bui-space-6); + margin-bottom: var(--bui-space-6); + } + .sm\:bui-my-7 { + margin-top: var(--bui-space-7); + margin-bottom: var(--bui-space-7); + } + .sm\:bui-my-8 { + margin-top: var(--bui-space-8); + margin-bottom: var(--bui-space-8); + } + .sm\:bui-my-9 { + margin-top: var(--bui-space-9); + margin-bottom: var(--bui-space-9); + } + .sm\:bui-my-10 { + margin-top: var(--bui-space-10); + margin-bottom: var(--bui-space-10); + } + .sm\:bui-my-11 { + margin-top: var(--bui-space-11); + margin-bottom: var(--bui-space-11); + } + .sm\:bui-my-12 { + margin-top: var(--bui-space-12); + margin-bottom: var(--bui-space-12); + } + .sm\:bui-my-13 { + margin-top: var(--bui-space-13); + margin-bottom: var(--bui-space-13); + } + .sm\:bui-my-14 { + margin-top: var(--bui-space-14); + margin-bottom: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-my { + margin-top: var(--my-md); + margin-bottom: var(--my-md); + } + .md\:bui-my-0\.5 { + margin-top: var(--bui-space-0_5); + margin-bottom: var(--bui-space-0_5); + } + .md\:bui-my-1 { + margin-top: var(--bui-space-1); + margin-bottom: var(--bui-space-1); + } + .md\:bui-my-1\.5 { + margin-top: var(--bui-space-1_5); + margin-bottom: var(--bui-space-1_5); + } + .md\:bui-my-2 { + margin-top: var(--bui-space-2); + margin-bottom: var(--bui-space-2); + } + .md\:bui-my-3 { + margin-top: var(--bui-space-3); + margin-bottom: var(--bui-space-3); + } + .md\:bui-my-4 { + margin-top: var(--bui-space-4); + margin-bottom: var(--bui-space-4); + } + .md\:bui-my-5 { + margin-top: var(--bui-space-5); + margin-bottom: var(--bui-space-5); + } + .md\:bui-my-6 { + margin-top: var(--bui-space-6); + margin-bottom: var(--bui-space-6); + } + .md\:bui-my-7 { + margin-top: var(--bui-space-7); + margin-bottom: var(--bui-space-7); + } + .md\:bui-my-8 { + margin-top: var(--bui-space-8); + margin-bottom: var(--bui-space-8); + } + .md\:bui-my-9 { + margin-top: var(--bui-space-9); + margin-bottom: var(--bui-space-9); + } + .md\:bui-my-10 { + margin-top: var(--bui-space-10); + margin-bottom: var(--bui-space-10); + } + .md\:bui-my-11 { + margin-top: var(--bui-space-11); + margin-bottom: var(--bui-space-11); + } + .md\:bui-my-12 { + margin-top: var(--bui-space-12); + margin-bottom: var(--bui-space-12); + } + .md\:bui-my-13 { + margin-top: var(--bui-space-13); + margin-bottom: var(--bui-space-13); + } + .md\:bui-my-14 { + margin-top: var(--bui-space-14); + margin-bottom: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-my { + margin-top: var(--my-lg); + margin-bottom: var(--my-lg); + } + .lg\:bui-my-0\.5 { + margin-top: var(--bui-space-0_5); + margin-bottom: var(--bui-space-0_5); + } + .lg\:bui-my-1 { + margin-top: var(--bui-space-1); + margin-bottom: var(--bui-space-1); + } + .lg\:bui-my-1\.5 { + margin-top: var(--bui-space-1_5); + margin-bottom: var(--bui-space-1_5); + } + .lg\:bui-my-2 { + margin-top: var(--bui-space-2); + margin-bottom: var(--bui-space-2); + } + .lg\:bui-my-3 { + margin-top: var(--bui-space-3); + margin-bottom: var(--bui-space-3); + } + .lg\:bui-my-4 { + margin-top: var(--bui-space-4); + margin-bottom: var(--bui-space-4); + } + .lg\:bui-my-5 { + margin-top: var(--bui-space-5); + margin-bottom: var(--bui-space-5); + } + .lg\:bui-my-6 { + margin-top: var(--bui-space-6); + margin-bottom: var(--bui-space-6); + } + .lg\:bui-my-7 { + margin-top: var(--bui-space-7); + margin-bottom: var(--bui-space-7); + } + .lg\:bui-my-8 { + margin-top: var(--bui-space-8); + margin-bottom: var(--bui-space-8); + } + .lg\:bui-my-9 { + margin-top: var(--bui-space-9); + margin-bottom: var(--bui-space-9); + } + .lg\:bui-my-10 { + margin-top: var(--bui-space-10); + margin-bottom: var(--bui-space-10); + } + .lg\:bui-my-11 { + margin-top: var(--bui-space-11); + margin-bottom: var(--bui-space-11); + } + .lg\:bui-my-12 { + margin-top: var(--bui-space-12); + margin-bottom: var(--bui-space-12); + } + .lg\:bui-my-13 { + margin-top: var(--bui-space-13); + margin-bottom: var(--bui-space-13); + } + .lg\:bui-my-14 { + margin-top: var(--bui-space-14); + margin-bottom: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-my { + margin-top: var(--my-xl); + margin-bottom: var(--my-xl); + } + .xl\:bui-my-0\.5 { + margin-top: var(--bui-space-0_5); + margin-bottom: var(--bui-space-0_5); + } + .xl\:bui-my-1 { + margin-top: var(--bui-space-1); + margin-bottom: var(--bui-space-1); + } + .xl\:bui-my-1\.5 { + margin-top: var(--bui-space-1_5); + margin-bottom: var(--bui-space-1_5); + } + .xl\:bui-my-2 { + margin-top: var(--bui-space-2); + margin-bottom: var(--bui-space-2); + } + .xl\:bui-my-3 { + margin-top: var(--bui-space-3); + margin-bottom: var(--bui-space-3); + } + .xl\:bui-my-4 { + margin-top: var(--bui-space-4); + margin-bottom: var(--bui-space-4); + } + .xl\:bui-my-5 { + margin-top: var(--bui-space-5); + margin-bottom: var(--bui-space-5); + } + .xl\:bui-my-6 { + margin-top: var(--bui-space-6); + margin-bottom: var(--bui-space-6); + } + .xl\:bui-my-7 { + margin-top: var(--bui-space-7); + margin-bottom: var(--bui-space-7); + } + .xl\:bui-my-8 { + margin-top: var(--bui-space-8); + margin-bottom: var(--bui-space-8); + } + .xl\:bui-my-9 { + margin-top: var(--bui-space-9); + margin-bottom: var(--bui-space-9); + } + .xl\:bui-my-10 { + margin-top: var(--bui-space-10); + margin-bottom: var(--bui-space-10); + } + .xl\:bui-my-11 { + margin-top: var(--bui-space-11); + margin-bottom: var(--bui-space-11); + } + .xl\:bui-my-12 { + margin-top: var(--bui-space-12); + margin-bottom: var(--bui-space-12); + } + .xl\:bui-my-13 { + margin-top: var(--bui-space-13); + margin-bottom: var(--bui-space-13); + } + .xl\:bui-my-14 { + margin-top: var(--bui-space-14); + margin-bottom: var(--bui-space-14); + } + } + .bui-mx { + margin-left: var(--mx); + margin-right: var(--mx); + } + .bui-mx-0\.5 { + margin-left: var(--bui-space-0_5); + margin-right: var(--bui-space-0_5); + } + .bui-mx-1 { + margin-left: var(--bui-space-1); + margin-right: var(--bui-space-1); + } + .bui-mx-1\.5 { + margin-left: var(--bui-space-1_5); + margin-right: var(--bui-space-1_5); + } + .bui-mx-2 { + margin-left: var(--bui-space-2); + margin-right: var(--bui-space-2); + } + .bui-mx-3 { + margin-left: var(--bui-space-3); + margin-right: var(--bui-space-3); + } + .bui-mx-4 { + margin-left: var(--bui-space-4); + margin-right: var(--bui-space-4); + } + .bui-mx-5 { + margin-left: var(--bui-space-5); + margin-right: var(--bui-space-5); + } + .bui-mx-6 { + margin-left: var(--bui-space-6); + margin-right: var(--bui-space-6); + } + .bui-mx-7 { + margin-left: var(--bui-space-7); + margin-right: var(--bui-space-7); + } + .bui-mx-8 { + margin-left: var(--bui-space-8); + margin-right: var(--bui-space-8); + } + .bui-mx-9 { + margin-left: var(--bui-space-9); + margin-right: var(--bui-space-9); + } + .bui-mx-10 { + margin-left: var(--bui-space-10); + margin-right: var(--bui-space-10); + } + .bui-mx-11 { + margin-left: var(--bui-space-11); + margin-right: var(--bui-space-11); + } + .bui-mx-12 { + margin-left: var(--bui-space-12); + margin-right: var(--bui-space-12); + } + .bui-mx-13 { + margin-left: var(--bui-space-13); + margin-right: var(--bui-space-13); + } + .bui-mx-14 { + margin-left: var(--bui-space-14); + margin-right: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-mx { + margin-left: var(--mx-xs); + margin-right: var(--mx-xs); + } + .xs\:bui-mx-0\.5 { + margin-left: var(--bui-space-0_5); + margin-right: var(--bui-space-0_5); + } + .xs\:bui-mx-1 { + margin-left: var(--bui-space-1); + margin-right: var(--bui-space-1); + } + .xs\:bui-mx-1\.5 { + margin-left: var(--bui-space-1_5); + margin-right: var(--bui-space-1_5); + } + .xs\:bui-mx-2 { + margin-left: var(--bui-space-2); + margin-right: var(--bui-space-2); + } + .xs\:bui-mx-3 { + margin-left: var(--bui-space-3); + margin-right: var(--bui-space-3); + } + .xs\:bui-mx-4 { + margin-left: var(--bui-space-4); + margin-right: var(--bui-space-4); + } + .xs\:bui-mx-5 { + margin-left: var(--bui-space-5); + margin-right: var(--bui-space-5); + } + .xs\:bui-mx-6 { + margin-left: var(--bui-space-6); + margin-right: var(--bui-space-6); + } + .xs\:bui-mx-7 { + margin-left: var(--bui-space-7); + margin-right: var(--bui-space-7); + } + .xs\:bui-mx-8 { + margin-left: var(--bui-space-8); + margin-right: var(--bui-space-8); + } + .xs\:bui-mx-9 { + margin-left: var(--bui-space-9); + margin-right: var(--bui-space-9); + } + .xs\:bui-mx-10 { + margin-left: var(--bui-space-10); + margin-right: var(--bui-space-10); + } + .xs\:bui-mx-11 { + margin-left: var(--bui-space-11); + margin-right: var(--bui-space-11); + } + .xs\:bui-mx-12 { + margin-left: var(--bui-space-12); + margin-right: var(--bui-space-12); + } + .xs\:bui-mx-13 { + margin-left: var(--bui-space-13); + margin-right: var(--bui-space-13); + } + .xs\:bui-mx-14 { + margin-left: var(--bui-space-14); + margin-right: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-mx { + margin-left: var(--mx-sm); + margin-right: var(--mx-sm); + } + .sm\:bui-mx-0\.5 { + margin-left: var(--bui-space-0_5); + margin-right: var(--bui-space-0_5); + } + .sm\:bui-mx-1 { + margin-left: var(--bui-space-1); + margin-right: var(--bui-space-1); + } + .sm\:bui-mx-1\.5 { + margin-left: var(--bui-space-1_5); + margin-right: var(--bui-space-1_5); + } + .sm\:bui-mx-2 { + margin-left: var(--bui-space-2); + margin-right: var(--bui-space-2); + } + .sm\:bui-mx-3 { + margin-left: var(--bui-space-3); + margin-right: var(--bui-space-3); + } + .sm\:bui-mx-4 { + margin-left: var(--bui-space-4); + margin-right: var(--bui-space-4); + } + .sm\:bui-mx-5 { + margin-left: var(--bui-space-5); + margin-right: var(--bui-space-5); + } + .sm\:bui-mx-6 { + margin-left: var(--bui-space-6); + margin-right: var(--bui-space-6); + } + .sm\:bui-mx-7 { + margin-left: var(--bui-space-7); + margin-right: var(--bui-space-7); + } + .sm\:bui-mx-8 { + margin-left: var(--bui-space-8); + margin-right: var(--bui-space-8); + } + .sm\:bui-mx-9 { + margin-left: var(--bui-space-9); + margin-right: var(--bui-space-9); + } + .sm\:bui-mx-10 { + margin-left: var(--bui-space-10); + margin-right: var(--bui-space-10); + } + .sm\:bui-mx-11 { + margin-left: var(--bui-space-11); + margin-right: var(--bui-space-11); + } + .sm\:bui-mx-12 { + margin-left: var(--bui-space-12); + margin-right: var(--bui-space-12); + } + .sm\:bui-mx-13 { + margin-left: var(--bui-space-13); + margin-right: var(--bui-space-13); + } + .sm\:bui-mx-14 { + margin-left: var(--bui-space-14); + margin-right: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-mx { + margin-left: var(--mx-md); + margin-right: var(--mx-md); + } + .md\:bui-mx-0\.5 { + margin-left: var(--bui-space-0_5); + margin-right: var(--bui-space-0_5); + } + .md\:bui-mx-1 { + margin-left: var(--bui-space-1); + margin-right: var(--bui-space-1); + } + .md\:bui-mx-1\.5 { + margin-left: var(--bui-space-1_5); + margin-right: var(--bui-space-1_5); + } + .md\:bui-mx-2 { + margin-left: var(--bui-space-2); + margin-right: var(--bui-space-2); + } + .md\:bui-mx-3 { + margin-left: var(--bui-space-3); + margin-right: var(--bui-space-3); + } + .md\:bui-mx-4 { + margin-left: var(--bui-space-4); + margin-right: var(--bui-space-4); + } + .md\:bui-mx-5 { + margin-left: var(--bui-space-5); + margin-right: var(--bui-space-5); + } + .md\:bui-mx-6 { + margin-left: var(--bui-space-6); + margin-right: var(--bui-space-6); + } + .md\:bui-mx-7 { + margin-left: var(--bui-space-7); + margin-right: var(--bui-space-7); + } + .md\:bui-mx-8 { + margin-left: var(--bui-space-8); + margin-right: var(--bui-space-8); + } + .md\:bui-mx-9 { + margin-left: var(--bui-space-9); + margin-right: var(--bui-space-9); + } + .md\:bui-mx-10 { + margin-left: var(--bui-space-10); + margin-right: var(--bui-space-10); + } + .md\:bui-mx-11 { + margin-left: var(--bui-space-11); + margin-right: var(--bui-space-11); + } + .md\:bui-mx-12 { + margin-left: var(--bui-space-12); + margin-right: var(--bui-space-12); + } + .md\:bui-mx-13 { + margin-left: var(--bui-space-13); + margin-right: var(--bui-space-13); + } + .md\:bui-mx-14 { + margin-left: var(--bui-space-14); + margin-right: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-mx { + margin-left: var(--mx-lg); + margin-right: var(--mx-lg); + } + .lg\:bui-mx-0\.5 { + margin-left: var(--bui-space-0_5); + margin-right: var(--bui-space-0_5); + } + .lg\:bui-mx-1 { + margin-left: var(--bui-space-1); + margin-right: var(--bui-space-1); + } + .lg\:bui-mx-1\.5 { + margin-left: var(--bui-space-1_5); + margin-right: var(--bui-space-1_5); + } + .lg\:bui-mx-2 { + margin-left: var(--bui-space-2); + margin-right: var(--bui-space-2); + } + .lg\:bui-mx-3 { + margin-left: var(--bui-space-3); + margin-right: var(--bui-space-3); + } + .lg\:bui-mx-4 { + margin-left: var(--bui-space-4); + margin-right: var(--bui-space-4); + } + .lg\:bui-mx-5 { + margin-left: var(--bui-space-5); + margin-right: var(--bui-space-5); + } + .lg\:bui-mx-6 { + margin-left: var(--bui-space-6); + margin-right: var(--bui-space-6); + } + .lg\:bui-mx-7 { + margin-left: var(--bui-space-7); + margin-right: var(--bui-space-7); + } + .lg\:bui-mx-8 { + margin-left: var(--bui-space-8); + margin-right: var(--bui-space-8); + } + .lg\:bui-mx-9 { + margin-left: var(--bui-space-9); + margin-right: var(--bui-space-9); + } + .lg\:bui-mx-10 { + margin-left: var(--bui-space-10); + margin-right: var(--bui-space-10); + } + .lg\:bui-mx-11 { + margin-left: var(--bui-space-11); + margin-right: var(--bui-space-11); + } + .lg\:bui-mx-12 { + margin-left: var(--bui-space-12); + margin-right: var(--bui-space-12); + } + .lg\:bui-mx-13 { + margin-left: var(--bui-space-13); + margin-right: var(--bui-space-13); + } + .lg\:bui-mx-14 { + margin-left: var(--bui-space-14); + margin-right: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-mx { + margin-left: var(--mx-xl); + margin-right: var(--mx-xl); + } + .xl\:bui-mx-0\.5 { + margin-left: var(--bui-space-0_5); + margin-right: var(--bui-space-0_5); + } + .xl\:bui-mx-1 { + margin-left: var(--bui-space-1); + margin-right: var(--bui-space-1); + } + .xl\:bui-mx-1\.5 { + margin-left: var(--bui-space-1_5); + margin-right: var(--bui-space-1_5); + } + .xl\:bui-mx-2 { + margin-left: var(--bui-space-2); + margin-right: var(--bui-space-2); + } + .xl\:bui-mx-3 { + margin-left: var(--bui-space-3); + margin-right: var(--bui-space-3); + } + .xl\:bui-mx-4 { + margin-left: var(--bui-space-4); + margin-right: var(--bui-space-4); + } + .xl\:bui-mx-5 { + margin-left: var(--bui-space-5); + margin-right: var(--bui-space-5); + } + .xl\:bui-mx-6 { + margin-left: var(--bui-space-6); + margin-right: var(--bui-space-6); + } + .xl\:bui-mx-7 { + margin-left: var(--bui-space-7); + margin-right: var(--bui-space-7); + } + .xl\:bui-mx-8 { + margin-left: var(--bui-space-8); + margin-right: var(--bui-space-8); + } + .xl\:bui-mx-9 { + margin-left: var(--bui-space-9); + margin-right: var(--bui-space-9); + } + .xl\:bui-mx-10 { + margin-left: var(--bui-space-10); + margin-right: var(--bui-space-10); + } + .xl\:bui-mx-11 { + margin-left: var(--bui-space-11); + margin-right: var(--bui-space-11); + } + .xl\:bui-mx-12 { + margin-left: var(--bui-space-12); + margin-right: var(--bui-space-12); + } + .xl\:bui-mx-13 { + margin-left: var(--bui-space-13); + margin-right: var(--bui-space-13); + } + .xl\:bui-mx-14 { + margin-left: var(--bui-space-14); + margin-right: var(--bui-space-14); + } + } + .bui-display-none { + display: none; + } + .bui-display-inline { + display: inline; + } + .bui-display-inline-block { + display: inline-block; + } + .bui-display-block { + display: block; + } + @media (width>=640px) { + .xs\:bui-display-none { + display: none; + } + .xs\:bui-display-inline { + display: inline; + } + .xs\:bui-display-inline-block { + display: inline-block; + } + .xs\:bui-display-block { + display: block; + } + } + @media (width>=768px) { + .sm\:bui-display-none { + display: none; + } + .sm\:bui-display-inline { + display: inline; + } + .sm\:bui-display-inline-block { + display: inline-block; + } + .sm\:bui-display-block { + display: block; + } + } + @media (width>=1024px) { + .md\:bui-display-none { + display: none; + } + .md\:bui-display-inline { + display: inline; + } + .md\:bui-display-inline-block { + display: inline-block; + } + .md\:bui-display-block { + display: block; + } + } + @media (width>=1280px) { + .lg\:bui-display-none { + display: none; + } + .lg\:bui-display-inline { + display: inline; + } + .lg\:bui-display-inline-block { + display: inline-block; + } + .lg\:bui-display-block { + display: block; + } + } + @media (width>=1536px) { + .xl\:bui-display-none { + display: none; + } + .xl\:bui-display-inline { + display: inline; + } + .xl\:bui-display-inline-block { + display: inline-block; + } + .xl\:bui-display-block { + display: block; + } + } + .bui-w { + width: var(--width); + } + .bui-min-w { + min-width: var(--min-width); + } + .bui-max-w { + max-width: var(--max-width); + } + @media (width>=640px) { + .xs\:bui-w { + width: var(--width); + } + .xs\:bui-min-w { + min-width: var(--min-width); + } + .xs\:bui-max-w { + max-width: var(--max-width); + } + } + @media (width>=768px) { + .sm\:bui-w { + width: var(--width); + } + .sm\:bui-min-w { + min-width: var(--min-width); + } + .sm\:bui-max-w { + max-width: var(--max-width); + } + } + @media (width>=1024px) { + .md\:bui-w { + width: var(--width); + } + .md\:bui-min-w { + min-width: var(--min-width); + } + .md\:bui-max-w { + max-width: var(--max-width); + } + } + @media (width>=1280px) { + .lg\:bui-w { + width: var(--width); + } + .lg\:bui-min-w { + min-width: var(--min-width); + } + .lg\:bui-max-w { + max-width: var(--max-width); + } + } + @media (width>=1536px) { + .xl\:bui-w { + width: var(--width); + } + .xl\:bui-min-w { + min-width: var(--min-width); + } + .xl\:bui-max-w { + max-width: var(--max-width); + } + } + .bui-h { + height: var(--height); + } + .bui-min-h { + min-height: var(--min-height); + } + .bui-max-h { + max-height: var(--max-height); + } + @media (width>=640px) { + .xs\:bui-h { + height: var(--height); + } + .xs\:bui-min-h { + min-height: var(--min-height); + } + .xs\:bui-max-h { + max-height: var(--max-height); + } + } + @media (width>=768px) { + .sm\:bui-h { + height: var(--height); + } + .sm\:bui-min-h { + min-height: var(--min-height); + } + .sm\:bui-max-h { + max-height: var(--max-height); + } + } + @media (width>=1024px) { + .md\:bui-h { + height: var(--height); + } + .md\:bui-min-h { + min-height: var(--min-height); + } + .md\:bui-max-h { + max-height: var(--max-height); + } + } + @media (width>=1280px) { + .lg\:bui-h { + height: var(--height); + } + .lg\:bui-min-h { + min-height: var(--min-height); + } + .lg\:bui-max-h { + max-height: var(--max-height); + } + } + @media (width>=1536px) { + .xl\:bui-h { + height: var(--height); + } + .xl\:bui-min-h { + min-height: var(--min-height); + } + .xl\:bui-max-h { + max-height: var(--max-height); + } + } + .bui-position-absolute { + position: absolute; + } + .bui-position-fixed { + position: fixed; + } + .bui-position-sticky { + position: sticky; + } + .bui-position-relative { + position: relative; + } + .bui-position-static { + position: static; + } + @media (width>=640px) { + .xs\:bui-position-absolute { + position: absolute; + } + .xs\:bui-position-fixed { + position: fixed; + } + .xs\:bui-position-sticky { + position: sticky; + } + .xs\:bui-position-relative { + position: relative; + } + .xs\:bui-position-static { + position: static; + } + } + @media (width>=768px) { + .sm\:bui-position-absolute { + position: absolute; + } + .sm\:bui-position-fixed { + position: fixed; + } + .sm\:bui-position-sticky { + position: sticky; + } + .sm\:bui-position-relative { + position: relative; + } + .sm\:bui-position-static { + position: static; + } + } + @media (width>=1024px) { + .md\:bui-position-absolute { + position: absolute; + } + .md\:bui-position-fixed { + position: fixed; + } + .md\:bui-position-sticky { + position: sticky; + } + .md\:bui-position-relative { + position: relative; + } + .md\:bui-position-static { + position: static; + } + } + @media (width>=1280px) { + .lg\:bui-position-absolute { + position: absolute; + } + .lg\:bui-position-fixed { + position: fixed; + } + .lg\:bui-position-sticky { + position: sticky; + } + .lg\:bui-position-relative { + position: relative; + } + .lg\:bui-position-static { + position: static; + } + } + @media (width>=1536px) { + .xl\:bui-position-absolute { + position: absolute; + } + .xl\:bui-position-fixed { + position: fixed; + } + .xl\:bui-position-sticky { + position: sticky; + } + .xl\:bui-position-relative { + position: relative; + } + .xl\:bui-position-static { + position: static; + } + } + .bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + .bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + .bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + .bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + .bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + .bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + .bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + .bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .bui-col-span-1 { + grid-column: span 1 / span 1; + } + .bui-col-span-2 { + grid-column: span 2 / span 2; + } + .bui-col-span-3 { + grid-column: span 3 / span 3; + } + .bui-col-span-4 { + grid-column: span 4 / span 4; + } + .bui-col-span-5 { + grid-column: span 5 / span 5; + } + .bui-col-span-6 { + grid-column: span 6 / span 6; + } + .bui-col-span-7 { + grid-column: span 7 / span 7; + } + .bui-col-span-8 { + grid-column: span 8 / span 8; + } + .bui-col-span-9 { + grid-column: span 9 / span 9; + } + .bui-col-span-10 { + grid-column: span 10 / span 10; + } + .bui-col-span-11 { + grid-column: span 11 / span 11; + } + .bui-col-span-12 { + grid-column: span 12 / span 12; + } + .bui-col-span-auto { + grid-column: span auto/span auto; + } + .bui-col-start-1 { + grid-column-start: 1; + } + .bui-col-start-2 { + grid-column-start: 2; + } + .bui-col-start-3 { + grid-column-start: 3; + } + .bui-col-start-4 { + grid-column-start: 4; + } + .bui-col-start-5 { + grid-column-start: 5; + } + .bui-col-start-6 { + grid-column-start: 6; + } + .bui-col-start-7 { + grid-column-start: 7; + } + .bui-col-start-8 { + grid-column-start: 8; + } + .bui-col-start-9 { + grid-column-start: 9; + } + .bui-col-start-10 { + grid-column-start: 10; + } + .bui-col-start-11 { + grid-column-start: 11; + } + .bui-col-start-12 { + grid-column-start: 12; + } + .bui-col-start-13 { + grid-column-start: 13; + } + .bui-col-start-auto { + grid-column-start: auto; + } + .bui-col-end-1 { + grid-column-end: 1; + } + .bui-col-end-2 { + grid-column-end: 2; + } + .bui-col-end-3 { + grid-column-end: 3; + } + .bui-col-end-4 { + grid-column-end: 4; + } + .bui-col-end-5 { + grid-column-end: 5; + } + .bui-col-end-6 { + grid-column-end: 6; + } + .bui-col-end-7 { + grid-column-end: 7; + } + .bui-col-end-8 { + grid-column-end: 8; + } + .bui-col-end-9 { + grid-column-end: 9; + } + .bui-col-end-10 { + grid-column-end: 10; + } + .bui-col-end-11 { + grid-column-end: 11; + } + .bui-col-end-12 { + grid-column-end: 12; + } + .bui-col-end-13 { + grid-column-end: 13; + } + .bui-col-end-auto { + grid-column-end: auto; + } + .bui-row-span-1 { + grid-row: span 1 / span 1; + } + .bui-row-span-2 { + grid-row: span 2 / span 2; + } + .bui-row-span-3 { + grid-row: span 3 / span 3; + } + .bui-row-span-4 { + grid-row: span 4 / span 4; + } + .bui-row-span-5 { + grid-row: span 5 / span 5; + } + .bui-row-span-6 { + grid-row: span 6 / span 6; + } + .bui-row-span-7 { + grid-row: span 7 / span 7; + } + .bui-row-span-8 { + grid-row: span 8 / span 8; + } + .bui-row-span-9 { + grid-row: span 9 / span 9; + } + .bui-row-span-10 { + grid-row: span 10 / span 10; + } + .bui-row-span-11 { + grid-row: span 11 / span 11; + } + .bui-row-span-12 { + grid-row: span 12 / span 12; + } + .bui-row-span-auto { + grid-row: span auto/span auto; + } + @media (width>=640px) { + .xs\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .xs\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .xs\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .xs\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .xs\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .xs\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + .xs\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + .xs\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + .xs\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + .xs\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + .xs\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + .xs\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + .xs\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .xs\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + .xs\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + .xs\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + .xs\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + .xs\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + .xs\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + .xs\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + .xs\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + .xs\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + .xs\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + .xs\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + .xs\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + .xs\:bui-col-span-auto { + grid-column: span auto/span auto; + } + .xs\:bui-col-start-1 { + grid-column-start: 1; + } + .xs\:bui-col-start-2 { + grid-column-start: 2; + } + .xs\:bui-col-start-3 { + grid-column-start: 3; + } + .xs\:bui-col-start-4 { + grid-column-start: 4; + } + .xs\:bui-col-start-5 { + grid-column-start: 5; + } + .xs\:bui-col-start-6 { + grid-column-start: 6; + } + .xs\:bui-col-start-7 { + grid-column-start: 7; + } + .xs\:bui-col-start-8 { + grid-column-start: 8; + } + .xs\:bui-col-start-9 { + grid-column-start: 9; + } + .xs\:bui-col-start-10 { + grid-column-start: 10; + } + .xs\:bui-col-start-11 { + grid-column-start: 11; + } + .xs\:bui-col-start-12 { + grid-column-start: 12; + } + .xs\:bui-col-start-13 { + grid-column-start: 13; + } + .xs\:bui-col-start-auto { + grid-column-start: auto; + } + .xs\:bui-col-end-1 { + grid-column-end: 1; + } + .xs\:bui-col-end-2 { + grid-column-end: 2; + } + .xs\:bui-col-end-3 { + grid-column-end: 3; + } + .xs\:bui-col-end-4 { + grid-column-end: 4; + } + .xs\:bui-col-end-5 { + grid-column-end: 5; + } + .xs\:bui-col-end-6 { + grid-column-end: 6; + } + .xs\:bui-col-end-7 { + grid-column-end: 7; + } + .xs\:bui-col-end-8 { + grid-column-end: 8; + } + .xs\:bui-col-end-9 { + grid-column-end: 9; + } + .xs\:bui-col-end-10 { + grid-column-end: 10; + } + .xs\:bui-col-end-11 { + grid-column-end: 11; + } + .xs\:bui-col-end-12 { + grid-column-end: 12; + } + .xs\:bui-col-end-13 { + grid-column-end: 13; + } + .xs\:bui-col-end-auto { + grid-column-end: auto; + } + .xs\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + .xs\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + .xs\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + .xs\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + .xs\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + .xs\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + .xs\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + .xs\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + .xs\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + .xs\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + .xs\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + .xs\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + .xs\:bui-row-span-auto { + grid-row: span auto/span auto; + } + } + @media (width>=768px) { + .sm\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .sm\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .sm\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .sm\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .sm\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .sm\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + .sm\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + .sm\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + .sm\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + .sm\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + .sm\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + .sm\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + .sm\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .sm\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + .sm\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + .sm\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + .sm\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + .sm\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + .sm\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + .sm\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + .sm\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + .sm\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + .sm\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + .sm\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + .sm\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + .sm\:bui-col-span-auto { + grid-column: span auto/span auto; + } + .sm\:bui-col-start-1 { + grid-column-start: 1; + } + .sm\:bui-col-start-2 { + grid-column-start: 2; + } + .sm\:bui-col-start-3 { + grid-column-start: 3; + } + .sm\:bui-col-start-4 { + grid-column-start: 4; + } + .sm\:bui-col-start-5 { + grid-column-start: 5; + } + .sm\:bui-col-start-6 { + grid-column-start: 6; + } + .sm\:bui-col-start-7 { + grid-column-start: 7; + } + .sm\:bui-col-start-8 { + grid-column-start: 8; + } + .sm\:bui-col-start-9 { + grid-column-start: 9; + } + .sm\:bui-col-start-10 { + grid-column-start: 10; + } + .sm\:bui-col-start-11 { + grid-column-start: 11; + } + .sm\:bui-col-start-12 { + grid-column-start: 12; + } + .sm\:bui-col-start-13 { + grid-column-start: 13; + } + .sm\:bui-col-start-auto { + grid-column-start: auto; + } + .sm\:bui-col-end-1 { + grid-column-end: 1; + } + .sm\:bui-col-end-2 { + grid-column-end: 2; + } + .sm\:bui-col-end-3 { + grid-column-end: 3; + } + .sm\:bui-col-end-4 { + grid-column-end: 4; + } + .sm\:bui-col-end-5 { + grid-column-end: 5; + } + .sm\:bui-col-end-6 { + grid-column-end: 6; + } + .sm\:bui-col-end-7 { + grid-column-end: 7; + } + .sm\:bui-col-end-8 { + grid-column-end: 8; + } + .sm\:bui-col-end-9 { + grid-column-end: 9; + } + .sm\:bui-col-end-10 { + grid-column-end: 10; + } + .sm\:bui-col-end-11 { + grid-column-end: 11; + } + .sm\:bui-col-end-12 { + grid-column-end: 12; + } + .sm\:bui-col-end-13 { + grid-column-end: 13; + } + .sm\:bui-col-end-auto { + grid-column-end: auto; + } + .sm\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + .sm\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + .sm\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + .sm\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + .sm\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + .sm\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + .sm\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + .sm\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + .sm\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + .sm\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + .sm\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + .sm\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + .sm\:bui-row-span-auto { + grid-row: span auto/span auto; + } + } + @media (width>=1024px) { + .md\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .md\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .md\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .md\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .md\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .md\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + .md\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + .md\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + .md\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + .md\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + .md\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + .md\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + .md\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .md\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + .md\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + .md\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + .md\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + .md\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + .md\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + .md\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + .md\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + .md\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + .md\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + .md\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + .md\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + .md\:bui-col-span-auto { + grid-column: span auto/span auto; + } + .md\:bui-col-start-1 { + grid-column-start: 1; + } + .md\:bui-col-start-2 { + grid-column-start: 2; + } + .md\:bui-col-start-3 { + grid-column-start: 3; + } + .md\:bui-col-start-4 { + grid-column-start: 4; + } + .md\:bui-col-start-5 { + grid-column-start: 5; + } + .md\:bui-col-start-6 { + grid-column-start: 6; + } + .md\:bui-col-start-7 { + grid-column-start: 7; + } + .md\:bui-col-start-8 { + grid-column-start: 8; + } + .md\:bui-col-start-9 { + grid-column-start: 9; + } + .md\:bui-col-start-10 { + grid-column-start: 10; + } + .md\:bui-col-start-11 { + grid-column-start: 11; + } + .md\:bui-col-start-12 { + grid-column-start: 12; + } + .md\:bui-col-start-13 { + grid-column-start: 13; + } + .md\:bui-col-start-auto { + grid-column-start: auto; + } + .md\:bui-col-end-1 { + grid-column-end: 1; + } + .md\:bui-col-end-2 { + grid-column-end: 2; + } + .md\:bui-col-end-3 { + grid-column-end: 3; + } + .md\:bui-col-end-4 { + grid-column-end: 4; + } + .md\:bui-col-end-5 { + grid-column-end: 5; + } + .md\:bui-col-end-6 { + grid-column-end: 6; + } + .md\:bui-col-end-7 { + grid-column-end: 7; + } + .md\:bui-col-end-8 { + grid-column-end: 8; + } + .md\:bui-col-end-9 { + grid-column-end: 9; + } + .md\:bui-col-end-10 { + grid-column-end: 10; + } + .md\:bui-col-end-11 { + grid-column-end: 11; + } + .md\:bui-col-end-12 { + grid-column-end: 12; + } + .md\:bui-col-end-13 { + grid-column-end: 13; + } + .md\:bui-col-end-auto { + grid-column-end: auto; + } + .md\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + .md\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + .md\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + .md\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + .md\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + .md\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + .md\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + .md\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + .md\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + .md\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + .md\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + .md\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + .md\:bui-row-span-auto { + grid-row: span auto/span auto; + } + } + @media (width>=1280px) { + .lg\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .lg\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .lg\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .lg\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .lg\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .lg\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + .lg\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + .lg\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + .lg\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + .lg\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + .lg\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + .lg\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + .lg\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .lg\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + .lg\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + .lg\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + .lg\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + .lg\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + .lg\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + .lg\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + .lg\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + .lg\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + .lg\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + .lg\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + .lg\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + .lg\:bui-col-span-auto { + grid-column: span auto/span auto; + } + .lg\:bui-col-start-1 { + grid-column-start: 1; + } + .lg\:bui-col-start-2 { + grid-column-start: 2; + } + .lg\:bui-col-start-3 { + grid-column-start: 3; + } + .lg\:bui-col-start-4 { + grid-column-start: 4; + } + .lg\:bui-col-start-5 { + grid-column-start: 5; + } + .lg\:bui-col-start-6 { + grid-column-start: 6; + } + .lg\:bui-col-start-7 { + grid-column-start: 7; + } + .lg\:bui-col-start-8 { + grid-column-start: 8; + } + .lg\:bui-col-start-9 { + grid-column-start: 9; + } + .lg\:bui-col-start-10 { + grid-column-start: 10; + } + .lg\:bui-col-start-11 { + grid-column-start: 11; + } + .lg\:bui-col-start-12 { + grid-column-start: 12; + } + .lg\:bui-col-start-13 { + grid-column-start: 13; + } + .lg\:bui-col-start-auto { + grid-column-start: auto; + } + .lg\:bui-col-end-1 { + grid-column-end: 1; + } + .lg\:bui-col-end-2 { + grid-column-end: 2; + } + .lg\:bui-col-end-3 { + grid-column-end: 3; + } + .lg\:bui-col-end-4 { + grid-column-end: 4; + } + .lg\:bui-col-end-5 { + grid-column-end: 5; + } + .lg\:bui-col-end-6 { + grid-column-end: 6; + } + .lg\:bui-col-end-7 { + grid-column-end: 7; + } + .lg\:bui-col-end-8 { + grid-column-end: 8; + } + .lg\:bui-col-end-9 { + grid-column-end: 9; + } + .lg\:bui-col-end-10 { + grid-column-end: 10; + } + .lg\:bui-col-end-11 { + grid-column-end: 11; + } + .lg\:bui-col-end-12 { + grid-column-end: 12; + } + .lg\:bui-col-end-13 { + grid-column-end: 13; + } + .lg\:bui-col-end-auto { + grid-column-end: auto; + } + .lg\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + .lg\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + .lg\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + .lg\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + .lg\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + .lg\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + .lg\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + .lg\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + .lg\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + .lg\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + .lg\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + .lg\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + .lg\:bui-row-span-auto { + grid-row: span auto/span auto; + } + } + @media (width>=1536px) { + .xl\:bui-columns-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + .xl\:bui-columns-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + .xl\:bui-columns-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .xl\:bui-columns-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + .xl\:bui-columns-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + .xl\:bui-columns-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + .xl\:bui-columns-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + .xl\:bui-columns-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + .xl\:bui-columns-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + .xl\:bui-columns-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + .xl\:bui-columns-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + .xl\:bui-columns-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + .xl\:bui-columns-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + .xl\:bui-col-span-1 { + grid-column: span 1 / span 1; + } + .xl\:bui-col-span-2 { + grid-column: span 2 / span 2; + } + .xl\:bui-col-span-3 { + grid-column: span 3 / span 3; + } + .xl\:bui-col-span-4 { + grid-column: span 4 / span 4; + } + .xl\:bui-col-span-5 { + grid-column: span 5 / span 5; + } + .xl\:bui-col-span-6 { + grid-column: span 6 / span 6; + } + .xl\:bui-col-span-7 { + grid-column: span 7 / span 7; + } + .xl\:bui-col-span-8 { + grid-column: span 8 / span 8; + } + .xl\:bui-col-span-9 { + grid-column: span 9 / span 9; + } + .xl\:bui-col-span-10 { + grid-column: span 10 / span 10; + } + .xl\:bui-col-span-11 { + grid-column: span 11 / span 11; + } + .xl\:bui-col-span-12 { + grid-column: span 12 / span 12; + } + .xl\:bui-col-span-auto { + grid-column: span auto/span auto; + } + .xl\:bui-col-start-1 { + grid-column-start: 1; + } + .xl\:bui-col-start-2 { + grid-column-start: 2; + } + .xl\:bui-col-start-3 { + grid-column-start: 3; + } + .xl\:bui-col-start-4 { + grid-column-start: 4; + } + .xl\:bui-col-start-5 { + grid-column-start: 5; + } + .xl\:bui-col-start-6 { + grid-column-start: 6; + } + .xl\:bui-col-start-7 { + grid-column-start: 7; + } + .xl\:bui-col-start-8 { + grid-column-start: 8; + } + .xl\:bui-col-start-9 { + grid-column-start: 9; + } + .xl\:bui-col-start-10 { + grid-column-start: 10; + } + .xl\:bui-col-start-11 { + grid-column-start: 11; + } + .xl\:bui-col-start-12 { + grid-column-start: 12; + } + .xl\:bui-col-start-13 { + grid-column-start: 13; + } + .xl\:bui-col-start-auto { + grid-column-start: auto; + } + .xl\:bui-col-end-1 { + grid-column-end: 1; + } + .xl\:bui-col-end-2 { + grid-column-end: 2; + } + .xl\:bui-col-end-3 { + grid-column-end: 3; + } + .xl\:bui-col-end-4 { + grid-column-end: 4; + } + .xl\:bui-col-end-5 { + grid-column-end: 5; + } + .xl\:bui-col-end-6 { + grid-column-end: 6; + } + .xl\:bui-col-end-7 { + grid-column-end: 7; + } + .xl\:bui-col-end-8 { + grid-column-end: 8; + } + .xl\:bui-col-end-9 { + grid-column-end: 9; + } + .xl\:bui-col-end-10 { + grid-column-end: 10; + } + .xl\:bui-col-end-11 { + grid-column-end: 11; + } + .xl\:bui-col-end-12 { + grid-column-end: 12; + } + .xl\:bui-col-end-13 { + grid-column-end: 13; + } + .xl\:bui-col-end-auto { + grid-column-end: auto; + } + .xl\:bui-row-span-1 { + grid-row: span 1 / span 1; + } + .xl\:bui-row-span-2 { + grid-row: span 2 / span 2; + } + .xl\:bui-row-span-3 { + grid-row: span 3 / span 3; + } + .xl\:bui-row-span-4 { + grid-row: span 4 / span 4; + } + .xl\:bui-row-span-5 { + grid-row: span 5 / span 5; + } + .xl\:bui-row-span-6 { + grid-row: span 6 / span 6; + } + .xl\:bui-row-span-7 { + grid-row: span 7 / span 7; + } + .xl\:bui-row-span-8 { + grid-row: span 8 / span 8; + } + .xl\:bui-row-span-9 { + grid-row: span 9 / span 9; + } + .xl\:bui-row-span-10 { + grid-row: span 10 / span 10; + } + .xl\:bui-row-span-11 { + grid-row: span 11 / span 11; + } + .xl\:bui-row-span-12 { + grid-row: span 12 / span 12; + } + .xl\:bui-row-span-auto { + grid-row: span auto/span auto; + } + } + .bui-gap { + gap: var(--gap); + } + .bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + .bui-gap-1 { + gap: var(--bui-space-1); + } + .bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + .bui-gap-2 { + gap: var(--bui-space-2); + } + .bui-gap-3 { + gap: var(--bui-space-3); + } + .bui-gap-4 { + gap: var(--bui-space-4); + } + .bui-gap-5 { + gap: var(--bui-space-5); + } + .bui-gap-6 { + gap: var(--bui-space-6); + } + .bui-gap-7 { + gap: var(--bui-space-7); + } + .bui-gap-8 { + gap: var(--bui-space-8); + } + .bui-gap-9 { + gap: var(--bui-space-9); + } + .bui-gap-10 { + gap: var(--bui-space-10); + } + .bui-gap-11 { + gap: var(--bui-space-11); + } + .bui-gap-12 { + gap: var(--bui-space-12); + } + .bui-gap-13 { + gap: var(--bui-space-13); + } + .bui-gap-14 { + gap: var(--bui-space-14); + } + @media (width>=640px) { + .xs\:bui-gap { + gap: var(--gap-xs); + } + .xs\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + .xs\:bui-gap-1 { + gap: var(--bui-space-1); + } + .xs\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + .xs\:bui-gap-2 { + gap: var(--bui-space-2); + } + .xs\:bui-gap-3 { + gap: var(--bui-space-3); + } + .xs\:bui-gap-4 { + gap: var(--bui-space-4); + } + .xs\:bui-gap-5 { + gap: var(--bui-space-5); + } + .xs\:bui-gap-6 { + gap: var(--bui-space-6); + } + .xs\:bui-gap-7 { + gap: var(--bui-space-7); + } + .xs\:bui-gap-8 { + gap: var(--bui-space-8); + } + .xs\:bui-gap-9 { + gap: var(--bui-space-9); + } + .xs\:bui-gap-10 { + gap: var(--bui-space-10); + } + .xs\:bui-gap-11 { + gap: var(--bui-space-11); + } + .xs\:bui-gap-12 { + gap: var(--bui-space-12); + } + .xs\:bui-gap-13 { + gap: var(--bui-space-13); + } + .xs\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + @media (width>=768px) { + .sm\:bui-gap { + gap: var(--gap-sm); + } + .sm\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + .sm\:bui-gap-1 { + gap: var(--bui-space-1); + } + .sm\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + .sm\:bui-gap-2 { + gap: var(--bui-space-2); + } + .sm\:bui-gap-3 { + gap: var(--bui-space-3); + } + .sm\:bui-gap-4 { + gap: var(--bui-space-4); + } + .sm\:bui-gap-5 { + gap: var(--bui-space-5); + } + .sm\:bui-gap-6 { + gap: var(--bui-space-6); + } + .sm\:bui-gap-7 { + gap: var(--bui-space-7); + } + .sm\:bui-gap-8 { + gap: var(--bui-space-8); + } + .sm\:bui-gap-9 { + gap: var(--bui-space-9); + } + .sm\:bui-gap-10 { + gap: var(--bui-space-10); + } + .sm\:bui-gap-11 { + gap: var(--bui-space-11); + } + .sm\:bui-gap-12 { + gap: var(--bui-space-12); + } + .sm\:bui-gap-13 { + gap: var(--bui-space-13); + } + .sm\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + @media (width>=1024px) { + .md\:bui-gap { + gap: var(--gap-md); + } + .md\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + .md\:bui-gap-1 { + gap: var(--bui-space-1); + } + .md\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + .md\:bui-gap-2 { + gap: var(--bui-space-2); + } + .md\:bui-gap-3 { + gap: var(--bui-space-3); + } + .md\:bui-gap-4 { + gap: var(--bui-space-4); + } + .md\:bui-gap-5 { + gap: var(--bui-space-5); + } + .md\:bui-gap-6 { + gap: var(--bui-space-6); + } + .md\:bui-gap-7 { + gap: var(--bui-space-7); + } + .md\:bui-gap-8 { + gap: var(--bui-space-8); + } + .md\:bui-gap-9 { + gap: var(--bui-space-9); + } + .md\:bui-gap-10 { + gap: var(--bui-space-10); + } + .md\:bui-gap-11 { + gap: var(--bui-space-11); + } + .md\:bui-gap-12 { + gap: var(--bui-space-12); + } + .md\:bui-gap-13 { + gap: var(--bui-space-13); + } + .md\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + @media (width>=1280px) { + .lg\:bui-gap { + gap: var(--gap-lg); + } + .lg\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + .lg\:bui-gap-1 { + gap: var(--bui-space-1); + } + .lg\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + .lg\:bui-gap-2 { + gap: var(--bui-space-2); + } + .lg\:bui-gap-3 { + gap: var(--bui-space-3); + } + .lg\:bui-gap-4 { + gap: var(--bui-space-4); + } + .lg\:bui-gap-5 { + gap: var(--bui-space-5); + } + .lg\:bui-gap-6 { + gap: var(--bui-space-6); + } + .lg\:bui-gap-7 { + gap: var(--bui-space-7); + } + .lg\:bui-gap-8 { + gap: var(--bui-space-8); + } + .lg\:bui-gap-9 { + gap: var(--bui-space-9); + } + .lg\:bui-gap-10 { + gap: var(--bui-space-10); + } + .lg\:bui-gap-11 { + gap: var(--bui-space-11); + } + .lg\:bui-gap-12 { + gap: var(--bui-space-12); + } + .lg\:bui-gap-13 { + gap: var(--bui-space-13); + } + .lg\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + @media (width>=1536px) { + .xl\:bui-gap { + gap: var(--gap-xl); + } + .xl\:bui-gap-0\.5 { + gap: var(--bui-space-0_5); + } + .xl\:bui-gap-1 { + gap: var(--bui-space-1); + } + .xl\:bui-gap-1\.5 { + gap: var(--bui-space-1_5); + } + .xl\:bui-gap-2 { + gap: var(--bui-space-2); + } + .xl\:bui-gap-3 { + gap: var(--bui-space-3); + } + .xl\:bui-gap-4 { + gap: var(--bui-space-4); + } + .xl\:bui-gap-5 { + gap: var(--bui-space-5); + } + .xl\:bui-gap-6 { + gap: var(--bui-space-6); + } + .xl\:bui-gap-7 { + gap: var(--bui-space-7); + } + .xl\:bui-gap-8 { + gap: var(--bui-space-8); + } + .xl\:bui-gap-9 { + gap: var(--bui-space-9); + } + .xl\:bui-gap-10 { + gap: var(--bui-space-10); + } + .xl\:bui-gap-11 { + gap: var(--bui-space-11); + } + .xl\:bui-gap-12 { + gap: var(--bui-space-12); + } + .xl\:bui-gap-13 { + gap: var(--bui-space-13); + } + .xl\:bui-gap-14 { + gap: var(--bui-space-14); + } + } + .bui-align-start { + align-items: start; + } + .bui-align-center { + align-items: center; + } + .bui-align-end { + align-items: end; + } + .bui-align-baseline { + align-items: baseline; + } + .bui-align-stretch { + align-items: stretch; + } + .bui-jc-start { + justify-content: start; + } + .bui-jc-center { + justify-content: center; + } + .bui-jc-end { + justify-content: end; + } + .bui-jc-between { + justify-content: space-between; + } + .bui-fd-row { + flex-direction: row; + } + .bui-fd-column { + flex-direction: column; + } + .bui-fd-row-reverse { + flex-direction: row-reverse; + } + .bui-fd-column-reverse { + flex-direction: column-reverse; + } + @media (width>=640px) { + .xs\:bui-align-start { + align-items: start; + } + .xs\:bui-align-center { + align-items: center; + } + .xs\:bui-align-end { + align-items: end; + } + .xs\:bui-align-stretch { + align-items: stretch; + } + .xs\:bui-jc-start { + justify-content: start; + } + .xs\:bui-jc-center { + justify-content: center; + } + .xs\:bui-jc-end { + justify-content: end; + } + .xs\:bui-jc-between { + justify-content: space-between; + } + .xs\:bui-fd-row { + flex-direction: row; + } + .xs\:bui-fd-column { + flex-direction: column; + } + .xs\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + .xs\:bui-fd-column-reverse { + flex-direction: column-reverse; + } + } + @media (width>=768px) { + .sm\:bui-align-start { + align-items: start; + } + .sm\:bui-align-center { + align-items: center; + } + .sm\:bui-align-end { + align-items: end; + } + .sm\:bui-align-stretch { + align-items: stretch; + } + .sm\:bui-jc-start { + justify-content: start; + } + .sm\:bui-jc-center { + justify-content: center; + } + .sm\:bui-jc-end { + justify-content: end; + } + .sm\:bui-jc-between { + justify-content: space-between; + } + .sm\:bui-fd-row { + flex-direction: row; + } + .sm\:bui-fd-column { + flex-direction: column; + } + .sm\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + .sm\:bui-fd-column-reverse { + flex-direction: column-reverse; + } + } + @media (width>=1024px) { + .md\:bui-align-start { + align-items: start; + } + .md\:bui-align-center { + align-items: center; + } + .md\:bui-align-end { + align-items: end; + } + .md\:bui-align-stretch { + align-items: stretch; + } + .md\:bui-jc-start { + justify-content: start; + } + .md\:bui-jc-center { + justify-content: center; + } + .md\:bui-jc-end { + justify-content: end; + } + .md\:bui-jc-between { + justify-content: space-between; + } + .md\:bui-fd-row { + flex-direction: row; + } + .md\:bui-fd-column { + flex-direction: column; + } + .md\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + .md\:bui-fd-column-reverse { + flex-direction: column-reverse; + } + } + @media (width>=1280px) { + .lg\:bui-align-start { + align-items: start; + } + .lg\:bui-align-center { + align-items: center; + } + .lg\:bui-align-end { + align-items: end; + } + .lg\:bui-align-stretch { + align-items: stretch; + } + .lg\:bui-jc-start { + justify-content: start; + } + .lg\:bui-jc-center { + justify-content: center; + } + .lg\:bui-jc-end { + justify-content: end; + } + .lg\:bui-jc-between { + justify-content: space-between; + } + .lg\:bui-fd-row { + flex-direction: row; + } + .lg\:bui-fd-column { + flex-direction: column; + } + .lg\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + .lg\:bui-fd-column-reverse { + flex-direction: column-reverse; + } + } + @media (width>=1536px) { + .xl\:bui-align-start { + align-items: start; + } + .xl\:bui-align-center { + align-items: center; + } + .xl\:bui-align-end { + align-items: end; + } + .xl\:bui-align-stretch { + align-items: stretch; + } + .xl\:bui-jc-start { + justify-content: start; + } + .xl\:bui-jc-center { + justify-content: center; + } + .xl\:bui-jc-end { + justify-content: end; + } + .xl\:bui-jc-between { + justify-content: space-between; + } + .xl\:bui-fd-row { + flex-direction: row; + } + .xl\:bui-fd-column { + flex-direction: column; + } + .xl\:bui-fd-row-reverse { + flex-direction: row-reverse; + } + .xl\:bui-fd-column-reverse { + flex-direction: column-reverse; + } + } +} diff --git a/docs-ui/src/css/theme-spotify.css b/docs-ui/src/css/theme-spotify.css index 22eda0cabe..f8b18d6a31 100644 --- a/docs-ui/src/css/theme-spotify.css +++ b/docs-ui/src/css/theme-spotify.css @@ -1 +1,243 @@ -@font-face{font-family:CircularSpTitle;font-weight:900;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSpTitle-Black-4588c99025b967475c31695b0743dd1a.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSpTitle-Black-506746f387a26f25aa3d023b3e501d34.woff)format("woff")}@font-face{font-family:CircularSpTitle;font-weight:700;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSpTitle-Bold-b2586b06a2e1522e9d879d84c2792a58.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSpTitle-Bold-1624fb2df28c20d7203d7fb86ce8b481.woff)format("woff")}@font-face{font-family:CircularSp;font-weight:700;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff)format("woff")}@font-face{font-family:CircularSp;font-weight:400;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSp-Book-a00e99ef9996a3a157fb6b746856d04f.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSp-Book-3f73da7d35bd81c706bce7bbb84964de.woff)format("woff")}@font-face{font-family:CircularSp;font-weight:700;font-display:swap;unicode-range:U+0,U+D,U+20-7E,U+A0-17E,U+18F,U+192,U+1A0-1A1,U+1AF-1B0,U+1B5-1B6,U+1C4-1C6,U+1F1-1F3,U+1FA-1FF,U+218-21B,U+237,U+259,U+2BB-2BC,U+2C6-2C7,U+2C9,U+2D8-2DD,U+300-301,U+303,U+309,U+323,U+394,U+3A9,U+3BC,U+3C0,U+1E80-1E85,U+1E8A-1E8B,U+1EA0-1EF9,U+1FD6,U+2007-2008,U+200B,U+2010-2011,U+2013-2014,U+2018-201A,U+201C-201E,U+2020-2022,U+2026,U+2030,U+2032-2033,U+2039-203A,U+2042,U+2044,U+2051,U+2070,U+2074-2079,U+2080-2089,U+20AB-20AC,U+2113,U+2117,U+2122,U+2126,U+2160-2169,U+216C-216F,U+2190-2193,U+2196-2199,U+21A9,U+21B0-21B5,U+21C6,U+2202,U+2206,U+220F,U+2211-2212,U+2215,U+2219-221A,U+221E,U+222B,U+2248,U+2260,U+2264-2265,U+22C5,U+24C5,U+25A0-25A1,U+25AF,U+25B2-25B3,U+25CA-25CB,U+25CF,U+262E,U+2713,U+2715,U+2780-2788,U+E000,U+E002,U+F6C3,U+FB00-FB04,U+FEFF,U+FF0C,U+FF0E,U+FF1A-FF1B,U+FFFF;src:url(https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2)format("woff2"),url(https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff)format("woff")}[data-theme-name=spotify]{--bui-font-text:CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;--bui-font-title:CircularSpTitle,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;--bui-font-regular:CircularSp,CircularSp-Arab,CircularSp-Hebr,CircularSp-Cyrl,CircularSp-Grek,CircularSp-Deva;& .bui-Button{border-radius:var(--bui-radius-3);padding-inline:var(--bui-space-3)}& .bui-ButtonIcon{padding:0}& .bui-MenuPopup{box-sizing:border-box;max-width:21.25rem}& .bui-MenuSubmenuTrigger,& .bui-MenuItem{height:auto;min-height:2rem}& .bui-Text{font-family:var(--bui-font-text)}& .bui-Heading{font-family:var(--bui-font-title)}& .bui-TableRow{border-radius:var(--bui-radius-4);border:none}& .bui-TableRow:hover td:first-child{border-top-left-radius:var(--bui-radius-2);border-bottom-left-radius:var(--bui-radius-2)}& .bui-TableRow:hover td:last-child{border-top-right-radius:var(--bui-radius-2);border-bottom-right-radius:var(--bui-radius-2)}& .bui-TableBody:before,& .bui-TableBody:after{line-height:var(--bui-space-1);content:"ā€Œ";display:block}& .bui-TableHeader .bui-TableRow{border-bottom:1px solid var(--bui-border)}& .bui-TableHead{font-size:var(--bui-font-size-2);color:var(--bui-fg-secondary);font-weight:var(--bui-font-weight-regular)}& .bui-HeaderToolbar{padding-top:var(--bui-space-2);padding-inline:var(--bui-space-2)}& .bui-HeaderToolbarWrapper{border-radius:var(--bui-radius-3);padding-inline:var(--bui-space-3);border:none}& .bui-HeaderToolbarControls{right:calc(var(--bui-space-3) - 1px)}& .bui-HeaderTabsWrapper{margin-top:var(--bui-space-2);margin-inline:var(--bui-space-2);border-radius:var(--bui-radius-3);padding-inline:var(--bui-space-1);border:none}& .bui-Input{border-radius:var(--bui-radius-3)}& .bui-Tag{border-radius:var(--bui-radius-full)}}[data-theme-mode=light][data-theme-name=spotify]{--bui-bg-solid:#1ed760;--bui-bg-solid-hover:#3be477;--bui-bg-solid-pressed:#1abc54;--bui-bg-solid-disabled:#0f6c30;--bui-fg-primary:var(--bui-black);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-solid:var(--bui-black);--bui-fg-solid-disabled:#62ab7c;--bui-border:var(--bui-gray-3);--bui-border-hover:#0000004d;--bui-border-pressed:#00000080;--bui-border-disabled:#0000001a;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#0003;& .bui-HeaderToolbarWrapper,& .bui-HeaderTabsWrapper{border:1px solid var(--bui-border)}}[data-theme-mode=dark][data-theme-name=spotify]{--bui-bg-surface-0:var(--bui-black);--bui-bg-solid:#1ed760;--bui-bg-solid-hover:#3be477;--bui-bg-solid-pressed:#1abc54;--bui-bg-solid-disabled:#0f6c30;--bui-bg-danger:#3b1219;--bui-bg-warning:#302008;--bui-bg-success:#132d21;--bui-fg-primary:var(--bui-white);--bui-fg-secondary:var(--bui-gray-7);--bui-fg-link:var(--bui-white);--bui-fg-link-hover:var(--bui-white);--bui-fg-disabled:var(--bui-gray-5);--bui-fg-solid:var(--bui-black);--bui-fg-solid-disabled:#072f15;--bui-fg-tint:var(--bui-white);--bui-fg-tint-disabled:var(--bui-gray-5);--bui-fg-danger:#e22b2b;--bui-fg-warning:#e36d05;--bui-fg-success:#1db954;--bui-border:var(--bui-gray-3);--bui-border-hover:#fff6;--bui-border-pressed:#ffffff80;--bui-border-disabled:#fff3;--bui-border-danger:#f87a7a;--bui-border-warning:#e36d05;--bui-border-success:#53db83;--bui-ring:#fff3} \ No newline at end of file +@font-face { + font-family: CircularSpTitle; + font-weight: 900; + font-display: swap; + unicode-range: U+0, U+D, U+20-7E, U+A0-17E, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, + U+1B5-1B6, U+1C4-1C6, U+1F1-1F3, U+1FA-1FF, U+218-21B, U+237, U+259, + U+2BB-2BC, U+2C6-2C7, U+2C9, U+2D8-2DD, U+300-301, U+303, U+309, U+323, + U+394, U+3A9, U+3BC, U+3C0, U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, + U+2007-2008, U+200B, U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, + U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, + U+2051, U+2070, U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, + U+2122, U+2126, U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, + U+21B0-21B5, U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, + U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, + U+25A0-25A1, U+25AF, U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, + U+2715, U+2780-2788, U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, + U+FF0E, U+FF1A-FF1B, U+FFFF; + src: url(https://encore.scdn.co/fonts/CircularSpTitle-Black-4588c99025b967475c31695b0743dd1a.woff2) + format('woff2'), + url(https://encore.scdn.co/fonts/CircularSpTitle-Black-506746f387a26f25aa3d023b3e501d34.woff) + format('woff'); +} +@font-face { + font-family: CircularSpTitle; + font-weight: 700; + font-display: swap; + unicode-range: U+0, U+D, U+20-7E, U+A0-17E, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, + U+1B5-1B6, U+1C4-1C6, U+1F1-1F3, U+1FA-1FF, U+218-21B, U+237, U+259, + U+2BB-2BC, U+2C6-2C7, U+2C9, U+2D8-2DD, U+300-301, U+303, U+309, U+323, + U+394, U+3A9, U+3BC, U+3C0, U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, + U+2007-2008, U+200B, U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, + U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, + U+2051, U+2070, U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, + U+2122, U+2126, U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, + U+21B0-21B5, U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, + U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, + U+25A0-25A1, U+25AF, U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, + U+2715, U+2780-2788, U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, + U+FF0E, U+FF1A-FF1B, U+FFFF; + src: url(https://encore.scdn.co/fonts/CircularSpTitle-Bold-b2586b06a2e1522e9d879d84c2792a58.woff2) + format('woff2'), + url(https://encore.scdn.co/fonts/CircularSpTitle-Bold-1624fb2df28c20d7203d7fb86ce8b481.woff) + format('woff'); +} +@font-face { + font-family: CircularSp; + font-weight: 700; + font-display: swap; + unicode-range: U+0, U+D, U+20-7E, U+A0-17E, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, + U+1B5-1B6, U+1C4-1C6, U+1F1-1F3, U+1FA-1FF, U+218-21B, U+237, U+259, + U+2BB-2BC, U+2C6-2C7, U+2C9, U+2D8-2DD, U+300-301, U+303, U+309, U+323, + U+394, U+3A9, U+3BC, U+3C0, U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, + U+2007-2008, U+200B, U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, + U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, + U+2051, U+2070, U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, + U+2122, U+2126, U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, + U+21B0-21B5, U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, + U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, + U+25A0-25A1, U+25AF, U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, + U+2715, U+2780-2788, U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, + U+FF0E, U+FF1A-FF1B, U+FFFF; + src: url(https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2) + format('woff2'), + url(https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff) + format('woff'); +} +@font-face { + font-family: CircularSp; + font-weight: 400; + font-display: swap; + unicode-range: U+0, U+D, U+20-7E, U+A0-17E, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, + U+1B5-1B6, U+1C4-1C6, U+1F1-1F3, U+1FA-1FF, U+218-21B, U+237, U+259, + U+2BB-2BC, U+2C6-2C7, U+2C9, U+2D8-2DD, U+300-301, U+303, U+309, U+323, + U+394, U+3A9, U+3BC, U+3C0, U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, + U+2007-2008, U+200B, U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, + U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, + U+2051, U+2070, U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, + U+2122, U+2126, U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, + U+21B0-21B5, U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, + U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, + U+25A0-25A1, U+25AF, U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, + U+2715, U+2780-2788, U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, + U+FF0E, U+FF1A-FF1B, U+FFFF; + src: url(https://encore.scdn.co/fonts/CircularSp-Book-a00e99ef9996a3a157fb6b746856d04f.woff2) + format('woff2'), + url(https://encore.scdn.co/fonts/CircularSp-Book-3f73da7d35bd81c706bce7bbb84964de.woff) + format('woff'); +} +@font-face { + font-family: CircularSp; + font-weight: 700; + font-display: swap; + unicode-range: U+0, U+D, U+20-7E, U+A0-17E, U+18F, U+192, U+1A0-1A1, U+1AF-1B0, + U+1B5-1B6, U+1C4-1C6, U+1F1-1F3, U+1FA-1FF, U+218-21B, U+237, U+259, + U+2BB-2BC, U+2C6-2C7, U+2C9, U+2D8-2DD, U+300-301, U+303, U+309, U+323, + U+394, U+3A9, U+3BC, U+3C0, U+1E80-1E85, U+1E8A-1E8B, U+1EA0-1EF9, U+1FD6, + U+2007-2008, U+200B, U+2010-2011, U+2013-2014, U+2018-201A, U+201C-201E, + U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2042, U+2044, + U+2051, U+2070, U+2074-2079, U+2080-2089, U+20AB-20AC, U+2113, U+2117, + U+2122, U+2126, U+2160-2169, U+216C-216F, U+2190-2193, U+2196-2199, U+21A9, + U+21B0-21B5, U+21C6, U+2202, U+2206, U+220F, U+2211-2212, U+2215, + U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+22C5, U+24C5, + U+25A0-25A1, U+25AF, U+25B2-25B3, U+25CA-25CB, U+25CF, U+262E, U+2713, + U+2715, U+2780-2788, U+E000, U+E002, U+F6C3, U+FB00-FB04, U+FEFF, U+FF0C, + U+FF0E, U+FF1A-FF1B, U+FFFF; + src: url(https://encore.scdn.co/fonts/CircularSp-Bold-602e7aefc706aa36c6ec1324b9bbc461.woff2) + format('woff2'), + url(https://encore.scdn.co/fonts/CircularSp-Bold-856afe2da4ba4e61239b129e2c16d633.woff) + format('woff'); +} +[data-theme-name='spotify'] { + --bui-font-text: CircularSp, CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, + CircularSp-Grek, CircularSp-Deva; + --bui-font-title: CircularSpTitle, CircularSp-Arab, CircularSp-Hebr, + CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva; + --bui-font-regular: CircularSp, CircularSp-Arab, CircularSp-Hebr, + CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva; + & .bui-Button { + border-radius: var(--bui-radius-3); + padding-inline: var(--bui-space-3); + } + & .bui-ButtonIcon { + padding: 0; + } + & .bui-MenuPopup { + box-sizing: border-box; + max-width: 21.25rem; + } + & .bui-MenuSubmenuTrigger, + & .bui-MenuItem { + height: auto; + min-height: 2rem; + } + & .bui-Text { + font-family: var(--bui-font-text); + } + & .bui-Heading { + font-family: var(--bui-font-title); + } + & .bui-TableRow { + border-radius: var(--bui-radius-4); + border: none; + } + & .bui-TableRow:hover td:first-child { + border-top-left-radius: var(--bui-radius-2); + border-bottom-left-radius: var(--bui-radius-2); + } + & .bui-TableRow:hover td:last-child { + border-top-right-radius: var(--bui-radius-2); + border-bottom-right-radius: var(--bui-radius-2); + } + & .bui-TableBody:before, + & .bui-TableBody:after { + line-height: var(--bui-space-1); + content: 'ā€Œ'; + display: block; + } + & .bui-TableHeader .bui-TableRow { + border-bottom: 1px solid var(--bui-border); + } + & .bui-TableHead { + font-size: var(--bui-font-size-2); + color: var(--bui-fg-secondary); + font-weight: var(--bui-font-weight-regular); + } + & .bui-HeaderToolbar { + padding-top: var(--bui-space-2); + padding-inline: var(--bui-space-2); + } + & .bui-HeaderToolbarWrapper { + border-radius: var(--bui-radius-3); + padding-inline: var(--bui-space-3); + border: none; + } + & .bui-HeaderToolbarControls { + right: calc(var(--bui-space-3) - 1px); + } + & .bui-HeaderTabsWrapper { + margin-top: var(--bui-space-2); + margin-inline: var(--bui-space-2); + border-radius: var(--bui-radius-3); + padding-inline: var(--bui-space-1); + border: none; + } + & .bui-Input { + border-radius: var(--bui-radius-3); + } + & .bui-Tag { + border-radius: var(--bui-radius-full); + } +} +[data-theme-mode='light'][data-theme-name='spotify'] { + --bui-bg-solid: #1ed760; + --bui-bg-solid-hover: #3be477; + --bui-bg-solid-pressed: #1abc54; + --bui-bg-solid-disabled: #0f6c30; + --bui-fg-primary: var(--bui-black); + --bui-fg-secondary: var(--bui-gray-7); + --bui-fg-solid: var(--bui-black); + --bui-fg-solid-disabled: #62ab7c; + --bui-border: var(--bui-gray-3); + --bui-border-hover: #0000004d; + --bui-border-pressed: #00000080; + --bui-border-disabled: #0000001a; + --bui-border-danger: #f87a7a; + --bui-border-warning: #e36d05; + --bui-border-success: #53db83; + --bui-ring: #0003; + & .bui-HeaderToolbarWrapper, + & .bui-HeaderTabsWrapper { + border: 1px solid var(--bui-border); + } +} +[data-theme-mode='dark'][data-theme-name='spotify'] { + --bui-bg-surface-0: var(--bui-black); + --bui-bg-solid: #1ed760; + --bui-bg-solid-hover: #3be477; + --bui-bg-solid-pressed: #1abc54; + --bui-bg-solid-disabled: #0f6c30; + --bui-bg-danger: #3b1219; + --bui-bg-warning: #302008; + --bui-bg-success: #132d21; + --bui-fg-primary: var(--bui-white); + --bui-fg-secondary: var(--bui-gray-7); + --bui-fg-link: var(--bui-white); + --bui-fg-link-hover: var(--bui-white); + --bui-fg-disabled: var(--bui-gray-5); + --bui-fg-solid: var(--bui-black); + --bui-fg-solid-disabled: #072f15; + --bui-fg-tint: var(--bui-white); + --bui-fg-tint-disabled: var(--bui-gray-5); + --bui-fg-danger: #e22b2b; + --bui-fg-warning: #e36d05; + --bui-fg-success: #1db954; + --bui-border: var(--bui-gray-3); + --bui-border-hover: #fff6; + --bui-border-pressed: #ffffff80; + --bui-border-disabled: #fff3; + --bui-border-danger: #f87a7a; + --bui-border-warning: #e36d05; + --bui-border-success: #53db83; + --bui-ring: #fff3; +} diff --git a/docs-ui/src/utils/playground-context.tsx b/docs-ui/src/utils/playground-context.tsx index f4496787a5..5bfdf5c6fe 100644 --- a/docs-ui/src/utils/playground-context.tsx +++ b/docs-ui/src/utils/playground-context.tsx @@ -22,13 +22,13 @@ const PlaygroundContext = createContext<{ setSelectedThemeName: (themeName: ThemeName) => void; }>({ selectedScreenSizes: [], - setSelectedScreenSizes: () => { }, + setSelectedScreenSizes: () => {}, selectedComponents: [], - setSelectedComponents: () => { }, + setSelectedComponents: () => {}, selectedTheme: new Set(['light']), - setSelectedTheme: () => { }, + setSelectedTheme: () => {}, selectedThemeName: 'backstage', - setSelectedThemeName: () => { }, + setSelectedThemeName: () => {}, }); // Create a provider component From 7108c158f21dbc74eafbbc23e9847fba5cc231b2 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 30 Jan 2026 13:31:09 +0000 Subject: [PATCH 13/14] Remove requestAnimationFrame hack and use proper ESLint disable Replaced the requestAnimationFrame workaround with an explicit ESLint disable comment. The setState call in this effect is intentional and valid - it's syncing component state with localStorage when switching to the custom theme, which is a legitimate use case for effects. This is clearer and more maintainable than hiding the intent with requestAnimationFrame. Signed-off-by: Charles de Dreuille --- docs-ui/src/components/CustomTheme/customTheme.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs-ui/src/components/CustomTheme/customTheme.tsx b/docs-ui/src/components/CustomTheme/customTheme.tsx index 3a4ae0edc8..532f2bab9d 100644 --- a/docs-ui/src/components/CustomTheme/customTheme.tsx +++ b/docs-ui/src/components/CustomTheme/customTheme.tsx @@ -73,10 +73,10 @@ export const CustomTheme = () => { storedTheme = defaultTheme; localStorage.setItem('customThemeCss', storedTheme); } - // Defer setState to avoid synchronous call in effect - requestAnimationFrame(() => { - setCustomTheme(storedTheme!); - }); + // This setState is intentional - we're syncing component state with localStorage + // when the user switches to the custom theme. This is a valid effect pattern. + // eslint-disable-next-line react-hooks/set-state-in-effect + setCustomTheme(storedTheme); updateStyleElement(storedTheme); } else { const styleElement = document.getElementById( From 9da3b29044b2f2a8011bb90be8061aa7c30676e6 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Fri, 30 Jan 2026 13:44:41 +0000 Subject: [PATCH 14/14] Improve custom theme hydration issues Signed-off-by: Charles de Dreuille --- .../components/CustomTheme/customTheme.tsx | 57 ++++++--- docs-ui/src/utils/playground-context.tsx | 109 +++++++++++------- 2 files changed, 111 insertions(+), 55 deletions(-) diff --git a/docs-ui/src/components/CustomTheme/customTheme.tsx b/docs-ui/src/components/CustomTheme/customTheme.tsx index 532f2bab9d..539113140a 100644 --- a/docs-ui/src/components/CustomTheme/customTheme.tsx +++ b/docs-ui/src/components/CustomTheme/customTheme.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect, useState, useCallback } from 'react'; +import { useEffect, useState, useCallback, useSyncExternalStore } from 'react'; import CodeMirror from '@uiw/react-codemirror'; import { sass } from '@codemirror/lang-sass'; import styles from './styles.module.css'; @@ -14,6 +14,10 @@ const defaultTheme = `:root { --bui-bg-solid: #000; }`; +// Stable server snapshots for useSyncExternalStore +const serverIsClient = false; +const serverDefaultTheme = defaultTheme; + const myTheme = createTheme({ theme: 'light', settings: { @@ -46,12 +50,41 @@ const myTheme = createTheme({ }); export const CustomTheme = () => { - const [isClient, setIsClient] = useState(() => typeof window !== 'undefined'); const [open, setOpen] = useState(true); - const [customTheme, setCustomTheme] = useState(undefined); const { selectedThemeName } = usePlayground(); const [savedMessage, setSavedMessage] = useState('Save'); + // SSR-safe client detection + const isClient = useSyncExternalStore( + () => () => {}, + () => true, + () => serverIsClient, + ); + + // SSR-safe localStorage access for custom theme + const customThemeFromStorage = useSyncExternalStore( + callback => { + window.addEventListener('storage', callback); + return () => window.removeEventListener('storage', callback); + }, + () => { + const stored = localStorage.getItem('customThemeCss'); + if (!stored) { + localStorage.setItem('customThemeCss', defaultTheme); + return defaultTheme; + } + return stored; + }, + () => serverDefaultTheme, + ); + + const [customTheme, setCustomTheme] = useState(customThemeFromStorage); + + // Sync from storage when it changes + useEffect(() => { + setCustomTheme(customThemeFromStorage); + }, [customThemeFromStorage]); + const updateStyleElement = (theme: string) => { let styleElement = document.getElementById( 'custom-theme-style', @@ -66,19 +99,11 @@ export const CustomTheme = () => { styleElement.textContent = theme; }; + // Apply custom theme to DOM useEffect(() => { - if (selectedThemeName === 'custom') { - let storedTheme = localStorage.getItem('customThemeCss'); - if (!storedTheme) { - storedTheme = defaultTheme; - localStorage.setItem('customThemeCss', storedTheme); - } - // This setState is intentional - we're syncing component state with localStorage - // when the user switches to the custom theme. This is a valid effect pattern. - // eslint-disable-next-line react-hooks/set-state-in-effect - setCustomTheme(storedTheme); - updateStyleElement(storedTheme); - } else { + if (selectedThemeName === 'custom' && customTheme && isClient) { + updateStyleElement(customTheme); + } else if (isClient) { const styleElement = document.getElementById( 'custom-theme-style', ) as HTMLStyleElement; @@ -86,7 +111,7 @@ export const CustomTheme = () => { styleElement.remove(); } } - }, [selectedThemeName]); + }, [selectedThemeName, customTheme, isClient]); const handleSave = () => { if (customTheme) { diff --git a/docs-ui/src/utils/playground-context.tsx b/docs-ui/src/utils/playground-context.tsx index 5bfdf5c6fe..252194535b 100644 --- a/docs-ui/src/utils/playground-context.tsx +++ b/docs-ui/src/utils/playground-context.tsx @@ -4,6 +4,7 @@ import { ReactNode, useState, useEffect, + useSyncExternalStore, } from 'react'; import { components } from './data'; @@ -31,6 +32,14 @@ const PlaygroundContext = createContext<{ setSelectedThemeName: () => {}, }); +// Stable server snapshots (outside component to avoid recreating) +const defaultThemeSet = new Set(['light']); +const defaultThemeName: ThemeName = 'backstage'; + +// Cache for theme Sets to avoid creating new objects on every getSnapshot call +let cachedThemeValue: string | null = null; +let cachedThemeSet: Set = defaultThemeSet; + // Create a provider component export const PlaygroundProvider = ({ children }: { children: ReactNode }) => { // Check if running in a browser environment @@ -41,49 +50,71 @@ export const PlaygroundProvider = ({ children }: { children: ReactNode }) => { components.map(component => component.slug), ); - // Use lazy initialization to load from localStorage - const [selectedTheme, setSelectedTheme] = useState>(() => { - if (typeof window !== 'undefined') { - const savedThemeString = localStorage.getItem('theme-mode'); - if (savedThemeString) { - const themeArray = savedThemeString - .split(',') - .filter(Boolean) as Theme[]; - return new Set(themeArray); - } - } - return new Set(['light']); - }); + // Use useSyncExternalStore for SSR-safe localStorage access + const selectedTheme = useSyncExternalStore( + callback => { + window.addEventListener('storage', callback); + return () => window.removeEventListener('storage', callback); + }, + () => { + const saved = localStorage.getItem('theme-mode'); - const [selectedThemeName, setSelectedThemeName] = useState(() => { - if (typeof window !== 'undefined') { - const savedThemeName = localStorage.getItem('theme-name') as ThemeName; - if (savedThemeName) { - return savedThemeName; + // Return cached Set if value hasn't changed + if (saved === cachedThemeValue) { + return cachedThemeSet; } - } - return 'backstage'; - }); + + // Update cache with new value + cachedThemeValue = saved; + if (saved) { + const themeArray = saved.split(',').filter(Boolean) as Theme[]; + cachedThemeSet = new Set(themeArray); + } else { + cachedThemeSet = defaultThemeSet; + } + + return cachedThemeSet; + }, + () => defaultThemeSet, // Stable server snapshot + ); + + const selectedThemeName = useSyncExternalStore( + callback => { + window.addEventListener('storage', callback); + return () => window.removeEventListener('storage', callback); + }, + () => { + const saved = localStorage.getItem('theme-name') as ThemeName; + return saved || defaultThemeName; + }, + () => defaultThemeName, // Stable server snapshot + ); + + // Keep setter functions that update both state and localStorage + const setSelectedTheme = (keys: Set) => { + const value = Array.from(keys).join(','); + localStorage.setItem('theme-mode', value); + // Invalidate cache + cachedThemeValue = null; + window.dispatchEvent(new Event('storage')); + }; + + const setSelectedThemeName = (name: ThemeName) => { + localStorage.setItem('theme-name', name); + window.dispatchEvent(new Event('storage')); + }; + + // Sync to DOM attributes when values change + useEffect(() => { + document.documentElement.setAttribute( + 'data-theme-mode', + Array.from(selectedTheme).join(','), + ); + }, [selectedTheme]); useEffect(() => { - if (isBrowser) { - document.documentElement.setAttribute( - 'data-theme-mode', - Array.from(selectedTheme).join(','), - ); - localStorage.setItem('theme-mode', Array.from(selectedTheme).join(',')); - } - }, [selectedTheme, isBrowser]); - - useEffect(() => { - if (isBrowser) { - document.documentElement.setAttribute( - 'data-theme-name', - selectedThemeName || 'backstage', - ); - localStorage.setItem('theme-name', selectedThemeName || 'backstage'); - } - }, [selectedThemeName, isBrowser]); + document.documentElement.setAttribute('data-theme-name', selectedThemeName); + }, [selectedThemeName]); return (