is a thin bespa-side wrapper that carries
data-id; the visual styling lives on the inner
that
Chroma emits. */
BODY.Top .CodeBlock {
border-radius: 4px;
overflow: hidden;
margin: 0;
}
BODY.Top .CodeBlock .chroma {
background: rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity));
color: rgb(var(--md-sys-color-on-surface));
border: solid 1px rgb(var(--md-sys-color-outline-variant));
border-radius: 4px;
font-family: "Roboto Mono", monospace;
font-size: var(--md-sys-typescale-body-medium-size);
line-height: var(--md-sys-typescale-body-medium-line-height);
padding: 1em 1ch;
margin: 0;
overflow: auto;
tab-size: 4;
/* Optional vertical cap set by WithMaxRows / WithMaxHeight via inline style
on the outer .CodeBlock. Without it, the block grows to fit its content. */
max-height: var(--codeblock-max-height, none);
}
BODY.Top .CodeBlock.NoFrame .chroma {
background: transparent;
border: none;
padding: 0;
}
BODY.Top .CodeBlock .chroma code {
background: unset;
border: none;
padding: 0;
font-family: inherit;
color: inherit;
}
/* Inline line numbers. Each code line gets a leading from
Chroma. We style it as a right-aligned fixed-width gutter with a divider on
the right; user-select:none keeps clipboard copies free of the numbers. */
BODY.Top .CodeBlock .lnt,
BODY.Top .CodeBlock .ln {
display: inline-block;
width: 3ch;
margin-right: 1ch;
padding-right: 1ch;
text-align: right;
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border-right: solid 1px rgb(var(--md-sys-color-outline-variant));
user-select: none;
}
/* --- Token classes -----------------------------------------------------
Chroma's standard short class names; see
https://pkg.go.dev/github.com/alecthomas/chroma/v2#TokenType for the
exhaustive list. We only style the families that show up in real code.
*/
/* Comments — dimmed and italic. */
BODY.Top .CodeBlock .c,
BODY.Top .CodeBlock .ch,
BODY.Top .CodeBlock .cm,
BODY.Top .CodeBlock .c1,
BODY.Top .CodeBlock .cs,
BODY.Top .CodeBlock .cp,
BODY.Top .CodeBlock .cpf {
color: rgb(var(--md-sys-color-on-surface-variant));
font-style: italic;
}
/* Keywords — primary, bold. */
BODY.Top .CodeBlock .k,
BODY.Top .CodeBlock .kc,
BODY.Top .CodeBlock .kd,
BODY.Top .CodeBlock .kn,
BODY.Top .CodeBlock .kp,
BODY.Top .CodeBlock .kr {
color: rgb(var(--md-sys-color-primary));
font-weight: 600;
}
/* Type-keywords (int, string, bool, …) — secondary. */
BODY.Top .CodeBlock .kt,
BODY.Top .CodeBlock .nc,
BODY.Top .CodeBlock .nn {
color: rgb(var(--md-sys-color-secondary));
}
/* String literals — tertiary. */
BODY.Top .CodeBlock .s,
BODY.Top .CodeBlock .sa,
BODY.Top .CodeBlock .sb,
BODY.Top .CodeBlock .sc,
BODY.Top .CodeBlock .dl,
BODY.Top .CodeBlock .sd,
BODY.Top .CodeBlock .s2,
BODY.Top .CodeBlock .se,
BODY.Top .CodeBlock .sh,
BODY.Top .CodeBlock .si,
BODY.Top .CodeBlock .sx,
BODY.Top .CodeBlock .sr,
BODY.Top .CodeBlock .s1,
BODY.Top .CodeBlock .ss {
color: rgb(var(--md-sys-color-tertiary));
}
/* Numeric literals — tertiary. */
BODY.Top .CodeBlock .m,
BODY.Top .CodeBlock .mb,
BODY.Top .CodeBlock .mf,
BODY.Top .CodeBlock .mh,
BODY.Top .CodeBlock .mi,
BODY.Top .CodeBlock .il,
BODY.Top .CodeBlock .mo {
color: rgb(var(--md-sys-color-tertiary));
}
/* Function names. */
BODY.Top .CodeBlock .nf,
BODY.Top .CodeBlock .fm {
color: rgb(var(--md-sys-color-primary));
}
/* Built-ins (println, len, append, …) — slightly dimmer than user functions. */
BODY.Top .CodeBlock .nb,
BODY.Top .CodeBlock .bp {
color: rgb(var(--md-sys-color-secondary));
}
/* Operators and operator-words (and, or, in, …) */
BODY.Top .CodeBlock .o,
BODY.Top .CodeBlock .ow {
color: rgb(var(--md-sys-color-on-surface));
}
BODY.Top .CodeBlock .ow {
font-weight: 600;
}
/* Decorators / annotations (@override, etc.) */
BODY.Top .CodeBlock .nd,
BODY.Top .CodeBlock .na {
color: rgb(var(--md-sys-color-secondary));
}
/* Variable names — default on-surface; explicit class kept for completeness. */
BODY.Top .CodeBlock .nv,
BODY.Top .CodeBlock .vc,
BODY.Top .CodeBlock .vg,
BODY.Top .CodeBlock .vi,
BODY.Top .CodeBlock .vm {
color: rgb(var(--md-sys-color-on-surface));
}
/* Tags (HTML/XML) — primary. */
BODY.Top .CodeBlock .nt {
color: rgb(var(--md-sys-color-primary));
}
/* Constants and labels. */
BODY.Top .CodeBlock .no,
BODY.Top .CodeBlock .nl,
BODY.Top .CodeBlock .ni,
BODY.Top .CodeBlock .ne {
color: rgb(var(--md-sys-color-tertiary));
}
/* Punctuation — same as text body. */
BODY.Top .CodeBlock .p {
color: rgb(var(--md-sys-color-on-surface));
}
/* Errors — bordered red. */
BODY.Top .CodeBlock .err {
color: rgb(var(--md-sys-color-error));
border-bottom: dotted 1px rgb(var(--md-sys-color-error));
}
/* Generic styles: deleted (red), inserted (green-ish primary), heading, prompt. */
BODY.Top .CodeBlock .gd {
color: rgb(var(--md-sys-color-error));
}
BODY.Top .CodeBlock .gi {
color: rgb(var(--md-sys-color-primary));
}
BODY.Top .CodeBlock .gh,
BODY.Top .CodeBlock .gu {
color: rgb(var(--md-sys-color-primary));
font-weight: 600;
}
BODY.Top .CodeBlock .ge {
font-style: italic;
}
BODY.Top .CodeBlock .gs {
font-weight: 600;
}
BODY.Top .CodeBlock .gp {
color: rgb(var(--md-sys-color-on-surface-variant));
}
.ColorSwatch {
display: inline-block;
width: 1em;
height: 1em;
border-radius: 3px;
}
.CopyToClipboard {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.2em;
height: 1.2em;
border-radius: 50%;
vertical-align: middle;
cursor: pointer;
user-select: none;
outline: none;
color: rgb(var(--md-sys-color-primary));
background-color: transparent;
vertical-align: baseline;
}
.CopyToClipboard > .Icon {
font-size: 0.8em;
}
.CopyToClipboard:hover {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity)));
}
.CopyToClipboard:focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity)));
}
.CopyToClipboard:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity)));
}
.Debugger {
font-family: var(--md-sys-typescale-body-small-font);
font-size: var(--md-sys-typescale-body-small-size);
font-weight: var(--md-sys-typescale-body-small-weight);
line-height: var(--md-sys-typescale-body-small-line-height);
letter-spacing: var(--md-sys-typescale-body-small-tracking);
display: none;
padding: 0 8px 8px 8px;
background-color: rgb(var(--md-sys-color-secondary-container));
color: rgb(var(--md-sys-color-on-secondary-container));
border-width: 0 0 0 5px;
border-style: solid;
border-color: rgb(var(--md-sys-color-secondary));
position: fixed;
bottom: 1ch;
right: -48ch;
width: 50ch;
max-height: 90vh;
z-index: 1000000;
overflow-wrap: break-word;
overflow-y: auto;
cursor: w-resize;
transition: right 0.25s;
}
.Debugger.Shown {
cursor: e-resize;
right: 0;
}
.Debugger.Error {
background-color: rgb(var(--md-sys-color-error-container));
color: rgb(var(--md-sys-color-on-error-container));
border-color: rgb(var(--md-sys-on-error-container));
}
.Debugger > H5 {
margin-block-start: 0.5em !important;
margin-block-end: 0 !important;
text-transform: initial;
padding: 0 1px;
}
.Debugger > DIV, .Debugger > PRE {
white-space: nowrap;
overflow-x: auto;
padding: 0 1px;
}
.Debugger *[data-ref] {
cursor: default;
}
.Debugger *[data-ref]:hover {
outline: solid 1px rgb(var(--md-sys-color-error));
}
:root {
--debugger-highlight-color: 255,0,0;
}
@media (prefers-color-scheme: dark) {
:root {
--debugger-highlight-color: 255,255,0;
}
}
.DebuggerHighlight {
animation-name: DebuggerPulse;
animation-duration: 1s;
animation-direction: normal;
animation-iteration-count: infinite;
animation-timing-function: ease-out;
outline-style: solid;
outline-width: 1px;
background-color: rgba(var(--debugger-highlight-color), var(--md-sys-state-hover-state-layer-opacity)) !important;
}
.DebuggerHighlightNoAnim {
border: solid 1px rgb(var(--debugger-highlight-color));
background-color: rgba(var(--debugger-highlight-color), var(--md-sys-state-hover-state-layer-opacity)) !important;
}
.DebuggerHighlight *:not(.Debugger), .DebuggerHighlightNoAnim *:not(.Debugger) {
background-color: transparent !important;
}
@keyframes DebuggerPulse {
from {
outline-color: rgba(var(--debugger-highlight-color), 1);
outline-offset: 1px;
}
to {
outline-color: rgba(var(--debugger-highlight-color), 0);
outline-offset: 16px;
}
}
.Deck > DIV {
display: flex;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 8px;
align-items: stretch;
}
.Deck > DIV > DIV {
display: flex;
align-items: stretch;
}
/* .Deck > DIV > DIV {
flex-grow: 1;
} */
/* Reduce flicker */
.Deck > DIV:not(.WidthObserved) {
visibility: hidden;
}
.Embed {
width: 100%;
}
.Field {
display: flex;
flex-wrap: wrap;
row-gap: 0.25em;
}
.FieldLabel {
color: rgb(var(--md-sys-color-on-surface-variant));
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
}
.Field > DIV:first-child {
flex-basis: 150px;
flex-grow: 1;
max-width: 100%;
min-width: 0;
}
.Field > DIV:last-child {
flex-basis: 450px;
flex-grow: 9;
max-width: 100%;
min-width: 0;
}
.Field > DIV:first-child A {
color: inherit;
}
.FilterChip {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
user-select: none;
border-radius: 8px;
height: 32px;
display: inline-flex;
align-items: center;
padding: 5px 0;
vertical-align: bottom;
max-width: 100%;
}
.FilterChip > INPUT:first-child {
display: none;
}
.FilterChip > .Icon {
width: 0px;
font-size: 13.5pt !important;
line-height: 13.5pt !important;
transition: width 0.15s;
overflow: hidden;
}
.FilterChip > SPAN:last-child {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Disabled */
.FilterChip[disabled] {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
.FilterChip[disabled].Selected {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.FilterChip[disabled]:not(.Selected) {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border: solid 1px rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.FilterChip:not([disabled]) {
cursor: hand;
}
/* Checked */
.FilterChip.Selected {
padding-left: 8px;
padding-right: 16px;
}
.FilterChip.Selected > .Icon {
width: 26px;
}
.FilterChip:not([disabled]).Selected {
color: rgb(var(--md-sys-color-on-secondary-container));
background-color: rgb(var(--md-sys-color-secondary-container));
}
.FilterChip:not([disabled]).Selected:hover {
background-image: linear-gradient(
rgba(var(--md-sys-color-surface), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-surface), var(--md-sys-state-hover-state-layer-opacity)));
}
.FilterChip:not([disabled]).Selected:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-surface), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-surface), var(--md-sys-state-pressed-state-layer-opacity)));
}
.FilterChip:not([disabled]).Selected:focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-surface), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-surface), var(--md-sys-state-focus-state-layer-opacity)));
}
/* Unchecked */
.FilterChip:not(.Selected) {
padding-left: 16px;
padding-right: 16px;
}
.FilterChip:not([disabled]):not(.Selected) {
border: solid 1px rgb(var(--md-sys-color-outline));
color: rgb(var(--md-sys-color-on-surface-variant));
}
.FilterChip:not([disabled]):not(.Selected):hover {
background-color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-hover-state-layer-opacity));
}
.FilterChip:not([disabled]):not(.Selected):hover:active {
background-color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-pressed-state-layer-opacity));
}
.FilterChip:not([disabled]):not(.Selected):focus {
background-color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-focus-state-layer-opacity));
}
.InputForm.Block {
max-width: 800px;
}
.InputForm > FORM {
margin: 0;
display: inline;
}
.Gallery {
display: flex;
flex-wrap: wrap;
column-gap: 8px;
row-gap: 8px;
}
.Gallery > DIV {
min-width: 0;
}
.GroupingFrame {
border: solid 1px rgb(var(--md-sys-color-outline-variant));
border-radius: 24px;
padding: 0 12px;
margin-top: 4px;
overflow: hidden;
}
.GroupingFrame > DIV {
margin-top: 4px;
}
/* Title */
.GroupingFrame > SPAN {
position: absolute;
color: rgb(var(--md-sys-color-outline-variant));
font-family: var(--md-sys-typescale-label-small-font);
font-size: var(--md-sys-typescale-label-small-size);
font-weight: var(--md-sys-typescale-label-small-weight);
line-height: var(--md-sys-typescale-label-small-line-height);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
background-color: rgb(var(--md-sys-color-background));
margin-top: -8px;
margin-left: 12px;
padding: 0 0.5ch;
}
H1, H2, H3, H4, H5, H6 {
margin-top: 0;
margin-block-start: 0;
margin-block-end: 0;
}
H1:not(:first-child), H2:not(:first-child), H3:not(:first-child) {
margin-block-start: 12px;
}
H1:not(:last-child), H2:not(:last-child), H3:not(:last-child) {
margin-block-end: 12px;
}
H4:not(:first-child), H5:not(:first-child) {
margin-block-start: 8px;
}
H4:not(:last-child), H5:not(:last-child) {
margin-block-end: 8px;
}
H1, H2, H3 {
letter-spacing: 1px;
}
H1 {
font-family: var(--md-sys-typescale-headline-large-font);
font-size: var(--md-sys-typescale-headline-large-size);
font-weight: var(--md-sys-typescale-headline-large-weight);
line-height: var(--md-sys-typescale-headline-large-line-height);
letter-spacing: var(--md-sys-typescale-headline-large-tracking);
}
H2 {
font-family: var(--md-sys-typescale-headline-medium-font);
font-size: var(--md-sys-typescale-headline-medium-size);
font-weight: var(--md-sys-typescale-headline-medium-weight);
line-height: var(--md-sys-typescale-headline-medium-line-height);
letter-spacing: var(--md-sys-typescale-headline-medium-tracking);
}
H3 {
font-family: var(--md-sys-typescale-headline-small-font);
font-size: var(--md-sys-typescale-headline-small-size);
font-weight: var(--md-sys-typescale-headline-small-weight);
line-height: var(--md-sys-typescale-headline-small-line-height);
letter-spacing: var(--md-sys-typescale-headline-small-tracking);
}
H4 {
font-family: var(--md-sys-typescale-title-large-font);
font-size: var(--md-sys-typescale-title-large-size);
font-weight: var(--md-sys-typescale-title-large-weight);
line-height: var(--md-sys-typescale-title-large-line-height);
letter-spacing: var(--md-sys-typescale-title-large-tracking);
}
H5 {
font-family: var(--md-sys-typescale-title-medium-font);
font-size: var(--md-sys-typescale-title-medium-size);
font-weight: var(--md-sys-typescale-title-medium-weight);
line-height: var(--md-sys-typescale-title-medium-line-height);
letter-spacing: var(--md-sys-typescale-title-medium-tracking);
}
H6 {
font-family: var(--md-sys-typescale-title-small-font);
font-size: var(--md-sys-typescale-title-small-size);
font-weight: var(--md-sys-typescale-title-small-weight);
line-height: var(--md-sys-typescale-title-small-line-height);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
display: inline;
}
.Icon {
text-decoration: none;
vertical-align: bottom;
}
.Icon > .SVG {
height: 1em;
max-width: 100%;
}
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 1em;
line-height: inherit;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
IMG {
max-width: 100%;
}
A:hover IMG {
filter: brightness(87.5%);
}
.InfoBubble {
vertical-align: middle;
}
.InfoBubble > SPAN {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.InfoBubble > SPAN > .Icon {
padding: 0 0.25ch;
color: rgb(var(--md-sys-color-on-surface-variant));
cursor: pointer;
font-size: 1.1em;
vertical-align: middle;
}
.InfoBubble > SPAN + DIV {
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
text-transform: none;
text-decoration: none;
text-align: initial;
letter-spacing: 0;
white-space: normal;
color: rgb(var(--md-sys-color-on-surface-variant));
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)));
background-color: rgb(var(--md-sys-color-surface));
display: none;
position: absolute;
z-index: 1100;
width: auto;
max-width: 48ch;
max-height: 10em;
overflow-y: auto;
padding: 0.5em 1ch 0.75em 1ch;
border-radius: 3px;
box-shadow: var(--md-sys-elevation-level1-shadow);
}
.InfoBubble > SPAN:hover + DIV, .InfoBubble > SPAN + DIV:hover {
display: block;
}
.InfoLink {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.InfoLink > A {
padding: 0 0.25ch;
color: rgb(var(--md-sys-color-on-surface-variant));
}
.InputChips {
background-color: transparent;
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 3px;
display: flex;
align-items: center;
row-gap: 0.5em;
padding: 0.25em 0.5ch;
flex-wrap: wrap;
min-height: 2.5em;
}
.InputChips:not([data-maxitems="1"]) {
column-gap: 1ch;
}
/* Valid */
.InputChips:not(.Invalid):not(.Disabled):hover:not(.Focus) {
border-color: rgb(var(--md-sys-color-on-surface));
caret-color: rgb(var(--md-sys-color-primary));
}
.InputChips:not(.Invalid).Focus {
border-color: rgb(var(--md-sys-color-primary));
outline: none;
}
/* Invalid */
.InputChips.Invalid:not(.Disabled):hover:not(.Focus) {
border-color: rgb(var(--md-sys-color-on-error-container));
}
.InputChips.Invalid {
border-color: rgb(var(--md-sys-color-error));
caret-color: rgb(var(--md-sys-color-error));
}
/* Disabled */
.InputChips.Disabled {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border-color: rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
/* Chip */
.InputChips > .Chip {
display: flex;
align-items: center;
height: 32px;
white-space: nowrap;
max-width: 100%;
column-gap: 4px;
}
.InputChips:not([data-maxitems="1"]) > .Chip {
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 8px;
background-color: rgb(var(--md-sys-color-surface));
color: rgb(var(--md-sys-color-on-surface-variant));
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
line-height: var(--md-sys-typescale-label-large-line-height);
padding: 0 4px 0 12px;
}
.InputChips[data-maxitems="1"] > .Chip {
width: 100%;
}
.InputChips > .Chip > SPAN:first-child {
overflow-x: hidden;
text-overflow: ellipsis;
}
.InputChips[data-maxitems="1"] > .Chip > SPAN:first-child {
flex: 1;
}
.InputChips.Disabled > .Chip {
border-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
.InputChips:not(.Disabled) > .Chip {
cursor: hand;
}
.InputChips > .Chip > .Remove {
width: 20px;
height: 20px;
border-radius: 10px;
text-align: center;
}
.InputChips > .Chip > .Remove > I {
line-height: 20px;
}
.InputChips:not(.Disabled) > .Chip > .Remove:hover {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity));
}
.InputChips:not(.Disabled) > .Chip > .Remove:hover:active {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity));
}
.InputChips:not(.Disabled):not([data-maxitems="1"]) > .Chip:hover {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity)));
}
.InputChips:not(.Disabled):not([data-maxitems="1"]) > .Chip:focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity)));
}
.InputChips:not(.Disabled):not([data-maxitems="1"]) > .Chip:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity)));
}
.InputChips > .BlankChip {
display: none;
}
.InputChips > INPUT[type="text"] {
flex: 1;
min-width: 8ch !important;
border: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
height: 32px !important;
}
.InputChips > INPUT[type="text"].Saturated {
/* display: none; */
width: 0px !important;
min-width: 0px !important;
flex: 0;
}
.InputChips > TEXTAREA {
display: none;
}
/* Popup */
.InputChips > UL {
display: none;
position: absolute;
z-index: 2;
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level2-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level2-tint-layer-opacity)));
background-color: rgb(var(--md-sys-color-surface));
color: rgb(var(--md-sys-color-on-surface));
box-shadow: var(--md-sys-elevation-level1-shadow);
border-radius: 3px;
padding: 0.25em 0 0.25em 0;
cursor: default;
}
.InputChips > UL > LI {
padding: 0.5em 3ch 0.5em 1ch;
display: block;
white-space: nowrap;
}
.InputChips > UL > LI > DIV:first-child {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.InputChips > UL > LI > DIV:last-child {
font-family: var(--md-sys-typescale-label-small-font);
font-size: var(--md-sys-typescale-label-small-size);
font-weight: var(--md-sys-typescale-label-small-weight);
line-height: var(--md-sys-typescale-label-small-line-height);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
color: rgba(var(--md-sys-color-on-background), calc(1 - var(--md-sys-state-disabled-state-layer-opacity)));
}
.InputChips:not(.Disabled) > UL > LI.Active {
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
.InputChips:not(.Disabled) > UL > LI:hover {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)));
}
.InputChips:not(.Disabled) > UL > LI:hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)));
}
input[type="color"] {
width: 8ch;
padding: 0px !important;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch,
input[type="color"]::-moz-color-swatch {
border: none;
}
.InputFile {
font-family: var(--md-sys-typescale-body-large-font);
font-size: var(--md-sys-typescale-body-large-size);
font-weight: var(--md-sys-typescale-body-large-weight);
line-height: var(--md-sys-typescale-body-large-line-height);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
background-color: transparent;
color: rgb(var(--md-sys-color-on-surface));
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 3px;
outline: none;
display: flex;
align-items: center;
height: 2.5em;
}
.InputFile[disabled] {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border-color: rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.InputFile:not(.Invalid):not([disabled]):not(:focus):hover {
border-color: rgb(var(--md-sys-color-on-surface));
}
.InputFile:not(.Invalid):not([disabled]):focus {
border-color: rgb(var(--md-sys-color-primary));
outline: none;
}
.InputFile.Invalid {
border-color: rgb(var(--md-sys-color-error));
}
/* Drop zone */
.InputFile > .DropZone {
color: rgb(var(--md-sys-color-outline-variant));
user-select: none;
width: 100%;
height: 100%;
display: flex;
align-items: center;
padding: 0 0.5ch;
cursor: hand;
}
.InputFile:not(.Upload) > .DropZone, .InputFile[disabled] > .DropZone {
display: none;
cursor: initial;
}
.InputFile.Dragging {
border-color: rgb(var(--md-sys-color-primary));
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-dragged-state-layer-opacity));
}
/* Button */
.InputFile > INPUT[type=file] {
display: none;
}
/* Progress */
.InputFile > PROGRESS {
width: 100%;
appearance: none;
height: 100%;
background-color: transparent;
color: rgb(var(--md-sys-color-primary));
}
.InputFile > PROGRESS::-webkit-progress-bar {
background-color: transparent;
}
.InputFile > PROGRESS::-webkit-progress-value {
background-color: rgb(var(--md-sys-color-primary));
}
.InputFile > PROGRESS::-moz-progress-bar {
background-color: rgb(var(--md-sys-color-primary));
}
.InputFile:not(.Uploading) > PROGRESS {
display: none;
}
/* Filename */
.InputFile:not(.Uploaded) > .FileName {
display: none;
}
.InputFile > .FileName {
display: flex;
align-items: center;
width: 100%;
padding: 0 0.5ch;
}
.InputFile > .FileName > DIV:first-child {
flex: 1;
white-space: nowrap;
overflow-x: hidden;
text-overflow: ellipsis;
}
.InputFile > .FileName > .Icon {
cursor: hand;
color: rgb(var(--md-sys-color-on-surface-variant));
border-radius: 1em;
width: 1em;
height: 1em;
line-height: 1;
margin-right: 0.25em;
}
.InputFile > .FileName > .Icon:hover {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
.InputFile > .FileName > .Icon:hover:active {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
/* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */
INPUT[type=range] {
-webkit-appearance: none;
background: transparent;
margin: 0.5em 0;
border: none;
padding: 0;
width: 100%;
}
INPUT[type=range]:focus {
outline: none;
}
INPUT[type=range]:disabled {
background-color: unset;
cursor: default;
}
INPUT[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}
INPUT[type=range]::-ms-track {
width: 100%;
cursor: pointer;
background: transparent;
border-color: transparent;
color: transparent;
}
/* Thumb/handle */
INPUT[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
margin-top: -6px;
border: none;
height: 16px;
width: 16px;
border-radius: 8px;
background: rgb(var(--md-sys-color-primary));
cursor: ew-resize;
}
INPUT[type=range]:disabled::-webkit-slider-thumb {
background: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)));
cursor: default;
}
INPUT[type=range]:not(:disabled):hover::-webkit-slider-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):hover:active::-webkit-slider-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):focus::-webkit-slider-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
INPUT[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 8px;
background: rgb(var(--md-sys-color-primary));
cursor: ew-resize;
}
INPUT[type=range]:disabled::-moz-range-thumb {
background: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)));
cursor: default;
}
INPUT[type=range]:not(:disabled):hover::-moz-range-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):hover:active::-moz-range-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):focus::-moz-range-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
INPUT[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 8px;
background: rgb(var(--md-sys-color-primary));
cursor: ew-resize;
}
INPUT[type=range]:disabled::-ms-thumb {
background: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity)));
cursor: default;
}
INPUT[type=range]:not(:disabled):hover::-ms-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):hover:active::-ms-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
INPUT[type=range]:not(:disabled):focus::-ms-thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
/* Track */
INPUT[type=range]::-webkit-slider-runnable-track {
width: 100%;
height: 4px;
cursor: pointer;
border-radius: 2px;
}
INPUT[type=range]:not(:disabled)::-webkit-slider-runnable-track {
background-color: rgb(var(--md-sys-color-surface-variant));
}
INPUT[type=range]:disabled::-webkit-slider-runnable-track {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
cursor: default;
}
INPUT[type=range]::-moz-range-track {
width: 100%;
height: 4px;
cursor: pointer;
border-radius: 2px;
}
INPUT[type=range]:not(:disabled)::-moz-range-track {
background-color: rgb(var(--md-sys-color-surface-variant));
}
INPUT[type=range]:disabled::-moz-range-track {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
cursor: default;
}
INPUT[type=range]:not(:disabled)::-moz-range-progress {
background-color: rgb(var(--md-sys-color-primary));
}
INPUT[type=range]:disabled::-moz-range-progress {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
cursor: default;
}
INPUT[type=range]::-ms-track {
width: 100%;
height: 4px;
cursor: pointer;
border-radius: 2px;
}
INPUT[type=range]:disabled::-ms-track {
cursor: default;
}
INPUT[type=range]:not(:disabled)::-ms-fill-lower {
background-color: rgb(var(--md-sys-color-primary));
border-radius: 2px;
}
INPUT[type=range]:disabled::-ms-fill-lower {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
INPUT[type=range]::-ms-fill-upper {
background-color: rgb(var(--md-sys-color-surface-variant));
border-radius: 2px;
}
INPUT[type=range]:disabled::-ms-fill-upper {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
/* --- Wrapper layout ----------------------------------------------------- */
/* The wrapper is a (inline by default). display:flex column gives it block
layout for its Quill children without reserving an end-of-line baseline gap that
would otherwise show up as phantom padding under the editor. */
BODY.Top .RichEdit {
display: flex;
flex-direction: column;
font-family: var(--md-sys-typescale-body-large-font);
font-size: var(--md-sys-typescale-body-large-size);
line-height: var(--md-sys-typescale-body-large-line-height);
}
BODY.Top .RichEdit .RichEditTextArea {
/* The Go side renders the textarea; we hide it once Quill takes over. */
display: none;
}
/* --- Quill snow theme: Material overrides ------------------------------- */
/* Toolbar bar */
BODY.Top .RichEdit .ql-toolbar.ql-snow {
border-color: rgb(var(--md-sys-color-outline));
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgb(var(--md-sys-color-background));
}
/* Container (sibling of toolbar). Sized by content; .ql-editor inside owns
the min/max height so the container doesn't double-stack heights. */
BODY.Top .RichEdit .ql-container.ql-snow {
border-color: rgb(var(--md-sys-color-outline));
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
font-family: inherit;
font-size: inherit;
}
/* The actual editable surface owns the height envelope. */
BODY.Top .RichEdit .ql-editor {
color: rgb(var(--md-sys-color-on-background));
min-height: var(--richedit-min-height, 12em);
max-height: var(--richedit-max-height, 24em);
overflow-y: auto;
}
BODY.Top .RichEdit .ql-editor.ql-blank::before {
color: rgba(var(--md-sys-color-on-background), var(--md-sys-state-disabled-state-layer-opacity));
font-style: normal;
}
/* Toolbar button icon colors (idle). Note the .ql-snow class lives on the
toolbar element itself, so the selector is .ql-toolbar.ql-snow — not a
descendant. */
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-stroke {
stroke: rgb(var(--md-sys-color-on-surface-variant));
}
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-fill,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-stroke.ql-fill {
fill: rgb(var(--md-sys-color-on-surface-variant));
}
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker {
color: rgb(var(--md-sys-color-on-surface-variant));
}
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-options {
background: rgb(var(--md-sys-color-surface));
border-color: rgb(var(--md-sys-color-outline-variant));
color: rgb(var(--md-sys-color-on-surface));
}
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
border-color: rgb(var(--md-sys-color-outline));
}
/* Active / hover states recolor to the primary token. */
BODY.Top .RichEdit .ql-toolbar.ql-snow button:hover,
BODY.Top .RichEdit .ql-toolbar.ql-snow button:focus,
BODY.Top .RichEdit .ql-toolbar.ql-snow button.ql-active,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-label:hover,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-label.ql-active,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-item:hover,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-item.ql-selected {
color: rgb(var(--md-sys-color-primary));
}
BODY.Top .RichEdit .ql-toolbar.ql-snow button:hover .ql-stroke,
BODY.Top .RichEdit .ql-toolbar.ql-snow button:focus .ql-stroke,
BODY.Top .RichEdit .ql-toolbar.ql-snow button.ql-active .ql-stroke,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-item:hover .ql-stroke,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-item.ql-selected .ql-stroke {
stroke: rgb(var(--md-sys-color-primary));
}
BODY.Top .RichEdit .ql-toolbar.ql-snow button:hover .ql-fill,
BODY.Top .RichEdit .ql-toolbar.ql-snow button:focus .ql-fill,
BODY.Top .RichEdit .ql-toolbar.ql-snow button.ql-active .ql-fill,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-item:hover .ql-fill,
BODY.Top .RichEdit .ql-toolbar.ql-snow .ql-picker-item.ql-selected .ql-fill {
fill: rgb(var(--md-sys-color-primary));
}
/* --- Content typography ------------------------------------------------- */
BODY.Top .RichEdit .ql-editor blockquote {
border-left: 1px solid rgb(var(--md-sys-color-outline));
color: inherit;
padding-left: 1ch;
padding-right: 1ch;
}
BODY.Top .RichEdit .ql-editor pre.ql-syntax,
BODY.Top .RichEdit .ql-editor code {
background: rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity));
color: inherit;
border-radius: 3px;
font-family: "Roboto Mono", monospace;
}
BODY.Top .RichEdit .ql-editor code {
padding: 0 0.5ch;
}
BODY.Top .RichEdit .ql-editor a {
color: rgb(var(--md-sys-color-primary));
}
BODY.Top .RichEdit .ql-editor hr {
background: unset;
border: none;
border-top: solid 1px rgb(var(--md-sys-color-outline-variant));
margin: 16px 0;
}
/* --- Link tooltip ------------------------------------------------------- */
BODY.Top .ql-snow .ql-tooltip {
background: rgb(var(--md-sys-color-surface));
border-color: rgb(var(--md-sys-color-outline-variant));
color: rgb(var(--md-sys-color-on-surface));
box-shadow: var(--md-sys-elevation-level1-shadow);
border-radius: 4px;
}
BODY.Top .ql-snow .ql-tooltip input[type=text] {
background: rgb(var(--md-sys-color-background));
color: rgb(var(--md-sys-color-on-background));
border-color: rgb(var(--md-sys-color-outline));
border-radius: 3px;
}
BODY.Top .ql-snow .ql-tooltip a.ql-action,
BODY.Top .ql-snow .ql-tooltip a.ql-remove {
color: rgb(var(--md-sys-color-primary));
}
/* --- Mentions ----------------------------------------------------------- */
BODY.Top .RichEdit .mention {
background: rgb(var(--md-sys-color-tertiary-container));
color: rgb(var(--md-sys-color-on-tertiary-container));
border-radius: 3px;
padding: 1px 0.5ch;
}
BODY.Top .RichEdit[disabled] .mention {
opacity: var(--md-sys-state-disabled-state-layer-opacity);
}
BODY.Top .ql-mention-list-container {
background: rgb(var(--md-sys-color-surface));
border: 1px solid rgb(var(--md-sys-color-outline-variant));
box-shadow: var(--md-sys-elevation-level1-shadow);
border-radius: 4px;
color: rgb(var(--md-sys-color-on-surface));
}
BODY.Top .ql-mention-list-item {
color: inherit;
}
BODY.Top .ql-mention-list-item.selected,
BODY.Top .ql-mention-list-item:hover {
background: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
color: rgb(var(--md-sys-color-on-surface));
}
/* --- Disabled / invalid ------------------------------------------------- */
BODY.Top .RichEdit[disabled] .ql-toolbar.ql-snow,
BODY.Top .RichEdit[disabled] .ql-container.ql-snow {
border-color: rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
BODY.Top .RichEdit[disabled] .ql-editor {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
BODY.Top .RichEdit.Invalid .ql-toolbar.ql-snow,
BODY.Top .RichEdit.Invalid .ql-container.ql-snow {
border-color: rgb(var(--md-sys-color-error)) !important;
}
INPUT:not([type=radio]):not([type=checkbox]):not([type=range]),
SELECT,
TEXTAREA {
font-family: var(--md-sys-typescale-body-large-font);
font-size: var(--md-sys-typescale-body-large-size);
font-weight: var(--md-sys-typescale-body-large-weight);
line-height: var(--md-sys-typescale-body-large-line-height);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
background-color: transparent;
color: rgb(var(--md-sys-color-on-surface));
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 3px;
outline: none;
max-width: 100%;
}
INPUT:not([type=radio]):not([type=checkbox]):not([type=range]), SELECT {
height: 2.5em;
padding: 0 0.5ch;
}
INPUT[type=text].OTP {
font-size: calc(2.5 * var(--md-sys-typescale-body-large-size)) !important;
height: 1.5em !important;
letter-spacing: 0.5ch !important;
}
INPUT::placeholder, TEXTAREA::placeholder {
color: rgb(var(--md-sys-color-outline-variant));
}
INPUT:-webkit-autofill {
-webkit-box-shadow: 0 0 0 1000px rgb(var(--md-sys-color-surface)) inset;
-webkit-text-fill-color: rgb(var(--md-sys-color-on-surface));
}
HTML.Safari SELECT {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: 12px;
background-position: right 4px center;
background-repeat: no-repeat;
padding-right: 20px;
}
.AlignInput {
height: 2.5em;
display: inline-flex;
align-items: center;
}
INPUT:not([type=radio]):not([type=checkbox]):not([type=time]):not([type=date]):not([type=month]):not([type=range]),
TEXTAREA {
width: 100%;
}
INPUT[type=month] {
min-width: 18ch;
}
INPUT[type=date] {
min-width: 14ch;
}
INPUT[type=time] {
min-width: 14ch;
}
TEXTAREA {
resize: vertical;
padding: 0.25em 0.5ch;
min-height: 2.5em;
}
/* Disabled */
INPUT:not([type=radio]):not([type=checkbox]):not([type=range]):disabled,
TEXTAREA:disabled,
SELECT:disabled {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border-color: rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
SELECT:disabled, INPUT:disabled, TEXTAREA:disabled {
opacity: 1;
}
/* Valid */
INPUT:not(.Invalid):not([type=radio]):not([type=checkbox]):not([type=range]):not(:disabled):hover:not(:focus) ,
TEXTAREA:not(.Invalid):not(:disabled):hover:not(:focus) ,
SELECT:not(.Invalid):not(:disabled):hover:not(:focus) {
border-color: rgb(var(--md-sys-color-on-surface));
caret-color: rgb(var(--md-sys-color-primary));
}
INPUT:not(.Invalid):not([type=radio]):not([type=checkbox]):not([type=range]):focus,
SELECT:not(.Invalid):focus,
TEXTAREA:not(.Invalid):focus {
border-color: rgb(var(--md-sys-color-primary));
outline: none;
}
/* Invalid */
INPUT.Invalid:not([type=radio]):not([type=checkbox]):not([type=range]):not(:disabled):hover:not(:focus) ,
TEXTAREA.Invalid:not(:disabled):hover:not(:focus) ,
SELECT.Invalid:not(:disabled):hover:not(:focus) {
border-color: rgb(var(--md-sys-color-on-error-container));
}
INPUT.Invalid:not([type=radio]):not([type=checkbox]):not([type=range]),
SELECT.Invalid,
TEXTAREA.Invalid {
border-color: rgb(var(--md-sys-color-error));
caret-color: rgb(var(--md-sys-color-error));
}
/* Date, time and number icons */
INPUT::-webkit-outer-spin-button, INPUT::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
INPUT[type=number] {
-moz-appearance: textfield;
}
INPUT[type=date]::-webkit-calendar-picker-indicator,
INPUT[type=month]::-webkit-calendar-picker-indicator {
background-image: none;
background-color: rgb(var(--md-sys-color-on-surface));
-webkit-mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-webkit-mask-size: 1em 1em;
cursor: hand;
}
INPUT[type=time]::-webkit-calendar-picker-indicator {
background-image: none;
background-color: rgb(var(--md-sys-color-on-surface));
-webkit-mask: url('data:image/svg+xml;utf8,');
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center center;
-webkit-mask-size: 1em 1em;
cursor: hand;
}
INPUT:disabled[type=date]::-webkit-calendar-picker-indicator,
INPUT:disabled[type=month]:disabled::-webkit-calendar-picker-indicator,
INPUT:disabled[type=time]::-webkit-calendar-picker-indicator {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
visibility: visible;
}
.InputTimeZone {
display: inline-flex;
flex-wrap: nowrap;
column-gap: 1ch;
}
.InputTimeZone > .Off {
display: none;
}
.InputTimeZone > SELECT.SingleOption {
display: none;
}
A {
text-decoration: none;
color: rgb(var(--md-sys-color-primary));
}
A:hover {
text-decoration: underline;
cursor: pointer;
}
A > .Icon:first-child:not(:first-child) {
margin-right: 0.25ch;
}
A.TextLink:focus {
text-decoration: underline;
}
@media only screen and (min-width: 1001px) {
.MainMenu > .HorizontalSection, .MainMenu > .VerticalSection, .MainMenu > .Backdrop {
display: none !important;
}
}
@media only screen and (max-width: 1000px) {
.MainMenu > .RailSection {
display: none !important;
}
}
/* Rail */
.MainMenu > .RailSection {
background-color: rgb(var(--md-sys-color-surface));
min-width: 80px;
position: relative;
height: 100%;
z-index: 3;
top: 0;
}
.MainMenu > .RailSection > .NavRail {
height: 100%;
}
.MainMenu > .RailSection > .NavRail > .Panel {
padding: 16px 2px;
}
/* Vertical */
.MainMenu > .VerticalSection {
background-color: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)));
top: 0;
position: fixed;
z-index: 2;
width: 320px;
height: 100%;
border-radius: 0 2ch 2ch 0;
left: -320px;
transition: left 0.15s;
display: flex;
flex-direction: column;
overflow: hidden;
padding: 0 12px 16px 12px;
}
.MainMenu > .VerticalSection.Shown {
left: 0;
}
.MainMenu > .VerticalSection > .NavDrawer {
flex: 1;
}
/* Horizontal */
.MainMenu > .HorizontalSection {
display: flex;
flex-direction: row;
align-items: center;
height: 48px;
padding-left: 4px;
padding-right: 4px;
column-gap: 4px;
}
/* Toggle */
.MainMenu .MenuToggle {
height: 32px;
width: 32px;
font-size: 18pt;
line-height: 18pt;
display: flex;
align-items: center;
padding: 4px;
border-radius: 16px;
cursor: hand;
user-select: none;
text-decoration: none;
color: inherit;
}
.MainMenu > .VerticalSection > .MenuToggle {
margin: 8px 0 4px -8px;
}
.MainMenu .MenuToggle:hover {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity));
}
.MainMenu .MenuToggle:hover:active {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity));
}
.MainMenu .MenuToggle:focus {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity));
}
/* Backdrop */
.MainMenu > .Backdrop {
background-color: rgba(var(--md-sys-color-scrim), 0);
backdrop-filter: blur(3px);
position: fixed;
z-index: 1;
top: 0;
left: -100vw;
height: 100vh;
width: 100vw;
transition: background-color 0.5s;
}
.MainMenu > .Backdrop.On {
background-color: rgba(var(--md-sys-color-scrim), .5);
left: 0;
}
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 400;
src: url('material-symbols-outlined.woff2') format('woff2');
}
.Menu {
display: inline-block;
padding-left: 0.5ch;
padding-right: 0.5ch;
cursor: default;
}
.Menu, .Menu + DIV {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.Menu + DIV {
display: none;
text-align: initial;
position: absolute;
z-index: 1100;
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level2-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level2-tint-layer-opacity)));
background-color: rgb(var(--md-sys-color-surface));
color: rgb(var(--md-sys-color-on-surface));
box-shadow: var(--md-sys-elevation-level1-shadow);
border-radius: 3px;
padding: 0.25em 0 0.25em 0;
cursor: default;
}
.Menu:hover + DIV, .Menu + DIV:hover {
display: table;
}
.Menu + DIV > * {
padding: 0.5em 3ch 0.5em 1ch;
display: block;
white-space: nowrap;
}
.Menu + DIV > A, .Menu + DIV > .Anchor {
text-decoration: none;
color: inherit;
}
.Menu + DIV > A:hover, .Menu + DIV > .Anchor:hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
opacity: 1;
}
.Menu + DIV > A:hover:active, .Menu + DIV > .Anchor:hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
opacity: 1;
}
.Mermaid {
min-width: 0;
}
.Mermaid > .MermaidCanvas {
min-width: 0;
max-width: 100%;
width: 100%;
height: auto;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.Mermaid > .MermaidCanvas svg {
max-width: 100%;
height: auto;
}
.Mermaid > .MermaidCanvas.MermaidAlignLeft {
justify-content: flex-start;
}
.Mermaid > .MermaidCanvas.MermaidAlignRight {
justify-content: flex-end;
}
.Mermaid .MermaidSource {
display: none;
}
.Mermaid .MermaidError {
color: rgb(var(--md-sys-color-error));
font-family: var(--md-sys-typescale-body-medium-font);
padding: 1em;
}
.Mermaid > .MermaidCanvasZoomPan {
height: 400px;
overflow: hidden;
}
.Mermaid > .MermaidCanvasZoomPan svg {
max-width: none;
width: 100%;
height: 100%;
cursor: grab;
touch-action: none;
}
.MessageBar {
padding: 0.5em 1ch;
border-width: 0 0 0 5px;
border-style: solid;
}
.MessageBar.Primary {
color: rgb(var(--md-sys-color-on-primary-container));
border-color: rgb(var(--md-sys-color-on-primary-container));
background-color: rgb(var(--md-sys-color-primary-container));
background-image: linear-gradient(90deg, transparent 0%, transparent 75%, rgb(var(--md-sys-color-background)) 100%);
}
.MessageBar.Error {
color: rgb(var(--md-sys-color-on-error-container));
border-color: rgb(var(--md-sys-color-on-error-container));
background-color: rgb(var(--md-sys-color-error-container));
background-image: linear-gradient(90deg, transparent 0%, transparent 75%, rgb(var(--md-sys-color-background)) 100%);
}
@media only screen and (max-width: 600px) {
.MobileHide {
display: none;
}
}
@media only screen and (min-width: 601px) {
.MobileOnly {
display: none;
}
}
.Modal {
position: fixed;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
overflow: auto;
background-color: rgba(var(--md-sys-color-scrim), .5);
backdrop-filter: blur(3px);
z-index: 3000;
display: flex;
flex-direction: row;
align-items: center;
height: -webkit-fill-available;
animation-name: ModalShowBackdrop;
animation-duration: 0.5s;
}
.Modal > DIV {
background-color: rgb(var(--md-sys-color-background));
margin: auto;
width: 826px;
min-height: 240px;
max-width: calc(100vw - 4ch);
max-height: calc(100vh - 96px);
box-shadow: var(--md-sys-elevation-level5-shadow);
border-radius: 24px;
overflow-x: hidden;
overflow-y: auto;
border: solid 1px rgb(var(--md-sys-color-outline-variant));
position: relative;
padding: 0 16px;
animation-name: ModalShow;
animation-duration: 0.15s;
}
@media only screen and (max-width: 600px) {
.Modal {
align-items: end;
}
.Modal > DIV {
border-radius: 24px 24px 0 0;
max-width: calc(100vw - 16px);
border-bottom: 0px;
margin: 48px auto 0 auto;
}
}
.Modal > DIV > .Embed > .Page > .AppBar {
margin-left: -16px;
width: calc(100% + 32px);
padding-left: 16px;
padding-right: 16px;
}
@keyframes ModalShow {
from {top: 48px;}
to {top: 0;}
}
@keyframes ModalShowBackdrop {
from {background-color: rgba(var(--md-sys-color-scrim), 0)}
to {background-color: rgba(var(--md-sys-color-scrim), .5);}
}
.NavDrawer, .NavStrip {
font-family: var(--md-sys-typescale-title-small-font);
font-size: var(--md-sys-typescale-title-small-size);
font-weight: var(--md-sys-typescale-title-small-weight);
line-height: var(--md-sys-typescale-title-small-line-height);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
color: rgb(var(--md-sys-color-on-surface-variant));
overflow: hidden;
width: 100%;
height: fit-content;
}
.NavDrawer > .Slider, .NavStrip > .Slider {
height: 100%;
}
.NavDrawer > .Slider > .Panel > *:not(.NavTarget):not(.NavDrawer) {
margin-left: 16px;
margin-right: 16px;
}
.NavDrawer > .Slider, .NavStrip > .Slider {
display: flex;
flex-direction: row;
width: 100%;
transition: margin-left 0.15s;
}
.NavDrawer > .Slider > .Panel {
width: 100%;
display: flex;
flex-direction: column;
flex-shrink: 0;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
}
.NavStrip > .Slider > .Panel {
width: 100%;
height: 48px;
display: flex;
flex-direction: row;
flex-shrink: 0;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
align-items: center;
}
.NavDrawer > .Slider > .Panel::-webkit-scrollbar,
.NavStrip > .Slider > .Panel::-webkit-scrollbar {
display: none;
}
.AutoMargin {
margin: auto !important;
flex: 1;
}
.NavRail {
font-family: var(--md-sys-typescale-title-small-font);
font-size: var(--md-sys-typescale-title-small-size);
font-weight: var(--md-sys-typescale-title-small-weight);
line-height: var(--md-sys-typescale-title-small-line-height);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
color: rgb(var(--md-sys-color-on-surface-variant));
position: relative;
width: 80px;
height: fit-content;
z-index: 0;
}
.NavRail > .Panel {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
scrollbar-width: none;
-ms-overflow-style: none;
background-color: rgb(var(--md-sys-color-surface));
overflow-x: hidden;
overflow-y: auto;
display: flex;
flex-direction: column;
row-gap: 12px;
align-items: center;
}
.NavRail > .Slider {
position: absolute;
width: 100%;
height: 100%;
background-color: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)));
border-radius: 0 16px 16px 0;
transition: left 0.15s, width 0.15s;
overflow-y: auto;
overflow-x: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
}
.NavRail > .Slider > .Panel {
position: absolute;
width: calc(280px - 24px);
height: calc(100% - 32px);
top: 16px;
left: 12px;
transition: left 0.25s;
}
.NavTarget {
color: rgb(var(--md-sys-color-on-secondary-container));
}
.NavTarget:hover {
text-decoration: none;
}
*:not(.NavRail):not(.NavStrip) > .Panel > .NavTarget {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
display: flex;
flex-direction: row;
/* flex-wrap: wrap; */
column-gap: 12px;
align-items: center;
align-content: center;
/* height: 48px; */
min-height: 48px;
border-radius: 28px;
padding-left: 16px;
padding-right: 24px;
}
*:not(.NavRail):not(.NavStrip) > .Panel > .NavTarget.Tabulated {
margin-left: 32px;
}
.NavRail > .Panel > .NavTarget {
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
display: flex;
flex-direction: column;
row-gap: 4px;
align-items: center;
}
.NavStrip > .Slider > .Panel > .NavTarget {
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 2px;
align-items: center;
align-content: center;
/* height: 32px; */
min-height: 32px;
border-radius: 16px;
padding-left: 12px;
padding-right: 12px;
}
/* Icon */
.NavTarget > .TgtIcon {
font-size: 18pt;
height: 24px;
line-height: 18pt;
position: relative;
flex-shrink: 0;
flex-grow: 0;
}
.NavTarget > .TgtIcon.TgtNoIcon {
display: none;
}
.NavRail > .Panel > .NavTarget > .TgtIcon.TgtNoIcon {
display: initial;
}
.NavRail > .Panel > .NavTarget > .TgtIcon {
padding: 4px 16px;
border-radius: 16px;
height: 32px;
width: 56px;
}
.NavTarget > .TgtNext {
display: none;
flex-shrink: 0;
flex-grow: 0;
}
.NavTarget[data-next] > .TgtNext {
font-size: 18pt;
height: 24px;
line-height: 18pt;
display: initial;
margin-right: -4px;
}
.NavRail > .Panel > .NavTarget > .TgtNext {
display: none;
}
/* Label */
.NavTarget > .TgtLabel {
flex-grow: 1;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
/* Badges */
.NavTarget > .Badge {
display: none;
}
.NavDrawer > .Slider > .Panel > .NavTarget > .Badge {
display: initial;
margin-left: auto;
color: rgb(var(--md-sys-color-on-surface-variant));
white-space: nowrap;
}
.NavTarget > .TgtIcon > .MiniBadge {
display: none;
font-family: var(--md-sys-typescale-label-small-font);
font-size: var(--md-sys-typescale-label-small-size);
font-weight: var(--md-sys-typescale-label-small-weight);
line-height: var(--md-sys-typescale-label-small-line-height);
letter-spacing: var(--md-sys-typescale-label-small-tracking);
background-color: rgb(var(--md-sys-color-error));
color: rgb(var(--md-sys-color-on-error));
margin-top: -4px;
margin-left: -10px;
border-radius: 8px;
position: absolute;
padding: 0 4px;
height: 16px;
min-width: 16px;
text-align: center;
}
.NavTarget > .TgtIcon > .MiniBadge.MicroBadge {
height: 6px;
min-width: 6px;
padding: 0;
border-radius: 3px;
margin-left: -5px;
margin-top: 1px;
}
.NavRail > .Panel > .NavTarget > .TgtIcon > .MiniBadge,
.NavStrip > .Panel > .NavTarget > .TgtIcon > .MiniBadge {
display: initial;
}
/* Unselected */
.NavDrawer > .Slider > .Panel > .NavTarget:not(.Selected):hover,
.NavStrip > .Slider > .Panel > .NavTarget:not(.Selected):hover,
.NavRail > .Panel > .NavTarget:not(.Selected):hover > .TgtIcon {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity));
}
.NavDrawer > .Slider > .Panel > .NavTarget:not(.Selected):hover:active,
.NavStrip > .Slider > .Panel > .NavTarget:not(.Selected):hover:active,
.NavRail > .Panel > .NavTarget:not(.Selected):hover:active > .TgtIcon {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity));
}
.NavDrawer > .Slider > .Panel > .NavTarget:not(.Selected):focus,
.NavStrip > .Slider > .Panel > .NavTarget:not(.Selected):focus,
.NavRail > .Panel > .NavTarget:not(.Selected):focus > .TgtIcon {
background-color: rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity));
}
/* Selected */
.NavDrawer > .Slider > .Panel > .NavTarget.Selected,
.NavStrip > .Slider > .Panel > .NavTarget.Selected,
.NavRail > .Panel > .NavTarget.Selected > .TgtIcon {
background-color: rgb(var(--md-sys-color-secondary-container));
}
.NavDrawer > .Slider > .Panel > .NavTarget.Selected:hover,
.NavStrip > .Slider > .Panel > .NavTarget.Selected:hover,
.NavRail > .Panel > .NavTarget.Selected:hover > .TgtIcon {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity)));
text-decoration: none;
}
.NavDrawer > .Slider > .Panel > .NavTarget.Selected:hover:active,
.NavStrip > .Slider > .Panel > .NavTarget.Selected:hover:active,
.NavRail > .Panel > .NavTarget.Selected:hover:active > .TgtIcon {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity)));
}
.NavDrawer > .Slider > .Panel > .NavTarget.Selected:focus,
.NavStrip > .Slider > .Panel > .NavTarget.Selected:focus,
.NavRail > .Panel > .NavTarget.Selected:focus > .TgtIcon {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity)));
}
HTML {
height: -webkit-fill-available;
}
.Top {
color: rgb(var(--md-sys-color-on-background));
border-color: rgb(var(--md-sys-color-outline));
background-color: rgb(var(--md-sys-color-background));
fill: rgb(var(--md-sys-color-on-background));
margin: 0;
font-family: var(--md-sys-typescale-body-large-font);
font-size: var(--md-sys-typescale-body-large-size);
font-weight: var(--md-sys-typescale-body-large-weight);
line-height: var(--md-sys-typescale-body-large-line-height);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
text-align: initial;
width: 100vw;
min-height: 100vh;
min-height: -webkit-fill-available;
display: flex;
}
@media print {
.Top {
background-color: unset;
}
}
@media only screen and (max-width: 1000px) {
.Top {
font-family: var(--md-sys-typescale-body-medium-font);
font-size: var(--md-sys-typescale-body-medium-size);
font-weight: var(--md-sys-typescale-body-medium-weight);
line-height: var(--md-sys-typescale-body-medium-line-height);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
}
.FetchError {
display: none;
color: rgb(var(--md-sys-color-on-error-container));
background-color: rgb(var(--md-sys-color-error-container));
border-radius: 3px;
padding: 8px;
margin-top: 24px;
position: fixed;
z-index: 1000000;
left: 24px;
right: 24px;
box-shadow: var(--md-sys-elevation-level3-shadow);
align-items: flex-start;
}
.FetchError > I {
width: 24px;
height: 24px;
flex-grow: 0;
border-radius: 12px;
cursor: pointer;
text-align: center;
user-select: none;
}
.FetchError > I:hover {
background-color: rgba(var(--md-sys-color-on-error-container), var(--md-sys-state-hover-state-layer-opacity));
}
.FetchError > I:hover:active {
background-color: rgba(var(--md-sys-color-on-error-container), var(--md-sys-state-pressed-state-layer-opacity));
}
.FetchError > .ErrMsg {
flex-grow: 1;
text-align: center;
padding: 12px 12px 12px 36px;
font-family: 'Roboto Mono', monospace;
}
* {
box-sizing: border-box;
line-height: inherit;
}
*:focus {
outline: none;
}
.Page {
flex: 1;
height: max-content;
overflow-wrap: break-word;
}
.Top > .Page {
padding: 0 16px;
}
.Top > .Page.HasNav {
max-width: calc(100% - 80px);
}
.Page > .AppBar {
margin-left: -16px;
width: calc(100% + 32px);
padding-left: 16px;
padding-right: 16px;
}
NAV.TopNav {
height: 100vh;
width: 80px;
flex-shrink: 0;
display: none;
z-index: 2;
background-color: rgb(var(--md-sys-color-background));
}
@media only screen and (max-width: 1000px) {
NAV.TopNav {
height: 48px;
width: 100vw;
position: sticky;
top: 0;
}
.Top {
flex-direction: column;
}
.Top > .Page.HasNav {
max-width: initial;
}
.Top > .Page.HasNav > .AppBar {
padding-top: 0px;
top: 48px;
}
}
.Top > NAV.TopNav {
display: initial;
}
@media print {
.Top > NAV.TopNav {
display: none;
}
}
.Top > NAV.TopNav > .MainMenu > .RailSection {
position: fixed;
}
.State {
display: none;
}
.Disabled {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
cursor: auto;
}
P {
margin-block-start: 0;
margin-block-end: 0;
}
.Block {
max-width: 100%;
}
P:not(:first-child), .Block:not(:first-child) {
margin-block-start: 16px;
}
P:not(:last-child), .Block:not(:last-child) {
margin-block-end: 16px;
}
.Page > .Block:last-child {
margin-block-end: 16px;
}
.Empty {
display: none !important;
}
UL, OL {
margin: 0;
padding-inline-start: 3ch;
margin-block-start: 8px;
margin-block-end: 8px;
}
BLOCKQUOTE {
margin: 0px;
border-left: 1px solid rgb(var(--md-sys-color-outline-variant));
padding-left: 1ch;
}
@media print {
.NoPrint, .NoPrint * {
display: none !important;
}
@page {
size: A3;
}
}
/* Visually hides content while keeping it in the accessibility tree. Use on
live-region or label nodes that should be read by screen readers but not
displayed (e.g. inline error messages already shown via setCustomValidity). */
.VisuallyHidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.PageSizer {
white-space: nowrap;
}
.PageSizer SELECT {
margin-right: 1ch;
}
.Paginator {
width: 100%;
white-space: nowrap;
color: rgb(var(--md-sys-color-on-surface-variant));
}
.Paginator A {
border-radius: 3px;
color: inherit;
}
.Paginator A:hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
text-decoration: none;
}
.Paginator A:hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.Paginator A:focus {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
outline: none;
text-decoration: none;
}
.Paginator SPAN.Disabled {
border-radius: 3px;
color: rgb(var(--md-sys-color-on-surface-variant));
background-color: rgb(var(--md-sys-color-surface-variant));
}
.Paginator > * {
padding: 0.25em 1ch;
margin-left: 0.5ch;
display: inline-block;
}
.Paginator > .Ellipsis {
color: inherit;
background-color: inherit;
padding: 0;
vertical-align: bottom;
}
.PipeSeparator {
border-left: 1px solid rgb(var(--md-sys-color-outline-variant));
margin: 2px 0.5em 2px 0.5em;
}
.LiveProgress[max=0] {
visibility: hidden;
}
.LiveProgress > A {
display: none;
}
.LiveProgress > PROGRESS {
-webkit-appearance: none;
appearance: none;
height: 4px;
margin: 0;
width: 100%;
background-color: transparent;
color: rgb(var(--md-sys-color-primary));
}
.LiveProgress > PROGRESS::-webkit-progress-bar {
background-color: rgb(var(--md-sys-color-surface-variant));
}
.LiveProgress > PROGRESS::-webkit-progress-value {
background-color: rgb(var(--md-sys-color-primary));
}
.LiveProgress > PROGRESS::-moz-progress-bar {
background-color: rgb(var(--md-sys-color-primary));
}
.LiveProgress.Infinite {
background-image: linear-gradient(90deg,
rgb(var(--md-sys-color-surface-variant)) 0%,
rgb(var(--md-sys-color-surface-variant)) 20%,
rgb(var(--md-sys-color-primary)) 45%,
rgb(var(--md-sys-color-primary)) 55%,
rgb(var(--md-sys-color-surface-variant)) 80%,
rgb(var(--md-sys-color-surface-variant)) 100%);
background-size: 1000px 20px, 100% 100%, 100% 100%;
animation: ProgressAnimation 5s linear infinite;
}
.LiveProgress.Infinite > PROGRESS::-webkit-progress-bar {
background-color: transparent;
}
@keyframes ProgressAnimation {
from { background-position: 0px 0px; }
to { background-position: 2000px 0px; }
}
.ql-mention-list-container{background-color:#fff;border:1px solid #f0f0f0;border-radius:4px;box-shadow:0 2px 12px 0 rgba(30,30,30,.08);overflow:auto;width:270px;z-index:9001}.ql-mention-loading{font-size:12pt;line-height:44px;padding:0 20px;vertical-align:middle}.ql-mention-list{list-style:none;margin:0;overflow:hidden;padding:0}.ql-mention-list-item{cursor:pointer;font-size:12pt;line-height:44px;padding:0 20px;vertical-align:middle}.ql-mention-list-item.disabled{cursor:auto}.ql-mention-list-item.selected{background-color:#d3e1eb;text-decoration:none}.mention{background-color:#d3e1eb;border-radius:6px;height:24px;margin-right:2px;padding:3px 0;user-select:all;width:65px}.mention>span{margin:0 3px}
.ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked] > .ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked] > .ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor > *{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li > .ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked] > .ql-ui,.ql-editor li[data-list=unchecked] > .ql-ui{color:#777}.ql-editor li[data-list=bullet] > .ql-ui:before{content:'\2022'}.ql-editor li[data-list=checked] > .ql-ui:before{content:'\2611'}.ql-editor li[data-list=unchecked] > .ql-ui:before{content:'\2610'}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered] > .ql-ui:before{content:counter(list-0, decimal) '. '}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1 > .ql-ui:before{content:counter(list-1, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2 > .ql-ui:before{content:counter(list-2, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3 > .ql-ui:before{content:counter(list-3, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4 > .ql-ui:before{content:counter(list-4, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5 > .ql-ui:before{content:counter(list-5, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6 > .ql-ui:before{content:counter(list-6, decimal) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7 > .ql-ui:before{content:counter(list-7, lower-alpha) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8 > .ql-ui:before{content:counter(list-8, lower-roman) '. '}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9 > .ql-ui:before{content:counter(list-9, decimal) '. '}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl > .ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank::before{color:rgba(0,0,0,0.6);content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:'';display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media (pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow{box-sizing:border-box}.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:'';display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label::before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label::before,.ql-snow .ql-picker.ql-header .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{content:'Heading 1'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{content:'Heading 2'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{content:'Heading 3'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{content:'Heading 4'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{content:'Heading 5'}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{content:'Heading 6'}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label::before,.ql-snow .ql-picker.ql-font .ql-picker-item::before{content:'Sans Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{content:'Serif'}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{content:'Monospace'}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label::before,.ql-snow .ql-picker.ql-size .ql-picker-item::before{content:'Normal'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{content:'Small'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{content:'Large'}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{content:'Huge'}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:'Helvetica Neue','Helvetica','Arial',sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:rgba(0,0,0,0.2) 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label{border-color:#ccc}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow + .ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip::before{content:"Visit URL:";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action::after{border-right:1px solid #ccc;content:'Edit';margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove::before{content:'Remove';margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action::after{border-right:0;content:'Save';padding-right:0}.ql-snow .ql-tooltip[data-mode=link]::before{content:"Enter link:"}.ql-snow .ql-tooltip[data-mode=formula]::before{content:"Enter formula:"}.ql-snow .ql-tooltip[data-mode=video]::before{content:"Enter video:"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}
/*# sourceMappingURL=quill.snow.css.map*/
.Rating {
display: inline-block;
white-space: nowrap;
user-select: none;
}
.Rating .Star > .Icon {
margin-right: 0.25ch;
border-radius: 1em;
font-size: 1.5em;
line-height: 1;
width: 1em;
height: 1em;
display: inline-block;
}
/* Full */
.Rating .Star.Full > .Icon {
font-variation-settings: 'FILL' 1;
color: rgb(var(--md-sys-color-primary));
}
.Rating:not([disabled]) .Star.Full:hover > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
.Rating:not([disabled]) .Star.Full:hover:active > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
.Rating:not([disabled]) .Star.Full:focus > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
/* Not full */
.Rating:not([disabled]) .Star:not(.Full):hover > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}
.Rating:not([disabled]) .Star:not(.Full):hover:active > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.Rating:not([disabled]) .Star:not(.Full):focus > .Icon {
cursor: hand;
outline: solid 0.25em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
}
/* Disabled */
.Rating[disabled] .Star > .Icon {
color: rgba(var(--md-sys-color-on-background), var(--md-sys-state-disabled-state-layer-opacity));
}
.RichDropdown {
background-color: transparent;
color: rgb(var(--md-sys-color-on-surface));
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 3px;
outline: none;
padding: 0.5em 0.5ch;
width: 100%;
/* The wrapper is a with block-level children. Flex-column gives it
block layout without reserving an end-of-line baseline gap under the
last block child. */
display: flex;
flex-direction: column;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 5px top 50%;
background-size: 1.4em;
font-family: var(--md-sys-typescale-body-large-font);
font-size: var(--md-sys-typescale-body-large-size);
font-weight: var(--md-sys-typescale-body-large-weight);
line-height: var(--md-sys-typescale-body-large-line-height);
letter-spacing: var(--md-sys-typescale-body-large-tracking);
}
/* Disabled */
.RichDropdown[disabled] {
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
border-color: rgba(var(--md-sys-color-outline), var(--md-sys-state-disabled-container-state-layer-opacity));
}
/* Valid */
.RichDropdown:not([disabled]):focus {
border-color: rgb(var(--md-sys-color-primary));
caret-color: rgb(var(--md-sys-color-primary));
}
.RichDropdown:not([disabled]):hover:not(:focus) {
border-color: rgb(var(--md-sys-color-on-surface));
}
/* Invalid */
.RichDropdown.Invalid {
border-color: rgb(var(--md-sys-color-error));
caret-color: rgb(var(--md-sys-color-error));
}
.RichDropdown.Invalid:hover:not(:focus) {
border-color: rgb(var(--md-sys-color-on-error-container));
}
.RichDropdown > UL {
background-color: rgb(var(--md-sys-color-surface));
box-shadow: var(--md-sys-elevation-level1-shadow);
border-radius: 3px;
padding: 0.25em 0 0.25em 0;
z-index: 1100;
position: absolute;
display: none;
width: 100%;
margin: 0;
overflow-y: auto;
border: solid 1px rgb(var(--md-sys-color-outline-variant));
}
.RichDropdown > UL > LI {
padding: 0.5em 36px 0.5em 0.5ch;
display: block;
cursor: default;
}
.RichDropdown > DIV {
padding-right: 32px;
}
.RichDropdown > UL > LI:not(:first-child) {
border-top: solid 1px rgb(var(--md-sys-color-outline-variant));
}
.RichDropdown > UL > LI:hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}
.RichDropdown > UL > LI:hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
@font-face {
font-family: 'Roboto Flex';
font-style: oblique 0deg 10deg;
font-weight: 100 900;
font-stretch: 100%;
src: url('roboto-flex-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Roboto Mono';
font-style: normal;
font-weight: 100 700;
src: url('roboto-mono-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
.Rule {
border: none;
border-top: solid 1px rgb(var(--md-sys-color-outline-variant));
}
.SidePanel {
position: fixed;
z-index: 2000;
top: 0;
right: 0;
height: 100vh;
padding-left: 4px;
/*width*/
cursor: ew-resize;
user-select: none;
overflow-y: auto;
max-width: 90vw;
min-width: 240px;
display: flex;
align-items: stretch;
animation-name: SidePanelShow;
animation-duration: 0.15s;
}
.SidePanel > DIV {
cursor: initial;
user-select: initial;
padding: 0 16px;
height: fit-content;
min-height: 100%;
width: 100%;
box-shadow: var(--md-sys-elevation-level5-shadow);
border-left: solid 1px rgb(var(--md-sys-color-outline));
background-color: rgb(var(--md-sys-color-background));
}
@keyframes SidePanelShow {
from {right: -48px;}
to {right: 0;}
}
.Snackbar {
display: block;
position: fixed;
bottom: -10em;
left: 12px;
z-index: 1000002;
width: 36ch;
min-height: 4em;
max-width: 90vw;
max-height: 8em;
border-radius: 0 0 3px 3px;
box-shadow: var(--md-sys-elevation-level1-shadow);
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level3-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level3-tint-layer-opacity)));
background-color: rgb(var(--md-sys-color-inverse-surface));
color: rgb(var(--md-sys-color-inverse-on-surface));
padding: 0.5em 1ch;
overflow-wrap: break-word;
transition: bottom 0.25s;
font-family: var(--md-sys-typescale-body-medium-font);
font-size: var(--md-sys-typescale-body-medium-size);
font-weight: var(--md-sys-typescale-body-medium-weight);
line-height: var(--md-sys-typescale-body-medium-line-height);
letter-spacing: var(--md-sys-typescale-body-medium-tracking);
}
.Snackbar.Shown {
bottom: 2em;
}
.Snackbar A {
color: rgb(var(--md-sys-color-inverse-primary));
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
}
.Top > .Page.HasNav .Snackbar {
left: 92px;
}
@media only screen and (max-width: 1000px) {
.Top > .Page.HasNav .Snackbar {
left: 12px;
}
}
A.Sorter {
color: inherit;
text-decoration: none;
border-bottom: dashed 1px rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-disabled-state-layer-opacity));
}
A.Sorter:hover, A.Sorter:focus {
border-bottom: solid 1px rgb(var(--md-sys-color-on-surface-variant));
}
.Splitter {
display: flex;
column-gap: 1ch;
row-gap: 0.5em;
min-width: 0;
}
.Splitter.Wrap {
flex-wrap: wrap;
}
.Splitter.Wrap.Width_600 > DIV {
min-width: 100%;
}
.Splitter > DIV {
min-width: 0;
}
.SuggestionChip {
font-family: var(--md-sys-typescale-label-large-font);
font-size: var(--md-sys-typescale-label-large-size);
font-weight: var(--md-sys-typescale-label-large-weight);
line-height: var(--md-sys-typescale-label-large-line-height);
letter-spacing: var(--md-sys-typescale-label-large-tracking);
user-select: none;
border: solid 1px rgb(var(--md-sys-color-outline));
border-radius: 8px;
height: 32px;
display: inline-flex;
align-items: center;
padding: 5px 16px;
vertical-align: bottom;
max-width: 100%;
color: rgb(var(--md-sys-color-on-surface-variant));
}
.SuggestionChip.Disabled {
border-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
A.SuggestionChip:not(.Disabled):hover {
text-decoration: none;
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-hover-state-layer-opacity)));
}
A.SuggestionChip:not(.Disabled):focus {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-focus-state-layer-opacity)));
}
A.SuggestionChip:not(.Disabled):hover:active {
background-image: linear-gradient(
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity)),
rgba(var(--md-sys-color-on-surface-variant), var(--md-sys-state-pressed-state-layer-opacity)));
}
.SuggestionChip > .Icon:first-child {
margin-left: -8px;
margin-right: 8px;
font-size: 13.5pt;
}
.DataTable {
width: 100%;
overflow-x: auto;
}
TABLE {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
}
.DataTable > TABLE, .DataTable > TABLE > TBODY, .DataTable > TABLE > TBODY > TR {
width: 100%;
}
.DataTable > TABLE > TBODY > TR:last-child {
border-radius: 0 0 24px 24px;
}
.DataTable > TABLE > TBODY > TR > TH {
font-weight: 500;
color: rgb(var(--md-sys-color-on-surface-variant));
background-color: rgb(var(--md-sys-color-surface));
background-image: linear-gradient(
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)),
rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity)));
}
/* Reduce flicker */
.DataTable:not(.WidthObserved) {
visibility: hidden;
}
/* NoHeader */
.DataTable.NoHeader > TABLE > TBODY > TR:first-child > TH {
display: none;
}
/* Border */
.DataTable > TABLE > TBODY > TR > TD,
.DataTable > TABLE > TBODY > TR > TH {
border-width: 1px 0 0 1px;
border-style: solid;
border-color: rgb(var(--md-sys-color-surface-variant));
}
.DataTable > TABLE > TBODY > TR:last-child > TD, .DataTable > TABLE > TBODY > TR:last-child > TH {
border-bottom: solid 1px rgb(var(--md-sys-color-surface-variant));
}
.DataTable.Width_600 > TABLE > TBODY > TR > .LastNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR > .LastWide,
.DataTable.Width1200_ > TABLE > TBODY > TR > .LastExpanded {
border-right: solid 1px rgb(var(--md-sys-color-surface-variant));
}
/* Border radius */
.DataTable.Width_600 > TABLE > TBODY > TR:first-child > .FirstNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR:first-child > .FirstWide,
.DataTable.Width1200_ > TABLE > TBODY > TR:first-child > .FirstExpanded {
border-top-left-radius: 24px;
}
.DataTable.Width_600 > TABLE > TBODY > TR:first-child > .LastNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR:first-child > .LastWide,
.DataTable.Width1200_ > TABLE > TBODY > TR:first-child > .LastExpanded {
border-top-right-radius: 24px;
}
.DataTable.Width_600 > TABLE > TBODY > TR:last-child > .LastNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR:last-child > .LastWide,
.DataTable.Width1200_ > TABLE > TBODY > TR:last-child > .LastExpanded {
border-bottom-right-radius: 24px;
}
.DataTable.Width_600 > TABLE > TBODY > TR:last-child > .FirstNarrow,
.DataTable.Width600_1200 > TABLE > TBODY > TR:last-child > .FirstWide,
.DataTable.Width1200_ > TABLE > TBODY > TR:last-child > .FirstExpanded {
border-bottom-left-radius: 24px;
}
/* No border */
.DataTable.NoBorder > TABLE > TBODY > TR > * {
border: none !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR > TD {
border-radius: 0 !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR > .FirstNarrow,
.DataTable.NoBorder > TABLE > TBODY > TR > .FirstWide,
.DataTable.NoBorder > TABLE > TBODY > TR > .FirstExpanded {
border-radius: 12px 0 0 12px !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR > .LastNarrow,
.DataTable.NoBorder > TABLE > TBODY > TR > .LastWide,
.DataTable.NoBorder > TABLE > TBODY > TR > .LastExpanded {
border-radius: 0 12px 12px 0 !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.FirstNarrow,
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.FirstWide,
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.FirstExpanded {
padding-left: 0 !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.LastNarrow,
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.LastWide,
.DataTable.NoBorder > TABLE > TBODY > TR:not([data-href]) > TD.LastExpanded {
padding-right: 0 !important;
}
.DataTable.NoBorder > TABLE > TBODY > TR > TH {
padding: 8px 12px;
}
.DataTable.NoBorder > TABLE > TBODY > TR > TD {
padding: 6px 12px;
}
.DataTable.NoBorder.Width_600 > TABLE > TBODY > TR > TH,
.DataTable.NoBorder.Width_600 > TABLE > TBODY > TR > TD {
padding: 4px 8px;
}
/* Visibility */
.DataTable.Width_600 > TABLE > TBODY > TR > TH:not(.Narrow),
.DataTable.Width_600 > TABLE > TBODY > TR > TD:not(.Narrow) {
display: none;
}
.DataTable.Width600_1200 > TABLE > TBODY > TR > TH:not(.Wide),
.DataTable.Width600_1200 > TABLE > TBODY > TR > TD:not(.Wide) {
display: none;
}
.DataTable.Width1200_ > TABLE > TBODY > TR > TH:not(.Expanded),
.DataTable.Width1200_ > TABLE > TBODY > TR > TD:not(.Expanded) {
display: none;
}
/* Cell padding */
.DataTable > TABLE > TBODY > TR > TH {
padding: 16px 12px;
}
.DataTable > TABLE > TBODY > TR > TD {
padding: 12px 12px;
}
.DataTable.Width_600 > TABLE > TBODY > TR > TH {
padding: 16px 8px;
}
.DataTable.Width_600 > TABLE > TBODY > TR > TD {
padding: 12px 8px;
}
.DataTable > TABLE > TBODY > TR > .FirstNarrow,
.DataTable > TABLE > TBODY > TR > .FirstWide,
.DataTable > TABLE > TBODY > TR > .FirstExpanded {
padding-left: 16px;
}
.DataTable > TABLE > TBODY > TR > .LastNarrow,
.DataTable > TABLE > TBODY > TR > .LastWide,
.DataTable > TABLE > TBODY > TR > .LastExpanded {
padding-right: 16px;
}
/* Row height */
.DataTable > TABLE > TBODY > TR.MinRowHt1 {
min-height: calc(1em + 1 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR.MinRowHt2 {
min-height: calc(1em + 2 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR.MinRowHt3 {
min-height: calc(1em + 3 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR.MinRowHt4 {
min-height: calc(1em + 4 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR.MinRowHt5 {
min-height: calc(1em + 5 * var(--md-sys-typescale-body-medium-line-height));
}
.DataTable > TABLE > TBODY > TR:first-child {
border: solid 1px rgb(var(--md-sys-color-surface-variant));
border-radius: 24px 24px 0 0;
}
/* Hover */
.DataTable > TABLE > TBODY > TR[data-href]:hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
cursor: pointer;
}
.DataTable > TABLE > TBODY > TR[data-href]:hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.DataTable > TABLE > TBODY > TR[data-href]:focus {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
}
/* Empty row */
.DataTable > TABLE > TBODY > TR.EmptyRow > TD {
font-family: var(--md-sys-typescale-label-medium-font);
font-size: var(--md-sys-typescale-label-medium-size);
font-weight: var(--md-sys-typescale-label-medium-weight);
line-height: var(--md-sys-typescale-label-medium-line-height);
letter-spacing: var(--md-sys-typescale-label-medium-tracking);
text-align: center;
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
}
/* Vertical align */
.DataTable.VAlignTop > TABLE > TBODY > TR,
.DataTable > TABLE > TBODY > TR.VAlignTop {
vertical-align: top;
}
.DataTable.VAlignBottom > TABLE > TBODY > TR,
.DataTable > TABLE > TBODY > TR.VAlignBottom {
vertical-align: bottom;
}
.DataTable.VAlignMiddle> TABLE > TBODY > TR,
.DataTable > TABLE > TBODY > TR.VAlignMiddle {
vertical-align: middle;
}
.TabSwitcher > .TabLabels {
border-bottom: solid 1px rgb(var(--md-sys-color-surface-variant));
}
.TabSwitcher.NoLine > .TabLabels {
border-bottom: 0;
}
.TabSwitcher > .TabLabels > .Toolbar > DIV {
column-gap: 0;
}
.TabSwitcher .TabLabel {
font-family: var(--md-sys-typescale-title-small-font);
font-size: var(--md-sys-typescale-title-small-size);
font-weight: var(--md-sys-typescale-title-small-weight);
line-height: var(--md-sys-typescale-title-small-line-height);
letter-spacing: var(--md-sys-typescale-title-small-tracking);
display: inline-block;
padding: 4px 12px 0 12px;
color: rgb(var(--md-sys-color-on-surface-variant));
cursor: hand;
}
.TabSwitcher .TabLabel.SingleIcon {
padding: 4px 8px 0 8px;
}
.TabSwitcher .TabLabel.SingleIcon > DIV > .Icon {
font-size: 1.5em !important;
}
.TabSwitcher .TabLabel.Selected {
color: rgb(var(--md-sys-color-primary));
}
.TabSwitcher .TabLabel > U {
display: block;
margin: auto;
margin-top: 4px;
max-width: 48px;
height: 3px;
background-color: transparent;
}
.TabSwitcher .TabLabel.Selected > U {
background-color: rgb(var(--md-sys-color-primary));
border-radius: 3px 3px 0 0;
}
.TabSwitcher .TabLabel:not(.Selected):hover {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}
.TabSwitcher .TabLabel:not(.Selected):hover:active {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.TabSwitcher .TabLabel:not(.Selected):focus {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
}
.TabSwitcher .TabLabel.Selected:hover {
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
.TabSwitcher .TabLabel.Selected:hover:active {
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
.TabSwitcher .TabLabel.Selected:focus {
background-color: rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
.TabSwitcher .TabBody:not(.selected) {
display: none;
}
@media only screen and (max-width: 600px) {
.TabSwitcher .TabLabel {
padding: 4px 8px 0 8px;
}
.TabSwitcher .TabLabel.SingleIcon {
padding: 4px 4px 0 4px;
}
}
/* AppBar appearance */
.AppBar .TabSwitcher:last-child {
margin-bottom: -0.5rem;
}
.AppBar .TabSwitcher > .TabLabels {
border-bottom: none;
}
.TearOffCalendar {
width: 72px;
border-radius: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgba(var(--md-sys-color-surface-tint), var(--md-sys-elevation-level1-tint-layer-opacity));
text-align: center;
}
.TearOffCalendar > DIV:first-child {
width: 100%;
color: rgb(var(--md-sys-color-inverse-on-surface));
background-color: rgb(var(--md-sys-color-inverse-surface));
}
.TearOffCalendar > DIV:last-child {
min-width: 50px;
border-top: dotted 1px rgb(var(--md-sys-color-outline-variant));
padding-top: 2px;
}
.TextAlign.Center {
text-align: center;
}
.TextAlign.Right {
text-align: right;
}
.TextAlign.Left {
text-align: left;
}
.TextColorDefault {
color: rgb(var(--md-sys-color-on-background));
}
.TextColorInverse {
color: rgb(var(--md-sys-color-inverse-on-surface));
background-color: rgb(var(--md-sys-color-inverse-surface));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorPrimary {
color: rgb(var(--md-sys-color-primary));
}
.TextColorOnPrimary {
color: rgb(var(--md-sys-color-on-primary-container));
background-color: rgb(var(--md-sys-color-primary-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorSecondary {
color: rgb(var(--md-sys-color-secondary));
}
.TextColorOnSecondary {
color: rgb(var(--md-sys-color-on-secondary-container));
background-color: rgb(var(--md-sys-color-secondary-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorTertiary {
color: rgb(var(--md-sys-color-tertiary));
}
.TextColorOnTertiary {
color: rgb(var(--md-sys-color-on-tertiary-container));
background-color: rgb(var(--md-sys-color-tertiary-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorDisabled {
color: rgba(var(--md-sys-color-on-background), var(--md-sys-state-disabled-state-layer-opacity));
}
.TextColorDeemphasized {
color: rgba(var(--md-sys-color-on-background), calc(1 - var(--md-sys-state-disabled-state-layer-opacity)));
}
.TextColorError {
color: rgb(var(--md-sys-color-error));
}
.TextColorOnError {
color: rgb(var(--md-sys-color-on-error-container));
background-color: rgb(var(--md-sys-color-error-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextColorOK {
color: rgb(var(--md-sys-color-ok));
}
.TextColorOnOK {
color: rgb(var(--md-sys-color-on-ok-container));
background-color: rgb(var(--md-sys-color-ok-container));
padding: 0 0.5ch;
border-radius: 3px;
}
.TextBold {
font-weight: 500;
font-variation-settings: "GRAD" 150;
}
.TextLightweight {
font-weight: 200;
font-variation-settings: "GRAD" -200;
}
.TextItalic {
font-variation-settings: "slnt" -10;
}
.TextMonospace {
font-family: 'Roboto Mono', monospace;
}
.Toggle {
height: 32px;
width: 52px;
border-radius: 16px;
display: inline-flex;
align-items: center;
user-select: none;
}
.Toggle:not([disabled]) {
cursor: hand;
}
.Toggle > INPUT:first-child {
display: none;
}
.Toggle + .Toggle {
margin-left: 1ch;
}
/* Thumb */
.Toggle > .Thumb {
display: flex;
align-items: center;
width: 24px;
height: 24px;
border-radius: 12px;
line-height: 12pt;
font-size: 12pt;
padding: 4px;
transition: margin-left 0.15s;
}
.Toggle.Selected > .Thumb > .Icon:first-child {
display: none;
}
.Toggle:not(.Selected) > .Thumb > .Icon:nth-child(2) {
display: none;
}
/* Disabled */
.Toggle[disabled].Selected {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.Toggle[disabled].Selected > .Thumb {
background-color: rgb(var(--md-sys-color-surface));
color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
margin-left: 26px;
}
.Toggle[disabled]:not(.Selected) {
border: solid 2px rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-container-state-layer-opacity));
background-color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-disabled-container-state-layer-opacity));
}
.Toggle[disabled]:not(.Selected) > .Thumb {
background-color: rgba(var(--md-sys-color-on-surface), var(--md-sys-state-disabled-state-layer-opacity));
color: rgba(var(--md-sys-color-surface-variant), var(--md-sys-state-disabled-state-layer-opacity));
margin-left: 2px;
}
/* Selected */
.Toggle.Selected:not([disabled]) {
background-color: rgb(var(--md-sys-color-primary));
}
.Toggle.Selected:not([disabled]) > .Thumb {
background-color: rgb(var(--md-sys-color-on-primary));
color: rgb(var(--md-sys-color-on-primary-container));
margin-left: 26px;
}
.Toggle.Selected:not([disabled]):hover > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-hover-state-layer-opacity));
}
.Toggle.Selected:not([disabled]):hover:active > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-pressed-state-layer-opacity));
}
.Toggle.Selected:not([disabled]):focus > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-primary), var(--md-sys-state-focus-state-layer-opacity));
}
/* Unselected */
.Toggle:not(.Selected):not([disabled]) {
border: solid 2px rgb(var(--md-sys-color-outline));
background-color: rgb(var(--md-sys-color-surface-variant));
}
.Toggle:not(.Selected):not([disabled]) > .Thumb {
background-color: rgb(var(--md-sys-color-outline));
color: rgb(var(--md-sys-color-surface-variant));
margin-left: 2px;
}
.Toggle:not(.Selected):not([disabled]):hover > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-hover-state-layer-opacity));
}
.Toggle:not(.Selected):not([disabled]):hover:active > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-pressed-state-layer-opacity));
}
.Toggle:not(.Selected):not([disabled]):focus > .Thumb {
outline: solid 0.5em rgba(var(--md-sys-color-on-surface), var(--md-sys-state-focus-state-layer-opacity));
}
.Toolbar {
display: flex;
column-gap: 1ch;
row-gap: 0.5em;
width: 100%;
}
.Toolbar > DIV {
display: flex;
column-gap: 1ch;
row-gap: 0.5em;
min-width: 0;
height: 100%;
}
.Toolbar > DIV > DIV {
min-width: 0;
}
.Toolbar.Wrap, .Toolbar.Wrap > DIV {
flex-wrap: wrap;
}
.Toolbar > DIV:nth-child(2) {
justify-content: flex-end;
margin-left: auto;
}
.Toolbar.AlignCenter, .Toolbar.AlignCenter > DIV {
align-items: center;
}
.Toolbar.AlignTop, .Toolbar.AlignTop > DIV {
align-items: flex-start;
}
.Toolbar.AlignBottom, .Toolbar.AlignBottom > DIV {
align-items: flex-end;
}
.Page > .Toolbar:last-child,
.InputForm > FORM > DIV > .Toolbar:last-child {
padding-top: 16px;
margin-top: -16px;
position: sticky;
bottom: 0;
padding-bottom: 16px;
z-index: 1;
background-image: linear-gradient(
rgba(var(--md-sys-color-background), 0),
rgba(var(--md-sys-color-background), 1) 16px);
}
@media print {
.Page > .Toolbar:last-child,
.InputForm > FORM > DIV > .Toolbar:last-child {
background-image: unset;
}
}