this.gui 1.0.18 → 1.1.0

package/src/types/viewport.ts

@@ -0,0 +1,132 @@
+// src/types/viewport.ts
+// Shared viewport types + helpers for responsive, declarative variants.
+// These utilities do not depend on React. They accept an optional MUI Theme
+// but also work without it (fallbacks to MUI default breakpoint values).
+
+// ---- Types -----------------------------------------------------------------
+
+/** MUI-aligned viewport keys. Keep in sync with your theme breakpoints. */
+export type ViewportKey = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/** Map viewport → variant/value. You may also include a global `default`. */
+export type ViewportMap<TVariant extends string | number | boolean | object> = Partial<
+  Record<ViewportKey, TVariant>
+> & { default?: TVariant };
+
+/**
+ * Prop that can be a single value (applies to all sizes) or a map by viewport.
+ * Examples:
+ *  - "pill"
+ *  - { xs: "icons", sm: "pill", md: "pill", lg: "pill" }
+ */
+export type ViewportProp<TVariant extends string | number | boolean | object> =
+  | TVariant
+  | ViewportMap<TVariant>;
+
+/** Options for resolution helpers. */
+export type ViewportResolveOptions = {
+  /** Force a specific width (useful in unit tests or storybook containers). */
+  widthOverride?: number;
+  /** Fallback key when no direct match is found. Defaults to last matching by min-width. */
+  fallbackKey?: ViewportKey;
+};
+
+// ---- Internals --------------------------------------------------------------
+
+/** Default MUI breakpoint mins used when no theme is provided. */
+const DEFAULT_MINS: Record<ViewportKey, number> = {
+  xs: 0,
+  sm: 600,
+  md: 900,
+  lg: 1200,
+  xl: 1536,
+};
+
+/** Default key order (small → large). */
+const DEFAULT_ORDER: ViewportKey[] = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+/** Narrow theme shape we care about; avoids hard dependency on @mui types. */
+type MaybeMuiTheme = {
+  breakpoints?: {
+    values?: Partial<Record<ViewportKey, number>>;
+  };
+};
+
+/** Safely read breakpoint mins from a MUI theme; otherwise use defaults. */
+export function getBreakpointMins(theme?: MaybeMuiTheme): Record<ViewportKey, number> {
+  const v = (theme?.breakpoints?.values ?? {}) as Partial<Record<ViewportKey, number>>;
+  return {
+    xs: Number.isFinite(v.xs!) ? (v.xs as number) : DEFAULT_MINS.xs,
+    sm: Number.isFinite(v.sm!) ? (v.sm as number) : DEFAULT_MINS.sm,
+    md: Number.isFinite(v.md!) ? (v.md as number) : DEFAULT_MINS.md,
+    lg: Number.isFinite(v.lg!) ? (v.lg as number) : DEFAULT_MINS.lg,
+    xl: Number.isFinite(v.xl!) ? (v.xl as number) : DEFAULT_MINS.xl,
+  };
+}
+
+/** Return the active viewport key for a given width using min-width semantics. */
+export function keyForWidth(width: number, theme?: MaybeMuiTheme): ViewportKey {
+  const mins = getBreakpointMins(theme);
+  // Pick the largest key whose min ≤ width
+  let current: ViewportKey = 'xs';
+  for (const k of DEFAULT_ORDER) {
+    if (width >= mins[k]) current = k;
+  }
+  return current;
+}
+
+/**
+ * Resolve a ViewportProp to a concrete value for the current width.
+ * - If `prop` is a single value, returns it directly.
+ * - If it's a map, returns `map[activeKey]`, falling back to:
+ *   `map.default` → first defined in xs→xl order → undefined.
+ */
+export function resolveViewportProp<TVariant extends string | number | boolean | object>(
+  prop: ViewportProp<TVariant>,
+  theme?: MaybeMuiTheme,
+  opts: ViewportResolveOptions = {}
+): TVariant | undefined {
+  // Simple (scalar) value → universal
+  if (prop == null || typeof prop !== 'object' || Array.isArray(prop)) {
+    return prop as TVariant;
+  }
+
+  // Map case
+  const map = prop as ViewportMap<TVariant>;
+  const width =
+    typeof opts.widthOverride === 'number'
+      ? opts.widthOverride
+      : (typeof window !== 'undefined' ? window.innerWidth : DEFAULT_MINS.xs);
+
+  const activeKey = keyForWidth(width, theme);
+  const pick =
+    (map as any)[activeKey] ??
+    map.default ??
+    (DEFAULT_ORDER.find((k) => (map as any)[k] != null)
+      ? (map as any)[DEFAULT_ORDER.find((k) => (map as any)[k] != null)!]
+      : undefined);
+
+  return pick as TVariant | undefined;
+}
+
+/**
+ * Shallow-merge a base object with the resolved override from a viewport map.
+ * Useful for config objects where each viewport only overrides a few keys.
+ *
+ * Example:
+ *   const base = { gap: 8, size: 'pill' }
+ *   const map  = { xs: { size: 'icons' } }
+ *   → resolveResponsiveConfig(base, map) === { gap: 8, size: 'icons' }
+ */
+export function resolveResponsiveConfig<T extends Record<string, any>>(
+  base: T | undefined,
+  map: ViewportMap<Partial<T>> | undefined,
+  theme?: MaybeMuiTheme,
+  opts: ViewportResolveOptions = {}
+): T | undefined {
+  if (base == null && map == null) return undefined;
+  if (!map || typeof map !== 'object') return base as T | undefined;
+
+  const override = resolveViewportProp<Partial<T>>(map as any, theme, opts) || {};
+  return { ...(base as T), ...override };
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "allowJs": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true,
+    "isolatedModules": true,
+    "forceConsistentCasingInFileNames": true,
+    "lib": ["ES2020", "DOM"],
+    "baseUrl": "src",
+    "paths": {
+      "@/*": ["*"]
+    },
+    "types": ["node", "vite/client"]
+  },
+  "include": ["src", "stories"]
+}

package/vite.config.js

@@ -0,0 +1,74 @@
+/// <reference types="vitest/config" />
+// vite.config.js
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import mdx from '@mdx-js/rollup';
+import { resolve } from 'path';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
+const isDemo = process.env.DEMO === 'true';
+const isStorybook = process.env.STORYBOOK === 'true';
+export default defineConfig({
+  plugins: [
+    ...(isStorybook ? [] : [mdx({ include: ['**/*.mdx', '**/*.md'] })]),
+    react()
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, 'src'),
+    }
+  },
+  build: isDemo ? undefined : {
+    lib: {
+      entry: resolve(__dirname, 'src/index.js'),
+      name: 'ThisGUI',
+      fileName: format => `this-gui.${format}.js`
+    },
+    rollupOptions: {
+      external: ['react', 'react-dom', 'react-dom/client', 'react/jsx-runtime', 'react-router-dom'],
+      output: {
+        globals: {
+          react: 'React',
+          'react-dom': 'ReactDOM',
+          'react-dom/client': 'ReactDOM',
+          'react/jsx-runtime': 'ReactJSX',
+          'react-router-dom': 'ReactRouterDOM'
+        }
+      }
+    }
+  },
+  optimizeDeps: isStorybook ? {} : {
+    include: ['@uiw/react-md-editor', '@uiw/react-markdown-preview']
+  },
+  root: isDemo ? resolve(__dirname, 'demo') : '.',
+  publicDir: isDemo ? resolve(__dirname, 'demo/public') : 'public',
+  server: isDemo ? {
+    open: true
+  } : false,
+  test: {
+    projects: [{
+      extends: true,
+      plugins: [
+      // The plugin will run tests for the stories defined in your Storybook config
+      // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+      storybookTest({
+        configDir: path.join(dirname, '.storybook')
+      })],
+      test: {
+        name: 'storybook',
+        browser: {
+          enabled: true,
+          headless: true,
+          provider: 'playwright',
+          instances: [{
+            browser: 'chromium'
+          }]
+        },
+        setupFiles: ['.storybook/vitest.setup.js']
+      }
+    }]
+  }
+});

package/dist/style.css

@@ -1 +0,0 @@
-.heading{font-family:var(--font-family);color:var(--text-color);margin-bottom:var(--spacing-md);transition:color var(--transition-speed) ease}.heading--align-left{text-align:left}.heading--align-center{text-align:center}.heading--align-right{text-align:right}.heading--bold{font-weight:var(--font-weight-heavy)}.heading--info{color:var(--info-color)}.heading--warning{color:var(--warning-color)}.heading--alert{color:var(--alert-color)}.heading--success{color:var(--success-color)}.heading--neutral{color:var(--neutral-color)}.heading--dark{color:var(--dark-color)}.heading--classy-color-1{color:var(--classy-color-1)}.heading--classy-color-2{color:var(--classy-color-2)}.heading--classy-color-3{color:var(--classy-color-3)}.heading--classy-color-4{color:var(--classy-color-4)}.heading--classy-color-5{color:var(--classy-color-5)}.heading--small-switch-color-1{color:var(--small-switch-color-1)}.heading--small-switch-color-2{color:var(--small-switch-color-2)}.heading--natural-color-1{color:var(--natural-color-1)}.heading--natural-color-2{color:var(--natural-color-2)}.heading--natural-color-3{color:var(--natural-color-3)}.heading--grey-friend-1{color:var(--grey-friend-1)}.heading--grey-friend-2{color:var(--grey-friend-2)}.heading--shade-1{color:var(--shade-1)}.heading--shade-2{color:var(--shade-2)}.heading--shade-3{color:var(--shade-3)}.heading--shade-4{color:var(--shade-4)}.paragraph{font-family:var(--font-family);margin-bottom:var(--spacing-md)}.paragraph--size-xs{font-size:var(--font-size-small)}.paragraph--size-sm{font-size:calc(var(--font-size-small) * 1.1)}.paragraph--size-md{font-size:var(--font-size-base)}.paragraph--size-lg{font-size:calc(var(--font-size-base) * 1.1)}.paragraph--size-xl{font-size:calc(var(--font-size-base) * 1.25)}.paragraph--align-left{text-align:left}.paragraph--align-center{text-align:center}.paragraph--align-right{text-align:right}.paragraph--align-justify{text-align:justify}.paragraph--weight-light{font-weight:300}.paragraph--weight-normal{font-weight:var(--font-weight-regular)}.paragraph--weight-bold{font-weight:var(--font-weight-bold)}.paragraph--color-default{color:var(--text-color)}.paragraph--color-muted{color:var(--muted-text-color)}.paragraph--color-primary{color:var(--primary-color)}.paragraph--color-secondary{color:var(--secondary-color)}.paragraph--color-info{color:var(--info-color)}.paragraph--color-warning{color:var(--warning-color)}.paragraph--color-alert{color:var(--alert-color)}.paragraph--color-success{color:var(--success-color)}.paragraph--color-dark{color:var(--dark-color)}.paragraph--color-neutral{color:var(--neutral-color)}.paragraph--color-classy-color-1{color:var(--classy-color-1)}.paragraph--color-classy-color-2{color:var(--classy-color-2)}.paragraph--color-classy-color-3{color:var(--classy-color-3)}.paragraph--color-classy-color-4{color:var(--classy-color-4)}.paragraph--color-classy-color-5{color:var(--classy-color-5)}.paragraph--color-small-switch-color-1{color:var(--small-switch-color-1)}.paragraph--color-small-switch-color-2{color:var(--small-switch-color-2)}.paragraph--color-natural-color-1{color:var(--natural-color-1)}.paragraph--color-natural-color-2{color:var(--natural-color-2)}.paragraph--color-natural-color-3{color:var(--natural-color-3)}.paragraph--color-grey-friend-1{color:var(--grey-friend-1)}.paragraph--color-grey-friend-2{color:var(--grey-friend-2)}.paragraph--color-shade-1{color:var(--shade-1)}.paragraph--color-shade-2{color:var(--shade-2)}.paragraph--color-shade-3{color:var(--shade-3)}.paragraph--color-shade-4{color:var(--shade-4)}.paragraph--lineHeight-normal{line-height:var(--line-height)}.paragraph--lineHeight-tight{line-height:1.3}.paragraph--lineHeight-loose{line-height:2}.label{display:inline-block;font-weight:500;text-align:center;border-radius:.25rem;transition:background-color .3s ease,color .3s ease,border .3s ease;cursor:default}.label--background{color:#fff}.label--color-primary{background-color:var(--primary-color)}.label--color-secondary{border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}.label--color-info{background-color:var(--info-color)}.label--color-warning{background-color:var(--warning-color)}.label--color-alert{background-color:var(--alert-color)}.label--color-success{background-color:var(--success-color)}.label--color-neutral{background-color:var(--neutral-color)}.label--color-dark{background-color:var(--dark-color)}.label--color-classy-color-1{background-color:var(--classy-color-1)}.label--color-classy-color-2{background-color:var(--classy-color-2)}.label--color-classy-color-3{background-color:var(--classy-color-3)}.label--color-classy-color-4{background-color:var(--classy-color-4)}.label--color-classy-color-5{background-color:var(--classy-color-5)}.label--color-small-switch-color-1{background-color:var(--small-switch-color-1)}.label--color-small-switch-color-2{background-color:var(--small-switch-color-2)}.label--color-natural-color-1{background-color:var(--natural-color-1)}.label--color-natural-color-2{background-color:var(--natural-color-2)}.label--color-natural-color-3{background-color:var(--natural-color-3)}.label--color-grey-friend-1{background-color:var(--grey-friend-1)}.label--color-grey-friend-2{background-color:var(--grey-friend-2)}.label--color-shade-1{background-color:var(--shade-1)}.label--color-shade-2{background-color:var(--shade-2)}.label--color-shade-3{background-color:var(--shade-3)}.label--color-shade-4{background-color:var(--shade-4)}.label--color-secondary:not(.label--background){border:1px solid var(--secondary-color);color:var(--secondary-color);background-color:transparent}.label--shape-rounded{border-radius:.25rem}.label--shape-square{border-radius:0}.label--shape-pill{border-radius:9999px}.label--size-xs{font-size:.6rem;padding:.2em .4em}.label--size-sm{font-size:.75rem;padding:.25em .5em}.label--size-md{font-size:.875rem;padding:.3em .6em}.label--size-lg{font-size:1rem;padding:.35em .7em}.label--size-xl{font-size:1.125rem;padding:.4em .8em}.label-colors,.label-shapes,.label-sizes{display:flex;flex-wrap:wrap;gap:var(--spacing-md);align-items:center;margin-bottom:var(--spacing-md)}.label-sizes .label{margin-right:var(--spacing-sm)}.caption{font-family:var(--font-family);font-size:var(--font-size-small, 14px);color:var(--text-color);margin-top:var(--spacing-xs, 4px);margin-bottom:var(--spacing-md, 16px);display:block}.caption--small{font-size:var(--font-size-small)}.caption--large{font-size:var(--font-size-large)}.caption--image{font-style:italic;text-align:center}.caption--table{caption-side:top;font-weight:var(--font-weight-medium, 500)}.caption--form{font-size:var(--font-size-small, 14px);color:var(--text-color);margin-top:var(--spacing-xs, 4px)}.caption--chart{font-weight:var(--font-weight-bold, 600);margin-top:var(--spacing-sm, 8px)}.caption--transcription{font-size:var(--font-size-small, 14px);color:var(--text-color);background-color:#0009;color:#fff;padding:var(--spacing-xs, 4px) var(--spacing-sm, 8px);border-radius:var(--border-radius, 4px);position:absolute;bottom:var(--spacing-xs, 4px);left:50%;transform:translate(-50%);max-width:90%;text-align:center}.caption--description{font-size:var(--font-size-small, 14px);color:var(--text-color);margin-top:var(--spacing-xs, 4px)}.caption--interactive{font-size:var(--font-size-small, 14px);color:var(--text-color);display:flex;align-items:center;gap:var(--spacing-xs, 4px)}.caption--info{color:var(--info-color)}.caption--warning{color:var(--warning-color)}.caption--alert{color:var(--alert-color)}.caption--success{color:var(--success-color)}.caption--neutral{color:var(--neutral-color)}.caption--dark{color:var(--dark-color)}.caption--classy-color-1{color:var(--classy-color-1)}.caption--classy-color-2{color:var(--classy-color-2)}.caption--classy-color-3{color:var(--classy-color-3)}.caption--classy-color-4{color:var(--classy-color-4)}.caption--classy-color-5{color:var(--classy-color-5)}.caption--small-switch-color-1{color:var(--small-switch-color-1)}.caption--small-switch-color-2{color:var(--small-switch-color-2)}.caption--natural-color-1{color:var(--natural-color-1)}.caption--natural-color-2{color:var(--natural-color-2)}.caption--natural-color-3{color:var(--natural-color-3)}.caption--grey-friend-1{color:var(--grey-friend-1)}.caption--grey-friend-2{color:var(--grey-friend-2)}.caption--shade-1{color:var(--shade-1)}.caption--shade-2{color:var(--shade-2)}.caption--shade-3{color:var(--shade-3)}.caption--shade-4{color:var(--shade-4)}.container{width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}.container--border{border:1px solid var(--border-color, #000)}.container--rounded{border-radius:var(--border-radius, 8px)}.container--border-primary{border-color:var(--primary-color)}.container--border-secondary{border-color:var(--secondary-color)}.container--border-link{border-color:var(--link-color)}.container--border-focus{border-color:var(--focus-color)}.container--border-info{border-color:var(--info-color)}.container--border-warning{border-color:var(--warning-color)}.container--border-alert{border-color:var(--alert-color)}.container--border-success{border-color:var(--success-color)}.container--border-neutral{border-color:var(--neutral-color)}.container--border-dark{border-color:var(--dark-color)}.container--border-classy-1{border-color:var(--classy-color-1)}.container--border-classy-2{border-color:var(--classy-color-2)}.container--border-classy-3{border-color:var(--classy-color-3)}.container--border-classy-4{border-color:var(--classy-color-4)}.container--border-classy-5{border-color:var(--classy-color-5)}.container--border-small-switch-1{border-color:var(--small-switch-color-1)}.container--border-small-switch-2{border-color:var(--small-switch-color-2)}.container--border-natural-1{border-color:var(--natural-color-1)}.container--border-natural-2{border-color:var(--natural-color-2)}.container--border-natural-3{border-color:var(--natural-color-3)}.container--border-grey-friend-1{border-color:var(--grey-friend-1)}.container--border-grey-friend-2{border-color:var(--grey-friend-2)}.container--border-shade-1{border-color:var(--shade-1)}.container--border-shade-2{border-color:var(--shade-2)}.container--border-shade-3{border-color:var(--shade-3)}.container--border-shade-4{border-color:var(--shade-4)}.container--border-none{border:1px solid var(--border-color, #000)}.container--bg-primary{background-color:var(--primary-color)}.container--bg-secondary{background-color:var(--secondary-color)}.container--bg-link{background-color:var(--link-color)}.container--bg-focus{background-color:var(--focus-color)}.container--bg-info{background-color:var(--info-color)}.container--bg-warning{background-color:var(--warning-color)}.container--bg-alert{background-color:var(--alert-color)}.container--bg-success{background-color:var(--success-color)}.container--bg-neutral{background-color:var(--neutral-color)}.container--bg-dark{background-color:var(--dark-color)}.container--bg-classy-1{background-color:var(--classy-color-1)}.container--bg-classy-2{background-color:var(--classy-color-2)}.container--bg-classy-3{background-color:var(--classy-color-3)}.container--bg-classy-4{background-color:var(--classy-color-4)}.container--bg-classy-5{background-color:var(--classy-color-5)}.container--bg-small-switch-1{background-color:var(--small-switch-color-1)}.container--bg-small-switch-2{background-color:var(--small-switch-color-2)}.container--bg-natural-1{background-color:var(--natural-color-1)}.container--bg-natural-2{background-color:var(--natural-color-2)}.container--bg-natural-3{background-color:var(--natural-color-3)}.container--bg-grey-friend-1{background-color:var(--grey-friend-1)}.container--bg-grey-friend-2{background-color:var(--grey-friend-2)}.container--bg-shade-1{background-color:var(--shade-1)}.container--bg-shade-2{background-color:var(--shade-2)}.container--bg-shade-3{background-color:var(--shade-3)}.container--bg-shade-4{background-color:var(--shade-4)}.container--bg-none{background-color:transparent}.container--size-small:not(.container--fluid){max-width:100%}.container--size-medium:not(.container--fluid){max-width:100%}.container--size-large:not(.container--fluid){max-width:100%}@media (min-width: 480px){.container--size-small:not(.container--fluid){max-width:600px}}@media (min-width: 768px){.container--size-medium:not(.container--fluid){max-width:960px}}@media (min-width: 1200px){.container--size-large:not(.container--fluid){max-width:1560px}}@media (min-width: 1200px){.container--size-medium:not(.container--fluid),.container--size-large:not(.container--fluid){max-width:1140px}}@media (min-width: 1920px){.container--size-extra-large:not(.container--fluid){max-width:2520px}}.container--fluid{width:100%!important;max-width:100%!important;padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.container--padding-sm{padding:var(--spacing-sm)}.container--padding-md{padding:var(--spacing-md)}.container--padding-lg{padding:var(--spacing-lg)}.container--mt-sm{margin-top:var(--spacing-sm)}.container--mt-md{margin-top:var(--spacing-md)}.container--mt-lg{margin-top:var(--spacing-lg)}.container--mb-sm{margin-bottom:var(--spacing-sm)}.container--mb-md{margin-bottom:var(--spacing-md)}.container--mb-lg{margin-bottom:var(--spacing-lg)}.container--ml-sm{margin-left:var(--spacing-sm)}.container--ml-md{margin-left:var(--spacing-md)}.container--ml-lg{margin-left:var(--spacing-lg)}.container--mr-sm{margin-right:var(--spacing-sm)}.container--mr-md{margin-right:var(--spacing-md)}.container--mr-lg{margin-right:var(--spacing-lg)}.container--size-small:not(.container--fluid){max-width:600px}.container--size-medium:not(.container--fluid){max-width:960px}.container--size-large:not(.container--fluid){max-width:1200px}.container--fluid{max-width:100%}.container--fluid.container--size-small{padding-left:var(--spacing-sm);padding-right:var(--spacing-sm)}.container--fluid.container--size-medium{padding-left:var(--spacing-md);padding-right:var(--spacing-md)}.container--fluid.container--size-large{padding-left:var(--spacing-lg);padding-right:var(--spacing-lg)}.container--align-left{margin-left:0;margin-right:auto}.container--align-center{margin-left:auto;margin-right:auto}.container--align-right{margin-left:auto;margin-right:0}.container--position-relative{position:relative}.container--position-static{position:static}.container--position-fixed{position:fixed}.container--position-absolute{position:absolute}.container--position-sticky{position:sticky}:root{--button-font-size: var(--font-size-base);--button-padding-vertical: 11px;--button-padding-horizontal: 21px;--button-padding: var(--button-padding-vertical) var(--button-padding-horizontal);--button-font-size-large: var(--font-size-large);--button-font-size-small: var(--font-size-small);--button-padding-vertical-large: calc(var(--button-padding-vertical) * 1.1);--button-padding-horizontal-large: calc(var(--button-padding-horizontal) * 1.1);--button-padding-large: var(--button-padding-vertical-large) var(--button-padding-horizontal-large);--button-padding-vertical-small: calc(var(--button-padding-vertical) * .9);--button-padding-horizontal-small: calc(var(--button-padding-horizontal) * .9);--button-padding-small: var(--button-padding-vertical-small) var(--button-padding-horizontal-small)}.button{display:inline-block;padding:var(--button-padding);border-radius:var(--border-radius);font-family:var(--font-family);font-size:var(--button-font-size);cursor:pointer;transition:background-color var(--transition-speed),color var(--transition-speed),border-color var(--transition-speed);text-align:center;border:1px solid transparent;box-shadow:var(--box-shadow);margin-right:10px;color:var(--button-text-color, var(--text-color))}.button--small{font-size:var(--button-font-size-small);padding:var(--button-padding-small)}.button--medium{font-size:var(--button-font-size);padding:var(--button-padding)}.button--large{font-size:var(--button-font-size-large);padding:var(--button-padding-large)}.button--solid{background-color:var(--button-bg-color, var(--primary-color));color:var(--button-text-color, var(--text-color-inverse))}.button--outline{background-color:transparent;border:1px solid var(--button-border-color, var(--primary-color));color:var(--button-border-color, var(--primary-color))}.button--primary-color{--button-bg-color: var(--primary-color);--button-border-color: var(--primary-color);--button-text-color: var(--text-color-inverse)}.button--secondary-color{--button-bg-color: var(--secondary-color);--button-border-color: var(--secondary-color);--button-text-color: var(--text-color-inverse)}.button--info-color{--button-bg-color: var(--info-color);--button-border-color: var(--info-color);--button-text-color: var(--text-color-inverse)}.button--warning-color{--button-bg-color: var(--warning-color);--button-border-color: var(--warning-color);--button-text-color: var(--text-color-inverse)}.button--alert-color{--button-bg-color: var(--alert-color);--button-border-color: var(--alert-color);--button-text-color: var(--dark-color)}.button--success-color{--button-bg-color: var(--success-color);--button-border-color: var(--success-color);--button-text-color: var(--text-color-inverse)}.button--neutral-color{--button-bg-color: var(--neutral-color);--button-border-color: var(--neutral-color);--button-text-color: var(--text-color-inverse)}.button--dark-color{--button-bg-color: var(--dark-color);--button-border-color: var(--dark-color);--button-text-color: var(--text-color-inverse)}.button--outline.button--info-color{--button-border-color: var(--info-color);--button-text-color: var(--info-color)}.button--outline.button--warning-color{--button-border-color: var(--warning-color);--button-text-color: var(--warning-color)}.button--outline.button--alert-color{--button-border-color: var(--alert-color);--button-text-color: var(--alert-color)}.button--outline.button--success-color{--button-border-color: var(--success-color);--button-text-color: var(--success-color)}.button--outline.button--neutral-color{--button-border-color: var(--neutral-color);--button-text-color: var(--neutral-color)}.button--outline.button--dark-color{--button-border-color: var(--dark-color);--button-text-color: var(--dark-color)}.button--classy-color-1{--button-bg-color: var(--classy-color-1);--button-border-color: var(--classy-color-1);--button-text-color: var(--text-color-inverse)}.button--classy-color-2{--button-bg-color: var(--classy-color-2);--button-border-color: var(--classy-color-2);--button-text-color: var(--text-color-inverse)}.button--classy-color-3{--button-bg-color: var(--classy-color-3);--button-border-color: var(--classy-color-3);--button-text-color: var(--text-color-inverse)}.button--classy-color-4{--button-bg-color: var(--classy-color-4);--button-border-color: var(--classy-color-4);--button-text-color: var(--text-color-inverse)}.button--classy-color-5{--button-bg-color: var(--classy-color-5);--button-border-color: var(--classy-color-5);--button-text-color: var(--text-color-inverse)}.button--small-switch-color-1{--button-bg-color: var(--small-switch-color-1);--button-border-color: var(--small-switch-color-1);--button-text-color: var(--text-color-inverse)}.button--small-switch-color-2{--button-bg-color: var(--small-switch-color-2);--button-border-color: var(--small-switch-color-2);--button-text-color: var(--text-color-inverse)}.button--natural-color-1{--button-bg-color: var(--natural-color-1);--button-border-color: var(--natural-color-1);--button-text-color: var(--text-color-inverse)}.button--natural-color-2{--button-bg-color: var(--natural-color-2);--button-border-color: var(--natural-color-2);--button-text-color: var(--text-color-inverse)}.button--natural-color-3{--button-bg-color: var(--natural-color-3);--button-border-color: var(--natural-color-3);--button-text-color: var(--text-color-inverse)}.button--grey-friend-1{--button-bg-color: var(--grey-friend-1);--button-border-color: var(--grey-friend-1);--button-text-color: var(--text-color-inverse)}.button--grey-friend-2{--button-bg-color: var(--grey-friend-2);--button-border-color: var(--grey-friend-2);--button-text-color: var(--text-color-inverse)}.button--shade-1{--button-bg-color: var(--shade-1);--button-border-color: var(--shade-1);--button-text-color: var(--text-color-inverse)}.button--shade-2{--button-bg-color: var(--shade-2);--button-border-color: var(--shade-2);--button-text-color: var(--text-color-inverse)}.button--shade-3{--button-bg-color: var(--shade-3);--button-border-color: var(--shade-3);--button-text-color: var(--text-color-inverse)}.button--shade-4{--button-bg-color: var(--shade-4);--button-border-color: var(--shade-4);--button-text-color: var(--text-color-inverse)}.button--outline.button--primary-color{--button-border-color: var(--primary-color);--button-text-color: var(--primary-color)}.button--outline.button--classy-color-1{--button-border-color: var(--classy-color-1);--button-text-color: var(--classy-color-1)}.button--outline.button--classy-color-2{--button-border-color: var(--classy-color-2);--button-text-color: var(--classy-color-2)}.button--outline.button--classy-color-3{--button-border-color: var(--classy-color-3);--button-text-color: var(--classy-color-3)}.button--outline.button--classy-color-4{--button-border-color: var(--classy-color-4);--button-text-color: var(--classy-color-4)}.button--outline.button--classy-color-5{--button-border-color: var(--classy-color-5);--button-text-color: var(--classy-color-5)}.button--outline.button--natural-color-1{--button-border-color: var(--natural-color-1);--button-text-color: var(--natural-color-1)}.button--outline.button--natural-color-2{--button-border-color: var(--natural-color-2);--button-text-color: var(--natural-color-2)}.button--outline.button--natural-color-3{--button-border-color: var(--natural-color-3);--button-text-color: var(--natural-color-3)}.button--outline.button--grey-friend-1{--button-border-color: var(--grey-friend-1);--button-text-color: var(--grey-friend-1)}.button--outline.button--grey-friend-2{--button-border-color: var(--grey-friend-2);--button-text-color: var(--grey-friend-2)}.button--outline.button--shade-1{--button-border-color: var(--shade-1);--button-text-color: var(--shade-1)}.button--outline.button--shade-2{--button-border-color: var(--shade-2);--button-text-color: var(--shade-2)}.button--outline.button--shade-3{--button-border-color: var(--shade-3);--button-text-color: var(--shade-3)}.button--outline.button--shade-4{--button-border-color: var(--shade-4);--button-text-color: var(--shade-4)}.button--no-border{border:none}.link{color:var(--link-color);font-size:var(--font-size-base);font-family:var(--font-family);transition:color var(--transition-speed) ease,text-decoration var(--transition-speed) ease}.link:hover{color:var(--link-hover-color);text-decoration:underline}.link__external-icon{margin-left:.25em;font-size:.8em}.link__preview{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:90%;max-width:700px;height:90%;max-height:500px;background-color:#fff;border:2px solid var(--primary-color);box-shadow:var(--box-shadow);z-index:var(--z-index-modal);overflow:hidden}.link__preview-iframe{width:100%;height:100%;border:none}@media (max-width: 768px){.link__preview{width:95%;height:80%;max-width:90%;max-height:400px}}.icon-container{display:inline-flex;align-items:center;justify-content:center}.icon-container--background{background-color:var(--color-var)}.icon-container--shape-rounded{border-radius:50%}.icon-container--shape-square{border-radius:0}.icon-container--size-small{width:var(--font-size-small);height:var(--font-size-small)}.icon-container--size-normal{width:var(--font-size-base);height:var(--font-size-base)}.icon-container--size-big{width:var(--font-size-large);height:var(--font-size-large)}.icon-container--align-left{justify-content:flex-start}.icon-container--align-center{justify-content:center}.icon-container--align-right{justify-content:flex-end}.icon-container--color-info{background-color:var(--info-color)}.icon-container--color-warning{background-color:var(--warning-color)}.icon-container--color-alert{background-color:var(--alert-color)}.icon-container--color-success{background-color:var(--success-color)}.icon-container--color-neutral{background-color:var(--neutral-color)}.icon-container--color-dark{background-color:var(--dark-color)}.icon-container--color-classy-color-1{background-color:var(--classy-color-1)}.icon-container--color-classy-color-2{background-color:var(--classy-color-2)}.icon-container--color-classy-color-3{background-color:var(--classy-color-3)}.icon-container--color-classy-color-4{background-color:var(--classy-color-4)}.icon-container--color-classy-color-5{background-color:var(--classy-color-5)}.icon-container--color-small-switch-color-1{background-color:var(--small-switch-color-1)}.icon-container--color-small-switch-color-2{background-color:var(--small-switch-color-2)}.icon-container--color-natural-color-1{background-color:var(--natural-color-1)}.icon-container--color-natural-color-2{background-color:var(--natural-color-2)}.icon-container--color-natural-color-3{background-color:var(--natural-color-3)}.icon-container--color-grey-friend-1{background-color:var(--grey-friend-1)}.icon-container--color-grey-friend-2{background-color:var(--grey-friend-2)}.icon-container--color-shade-1{background-color:var(--shade-1)}.icon-container--color-shade-2{background-color:var(--shade-2)}.icon-container--color-shade-3{background-color:var(--shade-3)}.icon-container--color-shade-4{background-color:var(--shade-4)}.icon{display:inline-block}.icon--color-info{color:var(--info-color)}.icon--color-warning{color:var(--warning-color)}.icon--color-alert{color:var(--alert-color)}.icon--color-success{color:var(--success-color)}.icon--color-neutral{color:var(--neutral-color)}.icon--color-dark{color:var(--dark-color)}.icon--color-classy-color-1{color:var(--classy-color-1)}.icon--color-classy-color-2{color:var(--classy-color-2)}.icon--color-classy-color-3{color:var(--classy-color-3)}.icon--color-classy-color-4{color:var(--classy-color-4)}.icon--color-classy-color-5{color:var(--classy-color-5)}.icon--color-small-switch-color-1{color:var(--small-switch-color-1)}.icon--color-small-switch-color-2{color:var(--small-switch-color-2)}.icon--color-natural-color-1{color:var(--natural-color-1)}.icon--color-natural-color-2{color:var(--natural-color-2)}.icon--color-natural-color-3{color:var(--natural-color-3)}.icon--color-grey-friend-1{color:var(--grey-friend-1)}.icon--color-grey-friend-2{color:var(--grey-friend-2)}.icon--color-shade-1{color:var(--shade-1)}.icon--color-shade-2{color:var(--shade-2)}.icon--color-shade-3{color:var(--shade-3)}.icon--color-shade-4{color:var(--shade-4)}.icon--size-small{font-size:var(--font-size-small)}.icon--size-normal{font-size:var(--font-size-base)}.icon--size-big{font-size:var(--font-size-large)}.checkbox{position:relative;display:inline-flex;align-items:center;cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-color);-webkit-user-select:none;user-select:none}.checkbox--disabled{cursor:not-allowed;opacity:.6}.checkbox input{opacity:0;position:absolute;cursor:pointer;height:0;width:0}.checkbox:before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;border:2px solid var(--border-color);border-radius:4px;background-color:var(--background-color);transition:background-color var(--transition-speed),border-color var(--transition-speed)}.checkbox input:checked+.checkbox__label:before{background-color:var(--primary-color);border-color:var(--primary-color)}.checkbox input:checked+.checkbox__label:after{content:"";position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid var(--text-color-inverse);border-width:0 2px 2px 0;transform:rotate(45deg)}.checkbox--primary:before{border-color:var(--primary-color)}.checkbox--secondary:before{border-color:var(--secondary-color)}.checkbox--small{font-size:var(--font-size-small)}.checkbox--large{font-size:var(--font-size-large)}.checkbox--small:before{width:12px;height:12px}.checkbox--large:before{width:20px;height:20px}.checkbox--rounded:before{border-radius:50%}.radio-button{position:relative;display:inline-flex;align-items:center;cursor:pointer;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-color);-webkit-user-select:none;user-select:none}.radio-button--disabled{cursor:not-allowed;opacity:.6}.radio-button input{opacity:0;position:absolute;cursor:pointer;height:0;width:0}.radio-button:before{content:"";display:inline-block;width:16px;height:16px;margin-right:8px;border:2px solid var(--border-color);border-radius:50%;background-color:var(--background-color);transition:background-color var(--transition-speed),border-color var(--transition-speed)}.radio-button input:checked+.radio-button__label:before{background-color:var(--primary-color);border-color:var(--primary-color)}.radio-button input:checked+.radio-button__label:after{content:"";position:absolute;left:6px;top:6px;width:6px;height:6px;background-color:var(--text-color-inverse);border-radius:50%}.radio-button--primary:before{border-color:var(--primary-color)}.radio-button--secondary:before{border-color:var(--secondary-color)}.radio-button--small{font-size:var(--font-size-small)}.radio-button--large{font-size:var(--font-size-large)}.radio-button--small:before{width:12px;height:12px}.radio-button--large:before{width:20px;height:20px}.info{--primary-color: var(--info-color)}.warning{--primary-color: var(--warning-color)}.alert{--primary-color: var(--alert-color)}.success{--primary-color: var(--success-color)}.neutral{--primary-color: var(--neutral-color)}.dark{--primary-color: var(--dark-color)}.classy-color-1{--primary-color: var(--classy-color-1)}.classy-color-2{--primary-color: var(--classy-color-2)}.classy-color-3{--primary-color: var(--classy-color-3)}.classy-color-4{--primary-color: var(--classy-color-4)}.classy-color-5{--primary-color: var(--classy-color-5)}.small-switch-color-1{--primary-color: var(--small-switch-color-1)}.small-switch-color-2{--primary-color: var(--small-switch-color-2)}.natural-color-1{--primary-color: var(--natural-color-1)}.natural-color-2{--primary-color: var(--natural-color-2)}.natural-color-3{--primary-color: var(--natural-color-3)}.grey-friend-1{--primary-color: var(--grey-friend-1)}.grey-friend-2{--primary-color: var(--grey-friend-2)}.shade-1{--primary-color: var(--shade-1)}.shade-2{--primary-color: var(--shade-2)}.shade-3{--primary-color: var(--shade-3)}.shade-4{--primary-color: var(--shade-4)}.toggle{display:inline-flex;align-items:center;cursor:pointer}.toggle__switch{position:relative;width:40px;height:20px;border-radius:var(--border-radius);background-color:var(--off-color, var(--neutral-color));transition:background-color var(--transition-speed)}.toggle__knob{position:absolute;top:50%;left:2px;width:16px;height:16px;background-color:var(--knob-color, var(--text-color-inverse));border-radius:50%;transform:translateY(-50%);transition:left var(--transition-speed)}.toggle--checked .toggle__switch{background-color:var(--on-color, var(--primary-color))}.toggle--checked .toggle__knob{left:calc(100% - 18px)}.toggle--disabled{opacity:.6;cursor:not-allowed}.toggle--small .toggle__switch{width:30px;height:16px}.toggle--small .toggle__knob{width:12px;height:12px}.toggle--large .toggle__switch{width:60px;height:30px}.toggle--large .toggle__knob{width:26px;height:26px}.toggle--primary .toggle__switch{background-color:var(--primary-color)}.toggle--secondary .toggle__switch{background-color:var(--secondary-color)}.toggle--info .toggle__switch{background-color:var(--info-color)}.toggle--warning .toggle__switch{background-color:var(--warning-color)}.toggle--alert .toggle__switch{background-color:var(--alert-color)}.toggle--success .toggle__switch{background-color:var(--success-color)}.toggle--neutral .toggle__switch{background-color:var(--neutral-color)}.toggle--dark .toggle__switch{background-color:var(--dark-color)}.toggle--classy-color-1{background-color:var(--classy-color-1)}.toggle--classy-color-2{background-color:var(--classy-color-2)}.toggle--classy-color-3{background-color:var(--classy-color-3)}.toggle--classy-color-4{background-color:var(--classy-color-4)}.toggle--classy-color-5{background-color:var(--classy-color-5)}.toggle--small-switch-color-1{background-color:var(--small-switch-color-1)}.toggle--small-switch-color-2{background-color:var(--small-switch-color-2)}.toggle--natural-color-1{background-color:var(--natural-color-1)}.toggle--natural-color-2{background-color:var(--natural-color-2)}.toggle--natural-color-3{background-color:var(--natural-color-3)}.toggle--grey-friend-1{background-color:var(--grey-friend-1)}.toggle--grey-friend-2{background-color:var(--grey-friend-2)}.toggle--shade-1{background-color:var(--shade-1)}.toggle--shade-2{background-color:var(--shade-2)}.toggle--shade-3{background-color:var(--shade-3)}.toggle--shade-4{background-color:var(--shade-4)}.text-input{display:flex;align-items:center;font-family:var(--font-family);width:100%;padding:var(--spacing-sm);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--text-color);font-size:var(--font-size-base);transition:border-color var(--transition-speed),box-shadow var(--transition-speed)}.text-input__input{width:100%;padding:var(--spacing-sm);border:none;background:transparent;color:inherit;font-size:inherit;font-family:inherit;outline:none}.text-input--small .text-input__input{font-size:var(--font-size-small)}.text-input--large .text-input__input{font-size:var(--font-size-large)}.text-input--disabled{background-color:var(--neutral-color-hover);cursor:not-allowed}.text-input--primary{border-color:var(--primary-color)}.text-input--secondary{border-color:var(--secondary-color)}.text-input--info{border-color:var(--info-color)}.text-input--warning{border-color:var(--warning-color)}.text-input--alert{border-color:var(--alert-color)}.text-input--success{border-color:var(--success-color)}.text-input--neutral{border-color:var(--neutral-color)}.text-input--dark{border-color:var(--dark-color)}.text-input__clear-button{background:none;border:none;font-size:inherit;color:inherit;cursor:pointer}.text-input--loading{background-color:#f0f0f0}.text-input__spinner{margin-left:var(--spacing-sm);width:20px;height:20px;border-radius:50%;border:3px solid rgba(0,0,0,.1);border-top-color:var(--primary-color);animation:spin 1s linear infinite}.textarea-wrapper{display:flex;flex-direction:column;margin-bottom:1rem}.textarea{padding:10px;border:1px solid var(--border-color, #ccc);border-radius:5px;font-family:var(--font-family, sans-serif);font-size:var(--font-size, 16px);width:100%;transition:border-color .3s ease}.textarea:focus{border-color:var(--primary-color);outline:none}.textarea--bold{font-weight:700}.textarea--italic{font-style:italic}.textarea--underline{text-decoration:underline}.textarea--primary{color:var(--primary-color)}.textarea--info{color:var(--info-color)}.textarea--warning{color:var(--warning-color)}.textarea--alert{color:var(--alert-color)}.textarea--success{color:var(--success-color)}.textarea--neutral{color:var(--neutral-color)}.textarea--dark{color:var(--dark-color)}.textarea--error{border-color:var(--error-color, red)}.textarea-error{color:red;margin-top:5px}.textarea-helper{color:var(--muted-text-color, #777);margin-top:5px}.textarea--disabled{background-color:#f5f5f5;cursor:not-allowed}.textarea--collapsible{display:none}.textarea-wrapper button{margin-top:10px;padding:5px 10px;border:none;background-color:var(--primary-color);color:#fff;cursor:pointer;border-radius:5px}.select{display:flex;flex-direction:column;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-color);width:100%}.select__label{margin-bottom:var(--spacing-sm);font-weight:var(--font-weight-medium)}.select__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;padding:var(--spacing-sm);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--text-color);font-size:var(--font-size-base);transition:border-color var(--transition-speed),box-shadow var(--transition-speed);cursor:pointer}.select__input:focus{border-color:var(--primary-color);box-shadow:0 0 0 3px var(--primary-color-hover);outline:none}.select--disabled .select__input{background-color:var(--neutral-color-hover);cursor:not-allowed}.select--primary .select__input{border-color:var(--primary-color)}.select--secondary .select__input{border-color:var(--secondary-color)}.select--info .select__input{border-color:var(--info-color)}.select--warning .select__input{border-color:var(--warning-color)}.select--alert .select__input{border-color:var(--alert-color)}.select--success .select__input{border-color:var(--success-color)}.select--neutral .select__input{border-color:var(--neutral-color)}.select--dark .select__input{border-color:var(--dark-color)}@media (max-width: 768px){.select__input{font-size:var(--font-size-small)}}@media (max-width: 480px){.select__input{font-size:var(--font-size-small);padding:var(--spacing-xs)}}.slider{display:flex;flex-direction:column;width:100%;font-family:var(--font-family);color:var(--text-color)}.slider__label{margin-bottom:var(--spacing-sm);font-weight:var(--font-weight-medium)}.slider__wrapper{position:relative;width:100%;height:8px;background-color:var(--neutral-color-hover);border-radius:4px}.slider__track{position:absolute;width:100%;height:8px;border-radius:4px;background-color:var(--neutral-color-hover)}.slider__filled{position:absolute;height:8px;border-radius:4px;transition:background-color var(--transition-speed)}.slider__thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;width:20px;height:20px;background-color:var(--thumb-color);border-radius:50%;top:-6px;cursor:pointer;transition:background-color var(--transition-speed)}.slider__thumb:focus{outline:none;box-shadow:0 0 0 3px var(--primary-color-hover)}.slider__values{display:flex;justify-content:space-between;margin-top:var(--spacing-sm)}.slider--disabled .slider__thumb{cursor:not-allowed;background-color:var(--neutral-color-hover)}.slider--primary .slider__filled{background-color:var(--primary-color)}.slider--secondary .slider__filled{background-color:var(--secondary-color)}@media (max-width: 768px){.slider__thumb{width:15px;height:15px}}@media (max-width: 480px){.slider__thumb{width:12px;height:12px}}.range{display:flex;align-items:center;width:100%;font-family:var(--font-family);font-size:var(--font-size-base);color:var(--text-color)}.range__label{margin-right:var(--spacing-md);font-weight:var(--font-weight-medium)}.range__wrapper{flex-grow:1;position:relative}.range__input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:8px;background:linear-gradient(to right,var(--primary-color) 0%,var(--primary-color) 0%,var(--neutral-color) 0%);border-radius:5px;outline:none;transition:background-size var(--transition-speed)}.range__input::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;background-color:var(--thumb-color);border-radius:50%;cursor:pointer;transition:background-color var(--transition-speed)}.range__input::-moz-range-thumb{width:20px;height:20px;background-color:var(--thumb-color);border-radius:50%;cursor:pointer}.range__value{margin-left:var(--spacing-md);font-weight:var(--font-weight-medium)}.range--disabled .range__input{background-color:var(--neutral-color-hover)}.range--disabled .range__input::-webkit-slider-thumb{background-color:var(--neutral-color-hover)}@media (max-width: 768px){.range__input{height:6px}.range__input::-webkit-slider-thumb{width:16px;height:16px}.range__input::-moz-range-thumb{width:16px;height:16px}}@media (max-width: 480px){.range__input{height:4px}.range__input::-webkit-slider-thumb{width:12px;height:12px}.range__input::-moz-range-thumb{width:12px;height:12px}}.range--primary .range__input{background:linear-gradient(to right,var(--primary-color) 0%,var(--neutral-color) 0%)}.range--secondary .range__input{background:linear-gradient(to right,var(--secondary-color) 0%,var(--neutral-color) 0%)}.range--info .range__input{background:linear-gradient(to right,var(--info-color) 0%,var(--neutral-color) 0%)}.range--warning .range__input{background:linear-gradient(to right,var(--warning-color) 0%,var(--neutral-color) 0%)}.range--alert .range__input{background:linear-gradient(to right,var(--alert-color) 0%,var(--neutral-color) 0%)}.range--success .range__input{background:linear-gradient(to right,var(--success-color) 0%,var(--neutral-color) 0%)}.range--neutral .range__input{background:linear-gradient(to right,var(--neutral-color) 0%,var(--neutral-color) 0%)}.range--dark .range__input{background:linear-gradient(to right,var(--dark-color) 0%,var(--neutral-color) 0%)}.image-figure{position:relative;display:inline-block;margin:0}.image__placeholder{width:100%;height:100%;background-color:var(--neutral-color);display:flex;align-items:center;justify-content:center;color:var(--background-color);position:absolute;top:0;left:0}.image{display:block;width:100%;height:auto;object-fit:cover;cursor:pointer;transition:transform var(--transition-speed) ease,box-shadow var(--transition-speed) ease,opacity var(--transition-speed) ease;opacity:0}.image--loaded,.image--error{opacity:1}.image--thumbnail{max-width:100%;height:auto}.image--avatar{border-radius:50%;object-fit:cover;max-width:100%;height:auto}.image--expanded{cursor:default}.image--flat{cursor:default;max-width:none}.image--16by9{aspect-ratio:16 / 9}.image--4by3{aspect-ratio:4 / 3}.image--1by1{aspect-ratio:1 / 1}.image--crop-center{object-position:center}.image--crop-top{object-position:top}.image--crop-left{object-position:left}.image--size-xs{width:30px;height:30px}.image--size-sm{width:50px;height:50px}.image--size-md{width:100px;height:100px}.image--size-lg{width:150px;height:150px}.image--size-xl{width:200px;height:200px}.image:hover{transform:scale(1.05);box-shadow:var(--box-shadow)}.image__caption{text-align:center;margin-top:var(--spacing-sm);font-size:var(--font-size-small);color:var(--muted-text-color)}.image__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#00000080;opacity:0;transition:opacity var(--transition-speed) ease;display:flex;align-items:center;justify-content:center}.image-figure:hover .image__overlay{opacity:1}.image__overlay-caption{color:#fff;font-size:var(--font-size-base);text-align:center}.image__overlay-icons{display:flex;gap:10px}.image__overlay-icons--center{justify-content:center}.image__overlay-icons--top-right{position:absolute;top:var(--spacing-sm);right:var(--spacing-sm)}.image__overlay-icon{color:#fff;font-size:1.5em;cursor:pointer}.image__modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#000c;display:flex;align-items:center;justify-content:center;z-index:var(--z-index-modal)}.image__modal-content{position:relative;width:90%;max-width:700px;height:90%;max-height:500px;background-color:#fff;border-radius:var(--border-radius);box-shadow:var(--box-shadow);overflow:hidden}.image__modal-img{width:100%;height:auto;border-radius:var(--border-radius)}.image__modal-caption{margin-top:var(--spacing-sm);text-align:center;color:var(--text-color);font-size:var(--font-size-small)}.image__modal-close{position:absolute;top:var(--spacing-xs);right:var(--spacing-xs);background:none;border:none;color:var(--dark-color);font-size:2rem;cursor:pointer}@media (max-width: 768px){.image--avatar{width:80px;height:80px}.image__modal-content{width:95%;height:80%;max-width:90%;max-height:400px}.image__overlay-caption{font-size:var(--font-size-small)}.image__overlay-icon{font-size:1.2em}}.image--flat:hover{transform:none;box-shadow:none}.video-container{position:relative;overflow:hidden;background-color:#000;display:inline-block}video{width:100%;height:100%}.video-controls{position:absolute;bottom:10px;left:10px;z-index:10;display:none;transition:opacity .3s ease}.video-container.show-controls .video-controls{display:block}.video-controls button{background-color:#0009;border:none;color:#fff;padding:8px 16px;border-radius:5px;cursor:pointer;font-size:14px}.video-controls button:hover{background-color:#000c}.audio{display:flex;align-items:center;background-color:#f5f5f54d;padding:var(--spacing-sm, 8px);border-radius:var(--border-radius, 6px);gap:var(--spacing-sm, 8px);max-width:300px;border:1px solid var(--border-color, #dddddd);position:relative;transition:background-color var(--transition-speed, .3s)}.audio:hover{background-color:#f5f5f580}.audio--small{max-width:200px}.audio--medium{max-width:300px}.audio--classy-color-1{--icon-color: var(--classy-color-1)}.audio--classy-color-2{--icon-color: var(--classy-color-2)}.audio--classy-color-3{--icon-color: var(--classy-color-3)}.audio--classy-color-4{--icon-color: var(--classy-color-4)}.audio--classy-color-5{--icon-color: var(--classy-color-5)}.audio--small-switch-color-1{--icon-color: var(--small-switch-color-1)}.audio--small-switch-color-2{--icon-color: var(--small-switch-color-2)}.audio--natural-color-1{--icon-color: var(--natural-color-1)}.audio--natural-color-2{--icon-color: var(--natural-color-2)}.audio--natural-color-3{--icon-color: var(--natural-color-3)}.audio--grey-friend-1{--icon-color: var(--grey-friend-1)}.audio--grey-friend-2{--icon-color: var(--grey-friend-2)}.audio--shade-1{--icon-color: var(--shade-1)}.audio--shade-2{--icon-color: var(--shade-2)}.audio--shade-3{--icon-color: var(--shade-3)}.audio--shade-4{--icon-color: var(--shade-4)}.audio__play-pause,.audio__mute{background-color:#80808033;border:none;border-radius:50%;padding:var(--spacing-xs, 6px);cursor:pointer;transition:background-color var(--transition-speed, .3s);display:flex;align-items:center;justify-content:center;color:var(--icon-color, #344b47)}.audio__play-pause:hover,.audio__mute:hover{background-color:#80808066}.audio__seek{display:flex;align-items:center;gap:var(--spacing-xs, 4px);flex:1}.audio__seek-slider{width:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--grey-friend-2, #96b1ac);border-radius:2px;outline:none;transition:background var(--transition-speed, .3s)}.audio__seek-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--icon-color, #344b47);border-radius:50%;cursor:pointer;margin-top:-4px;transition:background var(--transition-speed, .3s)}.audio__seek-slider::-moz-range-thumb{width:12px;height:12px;background:var(--icon-color, #344b47);border-radius:50%;cursor:pointer;transition:background var(--transition-speed, .3s)}.audio__seek-slider:hover{background:var(--grey-friend-1, #344b47)}.audio__seek-slider:hover::-webkit-slider-thumb,.audio__seek-slider:hover::-moz-range-thumb{background:var(--icon-color, #344b47)}.audio__time{font-size:var(--font-size-small, .9em);color:var(--icon-color, #344b47);white-space:nowrap}.audio__volume-container{position:relative;display:flex;align-items:center}.audio__volume-slider{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);width:100px;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--grey-friend-2, #96b1ac);border-radius:2px;outline:none;transition:opacity var(--transition-speed, .3s);opacity:0;pointer-events:none;z-index:10}.audio__volume-slider.visible{opacity:1;pointer-events:auto}.audio__volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--icon-color, #344b47);border-radius:50%;cursor:pointer;transition:background var(--transition-speed, .3s)}.audio__volume-slider::-moz-range-thumb{width:12px;height:12px;background:var(--icon-color, #344b47);border-radius:50%;cursor:pointer;transition:background var(--transition-speed, .3s)}.audio__volume-slider:hover{background:var(--grey-friend-1, #344b47)}.audio__volume-slider:hover::-webkit-slider-thumb,.audio__volume-slider:hover::-moz-range-thumb{background:var(--icon-color, #344b47)}.audio:hover .audio__volume-slider,.audio__volume-slider.visible{opacity:1;pointer-events:auto}@media (max-width: 768px){.audio--small{max-width:150px}.audio--medium{max-width:250px}.audio{flex-direction:column;align-items:flex-start;gap:var(--spacing-xs, 4px)}.audio__seek{width:100%}.audio__volume-slider{bottom:-35px;width:80px}}.divider{border:none;height:1px;margin:var(--spacing-md) 0;background-color:var(--neutral-color);transition:background-color var(--transition-speed) ease,height var(--transition-speed) ease}.divider--thin{height:1px}.divider--normal{height:2px}.divider--bold{height:3px}.divider--small{width:25%}.divider--medium{width:50%}.divider--large{width:75%}.divider--align-left{margin-left:0}.divider--align-center{margin-left:auto;margin-right:auto}.divider--align-right{margin-right:0}.info{background-color:var(--info-color)}.warning{background-color:var(--warning-color)}.alert{background-color:var(--alert-color)}.success{background-color:var(--success-color)}.neutral{background-color:var(--neutral-color)}.dark{background-color:var(--dark-color)}.classy-color-1{background-color:var(--classy-color-1)}.classy-color-2{background-color:var(--classy-color-2)}.classy-color-3{background-color:var(--classy-color-3)}.classy-color-4{background-color:var(--classy-color-4)}.classy-color-5{background-color:var(--classy-color-5)}.small-switch-color-1{background-color:var(--small-switch-color-1)}.small-switch-color-2{background-color:var(--small-switch-color-2)}.natural-color-1{background-color:var(--natural-color-1)}.natural-color-2{background-color:var(--natural-color-2)}.natural-color-3{background-color:var(--natural-color-3)}.grey-friend-1{background-color:var(--grey-friend-1)}.grey-friend-2{background-color:var(--grey-friend-2)}.shade-1{background-color:var(--shade-1)}.shade-2{background-color:var(--shade-2)}.shade-3{background-color:var(--shade-3)}.shade-4{background-color:var(--shade-4)}@media (max-width: 768px){.divider--small,.divider--medium,.divider--large{width:100%}}.spacer{display:block;flex-shrink:0}.spacer--vertical{width:100%}.spacer--xs.spacer--vertical{height:4px}.spacer--sm.spacer--vertical{height:8px}.spacer--md.spacer--vertical{height:16px}.spacer--lg.spacer--vertical{height:32px}.spacer--xl.spacer--vertical{height:64px}.spacer--horizontal{height:100%}.spacer--xs.spacer--horizontal{width:4px}.spacer--sm.spacer--horizontal{width:8px}.spacer--md.spacer--horizontal{width:16px}.spacer--lg.spacer--horizontal{width:32px}.spacer--xl.spacer--horizontal{width:64px}@media (max-width: 768px){.spacer--responsive .spacer--xs{height:2px;width:2px}.spacer--responsive .spacer--sm{height:4px;width:4px}.spacer--responsive .spacer--md{height:8px;width:8px}.spacer--responsive .spacer--lg{height:16px;width:16px}.spacer--responsive .spacer--xl{height:32px;width:32px}}@media (max-width: 480px){.spacer--responsive .spacer--xs{height:1px;width:1px}.spacer--responsive .spacer--sm{height:2px;width:2px}.spacer--responsive .spacer--md{height:4px;width:4px}.spacer--responsive .spacer--lg{height:8px;width:8px}.spacer--responsive .spacer--xl{height:16px;width:16px}}.tooltip-wrapper{position:relative;display:inline-block}.tooltip{position:absolute;visibility:hidden;opacity:0;background-color:var(--tooltip-background-color, #333);color:var(--tooltip-text-color, #fff);text-align:center;padding:8px;border-radius:4px;transition:opacity .3s ease,visibility .3s ease;z-index:999;font-size:var(--font-size-base, 14px)}.tooltip--visible{visibility:visible;opacity:1}.tooltip__arrow{position:absolute;width:0;height:0;border-style:solid}.tooltip--top{bottom:100%;left:50%;transform:translate(-50%)}.tooltip--top .tooltip__arrow{top:100%;left:50%;border-width:6px 6px 0 6px;border-color:var(--tooltip-background-color) transparent transparent transparent}.tooltip--bottom{top:100%;left:50%;transform:translate(-50%)}.tooltip--bottom .tooltip__arrow{bottom:100%;left:50%;border-width:0 6px 6px 6px;border-color:transparent transparent var(--tooltip-background-color) transparent}.tooltip--left{right:100%;top:50%;transform:translateY(-50%)}.tooltip--left .tooltip__arrow{right:-6px;top:50%;border-width:6px 6px 6px 0;border-color:transparent var(--tooltip-background-color) transparent transparent}.tooltip--right{left:100%;top:50%;transform:translateY(-50%)}.tooltip--right .tooltip__arrow{left:-6px;top:50%;border-width:6px 0 6px 6px;border-color:transparent transparent transparent var(--tooltip-background-color)}.tooltip--north{top:-120%;left:50%;transform:translate(-50%)}.tooltip--south{bottom:-120%;left:50%;transform:translate(-50%)}.tooltip--east{left:120%;top:50%;transform:translateY(-50%)}.tooltip--west{right:120%;top:50%;transform:translateY(-50%)}.tooltip--primary{background-color:var(--primary-color, #1F877D);color:#fff}.tooltip--primary-primary{background-color:var(--primary-color, #1F877D);color:#fff}.tooltip--primary-secondary{background-color:var(--secondary-color, #39a182);color:#fff}.tooltip--primary-info{background-color:var(--info-color, #008699);color:#fff}.tooltip--primary-warning{background-color:var(--warning-color, #FF6F61);color:#fff}.tooltip--primary-alert{background-color:var(--alert-color, #ffcc00);color:#fff}.tooltip--primary-success{background-color:var(--success-color, #00B4B8);color:#fff}.tooltip--primary-neutral{background-color:var(--neutral-color, #a4a4a4);color:#fff}.tooltip--primary-dark{background-color:var(--dark-color, #2C2C2C);color:#fff}.tooltip--primary-classy-color-1{background-color:var(--classy-color-1, #16655c);color:#fff}.tooltip--primary-classy-color-2{background-color:var(--classy-color-2, #96b1ac);color:#fff}.tooltip--primary-classy-color-3{background-color:var(--classy-color-3, #637c78);color:#fff}.tooltip--primary-classy-color-4{background-color:var(--classy-color-4, #405b83);color:#fff}.tooltip--primary-classy-color-5{background-color:var(--classy-color-5, #738db8);color:#fff}.tooltip--primary-small-switch-color-1{background-color:var(--small-switch-color-1, #deefe6);color:#000}.tooltip--primary-small-switch-color-2{background-color:var(--small-switch-color-2, #4e8a6e);color:#fff}.tooltip--primary-natural-color-1{background-color:var(--natural-color-1, #00aa96);color:#fff}.tooltip--primary-natural-color-2{background-color:var(--natural-color-2, #e8fefa);color:#000}.tooltip--primary-natural-color-3{background-color:var(--natural-color-3, #e7fefe);color:#000}.tooltip--primary-grey-friend-1{background-color:var(--grey-friend-1, #344b47);color:#fff}.tooltip--primary-grey-friend-2{background-color:var(--grey-friend-2, #96b1ac);color:#fff}.tooltip--primary-shade-1{background-color:var(--shade-1, #3b847a);color:#fff}.tooltip--primary-shade-2{background-color:var(--shade-2, #5da59a);color:#fff}.tooltip--primary-shade-3{background-color:var(--shade-3, #7ec7bc);color:#fff}.tooltip--primary-shade-4{background-color:var(--shade-4, #a0eade);color:#fff}.tooltip--secondary{background-color:transparent;border:2px solid var(--primary-color, #1F877D);color:var(--primary-color, #1F877D)}.tooltip--secondary-secondary{border-color:var(--secondary-color, #39a182);color:var(--secondary-color, #39a182)}.tooltip--secondary-info{border-color:var(--info-color, #008699);color:var(--info-color, #008699)}.tooltip--secondary-warning{border-color:var(--warning-color, #FF6F61);color:var(--warning-color, #FF6F61)}.tooltip--secondary-alert{border-color:var(--alert-color, #ffcc00);color:var(--alert-color, #ffcc00)}.tooltip--secondary-success{border-color:var(--success-color, #00B4B8);color:var(--success-color, #00B4B8)}.tooltip--secondary-neutral{border-color:var(--neutral-color, #a4a4a4);color:var(--neutral-color, #a4a4a4)}.tooltip--secondary-dark{border-color:var(--dark-color, #2C2C2C);color:var(--dark-color, #2C2C2C)}.tooltip--secondary-classy-color-1{border-color:var(--classy-color-1, #16655c);color:var(--classy-color-1, #16655c)}.tooltip--secondary-classy-color-2{border-color:var(--classy-color-2, #96b1ac);color:var(--classy-color-2, #96b1ac)}.tooltip--secondary-classy-color-3{border-color:var(--classy-color-3, #637c78);color:var(--classy-color-3, #637c78)}.tooltip--secondary-classy-color-4{border-color:var(--classy-color-4, #405b83);color:var(--classy-color-4, #405b83)}.tooltip--secondary-classy-color-5{border-color:var(--classy-color-5, #738db8);color:var(--classy-color-5, #738db8)}.tooltip--secondary-small-switch-color-1{border-color:var(--small-switch-color-1, #deefe6);color:var(--small-switch-color-1, #deefe6)}.tooltip--secondary-small-switch-color-2{border-color:var(--small-switch-color-2, #4e8a6e);color:var(--small-switch-color-2, #4e8a6e)}.tooltip--secondary-natural-color-1{border-color:var(--natural-color-1, #00aa96);color:var(--natural-color-1, #00aa96)}.tooltip--secondary-natural-color-2{border-color:var(--natural-color-2, #e8fefa);color:var(--natural-color-2, #e8fefa)}.tooltip--secondary-natural-color-3{border-color:var(--natural-color-3, #e7fefe);color:var(--natural-color-3, #e7fefe)}.tooltip--secondary-grey-friend-1{border-color:var(--grey-friend-1, #344b47);color:var(--grey-friend-1, #344b47)}.tooltip--secondary-grey-friend-2{border-color:var(--grey-friend-2, #96b1ac);color:var(--grey-friend-2, #96b1ac)}.tooltip--secondary-shade-1{border-color:var(--shade-1, #3b847a);color:var(--shade-1, #3b847a)}.tooltip--secondary-shade-2{border-color:var(--shade-2, #5da59a);color:var(--shade-2, #5da59a)}.tooltip--secondary-shade-3{border-color:var(--shade-3, #7ec7bc);color:var(--shade-3, #7ec7bc)}.tooltip--secondary-shade-4{border-color:var(--shade-4, #a0eade);color:var(--shade-4, #a0eade)}.tooltip-wrapper:hover .tooltip{visibility:visible;opacity:1}.badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:14px;font-weight:600;text-align:center;white-space:nowrap;vertical-align:baseline;margin-right:6px;margin-bottom:6px;border:1px solid transparent}.badge--small{padding:2px 6px;font-size:12px}.badge--large{padding:6px 12px;font-size:16px}.badge--round{padding:0 12px;border-radius:50px;display:inline-flex;align-items:center;justify-content:center;font-size:14px;white-space:nowrap}.badge--primary{background-color:var(--primary-color);color:var(--text-color-inverse)}.badge--primary.info{background-color:var(--info-color)}.badge--primary.warning{background-color:var(--warning-color)}.badge--primary.alert{background-color:var(--alert-color)}.badge--primary.success{background-color:var(--success-color)}.badge--primary.neutral{background-color:var(--neutral-color)}.badge--primary.dark{background-color:var(--dark-color)}.badge--primary.classy-color-1{background-color:var(--classy-color-1)}.badge--primary.classy-color-2{background-color:var(--classy-color-2)}.badge--primary.classy-color-3{background-color:var(--classy-color-3)}.badge--primary.classy-color-4{background-color:var(--classy-color-4)}.badge--primary.classy-color-5{background-color:var(--classy-color-5)}.badge--primary.small-switch-color-1{background-color:var(--small-switch-color-1)}.badge--primary.small-switch-color-2{background-color:var(--small-switch-color-2)}.badge--primary.natural-color-1{background-color:var(--natural-color-1)}.badge--primary.natural-color-2{background-color:var(--natural-color-2)}.badge--primary.natural-color-3{background-color:var(--natural-color-3)}.badge--primary.grey-friend-1{background-color:var(--grey-friend-1)}.badge--primary.grey-friend-2{background-color:var(--grey-friend-2)}.badge--primary.shade-1{background-color:var(--shade-1)}.badge--primary.shade-2{background-color:var(--shade-2)}.badge--primary.shade-3{background-color:var(--shade-3)}.badge--primary.shade-4{background-color:var(--shade-4)}.badge--secondary{background-color:transparent;border-color:var(--primary-color);color:var(--primary-color)}.badge--secondary.info{border-color:var(--info-color);color:var(--info-color)}.badge--secondary.warning{border-color:var(--warning-color);color:var(--warning-color)}.badge--secondary.alert{border-color:var(--alert-color);color:var(--alert-color)}.badge--secondary.success{border-color:var(--success-color);color:var(--success-color)}.badge--secondary.neutral{border-color:var(--neutral-color);color:var(--neutral-color)}.badge--secondary.dark{border-color:var(--dark-color);color:var(--dark-color)}.badge--secondary.classy-color-1{border-color:var(--classy-color-1);color:var(--classy-color-1)}.badge--secondary.classy-color-2{border-color:var(--classy-color-2);color:var(--classy-color-2)}.badge--secondary.classy-color-3{border-color:var(--classy-color-3);color:var(--classy-color-3)}.badge--secondary.classy-color-4{border-color:var(--classy-color-4);color:var(--classy-color-4)}.badge--secondary.classy-color-5{border-color:var(--classy-color-5);color:var(--classy-color-5)}.badge--secondary.small-switch-color-1{border-color:var(--small-switch-color-1);color:var(--small-switch-color-1)}.badge--secondary.small-switch-color-2{border-color:var(--small-switch-color-2);color:var(--small-switch-color-2)}.badge--secondary.natural-color-1{border-color:var(--natural-color-1);color:var(--natural-color-1)}.badge--secondary.natural-color-2{border-color:var(--natural-color-2);color:var(--natural-color-2)}.badge--secondary.natural-color-3{border-color:var(--natural-color-3);color:var(--natural-color-3)}.badge--secondary.grey-friend-1{border-color:var(--grey-friend-1);color:var(--grey-friend-1)}.badge--secondary.grey-friend-2{border-color:var(--grey-friend-2);color:var(--grey-friend-2)}.badge--secondary.shade-1{border-color:var(--shade-1);color:var(--shade-1)}.badge--secondary.shade-2{border-color:var(--shade-2);color:var(--shade-2)}.badge--secondary.shade-3{border-color:var(--shade-3);color:var(--shade-3)}.badge--secondary.shade-4{border-color:var(--shade-4);color:var(--shade-4)}.tag{display:inline-flex;align-items:center;padding:.5rem 1rem;border-radius:12px;font-size:.875rem;cursor:pointer;transition:background-color .3s ease,border-color .3s ease}.tag--small{padding:.25rem .5rem;font-size:.75rem}.tag--large{padding:.75rem 1.25rem;font-size:1rem}.tag--filled{background-color:var(--tag-bg-color, #1F877D);color:#fff}.tag--outlined{background-color:transparent;border:1px solid var(--tag-border-color, #1F877D);color:var(--tag-border-color, #1F877D)}.tag--disabled{opacity:.6;cursor:not-allowed}.tag__remove{background:none;border:none;font-size:1rem;color:inherit;cursor:pointer;margin-left:.5rem}.tag__icon{margin-right:.5rem}.tag--primary{--tag-bg-color: var(--primary-color);--tag-border-color: var(--primary-color)}.tag--secondary{--tag-bg-color: var(--secondary-color);--tag-border-color: var(--secondary-color)}.tag--info{--tag-bg-color: var(--info-color);--tag-border-color: var(--info-color)}.tag--warning{--tag-bg-color: var(--warning-color);--tag-border-color: var(--warning-color)}.tag--alert{--tag-bg-color: var(--alert-color);--tag-border-color: var(--alert-color)}.tag--success{--tag-bg-color: var(--success-color);--tag-border-color: var(--success-color)}.tag--neutral{--tag-bg-color: var(--neutral-color);--tag-border-color: var(--neutral-color)}.tag--dark{--tag-bg-color: var(--dark-color);--tag-border-color: var(--dark-color)}.tag--classy-color-1{--tag-bg-color: var(--classy-color-1);--tag-border-color: var(--classy-color-1)}.tag--classy-color-2{--tag-bg-color: var(--classy-color-2);--tag-border-color: var(--classy-color-2)}.tag--classy-color-3{--tag-bg-color: var(--classy-color-3);--tag-border-color: var(--classy-color-3)}.tag--classy-color-4{--tag-bg-color: var(--classy-color-4);--tag-border-color: var(--classy-color-4)}.tag--classy-color-5{--tag-bg-color: var(--classy-color-5);--tag-border-color: var(--classy-color-5)}.tag--small-switch-color-1{--tag-bg-color: var(--small-switch-color-1);--tag-border-color: var(--small-switch-color-1)}.tag--small-switch-color-2{--tag-bg-color: var(--small-switch-color-2);--tag-border-color: var(--small-switch-color-2)}.tag--natural-color-1{--tag-bg-color: var(--natural-color-1);--tag-border-color: var(--natural-color-1)}.tag--natural-color-2{--tag-bg-color: var(--natural-color-2);--tag-border-color: var(--natural-color-2)}.tag--natural-color-3{--tag-bg-color: var(--natural-color-3);--tag-border-color: var(--natural-color-3)}.tag--grey-friend-1{--tag-bg-color: var(--grey-friend-1);--tag-border-color: var(--grey-friend-1)}.tag--grey-friend-2{--tag-bg-color: var(--grey-friend-2);--tag-border-color: var(--grey-friend-2)}.tag--shade-1{--tag-bg-color: var(--shade-1);--tag-border-color: var(--shade-1)}.tag--shade-2{--tag-bg-color: var(--shade-2);--tag-border-color: var(--shade-2)}.tag--shade-3{--tag-bg-color: var(--shade-3);--tag-border-color: var(--shade-3)}.tag--shade-4{--tag-bg-color: var(--shade-4);--tag-border-color: var(--shade-4)}.loader{display:inline-flex;align-items:center;justify-content:center}.loader--spinner .loader__spinner{border:4px solid var(--loader-background-color, #f3f3f3);border-top:4px solid var(--loader-color, #1F877D);border-radius:50%;width:var(--loader-size, 40px);height:var(--loader-size, 40px);animation:spin 1s linear infinite}.loader--dots .loader__dots{display:flex;gap:8px}.loader--dots .loader__dot{width:12px;height:12px;background-color:var(--loader-color, #1F877D);border-radius:50%;animation:bounce 1.4s infinite ease-in-out both}.loader--dots .loader__dot:nth-child(1){animation-delay:-.32s}.loader--dots .loader__dot:nth-child(2){animation-delay:-.16s}.loader--bars .loader__bars{display:flex;gap:4px}.loader--bars .loader__bar{width:4px;height:20px;background-color:var(--loader-color, #1F877D);animation:stretch 1.2s infinite ease-in-out}.loader--bars .loader__bar:nth-child(1){animation-delay:-.24s}.loader--bars .loader__bar:nth-child(2){animation-delay:-.12s}.loader--size-sm .loader__spinner{width:20px;height:20px;border-width:2px}.loader--size-md .loader__spinner{width:40px;height:40px;border-width:4px}.loader--size-lg .loader__spinner{width:60px;height:60px;border-width:6px}.loader--custom{--loader-color: var(--loader-color, #1F877D)}@keyframes spin{to{transform:rotate(360deg)}}@keyframes bounce{0%,80%,to{transform:scale(0)}40%{transform:scale(1)}}@keyframes stretch{0%,40%,to{transform:scaleY(.4)}20%{transform:scaleY(1)}}.loader--primary .loader__spinner,.loader--primary .loader__dot,.loader--primary .loader__bar{--loader-color: #1F877D}.loader--secondary .loader__spinner,.loader--secondary .loader__dot,.loader--secondary .loader__bar{--loader-color: #39a182}.spinner{display:flex;flex-direction:column;align-items:center;justify-content:center}.spinner__icon{border-radius:50%;border:4px solid rgba(0,0,0,.1);border-top-color:var(--spinner-color, var(--primary-color));animation:spin var(--spinner-speed, 1s) linear infinite}.spinner--small .spinner__icon{width:24px;height:24px}.spinner--medium .spinner__icon{width:40px;height:40px}.spinner--large .spinner__icon{width:64px;height:64px}.spinner--full-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;display:flex;justify-content:center;align-items:center;background-color:#fffc;z-index:1000}.spinner__text{margin-top:10px;text-align:center;color:var(--text-color, #000)}.spinner--primary .spinner__icon{border-top-color:var(--primary-color)}.spinner--secondary .spinner__icon{border-top-color:var(--secondary-color)}.spinner--info .spinner__icon{border-top-color:var(--info-color)}.spinner--warning .spinner__icon{border-top-color:var(--warning-color)}.spinner--alert .spinner__icon{border-top-color:var(--alert-color)}.spinner--success .spinner__icon{border-top-color:var(--success-color)}.spinner--neutral .spinner__icon{border-top-color:var(--neutral-color)}.spinner--dark .spinner__icon{border-top-color:var(--dark-color)}.spinner--classy-color-1 .spinner__icon{border-top-color:var(--classy-color-1)}.spinner--classy-color-2 .spinner__icon{border-top-color:var(--classy-color-2)}.spinner--classy-color-3 .spinner__icon{border-top-color:var(--classy-color-3)}.spinner--classy-color-4 .spinner__icon{border-top-color:var(--classy-color-4)}.spinner--classy-color-5 .spinner__icon{border-top-color:var(--classy-color-5)}.spinner--small-switch-color-1 .spinner__icon{border-top-color:var(--small-switch-color-1)}.spinner--small-switch-color-2 .spinner__icon{border-top-color:var(--small-switch-color-2)}.spinner--natural-color-1 .spinner__icon{border-top-color:var(--natural-color-1)}.spinner--natural-color-2 .spinner__icon{border-top-color:var(--natural-color-2)}.spinner--natural-color-3 .spinner__icon{border-top-color:var(--natural-color-3)}.spinner--grey-friend-1 .spinner__icon{border-top-color:var(--grey-friend-1)}.spinner--grey-friend-2 .spinner__icon{border-top-color:var(--grey-friend-2)}.spinner--shade-1 .spinner__icon{border-top-color:var(--shade-1)}.spinner--shade-2 .spinner__icon{border-top-color:var(--shade-2)}.spinner--shade-3 .spinner__icon{border-top-color:var(--shade-3)}.spinner--shade-4 .spinner__icon{border-top-color:var(--shade-4)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.progress-bar-container{width:100%;height:20px;background-color:var(--neutral-color);border-radius:var(--border-radius);overflow:hidden;position:relative}.progress-bar{height:100%;transition:width var(--transition-speed);display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius);color:var(--text-color-inverse)}.progress-label{font-size:12px;font-weight:700}.progress-bar--primary{background-color:var(--primary-color)}.progress-bar--secondary{background-color:var(--secondary-color)}.progress-bar--info{background-color:var(--info-color)}.progress-bar--warning{background-color:var(--warning-color)}.progress-bar--alert{background-color:var(--alert-color)}.progress-bar--success{background-color:var(--success-color)}.progress-bar--neutral{background-color:var(--neutral-color)}.progress-bar--dark{background-color:var(--dark-color)}.progress-bar--classy-1{background-color:var(--classy-color-1)}.progress-bar--classy-2{background-color:var(--classy-color-2)}.progress-bar--classy-3{background-color:var(--classy-color-3)}.progress-bar--classy-4{background-color:var(--classy-color-4)}.progress-bar--classy-5{background-color:var(--classy-color-5)}.progress-bar--small-switch-1{background-color:var(--small-switch-color-1)}.progress-bar--small-switch-2{background-color:var(--small-switch-color-2)}.progress-bar--natural-1{background-color:var(--natural-color-1)}.progress-bar--natural-2{background-color:var(--natural-color-2)}.progress-bar--natural-3{background-color:var(--natural-color-3)}.progress-bar--grey-friend-1{background-color:var(--grey-friend-1)}.progress-bar--grey-friend-2{background-color:var(--grey-friend-2)}.progress-bar--shade-1{background-color:var(--shade-1)}.progress-bar--shade-2{background-color:var(--shade-2)}.progress-bar--shade-3{background-color:var(--shade-3)}.progress-bar--shade-4{background-color:var(--shade-4)}.alert{padding:var(--spacing-sm) var(--spacing-md);border-radius:var(--border-radius);font-family:var(--font-family);font-size:var(--font-size-base);display:flex;align-items:center;box-shadow:var(--box-shadow);margin-bottom:var(--spacing-md);transition:background-color var(--transition-speed),border-color var(--transition-speed),color var(--transition-speed);background-color:var(--alert-bg-color, var(--primary-color));color:var(--alert-text-color, var(--text-color-inverse));border:1px solid var(--alert-border-color, var(--primary-color));animation:fadeIn .3s ease-out}.alert--primary{--alert-bg-color: var(--primary-color);--alert-text-color: var(--text-color-inverse);--alert-border-color: var(--primary-color);--alert-bg-hover-color: var(--primary-color-hover);--alert-border-hover-color: var(--primary-color-hover)}.alert--primary:hover{background-color:var(--alert-bg-hover-color);border-color:var(--alert-border-hover-color)}.alert--secondary{--alert-bg-color: transparent;--alert-text-color: var(--secondary-color);--alert-border-color: var(--secondary-color);--alert-bg-hover-color: var(--secondary-color-hover);--alert-border-hover-color: var(--secondary-color-hover);--alert-text-hover-color: var(--text-color-inverse)}.alert--secondary:hover{background-color:var(--alert-bg-hover-color);color:var(--alert-text-hover-color);border-color:var(--alert-border-hover-color)}.alert--primary.alert--info{--alert-bg-color: var(--info-color);--alert-border-color: var(--info-color);--alert-bg-hover-color: var(--info-color-hover);--alert-border-hover-color: var(--info-color-hover)}.alert--primary.alert--warning{--alert-bg-color: var(--warning-color);--alert-border-color: var(--warning-color);--alert-bg-hover-color: var(--warning-color-hover);--alert-border-hover-color: var(--warning-color-hover)}.alert--primary.alert--alert{--alert-bg-color: var(--alert-color);--alert-border-color: var(--alert-color);--alert-text-color: var(--text-color);--alert-bg-hover-color: var(--alert-color-hover);--alert-border-hover-color: var(--alert-color-hover)}.alert--primary.alert--success{--alert-bg-color: var(--success-color);--alert-border-color: var(--success-color);--alert-bg-hover-color: var(--success-color-hover);--alert-border-hover-color: var(--success-color-hover)}.alert--primary.alert--neutral{--alert-bg-color: var(--neutral-color);--alert-border-color: var(--neutral-color);--alert-bg-hover-color: var(--neutral-color-hover);--alert-border-hover-color: var(--neutral-color-hover)}.alert--primary.alert--dark{--alert-bg-color: var(--dark-color);--alert-border-color: var(--dark-color);--alert-text-color: var(--text-color-inverse);--alert-bg-hover-color: var(--dark-color-hover);--alert-border-hover-color: var(--dark-color-hover)}.alert--secondary.alert--info{--alert-text-color: var(--info-color);--alert-border-color: var(--info-color);--alert-bg-hover-color: var(--info-color-hover);--alert-border-hover-color: var(--info-color-hover)}.alert--secondary.alert--warning{--alert-text-color: var(--warning-color);--alert-border-color: var(--warning-color);--alert-bg-hover-color: var(--warning-color-hover);--alert-border-hover-color: var(--warning-color-hover)}.alert--secondary.alert--alert{--alert-text-color: var(--alert-color);--alert-border-color: var(--alert-color);--alert-bg-hover-color: var(--alert-color-hover);--alert-border-hover-color: var(--alert-color-hover)}.alert--secondary.alert--success{--alert-text-color: var(--success-color);--alert-border-color: var(--success-color);--alert-bg-hover-color: var(--success-color-hover);--alert-border-hover-color: var(--success-color-hover)}.alert--secondary.alert--neutral{--alert-text-color: var(--neutral-color);--alert-border-color: var(--neutral-color);--alert-bg-hover-color: var(--neutral-color-hover);--alert-border-hover-color: var(--neutral-color-hover)}.alert--secondary.alert--dark{--alert-text-color: var(--dark-color);--alert-border-color: var(--dark-color);--alert-bg-hover-color: var(--dark-color-hover);--alert-border-hover-color: var(--dark-color-hover)}.alert__icon{margin-right:var(--spacing-sm);font-size:1.2em}.alert__close{margin-left:auto;background:none;border:none;color:inherit;cursor:pointer;font-size:1.2em}.alert--dismissible{padding-right:var(--spacing-md)}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.alert{animation:fadeIn .3s ease-out}.snackbar{position:fixed;bottom:20px;left:50%;transform:translate(-50%);display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:var(--border-radius);font-family:var(--font-family);font-size:var(--font-size-base);box-shadow:var(--box-shadow);transition:opacity .3s ease,bottom .3s ease;opacity:0;z-index:var(--z-index-modal)}.snackbar--visible{opacity:1;bottom:40px}.snackbar--hidden{opacity:0;bottom:20px}.snackbar--primary{background-color:var(--primary-color);color:var(--text-color-inverse)}.snackbar--secondary{background-color:transparent;border:2px solid var(--primary-color);color:var(--primary-color)}.snackbar--primary.snackbar--info{background-color:var(--info-color)}.snackbar--primary.snackbar--warning{background-color:var(--warning-color)}.snackbar--primary.snackbar--alert{background-color:var(--alert-color)}.snackbar--primary.snackbar--success{background-color:var(--success-color)}.snackbar--primary.snackbar--neutral{background-color:var(--neutral-color)}.snackbar--primary.snackbar--dark{background-color:var(--dark-color)}.snackbar--primary.snackbar--classy-color-1{background-color:var(--classy-color-1)}.snackbar--primary.snackbar--classy-color-2{background-color:var(--classy-color-2)}.snackbar--primary.snackbar--classy-color-3{background-color:var(--classy-color-3)}.snackbar--primary.snackbar--classy-color-4{background-color:var(--classy-color-4)}.snackbar--primary.snackbar--classy-color-5{background-color:var(--classy-color-5)}.snackbar--primary.snackbar--small-switch-color-1{background-color:var(--small-switch-color-1)}.snackbar--primary.snackbar--small-switch-color-2{background-color:var(--small-switch-color-2)}.snackbar--primary.snackbar--natural-color-1{background-color:var(--natural-color-1)}.snackbar--primary.snackbar--natural-color-2{background-color:var(--natural-color-2)}.snackbar--primary.snackbar--natural-color-3{background-color:var(--natural-color-3)}.snackbar--primary.snackbar--grey-friend-1{background-color:var(--grey-friend-1)}.snackbar--primary.snackbar--grey-friend-2{background-color:var(--grey-friend-2)}.snackbar--primary.snackbar--shade-1{background-color:var(--shade-1)}.snackbar--primary.snackbar--shade-2{background-color:var(--shade-2)}.snackbar--primary.snackbar--shade-3{background-color:var(--shade-3)}.snackbar--primary.snackbar--shade-4{background-color:var(--shade-4)}.snackbar--secondary.snackbar--info{border-color:var(--info-color);color:var(--info-color)}.snackbar--secondary.snackbar--warning{border-color:var(--warning-color);color:var(--warning-color)}.snackbar--secondary.snackbar--alert{border-color:var(--alert-color);color:var(--alert-color)}.snackbar--secondary.snackbar--success{border-color:var(--success-color);color:var(--success-color)}.snackbar--secondary.snackbar--neutral{border-color:var(--neutral-color);color:var(--neutral-color)}.snackbar--secondary.snackbar--dark{border-color:var(--dark-color);color:var(--dark-color)}.snackbar--secondary.snackbar--classy-color-1{border-color:var(--classy-color-1);color:var(--classy-color-1)}.snackbar--secondary.snackbar--classy-color-2{border-color:var(--classy-color-2);color:var(--classy-color-2)}.snackbar--secondary.snackbar--classy-color-3{border-color:var(--classy-color-3);color:var(--classy-color-3)}.snackbar--secondary.snackbar--classy-color-4{border-color:var(--classy-color-4);color:var(--classy-color-4)}.snackbar--secondary.snackbar--classy-color-5{border-color:var(--classy-color-5);color:var(--classy-color-5)}.snackbar--secondary.snackbar--small-switch-color-1{border-color:var(--small-switch-color-1);color:var(--small-switch-color-1)}.snackbar--secondary.snackbar--small-switch-color-2{border-color:var(--small-switch-color-2);color:var(--small-switch-color-2)}.snackbar--secondary.snackbar--natural-color-1{border-color:var(--natural-color-1);color:var(--natural-color-1)}.snackbar--secondary.snackbar--natural-color-2{border-color:var(--natural-color-2);color:var(--natural-color-2)}.snackbar--secondary.snackbar--natural-color-3{border-color:var(--natural-color-3);color:var(--natural-color-3)}.snackbar--secondary.snackbar--grey-friend-1{border-color:var(--grey-friend-1);color:var(--grey-friend-1)}.snackbar--secondary.snackbar--grey-friend-2{border-color:var(--grey-friend-2);color:var(--grey-friend-2)}.snackbar--secondary.snackbar--shade-1{border-color:var(--shade-1);color:var(--shade-1)}.snackbar--secondary.snackbar--shade-2{border-color:var(--shade-2);color:var(--shade-2)}.snackbar--secondary.snackbar--shade-3{border-color:var(--shade-3);color:var(--shade-3)}.snackbar--secondary.snackbar--shade-4{border-color:var(--shade-4);color:var(--shade-4)}.snackbar__message{flex-grow:1;margin-right:16px}.snackbar__action{background:none;border:none;color:var(--text-color-inverse);cursor:pointer;font-weight:700;margin-right:16px}.snackbar__action:hover{text-decoration:underline}.snackbar__close{background:none;border:none;font-size:20px;cursor:pointer;color:var(--text-color-inverse)}.snackbar__close:hover{color:var(--text-color-inverse)}@media (max-width: 768px){.snackbar{width:90%;left:5%;transform:none}}@media (max-width: 480px){.snackbar{padding:12px}}.logo{display:inline-flex;align-items:center;justify-content:center}.logo__image{display:block;width:100%;height:auto}.logo--size-xs{width:30px;height:30px}.logo--size-sm{width:50px;height:50px}.logo--size-md{width:100px;height:100px}.logo--size-lg{width:150px;height:150px}.logo--size-xl{width:200px;height:200px}.logo--shape-normal{border-radius:0}.logo--shape-rounded{border-radius:50%}.logo--shape-squared{border-radius:8px}.logo--background-none{background-color:transparent}.logo--background-palette{background-color:var(--palette-background-color, #f0f0f0)}.logo--background-custom{background-color:var(--logo-background-color, transparent)}@media (max-width: 768px){.logo--size-xs{width:20px;height:20px}.logo--size-sm{width:40px;height:40px}.logo--size-md{width:80px;height:80px}.logo--size-lg{width:120px;height:120px}.logo--size-xl{width:160px;height:160px}}.section{margin:var(--spacing-md) 0;padding:var(--spacing-md);background-color:var(--background-color);transition:all var(--transition-speed) ease}.section--border{border:1px solid var(--border-color)}.section--full-width{width:100vw;margin-left:calc(-50vw + 50%);padding:var(--spacing-lg)}.section--shadow-small{box-shadow:0 1px 3px #0003}.section--shadow-medium{box-shadow:0 4px 8px #0000004d}.section--shadow-large{box-shadow:0 8px 16px #0006}.section__title{margin-bottom:var(--spacing-md);color:var(--text-color);font-weight:var(--font-weight-bold)}.section--border-primary{border-color:var(--primary-color)}.section--border-secondary{border-color:var(--secondary-color)}.section--border-info{border-color:var(--info-color)}.section--border-warning{border-color:var(--warning-color)}.section--border-alert{border-color:var(--alert-color)}.section--border-success{border-color:var(--success-color)}.section--border-neutral{border-color:var(--neutral-color)}.section--border-dark{border-color:var(--dark-color)}.section--border-classy-color-1{border-color:var(--classy-color-1)}.section--border-classy-color-2{border-color:var(--classy-color-2)}.section--border-classy-color-3{border-color:var(--classy-color-3)}.section--border-classy-color-4{border-color:var(--classy-color-4)}.section--border-classy-color-5{border-color:var(--classy-color-5)}.section--border-small-switch-color-1{border-color:var(--small-switch-color-1)}.section--border-small-switch-color-2{border-color:var(--small-switch-color-2)}.section--border-natural-color-1{border-color:var(--natural-color-1)}.section--border-natural-color-2{border-color:var(--natural-color-2)}.section--border-natural-color-3{border-color:var(--natural-color-3)}.section--border-grey-friend-1{border-color:var(--grey-friend-1)}.section--border-grey-friend-2{border-color:var(--grey-friend-2)}.section--border-shade-1{border-color:var(--shade-1)}.section--border-shade-2{border-color:var(--shade-2)}.section--border-shade-3{border-color:var(--shade-3)}.section--border-shade-4{border-color:var(--shade-4)}.section--background-primary{background-color:var(--primary-color);color:var(--text-color-inverse)}.section--background-secondary{background-color:var(--secondary-color);color:var(--text-color-inverse)}.section--background-info{background-color:var(--info-color);color:var(--text-color-inverse)}.section--background-warning{background-color:var(--warning-color);color:var(--text-color-inverse)}.section--background-alert{background-color:var(--alert-color);color:var(--text-color)}.section--background-success{background-color:var(--success-color);color:var(--text-color-inverse)}.section--background-neutral{background-color:var(--neutral-color);color:var(--text-color)}.section--background-dark{background-color:var(--dark-color);color:var(--text-color-inverse)}.section--background-classy-color-1{background-color:var(--classy-color-1);color:var(--text-color-inverse)}.section--background-classy-color-2{background-color:var(--classy-color-2);color:var(--text-color-inverse)}.section--background-classy-color-3{background-color:var(--classy-color-3);color:var(--text-color-inverse)}.section--background-classy-color-4{background-color:var(--classy-color-4);color:var(--text-color-inverse)}.section--background-classy-color-5{background-color:var(--classy-color-5);color:var(--text-color-inverse)}.section--background-small-switch-color-1{background-color:var(--small-switch-color-1);color:var(--text-color)}.section--background-small-switch-color-2{background-color:var(--small-switch-color-2);color:var(--text-color-inverse)}.section--background-natural-color-1{background-color:var(--natural-color-1);color:var(--text-color-inverse)}.section--background-natural-color-2{background-color:var(--natural-color-2);color:var(--text-color)}.section--background-natural-color-3{background-color:var(--natural-color-3);color:var(--text-color)}.section--background-grey-friend-1{background-color:var(--grey-friend-1);color:var(--text-color-inverse)}.section--background-grey-friend-2{background-color:var(--grey-friend-2);color:var(--text-color-inverse)}.section--background-shade-1{background-color:var(--shade-1);color:var(--text-color-inverse)}.section--background-shade-2{background-color:var(--shade-2);color:var(--text-color-inverse)}.section--background-shade-3{background-color:var(--shade-3);color:var(--text-color-inverse)}.section--background-shade-4{background-color:var(--shade-4);color:var(--text-color-inverse)}.grid{display:grid;width:100%;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;padding:16px}.grid>*{background-color:var(--background-color);padding:16px;display:flex;justify-content:center;align-items:center}.grid--border>*{border:1px solid var(--border-color)}.grid--rounded>*{border-radius:var(--border-radius, 8px)}.grid--shadow-small>*{box-shadow:0 1px 3px #0003}.grid--shadow-medium>*{box-shadow:0 4px 8px #0000004d}.grid--shadow-large>*{box-shadow:0 8px 16px #0006}@media (max-width: 768px){.grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}@media (max-width: 480px){.grid{grid-template-columns:1fr}}.grid>*:hover{box-shadow:0 4px 8px #0003}.grid--primary>*{border-color:var(--primary-color)}.grid--secondary>*{border-color:var(--secondary-color)}.grid--info>*{border-color:var(--info-color)}.grid--warning>*{border-color:var(--warning-color)}.grid--alert>*{border-color:var(--alert-color)}.grid--success>*{border-color:var(--success-color)}.grid--neutral>*{border-color:var(--neutral-color)}.grid--dark>*{border-color:var(--dark-color)}.grid--classy-color-1>*{border-color:var(--classy-color-1)}.grid--classy-color-2>*{border-color:var(--classy-color-2)}.grid--classy-color-3>*{border-color:var(--classy-color-3)}.grid--classy-color-4>*{border-color:var(--classy-color-4)}.grid--classy-color-5>*{border-color:var(--classy-color-5)}.grid--small-switch-color-1>*{border-color:var(--small-switch-color-1)}.grid--small-switch-color-2>*{border-color:var(--small-switch-color-2)}.grid--natural-color-1>*{border-color:var(--natural-color-1)}.grid--natural-color-2>*{border-color:var(--natural-color-2)}.grid--natural-color-3>*{border-color:var(--natural-color-3)}.grid--grey-friend-1>*{border-color:var(--grey-friend-1)}.grid--grey-friend-2>*{border-color:var(--grey-friend-2)}.grid--shade-1>*{border-color:var(--shade-1)}.grid--shade-2>*{border-color:var(--shade-2)}.grid--shade-3>*{border-color:var(--shade-3)}.grid--shade-4>*{border-color:var(--shade-4)}.navbar{--navbar-background-color: var(--background-color);--navbar-border-color: var(--border-color);--navbar-height: 60px;--navbar-link-color: var(--text-color);--navbar-link-hover-background: rgba(255, 255, 255, .1);--navbar-link-padding: 0 16px;--navbar-fixed: fixed;--navbar-z-index: 1000;position:var(--navbar-fixed);top:0;left:0;width:100%;height:var(--navbar-height);background-color:var(--navbar-background-color);border-bottom:1px solid var(--navbar-border-color);display:flex;align-items:center;justify-content:space-between;z-index:var(--navbar-z-index);padding:0 16px;box-sizing:border-box}.navbar__group{display:flex;align-items:center}.navbar__group--left{flex:1}.navbar__group--center{flex:1;justify-content:center}.navbar__group--right{flex:1;justify-content:flex-end}.navbar__logo,.navbar__search{margin-right:16px}.navbar__link{color:var(--navbar-link-color);text-decoration:none;padding:var(--navbar-link-padding);display:flex;align-items:center;height:100%;box-sizing:border-box;transition:background-color .3s ease}.navbar__link:hover{background-color:var(--navbar-link-hover-background)}@media (max-width: 768px){.navbar{flex-wrap:wrap;height:auto}.navbar__group{width:100%;justify-content:center;margin:8px 0}.navbar__group--left,.navbar__group--right{justify-content:center}.navbar__link{padding:8px}}.sidebar{--sidebar-background-color: rgba(34, 139, 34, .1);--sidebar-border-color: rgba(34, 139, 34, .2);--sidebar-padding: 16px;--sidebar-width: 250px;display:flex;flex-direction:column;align-items:flex-start;background-color:var(--sidebar-background-color);border-right:1px solid var(--sidebar-border-color);padding:var(--sidebar-padding);width:var(--sidebar-width);height:100vh;box-sizing:border-box}.sidebar__logo{--sidebar-logo-margin-bottom: 24px;margin-bottom:var(--sidebar-logo-margin-bottom)}.sidebar__links{list-style:none;margin:0;padding:0;width:100%}.sidebar__item{--sidebar-item-margin: 12px 0;margin:var(--sidebar-item-margin);width:100%}.sidebar__link{--sidebar-link-color: #006400;--sidebar-link-padding: 8px 16px;display:block;color:var(--sidebar-link-color);text-decoration:none;padding:var(--sidebar-link-padding);width:100%;box-sizing:border-box}.sidebar__link:hover,.sidebar__link--active{--sidebar-link-hover-background-color: rgba(34, 139, 34, .2);--sidebar-link-hover-border-radius: 4px;background-color:var(--sidebar-link-hover-background-color);border-radius:var(--sidebar-link-hover-border-radius)}.sidebar__controls{--sidebar-controls-margin-top: 24px;margin-top:var(--sidebar-controls-margin-top);display:flex;flex-direction:column;gap:16px}Base Styles */ .breadcrumbs{display:flex;align-items:center;font-size:var(--font-size-medium);color:var(--text-color)}.breadcrumbs__item{display:flex;align-items:center}.breadcrumbs__link{text-decoration:none;cursor:pointer;color:inherit;background:none;border:none;font-size:inherit;padding:0}.breadcrumbs__separator{margin:0 8px}.breadcrumbs__active{font-weight:700}.breadcrumbs--small{font-size:.75rem}.breadcrumbs--medium{font-size:1rem}.breadcrumbs--large{font-size:1.25rem}.breadcrumbs--primary .breadcrumbs__link{color:var(--primary-color)}.breadcrumbs--secondary .breadcrumbs__link{color:var(--secondary-color)}.breadcrumbs--info .breadcrumbs__link{color:var(--info-color)}.breadcrumbs--warning .breadcrumbs__link{color:var(--warning-color)}.breadcrumbs--alert .breadcrumbs__link{color:var(--alert-color)}.breadcrumbs--success .breadcrumbs__link{color:var(--success-color)}.breadcrumbs--neutral .breadcrumbs__link{color:var(--neutral-color)}.breadcrumbs--dark .breadcrumbs__link{color:var(--dark-color)}.breadcrumbs--classy-color-1 .breadcrumbs__link{color:var(--classy-color-1)}.breadcrumbs--classy-color-2 .breadcrumbs__link{color:var(--classy-color-2)}.breadcrumbs--classy-color-3 .breadcrumbs__link{color:var(--classy-color-3)}.breadcrumbs--classy-color-4 .breadcrumbs__link{color:var(--classy-color-4)}.breadcrumbs--classy-color-5 .breadcrumbs__link{color:var(--classy-color-5)}.breadcrumbs--small-switch-color-1 .breadcrumbs__link{color:var(--small-switch-color-1)}.breadcrumbs--small-switch-color-2 .breadcrumbs__link{color:var(--small-switch-color-2)}.breadcrumbs--natural-color-1 .breadcrumbs__link{color:var(--natural-color-1)}.breadcrumbs--natural-color-2 .breadcrumbs__link{color:var(--natural-color-2)}.breadcrumbs--natural-color-3 .breadcrumbs__link{color:var(--natural-color-3)}.breadcrumbs--grey-friend-1 .breadcrumbs__link{color:var(--grey-friend-1)}.breadcrumbs--grey-friend-2 .breadcrumbs__link{color:var(--grey-friend-2)}.breadcrumbs--shade-1 .breadcrumbs__link{color:var(--shade-1)}.breadcrumbs--shade-2 .breadcrumbs__link{color:var(--shade-2)}.breadcrumbs--shade-3 .breadcrumbs__link{color:var(--shade-3)}.breadcrumbs--shade-4 .breadcrumbs__link{color:var(--shade-4)}.dropdown{position:relative;display:inline-block;width:100%}.dropdown__toggle{width:100%;padding:12px;text-align:left;border-radius:var(--border-radius);background-color:transparent;border:2px solid var(--primary-color);color:var(--primary-color);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:border-color var(--transition-speed),color var(--transition-speed)}.dropdown__icon{margin-left:8px;font-size:16px}.dropdown__menu{position:absolute;top:100%;left:0;width:100%;background-color:var(--background-color);border:1px solid var(--border-color);border-radius:var(--border-radius);max-height:200px;overflow-y:auto;z-index:var(--z-index-tooltip);box-shadow:var(--box-shadow)}.dropdown__search{width:100%;padding:10px;border:none;border-bottom:1px solid var(--border-color);outline:none}.dropdown__list{list-style:none;padding:0;margin:0}.dropdown__item{padding:10px;cursor:pointer;transition:background-color var(--transition-speed)}.dropdown__item:hover{background-color:var(--primary-color-hover);color:var(--text-color-inverse)}.dropdown--primary-color .dropdown__toggle{border-color:var(--primary-color);color:var(--primary-color)}.dropdown--secondary-color .dropdown__toggle{border-color:var(--secondary-color);color:var(--secondary-color)}.dropdown--info-color .dropdown__toggle{border-color:var(--info-color);color:var(--info-color)}.dropdown--warning-color .dropdown__toggle{border-color:var(--warning-color);color:var(--warning-color)}.dropdown--alert-color .dropdown__toggle{border-color:var(--alert-color);color:var(--alert-color)}.dropdown--success-color .dropdown__toggle{border-color:var(--success-color);color:var(--success-color)}.dropdown--neutral-color .dropdown__toggle{border-color:var(--neutral-color);color:var(--neutral-color)}.dropdown--dark-color .dropdown__toggle{border-color:var(--dark-color);color:var(--dark-color)}.dropdown--classy-color-1 .dropdown__toggle{border-color:var(--classy-color-1);color:var(--classy-color-1)}.dropdown--classy-color-2 .dropdown__toggle{border-color:var(--classy-color-2);color:var(--classy-color-2)}.dropdown--classy-color-3 .dropdown__toggle{border-color:var(--classy-color-3);color:var(--classy-color-3)}.dropdown--classy-color-4 .dropdown__toggle{border-color:var(--classy-color-4);color:var(--classy-color-4)}.dropdown--classy-color-5 .dropdown__toggle{border-color:var(--classy-color-5);color:var (--classy-color-5)}.dropdown--small-switch-color-1 .dropdown__toggle{border-color:var(--small-switch-color-1);color:var(--small-switch-color-1)}.dropdown--small-switch-color-2 .dropdown__toggle{border-color:var(--small-switch-color-2);color:var(--small-switch-color-2)}.dropdown--natural-color-1 .dropdown__toggle{border-color:var(--natural-color-1);color:var(--natural-color-1)}.dropdown--natural-color-2 .dropdown__toggle{border-color:var(--natural-color-2);color:var(--natural-color-2)}.dropdown--natural-color-3 .dropdown__toggle{border-color:var(--natural-color-3);color:var(--natural-color-3)}.dropdown--grey-friend-1 .dropdown__toggle{border-color:var(--grey-friend-1);color:var(--grey-friend-1)}.dropdown--grey-friend-2 .dropdown__toggle{border-color:var(--grey-friend-2);color:var(--grey-friend-2)}.dropdown--shade-1 .dropdown__toggle{border-color:var(--shade-1);color:var(--shade-1)}.dropdown--shade-2 .dropdown__toggle{border-color:var(--shade-2);color:var(--shade-2)}.dropdown--shade-3 .dropdown__toggle{border-color:var(--shade-3);color:var(--shade-3)}.dropdown--shade-4 .dropdown__toggle{border-color:var(--shade-4);color:var(--shade-4)}.searchbar{display:flex;align-items:center;position:relative}.searchbar__toggle{background:none;border:none;padding:8px;cursor:pointer;color:var(--text-color);display:flex;align-items:center}.searchbar__icon{width:24px;height:24px}.searchbar__input{padding:8px;border:1px solid var(--border-color);border-radius:var(--border-radius);background-color:var(--background-color);color:var(--text-color);margin-left:8px;transition:width .3s ease,opacity .3s ease}@media (max-width: 768px){.searchbar__input{width:0;opacity:0;visibility:hidden;margin-left:0;pointer-events:none}.searchbar--expanded .searchbar__input{width:150px;opacity:1;visibility:visible;margin-left:8px;pointer-events:auto}}@media (min-width: 769px){.searchbar__toggle{display:none}.searchbar__input{width:200px;opacity:1;visibility:visible;pointer-events:auto}}.searchbar__input:focus{border-color:var(--primary-color);outline:none}.button-group{display:inline-flex;gap:var(--spacing-sm)}.button-group__button{padding:var(--button-padding, 8px 16px);border-radius:var(--border-radius, 4px);cursor:pointer;transition:background-color var(--transition-speed, .3s),border-color var(--transition-speed, .3s),color var(--transition-speed, .3s);font-size:inherit;border:none}.button-group__button:focus{outline:none;box-shadow:0 0 0 3px var(--focus-outline-color, rgba(0, 0, 0, .2))}.button-group--solid .button-group__button{background-color:var(--primary-color);color:var(--text-color-inverse)}.button-group--solid .button-group__button:hover{background-color:var(--primary-color-hover)}.button-group--primary .button-group__button:hover{background-color:var(--primary-color-hover)}.button-group--secondary .button-group__button:hover{background-color:var(--secondary-color-hover)}.button-group--info .button-group__button{background-color:var(--info-color);color:var(--text-color-inverse)}.button-group--info .button-group__button:hover{background-color:var(--info-color-hover)}.button-group--warning .button-group__button{background-color:var(--warning-color);color:var(--text-color-inverse)}.button-group--warning .button-group__button:hover{background-color:var(--warning-color-hover)}.button-group--alert .button-group__button{background-color:var(--alert-color);color:var(--text-color-inverse)}.button-group--alert .button-group__button:hover{background-color:var(--alert-color-hover)}.button-group--success .button-group__button{background-color:var(--success-color);color:var(--text-color-inverse)}.button-group--success .button-group__button:hover{background-color:var(--success-color-hover)}.button-group--neutral .button-group__button{background-color:var(--neutral-color);color:var(--text-color-inverse)}.button-group--neutral .button-group__button:hover{background-color:var(--neutral-color-hover)}.button-group--dark .button-group__button{background-color:var(--dark-color);color:var(--text-color-inverse)}.button-group--dark .button-group__button:hover{background-color:var(--dark-color-hover)}.button-group--classy-color-1 .button-group__button{background-color:var(--classy-color-1);color:var(--text-color-inverse)}.button-group--classy-color-1 .button-group__button:hover{background-color:var(--classy-color-1-hover)}.button-group--classy-color-2 .button-group__button{background-color:var(--classy-color-2);color:var(--text-color-inverse)}.button-group--classy-color-2 .button-group__button:hover{background-color:var(--classy-color-2-hover)}.button-group--classy-color-3 .button-group__button{background-color:var(--classy-color-3);color:var(--text-color-inverse)}.button-group--classy-color-3 .button-group__button:hover{background-color:var(--classy-color-3-hover)}.button-group--classy-color-4 .button-group__button{background-color:var(--classy-color-4);color:var(--text-color-inverse)}.button-group--classy-color-4 .button-group__button:hover{background-color:var(--classy-color-4-hover)}.button-group--classy-color-5 .button-group__button{background-color:var(--classy-color-5);color:var(--text-color-inverse)}.button-group--classy-color-5 .button-group__button:hover{background-color:var(--classy-color-5-hover)}.button-group--small-switch-color-1 .button-group__button{background-color:var(--small-switch-color-1);color:var(--text-color-inverse)}.button-group--small-switch-color-1 .button-group__button:hover{background-color:var(--small-switch-color-1-hover)}.button-group--small-switch-color-2 .button-group__button{background-color:var(--small-switch-color-2);color:var(--text-color-inverse)}.button-group--small-switch-color-2 .button-group__button:hover{background-color:var(--small-switch-color-2-hover)}.button-group--natural-color-1 .button-group__button{background-color:var(--natural-color-1);color:var(--text-color-inverse)}.button-group--natural-color-1 .button-group__button:hover{background-color:var(--natural-color-1-hover)}.button-group--natural-color-2 .button-group__button{background-color:var(--natural-color-2);color:var(--text-color-inverse)}.button-group--natural-color-2 .button-group__button:hover{background-color:var(--natural-color-2-hover)}.button-group--natural-color-3 .button-group__button{background-color:var(--natural-color-3);color:var(--text-color-inverse)}.button-group--natural-color-3 .button-group__button:hover{background-color:var(--natural-color-3-hover)}.button-group--grey-friend-1 .button-group__button{background-color:var(--grey-friend-1);color:var(--text-color-inverse)}.button-group--grey-friend-1 .button-group__button:hover{background-color:var(--grey-friend-1-hover)}.button-group--grey-friend-2 .button-group__button{background-color:var(--grey-friend-2);color:var(--text-color-inverse)}.button-group--grey-friend-2 .button-group__button:hover{background-color:var(--grey-friend-2-hover)}.button-group--shade-1 .button-group__button{background-color:var(--shade-1);color:var(--text-color-inverse)}.button-group--shade-1 .button-group__button:hover{background-color:var(--shade-1-hover)}.button-group--shade-2 .button-group__button{background-color:var(--shade-2);color:var(--text-color-inverse)}.button-group--shade-2 .button-group__button:hover{background-color:var(--shade-2-hover)}.button-group--shade-3 .button-group__button{background-color:var(--shade-3);color:var(--text-color-inverse)}.button-group--shade-3 .button-group__button:hover{background-color:var(--shade-3-hover)}.button-group--shade-4 .button-group__button{background-color:var(--shade-4);color:var(--text-color-inverse)}.button-group--shade-4 .button-group__button:hover{background-color:var(--shade-4-hover)}.button-group--outline .button-group__button{background-color:transparent;border:2px solid currentColor;color:var(--primary-color)}.button-group--primary.button-group--outline .button-group__button{background-color:transparent;border-color:var(--primary-color);color:var(--primary-color)}.button-group--secondary.button-group--outline .button-group__button{background-color:transparent;border-color:var(--secondary-color);color:var(--secondary-color)}.button-group--primary.button-group--outline .button-group__button:hover,.button-group--secondary.button-group--outline .button-group__button:hover{background-color:transparent;color:var(--primary-color-hover);border-color:var(--primary-color-hover)}.button-group--small .button-group__button{font-size:.75rem;padding:6px 12px}.button-group--medium .button-group__button{font-size:1rem;padding:8px 16px}.button-group--large .button-group__button{font-size:1.25rem;padding:12px 20px}.button-group--primary .button-group__button{background-color:var(--primary-color);color:var(--text-color-inverse)}.button-group--secondary .button-group__button{background-color:var(--secondary-color);color:var(--text-color-inverse)}.button-group--primary.button-group--outline .button-group__button{border-color:var(--primary-color);color:var(--primary-color)}.button-group--secondary.button-group--outline .button-group__button{border-color:var(--secondary-color);color:var(--secondary-color)}.button-group--info.button-group--outline .button-group__button{border-color:var(--info-color);color:var(--info-color)}.button-group--warning.button-group--outline .button-group__button{border-color:var(--warning-color);color:var(--warning-color)}.button-group--alert.button-group--outline .button-group__button{border-color:var(--alert-color);color:var(--alert-color)}.button-group--success.button-group--outline .button-group__button{border-color:var(--success-color);color:var(--success-color)}.button-group--neutral.button-group--outline .button-group__button{border-color:var(--neutral-color);color:var(--neutral-color)}.button-group--dark.button-group--outline .button-group__button{border-color:var(--dark-color);color:var(--dark-color)}.button-group--classy-color-1.button-group--outline .button-group__button{border-color:var(--classy-color-1);color:var(--classy-color-1)}.button-group--classy-color-2.button-group--outline .button-group__button{border-color:var(--classy-color-2);color:var(--classy-color-2)}.button-group--classy-color-3.button-group--outline .button-group__button{border-color:var(--classy-color-3);color:var(--classy-color-3)}.button-group--classy-color-4.button-group--outline .button-group__button{border-color:var(--classy-color-4);color:var(--classy-color-4)}.button-group--classy-color-5.button-group--outline .button-group__button{border-color:var(--classy-color-5);color:var(--classy-color-5)}.button-group--small-switch-color-1.button-group--outline .button-group__button{border-color:var(--small-switch-color-1);color:var(--small-switch-color-1)}.button-group--small-switch-color-2.button-group--outline .button-group__button{border-color:var(--small-switch-color-2);color:var(--small-switch-color-2)}.button-group--natural-color-1.button-group--outline .button-group__button{border-color:var(--natural-color-1);color:var(--natural-color-1)}.button-group--natural-color-2.button-group--outline .button-group__button{border-color:var(--natural-color-2);color:var(--natural-color-2)}.button-group--natural-color-3.button-group--outline .button-group__button{border-color:var(--natural-color-3);color:var(--natural-color-3)}.button-group--grey-friend-1.button-group--outline .button-group__button{border-color:var(--grey-friend-1);color:var(--grey-friend-1)}.button-group--grey-friend-2.button-group--outline .button-group__button{border-color:var(--grey-friend-2);color:var(--grey-friend-2)}.button-group--shade-1.button-group--outline .button-group__button{border-color:var(--shade-1);color:var(--shade-1)}.button-group--shade-2.button-group--outline .button-group__button{border-color:var(--shade-2);color:var(--shade-2)}.button-group--shade-3.button-group--outline .button-group__button{border-color:var(--shade-3);color:var (--shade-3)}.button-group--shade-4.button-group--outline .button-group__button{border-color:var(--shade-4);color:var(--shade-4)}.button-group__button:hover{background-color:var(--primary-color-hover)}.button-group--outline .button-group__button:hover{background-color:transparent;border-color:var(--primary-color-hover);color:var(--primary-color-hover)}.avatar-with-name{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.avatar-with-name--below{flex-direction:column;align-items:center;text-align:center}.avatar-with-name--side{flex-direction:row;text-align:left;align-items:center}.avatar-with-name--small .avatar-with-name__avatar img,.avatar-with-name--small .avatar-with-name__avatar svg{width:40px;height:40px}.avatar-with-name--medium .avatar-with-name__avatar img,.avatar-with-name--medium .avatar-with-name__avatar svg{width:80px;height:80px}.avatar-with-name--large .avatar-with-name__avatar img,.avatar-with-name--large .avatar-with-name__avatar svg{width:120px;height:120px}.avatar-with-name__name{font-size:1.1rem;color:var(--text-color, #2C2C2C);margin-top:2px}.avatar-with-name__avatar{border-radius:50%;object-fit:cover;display:flex;align-items:center;justify-content:center;background-color:#f0f0f0;overflow:hidden}.avatar__default-icon{width:100%;height:100%}.avatar-modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:#00000080;z-index:1000}.avatar-modal__content{background-color:#fff;padding:16px;border-radius:8px;text-align:center;position:relative;max-width:300px;width:100%}.avatar-modal__avatar-container{display:flex;justify-content:center;align-items:center}.avatar-modal__avatar{width:150px;height:150px;border-radius:50%}.avatar-modal__name{margin-top:16px;font-size:1.5rem;font-weight:700;color:var(--text-color, #2C2C2C)}.avatar-modal__close{position:absolute;top:10px;right:10px;background:none;border:none;font-size:1.5rem;cursor:pointer}@media (max-width: 768px){.avatar-with-name--large .avatar-with-name__avatar img,.avatar-with-name--large .avatar-with-name__avatar svg{width:100px;height:100px}.avatar-modal__avatar{width:120px;height:120px}}.audio-player{display:flex;flex-direction:column;align-items:center;background-color:#f5f5f54d;padding:var(--spacing-md, 16px);border-radius:var(--border-radius, 6px);gap:var(--spacing-sm, 8px);max-width:400px;border:1px solid var(--border-color, #dddddd);transition:background-color var(--transition-speed, .3s)}.audio-player__media img{width:100%;border-radius:var(--border-radius, 6px)}.audio-player__track-name{font-weight:700;font-size:var(--font-size-medium, 1.1rem);margin-bottom:var(--spacing-xs, 8px);color:var(--icon-color, #344b47)}.audio-player__controls{display:flex;align-items:center;gap:var(--spacing-sm, 8px)}.audio-player__seek{display:flex;align-items:center;flex-direction:column;width:100%;gap:var(--spacing-xs, 4px)}.audio-player__seek-slider{width:100%;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:4px;background:var(--grey-friend-2, #96b1ac);border-radius:2px;outline:none;transition:background var(--transition-speed, .3s)}.audio-player__seek-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;background:var(--icon-color, #344b47);border-radius:50%;cursor:pointer;margin-top:-4px;transition:background var(--transition-speed, .3s)}.audio-player__time{font-size:var(--font-size-small, .9em);color:var(--icon-color, #344b47)}.audio-player__playlist{width:100%;margin-top:var(--spacing-sm, 8px);border-top:1px solid var(--border-color);padding-top:var(--spacing-xs, 8px)}.audio-player__track{padding:var(--spacing-sm, 8px);cursor:pointer;transition:background-color var(--transition-speed, .3s);text-align:center}.audio-player__track:hover{background-color:var(--primary-color-hover, #16655C);color:var(--text-color-inverse, #ffffff)}.audio-player__track.active{background-color:var(--primary-color, #1F877D);color:var(--text-color-inverse, #ffffff)}@media (max-width: 768px){.audio-player{max-width:100%}}.card{padding:16px;border-radius:var(--border-radius, 8px);position:relative;transition:transform .3s ease,box-shadow .3s ease;color:inherit}.card__content{color:inherit}.card--hoverable:hover{box-shadow:0 4px 12px #0000001a;transform:translateY(-2px)}.card__expand,.card__remove{position:absolute;top:8px;right:8px;background:none;border:none;font-size:16px;cursor:pointer}.card__remove{right:12px}.card__expand{right:40px}@media (max-width: 768px){.card{padding:12px}}.comparison-table-container{overflow-x:auto;margin:20px 0}.comparison-table{width:100%;border-collapse:collapse;table-layout:auto;border:1px solid var(--neutral-color)}.comparison-table th,.comparison-table td{padding:12px;text-align:center;border:1px solid;font-size:14px}.comparison-table th{background-color:var(--neutral-color, #f9f9f9);font-weight:700}.comparison-table .row-header{background-color:var(--neutral-color, #f0f0f0);font-weight:700}.comparison-table .highlight{background-color:var(--primary-color, #1F877D);color:var(--text-color-inverse, white)}.flexbox{display:flex;flex-wrap:wrap;padding:16px;gap:8px;border:1px solid #ddd}.flexbox--primary{background-color:#e3f2fd}.flexbox--secondary{background-color:#fff}.header{display:flex;flex-wrap:wrap;padding:16px;gap:8px;border:1px solid #ddd}.header--primary{background-color:#e3f2fd}.header--secondary{background-color:#fff}.footer{display:flex;flex-wrap:wrap;padding:16px;gap:8px;border:1px solid #ddd}.footer--primary{background-color:#e3f2fd}.footer--secondary{background-color:#fff}.pagination{display:flex;flex-wrap:wrap;padding:16px;gap:8px;border:1px solid #ddd}.pagination--primary{background-color:#e3f2fd}.pagination--secondary{background-color:#fff}.sidebar{display:flex;flex-wrap:wrap;padding:16px;gap:8px;border:1px solid #ddd}.sidebar--primary{background-color:#e3f2fd}.sidebar--secondary{background-color:#fff}.tabs{display:flex;flex-wrap:wrap;padding:16px;gap:8px;border:1px solid #ddd}.tabs--primary{background-color:#e3f2fd}.tabs--secondary{background-color:#fff}.accordion{border-radius:var(--border-radius);transition:var(--transition-speed) ease}.accordion__item{margin-bottom:var(--spacing-sm)}.accordion__header{padding:16px;width:100%;text-align:left;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background-color var(--transition-speed),color var(--transition-speed)}.accordion--primary .accordion__header{background-color:var(--primary-color);color:var(--text-color-inverse)}.accordion--secondary .accordion__header{background-color:transparent}.accordion--primary.accordion--secondary .accordion__header{background-color:var(--secondary-color)}.accordion--primary.accordion--info .accordion__header{background-color:var(--info-color)}.accordion--primary.accordion--warning .accordion__header{background-color:var(--warning-color)}.accordion--primary.accordion--alert .accordion__header{background-color:var(--alert-color)}.accordion--primary.accordion--success .accordion__header{background-color:var(--success-color)}.accordion--primary.accordion--neutral .accordion__header{background-color:var(--neutral-color)}.accordion--primary.accordion--dark .accordion__header{background-color:var(--dark-color)}.accordion--primary.accordion--classy-color-1 .accordion__header{background-color:var(--classy-color-1)}.accordion--primary.accordion--classy-color-2 .accordion__header{background-color:var(--classy-color-2)}.accordion--primary.accordion--classy-color-3 .accordion__header{background-color:var(--classy-color-3)}.accordion--primary.accordion--classy-color-4 .accordion__header{background-color:var(--classy-color-4)}.accordion--primary.accordion--classy-color-5 .accordion__header{background-color:var(--classy-color-5)}.accordion--primary.accordion--small-switch-color-1 .accordion__header{background-color:var(--small-switch-color-1)}.accordion--primary.accordion--small-switch-color-2 .accordion__header{background-color:var(--small-switch-color-2)}.accordion--primary.accordion--natural-color-1 .accordion__header{background-color:var(--natural-color-1)}.accordion--primary.accordion--natural-color-2 .accordion__header{background-color:var(--natural-color-2)}.accordion--primary.accordion--natural-color-3 .accordion__header{background-color:var(--natural-color-3)}.accordion--primary.accordion--grey-friend-1 .accordion__header{background-color:var(--grey-friend-1)}.accordion--primary.accordion--grey-friend-2 .accordion__header{background-color:var(--grey-friend-2)}.accordion--primary.accordion--shade-1 .accordion__header{background-color:var(--shade-1)}.accordion--primary.accordion--shade-2 .accordion__header{background-color:var(--shade-2)}.accordion--primary.accordion--shade-3 .accordion__header{background-color:var(--shade-3)}.accordion--primary.accordion--shade-4 .accordion__header{background-color:var(--shade-4)}.accordion--secondary .accordion__header{background-color:transparent;border:2px solid var(--primary-color);color:var(--primary-color)}.accordion--secondary.accordion--secondary .accordion__header{border-color:var(--secondary-color);color:var(--secondary-color)}.accordion--secondary.accordion--info .accordion__header{border-color:var(--info-color);color:var(--info-color)}.accordion--secondary.accordion--warning .accordion__header{border-color:var(--warning-color);color:var(--warning-color)}.accordion--secondary.accordion--alert .accordion__header{border-color:var(--alert-color);color:var(--alert-color)}.accordion--secondary.accordion--success .accordion__header{border-color:var(--success-color);color:var(--success-color)}.accordion--secondary.accordion--neutral .accordion__header{border-color:var(--neutral-color);color:var(--neutral-color)}.accordion--secondary.accordion--dark .accordion__header{border-color:var(--dark-color);color:var(--dark-color)}.accordion--secondary.accordion--classy-color-1 .accordion__header{border-color:var(--classy-color-1);color:var(--classy-color-1)}.accordion--secondary.accordion--classy-color-2 .accordion__header{border-color:var(--classy-color-2);color:var(--classy-color-2)}.accordion--secondary.accordion--classy-color-3 .accordion__header{border-color:var(--classy-color-3);color:var(--classy-color-3)}.accordion--secondary.accordion--classy-color-4 .accordion__header{border-color:var(--classy-color-4);color:var(--classy-color-4)}.accordion--secondary.accordion--classy-color-5 .accordion__header{border-color:var(--classy-color-5);color:var(--classy-color-5)}.accordion--secondary.accordion--small-switch-color-1 .accordion__header{border-color:var(--small-switch-color-1);color:var(--small-switch-color-1)}.accordion--secondary.accordion--small-switch-color-2 .accordion__header{border-color:var(--small-switch-color-2);color:var(--small-switch-color-2)}.accordion--secondary.accordion--natural-color-1 .accordion__header{border-color:var(--natural-color-1);color:var(--natural-color-1)}.accordion--secondary.accordion--natural-color-2 .accordion__header{border-color:var(--natural-color-2);color:var(--natural-color-2)}.accordion--secondary.accordion--natural-color-3 .accordion__header{border-color:var(--natural-color-3);color:var(--natural-color-3)}.accordion--secondary.accordion--grey-friend-1 .accordion__header{border-color:var(--grey-friend-1);color:var(--grey-friend-1)}.accordion--secondary.accordion--grey-friend-2 .accordion__header{border-color:var(--grey-friend-2);color:var(--grey-friend-2)}.accordion--secondary.accordion--shade-1 .accordion__header{border-color:var(--shade-1);color:var(--shade-1)}.accordion--secondary.accordion--shade-2 .accordion__header{border-color:var(--shade-2);color:var(--shade-2)}.accordion--secondary.accordion--shade-3 .accordion__header{border-color:var(--shade-3);color:var(--shade-3)}.accordion--secondary.accordion--shade-4 .accordion__header{border-color:var(--shade-4);color:var(--shade-4)}.accordion__content{max-height:0;overflow:hidden;transition:max-height .3s ease;padding:0 16px;background-color:inherit}.accordion--border .accordion__content{border:1px solid var(--border-color)}.accordion__content--open{max-height:200px;padding:16px}.accordion__icon{transition:transform var(--transition-speed)}.accordion__icon--open{transform:rotate(180deg)}@media (max-width: 768px){.accordion__header{font-size:var(--font-size-small)}}.herobanner{display:flex;flex-wrap:wrap;padding:16px;gap:8px;border:1px solid #ddd}.herobanner--primary{background-color:#e3f2fd}.herobanner--secondary{background-color:#fff}.heroimagevideo{display:flex;flex-wrap:wrap;padding:16px;gap:8px;border:1px solid #ddd}.heroimagevideo--primary{background-color:#e3f2fd}.heroimagevideo--secondary{background-color:#fff}.admindashboard,.sidebartopnav,.productpage,.shoppingcart,.signinpage,.registrationpage,.herosection,.featureslist,.calltoaction,.testimonials,.formsection,.locationinfo,.socialmedialinks{padding:16px;border-radius:8px;background-color:#f0f0f0;border:1px solid #ddd}

package/src/App.jsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
-import { ThemeProvider } from './themes/ThemeProvider';
-import PageDashboard from './PageDashboard'; // Pages dashboard view
-import CreatePage from './CreatePage'; // Create page view
-import Page from './Page'; // Render dynamic pages
-import SiteBuilder from './SiteBuilder'; // JSON Site builder
-import MDXEditor from './MDXEditor'; // MDX Site builder
-
-const App = () => {
-  return (
-    <ThemeProvider>
-      <Router>
-        <Routes>
-          {/* Main Dashboard */}
-          <Route path="/" element={<PageDashboard />} />
-          {/* Create new page */}
-          <Route path="/create-page" element={<CreatePage />} />
-          {/* Site builders for JSON and MDX */}
-          <Route path="/site-builder/json/:pageName" element={<SiteBuilder />} />
-          <Route path="/site-builder/mdx/:pageName" element={<MDXEditor />} />
-          {/* Storybook Route */}
-          <Route path="/storybook" element={<Storybook />} />
-        </Routes>
-      </Router>
-    </ThemeProvider>
-  );
-};
-
-// Storybook IFrame for browsing documentation
-const Storybook = () => (
-  <iframe
-    src="http://localhost:6006" // Adjust based on your Storybook setup
-    style={{ width: '100%', height: '100vh', border: 'none' }}
-    title="Storybook"
-  ></iframe>
-);
-
-export default App;

package/src/CreatePage.jsx

@@ -1,61 +0,0 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-
-const CreatePage = () => {
-  const navigate = useNavigate();
-  const [pageName, setPageName] = useState('');
-  const [pageType, setPageType] = useState('json'); // Default to JSON
-  const [errorMessage, setErrorMessage] = useState('');
-
-  const handleCreatePage = () => {
-    const newPage = {
-      pageName,
-      pageType,
-      content: '', // Optional: You can pass default content here if needed
-    };
-
-    // Call API to create the page on the backend
-    fetch('/api/create-page', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify(newPage),
-    })
-      .then((response) => response.json())
-      .then((data) => {
-        if (data.error) {
-          setErrorMessage(data.error);
-        } else {
-          // Navigate to the corresponding builder
-          if (pageType === 'json') {
-            navigate(`/site-builder/json/${pageName}`);
-          } else {
-            navigate(`/site-builder/mdx/${pageName}`);
-          }
-        }
-      })
-      .catch((error) => setErrorMessage(`Error: ${error.message}`));
-  };
-
-  return (
-    <div>
-      <h1>Create a New Page</h1>
-      <input
-        type="text"
-        placeholder="Enter page name"
-        value={pageName}
-        onChange={(e) => setPageName(e.target.value)}
-      />
-      <select value={pageType} onChange={(e) => setPageType(e.target.value)}>
-        <option value="json">JSON Format</option>
-        <option value="mdx">MDX Format</option>
-      </select>
-      <button onClick={handleCreatePage}>Create Page</button>
-
-      {errorMessage && <p style={{ color: 'red' }}>{errorMessage}</p>}
-    </div>
-  );
-};
-
-export default CreatePage;