@ou-imdt/css
Version:
The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.
2 lines (1 loc) • 40.8 kB
CSS
*,*:before,*:after{box-sizing:border-box}fieldset,legend{padding:0}body,h1,h2,h3,h4,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0}body{min-height:initial;scroll-behavior:smooth;line-height:1.5}a:not([class]){-webkit-text-decoration-skip:ink;text-decoration-skip-ink:auto}img:not([width]):not([height]){max-width:100%;display:block}img[width],img[height]{max-width:100%;height:auto;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms;scroll-behavior:auto}}:root,:host{--core1: #24285C;--core2: #3A3381;--base-theme: light;--fg1: #000000;--bg1: #ffffff;--accent: var(--core2);--accent-light: #A7A9BE;--border: 2px solid var(--accent);--radius: 5px;--spacing: .5rem;--transition: all .25s;--interactive-cursor: pointer;--outline: 1px solid var(--accent);--disabled-bg: #666666;--font: Arial, sans-serif;--font-alt: courier, monospace;--line-height: 1.5;--letter-spacing: initial;--font-size: 1rem;--wcag-min-target: 24px;color-scheme:var(--base-theme, light);accent-color:var(--accent);font-family:var(--font);font-variant-numeric:tabular-nums;font-size:var(--font-size, 1rem);line-height:var(--line-height);background-color:var(--bg1);color:var(--fg1)}:root,:host{--btn-weight: normal;--btn-transition: background .25s, color .25s;--btn-spacing: .2em;--btn-inline-padding: .7em 0em;--btn-padding: .2rem .7rem;--btn-bg: #ffffff;--btn-fg: var(--core1, var(--accent));--btn-decoration: none;--btn-radius: 3px;--btn-border: 2px solid var(--core2, var(--accent));--btn-outline: 2px var(--accent) solid;--btn-outline-offset: 1px;--btn-hover-bg: var(--core1);--btn-hover-fg: var(--bg1);--btn-hover-decoration: underline;--btn-hover-decoration-thickness: 1px;--btn-hover-underline-offset: 2px;--btn-focus-bg: var(--bg1);--btn-focus-fg: var(--fg1);--btn-focus-decoration: underline;--btn-focus-decoration-thickness: 1px;--btn-focus-underline-offset: 2px;--btn-focus-border: 2px solid var(--core2, var(--accent));--btn-focus-visible-bg: var(--bg1);--btn-focus-visible-fg: var(--core1);--btn-focus-visible-decoration: underline;--btn-focus-visible-decoration-thickness: 1px;--btn-focus-visible-underline-offset: 2px;--btn-focus-visible-border: 2px solid #000000;--btn-active-fg: var(--accent);--btn-active-bg: #D8D6E6;--btn-active-decoration: underline;--btn-active-decoration-thickness: 1px;--btn-active-underline-offset: 2px;--btn-active-boxshadow: inset 0 3px 0px -1px #666, inset 0 4px 4px -1px #666;--btn-disabled-border: 2px solid #d4d2d2;--btn-disabled-bg: #B3B3B3;--btn-disabled-fg: var(--bg1, #ffffff);--btn-disabled-opacity: 1}button,input[type=button],input[type=submit],input[type=reset],a.button[role=button],.button[role=button][tabindex]{display:inline-block;border:var(--btn-border);border-radius:var(--btn-radius, --radius);background:var(--btn-bg);color:var(--btn-fg);margin:var(--btn-spacing) 0;padding:var(--btn-padding);min-height:var(--wcag-min-target);min-width:var(--wcag-min-target);transition:var(--btn-transition);outline-offset:var(--btn-outline-offset);-webkit-text-decoration:var(--btn-decoration);text-decoration:var(--btn-decoration);font-weight:var(--btn-weight)}:is(button,input[type=button],input[type=submit],input[type=reset],a.button[role=button],.button[role=button][tabindex])>svg *{fill:currentColor}button:hover:not(:disabled),button.hover:not(:disabled),input[type=button]:hover:not(:disabled),input[type=submit]:hover:not(:disabled),input[type=reset]:hover:not(:disabled),a.button[role=button]:hover:not(:disabled),.button[role=button][tabindex]:hover:not(:disabled){background:var(--btn-hover-bg, var(--btn-fg));color:var(--btn-hover-fg, var(--btn-bg));cursor:var(--interactive-cursor);-webkit-text-decoration:var(--btn-hover-decoration);text-decoration:var(--btn-hover-decoration);text-decoration-thickness:var(--btn-hover-decoration-thickness);text-underline-offset:var(--btn-hover-underline-offset)}button:focus,input[type=submit]:focus,input[type=reset]:focus,input[type=button]:focus,a.button[role=button]:focus,.button[role=button][tabindex]:focus{outline:var(--btn-outline);background:var(--btn-focus-bg, var(--btn-fg));color:var(--btn-focus-fg, var(--btn-bg));border:var(--btn-focus-border);-webkit-text-decoration:var(--btn-focus-decoration);text-decoration:var(--btn-focus-decoration);text-decoration-thickness:var(--btn-focus-decoration-thickness);text-underline-offset:var(--btn-focus-underline-offset)}button:focus-visible,input[type=submit]:focus-visible,input[type=reset]:focus-visible,input[type=button]:focus-visible,a.button[role=button]:focus-visible,.button[role=button][tabindex]:focus-visible{outline:var(--btn-outline);background:var(--btn-focus-visible-bg, var(--btn-fg));color:var(--btn-focus-visible-fg, var(--btn-bg));border:var(--btn-focus-visible-border);-webkit-text-decoration:var(--btn-focus-visible-decoration);text-decoration:var(--btn-focus-visible-decoration);text-decoration-thickness:var(--btn-focus-visible-decoration-thickness);text-underline-offset:var(--btn-focus-visible-underline-offset)}button:active:not(:disabled),button.active:not(:disabled),input[type=submit]:active:not(:disabled),input[type=reset]:active:not(:disabled),input[type=button]:active:not(:disabled),a.button[role=button]:active:not(:disabled),.button[role=button][tabindex]:active:not(:disabled),button[aria-pressed=true]:not(:disabled),input[type=button][aria-pressed=true]:not(:disabled),.button[role=button][aria-pressed=true][tabindex]:not(:disabled){background:var(--btn-active-bg, var(--btn-fg));color:var(--btn-active-fg, var(--btn-bg));box-shadow:var(--btn-active-boxshadow)}:is(span,p,h1,h2,h3,h4,h5,h6,blockquote) button,:is(span,p,h1,h2,h3,h4,h5,h6,blockquote) input[type=button],:is(span,p,h1,h2,h3,h4,h5,h6,blockquote) a.button{padding:0 var(--btn-inline-padding);margin:0}button:disabled,input[type=button]:disabled{opacity:var(--btn-disabled-opacity);background:var(--btn-disabled-bg, var(--btn-bg));color:var(--btn-disabled-fg, var(--btn-fg));border:var(--btn-disabled-border)}:root,:host{--input-weight: normal;--input-max-width: 100%;--input-display: inline-block;--input-padding: .1rem .3rem;--input-border: 2px solid #7570A7;--input-required-icon: "*";--input-disabled-opacity: 1;--input-disabled-bg: #E6E6E6;--input-disabled-fg: #999999;--input-disabled-border: 2px solid #999999;--input-radius: 3px;--input-outline: 2px;--input-focus-shadow: none;--input-focus-border: 2px solid var(--accent);--input-focus-visible-shadow: none;--input-focus-visible-border: 2px solid #000000;--input-text-cursor: text;--textarea-border: var(--input-border);--textarea-padding: var(--input-padding);--textarea-width: 100%;--select-padding: .3rem .2rem}input{font-weight:var(--input-weight);position:relative;cursor:var(--interactive-cursor);display:var(--input-display);background-color:var(--bg1);color:var(--fg1);border:var(--input-border);border-radius:var(--input-radius);min-height:var(--wcag-min-target);min-width:var(--wcag-min-target);padding:var(--input-padding);outline:var(--input-outline);max-width:var(--input-max-width)}input:is([type=text],[type=url],[type=password],[type=number],[type=email],[type=date],[type=datetime-local],[type=search],[type=tel],[type=time]){cursor:var(--input-text-cursor)}input:not([type=image]):not([type=checkbox]):not([type=radio]):not([type=button]):not([type=image]):not([type=submit])::not([type="reset"]):not([type=color]){height:2rem}input[type=color]{padding:0}input:focus:not([type=radio]):not([type=checkbox]){border:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}input:not([type=radio]):not([type=checkbox]):focus-visible{border:var(--input-focus-visible-border);box-shadow:var(--input-focus-visible-shadow)}input:disabled,input[aria-disabled=true]{opacity:var(--input-disabled-opacity);background:var(--input-disabled-bg);color:var(--input-disabled-fg);border:var(--input-disabled-border);pointer-events:none}textarea{cursor:var(--input-text-cursor);display:block;background:var(--bg1);color:var(--fg1);border:var(--textarea-border);border-radius:var(--input-radius);min-height:var(--wcag-min-target);min-width:var(--wcag-min-target);padding:var(--textarea-padding);width:var(--textarea-width)}textarea:focus{border:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}textarea:not([type=radio]):focus-visible{border:var(--input-focus-visible-border);box-shadow:var(--input-focus-visible-shadow)}textarea:disabled,textarea[aria-disabled=true]{opacity:var(--input-disabled-opacity);background:var(--input-disabled-bg);color:var(--input-disabled-fg);pointer-events:none}select{font-weight:var(--input-weight);position:relative;cursor:var(--interactive-cursor);display:block;background-color:var(--bg1);color:var(--fg1);border:var(--input-border);border-radius:var(--input-radius);min-height:var(--a11y-target);min-width:var(--a11y-target);padding:var(--select-padding)}select:not([type=radio]):focus-visible{border:var(--input-focus-visible-border);box-shadow:var(--input-focus-visible-shadow)}select:focus{border:var(--input-focus-border);box-shadow:var(--input-focus-shadow)}select:disabled,select[aria-disabled=true]{opacity:var(--input-disabled-opacity, .7);background:var(--input-disabled-bg);color:var(--input-disabled-fg);pointer-events:none}:root,:host{--ternary-accent: var(--accent);--ternary-width: 1em;--ternary-aspect: 1/1;--ternary-vertical-align: middle;--ternary-outline: none;--ternary-focus-shadow: 0px 0px 0px 1px var(--bg1), 0px 0px 0px 3px var(--core1);--ternary-focus-visible-shadow: 0px 0px 0px 1px var(--bg1), 0px 0px 0px 3px var(--core1);--ternary-outline: 0;--ternary-focus-border: 2px solid var(--accent);--ternary-focus-visible-border: 2px solid #000000;--checkbox-radius: 2px;--ternary-disabled-opacity: 1;--ternary-disabled-bg: #E6E6E6;--ternary-disabled-fg: #999999}input[type=radio],input[type=checkbox]{width:var(--ternary-width, 1em);aspect-ratio:var(--ternary-aspect, 1/1);accent-color:var(--ternary-accent, initial);vertical-align:var(--ternary-vertical-align, middle);outline:var(--ternary-outline, none);border-radius:var(--checkbox-radius);border:none;margin-block:0;min-height:initial;min-width:initial}input[type=radio]:focus:after,input[type=checkbox]:focus:after{content:"";display:block;width:100%;height:100%;border:var(--ternary-focus-border, none);box-shadow:var(--ternary-focus-shadow);border-radius:var(--checkbox-radius)}input[type=radio]:focus-visible:after,input[type=checkbox]:focus-visible:after{content:"";display:block;width:100%;height:100%;border:var(--ternary-focus-visible-border, none);box-shadow:var(--ternary-focus-visible-shadow);border-radius:var(--checkbox-radius)}input[type=radio]:focus:after,input[type=radio]:focus-within:after{border-radius:100%}input[type=checkbox]:disabled,input[type=radio]:disabled,input[type=checkbox][aria-disabled=true],input[type=radio][aria-disabled=true]{opacity:var(--ternary-disabled-opacity);background:var(--ternary-disabled-bg);color:var(--ternary-disabled-fg)}:root,:host{--label-weight: bold;--label-fieldset-weight: normal;--label-margin: .5rem 0 .5rem 0;--label-max-width: 100%;--label-display: block;--label-implicit-display: inline-flex}label{font-size:var(--font-size);font-weight:var(--label-weight);display:var(--label-display);align-items:center;flex-flow:row;flex-wrap:wrap;gap:var(--spacing, .5rem);margin:var(--label-margin);max-width:var(--label-max-width)}label:not(:last-of-type){margin-inline-end:1rem}label:not([for]){display:var(--label-implicit-display)}label:has(>input[type=checkbox],>input[type=radio]){display:inline-flex}fieldset label{font-weight:var(--label-fieldset-weight)}:root,:host{--fieldset-padding: .5rem 0 1rem;--fieldset-border: 0;--fieldset-legend-weight: bold}fieldset{padding:var(--fieldset-padding);border:var(--fieldset-border)}legend{font-weight:var(--fieldset-legend-weight)}:root,:host{--p-margin: .5rem 0 .5rem 0;--p-padding: 0;--p-indent: 0;--p-weight: normal;--p-align: left;--small-font-size: .85rem;--u-color: var(--fg1);--u-style: underline;--u-core-style: wavy underline}p{font-size:var(--font-size);line-height:var(--line-height);margin:var(--p-margin);padding:var(--p-padding);letter-spacing:var(--letter-spacing);text-indent:var(--p-indent);font-weight:var(--p-weight, normal);text-align:var(--p-align, left)}p:empty{display:none}u{-webkit-text-decoration:var(--u-color) var(--u-core-style);text-decoration:var(--u-color) var(--u-core-style)}small{font-size:var(--small-font-size)}:root,:host{--list-margin: 1rem 1rem 1rem 2rem;--list-padding: 0;--list-padding-sub: 0 0 0 2rem;--ul-li-list-style: initial;--ol-li-list-style: initial;--dl-after: ": ";--dl-margin: .5rem 0;--dt-weight: bold;--dd-padding: 0 1rem;--list-custom-icon-color: #F4846A;--list-custom-icon-weight: bold}ol,ul{padding:var(--list-padding);margin:var(--list-margin)}li>:is(ol,ul){padding:var(--list-padding-sub);margin:0}ul li{list-style:var(--ul-li-list-style)}ol li{list-style:var(--ol-li-list-style)}:is(ol,ul).unstyled,:is([role=list]){list-style-type:none;margin-left:0;margin-right:0}ul.custom{--icon: var(--list-custom-icon);--icon-font: var(--icon-font, var(--font), Arial);--icon-color: var(--list-custom-icon-color);--icon-weight: var(--list-custom-icon-weight);--icon-nested: var(--icon-nested);list-style-type:none}ul.custom li{position:relative}ul.custom li:before{font-family:var(--icon-font);position:absolute;display:grid;transform:translate(-100%);color:var(--icon-color);content:var(--icon, "● ");font-weight:var(--icon-weight, bold);aspect-ratio:1;width:1.5em;place-items:center}ul.custom ul{list-style-type:none;--icon: var(--icon-nested, "○ ")}dt:after{content:var(--dl-after) / " "}dl{margin:var(--dl-margin)}dt{font-weight:var(--dt-weight)}dd{padding:var(--dd-padding)}:root,:host{--h-margin: .5rem 0;--h-weight: bold;--h-color: var(--core1);--h-size: var(--font-size);--h1-size: 1.8rem;--h2-size: 1.6rem;--h3-size: 1.4rem;--h4-size: 1.2rem;--h5-size: 1.1rem;--h6-size: 1rem;--h-link-decoration: none;--h-link-color: var(--h-color);--h-link-hover-color: #191C40;--h-link-active-color: var(--core1)}h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{margin:var(--h-margin);line-height:var(--line-height);font-weight:var(--h-weight)}h1,.h1{font-size:var(--h1-size);color:var(--h1-color, var(--h-color))}h2,.h2{font-size:var(--h2-size);color:var(--h2-color, var(--h-color))}h3,.h3{font-size:var(--h3-size);color:var(--h3-color, var(--h-color))}h4,.h4{font-size:var(--h4-size);color:var(--h4-color, var(--h-color))}h5,.h5{font-size:var(--h5-size);color:var(--h5-color, var(--h-color))}h6,.h6{font-size:var(--h6-size);color:var(--h6-color, var(--h-color))}:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) a{-webkit-text-decoration:var(--h-link-decoration, none);text-decoration:var(--h-link-decoration, none);color:var(--h-link-color, var(--h-color))}:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) a:hover{color:var(--h-link-hover-color)}:is(h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6) a:active{color:var(--h-link-active-color)}:root,:host{--mark-bg: #ffff00;--mark-fg: var(--fg1);--s-start: attr(data-start);--s-end: attr(data-end);--i-start: attr(data-start);--i-end: attr(data-end)}:where(mark,s,del,ins,i)[data-start]:before,:where(mark,s,del,ins,i)[data-end]:after{clip-path:inset(100%);clip:rect(1px,1px,1px,1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}mark{--mark-start: attr(data-start);--mark-end: attr(data-end);color:var(--mark-fg);background-color:var(--mark-bg)}mark:before{content:var(--mark-start)}mark:after{content:var(--mark-end)}s:before{content:var(--s-start)}s:after{content:var(--s-end)}del:before{content:var(--del-start)}del:after{content:var(--del-end)}ins:before{content:var(--ins-start)}ins:after{content:var(--ins-end)}i:before{content:var(--i-start)}i:after{content:var(--i-end)}:root,:host{--abbr-border: none;--abbr-border-bottom: 1px dotted;--abbr-decoration: none;--abbr-transform: none}abbr{-webkit-text-decoration:var(--abbr-decoration);text-decoration:var(--abbr-decoration);border:var(--abbr-border);border-bottom:var(--abbr-border-bottom);text-transform:var(--abbr-transform)}:root,:host{--a-bg: transparent;--a-color: #1F55A5;--a-decoration: underline;--a-cursor: pointer;--a-visited-color: var(--core1);--a-visited-decoration: underline;--a-focus-color: var(--core1);--a-focus-decoration: underline;--a-hover-color: var(--core1);--a-hover-decoration: underline;--a-active-color: #163B73;--a-active-decoration: underline;--a-focus-visible-color: var(--core1);--a-focus-visible-decoration: underline;--a-focus-visible-outline: 2px solid var(--core1);--a-focus-visible-shadow: 0 0 0 2px #000000;--a-focus-visible-bg: #FDF289}a{color:var(--a-color);-webkit-text-decoration:var(--a-decoration);text-decoration:var(--a-decoration);cursor:var(--a-cursor)}a:visited{color:var(--a-visited-color, var(--a-color));-webkit-text-decoration:var(--a-visited-decoration, var(--a-decoration));text-decoration:var(--a-visited-decoration, var(--a-decoration))}a:focus{color:var(--a-focus-color, var(--a-color));-webkit-text-decoration:var(--a-focus-decoration, var(--a-decoration));text-decoration:var(--a-focus-decoration, var(--a-decoration));outline:var(--a-focus-outline)}a:focus-visible{background:var(--a-focus-visible-bg);color:var(--a-focus-visible-color, var(--a-color));-webkit-text-decoration:var(--a-focus-visible-decoration, var(--a-decoration));text-decoration:var(--a-focus-visible-decoration, var(--a-decoration));outline:var(--a-focus-visible-outline);box-shadow:var(--a-focus-visible-shadow)}a:hover{color:var(--a-hover-color, var(--a-color));-webkit-text-decoration:var(--a-hover-decoration, var(--a-decoration));text-decoration:var(--a-hover-decoration, var(--a-decoration))}a:active{color:var(--a-active-color, var(--a-color));-webkit-text-decoration:var(--a-active-decoration, var(--a-decoration));text-decoration:var(--a-active-decoration, var(--a-decoration))}:root,:host{--figcaption-margin: .5rem 0;--caption-side: top;--caption-margin: .5rem 0}figcaption{background:var(--figcaption-bg);color:var(--figcaption-fg);padding:var(--figcaption-padding);margin:var(--figcaption-margin)}caption{caption-side:var(--caption-side);margin:var(--caption-margin)}:root,:host{--table-width: 100%;--table-border: none;--table-radius: none;--table-border-bottom: 2px solid #333333;--table-cell-padding: .2rem .7rem;--table-transition: background .25s ease, color .25s ease;--table-margin: 0 0 1rem 0;--table-white-space: normal;--table-thead-bg: #333333;--table-thead-text-align: left;--table-thead-fg: white;--table-thead-weight: bold;--table-thead-border-top: initial;--table-thead-border-bottom: var(--table-border);--table-thead-position: relative;--table-tfoot-bg: none;--table-tfoot-fg: inherit;--table-tfoot-weight: inherit;--table-tfoot-border-bottom: initial;--table-tfoot-border-top: initial;--table-tfoot-position: initial;--table-tr-bg: inherit;--table-tr-fg: inherit;--table-tr-odd-bg: inherit;--table-tr-odd-fg: inherit;--table-tr-even-bg: inherit;--table-tr-even-fg: inherit;--table-tr-hover-bg: inherit;--table-tr-hover-fg: inherit}table,th,td{box-sizing:content-box}table{--table-display: table;width:var(--table-width);margin:var(--table-margin);border-spacing:0;white-space:var(--table-white-space);border:0;overflow:auto;position:relative;display:var(--table-display);border-radius:var(--table-radius)}table thead th:last-of-type{border-radius:var(--table-th-last-radius)}table thead tr:first-of-type{border-radius:var(--table-radius)}table tbody tr:last-of-type td{border-bottom:var(--table-border-bottom)}th,td{border:var(--table-border);border-top-width:0;border-right-width:0;padding:var(--table-cell-padding)}thead th{top:0;position:var(--table-thead-position, sticky)}th{background:var(--table-thead-bg);color:var(--table-thead-fg);border-top:var(--table-thead-border-top);border-bottom:var(--table-thead-border-bottom);font-weight:var(--table-thead-weight);text-align:var(--table-thead-text-align)}tfoot td{background:var(--table-tfoot-bg);color:var(--table-tfoot-fg);bottom:0;position:var(--table-tfoot-position);border-top:var(--table-tfoot-border-top, --table-border);border-bottom:var(--table-tfoot-border-bottom, --table-border);font-weight:var(--table-tfoot-weight, --table-thead-weight)}td{background:var(--table-tr-bg);color:var(--table-tr-fg);transition:var(--table-transition)}tr :where(th,td):last-child{border-right:var(--table-border)}tbody tr:hover td{background:var(--table-tr-hover-bg);color:var(--table-tr-hover-fg)}table.static-headings{--table-display: block;--table-thead-position: sticky}:root,:host{--pre-font: var(--font-alt);--pre-whitespace: pre;--pre-border: 1px solid lightgray;--pre-width: 100%;--pre-margin: 0}pre,.pre{font-family:var(--pre-font);text-align:left;white-space:var(--pre-whitespace);border:var(--pre-border);overflow:auto;width:var(--pre-width);background:var(--pre-bg, --bg1);color:var(--pre-fg, --fg1);margin:var(--pre-margin)}:root,:host{--code-font: var(--font-alt);--code-bg: var(--fg1);--code-fg: var(--bg1);--code-radius: var(--radius);--code-font: courier, monospace;--code-padding: 0 .3em}code{background:var(--code-bg);color:var(--code-fg);border-radius:var(--code-radius);font-family:var(--code-font);padding:var(--code-padding)}pre>code{background:inherit;color:inherit}:root,:host{--dialog-padding: var(--spacing);--dialog-radius: var(--radius);--dialog-bg: var(--bg1);--dialog-fg: var(--fg1);--dialog-border: var(--border);--dialog-shadow: 0 0 #0000, 0 0 #0000, 0 25px 50px -12px rgba(0, 0, 0, .25);--details-padding: var(--spacing);--details-radius: none;--details-border-color: #D8D6E6;--details-border: 2px solid;--details-margin: .5rem 0;--details-border-radius: 0;--summary-bg: #D8D6E6;--summary-fg: var(--core1);--summary-padding: var(--spacing);--summary-margin: calc(var(--spacing) * -1);--summary-open-margin-bottom: calc(var(--spacing) * 2);--summary-icon-closed: "▼";--summary-icon-open: "▲";--summary-font-weight: bold;--summary-hover-decoration: underline;--summary-open-bg: #B0ADCD;--summary-open-fg: #29245A;--summary-hover-bg: #B0ADCD;--summary-hover-fg: #29245A;--summary-focus-bg: #FDF289;--summary-focus-fg: var(--core1);--summary-focus-visible-bg: #FDF289;--summary-focus-visible-fg: var(--core1);--summary-active-boxshadow: var(--btn-active-boxshadow);--details-compact-border: 0;--details-compact-padding: 0 .2rem;--details-compact-margin: 1px 0 .5rem 0;--details-compact-bg: transparent;--details-compact-fg: var(--core1)}:has(dialog[open]){overflow:hidden}dialog{background:var(--dialog-bg);padding:var(--dialog-padding);border:var(--dialog-border);border-radius:var(--dialog-radius);box-shadow:var(--dialog-shadow)}details{--icon-font: var(--icon-font, var(--font), Arial);border:var(--details-border);border-radius:var(--details-radius);border-color:var(--details-border-color);padding:var(--details-padding);margin:var(--details-margin);overflow:hidden;border-radius:var(--details-border-radius)}details[open]{padding:var(--details-padding)}details[open]>summary{list-style-type:none;border-bottom:var(--detail-border);margin-bottom:var(--summary-open-margin-bottom);background:var(--summary-open-bg);color:var(--summary-open-fg)}details>summary{display:grid;position:relative;grid-template-columns:auto 1fr;gap:var(--summary-padding);background:var(--summary-bg);color:var(--summary-fg);list-style-type:none;margin:var(--summary-margin);padding:var(--summary-padding) var(--summary-padding) var(--summary-padding) calc(var(--summary-padding) * 4);font-weight:var(--summary-font-weight)}details>summary::-webkit-details-marker{display:none}details.compact>summary{display:inline-block}summary:hover{-webkit-text-decoration:var(--summary-hover-decoration);text-decoration:var(--summary-hover-decoration);cursor:pointer;background:var(--summary-hover-bg);color:var(--summary-hover-fg)}summary:before,summary:after{text-decoration:none;position:absolute;text-decoration:none;font-family:var(--icon-font)}summary:before{top:50%;transform:translateY(-50%);padding-left:var(--summary-padding)}details.icon-end>summary{padding:var(--summary-padding) calc(var(--summary-padding)* 4) var(--summary-padding) var(--summary-padding)}details.icon-end>summary:after{right:0;top:50%;transform:translateY(-50%);padding-right:var(--summary-padding)}details:focus>summary{background:var(--summary-focus-bg);color:var(--summary-focus-fg);-webkit-text-decoration:var(--summary-hover-decoration);text-decoration:var(--summary-hover-decoration)}details>summary:focus-visible,details.compact>summary:focus-visible{background:var(--summary-focus-visible-bg);color:var(--summary-focus-visible-fg);-webkit-text-decoration:var(--summary-hover-decoration);text-decoration:var(--summary-hover-decoration)}details.icon-end summary{grid-template-columns:1fr auto}details:not(.compact):not([open]):not(.icon-end)>summary:before{content:var(--summary-icon-closed) / ""}details.icon-end:not(.compact) summary:after{content:var(--summary-icon-closed) / " "}details[open]:not(.icon-end,.compact)>summary:before{content:var(--summary-icon-open) / " "}details[open].icon-end>summary:after{content:var(--summary-icon-open) / " "}details.compact,details.compact>summary{all:revert;cursor:pointer;border:var(--details-compact-border);padding:var(--details-compact-padding);margin:var(--details-compact-margin);background:var(--details-compact-bg);color:var(--details-compact-fg)}:root,:host{--hr-color: #8FC5DD;--hr-border: 1px solid;--hr-margin: 1rem 0;--kbd-bg: ;--kbd-fg: ;--kbd-radius: var(--radius);--kbd-border: 1px solid var(--kbd-fg, --fg1);--kbd-font-size: .75em;--kbd-padding: 0 .1em;--kbd-display: inline-block;--kbd-valign: text-top;--time-weight: bold;--time-font-style: normal;--var-weight: normal;--var-font-style: italic}hr{border:none;border-top:var(--hr-border) var(--hr-color, --fg1);margin:var(--hr-margin)}kbd{background:var(--kbd-bg, --bg1);border-radius:var(--kbd-radius, --radius);border:var(--kbd-border);color:var(--kbd-fg, --fg1);font-size:var(--kbd-font-size);padding:var(--kbd-padding);display:var(--kbd-display);vertical-align:var(--kbd-valign)}time{font-style:var(--time-font-style);font-weight:var(--time-weight)}var{font-style:var(--var-font-style);font-weight:var(--var-weight)}:root,:host{--meter-height: 1.8rem;--meter-valign: middle;--progress-height: 1.8rem;--progress-valign: middle}meter{height:var(--meter-height);vertical-align:var(--meter-valign)}progress{height:var(--progress-height);vertical-align:var(--progress-valign)}dialog::backdrop{background:#000;opacity:.5}:root,:host{color-scheme:var(--base-theme, light);accent-color:var(--accent);font-family:var(--font);font-variant-numeric:tabular-nums;font-size:var(--font-size, 1rem);line-height:var(--line-height);background-color:var(--bg1);color:var(--fg1)}*:focus{outline:none}*:focus-visible{outline:var(--outline)}:root,:host{--neutral: #474045;--information: #003E8C;--success: #006539;--warning: #9B3900;--danger: #9B0509;--neutral-light: color-mix(in srgb, var(--neutral) 20%, var(--mix-color, white));--neutral-dark: var(--neutral);--information-light: color-mix(in srgb, var(--information) 20%, var(--mix-color, white));--information-dark: var(--information);--success-light: color-mix(in srgb, var(--success) 20%, var(--mix-color, white));--success-dark: color-mix(in srgb, var(--success) 75%, #000000);--warning-light: color-mix(in srgb, var(--warning) 20%, var(--mix-color, white));--warning-dark: var(--warning);--danger-light: color-mix(in srgb, var(--danger) 20%, var(--mix-color, white));--danger-dark: var(--danger);--accent1: #AF216B;--accent2: #21A0B0;--accent3: #B09F21;--accent4: #679700;--accent5: #67138C;--accent6: #BE5400;--accent1-light: color-mix(in srgb, var(--accent1) 20%, var(--mix-color, white));--accent1-dark: color-mix(in srgb, var(--accent1) 70%, #000000);--accent2-light: color-mix(in srgb, var(--accent2) 20%, var(--mix-color, white));--accent2-dark: color-mix(in srgb, var(--accent2) 70%, #000000);--accent3-light: color-mix(in srgb, var(--accent3) 20%, var(--mix-color, white));--accent3-dark: color-mix(in srgb, var(--accent3) 65%, #000000);--accent4-light: color-mix(in srgb, var(--accent4) 20%, var(--mix-color, white));--accent4-dark: color-mix(in srgb, var(--accent4) 75%, #000000);--accent5-light: color-mix(in srgb, var(--accent5) 20%, var(--mix-color, white));--accent5-dark: color-mix(in srgb, var(--accent5) 70%, #000000);--accent6-light: color-mix(in srgb, var(--accent6) 20%, var(--mix-color, white));--accent6-dark: color-mix(in srgb, var(--accent6) 75%, #000000)}.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6{--color-dark: var(--color);--color-light: color-mix(in srgb, var(--color) 20%, var(--mix-color))}:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6):not(.border,.fg,.bg,.border-color,.bg-color,.stroke,.fill,.use-true-color,button,progress,details){background-color:var(--color-light);color:var(--color-dark);accent-color:var(--color)}:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6):where(progress){accent-color:var(--color)}:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6):where(button){color:var(--color-dark);border-color:var(--color-dark);accent-color:var(--color)}:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6):where(button):disabled{--btn-disabled-fg: var(--color-dark);border-color:var(--color-dark);filter:opacity(.5)}:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6):where(button):hover:not(:disabled){border-color:var(--core2);background-color:var(--color-dark)}:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6):where(details){border-color:var(--color-dark);background-color:initial}[open]:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6):where(details)>summary,:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6):where(details)>summary{color:var(--color-dark);background-color:var(--color-light);accent-color:var(--color)}.fg:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6){color:var(--color-dark)}.stroke:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6) svg *,.stroke:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6){stroke:var(--color-dark)}.fill:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6) svg *,.fill:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6){fill:var(--color-dark)}.bg:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6){background-color:var(--color-light)}.bg-color:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6):not(details){background-color:var(--color-dark);color:var(--mix-color, white)}details.bg-color:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6) summary{background-color:var(--color-dark);color:var(--mix-color, white)}.border:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6){border:var(--border);border-color:var(--color-light)}.border-color:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6){border:var(--border);border-color:var(--color)}.use-true:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6),.use-true-color:is(.neutral,.information,.success,.warning,.danger,.input,.accent1,.accent2,.accent3,.accent4,.accent5,.accent6){--color-dark: var(--color);--color-light: var(--color)}.neutral{--color: var(--neutral);--color-dark: var(--neutral-dark);--color-light: var(--neutral-light)}.information{--color: var(--information);--color-dark: var(--information-dark);--color-light: var(--information-light)}.success{--color: var(--success);--color-dark: var(--success-dark);--color-light: var(--success-light)}.warning{--color: var(--warning);--color-dark: var(--warning-dark);--color-light: var(--warning-light)}.danger{--color: var(--danger);--color-dark: var(--danger-dark);--color-light: var(--danger-light)}.accent1{--color: var(--accent1);--color-dark: var(--accent1);--color-light: var(--accent1-light)}.accent2{--color: var(--accent2);--color-dark: var(--accent2-dark);--color-light: var(--accent2-light)}.accent3{--color: var(--accent3);--color-dark: var(--accent3-dark);--color-light: var(--accent3-light)}.accent4{--color: var(--accent4);--color-dark: var(--accent4-dark);--color-light: var(--accent4-light)}.accent5{--color: var(--accent5);--color-dark: var(--accent5);--color-light: var(--accent5-light)}.accent6{--color: var(--accent6);--color-dark: var(--accent6-dark);--color-light: var(--accent6-light)}:root{--range-border: none;--range-width: auto;--range-track-height: .5rem;--range-track-radius: .5rem;--range-track-color: #0b55a8;--range-thumb-height: 1.2rem;--range-thumb-width: 1.2rem;--range-thumb-radius: 100%;--range-thumb-color: var(--bg1);--range-thumb-border: .15rem solid #0b55a8;--range-thumb-focus-boxshadow: 0 0 0 .1rem rgb(0 33 88 / 50%)}input[type=range].range{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;cursor:pointer;border:var(--range-border);width:var(--range-width);vertical-align:middle}input[type=range].range::-webkit-slider-runnable-track{background-color:var(--range-track-color);border-radius:var(--range-track-radius);height:var(--range-track-height)}input[type=range].range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;transform:translateY(-50%);margin-top:calc((var(--range-track-height)/2));border-radius:var(--range-thumb-radius);border:var(--range-thumb-border);background-color:var(--range-thumb-color);height:var(--range-thumb-height);width:var(--range-thumb-width)}input[type=range].range:focus::-webkit-slider-thumb{box-shadow:var(--range-thumb-focus-boxshadow)}input[type=range].range::-moz-range-track{background-color:var(--range-track-color);border-radius:var(--range-track-radius);height:var(--range-track-height)}input[type=range].range::-moz-range-thumb{border:var(--range-thumb-border);border-radius:var(--range-thumb-radius);background-color:var(--range-thumb-color);height:calc((var(--range-thumb-height)/4)*3);width:calc((var(--range-thumb-width)/4)*3)}input[type=range].range:focus::-moz-range-thumb{box-shadow:var(--range-thumb-focus-boxshadow)}.bold{font-weight:700}.italic{font-style:italic}.strike{text-decoration:line-through}.underline{-webkit-text-decoration:var(--u-color) var(--u-style);text-decoration:var(--u-color) var(--u-style)}.contrast-text{--red: var(--r);--green: var(--g);--blue: var(--b);--luma: calc(((((var(--red) * 299) + (var(--green) * 587) + (var(--blue) * 114)) / 1000) - 128) * -1000);--black-or-white: rgb(var(--luma), var(--luma), var(--luma));--semi-b-or-w: rgba(var(--luma), var(--luma), var(--luma), .5);--rgb: rgb(var(--red), var(--green), var(--blue));--rgba: rgba(var(--red), var(--green), var(--blue), .5);--not-rgb: rgb(calc(255 - var(--red)), calc(255 - var(--green)), calc(255 - var(--blue)));--not-rgba: rgb(calc(255 - var(--red)), calc(255 - var(--green)), calc(255 - var(--blue)), .4);color:rgb(var(--luma),var(--luma),var(--luma));background-color:rgb(var(--red),var(--green),var(--blue))}:root,:host{--striped-odd-bg: var(--bg1);--striped-odd-fg: var(--fg1);--striped-even-bg: #E9EEF6;--striped-even-fg: initial;--striped-border-color: #D2DDED;--striped-border-width: 2px;--striped-border-style: solid;--striped-li-padding: 0 .3rem}.striped.bordered{border:var(--striped-border-color) var(--striped-border-width) var(--striped-border-style)}ul.striped.bordered li:not(:last-of-type){border-bottom:var(--striped-border-color) var(--striped-border-width) var(--striped-border-style)}:where(ul,ol).striped:not(table)>li{padding:var(--striped-li-padding)}.striped:not(table)>*:nth-child(odd),table.striped tr:nth-child(odd){background:var(--striped-odd-bg);color:var(--striped-odd-fg)}.striped:not(table)>*:nth-child(2n),table.striped tr:nth-child(2n){background:var(--striped-even-bg);color:var(--striped-even-fg)}.grid{--min: 200px;--gap: .5rem;--side-width: minmax(10%, 30vw);--grid-template: repeat(auto-fit, minmax(min(100%, var(--min)), 1fr));display:grid;grid-gap:var(--gap);grid-template-columns:var(--grid-template)}@media (min-width: 480px){.grid.sidebar-left{grid-template-columns:var(--side-width) minmax(min(50vw,30ch),1fr)}.grid.sidebar-right{grid-template-columns:minmax(min(50vw,30ch),1fr) var(--side-width)}}.flex{--min: 200px;--gap: 1rem;display:flex;flex-wrap:wrap;gap:var(--gap)}.flex>*{flex:1 1 var(--min)}.card{border:var(--card-border);border-radius:var(--card-radius, var(--radius));padding:var(--card-padding, .5ch 1ch 1ch);margin:var(--card-margin);box-shadow:var(--card-shadow);overflow:var(--overflow, auto)}.center-child{width:100%;height:100%;display:grid;place-content:center}.resize{--resize: both;resize:var(--resize);overflow:auto;max-width:100%}.visually-hidden,.visually-hidden-focusable:not(:focus):not(:focus-within),.sr-only,.sr-only-focusable:not(:focus):not(:focus-within){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.icon:where(svg),.icon>svg{height:var(--icon-size, 1em);vertical-align:var(--icon-align, text-top)}.icon *{color:currentColor;fill:currentColor;stroke:currentColor}[data-layout=basic],:host[data-layout=basic]{--rad: 5px;--pad: 1.5ch;--min-bar-height: 3.3rem;display:grid;gap:1ch;width:100%}:is([data-layout=basic],:host[data-layout=basic]) details{margin:0}:is([data-layout=basic],:host[data-layout=basic]) .options{display:flex;gap:1rem;flex-wrap:wrap}:is([data-layout=basic],:host[data-layout=basic]) .help{border-radius:var(--rad)}:is(:is([data-layout=basic],:host[data-layout=basic]) .help)>summary{--summary-padding: var(--pad);padding-block:var(--pad);padding-inline:var(--pad)}:is(:is([data-layout=basic],:host[data-layout=basic]) details.menu)>summary{--summary-padding: var(--pad);padding-block:var(--pad);padding-inline:var(--pad);padding-inline-start:calc(var(--pad)*3);display:grid;grid-template-columns:1fr auto;min-height:var(--min-bar-height);align-items:center}:is([data-layout=basic],:host[data-layout=basic]) .menu:not(details){min-height:var(--min-bar-height);display:grid;align-items:center;font-weight:700;padding-block:.5ch;padding-inline:var(--pad)}:is([data-layout=basic],:host[data-layout=basic]) .widget:not(:empty){display:grid;place-items:center;min-height:100px}:is(:is([data-layout=basic],:host[data-layout=basic]) .controls) ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5ch}:is(:is(:is([data-layout=basic],:host[data-layout=basic]) .controls) ul) li:first-child{flex:auto}[aria-hidden]:is(:is([data-layout=basic],:host[data-layout=basic]) .reveal),[tabindex="-1"]:is(:is([data-layout=basic],:host[data-layout=basic]) .reveal){display:none}:is(:is([data-layout=basic],:host[data-layout=basic]) .reveal):not(:empty){padding:1ch}:is([data-layout=basic],:host[data-layout=basic]) .feedback{border-radius:var(--rad);padding:var(--spacing);display:grid;align-items:center;height:5ch;overflow-y:auto}@media screen and (max-device-width: 545px){body{-webkit-text-size-adjust:100%}}@media screen and (min-width: 545px){[data-layout=basic] .menu:not(details){grid-template-columns:1fr repeat(var(--action-count, 4),auto)}}.table-layout{--columns: 2;--table-layout-heading-bg: #333333;--table-layout-heading-fg: #ffffff;--padding: .2rem .7rem;display:grid;grid-template-columns:repeat(var(--columns),auto);padding:var(--padding)}.table-layout>div{display:contents}.table-layout>div.row-headings>*{background:var(--table-layout-heading-bg);color:var(--table-layout-heading-fg);font-weight:700}.table-layout>div>*{padding:var(--padding)}.table-layout>div:last-of-type>*{border-bottom:2px solid var(--table-layout-heading-bg)}.table-layout>div:first-of-type>*{border-top:2px solid var(--table-layout-heading-bg)}