kempo-ui 0.0.4 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/Dialog.js +35 -28
- package/dist/src/components/ShadowComponent.js +1 -1
- package/dist/src/components/Sortable.js +45 -0
- package/dist/src/components/Table.js +151 -0
- package/dist/src/components/Toast.js +141 -0
- package/dist/src/components/Toggle.js +74 -0
- package/dist/src/components/tableControls/DeleteRecord.js +7 -0
- package/dist/src/components/tableControls/Edit.js +18 -0
- package/dist/src/components/tableControls/ExportCSV.js +8 -0
- package/dist/src/components/tableControls/ExportJson.js +8 -0
- package/dist/src/components/tableControls/FieldSortHide.js +26 -0
- package/dist/src/components/tableControls/Filters.js +47 -0
- package/dist/src/components/tableControls/FirstPage.js +9 -0
- package/dist/src/components/tableControls/HiddenCount.js +3 -0
- package/dist/src/components/tableControls/Hide.js +5 -0
- package/dist/src/components/tableControls/LastPage.js +9 -0
- package/dist/src/components/tableControls/NextPage.js +9 -0
- package/dist/src/components/tableControls/PageSelect.js +22 -0
- package/dist/src/components/tableControls/PageSize.js +5 -0
- package/dist/src/components/tableControls/PrevPage.js +9 -0
- package/dist/src/components/tableControls/Search.js +9 -0
- package/dist/src/components/tableControls/ShowAll.js +5 -0
- package/dist/src/components/tableControls/TableControl.js +16 -0
- package/dist/src/utils/toTitleCase.js +1 -0
- package/docs/components/focus-capture.html +58 -13
- package/docs/components/hybrid-component.html +112 -0
- package/docs/components/icon.html +0 -2
- package/docs/components/light-component.html +99 -0
- package/docs/components/shadow-component.html +88 -0
- package/docs/components/sortable.html +132 -0
- package/docs/icons/error.svg +1 -1
- package/docs/icons/warning.svg +1 -1
- package/docs/index.html +197 -5
- package/docs/kempo.min.css +1 -1
- package/docs/nav.inc.html +11 -10
- package/docs/src/components/Dialog.js +35 -28
- package/docs/src/components/ShadowComponent.js +1 -1
- package/docs/src/components/Sortable.js +45 -0
- package/docs/src/components/Table.js +151 -0
- package/docs/src/components/Toast.js +141 -0
- package/docs/src/components/Toggle.js +74 -0
- package/docs/src/components/tableControls/DeleteRecord.js +7 -0
- package/docs/src/components/tableControls/Edit.js +18 -0
- package/docs/src/components/tableControls/ExportCSV.js +8 -0
- package/docs/src/components/tableControls/ExportJson.js +8 -0
- package/docs/src/components/tableControls/FieldSortHide.js +26 -0
- package/docs/src/components/tableControls/Filters.js +47 -0
- package/docs/src/components/tableControls/FirstPage.js +9 -0
- package/docs/src/components/tableControls/HiddenCount.js +3 -0
- package/docs/src/components/tableControls/Hide.js +5 -0
- package/docs/src/components/tableControls/LastPage.js +9 -0
- package/docs/src/components/tableControls/NextPage.js +9 -0
- package/docs/src/components/tableControls/PageSelect.js +22 -0
- package/docs/src/components/tableControls/PageSize.js +5 -0
- package/docs/src/components/tableControls/PrevPage.js +9 -0
- package/docs/src/components/tableControls/Search.js +9 -0
- package/docs/src/components/tableControls/ShowAll.js +5 -0
- package/docs/src/components/tableControls/TableControl.js +16 -0
- package/docs/src/utils/toTitleCase.js +1 -0
- package/docs/utils/drag.html +13 -28
- package/docs/utils/toTitleCase.html +71 -0
- package/package.json +2 -2
- package/scripts/build.js +3 -0
- package/src/components/Dialog.js +35 -27
- package/tests/{HybridComponent.browser-test.js → components/HybridComponent.browser-test.js} +2 -2
- package/tests/{LightComponent.browser-test.js → components/LightComponent.browser-test.js} +2 -2
- package/tests/{ShadowComponent.browser-test.js → components/ShadowComponent.browser-test.js} +2 -2
- package/tests/utils/debounce.test.js +209 -0
- package/docs/src/utils/cli.js +0 -1
- package/docs/src/utils/fs-utils.js +0 -1
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>ShadowComponent - Base Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
|
|
9
|
+
<script type="module">
|
|
10
|
+
import Import from '../src/components/Import.js';
|
|
11
|
+
import Icon from '../src/components/Icon.js';
|
|
12
|
+
Import.replacements.root = '../';
|
|
13
|
+
Icon.pathToIcons = ['../icons'];
|
|
14
|
+
</script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<k-import src="../nav.inc.html"></k-import>
|
|
18
|
+
<h1 class="ta-center">ShadowComponent</h1>
|
|
19
|
+
<main>
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Guide</h6>
|
|
24
|
+
<a href="#overview">Overview</a><br />
|
|
25
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
26
|
+
<a href="#customStyles">Custom Styles</a><br />
|
|
27
|
+
<a href="#stylesheetPath">Changing Stylesheet Path</a><br />
|
|
28
|
+
|
|
29
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
30
|
+
<a href="#constructor">Constructor</a><br />
|
|
31
|
+
<a href="#requirements">Requirements</a><br />
|
|
32
|
+
<a href="#staticProperties">Static Properties</a><br />
|
|
33
|
+
<a href="#methods">Methods</a><br />
|
|
34
|
+
</div>
|
|
35
|
+
</details>
|
|
36
|
+
|
|
37
|
+
<h3 id="overview"><a href="#overview" class="no-link">Overview</a></h3>
|
|
38
|
+
<p>ShadowComponent is a base class that extends LitElement and provides automatic shadow DOM encapsulation with Kempo CSS stylesheet injection. Use this when you want your component to have:</p>
|
|
39
|
+
<ul>
|
|
40
|
+
<li>Shadow DOM for style encapsulation</li>
|
|
41
|
+
<li>Automatic access to Kempo CSS styles</li>
|
|
42
|
+
<li>Scoped component-specific styles</li>
|
|
43
|
+
</ul>
|
|
44
|
+
<p>Most Kempo UI components extend ShadowComponent, including <a href="dialog.html">Dialog</a>, <a href="card.html">Card</a>, <a href="accordion.html">Accordion</a>, and many others.</p>
|
|
45
|
+
|
|
46
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
47
|
+
<p>Create a custom component by extending ShadowComponent:</p>
|
|
48
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-title function_">render</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> <div class="p b r"><br /> <h3>My Component</h3><br /> <p>This has shadow DOM with Kempo CSS styles.</p><br /> </div><br /> `</span>;<br /> }<br />}<br /><br /><span class="hljs-variable language_">customElements</span>.<span class="hljs-title function_">define</span>(<span class="hljs-string">'my-component'</span>, MyComponent);</code></pre>
|
|
49
|
+
|
|
50
|
+
<h3 id="customStyles"><a href="#customStyles" class="no-link">Custom Styles</a></h3>
|
|
51
|
+
<p>Add component-specific styles using the static <code>styles</code> property:</p>
|
|
52
|
+
<pre><code class="hljs javascript"><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br /><span class="hljs-keyword">import</span> { html, css } <span class="hljs-keyword">from</span> <span class="hljs-string">'../lit-all.min.js'</span>;<br /><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyStyledComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-keyword">static</span> styles = css<span class="hljs-string">`<br /> :host {<br /> display: block;<br /> padding: var(--spacer);<br /> }<br /> .custom-element {<br /> background-color: var(--c_primary);<br /> color: var(--tc_on_primary);<br /> border-radius: var(--radius);<br /> }<br /> `</span>;<br /><br /> <span class="hljs-title function_">render</span>() {<br /> <span class="hljs-keyword">return</span> html<span class="hljs-string">`<br /> <div class="custom-element p"><br /> Custom styled content<br /> </div><br /> `</span>;<br /> }<br />}</code></pre>
|
|
53
|
+
|
|
54
|
+
<h3 id="stylesheetPath"><a href="#stylesheetPath" class="no-link">Changing Stylesheet Path</a></h3>
|
|
55
|
+
<p>By default, ShadowComponent loads <code>/kempo.min.css</code>. Change this globally or per-component:</p>
|
|
56
|
+
<pre><code class="hljs javascript"><span class="hljs-comment">// Change globally for all ShadowComponent instances</span><br /><span class="hljs-keyword">import</span> ShadowComponent <span class="hljs-keyword">from</span> <span class="hljs-string">'./ShadowComponent.js'</span>;<br />ShadowComponent.stylesheetPath = <span class="hljs-string">'/custom-path/kempo.min.css'</span>;<br /><br /><span class="hljs-comment">// Or override for a specific component</span><br /><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> <span class="hljs-keyword">class</span> <span class="hljs-title class_">MyComponent</span> <span class="hljs-keyword">extends</span> <span class="hljs-title class_">ShadowComponent</span> {<br /> <span class="hljs-keyword">static</span> stylesheetPath = <span class="hljs-string">'/custom.css'</span>;<br /> <span class="hljs-comment">// ...</span><br />}</code></pre>
|
|
57
|
+
|
|
58
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
59
|
+
|
|
60
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
61
|
+
<h6>Extends LitElement</h6>
|
|
62
|
+
<h5><code>new ShadowComponent()</code></h5>
|
|
63
|
+
<p>Creates a new ShadowComponent instance with shadow DOM and automatic Kempo CSS stylesheet injection.</p>
|
|
64
|
+
|
|
65
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
66
|
+
<ul>
|
|
67
|
+
<li>Lit (LitElement)</li>
|
|
68
|
+
</ul>
|
|
69
|
+
|
|
70
|
+
<h3 id="staticProperties"><a href="#staticProperties" class="no-link">Static Properties</a></h3>
|
|
71
|
+
<h5><code>stylesheetPath<i>: string</i></code></h5>
|
|
72
|
+
<p>The path to the Kempo CSS stylesheet to inject into the shadow DOM. Default is <code>'/kempo.min.css'</code>. This can be set globally on the ShadowComponent class or overridden in subclasses.</p>
|
|
73
|
+
|
|
74
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
75
|
+
<h5><code>createRenderRoot()<i>: Element</i></code></h5>
|
|
76
|
+
<p>Creates the shadow root and injects the Kempo CSS stylesheet. This method:</p>
|
|
77
|
+
<ul>
|
|
78
|
+
<li>Attaches a shadow DOM with <code>mode: 'open'</code></li>
|
|
79
|
+
<li>Injects a <code><link></code> element pointing to the Kempo CSS stylesheet</li>
|
|
80
|
+
<li>Injects component-specific styles from the static <code>styles</code> property if defined</li>
|
|
81
|
+
<li>Creates a render container with <code>display: contents</code> for layout transparency</li>
|
|
82
|
+
</ul>
|
|
83
|
+
|
|
84
|
+
</main>
|
|
85
|
+
<div style="height:33vh"></div>
|
|
86
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
87
|
+
</body>
|
|
88
|
+
</html>
|
|
@@ -0,0 +1,132 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Sortable - Components - Kempo Docs - A Web Components Solution</title>
|
|
7
|
+
<link rel="stylesheet" href="../src/kempo-vars.css" /><link rel="stylesheet" href="../kempo.min.css" />
|
|
8
|
+
<link rel="stylesheet" href="../src/kempo-hljs.css" />`n <link rel="stylesheet" href="../styles.css" />
|
|
9
|
+
<script type="module">
|
|
10
|
+
import Import from '../src/components/Import.js';
|
|
11
|
+
import Icon from '../src/components/Icon.js';
|
|
12
|
+
Import.replacements.root = '../';
|
|
13
|
+
Icon.pathToIcons = ['../icons'];
|
|
14
|
+
</script>
|
|
15
|
+
</head>
|
|
16
|
+
<body>
|
|
17
|
+
<k-import src="../nav.inc.html"></k-import>
|
|
18
|
+
<h1 class="ta-center">Sortable</h1>
|
|
19
|
+
<main>
|
|
20
|
+
<details class="b r mb">
|
|
21
|
+
<summary class="p">Table of Contents</summary>
|
|
22
|
+
<div class="m mt0 pl">
|
|
23
|
+
<h6>Examples</h6>
|
|
24
|
+
<a href="#basicUsage">Basic Usage</a><br />
|
|
25
|
+
<a href="#sortEvent">Sort Event</a><br />
|
|
26
|
+
|
|
27
|
+
<h6 class="mt">JavaScript Reference</h6>
|
|
28
|
+
<a href="#constructor">Constructor</a><br />
|
|
29
|
+
<a href="#requirements">Requirements</a><br />
|
|
30
|
+
<a href="#properties">Properties</a><br />
|
|
31
|
+
<a href="#methods">Methods</a><br />
|
|
32
|
+
<a href="#events">Events</a><br />
|
|
33
|
+
</div>
|
|
34
|
+
</details>
|
|
35
|
+
|
|
36
|
+
<h3 id="basicUsage"><a href="#basicUsage" class="no-link">Basic Usage</a></h3>
|
|
37
|
+
<p>The <code>k-sortable</code> component allows users to reorder items by dragging them. Wrap your items in a <code>k-sortable</code> container and use <code>k-sortable-item</code> for each item. Each item automatically gets a drag handle.</p>
|
|
38
|
+
<div class="row -mx">
|
|
39
|
+
<div class="col m-span-12 px">
|
|
40
|
+
<k-card label="HTML">
|
|
41
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-sortable</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 1<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 2<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 3<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Item 4<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-sortable</span>></span></code></pre>
|
|
42
|
+
</k-card>
|
|
43
|
+
</div>
|
|
44
|
+
<div class="col m-span-12 px">
|
|
45
|
+
<k-card label="Output">
|
|
46
|
+
<p class="mb"><em>Drag items by their handle to reorder them.</em></p>
|
|
47
|
+
<k-sortable>
|
|
48
|
+
<k-sortable-item>Item 1</k-sortable-item>
|
|
49
|
+
<k-sortable-item>Item 2</k-sortable-item>
|
|
50
|
+
<k-sortable-item>Item 3</k-sortable-item>
|
|
51
|
+
<k-sortable-item>Item 4</k-sortable-item>
|
|
52
|
+
</k-sortable>
|
|
53
|
+
</k-card>
|
|
54
|
+
</div>
|
|
55
|
+
</div>
|
|
56
|
+
|
|
57
|
+
<h3 id="sortEvent"><a href="#sortEvent" class="no-link">Sort Event</a></h3>
|
|
58
|
+
<p>Listen to the <code>sort</code> event on the <code>k-sortable</code> container to be notified when items are reordered.</p>
|
|
59
|
+
<div class="row -mx">
|
|
60
|
+
<div class="col m-span-12 px">
|
|
61
|
+
<k-card label="HTML">
|
|
62
|
+
<pre><code class="hljs xml"><span class="hljs-tag"><<span class="hljs-name">k-sortable</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortableExample"</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Apple<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Banana<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Cherry<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /> <span class="hljs-tag"><<span class="hljs-name">k-sortable-item</span>></span>Date<span class="hljs-tag"></<span class="hljs-name">k-sortable-item</span>></span><br /><span class="hljs-tag"></<span class="hljs-name">k-sortable</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"sortOutput"</span>></span>Reorder items to see the event fire<span class="hljs-tag"></<span class="hljs-name">p</span>></span><br /><span class="hljs-tag"><<span class="hljs-name">script</span>></span><span class="javascript"><br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortableExample'</span>).addEventListener(<span class="hljs-string">'sort'</span>, () => {<br /> <span class="hljs-keyword">const</span> items = <span class="hljs-title class_">Array</span>.<span class="hljs-title function_">from</span>(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortableExample'</span>).children)<br /> .<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =></span> item.textContent);<br /> <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'sortOutput'</span>).textContent = <span class="hljs-string">`Order: <span class="hljs-subst">${items.join(<span class="hljs-string">', '</span>)}</span>`</span>;<br /> });<br /></span><span class="hljs-tag"></<span class="hljs-name">script</span>></span></code></pre>
|
|
63
|
+
</k-card>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="col m-span-12 px">
|
|
66
|
+
<k-card label="Output">
|
|
67
|
+
<k-sortable id="sortableExample">
|
|
68
|
+
<k-sortable-item>Apple</k-sortable-item>
|
|
69
|
+
<k-sortable-item>Banana</k-sortable-item>
|
|
70
|
+
<k-sortable-item>Cherry</k-sortable-item>
|
|
71
|
+
<k-sortable-item>Date</k-sortable-item>
|
|
72
|
+
</k-sortable>
|
|
73
|
+
<p id="sortOutput" class="mt">Reorder items to see the event fire</p>
|
|
74
|
+
<script>
|
|
75
|
+
document.getElementById('sortableExample').addEventListener('sort', () => {
|
|
76
|
+
const items = Array.from(document.getElementById('sortableExample').children)
|
|
77
|
+
.map(item => item.textContent);
|
|
78
|
+
document.getElementById('sortOutput').textContent = `Order: ${items.join(', ')}`;
|
|
79
|
+
});
|
|
80
|
+
</script>
|
|
81
|
+
</k-card>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<h2 id="jsRef">JavaScript Reference</h2>
|
|
86
|
+
|
|
87
|
+
<h3 id="constructor"><a href="#constructor" class="no-link">Constructor</a></h3>
|
|
88
|
+
|
|
89
|
+
<h5><code>new Sortable()</code></h5>
|
|
90
|
+
<h6>Extends LitElement</h6>
|
|
91
|
+
<p>The container component that manages sortable items.</p>
|
|
92
|
+
|
|
93
|
+
<h5><code>new SortableItem()</code></h5>
|
|
94
|
+
<h6>Extends LitElement</h6>
|
|
95
|
+
<p>An individual sortable item with a drag handle.</p>
|
|
96
|
+
|
|
97
|
+
<h3 id="requirements"><a href="#requirements" class="no-link">Requirements</a></h3>
|
|
98
|
+
<ul>
|
|
99
|
+
<li>Lit</li>
|
|
100
|
+
<li><a href="../utils/drag.html">drag</a> utility</li>
|
|
101
|
+
<li><a href="icon.html">Icon</a> component</li>
|
|
102
|
+
</ul>
|
|
103
|
+
|
|
104
|
+
<h3 id="properties"><a href="#properties" class="no-link">Properties</a></h3>
|
|
105
|
+
|
|
106
|
+
<h4>Sortable</h4>
|
|
107
|
+
<p>The Sortable container has no public properties.</p>
|
|
108
|
+
|
|
109
|
+
<h4>SortableItem</h4>
|
|
110
|
+
<h5><code>sorting<i>: boolean</i></code></h5>
|
|
111
|
+
<p>A boolean indicating if the item is currently being dragged. This property is reflected as an attribute and automatically set by the drag handlers. When <code>true</code>, the item has reduced opacity.</p>
|
|
112
|
+
|
|
113
|
+
<h3 id="methods"><a href="#methods" class="no-link">Methods</a></h3>
|
|
114
|
+
|
|
115
|
+
<h4>Sortable</h4>
|
|
116
|
+
<h5><code>getCursorElement()<i>: [Element, string] | null</i></code></h5>
|
|
117
|
+
<p>Returns the element and position ('before' or 'after') where the dragged item should be inserted based on the current cursor position. Returns <code>null</code> if no valid target is found.</p>
|
|
118
|
+
|
|
119
|
+
<h4>SortableItem</h4>
|
|
120
|
+
<h5><code>sortable<i>: Sortable</i></code></h5>
|
|
121
|
+
<p>A getter that returns the parent <code>k-sortable</code> element using <code>closest('k-sortable')</code>.</p>
|
|
122
|
+
|
|
123
|
+
<h3 id="events"><a href="#events" class="no-link">Events</a></h3>
|
|
124
|
+
<h5><code>sort</code></h5>
|
|
125
|
+
<p>Dispatched by the <code>k-sortable</code> container when an item is dropped in a new position. The event bubbles. Use this event to save the new order or update your application state.</p>
|
|
126
|
+
|
|
127
|
+
</main>
|
|
128
|
+
<div style="height:33vh"></div>
|
|
129
|
+
<script type="module" src="../src/components/Import.js"></script>
|
|
130
|
+
<script type="module" src="../src/components/Sortable.js"></script>
|
|
131
|
+
</body>
|
|
132
|
+
</html>
|
package/docs/icons/error.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240ZM330-120 120-330v-300l210-210h300l210 210v300L630-120H330Zm34-80h232l164-164v-232L596-760H364L200-596v232l164 164Zm116-280Z"/></svg>
|
package/docs/icons/warning.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path fill="currentColor" d="m40-120 440-760 440 760H40Zm138-80h604L480-720 178-200Zm302-40q17 0 28.5-11.5T520-280q0-17-11.5-28.5T480-320q-17 0-28.5 11.5T440-280q0 17 11.5 28.5T480-240Zm-40-120h80v-200h-80v200Zm40-100Z"/></svg>
|
package/docs/index.html
CHANGED
|
@@ -17,12 +17,204 @@
|
|
|
17
17
|
<main>
|
|
18
18
|
<h1>Kempo UI</h1>
|
|
19
19
|
<p>Welcome to the Kempo UI component library documentation.</p>
|
|
20
|
+
|
|
20
21
|
<h2>Components</h2>
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
22
|
+
<div class="row -mx">
|
|
23
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
24
|
+
<a href="./components/accordion.html" class="card mb no-link d-b">
|
|
25
|
+
<h3 class="tc-primary">Accordion</h3>
|
|
26
|
+
<p class="tc-muted">Collapsible sections with smooth animations and toggle controls.</p>
|
|
27
|
+
</a>
|
|
28
|
+
</div>
|
|
29
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
30
|
+
<a href="./components/card.html" class="card mb no-link d-b">
|
|
31
|
+
<h3 class="tc-primary">Card</h3>
|
|
32
|
+
<p class="tc-muted">Container component with optional labels and border styling.</p>
|
|
33
|
+
</a>
|
|
34
|
+
</div>
|
|
35
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
36
|
+
<a href="./components/collapsible.html" class="card mb no-link d-b">
|
|
37
|
+
<h3 class="tc-primary">Collapsible</h3>
|
|
38
|
+
<p class="tc-muted">Toggle visibility of content with smooth expand/collapse transitions.</p>
|
|
39
|
+
</a>
|
|
40
|
+
</div>
|
|
41
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
42
|
+
<a href="./components/persistant-collapsible.html" class="card mb no-link d-b">
|
|
43
|
+
<h3 class="tc-primary">PersistantCollapsible</h3>
|
|
44
|
+
<p class="tc-muted">Collapsible with localStorage to remember state across sessions.</p>
|
|
45
|
+
</a>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
48
|
+
<a href="./components/content-slider.html" class="card mb no-link d-b">
|
|
49
|
+
<h3 class="tc-primary">Content Slider</h3>
|
|
50
|
+
<p class="tc-muted">Swipeable carousel for images and content with navigation controls.</p>
|
|
51
|
+
</a>
|
|
52
|
+
</div>
|
|
53
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
54
|
+
<a href="./components/dialog.html" class="card mb no-link d-b">
|
|
55
|
+
<h3 class="tc-primary">Dialog</h3>
|
|
56
|
+
<p class="tc-muted">Modal dialogs with focus trapping and customizable buttons.</p>
|
|
57
|
+
</a>
|
|
58
|
+
</div>
|
|
59
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
60
|
+
<a href="./components/focus-capture.html" class="card mb no-link d-b">
|
|
61
|
+
<h3 class="tc-primary">FocusCapture</h3>
|
|
62
|
+
<p class="tc-muted">Trap keyboard focus within a container for accessibility.</p>
|
|
63
|
+
</a>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
66
|
+
<a href="./components/icon.html" class="card mb no-link d-b">
|
|
67
|
+
<h3 class="tc-primary">Icon</h3>
|
|
68
|
+
<p class="tc-muted">Display SVG icons from a collection with customizable size and color.</p>
|
|
69
|
+
</a>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
72
|
+
<a href="./components/import.html" class="card mb no-link d-b">
|
|
73
|
+
<h3 class="tc-primary">Import</h3>
|
|
74
|
+
<p class="tc-muted">Dynamically load and include HTML snippets into your pages.</p>
|
|
75
|
+
</a>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
78
|
+
<a href="./components/photo-viewer.html" class="card mb no-link d-b">
|
|
79
|
+
<h3 class="tc-primary">Photo Viewer</h3>
|
|
80
|
+
<p class="tc-muted">Lightbox gallery for viewing images with zoom and navigation.</p>
|
|
81
|
+
</a>
|
|
82
|
+
</div>
|
|
83
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
84
|
+
<a href="./components/resize.html" class="card mb no-link d-b">
|
|
85
|
+
<h3 class="tc-primary">Resize</h3>
|
|
86
|
+
<p class="tc-muted">Draggable handle to resize adjacent elements dynamically.</p>
|
|
87
|
+
</a>
|
|
88
|
+
</div>
|
|
89
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
90
|
+
<a href="./components/show-more.html" class="card mb no-link d-b">
|
|
91
|
+
<h3 class="tc-primary">Show More</h3>
|
|
92
|
+
<p class="tc-muted">Truncate long content with a "show more" button to expand.</p>
|
|
93
|
+
</a>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
96
|
+
<a href="./components/side-menu.html" class="card mb no-link d-b">
|
|
97
|
+
<h3 class="tc-primary">Side Menu</h3>
|
|
98
|
+
<p class="tc-muted">Slide-out navigation drawer with focus management.</p>
|
|
99
|
+
</a>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
102
|
+
<a href="./components/sortable.html" class="card mb no-link d-b">
|
|
103
|
+
<h3 class="tc-primary">Sortable</h3>
|
|
104
|
+
<p class="tc-muted">Drag-and-drop lists with reordering and sort events.</p>
|
|
105
|
+
</a>
|
|
106
|
+
</div>
|
|
107
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
108
|
+
<a href="./components/split.html" class="card mb no-link d-b">
|
|
109
|
+
<h3 class="tc-primary">Split</h3>
|
|
110
|
+
<p class="tc-muted">Resizable split panes with horizontal or vertical layouts.</p>
|
|
111
|
+
</a>
|
|
112
|
+
</div>
|
|
113
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
114
|
+
<a href="./components/table.html" class="card mb no-link d-b">
|
|
115
|
+
<h3 class="tc-primary">Table</h3>
|
|
116
|
+
<p class="tc-muted">Feature-rich data tables with sorting, filtering, and pagination.</p>
|
|
117
|
+
</a>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
120
|
+
<a href="./components/tabs.html" class="card mb no-link d-b">
|
|
121
|
+
<h3 class="tc-primary">Tabs</h3>
|
|
122
|
+
<p class="tc-muted">Tabbed interface for organizing content into switchable panels.</p>
|
|
123
|
+
</a>
|
|
124
|
+
</div>
|
|
125
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
126
|
+
<a href="./components/tags.html" class="card mb no-link d-b">
|
|
127
|
+
<h3 class="tc-primary">Tags</h3>
|
|
128
|
+
<p class="tc-muted">Input field for adding and removing tags with keyboard support.</p>
|
|
129
|
+
</a>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
132
|
+
<a href="./components/toast.html" class="card mb no-link d-b">
|
|
133
|
+
<h3 class="tc-primary">Toast</h3>
|
|
134
|
+
<p class="tc-muted">Notification messages that appear temporarily at screen corners.</p>
|
|
135
|
+
</a>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
138
|
+
<a href="./components/theme-switcher.html" class="card mb no-link d-b">
|
|
139
|
+
<h3 class="tc-primary">Theme Switcher</h3>
|
|
140
|
+
<p class="tc-muted">Toggle between light, dark, and auto theme modes.</p>
|
|
141
|
+
</a>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
144
|
+
<a href="./components/timestamp.html" class="card mb no-link d-b">
|
|
145
|
+
<h3 class="tc-primary">Timestamp</h3>
|
|
146
|
+
<p class="tc-muted">Display formatted dates and times with relative formatting.</p>
|
|
147
|
+
</a>
|
|
148
|
+
</div>
|
|
149
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
150
|
+
<a href="./components/toggle.html" class="card mb no-link d-b">
|
|
151
|
+
<h3 class="tc-primary">Toggle</h3>
|
|
152
|
+
<p class="tc-muted">Switch component for boolean values with custom styling.</p>
|
|
153
|
+
</a>
|
|
154
|
+
</div>
|
|
155
|
+
</div>
|
|
156
|
+
|
|
157
|
+
<h2>Base Components</h2>
|
|
158
|
+
<div class="row -mx">
|
|
159
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
160
|
+
<a href="./components/shadow-component.html" class="card mb no-link d-b">
|
|
161
|
+
<h3 class="tc-primary">Shadow Component</h3>
|
|
162
|
+
<p class="tc-muted">Base class for components with shadow DOM and scoped styles.</p>
|
|
163
|
+
</a>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
166
|
+
<a href="./components/light-component.html" class="card mb no-link d-b">
|
|
167
|
+
<h3 class="tc-primary">Light Component</h3>
|
|
168
|
+
<p class="tc-muted">Base class for components that render directly to light DOM.</p>
|
|
169
|
+
</a>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
172
|
+
<a href="./components/hybrid-component.html" class="card mb no-link d-b">
|
|
173
|
+
<h3 class="tc-primary">Hybrid Component</h3>
|
|
174
|
+
<p class="tc-muted">Base class combining shadow and light DOM rendering.</p>
|
|
175
|
+
</a>
|
|
176
|
+
</div>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<h2>Utils</h2>
|
|
180
|
+
<div class="row -mx">
|
|
181
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
182
|
+
<a href="./utils/debounce.html" class="card mb no-link d-b">
|
|
183
|
+
<h3 class="tc-primary">debounce</h3>
|
|
184
|
+
<p class="tc-muted">Delay function execution until after a specified wait period.</p>
|
|
185
|
+
</a>
|
|
186
|
+
</div>
|
|
187
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
188
|
+
<a href="./utils/drag.html" class="card mb no-link d-b">
|
|
189
|
+
<h3 class="tc-primary">drag</h3>
|
|
190
|
+
<p class="tc-muted">Handle mouse and touch drag interactions with cleanup.</p>
|
|
191
|
+
</a>
|
|
192
|
+
</div>
|
|
193
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
194
|
+
<a href="./utils/formatTimestamp.html" class="card mb no-link d-b">
|
|
195
|
+
<h3 class="tc-primary">formatTimestamp</h3>
|
|
196
|
+
<p class="tc-muted">Format dates into human-readable relative or absolute strings.</p>
|
|
197
|
+
</a>
|
|
198
|
+
</div>
|
|
199
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
200
|
+
<a href="./utils/propConverters.html" class="card mb no-link d-b">
|
|
201
|
+
<h3 class="tc-primary">propConverters</h3>
|
|
202
|
+
<p class="tc-muted">Type converters for Lit component properties and attributes.</p>
|
|
203
|
+
</a>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
206
|
+
<a href="./utils/toTitleCase.html" class="card mb no-link d-b">
|
|
207
|
+
<h3 class="tc-primary">toTitleCase</h3>
|
|
208
|
+
<p class="tc-muted">Convert strings from various formats to Title Case.</p>
|
|
209
|
+
</a>
|
|
210
|
+
</div>
|
|
211
|
+
<div class="span-12 t-span-6 d-span-4 px">
|
|
212
|
+
<a href="./utils/watchWindowSize.html" class="card mb no-link d-b">
|
|
213
|
+
<h3 class="tc-primary">watchWindowSize</h3>
|
|
214
|
+
<p class="tc-muted">Monitor window resize events with debounced callbacks.</p>
|
|
215
|
+
</a>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
26
218
|
</main>
|
|
27
219
|
</body>
|
|
28
220
|
</html>
|
package/docs/kempo.min.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{color-scheme:light;--ff_body:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_heading:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_mono:Consolas,monaco,monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--btn_padding:var(--spacer_h) var(--spacer);--c_bg:light-dark(rgb(249, 249, 249), rgb(51, 51, 51));--c_bg__inv:light-dark(rgb(51, 51, 51), rgb(249, 249, 249));--c_bg__alt:light-dark(rgb(238, 238, 238), rgb(34, 34, 34));--c_overscroll:light-dark(rgb(255, 255, 255), rgb(0, 0, 0));--c_border:light-dark(rgb(204, 204, 204), rgb(119, 119, 119));--c_border__inv:light-dark(var(--d_c_bg_border), rgb(204, 204, 204));--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--c_input_border:var(--c_border);--c_highlight:light-dark(rgba(41, 100, 210, 0.25), rgba(0, 89, 255, 0.25));--tc:light-dark(rgba(0, 0, 0, 0.93), rgba(255, 255, 255, 0.93));--tc_dark:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--tc_light:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_inv:light-dark(rgba(255, 255, 255, 0.93), rgba(0, 0, 0, 0.93));--tc_muted:light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));--tc_on_primary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_secondary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_success:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_warning:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_danger:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:light-dark(#36f, rgb(138, 180, 248));--tc_secondary:light-dark(#93f, rgb(187, 102, 255));--tc_success:light-dark(#080, rgb(102, 187, 102));--tc_warning:light-dark(#f60, rgb(255, 153, 51));--tc_danger:light-dark(#f03, rgb(255, 85, 119));--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:light-dark(rgb(221, 221, 221), rgb(170, 170, 170));--btn_bg__hover:light-dark(rgb(204, 204, 204), rgb(187, 187, 187));--btn_tc:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--btn_transparent__hover:light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:light-dark(white, var(--c_bg__alt));--input_tc:light-dark(rgba(0, 0, 0, 0.93), var(--tc));--drop_shadow:light-dark(0 0.25rem 0.5rem rgba(0, 0, 0, 0.333), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25));--date_picker_icon_filter:light-dark(invert(0), invert(1))}[theme=light]{color-scheme:light}[theme=dark]{color-scheme:dark}[theme=auto]{color-scheme:light dark}:root{interpolate-size:allow-keywords}*,::after,::before{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}blockquote,body,code,dd,dl,dt,h1,h2,h3,h4,h5,h6,li,ol,p,pre,ul{margin:0;padding:.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}.container,main{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav>.link,nav>a{display:inline-block;padding:var(--spacer)!important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}.d-b{display:block!important}.d-ib{display:inline-block!important}.d-g{display:grid!important}.d-i{display:inline!important}.d-n{display:none!important}.d-f{display:flex!important;flex-wrap:wrap}.d-if{display:inline-flex!important;flex-wrap:wrap}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-f{display:flex!important;flex-wrap:wrap}.d-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-f{display:flex!important;flex-wrap:wrap}.t-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-f{display:flex!important;flex-wrap:wrap}.m-d-if{display:inline-flex!important;flex-wrap:wrap}}.flex,.flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-if{display:inline-flex!important;flex-wrap:wrap}.d-d-f{display:flex!important;flex-wrap:wrap}.d-flex,.d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-if{display:inline-flex!important;flex-wrap:wrap}.t-d-f{display:flex!important;flex-wrap:wrap}.t-flex,.t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-if{display:inline-flex!important;flex-wrap:wrap}.m-d-f{display:flex!important;flex-wrap:wrap}.m-flex,.m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}.small,small{font-size:var(--fs_small)!important}.large{font-size:var(--fs_large)!important}.h1,.h2,.h3,.h4,.h5,.h6,b,h1,h2,h3,h4,h5,h6,strong{font-weight:var(--fw_bold)}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:var(--ff_heading)}.h1,h1{font-size:var(--fs_h1)}.h2,h2{font-size:var(--fs_h2)}.h3,h3{font-size:var(--fs_h3)}.h4,h4{font-size:var(--fs_h4)}.h5,h5{font-size:var(--fs_h5)}.h6,h6{font-size:var(--fs_h6)}blockquote,dd,dl,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin-bottom:var(--spacer)}dl,ol,ul{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono,code,pre{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.link,a{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms),box-shadow var(--animation_ms);outline:0;border-radius:var(--radius);text-decoration:var(--link_decoration)}.link:hover,a:hover{color:var(--tc_link__hover)}.link:focus-visible,a:focus{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:.75em}dl{padding:0;margin:0}dd,dt{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd+dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}.p,.pt,.py{padding-top:var(--spacer)!important}.p,.pr,.px{padding-right:var(--spacer)!important}.p,.pb,.py{padding-bottom:var(--spacer)!important}.p,.pl,.px{padding-left:var(--spacer)!important}.ph,.pth,.pyh{padding-top:var(--spacer_h)!important}.ph,.prh,.pxh{padding-right:var(--spacer_h)!important}.pbh,.ph,.pyh{padding-bottom:var(--spacer_h)!important}.ph,.plh,.pxh{padding-left:var(--spacer_h)!important}.pq,.ptq,.pyq{padding-top:var(--spacer_q)!important}.pq,.prq,.pxq{padding-right:var(--spacer_q)!important}.pbq,.pq,.pyq{padding-bottom:var(--spacer_q)!important}.plq,.pq,.pxq{padding-left:var(--spacer_q)!important}.p0,.pt0,.py0{padding-top:.1px!important}.p0,.pr0,.px0{padding-right:.1px!important}.p0,.pb0,.py0{padding-bottom:.1px!important}.p0,.pl0,.px0{padding-left:.1px!important}.m,.mt,.my{margin-top:var(--spacer)!important}.m,.mr,.mx{margin-right:var(--spacer)!important}.m,.mb,.my{margin-bottom:var(--spacer)!important}.m,.ml,.mx{margin-left:var(--spacer)!important}.mh,.mth,.myh{margin-top:var(--spacer_h)!important}.mh,.mrh,.mxh{margin-right:var(--spacer_h)!important}.mbh,.mh,.myh{margin-bottom:var(--spacer_h)!important}.mh,.mlh,.mxh{margin-left:var(--spacer_h)!important}.mq,.mtq,.myq{margin-top:var(--spacer_q)!important}.mq,.mrq,.mxq{margin-right:var(--spacer_q)!important}.mbq,.mq,.myq{margin-bottom:var(--spacer_q)!important}.mlq,.mq,.mxq{margin-left:var(--spacer_q)!important}.m0,.mt0,.my0{margin-top:0!important}.m0,.mr0,.mx0{margin-right:0!important}.m0,.mb0,.my0{margin-bottom:0!important}.m0,.ml0,.mx0{margin-left:0!important}.-m,.-mt,.-my{margin-top:calc(-1 * var(--spacer))!important}.-m,.-mr,.-mx{margin-right:calc(-1 * var(--spacer))!important}.-m,.-mb,.-my{margin-bottom:calc(-1 * var(--spacer))!important}.-m,.-ml,.-mx{margin-left:calc(-1 * var(--spacer))!important}.b,.bt,.by{border-top:1px solid var(--c_border)!important}.b,.br,.bx{border-right:1px solid var(--c_border)!important}.b,.bb,.by{border-bottom:1px solid var(--c_border)!important}.b,.bl,.bx{border-left:1px solid var(--c_border)!important}.b0,.bt0,.by0{border-top:none!important}.b0,.br0,.bx0{border-right:none!important}.b0,.bb0,.by0{border-bottom:none!important}.b0,.bl0,.bx0{border-left:none!important}.r,.rl,.rt,.rtl{border-top-left-radius:var(--radius)!important}.r,.rr,.rt,.rtr{border-top-right-radius:var(--radius)!important}.r,.rb,.rbr,.rr{border-bottom-right-radius:var(--radius)!important}.r,.rb,.rbl,.rl{border-bottom-left-radius:var(--radius)!important}.r0,.rl0,.rt0,.rtl0{border-top-left-radius:0!important}.r0,.rr0,.rt0,.rtr0{border-top-right-radius:0!important}.r0,.rb0,.rbr0,.rr0{border-bottom-right-radius:0!important}.r0,.rb0,.rbl0,.rl0{border-bottom-left-radius:0!important}.round{border-radius:9999rem!important}.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-5{grid-template-columns:repeat(5,1fr)}.cols-6{grid-template-columns:repeat(6,1fr)}.cols-7{grid-template-columns:repeat(7,1fr)}.cols-8{grid-template-columns:repeat(8,1fr)}.cols-9{grid-template-columns:repeat(9,1fr)}.cols-10{grid-template-columns:repeat(10,1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2,1fr)}.d-cols-3{grid-template-columns:repeat(3,1fr)}.d-cols-4{grid-template-columns:repeat(4,1fr)}.d-cols-5{grid-template-columns:repeat(5,1fr)}.d-cols-6{grid-template-columns:repeat(6,1fr)}.d-cols-7{grid-template-columns:repeat(7,1fr)}.d-cols-8{grid-template-columns:repeat(8,1fr)}.d-cols-9{grid-template-columns:repeat(9,1fr)}.d-cols-10{grid-template-columns:repeat(10,1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2,1fr)}.t-cols-3{grid-template-columns:repeat(3,1fr)}.t-cols-4{grid-template-columns:repeat(4,1fr)}.t-cols-5{grid-template-columns:repeat(5,1fr)}.t-cols-6{grid-template-columns:repeat(6,1fr)}.t-cols-7{grid-template-columns:repeat(7,1fr)}.t-cols-8{grid-template-columns:repeat(8,1fr)}.t-cols-9{grid-template-columns:repeat(9,1fr)}.t-cols-10{grid-template-columns:repeat(10,1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2,1fr)}.m-cols-3{grid-template-columns:repeat(3,1fr)}.m-cols-4{grid-template-columns:repeat(4,1fr)}.m-cols-5{grid-template-columns:repeat(5,1fr)}.m-cols-6{grid-template-columns:repeat(6,1fr)}.m-cols-7{grid-template-columns:repeat(7,1fr)}.m-cols-8{grid-template-columns:repeat(8,1fr)}.m-cols-9{grid-template-columns:repeat(9,1fr)}.m-cols-10{grid-template-columns:repeat(10,1fr)}}.btn,button:not(.no-btn):not(.no-style),input[type=button],input[type=reset],input[type=submit]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:0;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms),box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}.btn:hover,button:not(.no-btn):not(.no-style):hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}.btn:focus,button:not(.no-btn):not(.no-style):focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--btn_box_shadow__hover),var(--focus_shadow);z-index:1}.btn[disabled],button:not(.no-btn):not(.no-style):disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{opacity:.6}.btn.primary,button:not(.no-btn).primary,input[type=button].primary,input[type=reset].primary,input[type=submit].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}.btn.primary:hover,button:not(.no-btn).primary:hover,input[type=button].primary:hover,input[type=reset].primary:hover,input[type=submit].primary:hover{background-color:var(--c_primary__hover)}.btn.secondary,button:not(.no-btn).secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}.btn.secondary:hover,button:not(.no-btn).secondary:hover,input[type=button].secondary:hover,input[type=reset].secondary:hover,input[type=submit].secondary:hover{background-color:var(--c_secondary__hover)}.btn.success,button:not(.no-btn).success,input[type=button].success,input[type=reset].success,input[type=submit].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}.btn.success:hover,button:not(.no-btn).success:hover,input[type=button].success:hover,input[type=reset].success:hover,input[type=submit].success:hover{background-color:var(--c_success__hover)}.btn.warning,button:not(.no-btn).warning,input[type=button].warning,input[type=reset].warning,input[type=submit].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}.btn.warning:hover,button:not(.no-btn).warning:hover,input[type=button].warning:hover,input[type=reset].warning:hover,input[type=submit].warning:hover{background-color:var(--c_warning__hover)}.btn.danger,button:not(.no-btn).danger,input[type=button].danger,input[type=reset].danger,input[type=submit].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}.btn.danger:hover,button:not(.no-btn).danger:hover,input[type=button].danger:hover,input[type=reset].danger:hover,input[type=submit].danger:hover{background-color:var(--c_danger__hover)}.btn.link,button:not(.no-btn):not(.no-style).link,input[type=button].link,input[type=reset].link,input[type=submit].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp .btn:not(:first-child),.btn-grp button:not(.no-btn):not(:first-child),.btn-grp input[type=button]:not(:first-child),.btn-grp input[type=reset]:not(:first-child),.btn-grp input[type=submit]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0,0,0,.25)}.btn-grp .btn:not(:last-child),.btn-grp button:not(.no-btn):not(:last-child),.btn-grp input[type=button]:not(:last-child),.btn-grp input[type=reset]:not(:last-child),.btn-grp input[type=submit]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_input_border);padding:var(--input_padding);border-radius:var(--radius);outline:0;transition:box-shadow var(--animation_ms)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):focus,input[type=checkbox]:focus,input[type=radio]:focus,select:focus,textarea:focus{box-shadow:var(--focus_shadow)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):disabled,input[type=checkbox]:disabled,input[type=radio]:disabled,select:disabled,textarea:disabled{opacity:.6}select[multiple],textarea{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type=checkbox],input[type=radio]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:0;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer)}select[multiple]{padding:.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type=color]{padding:0!important;height:2.35em}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border-radius:var(--radius,.25rem);cursor:pointer}input[type=date]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=time]::-webkit-calendar-picker-indicator,input[type=week]::-webkit-calendar-picker-indicator{filter:var(--date_picker_icon_filter)}.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}td,th{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}td:last-child,th:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.bg-inv .tc-primary,.is-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.bg-inv .tc-secondary,.is-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.bg-inv .tc-success,.is-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.bg-inv .tc-warning,.is-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.bg-inv .tc-danger,.is-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
|
|
1
|
+
:root{color-scheme:light;--ff_body:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_heading:"Helvetica Neue",Helvetica,Arial,sans-serif;--ff_mono:Consolas,monaco,monospace;--fs_base:16px;--fs_small:calc(0.6 * var(--fs_base));--fs_large:calc(1.5 * var(--fs_base));--fs_h6:var(--fs_base);--fs_h5:calc(1.25 * var(--fs_base));--fs_h4:calc(1.5 * var(--fs_base));--fs_h3:calc(1.75 * var(--fs_base));--fs_h2:calc(2 * var(--fs_base));--fs_h1:calc(2.5 * var(--fs_base));--fw_base:400;--fw_bold:700;--spacer:1rem;--spacer_h:calc(0.5 * var(--spacer));--spacer_q:calc(0.25 * var(--spacer));--line-height:1.35em;--container_width:90rem;--animation_ms:256ms;--radius:0.25rem;--link_decoration:underline;--input_padding:var(--spacer_h) var(--spacer);--input_border_width:1px;--btn_padding:var(--spacer_h) var(--spacer);--c_bg:light-dark(rgb(249, 249, 249), rgb(51, 51, 51));--c_bg__inv:light-dark(rgb(51, 51, 51), rgb(249, 249, 249));--c_bg__alt:light-dark(rgb(238, 238, 238), rgb(34, 34, 34));--c_overscroll:light-dark(rgb(255, 255, 255), rgb(0, 0, 0));--c_border:light-dark(rgb(204, 204, 204), rgb(119, 119, 119));--c_border__inv:light-dark(var(--d_c_bg_border), rgb(204, 204, 204));--c_primary:rgb(51, 102, 255);--c_primary__hover:rgb(17, 68, 221);--c_secondary:rgb(153, 51, 255);--c_secondary__hover:rgb(119, 17, 221);--c_success:rgb(0, 136, 0);--c_success__hover:rgb(0, 102, 0);--c_warning:rgb(255, 102, 0);--c_warning__hover:rgb(221, 68, 0);--c_danger:rgb(255, 0, 51);--c_danger__hover:rgb(221, 0, 17);--c_input_accent:rgb(51, 102, 255);--c_input_border:var(--c_border);--c_highlight:light-dark(rgba(41, 100, 210, 0.25), rgba(0, 89, 255, 0.25));--tc:light-dark(rgba(0, 0, 0, 0.93), rgba(255, 255, 255, 0.93));--tc_dark:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--tc_light:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_inv:light-dark(rgba(255, 255, 255, 0.93), rgba(0, 0, 0, 0.93));--tc_muted:light-dark(rgba(0, 0, 0, 0.5), rgba(255, 255, 255, 0.5));--tc_on_primary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_secondary:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_success:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_warning:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--tc_on_danger:light-dark(rgba(255, 255, 255, 0.93), rgba(255, 255, 255, 0.93));--c_overlay:rgba(0, 0, 0, 0.5);--tc_primary:light-dark(#36f, rgb(138, 180, 248));--tc_secondary:light-dark(#93f, rgb(187, 102, 255));--tc_success:light-dark(#080, rgb(102, 187, 102));--tc_warning:light-dark(#f60, rgb(255, 153, 51));--tc_danger:light-dark(#f03, rgb(255, 85, 119));--btn_box_shadow:0 0 0 transparent;--btn_box_shadow__hover:0 0 0 transparent;--btn_border:transparent;--btn_bg:light-dark(rgb(221, 221, 221), rgb(170, 170, 170));--btn_bg__hover:light-dark(rgb(204, 204, 204), rgb(187, 187, 187));--btn_tc:light-dark(rgba(0, 0, 0, 0.93), rgba(0, 0, 0, 0.93));--btn_transparent__hover:light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.05));--tc_link:var(--tc_primary);--tc_link__hover:var(--tc_secondary);--tc_link__inv:var(--tc_primary__inv);--tc_link__inv__hover:var(--tc_secondary__inv);--focus_shadow:0 0 2px 2px var(--c_primary);--focus_shadow_on_primary:0 0 2px 2px var(--tc_on_primary);--input_bg:light-dark(white, var(--c_bg__alt));--input_tc:light-dark(rgba(0, 0, 0, 0.93), var(--tc));--drop_shadow:light-dark(0 0.25rem 0.5rem rgba(0, 0, 0, 0.333), 0 0.25rem 0.5rem rgba(0, 0, 0, 0.25));--date_picker_icon_filter:light-dark(invert(0), invert(1))}[theme=light]{color-scheme:light}[theme=dark]{color-scheme:dark}[theme=auto]{color-scheme:light dark}:root{interpolate-size:allow-keywords}*,::after,::before{font-family:inherit;box-sizing:border-box;line-height:var(--line-height)}blockquote,body,code,dd,dl,dt,h1,h2,h3,h4,h5,h6,li,ol,p,pre,ul{margin:0;padding:.1px}html{font-family:var(--ff_body);font-size:var(--fs_base);font-weight:var(--fw_base);color:var(--tc)}::selection{background:var(--c_highlight)}body{min-height:100vh;background-color:var(--c_bg);color:var(--tc);overflow-y:scroll;font-family:var(--ff_body);position:relative}.container,main{max-width:var(--container_width);margin-left:auto;margin-right:auto;padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer)}nav>.link,nav>a{display:inline-block;padding:var(--spacer)!important;text-decoration:none}menu{margin:0;padding:0}menu a{display:block;padding:var(--spacer_q);text-decoration:none;color:inherit}summary{cursor:pointer;margin-bottom:var(--sapcer);outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:var(--radius)}summary:focus{box-shadow:var(--focus_shadow)}.d-b{display:block!important}.d-ib{display:inline-block!important}.d-g{display:grid!important}.d-i{display:inline!important}.d-n{display:none!important}.d-f{display:flex!important;flex-wrap:wrap}.d-if{display:inline-flex!important;flex-wrap:wrap}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-f{display:flex!important;flex-wrap:wrap}.d-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-f{display:flex!important;flex-wrap:wrap}.t-d-if{display:inline-flex!important;flex-wrap:wrap}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-f{display:flex!important;flex-wrap:wrap}.m-d-if{display:inline-flex!important;flex-wrap:wrap}}.flex,.flex-1{flex:1 1 auto}.flex-0{flex:0 0}.flex-2{flex:2 2 auto}.flex-3{flex:3 3 auto}.flex-4{flex:4 4 auto}.flex-5{flex:5 5 auto}.flex-6{flex:6 6 auto}.flex-7{flex:7 7 auto}.flex-8{flex:8 8 auto}.flex-9{flex:9 9 auto}.flex-10{flex:10 10 auto}@media (min-width:1024px){.d-d-b{display:block!important}.d-d-ib{display:inline-block!important}.d-d-g{display:grid!important}.d-d-i{display:inline!important}.d-d-n{display:none!important}.d-d-if{display:inline-flex!important;flex-wrap:wrap}.d-d-f{display:flex!important;flex-wrap:wrap}.d-flex,.d-flex-1{flex:1 1 auto}.d-flex-0{flex:0 0}.d-flex-2{flex:2 2 auto}.d-flex-3{flex:3 3 auto}.d-flex-4{flex:4 4 auto}.d-flex-5{flex:5 5 auto}.d-flex-6{flex:6 6 auto}.d-flex-7{flex:7 7 auto}.d-flex-8{flex:8 8 auto}.d-flex-9{flex:9 9 auto}.d-flex-10{flex:10 10 auto}}@media (min-width:769px) and (max-width:1023px){.t-d-b{display:block!important}.t-d-ib{display:inline-block!important}.t-d-g{display:grid!important}.t-d-i{display:inline!important}.t-d-n{display:none!important}.t-d-if{display:inline-flex!important;flex-wrap:wrap}.t-d-f{display:flex!important;flex-wrap:wrap}.t-flex,.t-flex-1{flex:1 1 auto}.t-flex-0{flex:0 0}.t-flex-2{flex:2 2 auto}.t-flex-3{flex:3 3 auto}.t-flex-4{flex:4 4 auto}.t-flex-5{flex:5 5 auto}.t-flex-6{flex:6 6 auto}.t-flex-7{flex:7 7 auto}.t-flex-8{flex:8 8 auto}.t-flex-9{flex:9 9 auto}.t-flex-10{flex:10 10 auto}}@media (max-width:768px){.m-d-b{display:block!important}.m-d-ib{display:inline-block!important}.m-d-g{display:grid!important}.m-d-i{display:inline!important}.m-d-n{display:none!important}.m-d-if{display:inline-flex!important;flex-wrap:wrap}.m-d-f{display:flex!important;flex-wrap:wrap}.m-flex,.m-flex-1{flex:1 1 auto}.m-flex-0{flex:0 0}.m-flex-2{flex:2 2 auto}.m-flex-3{flex:3 3 auto}.m-flex-4{flex:4 4 auto}.m-flex-5{flex:5 5 auto}.m-flex-6{flex:6 6 auto}.m-flex-7{flex:7 7 auto}.m-flex-8{flex:8 8 auto}.m-flex-9{flex:9 9 auto}.m-flex-10{flex:10 10 auto}}.fixed{position:fixed;top:0;width:100%;z-index:99}.small,small{font-size:var(--fs_small)!important}.large{font-size:var(--fs_large)!important}.h1,.h2,.h3,.h4,.h5,.h6,b,h1,h2,h3,h4,h5,h6,strong{font-weight:var(--fw_bold)}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:var(--ff_heading)}.h1,h1{font-size:var(--fs_h1)}.h2,h2{font-size:var(--fs_h2)}.h3,h3{font-size:var(--fs_h3)}.h4,h4{font-size:var(--fs_h4)}.h5,h5{font-size:var(--fs_h5)}.h6,h6{font-size:var(--fs_h6)}blockquote,dd,dl,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin-bottom:var(--spacer)}dl,ol,ul{padding-left:calc(1.5 * var(--spacer))}blockquote{border-left:2px solid var(--c_border);padding:var(--spacer)}mark{background-color:var(--c_highlight);color:inherit}.ff-mono,code,pre{font-family:var(--ff_mono)}code{background-color:var(--c_bg__alt);border-radius:var(--radius);word-break:break-word;padding:calc(.125 * var(--spacer)) var(--spacer_q)}pre code{display:block;padding:var(--spacer);word-break:normal;overflow:auto;white-space:pre-wrap}output{display:block;border:1px solid var(--c_border);border-radius:var(--radius);padding:var(--spacer) var(--spacer) 0 var(--spacer)}.ta-left{text-align:left}.ta-center{text-align:center}.ta-right{text-align:right}.link,a{color:var(--tc_link);box-shadow:0 0 0 transparent;transition:color var(--animation_ms),box-shadow var(--animation_ms);outline:0;border-radius:var(--radius);text-decoration:var(--link_decoration)}.link:hover,a:hover{color:var(--tc_link__hover)}.link:focus-visible,a:focus{box-shadow:var(--focus_shadow)}.no-link,.no-link:hover{text-decoration:none;color:inherit}hr{border:none;border-top:1px solid var(--c_border)}small{font-size:.75em}dl{padding:0;margin:0}dd,dt{padding-left:var(--spacer);border-left:2px solid var(--c_border)}dt{padding-top:var(--spacer_h)}dd{padding-bottom:var(--spacer_h)}dd+dd{margin-top:calc(-1 * var(--spacer));padding-top:0}li ul{margin-bottom:0}.td-n{text-decoration:none}.p,.pt,.py{padding-top:var(--spacer)!important}.p,.pr,.px{padding-right:var(--spacer)!important}.p,.pb,.py{padding-bottom:var(--spacer)!important}.p,.pl,.px{padding-left:var(--spacer)!important}.ph,.pth,.pyh{padding-top:var(--spacer_h)!important}.ph,.prh,.pxh{padding-right:var(--spacer_h)!important}.pbh,.ph,.pyh{padding-bottom:var(--spacer_h)!important}.ph,.plh,.pxh{padding-left:var(--spacer_h)!important}.pq,.ptq,.pyq{padding-top:var(--spacer_q)!important}.pq,.prq,.pxq{padding-right:var(--spacer_q)!important}.pbq,.pq,.pyq{padding-bottom:var(--spacer_q)!important}.plq,.pq,.pxq{padding-left:var(--spacer_q)!important}.p0,.pt0,.py0{padding-top:.1px!important}.p0,.pr0,.px0{padding-right:.1px!important}.p0,.pb0,.py0{padding-bottom:.1px!important}.p0,.pl0,.px0{padding-left:.1px!important}.m,.mt,.my{margin-top:var(--spacer)!important}.m,.mr,.mx{margin-right:var(--spacer)!important}.m,.mb,.my{margin-bottom:var(--spacer)!important}.m,.ml,.mx{margin-left:var(--spacer)!important}.mh,.mth,.myh{margin-top:var(--spacer_h)!important}.mh,.mrh,.mxh{margin-right:var(--spacer_h)!important}.mbh,.mh,.myh{margin-bottom:var(--spacer_h)!important}.mh,.mlh,.mxh{margin-left:var(--spacer_h)!important}.mq,.mtq,.myq{margin-top:var(--spacer_q)!important}.mq,.mrq,.mxq{margin-right:var(--spacer_q)!important}.mbq,.mq,.myq{margin-bottom:var(--spacer_q)!important}.mlq,.mq,.mxq{margin-left:var(--spacer_q)!important}.m0,.mt0,.my0{margin-top:0!important}.m0,.mr0,.mx0{margin-right:0!important}.m0,.mb0,.my0{margin-bottom:0!important}.m0,.ml0,.mx0{margin-left:0!important}.-m,.-mt,.-my{margin-top:calc(-1 * var(--spacer))!important}.-m,.-mr,.-mx{margin-right:calc(-1 * var(--spacer))!important}.-m,.-mb,.-my{margin-bottom:calc(-1 * var(--spacer))!important}.-m,.-ml,.-mx{margin-left:calc(-1 * var(--spacer))!important}.b,.bt,.by{border-top:1px solid var(--c_border)!important}.b,.br,.bx{border-right:1px solid var(--c_border)!important}.b,.bb,.by{border-bottom:1px solid var(--c_border)!important}.b,.bl,.bx{border-left:1px solid var(--c_border)!important}.b0,.bt0,.by0{border-top:none!important}.b0,.br0,.bx0{border-right:none!important}.b0,.bb0,.by0{border-bottom:none!important}.b0,.bl0,.bx0{border-left:none!important}.r,.rl,.rt,.rtl{border-top-left-radius:var(--radius)!important}.r,.rr,.rt,.rtr{border-top-right-radius:var(--radius)!important}.r,.rb,.rbr,.rr{border-bottom-right-radius:var(--radius)!important}.r,.rb,.rbl,.rl{border-bottom-left-radius:var(--radius)!important}.r0,.rl0,.rt0,.rtl0{border-top-left-radius:0!important}.r0,.rr0,.rt0,.rtr0{border-top-right-radius:0!important}.r0,.rb0,.rbr0,.rr0{border-bottom-right-radius:0!important}.r0,.rb0,.rbl0,.rl0{border-bottom-left-radius:0!important}.round{border-radius:9999rem!important}.row{display:flex;flex-wrap:wrap}.col{flex:1 1}.span-1{min-width:8.333%;flex-basis:8.333%}.span-2{min-width:16.666%;flex-basis:16.666%}.span-3{min-width:25%;flex-basis:25%}.span-4{min-width:33.333%;flex-basis:33.333%}.span-5{min-width:41.666%;flex-basis:41.666%}.span-6{min-width:50%;flex-basis:50%}.span-7{min-width:58.333%;flex-basis:58.333%}.span-8{min-width:66.666%;flex-basis:66.666%}.span-9{min-width:75%;flex-basis:75%}.span-10{min-width:83.333%;flex-basis:83.333%}.span-11{min-width:91.333%;flex-basis:91.333%}.span-12{min-width:100%;flex-basis:100%}@media (min-width:1024px){.d-span-1{min-width:8.333%;flex-basis:8.333%}.d-span-2{min-width:16.666%;flex-basis:16.666%}.d-span-3{min-width:25%;flex-basis:25%}.d-span-4{min-width:33.333%;flex-basis:33.333%}.d-span-5{min-width:41.666%;flex-basis:41.666%}.d-span-6{min-width:50%;flex-basis:50%}.d-span-7{min-width:58.333%;flex-basis:58.333%}.d-span-8{min-width:66.666%;flex-basis:66.666%}.d-span-9{min-width:75%;flex-basis:75%}.d-span-10{min-width:83.333%;flex-basis:83.333%}.d-span-11{min-width:91.333%;flex-basis:91.333%}.d-span-12{min-width:100%;flex-basis:100%}}@media (min-width:769px) and (max-width:1023px){.t-span-1{min-width:8.333%;flex-basis:8.333%}.t-span-2{min-width:16.666%;flex-basis:16.666%}.t-span-3{min-width:25%;flex-basis:25%}.t-span-4{min-width:33.333%;flex-basis:33.333%}.t-span-5{min-width:41.666%;flex-basis:41.666%}.t-span-6{min-width:50%;flex-basis:50%}.t-span-7{min-width:58.333%;flex-basis:58.333%}.t-span-8{min-width:66.666%;flex-basis:66.666%}.t-span-9{min-width:75%;flex-basis:75%}.t-span-10{min-width:83.333%;flex-basis:83.333%}.t-span-11{min-width:91.333%;flex-basis:91.333%}.t-span-12{min-width:100%;flex-basis:100%}}@media (max-width:768px){.m-span-1{min-width:8.333%;flex-basis:8.333%}.m-span-2{min-width:16.666%;flex-basis:16.666%}.m-span-3{min-width:25%;flex-basis:25%}.m-span-4{min-width:33.333%;flex-basis:33.333%}.m-span-5{min-width:41.666%;flex-basis:41.666%}.m-span-6{min-width:50%;flex-basis:50%}.m-span-7{min-width:58.333%;flex-basis:58.333%}.m-span-8{min-width:66.666%;flex-basis:66.666%}.m-span-9{min-width:75%;flex-basis:75%}.m-span-10{min-width:83.333%;flex-basis:83.333%}.m-span-11{min-width:91.333%;flex-basis:91.333%}.m-span-12{min-width:100%;flex-basis:100%}}.cols-2{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}.cols-5{grid-template-columns:repeat(5,1fr)}.cols-6{grid-template-columns:repeat(6,1fr)}.cols-7{grid-template-columns:repeat(7,1fr)}.cols-8{grid-template-columns:repeat(8,1fr)}.cols-9{grid-template-columns:repeat(9,1fr)}.cols-10{grid-template-columns:repeat(10,1fr)}@media (min-width:1024px){.d-cols-2{grid-template-columns:repeat(2,1fr)}.d-cols-3{grid-template-columns:repeat(3,1fr)}.d-cols-4{grid-template-columns:repeat(4,1fr)}.d-cols-5{grid-template-columns:repeat(5,1fr)}.d-cols-6{grid-template-columns:repeat(6,1fr)}.d-cols-7{grid-template-columns:repeat(7,1fr)}.d-cols-8{grid-template-columns:repeat(8,1fr)}.d-cols-9{grid-template-columns:repeat(9,1fr)}.d-cols-10{grid-template-columns:repeat(10,1fr)}}@media (min-width:769px) and (max-width:1023px){.t-cols-2{grid-template-columns:repeat(2,1fr)}.t-cols-3{grid-template-columns:repeat(3,1fr)}.t-cols-4{grid-template-columns:repeat(4,1fr)}.t-cols-5{grid-template-columns:repeat(5,1fr)}.t-cols-6{grid-template-columns:repeat(6,1fr)}.t-cols-7{grid-template-columns:repeat(7,1fr)}.t-cols-8{grid-template-columns:repeat(8,1fr)}.t-cols-9{grid-template-columns:repeat(9,1fr)}.t-cols-10{grid-template-columns:repeat(10,1fr)}}@media (max-width:768px){.m-cols-2{grid-template-columns:repeat(2,1fr)}.m-cols-3{grid-template-columns:repeat(3,1fr)}.m-cols-4{grid-template-columns:repeat(4,1fr)}.m-cols-5{grid-template-columns:repeat(5,1fr)}.m-cols-6{grid-template-columns:repeat(6,1fr)}.m-cols-7{grid-template-columns:repeat(7,1fr)}.m-cols-8{grid-template-columns:repeat(8,1fr)}.m-cols-9{grid-template-columns:repeat(9,1fr)}.m-cols-10{grid-template-columns:repeat(10,1fr)}}.btn,button:not(.no-btn):not(.no-style),input[type=button],input[type=reset],input[type=submit]{display:inline-block;padding:var(--btn_padding);background-color:var(--btn_bg);border:1px solid var(--btn_border);cursor:pointer;outline:0;border-radius:var(--radius);color:var(--btn_tc);transition:background-color var(--animation_ms),box-shadow var(--animation_ms);text-decoration:none;box-shadow:var(--btn_box_shadow);font-size:inherit;vertical-align:middle}.btn:hover,button:not(.no-btn):not(.no-style):hover,input[type=button]:hover,input[type=reset]:hover,input[type=submit]:hover{background-color:var(--btn_bg__hover);color:var(--btn_tc);box-shadow:var(--btn_box_shadow__hover)}.btn:focus,button:not(.no-btn):not(.no-style):focus,input[type=button]:focus,input[type=reset]:focus,input[type=submit]:focus{box-shadow:var(--btn_box_shadow__hover),var(--focus_shadow);z-index:1}.btn[disabled],button:not(.no-btn):not(.no-style):disabled,input[type=button]:disabled,input[type=reset]:disabled,input[type=submit]:disabled{opacity:.6}.btn.primary,button:not(.no-btn).primary,input[type=button].primary,input[type=reset].primary,input[type=submit].primary{background-color:var(--c_primary);--btn_tc:var(--tc_on_primary)}.btn.primary:hover,button:not(.no-btn).primary:hover,input[type=button].primary:hover,input[type=reset].primary:hover,input[type=submit].primary:hover{background-color:var(--c_primary__hover)}.btn.secondary,button:not(.no-btn).secondary,input[type=button].secondary,input[type=reset].secondary,input[type=submit].secondary{background-color:var(--c_secondary);--btn_tc:var(--tc_on_secondary)}.btn.secondary:hover,button:not(.no-btn).secondary:hover,input[type=button].secondary:hover,input[type=reset].secondary:hover,input[type=submit].secondary:hover{background-color:var(--c_secondary__hover)}.btn.success,button:not(.no-btn).success,input[type=button].success,input[type=reset].success,input[type=submit].success{background-color:var(--c_success);--btn_tc:var(--tc_on_success)}.btn.success:hover,button:not(.no-btn).success:hover,input[type=button].success:hover,input[type=reset].success:hover,input[type=submit].success:hover{background-color:var(--c_success__hover)}.btn.warning,button:not(.no-btn).warning,input[type=button].warning,input[type=reset].warning,input[type=submit].warning{background-color:var(--c_warning);--btn_tc:var(--tc_on_warning)}.btn.warning:hover,button:not(.no-btn).warning:hover,input[type=button].warning:hover,input[type=reset].warning:hover,input[type=submit].warning:hover{background-color:var(--c_warning__hover)}.btn.danger,button:not(.no-btn).danger,input[type=button].danger,input[type=reset].danger,input[type=submit].danger{background-color:var(--c_danger);--btn_tc:var(--tc_on_danger)}.btn.danger:hover,button:not(.no-btn).danger:hover,input[type=button].danger:hover,input[type=reset].danger:hover,input[type=submit].danger:hover{background-color:var(--c_danger__hover)}.btn.link,button:not(.no-btn):not(.no-style).link,input[type=button].link,input[type=reset].link,input[type=submit].link{background-color:transparent;color:inherit;box-shadow:0 0 0 transparent;border:none;padding:.1px;font-size:inherit}.btn-grp{display:inline-flex}.btn-grp .btn:not(:first-child),.btn-grp button:not(.no-btn):not(:first-child),.btn-grp input[type=button]:not(:first-child),.btn-grp input[type=reset]:not(:first-child),.btn-grp input[type=submit]:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0;border-left:1px solid rgba(0,0,0,.25)}.btn-grp .btn:not(:last-child),.btn-grp button:not(.no-btn):not(:last-child),.btn-grp input[type=button]:not(:last-child),.btn-grp input[type=reset]:not(:last-child),.btn-grp input[type=submit]:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.no-btn{display:inline;border:none;background-color:transparent;padding:0;font-size:inherit;font-family:inherit;cursor:pointer;outline:0;box-shadow:0 0 0 transparent;transition:box-shadow var(--animation_ms);border-radius:0;text-align:left;color:inherit}.no-btn:focus{box-shadow:var(--focus_shadow)}.full{display:block;width:100%}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]),select,textarea{display:block;width:100%;background-color:var(--input_bg);color:var(--input_tc);border:var(--input_border_width) solid var(--c_input_border);padding:var(--input_padding);border-radius:var(--radius);outline:0;transition:box-shadow var(--animation_ms)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):focus,input[type=checkbox]:focus,input[type=radio]:focus,select:focus,textarea:focus{box-shadow:var(--focus_shadow)}input:not([type=button]):not([type=submit]):not([type=reset]):not([type=radio]):not([type=checkbox]):disabled,input[type=checkbox]:disabled,input[type=radio]:disabled,select:disabled,textarea:disabled{opacity:.6}select[multiple],textarea{resize:vertical;max-height:75vh;height:6rem;min-height:4rem}select[multiple]{height:8rem}select{cursor:pointer}label{display:block;cursor:pointer;padding-bottom:var(--spacer_h)}label.checkbox,label.radio{display:inline-block;vertical-align:top;width:calc(100% - 1em - (2 * var(--spacer_h)) - 6px);margin-top:2px}input[type=checkbox],input[type=radio]{display:inline-block;width:1em;height:1em;cursor:pointer;vertical-align:top;outline:0;accent-color:var(--c_input_accent);margin:var(--spacer_q) var(--spacer_h)}select option{padding:var(--spacer_h) var(--spacer);background-color:var(--input_bg);color:var(--input_tc)}select[multiple]{padding:.1px}select[multiple] option{padding:var(--spacer_h) var(--spacer)}input[type=color]{padding:0!important;height:2.35em}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border-radius:var(--radius,.25rem);cursor:pointer}input[type=date]::-webkit-calendar-picker-indicator,input[type=month]::-webkit-calendar-picker-indicator,input[type=search]::-webkit-search-cancel-button,input[type=time]::-webkit-calendar-picker-indicator,input[type=week]::-webkit-calendar-picker-indicator{filter:var(--date_picker_icon_filter)}.table-wrapper{overflow-x:auto}table{width:100%;border-spacing:0}th{font-weight:var(--fw_bold);text-align:left;background-color:var(--c_bg__alt);border-top:1px solid var(--c_border)}td,th{padding:var(--spacer_h) var(--spacer);border-bottom:1px solid var(--c_border);border-left:1px solid var(--c_border)}td:last-child,th:last-child{border-right:1px solid var(--c_border)}th:first-child{border-top-left-radius:var(--radius)}th:last-child{border-top-right-radius:var(--radius)}tr:last-child td:first-child{border-bottom-left-radius:var(--radius)}tr:last-child td:last-child{border-bottom-right-radius:var(--radius)}.bg-default{background-color:var(--c_bg);color:var(--tc)}.bg-alt{background-color:var(--c_bg__alt);color:var(--tc)}.bg-inv{--c_primary:var(--c_primary__inv);--c_primary__hover:var(--c_primary__inv__hover);--c_secondary:var(--c_secondary__inv);--c_secondary__hover:var(--c_secondary__inv__hover);--c_success:var(--c_success__inv);--c_success__hover:var(--c_success__inv__hover);--c_warning:var(--c_warning__inv);--c_warning__hover:var(--c_warning__inv__hover);--c_danger:var(--c_danger__inv);--c_danger__hover:var(--c_danger__inv__hover);--tc_link:var(--tc_link__inv);--tc_link__hover:var(--tc_link__inv__hover);background-color:var(--c_bg__inv);color:var(--tc_inv)}.bg-primary{--tc_link:var(--tc_on_primary);--tc_link__hover:var(--tc_on_primary);--c_border:var(--tc_on_primary);background-color:var(--c_primary);color:var(--tc_on_primary);--focus_shadow:var(--focus_shadow_on_primary)}.bg-secondary{--tc_link:var(--tc_on_secondary);--tc_link__hover:var(--tc_on_secondary);background-color:var(--c_secondary);color:var(--tc_on_secondary)}.bg-success{--tc_link:var(--tc_on_success);--tc_link__hover:var(--tc_on_success);background-color:var(--c_success);color:var(--tc_on_success)}.bg-warning{--tc_link:var(--tc_on_warning);--tc_link__hover:var(--tc_on_warning);background-color:var(--c_warning);color:var(--tc_on_warning)}.bg-danger{--tc_link:var(--tc_on_danger);--tc_link__hover:var(--tc_on_danger);background-color:var(--c_danger);color:var(--tc_on_danger)}.tc-default{color:var(--tc)}.tc-inv{color:var(--tc__inv)}.tc-primary{color:var(--tc_primary)}.bg-inv .tc-primary,.is-inv .tc-primary{color:var(--tc_primary__inv)}.tc-secondary{color:var(--tc_secondary)}.bg-inv .tc-secondary,.is-inv .tc-secondary{color:var(--tc_secondary__inv)}.tc-success{color:var(--tc_success)}.bg-inv .tc-success,.is-inv .tc-success{color:var(--tc_success__inv)}.tc-warning{color:var(--tc_warning)}.bg-inv .tc-warning,.is-inv .tc-warning{color:var(--tc_warning__inv)}.tc-danger{color:var(--tc_danger)}.bg-inv .tc-danger,.is-inv .tc-danger{color:var(--tc_danger__inv)}.tc-muted{color:var(--tc_muted)}.card{border:1px solid var(--c_border);border-radius:var(--radius);padding-top:var(--spacer);padding-left:var(--spacer);padding-right:var(--spacer);margin-bottom:var(--spacer)}.drop-shadow{box-shadow:var(--drop_shadow)}.icon{display:inline-block;width:1.35em;vertical-align:top;margin-left:auto;margin-right:auto}iframe{border:none;width:100%}
|