/* Espresso colors — canonical token scale, plain CSS (source of truth). * Dark block uses [data-theme="dark"] to match Frappe desk theme switching. * Loaded via scss/espresso/_colors.scss (which also keeps the Bootstrap $-var bridge). * Legacy overlays/gradients/neutral that Espresso colors does not define live in legacy.css. */ /* GENERATED — Espresso color tokens, framework-neutral layer. Raw palette + semantic aliases (--surface-* / --ink-* / --outline-*) as plain CSS custom properties on :root / .dark. This file alone is enough to style all Espresso components; it works with or without Tailwind. */ :root { --gray-50: #f8f8f8; --gray-300: #e2e2e2; --gray-400: #c7c7c7; --gray-500: #999999; --gray-600: #7c7c7c; --white: #ffffff; --surface-base: var(--white); --surface-gray-1: var(--gray-50); --surface-gray-4: var(--gray-300); --ink-gray-5: var(--gray-600); --outline-gray-2: var(--gray-300); }/* Espresso legacy color tokens — overlays, gradients, and the neutral family * that the canonical Espresso color scale (colors.css) does not (yet) define but * Desk still references. Preserved verbatim from the old espresso/_colors.scss. * TODO: reconcile/remove when installing the Espresso effects/base token files. */ /* >>> deprecated tokens — generated from migration/legacy-map.css + old files >>> */ /* DEPRECATED — do not use in new code. Kept so existing Framework code and third-party apps keep working; migrate usages to Espresso tokens directly. */ /* Reviewed Espresso aliases (light+dark handled by Espresso). */ :root { /* Surfaces / layout */ --fg-color: var(--surface-base); --disabled-control-bg: var(--surface-gray-1); /* Text / ink */ --text-light: var(--ink-gray-5); --icon-stroke: currentColor; /* Borders / outlines */ --dark-border-color: var(--outline-gray-2); /* Controls / Bootstrap .btn */ /* Color fills: --bg- → surface--2 */ /* Color text: --text-on- → ink--8 (standardized, no dark nudge) */ /* Misc */ } /* Preserved legacy color tokens — OLD values verbatim, TODO: remap to Espresso. */ :root { /* TODO: remove the --alert-* block (here and in the dark section below) once the bootstrap .alert banners move to the es-alert component — common/alert.scss is their only consumer. ~19 call sites, listed in the component plan (includes user.py, which renders alerts server-side). */ --icon-fill: transparent; } /* <<< deprecated tokens <<< */ /* DEPRECATED effects aliases + preserved tokens. Renames -> Espresso (values follow Espresso). --shadow-xs/--custom-shadow-sm/--drop-shadow have no Espresso equivalent and keep their old values. Migrate usages to Espresso names over time. */ /* DEPRECATED typography aliases — old weight names -> Espresso --font-weight-*, and --text-md (was a 14px alias of base). Migrate usages to Espresso names. */ /* Espresso theme names added to the indicator color-pair system (alongside the retained legacy colors above) — so Framework's migrated indicator defs and the .indicator dot render amber/violet. Map to Espresso. *//* Espresso typography — sizes, weights, and ready-to-use type-style classes, * plain CSS (source of truth). Installed from design-poc/shared/tokens/espresso-typography.css. * Dropped (Tailwind-only): the ----line-height/--letter-spacing/--font-weight * companions and the @theme block. Classes are unlayered (Frappe CSS is unlayered). * Loaded via espresso/_typography.scss. */ :root { --font-weight-regular: 420; --text-base: 14px; --text-lg: 16px; /* ** Paragraphs ** */ } /* Type-style classes — every size x weight, all properties set literally. *//* Espresso effects — elevations (shadows) + focus rings, plain CSS (source of truth). * Installed from design-poc/shared/tokens/espresso-effects.css. The Tailwind * @theme/@utility adapters stay in frappe-ui; here the --shadow-* names are * emitted as real :root custom properties (aliasing --elevation-*) so non-Tailwind * consumers (Frappe/Bootstrap) can use var(--shadow-*). Loaded via espresso/_shadows.scss. * Espresso 2.0: elevations use the same (light) values in both themes; only focus * rings change in dark ([data-theme="dark"]). */ :root { /* --shadow-* as real props (the frappe-ui @theme inline mapping, for Frappe). */ } /* Espresso spacing — the base unit, plain CSS (source of truth). * Installed from design-poc/shared/tokens/espresso-spacing.css (neutral only; * Espresso's fractional @theme steps stay in frappe-ui). Lets non-Tailwind * consumers build spacing with calc(var(--spacing) * N). Loaded via espresso/_spacing.scss. */ :root { --spacing: 0.25rem; } /* Espresso radius — canonical scale, plain CSS (source of truth). * Installed from design-poc/shared/tokens/espresso-radius.css (neutral :root only; * the Tailwind @theme adapter stays in frappe-ui). Loaded via espresso/_borders.scss. */ :root { --radius: 8px; } /* static fonts */ /* Espresso Badge — framework-neutral component, plain CSS. Styled via .es-badge * + data-attributes (data-variant / data-size / data-theme), binding only to * espresso color/radius/spacing tokens. Source of truth in Framework; frappe-ui * apps import this and wrap it in @layer components for Tailwind override. * Unlayered here (Frappe/Bootstrap is unlayered; a layer would lose to it). */ /* ---- sizes (override the md default) ---- */ /* ---- themes (override the gray default — the unrolled @each) ---- */ /* ---- variants (override the subtle default) ---- * outline/ghost must reset the subtle background the base applies. */ /* shrinks with an ellipsis when the badge is narrower than its label */ /* ---- icons ---- * One rule covers both framework idioms: React passes icons as direct

(horizontal) or with * data-orientation="vertical". Add data-flex-item when a vertical divider * sits in a flex row and should stretch to the row's height. * * Action form: a small button sitting on the line — *

* * *

* data-position="start" or "end" moves the button off-center. * (The vertical action form isn't ported yet — add it when needed.) */ /* ---- action form: button over the line ---- */ /* Espresso Avatar — a user/thing picture with an initials fallback. * * Markup: * *

— or — * N * * * Attributes (all optional): * data-size xs | sm | md | lg | xl | 2xl | 3xl (default: md) * data-shape circle | square (default: circle) * data-theme gray | blue | green | amber | red | violet (default: gray) * * The theme colors the initials fallback; an image simply covers it. * An optional status dot sits at the bottom-right corner: * */ /* ---- sizes (width/height, fallback text, square radius) ---- */ /* ---- themes (color the initials fallback) ---- */ /* ---- children ---- */ /* ---- status indicator: a dot in a ring, bottom-right ---- */ /* Espresso Alert — a static message banner with an optional icon, * description and dismiss button. * * Markup: *

* (themed icon, optional) *

* ... *

...

(optional) *

* (optional) *

* * Attributes (all optional): * data-theme yellow | blue | red | green (no theme = plain gray, no icon) * data-variant subtle | outline (default: subtle) * * "yellow" uses the amber tokens — the name comes from frappe-ui's Alert. */ /* ---- themes ---- */ /* ---- outline variant: border instead of a filled background ---- */ /* ---- children ---- */ /* no icon: let the content start in the first column */ /* ---- footer (element form): sits under the content, e.g. action buttons ---- */ /* no icon: line the footer up with the content, which starts in column 1 */ /* Espresso Breadcrumbs — the "where am I" trail. * * Markup (a real nav + list, so screen readers announce it properly): * * * Items are links (href), buttons (onclick), or plain spans (neither); * the last one is the current page — darker, and it truncates with a * tooltip when space runs out. The "collapse extra * crumbs into a dropdown" behavior from frappe-ui isn't ported yet — it * needs the Dropdown component. */ /* the "/" between items; the empty alt text keeps screen readers quiet */ /* markup appended by hand carries no __item class of its own; the old desk API let callers append plain `

` and it has to keep looking like a crumb */ /* only real links and buttons look and react clickable — a plain-text crumb (no href, no onclick) renders as a span and stays put */ /* the current page: darker, and it truncates instead of pushing the row */ /* prefix/suffix icons: text-sized, with their own margin toward the label (no gap on the item — a lone icon then needs no special casing) *//* Espresso Toast — the floating message pill, bottom-right. * * Dark pill on every theme (same inverted look as frappe-ui's toast): *

* *

Saved

optional second line

* (optional) * (optional) *

* * data-type info | success | warning | error — colors the icon. * Toasts live in .es-toast-container, which frappe.ui.toast manages. */ /* .out is the old alert's exit class — old code slides a toast away by adding it to the element show_alert returned, so it keeps working here. The element stays in the DOM until its timer removes it, hence no pointer events while (in)visible. */ /* ---- icon colors per type ---- */ /* ---- content ---- */ /* Links in the message or description have the same problem as 'close' class, it's styled directly by the global `a { color: var(--text-color) }`. This out-specifies the global styles*/ /* extra html passed through the legacy body option */ /* save-success toasts pass "next action" buttons through body */ /* ---- action + close buttons ---- */ /* The button also carries bootstrap's old "close" class so legacy .find(".close").click() dismissals keep working. Bootstrap styles .close globally and loads after this file, so these selectors out-specify its rules (including the :hover/:focus opacity one) to keep the toast look. */ @keyframes es-toast-in { from { transform: translateX(120%); opacity: 0.5; } to { transform: translateX(0); opacity: 1; } } @keyframes es-toast-out { to { transform: translateX(120%); opacity: 0; } } /* Espresso Menu — the floating panel shared by Dropdown and ContextMenu. * * Framework-neutral: the class + data-attribute contract below is everything. * The data-attribute names (data-state, data-highlighted, data-disabled) are * the ones radix/reka emit, so React and Vue apps get this styling from their * menu primitives as-is; classic frappe gets them from frappe.ui.Dropdown. * * * * Item attributes: * data-highlighted the keyboard/pointer-active row * data-state="checked" app-marked current choice (visual only) * data-state="open" submenu row whose panel is open * data-disabled / disabled inert row * data-theme="red" destructive row * * Panel attributes: * data-state="open|closed" drives enter/exit animation * data-motion="animated|instant" pointer opens animate, keyboard opens don't * data-side / data-align where the panel sits; sets the scale origin * * Rows are links or buttons; no hover styling on purpose — the highlight * follows data-highlighted so pointer and keyboard can't mark two rows at * once (same as radix/reka). Row height comes from padding + line-height * only, never a fixed height. */ /* ---- groups ---- */ /* ---- rows ---- */ /* submenu row whose panel is open stays lit */ /* the app-marked current choice */ /* ---- red (destructive) rows ---- */ /* ---- disabled rows ---- */ /* ---- icons ---- */ /* an image mark where no lucide icon will do — an app's logo, say. Same box as an icon, so a menu mixing the two keeps one label column. */ /* ---- label + optional description ---- */ /* ---- Alt-key mnemonics ---- Each row has one letter of its label wrapped in .es-menu__mnemonic. It's only underlined while Alt is held (the panel gets data-alt then), matching frappe's Alt+letter menu shortcuts. Alt+that letter activates the row. */ /* ---- keyboard shortcut hint: one per key ---- Both bootstrap and desk/global.scss style bare kbd (dark background, fixed height, padding) and load after this file — the two-class selector out-specifies them. */ /* mobile layouts have no keyboard — the combo hints are noise there (the bindings themselves stay active for attached keyboards) */ /* ---- trailing icon (icon_right) ---- */ /* ---- submenu chevron ---- */ /* rows with a shortcut AND a submenu: the shortcut already pushed right, the chevron just follows the gap */ /* ---- empty state ---- */ /* ---- loading state (async options/submenu, swapped out by fill()) ---- */ /* ---- motion: scale in from the trigger corner (per the frappe-ui spec: enter 180ms / exit 140ms, keyboard opens skip the scale and only get a short fade that masks the position-settle frame) ---- */ @keyframes es-menu-in { from { opacity: 0; transform: scale(0.97) translateY(2px); } } @keyframes es-menu-fade-in { from { opacity: 0; } } @keyframes es-menu-out { to { opacity: 0; transform: scale(0.97) translateY(2px); } } /* scale origin = the edge touching the trigger *//* Espresso Tooltip — the small dark bubble that names a control on hover. * * Framework-neutral: the class + data-attribute contract below is everything. * The attribute names (data-state, data-side, data-align) are the ones * radix/reka emit, so React and Vue apps get this styling from their tooltip * primitives as-is; classic frappe gets them from frappe.ui.tooltip(). * * * Label text * * * * Panel attributes: * data-state="open|closed" drives enter/exit animation * data-side / data-align which side of the trigger it landed on * * The owner sets top/left inline (fixed viewport coordinates, panel appended * to — same rules as .es-menu, see position.js). The arrow's position * along the edge comes from --arrow-offset, which the owner sets so the * arrow keeps pointing at the trigger even when the bubble was nudged to * stay on screen. * * pointer-events: none on purpose — a tooltip must never catch the pointer, * or it would flicker (bubble appears under the cursor, "hover leaves" the * trigger, bubble hides, hover returns, ...). It's a label, not a surface. */ /* ---- a label that lists things reads from one left edge ---- */ /* ---- keyboard hint: one per key after the label ---- Bootstrap and desk/global.scss both style bare kbd (dark chip, padding, box-shadow) and load after this file — the two-class selector out-specifies them, same trick as the menu shortcuts. */ /* ---- plain: a bubble with no arrow ---- For triggers where an arrow adds nothing but clutter: a run of same-sized tiles whose labels all appear in the same place, where the bubble's own position already says which tile it belongs to. The owner omits the arrow node as well (see tooltip.js), so this only has to cover a bubble built elsewhere. */ /* ---- arrow: an 8x4 triangle on the edge facing the trigger ---- Made from borders: a 4px transparent frame where only the side facing away from the bubble is filled, which reads as a triangle. --arrow-offset is the distance from the panel's left (top/bottom sides) or top (left/ right sides) edge to the arrow's center. */ /* ---- motion (enter = fade-in-0 zoom-in-95 + slide-in-from--2, i.e. the bubble starts near the trigger at 95% scale and settles out; exit = fade-out-0 zoom-out-95, no slide). The zoom grows out of the arrow, not the bubble's center — the arrow marks where the trigger is, so that's where the bubble should come from. --arrow-offset (set by the owner) doubles as the origin. ---- */ @keyframes es-tooltip-in { from { opacity: 0; transform: var(--slide-from, none) scale(0.95); } } @keyframes es-tooltip-out { to { opacity: 0; transform: scale(0.95); } }/* Espresso Popover — a small non-modal panel anchored to a trigger, for * things like filter panels and quick forms. Unlike a menu it holds real * interactive content (inputs, buttons), and unlike a dialog it doesn't * block the rest of the page. * * Framework-neutral: the class + data-attribute contract below is * everything. The attribute names (data-state, data-side, data-align) are * the ones radix/reka emit, so React and Vue apps get this styling from * their popover primitives as-is; classic frappe gets them from * frappe.ui.Popover. * * * * Title * Optional line under it. * * ... any content ... * * * Panel attributes: * data-state="open|closed" drives enter/exit animation * data-side / data-align which side of the trigger it landed on * * The owner sets top/left inline (fixed viewport coordinates, panel * appended to — same rules as .es-menu, see position.js). */ /* ---- optional header block (title + description) ---- */ /* ---- motion enter = fade-in-0 zoom-in-95 + slide-in-from--2, exit = fade-out-0 zoom-out-95) ---- */ @keyframes es-popover-in { from { opacity: 0; transform: var(--slide-from, none) scale(0.95); } } @keyframes es-popover-out { to { opacity: 0; transform: scale(0.95); } } /* scale origin = the edge touching the trigger */ /* Espresso Hover Card — a rich preview that appears when the pointer rests * on something (a user link shows the person's card, a document link shows * a summary). It's Tooltip's timing with Popover's body. * * The shell IS the popover shell — same surface, border, shadow, radius and * enter/exit motion — so this class is a small modifier used WITH it: * * * ... any content ... * * * React/Vue apps put both classes on their HoverCardContent primitive and * everything in popover.css (data-state, data-side/align, animations) * applies as-is; classic frappe gets the markup from frappe.ui.hover_card. * *//* Espresso Tabs — an underline tab bar with panels. For switching between * views of the same thing; for picking a value use Pills (es-pills). * * Framework-neutral: the class + data-attribute contract below is * everything. data-state="active|inactive" and data-orientation are what * radix/reka tab primitives emit, so React and Vue apps get this styling * as-is; classic frappe gets the markup from frappe.ui.tabs. * * * * * * * * ... * ... * * * The indicator is the moving 2px bar under the active tab. Its position * comes from two custom properties the owner sets on it — and reka's * TabsIndicator publishes the same numbers under its own names, which are * wired in as fallbacks, so frappe-ui apps get the slide animation with * zero extra code: * --es-tabs-indicator-x offset to the active tab (px) * --es-tabs-indicator-w width of the active tab (px) * Without JS (static markup) there is no bar — the active tab still reads * clearly from its ink color. */ /* ---- the tab bar (paddings/gaps straight from frappe-ui's Tabs.vue: list = p-1 gap-5, horizontal adds px-5, vertical adds py-3; horizontal triggers carry py-2.5, vertical ones px-2.5 and NO vertical padding — row rhythm in a vertical bar comes from the list's gap) ---- */ /* ---- tabs ---- */ /* ---- the sliding indicator ---- */ /* ---- panels ---- *//* Espresso Tab Buttons — a segmented single-select where exactly one * button is pressed (frappe-ui's TabButtons), built from Pills. For * choices, not navigation: page-size selectors, calendar day/week/month, * view toggles. No panels — that's what Tabs (es-tabs) are for. * * Two classes, mirroring frappe-ui's split: * .es-pill the unitary piece (frappe-ui's Pill) — styled entirely * by its own data-attributes, so it also works standalone * .es-tab-buttons the group: the rail behind the pills, the gaps, the * orientation * * * * * * * Group attributes: * data-type="subtle|ghost|underline|browser-tab" subtle is the default * data-size="sm|md" sm is the default * data-orientation="vertical" * data-direction="right" which edge vertical browser-tabs attach to * * Pill attributes (data-state="active|inactive" is what frappe-ui's Pill * emits, so Vue apps get this styling from their component as-is): * data-state="active|inactive" * data-variant="outline|underline|browser-tab" none = default look * data-size="md" none = sm * data-active-style="subtle" none = raised * data-icon-only square, label is aria-only * data-tab-base="default|left|right" browser-tab edge shape * * Sizing comes from padding + line-height only, never a fixed height. */ /* ================= the pill ================= */ /* icons: 16px at sm, 18px at md (Pill.vue size-4 / size-[18px]) */ /* icon-only pills are square (Pill.vue: p-[5px]), label goes aria-only */ /* ---- default look: quiet, raised when pressed ---- */ /* on a ghost group there is no rail to rise out of — the pressed pill just tints (Pill's activeStyle="subtle") */ /* ---- outline look ---- */ /* ---- underline look: reads like a tab, works like a radio ---- */ /* the indicator overlays the group's rail segment so it reads as a darker stretch of the same line, not a separate bar floating beside the label */ /* vertical underline pills: the rail (and indicator) sit on the end edge */ /* ---- browser-tab look ---- */ /* the active tab "punches through" the rail: a background-colored strip extends a few pixels past the rail line so the tab visibly continues into the area below instead of terminating at the rail (which the eye reads as a closed corner). Border one step darker than the rail so the tab reads as a distinct raised shape; no drop shadow — it would paint below the rail and re-close the edge this opens. */ /* top-attached (horizontal groups) */ /* the rail-side edge stays 1px wide but transparent — zeroing its WIDTH (border-bottom: 0) resets the color to currentColor, and on deselect the border-color transition would animate that near-black back to transparent: a dark line flashing under the tab you just left */ /* side-attached (vertical groups; base = the edge touching the rail) */ /* ================= the group ================= */ /* ---- vertical groups ---- */ /* every pill hugs the start edge and spans the column, like vertical tabs */ /* Espresso Progress — a linear progress bar (frappe-ui's Progress), for * data imports, bulk actions, onboarding, backups. * * * * Importing * 30% * * * * * * * Interval form: the track gets data-intervals and holds equal segments * instead of a fill; done ones carry data-filled. * * * * * * * Track attributes: * data-size="sm|md|lg|xl" bar thickness, sm (2px) is the default * data-intervals segmented instead of continuous */ /* ---- optional header: label on the left, hint on the right ---- */ /* ---- the bar ---- */ /* ---- interval form: equal segments with gaps; the rounded track clips the outer corners of the first and last segment ---- */ /* Espresso Stepper: the step header for multi-step flows (wizards). * * frappe-ui and radix ship no stepper, so this file is the contract: a * Vue/React port can render the same classes and data-attributes. If * frappe-ui grows a Stepper later, converge there. * * Markup contract (framework-neutral, like every es component): * * * * * * … * * * data-state: active | completed | locked; absent = upcoming. * data-completed="true" marks a done step regardless of position, so a * revisited step can be active and completed at once. A connector gets it * once the step before it is done. * Marker icons come from the JS half: check (completed), dot (active and * completed), circle-dot-dashed (active), circle-dashed (upcoming, locked). * Completed markers sit on a filled disc painted by the marker box. There is * no chip fill; ink strength (gray-7 vs gray-4) carries state. * Locked steps use aria-disabled, not disabled, so they stay in the tab * order; the click guard blocks them and calls on_locked_click. * * Compact mode (JS option `compact`) renders the frappe.ui.progress interval * form with a "Step x of y" hint for narrow layouts; mount a compact and a * full instance and toggle visibility at your breakpoint. */ /* Sprite internals can't be part-styled, so the marker box paints the disc. */ /* Lucide's dot is a tiny circle; a thick stroke makes it readable. */ /* Fixed box so markers don't shift layout when the state changes. */ /* Reset the global .icon margin, which drifts in flex layouts. */:root{--font-stack: "Inter", "InterVariable", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif !important}:root{--font-stack: "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--text-line-height-3xl: 115%;--text-line-height-4xl: 160%;--text-line-height-7xl: 140%;--text-line-height-12xl: 130%;--text-line-height-14xl: 120%;--para-line-height-2-xs: 160%;--para-line-height-sm: 150%;--para-line-height-2xl: 148%;--para-line-height-3xl: 140%}:root{--input-padding: 6px 8px;--dropdown-padding: 4px 8px;--grid-padding: 10px 8px;--number-card-padding: 8px 8px 8px 12px}:root{--padding-xs: 5px;--padding-sm: 7px;--padding-md: 15px;--padding-lg: 20px;--padding-xl: 30px;--padding-2xl: 40px;--margin-xs: 5px;--margin-sm: 10px;--margin-md: 15px;--margin-lg: 20px;--margin-xl: 30px;--margin-2xl: 40px;--page-max-width: 900px;--modal-shadow: var(--shadow-md);--card-shadow: var(--shadow-sm);--btn-shadow: var(--shadow-xs);--navbar-height: 48px;--shadow-inset: inset 0px -1px 0px var(--gray-300);--highlight-shadow: 1px 1px 10px var(--blue-50), 0px 0px 4px var(--blue-600);--code-block-bg: var(--gray-900);--code-block-text: var(--gray-400);--btn-height: 28px;--input-height: 28px;--checkbox-right-margin: var(--margin-xs);--checkbox-size: 14px;--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);--checkbox-gradient: linear-gradient(180deg, var(--primary) -124.51%, var(--primary) 100%);--checkbox-disabled-gradient: linear-gradient( 180deg, var(--disabled-control-bg) -124.51%, var(--disabled-control-bg) 100% );--right-arrow-svg: url("data: image/svg+xml;utf8, ");--left-arrow-svg: url("data: image/svg+xml;utf8, ")}@media(max-width: 991.98px){:root{--checkbox-size: 18px}}:root{--light: #f3f3f3;--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.5rem;--font-size-5xl: 3rem;--font-size-6xl: 4rem;--card-border-radius: 0.75rem}/*! * Quill Editor v2.0.3 * https://quilljs.com * Copyright (c) 2017-2024, Slab * Copyright (c) 2014, Jason Chen * Copyright (c) 2013, salesforce.com *//*! * Quill Editor v2.0.3 * https://quilljs.com * Copyright (c) 2017-2024, Slab * Copyright (c) 2014, Jason Chen * Copyright (c) 2013, salesforce.com *//*! * Bootstrap v4.6.2 (https://getbootstrap.com/) * Copyright 2011-2022 The Bootstrap Authors * Copyright 2011-2022 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE) */:root{--blue: #007bff;--indigo: #6610f2;--purple: #6f42c1;--pink: #e83e8c;--red: #dc3545;--orange: #fd7e14;--yellow: #ffc107;--green: #28a745;--teal: #20c997;--cyan: #17a2b8;--white: #fff;--gray: #7c7c7c;--gray-dark: #383838;--primary: #171717;--secondary: #7c7c7c;--success: #28a745;--info: #17a2b8;--warning: #ffc107;--danger: #e03636;--light: #f3f3f3;--dark: #383838;--breakpoint-xs: 0;--breakpoint-sm: 576px;--breakpoint-md: 768px;--breakpoint-lg: 992px;--breakpoint-xl: 1200px;--breakpoint-2xl: 1440px;--font-family-sans-serif: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}*,*::before,*::after{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,footer,header,main,nav,section{display:block}body{margin:0;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#525252;text-align:left;background-color:#fff}[tabindex="-1"]:focus:not(:focus-visible){outline:0 !important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3{margin-top:0;margin-bottom:.5rem}p{margin-top:0;margin-bottom:1rem}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ul,dl{margin-top:0;margin-bottom:1rem}ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}b,strong{font-weight:bolder}small{font-size:80%}a{color:#ef7d00;text-decoration:none;background-color:rgba(0,0,0,0)}a:hover{color:#a35500;text-decoration:underline}a:not([href]):not([class]){color:inherit;text-decoration:none}a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code{font-family:SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:1em}img{vertical-align:middle;border-style:none}svg{overflow:hidden;vertical-align:middle}table{border-collapse:collapse}th{text-align:inherit;text-align:-webkit-match-parent}label{display:inline-block;margin-bottom:.5rem}button{border-radius:0}button:focus:not(:focus-visible){outline:0}input,button,select{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,input{overflow:visible}button,select{text-transform:none}select{word-wrap:normal}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button:not(:disabled),[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled){cursor:pointer}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{padding:0;border-style:none}input[type=radio],input[type=checkbox]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:none}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}[hidden]{display:none !important}h1,h2,h3{margin-bottom:.5rem;font-weight:500;line-height:1.2;color:#171717}h1{font-size:2.5rem}h2{font-size:2rem}h3{font-size:1.75rem}hr{margin-top:1rem;margin-bottom:1rem;border:0;border-top:1px solid rgba(0,0,0,.1)}small{font-size:0.875em;font-weight:400}code{font-size:87.5%;color:#6f42c1;word-wrap:break-word}a>code{color:inherit}.container{width:100%;padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto}@media(min-width: 576px){.container{max-width:540px}}@media(min-width: 768px){.container{max-width:840px}}@media(min-width: 992px){.container{max-width:1090px}}@media(min-width: 1200px){.container{max-width:1290px}}.row{display:flex;flex-wrap:wrap;margin-right:-15px;margin-left:-15px}.col-md-6,.col-sm-6,.col-12{position:relative;width:100%;padding-right:15px;padding-left:15px}.col-12{flex:0 0 100%;max-width:100%}@media(min-width: 576px){.col-sm-6{flex:0 0 50%;max-width:50%}}@media(min-width: 768px){.col-md-6{flex:0 0 50%;max-width:50%}}.form-control{display:block;width:100%;height:28px;padding:.375rem .75rem;font-size:1rem;font-weight:400;line-height:1.5;color:#525252;background-color:#f3f3f3;background-clip:padding-box;border:1px solid #f3f3f3;border-radius:.375rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}@media(prefers-reduced-motion: reduce){.form-control{transition:none}}.form-control::-ms-expand{background-color:rgba(0,0,0,0);border:0}.form-control:focus{color:#525252;background-color:#ededed;border-color:#ededed;outline:0;box-shadow:none}.form-control::placeholder{color:#7c7c7c;opacity:1}.form-control:disabled,.form-control[readonly]{background-color:#ededed;opacity:1}input[type=date].form-control,input[type=time].form-control,input[type=datetime-local].form-control,input[type=month].form-control{appearance:none}select.form-control:-moz-focusring{color:rgba(0,0,0,0);text-shadow:0 0 0 #525252}select.form-control:focus::-ms-value{color:#525252;background-color:#f3f3f3}select.form-control[size],select.form-control[multiple]{height:auto}.form-group{margin-bottom:1rem}.collapse:not(.show){display:none}.nav-link{display:block;padding:.5rem 1rem}.nav-link:hover,.nav-link:focus{text-decoration:none}.navbar{position:relative;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:1rem 1rem}.navbar .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}.navbar-brand{display:inline-block;padding-top:.40625rem;padding-bottom:.40625rem;margin-right:1rem;font-size:1.125rem;line-height:inherit;white-space:nowrap}.navbar-brand:hover,.navbar-brand:focus{text-decoration:none}.navbar-nav{display:flex;flex-direction:column;padding-left:0;margin-bottom:0;list-style:none}.navbar-nav .nav-link{padding-right:0;padding-left:0}.navbar-collapse{flex-basis:100%;flex-grow:1;align-items:center}.navbar-toggler{padding:.25rem .75rem;font-size:1.125rem;line-height:1;background-color:rgba(0,0,0,0);border:1px solid rgba(0,0,0,0);border-radius:.375rem}.navbar-toggler:hover,.navbar-toggler:focus{text-decoration:none}@media(max-width: 991.98px){.navbar-expand-lg>.container{padding-right:0;padding-left:0}}@media(min-width: 992px){.navbar-expand-lg{flex-flow:row nowrap;justify-content:flex-start}.navbar-expand-lg .navbar-nav{flex-direction:row}.navbar-expand-lg .navbar-nav .nav-link{padding-right:1rem;padding-left:1rem}.navbar-expand-lg>.container{flex-wrap:nowrap}.navbar-expand-lg .navbar-collapse{display:flex !important;flex-basis:auto}.navbar-expand-lg .navbar-toggler{display:none}}.navbar-light .navbar-brand{color:rgba(0,0,0,.9)}.navbar-light .navbar-brand:hover,.navbar-light .navbar-brand:focus{color:rgba(0,0,0,.9)}.navbar-light .navbar-nav .nav-link{color:rgba(0,0,0,.5)}.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .nav-link:focus{color:rgba(0,0,0,.7)}.navbar-light .navbar-toggler{color:rgba(0,0,0,.5);border-color:rgba(0,0,0,.1)}@keyframes progress-bar-stripes{from{background-position:1rem 0}to{background-position:0 0}}@keyframes spinner-border{to{transform:rotate(360deg)}}@keyframes spinner-grow{0%{transform:scale(0)}50%{opacity:1;transform:none}}.hide{display:none !important}.mb-0{margin-bottom:0 !important}.ml-auto{margin-left:auto !important}.text-left{text-align:left !important}.text-right{text-align:right !important}@media print{*,*::before,*::after{text-shadow:none !important;box-shadow:none !important}a:not(.btn){text-decoration:underline}tr,img{page-break-inside:avoid}p,h2,h3{orphans:3;widows:3}h2,h3{page-break-after:avoid}@page{size:a3}body{min-width:992px !important}.container{min-width:992px !important}.navbar{display:none}}/*! * Cropper.js v1.6.1 * https://fengyuanchen.github.io/cropperjs * * Copyright 2015-present Chen Fengyuan * Released under the MIT license * * Date: 2023-09-17T03:44:17.565Z */input[type=checkbox]{position:relative;width:var(--checkbox-size) !important;height:var(--checkbox-size);margin-right:var(--checkbox-right-margin) !important;background-repeat:no-repeat;background-position:center;border:1px solid var(--gray-500);box-sizing:border-box;border-radius:4px;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}input[type=checkbox]:checked{background-color:var(--primary);background-image:url("data:image/svg+xml, "),var(--checkbox-gradient);background-size:57%,100%;box-shadow:none;border:none}input[type=checkbox]:focus{outline:none;box-shadow:var(--checkbox-focus-shadow)}input[type=checkbox]:disabled{background-color:var(--disabled-control-bg);box-shadow:inset 0px 1px 7px rgba(0,0,0,.1);border:.5px solid var(--dark-border-color);pointer-events:none}input[type=checkbox]:disabled:checked{background-color:var(--gray-600);background-image:url("data:image/svg+xml, ");background-size:57%;box-shadow:inset 0px 1px 3px rgba(0,0,0,.1);border:none;pointer-events:none}input[type=radio]{position:relative;width:var(--checkbox-size) !important;height:var(--checkbox-size);margin-right:8px !important;font-size:calc(var(--checkbox-size) - 1px);background-repeat:no-repeat;background-position:center;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;-webkit-print-color-adjust:exact;color-adjust:exact}input[type=radio]:focus{outline:none}input[type=radio]:before{width:var(--checkbox-size);height:var(--checkbox-size);position:absolute;content:" ";border:1px solid var(--gray-400);border-radius:16px}input[type=radio]:checked::before{background-color:var(--primary);border-radius:16px;box-shadow:inset 0 0 0 2px #fff}html,body{height:100%;font-family:var(--font-stack);font-variation-settings:"opsz" 24}.icon{display:inline-block;font-size:0;width:20px;height:20px;margin:0 auto;background-size:cover;background-repeat:no-repeat;background-position:50% 50%;fill:var(--icon-fill);stroke:var(--icon-stroke);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.icon-lg{width:24px;height:24px}@media(hover: none){:root:not([data-theme=dark]) .btn-primary-light:hover:not(:active){background-color:var(--surface-gray-4)}}:root{--padding-xs: 5px;--padding-sm: 7px;--padding-md: 15px;--padding-lg: 20px;--padding-xl: 30px;--padding-2xl: 40px;--margin-xs: 5px;--margin-sm: 10px;--margin-md: 15px;--margin-lg: 20px;--margin-xl: 30px;--margin-2xl: 40px;--page-max-width: 900px;--modal-shadow: var(--shadow-md);--card-shadow: var(--shadow-sm);--btn-shadow: var(--shadow-xs);--navbar-height: 48px;--shadow-inset: inset 0px -1px 0px var(--gray-300);--highlight-shadow: 1px 1px 10px var(--blue-50), 0px 0px 4px var(--blue-600);--code-block-bg: var(--gray-900);--code-block-text: var(--gray-400);--btn-height: 28px;--input-height: 28px;--checkbox-right-margin: var(--margin-xs);--checkbox-size: 14px;--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);--checkbox-gradient: linear-gradient(180deg, var(--primary) -124.51%, var(--primary) 100%);--checkbox-disabled-gradient: linear-gradient( 180deg, var(--disabled-control-bg) -124.51%, var(--disabled-control-bg) 100% );--right-arrow-svg: url("data: image/svg+xml;utf8, ");--left-arrow-svg: url("data: image/svg+xml;utf8, ")}@media(max-width: 991.98px){:root{--checkbox-size: 18px}}@keyframes blink{50%{opacity:.5}}body:not(.full-width) .grid-row-open .form-in-grid{max-width:var(--page-max-width)}select.form-control{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-block:0px}html{height:100%}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--text-lg);font-weight:var(--font-weight-regular);letter-spacing:.02em;color:#525252;display:flex;flex-direction:column}img{max-width:100%;height:auto}h1,h2,h3{font-weight:600}h1{font-size:2rem;line-height:1.25;letter-spacing:-0.025em;margin-top:3rem;margin-bottom:.75rem}@media(min-width: 576px){h1{font-size:2.5rem;margin-top:3.5rem;margin-bottom:1.25rem}}@media(min-width: 1200px){h1{font-size:3.5rem;line-height:1;margin-top:4rem}}h2{font-size:1.4rem;margin-top:2rem;margin-bottom:.5rem}@media(min-width: 576px){h2{font-size:2rem;margin-top:4rem;margin-bottom:.75rem}}@media(min-width: 1200px){h2{font-size:2.5rem;margin-top:4rem}}h3{font-size:1.2rem;margin-top:2rem;margin-bottom:.5rem}@media(min-width: 576px){h3{font-size:1.4rem;margin-top:2.5rem}}@media(min-width: 1200px){h3{font-size:1.9rem;margin-top:3.5rem}}p{line-height:1.7}:root{--font-stack: "InterVariable", "Inter", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;--text-line-height-3xl: 115%;--text-line-height-4xl: 160%;--text-line-height-7xl: 140%;--text-line-height-12xl: 130%;--text-line-height-14xl: 120%;--para-line-height-2-xs: 160%;--para-line-height-sm: 150%;--para-line-height-2xl: 148%;--para-line-height-3xl: 140%}:root{--input-padding: 6px 8px;--dropdown-padding: 4px 8px;--grid-padding: 10px 8px;--number-card-padding: 8px 8px 8px 12px}:root{--padding-xs: 5px;--padding-sm: 7px;--padding-md: 15px;--padding-lg: 20px;--padding-xl: 30px;--padding-2xl: 40px;--margin-xs: 5px;--margin-sm: 10px;--margin-md: 15px;--margin-lg: 20px;--margin-xl: 30px;--margin-2xl: 40px;--page-max-width: 900px;--modal-shadow: var(--shadow-md);--card-shadow: var(--shadow-sm);--btn-shadow: var(--shadow-xs);--navbar-height: 48px;--shadow-inset: inset 0px -1px 0px var(--gray-300);--highlight-shadow: 1px 1px 10px var(--blue-50), 0px 0px 4px var(--blue-600);--code-block-bg: var(--gray-900);--code-block-text: var(--gray-400);--btn-height: 28px;--input-height: 28px;--checkbox-right-margin: var(--margin-xs);--checkbox-size: 14px;--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);--checkbox-gradient: linear-gradient(180deg, var(--primary) -124.51%, var(--primary) 100%);--checkbox-disabled-gradient: linear-gradient( 180deg, var(--disabled-control-bg) -124.51%, var(--disabled-control-bg) 100% );--right-arrow-svg: url("data: image/svg+xml;utf8, ");--left-arrow-svg: url("data: image/svg+xml;utf8, ")}@media(max-width: 991.98px){:root{--checkbox-size: 18px}}:root{--light: #f3f3f3;--font-size-xs: 0.75rem;--font-size-sm: 0.875rem;--font-size-base: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.5rem;--font-size-5xl: 3rem;--font-size-6xl: 4rem;--card-border-radius: 0.75rem}img{position:relative}:root{--avatar-frame-color: var(--gray-500);--avatar-frame-bg: var(--gray-100);--avatar-frame-border: var(--gray-50);--orange-avatar-bg: var(--orange-100);--orange-avatar-color: var(--orange-600);--pink-avatar-bg: var(--pink-50);--pink-avatar-color: var(--pink-500);--blue-avatar-bg: var(--blue-50);--blue-avatar-color: var(--blue-500);--green-avatar-bg: var(--green-200);--green-avatar-color: var(--green-800);--dark-green-avatar-bg: var(--green-200);--dark-green-avatar-color: var(--green-800);--red-avatar-bg: var(--red-50);--red-avatar-color: var(--red-500);--yellow-avatar-bg: var(--yellow-50);--yellow-avatar-color: var(--yellow-500);--purple-avatar-bg: var(--purple-50);--purple-avatar-color: var(--purple-500);--gray-avatar-bg: var(--gray-50);--gray-avatar-color: var(--gray-700)}:root{--avatar-frame-color: var(--gray-500);--avatar-frame-bg: var(--gray-100);--avatar-frame-border: var(--gray-100)}.form-control{border:none;height:var(--input-height);font-size:var(--text-base);font-weight:var(--font-weight-regular);letter-spacing:.02em;border-radius:var(--radius);padding:var(--input-padding);position:relative}.icon{stroke:var(--text-light)}.navbar{padding:0}.navbar .navbar-nav{align-items:center}.navbar .navbar-nav .nav-item{height:var(--navbar-height);display:flex;align-items:center}.navbar .navbar-nav .nav-item .nav-link{vertical-align:middle;line-height:1}@media(max-width: 992px){.navbar{padding:0 1rem}}@media(max-width: 576px){.navbar-collapse .navbar-nav{align-items:flex-start}}.navbar-light{border-bottom:1px solid #e2e2e2;background:#fff}.navbar-brand img{display:inline-block;max-width:150px;max-height:22px}.navbar-light .navbar-nav .nav-link{color:#525252;font-size:.875rem;font-weight:500}.navbar-light .navbar-nav .nav-link:hover,.navbar-light .navbar-nav .nav-link:focus{color:#171717}.web-footer{padding:3rem 0;min-height:140px;background-color:var(--fg-color);border-top:1px solid #e2e2e2;margin-top:auto}@media(min-width: 576px){.footer-col-right{text-align:right}}.footer-col-left,.footer-col-right{padding-top:.8rem;padding-bottom:1rem;line-height:2}.footer-col-left:empty,.footer-col-right:empty{padding:0}.footer-info{color:#7c7c7c;font-size:.875rem}.form-control{border:none;font-size:var(--text-base);font-weight:var(--font-weight-regular);letter-spacing:.02em}.container{padding-left:1.25rem;padding-right:1.25rem}@media(min-width: 576px){.container{padding-left:0;padding-right:0}}@media(min-width: 992px){.container{padding-left:2.5rem;padding-right:2.5rem}}@media(min-width: 1200px){.container{padding-left:5rem;padding-right:5rem}}@media(min-width: 1440px){.container{padding-left:1.5rem;padding-right:1.5rem}}@media(max-width: 992px){.page-content-wrapper .container{padding-left:1.5rem;padding-right:1.5rem}}.page-header-wrapper{display:flex;justify-content:space-between;align-items:center}.page_content{min-height:50vh}.mb-0{margin-bottom:calc(var(--spacing)*0)}:root{--ln-orange: #EF7D00;--ln-orange-dark: #E06E00;--ln-ink: #20242C;--ln-muted: #6B7280;--ln-line: #E7E9EE}@media(max-width: 991px){html{max-width:100%;overflow-x:hidden}}