*,
::after,
::before,
::backdrop,
::file-selector-button {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0
}
img,
picture,
video,
canvas,
svg {
display: block;
max-width: 100%
}
iframe {
border: none
}
ul,
ol,
menu {
list-style: none
}
a {
text-decoration: none;
color: inherit
}
button {
background-color: inherit;
border: none;
color: inherit;
font: inherit;
cursor: pointer
}
table {
border-collapse: collapse;
border-spacing: 0
}
:root {
accent-color: var(--primary-500);
color-scheme: light dark;
--brand-hue: 280;
--hue-red: 10;
--hue-rose: 330;
--hue-magenta: 300;
--hue-violet: 270;
--hue-blue: 240;
--hue-azure: 210;
--hue-cyan: 180;
--hue-spring: 150;
--hue-green: 120;
--hue-chartreuse: 90;
--hue-yellow: 60;
--hue-orange: 30;
--l-50: 0.98;
--l-100: 0.96;
--l-200: 0.90;
--l-300: 0.82;
--l-400: 0.70;
--l-500: 0.52;
--c-100: 0.02;
--c-200: 0.07;
--c-300: 0.11;
--c-400: 0.15;
--c-500: 0.13;
--white: light-dark(oklch(100% -2 0), oklch(28% 0.01 var(--brand-hue)));
--body-bg: light-dark(oklch(99% .002 var(--brand-hue)), oklch(2% .1 var(--brand-hue)));
--main-bg: light-dark(oklch(99% .002 var(--brand-hue)), oklch(2% .1 var(--brand-hue)));
@media (prefers-color-scheme:dark) {
--l-50: 0.24;
--l-100: 0.28;
--l-200: 0.36;
--l-300: 0.48;
--l-400: 0.56;
--l-500: 0.72;
--c-100: 0.04;
--c-200: 0.06;
--c-300: 0.09;
--c-400: 0.12;
--c-500: 0.11;
--checkmark: url("data:image/svg+xml,");
--indeterminate-checkmark: url('data:image/svg+xml,')
}
--primary-100:oklch(var(--l-100) calc(var(--c-100) * 1.12) var(--brand-hue));
--primary-200:oklch(var(--l-200) calc(var(--c-200) * 1.12) var(--brand-hue));
--primary-300:oklch(var(--l-300) calc(var(--c-300) * 1.12) var(--brand-hue));
--primary-400:oklch(var(--l-400) calc(var(--c-400) * 1.12) var(--brand-hue));
--primary-500:oklch(var(--l-500) calc(var(--c-500) * 1.12) var(--brand-hue));
--typography-100:light-dark(oklch(54% 0.01 var(--brand-hue)), oklch(66% 0.01 var(--brand-hue)));
--typography-200:light-dark(oklch(48% 0.01 var(--brand-hue)), oklch(70% 0.01 var(--brand-hue)));
--typography-300:light-dark(oklch(36% 0.01 var(--brand-hue)), oklch(86% 0.01 var(--brand-hue)));
--typography-400:light-dark(oklch(28% 0.01 var(--brand-hue)), oklch(94% 0.01 var(--brand-hue)));
--info-hue:260;
--info-100:oklch(var(--l-100) var(--c-100) var(--info-hue));
--info-200:oklch(var(--l-200) var(--c-200) var(--info-hue));
--info-300:oklch(var(--l-300) var(--c-300) var(--info-hue));
--info-400:oklch(var(--l-400) var(--c-400) var(--info-hue));
--info-500:oklch(var(--l-500) var(--c-500) var(--info-hue));
--success-hue:150;
--success-100:oklch(var(--l-100) var(--c-100) var(--success-hue));
--success-200:oklch(var(--l-200) var(--c-200) var(--success-hue));
--success-300:oklch(var(--l-300) var(--c-300) var(--success-hue));
--success-400:oklch(var(--l-400) var(--c-400) var(--success-hue));
--success-500:oklch(var(--l-500) var(--c-500) var(--success-hue));
--warning-hue:90;
--warning-100:oklch(var(--l-100) calc(var(--c-100) * 1.4) var(--warning-hue));
--warning-200:oklch(var(--l-200) calc(var(--c-200) * 1.3) var(--warning-hue));
--warning-300:oklch(var(--l-300) calc(var(--c-300) * 1.3) var(--warning-hue));
--warning-400:oklch(var(--l-400) calc(var(--c-400) * 1.4) var(--warning-hue));
--warning-500:oklch(var(--l-500) calc(var(--c-500) * 1.4) var(--warning-hue));
--danger-hue:26;
--danger-100:oklch(var(--l-100) var(--c-100) var(--danger-hue));
--danger-200:oklch(var(--l-200) var(--c-200) var(--danger-hue));
--danger-300:oklch(var(--l-300) var(--c-300) var(--danger-hue));
--danger-400:oklch(var(--l-400) var(--c-400) var(--danger-hue));
--danger-500:oklch(var(--l-500) var(--c-500) var(--danger-hue));
--surface-50:oklch(var(--l-50) calc(var(--c-100) * 0.3) var(--brand-hue));
--surface-100:oklch(var(--l-100) calc(var(--c-100) * 0.3) var(--brand-hue));
--surface-200:oklch(var(--l-200) calc(var(--c-100) * 0.5) var(--brand-hue));
--surface-300:oklch(var(--l-300) calc(var(--c-100) * 0.5) var(--brand-hue));
--surface-400:oklch(var(--l-400) calc(var(--c-100) * 0.5) var(--brand-hue));
--surface-500:oklch(var(--l-500) calc(var(--c-100) * 0.5) var(--brand-hue));
--red-100:oklch(var(--l-100) var(--c-100) var(--hue-red));
--red-200:oklch(var(--l-200) var(--c-200) var(--hue-red));
--red-300:oklch(var(--l-300) var(--c-300) var(--hue-red));
--red-400:oklch(var(--l-400) var(--c-400) var(--hue-red));
--red-500:oklch(var(--l-500) var(--c-500) var(--hue-red));
--rose-100:oklch(var(--l-100) var(--c-100) var(--hue-rose));
--rose-200:oklch(var(--l-200) var(--c-200) var(--hue-rose));
--rose-300:oklch(var(--l-300) var(--c-300) var(--hue-rose));
--rose-400:oklch(var(--l-400) var(--c-400) var(--hue-rose));
--rose-500:oklch(var(--l-500) var(--c-500) var(--hue-rose));
--magenta-100:oklch(var(--l-100) var(--c-100) var(--hue-magenta));
--magenta-200:oklch(var(--l-200) var(--c-200) var(--hue-magenta));
--magenta-300:oklch(var(--l-300) var(--c-300) var(--hue-magenta));
--magenta-400:oklch(var(--l-400) var(--c-400) var(--hue-magenta));
--magenta-500:oklch(var(--l-500) var(--c-500) var(--hue-magenta));
--violet-100:oklch(var(--l-100) var(--c-100) var(--hue-violet));
--violet-200:oklch(var(--l-200) var(--c-200) var(--hue-violet));
--violet-300:oklch(var(--l-300) var(--c-300) var(--hue-violet));
--violet-400:oklch(var(--l-400) var(--c-400) var(--hue-violet));
--violet-500:oklch(var(--l-500) var(--c-500) var(--hue-violet));
--blue-100:oklch(var(--l-100) var(--c-100) var(--hue-blue));
--blue-200:oklch(var(--l-200) var(--c-200) var(--hue-blue));
--blue-300:oklch(var(--l-300) var(--c-300) var(--hue-blue));
--blue-400:oklch(var(--l-400) var(--c-400) var(--hue-blue));
--blue-500:oklch(var(--l-500) var(--c-500) var(--hue-blue));
--azure-100:oklch(var(--l-100) var(--c-100) var(--hue-azure));
--azure-200:oklch(var(--l-200) var(--c-200) var(--hue-azure));
--azure-300:oklch(var(--l-300) var(--c-300) var(--hue-azure));
--azure-400:oklch(var(--l-400) var(--c-400) var(--hue-azure));
--azure-500:oklch(var(--l-500) var(--c-500) var(--hue-azure));
--cyan-100:oklch(var(--l-100) var(--c-100) var(--hue-cyan));
--cyan-200:oklch(var(--l-200) var(--c-200) var(--hue-cyan));
--cyan-300:oklch(var(--l-300) var(--c-300) var(--hue-cyan));
--cyan-400:oklch(var(--l-400) var(--c-400) var(--hue-cyan));
--cyan-500:oklch(var(--l-500) var(--c-500) var(--hue-cyan));
--spring-100:oklch(var(--l-100) var(--c-100) var(--hue-spring));
--spring-200:oklch(var(--l-200) var(--c-200) var(--hue-spring));
--spring-300:oklch(var(--l-300) var(--c-300) var(--hue-spring));
--spring-400:oklch(var(--l-400) var(--c-400) var(--hue-spring));
--spring-500:oklch(var(--l-500) var(--c-500) var(--hue-spring));
--green-100:oklch(var(--l-100) var(--c-100) var(--hue-green));
--green-200:oklch(var(--l-200) var(--c-200) var(--hue-green));
--green-300:oklch(var(--l-300) var(--c-300) var(--hue-green));
--green-400:oklch(var(--l-400) var(--c-400) var(--hue-green));
--green-500:oklch(var(--l-500) var(--c-500) var(--hue-green));
--chartreuse-100:oklch(var(--l-100) var(--c-100) var(--hue-chartreuse));
--chartreuse-200:oklch(var(--l-200) var(--c-200) var(--hue-chartreuse));
--chartreuse-300:oklch(var(--l-300) var(--c-300) var(--hue-chartreuse));
--chartreuse-400:oklch(var(--l-400) var(--c-400) var(--hue-chartreuse));
--chartreuse-500:oklch(var(--l-500) var(--c-500) var(--hue-chartreuse));
--yellow-100:oklch(var(--l-100) var(--c-100) var(--hue-yellow));
--yellow-200:oklch(var(--l-200) var(--c-200) var(--hue-yellow));
--yellow-300:oklch(var(--l-300) var(--c-300) var(--hue-yellow));
--yellow-400:oklch(var(--l-400) var(--c-400) var(--hue-yellow));
--yellow-500:oklch(var(--l-500) var(--c-500) var(--hue-yellow));
--orange-100:oklch(var(--l-100) var(--c-100) var(--hue-orange));
--orange-200:oklch(var(--l-200) var(--c-200) var(--hue-orange));
--orange-300:oklch(var(--l-300) var(--c-300) var(--hue-orange));
--orange-400:oklch(var(--l-400) var(--c-400) var(--hue-orange));
--orange-500:oklch(var(--l-500) var(--c-500) var(--hue-orange));
--slice-fill-01:var(--violet-400);
--slice-fill-02:var(--cyan-400);
--slice-fill-03:var(--orange-400);
--slice-fill-04:var(--magenta-400);
--slice-fill-05:var(--yellow-400);
--slice-fill-06:var(--azure-400);
--white:light-dark(oklch(100% 0 0), oklch(20% 0 0));
--black:light-dark(oklch(0% 0 0), oklch(100% 0 0));
--ps-ring-inset:inset;
--ps-ring-color:rgba(0, 0, 0, 0.5);
--ps-ring-offset-color:rgba(255, 255, 255, 0.5);
--ps-ring-offset-shadow:0 0 0 0 var(--ps-ring-offset-color);
--ps-ring-shadow:0 0 0 1px var(--ps-ring-color);
--ps-shadow:0 0 #0000;
--ps-ring-offset-width:0px;
--ps-inset-shadow:inset 0 0 0 0 rgba(0, 0, 0, 0);
--ps-inset-ring-shadow:inset 0 0 0 0 var(--ps-ring-color);
--ps-shadow-colored:rgba(0, 0, 0, 0.5);
--chevron-down:url("data:image/svg+xml,");
--checkmark:url("data:image/svg+xml,");
--indeterminate-checkmark:url('data:image/svg+xml,');
--inline-error:url("data:image/svg+xml,");
interpolate-size:allow-keywords
}
html[style*="color-scheme: light"] {
--l-50: 0.98;
--l-100: 0.96;
--l-200: 0.90;
--l-300: 0.82;
--l-400: 0.70;
--l-500: 0.52;
--c-100: 0.02;
--c-200: 0.07;
--c-300: 0.11;
--c-400: 0.15;
--c-500: 0.13
}
html[style*="color-scheme: dark"] {
--l-50: 0.24;
--l-100: 0.28;
--l-200: 0.36;
--l-300: 0.48;
--l-400: 0.56;
--l-500: 0.72;
--c-100: 0.04;
--c-200: 0.06;
--c-300: 0.09;
--c-400: 0.12;
--c-500: 0.11;
--checkmark: url("data:image/svg+xml,");
--indeterminate-checkmark: url('data:image/svg+xml,')
}
:root {
--icon-home: url('data:image/svg+xml,');
--icon-add: url('data:image/svg+xml,');
--icon-remove: url('data:image/svg+xml,');
--icon-edit: url('data:image/svg+xml,');
--icon-delete: url('data:image/svg+xml,');
--icon-undo: url('data:image/svg+xml,');
--icon-x: url('data:image/svg+xml,');
--icon-more: url('data:image/svg+xml,');
--icon-slash: url('data:image/svg+xml,');
--icon-backslash: url('data:image/svg+xml,');
--icon-archive: url('data:image/svg+xml,');
--icon-command: url('data:image/svg+xml,');
--icon-alert-circle: url('data:image/svg+xml,');
--icon-alert-circle-filled: url('data:image/svg+xml,');
--icon-alert-triangle: url('data:image/svg+xml,');
--icon-alert-triangle-filled: url('data:image/svg+xml,');
--icon-alert-octagon: url('data:image/svg+xml,');
--icon-alert-octagon-filled: url('data:image/svg+xml,');
--icon-help-circle: url('data:image/svg+xml,');
--icon-help-circle-filled: url('data:image/svg+xml,');
--icon-info-circle: url('data:image/svg+xml,');
--icon-info-circle-filled: url('data:image/svg+xml,');
--icon-arrow-left: url('data:image/svg+xml,');
--icon-trending-up: url('data:image/svg+xml,');
--icon-trending-down: url('data:image/svg+xml,');
--icon-apps: url('data:image/svg+xml,');
--icon-category: url('data:image/svg+xml,');
--icon-bell: url('data:image/svg+xml,');
--icon-bell-filled: url('data:image/svg+xml,');
--icon-calendar: url('data:image/svg+xml,');
--icon-camera: url('data:image/svg+xml,');
--icon-image: url('data:image/svg+xml,');
--icon-mic: url('data:image/svg+xml,');
--icon-inbox: url('data:image/svg+xml,');
--icon-check: url('data:image/svg+xml,');
--icon-check-circle: url('data:image/svg+xml,');
--icon-check-circle-filled: url('data:image/svg+xml,');
--icon-chevron-left: url('data:image/svg+xml,');
--icon-clock: url('data:image/svg+xml,');
--icon-cloud: url('data:image/svg+xml,');
--icon-columns: url('data:image/svg+xml,');
--icon-dashboard: url('data:image/svg+xml,');
--icon-layout: url('data:image/svg+xml,');
--icon-layout-grid: url('data:image/svg+xml,');
--icon-layout-columns: url('data:image/svg+xml,');
--icon-layout-sidebar: url('data:image/svg+xml,');
--icon-desk: url('data:image/svg+xml,');
--icon-layout-dashboard: url('data:image/svg+xml,');
--icon-window-maximize: url('data:image/svg+xml,');
--icon-window-minimize: url('data:image/svg+xml,');
--icon-template: url('data:image/svg+xml,');
--icon-list: url('data:image/svg+xml,');
--icon-lock: url('data:image/svg+xml,');
--icon-unlock: url('data:image/svg+xml,');
--icon-brush: url('data:image/svg+xml,');
--icon-writing: url('data:image/svg+xml,');
--icon-code: url('data:image/svg+xml,');
--icon-cut: url('data:image/svg+xml,');
--icon-copy: url('data:image/svg+xml,');
--icon-paste: url('data:image/svg+xml,');
--icon-subtask: url('data:image/svg+xml,');
--icon-focus: url('data:image/svg+xml,');
--icon-grip-vertical: url('data:image/svg+xml,');
--icon-briefcase: url('data:image/svg+xml,');
--icon-cash: url('data:image/svg+xml,');
--icon-cash-banknote: url('data:image/svg+xml,');
--icon-credit-card: url('data:image/svg+xml,');
--icon-nfc: url('data:image/svg+xml,');
--icon-building-bank: url('data:image/svg+xml,');
--icon-cheque: url('data:image/svg+xml,');
--icon-transfer: url('data:image/svg+xml,');
--icon-download: url('data:image/svg+xml,');
--icon-link: url('data:image/svg+xml,');
--icon-external-link: url('data:image/svg+xml,');
--icon-eye: url('data:image/svg+xml,');
--icon-eye-off: url('data:image/svg+xml,');
--icon-checklist: url('data:image/svg+xml,');
--icon-file: url('data:image/svg+xml,');
--icon-file-text: url('data:image/svg+xml,');
--icon-notebook: url('data:image/svg+xml,');
--icon-filter: url('data:image/svg+xml,');
--icon-adjustments: url('data:image/svg+xml,');
--icon-adjustments-horizontal: url('data:image/svg+xml,');
--icon-flag: url('data:image/svg+xml,');
--icon-folder: url('data:image/svg+xml,');
--icon-paperclip: url('data:image/svg+xml,');
--icon-play: url('data:image/svg+xml,');
--icon-play-filled: url('data:image/svg+xml,');
--icon-pause: url('data:image/svg+xml,');
--icon-pause-filled: url('data:image/svg+xml,');
--icon-stop: url('data:image/svg+xml,');
--icon-stop-filled: url('data:image/svg+xml,');
--icon-phone: url('data:image/svg+xml,');
--icon-printer: url('data:image/svg+xml,');
--icon-refresh: url('data:image/svg+xml,');
--icon-repeat: url('data:image/svg+xml,');
--icon-search: url('data:image/svg+xml,');
--icon-send: url('data:image/svg+xml,');
--icon-settings: url('data:image/svg+xml,');
--icon-share: url('data:image/svg+xml,');
--icon-shopping-cart: url('data:image/svg+xml,');
--icon-sign-in: url('data:image/svg+xml,');
--icon-sign-out: url('data:image/svg+xml,');
--icon-terminal: url('data:image/svg+xml,');
--icon-sort-ascending: url('data:image/svg+xml,');
--icon-sort-descending: url('data:image/svg+xml,');
--icon-star: url('data:image/svg+xml,');
--icon-star-filled: url('data:image/svg+xml,');
--icon-chart-bar: url('data:image/svg+xml,');
--icon-chart-donut: url('data:image/svg+xml,');
--icon-chart-pie: url('data:image/svg+xml,');
--icon-table: url('data:image/svg+xml,');
--icon-tag: url('data:image/svg+xml,');
--icon-hash: url('data:image/svg+xml,');
--icon-heart: url('data:image/svg+xml,');
--icon-calculator: url('data:image/svg+xml,');
--icon-tool: url('data:image/svg+xml,');
--icon-tools: url('data:image/svg+xml,');
--icon-sparkles: url('data:image/svg+xml,');
--icon-truck: url('data:image/svg+xml,');
--icon-car: url('data:image/svg+xml,');
--icon-id: url('data:image/svg+xml,');
--icon-user: url('data:image/svg+xml,');
--icon-users: url('data:image/svg+xml,');
--icon-users-group: url('data:image/svg+xml,');
--icon-mail: url('data:image/svg+xml,');
--icon-map: url('data:image/svg+xml,');
--icon-map-pin: url('data:image/svg+xml,');
--icon-menu: url('data:image/svg+xml,');
--icon-message: url('data:image/svg+xml,');
--icon-message-dots: url('data:image/svg+xml,');
--icon-message-circle: url('data:image/svg+xml,');
--icon-receipt: url('data:image/svg+xml,');
--icon-receipt-refund: url('data:image/svg+xml,');
--icon-receipt-tax: url('data:image/svg+xml,');
--icon-wallet: url('data:image/svg+xml,');
--icon-address-book: url('data:image/svg+xml,');
--icon-note: url('data:image/svg+xml,');
--icon-notes: url('data:image/svg+xml,');
--icon-world: url('data:image/svg+xml,');
--icon-building-skyscraper: url('data:image/svg+xml,');
--icon-building: url('data:image/svg+xml,');
--icon-store: url('data:image/svg+xml,');
--icon-brand-abstract: url('data:image/svg+xml,');
--icon-package: url('data:image/svg+xml,');
--icon-sitemap: url('data:image/svg+xml,');
--icon-hierarchy: url('data:image/svg+xml,');
--icon-hierarchy-3: url('data:image/svg+xml,');
--icon-topology-star: url('data:image/svg+xml,');
--icon-atom-2: url('data:image/svg+xml,');
--icon-desktop: url('data:image/svg+xml,');
--icon-moon: url('data:image/svg+xml,');
--icon-sun: url('data:image/svg+xml,')
}
html {
scroll-behavior: smooth;
scrollbar-gutter: stable
}
body {
font-family: "Manrope", sans-serif;
font-weight: 500;
color: var(--typography-300);
background-color: var(--body-bg);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-size: 16px;
line-height: 1.5;
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: 300ms;
container: body / inline-size;
button,
input,
optgroup,
select,
textarea {
padding: .5rem .75rem;
color: var(--typography-300)
}
}
main {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
background-color: var(--main-bg);
container: main / inline-size
}
@media (prefers-reduced-motion:no-preference) {
html,
:has(:target) {
scroll-behavior: smooth
}
}
:focus-visible {
outline-color: var(--primary-500);
outline-offset: 0;
transition: all 0.15s ease
}
:is(::-webkit-calendar-picker-indicator, ::-webkit-clear-button, ::-webkit-inner-spin-button, ::-webkit-outer-spin-button) {
color: var(--primary-500)
}
@font-face {
font-family: "Manrope";
src: url(../fonts/Manrope-VariableFont_wght.woff2) format("woff2");
font-weight: 400 900
}
h1,
h2,
h3,
h4 {
font-weight: 550;
color: var(--typography-400);
text-wrap: balance
}
h5,
h6 {
font-weight: 600
}
h1 {
font-size: 1.875rem;
line-height: 2.5rem;
letter-spacing: -.025em
}
h2 {
font-size: 1.5rem;
line-height: 2rem;
letter-spacing: -.025em
}
h3 {
font-size: 1.25rem;
line-height: 1.75rem;
letter-spacing: -.025em
}
h4 {
font-size: 1.125rem;
line-height: 1.75rem
}
h5,
h6 {
font-size: 1rem;
line-height: 1.5rem
}
p {
text-wrap: pretty
}
mark,
del,
ins {
border-radius: .125rem;
color: var(--typography-300)
}
mark {
background-color: hsl(46 97% 65% / .5)
}
del {
background-color: var(--danger-100);
text-decoration-color: var(--danger-300)
}
ins {
background-color: var(--success-100);
text-decoration-color: var(--success-300);
text-underline-offset: .25rem
}
kbd:not(:has(kbd, samp)) {
color: var(--typography-400);
background: var(--surface-100);
border-radius: .25rem;
padding-inline: .25rem;
box-shadow: 1px 1px 0 2px var(--surface-300)
}
blockquote {
padding: .5rem 1rem;
border-radius: .25rem;
background-color: var(--info-100);
border-left: 4px solid var(--info-500)
}
hr {
border: none;
height: 0;
border-top: 1px solid var(--surface-300);
opacity: 50%
}
[class^="icon-"] {
display: block;
width: 1.5rem;
height: 1.5rem;
background-color: currentColor;
flex-shrink: 0;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain
}
.icon-home {
mask-image: var(--icon-home);
-webkit-mask-image: var(--icon-home)
}
.icon-add {
mask-image: var(--icon-add);
-webkit-mask-image: var(--icon-add)
}
.icon-remove {
mask-image: var(--icon-remove);
-webkit-mask-image: var(--icon-remove)
}
.icon-edit {
mask-image: var(--icon-edit);
-webkit-mask-image: var(--icon-edit)
}
.icon-delete {
mask-image: var(--icon-delete);
-webkit-mask-image: var(--icon-delete)
}
.icon-undo {
mask-image: var(--icon-undo);
-webkit-mask-image: var(--icon-undo)
}
.icon-x {
mask-image: var(--icon-x);
-webkit-mask-image: var(--icon-x)
}
.icon-more {
mask-image: var(--icon-more);
-webkit-mask-image: var(--icon-more)
}
.icon-slash {
mask-image: var(--icon-slash);
-webkit-mask-image: var(--icon-slash)
}
.icon-backslash {
mask-image: var(--icon-backslash);
-webkit-mask-image: var(--icon-backslash)
}
.icon-archive {
mask-image: var(--icon-archive);
-webkit-mask-image: var(--icon-archive)
}
.icon-command {
mask-image: var(--icon-command);
-webkit-mask-image: var(--icon-command)
}
.icon-alert-circle {
mask-image: var(--icon-alert-circle);
-webkit-mask-image: var(--icon-alert-circle)
}
.icon-alert-circle-filled {
mask-image: var(--icon-alert-circle-filled);
-webkit-mask-image: var(--icon-alert-circle-filled)
}
.icon-alert-triangle {
mask-image: var(--icon-alert-triangle);
-webkit-mask-image: var(--icon-alert-triangle)
}
.icon-alert-triangle-filled {
mask-image: var(--icon-alert-triangle-filled);
-webkit-mask-image: var(--icon-alert-triangle-filled)
}
.icon-alert-octagon {
mask-image: var(--icon-alert-octagon);
-webkit-mask-image: var(--icon-alert-octagon)
}
.icon-alert-octagon-filled {
mask-image: var(--icon-alert-octagon-filled);
-webkit-mask-image: var(--icon-alert-octagon-filled)
}
.icon-help-circle {
mask-image: var(--icon-help-circle);
-webkit-mask-image: var(--icon-help-circle)
}
.icon-help-circle-filled {
mask-image: var(--icon-help-circle-filled);
-webkit-mask-image: var(--icon-help-circle-filled)
}
.icon-info-circle {
mask-image: var(--icon-info-circle);
-webkit-mask-image: var(--icon-info-circle)
}
.icon-info-circle-filled {
mask-image: var(--icon-info-circle-filled);
-webkit-mask-image: var(--icon-info-circle-filled)
}
.icon-arrow-left {
mask-image: var(--icon-arrow-left);
-webkit-mask-image: var(--icon-arrow-left)
}
.icon-arrow-right {
mask-image: var(--icon-arrow-left);
-webkit-mask-image: var(--icon-arrow-left);
rotate: 180deg
}
.icon-arrow-up {
mask-image: var(--icon-arrow-left);
-webkit-mask-image: var(--icon-arrow-left);
rotate: 90deg
}
.icon-arrow-down {
mask-image: var(--icon-arrow-left);
-webkit-mask-image: var(--icon-arrow-left);
rotate: -90deg
}
.icon-trending-up {
mask-image: var(--icon-trending-up);
-webkit-mask-image: var(--icon-trending-up)
}
.icon-trending-down {
mask-image: var(--icon-trending-down);
-webkit-mask-image: var(--icon-trending-down)
}
.icon-apps {
mask-image: var(--icon-apps);
-webkit-mask-image: var(--icon-apps)
}
.icon-category {
mask-image: var(--icon-category);
-webkit-mask-image: var(--icon-category)
}
.icon-bell {
mask-image: var(--icon-bell);
-webkit-mask-image: var(--icon-bell)
}
.icon-bell-filled {
mask-image: var(--icon-bell-filled);
-webkit-mask-image: var(--icon-bell-filled)
}
.icon-calendar {
mask-image: var(--icon-calendar);
-webkit-mask-image: var(--icon-calendar)
}
.icon-camera {
mask-image: var(--icon-camera);
-webkit-mask-image: var(--icon-camera)
}
.icon-image {
mask-image: var(--icon-image);
-webkit-mask-image: var(--icon-image)
}
.icon-mic {
mask-image: var(--icon-mic);
-webkit-mask-image: var(--icon-mic)
}
.icon-inbox {
mask-image: var(--icon-inbox);
-webkit-mask-image: var(--icon-inbox)
}
.icon-check {
mask-image: var(--icon-check);
-webkit-mask-image: var(--icon-check)
}
.icon-check-circle {
mask-image: var(--icon-check-circle);
-webkit-mask-image: var(--icon-check-circle)
}
.icon-check-circle-filled {
mask-image: var(--icon-check-circle-filled);
-webkit-mask-image: var(--icon-check-circle-filled)
}
.icon-chevron-left {
mask-image: var(--icon-chevron-left);
-webkit-mask-image: var(--icon-chevron-left)
}
.icon-chevron-right {
mask-image: var(--icon-chevron-left);
-webkit-mask-image: var(--icon-chevron-left);
rotate: 180deg
}
.icon-chevron-up {
mask-image: var(--icon-chevron-left);
-webkit-mask-image: var(--icon-chevron-left);
rotate: 90deg
}
.icon-chevron-down {
mask-image: var(--icon-chevron-left);
-webkit-mask-image: var(--icon-chevron-left);
rotate: -90deg
}
.icon-clock {
mask-image: var(--icon-clock);
-webkit-mask-image: var(--icon-clock)
}
.icon-cloud {
mask-image: var(--icon-cloud);
-webkit-mask-image: var(--icon-cloud)
}
.icon-columns {
mask-image: var(--icon-columns);
-webkit-mask-image: var(--icon-columns)
}
.icon-dashboard {
mask-image: var(--icon-dashboard);
-webkit-mask-image: var(--icon-dashboard)
}
.icon-layout {
mask-image: var(--icon-layout);
-webkit-mask-image: var(--icon-layout)
}
.icon-layout-grid {
mask-image: var(--icon-layout-grid);
-webkit-mask-image: var(--icon-layout-grid)
}
.icon-layout-columns {
mask-image: var(--icon-layout-columns);
-webkit-mask-image: var(--icon-layout-columns)
}
.icon-list {
mask-image: var(--icon-list);
-webkit-mask-image: var(--icon-list)
}
.icon-lock {
mask-image: var(--icon-lock);
-webkit-mask-image: var(--icon-lock)
}
.icon-unlock {
mask-image: var(--icon-unlock);
-webkit-mask-image: var(--icon-unlock)
}
.icon-layout-sidebar {
mask-image: var(--icon-layout-sidebar);
-webkit-mask-image: var(--icon-layout-sidebar)
}
.icon-desk {
mask-image: var(--icon-desk);
-webkit-mask-image: var(--icon-desk)
}
.icon-layout-dashboard {
mask-image: var(--icon-layout-dashboard);
-webkit-mask-image: var(--icon-layout-dashboard)
}
.icon-window-maximize {
mask-image: var(--icon-window-maximize);
-webkit-mask-image: var(--icon-window-maximize)
}
.icon-window-minimize {
mask-image: var(--icon-window-minimize);
-webkit-mask-image: var(--icon-window-minimize)
}
.icon-template {
mask-image: var(--icon-template);
-webkit-mask-image: var(--icon-template)
}
.icon-brush {
mask-image: var(--icon-brush);
-webkit-mask-image: var(--icon-brush)
}
.icon-writing {
mask-image: var(--icon-writing);
-webkit-mask-image: var(--icon-writing)
}
.icon-code {
mask-image: var(--icon-code);
-webkit-mask-image: var(--icon-code)
}
.icon-cut {
mask-image: var(--icon-cut);
-webkit-mask-image: var(--icon-cut)
}
.icon-copy {
mask-image: var(--icon-copy);
-webkit-mask-image: var(--icon-copy)
}
.icon-paste {
mask-image: var(--icon-paste);
-webkit-mask-image: var(--icon-paste)
}
.icon-subtask {
mask-image: var(--icon-subtask);
-webkit-mask-image: var(--icon-subtask)
}
.icon-focus {
mask-image: var(--icon-focus);
-webkit-mask-image: var(--icon-focus)
}
.icon-grip-vertical {
mask-image: var(--icon-grip-vertical);
-webkit-mask-image: var(--icon-grip-vertical)
}
.icon-grip-horizontal {
mask-image: var(--icon-grip-vertical);
-webkit-mask-image: var(--icon-grip-vertical);
rotate: 90deg
}
.icon-briefcase {
mask-image: var(--icon-briefcase);
-webkit-mask-image: var(--icon-briefcase)
}
.icon-cash {
mask-image: var(--icon-cash);
-webkit-mask-image: var(--icon-cash)
}
.icon-cash-banknote {
mask-image: var(--icon-cash-banknote);
-webkit-mask-image: var(--icon-cash-banknote)
}
.icon-credit-card {
mask-image: var(--icon-credit-card);
-webkit-mask-image: var(--icon-credit-card)
}
.icon-nfc {
mask-image: var(--icon-nfc);
-webkit-mask-image: var(--icon-nfc)
}
.icon-building-bank {
mask-image: var(--icon-building-bank);
-webkit-mask-image: var(--icon-building-bank)
}
.icon-cheque {
mask-image: var(--icon-cheque);
-webkit-mask-image: var(--icon-cheque)
}
.icon-transfer {
mask-image: var(--icon-transfer);
-webkit-mask-image: var(--icon-transfer)
}
.icon-download {
mask-image: var(--icon-download);
-webkit-mask-image: var(--icon-download)
}
.icon-upload {
mask-image: var(--icon-download);
-webkit-mask-image: var(--icon-download);
rotate: 180deg
}
.icon-link {
mask-image: var(--icon-link);
-webkit-mask-image: var(--icon-link)
}
.icon-external-link {
mask-image: var(--icon-external-link);
-webkit-mask-image: var(--icon-external-link)
}
.icon-eye {
mask-image: var(--icon-eye);
-webkit-mask-image: var(--icon-eye)
}
.icon-eye-off {
mask-image: var(--icon-eye-off);
-webkit-mask-image: var(--icon-eye-off)
}
.icon-checklist {
mask-image: var(--icon-checklist);
-webkit-mask-image: var(--icon-checklist)
}
.icon-file {
mask-image: var(--icon-file);
-webkit-mask-image: var(--icon-file)
}
.icon-file-text {
mask-image: var(--icon-file-text);
-webkit-mask-image: var(--icon-file-text)
}
.icon-notebook {
mask-image: var(--icon-notebook);
-webkit-mask-image: var(--icon-notebook)
}
.icon-filter {
mask-image: var(--icon-filter);
-webkit-mask-image: var(--icon-filter)
}
.icon-adjustments {
mask-image: var(--icon-adjustments);
-webkit-mask-image: var(--icon-adjustments)
}
.icon-adjustments-horizontal {
mask-image: var(--icon-adjustments-horizontal);
-webkit-mask-image: var(--icon-adjustments-horizontal)
}
.icon-flag {
mask-image: var(--icon-flag);
-webkit-mask-image: var(--icon-flag)
}
.icon-folder {
mask-image: var(--icon-folder);
-webkit-mask-image: var(--icon-folder)
}
.icon-paperclip {
mask-image: var(--icon-paperclip);
-webkit-mask-image: var(--icon-paperclip)
}
.icon-play {
mask-image: var(--icon-play);
-webkit-mask-image: var(--icon-play)
}
.icon-play-filled {
mask-image: var(--icon-play-filled);
-webkit-mask-image: var(--icon-play-filled)
}
.icon-pause {
mask-image: var(--icon-pause);
-webkit-mask-image: var(--icon-pause)
}
.icon-pause-filled {
mask-image: var(--icon-pause-filled);
-webkit-mask-image: var(--icon-pause-filled)
}
.icon-stop-filled {
mask-image: var(--icon-stop-filled);
-webkit-mask-image: var(--icon-stop-filled)
}
.icon-stop {
mask-image: var(--icon-stop);
-webkit-mask-image: var(--icon-stop)
}
.icon-phone {
mask-image: var(--icon-phone);
-webkit-mask-image: var(--icon-phone)
}
.icon-printer {
mask-image: var(--icon-printer);
-webkit-mask-image: var(--icon-printer)
}
.icon-refresh {
mask-image: var(--icon-refresh);
-webkit-mask-image: var(--icon-refresh)
}
.icon-repeat {
mask-image: var(--icon-repeat);
-webkit-mask-image: var(--icon-repeat)
}
.icon-search {
mask-image: var(--icon-search);
-webkit-mask-image: var(--icon-search)
}
.icon-send {
mask-image: var(--icon-send);
-webkit-mask-image: var(--icon-send)
}
.icon-settings {
mask-image: var(--icon-settings);
-webkit-mask-image: var(--icon-settings)
}
.icon-share {
mask-image: var(--icon-share);
-webkit-mask-image: var(--icon-share)
}
.icon-shopping-cart {
mask-image: var(--icon-shopping-cart);
-webkit-mask-image: var(--icon-shopping-cart)
}
.icon-sign-in {
mask-image: var(--icon-sign-in);
-webkit-mask-image: var(--icon-sign-in)
}
.icon-sign-out {
mask-image: var(--icon-sign-out);
-webkit-mask-image: var(--icon-sign-out)
}
.icon-terminal {
mask-image: var(--icon-terminal);
-webkit-mask-image: var(--icon-terminal)
}
.icon-sort-ascending {
mask-image: var(--icon-sort-ascending);
-webkit-mask-image: var(--icon-sort-ascending)
}
.icon-sort-descending {
mask-image: var(--icon-sort-descending);
-webkit-mask-image: var(--icon-sort-descending)
}
.icon-star {
mask-image: var(--icon-star);
-webkit-mask-image: var(--icon-star)
}
.icon-star-filled {
mask-image: var(--icon-star-filled);
-webkit-mask-image: var(--icon-star-filled)
}
.icon-chart-bar {
mask-image: var(--icon-chart-bar);
-webkit-mask-image: var(--icon-chart-bar)
}
.icon-chart-donut {
mask-image: var(--icon-chart-donut);
-webkit-mask-image: var(--icon-chart-donut)
}
.icon-chart-pie {
mask-image: var(--icon-chart-pie);
-webkit-mask-image: var(--icon-chart-pie)
}
.icon-table {
mask-image: var(--icon-table);
-webkit-mask-image: var(--icon-table)
}
.icon-tag {
mask-image: var(--icon-tag);
-webkit-mask-image: var(--icon-tag)
}
.icon-hash {
mask-image: var(--icon-hash);
-webkit-mask-image: var(--icon-hash)
}
.icon-heart {
mask-image: var(--icon-heart);
-webkit-mask-image: var(--icon-heart)
}
.icon-calculator {
mask-image: var(--icon-calculator);
-webkit-mask-image: var(--icon-calculator)
}
.icon-tool {
mask-image: var(--icon-tool);
-webkit-mask-image: var(--icon-tool)
}
.icon-tools {
mask-image: var(--icon-tools);
-webkit-mask-image: var(--icon-tools)
}
.icon-sparkles {
mask-image: var(--icon-sparkles);
-webkit-mask-image: var(--icon-sparkles)
}
.icon-truck {
mask-image: var(--icon-truck);
-webkit-mask-image: var(--icon-truck)
}
.icon-car {
mask-image: var(--icon-car);
-webkit-mask-image: var(--icon-car)
}
.icon-id {
mask-image: var(--icon-id);
-webkit-mask-image: var(--icon-id)
}
.icon-user {
mask-image: var(--icon-user);
-webkit-mask-image: var(--icon-user)
}
.icon-users {
mask-image: var(--icon-users);
-webkit-mask-image: var(--icon-users)
}
.icon-users-group {
mask-image: var(--icon-users-group);
-webkit-mask-image: var(--icon-users-group)
}
.icon-mail {
mask-image: var(--icon-mail);
-webkit-mask-image: var(--icon-mail)
}
.icon-map {
mask-image: var(--icon-map);
-webkit-mask-image: var(--icon-map)
}
.icon-map-pin {
mask-image: var(--icon-map-pin);
-webkit-mask-image: var(--icon-map-pin)
}
.icon-menu {
mask-image: var(--icon-menu);
-webkit-mask-image: var(--icon-menu)
}
.icon-message {
mask-image: var(--icon-message);
-webkit-mask-image: var(--icon-message)
}
.icon-message-dots {
mask-image: var(--icon-message-dots);
-webkit-mask-image: var(--icon-message-dots)
}
.icon-message-circle {
mask-image: var(--icon-message-circle);
-webkit-mask-image: var(--icon-message-circle)
}
.icon-receipt {
mask-image: var(--icon-receipt);
-webkit-mask-image: var(--icon-receipt)
}
.icon-receipt-refund {
mask-image: var(--icon-receipt-refund);
-webkit-mask-image: var(--icon-receipt-refund)
}
.icon-receipt-tax {
mask-image: var(--icon-receipt-tax);
-webkit-mask-image: var(--icon-receipt-tax)
}
.icon-wallet {
mask-image: var(--icon-wallet);
-webkit-mask-image: var(--icon-wallet)
}
.icon-address-book {
mask-image: var(--icon-address-book);
-webkit-mask-image: var(--icon-address-book)
}
.icon-note {
mask-image: var(--icon-note);
-webkit-mask-image: var(--icon-note)
}
.icon-notes {
mask-image: var(--icon-notes);
-webkit-mask-image: var(--icon-notes)
}
.icon-world {
mask-image: var(--icon-world);
-webkit-mask-image: var(--icon-world)
}
.icon-building-skyscraper {
mask-image: var(--icon-building-skyscraper);
-webkit-mask-image: var(--icon-building-skyscraper)
}
.icon-building {
mask-image: var(--icon-building);
-webkit-mask-image: var(--icon-building)
}
.icon-store {
mask-image: var(--icon-store);
-webkit-mask-image: var(--icon-store)
}
.icon-brand-abstract {
mask-image: var(--icon-brand-abstract);
-webkit-mask-image: var(--icon-brand-abstract)
}
.icon-package {
mask-image: var(--icon-package);
-webkit-mask-image: var(--icon-package)
}
.icon-sitemap {
mask-image: var(--icon-sitemap);
-webkit-mask-image: var(--icon-sitemap)
}
.icon-hierarchy {
mask-image: var(--icon-hierarchy);
-webkit-mask-image: var(--icon-hierarchy)
}
.icon-hierarchy-3 {
mask-image: var(--icon-hierarchy-3);
-webkit-mask-image: var(--icon-hierarchy-3)
}
.icon-topology-star {
mask-image: var(--icon-topology-star);
-webkit-mask-image: var(--icon-topology-star)
}
.icon-atom-2 {
mask-image: var(--icon-atom-2);
-webkit-mask-image: var(--icon-atom-2)
}
.icon-desktop {
mask-image: var(--icon-desktop);
-webkit-mask-image: var(--icon-desktop)
}
.icon-moon {
mask-image: var(--icon-moon);
-webkit-mask-image: var(--icon-moon)
}
.icon-sun {
mask-image: var(--icon-sun);
-webkit-mask-image: var(--icon-sun)
}
a {
color: var(--primary-500);
&.btn {
display: inline-block
}
}
.btn {
position: relative;
cursor: pointer;
width: fit-content;
height: fit-content;
border-radius: .25rem;
padding: .5rem 1rem;
text-decoration-line: none;
color: inherit;
&:hover {
background-color: var(--surface-100);
transition: all 0.3s ease
}
&.primary,
&.soft,
&.bordered,
&.solid,
&.icon-only,
&.icon-left,
&.icon-right {
border-radius: 1.25rem;
&:active {
scale: .97;
transition: all 0.15s cubic-bezier(.4, 0, .2, 1)
}
&.rounded-e-none {
border-start-end-radius: 0;
border-end-end-radius: 0
}
&.rounded-s-none {
border-start-start-radius: 0;
border-end-start-radius: 0
}
}
&.soft {
font-weight: 550;
color: var(--typography-200);
background-color: var(--surface-100);
white-space: nowrap;
&:hover {
background-color: var(--surface-200)
}
}
&.bordered {
font-weight: 550;
color: var(--typography-200);
box-shadow: 0 0 0 1px var(--surface-400);
white-space: nowrap
}
&.solid {
font-weight: 600
}
&.primary {
font-weight: 600;
color: var(--primary-500);
white-space: nowrap;
&:hover {
background-color: var(--primary-100)
}
&.soft {
background-color: var(--primary-100);
&:hover {
background-color: var(--primary-200)
}
}
&.bordered {
box-shadow: 0 0 0 1px var(--primary-500)
}
&.solid {
color: var(--primary-100);
background-color: var(--primary-500);
&:hover {
background-color: oklch(calc(var(--l-500) - 0.05) var(--c-500) var(--brand-hue))
}
&:focus-visible {
outline-color: var(--primary-500)
}
}
}
&.info {
color: var(--info-500);
white-space: nowrap;
&:hover {
background-color: var(--info-100)
}
&.soft {
background-color: var(--info-100);
&:hover {
background-color: var(--info-200)
}
}
&.bordered {
box-shadow: 0 0 0 1px var(--info-500)
}
&.solid {
color: var(--info-100);
background-color: var(--info-500);
&:hover {
background-color: oklch(calc(var(--l-500) - 0.05) var(--c-500) var(--info-hue))
}
}
}
&.success {
color: var(--success-500);
white-space: nowrap;
&:hover {
background-color: var(--success-100)
}
&.soft {
background-color: var(--success-100);
&:hover {
background-color: var(--success-200)
}
}
&.bordered {
box-shadow: 0 0 0 1px var(--success-500)
}
&.solid {
color: var(--success-100);
background-color: var(--success-500);
&:hover {
background-color: oklch(calc(var(--l-500) - 0.05) var(--c-500) var(--success-hue))
}
}
}
&.warning {
color: var(--warning-500);
white-space: nowrap;
&:hover {
background-color: var(--warning-100)
}
&.soft {
background-color: var(--warning-100);
&:hover {
background-color: var(--warning-200)
}
}
&.bordered {
box-shadow: 0 0 0 1px var(--warning-500)
}
&.solid {
color: var(--warning-100);
background-color: var(--warning-500);
&:hover {
background-color: oklch(calc(var(--l-500) - 0.05) var(--c-500) var(--warning-hue))
}
}
}
&.danger {
color: var(--danger-500);
white-space: nowrap;
&:hover {
background-color: var(--danger-100)
}
&.soft {
background-color: var(--danger-100);
&:hover {
background-color: var(--danger-200)
}
}
&.bordered {
box-shadow: 0 0 0 1px var(--danger-500)
}
&.solid {
color: var(--danger-100);
background-color: var(--danger-500);
&:hover {
background-color: oklch(calc(var(--l-500) - 0.05) var(--c-500) var(--danger-hue))
}
}
}
&.icon-only {
padding: .5rem;
&:hover {
color: var(--primary-500);
background-color: var(--primary-100)
}
}
&.icon-left {
display: inline-flex;
align-items: center;
gap: .5rem;
white-space: nowrap
}
&.icon-top {
display: inline-flex;
flex-direction: column;
align-items: center
}
&.icon-right {
display: inline-flex;
flex-direction: row-reverse;
align-items: center;
gap: .5rem;
white-space: nowrap
}
&.small {
padding: .25rem .5rem;
font-size: .875rem;
line-height: 1.25rem;
gap: .25rem;
[class^="icon-"] {
width: .875rem;
height: .875rem;
opacity: .75;
margin-top: .125rem
}
}
}
form {
position: relative;
display: flex;
flex-direction: column;
background-color: inherit;
container: inline-size;
@container (max-width:640px) {
.card-base {
border-radius: 0;
box-shadow: none
}
}
>header {
display: flex;
padding: .5rem 1rem;
gap: 1rem;
justify-content: space-between;
align-items: center;
background-color: inherit
}
>section {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem
}
>footer {
padding: .5rem 1rem;
display: flex;
gap: 1rem;
justify-content: space-between;
align-items: center;
background-color: inherit
}
}
form.processing * {
pointer-events: none;
opacity: 50%;
filter: blur(2px)
}
form.processing::before {
position: absolute;
top: calc(50% + 1rem);
left: calc(50% - 2.5rem);
z-index: 51;
content: "Processing..."
}
form.processing::after {
content: "";
position: absolute;
top: calc(50% - 3rem);
left: calc(50% - 1.5rem);
width: 3rem;
height: 3rem;
border-radius: 50%;
border: .25rem solid var(--surface-200);
border-top-color: var(--primary-500);
animation: form-processing-spin 1s linear infinite;
z-index: 52
}
@keyframes form-processing-spin {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
label {
position: relative;
display: flex;
flex-direction: column;
gap: .5rem;
color: var(--typography-300);
&:has(input[type="checkbox"], [type="radio"]) {
flex-direction: row;
gap: 1rem
}
:has(input[type="password"]+button.toggle-password) input[type="password"],
label:has(input[type="text"]+button.toggle-password) input[type="text"] {
padding-right: 4.75rem
}
input[type="password"]+button.toggle-password,
input[type="text"]+button.toggle-password {
position: absolute;
right: 0;
top: 2rem;
background-color: var(--surface-100);
border-left: 1px solid var(--surface-300);
border-start-start-radius: 0;
border-end-start-radius: 0;
&:hover {
background-color: var(--surface-100)
}
}
input~.input-prefix,
input~.input-suffix {
position: absolute;
top: 2.6rem;
color: var(--typography-200);
font-size: .875rem;
line-height: 1.25rem;
user-select: none;
white-space: nowrap
}
input~.input-prefix {
left: .75rem
}
input~.input-suffix {
right: .75rem
}
.input-label.sr-only~:is(.input-prefix, .input-suffix) {
top: .6rem
}
&:has(>input[type="search"])+button.search {
margin-left: -2.5rem
}
}
:is(input, textarea, select, datalist) {
font: inherit;
border-radius: .25rem;
background-color: light-dark(var(--white), oklch(15% .01 var(--brand-hue)));
padding: .5rem .75rem;
border: none;
&:focus-visible {
outline: 2px solid var(--primary-500)
}
&:not(:focus-visible) {
outline: 1px solid var(--surface-300)
}
}
:is(input[type='search']) {
outline-offset: initial
}
input[type="search"] {
border-radius: 1.25rem;
&.join-start {
border-radius: 0 1.25rem 1.25rem 0
}
&.join-end {
border-radius: 1.25rem 0 0 1.25rem
}
&.soft {
color: light-dark(var(--typography-200), var(--typography-100));
background-color: var(--surface-100);
outline: none;
&:focus-visible {
outline: 2px solid var(--typography-300);
box-shadow: none
}
}
}
input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance: none;
width: 1.5rem;
height: 1.5rem;
background: url('data:image/svg+xml,') no-repeat center;
background-size: contain;
cursor: pointer
}
.hint {
color: var(--typography-200);
font-size: .875rem;
line-height: 1.25rem
}
.error {
display: none;
color: var(--danger-500);
font-size: .875rem;
line-height: 1.25rem
}
label:has(input:user-invalid) .error {
display: inline
}
:user-invalid {
color: var(--danger-500);
outline-color: var(--danger-400) !important;
background-color: var(--danger-100);
background-position: right .125rem top .125rem;
background-repeat: no-repeat;
background-image: var(--inline-error);
transition-property: none
}
:disabled,
label:has(:disabled) {
opacity: 50%
}
select {
appearance: none;
background-repeat: no-repeat;
background-image: url('data:image/svg+xml,');
background-position: calc(100% - 0.5rem);
background-size: 1.25rem 1.25rem;
padding-right: 2rem !important;
&.join-end {
border-radius: 1.25rem 0 0 1.25rem;
border-right: 1px solid var(--surface-300)
}
&.soft {
color: light-dark(var(--typography-200), var(--typography-100));
background-color: var(--surface-100);
outline: none
}
}
select,
::picker(select) {
appearance: base-select;
border-radius: .25rem;
border: none;
outline: 1px solid var(--surface-300);
&::picker-icon {
display: none
}
option::checkmark {
display: none
}
option {
padding: .5rem .75rem;
color: var(--typography-300);
background-color: var(--white);
font-weight: 500;
&:hover,
&:focus-visible {
background-color: var(--surface-100)
}
&:checked {
background-color: var(--primary-100);
outline: 1px solid var(--primary-200)
}
}
optgroup {
padding: 0;
&[label] {
background-color: var(--surface-100);
position: sticky
}
}
}
::picker(select) {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}
input[type="number"] {
-moz-appearance: textfield
}
textarea {
resize: none
}
input[type="file"] {
padding: 0
}
input[type="file"]::file-selector-button {
border: none;
margin-right: 1rem;
padding: .5rem 1rem;
color: var(--typography-200);
background-color: var(--surface-100)
}
input[type="color"] {
padding: 0 .125rem;
height: 2.5rem;
max-width: 4.5rem
}
::-webkit-color-swatch {
border: none;
border-radius: .125rem
}
::-moz-color-swatch {
border: none
}
input[type="range"] {
background-color: var(--surface-200);
height: .5rem;
appearance: none;
border-radius: 9999px;
border: none;
outline: none;
padding: 0;
&:focus-visible {
outline: 2px solid var(--primary-500)
}
&::-webkit-slider-thumb {
scale: 1.25
}
}
progress {
width: 100%
}
progress:indeterminate {
border: revert
}
progress::-webkit-progress-bar {
height: .5rem;
background-color: var(--surface-300);
border-radius: 9999px
}
progress::-webkit-progress-value {
background-color: var(--primary-500);
border-radius: 9999px
}
progress::-moz-progress-bar {
background-color: var(--primary-500);
border-radius: 9999px
}
meter::-webkit-meter-bar {
border-radius: 1rem;
background-color: var(--surface-300);
box-shadow: 0 .5rem 1rem var(--surface-300) inset
}
meter::-webkit-meter-optimum-value {
background: var(--success-500)
}
meter::-webkit-meter-suboptimum-value {
background: var(--warning-500)
}
meter::-webkit-meter-even-less-good-value {
background: var(--danger-500)
}
meter:-moz-meter-optimum::-moz-meter-bar {
background: var(--success-500)
}
meter:-moz-meter-sub-optimum::-moz-meter-bar {
background: var(--warning-500)
}
meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
background: var(--danger-500)
}
:is(input[type="checkbox"], input[type="radio"]) {
font: inherit;
position: relative;
padding: 0;
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
appearance: none;
&:checked {
outline: 1px solid var(--primary-500)
}
&:checked::after {
transition: all 0.3s ease
}
&:checked:focus-visible {
outline: 2px solid var(--primary-500)
}
}
input[type="checkbox"]:not(.switch):checked {
background-color: var(--primary-500);
background-image: var(--checkmark);
border-radius: .25rem
}
input[type="checkbox"]:not(.switch):indeterminate {
background-color: var(--primary-500);
background-image: var(--indeterminate-checkmark);
outline: 1px solid var(--primary-500)
}
input[type="checkbox"].switch {
box-sizing: content-box;
width: 2.5rem;
border-radius: 9999px;
&::after {
content: "";
position: absolute;
top: .125rem;
left: .125rem;
height: 1.25rem;
width: 1.25rem;
border-radius: 9999px;
overflow: clip;
background-color: var(--surface-400);
transition: all 0.3s ease
}
&::before {
content: '';
width: 1.5rem;
height: 1.5rem;
scale: .5;
position: absolute;
z-index: 1;
background-color: var(--white);
mask-image: url('data:image/svg+xml,');
mask-size: cover
}
&:checked {
box-shadow: none;
background-color: var(--primary-500);
&::before {
content: '';
width: 1.5rem;
height: 1.5rem;
scale: .5;
position: absolute;
left: 1rem;
z-index: 1;
background-color: var(--primary-500);
mask-image: url('data:image/svg+xml,');
mask-size: cover
}
&::after {
left: -.125rem;
background-color: var(--white);
transform: translateX(100%);
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
}
}
label:has(input[type="checkbox"].switch.flip) {
flex-direction: row-reverse;
justify-content: space-between
}
input[type="radio"] {
border-radius: 9999px;
&::after {
content: "";
transform: scale(0)
}
&:checked::after {
position: absolute;
top: .25rem;
left: .25rem;
height: 1rem;
width: 1rem;
border-radius: 9999px;
transform: scale(.9);
background-color: var(--primary-500)
}
}
fieldset {
display: flex;
flex-direction: column;
gap: .5rem;
border-width: 0;
>legend {
margin-bottom: .5rem
}
.error {
font-size: .875rem;
line-height: 1.25rem;
color: light-dark(var(--danger-500), var(--danger-500))
}
:user-invalid~.error {
display: inline
}
&.split-gap-x {
gap: .5rem;
flex-direction: row;
flex-wrap: wrap;
label {
flex: 1;
min-width: max-content;
border-radius: .375rem;
padding: 1rem;
box-shadow: inset 0 0 0 1px var(--surface-200)
}
}
&.split-gap-y {
gap: .5rem;
label {
flex: 1;
min-width: max-content;
border-radius: .375rem;
padding: 1rem;
box-shadow: inset 0 0 0 1px var(--surface-200)
}
}
&.group-x {
gap: 0;
flex-direction: row;
flex-wrap: wrap;
border-radius: .375rem;
padding: .25rem;
box-shadow: inset 0 0 0 1px var(--surface-200);
legend.legend-label {
padding: 0 .25rem;
background-color: var(--white)
}
label {
flex: 1;
min-width: max-content;
border-radius: .375rem;
padding: .75rem 1rem
}
}
&.group-y {
gap: 0;
border-radius: .375rem;
padding: .25rem;
box-shadow: inset 0 0 0 1px var(--surface-200);
legend.legend-label {
padding: 0 .25rem;
background-color: var(--white)
}
label {
flex: 1;
min-width: max-content;
border-radius: .375rem;
padding: .75rem 1rem
}
}
&.pill {
flex-direction: row;
gap: 0;
label {
display: flex;
align-items: center;
padding: .5rem 1rem;
&:first-of-type {
border-radius: 9999px 0 0 9999px;
box-shadow: inset 1px 0 0 0 var(--surface-200), inset 0 1px 0 0 var(--surface-200), inset 0 -1px 0 0 var(--surface-200)
}
&:last-of-type {
border-radius: 0 9999px 9999px 0;
box-shadow: inset -1px 0 0 0 var(--surface-200), inset 0 1px 0 0 var(--surface-200), inset 0 -1px 0 0 var(--surface-200)
}
&:not(:first-of-type):not(:last-of-type) {
box-shadow: inset 0 1px 0 0 var(--surface-200), inset 0 -1px 0 0 var(--surface-200)
}
&:has(input:focus-visible) {
outline: 2px solid var(--primary-500)
}
input {
position: absolute;
opacity: 0
}
}
}
&.split-gap-x label:has(input[type="checkbox"]:checked, input[type="radio"]:checked),
&.split-gap-y label:has(input[type="checkbox"]:checked, input[type="radio"]:checked),
&.pill label:has(input[type="checkbox"]:checked, input[type="radio"]:checked),
&.group-x label:has(input[type="checkbox"]:checked, input[type="radio"]:checked),
&.group-y label:has(input[type="checkbox"]:checked, input[type="radio"]:checked) {
background-color: var(--primary-100);
transition: all 0.3s ease
}
&.split-gap-x label:has(input[type="checkbox"]:checked, input[type="radio"]:checked),
&.split-gap-y label:has(input[type="checkbox"]:checked, input[type="radio"]:checked),
&.pill label:has(input[type="checkbox"]:checked, input[type="radio"]:checked) {
box-shadow: inset 0 0 0 1px var(--primary-500)
}
&.filter-chips {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
width: 100%;
label {
padding: .25rem .75rem;
border-radius: 2rem;
max-width: fit-content;
outline: 1px solid var(--surface-200);
&:has(input[type="checkbox"]) {
gap: 0
}
input[type="checkbox"] {
opacity: 0;
height: 0;
width: 0;
transition: all 150ms cubic-bezier(.4, 0, .2, 1);
&:checked {
opacity: 1;
height: 1.5rem;
width: 1.5rem;
outline: none;
margin-left: -.5rem;
margin-right: .5rem;
border-radius: 2rem
}
}
&:has(input[type="checkbox"]:checked) {
background-color: var(--primary-100);
outline: 1px solid var(--primary-200)
}
}
}
}
.tabs-container {
[role="tablist"].tabs {
display: flex;
color: var(--typography-200);
background-color: #fff0;
overflow-x: auto;
box-shadow: 0 1px 0 0 var(--surface-200);
[role="tab"].btn {
border-radius: 0;
white-space: nowrap;
width: 100%;
&:hover,
&:focus-visible {
background-color: var(--white);
color: var(--typography-300);
transition: all 0.3s ease
}
&.active {
color: var(--primary-500);
background-color: light-dark(var(--white), transparent);
font-weight: 600;
box-shadow: inset 0 -.125rem 0 0 var(--primary-500);
&:hover,
&:focus-visible {
background-color: light-dark(var(--white), transparent)
}
}
}
}
[role="tablist"].tabs.pills {
padding: .125rem;
border-radius: 9999px;
background-color: var(--surface-100);
box-shadow: none;
[role="tab"].btn {
border-radius: 9999px;
&:hover,
&:focus-visible {
color: var(--typography-300)
}
&.active {
color: var(--typography-300);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1)
}
}
}
}
.input-label {
color: var(--typography-300)
}
.legend-label {
color: var(--typography-300)
}
.required::before {
content: '*';
color: light-dark(var(--danger-500), var(--danger-500));
font-weight: 700;
font-size: .875rem;
line-height: 1.25rem;
margin-right: .25rem
}
.static-label {
color: var(--typography-100);
margin-bottom: .25rem;
font-size: .875rem;
line-height: 1.25rem
}
.category-label {
text-transform: uppercase;
letter-spacing: .05em;
font-weight: 600;
color: var(--typography-200);
font-size: .875rem;
line-height: 1.25rem
}
.uppercase {
text-transform: uppercase
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.breadcrumbs {
font-size: .875rem;
line-height: 1.25rem;
white-space: nowrap;
ol {
display: flex;
li {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 1rem;
&:not(:last-child):after {
display: inline;
color: var(--surface-400);
content: '>';
margin: 0 .25rem
}
}
}
}
.active {
background-color: var(--primary-100);
color: var(--primary-500);
font-weight: 600
}
.slide-in {
transform: translateY(0);
opacity: 1
}
.slide-out {
transform: translateX(-100%);
opacity: 0
}
table {
width: 100%;
text-align: left;
background-color: var(--white)
}
table :where(thead, tfoot) {
font-weight: 600
}
table :where(thead tr th, thead tr td) {
background-color: var(--surface-50)
}
table :where(tfoot tr th, tfoot tr td) {
background-color: var(--white)
}
table.zebra-stripe tbody tr:nth-child(2n) td {
background-color: var(--surface-50)
}
table :where(thead, tbody) :where(tr:not(:last-child)),
table :where(thead, tbody) :where(tr:first-child:last-child) {
border-color: var(--surface-100);
border-bottom-width: 1px;
border-bottom-style: solid
}
table.borderless :where(thead, tbody) :where(tr:not(:last-child)),
table.borderless :where(thead, tbody) :where(tr:first-child:last-child) {
border-style: none
}
table :where(th, td) {
padding: .5rem .75rem;
vertical-align: top;
white-space: nowrap;
span,
p {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
}
table.compact :where(th, td) {
padding: .25rem .5rem
}
table thead :where(.pin-cols tr th:first-child) {
z-index: 2
}
table :where(.pin-rows thead tr) {
position: sticky;
top: 0;
z-index: 3
}
table :where(.pin-rows tfoot tr) {
position: sticky;
bottom: 0;
z-index: 1
}
table :where(.pin-cols tr th:first-child, .pin-cols tr th:last-child, .pin-cols tr td:first-child, .pin-cols tr td:last-child) {
position: sticky;
right: 0;
left: 0;
background-color: var(--white)
}
table.hover-rows tbody tr:hover td {
background-color: var(--surface-50)
}
table :where(.pin-rows tr th) {
background-color: var(--surface-50);
position: sticky;
top: 0;
z-index: 1
}
table tr td:has(button.tooltip:hover, button.tooltip:focus-visible) {
z-index: 1
}
[popover] {
border: 0;
color: inherit
}
[popover].appdrawer.left {
transform: translateX(-100%);
transition: transform 150ms cubic-bezier(.55, 0, 1, .45), overlay 150ms allow-discrete, display 150ms allow-discrete
}
[popover].appdrawer.left:popover-open {
transform: translateX(0);
@starting-style {
transform: translateX(-100%)
}
}
[popovertarget] {
anchor-name: var(--anchor-name)
}
[popover].contextmenu {
position-anchor: var(--anchor-name);
inset: unset;
margin: 0;
overflow: auto;
top: anchor(bottom);
left: anchor(left);
position-try-fallbacks: --align-right, flip-block, flip-inline, flip-block flip-inline;
position-try-order: most-width most-height;
place-self: anchor-center;
max-block-size: 100%;
padding: .5rem;
outline: 1px solid oklch(calc(var(--l-200) * 1.02) calc(var(--c-100) * 0.1) var(--brand-hue));
border-radius: 1rem;
background-color: light-dark(var(--white), var(--surface-50));
box-shadow: 0 10px 15px -3px light-dark(oklch(0 .1 var(--brand-hue) / .1), oklch(0 .1 var(--brand-hue) / .25));
.btn {
width: 100%;
text-align: left;
&.small {
color: var(--typography-200)
}
&.small,
&.icon-only {
width: unset
}
&:hover {
background-color: light-dark(var(--surface-100), oklch(calc(var(--l-200) * 0.9) calc(var(--c-300) * 0.2) var(--brand-hue)))
}
}
hr {
margin: .25rem 0;
opacity: 30%
}
header.header-base {
flex-wrap: unset;
padding: .25rem 0rem .25rem .5rem;
:where(h1, h2) {
color: var(--typography-300);
font-size: 1.125rem;
line-height: 1.75rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
}
}
@position-try --align-right {
left: auto;
right: anchor(right)
}
@media (max-width:640px) {
[popover].contextmenu {
position-anchor: unset;
top: unset;
justify-self: unset;
position-try-fallbacks: unset;
position-try-order: unset;
place-self: unset;
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin: 0;
width: 100%;
max-width: 100%;
max-height: 85dvh;
border-radius: 1rem 1rem 0 0;
overflow-y: auto;
transform: translateY(100%);
opacity: 0;
transition: transform 0.25s cubic-bezier(.32, .72, 0, 1), opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
&::backdrop {
opacity: 0;
background: light-dark(rgba(0 0 0 / .2), rgba(0 0 0 / .5));
transition: opacity 0.25s ease, overlay 0.25s allow-discrete, display 0.25s allow-discrete
}
}
[popover].contextmenu:popover-open {
transform: translateY(0);
opacity: 1
}
[popover].contextmenu:popover-open::backdrop {
opacity: 1
}
@starting-style {
[popover].contextmenu:popover-open {
transform: translateY(100%);
opacity: 0
}
[popover].contextmenu:popover-open::backdrop {
opacity: 0
}
}
body:has([popover].contextmenu:popover-open)::after {
content: '';
position: fixed;
inset: 0;
z-index: 9999;
background: rgb(0 0 0 / .01)
}
}
:popover-open.popover-full-screen {
display: flex;
flex-direction: column;
height: 100%;
width: 100%
}
dialog::backdrop {
background: #fff0;
transition: background 320ms cubic-bezier(.16, 1, .3, 1), display 320ms allow-discrete, overlay 320ms allow-discrete
}
dialog:is([open], :popover-open)::backdrop {
background: light-dark(oklch(4% .1 var(--brand-hue) / .15), oklch(4% .1 var(--brand-hue) / .25));
@starting-style {
background: #fff0
}
}
body:has(dialog[open]) {
overflow: hidden
}
dialog {
color: var(--typography-300, inherit);
background-color: var(--main-bg);
header {
display: flex;
position: sticky;
top: 0;
z-index: 10;
padding: .5rem 1rem;
gap: 1rem;
justify-content: space-between;
align-items: center;
background-color: inherit;
>h1,
>h2 {
font-size: 1.5rem;
font-weight: 600;
color: var(--typography-300);
flex: 1
}
}
section {
padding: 1rem;
overflow-y: auto
}
footer {
padding: .5rem 1rem;
display: flex;
position: sticky;
bottom: 0;
z-index: 10;
gap: 1rem;
justify-content: space-between;
align-items: center;
background-color: inherit
}
}
dialog.center {
inset: 0;
margin: auto;
border-radius: 1rem;
box-shadow: 0 1px 3px rgb(0 0 0 / .1), 0 1px 2px rgb(0 0 0 / .06);
opacity: 0;
transform: translateY(-.5rem) scale(.96);
will-change: transform, opacity;
backface-visibility: hidden;
transition: transform 320ms cubic-bezier(.16, 1, .3, 1), opacity 320ms ease, overlay 320ms allow-discrete, display 320ms allow-discrete;
&:is([open], :popover-open) {
opacity: 1;
transform: translateY(0) scale(1);
@starting-style {
opacity: 0;
transform: translateY(-.5rem) scale(.96)
}
}
}
dialog:is(.left, .right) {
width: 100%;
min-height: 100dvh;
border: none;
outline: 1px solid light-dark(var(--surface-200), var(--surface-200));
opacity: 0;
will-change: transform, opacity;
backface-visibility: hidden;
transition: transform 240ms cubic-bezier(.16, 1, .3, 1), opacity 240ms ease, overlay 240ms allow-discrete, display 240ms allow-discrete;
form {
flex: 1
}
footer {
margin-top: auto
}
&:is([open], :popover-open) {
display: flex;
flex-direction: column;
height: 100%;
opacity: 1;
transform: translate3d(0, 0, 0)
}
}
dialog.right {
margin-inline-start: auto;
border-radius: 1rem 0 0 1rem;
transform: translate3d(100%, 0, 0);
&:is([open], :popover-open) {
@starting-style {
opacity: 0;
transform: translate3d(100%, 0, 0)
}
}
}
dialog.left {
margin-inline-end: auto;
border-radius: 0 1rem 1rem 0;
transform: translate3d(-100%, 0, 0);
&:is([open], :popover-open) {
@starting-style {
opacity: 0;
transform: translate3d(-100%, 0, 0)
}
}
}
dialog::backdrop {
background: #fff0;
transition: background 360ms cubic-bezier(.16, 1, .3, 1), overlay 360ms allow-discrete, display 360ms allow-discrete;
dialog:is([open], :popover-open)::backdrop & {
background: light-dark(oklch(4% .1 var(--brand-hue) / .15), oklch(4% .1 var(--brand-hue) / .25));
@starting-style {
background: #fff0
}
}
}
dialog#dialog-commands {
border-radius: 1rem;
height: 100%;
max-height: 48ch;
outline: 1px solid light-dark(var(--surface-300), var(--surface-100));
>header {
border-bottom: 1px solid light-dark(var(--surface-100), var(--surface-100));
input[type="search"] {
background-color: #fff0;
&:focus-visible {
outline: none
}
}
}
}
details {
width: 100%;
interpolate-size: allow-keywords
}
details::details-content {
height: 0;
overflow: clip;
transition: height 300ms ease, content-visibility 300ms allow-discrete
}
details:open {
background-color: light-dark(var(--white), oklch(calc(var(--l-100) - 0.08) .004 var(--brand-hue)))
}
details[open]::details-content {
height: auto
}
summary::-webkit-details-marker {
display: none
}
details>summary {
display: flex;
cursor: pointer;
list-style-type: none;
gap: .25rem;
&:hover {
background-color: var(--surface-100)
}
>* {
display: inline
}
&::before {
display: inline-block;
height: 1.5rem;
width: 1.5rem;
transform-origin: center;
rotate: calc(90deg * -1);
transition: all 0.3s ease;
content: var(--chevron-down)
}
&.marker-right::before {
content: none
}
&.marker-right::after {
margin-left: auto;
display: inline-block;
height: 1.5rem;
width: 1.5rem;
transform-origin: center;
transition: all 0.3s ease;
content: var(--chevron-down)
}
&.marker-none::before {
content: none
}
}
details[open]>summary::before {
rotate: 0deg
}
details[open]>summary.marker-right::after {
rotate: 180deg
}
.skip-links {
position: absolute;
z-index: 50;
transform: translateY(-100%);
&:focus-visible,
&:active {
transform: translateY(0);
border-radius: .25rem;
background-color: var(--white);
padding: .5rem 1rem;
box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)
}
}
.app-body {
display: flex;
flex-direction: column;
height: 100dvh
}
.app-body.settings {
.appdrawer.left {
position: absolute;
left: 0;
height: calc(100dvh - 4rem);
ol {
border-radius: .5rem;
margin-inline-start: 1rem;
margin-inline-end: 1rem
}
}
nav.appbar.inner {
margin-bottom: 1rem
}
@container (width>=48rem) {
.appdrawer.left {
top: 4rem
}
main {
margin-left: 24rem
}
}
@container (width>=72rem) {
main {
padding: 0 4rem
}
}
}
nav a[aria-current="page"] {
color: var(--primary-500);
background-color: var(--primary-100);
font-weight: 600
}
nav.appbar {
position: sticky;
top: var(--spacing-0, 0);
z-index: 45;
order: calc(-infinity);
display: flex;
height: 4rem;
width: 100%;
flex-shrink: 0;
align-items: center;
gap: 1rem;
background-color: var(--white);
border-bottom: 1px solid var(--surface-100);
@media print {
display: none
}
h1 {
font-size: 1.25rem;
font-weight: 600;
color: var(--typography-300);
flex: 1
}
&.inner {
padding-left: 1rem;
padding-right: 1rem
}
&.outer {
order: calc(infinity);
bottom: var(--spacing-0, 0);
gap: var(--spacing-0, 0);
padding: 0;
border-bottom: 0;
border-top: 1px solid var(--surface-100);
@media (width>=48rem) {
order: calc(-infinity);
top: var(--spacing-0, 0);
border-bottom: 1px solid var(--surface-100)
}
.btn p {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1
}
.btn .user-initials-avatar+p {
display: none
}
li:has(.btn .user-initials-avatar) {
margin-inline-start: auto
}
}
ol {
display: flex;
flex: 1;
align-items: center;
li {
flex-grow: 1;
@media (width>=48rem) {
flex-grow: 0
}
>* {
width: 100%;
@media (width>=48rem) {
width: auto
}
}
}
}
li:has(.logo-container) {
display: none;
@media (width>=48rem) {
display: flex
}
}
.logo-container {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 1rem
}
.logo {
height: 2rem;
max-width: var(--width-xs, 20rem);
align-self: center
}
.product-name {
display: none;
@media (width>=48rem) {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
text-wrap: nowrap
}
}
.username {
max-width: 12ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
}
header.appheader {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 1rem 1rem;
gap: 1rem;
position: sticky;
top: 0;
background-color: var(--main-bg);
z-index: 10;
h1,
h2 {
flex-grow: 1;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1
}
}
footer.appfooter {
display: flex;
gap: 1rem;
padding: .5rem 1rem;
position: sticky;
bottom: 0;
border-top-style: solid;
border-top-width: 1px;
border-color: var(--surface-100);
background-color: var(--main-bg);
z-index: 10
}
.user-initials-avatar {
object-fit: cover;
background-color: var(--primary-100);
display: flex;
height: 3rem;
width: 3rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 9999px
}
.user-initials {
font-size: 1.125rem;
line-height: 1.75rem;
color: var(--primary-500);
font-weight: 600;
letter-spacing: .025em
}
.user-fullname {
font-weight: 600;
overflow-wrap: anywhere
}
.user-email {
color: var(--typography-100);
font-size: .875rem;
line-height: 1.25rem;
overflow-wrap: anywhere
}
.app-version-number {
color: var(--typography-100);
font-size: .875rem;
line-height: 1.25rem;
padding: .25rem 1rem
}
:is(.appbar, dialog header) h1 {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
.appdrawer {
padding: .25rem;
height: 100%;
background-color: var(--white);
flex-shrink: 0;
overflow-y: auto;
z-index: 40;
contain: layout style;
&.left {
width: 100%;
@media (width>=48rem) {
max-width: 24rem;
border-right: 1px solid var(--surface-100)
}
.logo-container {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 1rem;
@media (width>=48rem) {
display: none
}
}
li:has(.logo-container) {
margin-inline-start: auto
}
ol.close-and-logo {
display: flex;
align-items: center;
position: sticky;
bottom: 0;
background-color: inherit;
z-index: 10;
padding-inline-end: 1rem;
order: calc(infinity);
@media (width>=48rem) {
top: 0;
order: calc(-infinity)
}
}
ol.nav-items {
padding: 0 .25rem;
overflow-y: auto;
flex-grow: 1
}
}
}
.tooltip[aria-label]::after {
visibility: hidden
}
.tooltip[aria-label]:hover::after,
.tooltip[aria-label]:focus-visible::after {
content: attr(aria-label);
visibility: visible;
position: absolute;
left: 50%;
top: 100%;
transform: translate(-50%, .25rem);
border-radius: .2rem;
color: var(--white);
background-color: var(--typography-200);
padding: .25rem .5rem;
text-align: center;
font-size: .75rem;
line-height: 1rem;
z-index: 2
}
.badge {
display: flex;
width: fit-content;
height: fit-content;
align-items: center;
white-space: nowrap;
border-radius: 1rem;
padding: 0rem .5rem;
font-size: .875rem;
font-weight: 600;
color: var(--typography-200);
&.solid {
color: var(--surface-100);
background-color: var(--surface-500)
}
&.soft {
background-color: var(--surface-100)
}
&.bordered {
box-shadow: 0 0 0 1px var(--surface-300)
}
&.primary {
color: oklch(from var(--primary-500) calc(l - 0.05) c h);
&.soft {
background-color: var(--primary-100)
}
&.bordered {
box-shadow: 0 0 0 1px var(--primary-300)
}
&.solid {
color: var(--primary-100);
background-color: var(--primary-500)
}
}
&.red {
color: var(--danger-500);
&.soft {
background-color: var(--danger-100)
}
&.bordered {
box-shadow: 0 0 0 1px var(--danger-300)
}
&.solid {
color: var(--danger-100);
background-color: var(--danger-500)
}
}
&.green {
color: var(--success-500);
&.soft {
background-color: var(--success-100)
}
&.bordered {
box-shadow: 0 0 0 1px var(--success-300)
}
&.solid {
color: var(--success-100);
background-color: var(--success-500)
}
}
&.blue {
color: var(--info-500);
&.soft {
background-color: var(--info-100)
}
&.bordered {
box-shadow: 0 0 0 1px var(--info-300)
}
&.solid {
color: var(--info-100);
background-color: var(--info-500)
}
}
&.orange {
color: var(--warning-500);
&.soft {
background-color: var(--warning-100)
}
&.bordered {
box-shadow: 0 0 0 1px var(--warning-300)
}
&.solid {
color: var(--warning-100);
background-color: var(--warning-500)
}
}
&.counter {
font-variant-numeric: tabular-nums;
position: absolute;
top: 0;
right: 0;
padding: .25rem;
line-height: .6rem;
outline: 2px solid var(--white)
}
}
.callout {
border-radius: 1rem;
padding: 1rem;
&.info {
&.soft {
color: var(--info-500);
background-color: var(--info-100)
}
&.solid {
color: var(--info-100);
background-color: var(--info-500)
}
}
&.success {
&.soft {
color: var(--success-500);
background-color: var(--success-100)
}
&.solid {
color: var(--success-100);
background-color: var(--success-500)
}
}
&.warning {
&.soft {
color: var(--warning-500);
background-color: var(--warning-100)
}
&.solid {
color: var(--warning-100);
background-color: var(--warning-500)
}
}
&.danger {
&.soft {
color: var(--danger-500);
background-color: var(--danger-100)
}
&.solid {
color: var(--danger-100);
background-color: var(--danger-500)
}
}
&:has(header+section) {
display: flex;
flex-direction: column;
gap: .5rem
}
&:has(header+section+footer) {
display: flex;
flex-direction: column;
gap: 1rem
}
header {
display: flex;
align-items: center;
gap: 1rem
}
footer {
display: flex;
align-items: center;
gap: 1rem
}
h1 {
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
color: inherit
}
p,
span {
color: inherit
}
}
.notification-stack {
inset: unset;
bottom: 0;
right: 0;
background: #fff0;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
width: 100%;
max-width: 32rem;
.callout {
box-shadow: 0 1px 2px -1px rgb(0 0 0 / .25), 0 1px 2px -1px rgb(0 0 0 / .25);
transform: translateX(0rem);
transition: all 0.3s ease;
@starting-style {
transform: translateX(2rem)
}
}
&:empty {
display: none
}
}
[dir="rtl"] .notification-stack {
left: 0;
right: unset
}
.notification {
box-shadow: 0 1px 2px -1px rgb(0 0 0 / .25), 0 1px 2px -1px rgb(0 0 0 / .25)
}
.divide-y-axis {
>:not(first-child) {
border-bottom: 1px solid oklch(70% .01 var(--brand-hue) / .2)
}
>:last-child {
border-bottom: none
}
}
.border-1-solid {
border-width: 1px;
border-style: solid
}
.border-t {
border-top-width: 1px;
border-style: solid
}
.border-b {
border-bottom-width: 1px;
border-style: solid
}
.border-r {
border-right-width: 1px;
border-style: solid
}
.border-l {
border-left-width: 1px;
border-style: solid
}
.border-s,
.border-s-1 {
border: 0;
border-inline-start-width: 1px;
border-style: solid
}
.border-surface-100 {
border-color: var(--surface-100)
}
.border-surface-200 {
border-color: var(--surface-200)
}
.border-surface-300 {
border-color: var(--surface-300)
}
.border-surface-400 {
border-color: var(--surface-400)
}
.border-surface-500 {
border-color: var(--surface-500)
}
.card-base {
border-radius: 1rem;
background-color: light-dark(var(--white), var(--surface-50));
box-shadow: 0 0 0 1px light-dark(var(--surface-200), oklch(var(--l-200) calc(var(--c-100) * 0.5) var(--brand-hue) / .85))
}
@media (max-width:640px) {
ol.divide-y-axis.card-base {
box-shadow: none;
border-radius: 0
}
}
.header-base {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
padding: 1rem 1rem;
gap: 1rem;
&.px-0 {
padding: 1rem 0 1rem 0
}
&.p-0 {
padding: 0
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 2rem;
position: relative
}
.empty-state::before {
content: "";
display: flex;
flex-direction: column;
align-items: center;
background-image: url('data:image/svg+xml,');
width: 8rem;
height: 8rem;
background-size: contain;
background-repeat: no-repeat
}
.empty-state::after {
content: "No data";
display: block
}
.empty-state:has(>*)::before,
.empty-state:has(>*)::after {
content: "";
display: none
}
.loading-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 2rem;
height: 100%
}
.loading-state::before {
content: "";
width: 3rem;
height: 3rem;
border-radius: 50%;
border: .25rem solid var(--surface-200);
border-top-color: var(--primary-500);
animation: loading-spin 1s linear infinite
}
@keyframes loading-spin {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
.loading-state::after {
content: "Loading..."
}
.loading-state:has(>*)::after {
content: "";
display: none
}
.loading-state-min {
display: flex;
align-items: center;
justify-content: center
}
.loading-state-min::before {
content: "";
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
border: .125rem solid var(--primary-500);
border-top-color: var(--surface-200);
animation: loading-spin 1.3s linear infinite
}
.widget {
border-radius: 1rem;
grid-column: span 1;
width: 100%;
height: 100%;
background-color: light-dark(var(--white), oklch(var(--l-300) calc(var(--c-200) * 0.25) var(--brand-hue) / .25));
box-shadow: 0 0 0 1px light-dark(oklch(var(--l-400) var(--c-100) var(--brand-hue) / .25), oklch(var(--l-400) var(--c-100) var(--brand-hue) / .35));
transition: all 0.3s ease;
&:hover {
background-color: light-dark(var(--white), oklch(var(--l-200) calc(var(--c-200) * 0.5) var(--brand-hue) / .25));
box-shadow: 0 1px 2px 0 oklch(var(--l-500) var(--c-300) var(--brand-hue) / .25), 0 0 0 1px oklch(var(--l-500) calc(var(--c-200) * 0.5) var(--brand-hue) / .25)
}
.btn {
border-radius: 1rem;
&:hover {
background-color: light-dark(var(--surface-100), oklch(var(--l-400) calc(var(--c-200) * 0.5) var(--brand-hue) / .25))
}
}
&>.btn:hover {
background-color: light-dark(oklch(calc(var(--l-50) * 0.996) calc(var(--c-100) * 0.3) var(--brand-hue)), oklch(var(--l-400) calc(var(--c-200) * 0.5) var(--brand-hue) / .25))
}
h3 {
font-size: 1rem;
line-height: 1.5rem;
color: var(--typography-300)
}
}
.widget-grid {
display: grid;
grid-template-columns: repeat(1, minmax(0, 1fr));
grid-auto-rows: minmax(2rem, auto);
grid-auto-flow: dense;
gap: 1rem;
.span-y-2 {
grid-row: span 2 / span 2
}
.span-y-3 {
grid-row: span 3 / span 3
}
.span-y-4 {
grid-row: span 4 / span 4
}
.span-y-5 {
grid-row: span 5 / span 5
}
.span-y-6 {
grid-row: span 6 / span 6
}
.span-x-2,
.span-x-3,
.span-x-4,
.span-x-5,
.span-x-6 {
grid-column: span 1
}
@container (width>=20rem) {
grid-template-columns: repeat(2, 1fr);
.span-x-2,
.span-x-3,
.span-x-4,
.span-x-5,
.span-x-6 {
grid-column: span 2
}
}
@container (width>=36rem) {
grid-template-columns: repeat(3, 1fr);
.span-x-3,
.span-x-4,
.span-x-5,
.span-x-6 {
grid-column: span 3
}
}
@container (width>=48rem) {
grid-template-columns: repeat(4, 1fr);
.span-x-4,
.span-x-5,
.span-x-6 {
grid-column: span 4
}
}
@container (width>=64rem) {
grid-template-columns: repeat(5, 1fr);
.span-x-5,
.span-x-6 {
grid-column: span 5
}
}
@container (width>=80rem) {
grid-template-columns: repeat(6, 1fr);
.span-x-6 {
grid-column: span 6
}
}
}
.carousel-container {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 18rem;
width: 100%;
gap: 1rem;
overflow-x: auto;
padding: .125rem;
scroll-behavior: smooth;
scroll-padding: .125rem;
scroll-snap-type: x mandatory;
anchor-name: --carousel-container;
.widget {
&.btn:hover {
background-color: light-dark(oklch(var(--l-100) calc(var(--c-300) * 0.25) var(--brand-hue) / .25), oklch(var(--l-200) calc(var(--c-200) * 0.25) var(--brand-hue) / .35))
}
}
}
.carousel-container>* {
scroll-snap-align: start
}
.carousel-container::-webkit-scrollbar {
display: none
}
.carousel-container::scroll-button(left),
.carousel-container::scroll-button(right) {
height: 2.5rem;
width: 2.5rem;
scale: .75;
border-radius: 100%;
border: none;
cursor: pointer;
z-index: 5;
line-height: 0;
color: var(--typography-300);
background-color: light-dark(var(--white), var(--white));
box-shadow: 0 1px 0 0 light-dark(oklch(var(--l-500) var(--c-100) var(--brand-hue) / .2), oklch(var(--l-500) var(--c-100) var(--brand-hue) / .25));
position: fixed;
position-anchor: --carousel-container
}
.carousel-container::scroll-button(left):hover,
.carousel-container::scroll-button(left):focus,
.carousel-container::scroll-button(right):hover,
.carousel-container::scroll-button(right):focus {
color: var(--typography-400);
background-color: var(--surface-100)
}
.carousel-container::scroll-button(left):disabled,
.carousel-container::scroll-button(right):disabled {
display: none
}
.carousel-container::scroll-button(left) {
content: url('data:image/svg+xml,');
left: calc(anchor(left) - 1rem);
top: calc(anchor(center) - 1.5rem)
}
.carousel-container::scroll-button(right) {
content: url('data:image/svg+xml,');
right: calc(anchor(right) - 1.25rem);
top: calc(anchor(center) - 1.5rem)
}
[data-multiselect] {
button span:empty {
display: none
}
>button.bordered {
border-radius: .25rem
}
[popover] {
padding: 0;
max-width: 100dvw;
input[type="search"] {
width: calc(100% - 1.5rem);
margin-bottom: .5rem;
margin-top: .5rem;
margin-inline-start: .75rem
}
fieldset {
gap: 0;
label {
padding: .5rem 1rem;
&:hover {
background-color: var(--primary-100)
}
&[hidden] {
display: none
}
}
}
footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: .25rem;
margin-top: .25rem;
border-top: 1px solid var(--surface-200)
}
.btn {
width: fit-content
}
}
fieldset {
overflow-y: auto;
max-height: 16rem
}
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr))
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
.grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr))
}
.grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr))
}
.row-start-1 {
grid-row-start: 1
}
.row-start-2 {
grid-row-start: 2
}
.row-start-3 {
grid-row-start: 3
}
.row-auto {
grid-row: auto
}
.row-span-1 {
grid-row: span 1 / span 1
}
.row-span-2 {
grid-row: span 2 / span 2
}
.row-span-3 {
grid-row: span 3 / span 3
}
.row-span-4 {
grid-row: span 4 / span 4
}
.row-span-5 {
grid-row: span 5 / span 5
}
.row-span-6 {
grid-row: span 6 / span 6
}
.col-span-2 {
grid-column: span 2 / span 2
}
.col-span-3 {
grid-column: span 3 / span 3
}
.col-span-4 {
grid-column: span 4 / span 4
}
.col-span-5 {
grid-column: span 5 / span 5
}
.col-span-full {
grid-column: 1 / -1
}
.col-start-1 {
grid-column-start: 1
}
.col-start-2 {
grid-column-start: 2
}
.col-start-3 {
grid-column-start: 3
}
.col-start-4 {
grid-column-start: 4
}
.col-start-5 {
grid-column-start: 5
}
.col-start-6 {
grid-column-start: 6
}
.grid-rows-subgrid {
grid-template-rows: subgrid
}
.grid-cols-subgrid {
grid-template-columns: subgrid
}
.grid-flow-dense {
grid-auto-flow: dense
}
.grid-fluid {
--grid-min: 16rem;
--grid-mode: auto-fill;
--grid-gap-x: 1rem;
--grid-gap-y: 1rem;
--grid-flow: dense;
display: grid;
grid-auto-flow: var(--grid-flow);
gap: var(--grid-gap-y) var(--grid-gap-x);
grid-template-columns: repeat(var(--grid-mode), minmax(min(var(--grid-min), 100%), 1fr));
@container (min-width:32rem) {
.span-x-2 {
grid-column: span 2
}
.span-x-3 {
grid-column: span 3
}
.span-x-4 {
grid-column: span 4
}
.span-x-5 {
grid-column: span 5
}
.span-x-full {
grid-column: 1 / -1
}
.span-y-2 {
grid-row: span 2
}
.span-y-3 {
grid-row: span 3
}
.span-y-4 {
grid-row: span 4
}
.span-y-5 {
grid-row: span 5
}
.span-y-full {
grid-row: 1 / -1
}
}
}
.grow {
flex-grow: 1
}
.\*\:grow>* {
flex-grow: 1
}
.absolute {
position: absolute
}
.relative {
position: relative
}
.sticky {
position: sticky
}
.sr-only {
position: fixed;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0
}
.gap-0 {
gap: 0rem
}
.gap-px {
gap: 1px
}
.gap-0\.5 {
gap: .125rem
}
.gap-1 {
gap: .25rem
}
.gap-2 {
gap: .5rem
}
.gap-3 {
gap: .75rem
}
.gap-4 {
gap: 1rem
}
.gap-5 {
gap: 1.25rem
}
.gap-6 {
gap: 1.5rem
}
.gap-8 {
gap: 2rem
}
.gap-10 {
gap: 2.5rem
}
.gap-12 {
gap: 3rem
}
.gap-16 {
gap: 4rem
}
.gap-x-1 {
column-gap: .25rem
}
.gap-x-2 {
column-gap: .5rem
}
.gap-x-3 {
column-gap: .75rem
}
.gap-x-4 {
column-gap: 1rem
}
.gap-x-6 {
column-gap: 1.5rem
}
.gap-x-8 {
column-gap: 2rem
}
.gap-y-1 {
row-gap: .25rem
}
.gap-y-2 {
row-gap: .5rem
}
.gap-y-3 {
row-gap: .75rem
}
.gap-y-4 {
row-gap: 1rem
}
.gap-y-8 {
row-gap: 2rem
}
.items-end {
align-items: flex-end
}
.items-center {
align-items: center
}
.items-baseline {
align-items: baseline
}
.items-stretch {
align-items: stretch
}
.justify-between {
justify-content: space-between
}
.justify-center {
justify-content: center
}
.justify-around {
justify-content: space-around
}
.justify-evenly {
justify-content: space-evenly
}
.justify-stretch {
justify-content: stretch
}
.justify-end {
justify-content: flex-end
}
.justify-self-auto {
justify-self: auto
}
.justify-self-start {
justify-self: start
}
.justify-self-end {
justify-self: flex-end
}
.align-baseline {
vertical-align: baseline
}
.align-top {
vertical-align: top
}
.align-middle {
vertical-align: middle
}
.align-bottom {
vertical-align: bottom
}
.text-left {
text-align: left
}
.text-right {
text-align: right
}
.text-pretty {
text-wrap: pretty
}
.p-0 {
padding: 0rem
}
.p-0\.5 {
padding: .125rem
}
.p-1 {
padding: .25rem
}
.p-2 {
padding: .5rem
}
.p-3 {
padding: .75rem
}
.p-4 {
padding: 1rem
}
.p-6 {
padding: 1.5rem
}
.p-8 {
padding: 2rem
}
.pt-0 {
padding-top: 0
}
.pt-2 {
padding-top: .5rem
}
.pt-4 {
padding-top: 1rem
}
.pb-0 {
padding-bottom: 0
}
.pb-2 {
padding-bottom: .5rem
}
.pb-4 {
padding-bottom: 1rem
}
.px-1 {
padding-left: .25rem;
padding-right: .25rem
}
.px-2 {
padding-left: .5rem;
padding-right: .5rem
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem
}
.px-6 {
padding-left: 1.5rem;
padding-right: 1.5rem
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem
}
.ps-2 {
padding-inline-start: .5rem
}
.ps-3 {
padding-inline-start: .75rem
}
.ps-4 {
padding-inline-start: 1rem
}
.ps-6 {
padding-inline-start: 1.5rem
}
.ps-8 {
padding-inline-start: 2rem
}
.ps-12 {
padding-inline-start: 3rem
}
.ps-16 {
padding-inline-start: 4rem
}
.ps-20 {
padding-inline-start: 5rem
}
.pe-0 {
padding-inline-end: 0rem
}
.pe-1 {
padding-inline-end: .25rem
}
.pe-2 {
padding-inline-end: .5rem
}
.pe-3 {
padding-inline-end: .75rem
}
.pe-4 {
padding-inline-end: 1rem
}
.pe-6 {
padding-inline-end: 1.5rem
}
.pe-8 {
padding-inline-end: 2rem
}
.pe-12 {
padding-inline-end: 3rem
}
.pe-16 {
padding-inline-end: 4rem
}
.pe-20 {
padding-inline-end: 5rem
}
.py-1 {
padding-top: .25rem;
padding-bottom: .25rem
}
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem
}
.py-3 {
padding-top: .75rem;
padding-bottom: .75rem
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem
}
.m-0 {
margin: 0
}
.mb-2 {
margin-bottom: .5rem
}
.mb-4 {
margin-bottom: 1rem
}
.mb-6 {
margin-bottom: 1.5rem
}
.mb-8 {
margin-bottom: 2rem
}
.mt-1 {
margin-top: .25rem
}
.mt-2 {
margin-top: .5rem
}
.mt-3 {
margin-top: .75rem
}
.mt-4 {
margin-top: 1rem
}
.mt-6 {
margin-top: 1.5rem
}
.mt-8 {
margin-top: 2rem
}
.mt-12 {
margin-top: 3rem
}
.mt-16 {
margin-top: 4rem
}
.mt-20 {
margin-top: 5rem
}
.mt-auto {
margin-top: auto
}
.mx-1 {
margin-left: .25rem;
margin-right: .25rem
}
.mx-2 {
margin-left: .5rem;
margin-right: .5rem
}
.mx-3 {
margin-left: .75rem;
margin-right: .75rem
}
.mx-4 {
margin-left: 1rem;
margin-right: 1rem
}
.mx-auto {
margin-left: auto;
margin-right: auto
}
.my-1 {
margin-top: .25rem;
margin-bottom: .25rem
}
.my-2 {
margin-top: .5rem;
margin-bottom: .5rem
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.my-6 {
margin-top: 1.5rem;
margin-bottom: 1.5rem
}
.my-8 {
margin-top: 2rem;
margin-bottom: 2rem
}
.my-auto {
margin-top: auto;
margin-bottom: auto
}
.ms-0 {
margin-inline-start: 0rem
}
.ms-1 {
margin-inline-start: .25rem
}
.ms-2 {
margin-inline-start: .5rem
}
.ms-3 {
margin-inline-start: .75rem
}
.ms-4 {
margin-inline-start: 1rem
}
.ms-5 {
margin-inline-start: 1.25rem
}
.ms-6 {
margin-inline-start: 1.5rem
}
.ms-7 {
margin-inline-start: 1.75rem
}
.ms-8 {
margin-inline-start: 2rem
}
.ms-9 {
margin-inline-start: 2.25rem
}
.ms-10 {
margin-inline-start: 2.5rem
}
.ms-14 {
margin-inline-start: 3.5rem
}
.ms-auto {
margin-inline-start: auto
}
.me-1 {
margin-inline-end: .25rem
}
.me-2 {
margin-inline-end: .5rem
}
.me-3 {
margin-inline-end: .75rem
}
.me-4 {
margin-inline-end: 1rem
}
.me-5 {
margin-inline-end: 1.25rem
}
.me-6 {
margin-inline-end: 1.5rem
}
.me-7 {
margin-inline-end: 1.75rem
}
.me-8 {
margin-inline-end: 2rem
}
.me-9 {
margin-inline-end: 2.25rem
}
.me-10 {
margin-inline-end: 2.5rem
}
.me-14 {
margin-inline-end: 3.5rem
}
.me-auto {
margin-inline-end: auto
}
.top-0 {
top: 0
}
.top-1 {
top: .25rem
}
.top-2 {
top: .5rem
}
.top-3 {
top: .75rem
}
.top-4 {
top: 1rem
}
.top-5 {
top: 1.25rem
}
.top-6 {
top: 1.5rem
}
.top-7 {
top: 1.75rem
}
.top-8 {
top: 2rem
}
.top-10 {
top: 2.5rem
}
.top-12 {
top: 3rem
}
.top-16 {
top: 4rem
}
.bottom-0 {
bottom: 0
}
.bottom-1 {
bottom: .25rem
}
.bottom-2 {
bottom: .5rem
}
.bottom-3 {
bottom: .75rem
}
.bottom-4 {
bottom: 1rem
}
.bottom-5 {
bottom: 1.25rem
}
.bottom-6 {
bottom: 1.5rem
}
.bottom-7 {
bottom: 1.75rem
}
.bottom-8 {
bottom: 2rem
}
.bottom-10 {
bottom: 2.5rem
}
.bottom-12 {
bottom: 3rem
}
.bottom-16 {
bottom: 4rem
}
.left-0 {
left: 0
}
.left-1 {
left: .25rem
}
.left-2 {
left: .5rem
}
.left-3 {
left: .75rem
}
.left-4 {
left: 1rem
}
.left-5 {
left: 1.25rem
}
.left-6 {
left: 1.5rem
}
.left-7 {
left: 1.75rem
}
.left-8 {
left: 2rem
}
.left-10 {
left: 2.5rem
}
.left-12 {
left: 3rem
}
.left-16 {
left: 4rem
}
.right-0 {
right: 0
}
.right-1 {
right: .25rem
}
.right-2 {
right: .5rem
}
.right-3 {
right: .75rem
}
.right-4 {
right: 1rem
}
.right-5 {
right: 1.25rem
}
.right-6 {
right: 1.5rem
}
.right-7 {
right: 1.75rem
}
.right-8 {
right: 2rem
}
.right-10 {
right: 2.5rem
}
.right-12 {
right: 3rem
}
.right-16 {
right: 4rem
}
.inset-x-0 {
left: 0;
right: 0
}
.inset-y-0 {
top: 0;
bottom: 0
}
.w-px {
width: 1px
}
.w-1 {
width: .25rem
}
.w-2 {
width: .5rem
}
.w-3 {
width: .75rem
}
.w-4 {
width: 1rem
}
.w-8 {
width: 2rem
}
.w-10 {
width: 2.5rem
}
.w-12 {
width: 3rem
}
.w-16 {
width: 4rem
}
.w-32 {
width: 8rem
}
.w-48 {
width: 12rem
}
.w-64 {
width: 16rem
}
.w-72 {
width: 18rem
}
.w-80 {
width: 20rem
}
.w-96 {
width: 24rem
}
.w-full {
width: 100%
}
.w-fit {
width: fit-content
}
.w-min {
width: min-content
}
.w-max {
width: max-content
}
.w-dvw {
width: 100dvw
}
.min-w-0 {
min-width: 0
}
.min-w-10 {
min-width: 2.5rem
}
.max-w-xs {
max-width: 20rem
}
.max-w-sm {
max-width: 24rem
}
.max-w-md {
max-width: 28rem
}
.max-w-screen-sm {
max-width: 640px
}
.max-w-screen-md {
max-width: 768px
}
.max-w-screen-lg {
max-width: 1024px
}
.max-w-screen-xl {
max-width: 1280px
}
.max-w-full {
max-width: 100%
}
.h-px {
height: 1px
}
.h-1 {
height: .25rem
}
.h-2 {
height: .5rem
}
.h-3 {
height: .75rem
}
.h-4 {
height: 1rem
}
.h-6 {
height: 1.5rem
}
.h-8 {
height: 2rem
}
.h-10 {
height: 2.5rem
}
.h-12 {
height: 3rem
}
.h-16 {
height: 4rem
}
.h-20 {
height: 5rem
}
.h-24 {
height: 6rem
}
.h-28 {
height: 7rem
}
.h-32 {
height: 8rem
}
.h-36 {
height: 9rem
}
.h-40 {
height: 10rem
}
.h-44 {
height: 11rem
}
.h-48 {
height: 12rem
}
.h-52 {
height: 13rem
}
.h-56 {
height: 14rem
}
.h-60 {
height: 15rem
}
.h-64 {
height: 16rem
}
.h-72 {
height: 18rem
}
.h-80 {
height: 20rem
}
.h-96 {
height: 24rem
}
.h-full {
height: 100%
}
.h-dvh {
height: 100dvh
}
.max-h-24 {
max-height: 6rem
}
.max-h-32 {
max-height: 8rem
}
.max-h-48 {
max-height: 12rem
}
.max-h-64 {
max-height: 16rem
}
.max-h-96 {
max-height: 24rem
}
.max-h-full {
max-height: 100%
}
.min-h-0 {
min-height: 0
}
.min-h-4 {
min-height: 1rem
}
.min-h-8 {
min-height: 2rem
}
.min-h-12 {
min-height: 3rem
}
.min-h-16 {
min-height: 4rem
}
.min-h-24 {
min-height: 6rem
}
.min-h-32 {
min-height: 8rem
}
.min-h-48 {
min-height: 12rem
}
.min-h-64 {
min-height: 16rem
}
.object-contain {
object-fit: contain
}
.object-cover {
object-fit: cover
}
.object-center {
object-position: center
}
.z-1 {
z-index: 1
}
.z-2 {
z-index: 2
}
.z-5 {
z-index: 5
}
.z-10 {
z-index: 10
}
.z-25 {
z-index: 25
}
.z-50 {
z-index: 50
}
.tabular-nums {
font-variant-numeric: tabular-nums
}
.tracking-wide {
letter-spacing: .025em
}
.tracking-wider {
letter-spacing: .05em
}
.tracking-widest {
letter-spacing: .1em
}
.font-normal {
font-weight: 400
}
.font-medium {
font-weight: 500
}
.font-semibold {
font-weight: 600
}
.font-bold {
font-weight: 700
}
.font-extrabold {
font-weight: 800
}
.text-xs {
font-size: .75rem;
line-height: 1rem
}
.text-sm {
font-size: .875rem;
line-height: 1.25rem
}
.text-base {
font-size: 1rem;
line-height: 1.5rem
}
.text-lg {
font-size: 1.125rem;
line-height: 1.75rem
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem
}
.text-3xl {
font-size: 1.875rem;
line-height: 2.25rem
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem
}
.text-5xl {
font-size: 3rem;
line-height: 1
}
.text-6xl {
font-size: 3.75rem;
line-height: 1
}
.text-inherit {
color: inherit
}
.text-center {
text-align: center
}
.break-words {
overflow-wrap: break-word
}
.break-all {
word-break: break-all
}
.line-clamp-1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1
}
.line-clamp-2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2
}
.line-clamp-3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3
}
.list-inside {
list-style-position: inside
}
.list-outside {
list-style-position: outside
}
.list-decimal {
list-style-type: decimal
}
.list-disc {
list-style-type: disc
}
.list-none {
list-style-type: none
}
.text-white {
color: var(--white)
}
.text-black {
color: var(--black)
}
.text-transparent {
color: #fff0
}
.text-typography-100 {
color: var(--typography-100)
}
.text-typography-200 {
color: var(--typography-200)
}
.text-typography-300 {
color: var(--typography-300)
}
.text-typography-400 {
color: var(--typography-400)
}
.text-primary-100 {
color: var(--primary-100)
}
.text-primary-200 {
color: var(--primary-200)
}
.text-primary-300 {
color: var(--primary-300)
}
.text-primary-400 {
color: var(--primary-400)
}
.text-primary-500 {
color: var(--primary-500)
}
.text-red-100 {
color: var(--red-100)
}
.text-red-200 {
color: var(--red-200)
}
.text-red-300 {
color: var(--red-300)
}
.text-red-400 {
color: var(--red-400)
}
.text-red-500 {
color: var(--red-500)
}
.text-rose-100 {
color: var(--rose-100)
}
.text-rose-200 {
color: var(--rose-200)
}
.text-rose-300 {
color: var(--rose-300)
}
.text-rose-400 {
color: var(--rose-400)
}
.text-rose-500 {
color: var(--rose-500)
}
.text-magenta-100 {
color: var(--magenta-100)
}
.text-magenta-200 {
color: var(--magenta-200)
}
.text-magenta-300 {
color: var(--magenta-300)
}
.text-magenta-400 {
color: var(--magenta-400)
}
.text-magenta-500 {
color: var(--magenta-500)
}
.text-violet-100 {
color: var(--violet-100)
}
.text-violet-200 {
color: var(--violet-200)
}
.text-violet-300 {
color: var(--violet-300)
}
.text-violet-400 {
color: var(--violet-400)
}
.text-violet-500 {
color: var(--violet-500)
}
.text-blue-100 {
color: var(--blue-100)
}
.text-blue-200 {
color: var(--blue-200)
}
.text-blue-300 {
color: var(--blue-300)
}
.text-blue-400 {
color: var(--blue-400)
}
.text-blue-500 {
color: var(--blue-500)
}
.text-azure-100 {
color: var(--azure-100)
}
.text-azure-200 {
color: var(--azure-200)
}
.text-azure-300 {
color: var(--azure-300)
}
.text-azure-400 {
color: var(--azure-400)
}
.text-azure-500 {
color: var(--azure-500)
}
.text-cyan-100 {
color: var(--cyan-100)
}
.text-cyan-200 {
color: var(--cyan-200)
}
.text-cyan-300 {
color: var(--cyan-300)
}
.text-cyan-400 {
color: var(--cyan-400)
}
.text-cyan-500 {
color: var(--cyan-500)
}
.text-spring-100 {
color: var(--spring-100)
}
.text-spring-200 {
color: var(--spring-200)
}
.text-spring-300 {
color: var(--spring-300)
}
.text-spring-400 {
color: var(--spring-400)
}
.text-spring-500 {
color: var(--spring-500)
}
.text-green-100 {
color: var(--green-100)
}
.text-green-200 {
color: var(--green-200)
}
.text-green-300 {
color: var(--green-300)
}
.text-green-400 {
color: var(--green-400)
}
.text-green-500 {
color: var(--green-500)
}
.text-chartreuse-100 {
color: var(--chartreuse-100)
}
.text-chartreuse-200 {
color: var(--chartreuse-200)
}
.text-chartreuse-300 {
color: var(--chartreuse-300)
}
.text-chartreuse-400 {
color: var(--chartreuse-400)
}
.text-chartreuse-500 {
color: var(--chartreuse-500)
}
.text-yellow-100 {
color: var(--yellow-100)
}
.text-yellow-200 {
color: var(--yellow-200)
}
.text-yellow-300 {
color: var(--yellow-300)
}
.text-yellow-400 {
color: var(--yellow-400)
}
.text-yellow-500 {
color: var(--yellow-500)
}
.text-orange-100 {
color: var(--orange-100)
}
.text-orange-200 {
color: var(--orange-200)
}
.text-orange-300 {
color: var(--orange-300)
}
.text-orange-400 {
color: var(--orange-400)
}
.text-orange-500 {
color: var(--orange-500)
}
.bg-white {
background-color: var(--white)
}
.bg-black {
background-color: var(--black)
}
.bg-primary-100 {
background-color: var(--primary-100)
}
.bg-primary-200 {
background-color: var(--primary-200)
}
.bg-primary-300 {
background-color: var(--primary-300)
}
.bg-primary-400 {
background-color: var(--primary-400)
}
.bg-primary-500 {
background-color: var(--primary-500)
}
.bg-surface-100 {
background-color: var(--surface-100)
}
.bg-surface-200 {
background-color: var(--surface-200)
}
.bg-surface-300 {
background-color: var(--surface-300)
}
.bg-surface-400 {
background-color: var(--surface-400)
}
.bg-surface-500 {
background-color: var(--surface-500)
}
.bg-red-100 {
background-color: var(--red-100)
}
.bg-red-200 {
background-color: var(--red-200)
}
.bg-red-300 {
background-color: var(--red-300)
}
.bg-red-400 {
background-color: var(--red-400)
}
.bg-red-500 {
background-color: var(--red-500)
}
.bg-rose-100 {
background-color: var(--rose-100)
}
.bg-rose-200 {
background-color: var(--rose-200)
}
.bg-rose-300 {
background-color: var(--rose-300)
}
.bg-rose-400 {
background-color: var(--rose-400)
}
.bg-rose-500 {
background-color: var(--rose-500)
}
.bg-magenta-100 {
background-color: var(--magenta-100)
}
.bg-magenta-200 {
background-color: var(--magenta-200)
}
.bg-magenta-300 {
background-color: var(--magenta-300)
}
.bg-magenta-400 {
background-color: var(--magenta-400)
}
.bg-magenta-500 {
background-color: var(--magenta-500)
}
.bg-violet-100 {
background-color: var(--violet-100)
}
.bg-violet-200 {
background-color: var(--violet-200)
}
.bg-violet-300 {
background-color: var(--violet-300)
}
.bg-violet-400 {
background-color: var(--violet-400)
}
.bg-violet-500 {
background-color: var(--violet-500)
}
.bg-blue-100 {
background-color: var(--blue-100)
}
.bg-blue-200 {
background-color: var(--blue-200)
}
.bg-blue-300 {
background-color: var(--blue-300)
}
.bg-blue-400 {
background-color: var(--blue-400)
}
.bg-blue-500 {
background-color: var(--blue-500)
}
.bg-azure-100 {
background-color: var(--azure-100)
}
.bg-azure-200 {
background-color: var(--azure-200)
}
.bg-azure-300 {
background-color: var(--azure-300)
}
.bg-azure-400 {
background-color: var(--azure-400)
}
.bg-azure-500 {
background-color: var(--azure-500)
}
.bg-cyan-100 {
background-color: var(--cyan-100)
}
.bg-cyan-200 {
background-color: var(--cyan-200)
}
.bg-cyan-300 {
background-color: var(--cyan-300)
}
.bg-cyan-400 {
background-color: var(--cyan-400)
}
.bg-cyan-500 {
background-color: var(--cyan-500)
}
.bg-spring-100 {
background-color: var(--spring-100)
}
.bg-spring-200 {
background-color: var(--spring-200)
}
.bg-spring-300 {
background-color: var(--spring-300)
}
.bg-spring-400 {
background-color: var(--spring-400)
}
.bg-spring-500 {
background-color: var(--spring-500)
}
.bg-green-100 {
background-color: var(--green-100)
}
.bg-green-200 {
background-color: var(--green-200)
}
.bg-green-300 {
background-color: var(--green-300)
}
.bg-green-400 {
background-color: var(--green-400)
}
.bg-green-500 {
background-color: var(--green-500)
}
.bg-chartreuse-100 {
background-color: var(--chartreuse-100)
}
.bg-chartreuse-200 {
background-color: var(--chartreuse-200)
}
.bg-chartreuse-300 {
background-color: var(--chartreuse-300)
}
.bg-chartreuse-400 {
background-color: var(--chartreuse-400)
}
.bg-chartreuse-500 {
background-color: var(--chartreuse-500)
}
.bg-yellow-100 {
background-color: var(--yellow-100)
}
.bg-yellow-200 {
background-color: var(--yellow-200)
}
.bg-yellow-300 {
background-color: var(--yellow-300)
}
.bg-yellow-400 {
background-color: var(--yellow-400)
}
.bg-yellow-500 {
background-color: var(--yellow-500)
}
.bg-orange-100 {
background-color: var(--orange-100)
}
.bg-orange-200 {
background-color: var(--orange-200)
}
.bg-orange-300 {
background-color: var(--orange-300)
}
.bg-orange-400 {
background-color: var(--orange-400)
}
.bg-orange-500 {
background-color: var(--orange-500)
}
.bg-info-100 {
background-color: var(--info-100)
}
.bg-info-200 {
background-color: var(--info-200)
}
.bg-info-300 {
background-color: var(--info-300)
}
.bg-info-400 {
background-color: var(--info-400)
}
.bg-info-500 {
background-color: var(--info-500)
}
.bg-success-100 {
background-color: var(--success-100)
}
.bg-success-200 {
background-color: var(--success-200)
}
.bg-success-300 {
background-color: var(--success-300)
}
.bg-success-400 {
background-color: var(--success-400)
}
.bg-success-500 {
background-color: var(--success-500)
}
.bg-warning-100 {
background-color: var(--warning-100)
}
.bg-warning-200 {
background-color: var(--warning-200)
}
.bg-warning-300 {
background-color: var(--warning-300)
}
.bg-warning-400 {
background-color: var(--warning-400)
}
.bg-warning-500 {
background-color: var(--warning-500)
}
.bg-danger-100 {
background-color: var(--danger-100)
}
.bg-danger-200 {
background-color: var(--danger-200)
}
.bg-danger-300 {
background-color: var(--danger-300)
}
.bg-danger-400 {
background-color: var(--danger-400)
}
.bg-danger-500 {
background-color: var(--danger-500)
}
.bg-inherit {
background-color: inherit
}
.bg-current {
background-color: currentColor
}
.highlight-checked:has(input[type="checkbox"]:checked) {
background-color: var(--primary-100)
}
.rounded {
border-radius: .25rem
}
.rounded-none {
border-radius: 0
}
.rounded-sm {
border-radius: .125rem
}
.rounded-md {
border-radius: .375rem
}
.rounded-lg {
border-radius: .5rem
}
.rounded-xl {
border-radius: .75rem
}
.rounded-full {
border-radius: 9999px
}
.rounded-e-lg {
border-start-end-radius: .5rem;
border-end-end-radius: .5rem
}
.rounded-t {
border-top-left-radius: .25rem;
border-top-right-radius: .25rem
}
.rounded-t-lg {
border-top-left-radius: .5rem;
border-top-right-radius: .5rem
}
.rounded-t-full {
border-top-left-radius: 9999px;
border-top-right-radius: 9999px
}
.rounded-b {
border-bottom-left-radius: .25rem;
border-bottom-right-radius: .25rem
}
.rounded-b-lg {
border-bottom-left-radius: .5rem;
border-bottom-right-radius: .5rem
}
.rounded-b-full {
border-bottom-left-radius: 9999px;
border-bottom-right-radius: 9999px
}
.rounded-s-full {
border-start-start-radius: 9999px;
border-end-start-radius: 9999px
}
.rounded-e-full {
border-start-end-radius: 9999px;
border-end-end-radius: 9999px
}
.rounded-e-none {
border-start-end-radius: 0;
border-end-end-radius: 0
}
.rounded-s-none {
border-start-start-radius: 0;
border-end-start-radius: 0
}
.ring-1 {
--ps-ring-shadow: var(--ps-ring-inset, ) 0 0 0 calc(1px + var(--ps-ring-offset-width)) var(--ps-ring-color, currentColor);
box-shadow: var(--ps-inset-shadow), var(--ps-inset-ring-shadow), var(--ps-ring-offset-shadow), var(--ps-ring-shadow), var(--ps-shadow)
}
.ring-surface-100 {
--ps-ring-color: var(--surface-100)
}
.ring-surface-200 {
--ps-ring-color: var(--surface-200)
}
.ring-surface-300 {
--ps-ring-color: var(--surface-300)
}
.ring-surface-400 {
--ps-ring-color: var(--surface-400)
}
.ring-surface-500 {
--ps-ring-color: var(--surface-500)
}
.shadow-sm {
box-shadow: 0 1px 2px 0 rgb(0 0 0 / .05)
}
.shadow {
box-shadow: 0 1px 3px 0 rgb(0 0 0 / .1), 0 1px 2px -1px rgb(0 0 0 / .1)
}
.shadow-md {
box-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1)
}
.shadow-lg {
box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)
}
.shadow-xl {
box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1)
}
.shadow-2xl {
box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25)
}
.shadow-inner {
box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / .05)
}
.shadow-none {
box-shadow: 0 0 #0000
}
.scale-50 {
transform: scale(.5)
}
.scale-75 {
transform: scale(.75)
}
.opacity-0 {
opacity: 0
}
.opacity-25 {
opacity: .25
}
.opacity-50 {
opacity: .5
}
.opacity-75 {
opacity: .75
}
.overflow-clip {
overflow: clip
}
.overflow-hidden {
overflow: hidden
}
.overflow-auto {
overflow: auto
}
.overflow-y-auto {
overflow-y: auto
}
.overflow-anywhere {
overflow-wrap: anywhere
}
.cursor-auto {
cursor: auto
}
.cursor-default {
cursor: default
}
.cursor-pointer {
cursor: pointer
}
.cursor-grab {
cursor: grab
}
.cursor-copy {
cursor: copy
}
.block {
display: block
}
.inline-block {
display: inline-block
}
.grid {
display: grid
}
.inline-flex {
display: inline-flex
}
.flex {
display: flex
}
.flex-col {
flex-direction: column
}
.flex-col-reverse {
flex-direction: column-reverse
}
.flex-row {
flex-direction: row
}
.flex-row-reverse {
flex-direction: row-reverse
}
.flex-wrap {
flex-wrap: wrap
}
.flex-nowrap {
flex-wrap: nowrap
}
.flex-1 {
flex: 1
}
.flex-shrink-0,
.shrink-0 {
flex-shrink: 0
}
.hidden {
display: none
}
.whitespace-nowrap {
white-space: nowrap
}
.container-inline,
.\@container {
container-type: inline-size
}
@media (min-width:640px) {
.sm\:hidden {
display: none
}
.sm\:block {
display: block
}
.sm\:flex {
display: flex
}
.sm\:p-0 {
padding: 0
}
.sm\:p-1 {
padding: .25rem
}
.sm\:p-2 {
padding: .5rem
}
.sm\:p-4 {
padding: 1rem
}
.sm\:py-8 {
padding-top: 2rem;
padding-bottom: 2rem
}
.sm\:p-8 {
padding: 2rem
}
.sm\:px-0 {
padding-left: 0;
padding-right: 0
}
.sm\:my-4 {
margin-top: 1rem;
margin-bottom: 1rem
}
.sm\:my-8 {
margin-top: 2rem;
margin-bottom: 2rem
}
.sm\:max-w-md {
max-width: 28rem
}
}
@media (min-width:768px) {
.md\:hidden {
display: none
}
.md\:block {
display: block
}
.md\:flex {
display: flex
}
.md\:overflow-y-auto {
overflow-y: auto
}
.md\:ms-auto {
margin-inline-start: auto
}
}
@media (min-width:1024px) {
.lg\:gap-x-4 {
column-gap: 1rem
}
}
.\@lg\:block {
@container (width>=32rem) {
display: block
}
}
.\@lg\:grid {
@container (width>=32rem) {
display: grid
}
}
.\@lg\:row-start-1 {
@container (width>=32rem) {
grid-row-start: 1
}
}
.\@lg\:row-start-2 {
@container (width>=32rem) {
grid-row-start: 2
}
}
.\@lg\:grid-cols-2 {
@container (width>=32rem) {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
.\@lg\:grid-cols-3 {
@container (width>=32rem) {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
.\@lg\:grid-cols-4 {
@container (width>=32rem) {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
}
.\@lg\:grid-cols-5 {
@container (width>=32rem) {
grid-template-columns: repeat(5, minmax(0, 1fr))
}
}
.\@lg\:grid-cols-6 {
@container (width>=32rem) {
grid-template-columns: repeat(6, minmax(0, 1fr))
}
}
.\@lg\:grid-cols-subgrid {
@container (width>=32rem) {
grid-template-columns: subgrid
}
}
.\@lg\:col-start-1 {
@container (width>=32rem) {
grid-column-start: 1
}
}
.\@lg\:col-start-2 {
@container (width>=32rem) {
grid-column-start: 2
}
}
.\@lg\:col-start-3 {
@container (width>=32rem) {
grid-column-start: 3
}
}
.\@lg\:col-start-4 {
@container (width>=32rem) {
grid-column-start: 4
}
}
.\@lg\:col-start-5 {
@container (width>=32rem) {
grid-column-start: 5
}
}
.\@lg\:col-start-6 {
@container (width>=32rem) {
grid-column-start: 6
}
}
.\@lg\:col-span-1 {
@container (width>=32rem) {
grid-column: span 1 / span 1
}
}
.\@lg\:col-span-2 {
@container (width>=32rem) {
grid-column: span 2 / span 2
}
}
.\@lg\:col-span-3 {
@container (width>=32rem) {
grid-column: span 3 / span 3
}
}
.\@lg\:col-span-4 {
@container (width>=32rem) {
grid-column: span 4 / span 4
}
}
.\@lg\:col-span-full {
@container (width>=32rem) {
grid-column: 1 / -1
}
}
.\@lg\:col-auto {
@container (width>=32rem) {
grid-column: auto
}
}
.\@lg\:ms-auto {
@container (width>=32rem) {
margin-inline-start: auto
}
}
.\@lg\:justify-self-end {
@container (width>=32rem) {
justify-self: end
}
}
.\@lg\:p-1 {
@container (width>=32rem) {
padding: .25rem
}
}
.\@lg\:p-2 {
@container (width>=32rem) {
padding: .5rem
}
}
.\@lg\:p-4 {
@container (width>=32rem) {
padding: 1rem
}
}
.\@2xl\:block {
@container (width>=42rem) {
display: block
}
}
.\@2xl\:row-start-1 {
@container (width>=42rem) {
grid-row-start: 1
}
}
.\@2xl\:row-start-2 {
@container (width>=42rem) {
grid-row-start: 2
}
}
.\@2xl\:grid-cols-2 {
@container (width>=42rem) {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
.\@2xl\:grid-cols-3 {
@container (width>=42rem) {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
.\@2xl\:grid-cols-4 {
@container (width>=42rem) {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
}
.\@2xl\:grid-cols-5 {
@container (width>=42rem) {
grid-template-columns: repeat(5, minmax(0, 1fr))
}
}
.\@2xl\:grid-cols-6 {
@container (width>=42rem) {
grid-template-columns: repeat(6, minmax(0, 1fr))
}
}
.\@2xl\:col-start-1 {
@container (width>=42rem) {
grid-column-start: 1
}
}
.\@2xl\:col-start-2 {
@container (width>=42rem) {
grid-column-start: 2
}
}
.\@2xl\:col-start-3 {
@container (width>=42rem) {
grid-column-start: 3
}
}
.\@2xl\:col-start-4 {
@container (width>=42rem) {
grid-column-start: 4
}
}
.\@2xl\:col-start-5 {
@container (width>=42rem) {
grid-column-start: 5
}
}
.\@2xl\:col-start-6 {
@container (width>=42rem) {
grid-column-start: 6
}
}
.\@2xl\:col-span-1 {
@container (width>=42rem) {
grid-column: span 1 / span 1
}
}
.\@2xl\:col-span-2 {
@container (width>=42rem) {
grid-column: span 2 / span 2
}
}
.\@2xl\:col-span-3 {
@container (width>=42rem) {
grid-column: span 3 / span 3
}
}
.\@2xl\:col-span-4 {
@container (width>=42rem) {
grid-column: span 4 / span 4
}
}
.\@2xl\:text-left {
@container (width>=42rem) {
text-align: left
}
}
.\@2xl\:ms-auto {
@container (width>=42rem) {
margin-inline-start: auto
}
}
.\@2xl\:justify-self-end {
@container (width>=42rem) {
justify-self: end
}
}
.\@2xl\:not-sr-only {
@container (width>=42rem) {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal
}
}
.\@5xl\:block {
@container (width>=64rem) {
display: block
}
}
.\@5xl\:row-start-1 {
@container (width>=64rem) {
grid-row-start: 1
}
}
.\@5xl\:grid-cols-2 {
@container (width>=64rem) {
grid-template-columns: repeat(2, minmax(0, 1fr))
}
}
.\@5xl\:grid-cols-3 {
@container (width>=64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr))
}
}
.\@5xl\:grid-cols-4 {
@container (width>=64rem) {
grid-template-columns: repeat(4, minmax(0, 1fr))
}
}
.\@5xl\:grid-cols-5 {
@container (width>=64rem) {
grid-template-columns: repeat(5, minmax(0, 1fr))
}
}
.\@5xl\:grid-cols-6 {
@container (width>=64rem) {
grid-template-columns: repeat(6, minmax(0, 1fr))
}
}
.\@5xl\:col-start-2 {
@container (width>=64rem) {
grid-column-start: 2
}
}
.\@5xl\:col-start-3 {
@container (width>=64rem) {
grid-column-start: 3
}
}
.\@5xl\:col-start-4 {
@container (width>=64rem) {
grid-column-start: 4
}
}
.\@5xl\:col-start-5 {
@container (width>=64rem) {
grid-column-start: 5
}
}
.\@5xl\:col-start-6 {
@container (width>=64rem) {
grid-column-start: 6
}
}
.\@5xl\:col-span-1 {
@container (width>=64rem) {
grid-column: span 1 / span 1
}
}
.\@5xl\:col-span-2 {
@container (width>=64rem) {
grid-column: span 2 / span 2
}
}
.\@5xl\:col-span-3 {
@container (width>=64rem) {
grid-column: span 3 / span 3
}
}
.\@5xl\:col-span-4 {
@container (width>=64rem) {
grid-column: span 4 / span 4
}
}
.\@5xl\:ms-0 {
@container (width>=64rem) {
margin-inline-start: calc(var(--spacing) * 0)
}
}
.\@5xl\:justify-self-start {
@container (width>=64rem) {
justify-self: start
}
}
.\@5xl\:justify-self-end {
@container (width>=64rem) {
justify-self: end
}
}
.\@5xl\:max-w-md {
@container (width>=64rem) {
max-width: 28rem
}
}
.slice-fill-01 {
background-color: var(--slice-fill-01)
}
.slice-fill-02 {
background-color: var(--slice-fill-02)
}
.slice-fill-03 {
background-color: var(--slice-fill-03)
}
.slice-fill-04 {
background-color: var(--slice-fill-04)
}
.slice-fill-05 {
background-color: var(--slice-fill-05)
}
.slice-fill-06 {
background-color: var(--slice-fill-06)
}
.chart-stack-x {
>:first-child {
border-start-start-radius: 9999px;
border-end-start-radius: 9999px
}
>:last-child {
border-start-end-radius: 9999px;
border-end-end-radius: 9999px
}
}
.chart-stack-y {
>:first-child {
border-end-start-radius: .25rem;
border-end-end-radius: .25rem
}
>:last-child {
border-start-start-radius: .25rem;
border-start-end-radius: .25rem
}
}
.pie-donut-wrapper {
--size: 10rem;
--slice-01: 20;
--slice-02: 40;
--slice-03: 60;
--slice-04: 80;
--slice-05: 90;
--slice-06: 100;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 1rem;
column-gap: 2rem;
.pie,
.donut {
height: var(--size);
width: var(--size);
border-radius: 50%;
background: conic-gradient(var(--slice-fill-01) 0% calc(var(--slice-01) * 1%), var(--slice-fill-02) 0 calc(var(--slice-02) * 1%), var(--slice-fill-03) 0 calc(var(--slice-03) * 1%), var(--slice-fill-04) 0% calc(var(--slice-04) * 1%), var(--slice-fill-05) 0 calc(var(--slice-05) * 1%), var(--slice-fill-06) 0 calc(var(--slice-06) * 1%))
}
.donut {
-webkit-mask: radial-gradient(circle closest-side, transparent 60%, black 61%);
mask: radial-gradient(circle closest-side, transparent 60%, black 61%)
}
.pie+ol.legend,
.donut+ol.legend {
display: flex;
flex-direction: column;
gap: .75rem;
li.legend-item {
display: flex;
gap: .75rem;
align-items: center;
font-size: .875rem;
line-height: 1.25rem;
color: var(--typography-200);
.legend-item-dot {
width: .75rem;
height: .75rem;
border-radius: 50%
}
&:nth-child(1) .legend-item-dot {
background-color: var(--slice-fill-01)
}
&:nth-child(2) .legend-item-dot {
background-color: var(--slice-fill-02)
}
&:nth-child(3) .legend-item-dot {
background-color: var(--slice-fill-03)
}
&:nth-child(4) .legend-item-dot {
background-color: var(--slice-fill-04)
}
&:nth-child(5) .legend-item-dot {
background-color: var(--slice-fill-05)
}
&:nth-child(6) .legend-item-dot {
background-color: var(--slice-fill-06)
}
}
}
}
.circular-bar-wrapper {
display: inline-block;
position: relative;
.circular-bar {
--size: 10rem;
--percentage-color: var(--violet-400);
--bg-color: var(--violet-100);
height: var(--size);
width: var(--size);
border-radius: 50%;
background: conic-gradient(var(--percentage-color) calc(var(--percentage) * 1%), var(--bg-color) 0);
-webkit-mask-image: radial-gradient(circle, transparent 40%, black 41%);
mask-image: radial-gradient(circle, transparent 60%, black 61%);
display: flex;
align-items: center;
justify-content: center
}
.text-wrapper {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
gap: .125rem;
align-items: center;
justify-content: center;
padding: .75rem;
text-align: center
}
}
@keyframes fadeIn {
0% {
opacity: .1
}
100% {
opacity: 1
}
}
@keyframes scaleIn {
0% {
opacity: .9;
scale: .95
}
100% {
opacity: 1;
scale: 1
}
}
@keyframes slideInFromRight {
0% {
transform: translateX(10%);
opacity: 0
}
100% {
transform: translateX(0);
opacity: 1
}
}
@keyframes slideInFromLeft {
0% {
transform: translateX(-10%);
opacity: 0
}
100% {
transform: translateX(0);
opacity: 1
}
}
.transition-all {
transition-property: all;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
transition-duration: 150ms
}
.ease-in {
transition-timing-function: cubic-bezier(.4, 0, 1, 1)
}
.ease-out {
transition-timing-function: cubic-bezier(0, 0, .2, 1)
}
.ease-in-out {
transition-timing-function: cubic-bezier(.4, 0, .2, 1)
}
.animate-spin {
animation: spin 1s linear infinite
}
.animate-ping {
animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite
}
.animate-pulse {
animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite
}
@keyframes spin {
from {
transform: rotate(0deg)
}
to {
transform: rotate(360deg)
}
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0
}
}
@keyframes pulse {
0%,
100% {
opacity: 1
}
50% {
opacity: .5
}
}
.bounce {
text-align: center
}
.bounce>div {
display: inline-block;
border-radius: 9999px;
animation: sk-bouncedelay 1.4s infinite ease-in-out both
}
.bounce .bounce1 {
animation-delay: -0.32s
}
.bounce .bounce2 {
animation-delay: -0.16s
}
@keyframes sk-bouncedelay {
0%,
80%,
100% {
transform: scale(0)
}
40% {
transform: scale(1)
}
}