@import "../fonts/roboto/stylesheet.css";
@import "../fonts/libre_barcode_39_text/stylesheet.css";
#__console-container {
  position: absolute !important;
}
#__debug-bar {
  margin: 0px 0 0 0 !important;
}
:root {
  --color-workspace-background: #e6e5e5;
  --color-workspace-foreground: #353131;
  --color-contrast-background: #404040;
  --color-contrast-middleground: #bcbcbc;
  --color-contrast-foreground: #FFFFFF;
  --color-surface-background: #FFFFFF;
  --color-surface-faded-opacity: 1;
  --color-surface-middleground: #e4e3e3;
  --color-surface-faded: #d0d0d0;
  --color-surface-halftone: #888888;
  --color-surface-foreground-bold: #6b6868;
  --color-surface-foreground: #353131;
  --color-highlight-foreground: #FFFFFF;
  --color-highlight-background: #444444;
  --color-highlight-faded: #e6e5e5;
  --color-highlight-foreground-inverted: #FFFFFF;
  --color-highlight-background-inverted: #444444;
  --color-warning: #FF9800;
  --color-danger: #F44336;
  --color-success: #4CAF50;
  --color-info: #2196F3;
  --color-grayed: #e4e3e3;
  --color-shadow-text: #000;
  --color-shadow: rgba(0, 0, 0, 0.25);
  --color-shadow-dark: rgba(0, 0, 0, 0.5);
  --spacing-minimum: calc(var(--spacing-normal) / 2);
  --spacing-normal: 5px;
  --spacing-separated: calc(var(--spacing-normal) * 2);
  --spacing-isolated: calc(var(--spacing-normal) * 4);
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  --font-size-small: 0.8rem;
  --font-size-normal: 15px;
  --font-size-large: 1.2rem;
  --font-size-big: 1.4rem;
}
:root {
  --is-responsive-alternate: 0;
}
accordion {
  display: flex;
  flex-direction: column;
  margin-top: var(--spacing-separated);
}
accordion > input[type="radio"] {
  display: none;
}
accordion > input[type="radio"]:checked + fold {
  margin-top: var(--spacing-separated);
  margin-bottom: var(--spacing-separated);
}
accordion > input[type="radio"]:checked + fold > animator {
  max-height: 200vh;
}
accordion > fold:first-of-type {
  margin-top: 0px !important;
}
accordion > fold:last-of-type {
  margin-bottom: 0px !important;
}
accordion > fold {
  display: flex;
  flex-direction: column;
  margin-top: -1px;
  box-shadow: 0 3px 3px var(--color-shadow);
  border: 1px solid #cccccc87;
  background-color: var(--color-surface-background);
  transition: margin 350ms ease-in-out 1ms;
}
accordion > fold > label {
  text-transform: uppercase;
  display: block;
  color: inherit;
  font-size: inherit;
  padding: var(--spacing-isolated);
  line-height: 2em;
  white-space: nowrap;
  cursor: pointer;
  min-height: unset;
}
accordion > fold > animator {
  overflow: hidden;
  max-height: 0px;
  transition: max-height 350ms ease-in-out 1ms;
}
accordion > fold > animator > content {
  padding: var(--spacing-separated);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
accordion > fold > animator > content spacer {
  text-align: center;
  padding: var(--spacing-normal);
}
accordion > fold > animator > content:not(.static)::after {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
accordion > fold > animator > content:not(.static) break {
  display: contents;
}
accordion > fold > animator > content:not(.static) break::before {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
accordion > fold > animator > content:not(.static) break::after {
  content: '';
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
accordion > fold > animator > content.static {
  --responsiveness: 0;
}
accordion > fold > animator > content.static break {
  display: block;
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
accordion > fold > animator > content.static break.whitespace {
  height: var(--spacing-isolated);
}
accordion > fold > animator > content > * {
  --weight: 100;
  flex-basis: calc(var(--weight) * 1%);
  flex-grow: calc(var(--weight) * var(--responsiveness, 1));
  flex-shrink: calc((100 - var(--weight)) * var(--responsiveness, 1));
  min-width: calc(var(--responsiveness, 1) * calc(var(--break-size, 0ch) / var(--responsive-depth, 1)));
  @container style(--is-responsive-alternate:0) {
	--is-responsive-alternate: 1;
	--responsive-depth: calc(var(--responsive-inherited--odd, 0) + 1);
	--responsive-inherited--even: var(--responsive-depth);
}

@container style(--is-responsive-alternate:1) {
	--is-responsive-alternate: 0;
	--responsive-depth: calc(var(--responsive-inherited--even, 0) + 1);
	--responsive-inherited--odd: var(--responsive-depth);
}
  /*&:before {
			counter-reset: variable ~"var(--responsive-depth)";
			content: counter(variable);
		}*/
}
accordion > fold > animator > content > *.large {
  --weight: 100;
  --break-size: 40ch;
}
accordion > fold > animator > content > *.medium-large {
  --weight: 66.6;
  --break-size: 40ch;
}
accordion > fold > animator > content > *.intermedium {
  --weight: 75;
}
accordion > fold > animator > content > *.medium {
  --weight: 50;
}
accordion > fold > animator > content > *.third,
accordion > fold > animator > content > *.medium-small {
  --weight: 33.3;
  --break-size: 40ch;
}
accordion > fold > animator > content > *.small-medium {
  --weight: 37.5;
}
accordion > fold > animator > content > *.small {
  --weight: 25;
  --break-size: 20ch;
}
accordion > fold > animator > content > *.extra-small,
accordion > fold > animator > content > *.mini {
  --weight: 12.5;
  --break-size: 10ch;
}
accordion > fold > animator > content > *.micro {
  --weight: 6.25;
  --break-size: 10ch;
}
accordion > fold > animator > content > *.size-4 {
  --weight: 4.3;
}
accordion > fold > animator > content > *.size-5 {
  --weight: 5.8;
}
accordion > fold > animator > content > *.size-6 {
  --weight: 6.3;
}
accordion > fold > animator > content > *.size-8 {
  --weight: 8.3;
}
accordion > fold > animator > content > *.size-10 {
  --weight: 10;
}
accordion > fold > animator > content > *.size-11 {
  --weight: 11.66;
}
accordion > fold > animator > content > *.size-14 {
  --weight: 14.28;
}
accordion > fold > animator > content > *.size-16 {
  --weight: 16.6;
}
accordion > fold > animator > content > *.size-20 {
  --weight: 20;
}
accordion > fold > animator > content > *.size-30 {
  --weight: 30;
}
accordion > fold > animator > content > *.size-33 {
  --weight: 33.3;
}
accordion > fold > animator > content > *.size-40 {
  --weight: 40;
}
accordion > fold > animator > content > *.size-50 {
  --weight: 50;
}
accordion > fold > animator > content > *.size-60 {
  --weight: 60;
}
accordion > fold > animator > content > *.size-66 {
  --weight: 66.6;
}
accordion > fold > animator > content > *.size-70 {
  --weight: 70;
}
accordion > fold > animator > content > *.size-80 {
  --weight: 80;
}
accordion > fold > animator > content > *.size-90 {
  --weight: 90;
}
accordion > fold > animator > content > *.size-100 {
  --weight: 100;
}
banner {
  display: inline-grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 1fr auto;
  grid-template-areas: "icon message toolbar" "icon progress progress";
  align-content: stretch;
  justify-content: stretch;
  align-items: center;
  justify-items: stretch;
  border: 1px solid var(--color-surface-foreground);
  background-color: var(--color-surface-background);
  border-radius: var(--spacing-minimum);
  box-shadow: 0 3px 3px var(--color-shadow);
}
banner > icon {
  grid-area: icon;
  aspect-ratio: 1 ;
  width: calc(var(--spacing-isolated) * 3);
  height: 100%;
  font-size: 2em;
  background-color: var(--color-surface-foreground);
  color: var(--color-surface-background);
}
banner > message {
  grid-area: message;
  padding: var(--spacing-minimum);
  padding-left: var(--spacing-isolated);
  vertical-align: middle;
}
banner > toolbar {
  grid-area: toolbar;
  padding: var(--spacing-minimum);
  padding-right: var(--spacing-isolated);
  vertical-align: middle;
}
banner > progress {
  grid-area: progress;
  justify-self: stretch;
  align-self: center;
  width: auto;
  height: var(--spacing-minimum);
  margin: var(--spacing-minimum);
}
banner.warning {
  border-color: var(--color-warning);
}
banner.warning > icon {
  background-color: var(--color-warning);
}
banner.warning > progress {
  --background: var(--color-surface-middleground);
  --foreground: var(--color-warning);
}
banner.info {
  border-color: var(--color-info);
}
banner.info > icon {
  background-color: var(--color-info);
}
banner.info > progress {
  --background: var(--color-surface-middleground);
  --foreground: var(--color-info);
}
banner.remark {
  border-color: var(--color-grayed);
}
banner.remark > icon {
  background-color: var(--color-grayed);
}
banner.remark > progress {
  --background: var(--color-grayed);
  --foreground: var(--color-surface-foreground);
}
body {
  width: 100%;
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(55px, auto) 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas: "headding headding" "menu workspace";
}
body heading {
  grid-area: headding;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "left middle right";
  justify-content: space-between;
  align-content: stretch;
  justify-items: center;
  align-items: center;
  min-height: 64px;
  background-color: var(--color-surface-background);
  color: var(--color-surface-foreground);
  box-shadow: 0 5px 5px -3px var(--color-shadow);
  --color-highlight-border: var(--color-highlight-foreground-inverted);
  --color-highlight-background: var(--color-highlight-foreground-inverted);
  --color-highlight-foreground: var(--color-highlight-background-inverted);
  z-index: 1000;
  position: fixed;
  right: 0px;
  left: 0px;
  top: 0px;
}
body heading > space {
  grid-area: middle;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 100%;
}
body heading > brand {
  grid-area: left;
  font-size: 17.5px;
  font-weight: 700;
  margin: var(--spacing-isolated);
}
body heading > img {
  grid-area: left;
  height: 24px;
  padding-left: 20px;
}
body heading systray {
  grid-area: right;
  display: grid;
  gap: var(--spacing-normal);
  padding-right: 14px;
  grid-template-columns: auto auto auto auto;
  align-items: stretch;
  align-self: stretch;
}
body heading systray dropbutton.usermenu {
  display: grid;
  grid-template: "icon content" "icon remark";
  cursor: pointer;
  column-gap: var(--spacing-separated);
  row-gap: 0;
  padding-inline: var(--spacing-isolated);
}
body heading systray dropbutton.usermenu > icon {
  grid-area: icon;
  align-self: center;
}
body heading systray dropbutton.usermenu > content {
  grid-area: content;
  align-self: end;
}
body heading systray dropbutton.usermenu > remark {
  grid-area: remark;
  align-self: start;
}
body heading systray dropbutton.usermenu:hover {
  box-shadow: 0 3px 8px 0 var(--color-shadow-dark);
}
body heading progress {
  position: absolute;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: auto;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  color: var(--color-success);
  height: 4px;
  display: none;
}
body heading progress::-webkit-progress-bar {
  background-color: var(--color-contrast-middleground);
}
body heading progress::-webkit-progress-value {
  background-color: var(--color-success);
}
body heading progress::-moz-progress-bar {
  background-color: var(--color-contrast-middleground);
}
body menu.root {
  grid-area: menu;
}
body workspace {
  grid-area: workspace;
  padding: var(--spacing-isolated);
  gap: var(--spacing-isolated);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-auto-rows: auto;
  align-content: start;
  justify-content: center;
  align-items: stretch;
  justify-items: stretch;
  grid-auto-flow: dense;
}
body workspace > *:not(form),
body workspace > form > * {
  grid-column-end: span var(--weight, 4);
  /*grid-row-end: span var(--weight,4);*/
  align-self: stretch;
}
body workspace > *:not(form).large,
body workspace > form > *.large {
  --weight: 4;
  width: 100%;
}
body workspace > *:not(form).intermedium,
body workspace > form > *.intermedium {
  --weight: 3;
  width: 100%;
}
body workspace > *:not(form).medium,
body workspace > form > *.medium {
  --weight: 2;
  width: 100%;
}
body workspace > *:not(form).small,
body workspace > form > *.small {
  --weight: 1;
  width: 100%;
}
body.fullscreen workspace {
  align-content: stretch;
}
body.submiting progress {
  display: block;
}
body.submiting .save icon {
  animation: spinning 2s linear infinite;
}
body.submiting .save icon:before {
  content: "\f2f1";
}
body form[invalid] .save icon:before {
  content: '\f071';
  color: var(--color-danger);
}
droplayer.usermenu > ul > li {
  transition: box-shadow 0.5s ease-in-out;
}
droplayer.usermenu > ul > li > a {
  display: block;
  padding-inline: var(--spacing-isolated);
}
droplayer.usermenu > ul > li:not(.group):hover {
  transition: box-shadow 0.1s ease-in-out;
  box-shadow: 0 3px 8px 0 var(--color-shadow-dark);
  z-index: 1;
}
@keyframes spinning {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.button,
button {
  display: inline-grid;
  grid-gap: var(--spacing-separated);
  grid-auto-flow: column;
  font-weight: normal;
  font-size: 0.8rem;
  cursor: pointer;
  /*border: 1px solid var(--color-highlight-border,var(--color-highlight-foreground));*/
  border-radius: 2px;
  white-space: nowrap;
  padding: var(--spacing-normal) var(--spacing-separated);
  line-height: 1rem;
  color: var(--color-highlight-foreground);
  background-color: var(--color-highlight-background);
  text-decoration: none;
  min-height: 32px;
  align-items: center;
  justify-items: center;
  grid-auto-columns: 1fr;
  grid-template-columns: auto;
  transition: box-shadow 0.15s ease-out;
  box-shadow: 0 1px 3px 0 var(--color-shadow);
  text-transform: uppercase;
  min-width: 100px;
}
.button.icon,
button.icon {
  box-shadow: none !important;
}
.button.icon:hover,
button.icon:hover {
  background-color: var(--color-highlight-faded);
}
.button.round,
button.round {
  border-radius: 100%;
  width: 32px;
  height: 32px;
  padding: 0px;
  min-width: auto;
}
.button.banner,
button.banner {
  grid-auto-columns: auto;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  padding: var(--spacing-isolated);
  width: 100%;
}
.button.banner.color-info,
button.banner.color-info {
  --color-highlight-background: var(--color-info);
}
.button.banner.color-warning,
button.banner.color-warning {
  --color-highlight-background: var(--color-warning);
}
.button.banner.color-danger,
button.banner.color-danger {
  --color-highlight-background: var(--color-danger);
}
.button.banner.color-success,
button.banner.color-success {
  --color-highlight-background: var(--color-success);
}
.button:hover,
button:hover,
.button:focus,
button:focus {
  box-shadow: 0 3px 8px 0 var(--color-shadow-dark);
}
.button:focus:not(:hover),
button:focus:not(:hover) {
  outline: 1px solid var(--color-highlight-background);
  outline-offset: 1px;
}
.button.secondary,
button.secondary {
  color: var(--color-highlight-background);
  background-color: var(--color-highlight-foreground);
}
.button.secondary:disabled,
button.secondary:disabled,
.button.secondary[disabled],
button.secondary[disabled],
.button.secondary.disabled,
button.secondary.disabled {
  background-color: var(--color-highlight-foreground);
  color: var(--color-surface-middleground);
  cursor: not-allowed;
}
.button.secondary:hover,
button.secondary:hover {
  /*			color: var(--color-highlight-foreground);
			background-color: var(--color-highlight-background);*/
}
.button:disabled,
button:disabled,
.button[disabled],
button[disabled],
.button.disabled,
button.disabled {
  background-color: var(--color-surface-faded);
  color: var(--color-surface-halftone);
  cursor: not-allowed;
}
.button.caret,
button.caret {
  gap: var(--spacing-normal);
  grid-auto-columns: auto;
}
.button.caret:after,
button.caret:after {
  content: '';
  justify-self: end;
  align-self: center;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid currentcolor;
  border-bottom: none;
}
.button > remark,
button > remark {
  grid-row: 2;
}
card {
  padding: var(--spacing-separated);
}
card > content {
  padding: var(--spacing-isolated);
  width: 100%;
  box-shadow: 0 1px 3px 0 var(--color-shadow);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
card > content spacer {
  text-align: center;
  padding: var(--spacing-normal);
}
card > content:not(.static)::after {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
card > content:not(.static) break {
  display: contents;
}
card > content:not(.static) break::before {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
card > content:not(.static) break::after {
  content: '';
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
card > content.static {
  --responsiveness: 0;
}
card > content.static break {
  display: block;
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
card > content.static break.whitespace {
  height: var(--spacing-isolated);
}
card > content > * {
  --weight: 100;
  flex-basis: calc(var(--weight) * 1%);
  flex-grow: calc(var(--weight) * var(--responsiveness, 1));
  flex-shrink: calc((100 - var(--weight)) * var(--responsiveness, 1));
  min-width: calc(var(--responsiveness, 1) * calc(var(--break-size, 0ch) / var(--responsive-depth, 1)));
  @container style(--is-responsive-alternate:0) {
	--is-responsive-alternate: 1;
	--responsive-depth: calc(var(--responsive-inherited--odd, 0) + 1);
	--responsive-inherited--even: var(--responsive-depth);
}

@container style(--is-responsive-alternate:1) {
	--is-responsive-alternate: 0;
	--responsive-depth: calc(var(--responsive-inherited--even, 0) + 1);
	--responsive-inherited--odd: var(--responsive-depth);
}
  /*&:before {
			counter-reset: variable ~"var(--responsive-depth)";
			content: counter(variable);
		}*/
}
card > content > *.large {
  --weight: 100;
  --break-size: 40ch;
}
card > content > *.medium-large {
  --weight: 66.6;
  --break-size: 40ch;
}
card > content > *.intermedium {
  --weight: 75;
}
card > content > *.medium {
  --weight: 50;
}
card > content > *.third,
card > content > *.medium-small {
  --weight: 33.3;
  --break-size: 40ch;
}
card > content > *.small-medium {
  --weight: 37.5;
}
card > content > *.small {
  --weight: 25;
  --break-size: 20ch;
}
card > content > *.extra-small,
card > content > *.mini {
  --weight: 12.5;
  --break-size: 10ch;
}
card > content > *.micro {
  --weight: 6.25;
  --break-size: 10ch;
}
card > content > *.size-4 {
  --weight: 4.3;
}
card > content > *.size-5 {
  --weight: 5.8;
}
card > content > *.size-6 {
  --weight: 6.3;
}
card > content > *.size-8 {
  --weight: 8.3;
}
card > content > *.size-10 {
  --weight: 10;
}
card > content > *.size-11 {
  --weight: 11.66;
}
card > content > *.size-14 {
  --weight: 14.28;
}
card > content > *.size-16 {
  --weight: 16.6;
}
card > content > *.size-20 {
  --weight: 20;
}
card > content > *.size-30 {
  --weight: 30;
}
card > content > *.size-33 {
  --weight: 33.3;
}
card > content > *.size-40 {
  --weight: 40;
}
card > content > *.size-50 {
  --weight: 50;
}
card > content > *.size-60 {
  --weight: 60;
}
card > content > *.size-66 {
  --weight: 66.6;
}
card > content > *.size-70 {
  --weight: 70;
}
card > content > *.size-80 {
  --weight: 80;
}
card > content > *.size-90 {
  --weight: 90;
}
card > content > *.size-100 {
  --weight: 100;
}
card > content toolbar {
  --weight: 100;
  width: 100%;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: end;
  gap: 5px;
  padding-block: var(--spacing-separated);
  /*			--color-highlight-border:var(--color-highlight-foreground-inverted);
			--color-highlight-background: var(--color-highlight-foreground-inverted);
			--color-highlight-foreground: var(--color-highlight-background-inverted);*/
}
dashboard {
  width: 100%;
  height: 100%;
  display: block;
  column-count: 2;
  column-gap: var(--spacing-isolated);
}
dashboard > * {
  width: 100%;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid-column;
  display: table;
  margin-bottom: var(--spacing-isolated);
}
dashboard > panel.alert > header {
  background-color: var(--color-success);
}
dropbutton {
  user-select: none;
  display: inline-block;
}
dropbutton.open > .button:after,
dropbutton.open > button:after {
  border-bottom: 5px solid currentcolor  !important;
  border-top: none !important;
}
dropbutton > droplayer {
  display: none;
}
droplayer {
  display: flex;
  background: var(--color-surface-background);
  color: var(--color-surface-foreground);
  z-index: 99999999;
  position: fixed;
  top: 100%;
  left: 0px;
  min-width: 100px;
  border-radius: var(--spacing-normal);
  box-shadow: 0px 1px 3px 0px var(--color-shadow-dark);
  flex-direction: column;
  align-items: stretch;
  font-size: 1rem;
  max-height: 500px;
  padding: var(--spacing-normal) 0px;
  /*overflow-x: hidden;
	overflow-y: visible;*/
  /*
	&.stretch
	{
		max-height: none;
	}
	*/
}
droplayer > input[type="search"] {
  margin: var(--spacing-normal);
  width: auto;
}
droplayer > a,
droplayer > a:link,
droplayer > a:active,
droplayer > a:visited,
droplayer > button,
droplayer > .button {
  border-radius: 0px;
  border: none;
  justify-items: left;
}
droplayer > ul {
  display: block;
  overflow-y: visible;
  overflow-x: hidden;
  width: 100%;
}
droplayer > ul > li {
  display: block;
  width: 100%;
  padding: var(--spacing-normal);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2rem;
}
droplayer > ul > li.group {
  font-size: var(--font-size-small);
  color: var(--color-surface-background);
  background-color: var(--color-surface-faded);
  min-height: 1.5em;
  display: grid;
  justify-content: left;
  align-content: center;
  padding: 1px var(--spacing-normal);
}
droplayer > ul > li:has(a) {
  padding: 0;
}
droplayer > ul > li:has(a) a {
  padding: var(--spacing-normal);
}
droplayer > ul > li[selected] {
  color: var(--color-surface-foreground);
  background-color: var(--color-surface-faded);
}
droplayer > ul > li[disabled] {
  pointer-events: none;
  color: var(--color-surface-middleground) !important;
  background-color: var(--color-surface-background) !important;
}
droplayer > ul > li.highlight:not(.group) {
  cursor: pointer;
  color: var(--color-highlight-foreground);
  background-color: var(--color-highlight-background);
}
droplayer label {
  font-size: 1rem;
  padding: 4px 8px;
}
droplayer > button,
droplayer > .button {
  --color-highlight-background: var(--color-highlight-foreground);
  --color-highlight-foreground: var(--color-highlight-background);
  box-shadow: none;
}
fetchable {
  display: contents;
}
fetchable > * {
  --weight: 100;
  flex-basis: calc(var(--weight) * 1%);
  flex-grow: calc(var(--weight) * var(--responsiveness, 1));
  flex-shrink: calc((100 - var(--weight)) * var(--responsiveness, 1));
  min-width: calc(var(--responsiveness, 1) * calc(var(--break-size, 0ch) / var(--responsive-depth, 1)));
  @container style(--is-responsive-alternate:0) {
	--is-responsive-alternate: 1;
	--responsive-depth: calc(var(--responsive-inherited--odd, 0) + 1);
	--responsive-inherited--even: var(--responsive-depth);
}

@container style(--is-responsive-alternate:1) {
	--is-responsive-alternate: 0;
	--responsive-depth: calc(var(--responsive-inherited--even, 0) + 1);
	--responsive-inherited--odd: var(--responsive-depth);
}
  /*&:before {
			counter-reset: variable ~"var(--responsive-depth)";
			content: counter(variable);
		}*/
}
fetchable > *.large {
  --weight: 100;
  --break-size: 40ch;
}
fetchable > *.medium-large {
  --weight: 66.6;
  --break-size: 40ch;
}
fetchable > *.intermedium {
  --weight: 75;
}
fetchable > *.medium {
  --weight: 50;
}
fetchable > *.third,
fetchable > *.medium-small {
  --weight: 33.3;
  --break-size: 40ch;
}
fetchable > *.small-medium {
  --weight: 37.5;
}
fetchable > *.small {
  --weight: 25;
  --break-size: 20ch;
}
fetchable > *.extra-small,
fetchable > *.mini {
  --weight: 12.5;
  --break-size: 10ch;
}
fetchable > *.micro {
  --weight: 6.25;
  --break-size: 10ch;
}
fetchable > *.size-4 {
  --weight: 4.3;
}
fetchable > *.size-5 {
  --weight: 5.8;
}
fetchable > *.size-6 {
  --weight: 6.3;
}
fetchable > *.size-8 {
  --weight: 8.3;
}
fetchable > *.size-10 {
  --weight: 10;
}
fetchable > *.size-11 {
  --weight: 11.66;
}
fetchable > *.size-14 {
  --weight: 14.28;
}
fetchable > *.size-16 {
  --weight: 16.6;
}
fetchable > *.size-20 {
  --weight: 20;
}
fetchable > *.size-30 {
  --weight: 30;
}
fetchable > *.size-33 {
  --weight: 33.3;
}
fetchable > *.size-40 {
  --weight: 40;
}
fetchable > *.size-50 {
  --weight: 50;
}
fetchable > *.size-60 {
  --weight: 60;
}
fetchable > *.size-66 {
  --weight: 66.6;
}
fetchable > *.size-70 {
  --weight: 70;
}
fetchable > *.size-80 {
  --weight: 80;
}
fetchable > *.size-90 {
  --weight: 90;
}
fetchable > *.size-100 {
  --weight: 100;
}
channel {
  display: contents;
}
channel > * {
  --weight: 100;
  flex-basis: calc(var(--weight) * 1%);
  flex-grow: calc(var(--weight) * var(--responsiveness, 1));
  flex-shrink: calc((100 - var(--weight)) * var(--responsiveness, 1));
  min-width: calc(var(--responsiveness, 1) * calc(var(--break-size, 0ch) / var(--responsive-depth, 1)));
  @container style(--is-responsive-alternate:0) {
	--is-responsive-alternate: 1;
	--responsive-depth: calc(var(--responsive-inherited--odd, 0) + 1);
	--responsive-inherited--even: var(--responsive-depth);
}

@container style(--is-responsive-alternate:1) {
	--is-responsive-alternate: 0;
	--responsive-depth: calc(var(--responsive-inherited--even, 0) + 1);
	--responsive-inherited--odd: var(--responsive-depth);
}
  /*&:before {
			counter-reset: variable ~"var(--responsive-depth)";
			content: counter(variable);
		}*/
}
channel > *.large {
  --weight: 100;
  --break-size: 40ch;
}
channel > *.medium-large {
  --weight: 66.6;
  --break-size: 40ch;
}
channel > *.intermedium {
  --weight: 75;
}
channel > *.medium {
  --weight: 50;
}
channel > *.third,
channel > *.medium-small {
  --weight: 33.3;
  --break-size: 40ch;
}
channel > *.small-medium {
  --weight: 37.5;
}
channel > *.small {
  --weight: 25;
  --break-size: 20ch;
}
channel > *.extra-small,
channel > *.mini {
  --weight: 12.5;
  --break-size: 10ch;
}
channel > *.micro {
  --weight: 6.25;
  --break-size: 10ch;
}
channel > *.size-4 {
  --weight: 4.3;
}
channel > *.size-5 {
  --weight: 5.8;
}
channel > *.size-6 {
  --weight: 6.3;
}
channel > *.size-8 {
  --weight: 8.3;
}
channel > *.size-10 {
  --weight: 10;
}
channel > *.size-11 {
  --weight: 11.66;
}
channel > *.size-14 {
  --weight: 14.28;
}
channel > *.size-16 {
  --weight: 16.6;
}
channel > *.size-20 {
  --weight: 20;
}
channel > *.size-30 {
  --weight: 30;
}
channel > *.size-33 {
  --weight: 33.3;
}
channel > *.size-40 {
  --weight: 40;
}
channel > *.size-50 {
  --weight: 50;
}
channel > *.size-60 {
  --weight: 60;
}
channel > *.size-66 {
  --weight: 66.6;
}
channel > *.size-70 {
  --weight: 70;
}
channel > *.size-80 {
  --weight: 80;
}
channel > *.size-90 {
  --weight: 90;
}
channel > *.size-100 {
  --weight: 100;
}
fieldset,
.fieldset {
  width: 100%;
  padding-bottom: var(--spacing-separated);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
fieldset spacer,
.fieldset spacer {
  text-align: center;
  padding: var(--spacing-normal);
}
fieldset:not(.static)::after,
.fieldset:not(.static)::after {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
fieldset:not(.static) break,
.fieldset:not(.static) break {
  display: contents;
}
fieldset:not(.static) break::before,
.fieldset:not(.static) break::before {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
fieldset:not(.static) break::after,
.fieldset:not(.static) break::after {
  content: '';
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
fieldset.static,
.fieldset.static {
  --responsiveness: 0;
}
fieldset.static break,
.fieldset.static break {
  display: block;
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
fieldset.static break.whitespace,
.fieldset.static break.whitespace {
  height: var(--spacing-isolated);
}
fieldset > *,
.fieldset > * {
  --weight: 100;
  flex-basis: calc(var(--weight) * 1%);
  flex-grow: calc(var(--weight) * var(--responsiveness, 1));
  flex-shrink: calc((100 - var(--weight)) * var(--responsiveness, 1));
  min-width: calc(var(--responsiveness, 1) * calc(var(--break-size, 0ch) / var(--responsive-depth, 1)));
  @container style(--is-responsive-alternate:0) {
	--is-responsive-alternate: 1;
	--responsive-depth: calc(var(--responsive-inherited--odd, 0) + 1);
	--responsive-inherited--even: var(--responsive-depth);
}

@container style(--is-responsive-alternate:1) {
	--is-responsive-alternate: 0;
	--responsive-depth: calc(var(--responsive-inherited--even, 0) + 1);
	--responsive-inherited--odd: var(--responsive-depth);
}
  /*&:before {
			counter-reset: variable ~"var(--responsive-depth)";
			content: counter(variable);
		}*/
}
fieldset > *.large,
.fieldset > *.large {
  --weight: 100;
  --break-size: 40ch;
}
fieldset > *.medium-large,
.fieldset > *.medium-large {
  --weight: 66.6;
  --break-size: 40ch;
}
fieldset > *.intermedium,
.fieldset > *.intermedium {
  --weight: 75;
}
fieldset > *.medium,
.fieldset > *.medium {
  --weight: 50;
}
fieldset > *.third,
.fieldset > *.third,
fieldset > *.medium-small,
.fieldset > *.medium-small {
  --weight: 33.3;
  --break-size: 40ch;
}
fieldset > *.small-medium,
.fieldset > *.small-medium {
  --weight: 37.5;
}
fieldset > *.small,
.fieldset > *.small {
  --weight: 25;
  --break-size: 20ch;
}
fieldset > *.extra-small,
.fieldset > *.extra-small,
fieldset > *.mini,
.fieldset > *.mini {
  --weight: 12.5;
  --break-size: 10ch;
}
fieldset > *.micro,
.fieldset > *.micro {
  --weight: 6.25;
  --break-size: 10ch;
}
fieldset > *.size-4,
.fieldset > *.size-4 {
  --weight: 4.3;
}
fieldset > *.size-5,
.fieldset > *.size-5 {
  --weight: 5.8;
}
fieldset > *.size-6,
.fieldset > *.size-6 {
  --weight: 6.3;
}
fieldset > *.size-8,
.fieldset > *.size-8 {
  --weight: 8.3;
}
fieldset > *.size-10,
.fieldset > *.size-10 {
  --weight: 10;
}
fieldset > *.size-11,
.fieldset > *.size-11 {
  --weight: 11.66;
}
fieldset > *.size-14,
.fieldset > *.size-14 {
  --weight: 14.28;
}
fieldset > *.size-16,
.fieldset > *.size-16 {
  --weight: 16.6;
}
fieldset > *.size-20,
.fieldset > *.size-20 {
  --weight: 20;
}
fieldset > *.size-30,
.fieldset > *.size-30 {
  --weight: 30;
}
fieldset > *.size-33,
.fieldset > *.size-33 {
  --weight: 33.3;
}
fieldset > *.size-40,
.fieldset > *.size-40 {
  --weight: 40;
}
fieldset > *.size-50,
.fieldset > *.size-50 {
  --weight: 50;
}
fieldset > *.size-60,
.fieldset > *.size-60 {
  --weight: 60;
}
fieldset > *.size-66,
.fieldset > *.size-66 {
  --weight: 66.6;
}
fieldset > *.size-70,
.fieldset > *.size-70 {
  --weight: 70;
}
fieldset > *.size-80,
.fieldset > *.size-80 {
  --weight: 80;
}
fieldset > *.size-90,
.fieldset > *.size-90 {
  --weight: 90;
}
fieldset > *.size-100,
.fieldset > *.size-100 {
  --weight: 100;
}
fieldset > legend,
.fieldset > legend {
  padding: var(--spacing-minimum);
  padding-bottom: var(--spacing-separated);
  font-size: var(--font-size-big);
  color: var(--color-surface-middleground);
}
fieldset > header,
.fieldset > header {
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: var(--spacing-minimum);
  background-color: var(--color-contrast-middleground);
  border-radius: var(--spacing-minimum);
}
fieldset > header title,
.fieldset > header title {
  display: inline-block;
  justify-self: start;
  align-self: center;
  font-size: var(--font-size-small);
  color: var(--color-contrast-foreground);
  align-items: center;
  text-align: center;
  padding-left: var(--spacing-separated);
}
fieldset > header toolbar,
.fieldset > header toolbar {
  justify-self: end;
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 5px;
  --color-highlight-border: var(--color-highlight-foreground-inverted);
  --color-highlight-background: var(--color-highlight-foreground-inverted);
  --color-highlight-foreground: var(--color-highlight-background-inverted);
}
fieldset > header toolbar button,
.fieldset > header toolbar button {
  min-width: unset;
  box-shadow: unset;
  background-color: transparent;
  color: var(--color-highlight-background);
  min-height: unset;
  padding: var(--spacing-normal);
}
fieldset.isolated,
.fieldset.isolated {
  padding: var(--spacing-isolated);
}
form {
  display: contents;
}
icon {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}
icon {
  display: inline-grid;
  justify-content: center;
  align-content: center;
  padding: 0px;
  margin: 0px;
  width: 16px;
  height: 16px;
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 16px;
  font-size: 16px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-decoration: none;
}
icon::before,
icon::after {
  display: block;
}
icon.big {
  font-size: 32px;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
icon.round {
  border-radius: 50%;
  border-style: solid;
  border-width: 1px;
  font-size: 12px;
}
icon.mirror::before {
  transform: scaleX(-1);
}
icon.tooltip {
  color: var(--color-highlight-foreground);
}
icon.checkedcolor {
  color: var(--color-surface-foreground);
}
icon.success {
  color: var(--color-success);
}
icon.uncheckedcolor {
  color: var(--color-surface-faded);
}
icon[class^='fa-o']:before,
icon[class*=' fa-o']:before {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 16px;
  width: 16px;
}
icon[class^='fa-o']:after,
icon[class*=' fa-o']:after {
  position: absolute;
  bottom: 0px;
  right: 0px;
  display: inline;
  text-align: center;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 10px;
  font-size: 10px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-shadow: -1px -1px 0px var(--color-shadow), -2px -2px 1px var(--color-shadow);
}
icon.round.big {
  font-size: 24px;
}
label {
  display: grid;
  /*grid-template-columns: 1fr auto auto;
	grid-template-rows: auto 1fr auto;*/
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  /*grid-template-areas:
		"Label Label Label"
		"Input Unit Error"
		"Remark Remark Remark";*/
  justify-items: start;
  align-items: end;
  padding: var(--spacing-normal);
  white-space: nowrap;
  grid-gap: var(--spacing-normal);
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  min-height: 61px;
}
label.bare {
  min-height: auto;
}
label > title {
  text-align: left;
  font-size: var(--font-size-small);
  color: var(--color-surface-foreground);
  opacity: 0.5;
  display: inline-block;
  grid-column-start: 1;
  grid-row-start: -3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
}
label > input,
label > select,
label > textarea,
label > skin,
label > p,
label > .uploadzone,
label > .htmleditor,
label > composite {
  grid-column-start: 1;
  grid-row-start: 1;
}
label > unit {
  grid-column-start: 2;
  grid-row-start: 1;
  align-self: center;
  font-size: var(--font-size-small);
  color: var(--color-surface-fadded);
}
label > composite {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: stretch;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
}
label > composite > * {
  flex-grow: 1;
  flex-shrink: 1;
}
label > composite > .medium-small {
  flex-basis: 33.3%;
}
label > composite > .medium-large {
  flex-basis: 66.6%;
}
label.inline {
  min-height: auto;
  /*grid-template-columns: 1fr auto;
		grid-template-rows: auto ;
		column-gap: var(--spacing-normal);
		//column-gap: 10px;
		
		grid-template-areas:
			"Label Input";
		*/
}
label.inline > title {
  grid-column-start: -3;
  grid-row-start: 1;
  align-self: center;
}
label > remark {
  grid-column-start: 1;
  grid-row-start: 3;
  grid-column-end: -1;
  display: block;
  white-space: normal;
  font-size: var(--font-size-small);
}
label[errormessage]:hover::before {
  content: attr(errormessage);
  font-size: var(--font-size-small);
  position: absolute;
  top: calc(100% - var(--spacing-normal));
  left: 0px;
  color: var(--color-danger);
  border: 1px solid var(--color-surface-faded);
  border-radius: var(--spacing-normal);
  box-shadow: 0px 1px 3px 0px var(--color-shadow-dark);
  background-color: var(--color-surface-background);
  z-index: 1;
  padding: var(--spacing-normal);
}
label[errormessage]::after {
  grid-column-start: 3;
  grid-row-start: 1;
  text-align: center;
  width: 16px;
  height: 16px;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 16px;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  content: '\f071';
  color: var(--color-danger);
  align-self: center;
}
form[readonly] label,
label[readonly],
label[disabled] {
  pointer-events: none;
}
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="number"],
input[type="search"],
select,
textarea,
.htmleditor,
.uploadzone {
  background-color: transparent;
  /*background-color: var(--color-surface-background);*/
  color: var(--color-surface-foreground);
  background-clip: padding-box;
  border: 1px solid transparent;
  border-bottom-color: var(--color-surface-faded);
  border-radius: var(--spacing-normal);
  padding: var(--spacing-normal);
  /*padding-top: var(--spacing-separated);*/
  /*padding-bottom: var(--spacing-separated);*/
  width: 100%;
  font-size: 1rem;
}
textarea::placeholder,
input::placeholder {
  color: var(--color-surface-faded);
}
form[readonly] .input,
form[readonly] input[type="email"],
form[readonly] input[type="text"],
form[readonly] input[type="password"],
form[readonly] input[type="date"],
form[readonly] input[type="number"],
form[readonly] input[type="search"],
form[readonly] select[readonly],
.input[readonly],
input[type="text"]:read-only,
input[type="email"]:read-only,
input[type="password"]:read-only,
input[type="date"]:read-only,
input[type="number"]:read-only,
input[type="search"]:read-only,
select[readonly] {
  border-style: dashed;
}
textarea:read-only,
form[readonly] textarea {
  border-style: dashed;
}
input[type="number"] {
  text-align: right;
  -moz-appearance: textfield;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
textarea {
  line-height: 1rem;
  height: calc(1rem * 6);
  resize: none;
}
label:has(>input[type="checkbox"].toggle) > input[type="checkbox"] {
  display: none;
}
label:has(>input[type="checkbox"].toggle):before {
  content: '';
  display: inline-block;
  cursor: pointer;
  background-color: var(--color-surface-faded);
  transition: 0.25s;
  height: 1.5rem;
  width: 3rem;
  border-radius: 1.5rem;
  align-self: center;
  grid-column-start: 1;
  grid-row-start: 1;
}
label:has(>input[type="checkbox"].toggle):after {
  content: "";
  display: inline-block;
  cursor: pointer;
  background-color: white;
  transition: 0.25s;
  height: 1rem;
  width: 1rem;
  border-radius: 1.5rem;
  align-self: center;
  grid-column-start: 1;
  grid-row-start: 1;
  margin-left: 0.25rem;
}
label:has(>input[type="checkbox"].toggle):has(>input[type="checkbox"].toggle:checked):before {
  background-color: var(--color-highlight-background);
}
label:has(>input[type="checkbox"].toggle):has(>input[type="checkbox"].toggle:checked):after {
  margin-left: 1.5rem;
}
form[readonly] label:has(>input[type="checkbox"].toggle),
label[readonly]:has(>input[type="checkbox"].toggle),
label:has(>input[type="checkbox"][readonly].toggle) {
  pointer-events: none;
}
form[readonly] label:has(>input[type="checkbox"].toggle):before,
label[readonly]:has(>input[type="checkbox"].toggle):before,
label:has(>input[type="checkbox"][readonly].toggle):before {
  background-color: transparent !important;
  border: 1px dashed var(--color-surface-faded);
}
form[readonly] label:has(>input[type="checkbox"].toggle):after,
label[readonly]:has(>input[type="checkbox"].toggle):after,
label:has(>input[type="checkbox"][readonly].toggle):after {
  background-color: var(--color-surface-faded);
}
form[readonly] label:has(>input[type="checkbox"].toggle):has(>input[type="checkbox"].toggle:checked):after,
label[readonly]:has(>input[type="checkbox"].toggle):has(>input[type="checkbox"].toggle:checked):after,
label:has(>input[type="checkbox"][readonly].toggle):has(>input[type="checkbox"].toggle:checked):after {
  background-color: var(--color-highlight-background);
  margin-left: 1.5rem;
}
/**********************************
//input[type="checkbox"] = selector
//**********************************/
label:has(>input[type="checkbox"].selector) {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto;
  grid-template-areas: none;
  justify-items: center;
  align-items: end;
  padding: initial;
  white-space: nowrap;
  grid-gap: unset;
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  min-height: auto;
}
label:has(>input[type="checkbox"].selector) > input[type="checkbox"] {
  display: none;
}
label:has(>input[type="checkbox"].selector):before {
  content: '';
  display: inline-block;
  border: 1px solid var(--color-surface-faded);
  border-radius: var(--spacing-normal);
  width: 16px;
  height: 16px;
  cursor: pointer;
  min-height: auto;
  grid-column-start: 1;
  grid-row-start: 1;
}
label:has(>input[type="checkbox"].selector):has(>input[type="checkbox"].selector:checked):after {
  content: '';
  position: absolute;
  display: inline-block;
  transform: translate(-50%, -50%) rotate(45deg);
  height: 8px;
  width: 4px;
  top: 50%;
  left: 50%;
  border-bottom: 3px solid var(--color-highlight-background);
  border-right: 3px solid var(--color-highlight-background);
}
label:has(>input[type="checkbox"].selector):has(>input[type="checkbox"].selector.indeterminate):after {
  content: '';
  display: inline-block;
  position: absolute;
  top: 50%;
  height: 0;
  left: 50%;
  width: 10px;
  margin-left: 0px;
  margin-top: 0;
  border-right: 0px;
  border-bottom: 3px solid var(--color-highlight-background);
  transform: translate(-50%, -50%);
}
/*********************************
Token box
*/
select[multiple] + skin {
  background-color: var(--color-surface-background);
  color: var(--color-surface-foreground);
  background-clip: padding-box;
  border: 1px solid transparent;
  border-bottom-color: var(--color-surface-faded);
  border-radius: var(--spacing-normal);
  padding: var(--spacing-minimum);
  width: 100%;
  min-height: calc(1.5rem + (var(--spacing-normal) + var(--spacing-normal)));
  font-size: 1rem;
  display: inline-flex;
  gap: var(--spacing-minimum);
  overflow: hidden;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  transition: max-height 0.1s linear;
  max-height: 1rem;
  margin-bottom: -1px;
}
select[multiple] + skin[placeholder] {
  color: var(--color-surface-faded);
}
select[multiple] + skin pill {
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 6ch;
}
select[multiple] + skin:hover,
select[multiple] + skin.expanded {
  height: min-content;
  max-height: 10rem;
  flex-wrap: wrap;
  position: absolute;
  overflow-y: auto;
  top: 0px;
  animation: hide-scroll 0.1s backwards;
  z-index: 10;
  width: calc(100% - 5px);
}
select[multiple] + skin:hover pill,
select[multiple] + skin.expanded pill {
  overflow: visible;
  text-overflow: ellipsis;
}
@keyframes hide-scroll {
  from,
  to {
    overflow: hidden;
  }
}
form[readonly] select + skin,
select[readonly] + skin {
  border-style: dashed !important;
  pointer-events: none !important;
  touch-action: none !important;
}
select:not([multiple]) + skin {
  background-color: var(--color-surface-background);
  color: var(--color-surface-foreground);
  background-clip: padding-box;
  border: 1px solid transparent;
  border-bottom-color: var(--color-surface-faded);
  border-radius: var(--spacing-normal);
  padding: var(--spacing-normal);
  padding-right: calc(var(--spacing-normal) + 15px);
  width: 100%;
  display: block;
  min-height: calc(1.5rem + (var(--spacing-normal) + var(--spacing-normal)));
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
select:not([multiple]) + skin[placeholder] {
  color: var(--color-surface-faded);
}
select:not([multiple]) + skin:after {
  content: '';
  position: absolute;
  top: calc(50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-surface-faded);
  border-bottom: none;
  clear: both;
  transform: translateY(-50%);
  right: var(--spacing-normal);
}
input[type="file"] + skin {
  background-color: var(--color-surface-background);
  color: var(--color-surface-foreground);
  background-clip: padding-box;
  border: 1px solid transparent;
  border-bottom-color: var(--color-surface-faded);
  border-radius: var(--spacing-normal);
  padding: var(--spacing-normal);
  width: 100%;
  display: grid;
  min-height: calc(1.5rem + (var(--spacing-normal) + var(--spacing-normal)));
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 1;
}
input[type="file"] + skin[placeholder] {
  color: var(--color-surface-faded);
}
input[type="file"] + skin.expanded {
  height: 100px;
  position: absolute;
  top: 0px;
}
input[type="file"] + skin.expanded:after {
  content: "\f093";
  display: inline-block;
  ertical-align: middle;
  text-align: center;
  width: 32px;
  height: 32px;
  color: var(--color-surface-faded);
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 32px;
  font-size: 32px;
  padding: 0px;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: -1;
}
input[type="file"] + skin progress {
  /* Reset the default appearance */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  height: 100%;
  color: var(--color-highlight-foreground);
}
input[type="file"] + skin progress::-webkit-progress-bar {
  background-color: var(--color-surface-background);
}
input[type="file"] + skin progress::-webkit-progress-value {
  background-color: var(--color-highlight-foreground);
}
input[type="file"] + skin progress::-moz-progress-bar {
  background-color: var(--color-highlight-foreground);
}
input[type="file"] + img {
  border-radius: var(--spacing-normal);
  width: 100%;
  outline: none;
  height: auto;
  /* overflow: visible; */
  /* align-content: center; */
  /* justify-content: center; */
  /* align-items: center; */
  justify-items: center;
  aspect-ratio: 1;
  object-fit: contain;
  object-position: center;
  border: 1px dashed var(--color-surface-faded);
  /* display: grid; */
  /* grid-template-rows: 1fr; */
  /* grid-template-columns: 1fr; */
}
input[type="file"] + img[alt]::before {
  display: grid;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-contrast-foreground);
  content: attr(alt);
  /* aspect-ratio: 1; */
  /* object-fit: contain; */
  /* border: 1px dashed var(--color-surface-faded); */
  justify-content: center;
  align-content: center;
  color: var(--color-surface-faded);
  height: 100%;
}
input[type="file"] + img[alt].uploading::after {
  grid-area: center;
  content: '';
  display: block;
  background-color: var(--color-highlight-background);
  width: calc(var(--progress) * 1%);
  height: var(--spacing-separated);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(1rem) translateX(-50%);
}
form[readonly] input[type="file"] + skin,
input[type="file"][readonly] + skin {
  border-style: dashed !important;
  pointer-events: none !important;
  touch-action: none !important;
}
input.enableafterload {
  border-style: solid!important;
}
.numeric-input {
  text-align: right;
}
input[list]::-webkit-calendar-picker-indicator,
input[type="text"]::-webkit-calendar-picker-indicator {
  display: none !important;
}
inputarray {
  display: block;
}
inputarray > table > thead > tr > td,
inputarray > table > tbody > tr > td,
inputarray > table > tfoot > tr > td {
  padding: var(--spacing-minimum);
}
inputarray > table > thead > tr > td > input,
inputarray > table > tbody > tr > td > input,
inputarray > table > tfoot > tr > td > input {
  border: none !important;
}
inputarray > table > thead > tr > td > select:not([multiple]) + skin,
inputarray > table > tbody > tr > td > select:not([multiple]) + skin,
inputarray > table > tfoot > tr > td > select:not([multiple]) + skin {
  border: none !important;
}
inputarray > table > thead > tr > td > label,
inputarray > table > tbody > tr > td > label,
inputarray > table > tfoot > tr > td > label {
  min-height: unset;
}
inputarray > table > thead > tr > td:first-child,
inputarray > table > tbody > tr > td:first-child,
inputarray > table > tfoot > tr > td:first-child {
  border: 2px solid orange;
  text-align: center;
  vertical-align: center;
}
inputarray > table > thead > tr > td:last-child,
inputarray > table > tbody > tr > td:last-child,
inputarray > table > tfoot > tr > td:last-child {
  text-align: right;
  vertical-align: center;
}
inputarray > table > thead > tr > td:last-child > button,
inputarray > table > tbody > tr > td:last-child > button,
inputarray > table > tfoot > tr > td:last-child > button {
  width: 120px;
}
inputarray > table > tbody > tr > td:nth-last-child(2) {
  color: var(--color-surface-middleground);
  cursor: grab;
  user-select: none;
  text-align: center;
  vertical-align: center;
}
inputarray > table > tbody > tr > td:nth-last-child(2):hover {
  color: inherit;
}
.htmleditor {
  border: 1px solid var(--color-surface-faded);
  padding: 0px;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  /* align-content: stretch; */
  justify-content: center;
  align-items: stretch;
}
.htmleditor iframe {
  border: none;
}
.htmleditor > .toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* align-content: center; */
  justify-content: flex-start;
  align-items: stretch;
  border-bottom: 1px solid var(--color-surface-faded);
}
.htmleditor > .toolbar > .button {
  min-width: unset;
  box-shadow: none;
  font-size: 1rem;
}
.htmleditor > .toolbar > .button:hover {
  box-shadow: 0 3px 8px 0 var(--color-shadow-dark);
  z-index: 1;
}
.htmleditor > .toolbar .splitter {
  background-color: var(--color-surface-faded);
  width: 1px;
}
.htmleditor > .toolbar select + skin {
  border: none;
  width: 100px;
  border-radius: 0px;
  border-right: 1px solid var(--color-surface-faded);
  vertical-align: middle;
  line-height: 1.5rem;
}
/*
.htmleditor iframe {
	border:none
}
.teheader {
	height:31px;
	border-bottom:1px solid #bbb;
	background:url(/files/images/header-bg.gif) repeat-x;
	padding-top:1px
}
.teheader select
{
	float:left;
	margin: 5px;
}
.tedivider {
	float:left;
	width:1px;
	height:30px;
	background:#ccc
}
.tecontrol
{
	float:left;
	width:34px;
	height:30px;
	cursor:pointer;
	font-size:16px;
	text-align: center;
	vertical-align: middle;
	line-height: 30px;
	background-color: transparent;
    border: none;
    width: 30px;
}
.tecontrol:hover
{
	color:#9c9696;
}
.tefooter {
	height:32px;
	border-top:1px solid #bbb;
	background:#f5f5f5
}
.toggle
{
	float:left;
	background:url(images/icons.png) -34px 2px no-repeat;
	padding:9px 13px 0 31px;
	height:23px;
	border-right:1px solid #ccc;
	cursor:pointer;
	color:#666
}
.toggle:hover {
	background-color:#fff
}
.resize {
	float:right;
	height:32px;
	width:32px;
	background:url(/files/images/resize.gif) 15px 15px no-repeat;
	cursor:s-resize
}
#editor {
	cursor:text;
	margin:10px
}*/
.input-order {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-isolated);
}
.input-order > .input-order-item {
  padding-block: var(--spacing-normal);
  padding-inline: var(--spacing-separated);
}
.input-order > .input-order-item > .input-order-item-grip {
  color: var(--color-shadow);
  cursor: grab;
  user-select: none;
  text-align: center;
  vertical-align: center;
}
.svgeditor {
  padding: 0px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  border-bottom: 1px solid var(--color-surface-faded);
  height: 100%;
  grid-template-areas: "toolbar toolbar " "editor sidebar ";
}
.svgeditor > .toolbar {
  grid-area: toolbar;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* align-content: center; */
  justify-content: flex-start;
  align-items: stretch;
  border-bottom: 1px solid var(--color-surface-faded);
}
.svgeditor > .toolbar > .button {
  min-width: unset;
  box-shadow: none;
  font-size: 1rem;
}
.svgeditor > .toolbar > .button:hover {
  box-shadow: 0 3px 8px 0 var(--color-shadow-dark);
  z-index: 1;
}
.svgeditor > .toolbar > .button.selected {
  box-shadow: inset 1px 1px 3px 1px var(--color-shadow);
}
.svgeditor > .toolbar .splitter {
  background-color: var(--color-surface-faded);
  width: 1px;
}
.svgeditor > .toolbar select + skin {
  border: 1px solid transparent;
  width: 100px;
  border-radius: 0px;
  border-right: 1px solid var(--color-surface-faded);
  vertical-align: middle;
  line-height: 1.5rem;
}
.svgeditor > .sidebar {
  width: 200px;
}
.svgeditor > .sidebar ul {
  list-style: none;
}
.svgeditor > .sidebar ul li.separator {
  background-color: var(--color-contrast-background);
  color: var(--color-contrast-foreground);
  padding: var(--spacing-normal);
}
.svgeditor > .sidebar ul li label {
  grid-template-columns: auto 1fr;
  min-height: auto;
  align-items: center;
}
.svgeditor > .sidebar ul li label title {
  grid-column-start: 2;
  grid-row-start: 1;
}
.svgeditor > .sidebar select + skin {
  border: 1px solid transparent;
  border-radius: 0px;
  border-bottom: 1px solid var(--color-surface-faded);
  vertical-align: middle;
  line-height: 1.5rem;
}
.svgeditor > .sidebar select[readonly] + skin {
  color: var(--color-surface-faded);
}
.svgeditor > .sidebar input[type=text],
.svgeditor > .sidebar input[type=number] {
  width: 4ch;
  border-color: var(--color-surface-faded);
  text-align: center;
}
.svgeditor > .sidebar *[readonly] {
  color: var(--color-surface-faded);
}
.svgeditor > .tooltip {
  display: none;
  pointer-events: none;
  position: fixed;
  background-color: var(--color-contrast-background);
  color: var(--color-contrast-foreground);
  height: min-content;
  box-shadow: 0 3px 8px 0 var(--color-shadow-dark);
  font-size: var(--font-size-small);
  padding: var(--spacing-minimum);
  border-radius: var(--spacing-minimum);
  z-index: 99990;
}
.svgeditor > .tooltip.visible {
  display: block;
}
.svgeditor > .map {
  grid-area: editor;
  --meter: 10px;
  --decameter: calc(var(--meter) * 10);
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  --scale: 1;
  --scaled-meter: calc(var(--meter) * var(--scale));
  --scaled-decameter: calc(var(--decameter) * var(--scale));
  --offset-x: 0;
  --offset-y: 0;
  --scaled-offset-x: calc(var(--offset-x) * var(--scale));
  --scaled-offset-y: calc(var(--offset-y) * var(--scale));
  background: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.1) 0 1px, transparent 0px 1px, transparent 0px var(--scaled-meter)), repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0 1px, transparent 0px 1px, transparent 0px var(--scaled-meter)), repeating-linear-gradient(to right, rgba(0, 0, 0, 0.1) 0 1px, transparent 0px 1px, transparent 0px var(--scaled-decameter)), repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0 1px, transparent 0px 1px, transparent 0px var(--scaled-decameter));
  background-position: calc(var(--offset-x) * 1px) calc(var(--offset-y) * 1px);
  background-size: var(--scaled-decameter) var(--scaled-decameter);
  background-repeat: repeat;
  overflow: hidden;
  user-select: none;
  /*g#ui
		{
			pointer-events: none;
			& * 
			{
				pointer-events: none;		
			}
		}*/
}
.svgeditor > .map * {
  shape-rendering: optimizeSpeed;
}
.svgeditor > .map .scaled {
  --scaled-offset-x: calc(var(--offset-x) * var(--scale));
  --scaled-offset-y: calc(var(--offset-y) * var(--scale));
  transform: translate(calc(var(--offset-x) * 1px), calc(var(--offset-y) * 1px)) scale(var(--scale, 1));
}
.svgeditor > .map.selectablewall .wall:hover,
.svgeditor > .map.selectablecab .cabinstance:hover,
.svgeditor > .map.selectableflag .flaginstance:hover {
  filter: drop-shadow(calc(1px / var(--scale, 1)) calc(1px / var(--scale, 1)) calc(1px / var(--scale, 1)) #000000) drop-shadow(calc(1px / var(--scale, 1)) calc(1px / var(--scale, 1)) calc(5px / var(--scale, 1)) #000000);
}
.svgeditor > .map.selectablecab .selector {
  stroke-width: 1;
  stroke: black;
  vector-effect: non-scaling-stroke;
  fill: rgba(0, 0, 0, 0.1);
  stroke-dasharray: 4px;
  stroke-dashoffset: 8px;
  animation: stroke 0.5s linear infinite;
}
.svgeditor > .map .flaginstance.selected,
.svgeditor > .map .cabinstance.selected,
.svgeditor > .map .wall.seleted {
  stroke-dasharray: 4px;
  stroke-dashoffset: 8px;
  animation: stroke 0.5s linear infinite;
  filter: none !important;
}
.svgeditor > .map #walkable {
  fill: rgba(0, 0, 0, 0.1);
}
.svgeditor > .map .measure {
  stroke-width: 1;
  stroke: red;
  stroke-dasharray: 3;
}
.svgeditor > .map .wall {
  stroke-width: 1;
  stroke: black;
}
.svgeditor > .map .cabinet {
  stroke-width: 1;
  stroke: black;
  fill: #CCC;
  transform-origin: center;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
}
.svgeditor > .map .cabinetfront {
  stroke-width: 1;
  stroke: none;
  fill: var(--outside, #4CAF50);
  transform-origin: center;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
}
.svgeditor > .map .cabinstance {
  transform: translateX(calc(var(--x, 0) * 1px)) translateY(calc(var(--y, 0) * 1px)) rotate(calc(var(--direction, 0) * 1deg));
  transform-origin: center;
  transform-box: fill-box;
}
.svgeditor > .map .cabinstance.outofrange {
  --outside: #F44336;
}
.svgeditor > .map g.hidden {
  display: none;
}
.svgeditor > .map text {
  text-anchor: middle;
  dominant-baseline: central;
  inline-size: calc(var(--width, 10) * 1px - 0.5px);
  font-size: calc(var(--height, 3) * 1px - 0.5px);
  transform-origin: center;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
  transform: rotate(calc(var(--inverted, 0) * 180deg));
}
.svgeditor > .map .flaginstance {
  transform: translate(-50%, -50%) translateX(calc(var(--x, 0) * 1px)) translateY(calc(var(--y, 0) * 1px)) scale(calc(5 / var(--scale, 1)));
  transform-origin: center;
  transform-box: fill-box;
  fill: #4CAF50;
}
@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}
.heatmap {
  padding: var(--spacing-isolated);
}
.heatmap > .map {
  grid-area: editor;
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  --scale: 1;
  --offset-x: 0;
  --offset-y: 0;
  overflow: hidden;
  user-select: none;
}
.heatmap > .map * {
  shape-rendering: optimizeSpeed;
}
.heatmap > .map .scaled {
  --scaled-offset-x: calc(var(--offset-x) * var(--scale));
  --scaled-offset-y: calc(var(--offset-y) * var(--scale));
  transform: translate(calc(var(--offset-x) * 1px), calc(var(--offset-y) * 1px)) scale(var(--scale, 1));
}
.heatmap > .map .wall {
  stroke-width: 1;
  stroke: black;
}
.heatmap > .map .cabinet {
  stroke-width: 1;
  stroke: black;
  fill: hsl(calc(120 - var(--occupancy) * 120), 90%, 58% );
  transform-origin: center;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
  --start: 0;
  --end: 120;
}
.heatmap > .map .cabinetfront {
  stroke-width: 1;
  stroke: none;
  fill: rgba(0, 0, 0, 0.2);
  transform-origin: center;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
}
.heatmap > .map .cabinstance {
  transform: translateX(calc(var(--x, 0) * 1px)) translateY(calc(var(--y, 0) * 1px)) rotate(calc(var(--direction, 0) * 1deg));
  transform-origin: center;
  transform-box: fill-box;
}
.heatmap > .map text {
  text-anchor: middle;
  dominant-baseline: central;
  inline-size: calc(var(--width, 10) * 1px - 0.5px);
  font-size: calc(var(--height, 3) * 1px - 0.5px);
  transform-origin: center;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
  transform: rotate(calc(var(--inverted, 0) * 180deg));
}
.route {
  padding: var(--spacing-isolated);
}
.route > .map {
  grid-area: editor;
  box-shadow: inset 0px 0px 5px 0px rgba(0, 0, 0, 0.75);
  --scale: 1;
  --offset-x: 0;
  --offset-y: 0;
  overflow: hidden;
  user-select: none;
  /*.cabinet
		{
			stroke-width: 1;
			stroke: black;
			fill:#CCC;
			transform: translate(-50%, -50%);
			transform-origin: center;
			transform-box: fill-box;
			vector-effect:non-scaling-stroke;
			--start: 0;
			--end: 120;
			
		}
		.cabinstance
		{
			transform: translateX(calc(var(--x, 0) * 1px)) translateY( calc(var(--y, 0) * 1px) ) rotate(calc( var(--direction,0) * 1deg));
			transform-origin: center;
			transform-box: fill-box;
		}
		text
		{
			text-anchor: middle;
			dominant-baseline: central;
			inline-size: calc( var(--width,10) * 1px - 0.5px);
			font-size: calc( var(--height,3) * 1px  - 0.5px);
			transform-origin: center;
			transform-box: fill-box;
			vector-effect:non-scaling-stroke;
			transform: rotate(calc( var(--inverted,0) * 180deg));
		}*/
}
.route > .map * {
  shape-rendering: optimizeSpeed;
}
.route > .map .scaled {
  --scaled-offset-x: calc(var(--offset-x) * var(--scale));
  --scaled-offset-y: calc(var(--offset-y) * var(--scale));
  transform: translate(calc(var(--offset-x) * 1px), calc(var(--offset-y) * 1px)) scale(var(--scale, 1));
}
.route > .map #dot,
.route > .map circle {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke: var(--tour-color, #4CAF50);
  fill: white;
}
.route > .map #path .walkpath {
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  stroke: var(--tour-color, #4CAF50);
  fill: none;
}
.route > .map #path text {
  stroke-width: 1;
  stroke: none;
  fill: var(--tour-color, #4CAF50);
  font-family: Verdana;
  font-size: 20;
}
.route > .map #path line,
.route > .map #path polygon {
  vector-effect: non-scaling-stroke;
}
.route > .map .wall {
  stroke-width: 1;
  stroke: black;
}
.route > .map .cabinet {
  stroke-width: 1;
  stroke: black;
  fill: #CCC;
  transform-origin: center;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
  --start: 0;
  --end: 120;
}
.route > .map .cabinetfront {
  stroke-width: 1;
  stroke: none;
  fill: rgba(0, 0, 0, 0.2);
  transform-origin: center;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
}
.route > .map .cabinstance {
  transform: translateX(calc(var(--x, 0) * 1px)) translateY(calc(var(--y, 0) * 1px)) rotate(calc(var(--direction, 0) * 1deg));
  transform-origin: center;
  transform-box: fill-box;
}
.route > .map text {
  text-anchor: middle;
  dominant-baseline: central;
  inline-size: calc(var(--width, 10) * 1px - 0.5px);
  font-size: calc(var(--height, 3) * 1px - 0.5px);
  transform-origin: center;
  transform-box: fill-box;
  vector-effect: non-scaling-stroke;
  transform: rotate(calc(var(--inverted, 0) * 180deg));
}
/*menu.root
{
	background-color: var(--color-contrast-background);
	color: var(--color-contrast-middleground);
	box-shadow: 0 1px 3px 0 var(--color-shadow);
	width:55px;
	transition: width .1s ease-in-out;
	z-index: 999;
	overflow-x: hidden;
	position: absolute;
	height: 100%;

	display: grid;
	grid-template-columns: auto 1fr;
	grid-auto-rows: min-content;
	grid-auto-flow: row;
	row-gap: var(--spacing-isolated);
	column-gap: var(--spacing-separated);

	align-items: start;
	justify-items: start;
	justify-content: stretch;
	align-content: flex-start;

	padding: var(--spacing-isolated);
	padding-right: var(--spacing-isolated);

	a
	{
		display: grid;
		grid-template-columns: subgrid;
		grid-column-start: 1;
		grid-column-end:-1;
		icon
		{
			grid-column-start: 1;
		}
		title
		{
			display: inline-block;
			grid-column-start: 2;
		}
	}
	&>menu
	{
		display: none;
		grid-column-start: 1;
		grid-column-end: -1;
		grid-template-columns: auto 1fr auto;
		max-height: 0px;
		overflow: hidden;

		&>a
		{
			&::before
			{
				grid-column-start: 1;
				content: '';
				border-left: 1px dashed var(--color-contrast-middleground);
				border-bottom: 1px dashed var(--color-contrast-middleground);
				display: block;
				border-radius: unset;
				width: 100%;
				height: 150%;
				margin-top: -100%;
				justify-self: end;
				align-self: start;
				margin-right: -50%;
			}
		}


	}
	&>a.open+menu
	,&>a:active+menu
		,&>a:focus+menu
		,&>a:focus-within+menu
		,&>menu:focus
		,&>menu:focus-within
		,&>menu:active
		{
		max-height: 100%;
		display: grid;
		grid-template-columns: subgrid;
		row-gap:var(--spacing-separated);
		overflow: visible;


	}

}

menu.root.expanded
{
	position: static;
	width:240px;
}
*/
menu.root {
  background-color: var(--color-contrast-background);
  color: var(--color-contrast-middleground);
  box-shadow: 0 1px 3px 0 var(--color-shadow);
  padding-top: var(--spacing-isolated);
  width: 55px;
  transition: width 0.1s ease-in-out;
  z-index: 999;
  overflow-x: hidden;
  position: fixed;
  min-height: 100%;
}
@media (min-width: 900px) {
  menu.root.expanded {
    position: sticky;
    align-self: start;
    justify-self: start;
    top: 64px;
    min-height: calc(100vh - 64px);
  }
  menu.root.expanded {
    width: 240px;
  }
  menu.root.expanded a.open + menu,
  menu.root.expanded a:active + menu,
  menu.root.expanded a:focus + menu,
  menu.root.expanded a:focus-within + menu,
  menu.root.expanded menu:focus,
  menu.root.expanded menu:focus-within,
  menu.root.expanded menu:active {
    max-height: 100%;
  }
  menu.root.expanded > a > title {
    display: inline-block;
  }
  menu.root.expanded > a::after {
    display: inline-block;
  }
}
menu.root:hover {
  width: 240px;
}
menu.root:hover a.open + menu,
menu.root:hover a:active + menu,
menu.root:hover a:focus + menu,
menu.root:hover a:focus-within + menu,
menu.root:hover menu:focus,
menu.root:hover menu:focus-within,
menu.root:hover menu:active {
  max-height: 100%;
}
menu.root:hover > a > title {
  display: inline-block;
}
menu.root:hover > a::after {
  display: inline-block;
}
menu.root > a > title {
  display: none;
}
menu.root > a::after {
  display: none;
}
menu {
  width: 100%;
  user-select: none;
  display: inline-grid;
  grid-template-columns: 1fr;
  grid-auto-rows: auto;
  justify-items: stretch;
  align-items: start;
  justify-content: stretch;
  align-content: start;
  scrollbar-width: var(--spacing-normal);
  scrollbar-color: var(--color-contrast-middleground);
}
menu::-webkit-scrollbar {
  width: var(--spacing-normal);
}
menu::-webkit-scrollbar-track {
  background: var(--color-contrast-middleground);
}
menu::-webkit-scrollbar-thumb {
  background: var(--color-contrast-middleground);
  border-radius: var(--spacing-normal);
}
menu a {
  display: grid;
  grid-template-columns: 16px 1fr 16px;
  grid-template-areas: "icon title chevron";
  /*		transition: color .1s ease-in-out, text-shadow .1s ease-in-out;*/
  cursor: pointer;
  text-transform: none;
  column-gap: var(--spacing-separated);
  text-shadow: 0 1px 2px var(--color-shadow-text);
  padding: var(--spacing-separated);
  padding-left: var(--spacing-isolated);
}
menu a > icon {
  grid-area: icon;
  justify-self: center;
  align-self: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
menu a > title {
  align-self: center;
  grid-area: title;
  display: inline-block;
  white-space: nowrap;
}
menu a:has(+ menu)::after {
  align-self: center;
  grid-area: chevron;
  content: "\f078";
  width: 8px;
  display: inline-block;
  font-family: 'Font Awesome 6 Free' !important;
  font-size: 8px;
  line-height: 8px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
menu a:hover,
menu a:focus {
  background-color: var(--color-contrast-middleground);
  color: var(--color-contrast-foreground);
}
menu a.open {
  color: var(--color-contrast-foreground);
}
menu a.open > icon {
  background-color: var(--color-contrast-foreground);
  color: var(--color-contrast-background);
  text-shadow: none;
}
menu a.open:has(+ menu)::after,
menu a:active:has(+ menu)::after,
menu a:focus:has(+ menu)::after,
menu a:focus-within:has(+ menu)::after {
  content: "\f077";
}
menu > menu {
  max-height: 0px;
  transition: max-height 0.1s ease-in-out;
  /*display: block;*/
  overflow-x: hidden;
  overflow-y: hidden;
}
menu > menu > a {
  padding: var(--spacing-normal);
  padding-left: var(--spacing-isolated);
  font-size: 0.85rem;
  grid-template-columns: 16px 1fr;
}
panel.modal {
  display: none;
}
backdrop {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background-color: var(--color-shadow-dark);
  background: radial-gradient(circle, transparent, var(--color-shadow-dark) 100%);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
backdrop > spinner {
  display: block;
  padding: var(--spacing-isolated);
  border-radius: var(--spacing-normal);
  background-color: var(--color-surface-background);
  width: 250px;
  text-align: center;
  box-shadow: 0px 10px 40px 10px var(--color-shadow-dark);
}
backdrop > spinner:before {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 20px auto;
  border-radius: 50%;
  border-width: 6px;
  border-style: solid;
  border-color: var(--color-contrast-background) transparent var(--color-contrast-background) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
backdrop modal {
  display: grid;
  grid-template-columns: [left] 1fr [right];
  grid-template-rows: [top] 1fr [bottom];
  grid-auto-columns: auto;
  grid-auto-rows: auto;
  grid-template-areas: "decor content" "decor input" "decor toolbar";
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  /*gap:var(--spacing-isolated);*/
  padding: var(--spacing-isolated);
  border-radius: var(--spacing-normal);
  background-color: var(--color-surface-background);
  color: var(--color-surface-foreground);
  min-width: 500px;
  font-size: var(--font-size-big);
  box-shadow: 0px 10px 40px 10px var(--color-shadow-dark);
}
backdrop modal > exclamation {
  grid-area: decor;
  border: 5px solid var(--color-surface-foreground);
  border-radius: 50%;
  width: 64px;
  height: 64px;
  margin-right: var(--spacing-isolated);
}
backdrop modal > exclamation::before {
  content: '';
  pointer-events: none;
  background-color: #444;
  width: 5px;
  height: 27px;
  top: 20%;
  display: block;
  position: relative;
  margin: auto;
}
backdrop modal > exclamation::after {
  content: '';
  pointer-events: none;
  background-color: #444;
  width: 5px;
  height: 5px;
  top: 27%;
  display: block;
  position: relative;
  margin: auto;
}
backdrop modal.popup {
  padding: 0px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
}
backdrop modal > content {
  grid-area: content;
  display: block;
}
backdrop modal > content > small {
  font-size: var(--font-size-large);
  color: var(--color-surface-halftone);
}
backdrop modal > input {
  grid-area: input;
  margin-top: var(--spacing-isolated);
}
backdrop modal > toolbar {
  grid-area: toolbar;
  text-align: center;
  margin-top: var(--spacing-isolated);
}
backdrop modal > panel {
  font-size: 1rem;
  width: 100%;
}
backdrop modal > panel > header {
  padding: var(--spacing-normal);
}
backdrop modal > panel > header > title {
  font-size: 1rem;
}
backdrop modal > panel > header button,
backdrop modal > panel > header .button {
  padding: var(--spacing-normal);
  min-height: auto;
  grid-gap: var(--spacing-normal);
}
backdrop iframe {
  display: block;
  border-radius: var(--spacing-normal);
  background-color: var(--color-surface-background);
  transition: width 0.1s ease-in-out, height 0.1s ease-in-out;
  box-shadow: 0px 10px 40px 10px var(--color-shadow-dark);
}
backdrop panel.modal {
  display: grid;
  align-self: center;
}
backdrop panel.modal > header {
  position: sticky;
  top: 0px;
  z-index: 999;
}
backdrop panel.modal > header > toolbar button.close-dialog {
  min-width: unset;
  box-shadow: unset;
  background-color: transparent;
  color: var(--color-highlight-background);
}
body.onback {
  position: fixed;
  overflow: hidden;
}
body.modal {
  /*display: flex;
	flex-direction: column;
	row-gap: var(--spacing-normal);
	align-content: stretch;
	align-items: stretch;
	flex-wrap: nowrap;*/
  grid-template-areas: ".";
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  align-content: stretch;
  justify-content: stretch;
  align-items: stretch;
  justify-items: stretch;
  /*	panel
	{
		height: max-content;
		min-height: 100%;
		&>header
		{

			padding: var(--spacing-normal);
			&>title
			{
				font-size: 1em;
				diplay:inline-block;
			}
			button,.button
			{
				padding: var(--spacing-normal);
				min-height:auto;
				grid-gap: var(--spacing-normal);
			}
		}
	}*/
  /*	form > header
	{
		margin-left: calc(0px - var(--spacing-normal));
		width:calc(var(--spacing-normal) * 2 + 100%);
		position: sticky;
		top: 0px;
		z-index: 1;
	}
	section:last-child
		{
		padding-bottom: 2rem;
	}*/
}
body.modal panel {
  display: grid;
  height: max-content;
  min-height: 100%;
}
body.modal panel > header {
  position: sticky;
  top: 0px;
  z-index: 999;
}
body.modal panel > header > toolbar button.close-dialog {
  min-width: unset;
  box-shadow: unset;
  background-color: transparent;
  color: var(--color-highlight-background);
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
panel {
  display: grid;
  align-self: start;
  grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "header" "content" "info" "footer";
  color: var(--color-surface-foreground);
  background-color: var(--color-surface-background);
  box-shadow: 0 3px 3px var(--color-shadow);
  justify-items: stretch;
  align-items: stretch;
  justify-content: stretch;
  border-radius: var(--spacing-minimum);
  width: 100%;
  min-width: min-content;
}
panel.header {
  margin-bottom: calc(0px - var(--spacing-isolated)) !important;
}
panel.header > header {
  background-color: var(--color-contrast-middleground) !important;
}
panel.medium {
  width: 50%;
}
panel.large {
  width: 100%;
}
panel.fullscreen {
  width: 100%;
  height: 100%;
}
panel.fullscreen > content {
  padding: 0px;
}
panel.small {
  width: 25%;
}
panel.extra-small {
  width: 12.5%;
}
panel > header {
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr auto;
  padding: var(--spacing-separated);
  background-color: var(--color-contrast-background);
  border-top-left-radius: var(--spacing-minimum);
  border-top-right-radius: var(--spacing-minimum);
}
panel > header title {
  display: inline-block;
  justify-self: start;
  align-self: center;
  font-size: var(--font-size-big);
  color: var(--color-contrast-foreground);
  align-items: center;
  text-align: center;
  padding-left: var(--spacing-separated);
}
panel > header toolbar {
  justify-self: end;
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 5px;
  --color-highlight-border: var(--color-highlight-foreground-inverted);
  --color-highlight-background: var(--color-highlight-foreground-inverted);
  --color-highlight-foreground: var(--color-highlight-background-inverted);
}
panel > content {
  grid-area: content;
  padding: var(--spacing-isolated);
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
}
panel > content spacer {
  text-align: center;
  padding: var(--spacing-normal);
}
panel > content:not(.static)::after {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
panel > content:not(.static) break {
  display: contents;
}
panel > content:not(.static) break::before {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
panel > content:not(.static) break::after {
  content: '';
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
panel > content.static {
  --responsiveness: 0;
}
panel > content.static break {
  display: block;
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
panel > content.static break.whitespace {
  height: var(--spacing-isolated);
}
panel > content > * {
  --weight: 100;
  flex-basis: calc(var(--weight) * 1%);
  flex-grow: calc(var(--weight) * var(--responsiveness, 1));
  flex-shrink: calc((100 - var(--weight)) * var(--responsiveness, 1));
  min-width: calc(var(--responsiveness, 1) * calc(var(--break-size, 0ch) / var(--responsive-depth, 1)));
  @container style(--is-responsive-alternate:0) {
	--is-responsive-alternate: 1;
	--responsive-depth: calc(var(--responsive-inherited--odd, 0) + 1);
	--responsive-inherited--even: var(--responsive-depth);
}

@container style(--is-responsive-alternate:1) {
	--is-responsive-alternate: 0;
	--responsive-depth: calc(var(--responsive-inherited--even, 0) + 1);
	--responsive-inherited--odd: var(--responsive-depth);
}
  /*&:before {
			counter-reset: variable ~"var(--responsive-depth)";
			content: counter(variable);
		}*/
}
panel > content > *.large {
  --weight: 100;
  --break-size: 40ch;
}
panel > content > *.medium-large {
  --weight: 66.6;
  --break-size: 40ch;
}
panel > content > *.intermedium {
  --weight: 75;
}
panel > content > *.medium {
  --weight: 50;
}
panel > content > *.third,
panel > content > *.medium-small {
  --weight: 33.3;
  --break-size: 40ch;
}
panel > content > *.small-medium {
  --weight: 37.5;
}
panel > content > *.small {
  --weight: 25;
  --break-size: 20ch;
}
panel > content > *.extra-small,
panel > content > *.mini {
  --weight: 12.5;
  --break-size: 10ch;
}
panel > content > *.micro {
  --weight: 6.25;
  --break-size: 10ch;
}
panel > content > *.size-4 {
  --weight: 4.3;
}
panel > content > *.size-5 {
  --weight: 5.8;
}
panel > content > *.size-6 {
  --weight: 6.3;
}
panel > content > *.size-8 {
  --weight: 8.3;
}
panel > content > *.size-10 {
  --weight: 10;
}
panel > content > *.size-11 {
  --weight: 11.66;
}
panel > content > *.size-14 {
  --weight: 14.28;
}
panel > content > *.size-16 {
  --weight: 16.6;
}
panel > content > *.size-20 {
  --weight: 20;
}
panel > content > *.size-30 {
  --weight: 30;
}
panel > content > *.size-33 {
  --weight: 33.3;
}
panel > content > *.size-40 {
  --weight: 40;
}
panel > content > *.size-50 {
  --weight: 50;
}
panel > content > *.size-60 {
  --weight: 60;
}
panel > content > *.size-66 {
  --weight: 66.6;
}
panel > content > *.size-70 {
  --weight: 70;
}
panel > content > *.size-80 {
  --weight: 80;
}
panel > content > *.size-90 {
  --weight: 90;
}
panel > content > *.size-100 {
  --weight: 100;
}
panel > content > warning {
  font-size: var(--font-size-big);
  flex-grow: 4;
  flex-shrink: 4;
  flex-basis: 100%;
}
panel > content > grid {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
}
panel > info {
  grid-area: info;
  padding: var(--spacing-isolated);
  padding-top: 0px;
}
panel > footer {
  grid-area: footer;
  background-color: var(--color-surface-background);
  display: grid;
  align-items: center;
  padding: var(--spacing-separated);
}
panel > footer toolbar {
  display: flex;
  justify-content: end;
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
}
panel > footer toolbar > fetchable > * {
  --weight: 0;
  flex-basis: auto;
  flex-grow: unset;
  flex-shrink: unset;
  min-width: auto;
}
panel.async > content:empty {
  justify-content: center;
}
panel.async > content:empty::before {
  content: " ";
  display: block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border-width: 6px;
  border-style: solid;
  border-color: var(--color-surface-middleground) transparent var(--color-surface-middleground) transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
panel.async > content:empty::after {
  content: none;
}
panel.async.fadeaway {
  animation: panel-timedhide 0s linear 11s both;
}
@keyframes panel-timedhide {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    max-height: 100%;
  }
  100% {
    opacity: 0;
    width: 0px;
    height: 0px;
    max-width: 0px;
    max-height: 0px;
    top: 0px;
    left: 0px;
  }
}
pillbox {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--spacing-minimum);
}
pill {
  display: inline;
  border: none;
  background-color: var(--color-surface-faded);
  color: var(--color-surface-foreground);
  border-radius: var(--spacing-minimum);
  padding: var(--spacing-minimum) var(--spacing-normal);
}
pill > a,
pill > button {
  min-height: auto;
  border: none;
  background-color: transparent;
  width: 15px;
  height: 10px;
  max-width: none;
  min-width: auto;
  padding: 0px;
  display: inline-grid;
}
pill > a:before,
pill > button:before {
  content: '';
  background-color: var(--color-surface-foreground);
  width: 2px;
  height: 100%;
  position: absolute;
  display: block;
  left: 50%;
  transform: rotate(45deg);
}
pill > a:after,
pill > button:after {
  content: '';
  background-color: var(--color-surface-foreground);
  width: 2px;
  height: 100%;
  position: absolute;
  display: block;
  left: 50%;
  transform: rotate(-45deg);
}
pill > a:hover,
pill > button:hover {
  background-color: transparent;
}
pill.error {
  background-color: var(--color-warning);
}
progress {
  --background: var(--color-highlight-foreground, #FFFFFF);
  --foreground: var(--color-highlight-background, #444444);
  background-color: var(--background);
  color: var(--foreground);
  accent-color: var(--foreground);
}
progress::-webkit-progress-bar {
  background-color: var(--background);
  width: 100%;
}
progress::-webkit-progress-value {
  background-color: var(--foreground) !important;
}
progress::-moz-progress-bar {
  background-color: var(--foreground) !important;
}
remark {
  display: block;
  white-space: normal;
  font-size: var(--font-size-small);
  color: var(--color-surface-faded);
}
svg.sparkline {
  height: 50px;
  width: 100%;
}
svg.sparkline polyline {
  stroke: var(--color-info);
  stroke-width: 1;
  fill: color-mix(in srgb, var(--color-info) 20%, transparent);
}
svg.sparkline circle {
  r: 2;
  fill: var(--color-danger);
}
svg.sparkline line {
  display: none;
  stroke: var(--color-info);
  stroke-width: 2;
}
svg.sparkline + div.sparktip {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: max-content;
  height: min-content;
  background-color: var(--color-highlight-background);
  color: var(--color-highlight-foreground);
  padding: var(--spacing-minimum);
  padding-inline: var(--spacing-normal);
  font-size: var(--font-size-small);
}
svg.sparkline:hover line {
  display: unset;
}
svg.sparkline:hover + div.sparktip {
  display: block;
}
tabs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: center;
  align-items: flex-start;
}
tabs > input[type="radio"] {
  display: none;
}
tabs > input[type="radio"]:checked + tabtitle {
  border-bottom: 2px solid var(--color-surface-foreground);
  color: var(--color-surface-foreground);
  opacity: 1;
}
tabs > input[type="radio"]:checked + tabtitle + tabcontent {
  display: inline-flex;
}
tabs::before {
  content: '';
  height: 1px;
  background-color: var(--color-surface-faded);
  order: 0;
  flex-basis: 100%;
  flex-grow: 1;
}
tabs > tabtitle {
  padding: 0px;
  color: var(--color-surface-foreground-bold);
  border-bottom: 2px solid transparent;
  order: -1;
  opacity: 0.5;
}
tabs > tabtitle:hover {
  background-color: var(--color-surface-middleground);
}
tabs > tabtitle label {
  text-transform: uppercase;
  display: block;
  color: inherit;
  font-size: inherit;
  font-weight: 500;
  padding: var(--spacing-separated) var(--spacing-isolated);
  white-space: nowrap;
  cursor: pointer;
  min-height: unset;
}
tabs > tabcontent {
  flex-basis: 100%;
  flex-grow: 1;
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  display: none;
  margin-top: var(--spacing-separated);
}
tabs > tabcontent spacer {
  text-align: center;
  padding: var(--spacing-normal);
}
tabs > tabcontent:not(.static)::after {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
tabs > tabcontent:not(.static) break {
  display: contents;
}
tabs > tabcontent:not(.static) break::before {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
tabs > tabcontent:not(.static) break::after {
  content: '';
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
tabs > tabcontent.static {
  --responsiveness: 0;
}
tabs > tabcontent.static break {
  display: block;
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
tabs > tabcontent.static break.whitespace {
  height: var(--spacing-isolated);
}
tabs > tabcontent > * {
  --weight: 100;
  flex-basis: calc(var(--weight) * 1%);
  flex-grow: calc(var(--weight) * var(--responsiveness, 1));
  flex-shrink: calc((100 - var(--weight)) * var(--responsiveness, 1));
  min-width: calc(var(--responsiveness, 1) * calc(var(--break-size, 0ch) / var(--responsive-depth, 1)));
  @container style(--is-responsive-alternate:0) {
	--is-responsive-alternate: 1;
	--responsive-depth: calc(var(--responsive-inherited--odd, 0) + 1);
	--responsive-inherited--even: var(--responsive-depth);
}

@container style(--is-responsive-alternate:1) {
	--is-responsive-alternate: 0;
	--responsive-depth: calc(var(--responsive-inherited--even, 0) + 1);
	--responsive-inherited--odd: var(--responsive-depth);
}
  /*&:before {
			counter-reset: variable ~"var(--responsive-depth)";
			content: counter(variable);
		}*/
}
tabs > tabcontent > *.large {
  --weight: 100;
  --break-size: 40ch;
}
tabs > tabcontent > *.medium-large {
  --weight: 66.6;
  --break-size: 40ch;
}
tabs > tabcontent > *.intermedium {
  --weight: 75;
}
tabs > tabcontent > *.medium {
  --weight: 50;
}
tabs > tabcontent > *.third,
tabs > tabcontent > *.medium-small {
  --weight: 33.3;
  --break-size: 40ch;
}
tabs > tabcontent > *.small-medium {
  --weight: 37.5;
}
tabs > tabcontent > *.small {
  --weight: 25;
  --break-size: 20ch;
}
tabs > tabcontent > *.extra-small,
tabs > tabcontent > *.mini {
  --weight: 12.5;
  --break-size: 10ch;
}
tabs > tabcontent > *.micro {
  --weight: 6.25;
  --break-size: 10ch;
}
tabs > tabcontent > *.size-4 {
  --weight: 4.3;
}
tabs > tabcontent > *.size-5 {
  --weight: 5.8;
}
tabs > tabcontent > *.size-6 {
  --weight: 6.3;
}
tabs > tabcontent > *.size-8 {
  --weight: 8.3;
}
tabs > tabcontent > *.size-10 {
  --weight: 10;
}
tabs > tabcontent > *.size-11 {
  --weight: 11.66;
}
tabs > tabcontent > *.size-14 {
  --weight: 14.28;
}
tabs > tabcontent > *.size-16 {
  --weight: 16.6;
}
tabs > tabcontent > *.size-20 {
  --weight: 20;
}
tabs > tabcontent > *.size-30 {
  --weight: 30;
}
tabs > tabcontent > *.size-33 {
  --weight: 33.3;
}
tabs > tabcontent > *.size-40 {
  --weight: 40;
}
tabs > tabcontent > *.size-50 {
  --weight: 50;
}
tabs > tabcontent > *.size-60 {
  --weight: 60;
}
tabs > tabcontent > *.size-66 {
  --weight: 66.6;
}
tabs > tabcontent > *.size-70 {
  --weight: 70;
}
tabs > tabcontent > *.size-80 {
  --weight: 80;
}
tabs > tabcontent > *.size-90 {
  --weight: 90;
}
tabs > tabcontent > *.size-100 {
  --weight: 100;
}
textpanel {
  padding: var(--spacing-separated);
}
textpanel > a {
  display: block;
}
textpanel.warning chrome {
  border-left: 3px solid var(--color-warning);
}
textpanel.warning chrome > icon {
  color: var(--color-warning);
}
textpanel.success chrome {
  border-left: 3px solid var(--color-success);
}
textpanel.success chrome > icon {
  color: var(--color-success);
}
textpanel.danger chrome {
  border-left: 3px solid var(--color-danger);
}
textpanel.danger chrome > icon {
  color: var(--color-danger);
}
textpanel chrome {
  display: inline-grid;
  align-self: start;
  grid-template-rows: auto auto 1fr auto;
  grid-template-columns: 1fr auto;
  grid-template-areas: "headline icon" "title icon" "content icon" "footnote icon";
  color: var(--color-surface-foreground);
  background-color: var(--color-surface-background);
  box-shadow: 0 1px 3px 0 var(--color-shadow);
  justify-items: stretch;
  align-items: stretch;
  justify-content: stretch;
  border-radius: var(--spacing-minimum);
  width: 100%;
  min-width: min-content;
  padding: var(--spacing-separated);
}
textpanel chrome > * + * {
  margin-top: var(--spacing-separated);
}
textpanel chrome > headline {
  grid-area: headline;
  display: inline-block;
  font-weight: 500;
  font-size: 2em;
}
textpanel chrome > title {
  grid-area: title;
  display: inline-block;
  font-weight: 500;
  font-size: 1.4rem;
}
textpanel chrome > content {
  grid-area: content;
  display: inline-block;
}
textpanel chrome > icon {
  grid-area: icon;
  display: block;
  align-self: center;
  justify-self: center;
  margin: 0px;
  font-size: 24px;
  width: 32px;
}
textpanel chrome > footnote {
  color: var(--color-surface-halftone);
  font-size: 0.9rem;
  grid-area: footnote;
  display: inline-block;
}
table {
  table-layout: fixed;
  width: 100%;
  flex-basis: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
table th,
table td {
  border: none !important;
  border-right: 1px solid #cccccc87 !important;
  border-bottom: 1px solid #cccccc87 !important;
}
table tr:first-child th,
table tr:first-child td {
  border-top: 1px solid #cccccc87 !important;
}
table th:first-child,
table td:first-child {
  border-left: 1px solid #cccccc87 !important;
}
table > thead > tr,
table > tfoot > tr {
  color: var(--color-surface-foreground);
  background-color: var(--color-surface-background);
}
table > thead > tr th,
table > tfoot > tr th {
  color: var(--color-surface-foreground-bold);
  font-weight: 500;
  display: table-cell;
  padding: var(--spacing-normal) var(--spacing-separated);
  border-bottom-width: 2px;
  height: 32px;
  vertical-align: middle;
  user-select: none;
  overflow: hidden;
  text-align: center;
}
table > thead > tr th.sort,
table > tfoot > tr th.sort,
table > thead > tr th.sort-up,
table > tfoot > tr th.sort-up,
table > thead > tr th.sort-down,
table > tfoot > tr th.sort-down,
table > thead > tr th.selector,
table > tfoot > tr th.selector {
  cursor: pointer;
}
table > thead > tr th.sort::before,
table > tfoot > tr th.sort::before,
table > thead > tr th.sort-up::before,
table > tfoot > tr th.sort-up::before,
table > thead > tr th.sort-down::before,
table > tfoot > tr th.sort-down::before,
table > thead > tr th.selector::before,
table > tfoot > tr th.selector::before {
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
  display: inline;
  vertical-align: text-bottom;
  text-align: center;
  width: 16px;
  height: 16px;
  font-family: 'Font Awesome 6 Free' !important;
  font-weight: 900;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 16px;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #fff;
}
table > thead > tr th.sort::before,
table > tfoot > tr th.sort::before {
  content: "\f0dc";
  color: var(--color-surface-faded);
}
table > thead > tr th.sort-up::before,
table > tfoot > tr th.sort-up::before {
  content: "\f0de";
  color: var(--color-surface-mediumground);
}
table > thead > tr th.sort-down::before,
table > tfoot > tr th.sort-down::before {
  content: "\f0dd";
  color: var(--color-surface-mediumground);
}
table > thead > tr th.selector > droplayer,
table > tfoot > tr th.selector > droplayer {
  display: none;
}
table > thead > tr th.selector::before,
table > tfoot > tr th.selector::before {
  content: "\f0dd";
  color: var(--color-surface-mediumground);
  transform: translateY(-75%);
}
table > tbody tr,
table > tfoot tr {
  display: table-row;
}
table > tbody tr.odd,
table > tfoot tr.odd {
  /*background-color: var(--color-surface-faded);*/
  background-color: color-mix(in srgb, var(--color-surface-faded) 20%, transparent);
}
table > tbody tr td,
table > tfoot tr td,
table > tbody tr th,
table > tfoot tr th {
  border: 1px solid #cccccc87;
  display: table-cell;
  padding: var(--spacing-normal) var(--spacing-separated);
  overflow: hidden;
  /*white-space: nowrap;*/
  height: 32px;
}
table > tbody tr td.number,
table > tfoot tr td.number,
table > tbody tr th.number,
table > tfoot tr th.number {
  text-align: right;
}
table > tbody tr td.toolbar,
table > tfoot tr td.toolbar,
table > tbody tr th.toolbar,
table > tfoot tr th.toolbar {
  text-align: right;
}
table > tbody tr td.invalid,
table > tfoot tr td.invalid,
table > tbody tr th.invalid,
table > tfoot tr th.invalid {
  font-weight: bold;
  text-decoration: underline;
  overflow: visible;
}
table > tbody tr td.strike,
table > tfoot tr td.strike,
table > tbody tr th.strike,
table > tfoot tr th.strike {
  color: var(--color-surface-foreground);
  background-color: var(--color-warning);
}
table > tbody tr td > progress,
table > tfoot tr td > progress,
table > tbody tr th > progress,
table > tfoot tr th > progress {
  width: 100%;
  vertical-align: middle;
}
table > tfoot > tr > th,
table > thead > tr > th,
table > tbody > tr > td {
  height: 32px;
  vertical-align: middle;
}
table > tfoot > tr > th > spreader,
table > thead > tr > th > spreader,
table > tbody > tr > td > spreader {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
table > tfoot > tr > th.text,
table > thead > tr > th.text,
table > tbody > tr > td.text {
  width: 30ch;
}
table > tfoot > tr > th.large,
table > thead > tr > th.large,
table > tbody > tr > td.large {
  width: 60ch;
}
table > tfoot > tr > th.reference,
table > thead > tr > th.reference,
table > tbody > tr > td.reference {
  width: 15ch;
}
table > tfoot > tr > th.date,
table > thead > tr > th.date,
table > tbody > tr > td.date {
  width: 10ch;
}
table > tfoot > tr > th.icon,
table > thead > tr > th.icon,
table > tbody > tr > td.icon {
  width: 15ch;
  text-align: center;
  overflow: visible;
}
table > tfoot > tr > th.icon label,
table > thead > tr > th.icon label,
table > tbody > tr > td.icon label {
  display: inline-grid;
}
table > tfoot > tr > th.short-number,
table > thead > tr > th.short-number,
table > tbody > tr > td.short-number {
  width: 6ch;
}
table > tfoot > tr > th.icon,
table > thead > tr > th.icon,
table > tbody > tr > td.icon {
  width: 6ch;
}
table > tfoot > tr > th.number,
table > thead > tr > th.number,
table > tbody > tr > td.number {
  width: 10ch;
}
table > tfoot > tr > th.toolbar,
table > thead > tr > th.toolbar,
table > tbody > tr > td.toolbar {
  min-width: 120px;
  text-align: center;
}
table > caption.footer {
  display: table-caption;
  caption-side: bottom;
  padding-top: var(--spacing-normal);
}
table > caption.footer > footerlayout {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--spacing-isolated);
}
table > caption.footer > footerlayout > pagination {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: end;
  align-items: stretch;
  justify-items: stretch;
  align-content: stretch;
  gap: var(--spacing-normal);
  white-space: nowrap;
  align-items: center;
}
table > caption.footer > footerlayout > pagination select:not([multiple]) + skin {
  border-radius: 0;
}
table > caption.footer > footerlayout > pageinfo {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  justify-items: stretch;
  align-content: stretch;
  gap: var(--spacing-normal);
  white-space: nowrap;
  align-items: center;
}
table > caption.footer > footerlayout > navigation {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  justify-items: stretch;
  align-content: stretch;
  gap: var(--spacing-normal);
  white-space: nowrap;
  align-items: center;
}
table > caption.footer > footerlayout > navigation > button {
  min-width: unset;
}
table > caption.header {
  display: table-caption;
  caption-side: top;
  padding-bottom: var(--spacing-normal);
}
table > caption.header > headerlayout {
  display: grid;
  grid-template-columns: auto auto 1fr ;
  grid-template-rows: auto auto auto ;
  grid-template-areas: "textsearch submit more" "pillbox pillbox pillbox" "filters filters filters";
  gap: var(--spacing-normal);
  justify-items: start;
  justify-content: start;
  align-items: center;
}
table > caption.header > headerlayout > .freetext {
  grid-area: textsearch;
  min-height: auto;
  width: 40ch;
}
table > caption.header > headerlayout > .submit {
  grid-area: submit;
}
table > caption.header > headerlayout > .more {
  grid-area: more;
  min-width: unset;
}
table > caption.header > headerlayout > pillbox {
  grid-area: pillbox;
}
table > caption.header > headerlayout > filters {
  grid-area: filters;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  display: none;
  justify-self: stretch;
}
table > caption.header > headerlayout > filters spacer {
  text-align: center;
  padding: var(--spacing-normal);
}
table > caption.header > headerlayout > filters:not(.static)::after {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
table > caption.header > headerlayout > filters:not(.static) break {
  display: contents;
}
table > caption.header > headerlayout > filters:not(.static) break::before {
  content: '';
  height: 0px;
  flex-basis: 25%;
  flex-grow: 100;
  flex-shrink: 0;
}
table > caption.header > headerlayout > filters:not(.static) break::after {
  content: '';
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
table > caption.header > headerlayout > filters.static {
  --responsiveness: 0;
}
table > caption.header > headerlayout > filters.static break {
  display: block;
  height: 0px;
  flex-basis: 100%;
  flex-grow: 100;
  flex-shrink: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}
table > caption.header > headerlayout > filters.static break.whitespace {
  height: var(--spacing-isolated);
}
table > caption.header > headerlayout > filters > * {
  --weight: 100;
  flex-basis: calc(var(--weight) * 1%);
  flex-grow: calc(var(--weight) * var(--responsiveness, 1));
  flex-shrink: calc((100 - var(--weight)) * var(--responsiveness, 1));
  min-width: calc(var(--responsiveness, 1) * calc(var(--break-size, 0ch) / var(--responsive-depth, 1)));
  @container style(--is-responsive-alternate:0) {
	--is-responsive-alternate: 1;
	--responsive-depth: calc(var(--responsive-inherited--odd, 0) + 1);
	--responsive-inherited--even: var(--responsive-depth);
}

@container style(--is-responsive-alternate:1) {
	--is-responsive-alternate: 0;
	--responsive-depth: calc(var(--responsive-inherited--even, 0) + 1);
	--responsive-inherited--odd: var(--responsive-depth);
}
  /*&:before {
			counter-reset: variable ~"var(--responsive-depth)";
			content: counter(variable);
		}*/
}
table > caption.header > headerlayout > filters > *.large {
  --weight: 100;
  --break-size: 40ch;
}
table > caption.header > headerlayout > filters > *.medium-large {
  --weight: 66.6;
  --break-size: 40ch;
}
table > caption.header > headerlayout > filters > *.intermedium {
  --weight: 75;
}
table > caption.header > headerlayout > filters > *.medium {
  --weight: 50;
}
table > caption.header > headerlayout > filters > *.third,
table > caption.header > headerlayout > filters > *.medium-small {
  --weight: 33.3;
  --break-size: 40ch;
}
table > caption.header > headerlayout > filters > *.small-medium {
  --weight: 37.5;
}
table > caption.header > headerlayout > filters > *.small {
  --weight: 25;
  --break-size: 20ch;
}
table > caption.header > headerlayout > filters > *.extra-small,
table > caption.header > headerlayout > filters > *.mini {
  --weight: 12.5;
  --break-size: 10ch;
}
table > caption.header > headerlayout > filters > *.micro {
  --weight: 6.25;
  --break-size: 10ch;
}
table > caption.header > headerlayout > filters > *.size-4 {
  --weight: 4.3;
}
table > caption.header > headerlayout > filters > *.size-5 {
  --weight: 5.8;
}
table > caption.header > headerlayout > filters > *.size-6 {
  --weight: 6.3;
}
table > caption.header > headerlayout > filters > *.size-8 {
  --weight: 8.3;
}
table > caption.header > headerlayout > filters > *.size-10 {
  --weight: 10;
}
table > caption.header > headerlayout > filters > *.size-11 {
  --weight: 11.66;
}
table > caption.header > headerlayout > filters > *.size-14 {
  --weight: 14.28;
}
table > caption.header > headerlayout > filters > *.size-16 {
  --weight: 16.6;
}
table > caption.header > headerlayout > filters > *.size-20 {
  --weight: 20;
}
table > caption.header > headerlayout > filters > *.size-30 {
  --weight: 30;
}
table > caption.header > headerlayout > filters > *.size-33 {
  --weight: 33.3;
}
table > caption.header > headerlayout > filters > *.size-40 {
  --weight: 40;
}
table > caption.header > headerlayout > filters > *.size-50 {
  --weight: 50;
}
table > caption.header > headerlayout > filters > *.size-60 {
  --weight: 60;
}
table > caption.header > headerlayout > filters > *.size-66 {
  --weight: 66.6;
}
table > caption.header > headerlayout > filters > *.size-70 {
  --weight: 70;
}
table > caption.header > headerlayout > filters > *.size-80 {
  --weight: 80;
}
table > caption.header > headerlayout > filters > *.size-90 {
  --weight: 90;
}
table > caption.header > headerlayout > filters > *.size-100 {
  --weight: 100;
}
@supports (-moz-appearance:none) {
  table {
    margin-bottom: 2em;
  }
  table > caption.footer {
    position: absolute;
    width: 100%;
  }
}
toastlist {
  position: fixed;
  bottom: 0px;
  right: 0px;
  max-height: 100vh;
  padding: var(--spacing-isolated);
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--spacing-isolated);
  overflow: hidden;
  animation: toasts-timedhide 0s ease-out 11s both;
}
toastlist > toast {
  color: var(--color-surface-background);
  background-color: var(--color-success);
  display: grid;
  min-width: 400px;
  box-shadow: 0px 0px 10px 3px var(--color-shadow);
  grid-template-columns: auto 1fr;
  justify-items: start;
  align-items: center;
  min-height: 3rem;
  gap: var(--spacing-isolated);
  padding: var(--spacing-isolated);
  border-radius: var(--spacing-normal);
  animation: toast-timedfade 1s ease-out 10s both;
}
toastlist > toast > icon {
  justify-self: center;
  align-self: center;
}
toastlist > toast.warning {
  background-color: var(--color-warning) !important;
}
@keyframes toast-timedfade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes toasts-timedhide {
  100% {
    max-height: 0px;
    padding: 0px;
  }
}
toolbar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  gap: var(--spacing-normal);
}
* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  border: 0px;
  outline: 0px;
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: inherit;
  font-size: inherit;
  vertical-align: baseline;
  background: transparent;
  position: relative;
  color: inherit;
  text-decoration: none;
  line-height: initial;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
html {
  height: 100%;
  color: var(--color-workspace-foreground);
  background-color: var(--color-workspace-background);
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: var(--font-size-normal);
}
b {
  font-weight: bold;
}
:target {
  scroll-margin-top: calc(var(--spacing-isolated) + 64px);
}
* {
  scroll-behavior: smooth;
}