diff --git a/microsite-canon/app/core-concepts/[slug]/page.tsx b/microsite-canon/app/[slug]/page.tsx similarity index 74% rename from microsite-canon/app/core-concepts/[slug]/page.tsx rename to microsite-canon/app/[slug]/page.tsx index 35be6dc2c9..8bd03a42fe 100644 --- a/microsite-canon/app/core-concepts/[slug]/page.tsx +++ b/microsite-canon/app/[slug]/page.tsx @@ -1,8 +1,9 @@ -import { coreConcepts } from '@/utils/data'; +import { overview } from '@/utils/data'; import { notFound } from 'next/navigation'; import fs from 'fs'; import path from 'path'; -import styles from './page.module.css'; +import styles from '../page.module.css'; + export default async function Page({ params, }: { @@ -13,8 +14,9 @@ export default async function Page({ if (fs.existsSync(filePath)) { const { default: Post } = await import(`@/content/${slug}.mdx`); + return ( -
+
); @@ -24,7 +26,7 @@ export default async function Page({ } export function generateStaticParams() { - return coreConcepts.map(concept => ({ slug: concept.slug })); + return overview.map(page => ({ slug: page.slug })); } export const dynamicParams = false; diff --git a/microsite-canon/app/core-concepts/[slug]/page.module.css b/microsite-canon/app/core-concepts/[slug]/page.module.css deleted file mode 100644 index b89fa65437..0000000000 --- a/microsite-canon/app/core-concepts/[slug]/page.module.css +++ /dev/null @@ -1,6 +0,0 @@ -.container { - width: 100%; - max-width: 960px; - margin: 0 auto; - padding: 0 24px 64px; -} diff --git a/microsite-canon/app/layout.tsx b/microsite-canon/app/layout.tsx index 560f1e24b7..5d3c54f3ef 100644 --- a/microsite-canon/app/layout.tsx +++ b/microsite-canon/app/layout.tsx @@ -6,9 +6,9 @@ import { Providers } from './providers'; import { cookies } from 'next/headers'; import './globals.css'; -import '../../packages/canon/src/css/core.css'; -import '../../packages/canon/src/css/components.css'; -import '../../packages/canon/.storybook/themes/backstage.css'; +import '@/public/core.css'; +import '@/public/components.css'; +import '@/public/backstage.css'; export const metadata: Metadata = { title: 'Canon', @@ -22,16 +22,10 @@ export default async function RootLayout({ }>) { const cookieStore = await cookies(); const theme = cookieStore.get('theme')?.value || 'light'; - const version = cookieStore.get('version')?.value || 'v1'; - - let dataTheme = 'light'; - if (version === 'v1' && theme === 'light') dataTheme = 'backstage-light'; - if (version === 'v1' && theme === 'dark') dataTheme = 'backstage-dark'; - if (version === 'v2' && theme === 'light') dataTheme = 'light'; - if (version === 'v2' && theme === 'dark') dataTheme = 'dark'; + const version = cookieStore.get('version')?.value || 'v2'; return ( - +
diff --git a/microsite-canon/app/page.module.css b/microsite-canon/app/page.module.css index 0649f84c65..9119d2e9c5 100644 --- a/microsite-canon/app/page.module.css +++ b/microsite-canon/app/page.module.css @@ -3,7 +3,7 @@ } .container { - padding-left: 280px; + padding-left: 300px; width: 100%; } @@ -35,3 +35,10 @@ width: 100%; height: auto; } + +.pageContainer { + width: 100%; + max-width: 960px; + margin: 0 auto; + padding: 0 24px 64px; +} diff --git a/microsite-canon/app/page.tsx b/microsite-canon/app/page.tsx index 0c11528d93..a6429cb79d 100644 --- a/microsite-canon/app/page.tsx +++ b/microsite-canon/app/page.tsx @@ -1,4 +1,5 @@ import styles from './page.module.css'; + export default async function Page() { const { default: Post } = await import(`@/content/home.mdx`); @@ -8,5 +9,3 @@ export default async function Page() {
); } - -export const dynamicParams = false; diff --git a/microsite-canon/app/theme/[slug]/page.tsx b/microsite-canon/app/theme/[slug]/page.tsx new file mode 100644 index 0000000000..41031f143c --- /dev/null +++ b/microsite-canon/app/theme/[slug]/page.tsx @@ -0,0 +1,33 @@ +import { theme } from '@/utils/data'; +import { notFound } from 'next/navigation'; +import fs from 'fs'; +import path from 'path'; +import styles from '../../page.module.css'; + +export default async function Page({ + params, +}: { + params: Promise<{ slug: string }>; +}) { + const slug = (await params).slug; + const filePath = path.resolve(process.cwd(), `content/${slug}.mdx`); + + if (fs.existsSync(filePath)) { + const { default: Post } = await import(`@/content/${slug}.mdx`); + return ( +
+ +
+ ); + } else { + return notFound(); + } +} + +export function generateStaticParams() { + return theme.map(component => ({ + slug: component.slug, + })); +} + +export const dynamicParams = false; diff --git a/microsite-canon/components/Sidebar/Sidebar.module.css b/microsite-canon/components/Sidebar/Sidebar.module.css index 738e7877c2..ac9aefb0a6 100644 --- a/microsite-canon/components/Sidebar/Sidebar.module.css +++ b/microsite-canon/components/Sidebar/Sidebar.module.css @@ -2,7 +2,7 @@ position: fixed; top: 0; left: 0; - width: 280px; + width: 300px; height: 100vh; color: var(--canon-text-primary); background-color: var(--canon-surface-1); @@ -30,7 +30,6 @@ } .menu { - margin-top: 20px; display: flex; flex-direction: row; position: relative; diff --git a/microsite-canon/components/Sidebar/docs.tsx b/microsite-canon/components/Sidebar/docs.tsx index 8d1e079768..1c88adcc34 100644 --- a/microsite-canon/components/Sidebar/docs.tsx +++ b/microsite-canon/components/Sidebar/docs.tsx @@ -1,11 +1,35 @@ 'use client'; import Link from 'next/link'; -import { components, coreConcepts, layoutComponents } from '@/utils/data'; +import { components, overview, layoutComponents, theme } from '@/utils/data'; import { Box, Text } from '@backstage/canon'; import { motion } from 'framer-motion'; import styles from './Sidebar.module.css'; import { usePathname } from 'next/navigation'; +import { Fragment } from 'react'; + +const data = [ + { + title: 'Overview', + content: overview, + url: '', + }, + { + title: 'Theme', + content: theme, + url: '/theme', + }, + { + title: 'Layout Components', + content: layoutComponents, + url: '/components', + }, + { + title: 'Components', + content: components, + url: '/components', + }, +]; export const Docs = () => { const pathname = usePathname(); @@ -26,35 +50,33 @@ export const Docs = () => { }} transition={{ duration: 0.2 }} > - - - Core Concepts - - - {coreConcepts.map(concept => ( - - {concept.title} - - ))} - - - Layout Components - - - {layoutComponents.map(component => ( - - {component.title} - - ))} - - - Components - - - {components.map(component => ( - - {component.title} - + {data.map(section => ( + + + + {section.title} + + + {section.content.map(item => ( + + {item.title} + + {item.status === 'alpha' && 'Alpha'} + {item.status === 'beta' && 'Beta'} + {item.status === 'inProgress' && 'In Progress'} + {item.status === 'stable' && 'Stable'} + {item.status === 'deprecated' && 'Deprecated'} + + + ))} + ))} ); diff --git a/microsite-canon/components/Sidebar/playground.tsx b/microsite-canon/components/Sidebar/playground.tsx index e20aa2e137..5e784c7235 100644 --- a/microsite-canon/components/Sidebar/playground.tsx +++ b/microsite-canon/components/Sidebar/playground.tsx @@ -52,8 +52,8 @@ export const Playground = () => { transition={{ duration: 0.2 }} style={{ position: 'absolute' }} > - - + + Components @@ -66,8 +66,8 @@ export const Playground = () => { />
))} - - + + Screen sizes diff --git a/microsite-canon/components/Tabs/Tabs.module.css b/microsite-canon/components/Tabs/Tabs.module.css index fd48657ca8..e74b47853a 100644 --- a/microsite-canon/components/Tabs/Tabs.module.css +++ b/microsite-canon/components/Tabs/Tabs.module.css @@ -1,11 +1,17 @@ .tabs { border-radius: 0.375rem; - flex: 1; width: 100%; background-color: var(--canon-surface-2); transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; } +.tabsTheme { + width: 142px; + border-radius: 0.375rem; + background-color: var(--canon-surface-2); + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; +} + .list { display: flex; position: relative; @@ -23,7 +29,7 @@ outline: 0; background: none; appearance: none; - color: var(--canon-text-secondary); + color: var(--canon-text-secondary) !important; font-family: inherit; font-size: 0.75rem; line-height: 1.25rem; @@ -34,7 +40,11 @@ cursor: pointer; &[data-selected] { - color: var(--canon-text-primary); + color: var(--canon-text-primary) !important; + + & p { + color: var(--canon-text-primary) !important; + } } @media (hover: hover) { @@ -57,6 +67,10 @@ } } +.tab p { + color: var(--canon-text-secondary) !important; +} + .indicator { position: absolute; z-index: -1; diff --git a/microsite-canon/components/Tabs/index.tsx b/microsite-canon/components/Tabs/index.tsx index 6293dabb34..8599b3ff02 100644 --- a/microsite-canon/components/Tabs/index.tsx +++ b/microsite-canon/components/Tabs/index.tsx @@ -21,12 +21,12 @@ export const TabsVersion = ({ - V1 + Theme 1 - V2 + Theme 2 @@ -42,7 +42,7 @@ export const TabsTheme = ({ }) => { return ( diff --git a/microsite-canon/content/about.mdx b/microsite-canon/content/about.mdx new file mode 100644 index 0000000000..7755ec027c --- /dev/null +++ b/microsite-canon/content/about.mdx @@ -0,0 +1,3 @@ +# About + +This is the about page. diff --git a/microsite-canon/public/backstage.css b/microsite-canon/public/backstage.css index bf762fb9ef..cc7e0bdade 100644 --- a/microsite-canon/public/backstage.css +++ b/microsite-canon/public/backstage.css @@ -1 +1,71 @@ -:root{--canon-font-regular:"Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;& .cn-button{text-transform:uppercase;box-shadow:none;background-color:#1f5493;border-radius:4px;padding:6px 16px;font-size:.875rem;font-weight:400;line-height:1.75;transition:background-color .25s cubic-bezier(.4,0,.2,1),box-shadow .25s cubic-bezier(.4,0,.2,1),border .25s cubic-bezier(.4,0,.2,1);&:hover{box-shadow:none}&.cn-button-primary{color:#fff;background-color:#153a66;box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;&:hover{box-shadow:0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f}}&.cn-button-secondary{color:#1f5493;background-color:#0000;border:1px solid #1f549380;&:hover{background-color:#1f54930a;border:1px solid #1f5493}}&.cn-button-tertiary{color:#1f5493;background-color:#0000;border:none}}}[data-theme=backstage-light]{--canon-accent:#2e77d0;--canon-background:#f8f8f8;--canon-surface-1:#fff;--canon-surface-2:#f4f4f4;--canon-text-primary:#000;--canon-text-primary-on-accent:#fff;--canon-text-secondary:#646464}[data-theme=backstage-dark]{--canon-accent:#fff;--canon-background:#000;--canon-surface-1:#121212;--canon-surface-2:#1a1a1a;--canon-border-base:#fff3;--canon-border-warning:#f50000;--canon-border-error:#f87503;--canon-border-selected:#25d262;--canon-error:#f50000;--canon-text-primary:#fff;--canon-text-primary-on-accent:#000;--canon-text-secondary:#b3b3b3} \ No newline at end of file +:root { + --canon-font-regular: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; + + & .cn-button { + text-transform: uppercase; + box-shadow: none; + background-color: #1f5493; + border-radius: 4px; + padding: 6px 16px; + font-size: .875rem; + font-weight: 400; + line-height: 1.75; + transition: background-color .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s cubic-bezier(.4, 0, .2, 1), border .25s cubic-bezier(.4, 0, .2, 1); + + &:hover { + box-shadow: none; + } + + &.cn-button-primary { + color: #fff; + background-color: #153a66; + box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f; + + &:hover { + box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f; + } + } + + &.cn-button-secondary { + color: #1f5493; + background-color: #0000; + border: 1px solid #1f549380; + + &:hover { + background-color: #1f54930a; + border: 1px solid #1f5493; + } + } + + &.cn-button-tertiary { + color: #1f5493; + background-color: #0000; + border: none; + } + } +} + +[data-theme="backstage-light"] { + --canon-accent: #2e77d0; + --canon-background: #f8f8f8; + --canon-surface-1: #fff; + --canon-surface-2: #f4f4f4; + --canon-text-primary: #000; + --canon-text-primary-on-accent: #fff; + --canon-text-secondary: #646464; +} + +[data-theme="backstage-dark"] { + --canon-accent: #fff; + --canon-background: #000; + --canon-surface-1: #121212; + --canon-surface-2: #1a1a1a; + --canon-border-base: #fff3; + --canon-border-warning: #f50000; + --canon-border-error: #f87503; + --canon-border-selected: #25d262; + --canon-error: #f50000; + --canon-text-primary: #fff; + --canon-text-primary-on-accent: #000; + --canon-text-secondary: #b3b3b3; +} diff --git a/microsite-canon/public/components.css b/microsite-canon/public/components.css index 07f65ac0be..a3f3899cd8 100644 --- a/microsite-canon/public/components.css +++ b/microsite-canon/public/components.css @@ -1 +1,279 @@ -.cn-button{all:unset;user-select:none;font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-bold);font-size:var(--canon-font-size-body);cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:0;transition:all .15s;display:inline-flex}.cn-button-primary{background-color:var(--canon-accent);color:var(--canon-text-primary-on-accent);&:hover{box-shadow:inset 0 0 0 1px var(--canon-border-focus);color:var(--canon-text-primary);background-color:#0000}}.cn-button-secondary{box-shadow:inset 0 0 0 1px var(--canon-border-base);color:var(--canon-text-primary);background-color:#0000;&:hover{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}}.cn-button-tertiary{color:var(--canon-text-primary);background-color:#0000;&:hover{color:var(--canon-text-secondary)}}.cn-button-small{height:32px;padding-left:6px;padding-right:6px}.cn-button-medium{height:40px;padding-left:8px;padding-right:8px}.cn-button-content{align-items:center;gap:var(--canon-spacing-xs);font-weight:var(--canon-font-weight-bold);display:flex}.cn-button-content-icon-both{flex:1}.canon-stack{flex-direction:column;display:flex}.canon-inline{flex-wrap:wrap;display:flex}.canon-grid{display:grid}.canon-container{max-width:var(--canon-container-max-width);padding:0 var(--canon-container-padding);margin:0 auto}.icon-12{width:12px;height:12px}.icon-16{width:16px;height:16px}.icon-24{width:24px;height:24px}.checkbox-label{justify-content:center;align-items:center;gap:var(--canon-spacing-xs);font-size:var(--canon-font-size-xs);font-family:var(--canon-font-regular);color:var(--canon-text-primary);user-select:none;flex-direction:row;display:flex;&:hover{& .checkbox{box-shadow:inset 0 0 0 1px var(--canon-border-hover)}}}.checkbox{all:unset;width:1rem;height:1rem;box-shadow:inset 0 0 0 1px var(--canon-border-base);cursor:pointer;border-radius:2px;justify-content:center;align-items:center;transition:all .2s ease-in-out;display:flex;&[data-checked]{background-color:var(--canon-accent)}}.checkbox-indicator{color:var(--canon-text-primary-on-accent);justify-content:center;align-items:center;display:flex}.table{background-color:var(--canon-surface-1);border-radius:var(--canon-border-radius-xs);width:100%;padding-bottom:var(--canon-spacing-5xs);padding-top:var(--canon-spacing-5xs);font-size:var(--canon-font-size-body);position:relative;overflow:auto;& table{caption-side:bottom;width:100%;font-size:var(--canon-font-size-sm);border-collapse:collapse}}.table-head{text-align:left;padding:var(--canon-spacing-xs)}.table-body{& tr:last-child{border-bottom:none}}.table-row{transition:color .2s ease-in-out;&:hover td{background-color:var(--canon-surface-3)}& .table-cell:first-child{border-top-left-radius:var(--canon-border-radius-xs);border-bottom-left-radius:var(--canon-border-radius-xs);box-shadow:inset 4px 2px 0 0 var(--canon-surface-1),inset 4px -2px 0 0 var(--canon-surface-1);padding-left:var(--canon-spacing-xs)}& .table-cell:last-child{border-top-right-radius:var(--canon-border-radius-xs);border-bottom-right-radius:var(--canon-border-radius-xs);box-shadow:inset -4px 2px 0 0 var(--canon-surface-1),inset -4px -2px 0 0 var(--canon-surface-1);padding-right:var(--canon-spacing-xs)}}.table-cell{padding:var(--canon-spacing-xs);background-color:var(--canon-surface-2);box-shadow:inset 0px 2px 0 0 var(--canon-surface-1),inset 0px -2px 0 0 var(--canon-surface-1)}.text{font-family:var(--canon-font-regular);color:var(--canon-text-primary);margin:0;padding:0;&.text-body{font-size:var(--canon-font-size-body);line-height:140%}&.text-subtitle{font-size:var(--canon-font-size-subtitle);line-height:140%}&.text-caption{font-size:var(--canon-font-size-caption);line-height:140%}&.text-label{font-size:var(--canon-font-size-label);line-height:140%}&.text-regular{font-weight:var(--canon-font-weight-regular)}&.text-bold{font-weight:var(--canon-font-weight-bold)}}.text{font-family:var(--canon-font-regular);color:var(--canon-text-primary);margin:0;padding:0;&.text-display{font-size:var(--canon-font-size-display);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title1{font-size:var(--canon-font-size-title1);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title2{font-size:var(--canon-font-size-title2);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title3{font-size:var(--canon-font-size-title3);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title4{font-size:var(--canon-font-size-title4);line-height:100%;font-weight:var(--canon-font-weight-bold)}&.text-title5{font-size:var(--canon-font-size-title5);line-height:100%;font-weight:var(--canon-font-weight-bold)}} \ No newline at end of file +.cn-button { + all: unset; + user-select: none; + font-family: var(--canon-font-regular); + font-weight: var(--canon-font-weight-bold); + font-size: var(--canon-font-size-body); + cursor: pointer; + border-radius: 8px; + justify-content: center; + align-items: center; + padding: 0; + transition: all .15s; + display: inline-flex; +} + +.cn-button-primary { + background-color: var(--canon-accent); + color: var(--canon-text-primary-on-accent); + + &:hover { + box-shadow: inset 0 0 0 1px var(--canon-border-focus); + color: var(--canon-text-primary); + background-color: #0000; + } +} + +.cn-button-secondary { + box-shadow: inset 0 0 0 1px var(--canon-border-base); + color: var(--canon-text-primary); + background-color: #0000; + + &:hover { + box-shadow: inset 0 0 0 1px var(--canon-border-hover); + } +} + +.cn-button-tertiary { + color: var(--canon-text-primary); + background-color: #0000; + + &:hover { + color: var(--canon-text-secondary); + } +} + +.cn-button-small { + height: 32px; + padding-left: 6px; + padding-right: 6px; +} + +.cn-button-medium { + height: 40px; + padding-left: 8px; + padding-right: 8px; +} + +.cn-button-content { + align-items: center; + gap: var(--canon-spacing-xs); + font-weight: var(--canon-font-weight-bold); + display: flex; +} + +.cn-button-content-icon-both { + flex: 1; +} + +.canon-stack { + flex-direction: column; + display: flex; +} + +.canon-inline { + flex-wrap: wrap; + display: flex; +} + +.canon-grid { + display: grid; +} + +.canon-container { + max-width: var(--canon-container-max-width); + padding: 0 var(--canon-container-padding); + margin: 0 auto; +} + +.icon-12 { + width: 12px; + height: 12px; +} + +.icon-16 { + width: 16px; + height: 16px; +} + +.icon-24 { + width: 24px; + height: 24px; +} + +.checkbox-label { + justify-content: center; + align-items: center; + gap: var(--canon-spacing-xs); + font-size: var(--canon-font-size-xs); + font-family: var(--canon-font-regular); + color: var(--canon-text-primary); + user-select: none; + flex-direction: row; + display: flex; + + &:hover { + & .checkbox { + box-shadow: inset 0 0 0 1px var(--canon-border-hover); + } + } +} + +.checkbox { + all: unset; + width: 1rem; + height: 1rem; + box-shadow: inset 0 0 0 1px var(--canon-border-base); + cursor: pointer; + border-radius: 2px; + justify-content: center; + align-items: center; + transition: all .2s ease-in-out; + display: flex; + + &[data-checked] { + background-color: var(--canon-accent); + } +} + +.checkbox-indicator { + color: var(--canon-text-primary-on-accent); + justify-content: center; + align-items: center; + display: flex; +} + +.table { + background-color: var(--canon-surface-1); + border-radius: var(--canon-border-radius-xs); + width: 100%; + padding-bottom: var(--canon-spacing-5xs); + padding-top: var(--canon-spacing-5xs); + font-size: var(--canon-font-size-body); + position: relative; + overflow: auto; + + & table { + caption-side: bottom; + width: 100%; + font-size: var(--canon-font-size-sm); + border-collapse: collapse; + } +} + +.table-head { + text-align: left; + padding: var(--canon-spacing-xs); +} + +.table-body { + & tr:last-child { + border-bottom: none; + } +} + +.table-row { + transition: color .2s ease-in-out; + + &:hover td { + background-color: var(--canon-surface-3); + } + + & .table-cell:first-child { + border-top-left-radius: var(--canon-border-radius-xs); + border-bottom-left-radius: var(--canon-border-radius-xs); + box-shadow: inset 4px 2px 0 0 var(--canon-surface-1), inset 4px -2px 0 0 var(--canon-surface-1); + padding-left: var(--canon-spacing-xs); + } + + & .table-cell:last-child { + border-top-right-radius: var(--canon-border-radius-xs); + border-bottom-right-radius: var(--canon-border-radius-xs); + box-shadow: inset -4px 2px 0 0 var(--canon-surface-1), inset -4px -2px 0 0 var(--canon-surface-1); + padding-right: var(--canon-spacing-xs); + } +} + +.table-cell { + padding: var(--canon-spacing-xs); + background-color: var(--canon-surface-2); + box-shadow: inset 0px 2px 0 0 var(--canon-surface-1), inset 0px -2px 0 0 var(--canon-surface-1); +} + +.text { + font-family: var(--canon-font-regular); + color: var(--canon-text-primary); + margin: 0; + padding: 0; + + &.text-body { + font-size: var(--canon-font-size-body); + line-height: 140%; + } + + &.text-subtitle { + font-size: var(--canon-font-size-subtitle); + line-height: 140%; + } + + &.text-caption { + font-size: var(--canon-font-size-caption); + line-height: 140%; + } + + &.text-label { + font-size: var(--canon-font-size-label); + line-height: 140%; + } + + &.text-regular { + font-weight: var(--canon-font-weight-regular); + } + + &.text-bold { + font-weight: var(--canon-font-weight-bold); + } +} + +.text { + font-family: var(--canon-font-regular); + color: var(--canon-text-primary); + margin: 0; + padding: 0; + + &.text-display { + font-size: var(--canon-font-size-display); + line-height: 100%; + font-weight: var(--canon-font-weight-bold); + } + + &.text-title1 { + font-size: var(--canon-font-size-title1); + line-height: 100%; + font-weight: var(--canon-font-weight-bold); + } + + &.text-title2 { + font-size: var(--canon-font-size-title2); + line-height: 100%; + font-weight: var(--canon-font-weight-bold); + } + + &.text-title3 { + font-size: var(--canon-font-size-title3); + line-height: 100%; + font-weight: var(--canon-font-weight-bold); + } + + &.text-title4 { + font-size: var(--canon-font-size-title4); + line-height: 100%; + font-weight: var(--canon-font-weight-bold); + } + + &.text-title5 { + font-size: var(--canon-font-size-title5); + line-height: 100%; + font-weight: var(--canon-font-weight-bold); + } +} diff --git a/microsite-canon/public/core.css b/microsite-canon/public/core.css index 88cf0bee76..64010088dc 100644 --- a/microsite-canon/public/core.css +++ b/microsite-canon/public/core.css @@ -1,2 +1,5726 @@ /*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */ -@layer base{*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;tab-size:4;font-family:system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;line-height:1.15}body{margin:0}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{border-color:currentColor}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:1.15}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}*,html,body{font-family:var(--canon-font-regular);font-weight:var(--canon-font-weight-regular)}}@layer utilities{.cu-block{display:block}.cu-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-border-none{border-width:0;border-color:#0000}.cu-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-col-end-1{grid-column-end:1}.cu-col-end-10{grid-column-end:10}.cu-col-end-11{grid-column-end:11}.cu-col-end-12{grid-column-end:12}.cu-col-end-13{grid-column-end:13}.cu-col-end-2{grid-column-end:2}.cu-col-end-3{grid-column-end:3}.cu-col-end-4{grid-column-end:4}.cu-col-end-5{grid-column-end:5}.cu-col-end-6{grid-column-end:6}.cu-col-end-7{grid-column-end:7}.cu-col-end-8{grid-column-end:8}.cu-col-end-9{grid-column-end:9}.cu-col-end-auto{grid-column-end:auto}.cu-col-span-1{grid-column:span 1/span 1}.cu-col-span-10{grid-column:span 10/span 10}.cu-col-span-11{grid-column:span 11/span 11}.cu-col-span-12{grid-column:span 12/span 12}.cu-col-span-2{grid-column:span 2/span 2}.cu-col-span-3{grid-column:span 3/span 3}.cu-col-span-4{grid-column:span 4/span 4}.cu-col-span-5{grid-column:span 5/span 5}.cu-col-span-6{grid-column:span 6/span 6}.cu-col-span-7{grid-column:span 7/span 7}.cu-col-span-8{grid-column:span 8/span 8}.cu-col-span-9{grid-column:span 9/span 9}.cu-col-span-auto{grid-column:span auto/span auto}.cu-col-start-1{grid-column-start:1}.cu-col-start-10{grid-column-start:10}.cu-col-start-11{grid-column-start:11}.cu-col-start-12{grid-column-start:12}.cu-col-start-13{grid-column-start:13}.cu-col-start-2{grid-column-start:2}.cu-col-start-3{grid-column-start:3}.cu-col-start-4{grid-column-start:4}.cu-col-start-5{grid-column-start:5}.cu-col-start-6{grid-column-start:6}.cu-col-start-7{grid-column-start:7}.cu-col-start-8{grid-column-start:8}.cu-col-start-9{grid-column-start:9}.cu-col-start-auto{grid-column-start:auto}.cu-flex{display:flex}.cu-flex-col{flex-direction:column}.cu-flex-nowrap{flex-wrap:nowrap}.cu-flex-row{flex-direction:row}.cu-flex-wrap{flex-wrap:wrap}.cu-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-gap-lg{gap:var(--canon-spacing-lg)}.cu-gap-md{gap:var(--canon-spacing-md)}.cu-gap-none{gap:0}.cu-gap-sm{gap:var(--canon-spacing-sm)}.cu-gap-xl{gap:var(--canon-spacing-xl)}.cu-gap-xs{gap:var(--canon-spacing-xs)}.cu-grid{display:grid}.cu-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-hidden{display:none}.cu-inline{display:inline}.cu-inline-block{display:inline-block}.cu-items-center{align-items:center}.cu-items-end{align-items:flex-end}.cu-items-start{align-items:flex-start}.cu-items-stretch{align-items:stretch}.cu-justify-around{justify-content:space-around}.cu-justify-between{justify-content:space-between}.cu-justify-center{justify-content:center}.cu-justify-end{justify-content:flex-end}.cu-justify-start{justify-content:flex-start}.cu-justify-stretch{justify-content:stretch}.cu-m-2xl{margin:var(--canon-spacing-2xl)}.cu-m-lg{margin:var(--canon-spacing-lg)}.cu-m-md{margin:var(--canon-spacing-md)}.cu-m-none{margin:0}.cu-m-sm{margin:var(--canon-spacing-sm)}.cu-m-xl{margin:var(--canon-spacing-xl)}.cu-m-xs{margin:var(--canon-spacing-xs)}.cu-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-mb-none{margin-bottom:0}.cu-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-ml-md{margin-left:var(--canon-spacing-md)}.cu-ml-none{margin-left:0}.cu-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-mr-md{margin-right:var(--canon-spacing-md)}.cu-mr-none{margin-right:0}.cu-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-mt-md{margin-top:var(--canon-spacing-md)}.cu-mt-none{margin-top:0}.cu-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-mx-none{margin-left:0;margin-right:0}.cu-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-my-none{margin-top:0;margin-bottom:0}.cu-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-p-2xl{padding:var(--canon-spacing-2xl)}.cu-p-lg{padding:var(--canon-spacing-lg)}.cu-p-md{padding:var(--canon-spacing-md)}.cu-p-none{padding:0}.cu-p-sm{padding:var(--canon-spacing-sm)}.cu-p-xl{padding:var(--canon-spacing-xl)}.cu-p-xs{padding:var(--canon-spacing-xs)}.cu-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-pb-none{padding-bottom:0}.cu-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-pl-md{padding-left:var(--canon-spacing-md)}.cu-pl-none{padding-left:0}.cu-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-pr-md{padding-right:var(--canon-spacing-md)}.cu-pr-none{padding-right:0}.cu-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-pt-md{padding-top:var(--canon-spacing-md)}.cu-pt-none{padding-top:0}.cu-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-px-none{padding-left:0;padding-right:0}.cu-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-py-none{padding-top:0;padding-bottom:0}.cu-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-rounded-none{border-radius:0}.cu-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-row-span-1{grid-row:span 1/span 1}.cu-row-span-10{grid-row:span 10/span 10}.cu-row-span-11{grid-row:span 11/span 11}.cu-row-span-12{grid-row:span 12/span 12}.cu-row-span-2{grid-row:span 2/span 2}.cu-row-span-3{grid-row:span 3/span 3}.cu-row-span-4{grid-row:span 4/span 4}.cu-row-span-5{grid-row:span 5/span 5}.cu-row-span-6{grid-row:span 6/span 6}.cu-row-span-7{grid-row:span 7/span 7}.cu-row-span-8{grid-row:span 8/span 8}.cu-row-span-9{grid-row:span 9/span 9}.cu-row-span-auto{grid-row:span auto/span auto}.cu-wrap-reverse{flex-wrap:wrap-reverse}@media (width>=640px){.cu-sm-block{display:block}.cu-sm-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-sm-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-sm-border-none{border-width:0;border-color:#0000}.cu-sm-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-sm-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-sm-col-end-1{grid-column-end:1}.cu-sm-col-end-10{grid-column-end:10}.cu-sm-col-end-11{grid-column-end:11}.cu-sm-col-end-12{grid-column-end:12}.cu-sm-col-end-13{grid-column-end:13}.cu-sm-col-end-2{grid-column-end:2}.cu-sm-col-end-3{grid-column-end:3}.cu-sm-col-end-4{grid-column-end:4}.cu-sm-col-end-5{grid-column-end:5}.cu-sm-col-end-6{grid-column-end:6}.cu-sm-col-end-7{grid-column-end:7}.cu-sm-col-end-8{grid-column-end:8}.cu-sm-col-end-9{grid-column-end:9}.cu-sm-col-end-auto{grid-column-end:auto}.cu-sm-col-span-1{grid-column:span 1/span 1}.cu-sm-col-span-10{grid-column:span 10/span 10}.cu-sm-col-span-11{grid-column:span 11/span 11}.cu-sm-col-span-12{grid-column:span 12/span 12}.cu-sm-col-span-2{grid-column:span 2/span 2}.cu-sm-col-span-3{grid-column:span 3/span 3}.cu-sm-col-span-4{grid-column:span 4/span 4}.cu-sm-col-span-5{grid-column:span 5/span 5}.cu-sm-col-span-6{grid-column:span 6/span 6}.cu-sm-col-span-7{grid-column:span 7/span 7}.cu-sm-col-span-8{grid-column:span 8/span 8}.cu-sm-col-span-9{grid-column:span 9/span 9}.cu-sm-col-span-auto{grid-column:span auto/span auto}.cu-sm-col-start-1{grid-column-start:1}.cu-sm-col-start-10{grid-column-start:10}.cu-sm-col-start-11{grid-column-start:11}.cu-sm-col-start-12{grid-column-start:12}.cu-sm-col-start-13{grid-column-start:13}.cu-sm-col-start-2{grid-column-start:2}.cu-sm-col-start-3{grid-column-start:3}.cu-sm-col-start-4{grid-column-start:4}.cu-sm-col-start-5{grid-column-start:5}.cu-sm-col-start-6{grid-column-start:6}.cu-sm-col-start-7{grid-column-start:7}.cu-sm-col-start-8{grid-column-start:8}.cu-sm-col-start-9{grid-column-start:9}.cu-sm-col-start-auto{grid-column-start:auto}.cu-sm-flex{display:flex}.cu-sm-flex-col{flex-direction:column}.cu-sm-flex-nowrap{flex-wrap:nowrap}.cu-sm-flex-row{flex-direction:row}.cu-sm-flex-wrap{flex-wrap:wrap}.cu-sm-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-sm-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-sm-gap-lg{gap:var(--canon-spacing-lg)}.cu-sm-gap-md{gap:var(--canon-spacing-md)}.cu-sm-gap-none{gap:0}.cu-sm-gap-sm{gap:var(--canon-spacing-sm)}.cu-sm-gap-xl{gap:var(--canon-spacing-xl)}.cu-sm-gap-xs{gap:var(--canon-spacing-xs)}.cu-sm-grid{display:grid}.cu-sm-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-sm-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-sm-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-sm-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-sm-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-sm-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-sm-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-sm-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-sm-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-sm-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-sm-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-sm-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-sm-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-sm-hidden{display:none}.cu-sm-inline{display:inline}.cu-sm-inline-block{display:inline-block}.cu-sm-items-center{align-items:center}.cu-sm-items-end{align-items:flex-end}.cu-sm-items-start{align-items:flex-start}.cu-sm-items-stretch{align-items:stretch}.cu-sm-justify-around{justify-content:space-around}.cu-sm-justify-between{justify-content:space-between}.cu-sm-justify-center{justify-content:center}.cu-sm-justify-end{justify-content:flex-end}.cu-sm-justify-start{justify-content:flex-start}.cu-sm-justify-stretch{justify-content:stretch}.cu-sm-m-2xl{margin:var(--canon-spacing-2xl)}.cu-sm-m-lg{margin:var(--canon-spacing-lg)}.cu-sm-m-md{margin:var(--canon-spacing-md)}.cu-sm-m-none{margin:0}.cu-sm-m-sm{margin:var(--canon-spacing-sm)}.cu-sm-m-xl{margin:var(--canon-spacing-xl)}.cu-sm-m-xs{margin:var(--canon-spacing-xs)}.cu-sm-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-sm-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-sm-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-sm-mb-none{margin-bottom:0}.cu-sm-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-sm-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-sm-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-sm-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-sm-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-sm-ml-md{margin-left:var(--canon-spacing-md)}.cu-sm-ml-none{margin-left:0}.cu-sm-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-sm-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-sm-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-sm-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-sm-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-sm-mr-md{margin-right:var(--canon-spacing-md)}.cu-sm-mr-none{margin-right:0}.cu-sm-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-sm-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-sm-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-sm-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-sm-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-sm-mt-md{margin-top:var(--canon-spacing-md)}.cu-sm-mt-none{margin-top:0}.cu-sm-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-sm-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-sm-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-sm-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-sm-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-sm-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-sm-mx-none{margin-left:0;margin-right:0}.cu-sm-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-sm-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-sm-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-sm-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-sm-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-sm-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-sm-my-none{margin-top:0;margin-bottom:0}.cu-sm-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-sm-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-sm-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-sm-p-2xl{padding:var(--canon-spacing-2xl)}.cu-sm-p-lg{padding:var(--canon-spacing-lg)}.cu-sm-p-md{padding:var(--canon-spacing-md)}.cu-sm-p-none{padding:0}.cu-sm-p-sm{padding:var(--canon-spacing-sm)}.cu-sm-p-xl{padding:var(--canon-spacing-xl)}.cu-sm-p-xs{padding:var(--canon-spacing-xs)}.cu-sm-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-sm-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-sm-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-sm-pb-none{padding-bottom:0}.cu-sm-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-sm-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-sm-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-sm-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-sm-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-sm-pl-md{padding-left:var(--canon-spacing-md)}.cu-sm-pl-none{padding-left:0}.cu-sm-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-sm-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-sm-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-sm-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-sm-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-sm-pr-md{padding-right:var(--canon-spacing-md)}.cu-sm-pr-none{padding-right:0}.cu-sm-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-sm-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-sm-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-sm-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-sm-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-sm-pt-md{padding-top:var(--canon-spacing-md)}.cu-sm-pt-none{padding-top:0}.cu-sm-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-sm-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-sm-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-sm-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-sm-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-sm-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-sm-px-none{padding-left:0;padding-right:0}.cu-sm-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-sm-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-sm-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-sm-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-sm-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-sm-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-sm-py-none{padding-top:0;padding-bottom:0}.cu-sm-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-sm-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-sm-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-sm-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-sm-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-sm-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-sm-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-sm-rounded-none{border-radius:0}.cu-sm-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-sm-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-sm-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-sm-row-span-1{grid-row:span 1/span 1}.cu-sm-row-span-10{grid-row:span 10/span 10}.cu-sm-row-span-11{grid-row:span 11/span 11}.cu-sm-row-span-12{grid-row:span 12/span 12}.cu-sm-row-span-2{grid-row:span 2/span 2}.cu-sm-row-span-3{grid-row:span 3/span 3}.cu-sm-row-span-4{grid-row:span 4/span 4}.cu-sm-row-span-5{grid-row:span 5/span 5}.cu-sm-row-span-6{grid-row:span 6/span 6}.cu-sm-row-span-7{grid-row:span 7/span 7}.cu-sm-row-span-8{grid-row:span 8/span 8}.cu-sm-row-span-9{grid-row:span 9/span 9}.cu-sm-row-span-auto{grid-row:span auto/span auto}.cu-sm-wrap-reverse{flex-wrap:wrap-reverse}}@media (width>=768px){.cu-md-block{display:block}.cu-md-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-md-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-md-border-none{border-width:0;border-color:#0000}.cu-md-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-md-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-md-col-end-1{grid-column-end:1}.cu-md-col-end-10{grid-column-end:10}.cu-md-col-end-11{grid-column-end:11}.cu-md-col-end-12{grid-column-end:12}.cu-md-col-end-13{grid-column-end:13}.cu-md-col-end-2{grid-column-end:2}.cu-md-col-end-3{grid-column-end:3}.cu-md-col-end-4{grid-column-end:4}.cu-md-col-end-5{grid-column-end:5}.cu-md-col-end-6{grid-column-end:6}.cu-md-col-end-7{grid-column-end:7}.cu-md-col-end-8{grid-column-end:8}.cu-md-col-end-9{grid-column-end:9}.cu-md-col-end-auto{grid-column-end:auto}.cu-md-col-span-1{grid-column:span 1/span 1}.cu-md-col-span-10{grid-column:span 10/span 10}.cu-md-col-span-11{grid-column:span 11/span 11}.cu-md-col-span-12{grid-column:span 12/span 12}.cu-md-col-span-2{grid-column:span 2/span 2}.cu-md-col-span-3{grid-column:span 3/span 3}.cu-md-col-span-4{grid-column:span 4/span 4}.cu-md-col-span-5{grid-column:span 5/span 5}.cu-md-col-span-6{grid-column:span 6/span 6}.cu-md-col-span-7{grid-column:span 7/span 7}.cu-md-col-span-8{grid-column:span 8/span 8}.cu-md-col-span-9{grid-column:span 9/span 9}.cu-md-col-span-auto{grid-column:span auto/span auto}.cu-md-col-start-1{grid-column-start:1}.cu-md-col-start-10{grid-column-start:10}.cu-md-col-start-11{grid-column-start:11}.cu-md-col-start-12{grid-column-start:12}.cu-md-col-start-13{grid-column-start:13}.cu-md-col-start-2{grid-column-start:2}.cu-md-col-start-3{grid-column-start:3}.cu-md-col-start-4{grid-column-start:4}.cu-md-col-start-5{grid-column-start:5}.cu-md-col-start-6{grid-column-start:6}.cu-md-col-start-7{grid-column-start:7}.cu-md-col-start-8{grid-column-start:8}.cu-md-col-start-9{grid-column-start:9}.cu-md-col-start-auto{grid-column-start:auto}.cu-md-flex{display:flex}.cu-md-flex-col{flex-direction:column}.cu-md-flex-nowrap{flex-wrap:nowrap}.cu-md-flex-row{flex-direction:row}.cu-md-flex-wrap{flex-wrap:wrap}.cu-md-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-md-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-md-gap-lg{gap:var(--canon-spacing-lg)}.cu-md-gap-md{gap:var(--canon-spacing-md)}.cu-md-gap-none{gap:0}.cu-md-gap-sm{gap:var(--canon-spacing-sm)}.cu-md-gap-xl{gap:var(--canon-spacing-xl)}.cu-md-gap-xs{gap:var(--canon-spacing-xs)}.cu-md-grid{display:grid}.cu-md-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-md-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-md-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-md-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-md-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-md-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-md-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-md-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-md-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-md-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-md-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-md-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-md-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-md-hidden{display:none}.cu-md-inline{display:inline}.cu-md-inline-block{display:inline-block}.cu-md-items-center{align-items:center}.cu-md-items-end{align-items:flex-end}.cu-md-items-start{align-items:flex-start}.cu-md-items-stretch{align-items:stretch}.cu-md-justify-around{justify-content:space-around}.cu-md-justify-between{justify-content:space-between}.cu-md-justify-center{justify-content:center}.cu-md-justify-end{justify-content:flex-end}.cu-md-justify-start{justify-content:flex-start}.cu-md-justify-stretch{justify-content:stretch}.cu-md-m-2xl{margin:var(--canon-spacing-2xl)}.cu-md-m-lg{margin:var(--canon-spacing-lg)}.cu-md-m-md{margin:var(--canon-spacing-md)}.cu-md-m-none{margin:0}.cu-md-m-sm{margin:var(--canon-spacing-sm)}.cu-md-m-xl{margin:var(--canon-spacing-xl)}.cu-md-m-xs{margin:var(--canon-spacing-xs)}.cu-md-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-md-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-md-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-md-mb-none{margin-bottom:0}.cu-md-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-md-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-md-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-md-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-md-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-md-ml-md{margin-left:var(--canon-spacing-md)}.cu-md-ml-none{margin-left:0}.cu-md-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-md-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-md-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-md-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-md-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-md-mr-md{margin-right:var(--canon-spacing-md)}.cu-md-mr-none{margin-right:0}.cu-md-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-md-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-md-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-md-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-md-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-md-mt-md{margin-top:var(--canon-spacing-md)}.cu-md-mt-none{margin-top:0}.cu-md-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-md-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-md-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-md-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-md-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-md-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-md-mx-none{margin-left:0;margin-right:0}.cu-md-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-md-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-md-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-md-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-md-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-md-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-md-my-none{margin-top:0;margin-bottom:0}.cu-md-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-md-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-md-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-md-p-2xl{padding:var(--canon-spacing-2xl)}.cu-md-p-lg{padding:var(--canon-spacing-lg)}.cu-md-p-md{padding:var(--canon-spacing-md)}.cu-md-p-none{padding:0}.cu-md-p-sm{padding:var(--canon-spacing-sm)}.cu-md-p-xl{padding:var(--canon-spacing-xl)}.cu-md-p-xs{padding:var(--canon-spacing-xs)}.cu-md-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-md-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-md-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-md-pb-none{padding-bottom:0}.cu-md-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-md-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-md-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-md-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-md-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-md-pl-md{padding-left:var(--canon-spacing-md)}.cu-md-pl-none{padding-left:0}.cu-md-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-md-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-md-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-md-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-md-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-md-pr-md{padding-right:var(--canon-spacing-md)}.cu-md-pr-none{padding-right:0}.cu-md-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-md-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-md-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-md-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-md-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-md-pt-md{padding-top:var(--canon-spacing-md)}.cu-md-pt-none{padding-top:0}.cu-md-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-md-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-md-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-md-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-md-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-md-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-md-px-none{padding-left:0;padding-right:0}.cu-md-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-md-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-md-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-md-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-md-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-md-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-md-py-none{padding-top:0;padding-bottom:0}.cu-md-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-md-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-md-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-md-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-md-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-md-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-md-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-md-rounded-none{border-radius:0}.cu-md-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-md-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-md-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-md-row-span-1{grid-row:span 1/span 1}.cu-md-row-span-10{grid-row:span 10/span 10}.cu-md-row-span-11{grid-row:span 11/span 11}.cu-md-row-span-12{grid-row:span 12/span 12}.cu-md-row-span-2{grid-row:span 2/span 2}.cu-md-row-span-3{grid-row:span 3/span 3}.cu-md-row-span-4{grid-row:span 4/span 4}.cu-md-row-span-5{grid-row:span 5/span 5}.cu-md-row-span-6{grid-row:span 6/span 6}.cu-md-row-span-7{grid-row:span 7/span 7}.cu-md-row-span-8{grid-row:span 8/span 8}.cu-md-row-span-9{grid-row:span 9/span 9}.cu-md-row-span-auto{grid-row:span auto/span auto}.cu-md-wrap-reverse{flex-wrap:wrap-reverse}}@media (width>=1024px){.cu-lg-block{display:block}.cu-lg-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-lg-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-lg-border-none{border-width:0;border-color:#0000}.cu-lg-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-lg-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-lg-col-end-1{grid-column-end:1}.cu-lg-col-end-10{grid-column-end:10}.cu-lg-col-end-11{grid-column-end:11}.cu-lg-col-end-12{grid-column-end:12}.cu-lg-col-end-13{grid-column-end:13}.cu-lg-col-end-2{grid-column-end:2}.cu-lg-col-end-3{grid-column-end:3}.cu-lg-col-end-4{grid-column-end:4}.cu-lg-col-end-5{grid-column-end:5}.cu-lg-col-end-6{grid-column-end:6}.cu-lg-col-end-7{grid-column-end:7}.cu-lg-col-end-8{grid-column-end:8}.cu-lg-col-end-9{grid-column-end:9}.cu-lg-col-end-auto{grid-column-end:auto}.cu-lg-col-span-1{grid-column:span 1/span 1}.cu-lg-col-span-10{grid-column:span 10/span 10}.cu-lg-col-span-11{grid-column:span 11/span 11}.cu-lg-col-span-12{grid-column:span 12/span 12}.cu-lg-col-span-2{grid-column:span 2/span 2}.cu-lg-col-span-3{grid-column:span 3/span 3}.cu-lg-col-span-4{grid-column:span 4/span 4}.cu-lg-col-span-5{grid-column:span 5/span 5}.cu-lg-col-span-6{grid-column:span 6/span 6}.cu-lg-col-span-7{grid-column:span 7/span 7}.cu-lg-col-span-8{grid-column:span 8/span 8}.cu-lg-col-span-9{grid-column:span 9/span 9}.cu-lg-col-span-auto{grid-column:span auto/span auto}.cu-lg-col-start-1{grid-column-start:1}.cu-lg-col-start-10{grid-column-start:10}.cu-lg-col-start-11{grid-column-start:11}.cu-lg-col-start-12{grid-column-start:12}.cu-lg-col-start-13{grid-column-start:13}.cu-lg-col-start-2{grid-column-start:2}.cu-lg-col-start-3{grid-column-start:3}.cu-lg-col-start-4{grid-column-start:4}.cu-lg-col-start-5{grid-column-start:5}.cu-lg-col-start-6{grid-column-start:6}.cu-lg-col-start-7{grid-column-start:7}.cu-lg-col-start-8{grid-column-start:8}.cu-lg-col-start-9{grid-column-start:9}.cu-lg-col-start-auto{grid-column-start:auto}.cu-lg-flex{display:flex}.cu-lg-flex-col{flex-direction:column}.cu-lg-flex-nowrap{flex-wrap:nowrap}.cu-lg-flex-row{flex-direction:row}.cu-lg-flex-wrap{flex-wrap:wrap}.cu-lg-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-lg-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-lg-gap-lg{gap:var(--canon-spacing-lg)}.cu-lg-gap-md{gap:var(--canon-spacing-md)}.cu-lg-gap-none{gap:0}.cu-lg-gap-sm{gap:var(--canon-spacing-sm)}.cu-lg-gap-xl{gap:var(--canon-spacing-xl)}.cu-lg-gap-xs{gap:var(--canon-spacing-xs)}.cu-lg-grid{display:grid}.cu-lg-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-lg-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-lg-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-lg-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-lg-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-lg-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-lg-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-lg-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-lg-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-lg-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-lg-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-lg-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-lg-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-lg-hidden{display:none}.cu-lg-inline{display:inline}.cu-lg-inline-block{display:inline-block}.cu-lg-items-center{align-items:center}.cu-lg-items-end{align-items:flex-end}.cu-lg-items-start{align-items:flex-start}.cu-lg-items-stretch{align-items:stretch}.cu-lg-justify-around{justify-content:space-around}.cu-lg-justify-between{justify-content:space-between}.cu-lg-justify-center{justify-content:center}.cu-lg-justify-end{justify-content:flex-end}.cu-lg-justify-start{justify-content:flex-start}.cu-lg-justify-stretch{justify-content:stretch}.cu-lg-m-2xl{margin:var(--canon-spacing-2xl)}.cu-lg-m-lg{margin:var(--canon-spacing-lg)}.cu-lg-m-md{margin:var(--canon-spacing-md)}.cu-lg-m-none{margin:0}.cu-lg-m-sm{margin:var(--canon-spacing-sm)}.cu-lg-m-xl{margin:var(--canon-spacing-xl)}.cu-lg-m-xs{margin:var(--canon-spacing-xs)}.cu-lg-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-lg-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-lg-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-lg-mb-none{margin-bottom:0}.cu-lg-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-lg-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-lg-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-lg-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-lg-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-lg-ml-md{margin-left:var(--canon-spacing-md)}.cu-lg-ml-none{margin-left:0}.cu-lg-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-lg-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-lg-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-lg-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-lg-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-lg-mr-md{margin-right:var(--canon-spacing-md)}.cu-lg-mr-none{margin-right:0}.cu-lg-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-lg-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-lg-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-lg-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-lg-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-lg-mt-md{margin-top:var(--canon-spacing-md)}.cu-lg-mt-none{margin-top:0}.cu-lg-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-lg-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-lg-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-lg-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-lg-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-lg-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-lg-mx-none{margin-left:0;margin-right:0}.cu-lg-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-lg-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-lg-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-lg-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-lg-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-lg-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-lg-my-none{margin-top:0;margin-bottom:0}.cu-lg-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-lg-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-lg-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-lg-p-2xl{padding:var(--canon-spacing-2xl)}.cu-lg-p-lg{padding:var(--canon-spacing-lg)}.cu-lg-p-md{padding:var(--canon-spacing-md)}.cu-lg-p-none{padding:0}.cu-lg-p-sm{padding:var(--canon-spacing-sm)}.cu-lg-p-xl{padding:var(--canon-spacing-xl)}.cu-lg-p-xs{padding:var(--canon-spacing-xs)}.cu-lg-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-lg-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-lg-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-lg-pb-none{padding-bottom:0}.cu-lg-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-lg-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-lg-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-lg-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-lg-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-lg-pl-md{padding-left:var(--canon-spacing-md)}.cu-lg-pl-none{padding-left:0}.cu-lg-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-lg-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-lg-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-lg-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-lg-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-lg-pr-md{padding-right:var(--canon-spacing-md)}.cu-lg-pr-none{padding-right:0}.cu-lg-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-lg-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-lg-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-lg-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-lg-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-lg-pt-md{padding-top:var(--canon-spacing-md)}.cu-lg-pt-none{padding-top:0}.cu-lg-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-lg-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-lg-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-lg-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-lg-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-lg-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-lg-px-none{padding-left:0;padding-right:0}.cu-lg-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-lg-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-lg-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-lg-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-lg-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-lg-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-lg-py-none{padding-top:0;padding-bottom:0}.cu-lg-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-lg-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-lg-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-lg-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-lg-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-lg-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-lg-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-lg-rounded-none{border-radius:0}.cu-lg-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-lg-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-lg-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-lg-row-span-1{grid-row:span 1/span 1}.cu-lg-row-span-10{grid-row:span 10/span 10}.cu-lg-row-span-11{grid-row:span 11/span 11}.cu-lg-row-span-12{grid-row:span 12/span 12}.cu-lg-row-span-2{grid-row:span 2/span 2}.cu-lg-row-span-3{grid-row:span 3/span 3}.cu-lg-row-span-4{grid-row:span 4/span 4}.cu-lg-row-span-5{grid-row:span 5/span 5}.cu-lg-row-span-6{grid-row:span 6/span 6}.cu-lg-row-span-7{grid-row:span 7/span 7}.cu-lg-row-span-8{grid-row:span 8/span 8}.cu-lg-row-span-9{grid-row:span 9/span 9}.cu-lg-row-span-auto{grid-row:span auto/span auto}.cu-lg-wrap-reverse{flex-wrap:wrap-reverse}}@media (width>=1280px){.cu-xl-block{display:block}.cu-xl-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-xl-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-xl-border-none{border-width:0;border-color:#0000}.cu-xl-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-xl-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-xl-col-end-1{grid-column-end:1}.cu-xl-col-end-10{grid-column-end:10}.cu-xl-col-end-11{grid-column-end:11}.cu-xl-col-end-12{grid-column-end:12}.cu-xl-col-end-13{grid-column-end:13}.cu-xl-col-end-2{grid-column-end:2}.cu-xl-col-end-3{grid-column-end:3}.cu-xl-col-end-4{grid-column-end:4}.cu-xl-col-end-5{grid-column-end:5}.cu-xl-col-end-6{grid-column-end:6}.cu-xl-col-end-7{grid-column-end:7}.cu-xl-col-end-8{grid-column-end:8}.cu-xl-col-end-9{grid-column-end:9}.cu-xl-col-end-auto{grid-column-end:auto}.cu-xl-col-span-1{grid-column:span 1/span 1}.cu-xl-col-span-10{grid-column:span 10/span 10}.cu-xl-col-span-11{grid-column:span 11/span 11}.cu-xl-col-span-12{grid-column:span 12/span 12}.cu-xl-col-span-2{grid-column:span 2/span 2}.cu-xl-col-span-3{grid-column:span 3/span 3}.cu-xl-col-span-4{grid-column:span 4/span 4}.cu-xl-col-span-5{grid-column:span 5/span 5}.cu-xl-col-span-6{grid-column:span 6/span 6}.cu-xl-col-span-7{grid-column:span 7/span 7}.cu-xl-col-span-8{grid-column:span 8/span 8}.cu-xl-col-span-9{grid-column:span 9/span 9}.cu-xl-col-span-auto{grid-column:span auto/span auto}.cu-xl-col-start-1{grid-column-start:1}.cu-xl-col-start-10{grid-column-start:10}.cu-xl-col-start-11{grid-column-start:11}.cu-xl-col-start-12{grid-column-start:12}.cu-xl-col-start-13{grid-column-start:13}.cu-xl-col-start-2{grid-column-start:2}.cu-xl-col-start-3{grid-column-start:3}.cu-xl-col-start-4{grid-column-start:4}.cu-xl-col-start-5{grid-column-start:5}.cu-xl-col-start-6{grid-column-start:6}.cu-xl-col-start-7{grid-column-start:7}.cu-xl-col-start-8{grid-column-start:8}.cu-xl-col-start-9{grid-column-start:9}.cu-xl-col-start-auto{grid-column-start:auto}.cu-xl-flex{display:flex}.cu-xl-flex-col{flex-direction:column}.cu-xl-flex-nowrap{flex-wrap:nowrap}.cu-xl-flex-row{flex-direction:row}.cu-xl-flex-wrap{flex-wrap:wrap}.cu-xl-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-xl-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-xl-gap-lg{gap:var(--canon-spacing-lg)}.cu-xl-gap-md{gap:var(--canon-spacing-md)}.cu-xl-gap-none{gap:0}.cu-xl-gap-sm{gap:var(--canon-spacing-sm)}.cu-xl-gap-xl{gap:var(--canon-spacing-xl)}.cu-xl-gap-xs{gap:var(--canon-spacing-xs)}.cu-xl-grid{display:grid}.cu-xl-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-xl-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-xl-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-xl-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-xl-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-xl-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-xl-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-xl-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-xl-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-xl-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-xl-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-xl-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-xl-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-xl-hidden{display:none}.cu-xl-inline{display:inline}.cu-xl-inline-block{display:inline-block}.cu-xl-items-center{align-items:center}.cu-xl-items-end{align-items:flex-end}.cu-xl-items-start{align-items:flex-start}.cu-xl-items-stretch{align-items:stretch}.cu-xl-justify-around{justify-content:space-around}.cu-xl-justify-between{justify-content:space-between}.cu-xl-justify-center{justify-content:center}.cu-xl-justify-end{justify-content:flex-end}.cu-xl-justify-start{justify-content:flex-start}.cu-xl-justify-stretch{justify-content:stretch}.cu-xl-m-2xl{margin:var(--canon-spacing-2xl)}.cu-xl-m-lg{margin:var(--canon-spacing-lg)}.cu-xl-m-md{margin:var(--canon-spacing-md)}.cu-xl-m-none{margin:0}.cu-xl-m-sm{margin:var(--canon-spacing-sm)}.cu-xl-m-xl{margin:var(--canon-spacing-xl)}.cu-xl-m-xs{margin:var(--canon-spacing-xs)}.cu-xl-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-xl-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-xl-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-xl-mb-none{margin-bottom:0}.cu-xl-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-xl-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-xl-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-xl-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-xl-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-xl-ml-md{margin-left:var(--canon-spacing-md)}.cu-xl-ml-none{margin-left:0}.cu-xl-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-xl-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-xl-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-xl-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-xl-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-xl-mr-md{margin-right:var(--canon-spacing-md)}.cu-xl-mr-none{margin-right:0}.cu-xl-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-xl-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-xl-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-xl-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-xl-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-xl-mt-md{margin-top:var(--canon-spacing-md)}.cu-xl-mt-none{margin-top:0}.cu-xl-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-xl-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-xl-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-xl-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-xl-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-xl-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-xl-mx-none{margin-left:0;margin-right:0}.cu-xl-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-xl-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-xl-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-xl-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-xl-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-xl-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-xl-my-none{margin-top:0;margin-bottom:0}.cu-xl-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-xl-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-xl-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-xl-p-2xl{padding:var(--canon-spacing-2xl)}.cu-xl-p-lg{padding:var(--canon-spacing-lg)}.cu-xl-p-md{padding:var(--canon-spacing-md)}.cu-xl-p-none{padding:0}.cu-xl-p-sm{padding:var(--canon-spacing-sm)}.cu-xl-p-xl{padding:var(--canon-spacing-xl)}.cu-xl-p-xs{padding:var(--canon-spacing-xs)}.cu-xl-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-xl-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-xl-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-xl-pb-none{padding-bottom:0}.cu-xl-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-xl-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-xl-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-xl-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-xl-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-xl-pl-md{padding-left:var(--canon-spacing-md)}.cu-xl-pl-none{padding-left:0}.cu-xl-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-xl-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-xl-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-xl-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-xl-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-xl-pr-md{padding-right:var(--canon-spacing-md)}.cu-xl-pr-none{padding-right:0}.cu-xl-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-xl-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-xl-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-xl-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-xl-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-xl-pt-md{padding-top:var(--canon-spacing-md)}.cu-xl-pt-none{padding-top:0}.cu-xl-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-xl-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-xl-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-xl-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-xl-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-xl-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-xl-px-none{padding-left:0;padding-right:0}.cu-xl-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-xl-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-xl-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-xl-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-xl-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-xl-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-xl-py-none{padding-top:0;padding-bottom:0}.cu-xl-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-xl-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-xl-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-xl-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-xl-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-xl-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-xl-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-xl-rounded-none{border-radius:0}.cu-xl-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-xl-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-xl-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-xl-row-span-1{grid-row:span 1/span 1}.cu-xl-row-span-10{grid-row:span 10/span 10}.cu-xl-row-span-11{grid-row:span 11/span 11}.cu-xl-row-span-12{grid-row:span 12/span 12}.cu-xl-row-span-2{grid-row:span 2/span 2}.cu-xl-row-span-3{grid-row:span 3/span 3}.cu-xl-row-span-4{grid-row:span 4/span 4}.cu-xl-row-span-5{grid-row:span 5/span 5}.cu-xl-row-span-6{grid-row:span 6/span 6}.cu-xl-row-span-7{grid-row:span 7/span 7}.cu-xl-row-span-8{grid-row:span 8/span 8}.cu-xl-row-span-9{grid-row:span 9/span 9}.cu-xl-row-span-auto{grid-row:span auto/span auto}.cu-xl-wrap-reverse{flex-wrap:wrap-reverse}}@media (width>=1536px){.cu-2xl-block{display:block}.cu-2xl-border-base{border-color:var(--canon-border-base);border-style:solid;border-width:1px}.cu-2xl-border-error{border-color:var(--canon-border-error);border-style:solid;border-width:1px}.cu-2xl-border-none{border-width:0;border-color:#0000}.cu-2xl-border-selected{border-color:var(--canon-border-selected);border-style:solid;border-width:1px}.cu-2xl-border-warning{border-color:var(--canon-border-warning);border-style:solid;border-width:1px}.cu-2xl-col-end-1{grid-column-end:1}.cu-2xl-col-end-10{grid-column-end:10}.cu-2xl-col-end-11{grid-column-end:11}.cu-2xl-col-end-12{grid-column-end:12}.cu-2xl-col-end-13{grid-column-end:13}.cu-2xl-col-end-2{grid-column-end:2}.cu-2xl-col-end-3{grid-column-end:3}.cu-2xl-col-end-4{grid-column-end:4}.cu-2xl-col-end-5{grid-column-end:5}.cu-2xl-col-end-6{grid-column-end:6}.cu-2xl-col-end-7{grid-column-end:7}.cu-2xl-col-end-8{grid-column-end:8}.cu-2xl-col-end-9{grid-column-end:9}.cu-2xl-col-end-auto{grid-column-end:auto}.cu-2xl-col-span-1{grid-column:span 1/span 1}.cu-2xl-col-span-10{grid-column:span 10/span 10}.cu-2xl-col-span-11{grid-column:span 11/span 11}.cu-2xl-col-span-12{grid-column:span 12/span 12}.cu-2xl-col-span-2{grid-column:span 2/span 2}.cu-2xl-col-span-3{grid-column:span 3/span 3}.cu-2xl-col-span-4{grid-column:span 4/span 4}.cu-2xl-col-span-5{grid-column:span 5/span 5}.cu-2xl-col-span-6{grid-column:span 6/span 6}.cu-2xl-col-span-7{grid-column:span 7/span 7}.cu-2xl-col-span-8{grid-column:span 8/span 8}.cu-2xl-col-span-9{grid-column:span 9/span 9}.cu-2xl-col-span-auto{grid-column:span auto/span auto}.cu-2xl-col-start-1{grid-column-start:1}.cu-2xl-col-start-10{grid-column-start:10}.cu-2xl-col-start-11{grid-column-start:11}.cu-2xl-col-start-12{grid-column-start:12}.cu-2xl-col-start-13{grid-column-start:13}.cu-2xl-col-start-2{grid-column-start:2}.cu-2xl-col-start-3{grid-column-start:3}.cu-2xl-col-start-4{grid-column-start:4}.cu-2xl-col-start-5{grid-column-start:5}.cu-2xl-col-start-6{grid-column-start:6}.cu-2xl-col-start-7{grid-column-start:7}.cu-2xl-col-start-8{grid-column-start:8}.cu-2xl-col-start-9{grid-column-start:9}.cu-2xl-col-start-auto{grid-column-start:auto}.cu-2xl-flex{display:flex}.cu-2xl-flex-col{flex-direction:column}.cu-2xl-flex-nowrap{flex-wrap:nowrap}.cu-2xl-flex-row{flex-direction:row}.cu-2xl-flex-wrap{flex-wrap:wrap}.cu-2xl-flex-wrap-reverse{flex-wrap:wrap-reverse}.cu-2xl-gap-2xl{gap:var(--canon-spacing-2xl)}.cu-2xl-gap-lg{gap:var(--canon-spacing-lg)}.cu-2xl-gap-md{gap:var(--canon-spacing-md)}.cu-2xl-gap-none{gap:0}.cu-2xl-gap-sm{gap:var(--canon-spacing-sm)}.cu-2xl-gap-xl{gap:var(--canon-spacing-xl)}.cu-2xl-gap-xs{gap:var(--canon-spacing-xs)}.cu-2xl-grid{display:grid}.cu-2xl-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.cu-2xl-grid-cols-10{grid-template-columns:repeat(10,minmax(0,1fr))}.cu-2xl-grid-cols-11{grid-template-columns:repeat(11,minmax(0,1fr))}.cu-2xl-grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}.cu-2xl-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.cu-2xl-grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.cu-2xl-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.cu-2xl-grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.cu-2xl-grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}.cu-2xl-grid-cols-7{grid-template-columns:repeat(7,minmax(0,1fr))}.cu-2xl-grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}.cu-2xl-grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.cu-2xl-grid-cols-auto{grid-template-columns:repeat(auto-fit,minmax(0,1fr))}.cu-2xl-hidden{display:none}.cu-2xl-inline{display:inline}.cu-2xl-inline-block{display:inline-block}.cu-2xl-items-center{align-items:center}.cu-2xl-items-end{align-items:flex-end}.cu-2xl-items-start{align-items:flex-start}.cu-2xl-items-stretch{align-items:stretch}.cu-2xl-justify-around{justify-content:space-around}.cu-2xl-justify-between{justify-content:space-between}.cu-2xl-justify-center{justify-content:center}.cu-2xl-justify-end{justify-content:flex-end}.cu-2xl-justify-start{justify-content:flex-start}.cu-2xl-justify-stretch{justify-content:stretch}.cu-2xl-m-2xl{margin:var(--canon-spacing-2xl)}.cu-2xl-m-lg{margin:var(--canon-spacing-lg)}.cu-2xl-m-md{margin:var(--canon-spacing-md)}.cu-2xl-m-none{margin:0}.cu-2xl-m-sm{margin:var(--canon-spacing-sm)}.cu-2xl-m-xl{margin:var(--canon-spacing-xl)}.cu-2xl-m-xs{margin:var(--canon-spacing-xs)}.cu-2xl-mb-2xl{margin-bottom:var(--canon-spacing-2xl)}.cu-2xl-mb-lg{margin-bottom:var(--canon-spacing-lg)}.cu-2xl-mb-md{margin-bottom:var(--canon-spacing-md)}.cu-2xl-mb-none{margin-bottom:0}.cu-2xl-mb-sm{margin-bottom:var(--canon-spacing-sm)}.cu-2xl-mb-xl{margin-bottom:var(--canon-spacing-xl)}.cu-2xl-mb-xs{margin-bottom:var(--canon-spacing-xs)}.cu-2xl-ml-2xl{margin-left:var(--canon-spacing-2xl)}.cu-2xl-ml-lg{margin-left:var(--canon-spacing-lg)}.cu-2xl-ml-md{margin-left:var(--canon-spacing-md)}.cu-2xl-ml-none{margin-left:0}.cu-2xl-ml-sm{margin-left:var(--canon-spacing-sm)}.cu-2xl-ml-xl{margin-left:var(--canon-spacing-xl)}.cu-2xl-ml-xs{margin-left:var(--canon-spacing-xs)}.cu-2xl-mr-2xl{margin-right:var(--canon-spacing-2xl)}.cu-2xl-mr-lg{margin-right:var(--canon-spacing-lg)}.cu-2xl-mr-md{margin-right:var(--canon-spacing-md)}.cu-2xl-mr-none{margin-right:0}.cu-2xl-mr-sm{margin-right:var(--canon-spacing-sm)}.cu-2xl-mr-xl{margin-right:var(--canon-spacing-xl)}.cu-2xl-mr-xs{margin-right:var(--canon-spacing-xs)}.cu-2xl-mt-2xl{margin-top:var(--canon-spacing-2xl)}.cu-2xl-mt-lg{margin-top:var(--canon-spacing-lg)}.cu-2xl-mt-md{margin-top:var(--canon-spacing-md)}.cu-2xl-mt-none{margin-top:0}.cu-2xl-mt-sm{margin-top:var(--canon-spacing-sm)}.cu-2xl-mt-xl{margin-top:var(--canon-spacing-xl)}.cu-2xl-mt-xs{margin-top:var(--canon-spacing-xs)}.cu-2xl-mx-2xl{margin-left:var(--canon-spacing-2xl);margin-right:var(--canon-spacing-2xl)}.cu-2xl-mx-lg{margin-left:var(--canon-spacing-lg);margin-right:var(--canon-spacing-lg)}.cu-2xl-mx-md{margin-left:var(--canon-spacing-md);margin-right:var(--canon-spacing-md)}.cu-2xl-mx-none{margin-left:0;margin-right:0}.cu-2xl-mx-sm{margin-left:var(--canon-spacing-sm);margin-right:var(--canon-spacing-sm)}.cu-2xl-mx-xl{margin-left:var(--canon-spacing-xl);margin-right:var(--canon-spacing-xl)}.cu-2xl-mx-xs{margin-left:var(--canon-spacing-xs);margin-right:var(--canon-spacing-xs)}.cu-2xl-my-2xl{margin-top:var(--canon-spacing-2xl);margin-bottom:var(--canon-spacing-2xl)}.cu-2xl-my-lg{margin-top:var(--canon-spacing-lg);margin-bottom:var(--canon-spacing-lg)}.cu-2xl-my-md{margin-top:var(--canon-spacing-md);margin-bottom:var(--canon-spacing-md)}.cu-2xl-my-none{margin-top:0;margin-bottom:0}.cu-2xl-my-sm{margin-top:var(--canon-spacing-sm);margin-bottom:var(--canon-spacing-sm)}.cu-2xl-my-xl{margin-top:var(--canon-spacing-xl);margin-bottom:var(--canon-spacing-xl)}.cu-2xl-my-xs{margin-top:var(--canon-spacing-xs);margin-bottom:var(--canon-spacing-xs)}.cu-2xl-p-2xl{padding:var(--canon-spacing-2xl)}.cu-2xl-p-lg{padding:var(--canon-spacing-lg)}.cu-2xl-p-md{padding:var(--canon-spacing-md)}.cu-2xl-p-none{padding:0}.cu-2xl-p-sm{padding:var(--canon-spacing-sm)}.cu-2xl-p-xl{padding:var(--canon-spacing-xl)}.cu-2xl-p-xs{padding:var(--canon-spacing-xs)}.cu-2xl-pb-2xl{padding-bottom:var(--canon-spacing-2xl)}.cu-2xl-pb-lg{padding-bottom:var(--canon-spacing-lg)}.cu-2xl-pb-md{padding-bottom:var(--canon-spacing-md)}.cu-2xl-pb-none{padding-bottom:0}.cu-2xl-pb-sm{padding-bottom:var(--canon-spacing-sm)}.cu-2xl-pb-xl{padding-bottom:var(--canon-spacing-xl)}.cu-2xl-pb-xs{padding-bottom:var(--canon-spacing-xs)}.cu-2xl-pl-2xl{padding-left:var(--canon-spacing-2xl)}.cu-2xl-pl-lg{padding-left:var(--canon-spacing-lg)}.cu-2xl-pl-md{padding-left:var(--canon-spacing-md)}.cu-2xl-pl-none{padding-left:0}.cu-2xl-pl-sm{padding-left:var(--canon-spacing-sm)}.cu-2xl-pl-xl{padding-left:var(--canon-spacing-xl)}.cu-2xl-pl-xs{padding-left:var(--canon-spacing-xs)}.cu-2xl-pr-2xl{padding-right:var(--canon-spacing-2xl)}.cu-2xl-pr-lg{padding-right:var(--canon-spacing-lg)}.cu-2xl-pr-md{padding-right:var(--canon-spacing-md)}.cu-2xl-pr-none{padding-right:0}.cu-2xl-pr-sm{padding-right:var(--canon-spacing-sm)}.cu-2xl-pr-xl{padding-right:var(--canon-spacing-xl)}.cu-2xl-pr-xs{padding-right:var(--canon-spacing-xs)}.cu-2xl-pt-2xl{padding-top:var(--canon-spacing-2xl)}.cu-2xl-pt-lg{padding-top:var(--canon-spacing-lg)}.cu-2xl-pt-md{padding-top:var(--canon-spacing-md)}.cu-2xl-pt-none{padding-top:0}.cu-2xl-pt-sm{padding-top:var(--canon-spacing-sm)}.cu-2xl-pt-xl{padding-top:var(--canon-spacing-xl)}.cu-2xl-pt-xs{padding-top:var(--canon-spacing-xs)}.cu-2xl-px-2xl{padding-left:var(--canon-spacing-2xl);padding-right:var(--canon-spacing-2xl)}.cu-2xl-px-lg{padding-left:var(--canon-spacing-lg);padding-right:var(--canon-spacing-lg)}.cu-2xl-px-md{padding-left:var(--canon-spacing-md);padding-right:var(--canon-spacing-md)}.cu-2xl-px-none{padding-left:0;padding-right:0}.cu-2xl-px-sm{padding-left:var(--canon-spacing-sm);padding-right:var(--canon-spacing-sm)}.cu-2xl-px-xl{padding-left:var(--canon-spacing-xl);padding-right:var(--canon-spacing-xl)}.cu-2xl-px-xs{padding-left:var(--canon-spacing-xs);padding-right:var(--canon-spacing-xs)}.cu-2xl-py-2xl{padding-top:var(--canon-spacing-2xl);padding-bottom:var(--canon-spacing-2xl)}.cu-2xl-py-lg{padding-top:var(--canon-spacing-lg);padding-bottom:var(--canon-spacing-lg)}.cu-2xl-py-md{padding-top:var(--canon-spacing-md);padding-bottom:var(--canon-spacing-md)}.cu-2xl-py-none{padding-top:0;padding-bottom:0}.cu-2xl-py-sm{padding-top:var(--canon-spacing-sm);padding-bottom:var(--canon-spacing-sm)}.cu-2xl-py-xl{padding-top:var(--canon-spacing-xl);padding-bottom:var(--canon-spacing-xl)}.cu-2xl-py-xs{padding-top:var(--canon-spacing-xs);padding-bottom:var(--canon-spacing-xs)}.cu-2xl-rounded-2xl{border-radius:var(--canon-border-radius-2xl)}.cu-2xl-rounded-2xs{border-radius:var(--canon-border-radius-2xs)}.cu-2xl-rounded-lg{border-radius:var(--canon-border-radius-lg)}.cu-2xl-rounded-md{border-radius:var(--canon-border-radius-md)}.cu-2xl-rounded-none{border-radius:0}.cu-2xl-rounded-sm{border-radius:var(--canon-border-radius-sm)}.cu-2xl-rounded-xl{border-radius:var(--canon-border-radius-xl)}.cu-2xl-rounded-xs{border-radius:var(--canon-border-radius-xs)}.cu-2xl-row-span-1{grid-row:span 1/span 1}.cu-2xl-row-span-10{grid-row:span 10/span 10}.cu-2xl-row-span-11{grid-row:span 11/span 11}.cu-2xl-row-span-12{grid-row:span 12/span 12}.cu-2xl-row-span-2{grid-row:span 2/span 2}.cu-2xl-row-span-3{grid-row:span 3/span 3}.cu-2xl-row-span-4{grid-row:span 4/span 4}.cu-2xl-row-span-5{grid-row:span 5/span 5}.cu-2xl-row-span-6{grid-row:span 6/span 6}.cu-2xl-row-span-7{grid-row:span 7/span 7}.cu-2xl-row-span-8{grid-row:span 8/span 8}.cu-2xl-row-span-9{grid-row:span 9/span 9}.cu-2xl-row-span-auto{grid-row:span auto/span auto}.cu-2xl-wrap-reverse{flex-wrap:wrap-reverse}}}:root{--canon-font-regular:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--canon-font-monospace:ui-monospace,"Menlo","Monaco","Consolas","Liberation Mono","Courier New",monospace;--canon-font-weight-regular:400;--canon-font-weight-bold:600;--canon-font-size-label:.625rem;--canon-font-size-caption:.75rem;--canon-font-size-body:.875rem;--canon-font-size-subtitle:1rem;--canon-font-size-title5:1.25rem;--canon-font-size-title4:1.5rem;--canon-font-size-title3:2rem;--canon-font-size-title2:3rem;--canon-font-size-title1:4rem;--canon-font-size-display:5.75rem;--canon-spacing-5xs:.125rem;--canon-spacing-4xs:.25rem;--canon-spacing-3xs:.375rem;--canon-spacing-2xs:.5rem;--canon-spacing-xs:.75rem;--canon-spacing-sm:1rem;--canon-spacing-md:1.5rem;--canon-spacing-lg:2rem;--canon-spacing-xl:2.5rem;--canon-spacing-2xl:3rem;--canon-spacing-3xl:3.5rem;--canon-border-radius-2xs:.125rem;--canon-border-radius-xs:.25rem;--canon-border-radius-sm:.5rem;--canon-border-radius-md:.75rem;--canon-border-radius-lg:1rem;--canon-border-radius-xl:1.25rem;--canon-border-radius-2xl:1.5rem;--canon-container-max-width:1200px;--canon-container-padding:1rem}[data-theme=light]{--canon-accent:#000;--canon-background:#f8f8f8;--canon-surface-1:#fff;--canon-surface-2:#f4f4f4;--canon-surface-3:#f1f1f1;--canon-border-base:#0000001a;--canon-border-hover:#0003;--canon-border-warning:#e36d05;--canon-border-error:#e22b2b;--canon-border-selected:#1db954;--canon-error:#f50000;--canon-text-primary:#000;--canon-text-primary-on-accent:#fff;--canon-text-secondary:#646464}[data-theme=dark]{--canon-accent:#fff;--canon-background:#000;--canon-surface-1:#121212;--canon-surface-2:#1a1a1a;--canon-border-base:#fff3;--canon-border-warning:#f50000;--canon-border-error:#f87503;--canon-border-selected:#25d262;--canon-error:#f50000;--canon-text-primary:#fff;--canon-text-primary-on-accent:#000;--canon-text-secondary:#b3b3b3} \ No newline at end of file +@layer base { + *, :before, :after { + box-sizing: border-box; + } + + html { + -webkit-text-size-adjust: 100%; + tab-size: 4; + font-family: system-ui, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji; + line-height: 1.15; + } + + body { + margin: 0; + } + + b, strong { + font-weight: bolder; + } + + code, kbd, samp, pre { + font-family: ui-monospace, SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace; + font-size: 1em; + } + + small { + font-size: 80%; + } + + sub, sup { + vertical-align: baseline; + font-size: 75%; + line-height: 0; + position: relative; + } + + sub { + bottom: -.25em; + } + + sup { + top: -.5em; + } + + table { + border-color: currentColor; + } + + button, input, optgroup, select, textarea { + margin: 0; + font-family: inherit; + font-size: 100%; + line-height: 1.15; + } + + button, [type="button"], [type="reset"], [type="submit"] { + -webkit-appearance: button; + } + + legend { + padding: 0; + } + + progress { + vertical-align: baseline; + } + + ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { + height: auto; + } + + [type="search"] { + -webkit-appearance: textfield; + outline-offset: -2px; + } + + ::-webkit-search-decoration { + -webkit-appearance: none; + } + + ::-webkit-file-upload-button { + -webkit-appearance: button; + font: inherit; + } + + summary { + display: list-item; + } + + *, html, body { + font-family: var(--canon-font-regular); + font-weight: var(--canon-font-weight-regular); + } +} + +@layer utilities { + .cu-block { + display: block; + } + + .cu-border-base { + border-color: var(--canon-border-base); + border-style: solid; + border-width: 1px; + } + + .cu-border-error { + border-color: var(--canon-border-error); + border-style: solid; + border-width: 1px; + } + + .cu-border-none { + border-width: 0; + border-color: #0000; + } + + .cu-border-selected { + border-color: var(--canon-border-selected); + border-style: solid; + border-width: 1px; + } + + .cu-border-warning { + border-color: var(--canon-border-warning); + border-style: solid; + border-width: 1px; + } + + .cu-col-end-1 { + grid-column-end: 1; + } + + .cu-col-end-10 { + grid-column-end: 10; + } + + .cu-col-end-11 { + grid-column-end: 11; + } + + .cu-col-end-12 { + grid-column-end: 12; + } + + .cu-col-end-13 { + grid-column-end: 13; + } + + .cu-col-end-2 { + grid-column-end: 2; + } + + .cu-col-end-3 { + grid-column-end: 3; + } + + .cu-col-end-4 { + grid-column-end: 4; + } + + .cu-col-end-5 { + grid-column-end: 5; + } + + .cu-col-end-6 { + grid-column-end: 6; + } + + .cu-col-end-7 { + grid-column-end: 7; + } + + .cu-col-end-8 { + grid-column-end: 8; + } + + .cu-col-end-9 { + grid-column-end: 9; + } + + .cu-col-end-auto { + grid-column-end: auto; + } + + .cu-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-col-start-1 { + grid-column-start: 1; + } + + .cu-col-start-10 { + grid-column-start: 10; + } + + .cu-col-start-11 { + grid-column-start: 11; + } + + .cu-col-start-12 { + grid-column-start: 12; + } + + .cu-col-start-13 { + grid-column-start: 13; + } + + .cu-col-start-2 { + grid-column-start: 2; + } + + .cu-col-start-3 { + grid-column-start: 3; + } + + .cu-col-start-4 { + grid-column-start: 4; + } + + .cu-col-start-5 { + grid-column-start: 5; + } + + .cu-col-start-6 { + grid-column-start: 6; + } + + .cu-col-start-7 { + grid-column-start: 7; + } + + .cu-col-start-8 { + grid-column-start: 8; + } + + .cu-col-start-9 { + grid-column-start: 9; + } + + .cu-col-start-auto { + grid-column-start: auto; + } + + .cu-flex { + display: flex; + } + + .cu-flex-col { + flex-direction: column; + } + + .cu-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-flex-row { + flex-direction: row; + } + + .cu-flex-wrap { + flex-wrap: wrap; + } + + .cu-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-gap-none { + gap: 0; + } + + .cu-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-grid { + display: grid; + } + + .cu-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .cu-hidden { + display: none; + } + + .cu-inline { + display: inline; + } + + .cu-inline-block { + display: inline-block; + } + + .cu-items-center { + align-items: center; + } + + .cu-items-end { + align-items: flex-end; + } + + .cu-items-start { + align-items: flex-start; + } + + .cu-items-stretch { + align-items: stretch; + } + + .cu-justify-around { + justify-content: space-around; + } + + .cu-justify-between { + justify-content: space-between; + } + + .cu-justify-center { + justify-content: center; + } + + .cu-justify-end { + justify-content: flex-end; + } + + .cu-justify-start { + justify-content: flex-start; + } + + .cu-justify-stretch { + justify-content: stretch; + } + + .cu-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-m-md { + margin: var(--canon-spacing-md); + } + + .cu-m-none { + margin: 0; + } + + .cu-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-mb-none { + margin-bottom: 0; + } + + .cu-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-ml-none { + margin-left: 0; + } + + .cu-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-mr-none { + margin-right: 0; + } + + .cu-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-mt-none { + margin-top: 0; + } + + .cu-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-p-md { + padding: var(--canon-spacing-md); + } + + .cu-p-none { + padding: 0; + } + + .cu-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-pb-none { + padding-bottom: 0; + } + + .cu-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-pl-none { + padding-left: 0; + } + + .cu-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-pr-none { + padding-right: 0; + } + + .cu-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-pt-none { + padding-top: 0; + } + + .cu-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-rounded-none { + border-radius: 0; + } + + .cu-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + + .cu-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-row-span-auto { + grid-row: span auto / span auto; + } + + .cu-wrap-reverse { + flex-wrap: wrap-reverse; + } + + @media (width >= 640px) { + .cu-sm-block { + display: block; + } + + .cu-sm-border-base { + border-color: var(--canon-border-base); + border-style: solid; + border-width: 1px; + } + + .cu-sm-border-error { + border-color: var(--canon-border-error); + border-style: solid; + border-width: 1px; + } + + .cu-sm-border-none { + border-width: 0; + border-color: #0000; + } + + .cu-sm-border-selected { + border-color: var(--canon-border-selected); + border-style: solid; + border-width: 1px; + } + + .cu-sm-border-warning { + border-color: var(--canon-border-warning); + border-style: solid; + border-width: 1px; + } + + .cu-sm-col-end-1 { + grid-column-end: 1; + } + + .cu-sm-col-end-10 { + grid-column-end: 10; + } + + .cu-sm-col-end-11 { + grid-column-end: 11; + } + + .cu-sm-col-end-12 { + grid-column-end: 12; + } + + .cu-sm-col-end-13 { + grid-column-end: 13; + } + + .cu-sm-col-end-2 { + grid-column-end: 2; + } + + .cu-sm-col-end-3 { + grid-column-end: 3; + } + + .cu-sm-col-end-4 { + grid-column-end: 4; + } + + .cu-sm-col-end-5 { + grid-column-end: 5; + } + + .cu-sm-col-end-6 { + grid-column-end: 6; + } + + .cu-sm-col-end-7 { + grid-column-end: 7; + } + + .cu-sm-col-end-8 { + grid-column-end: 8; + } + + .cu-sm-col-end-9 { + grid-column-end: 9; + } + + .cu-sm-col-end-auto { + grid-column-end: auto; + } + + .cu-sm-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-sm-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-sm-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-sm-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-sm-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-sm-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-sm-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-sm-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-sm-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-sm-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-sm-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-sm-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-sm-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-sm-col-start-1 { + grid-column-start: 1; + } + + .cu-sm-col-start-10 { + grid-column-start: 10; + } + + .cu-sm-col-start-11 { + grid-column-start: 11; + } + + .cu-sm-col-start-12 { + grid-column-start: 12; + } + + .cu-sm-col-start-13 { + grid-column-start: 13; + } + + .cu-sm-col-start-2 { + grid-column-start: 2; + } + + .cu-sm-col-start-3 { + grid-column-start: 3; + } + + .cu-sm-col-start-4 { + grid-column-start: 4; + } + + .cu-sm-col-start-5 { + grid-column-start: 5; + } + + .cu-sm-col-start-6 { + grid-column-start: 6; + } + + .cu-sm-col-start-7 { + grid-column-start: 7; + } + + .cu-sm-col-start-8 { + grid-column-start: 8; + } + + .cu-sm-col-start-9 { + grid-column-start: 9; + } + + .cu-sm-col-start-auto { + grid-column-start: auto; + } + + .cu-sm-flex { + display: flex; + } + + .cu-sm-flex-col { + flex-direction: column; + } + + .cu-sm-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-sm-flex-row { + flex-direction: row; + } + + .cu-sm-flex-wrap { + flex-wrap: wrap; + } + + .cu-sm-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-sm-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-sm-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-sm-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-sm-gap-none { + gap: 0; + } + + .cu-sm-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-sm-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-sm-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-sm-grid { + display: grid; + } + + .cu-sm-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-sm-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .cu-sm-hidden { + display: none; + } + + .cu-sm-inline { + display: inline; + } + + .cu-sm-inline-block { + display: inline-block; + } + + .cu-sm-items-center { + align-items: center; + } + + .cu-sm-items-end { + align-items: flex-end; + } + + .cu-sm-items-start { + align-items: flex-start; + } + + .cu-sm-items-stretch { + align-items: stretch; + } + + .cu-sm-justify-around { + justify-content: space-around; + } + + .cu-sm-justify-between { + justify-content: space-between; + } + + .cu-sm-justify-center { + justify-content: center; + } + + .cu-sm-justify-end { + justify-content: flex-end; + } + + .cu-sm-justify-start { + justify-content: flex-start; + } + + .cu-sm-justify-stretch { + justify-content: stretch; + } + + .cu-sm-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-sm-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-sm-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-sm-m-md { + margin: var(--canon-spacing-md); + } + + .cu-sm-m-none { + margin: 0; + } + + .cu-sm-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-sm-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-sm-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-sm-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-sm-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-sm-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-sm-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-sm-mb-none { + margin-bottom: 0; + } + + .cu-sm-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-sm-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-sm-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-sm-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-sm-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-sm-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-sm-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-sm-ml-none { + margin-left: 0; + } + + .cu-sm-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-sm-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-sm-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-sm-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-sm-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-sm-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-sm-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-sm-mr-none { + margin-right: 0; + } + + .cu-sm-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-sm-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-sm-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-sm-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-sm-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-sm-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-sm-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-sm-mt-none { + margin-top: 0; + } + + .cu-sm-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-sm-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-sm-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-sm-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-sm-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-sm-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-sm-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-sm-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-sm-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-sm-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-sm-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-sm-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-sm-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-sm-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-sm-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-sm-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-sm-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-sm-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-sm-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-sm-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-sm-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-sm-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-sm-p-md { + padding: var(--canon-spacing-md); + } + + .cu-sm-p-none { + padding: 0; + } + + .cu-sm-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-sm-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-sm-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-sm-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-sm-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-sm-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-sm-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-sm-pb-none { + padding-bottom: 0; + } + + .cu-sm-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-sm-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-sm-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-sm-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-sm-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-sm-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-sm-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-sm-pl-none { + padding-left: 0; + } + + .cu-sm-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-sm-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-sm-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-sm-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-sm-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-sm-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-sm-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-sm-pr-none { + padding-right: 0; + } + + .cu-sm-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-sm-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-sm-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-sm-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-sm-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-sm-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-sm-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-sm-pt-none { + padding-top: 0; + } + + .cu-sm-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-sm-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-sm-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-sm-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-sm-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-sm-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-sm-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-sm-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-sm-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-sm-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-sm-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-sm-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-sm-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-sm-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-sm-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-sm-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-sm-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-sm-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-sm-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-sm-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-sm-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-sm-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-sm-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-sm-rounded-none { + border-radius: 0; + } + + .cu-sm-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-sm-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-sm-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + + .cu-sm-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-sm-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-sm-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-sm-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-sm-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-sm-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-sm-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-sm-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-sm-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-sm-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-sm-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-sm-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-sm-row-span-auto { + grid-row: span auto / span auto; + } + + .cu-sm-wrap-reverse { + flex-wrap: wrap-reverse; + } + } + + @media (width >= 768px) { + .cu-md-block { + display: block; + } + + .cu-md-border-base { + border-color: var(--canon-border-base); + border-style: solid; + border-width: 1px; + } + + .cu-md-border-error { + border-color: var(--canon-border-error); + border-style: solid; + border-width: 1px; + } + + .cu-md-border-none { + border-width: 0; + border-color: #0000; + } + + .cu-md-border-selected { + border-color: var(--canon-border-selected); + border-style: solid; + border-width: 1px; + } + + .cu-md-border-warning { + border-color: var(--canon-border-warning); + border-style: solid; + border-width: 1px; + } + + .cu-md-col-end-1 { + grid-column-end: 1; + } + + .cu-md-col-end-10 { + grid-column-end: 10; + } + + .cu-md-col-end-11 { + grid-column-end: 11; + } + + .cu-md-col-end-12 { + grid-column-end: 12; + } + + .cu-md-col-end-13 { + grid-column-end: 13; + } + + .cu-md-col-end-2 { + grid-column-end: 2; + } + + .cu-md-col-end-3 { + grid-column-end: 3; + } + + .cu-md-col-end-4 { + grid-column-end: 4; + } + + .cu-md-col-end-5 { + grid-column-end: 5; + } + + .cu-md-col-end-6 { + grid-column-end: 6; + } + + .cu-md-col-end-7 { + grid-column-end: 7; + } + + .cu-md-col-end-8 { + grid-column-end: 8; + } + + .cu-md-col-end-9 { + grid-column-end: 9; + } + + .cu-md-col-end-auto { + grid-column-end: auto; + } + + .cu-md-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-md-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-md-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-md-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-md-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-md-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-md-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-md-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-md-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-md-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-md-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-md-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-md-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-md-col-start-1 { + grid-column-start: 1; + } + + .cu-md-col-start-10 { + grid-column-start: 10; + } + + .cu-md-col-start-11 { + grid-column-start: 11; + } + + .cu-md-col-start-12 { + grid-column-start: 12; + } + + .cu-md-col-start-13 { + grid-column-start: 13; + } + + .cu-md-col-start-2 { + grid-column-start: 2; + } + + .cu-md-col-start-3 { + grid-column-start: 3; + } + + .cu-md-col-start-4 { + grid-column-start: 4; + } + + .cu-md-col-start-5 { + grid-column-start: 5; + } + + .cu-md-col-start-6 { + grid-column-start: 6; + } + + .cu-md-col-start-7 { + grid-column-start: 7; + } + + .cu-md-col-start-8 { + grid-column-start: 8; + } + + .cu-md-col-start-9 { + grid-column-start: 9; + } + + .cu-md-col-start-auto { + grid-column-start: auto; + } + + .cu-md-flex { + display: flex; + } + + .cu-md-flex-col { + flex-direction: column; + } + + .cu-md-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-md-flex-row { + flex-direction: row; + } + + .cu-md-flex-wrap { + flex-wrap: wrap; + } + + .cu-md-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-md-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-md-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-md-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-md-gap-none { + gap: 0; + } + + .cu-md-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-md-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-md-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-md-grid { + display: grid; + } + + .cu-md-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-md-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-md-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-md-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-md-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-md-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-md-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-md-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-md-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-md-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-md-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-md-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-md-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .cu-md-hidden { + display: none; + } + + .cu-md-inline { + display: inline; + } + + .cu-md-inline-block { + display: inline-block; + } + + .cu-md-items-center { + align-items: center; + } + + .cu-md-items-end { + align-items: flex-end; + } + + .cu-md-items-start { + align-items: flex-start; + } + + .cu-md-items-stretch { + align-items: stretch; + } + + .cu-md-justify-around { + justify-content: space-around; + } + + .cu-md-justify-between { + justify-content: space-between; + } + + .cu-md-justify-center { + justify-content: center; + } + + .cu-md-justify-end { + justify-content: flex-end; + } + + .cu-md-justify-start { + justify-content: flex-start; + } + + .cu-md-justify-stretch { + justify-content: stretch; + } + + .cu-md-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-md-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-md-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-md-m-md { + margin: var(--canon-spacing-md); + } + + .cu-md-m-none { + margin: 0; + } + + .cu-md-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-md-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-md-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-md-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-md-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-md-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-md-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-md-mb-none { + margin-bottom: 0; + } + + .cu-md-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-md-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-md-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-md-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-md-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-md-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-md-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-md-ml-none { + margin-left: 0; + } + + .cu-md-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-md-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-md-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-md-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-md-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-md-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-md-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-md-mr-none { + margin-right: 0; + } + + .cu-md-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-md-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-md-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-md-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-md-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-md-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-md-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-md-mt-none { + margin-top: 0; + } + + .cu-md-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-md-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-md-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-md-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-md-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-md-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-md-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-md-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-md-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-md-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-md-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-md-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-md-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-md-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-md-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-md-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-md-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-md-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-md-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-md-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-md-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-md-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-md-p-md { + padding: var(--canon-spacing-md); + } + + .cu-md-p-none { + padding: 0; + } + + .cu-md-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-md-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-md-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-md-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-md-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-md-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-md-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-md-pb-none { + padding-bottom: 0; + } + + .cu-md-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-md-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-md-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-md-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-md-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-md-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-md-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-md-pl-none { + padding-left: 0; + } + + .cu-md-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-md-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-md-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-md-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-md-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-md-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-md-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-md-pr-none { + padding-right: 0; + } + + .cu-md-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-md-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-md-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-md-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-md-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-md-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-md-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-md-pt-none { + padding-top: 0; + } + + .cu-md-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-md-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-md-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-md-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-md-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-md-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-md-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-md-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-md-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-md-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-md-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-md-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-md-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-md-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-md-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-md-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-md-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-md-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-md-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-md-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-md-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-md-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-md-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-md-rounded-none { + border-radius: 0; + } + + .cu-md-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-md-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-md-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + + .cu-md-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-md-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-md-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-md-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-md-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-md-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-md-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-md-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-md-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-md-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-md-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-md-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-md-row-span-auto { + grid-row: span auto / span auto; + } + + .cu-md-wrap-reverse { + flex-wrap: wrap-reverse; + } + } + + @media (width >= 1024px) { + .cu-lg-block { + display: block; + } + + .cu-lg-border-base { + border-color: var(--canon-border-base); + border-style: solid; + border-width: 1px; + } + + .cu-lg-border-error { + border-color: var(--canon-border-error); + border-style: solid; + border-width: 1px; + } + + .cu-lg-border-none { + border-width: 0; + border-color: #0000; + } + + .cu-lg-border-selected { + border-color: var(--canon-border-selected); + border-style: solid; + border-width: 1px; + } + + .cu-lg-border-warning { + border-color: var(--canon-border-warning); + border-style: solid; + border-width: 1px; + } + + .cu-lg-col-end-1 { + grid-column-end: 1; + } + + .cu-lg-col-end-10 { + grid-column-end: 10; + } + + .cu-lg-col-end-11 { + grid-column-end: 11; + } + + .cu-lg-col-end-12 { + grid-column-end: 12; + } + + .cu-lg-col-end-13 { + grid-column-end: 13; + } + + .cu-lg-col-end-2 { + grid-column-end: 2; + } + + .cu-lg-col-end-3 { + grid-column-end: 3; + } + + .cu-lg-col-end-4 { + grid-column-end: 4; + } + + .cu-lg-col-end-5 { + grid-column-end: 5; + } + + .cu-lg-col-end-6 { + grid-column-end: 6; + } + + .cu-lg-col-end-7 { + grid-column-end: 7; + } + + .cu-lg-col-end-8 { + grid-column-end: 8; + } + + .cu-lg-col-end-9 { + grid-column-end: 9; + } + + .cu-lg-col-end-auto { + grid-column-end: auto; + } + + .cu-lg-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-lg-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-lg-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-lg-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-lg-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-lg-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-lg-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-lg-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-lg-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-lg-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-lg-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-lg-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-lg-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-lg-col-start-1 { + grid-column-start: 1; + } + + .cu-lg-col-start-10 { + grid-column-start: 10; + } + + .cu-lg-col-start-11 { + grid-column-start: 11; + } + + .cu-lg-col-start-12 { + grid-column-start: 12; + } + + .cu-lg-col-start-13 { + grid-column-start: 13; + } + + .cu-lg-col-start-2 { + grid-column-start: 2; + } + + .cu-lg-col-start-3 { + grid-column-start: 3; + } + + .cu-lg-col-start-4 { + grid-column-start: 4; + } + + .cu-lg-col-start-5 { + grid-column-start: 5; + } + + .cu-lg-col-start-6 { + grid-column-start: 6; + } + + .cu-lg-col-start-7 { + grid-column-start: 7; + } + + .cu-lg-col-start-8 { + grid-column-start: 8; + } + + .cu-lg-col-start-9 { + grid-column-start: 9; + } + + .cu-lg-col-start-auto { + grid-column-start: auto; + } + + .cu-lg-flex { + display: flex; + } + + .cu-lg-flex-col { + flex-direction: column; + } + + .cu-lg-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-lg-flex-row { + flex-direction: row; + } + + .cu-lg-flex-wrap { + flex-wrap: wrap; + } + + .cu-lg-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-lg-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-lg-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-lg-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-lg-gap-none { + gap: 0; + } + + .cu-lg-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-lg-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-lg-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-lg-grid { + display: grid; + } + + .cu-lg-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-lg-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .cu-lg-hidden { + display: none; + } + + .cu-lg-inline { + display: inline; + } + + .cu-lg-inline-block { + display: inline-block; + } + + .cu-lg-items-center { + align-items: center; + } + + .cu-lg-items-end { + align-items: flex-end; + } + + .cu-lg-items-start { + align-items: flex-start; + } + + .cu-lg-items-stretch { + align-items: stretch; + } + + .cu-lg-justify-around { + justify-content: space-around; + } + + .cu-lg-justify-between { + justify-content: space-between; + } + + .cu-lg-justify-center { + justify-content: center; + } + + .cu-lg-justify-end { + justify-content: flex-end; + } + + .cu-lg-justify-start { + justify-content: flex-start; + } + + .cu-lg-justify-stretch { + justify-content: stretch; + } + + .cu-lg-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-lg-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-lg-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-lg-m-md { + margin: var(--canon-spacing-md); + } + + .cu-lg-m-none { + margin: 0; + } + + .cu-lg-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-lg-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-lg-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-lg-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-lg-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-lg-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-lg-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-lg-mb-none { + margin-bottom: 0; + } + + .cu-lg-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-lg-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-lg-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-lg-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-lg-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-lg-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-lg-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-lg-ml-none { + margin-left: 0; + } + + .cu-lg-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-lg-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-lg-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-lg-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-lg-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-lg-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-lg-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-lg-mr-none { + margin-right: 0; + } + + .cu-lg-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-lg-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-lg-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-lg-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-lg-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-lg-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-lg-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-lg-mt-none { + margin-top: 0; + } + + .cu-lg-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-lg-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-lg-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-lg-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-lg-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-lg-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-lg-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-lg-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-lg-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-lg-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-lg-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-lg-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-lg-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-lg-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-lg-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-lg-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-lg-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-lg-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-lg-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-lg-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-lg-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-lg-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-lg-p-md { + padding: var(--canon-spacing-md); + } + + .cu-lg-p-none { + padding: 0; + } + + .cu-lg-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-lg-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-lg-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-lg-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-lg-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-lg-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-lg-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-lg-pb-none { + padding-bottom: 0; + } + + .cu-lg-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-lg-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-lg-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-lg-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-lg-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-lg-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-lg-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-lg-pl-none { + padding-left: 0; + } + + .cu-lg-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-lg-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-lg-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-lg-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-lg-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-lg-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-lg-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-lg-pr-none { + padding-right: 0; + } + + .cu-lg-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-lg-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-lg-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-lg-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-lg-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-lg-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-lg-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-lg-pt-none { + padding-top: 0; + } + + .cu-lg-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-lg-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-lg-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-lg-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-lg-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-lg-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-lg-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-lg-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-lg-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-lg-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-lg-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-lg-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-lg-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-lg-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-lg-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-lg-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-lg-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-lg-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-lg-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-lg-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-lg-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-lg-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-lg-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-lg-rounded-none { + border-radius: 0; + } + + .cu-lg-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-lg-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-lg-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + + .cu-lg-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-lg-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-lg-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-lg-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-lg-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-lg-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-lg-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-lg-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-lg-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-lg-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-lg-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-lg-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-lg-row-span-auto { + grid-row: span auto / span auto; + } + + .cu-lg-wrap-reverse { + flex-wrap: wrap-reverse; + } + } + + @media (width >= 1280px) { + .cu-xl-block { + display: block; + } + + .cu-xl-border-base { + border-color: var(--canon-border-base); + border-style: solid; + border-width: 1px; + } + + .cu-xl-border-error { + border-color: var(--canon-border-error); + border-style: solid; + border-width: 1px; + } + + .cu-xl-border-none { + border-width: 0; + border-color: #0000; + } + + .cu-xl-border-selected { + border-color: var(--canon-border-selected); + border-style: solid; + border-width: 1px; + } + + .cu-xl-border-warning { + border-color: var(--canon-border-warning); + border-style: solid; + border-width: 1px; + } + + .cu-xl-col-end-1 { + grid-column-end: 1; + } + + .cu-xl-col-end-10 { + grid-column-end: 10; + } + + .cu-xl-col-end-11 { + grid-column-end: 11; + } + + .cu-xl-col-end-12 { + grid-column-end: 12; + } + + .cu-xl-col-end-13 { + grid-column-end: 13; + } + + .cu-xl-col-end-2 { + grid-column-end: 2; + } + + .cu-xl-col-end-3 { + grid-column-end: 3; + } + + .cu-xl-col-end-4 { + grid-column-end: 4; + } + + .cu-xl-col-end-5 { + grid-column-end: 5; + } + + .cu-xl-col-end-6 { + grid-column-end: 6; + } + + .cu-xl-col-end-7 { + grid-column-end: 7; + } + + .cu-xl-col-end-8 { + grid-column-end: 8; + } + + .cu-xl-col-end-9 { + grid-column-end: 9; + } + + .cu-xl-col-end-auto { + grid-column-end: auto; + } + + .cu-xl-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-xl-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-xl-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-xl-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-xl-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-xl-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-xl-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-xl-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-xl-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-xl-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-xl-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-xl-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-xl-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-xl-col-start-1 { + grid-column-start: 1; + } + + .cu-xl-col-start-10 { + grid-column-start: 10; + } + + .cu-xl-col-start-11 { + grid-column-start: 11; + } + + .cu-xl-col-start-12 { + grid-column-start: 12; + } + + .cu-xl-col-start-13 { + grid-column-start: 13; + } + + .cu-xl-col-start-2 { + grid-column-start: 2; + } + + .cu-xl-col-start-3 { + grid-column-start: 3; + } + + .cu-xl-col-start-4 { + grid-column-start: 4; + } + + .cu-xl-col-start-5 { + grid-column-start: 5; + } + + .cu-xl-col-start-6 { + grid-column-start: 6; + } + + .cu-xl-col-start-7 { + grid-column-start: 7; + } + + .cu-xl-col-start-8 { + grid-column-start: 8; + } + + .cu-xl-col-start-9 { + grid-column-start: 9; + } + + .cu-xl-col-start-auto { + grid-column-start: auto; + } + + .cu-xl-flex { + display: flex; + } + + .cu-xl-flex-col { + flex-direction: column; + } + + .cu-xl-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-xl-flex-row { + flex-direction: row; + } + + .cu-xl-flex-wrap { + flex-wrap: wrap; + } + + .cu-xl-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-xl-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-xl-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-xl-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-xl-gap-none { + gap: 0; + } + + .cu-xl-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-xl-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-xl-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-xl-grid { + display: grid; + } + + .cu-xl-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-xl-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .cu-xl-hidden { + display: none; + } + + .cu-xl-inline { + display: inline; + } + + .cu-xl-inline-block { + display: inline-block; + } + + .cu-xl-items-center { + align-items: center; + } + + .cu-xl-items-end { + align-items: flex-end; + } + + .cu-xl-items-start { + align-items: flex-start; + } + + .cu-xl-items-stretch { + align-items: stretch; + } + + .cu-xl-justify-around { + justify-content: space-around; + } + + .cu-xl-justify-between { + justify-content: space-between; + } + + .cu-xl-justify-center { + justify-content: center; + } + + .cu-xl-justify-end { + justify-content: flex-end; + } + + .cu-xl-justify-start { + justify-content: flex-start; + } + + .cu-xl-justify-stretch { + justify-content: stretch; + } + + .cu-xl-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-xl-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-xl-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-xl-m-md { + margin: var(--canon-spacing-md); + } + + .cu-xl-m-none { + margin: 0; + } + + .cu-xl-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-xl-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-xl-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-xl-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-xl-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-xl-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-xl-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-xl-mb-none { + margin-bottom: 0; + } + + .cu-xl-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-xl-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-xl-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-xl-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-xl-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-xl-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-xl-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-xl-ml-none { + margin-left: 0; + } + + .cu-xl-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-xl-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-xl-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-xl-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-xl-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-xl-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-xl-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-xl-mr-none { + margin-right: 0; + } + + .cu-xl-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-xl-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-xl-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-xl-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-xl-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-xl-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-xl-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-xl-mt-none { + margin-top: 0; + } + + .cu-xl-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-xl-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-xl-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-xl-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-xl-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-xl-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-xl-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-xl-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-xl-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-xl-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-xl-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-xl-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-xl-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-xl-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-xl-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-xl-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-xl-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-xl-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-xl-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-xl-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-xl-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-xl-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-xl-p-md { + padding: var(--canon-spacing-md); + } + + .cu-xl-p-none { + padding: 0; + } + + .cu-xl-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-xl-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-xl-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-xl-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-xl-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-xl-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-xl-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-xl-pb-none { + padding-bottom: 0; + } + + .cu-xl-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-xl-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-xl-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-xl-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-xl-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-xl-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-xl-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-xl-pl-none { + padding-left: 0; + } + + .cu-xl-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-xl-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-xl-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-xl-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-xl-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-xl-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-xl-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-xl-pr-none { + padding-right: 0; + } + + .cu-xl-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-xl-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-xl-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-xl-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-xl-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-xl-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-xl-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-xl-pt-none { + padding-top: 0; + } + + .cu-xl-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-xl-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-xl-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-xl-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-xl-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-xl-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-xl-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-xl-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-xl-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-xl-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-xl-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-xl-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-xl-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-xl-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-xl-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-xl-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-xl-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-xl-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-xl-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-xl-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-xl-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-xl-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-xl-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-xl-rounded-none { + border-radius: 0; + } + + .cu-xl-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-xl-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-xl-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + + .cu-xl-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-xl-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-xl-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-xl-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-xl-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-xl-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-xl-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-xl-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-xl-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-xl-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-xl-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-xl-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-xl-row-span-auto { + grid-row: span auto / span auto; + } + + .cu-xl-wrap-reverse { + flex-wrap: wrap-reverse; + } + } + + @media (width >= 1536px) { + .cu-2xl-block { + display: block; + } + + .cu-2xl-border-base { + border-color: var(--canon-border-base); + border-style: solid; + border-width: 1px; + } + + .cu-2xl-border-error { + border-color: var(--canon-border-error); + border-style: solid; + border-width: 1px; + } + + .cu-2xl-border-none { + border-width: 0; + border-color: #0000; + } + + .cu-2xl-border-selected { + border-color: var(--canon-border-selected); + border-style: solid; + border-width: 1px; + } + + .cu-2xl-border-warning { + border-color: var(--canon-border-warning); + border-style: solid; + border-width: 1px; + } + + .cu-2xl-col-end-1 { + grid-column-end: 1; + } + + .cu-2xl-col-end-10 { + grid-column-end: 10; + } + + .cu-2xl-col-end-11 { + grid-column-end: 11; + } + + .cu-2xl-col-end-12 { + grid-column-end: 12; + } + + .cu-2xl-col-end-13 { + grid-column-end: 13; + } + + .cu-2xl-col-end-2 { + grid-column-end: 2; + } + + .cu-2xl-col-end-3 { + grid-column-end: 3; + } + + .cu-2xl-col-end-4 { + grid-column-end: 4; + } + + .cu-2xl-col-end-5 { + grid-column-end: 5; + } + + .cu-2xl-col-end-6 { + grid-column-end: 6; + } + + .cu-2xl-col-end-7 { + grid-column-end: 7; + } + + .cu-2xl-col-end-8 { + grid-column-end: 8; + } + + .cu-2xl-col-end-9 { + grid-column-end: 9; + } + + .cu-2xl-col-end-auto { + grid-column-end: auto; + } + + .cu-2xl-col-span-1 { + grid-column: span 1 / span 1; + } + + .cu-2xl-col-span-10 { + grid-column: span 10 / span 10; + } + + .cu-2xl-col-span-11 { + grid-column: span 11 / span 11; + } + + .cu-2xl-col-span-12 { + grid-column: span 12 / span 12; + } + + .cu-2xl-col-span-2 { + grid-column: span 2 / span 2; + } + + .cu-2xl-col-span-3 { + grid-column: span 3 / span 3; + } + + .cu-2xl-col-span-4 { + grid-column: span 4 / span 4; + } + + .cu-2xl-col-span-5 { + grid-column: span 5 / span 5; + } + + .cu-2xl-col-span-6 { + grid-column: span 6 / span 6; + } + + .cu-2xl-col-span-7 { + grid-column: span 7 / span 7; + } + + .cu-2xl-col-span-8 { + grid-column: span 8 / span 8; + } + + .cu-2xl-col-span-9 { + grid-column: span 9 / span 9; + } + + .cu-2xl-col-span-auto { + grid-column: span auto / span auto; + } + + .cu-2xl-col-start-1 { + grid-column-start: 1; + } + + .cu-2xl-col-start-10 { + grid-column-start: 10; + } + + .cu-2xl-col-start-11 { + grid-column-start: 11; + } + + .cu-2xl-col-start-12 { + grid-column-start: 12; + } + + .cu-2xl-col-start-13 { + grid-column-start: 13; + } + + .cu-2xl-col-start-2 { + grid-column-start: 2; + } + + .cu-2xl-col-start-3 { + grid-column-start: 3; + } + + .cu-2xl-col-start-4 { + grid-column-start: 4; + } + + .cu-2xl-col-start-5 { + grid-column-start: 5; + } + + .cu-2xl-col-start-6 { + grid-column-start: 6; + } + + .cu-2xl-col-start-7 { + grid-column-start: 7; + } + + .cu-2xl-col-start-8 { + grid-column-start: 8; + } + + .cu-2xl-col-start-9 { + grid-column-start: 9; + } + + .cu-2xl-col-start-auto { + grid-column-start: auto; + } + + .cu-2xl-flex { + display: flex; + } + + .cu-2xl-flex-col { + flex-direction: column; + } + + .cu-2xl-flex-nowrap { + flex-wrap: nowrap; + } + + .cu-2xl-flex-row { + flex-direction: row; + } + + .cu-2xl-flex-wrap { + flex-wrap: wrap; + } + + .cu-2xl-flex-wrap-reverse { + flex-wrap: wrap-reverse; + } + + .cu-2xl-gap-2xl { + gap: var(--canon-spacing-2xl); + } + + .cu-2xl-gap-lg { + gap: var(--canon-spacing-lg); + } + + .cu-2xl-gap-md { + gap: var(--canon-spacing-md); + } + + .cu-2xl-gap-none { + gap: 0; + } + + .cu-2xl-gap-sm { + gap: var(--canon-spacing-sm); + } + + .cu-2xl-gap-xl { + gap: var(--canon-spacing-xl); + } + + .cu-2xl-gap-xs { + gap: var(--canon-spacing-xs); + } + + .cu-2xl-grid { + display: grid; + } + + .cu-2xl-grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .cu-2xl-grid-cols-auto { + grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); + } + + .cu-2xl-hidden { + display: none; + } + + .cu-2xl-inline { + display: inline; + } + + .cu-2xl-inline-block { + display: inline-block; + } + + .cu-2xl-items-center { + align-items: center; + } + + .cu-2xl-items-end { + align-items: flex-end; + } + + .cu-2xl-items-start { + align-items: flex-start; + } + + .cu-2xl-items-stretch { + align-items: stretch; + } + + .cu-2xl-justify-around { + justify-content: space-around; + } + + .cu-2xl-justify-between { + justify-content: space-between; + } + + .cu-2xl-justify-center { + justify-content: center; + } + + .cu-2xl-justify-end { + justify-content: flex-end; + } + + .cu-2xl-justify-start { + justify-content: flex-start; + } + + .cu-2xl-justify-stretch { + justify-content: stretch; + } + + .cu-2xl-m-2xl { + margin: var(--canon-spacing-2xl); + } + + .cu-2xl-m-2xs { + margin: var(--canon-spacing-2xs); + } + + .cu-2xl-m-lg { + margin: var(--canon-spacing-lg); + } + + .cu-2xl-m-md { + margin: var(--canon-spacing-md); + } + + .cu-2xl-m-none { + margin: 0; + } + + .cu-2xl-m-sm { + margin: var(--canon-spacing-sm); + } + + .cu-2xl-m-xl { + margin: var(--canon-spacing-xl); + } + + .cu-2xl-m-xs { + margin: var(--canon-spacing-xs); + } + + .cu-2xl-mb-2xl { + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-2xl-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-2xl-mb-lg { + margin-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-mb-md { + margin-bottom: var(--canon-spacing-md); + } + + .cu-2xl-mb-none { + margin-bottom: 0; + } + + .cu-2xl-mb-sm { + margin-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-mb-xl { + margin-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-mb-xs { + margin-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-ml-2xl { + margin-left: var(--canon-spacing-2xl); + } + + .cu-2xl-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + + .cu-2xl-ml-lg { + margin-left: var(--canon-spacing-lg); + } + + .cu-2xl-ml-md { + margin-left: var(--canon-spacing-md); + } + + .cu-2xl-ml-none { + margin-left: 0; + } + + .cu-2xl-ml-sm { + margin-left: var(--canon-spacing-sm); + } + + .cu-2xl-ml-xl { + margin-left: var(--canon-spacing-xl); + } + + .cu-2xl-ml-xs { + margin-left: var(--canon-spacing-xs); + } + + .cu-2xl-mr-2xl { + margin-right: var(--canon-spacing-2xl); + } + + .cu-2xl-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + + .cu-2xl-mr-lg { + margin-right: var(--canon-spacing-lg); + } + + .cu-2xl-mr-md { + margin-right: var(--canon-spacing-md); + } + + .cu-2xl-mr-none { + margin-right: 0; + } + + .cu-2xl-mr-sm { + margin-right: var(--canon-spacing-sm); + } + + .cu-2xl-mr-xl { + margin-right: var(--canon-spacing-xl); + } + + .cu-2xl-mr-xs { + margin-right: var(--canon-spacing-xs); + } + + .cu-2xl-mt-2xl { + margin-top: var(--canon-spacing-2xl); + } + + .cu-2xl-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + + .cu-2xl-mt-lg { + margin-top: var(--canon-spacing-lg); + } + + .cu-2xl-mt-md { + margin-top: var(--canon-spacing-md); + } + + .cu-2xl-mt-none { + margin-top: 0; + } + + .cu-2xl-mt-sm { + margin-top: var(--canon-spacing-sm); + } + + .cu-2xl-mt-xl { + margin-top: var(--canon-spacing-xl); + } + + .cu-2xl-mt-xs { + margin-top: var(--canon-spacing-xs); + } + + .cu-2xl-mx-2xl { + margin-left: var(--canon-spacing-2xl); + margin-right: var(--canon-spacing-2xl); + } + + .cu-2xl-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + + .cu-2xl-mx-lg { + margin-left: var(--canon-spacing-lg); + margin-right: var(--canon-spacing-lg); + } + + .cu-2xl-mx-md { + margin-left: var(--canon-spacing-md); + margin-right: var(--canon-spacing-md); + } + + .cu-2xl-mx-none { + margin-left: 0; + margin-right: 0; + } + + .cu-2xl-mx-sm { + margin-left: var(--canon-spacing-sm); + margin-right: var(--canon-spacing-sm); + } + + .cu-2xl-mx-xl { + margin-left: var(--canon-spacing-xl); + margin-right: var(--canon-spacing-xl); + } + + .cu-2xl-mx-xs { + margin-left: var(--canon-spacing-xs); + margin-right: var(--canon-spacing-xs); + } + + .cu-2xl-my-2xl { + margin-top: var(--canon-spacing-2xl); + margin-bottom: var(--canon-spacing-2xl); + } + + .cu-2xl-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + + .cu-2xl-my-lg { + margin-top: var(--canon-spacing-lg); + margin-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-my-md { + margin-top: var(--canon-spacing-md); + margin-bottom: var(--canon-spacing-md); + } + + .cu-2xl-my-none { + margin-top: 0; + margin-bottom: 0; + } + + .cu-2xl-my-sm { + margin-top: var(--canon-spacing-sm); + margin-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-my-xl { + margin-top: var(--canon-spacing-xl); + margin-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-my-xs { + margin-top: var(--canon-spacing-xs); + margin-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-p-2xl { + padding: var(--canon-spacing-2xl); + } + + .cu-2xl-p-2xs { + padding: var(--canon-spacing-2xs); + } + + .cu-2xl-p-lg { + padding: var(--canon-spacing-lg); + } + + .cu-2xl-p-md { + padding: var(--canon-spacing-md); + } + + .cu-2xl-p-none { + padding: 0; + } + + .cu-2xl-p-sm { + padding: var(--canon-spacing-sm); + } + + .cu-2xl-p-xl { + padding: var(--canon-spacing-xl); + } + + .cu-2xl-p-xs { + padding: var(--canon-spacing-xs); + } + + .cu-2xl-pb-2xl { + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-2xl-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-2xl-pb-lg { + padding-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-pb-md { + padding-bottom: var(--canon-spacing-md); + } + + .cu-2xl-pb-none { + padding-bottom: 0; + } + + .cu-2xl-pb-sm { + padding-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-pb-xl { + padding-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-pb-xs { + padding-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-pl-2xl { + padding-left: var(--canon-spacing-2xl); + } + + .cu-2xl-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + + .cu-2xl-pl-lg { + padding-left: var(--canon-spacing-lg); + } + + .cu-2xl-pl-md { + padding-left: var(--canon-spacing-md); + } + + .cu-2xl-pl-none { + padding-left: 0; + } + + .cu-2xl-pl-sm { + padding-left: var(--canon-spacing-sm); + } + + .cu-2xl-pl-xl { + padding-left: var(--canon-spacing-xl); + } + + .cu-2xl-pl-xs { + padding-left: var(--canon-spacing-xs); + } + + .cu-2xl-pr-2xl { + padding-right: var(--canon-spacing-2xl); + } + + .cu-2xl-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + + .cu-2xl-pr-lg { + padding-right: var(--canon-spacing-lg); + } + + .cu-2xl-pr-md { + padding-right: var(--canon-spacing-md); + } + + .cu-2xl-pr-none { + padding-right: 0; + } + + .cu-2xl-pr-sm { + padding-right: var(--canon-spacing-sm); + } + + .cu-2xl-pr-xl { + padding-right: var(--canon-spacing-xl); + } + + .cu-2xl-pr-xs { + padding-right: var(--canon-spacing-xs); + } + + .cu-2xl-pt-2xl { + padding-top: var(--canon-spacing-2xl); + } + + .cu-2xl-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + + .cu-2xl-pt-lg { + padding-top: var(--canon-spacing-lg); + } + + .cu-2xl-pt-md { + padding-top: var(--canon-spacing-md); + } + + .cu-2xl-pt-none { + padding-top: 0; + } + + .cu-2xl-pt-sm { + padding-top: var(--canon-spacing-sm); + } + + .cu-2xl-pt-xl { + padding-top: var(--canon-spacing-xl); + } + + .cu-2xl-pt-xs { + padding-top: var(--canon-spacing-xs); + } + + .cu-2xl-px-2xl { + padding-left: var(--canon-spacing-2xl); + padding-right: var(--canon-spacing-2xl); + } + + .cu-2xl-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + + .cu-2xl-px-lg { + padding-left: var(--canon-spacing-lg); + padding-right: var(--canon-spacing-lg); + } + + .cu-2xl-px-md { + padding-left: var(--canon-spacing-md); + padding-right: var(--canon-spacing-md); + } + + .cu-2xl-px-none { + padding-left: 0; + padding-right: 0; + } + + .cu-2xl-px-sm { + padding-left: var(--canon-spacing-sm); + padding-right: var(--canon-spacing-sm); + } + + .cu-2xl-px-xl { + padding-left: var(--canon-spacing-xl); + padding-right: var(--canon-spacing-xl); + } + + .cu-2xl-px-xs { + padding-left: var(--canon-spacing-xs); + padding-right: var(--canon-spacing-xs); + } + + .cu-2xl-py-2xl { + padding-top: var(--canon-spacing-2xl); + padding-bottom: var(--canon-spacing-2xl); + } + + .cu-2xl-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + + .cu-2xl-py-lg { + padding-top: var(--canon-spacing-lg); + padding-bottom: var(--canon-spacing-lg); + } + + .cu-2xl-py-md { + padding-top: var(--canon-spacing-md); + padding-bottom: var(--canon-spacing-md); + } + + .cu-2xl-py-none { + padding-top: 0; + padding-bottom: 0; + } + + .cu-2xl-py-sm { + padding-top: var(--canon-spacing-sm); + padding-bottom: var(--canon-spacing-sm); + } + + .cu-2xl-py-xl { + padding-top: var(--canon-spacing-xl); + padding-bottom: var(--canon-spacing-xl); + } + + .cu-2xl-py-xs { + padding-top: var(--canon-spacing-xs); + padding-bottom: var(--canon-spacing-xs); + } + + .cu-2xl-rounded-2xl { + border-radius: var(--canon-border-radius-2xl); + } + + .cu-2xl-rounded-2xs { + border-radius: var(--canon-border-radius-2xs); + } + + .cu-2xl-rounded-lg { + border-radius: var(--canon-border-radius-lg); + } + + .cu-2xl-rounded-md { + border-radius: var(--canon-border-radius-md); + } + + .cu-2xl-rounded-none { + border-radius: 0; + } + + .cu-2xl-rounded-sm { + border-radius: var(--canon-border-radius-sm); + } + + .cu-2xl-rounded-xl { + border-radius: var(--canon-border-radius-xl); + } + + .cu-2xl-rounded-xs { + border-radius: var(--canon-border-radius-xs); + } + + .cu-2xl-row-span-1 { + grid-row: span 1 / span 1; + } + + .cu-2xl-row-span-10 { + grid-row: span 10 / span 10; + } + + .cu-2xl-row-span-11 { + grid-row: span 11 / span 11; + } + + .cu-2xl-row-span-12 { + grid-row: span 12 / span 12; + } + + .cu-2xl-row-span-2 { + grid-row: span 2 / span 2; + } + + .cu-2xl-row-span-3 { + grid-row: span 3 / span 3; + } + + .cu-2xl-row-span-4 { + grid-row: span 4 / span 4; + } + + .cu-2xl-row-span-5 { + grid-row: span 5 / span 5; + } + + .cu-2xl-row-span-6 { + grid-row: span 6 / span 6; + } + + .cu-2xl-row-span-7 { + grid-row: span 7 / span 7; + } + + .cu-2xl-row-span-8 { + grid-row: span 8 / span 8; + } + + .cu-2xl-row-span-9 { + grid-row: span 9 / span 9; + } + + .cu-2xl-row-span-auto { + grid-row: span auto / span auto; + } + + .cu-2xl-wrap-reverse { + flex-wrap: wrap-reverse; + } + } +} + +:root { + --canon-font-regular: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + --canon-font-monospace: ui-monospace, "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace; + --canon-font-weight-regular: 400; + --canon-font-weight-bold: 600; + --canon-font-size-label: .625rem; + --canon-font-size-caption: .75rem; + --canon-font-size-body: .875rem; + --canon-font-size-subtitle: 1rem; + --canon-font-size-title5: 1.25rem; + --canon-font-size-title4: 1.5rem; + --canon-font-size-title3: 2rem; + --canon-font-size-title2: 3rem; + --canon-font-size-title1: 4rem; + --canon-font-size-display: 5.75rem; + --canon-spacing-5xs: .125rem; + --canon-spacing-4xs: .25rem; + --canon-spacing-3xs: .375rem; + --canon-spacing-2xs: .5rem; + --canon-spacing-xs: .75rem; + --canon-spacing-sm: 1rem; + --canon-spacing-md: 1.5rem; + --canon-spacing-lg: 2rem; + --canon-spacing-xl: 2.5rem; + --canon-spacing-2xl: 3rem; + --canon-spacing-3xl: 3.5rem; + --canon-border-radius-2xs: .125rem; + --canon-border-radius-xs: .25rem; + --canon-border-radius-sm: .5rem; + --canon-border-radius-md: .75rem; + --canon-border-radius-lg: 1rem; + --canon-border-radius-xl: 1.25rem; + --canon-border-radius-2xl: 1.5rem; + --canon-container-max-width: 1200px; + --canon-container-padding: 1rem; +} + +[data-theme="light"] { + --canon-accent: #000; + --canon-background: #f8f8f8; + --canon-surface-1: #fff; + --canon-surface-2: #f4f4f4; + --canon-surface-3: #f1f1f1; + --canon-border-base: #0000001a; + --canon-border-hover: #0003; + --canon-border-warning: #e36d05; + --canon-border-error: #e22b2b; + --canon-border-selected: #1db954; + --canon-error: #f50000; + --canon-text-primary: #000; + --canon-text-primary-on-accent: #fff; + --canon-text-secondary: #646464; +} + +[data-theme="dark"] { + --canon-accent: #fff; + --canon-background: #000; + --canon-surface-1: #121212; + --canon-surface-2: #1a1a1a; + --canon-border-base: #fff3; + --canon-border-warning: #f50000; + --canon-border-error: #f87503; + --canon-border-selected: #25d262; + --canon-error: #f50000; + --canon-text-primary: #fff; + --canon-text-primary-on-accent: #000; + --canon-text-secondary: #b3b3b3; +} diff --git a/microsite-canon/scripts/watch-css.js b/microsite-canon/scripts/watch-css.js index d31cbffb14..b3cfedd570 100644 --- a/microsite-canon/scripts/watch-css.js +++ b/microsite-canon/scripts/watch-css.js @@ -21,7 +21,7 @@ const bundleAndCopyFile = async (source, destination) => { try { const result = await bundle({ filename: source, - minify: true, // Optional: Minify the output + minify: false, }); fs.writeFileSync(destination, result.code); diff --git a/microsite-canon/utils/data.ts b/microsite-canon/utils/data.ts index ca95a2a350..c5531fc8e8 100644 --- a/microsite-canon/utils/data.ts +++ b/microsite-canon/utils/data.ts @@ -1,4 +1,21 @@ -export const coreConcepts = [ +interface Page { + title: string; + slug: string; + status?: 'alpha' | 'beta' | 'stable' | 'deprecated' | 'inProgress'; +} + +export const overview: Page[] = [ + { + title: 'Getting Started', + slug: '', + }, + { + title: 'About', + slug: 'about', + }, +]; + +export const theme: Page[] = [ { title: 'Iconography', slug: 'iconography', @@ -21,53 +38,64 @@ export const coreConcepts = [ }, ]; -export const layoutComponents = [ +export const layoutComponents: Page[] = [ { title: 'Box', slug: 'box', + status: 'alpha', }, { title: 'Container', slug: 'container', + status: 'alpha', }, { title: 'Grid', slug: 'grid', + status: 'alpha', }, { title: 'Inline', slug: 'inline', + status: 'alpha', }, { title: 'Stack', slug: 'stack', + status: 'alpha', }, ]; -export const components = [ +export const components: Page[] = [ { title: 'Button', slug: 'button', + status: 'alpha', }, { title: 'Checkbox', slug: 'checkbox', + status: 'inProgress', }, { title: 'Heading', slug: 'heading', + status: 'alpha', }, { title: 'Icon', slug: 'icon', + status: 'alpha', }, { title: 'Table', slug: 'table', + status: 'inProgress', }, { title: 'Text', slug: 'text', + status: 'alpha', }, ]; diff --git a/packages/canon/src/components/Text/Text.tsx b/packages/canon/src/components/Text/Text.tsx index 762832c97d..a4f251a171 100644 --- a/packages/canon/src/components/Text/Text.tsx +++ b/packages/canon/src/components/Text/Text.tsx @@ -27,6 +27,7 @@ export const Text = forwardRef( children, variant = 'body', weight = 'regular', + style, ...restProps } = props; @@ -39,10 +40,11 @@ export const Text = forwardRef( return (

{children}

diff --git a/packages/canon/src/components/Text/types.ts b/packages/canon/src/components/Text/types.ts index 129087e7d5..7e11bed6e3 100644 --- a/packages/canon/src/components/Text/types.ts +++ b/packages/canon/src/components/Text/types.ts @@ -14,7 +14,7 @@ * limitations under the License. */ -import type { ReactNode } from 'react'; +import type { CSSProperties, ReactNode } from 'react'; import type { Breakpoint } from '../../types'; /** @public */ @@ -27,4 +27,5 @@ export interface TextProps { | 'label' | Partial>; weight?: 'regular' | 'bold' | Partial>; + style?: CSSProperties; } diff --git a/packages/canon/src/css/utilities/2xl.css b/packages/canon/src/css/utilities/2xl.css index 8938d0dbc5..4ea3d82db0 100644 --- a/packages/canon/src/css/utilities/2xl.css +++ b/packages/canon/src/css/utilities/2xl.css @@ -377,6 +377,10 @@ margin: var(--canon-spacing-2xl); } + .cu-2xl-m-2xs { + margin: var(--canon-spacing-2xs); + } + .cu-2xl-m-lg { margin: var(--canon-spacing-lg); } @@ -405,6 +409,10 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-2xl-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + .cu-2xl-mb-lg { margin-bottom: var(--canon-spacing-lg); } @@ -433,6 +441,10 @@ margin-left: var(--canon-spacing-2xl); } + .cu-2xl-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + .cu-2xl-ml-lg { margin-left: var(--canon-spacing-lg); } @@ -461,6 +473,10 @@ margin-right: var(--canon-spacing-2xl); } + .cu-2xl-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + .cu-2xl-mr-lg { margin-right: var(--canon-spacing-lg); } @@ -489,6 +505,10 @@ margin-top: var(--canon-spacing-2xl); } + .cu-2xl-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + .cu-2xl-mt-lg { margin-top: var(--canon-spacing-lg); } @@ -518,6 +538,11 @@ margin-right: var(--canon-spacing-2xl); } + .cu-2xl-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + .cu-2xl-mx-lg { margin-left: var(--canon-spacing-lg); margin-right: var(--canon-spacing-lg); @@ -553,6 +578,11 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-2xl-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + .cu-2xl-my-lg { margin-top: var(--canon-spacing-lg); margin-bottom: var(--canon-spacing-lg); @@ -587,6 +617,10 @@ padding: var(--canon-spacing-2xl); } + .cu-2xl-p-2xs { + padding: var(--canon-spacing-2xs); + } + .cu-2xl-p-lg { padding: var(--canon-spacing-lg); } @@ -615,6 +649,10 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-2xl-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + .cu-2xl-pb-lg { padding-bottom: var(--canon-spacing-lg); } @@ -643,6 +681,10 @@ padding-left: var(--canon-spacing-2xl); } + .cu-2xl-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + .cu-2xl-pl-lg { padding-left: var(--canon-spacing-lg); } @@ -671,6 +713,10 @@ padding-right: var(--canon-spacing-2xl); } + .cu-2xl-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + .cu-2xl-pr-lg { padding-right: var(--canon-spacing-lg); } @@ -699,6 +745,10 @@ padding-top: var(--canon-spacing-2xl); } + .cu-2xl-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + .cu-2xl-pt-lg { padding-top: var(--canon-spacing-lg); } @@ -728,6 +778,11 @@ padding-right: var(--canon-spacing-2xl); } + .cu-2xl-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + .cu-2xl-px-lg { padding-left: var(--canon-spacing-lg); padding-right: var(--canon-spacing-lg); @@ -763,6 +818,11 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-2xl-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + .cu-2xl-py-lg { padding-top: var(--canon-spacing-lg); padding-bottom: var(--canon-spacing-lg); diff --git a/packages/canon/src/css/utilities/lg.css b/packages/canon/src/css/utilities/lg.css index 3053a0dde3..caa2adb310 100644 --- a/packages/canon/src/css/utilities/lg.css +++ b/packages/canon/src/css/utilities/lg.css @@ -377,6 +377,10 @@ margin: var(--canon-spacing-2xl); } + .cu-lg-m-2xs { + margin: var(--canon-spacing-2xs); + } + .cu-lg-m-lg { margin: var(--canon-spacing-lg); } @@ -405,6 +409,10 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-lg-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + .cu-lg-mb-lg { margin-bottom: var(--canon-spacing-lg); } @@ -433,6 +441,10 @@ margin-left: var(--canon-spacing-2xl); } + .cu-lg-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + .cu-lg-ml-lg { margin-left: var(--canon-spacing-lg); } @@ -461,6 +473,10 @@ margin-right: var(--canon-spacing-2xl); } + .cu-lg-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + .cu-lg-mr-lg { margin-right: var(--canon-spacing-lg); } @@ -489,6 +505,10 @@ margin-top: var(--canon-spacing-2xl); } + .cu-lg-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + .cu-lg-mt-lg { margin-top: var(--canon-spacing-lg); } @@ -518,6 +538,11 @@ margin-right: var(--canon-spacing-2xl); } + .cu-lg-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + .cu-lg-mx-lg { margin-left: var(--canon-spacing-lg); margin-right: var(--canon-spacing-lg); @@ -553,6 +578,11 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-lg-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + .cu-lg-my-lg { margin-top: var(--canon-spacing-lg); margin-bottom: var(--canon-spacing-lg); @@ -587,6 +617,10 @@ padding: var(--canon-spacing-2xl); } + .cu-lg-p-2xs { + padding: var(--canon-spacing-2xs); + } + .cu-lg-p-lg { padding: var(--canon-spacing-lg); } @@ -615,6 +649,10 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-lg-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + .cu-lg-pb-lg { padding-bottom: var(--canon-spacing-lg); } @@ -643,6 +681,10 @@ padding-left: var(--canon-spacing-2xl); } + .cu-lg-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + .cu-lg-pl-lg { padding-left: var(--canon-spacing-lg); } @@ -671,6 +713,10 @@ padding-right: var(--canon-spacing-2xl); } + .cu-lg-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + .cu-lg-pr-lg { padding-right: var(--canon-spacing-lg); } @@ -699,6 +745,10 @@ padding-top: var(--canon-spacing-2xl); } + .cu-lg-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + .cu-lg-pt-lg { padding-top: var(--canon-spacing-lg); } @@ -728,6 +778,11 @@ padding-right: var(--canon-spacing-2xl); } + .cu-lg-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + .cu-lg-px-lg { padding-left: var(--canon-spacing-lg); padding-right: var(--canon-spacing-lg); @@ -763,6 +818,11 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-lg-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + .cu-lg-py-lg { padding-top: var(--canon-spacing-lg); padding-bottom: var(--canon-spacing-lg); diff --git a/packages/canon/src/css/utilities/md.css b/packages/canon/src/css/utilities/md.css index 62491f047a..fe6d56ad7c 100644 --- a/packages/canon/src/css/utilities/md.css +++ b/packages/canon/src/css/utilities/md.css @@ -377,6 +377,10 @@ margin: var(--canon-spacing-2xl); } + .cu-md-m-2xs { + margin: var(--canon-spacing-2xs); + } + .cu-md-m-lg { margin: var(--canon-spacing-lg); } @@ -405,6 +409,10 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-md-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + .cu-md-mb-lg { margin-bottom: var(--canon-spacing-lg); } @@ -433,6 +441,10 @@ margin-left: var(--canon-spacing-2xl); } + .cu-md-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + .cu-md-ml-lg { margin-left: var(--canon-spacing-lg); } @@ -461,6 +473,10 @@ margin-right: var(--canon-spacing-2xl); } + .cu-md-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + .cu-md-mr-lg { margin-right: var(--canon-spacing-lg); } @@ -489,6 +505,10 @@ margin-top: var(--canon-spacing-2xl); } + .cu-md-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + .cu-md-mt-lg { margin-top: var(--canon-spacing-lg); } @@ -518,6 +538,11 @@ margin-right: var(--canon-spacing-2xl); } + .cu-md-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + .cu-md-mx-lg { margin-left: var(--canon-spacing-lg); margin-right: var(--canon-spacing-lg); @@ -553,6 +578,11 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-md-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + .cu-md-my-lg { margin-top: var(--canon-spacing-lg); margin-bottom: var(--canon-spacing-lg); @@ -587,6 +617,10 @@ padding: var(--canon-spacing-2xl); } + .cu-md-p-2xs { + padding: var(--canon-spacing-2xs); + } + .cu-md-p-lg { padding: var(--canon-spacing-lg); } @@ -615,6 +649,10 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-md-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + .cu-md-pb-lg { padding-bottom: var(--canon-spacing-lg); } @@ -643,6 +681,10 @@ padding-left: var(--canon-spacing-2xl); } + .cu-md-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + .cu-md-pl-lg { padding-left: var(--canon-spacing-lg); } @@ -671,6 +713,10 @@ padding-right: var(--canon-spacing-2xl); } + .cu-md-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + .cu-md-pr-lg { padding-right: var(--canon-spacing-lg); } @@ -699,6 +745,10 @@ padding-top: var(--canon-spacing-2xl); } + .cu-md-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + .cu-md-pt-lg { padding-top: var(--canon-spacing-lg); } @@ -728,6 +778,11 @@ padding-right: var(--canon-spacing-2xl); } + .cu-md-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + .cu-md-px-lg { padding-left: var(--canon-spacing-lg); padding-right: var(--canon-spacing-lg); @@ -763,6 +818,11 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-md-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + .cu-md-py-lg { padding-top: var(--canon-spacing-lg); padding-bottom: var(--canon-spacing-lg); diff --git a/packages/canon/src/css/utilities/sm.css b/packages/canon/src/css/utilities/sm.css index 60ddf67de5..87657c2222 100644 --- a/packages/canon/src/css/utilities/sm.css +++ b/packages/canon/src/css/utilities/sm.css @@ -377,6 +377,10 @@ margin: var(--canon-spacing-2xl); } + .cu-sm-m-2xs { + margin: var(--canon-spacing-2xs); + } + .cu-sm-m-lg { margin: var(--canon-spacing-lg); } @@ -405,6 +409,10 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-sm-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + .cu-sm-mb-lg { margin-bottom: var(--canon-spacing-lg); } @@ -433,6 +441,10 @@ margin-left: var(--canon-spacing-2xl); } + .cu-sm-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + .cu-sm-ml-lg { margin-left: var(--canon-spacing-lg); } @@ -461,6 +473,10 @@ margin-right: var(--canon-spacing-2xl); } + .cu-sm-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + .cu-sm-mr-lg { margin-right: var(--canon-spacing-lg); } @@ -489,6 +505,10 @@ margin-top: var(--canon-spacing-2xl); } + .cu-sm-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + .cu-sm-mt-lg { margin-top: var(--canon-spacing-lg); } @@ -518,6 +538,11 @@ margin-right: var(--canon-spacing-2xl); } + .cu-sm-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + .cu-sm-mx-lg { margin-left: var(--canon-spacing-lg); margin-right: var(--canon-spacing-lg); @@ -553,6 +578,11 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-sm-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + .cu-sm-my-lg { margin-top: var(--canon-spacing-lg); margin-bottom: var(--canon-spacing-lg); @@ -587,6 +617,10 @@ padding: var(--canon-spacing-2xl); } + .cu-sm-p-2xs { + padding: var(--canon-spacing-2xs); + } + .cu-sm-p-lg { padding: var(--canon-spacing-lg); } @@ -615,6 +649,10 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-sm-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + .cu-sm-pb-lg { padding-bottom: var(--canon-spacing-lg); } @@ -643,6 +681,10 @@ padding-left: var(--canon-spacing-2xl); } + .cu-sm-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + .cu-sm-pl-lg { padding-left: var(--canon-spacing-lg); } @@ -671,6 +713,10 @@ padding-right: var(--canon-spacing-2xl); } + .cu-sm-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + .cu-sm-pr-lg { padding-right: var(--canon-spacing-lg); } @@ -699,6 +745,10 @@ padding-top: var(--canon-spacing-2xl); } + .cu-sm-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + .cu-sm-pt-lg { padding-top: var(--canon-spacing-lg); } @@ -728,6 +778,11 @@ padding-right: var(--canon-spacing-2xl); } + .cu-sm-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + .cu-sm-px-lg { padding-left: var(--canon-spacing-lg); padding-right: var(--canon-spacing-lg); @@ -763,6 +818,11 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-sm-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + .cu-sm-py-lg { padding-top: var(--canon-spacing-lg); padding-bottom: var(--canon-spacing-lg); diff --git a/packages/canon/src/css/utilities/xl.css b/packages/canon/src/css/utilities/xl.css index 0a999756ae..7d9e3b8add 100644 --- a/packages/canon/src/css/utilities/xl.css +++ b/packages/canon/src/css/utilities/xl.css @@ -377,6 +377,10 @@ margin: var(--canon-spacing-2xl); } + .cu-xl-m-2xs { + margin: var(--canon-spacing-2xs); + } + .cu-xl-m-lg { margin: var(--canon-spacing-lg); } @@ -405,6 +409,10 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-xl-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + .cu-xl-mb-lg { margin-bottom: var(--canon-spacing-lg); } @@ -433,6 +441,10 @@ margin-left: var(--canon-spacing-2xl); } + .cu-xl-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + .cu-xl-ml-lg { margin-left: var(--canon-spacing-lg); } @@ -461,6 +473,10 @@ margin-right: var(--canon-spacing-2xl); } + .cu-xl-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + .cu-xl-mr-lg { margin-right: var(--canon-spacing-lg); } @@ -489,6 +505,10 @@ margin-top: var(--canon-spacing-2xl); } + .cu-xl-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + .cu-xl-mt-lg { margin-top: var(--canon-spacing-lg); } @@ -518,6 +538,11 @@ margin-right: var(--canon-spacing-2xl); } + .cu-xl-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + .cu-xl-mx-lg { margin-left: var(--canon-spacing-lg); margin-right: var(--canon-spacing-lg); @@ -553,6 +578,11 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-xl-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + .cu-xl-my-lg { margin-top: var(--canon-spacing-lg); margin-bottom: var(--canon-spacing-lg); @@ -587,6 +617,10 @@ padding: var(--canon-spacing-2xl); } + .cu-xl-p-2xs { + padding: var(--canon-spacing-2xs); + } + .cu-xl-p-lg { padding: var(--canon-spacing-lg); } @@ -615,6 +649,10 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-xl-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + .cu-xl-pb-lg { padding-bottom: var(--canon-spacing-lg); } @@ -643,6 +681,10 @@ padding-left: var(--canon-spacing-2xl); } + .cu-xl-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + .cu-xl-pl-lg { padding-left: var(--canon-spacing-lg); } @@ -671,6 +713,10 @@ padding-right: var(--canon-spacing-2xl); } + .cu-xl-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + .cu-xl-pr-lg { padding-right: var(--canon-spacing-lg); } @@ -699,6 +745,10 @@ padding-top: var(--canon-spacing-2xl); } + .cu-xl-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + .cu-xl-pt-lg { padding-top: var(--canon-spacing-lg); } @@ -728,6 +778,11 @@ padding-right: var(--canon-spacing-2xl); } + .cu-xl-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + .cu-xl-px-lg { padding-left: var(--canon-spacing-lg); padding-right: var(--canon-spacing-lg); @@ -763,6 +818,11 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-xl-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + .cu-xl-py-lg { padding-top: var(--canon-spacing-lg); padding-bottom: var(--canon-spacing-lg); diff --git a/packages/canon/src/css/utilities/xs.css b/packages/canon/src/css/utilities/xs.css index 28ec25c817..926a2cc627 100644 --- a/packages/canon/src/css/utilities/xs.css +++ b/packages/canon/src/css/utilities/xs.css @@ -376,6 +376,10 @@ margin: var(--canon-spacing-2xl); } + .cu-m-2xs { + margin: var(--canon-spacing-2xs); + } + .cu-m-lg { margin: var(--canon-spacing-lg); } @@ -404,6 +408,10 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-mb-2xs { + margin-bottom: var(--canon-spacing-2xs); + } + .cu-mb-lg { margin-bottom: var(--canon-spacing-lg); } @@ -432,6 +440,10 @@ margin-left: var(--canon-spacing-2xl); } + .cu-ml-2xs { + margin-left: var(--canon-spacing-2xs); + } + .cu-ml-lg { margin-left: var(--canon-spacing-lg); } @@ -460,6 +472,10 @@ margin-right: var(--canon-spacing-2xl); } + .cu-mr-2xs { + margin-right: var(--canon-spacing-2xs); + } + .cu-mr-lg { margin-right: var(--canon-spacing-lg); } @@ -488,6 +504,10 @@ margin-top: var(--canon-spacing-2xl); } + .cu-mt-2xs { + margin-top: var(--canon-spacing-2xs); + } + .cu-mt-lg { margin-top: var(--canon-spacing-lg); } @@ -517,6 +537,11 @@ margin-right: var(--canon-spacing-2xl); } + .cu-mx-2xs { + margin-left: var(--canon-spacing-2xs); + margin-right: var(--canon-spacing-2xs); + } + .cu-mx-lg { margin-left: var(--canon-spacing-lg); margin-right: var(--canon-spacing-lg); @@ -552,6 +577,11 @@ margin-bottom: var(--canon-spacing-2xl); } + .cu-my-2xs { + margin-top: var(--canon-spacing-2xs); + margin-bottom: var(--canon-spacing-2xs); + } + .cu-my-lg { margin-top: var(--canon-spacing-lg); margin-bottom: var(--canon-spacing-lg); @@ -586,6 +616,10 @@ padding: var(--canon-spacing-2xl); } + .cu-p-2xs { + padding: var(--canon-spacing-2xs); + } + .cu-p-lg { padding: var(--canon-spacing-lg); } @@ -614,6 +648,10 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-pb-2xs { + padding-bottom: var(--canon-spacing-2xs); + } + .cu-pb-lg { padding-bottom: var(--canon-spacing-lg); } @@ -642,6 +680,10 @@ padding-left: var(--canon-spacing-2xl); } + .cu-pl-2xs { + padding-left: var(--canon-spacing-2xs); + } + .cu-pl-lg { padding-left: var(--canon-spacing-lg); } @@ -670,6 +712,10 @@ padding-right: var(--canon-spacing-2xl); } + .cu-pr-2xs { + padding-right: var(--canon-spacing-2xs); + } + .cu-pr-lg { padding-right: var(--canon-spacing-lg); } @@ -698,6 +744,10 @@ padding-top: var(--canon-spacing-2xl); } + .cu-pt-2xs { + padding-top: var(--canon-spacing-2xs); + } + .cu-pt-lg { padding-top: var(--canon-spacing-lg); } @@ -727,6 +777,11 @@ padding-right: var(--canon-spacing-2xl); } + .cu-px-2xs { + padding-left: var(--canon-spacing-2xs); + padding-right: var(--canon-spacing-2xs); + } + .cu-px-lg { padding-left: var(--canon-spacing-lg); padding-right: var(--canon-spacing-lg); @@ -762,6 +817,11 @@ padding-bottom: var(--canon-spacing-2xl); } + .cu-py-2xs { + padding-top: var(--canon-spacing-2xs); + padding-bottom: var(--canon-spacing-2xs); + } + .cu-py-lg { padding-top: var(--canon-spacing-lg); padding-bottom: var(--canon-spacing-lg);