/* hide line numbers */ .cm-lineNumbers .cm-gutterElement { display: none; } /* Link style -------------------------------- */ /* SET FONTS --------------------------------- */ /* Serif, long form text, default rem size */ .cm-content body { font-family: "Merriweather Sans", sans-serif; } /* Sans Serif, most other text */ /* TODO: Why header>ul li and not #byline li? */ /* TODO: What's the usage difference between nav and .nav? */ .cm-content aside, .cm-content figcaption, .cm-content nav, .cm-content header>ul li, .cm-content h1, .cm-content h2, .cm-content h3, .cm-content h4, .cm-content blockquote, .cm-content figure table, .cm-content .nav { font-family: "Merriweather Sans", sans-serif; font-weight: 400; } /* Monospace */ .cm-content pre, .cm-content code { font-family: 'Fira Mono', monospace; } .cm-content a { background-image: url("./assets/splat-underline-2-default.svg"); background-size: 100% 4px; background-position: bottom; background-repeat: no-repeat; color: #000; padding-bottom: .05rem; text-decoration: none; -webkit-tap-highlight-color:hsla(1, 76%, 51%, .4); } .cm-content a.plain { background-image: none; /* Shouldn't these have the padding removed, and some other affordance added? */ } .cm-content figcaption a, .cm-content aside a { padding-bottom: 0; } .cm-content nav a { background-image: none; } .cm-content a:hover{ background-image: url("./assets/splat-underline-2-hover.svg"); color: #D70A1B; } /* Should these use .outro instead of the less-clear p:last-of-type? */ .cm-content header p:last-of-type span a { background-image: url("./assets/splat-underline-1-default.svg"); padding-bottom: .1rem; } .cm-content header p:last-of-type span a:hover{ background-image: url("./assets/splat-underline-1-hover.svg"); } /* This is bad for accessibility, and Safari / Chrome don't seem to respect it */ .cm-content ::-moz-selection{ background: hsla(1, 0%, 75%, 0.4); text-shadow: none; } .cm-content ::-moz-selection, .cm-content ::selection{ background: hsla(1, 0%, 75%, 0.4); text-shadow: none; } /* Separator ----------------------------------- */ .cm-content hr { background-image: url("./assets/splat-separator-1.svg"); background-repeat: no-repeat; background-position: center; background-size: 100% 5px; padding-top: 1rem; margin-top: 3rem; margin-bottom: 3rem; display: block; border: none; margin-inline-end: auto; } /* Headers ----------------------------------- */ .cm-content h1 { font-size: 2rem; font-weight: 300; line-height: 2.5rem; margin-bottom: 1rem; } .cm-content h2 { font-size: 1.5rem; line-height: 2rem; margin-bottom: 1rem; margin-top: 2rem; } .cm-content h3 { font-size: 1.25rem; line-height: 1.75rem; margin: 2rem 0 1rem 0; } .cm-content h4 { font-size: 1.1rem; margin: 2rem 0 1rem 0; } .cm-content h1+h2, .cm-content h2+h3 { margin: -.5rem 0 1rem 0; } /* Text -------------------------------------- */ .cm-content p, .cm-content li { /* By default, don't use hyphens — current browsers do an awful job of it. */ /* See the HYPHENS section below for more */ /* -ms-hyphens: auto; */ /* -webkit-hyphens: auto; */ font-size: 1rem; /* hyphens: auto; */ line-height: 1.5rem; margin: 0 0 1.5rem 0; text-align: justify; } .cm-content small, .cm-content sup { font-size: .8125em; } .cm-content strong { font-weight: 700; } .cm-content em { font-style: italic; } .cm-content sup { display: inline-block; padding-left: .125rem; padding-right: .125rem; position: relative; top: .125rem; vertical-align: top; line-height: .75rem; } .cm-content sup a { background: none; text-decoration: underline; } .cm-content sup a:hover { background: none; text-decoration: underline; } /* Blockquotes ------------------------------- */ .cm-content blockquote { -ms-hyphens: none; -webkit-hyphens: none; border-left: .2rem solid #f2f2f2; hyphens: none; line-height: 1.5rem; margin-bottom: 1rem; padding: 1rem 0 1rem .8rem; } .cm-content blockquote, .cm-content blockquote>* { -ms-hyphens: none; -webkit-hyphens: none; font-size: 1rem; font-weight: 300; hyphens: none; line-height: 1.5rem; } .cm-content blockquote cite { white-space: nowrap; } .cm-content blockquote footer { font-weight: 200; } .cm-content blockquote footer::before { content: "– " } .cm-content blockquote p:last-child { margin-bottom: 0; } /* Lists ------------------------------------- */ .cm-content ul, .cm-content ol { margin-bottom: 1.5rem; margin-left: 1.3em; } .cm-content ul { list-style-type: square; } .cm-content ol { list-style-type: decimal; } .cm-content li { margin-bottom: .5rem; white-space: normal; } .cm-content li.no-bullet { list-style-type: none; margin-left: -1.3em; } .cm-content li h3, .cm-content li h4 { display: inline; font-size: inherit; } .cm-content li ul { margin-top: .5rem; } :root { --cm-padding-x: 20px; } /* TODO: change this media query into a container query? */ /* @media (max-width: 1000px) { :root { --cm-padding-x: 10px; } } */ /* Hide scrollbar for Chrome, Safari and Opera */ .no-scrollbar::-webkit-scrollbar { display: none; } /* Hide scrollbar for IE, Edge and Firefox */ .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ } /* Hack: hide tldraw page menu */ .tlui-menu-zone__controls { display: none !important; }/* THIS CSS FILE IS GENERATED! DO NOT EDIT. OR EDIT. I'M A COMMENT NOT A COP */ /* This file is created by the copy-css-files.mjs script in @tldraw/tldraw. */ /* It combines @tldraw/editor's editor.css and @tldraw/tldraw's ui.css */ /* @tldraw/editor */ .tl-container { font-size: 12px; /* Spacing */ --space-1: 2px; --space-2: 4px; --space-3: 8px; --space-4: 12px; --space-5: 16px; --space-6: 20px; --space-7: 28px; --space-8: 32px; --space-9: 64px; --space-10: 72px; /* Radius */ --radius-0: 2px; --radius-1: 4px; --radius-2: 7px; --radius-3: 9px; --radius-4: 12px; --radius-5: 16px; --layer-grid: 150; --layer-canvas: 200; /* Misc */ --tl-zoom: 1; --tl-dpr-multiple: 100; --tl-dpr-multiple-px: calc(var(--tl-dpr-multiple) * 1px); /* Cursor SVGs */ --tl-cursor-none: none; --tl-cursor-default: url("data:image/svg+xml,") 12 8, default; --tl-cursor-pointer: url("data:image/svg+xml,") 14 10, pointer; --tl-cursor-cross: url("data:image/svg+xml,") 16 16, crosshair; --tl-cursor-move: url("data:image/svg+xml,") 16 16, move; --tl-cursor-grab: url("data:image/svg+xml,") 16 16, grab; --tl-cursor-grabbing: url("data:image/svg+xml,") 16 16, grabbing; --tl-cursor-text: url("data:image/svg+xml,") 4 10, text; --tl-cursor-zoom-in: url("data:image/svg+xml,") 16 16, zoom-in; --tl-cursor-zoom-out: url("data:image/svg+xml,") 16 16, zoom-out; /* These cursor values get programmatically overridden */ /* They're just here to help your editor autocomplete */ --tl-cursor: var(--tl-cursor-default); --tl-cursor-resize-edge: ew-resize; --tl-cursor-resize-corner: nesw-resize; --tl-cursor-ew-resize: ew-resize; --tl-cursor-ns-resize: ns-resize; --tl-cursor-nesw-resize: nesw-resize; --tl-cursor-nwse-resize: nwse-resize; --tl-cursor-rotate: pointer; --tl-cursor-nwse-rotate: pointer; --tl-cursor-nesw-rotate: pointer; --tl-cursor-senw-rotate: pointer; --tl-cursor-swne-rotate: pointer; --tl-scale: calc(1 / var(--tl-zoom)); --tl-font-draw: 'tldraw_draw', sans-serif; --tl-font-sans: 'tldraw_sans', sans-serif; --tl-font-serif: 'tldraw_serif', serif; --tl-font-mono: 'tldraw_mono', monospace; --a: calc(min(0.5, 1 / var(--tl-zoom)) * 2px); --b: calc(min(0.5, 1 / var(--tl-zoom)) * -2px); --tl-text-outline: 0 var(--b) 0 var(--color-background), 0 var(--a) 0 var(--color-background), var(--b) var(--b) 0 var(--color-background), var(--a) var(--b) 0 var(--color-background), var(--a) var(--a) 0 var(--color-background), var(--b) var(--a) 0 var(--color-background); /* Own properties */ position: relative; top: 0px; left: 0px; width: 100%; height: 100%; overflow: clip; } .tl-theme__light { --color-accent: #e64a4a; --color-background: rgb(249, 250, 251); --color-brush-fill: rgba(144, 144, 144, 0.102); --color-brush-stroke: rgba(144, 144, 144, 0.251); --color-grid: rgb(109, 109, 109); --color-low: rgb(237, 240, 242); --color-culled: rgb(235, 238, 240); --color-muted-0: rgba(0, 0, 0, 0.02); --color-muted-1: rgba(0, 0, 0, 0.1); --color-muted-2: rgba(0, 0, 0, 0.042); --color-hint: rgba(0, 0, 0, 0.055); --color-overlay: rgba(0, 0, 0, 0.2); --color-divider: #e8e8e8; --color-panel-contrast: #ffffff; --color-panel-overlay: rgba(255, 255, 255, 0.82); --color-panel: #fdfdfd; --color-focus: #004094; --color-selected: #2f80ed; --color-selected-contrast: #ffffff; --color-selection-fill: #1e90ff06; --color-selection-stroke: #2f80ed; --color-text-0: #1d1d1d; --color-text-1: #2d2d2d; --color-text-2: #5f6369; --color-text-3: #b6b7ba; --color-primary: #2f80ed; --color-warn: #d10b0b; --color-text: #000000; --color-laser: #ff0000; --shadow-1: 0px 1px 2px rgba(0, 0, 0, 0.22), 0px 1px 3px rgba(0, 0, 0, 0.09); --shadow-2: 0px 0px 2px rgba(0, 0, 0, 0.12), 0px 2px 3px rgba(0, 0, 0, 0.24), 0px 2px 6px rgba(0, 0, 0, 0.1), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-3: 0px 1px 2px rgba(0, 0, 0, 0.25), 0px 2px 6px rgba(0, 0, 0, 0.14), inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-4: 0px 0px 3px rgba(0, 0, 0, 0.16), 0px 5px 4px rgba(0, 0, 0, 0.16), 0px 2px 16px rgba(0, 0, 0, 0.06), inset 0px 0px 0px 1px var(--color-panel-contrast); } .tl-theme__dark { --color-accent: #e64a4a; --color-background: #212529; --color-brush-fill: rgba(180, 180, 180, 0.05); --color-brush-stroke: rgba(180, 180, 180, 0.25); --color-grid: #909090; --color-low: #2c3136; --color-culled: rgb(47, 52, 57); --color-muted-0: rgba(255, 255, 255, 0.02); --color-muted-1: rgba(255, 255, 255, 0.1); --color-muted-2: rgba(255, 255, 255, 0.05); --color-hint: rgba(255, 255, 255, 0.1); --color-overlay: rgba(0, 0, 0, 0.35); --color-divider: #49555f; --color-panel-contrast: #49555f; --color-panel: #363d44; --color-panel-overlay: rgba(54, 61, 68, 0.82); --color-focus: #a5c3f3; --color-selected: #4285f4; --color-selected-contrast: #ffffff; --color-selection-fill: rgba(38, 150, 255, 0.05); --color-selection-stroke: #2f80ed; --color-text-0: #f0eded; --color-text-1: #d9d9d9; --color-text-2: #8e9094; --color-text-3: #515a62; --color-primary: #2f80ed; --color-warn: #d10b0b; --color-text: #f8f9fa; --color-laser: #ff0000; --shadow-1: 0px 1px 2px #00000029, 0px 1px 3px #00000038, inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-2: 0px 1px 3px #00000077, 0px 2px 6px #00000055, inset 0px 0px 0px 1px var(--color-panel-contrast); --shadow-3: 0px 1px 3px #00000077, 0px 2px 12px rgba(0, 0, 0, 0.22), inset 0px 0px 0px 1px var(--color-panel-contrast); } .tl-counter-scaled { transform: scale(var(--tl-scale)); transform-origin: top left; width: calc(100% * var(--tl-zoom)); height: calc(100% * var(--tl-zoom)); } .tl-container, .tl-container * { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; scrollbar-highlight-color: transparent; -webkit-user-select: none; -moz-user-select: none; user-select: none; box-sizing: border-box; outline: none; } .tl-container a { -webkit-touch-callout: initial; } .tl-container:focus-within { outline: 1px solid var(--color-low); } input, *[contenteditable], *[contenteditable] * { -webkit-user-select: text; } /* -------------------------------------------------- */ /* Canvas */ /* -------------------------------------------------- */ .tl-canvas { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; color: var(--color-text); z-index: var(--layer-canvas); cursor: var(--tl-cursor); overflow: clip; content-visibility: auto; touch-action: none; contain: strict; } .tl-fixed-layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; contain: strict; pointer-events: none; } .tl-shapes { position: relative; z-index: 2; } .tl-overlays { position: relative; z-index: 3; } .tl-overlays__item { position: absolute; top: 0px; left: 0px; height: var(--tl-dpr-multiple-px); width: var(--tl-dpr-multiple-px); overflow: visible; pointer-events: none; transform-origin: top left; } .tl-svg-context { position: absolute; top: 0px; left: 0px; height: var(--tl-dpr-multiple-px); width: var(--tl-dpr-multiple-px); pointer-events: none; } .tl-positioned { position: absolute; top: 0px; left: 0px; transform-origin: top left; } /* ------------------- Background ------------------- */ .tl-background { position: absolute; background-color: var(--color-background); inset: 0px; } /* --------------------- Grid Layer --------------------- */ .tl-grid { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; touch-action: none; pointer-events: none; z-index: 2; contain: strict; } .tl-grid-dot { fill: var(--color-grid); } /* --------------------- Layers --------------------- */ .tl-html-layer { position: absolute; top: 0px; left: 0px; width: 1px; height: 1px; contain: layout style size; } /* ---------------------- Brush --------------------- */ .tl-brush { stroke-width: calc(var(--tl-scale) * 1px); contain: size layout; } .tl-brush__default { stroke: var(--color-brush-stroke); fill: var(--color-brush-fill); } /* -------------------- Scribble -------------------- */ .tl-scribble { stroke-linejoin: round; stroke-linecap: round; pointer-events: none; contain: size layout; } /* ---------------------- Shape --------------------- */ .tl-shape { position: absolute; pointer-events: none; overflow: visible; transform-origin: top left; contain: size layout; } .tl-shape__culled { position: relative; background-color: var(--color-culled); } /* ---------------- Shape Containers ---------------- */ .tl-svg-container { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; transform-origin: top left; overflow: visible; } .tl-html-container { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; stroke-linecap: round; stroke-linejoin: round; /* content-visibility: auto; */ transform-origin: top left; color: inherit; } /* --------------- Overlay Stack --------------- */ /* back of the stack, behind user's stuff */ .tl-collaborator__scribble { z-index: 10; } .tl-collaborator__brush { z-index: 20; } .tl-collaborator__shape-indicator { z-index: 30; } .tl-user-scribble { z-index: 40; } .tl-user-brush { z-index: 50; } .tl-user-indicator__selected { z-index: 60; } .tl-user-indicator__hovered { z-index: 70; } .tl-user-handles { z-index: 80; } .tl-user-snapline { z-index: 90; } .tl-selection__fg { pointer-events: none; z-index: 100; } .tl-user-indicator__hint { z-index: 110; stroke-width: calc(2.5px * var(--tl-scale)); } /* behind collaborator cursor */ .tl-collaborator__cursor-hint { z-index: 120; } .tl-collaborator__cursor { z-index: 130; } .tl-cursor { overflow: visible; } /* -------------------- Indicator ------------------- */ .tl-shape-indicator { transform-origin: top left; fill: none; stroke-width: calc(1.5px * var(--tl-scale)); contain: size; } /* ------------------ SelectionBox ------------------ */ .tl-selection__bg { position: absolute; top: 0px; left: 0px; transform-origin: top left; background-color: transparent; pointer-events: all; } .tl-selection__fg__outline { fill: none; pointer-events: none; stroke: var(--color-selection-stroke); stroke-width: calc(1.5px * var(--tl-scale)); } .tl-corner-handle { pointer-events: none; stroke: var(--color-selection-stroke); fill: var(--color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .tl-text-handle { pointer-events: none; fill: var(--color-selection-stroke); } .tl-corner-crop-handle { pointer-events: none; fill: none; stroke: var(--color-selection-stroke); } .tl-corner-crop-edge-handle { pointer-events: none; fill: none; stroke: var(--color-selection-stroke); } .tl-rotate-handle { stroke: var(--color-selection-stroke); fill: var(--color-background); stroke-width: calc(1.5px * var(--tl-scale)); pointer-events: all; } .tl-mobile-rotate__bg { pointer-events: all; cursor: var(--tl-cursor-grab); } .tl-mobile-rotate__fg { pointer-events: none; stroke: var(--color-selection-stroke); fill: var(--color-background); stroke-width: calc(1.5px * var(--tl-scale)); } .tl-transparent { fill: transparent; stroke: transparent; } /* --------------------- Handles -------------------- */ .tl-handle { pointer-events: all; } .tl-handle__bg { fill: transparent; stroke: transparent; pointer-events: all; cursor: var(--tl-cursor-grabbing); } .tl-handle__fg { fill: var(--color-background); stroke: var(--color-selection-stroke); stroke-width: calc(1.5px * var(--tl-scale)); pointer-events: none; } .tl-handle__create { opacity: 0; } .tl-handle__create:hover { opacity: 1; } .tl-handle__bg:active { fill: none; } .tl-handle__bg:hover { cursor: var(--tl-cursor-grab); fill: var(--color-selection-fill); } @media (pointer: coarse) { .tl-handle__bg:active { fill: var(--color-selection-fill); } .tl-handle__create { opacity: 1; } } /* ------------------ Bounds Detail ----------------- */ .tl-image, .tl-video { -o-object-fit: cover; object-fit: cover; background-size: cover; width: 100%; height: 100%; } .tl-image-container, .tl-video-container, .tl-embed-container { width: 100%; height: 100%; pointer-events: all; /* background-color: var(--color-background); */ display: flex; justify-content: center; align-items: center; } .tl-image__tg { --scale: calc(min(2, var(--tl-scale))); position: absolute; top: calc(var(--scale) * 8px); right: calc(var(--scale) * 8px); font-size: 10px; transform-origin: top right; background-color: var(--color-background); padding: 2px 4px; border-radius: 4px; } /* --------------------- Nametag -------------------- */ .tl-collaborator-cursor { position: absolute; } .tl-nametag { top: 16px; left: 13px; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; max-width: 120px; padding: 3px 6px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); border-radius: var(--radius-2); color: var(--color-selected-contrast); } .tl-nametag-title { top: -2px; left: 13px; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; padding: 0px 6px; max-width: 120px; white-space: nowrap; position: absolute; overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-family: var(--font-body); text-shadow: var(--tl-text-outline); color: var(--color-selected-contrast); } .tl-nametag-chat { top: 16px; left: 13px; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; color: var(--color-selected-contrast); white-space: nowrap; position: absolute; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); opacity: 1; border-radius: var(--radius-2); } .tl-cursor-chat { position: absolute; color: var(--color-selected-contrast); white-space: nowrap; padding: 3px 6px; font-size: 12px; font-family: var(--font-body); pointer-events: none; z-index: var(--layer-cursor); margin-top: 16px; margin-left: 13px; opacity: 1; border: none; -webkit-user-select: text; -moz-user-select: text; user-select: text; border-radius: var(--radius-2); } .tl-cursor-chat .tl-cursor-chat__bubble { padding-right: 12px; } .tl-cursor-chat::-moz-selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } .tl-cursor-chat::selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } .tl-cursor-chat-fade { /* Setting to zero causes it to immediately disappear */ /* Setting to near-zero causes it to fade out gradually */ opacity: 0.0001; transition: opacity 5s ease-in-out; } .tl-cursor-chat::-moz-placeholder { color: var(--color-selected-contrast); opacity: 0.7; } .tl-cursor-chat::placeholder { color: var(--color-selected-contrast); opacity: 0.7; } /* -------------------------------------------------- */ /* Spinner */ /* -------------------------------------------------- */ @keyframes spinner { to { transform: rotate(360deg); } } .tl-spinner::after { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #000; animation: spinner 0.6s linear infinite; pointer-events: none; } /* -------------------- IconShape ------------------- */ .tl-iconshape__icon { pointer-events: all; width: 100%; height: 100%; } .tl-icon-preview { width: 14px; height: 14px; } /* ------------------- Text Shape ------------------- */ .tl-text-shape__wrapper { position: relative; font-weight: normal; min-width: 1px; padding: 0px; margin: 0px; border: none; height: 100%; font-variant: normal; font-style: normal; pointer-events: all; white-space: pre-wrap; overflow-wrap: break-word; text-shadow: var(--tl-text-outline); } .tl-text-shape__wrapper[data-align='start'] { text-align: left; } .tl-text-shape__wrapper[data-align='middle'] { text-align: center; } .tl-text-shape__wrapper[data-align='end'] { text-align: right; } .tl-text-shape__wrapper[data-font='draw'] { font-family: var(--tl-font-draw); } .tl-text-shape__wrapper[data-font='sans'] { font-family: var(--tl-font-sans); } .tl-text-shape__wrapper[data-font='serif'] { font-family: var(--tl-font-serif); } .tl-text-shape__wrapper[data-font='mono'] { font-family: var(--tl-font-mono); } .tl-text-shape__wrapper[data-isediting='true'] .tl-text-content { opacity: 0; } .tl-text { /* remove overflow from textarea on windows */ margin: 0px; padding: 0px; border: 0px; color: inherit; caret-color: var(--color-text); background: none; -o-border-image: none; border-image: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; font-variant: inherit; font-style: inherit; text-align: inherit; letter-spacing: inherit; text-shadow: inherit; outline: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; pointer-events: all; text-rendering: auto; text-transform: none; text-indent: 0px; display: inline-block; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; -moz-column-count: initial !important; column-count: initial !important; writing-mode: horizontal-tb !important; word-spacing: 0px; } .tl-text-measure { position: absolute; z-index: 999999; top: -9999px; right: -9999px; opacity: 0; width: -moz-max-content; width: max-content; box-sizing: border-box; pointer-events: none; line-break: normal; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; resize: none; border: none; -moz-user-select: none; user-select: none; contain: style paint; -webkit-user-select: none; } .tl-text-edit-container { position: relative; width: 100%; height: 100%; } .tl-text-input, .tl-text-content { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; min-width: 1px; min-height: 1px; overflow: visible; outline: none; } .tl-text-content { pointer-events: none; } .tl-text-input { resize: none; -moz-user-select: all; user-select: all; -webkit-user-select: text; overflow: hidden; cursor: var(--tl-cursor-text); } .tl-text-input::-moz-selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } .tl-text-input::selection { background: var(--color-selected); color: var(--color-selected-contrast); text-shadow: none; } /* ------------------- Snap Lines ------------------- */ .tl-snap-line { stroke: var(--color-accent); stroke-width: calc(1px * var(--tl-scale)); fill: none; } .tl-snap-point { stroke: var(--color-accent); stroke-width: calc(1px * var(--tl-scale)); fill: none; } /* -------------------- Groups ------------------ */ .tl-group { stroke: var(--color-text); stroke-width: calc(1px * var(--tl-scale)); opacity: 0.5; } /* ------------------- Bookmark Shape ------------------- */ .tl-bookmark__container { width: 100%; height: 100%; position: relative; border: 1px solid var(--color-panel-contrast); background-color: var(--color-panel); border-radius: var(--radius-2); display: flex; flex-direction: column; overflow: hidden; } .tl-bookmark__image_container { flex: 1; overflow: hidden; border-top-left-radius: var(--radius-1); border-top-right-radius: var(--radius-1); width: 100%; height: 100%; display: flex; justify-content: flex-end; align-items: flex-start; } .tl-bookmark__image_container > .tl-hyperlink-button::after { background-color: var(--color-panel); } .tl-bookmark__placeholder { width: 100%; height: 100%; background-color: var(--color-muted-2); border-bottom: 1px solid var(--color-muted-2); } .tl-bookmark__image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; } .tl-bookmark__copy_container { background-color: var(--color-muted); padding: var(--space-4); pointer-events: all; } .tl-bookmark__heading, .tl-bookmark__description, .tl-bookmark__link { margin: 0px; width: 100%; font-family: inherit; } .tl-bookmark__heading { font-size: 16px; font-weight: bold; padding-bottom: var(--space-2); margin: 8px 0px; } .tl-bookmark__description { font-size: 12px; padding-bottom: var(--space-4); } .tl-bookmark__link { font-size: 14px; pointer-events: all; z-index: 999; overflow: hidden; display: block; color: var(--color-text); text-overflow: ellipsis; text-decoration: none; color: var(--color-text-2); cursor: var(--tl-cursor-pointer); } .tl-bookmark__link:hover { color: var(--color-selected); } /* ---------------- Hyperlink Button ---------------- */ .tl-hyperlink-button { background: none; margin: 0px; position: absolute; top: 0px; right: 0px; height: 44px; width: 44px; display: flex; align-items: center; justify-content: center; z-index: 200; font-size: 12px; font-weight: 400; color: var(--color-text-1); padding: 13px; cursor: var(--tl-cursor-pointer); border: none; outline: none; pointer-events: all; } .tl-hyperlink-button::after { content: ''; z-index: -1; position: absolute; right: 6px; bottom: 6px; display: block; width: calc(100% - 12px); height: calc(100% - 12px); border-radius: var(--radius-1); background-color: var(--color-background); pointer-events: none; } .tl-hyperlink-button:hover { color: var(--color-selected); } .tl-hyperlink-button:focus-visible { color: var(--color-selected); } .tl-hyperlink-button__icon { width: 18px; height: 18px; background-color: currentColor; pointer-events: none; } .tl-hyperlink-button__hidden { display: none; } /* ---------------- Geo shape ---------------- */ .tl-text-label { display: flex; justify-content: center; align-items: center; color: var(--color-text); text-shadow: var(--tl-text-outline); line-height: inherit; position: absolute; inset: 0px; z-index: 10; } .tl-text-label[data-isediting='true'] .tl-text-content { opacity: 0; } .tl-text-label[data-hastext='false'][data-isediting='false'] > .tl-text-label__inner { width: 40px; height: 40px; } .tl-text-label[data-hastext='true'][data-isediting='false'] .tl-text-content { pointer-events: all; } .tl-text-label__inner { position: relative; width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; display: flex; align-items: center; justify-content: center; pointer-events: all; min-height: auto; } .tl-text-label__inner > .tl-text { position: relative; top: 0px; left: 0px; padding: 16px; height: -moz-fit-content; height: fit-content; width: -moz-fit-content; width: fit-content; border-radius: var(--radius-1); max-width: 100%; z-index: 3; } .tl-text-label__inner > .tl-text-input { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding: 16px; z-index: 4; } .tl-text-label[data-textwrap='true'] > .tl-text-label__inner { max-width: 100%; } .tl-text-label[data-isediting='true'] { background-color: transparent; min-height: auto; } .tl-text-label[data-isediting='true'] p { opacity: 0; } .tl-text-label[data-align='start'], .tl-text-label[data-align='start-legacy'] { text-align: left; } .tl-text-label[data-align='middle'], .tl-text-label[data-align='middle-legacy'] { text-align: center; } .tl-text-label[data-align='end'], .tl-text-label[data-align='end-legacy'] { text-align: right; } .tl-arrow-hint { stroke: var(--color-text-1); fill: none; stroke-linecap: round; overflow: visible; } .tl-arrow-label[data-font='draw'], .tl-text-label[data-font='draw'] { font-family: var(--tl-font-draw); } .tl-arrow-label[data-font='sans'], .tl-text-label[data-font='sans'] { font-family: var(--tl-font-sans); } .tl-arrow-label[data-font='serif'], .tl-text-label[data-font='serif'] { font-family: var(--tl-font-serif); } .tl-arrow-label[data-font='mono'], .tl-text-label[data-font='mono'] { font-family: var(--tl-font-mono); } /* ------------------- Arrow Shape ------------------ */ .tl-arrow-label { position: absolute; top: -1px; left: -1px; width: 2px; height: 2px; padding: 0px; display: flex; justify-content: center; align-items: center; color: var(--color-text); text-shadow: var(--tl-text-outline); } .tl-arrow-label[data-isediting='true'] p { opacity: 0; } .tl-arrow-label[data-isediting='true'] > .tl-arrow-label__inner { background-color: var(--color-background); } .tl-arrow-label__inner { border-radius: var(--radius-1); box-sizing: content-box; position: relative; height: -moz-max-content; height: max-content; width: -moz-max-content; width: max-content; pointer-events: all; display: flex; justify-content: center; align-items: center; } .tl-arrow-label p, .tl-arrow-label textarea { margin: 0px; padding: 0px; border: 0px; color: inherit; caret-color: var(--color-text); background: none; -o-border-image: none; border-image: none; font-size: inherit; font-family: inherit; font-weight: inherit; line-height: inherit; font-variant: inherit; font-style: inherit; text-align: inherit; letter-spacing: inherit; text-shadow: inherit; outline: none; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word; pointer-events: all; text-rendering: auto; text-transform: none; text-indent: 0px; display: inline-block; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; -moz-column-count: initial !important; column-count: initial !important; writing-mode: horizontal-tb !important; word-spacing: 0px; } .tl-arrow-label p { position: relative; height: -moz-max-content; height: max-content; z-index: 2; padding: 4px; overflow: visible; } .tl-arrow-label textarea { z-index: 3; margin: 0px; padding: 4px; height: 100%; width: 100%; position: absolute; resize: none; border: 0px; -moz-user-select: all; user-select: all; -webkit-user-select: text; caret-color: var(--color-text); -o-border-image: none; border-image: none; /* Don't allow textarea to be zero width */ min-width: 4px; } /* -------------------- NoteShape ------------------- */ .tl-note__container { position: relative; width: 100%; height: 100%; border-radius: var(--radius-2); box-shadow: var(--shadow-1); overflow: hidden; border-color: currentColor; border-style: solid; border-width: 1px; } .tl-note__container .tl-text-label { text-shadow: none; } .tl-note__scrim { position: absolute; z-index: 1; top: 0px; left: 0px; width: 100%; height: 100%; background-color: var(--color-background); opacity: 0.28; } .tl-loading { background-color: var(--color-background); color: var(--color-text-1); height: 100%; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2); font-size: 14px; font-weight: 500; opacity: 0; animation: fade-in 0.2s ease-in-out forwards; animation-delay: 0.2s; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* -------------------- FrameShape ------------------- */ .tl-frame__body { stroke-width: calc(1px * var(--tl-scale)); } .tl-frame__hitarea { border-style: solid; border-width: calc(8px * var(--tl-scale)); border-color: transparent; background: none; pointer-events: stroke; box-sizing: border-box; top: calc(-8px * var(--tl-scale)); left: calc(-8px * var(--tl-scale)); width: calc(100% + calc(16px * var(--tl-scale))); height: calc(100% + calc(16px * var(--tl-scale))); z-index: 1; position: absolute; } .tl-frame-heading { display: flex; align-items: center; position: absolute; transform-origin: 0% 100%; overflow: hidden; max-width: 100%; min-width: 32px; height: auto; font-size: 12px; padding-bottom: 4px; pointer-events: all; } .tl-frame-heading-hit-area { pointer-events: all; /* scale from bottom left corner so we can pin it to the top left corner of the frame */ transform-origin: 0% 100%; display: flex; height: 100%; width: 100%; align-items: center; border-radius: var(--radius-1); background-color: var(--color-background); } .tl-frame-label { pointer-events: all; overflow: hidden; text-overflow: ellipsis; padding: var(--space-3) var(--space-3); position: relative; font-size: inherit; white-space: pre; border: 1px solid transparent; } .tl-frame-label__editing { color: transparent; white-space: pre; width: auto; overflow: visible; background-color: var(--color-panel); border-radius: var(--radius-1); border-color: var(--color-selected); } .tl-frame-name-input { position: absolute; top: 0px; left: 0px; border: none; background: none; outline: none; padding: var(--space-3) var(--space-3); inset: 0px; font-size: inherit; font-family: inherit; font-weight: inherit; width: 100%; color: var(--color-text-1); border-radius: var(--radius-1); -moz-user-select: all; user-select: all; -webkit-user-select: text; white-space: pre; cursor: var(--tl-cursor-text); } /* If mobile use 16px as font size */ /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */ /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */ @media (max-width: 600px) { .tl-frame-heading { font-size: 16px; } } /* ------------------ iFrames Detail ----------------- */ .tl-embed { border: none; border-radius: var(--radius-2); } /* ------------------- Code Editor ------------------ */ .tl-image__button { padding: 4px 8px; color: var(--color-text); background-color: var(--color-panel); border-radius: var(--radius-2); box-shadow: var(--shadow-1); pointer-events: all; cursor: var(--tl-cursor-pointer); outline: none; display: flex; } .tl-image__button:disabled { opacity: 0.5; pointer-events: none; } .tl-image__toolbox { position: absolute; top: 0px; left: 0px; display: flex; justify-content: flex-end; align-items: flex-end; padding: 10px; } .tl-image__toolbox__hidden { display: none; } /* -------------- Shape Error Boundary -------------- */ .tl-shape-error-boundary { width: 100%; height: 100%; background-color: var(--color-muted-1); border-width: calc(1px * var(--tl-scale)); border-color: var(--color-muted-1); border-style: solid; border-radius: calc(var(--radius-1) * var(--tl-scale)); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: left; position: relative; pointer-events: all; overflow: hidden; padding: var(--space-2); } .tl-shape-error-boundary::before { transform: scale(var(--tl-scale)); content: 'Error'; font-size: 12px; font-family: inherit; color: var(--color-text-0); } /* ----------------- Error Boundary ----------------- */ .tl-error-boundary { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background-color: var(--color-background); color: var(--color-text-1); position: absolute; z-index: 600; } .tl-error-boundary__overlay { position: absolute; inset: 0px; z-index: 500; background-color: var(--color-overlay); } .tl-error-boundary__content * { -moz-user-select: all; user-select: all; -webkit-user-select: text; pointer-events: all; } .tl-error-boundary__canvas { pointer-events: none; position: absolute; inset: 0px; z-index: -1; } /* some browsers seem to have some weird interactions between stacking contexts and pointer-events. this ::after pseudo element covers the canvas and prevents it from receiving any pointer events or affecting the cursor. */ .tl-error-boundary__canvas::after { content: ' '; display: block; position: absolute; inset: 0px; z-index: 600; pointer-events: all; } .tl-error-boundary__content { width: -moz-fit-content; width: fit-content; height: -moz-fit-content; height: fit-content; max-width: 100%; width: 400px; max-height: 100%; background-color: var(--color-panel); padding: var(--space-6); border-radius: var(--radius-4); box-shadow: var(--shadow-2); font-size: 14px; font-weight: 400; display: flex; flex-direction: column; gap: var(--space-5); overflow: auto; z-index: 600; } .tl-error-boundary__content__expanded { width: 600px; } .tl-error-boundary__content h2 { font-size: 16px; margin: 0px; font-weight: 500; } .tl-error-boundary__content p { line-height: 1.5; margin: 0px; } .tl-error-boundary__content pre { background-color: var(--color-muted-2); padding: var(--space-5); border-radius: var(--radius-2); overflow: auto; font-size: 12px; max-height: 320px; margin: 0px; } .tl-error-boundary__content button { background: none; border: none; font-family: inherit; font-size: 14px; font-weight: 500; padding: var(--space-4); border-radius: var(--radius-3); cursor: var(--tl-cursor-pointer); color: inherit; background-color: transparent; } .tl-error-boundary__content button:hover { background-color: var(--color-low); } .tl-error-boundary__content a { color: var(--color-text-1); font-weight: 500; text-decoration: none; } .tl-error-boundary__content a:hover { color: var(--color-text-2); } .tl-error-boundary__content__error { position: relative; } .tl-error-boundary__content__error button { position: absolute; top: var(--space-2); right: var(--space-2); font-size: 12px; padding: var(--space-2) var(--space-3); background-color: var(--color-panel); border-radius: var(--radius-1); } .tl-error-boundary__content__actions { display: flex; justify-content: space-between; gap: var(--space-4); margin: calc(var(--space-4) * -1); margin-top: 0px; } .tl-error-boundary__content__actions__group { display: flex; gap: var(--space-4); } .tl-error-boundary__content .tl-error-boundary__reset { color: var(--color-warn); } .tl-error-boundary__content .tl-error-boundary__refresh { background-color: var(--color-primary); color: var(--color-selected-contrast); } .tl-error-boundary__content .tl-error-boundary__refresh:hover { background-color: var(--color-primary); opacity: 0.9; } /* --------------------- Coarse --------------------- */ @media screen and (pointer: coarse) { /* If mobile always show handle-hint as there is no hover state */ .tl-canvas__mobile .tl-handle__hint { opacity: 1; } } .tl-hidden { opacity: 0; pointer-events: none; } .debug__ui-logger { position: absolute; top: 62px; left: 16px; color: #555; font-size: 12px; font-family: monospace; } /* @tldraw/ui */ .tl-container { --layer-panels: 300; --layer-menus: 400; --layer-overlays: 500; --layer-toasts: 650; --layer-cursor: 700; } /* --------------------- Layout --------------------- */ .tlui-layout { position: relative; display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0px, 1fr) auto; grid-auto-rows: auto; height: 100%; max-height: 100%; overflow: clip; padding: var(--space-2); pointer-events: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; contain: strict; z-index: var(--layer-panels); -webkit-transform: translate3d(0, 0, 0); --sab: env(safe-area-inset-bottom); } .tlui-layout__top { grid-column: 1; grid-row: 1; display: flex; min-width: 0px; justify-content: space-between; } .tlui-layout__top__left { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%; flex: 0 1 0; } .tlui-layout__top__right { display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; height: 100%; flex: 0 0 auto; min-width: 0px; } .scrollable, .scrollable * { pointer-events: all; touch-action: auto; overscroll-behavior: none; } /* ----------------- Helper Buttons ---------------- */ .tlui-helper-buttons { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; width: -moz-min-content; width: min-content; gap: var(--space-3); margin: var(--space-3) var(--space-2); white-space: nowrap; pointer-events: none; z-index: var(--layer-panels); } .tlui-helper-buttons > .tlui-button { pointer-events: all; background-color: var(--color-low); border-radius: var(--radius-3); } /* ---------------------- Icon ---------------------- */ .tlui-icon { flex-shrink: 0; width: 18px; height: 18px; background-color: currentColor; } .tlui-icon__small { width: 15px; height: 15px; } /* --------------------- Slider --------------------- */ .tlui-slider { position: relative; display: flex; align-items: center; -webkit-user-select: none; -moz-user-select: none; user-select: none; touch-action: none; } .tlui-slider__container { width: 164px; padding: 0px var(--space-4); } .tlui-slider__track { position: relative; flex-grow: 1; height: 44px; cursor: pointer; } .tlui-slider__track::after { display: block; position: absolute; top: calc(50% - 2px); content: ''; height: 3px; width: 100%; background-color: var(--color-muted-1); border-radius: var(--radius-4); } .tlui-slider__range { position: absolute; top: calc(50% - 2px); left: 0px; height: 3px; background-color: var(--color-selected); border-radius: var(--radius-4); } .tlui-slider__thumb { all: unset; cursor: grab; display: block; width: 18px; height: 18px; position: relative; top: -1px; background-color: var(--color-panel); border-radius: 999px; box-shadow: inset 0px 0px 0px 2px var(--color-text-2); } .tlui-slider__thumb:active { cursor: grabbing; box-shadow: inset 0px 0px 0px 2px var(--color-text-2), var(--shadow-1); } .tlui-slider__thumb:focus-visible { box-shadow: inset 0 0 0 2px var(--color-focus); } /* ----------------------- Kbd ---------------------- */ .tlui-kbd { font-family: inherit; font-size: 11px; line-height: 11px; display: grid; justify-items: center; grid-auto-flow: column; grid-template-columns: auto; grid-auto-columns: minmax(1em, auto); gap: 1px; align-self: bottom; color: var(--color-text-2); margin-left: var(--space-4); } .tlui-kbd > span { width: 100%; text-align: center; display: inline; margin: 0px; padding: 2px; border-radius: 2px; } .tlui-kbd:not(:last-child) { margin-right: var(--space-2); } /* --------------------- Button --------------------- */ .tlui-button { margin: 0px; position: relative; z-index: 1; height: 44px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 12px; font-weight: inherit; color: var(--color-text-1); padding: 0px 13px; cursor: pointer; border: none; outline: none; -webkit-user-select: none; -moz-user-select: none; user-select: none; white-space: nowrap; overflow: hidden; background: transparent; text-shadow: 1px 1px 0px var(--color-panel); } .tlui-button::after { content: ''; z-index: 1; position: absolute; right: 4px; bottom: 4px; display: block; width: calc(100% - 8px); height: calc(100% - 8px); border-radius: var(--radius-3); background-color: transparent; pointer-events: none; } .tlui-button > span { text-overflow: ellipsis; overflow: hidden; display: flex; align-items: center; } .tlui-button > span:not(:only-child) { flex-grow: 2; } .tlui-button > span > svg { margin-left: var(--space-2); } .tlui-button:disabled { cursor: default; color: var(--color-text-3); } .tlui-button:not([data-state='selected'], :disabled):active::after { background: var(--color-muted-2); } @media (hover: hover) { .tlui-button:not([data-state='selected'], :disabled):hover::after { background: var(--color-muted-2); } } .tlui-icon-left { margin-right: var(--space-4); } .tlui-button > * { position: relative; z-index: 100; color: inherit; } .tlui-button > svg { width: 18px; height: 18px; pointer-events: none; } .tlui-button:not(:disabled, :focus-visible, [data-state='open']):active { z-index: 2; color: var(--color-text-0); } .tlui-button:not(:hover, :disabled, [data-state='open']):focus-visible::after { box-shadow: inset 0 0 0 2px var(--color-focus); } .tlui-button[data-state='selected']:not(:hover, :disabled):focus-visible::after { box-shadow: inset 0 0 0 2px var(--color-focus); } @media (hover: hover) { .tlui-button:not(:disabled, :focus-visible):hover { z-index: 2; color: var(--color-text-0); } /* .tlui-button:not(:disabled, :focus-visible):hover::after { box-shadow: inset 0 0 0 1px var(--color-muted-1); } */ .tlui-button__primary:not(:disabled, :focus-visible):hover { color: var(--color-primary); } .tlui-button__warning:not(:disabled, :focus-visible):hover { color: var(--color-warn); } } .tlui-button:disabled { color: var(--color-text-3); } /* Selected */ .tlui-button[data-state='selected'] { color: var(--color-selected-contrast); } .tlui-button[data-state='selected']:not(:disabled, :focus-visible):active { color: var(--color-selected-contrast); } @media (hover: hover) { .tlui-button[data-state='selected']:not(:disabled, :focus-visible):hover { color: var(--color-selected-contrast); } } .tlui-button[data-state='selected']:not(:disabled)::after { background: var(--color-selected); } /* Hinted */ .tlui-button[data-state='hinted']::after { background: var(--color-hint); /* box-shadow: inset 0 0 0 1px var(--color-muted-1); */ } .tlui-button[data-state='hinted']:not(:disabled, :focus-visible):active::after { background: var(--color-hint); /* box-shadow: inset 0 0 0 1px var(--color-text-3); */ } @media (hover: hover) { .tlui-button[data-state='hinted']:not(:disabled, :focus-visible):hover::after { background: var(--color-hint); /* box-shadow: inset 0 0 0 1px var(--color-text-3); */ } } /* Focus Mode Button */ .tlui-focus-button { z-index: var(--layer-panels); pointer-events: all; } /* Squished */ .tlui-button.squished { height: 36px; width: 44px; } .tlui-button__primary { color: var(--color-primary); } .tlui-button__warning { color: var(--color-warn); } .tlui-button__danger { color: var(--color-warn); } /* --------------------- Popover -------------------- */ .tlui-popover { position: relative; display: flex; align-content: stretch; } .tlui-popover__content { position: relative; max-height: 75vh; margin: 0px; border: none; border-radius: var(--radius-4); background-color: var(--color-panel); box-shadow: var(--shadow-3); z-index: var(--layer-menus); overflow: hidden; overflow-y: auto; touch-action: auto; overscroll-behavior: none; scrollbar-width: none; -ms-overflow-style: none; } /* -------------------------------------------------- */ /* Zones */ /* -------------------------------------------------- */ /* ------------------- Status Bar ------------------- */ .tlui-debug-panel { margin-top: var(--space-2); background-color: var(--color-low); width: 100%; display: grid; align-items: center; grid-template-columns: 1fr auto auto; justify-content: space-between; padding-left: var(--space-4); border-radius: var(--radius-1); font-size: 12px; color: var(--color-text-1); z-index: var(--layer-panels); pointer-events: all; } .tlui-debug-panel__current-state { white-space: nowrap; } /* -------------------- Menu Zone ------------------- */ .tlui-menu-zone { position: relative; z-index: var(--layer-panels); width: -moz-fit-content; width: fit-content; } .tlui-menu-zone::before { content: ''; display: block; position: absolute; top: 0px; left: 0px; inset: -4px; border: 4px solid var(--color-background); border-radius: var(--radius-1) var(--radius-1) var(--radius-5) var(--radius-1); background-color: var(--color-low); } .tlui-menu-zone *[data-state='open']::after { background: linear-gradient(180deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .tlui-menu-zone__controls { position: relative; align-items: center; grid-row: 1; grid-column: 1; width: -moz-fit-content; width: fit-content; border-radius: var(--radius-1) var(--radius-1) var(--radius-4) var(--radius-1); display: flex; flex-direction: row; z-index: var(--layer-panels); pointer-events: all; } .tlui-menu-zone__divider { width: 1px; height: 18px; background-color: var(--color-muted-1); } .tlui-menu-zone__controls > * { margin: 0px -2px; } .tlui-menu-zone__controls > *:first-child { margin-left: 0px; } .tlui-menu-zone__controls > *:last-child { margin-right: 0px; } .tlui-menu-zone__controls > .tlui-menu-zone__divider { margin: 0px; } .tlui-menu-zone__controls .tlui-icon { width: 15px; height: 15px; } /* ------------------- Style Panel ------------------ */ .tlui-style-panel__wrapper { box-shadow: var(--shadow-2); border-radius: var(--radius-4); pointer-events: all; background-color: var(--color-panel); height: -moz-fit-content; height: fit-content; max-height: 100%; margin: var(--space-2) var(--space-2); overflow: hidden; touch-action: auto; overscroll-behavior: none; overflow-y: auto; color: var(--color-text); } .tlui-style-panel { position: relative; z-index: var(--layer-panels); pointer-events: all; } .tlui-style-panel::-webkit-scrollbar { display: none; } .tlui-style-panel .tlui-button.select { width: 100%; } .tlui-style-panel__section { display: flex; position: relative; flex-direction: column; } .tlui-style-panel__section:nth-of-type(n + 2):not(:last-child) { border-bottom: 1px solid var(--color-divider); } .tlui-style-panel__section:empty { display: none; } .tlui-style-panel__section__common:not(:only-child) { margin-bottom: 7px; border-bottom: 1px solid var(--color-divider); } .tlui-style-panel__row { display: flex; } .tlui-style-panel__row > *:nth-child(2) { margin-left: -4px; } .tlui-style-panel__double-select-picker { display: grid; grid-template-columns: 1fr auto auto; align-items: center; padding-left: var(--space-4); font-size: 12px; width: 164px; } .tlui-style-panel__double-select-picker > .tlui-button { min-width: 44px; margin-left: -4px; } .tlui-style-panel__double-select-picker-label { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: var(--color-text-1); } .tlui-style-panel__section *[data-state='open']::after { background: var(--color-muted-0); } /* ---------------------- Input --------------------- */ .tlui-input { background: none; margin: 0px; position: relative; z-index: 1; height: 44px; max-height: 44px; display: flex; align-items: center; justify-content: center; font-family: inherit; font-size: 12px; font-weight: inherit; color: var(--color-text-1); padding: 13px; padding-left: 0px; border: none; outline: none; text-overflow: ellipsis; width: 100%; -moz-user-select: all; user-select: all; -webkit-user-select: auto !important; } .tlui-input__wrapper { width: 100%; height: 44px; display: flex; align-items: center; gap: var(--space-4); color: var(--color-text); } .tlui-input__wrapper > .tlui-icon { flex-shrink: 0; } /* If mobile use 16px as font size */ /* On iOS, font size under 16px in an input will make the page zoom into the input 🤦‍♂️ */ /* https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ */ @media (max-width: 600px) { @supports (-webkit-touch-callout: none) { /* CSS specific to iOS devices */ .tlui-input { font-size: 16px; } } } /* ---------------- Prompt ---------------- */ .tlui-prompt__overlay { background: var(--color-overlay); position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; display: grid; place-items: center; overflow-y: auto; z-index: var(--layer-overlays); } .tlui-prompt__content { cursor: default; background-color: var(--color-panel); box-shadow: var(--shadow-3); border-radius: var(--radius-4); padding: var(--space-5); font-size: 12px; overflow-y: auto; min-width: 300px; max-width: 80vw; max-height: 80vh; } .tlui-prompt__actions { border: none; padding: 0px; margin: 0px; display: flex; justify-content: flex-end; margin-right: calc(-1 * var(--space-3)); margin-bottom: calc(-1 * var(--space-3)); } .tlui-prompt__title { margin: 0px; font-size: 12px; } .tlui-prompt__error { color: #d10b0b; display: flex; gap: var(--space-2); align-items: center; } /* ---------------- Dialog ---------------- */ .tlui-dialog__overlay { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; z-index: var(--layer-overlays); background-color: var(--color-overlay); pointer-events: all; animation: fadeIn 0.12s ease-out; display: grid; place-items: center; overflow-y: auto; } .tlui-dialog__content { display: flex; flex-direction: column; position: relative; cursor: default; background-color: var(--color-panel); box-shadow: var(--shadow-3); border-radius: var(--radius-4); font-size: 12px; overflow: hidden; min-width: 300px; max-width: 80vw; max-height: 80vh; } .tlui-dialog__header { position: relative; display: flex; align-items: center; flex: 0; z-index: 999; padding-left: var(--space-4); color: var(--color-text); height: 44px; } .tlui-dialog__header__title { flex: 1; font-weight: inherit; font-size: 12px; margin: 0px; color: var(--color-text-1); font-weight: 500; } .tlui-dialog__header__close { justify-self: flex-end; } .tlui-dialog__body { padding: var(--space-4) var(--space-6); flex: 0 1; overflow-y: auto; overflow-x: hidden; color: var(--color-text-1); -moz-user-select: all; user-select: all; -webkit-user-select: text; } .tlui-dialog__footer { position: relative; z-index: 999; } .tlui-dialog__footer__actions { display: flex; align-items: center; justify-content: flex-end; } .tlui-dialog__footer__actions > .tlui-button:nth-last-child(n + 2) { margin-right: -4px; } .tlui-dialog__scrim { display: block; content: ''; bottom: 0px; width: 100%; height: 40px; position: absolute; background: linear-gradient(transparent, var(--color-panel)); border-bottom-left-radius: var(--radius-4); border-bottom-right-radius: var(--radius-4); pointer-events: none; } /* ---------------- Shortcuts ---------------- */ .tlui-shortcuts-dialog__header { border-bottom: 1px solid var(--color-divider); } .tlui-shortcuts-dialog__body { position: relative; -moz-columns: 1; columns: 1; -moz-column-gap: var(--space-9); column-gap: var(--space-9); pointer-events: all; touch-action: auto; } @media (min-width: 475px) { .tlui-shortcuts-dialog__body { -moz-columns: 2; columns: 2; -moz-column-gap: var(--space-9); column-gap: var(--space-9); } } @media (min-width: 960px) { .tlui-shortcuts-dialog__body { -moz-columns: 3; columns: 3; -moz-column-gap: var(--space-9); column-gap: var(--space-9); } } .tlui-shortcuts-dialog__group { -moz-column-break-inside: avoid; break-inside: avoid-column; padding-bottom: var(--space-6); } .tlui-shortcuts-dialog__group__title { font-size: inherit; font-weight: 500; margin: 0px; color: var(--color-text-2); letter-spacing: 0.5px; text-transform: uppercase; font-size: 9px; height: 32px; display: flex; align-items: center; } .tlui-shortcuts-dialog__group__content { display: flex; flex-direction: column; color: var(--color-text-1); } .tlui-shortcuts-dialog__key-pair { display: flex; gap: var(--space-4); align-items: center; justify-content: space-between; height: 32px; } .tlui-shortcuts-dialog__key-pair__key { flex: 1; font-size: 12px; } /* --------------------- Toolbar -------------------- */ /* Wide container */ .tlui-toolbar { grid-column: 1 / span 3; grid-row: 1; display: flex; align-items: center; justify-content: center; flex-grow: 2; padding-bottom: calc(var(--space-2) + var(--sab)); } /* Centered Content */ .tlui-toolbar__inner { position: relative; width: -moz-fit-content; width: fit-content; display: flex; gap: var(--space-3); align-items: flex-end; } .tlui-toolbar__left { width: -moz-fit-content; width: fit-content; } /* Row of controls + lock button */ .tlui-toolbar__extras { position: relative; width: 100%; height: 44px; pointer-events: none; } .tlui-toolbar__extras__hidden { display: none; } .tlui-toolbar__extras__controls { display: flex; flex-direction: row; background-color: var(--color-low); border-top-left-radius: var(--radius-3); border-top-right-radius: var(--radius-3); position: relative; bottom: -4px; margin-left: 8px; margin-right: 0px; pointer-events: all; width: -moz-fit-content; width: fit-content; } .tlui-toolbar__extras__controls::before { content: ''; display: block; position: absolute; z-index: -1; top: 0px; left: 0px; inset: -4px; border: 4px solid var(--color-background); border-radius: var(--radius-4); border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; background-color: var(--color-background); } .tlui-toolbar__extras__controls > .tlui-button, .tlui-toolbar__extras__controls > .tlui-popover > .tlui-button { height: 40px; width: 40px; } .tlui-toolbar__extras__controls .tlui-button::after { border-radius: var(--radius-2); } .tlui-toolbar__lock-button { position: absolute; top: 0px; pointer-events: all; height: 40px; width: 48px; right: -4px; } .tlui-toolbar__lock-button::after { border-radius: 100%; top: 4px; left: 8px; height: 32px; width: 32px; } .tlui-toolbar__lock-button__mobile { right: -8px; } .tlui-toolbar__tools { display: flex; flex-direction: row; background-color: var(--color-low); border-radius: var(--radius-4); z-index: var(--layer-panels); pointer-events: all; position: relative; align-items: center; background: var(--color-panel); box-shadow: var(--shadow-2); } .tlui-toolbar__tools__button { height: 48px; width: 48px; } .tlui-toolbar__tools__button:nth-of-type(n + 2) { margin-left: -2px; } .tlui-toolbar__tools__button:nth-last-of-type(n + 2) { margin-right: -2px; } .tlui-toolbar__tools__button { height: 48px; width: 48px; } .tlui-layout__mobile .tlui-toolbar__tools__button { height: 48px; width: 44px; } .tlui-layout__mobile .tlui-toolbar__tools__button > .tlui-icon { height: 16px; width: 16px; } .tlui-toolbar__overflow { width: 40px; } .tlui-layout__mobile .tlui-toolbar__overflow { width: 32px; padding: 0px; } .tlui-toolbar *[data-state='open']::after { background: linear-gradient(0deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .tlui-toolbar__styles__button { width: 44px; height: 44px; } .tlui-layout__mobile .tlui-toolbar__styles__button { height: 48px; } .tlui-toolbar__divider { display: block; background: var(--color-divider); height: 18px; width: 1px; } /* -------------------- Help Zone ------------------- */ .tlui-help-menu { pointer-events: all; position: absolute; bottom: var(--space-2); right: var(--space-2); } .tlui-help-menu__button { position: relative; background-color: var(--color-low); border-radius: 100%; height: 48px; width: 48px; overflow: visible; z-index: var(--layer-panels); border: 4px solid var(--color-background); display: flex; align-items: center; justify-content: center; pointer-events: all; z-index: 1; } .tlui-help-menu__button::after { border-radius: 100%; } /* ------------------ Context Menu ------------------ */ .tlui-context-menu__move-to-page__name { max-width: calc(min(300px, 35vw)); overflow: hidden; text-overflow: ellipsis; } .tlui-context-menu__move-to-page__name[data-disabled] { color: var(--color-text-3); pointer-events: none; } /* ---------------------- Menu ---------------------- */ .tlui-menu { z-index: var(--layer-menus); height: -moz-fit-content; height: fit-content; width: -moz-fit-content; width: fit-content; max-height: 80vh; border-radius: var(--radius-4); pointer-events: all; touch-action: auto; overflow-y: auto; overscroll-behavior: none; background-color: var(--color-panel); box-shadow: var(--shadow-3); } .tlui-menu::-webkit-scrollbar { display: none; } .tlui-menu__arrow { position: relative; top: -1px; fill: var(--color-panel); stroke: var(--color-panel-contrast); stroke-width: 1px; } .tlui-menu__group[data-size='large'] { min-width: initial; } .tlui-menu__group[data-size='medium'] { min-width: 144px; } .tlui-menu__group[data-size='small'] { min-width: 96px; } .tlui-menu__group[data-size='tiny'] { min-width: 0px; } .tlui-menu__group + .tlui-menu__group { border-top: 1px solid var(--color-divider); } .tlui-menu__submenu__trigger[data-state='open']:not(:hover)::after { border-radius: var(--radius-1); background: linear-gradient(90deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .tlui-menu__submenu__trigger[data-direction='left'][data-state='open']:not(:hover)::after { border-radius: var(--radius-1); background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--color-muted-2) 100%); } .tlui-menu__button { width: 100%; justify-content: space-between; } .tlui-menu__button__wide { max-width: initial; } .tlui-menu__button:nth-child(n + 2) { margin-top: -8px; } .tlui-menu__button:nth-last-child(n + 2) { margin-bottom: -8px; } .tlui-menu__button > span:only-child { text-align: left; flex-grow: 2; } .tlui-menu__checkbox-item { padding-left: 28px; } .tlui-menu__checkbox-item__check { position: absolute; left: 0px; width: 24px; padding-left: 10px; display: inline-flex; align-items: center; justify-content: center; } /* ------------------- Button Grid ------------------ */ .tlui-button-grid__button { width: 44px; height: 44px; } .tlui-button-grid__four { display: grid; grid-template-columns: 40px 40px 40px 44px; } .tlui-button-grid__four > .tlui-button-grid__button:nth-child(n + 5) { margin-top: -2px; } .tlui-button-grid__four > .tlui-button-grid__button:nth-last-child(n + 5) { margin-bottom: -2px; } .tlui-button-grid__three { display: grid; grid-template-columns: 40px 40px 44px; } .tlui-button-grid__three > .tlui-button-grid__button:nth-child(n + 4) { margin-top: -2px; } .tlui-button-grid__three > .tlui-button-grid__button:nth-last-child(n + 4) { margin-bottom: -2px; } .tlui-button-grid__two { display: grid; grid-template-columns: 40px 44px; } .tlui-button-grid__two > .tlui-button-grid__button:nth-child(n + 3) { margin-top: -2px; } .tlui-button-grid__two > .tlui-button-grid__button:nth-last-child(n + 3) { margin-bottom: -2px; } /* .tlui-button-grid__button:not(:nth-child(4n - 3)) { margin-left: -2px; } .tlui-button-grid__button:not(:nth-child(4n)) { margin-right: -2px; }*/ /* .tlui-button-grid__button:nth-last-child(1) { margin-right: 0px; } */ /* ------------------ Actions Menu ------------------ */ .tlui-actions-menu { max-height: calc(100vh - 150px); } /* --------------------- Toasts --------------------- */ .tlui-toast__viewport { position: absolute; inset: 0px; margin: 0px; display: flex; align-items: flex-end; justify-content: flex-end; flex-direction: column; gap: var(--space-3); pointer-events: none; padding: 0px var(--space-3) 64px 0px; z-index: var(--layer-toasts); } .tlui-toast__viewport > * { pointer-events: all; } .tlui-toast__icon { padding-top: var(--space-4); padding-left: var(--space-4); } .tlui-toast__container { min-width: 200px; max-width: 280px; display: flex; flex-direction: row; gap: var(--space-3); background-color: var(--color-panel); box-shadow: var(--shadow-2); border-radius: var(--radius-4); font-size: 12px; } .tlui-toast__main { flex-grow: 2; } .tlui-toast__main:nth-child(1) > .tlui-toast__content { padding-left: var(--space-4); } .tlui-toast__content { padding-left: 0px; padding-top: var(--space-4); padding-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .tlui-toast__content:not(:only-child) { padding-bottom: var(--space-2); } .tlui-toast__title { font-weight: 600; color: var(--color-text); } .tlui-toast__description { color: var(--color-text-1); padding: var(--space-3); margin: 0px; padding: 0px; } .tlui-toast__actions { display: flex; flex-direction: row; justify-content: flex-start; } .tlui-toast__close { align-self: flex-end; } @media (prefers-reduced-motion: no-preference) { .tlui-toast__container[data-state='open'] { animation: slide-in 200ms cubic-bezier(0.785, 0.135, 0.15, 0.86); } .tlui-toast__container[data-state='closed'] { animation: hide 100ms ease-in; } .tlui-toast__container[data-swipe='move'] { transform: translateX(var(--radix-toast-swipe-move-x)); } .tlui-toast__container[data-swipe='cancel'] { transform: translateX(0); transition: transform 200ms ease-out; } .tlui-toast__container[data-swipe='end'] { animation: swipe-out 100ms ease-out; } } /* --------------------- Mobile --------------------- */ @media (max-width: 640px) { .tlui-menu__group .tlui-button { height: 40px; } .tlui-menu__group .tlui-button > .tlui-kbd { display: none; } .tlui-menu__group .tlui-button > .tlui-icon-left { display: none; } } /* --------------------- Bottom --------------------- */ .tlui-layout__bottom { grid-row: 2; } .tlui-layout__bottom__main { width: 100%; position: relative; display: flex; align-items: flex-end; justify-content: center; } /* ------------------- Navigation ------------------- */ .tlui-navigation-zone { display: flex; width: -moz-min-content; width: min-content; flex-direction: column; background-color: var(--color-low); z-index: var(--layer-panels); pointer-events: all; position: absolute; left: 0px; bottom: 0px; } .tlui-navigation-zone::before { content: ''; display: block; position: absolute; z-index: -1; inset: -4px; border: 4px solid var(--color-background); border-radius: var(--radius-1); border-top-right-radius: var(--radius-5); background-color: var(--color-low); } .tlui-navigation-zone__controls { display: flex; flex-direction: row; width: -moz-min-content; width: min-content; background-color: none; overflow: hidden; } .tlui-navigation-zone__controls > .tlui-button { margin-left: -2px; margin-right: -2px; } .tlui-navigation-zone__controls > .tlui-button:nth-of-type(1) { margin-left: 0px; } .tlui-navigation-zone__controls > .tlui-button:nth-last-of-type(1) { margin-right: 0px; } .tlui-navigation-zone__toggle .tlui-icon { opacity: 0.24; transition: opacity 0.2s ease-in-out; } .tlui-navigation-zone__toggle:active .tlui-icon { opacity: 1; transition: opacity 0.12s ease-in-out; } @media (hover: hover) { .tlui-navigation-zone__toggle:hover .tlui-icon { opacity: 1; transition: opacity 0.12s ease-in-out; } } .tlui-minimap { width: 100%; height: 96px; min-height: 96px; overflow: hidden; padding: var(--space-3); padding-top: 0px; } .tlui-minimap__canvas { position: relative; width: 100%; height: 100%; } .tlui-zoom-menu__button__pct { width: 60px; text-align: center; } /* ----------------------- ... ---------------------- */ @keyframes hide { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes slide-in { from { transform: translateX(calc(100% + var(--space-3))); } to { transform: translateX(0px); } } @keyframes swipe-out { from { transform: translateX(var(--radix-toast-swipe-end-x)); } to { transform: translateX(calc(100% + var(--space-3))); } } /* ------------------- Page Select ------------------ */ .tlui-page-menu__wrapper { position: relative; display: flex; flex-direction: column; width: 220px; height: -moz-fit-content; height: fit-content; max-height: 50vh; } .tlui-page-menu__trigger { width: 128px; } .tlui-page-menu__trigger > span { flex-grow: 2; margin-right: var(--space-4); } .tlui-page-menu__header { display: flex; flex-direction: row; align-items: center; width: 100%; padding-left: var(--space-4); min-height: 44px; border-bottom: 1px solid var(--color-divider); } .tlui-page-menu__header > .tlui-button:nth-of-type(1) { margin-right: -4px; } .tlui-page-menu__header__title { color: var(--color-text); font-size: 12px; font-weight: 500; flex-grow: 2; } .tlui-page-menu__name { flex-grow: 2; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tlui-page-menu__list { position: relative; flex-direction: column; max-height: 100%; overflow-x: hidden; overflow-y: auto; touch-action: auto; } .tlui-page-menu__item { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .tlui-page-menu__item:nth-of-type(n + 2) { margin-top: -4px; } .tlui-page-menu__item__button { flex-grow: 2; } .tlui-page-menu__item__button > span { display: block; flex-grow: 2; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tlui-page-menu__item__button__checkbox { padding-left: 36px; } .tlui-page-menu__item__button__check { position: absolute; left: 0px; width: 24px; padding-left: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); } .tlui-page_menu__item__sortable { position: absolute; top: 0px; left: 0px; width: 100%; height: -moz-fit-content; height: fit-content; display: flex; flex-direction: row; align-items: center; overflow: hidden; z-index: 1; } .tlui-page_menu__item__sortable__title { flex: 1; } .tlui-page_menu__item__sortable__title > .tlui-input__wrapper { height: 100%; } .tlui-page_menu__item__sortable__button { flex: 0; } .tlui-page_menu__item__sortable:focus-within { z-index: 10; } .tlui-page_menu__item__sortable__handle { touch-action: none; width: 32px; height: 40px; cursor: grab; color: var(--color-text-3); flex-shrink: 0; margin-right: -9px; } .tlui-page_menu__item__sortable__handle:active { cursor: grabbing; } .tlui-page-menu__item__input { margin-left: 13px; height: 100%; } /* The more menu has complex CSS here: */ /* If the user can hover, then visible but opacity zero until hover */ /* If the user cannot hover, then not displayed unless editing, and then opacity 1 */ .tlui-page_menu__item__submenu { pointer-events: all; flex: 0; cursor: pointer; margin: 0px; display: none; } .tlui-page_menu__item__submenu[data-isediting='true'] { display: block; } @media (hover: hover) { .tlui-page_menu__item__submenu { opacity: 0; display: block; } .tlui-page_menu__item__submenu:hover, .tlui-page-menu__item:focus-within > .tlui-page_menu__item__submenu, .tlui-page_menu__item__sortable:focus-within > .tlui-page_menu__item__submenu { opacity: 1; } } /* --------------------- Dialogs -------------------- */ /* Edit Link Dialog */ .tlui-edit-link-dialog { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text); } .tlui-edit-link-dialog__input { background-color: var(--color-muted-2); flex-grow: 2; border-radius: var(--radius-2); padding: 0px var(--space-4); } /* Embed Dialog */ .tlui-embed__spacer { flex-grow: 2; min-height: 0px; margin-left: calc(-1 * var(--space-4)); margin-top: calc(-1 * var(--space-4)); pointer-events: none; } .tlui-embed-dialog__list { display: flex; flex-direction: column; padding-bottom: var(--space-5); } .tlui-embed-dialog__item { position: relative; border: none; background: none; font-family: inherit; display: flex; text-align: left; gap: var(--space-3); cursor: pointer; padding: 0; align-items: center; color: var(--color-text); font-size: var(--font-size-1); height: 44px; } @media (hover: hover) { .tlui-embed-dialog__item:hover::after { display: block; content: ''; position: absolute; inset: 0px; background-color: var(--color-muted-2); border-radius: var(--radius-4); } } .tlui-embed-dialog__item__image { padding: var(--space-3); } .tlui-embed-dialog__item__image__img { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background-size: contain; background-repeat: no-repeat; background-position: center center; } .tlui-embed-dialog__enter { display: flex; flex-direction: column; gap: var(--space-4); color: var(--color-text-1); } .tlui-embed-dialog__input { background-color: var(--color-muted-2); flex-grow: 2; border-radius: var(--radius-2); padding: 0px var(--space-4); } .tlui-embed-dialog__warning { color: var(--color-warn); } .tlui-embed-dialog__instruction__link { display: flex; gap: var(--space-1); margin-top: var(--space-4); } .tlui-embed-dialog__enter a { color: var(--color-text-1); } .tlui-following { display: block; position: absolute; inset: 0px; border-width: 2px; border-style: solid; z-index: 9999999; pointer-events: none; } /* ---------------- Offline Indicator --------------- */ .tlui-offline-indicator { display: flex; flex-direction: row; gap: var(--space-3); color: var(--color-text); background-color: var(--color-low); border: 3px solid var(--color-background); padding: 0px var(--space-5); height: 42px; align-items: center; justify-content: center; border-radius: 99px; opacity: 0; animation: fade-in; animation-duration: 0.12s; animation-delay: 2s; animation-fill-mode: forwards; } /*! * Copyright (c) HANDSONCODE sp. z o. o. * * HANDSONTABLE is a software distributed by HANDSONCODE sp. z o. o., a Polish corporation based in * Gdynia, Poland, at Aleja Zwyciestwa 96-98, registered by the District Court in Gdansk under number * 538651, EU tax ID number: PL5862294002, share capital: PLN 62,800.00. * * This software is protected by applicable copyright laws, including international treaties, and dual- * licensed - depending on whether your use for commercial purposes, meaning intended for or * resulting in commercial advantage or monetary compensation, or not. * * If your use is strictly personal or solely for evaluation purposes, meaning for the purposes of testing * the suitability, performance, and usefulness of this software outside the production environment, * you agree to be bound by the terms included in the "handsontable-non-commercial-license.pdf" file. * * Your use of this software for commercial purposes is subject to the terms included in an applicable * license agreement. * * In any case, you must not make any such use of this software as to develop software which may be * considered competitive with this software. * * UNLESS EXPRESSLY AGREED OTHERWISE, HANDSONCODE PROVIDES THIS SOFTWARE ON AN "AS IS" * BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, AND IN NO EVENT AND UNDER NO * LEGAL THEORY, SHALL HANDSONCODE BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY DIRECT, * INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES OF ANY CHARACTER ARISING FROM * USE OR INABILITY TO USE THIS SOFTWARE. * * Version: 14.3.0 * Release date: 16/04/2024 (built at 16/04/2024 10:23:56) */.handsontable .table td,.handsontable .table th{border-top:none}.handsontable tr{background:#fff}.handsontable td{background-color:inherit}.handsontable .table caption+thead tr:first-child td,.handsontable .table caption+thead tr:first-child th,.handsontable .table colgroup+thead tr:first-child td,.handsontable .table colgroup+thead tr:first-child th,.handsontable .table thead:first-child tr:first-child td,.handsontable .table thead:first-child tr:first-child th{border-top:1px solid #ccc}.handsontable .table-bordered{border:0;border-collapse:separate}.handsontable .table-bordered td,.handsontable .table-bordered th{border-left:none}.handsontable .table-bordered td:first-child,.handsontable .table-bordered th:first-child{border-left:1px solid #ccc}.handsontable .table>tbody>tr>td,.handsontable .table>tbody>tr>th,.handsontable .table>tfoot>tr>td,.handsontable .table>tfoot>tr>th,.handsontable .table>thead>tr>td,.handsontable .table>thead>tr>th{line-height:21px;padding:0}.col-lg-1.handsontable,.col-lg-10.handsontable,.col-lg-11.handsontable,.col-lg-12.handsontable,.col-lg-2.handsontable,.col-lg-3.handsontable,.col-lg-4.handsontable,.col-lg-5.handsontable,.col-lg-6.handsontable,.col-lg-7.handsontable,.col-lg-8.handsontable,.col-lg-9.handsontable,.col-md-1.handsontable,.col-md-10.handsontable,.col-md-11.handsontable,.col-md-12.handsontable,.col-md-2.handsontable,.col-md-3.handsontable,.col-md-4.handsontable,.col-md-5.handsontable,.col-md-6.handsontable,.col-md-7.handsontable,.col-md-8.handsontable,.col-md-9.handsontable .col-sm-1.handsontable,.col-sm-10.handsontable,.col-sm-11.handsontable,.col-sm-12.handsontable,.col-sm-2.handsontable,.col-sm-3.handsontable,.col-sm-4.handsontable,.col-sm-5.handsontable,.col-sm-6.handsontable,.col-sm-7.handsontable,.col-sm-8.handsontable,.col-sm-9.handsontable .col-xs-1.handsontable,.col-xs-10.handsontable,.col-xs-11.handsontable,.col-xs-12.handsontable,.col-xs-2.handsontable,.col-xs-3.handsontable,.col-xs-4.handsontable,.col-xs-5.handsontable,.col-xs-6.handsontable,.col-xs-7.handsontable,.col-xs-8.handsontable,.col-xs-9.handsontable{padding-left:0;padding-right:0}.handsontable .table-striped>tbody>tr:nth-of-type(2n){background-color:#fff}.handsontable{position:relative}.handsontable .hide{display:none}.handsontable .relative{position:relative}.handsontable .wtHider{width:0}.handsontable .wtSpreader{height:auto;position:relative;width:0}.handsontable div,.handsontable input,.handsontable table,.handsontable tbody,.handsontable td,.handsontable textarea,.handsontable th,.handsontable thead{box-sizing:content-box;-webkit-box-sizing:content-box;-moz-box-sizing:content-box}.handsontable input,.handsontable textarea{min-height:auto}.handsontable table.htCore{border-collapse:separate;border-spacing:0;border-width:0;cursor:default;margin:0;max-height:none;max-width:none;outline-width:0;table-layout:fixed;width:0}.handsontable col,.handsontable col.rowHeader{width:50px}.handsontable td,.handsontable th{background-color:#fff;border-bottom:1px solid #ccc;border-left-width:0;border-right:1px solid #ccc;border-top-width:0;empty-cells:show;height:22px;line-height:21px;outline:none;outline-width:0;overflow:hidden;padding:0 4px;vertical-align:top;white-space:pre-wrap}[dir=rtl].handsontable td,[dir=rtl].handsontable th{border-left:1px solid #ccc;border-right-width:0}.handsontable th:last-child{border-bottom:1px solid #ccc;border-left:none;border-right:1px solid #ccc}[dir=rtl].handsontable th:last-child{border-left:1px solid #ccc;border-right:none}.handsontable td:first-of-type,.handsontable th:first-child,.handsontable th:nth-child(2){border-left:1px solid #ccc}[dir=rtl].handsontable td:first-of-type,[dir=rtl].handsontable th:first-child,[dir=rtl].handsontable th:nth-child(2){border-right:1px solid #ccc}.handsontable .ht_clone_top th:nth-child(2){border-left-width:0;border-right:1px solid #ccc}[dir=rtl].handsontable .ht_clone_top th:nth-child(2){border-left:1px solid #ccc;border-right-width:0}.handsontable.htRowHeaders thead tr th:nth-child(2){border-left:1px solid #ccc}[dir=rtl].handsontable.htRowHeaders thead tr th:nth-child(2){border-right:1px solid #ccc}.handsontable tr:first-child td,.handsontable tr:first-child th{border-top:1px solid #ccc}.ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable tbody tr th,.ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable:not(.ht_clone_top) thead tr th:first-child{border-left:1px solid #ccc;border-right-width:0}[dir=rtl].ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable tbody tr th,[dir=rtl].ht_master:not(.innerBorderInlineStart):not(.emptyColumns)~.handsontable:not(.ht_clone_top) thead tr th:first-child{border-left-width:0;border-right:1px solid #ccc}.ht_master:not(.innerBorderTop):not(.innerBorderBottom) thead tr.lastChild th,.ht_master:not(.innerBorderTop):not(.innerBorderBottom) thead tr:last-child th,.ht_master:not(.innerBorderTop):not(.innerBorderBottom)~.handsontable thead tr.lastChild th,.ht_master:not(.innerBorderTop):not(.innerBorderBottom)~.handsontable thead tr:last-child th{border-bottom-width:0}.handsontable th{background-color:#f0f0f0;color:#222;font-weight:400;text-align:center;white-space:nowrap}.handsontable thead th{padding:0}.handsontable th.active{background-color:#ccc}.handsontable thead th .relative{padding:2px 4px}.handsontable span.colHeader{display:inline-block;line-height:1.1}.handsontable .wtBorder{font-size:0;position:absolute}.handsontable .wtBorder.hidden{display:none!important}.handsontable .wtBorder.current{z-index:10}.handsontable .wtBorder.area{z-index:8}.handsontable .wtBorder.fill{z-index:6}.handsontable .wtBorder.corner{cursor:crosshair;font-size:0}.ht_clone_master{z-index:100}.ht_clone_inline_start{z-index:120}.ht_clone_bottom{z-index:130}.ht_clone_bottom_inline_start_corner{z-index:150}.ht_clone_top{z-index:160}.ht_clone_top_inline_start_corner{z-index:180}.handsontable col.hidden{width:0!important}.handsontable tr.hidden,.handsontable tr.hidden td,.handsontable tr.hidden th{display:none}.ht_clone_bottom,.ht_clone_inline_start,.ht_clone_top,.ht_master{overflow:hidden}.ht_master .wtHolder{overflow:auto}.handsontable .ht_clone_inline_start table.htCore>thead,.handsontable .ht_master table.htCore>tbody>tr>th,.handsontable .ht_master table.htCore>thead{visibility:hidden}.ht_clone_bottom .wtHolder,.ht_clone_inline_start .wtHolder,.ht_clone_top .wtHolder{overflow:hidden}.handsontable{color:#373737;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif;font-size:13px;font-weight:400;touch-action:manipulation}.handsontable a{color:#104acc}.handsontable.htAutoSize{left:-99000px;position:absolute;top:-99000px;visibility:hidden}.handsontable td.htInvalid{background-color:#ffbeba!important}.handsontable td.htNoWrap{white-space:nowrap}.handsontable td.invisibleSelection,.handsontable th.invisibleSelection{outline:none}.handsontable td.invisibleSelection::-moz-selection, .handsontable th.invisibleSelection::-moz-selection{background:hsla(0,0%,100%,0)}.handsontable td.invisibleSelection::selection,.handsontable th.invisibleSelection::selection{background:hsla(0,0%,100%,0)}.hot-display-license-info{color:#373737;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Helvetica Neue,Arial,sans-serif;font-size:10px;font-weight:400;padding:5px 0 3px;text-align:left}.hot-display-license-info a{color:#104acc;font-size:10px}.handsontable .htFocusCatcher{border:0;height:0;margin:0;opacity:0;padding:0;position:absolute;width:0;z-index:-1}.handsontable .manualColumnResizer{cursor:col-resize;height:25px;position:absolute;top:0;width:5px;z-index:210}.handsontable .manualRowResizer{cursor:row-resize;height:5px;left:0;position:absolute;width:50px;z-index:210}.handsontable .manualColumnResizer.active,.handsontable .manualColumnResizer:hover,.handsontable .manualRowResizer.active,.handsontable .manualRowResizer:hover{background-color:#34a9db}.handsontable .manualColumnResizerGuide{background-color:#34a9db;border-left:none;border-right:1px dashed #777;display:none;margin-left:5px;margin-right:unset;position:absolute;right:unset;top:0;width:0}[dir=rtl].handsontable .manualColumnResizerGuide{border-left:1px dashed #777;border-right:none;left:unset;margin-left:unset;margin-right:5px}.handsontable .manualRowResizerGuide{background-color:#34a9db;border-bottom:1px dashed #777;bottom:0;display:none;height:0;left:0;margin-top:5px;position:absolute}.handsontable .manualColumnResizerGuide.active,.handsontable .manualRowResizerGuide.active{display:block;z-index:209}.handsontable .columnSorting{position:relative}.handsontable .columnSorting.sortAction:hover{cursor:pointer;text-decoration:underline}.handsontable span.colHeader.columnSorting:before{background-position-x:right;background-repeat:no-repeat;background-size:contain;content:"";height:10px;left:unset;margin-top:-6px;padding-left:8px;padding-right:0;position:absolute;right:-9px;top:50%;width:5px}[dir=rtl].handsontable span.colHeader.columnSorting:before{background-position-x:left;left:-9px;padding-left:0;padding-right:8px;right:unset}.handsontable span.colHeader.columnSorting.ascending:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAKlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKE86IAAAADXRSTlMABBEmRGprlJW72e77tTkTKwAAAFNJREFUeAHtzjkSgCAUBNHPgsoy97+ulGXRqJE5L+xkxoYt2UdsLb5bqFINz+aLuuLn5rIu2RkO3fZpWENimNgiw6iBYRTPMLJjGFxQZ1hxxb/xBI1qC8k39CdKAAAAAElFTkSuQmCC)}.handsontable span.colHeader.columnSorting.descending:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAoCAMAAADJ7yrpAAAAKlBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAKE86IAAAADXRSTlMABBEmRGprlJW72e77tTkTKwAAAFJJREFUeAHtzjkSgCAQRNFmQYUZ7n9dKUvru0TmvPAn3br0QfgdZ5xx6x+rQn23GqTYnq1FDcnuzZIO2WmedVqIRVxgGKEyjNgYRjKGkZ1hFIZ3I70LyM0VtU8AAAAASUVORK5CYII=)}.htGhostTable .htCore span.colHeader.columnSorting:not(.indicatorDisabled):before{content:"*";display:inline-block;padding-right:20px;position:relative}.handsontable td.area,.handsontable td.area-1,.handsontable td.area-2,.handsontable td.area-3,.handsontable td.area-4,.handsontable td.area-5,.handsontable td.area-6,.handsontable td.area-7{position:relative}.handsontable td.area-1:before,.handsontable td.area-2:before,.handsontable td.area-3:before,.handsontable td.area-4:before,.handsontable td.area-5:before,.handsontable td.area-6:before,.handsontable td.area-7:before,.handsontable td.area:before{background:#005eff;bottom:0;bottom:-100%\9;content:"";left:0;position:absolute;right:0;top:0}@media (-ms-high-contrast:none),screen and (-ms-high-contrast:active){.handsontable td.area-1:before,.handsontable td.area-2:before,.handsontable td.area-3:before,.handsontable td.area-4:before,.handsontable td.area-5:before,.handsontable td.area-6:before,.handsontable td.area-7:before,.handsontable td.area:before{bottom:-100%}}.handsontable td.area:before{opacity:.1}.handsontable td.area-1:before{opacity:.2}.handsontable td.area-2:before{opacity:.27}.handsontable td.area-3:before{opacity:.35}.handsontable td.area-4:before{opacity:.41}.handsontable td.area-5:before{opacity:.47}.handsontable td.area-6:before{opacity:.54}.handsontable td.area-7:before{opacity:.58}.handsontable tbody th.current,.handsontable thead th.current{box-shadow:inset 0 0 0 2px #4b89ff}.handsontable tbody th.ht__highlight,.handsontable thead th.ht__highlight{background-color:#dcdcdc}.handsontable tbody th.ht__active_highlight,.handsontable thead th.ht__active_highlight{background-color:#8eb0e7;color:#000}.handsontableInput{background-color:#fff;border:none;border-radius:0;box-shadow:inset 0 0 0 2px #5292f7;color:#000;display:block;font-family:inherit;font-size:inherit;line-height:21px;margin:0;outline-width:0;padding:1px 5px 0;resize:none}.handsontableInput:focus{outline:none}.handsontableInputHolder{left:0;position:absolute;top:0}.htSelectEditor{-webkit-appearance:menulist-button!important;position:absolute;width:auto}.htSelectEditor:focus{outline:none}.handsontable .htDimmed{color:#777}.handsontable .htSubmenu{position:relative}.handsontable .htSubmenu :after{color:#777;content:"▶";font-size:9px;position:absolute;right:5px}[dir=rtl].handsontable .htSubmenu :after{content:""}[dir=rtl].handsontable .htSubmenu :before{color:#777;content:"◀";font-size:9px;left:5px;position:absolute}.handsontable .htLeft{text-align:left}.handsontable .htCenter{text-align:center}.handsontable .htRight{text-align:right}.handsontable .htJustify{text-align:justify}.handsontable .htTop{vertical-align:top}.handsontable .htMiddle{vertical-align:middle}.handsontable .htBottom{vertical-align:bottom}.handsontable .htPlaceholder{color:#999}.handsontable.listbox{margin:0}.handsontable.listbox .ht_master table{background:#fff;border:1px solid #ccc;border-collapse:separate}.handsontable.listbox td,.handsontable.listbox th,.handsontable.listbox tr:first-child td,.handsontable.listbox tr:first-child th,.handsontable.listbox tr:last-child th{border-color:transparent!important}.handsontable.listbox td,.handsontable.listbox th{text-overflow:ellipsis;white-space:nowrap}.handsontable.listbox td.htDimmed{color:inherit;cursor:default;font-style:inherit}.handsontable.listbox .wtBorder{visibility:hidden}.handsontable.listbox tr td.current,.handsontable.listbox tr:hover td{background:#eee}.ht_editor_hidden{z-index:-1}.ht_editor_visible{z-index:200}.handsontable td.htSearchResult{background:#fcedd9;color:#583707}.handsontable .collapsibleIndicator{background:#eee;border:1px solid #a6a6a6;border-radius:10px;box-shadow:0 0 0 3px #eee;color:#222;cursor:pointer;font-size:10px;height:10px;left:unset;line-height:8px;position:absolute;right:5px;text-align:center;top:50%;transform:translateY(-50%);width:10px}[dir=rtl].handsontable .collapsibleIndicator{left:5px;right:unset}.handsontable.mobile,.handsontable.mobile .wtHolder{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-overflow-scrolling:touch}.handsontable.mobile .handsontableInput:focus{-webkit-appearance:none;box-shadow:inset 0 0 0 2px #5292f7}.handsontable .bottomSelectionHandle,.handsontable .bottomSelectionHandle-HitArea,.handsontable .topSelectionHandle,.handsontable .topSelectionHandle-HitArea{left:-10000px;right:unset;top:-10000px;z-index:9999}[dir=rtl].handsontable .bottomSelectionHandle,[dir=rtl].handsontable .bottomSelectionHandle-HitArea,[dir=rtl].handsontable .topSelectionHandle,[dir=rtl].handsontable .topSelectionHandle-HitArea{left:unset;right:-10000px}.handsontable.hide-tween{animation:opacity-hide .3s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards}.handsontable.show-tween{animation:opacity-show .3s;animation-fill-mode:forwards;-webkit-animation-fill-mode:forwards} /*! * Pikaday * Copyright © 2014 David Bushell | BSD & MIT license | https://dbushell.com/ */.pika-single{background:#fff;border:1px solid;border-color:#ccc #ccc #bbb;color:#333;display:block;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;position:relative;z-index:9999}.pika-single:after,.pika-single:before{content:" ";display:table}.pika-single:after{clear:both}.pika-single.is-hidden{display:none}.pika-single.is-bound{box-shadow:0 5px 15px -5px rgba(0,0,0,.5);position:absolute}.pika-lendar{float:left;margin:8px;width:240px}.pika-title{position:relative;text-align:center}.pika-label{background-color:#fff;display:inline-block;font-size:14px;font-weight:700;line-height:20px;margin:0;overflow:hidden;padding:5px 3px;position:relative;z-index:9999}.pika-title select{cursor:pointer;left:0;margin:0;opacity:0;position:absolute;top:5px;z-index:9998}.pika-next,.pika-prev{background-color:transparent;background-position:50%;background-repeat:no-repeat;background-size:75% 75%;border:0;cursor:pointer;display:block;height:30px;opacity:.5;outline:none;overflow:hidden;padding:0;position:relative;text-indent:20px;white-space:nowrap;width:20px}.pika-next:hover,.pika-prev:hover{opacity:1}.is-rtl .pika-next,.pika-prev{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAUklEQVR42u3VMQoAIBADQf8Pgj+OD9hG2CtONJB2ymQkKe0HbwAP0xucDiQWARITIDEBEnMgMQ8S8+AqBIl6kKgHiXqQqAeJepBo/z38J/U0uAHlaBkBl9I4GwAAAABJRU5ErkJggg==);float:left}.is-rtl .pika-prev,.pika-next{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAYAAAAsEj5rAAAAU0lEQVR42u3VOwoAMAgE0dwfAnNjU26bYkBCFGwfiL9VVWoO+BJ4Gf3gtsEKKoFBNTCoCAYVwaAiGNQGMUHMkjGbgjk2mIONuXo0nC8XnCf1JXgArVIZAQh5TKYAAAAASUVORK5CYII=);float:right}.pika-next.is-disabled,.pika-prev.is-disabled{cursor:default;opacity:.2}.pika-select{display:inline-block}.pika-table{border:0;border-collapse:collapse;border-spacing:0;width:100%}.pika-table td,.pika-table th{padding:0;width:14.2857142857%}.pika-table th{color:#999;font-weight:700;line-height:25px}.pika-button,.pika-table th{font-size:12px;text-align:center}.pika-button{background:#f5f5f5;border:0;box-sizing:border-box;-moz-box-sizing:border-box;color:#666;cursor:pointer;display:block;height:auto;line-height:15px;margin:0;outline:none;padding:5px;width:100%}.pika-week{color:#999;font-size:11px}.is-today .pika-button{color:#3af;font-weight:700}.has-event .pika-button,.is-selected .pika-button{background:#3af;border-radius:3px;box-shadow:inset 0 1px 3px #178fe5;color:#fff;font-weight:700}.has-event .pika-button{background:#005da9;box-shadow:inset 0 1px 3px #0076c9}.is-disabled .pika-button,.is-inrange .pika-button{background:#d5e9f7}.is-startrange .pika-button{background:#6cb31d;border-radius:3px;box-shadow:none;color:#fff}.is-endrange .pika-button{background:#3af;border-radius:3px;box-shadow:none;color:#fff}.is-disabled .pika-button{color:#999;cursor:default;opacity:.3;pointer-events:none}.is-outside-current-month .pika-button{color:#999;opacity:.3}.is-selection-disabled{cursor:default;pointer-events:none}.pika-button:hover,.pika-row.pick-whole-week:hover .pika-button{background:#ff8000;border-radius:3px;box-shadow:none;color:#fff}.pika-table abbr{border-bottom:none;cursor:help}.handsontable .htAutocompleteArrow{color:#bbb;cursor:default;float:right;font-size:10px;text-align:center;width:16px}[dir=rtl].handsontable .htAutocompleteArrow{float:left}.handsontable td.htInvalid .htAutocompleteArrow{color:#555}.handsontable td.htInvalid .htAutocompleteArrow:hover{color:#1a1a1a}.handsontable td .htAutocompleteArrow:hover{color:#777}.handsontable td.area .htAutocompleteArrow{color:#d3d3d3}.handsontable .htCheckboxRendererInput{display:inline-block}.handsontable .htCheckboxRendererInput.noValue{opacity:.5}.handsontable .htCheckboxRendererLabel{cursor:pointer;display:inline-block;font-size:inherit;vertical-align:middle}.handsontable .htCheckboxRendererLabel.fullWidth{width:100%}.handsontable .htCommentCell{position:relative}.handsontable .htCommentCell:after{border-left:6px solid transparent;border-right:none;border-top:6px solid #000;content:"";left:unset;position:absolute;right:0;top:0}[dir=rtl].handsontable .htCommentCell:after{border-left:none;border-right:6px solid transparent;left:0;right:unset}.htCommentsContainer .htComments{display:none;position:absolute;z-index:1059}.htCommentsContainer .htCommentTextArea{-webkit-appearance:none;background-color:#fff;border:none;border-left:3px solid #ccc;box-shadow:0 1px 3px rgba(0,0,0,.118),0 1px 2px rgba(0,0,0,.239);box-sizing:border-box;font-size:12px;height:90px;outline:0!important;padding:5px;width:215px}[dir=rtl].htCommentsContainer .htCommentTextArea{border-left:none;border-right:3px solid #ccc}.htCommentsContainer .htCommentTextArea:focus{border-left:3px solid #5292f7;border-right:none;box-shadow:0 1px 3px rgba(0,0,0,.118),0 1px 2px rgba(0,0,0,.239),inset 0 0 0 1px #5292f7}[dir=rtl].htCommentsContainer .htCommentTextArea:focus{border-left:none;border-right:3px solid #5292f7} /*! * Handsontable ContextMenu */.htContextMenu:not(.htGhostTable){display:none;position:absolute;z-index:1060}.htContextMenu .ht_clone_bottom,.htContextMenu .ht_clone_bottom_inline_start_corner,.htContextMenu .ht_clone_inline_start,.htContextMenu .ht_clone_top,.htContextMenu .ht_clone_top_inline_start_corner{display:none}.htContextMenu .ht_master table.htCore{border-color:#ccc;border-style:solid;border-width:1px 2px 2px 1px}[dir=rtl].htContextMenu .ht_master table.htCore{border-left-width:2px;border-right-width:1px}.htContextMenu.handsontable:focus{outline:none}.htContextMenu .wtBorder{visibility:hidden}.htContextMenu table tbody tr td{background:#fff;border-width:0;cursor:pointer;overflow:hidden;padding:4px 6px 0;text-overflow:ellipsis;white-space:nowrap}.htContextMenu table tbody tr td:first-child{border-width:0}[dir=rtl].htContextMenu table tbody tr td:first-child{border-left-width:0;border-right-width:0}.htContextMenu table tbody tr td.htDimmed{color:#323232;font-style:normal}.htContextMenu table tbody tr td.current{background:#f3f3f3}.htContextMenu table tbody tr td.htSeparator{border-top:1px solid #e6e6e6;cursor:default;height:0;padding:0}.htContextMenu table tbody tr td.htDisabled{color:#999;cursor:default}.htContextMenu table tbody tr td.htDisabled:hover{background:#fff;color:#999;cursor:default}.htContextMenu table tbody tr.htHidden{display:none}.htContextMenu table tbody tr td .htItemWrapper{margin-left:10px;margin-right:6px}[dir=rtl].htContextMenu table tbody tr td .htItemWrapper{margin-left:6px;margin-right:10px}.htContextMenu table tbody tr td div span.selected{left:4px;margin-top:-2px;position:absolute;right:0}[dir=rtl].htContextMenu table tbody tr td div span.selected{left:0;right:4px}.htContextMenu .ht_master .wtHolder{overflow:hidden}textarea.HandsontableCopyPaste{opacity:0;outline:0 none!important;overflow:hidden;position:fixed!important;right:100%!important;top:0!important} /*! * Handsontable DropdownMenu */.handsontable .changeType{background:#eee;border:1px solid #bbb;border-radius:2px;color:#bbb;float:right;font-size:9px;line-height:9px;margin:3px 1px 0 5px;padding:2px}[dir=rtl].handsontable .changeType{float:left}.handsontable .changeType:before{content:"▼ "}.handsontable .changeType:hover{border:1px solid #777;color:#777;cursor:pointer}.htDropdownMenu:not(.htGhostTable){display:none;position:absolute;z-index:1060}.htDropdownMenu .ht_clone_bottom,.htDropdownMenu .ht_clone_bottom_inline_start_corner,.htDropdownMenu .ht_clone_inline_start,.htDropdownMenu .ht_clone_top,.htDropdownMenu .ht_clone_top_inline_start_corner{display:none}.htDropdownMenu table.htCore{border-color:#ccc;border-style:solid;border-width:1px 2px 2px 1px}[dir=rtl].htDropdownMenu table.htCore{border-left-width:2px;border-right-width:1px}.htDropdownMenu.handsontable:focus{outline:none}.htDropdownMenu .wtBorder{visibility:hidden}.htDropdownMenu table tbody tr td{background:#fff;border-width:0;cursor:pointer;overflow:hidden;padding:4px 6px 0;text-overflow:ellipsis;white-space:nowrap}.htDropdownMenu table tbody tr td:first-child{border-width:0}[dir=rtl].htDropdownMenu table tbody tr td:first-child{border-left-width:0;border-right-width:0}.htDropdownMenu table tbody tr td.htDimmed{color:#323232;font-style:normal}.htDropdownMenu table tbody tr td.current{background:#e9e9e9}.htDropdownMenu table tbody tr td.htSeparator{border-top:1px solid #e6e6e6;cursor:default;height:0;padding:0}.htDropdownMenu table tbody tr td.htDisabled{color:#999}.htDropdownMenu table tbody tr td.htDisabled:hover{background:#fff;color:#999;cursor:default}.htDropdownMenu:not(.htGhostTable) table tbody tr.htHidden{display:none}.htDropdownMenu table tbody tr td .htItemWrapper,[dir=rtl].htDropdownMenu table tbody tr td .htItemWrapper{margin-left:10px;margin-right:10px}.htDropdownMenu table tbody tr td div span.selected{left:4px;margin-top:-2px;position:absolute;right:0}[dir=rtl].htDropdownMenu table tbody tr td div span.selected{left:0;right:4px}.htDropdownMenu .ht_master .wtHolder{overflow:hidden} /*! * Handsontable Filters */.htFiltersConditionsMenu:not(.htGhostTable){display:none;position:absolute;z-index:1070}.htFiltersConditionsMenu .ht_clone_bottom,.htFiltersConditionsMenu .ht_clone_bottom_inline_start_corner,.htFiltersConditionsMenu .ht_clone_inline_start,.htFiltersConditionsMenu .ht_clone_top,.htFiltersConditionsMenu .ht_clone_top_inline_start_corner{display:none}.htFiltersConditionsMenu table.htCore{border-color:#bbb;border-style:solid;border-width:1px 2px 2px 1px}.htFiltersConditionsMenu .wtBorder{visibility:hidden}.htFiltersConditionsMenu table tbody tr td{background:#fff;border-width:0;cursor:pointer;overflow:hidden;padding:4px 6px 0;text-overflow:ellipsis;white-space:nowrap}.htFiltersConditionsMenu table tbody tr td:first-child{border-width:0}[dir=rtl].htFiltersConditionsMenu table tbody tr td:first-child{border-left-width:0;border-right-width:0}.htFiltersConditionsMenu table tbody tr td.htDimmed{color:#323232;font-style:normal}.htFiltersConditionsMenu table tbody tr td.current{background:#e9e9e9}.htFiltersConditionsMenu table tbody tr td.htSeparator{border-top:1px solid #e6e6e6;height:0;padding:0}.htFiltersConditionsMenu table tbody tr td.htDisabled{color:#999}.htFiltersConditionsMenu table tbody tr td.htDisabled:hover{background:#fff;color:#999;cursor:default}.htFiltersConditionsMenu table tbody tr td .htItemWrapper{margin-left:10px;margin-right:10px}.htFiltersConditionsMenu table tbody tr td div span.selected{left:4px;margin-top:-2px;position:absolute}.htFiltersConditionsMenu .ht_master .wtHolder{overflow:hidden}.handsontable .htMenuFiltering{border-bottom:1px dotted #ccc;height:135px;overflow:hidden}.handsontable .ht_master table td.htCustomMenuRenderer{background-color:#fff;cursor:auto}.handsontable .htFiltersMenuLabel{font-size:.75em}.handsontable .htFiltersMenuActionBar{padding-bottom:3px;padding-top:10px;text-align:center}.handsontable .htFiltersMenuCondition.border{border-bottom:1px dotted #ccc!important}.handsontable .htFiltersMenuCondition .htUIInput{padding:0 0 5px}.handsontable .htFiltersMenuValue{border-bottom:1px dotted #ccc!important}.handsontable .htFiltersMenuValue .htUIMultipleSelectSearch{padding:0}.handsontable .htFiltersMenuCondition .htUIInput input,.handsontable .htFiltersMenuValue .htUIMultipleSelectSearch input{box-sizing:border-box;font-family:inherit;font-size:.75em;padding:4px;width:100%}.htUIMultipleSelect .ht_master .wtHolder{overflow-y:scroll}.handsontable .htFiltersActive .changeType{background-color:#d2e0d9;border:1px solid #509272;color:#18804e}.handsontable .htUISelectAll{margin-left:0;margin-right:10px}[dir=rtl].handsontable .htUISelectAll{margin-left:10px;margin-right:0}.handsontable .htUIClearAll,.handsontable .htUISelectAll{display:inline-block}.handsontable .htUIClearAll a,.handsontable .htUISelectAll a{font-size:.75em}.handsontable .htUISelectionControls{text-align:right}[dir=rtl].handsontable .htUISelectionControls{text-align:left}.handsontable .htCheckboxRendererInput{height:1em;margin:0 5px 0 0;vertical-align:middle}[dir=rtl].handsontable .htCheckboxRendererInput{margin-left:5px;margin-right:0}.handsontable .htUIInput{padding:3px 0 7px;position:relative;text-align:center}.handsontable .htUIInput input{border:1px solid #d2d1d1;border-radius:2px}.handsontable .htUIInputIcon{position:absolute}.handsontable .htUIInput.htUIButton{cursor:pointer;display:inline-block}.handsontable .htUIInput.htUIButton input{background-color:#eee;color:#000;cursor:pointer;font-family:inherit;font-size:.75em;font-weight:700;height:19px;min-width:64px}.handsontable .htUIInput.htUIButton input:hover{border-color:#b9b9b9}.handsontable .htUIInput.htUIButtonOK{margin-left:0;margin-right:10px}[dir=rtl].handsontable .htUIInput.htUIButtonOK{margin-left:10px;margin-right:0}.handsontable .htUIInput.htUIButtonOK input{background-color:#0f9d58;border-color:#18804e;color:#fff}.handsontable .htUIInput.htUIButtonOK input:focus-visible{background-color:#92dd8d;border-color:#7cb878;color:#000}.handsontable .htUIInput.htUIButtonOK input:hover{border-color:#1a6f46}.handsontable .htUISelect{cursor:pointer;margin-bottom:7px;position:relative}.handsontable .htUISelectCaption{background-color:#e8e8e8;border:1px solid #d2d1d1;border-radius:2px;font-family:inherit;font-size:.75em;font-weight:700;overflow:hidden;padding:3px 20px 3px 10px;text-overflow:ellipsis;white-space:nowrap}.handsontable .htUISelectCaption:hover{background-color:#e8e8e8;border:1px solid #b9b9b9}.handsontable .htUISelectDropdown:after{content:"▲";font-size:7px;position:absolute;right:10px;top:0}.handsontable .htUISelectDropdown:before{content:"▼";font-size:7px;position:absolute;right:10px;top:8px}.handsontable .htUIMultipleSelect .handsontable .htCore{border:none}.handsontable .htUIMultipleSelect .handsontable .htCore td:hover{background-color:#f5f5f5}.handsontable .htUIMultipleSelectSearch input{border:1px solid #d2d1d1;border-radius:2px;padding:3px}.handsontable .htUIRadio{display:inline-block;height:100%;margin-left:0;margin-right:5px}[dir=rtl].handsontable .htUIRadio{margin-left:5px;margin-right:0}.handsontable .htUIRadio:last-child{margin-right:0}.handsontable .htUIRadio>input[type=radio]{margin-left:0;margin-right:.5ex}[dir=rtl].handsontable .htUIRadio>input[type=radio]{margin-left:.5ex;margin-right:0}.handsontable .htUIRadio label{vertical-align:middle}.handsontable .htFiltersMenuOperators{padding-bottom:5px}.handsontable th.beforeHiddenColumn{position:relative}.handsontable th.afterHiddenColumn:before,.handsontable th.beforeHiddenColumn:after{color:#bbb;font-size:5pt;position:absolute;top:50%;transform:translateY(-50%)}.handsontable th.afterHiddenColumn{position:relative}.handsontable th.beforeHiddenColumn:after{content:"◀";right:1px}[dir=rtl].handsontable th.beforeHiddenColumn:after{content:"▶";left:1px;right:auto}.handsontable th.afterHiddenColumn:before{content:"▶";left:1px}[dir=rtl].handsontable th.afterHiddenColumn:before{content:"◀";left:auto;right:1px} /*! * Handsontable HiddenRows */.handsontable th.afterHiddenRow:after,.handsontable th.beforeHiddenRow:before{color:#bbb;font-size:6pt;left:2px;line-height:6pt;position:absolute}.handsontable th.afterHiddenRow,.handsontable th.beforeHiddenRow{position:relative}.handsontable th.beforeHiddenRow:before{bottom:2px;content:"▲"}.handsontable th.afterHiddenRow:after{content:"▼";top:2px}.handsontable.ht__selection--rows tbody th.afterHiddenRow.ht__highlight:after,.handsontable.ht__selection--rows tbody th.beforeHiddenRow.ht__highlight:before{color:#eee}.handsontable td.afterHiddenRow.firstVisibleRow,.handsontable th.afterHiddenRow.firstVisibleRow{border-top:1px solid #ccc}.htRowHeaders .ht_master.innerBorderInlineStart~.ht_clone_inline_start td:first-of-type,.htRowHeaders .ht_master.innerBorderInlineStart~.ht_clone_top_inline_start_corner th:nth-child(2){border-left:0}.handsontable.ht__manualColumnMove.after-selection--columns thead th.ht__highlight{cursor:move;cursor:grab}.handsontable.ht__manualColumnMove.on-moving--columns *,.handsontable.ht__manualColumnMove.on-moving--columns thead th.ht__highlight{cursor:move;cursor:grabbing}.handsontable.ht__manualColumnMove.on-moving--columns .manualColumnResizer{display:none}.handsontable .ht__manualColumnMove--backlight,.handsontable .ht__manualColumnMove--guideline{display:none;height:100%;position:absolute}.handsontable .ht__manualColumnMove--guideline{background:#757575;margin-inline-end:0;margin-inline-start:-1px;top:0;width:2px;z-index:205}.handsontable .ht__manualColumnMove--backlight{background:#343434;background:rgba(52,52,52,.25);display:none;pointer-events:none;z-index:205}.handsontable.on-moving--columns .ht__manualColumnMove--backlight,.handsontable.on-moving--columns.show-ui .ht__manualColumnMove--guideline{display:block}.handsontable .wtHider{position:relative}.handsontable.ht__manualRowMove.after-selection--rows tbody th.ht__highlight{cursor:move;cursor:grab}.handsontable.ht__manualRowMove.on-moving--rows *,.handsontable.ht__manualRowMove.on-moving--rows tbody th.ht__highlight{cursor:move;cursor:grabbing}.handsontable.ht__manualRowMove.on-moving--rows .manualRowResizer{display:none}.handsontable .ht__manualRowMove--backlight,.handsontable .ht__manualRowMove--guideline{display:none;position:absolute;width:100%}.handsontable .ht__manualRowMove--guideline{background:#757575;height:2px;left:0;margin-top:-1px;z-index:205}.handsontable .ht__manualRowMove--backlight{background:#343434;background:rgba(52,52,52,.25);display:none;pointer-events:none;z-index:205}.handsontable.on-moving--rows .ht__manualRowMove--backlight,.handsontable.on-moving--rows.show-ui .ht__manualRowMove--guideline{display:block}.handsontable tbody td[rowspan][class*=area][class*=highlight]:not([class*=fullySelectedMergedCell]):before{opacity:0}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-0]:before,.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-multiple]:before{opacity:.1}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-1]:before{opacity:.2}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-2]:before{opacity:.27}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-3]:before{opacity:.35}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-4]:before{opacity:.41}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-5]:before{opacity:.47}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-6]:before{opacity:.54}.handsontable tbody td[rowspan][class*=area][class*=highlight][class*=fullySelectedMergedCell-7]:before{opacity:.58}.handsontable span.colHeader.columnSorting:after{font-size:8px;height:8px;left:unset;line-height:1.1;margin-top:-2px;padding-left:5px;padding-right:unset;position:absolute;right:-15px;text-decoration:underline;top:50%}[dir=rtl].handsontable span.colHeader.columnSorting:after{left:-15px;padding-left:unset;padding-right:5px;right:unset}.handsontable span.colHeader.columnSorting:after{text-decoration:none}.handsontable span.colHeader.columnSorting[class*=" sort-"]:after,.handsontable span.colHeader.columnSorting[class^=sort-]:after{content:"+"}.handsontable span.colHeader.columnSorting.sort-1:after{content:"1"}.handsontable span.colHeader.columnSorting.sort-2:after{content:"2"}.handsontable span.colHeader.columnSorting.sort-3:after{content:"3"}.handsontable span.colHeader.columnSorting.sort-4:after{content:"4"}.handsontable span.colHeader.columnSorting.sort-5:after{content:"5"}.handsontable span.colHeader.columnSorting.sort-6:after{content:"6"}.handsontable span.colHeader.columnSorting.sort-7:after{content:"7"}.htGhostTable th div button.changeType+span.colHeader.columnSorting:not(.indicatorDisabled){padding-right:5px}.handsontable thead th.hiddenHeader:not(:first-of-type){display:none}.handsontable th.ht_nestingLevels{padding-left:7px;text-align:left}[dir=rtl].handsontable th.ht_nestingLevels{padding-right:7px;text-align:right}.handsontable th div.ht_nestingLevels{display:inline-block;left:11px;position:absolute;right:unset}[dir=rtl].handsontable th div.ht_nestingLevels{left:unset;right:11px}.handsontable.innerBorderInlineStart th div.ht_nestingLevels,.handsontable.innerBorderInlineStart~.handsontable th div.ht_nestingLevels{left:unset;right:10px}[dir=rtl].handsontable.innerBorderInlineStart th div.ht_nestingLevels,[dir=rtl].handsontable.innerBorderInlineStart~.handsontable th div.ht_nestingLevels{left:10px;right:unset}.handsontable th span.ht_nestingLevel{display:inline-block}.handsontable th span.ht_nestingLevel_empty{display:inline-block;float:left;height:1px;width:10px}[dir=rtl].handsontable th span.ht_nestingLevel_empty{float:right}.handsontable th span.ht_nestingLevel:after{bottom:3px;content:"┐";display:inline-block;font-size:9px;position:relative}.handsontable th div.ht_nestingButton{cursor:pointer;display:inline-block;left:unset;position:absolute;right:-2px}[dir=rtl].handsontable th div.ht_nestingButton{left:-2px;right:unset}.handsontable th div.ht_nestingButton.ht_nestingExpand:after{content:"+"}.handsontable th div.ht_nestingButton.ht_nestingCollapse:after{content:"-"}.handsontable.innerBorderInlineStart th div.ht_nestingButton,.handsontable.innerBorderInlineStart~.handsontable th div.ht_nestingButton{left:unset;right:0}[dir=rtl].handsontable.innerBorderInlineStart th div.ht_nestingButton,[dir=rtl].handsontable.innerBorderInlineStart~.handsontable th div.ht_nestingButton{left:0;right:unset}/* ! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com *//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e5e5; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: Merriweather Sans, sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #a3a3a3; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #a3a3a3; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden] { display: none; } :root { --background: 0 0% 100%; --foreground: 0 0% 3.9%; --card: 0 0% 100%; --card-foreground: 0 0% 3.9%; --popover: 0 0% 100%; --popover-foreground: 0 0% 3.9%; --primary: 0 0% 9%; --primary-foreground: 0 0% 98%; --secondary: 0 0% 96.1%; --secondary-foreground: 0 0% 9%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; --accent: 0 0% 96.1%; --accent-foreground: 0 0% 9%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 0 0% 89.8%; --input: 0 0% 89.8%; --ring: 0 0% 3.9%; --radius: 0.5rem; } * { border-color: hsl(var(--border)); } body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); } *, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } .\!container { width: 100% !important; margin-right: auto !important; margin-left: auto !important; padding-right: 2rem !important; padding-left: 2rem !important; } .container { width: 100%; margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } @media (min-width: 1400px) { .\!container { max-width: 1400px !important; } .container { max-width: 1400px; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none { pointer-events: none; } .visible { visibility: visible; } .invisible { visibility: hidden; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .inset-0 { inset: 0px; } .-left-\[33px\] { left: -33px; } .bottom-0 { bottom: 0px; } .left-0 { left: 0px; } .left-1 { left: 0.25rem; } .left-2 { left: 0.5rem; } .left-\[50\%\] { left: 50%; } .right-0 { right: 0px; } .right-1 { right: 0.25rem; } .right-4 { right: 1rem; } .top-0 { top: 0px; } .top-2 { top: 0.5rem; } .top-4 { top: 1rem; } .top-\[50\%\] { top: 50%; } .z-0 { z-index: 0; } .z-10 { z-index: 10; } .z-20 { z-index: 20; } .z-50 { z-index: 50; } .z-\[999\] { z-index: 999; } .m-\[-4px\] { margin: -4px; } .-mx-1 { margin-left: -0.25rem; margin-right: -0.25rem; } .-my-1 { margin-top: -0.25rem; margin-bottom: -0.25rem; } .mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; } .mx-1\.5 { margin-left: 0.375rem; margin-right: 0.375rem; } .mx-2 { margin-left: 0.5rem; margin-right: 0.5rem; } .mx-\[-20px\] { margin-left: -20px; margin-right: -20px; } .my-0 { margin-top: 0px; margin-bottom: 0px; } .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-2 { margin-top: 0.5rem; margin-bottom: 0.5rem; } .-ml-1 { margin-left: -0.25rem; } .-ml-5 { margin-left: -1.25rem; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-3 { margin-left: 0.75rem; } .ml-4 { margin-left: 1rem; } .ml-6 { margin-left: 1.5rem; } .ml-auto { margin-left: auto; } .mr-0 { margin-right: 0px; } .mr-0\.5 { margin-right: 0.125rem; } .mr-1 { margin-right: 0.25rem; } .mr-16 { margin-right: 4rem; } .mr-2 { margin-right: 0.5rem; } .mr-4 { margin-right: 1rem; } .mr-\[-8px\] { margin-right: -8px; } .mr-\[7px\] { margin-right: 7px; } .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; } .mt-2 { margin-top: 0.5rem; } .mt-\[-2px\] { margin-top: -2px; } .mt-\[1px\] { margin-top: 1px; } .mt-\[2px\] { margin-top: 2px; } .mt-\[3px\] { margin-top: 3px; } .mt-auto { margin-top: auto; } .box-border { box-sizing: border-box; } .block { display: block; } .inline-block { display: inline-block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } .contents { display: contents; } .hidden { display: none; } .aspect-square { aspect-ratio: 1 / 1; } .h-10 { height: 2.5rem; } .h-11 { height: 2.75rem; } .h-12 { height: 3rem; } .h-2 { height: 0.5rem; } .h-20 { height: 5rem; } .h-3 { height: 0.75rem; } .h-3\.5 { height: 0.875rem; } .h-4 { height: 1rem; } .h-5 { height: 1.25rem; } .h-6 { height: 1.5rem; } .h-72 { height: 18rem; } .h-8 { height: 2rem; } .h-9 { height: 2.25rem; } .h-\[0px\] { height: 0px; } .h-\[10px\] { height: 10px; } .h-\[12px\] { height: 12px; } .h-\[16px\] { height: 16px; } .h-\[200px\] { height: 200px; } .h-\[24px\] { height: 24px; } .h-\[43px\] { height: 43px; } .h-\[64px\] { height: 64px; } .h-\[var\(--radix-select-trigger-height\)\] { height: var(--radix-select-trigger-height); } .h-full { height: 100%; } .h-px { height: 1px; } .h-screen { height: 100vh; } .max-h-96 { max-height: 24rem; } .max-h-\[300px\] { max-height: 300px; } .min-h-0 { min-height: 0px; } .min-h-12 { min-height: 3rem; } .min-h-20 { min-height: 5rem; } .min-h-\[80px\] { min-height: 80px; } .min-h-screen { min-height: 100vh; } .w-0 { width: 0px; } .w-10 { width: 2.5rem; } .w-11 { width: 2.75rem; } .w-12 { width: 3rem; } .w-2 { width: 0.5rem; } .w-3 { width: 0.75rem; } .w-3\.5 { width: 0.875rem; } .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-6 { width: 1.5rem; } .w-64 { width: 16rem; } .w-72 { width: 18rem; } .w-8 { width: 2rem; } .w-96 { width: 24rem; } .w-\[10px\] { width: 10px; } .w-\[12px\] { width: 12px; } .w-\[16px\] { width: 16px; } .w-\[18rem\] { width: 18rem; } .w-\[24px\] { width: 24px; } .w-\[350px\] { width: 350px; } .w-\[64px\] { width: 64px; } .w-fit { width: -moz-fit-content; width: fit-content; } .w-full { width: 100%; } .w-screen { width: 100vw; } .min-w-0 { min-width: 0px; } .min-w-\[8rem\] { min-width: 8rem; } .min-w-\[var\(--radix-select-trigger-width\)\] { min-width: var(--radix-select-trigger-width); } .max-w-48 { max-width: 12rem; } .max-w-\[722px\] { max-width: 722px; } .max-w-lg { max-width: 32rem; } .max-w-sm { max-width: 24rem; } .flex-1 { flex: 1 1 0%; } .flex-shrink { flex-shrink: 1; } .flex-shrink-0 { flex-shrink: 0; } .shrink-0 { flex-shrink: 0; } .flex-grow { flex-grow: 1; } .grow { flex-grow: 1; } .translate-x-\[-100\%\] { --tw-translate-x: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-\[-50\%\] { --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[-50\%\] { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .cursor-default { cursor: default; } .cursor-pointer { cursor: pointer; } .touch-none { touch-action: none; } .select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-row { flex-direction: row; } .flex-col { flex-direction: column; } .flex-col-reverse { flex-direction: column-reverse; } .place-items-center { place-items: center; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-stretch { align-items: stretch; } .justify-end { justify-content: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-stretch { justify-content: stretch; } .gap-1 { gap: 0.25rem; } .gap-1\.5 { gap: 0.375rem; } .gap-10 { gap: 2.5rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .space-x-\[-4px\] > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(-4px * var(--tw-space-x-reverse)); margin-left: calc(-4px * calc(1 - var(--tw-space-x-reverse))); } .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-y-auto { overflow-y: auto; } .overflow-x-hidden { overflow-x: hidden; } .overflow-x-visible { overflow-x: visible; } .scroll-smooth { scroll-behavior: smooth; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .overflow-ellipsis { text-overflow: ellipsis; } .text-ellipsis { text-overflow: ellipsis; } .whitespace-nowrap { white-space: nowrap; } .rounded { border-radius: 0.25rem; } .rounded-full { border-radius: 9999px; } .rounded-lg { border-radius: var(--radius); } .rounded-md { border-radius: calc(var(--radius) - 2px); } .rounded-sm { border-radius: calc(var(--radius) - 4px); } .rounded-bl-full { border-bottom-left-radius: 9999px; } .border { border-width: 1px; } .border-1\.5 { border-width: 1.5px; } .border-2 { border-width: 2px; } .border-\[0\.5px\] { border-width: 0.5px; } .border-b { border-bottom-width: 1px; } .border-b-2 { border-bottom-width: 2px; } .border-l { border-left-width: 1px; } .border-l-2 { border-left-width: 2px; } .border-r { border-right-width: 1px; } .border-t { border-top-width: 1px; } .border-dashed { border-style: dashed; } .border-blue-600 { --tw-border-opacity: 1; border-color: rgb(37 99 235 / var(--tw-border-opacity)); } .border-gray-200 { --tw-border-opacity: 1; border-color: rgb(229 229 229 / var(--tw-border-opacity)); } .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(212 212 212 / var(--tw-border-opacity)); } .border-gray-400 { --tw-border-opacity: 1; border-color: rgb(163 163 163 / var(--tw-border-opacity)); } .border-gray-600 { --tw-border-opacity: 1; border-color: rgb(82 82 82 / var(--tw-border-opacity)); } .border-green-400 { --tw-border-opacity: 1; border-color: rgb(74 222 128 / var(--tw-border-opacity)); } .border-input { border-color: hsl(var(--input)); } .border-neutral-800 { --tw-border-opacity: 1; border-color: rgb(38 38 38 / var(--tw-border-opacity)); } .border-primary { border-color: hsl(var(--primary)); } .border-red-100 { --tw-border-opacity: 1; border-color: rgb(254 226 226 / var(--tw-border-opacity)); } .border-red-400 { --tw-border-opacity: 1; border-color: rgb(248 113 113 / var(--tw-border-opacity)); } .border-slate-400 { --tw-border-opacity: 1; border-color: rgb(148 163 184 / var(--tw-border-opacity)); } .border-transparent { border-color: transparent; } .border-white { --tw-border-opacity: 1; border-color: rgb(255 255 255 / var(--tw-border-opacity)); } .border-yellow-100 { --tw-border-opacity: 1; border-color: rgb(254 249 195 / var(--tw-border-opacity)); } .border-yellow-400 { --tw-border-opacity: 1; border-color: rgb(250 204 21 / var(--tw-border-opacity)); } .border-l-gray-200 { --tw-border-opacity: 1; border-left-color: rgb(229 229 229 / var(--tw-border-opacity)); } .bg-amber-600 { --tw-bg-opacity: 1; background-color: rgb(217 119 6 / var(--tw-bg-opacity)); } .bg-background { background-color: hsl(var(--background)); } .bg-background\/80 { background-color: hsl(var(--background) / 0.8); } .bg-blue-100 { --tw-bg-opacity: 1; background-color: rgb(219 234 254 / var(--tw-bg-opacity)); } .bg-border { background-color: hsl(var(--border)); } .bg-customGray { --tw-bg-opacity: 1; background-color: rgb(242 242 242 / var(--tw-bg-opacity)); } .bg-destructive { background-color: hsl(var(--destructive)); } .bg-gray-100 { --tw-bg-opacity: 1; background-color: rgb(245 245 245 / var(--tw-bg-opacity)); } .bg-gray-200 { --tw-bg-opacity: 1; background-color: rgb(229 229 229 / var(--tw-bg-opacity)); } .bg-gray-300 { --tw-bg-opacity: 1; background-color: rgb(212 212 212 / var(--tw-bg-opacity)); } .bg-gray-50 { --tw-bg-opacity: 1; background-color: rgb(250 250 250 / var(--tw-bg-opacity)); } .bg-green-100 { --tw-bg-opacity: 1; background-color: rgb(220 252 231 / var(--tw-bg-opacity)); } .bg-green-50 { --tw-bg-opacity: 1; background-color: rgb(240 253 244 / var(--tw-bg-opacity)); } .bg-green-600 { --tw-bg-opacity: 1; background-color: rgb(22 163 74 / var(--tw-bg-opacity)); } .bg-muted { background-color: hsl(var(--muted)); } .bg-neutral-300 { --tw-bg-opacity: 1; background-color: rgb(212 212 212 / var(--tw-bg-opacity)); } .bg-neutral-600 { --tw-bg-opacity: 1; background-color: rgb(82 82 82 / var(--tw-bg-opacity)); } .bg-orange-500 { --tw-bg-opacity: 1; background-color: rgb(249 115 22 / var(--tw-bg-opacity)); } .bg-popover { background-color: hsl(var(--popover)); } .bg-primary { background-color: hsl(var(--primary)); } .bg-purple-600 { --tw-bg-opacity: 1; background-color: rgb(147 51 234 / var(--tw-bg-opacity)); } .bg-red-100 { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } .bg-red-50 { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity)); } .bg-secondary { background-color: hsl(var(--secondary)); } .bg-transparent { background-color: transparent; } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } .bg-yellow-200 { --tw-bg-opacity: 1; background-color: rgb(254 240 138 / var(--tw-bg-opacity)); } .bg-yellow-50 { --tw-bg-opacity: 1; background-color: rgb(254 252 232 / var(--tw-bg-opacity)); } .bg-opacity-20 { --tw-bg-opacity: 0.2; } .fill-current { fill: currentColor; } .p-0 { padding: 0px; } .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .px-1 { padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; } .px-10 { padding-left: 2.5rem; padding-right: 2.5rem; } .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-0 { padding-top: 0px; padding-bottom: 0px; } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .pb-2 { padding-bottom: 0.5rem; } .pb-24 { padding-bottom: 6rem; } .pb-3 { padding-bottom: 0.75rem; } .pb-4 { padding-bottom: 1rem; } .pl-1 { padding-left: 0.25rem; } .pl-4 { padding-left: 1rem; } .pl-6 { padding-left: 1.5rem; } .pl-8 { padding-left: 2rem; } .pl-\[7px\] { padding-left: 7px; } .pr-1 { padding-right: 0.25rem; } .pr-2 { padding-right: 0.5rem; } .pr-4 { padding-right: 1rem; } .pt-2 { padding-top: 0.5rem; } .pt-3 { padding-top: 0.75rem; } .pt-4 { padding-top: 1rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; } .align-top { vertical-align: top; } .align-bottom { vertical-align: bottom; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .font-sans { font-family: Merriweather Sans, sans-serif; } .font-serif { font-family: Merriweather, serif; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-bold { font-weight: 700; } .font-light { font-weight: 300; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .capitalize { text-transform: capitalize; } .italic { font-style: italic; } .leading-none { line-height: 1; } .leading-snug { line-height: 1.375; } .tracking-tight { letter-spacing: -0.025em; } .tracking-widest { letter-spacing: 0.1em; } .text-blue-600 { --tw-text-opacity: 1; color: rgb(37 99 235 / var(--tw-text-opacity)); } .text-current { color: currentColor; } .text-destructive-foreground { color: hsl(var(--destructive-foreground)); } .text-foreground { color: hsl(var(--foreground)); } .text-gray-300 { --tw-text-opacity: 1; color: rgb(212 212 212 / var(--tw-text-opacity)); } .text-gray-400 { --tw-text-opacity: 1; color: rgb(163 163 163 / var(--tw-text-opacity)); } .text-gray-500 { --tw-text-opacity: 1; color: rgb(115 115 115 / var(--tw-text-opacity)); } .text-gray-600 { --tw-text-opacity: 1; color: rgb(82 82 82 / var(--tw-text-opacity)); } .text-gray-700 { --tw-text-opacity: 1; color: rgb(64 64 64 / var(--tw-text-opacity)); } .text-gray-800 { --tw-text-opacity: 1; color: rgb(38 38 38 / var(--tw-text-opacity)); } .text-gray-900 { --tw-text-opacity: 1; color: rgb(23 23 23 / var(--tw-text-opacity)); } .text-muted-foreground { color: hsl(var(--muted-foreground)); } .text-neutral-600 { --tw-text-opacity: 1; color: rgb(82 82 82 / var(--tw-text-opacity)); } .text-popover-foreground { color: hsl(var(--popover-foreground)); } .text-primary { color: hsl(var(--primary)); } .text-primary-foreground { color: hsl(var(--primary-foreground)); } .text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity)); } .text-red-600 { --tw-text-opacity: 1; color: rgb(220 38 38 / var(--tw-text-opacity)); } .text-secondary-foreground { color: hsl(var(--secondary-foreground)); } .text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); } .underline { text-decoration-line: underline; } .line-through { text-decoration-line: line-through; } .underline-offset-4 { text-underline-offset: 4px; } .opacity-0 { opacity: 0; } .opacity-100 { opacity: 1; } .opacity-50 { opacity: 0.5; } .opacity-60 { opacity: 0.6; } .opacity-70 { opacity: 0.7; } .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .outline-none { outline: 2px solid transparent; outline-offset: 2px; } .outline { outline-style: solid; } .outline-2 { outline-width: 2px; } .outline-gray-100 { outline-color: #f5f5f5; } .outline-gray-50 { outline-color: #fafafa; } .ring-0 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-offset-background { --tw-ring-offset-color: hsl(var(--background)); } .blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .drop-shadow { --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .backdrop-blur-sm { --tw-backdrop-blur: blur(4px); -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-100 { transition-duration: 100ms; } .duration-200 { transition-duration: 200ms; } .duration-500 { transition-duration: 500ms; } .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @keyframes enter { from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } } @keyframes exit { to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); } } .animate-in { animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .fade-in-0 { --tw-enter-opacity: 0; } .fade-in-80 { --tw-enter-opacity: 0.8; } .zoom-in-95 { --tw-enter-scale: .95; } .duration-100 { animation-duration: 100ms; } .duration-200 { animation-duration: 200ms; } .duration-500 { animation-duration: 500ms; } .ease-in-out { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .running { animation-play-state: running; } .\@container { container-type: inline-size; } :root { -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; } /* Steal a bunch of styles from the I&S website */ /* LOAD FONTS ================================ */ /* Merriweather Serif, for long form body text */ @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 400; src: local("Merriweather Regular"), local("Merriweather-Regular"), url("../assets/merriweather/merriweather-v20-latin-regular.woff2") format("woff2"), url("../assets/merriweather/merriweather-v20-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; } @font-face { font-family: "Merriweather"; font-style: normal; font-weight: 700; src: local("Merriweather Bold"), local("Merriweather-Bold"), url("../assets/merriweather/merriweather-v20-latin-700.woff2") format("woff2"), url("../assets/merriweather/merriweather-v20-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; } /* Merriweather Sans, for asides, caption, nav */ @font-face { font-family: "Merriweather Sans"; font-style: normal; font-weight: 300; src: local("Merriweather Sans Light"), local("MerriweatherSans-Light"), url("../assets/merriweather/merriweather-sans-v10-latin-300.woff2") format("woff2"), url("../assets/merriweather/merriweather-sans-v10-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; } @font-face { font-family: "Merriweather Sans"; font-style: normal; font-weight: 400; src: local("Merriweather Sans"), local("MerriweatherSans-Regular"), url("../assets/merriweather/merriweather-sans-v10-latin-regular.woff2") format("woff2"), url("../assets/merriweather/merriweather-sans-v10-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; } @font-face { font-family: "Merriweather Sans"; font-style: normal; font-weight: 700; src: local("Merriweather Sans Bold"), local("MerriweatherSans-Bold"), url("../assets/merriweather/merriweather-sans-v10-latin-700.woff2") format("woff2"), url("../assets/merriweather/merriweather-sans-v10-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; } @font-face { font-family: "Merriweather Sans"; font-style: normal; font-weight: 300; src: local("Merriweather Sans Light"), local("MerriweatherSans-Light"), url("../assets/merriweather/merriweather-sans-v10-latin-300.woff2") format("woff2"), url("../assets/merriweather/merriweather-sans-v10-latin-300.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; } /* Fira Mono, for code, numerical data ------- */ @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 400; src: local('Fira Mono Regular'), local('FiraMono-Regular'), url('../assets/fira/fira-mono-v7-latin-regular.woff2') format('woff2'), url('../assets/fira/fira-mono-v7-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap; } @font-face { font-family: 'Fira Mono'; font-style: normal; font-weight: 500; src: local('Fira Mono Medium'), local('FiraMono-Medium'), url('../assets/fira/fira-mono-v7-latin-500.woff2') format('woff2'), url('../assets/fira/fira-mono-v7-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ font-display: swap } /* draw a vertical line for the timeline */ .timeline-line { position: absolute; width: 100%; height: 100%; } .timeline-line::before { --tw-bg-opacity: 1; background-color: rgb(212 212 212 / var(--tw-bg-opacity)); position: absolute; border-radius: 3px; bottom: 15px; content: ""; left: 15px; top: 8px; width: 2px; } .timeline-item { position: relative; } .file\:border-0::file-selector-button { border-width: 0px; } .file\:bg-transparent::file-selector-button { background-color: transparent; } .file\:text-sm::file-selector-button { font-size: 0.875rem; line-height: 1.25rem; } .file\:font-medium::file-selector-button { font-weight: 500; } .placeholder\:text-muted-foreground::-moz-placeholder { color: hsl(var(--muted-foreground)); } .placeholder\:text-muted-foreground::placeholder { color: hsl(var(--muted-foreground)); } .hover\:border-gray-500:hover { --tw-border-opacity: 1; border-color: rgb(115 115 115 / var(--tw-border-opacity)); } .hover\:bg-accent:hover { background-color: hsl(var(--accent)); } .hover\:bg-destructive\/90:hover { background-color: hsl(var(--destructive) / 0.9); } .hover\:bg-gray-100:hover { --tw-bg-opacity: 1; background-color: rgb(245 245 245 / var(--tw-bg-opacity)); } .hover\:bg-gray-200:hover { --tw-bg-opacity: 1; background-color: rgb(229 229 229 / var(--tw-bg-opacity)); } .hover\:bg-gray-300:hover { --tw-bg-opacity: 1; background-color: rgb(212 212 212 / var(--tw-bg-opacity)); } .hover\:bg-gray-400:hover { --tw-bg-opacity: 1; background-color: rgb(163 163 163 / var(--tw-bg-opacity)); } .hover\:bg-primary\/90:hover { background-color: hsl(var(--primary) / 0.9); } .hover\:bg-red-100:hover { --tw-bg-opacity: 1; background-color: rgb(254 226 226 / var(--tw-bg-opacity)); } .hover\:bg-secondary\/80:hover { background-color: hsl(var(--secondary) / 0.8); } .hover\:bg-yellow-400:hover { --tw-bg-opacity: 1; background-color: rgb(250 204 21 / var(--tw-bg-opacity)); } .hover\:text-accent-foreground:hover { color: hsl(var(--accent-foreground)); } .hover\:text-gray-500:hover { --tw-text-opacity: 1; color: rgb(115 115 115 / var(--tw-text-opacity)); } .hover\:text-gray-800:hover { --tw-text-opacity: 1; color: rgb(38 38 38 / var(--tw-text-opacity)); } .hover\:text-gray-900:hover { --tw-text-opacity: 1; color: rgb(23 23 23 / var(--tw-text-opacity)); } .hover\:underline:hover { text-decoration-line: underline; } .hover\:opacity-100:hover { opacity: 1; } .focus\:bg-accent:focus { background-color: hsl(var(--accent)); } .focus\:text-accent-foreground:focus { color: hsl(var(--accent-foreground)); } .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; } .focus\:ring-2:focus { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-blue-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity)); } .focus\:ring-ring:focus { --tw-ring-color: hsl(var(--ring)); } .focus\:ring-offset-2:focus { --tw-ring-offset-width: 2px; } .focus-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; } .focus-visible\:ring-2:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-ring:focus-visible { --tw-ring-color: hsl(var(--ring)); } .focus-visible\:ring-offset-2:focus-visible { --tw-ring-offset-width: 2px; } .focus-visible\:ring-offset-background:focus-visible { --tw-ring-offset-color: hsl(var(--background)); } .disabled\:pointer-events-none:disabled { pointer-events: none; } .disabled\:cursor-not-allowed:disabled { cursor: not-allowed; } .disabled\:opacity-50:disabled { opacity: 0.5; } .group.toaster .group-\[\.toaster\]\:border-border { border-color: hsl(var(--border)); } .group.toast .group-\[\.toast\]\:bg-muted { background-color: hsl(var(--muted)); } .group.toast .group-\[\.toast\]\:bg-primary { background-color: hsl(var(--primary)); } .group.toaster .group-\[\.toaster\]\:bg-background { background-color: hsl(var(--background)); } .group.toast .group-\[\.toast\]\:text-muted-foreground { color: hsl(var(--muted-foreground)); } .group.toast .group-\[\.toast\]\:text-primary-foreground { color: hsl(var(--primary-foreground)); } .group.toaster .group-\[\.toaster\]\:text-foreground { color: hsl(var(--foreground)); } .group.toaster .group-\[\.toaster\]\:shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .peer:disabled ~ .peer-disabled\:cursor-not-allowed { cursor: not-allowed; } .peer:disabled ~ .peer-disabled\:opacity-70 { opacity: 0.7; } .aria-selected\:bg-accent[aria-selected="true"] { background-color: hsl(var(--accent)); } .aria-selected\:text-accent-foreground[aria-selected="true"] { color: hsl(var(--accent-foreground)); } .data-\[disabled\]\:pointer-events-none[data-disabled] { pointer-events: none; } .data-\[side\=bottom\]\:translate-y-1[data-side=bottom] { --tw-translate-y: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=left\]\:-translate-x-1[data-side=left] { --tw-translate-x: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=right\]\:translate-x-1[data-side=right] { --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=top\]\:-translate-y-1[data-side=top] { --tw-translate-y: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[state\=checked\]\:translate-x-5[data-state=checked] { --tw-translate-x: 1.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[state\=unchecked\]\:translate-x-0[data-state=unchecked] { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[state\=active\]\:bg-background[data-state=active] { background-color: hsl(var(--background)); } .data-\[state\=checked\]\:bg-primary[data-state=checked] { background-color: hsl(var(--primary)); } .data-\[state\=checked\]\:bg-purple-500[data-state=checked] { --tw-bg-opacity: 1; background-color: rgb(168 85 247 / var(--tw-bg-opacity)); } .data-\[state\=open\]\:bg-accent[data-state=open] { background-color: hsl(var(--accent)); } .data-\[state\=unchecked\]\:bg-input[data-state=unchecked] { background-color: hsl(var(--input)); } .data-\[state\=active\]\:text-foreground[data-state=active] { color: hsl(var(--foreground)); } .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] { color: hsl(var(--primary-foreground)); } .data-\[state\=open\]\:text-accent-foreground[data-state=open] { color: hsl(var(--accent-foreground)); } .data-\[state\=open\]\:text-muted-foreground[data-state=open] { color: hsl(var(--muted-foreground)); } .data-\[disabled\]\:opacity-50[data-disabled] { opacity: 0.5; } .data-\[state\=active\]\:shadow-sm[data-state=active] { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .data-\[state\=open\]\:animate-in[data-state=open] { animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .data-\[state\=closed\]\:animate-out[data-state=closed] { animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .data-\[state\=closed\]\:fade-out-0[data-state=closed] { --tw-exit-opacity: 0; } .data-\[state\=open\]\:fade-in-0[data-state=open] { --tw-enter-opacity: 0; } .data-\[state\=closed\]\:zoom-out-95[data-state=closed] { --tw-exit-scale: .95; } .data-\[state\=open\]\:zoom-in-95[data-state=open] { --tw-enter-scale: .95; } .data-\[side\=bottom\]\:slide-in-from-top-2[data-side=bottom] { --tw-enter-translate-y: -0.5rem; } .data-\[side\=left\]\:slide-in-from-right-2[data-side=left] { --tw-enter-translate-x: 0.5rem; } .data-\[side\=right\]\:slide-in-from-left-2[data-side=right] { --tw-enter-translate-x: -0.5rem; } .data-\[side\=top\]\:slide-in-from-bottom-2[data-side=top] { --tw-enter-translate-y: 0.5rem; } .data-\[state\=closed\]\:slide-out-to-left-1\/2[data-state=closed] { --tw-exit-translate-x: -50%; } .data-\[state\=closed\]\:slide-out-to-top-\[48\%\][data-state=closed] { --tw-exit-translate-y: -48%; } .data-\[state\=open\]\:slide-in-from-left-1\/2[data-state=open] { --tw-enter-translate-x: -50%; } .data-\[state\=open\]\:slide-in-from-top-\[48\%\][data-state=open] { --tw-enter-translate-y: -48%; } @container (min-width: 36rem) { .\@xl\:mb-8 { margin-bottom: 2rem; } .\@xl\:ml-\[-100px\] { margin-left: -100px; } .\@xl\:mr-2 { margin-right: 0.5rem; } .\@xl\:mt-4 { margin-top: 1rem; } .\@xl\:w-4\/5 { width: 80%; } } @container (min-width: 56rem) { .\@4xl\:ml-\[-200px\] { margin-left: -200px; } } @media (min-width: 640px) { .sm\:max-w-\[425px\] { max-width: 425px; } .sm\:flex-row { flex-direction: row; } .sm\:justify-end { justify-content: flex-end; } .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-x-reverse: 0; margin-right: calc(0.5rem * var(--tw-space-x-reverse)); margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } .sm\:rounded-lg { border-radius: var(--radius); } .sm\:text-left { text-align: left; } } @media (min-width: 768px) { .md\:w-full { width: 100%; } } .\[\&\>span\]\:line-clamp-1>span { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] { padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] { padding-top: 0.375rem; padding-bottom: 0.375rem; } .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] { font-size: 0.75rem; line-height: 1rem; } .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] { font-weight: 500; } .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] { color: hsl(var(--muted-foreground)); } .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group] { padding-top: 0px; } .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group] { padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg { height: 1.25rem; } .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg { width: 1.25rem; } .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input] { height: 3rem; } .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item] { padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item] { padding-top: 0.75rem; padding-bottom: 0.75rem; } .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg { height: 1.25rem; } .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg { width: 1.25rem; }