/***

    NederHost default styles

***/
/***

    Colors are defined in variables with a name of the form
    'c-{scheme}-{colorspec}. The following color schemes are defined:

    * edge -- subdued color for top and bottom elements on the screen; our
      logo will be place on this so the colors should not clash with it
    * inactive -- subdued color for the background of inactive parts of the
      screen
    * active -- color for the active parts of the screen that have no
      specific accent applied
    * accent -- accent color with big contrast with active color (e.g. dark
      blue if 'active' is white)
    * accentdim -- accent color with less contrast with active color (e.g.
      light blue if 'active' is white)
    * accentbright -- striking accent color with lots of contrast (e.g.
      orange)

    For most color schemes the following colors are defined:
    * fg -- primary foreground color, e.g. for text
    * bg -- background color
    * link -- color for rendering hyperlinks
    * border -- color for generic borders

    Some color schemes define the following colors as well:
    * button-bg -- background color for buttons
    * button-fg -- foreground/text color for buttons
    * button-border -- border color for buttons

    Accented items may be styled by switching fg and bg ('reverse').

    For the 'active' color scheme the following additional colors are
    defined:
    * danger -- color to be used to indicate danger or removal ("red")
    * confirm -- color to be used to indicate success or addition ("green")
    * error-bg -- background color for errors
    * error-fg -- foreground color for errors
    * error-border -- border color for errors
    * form-bg -- background color for form inputs
    * form-fg -- text color for form inputs
    * form-label -- color for form labels
    * form-border -- color for form element borders

    Generic colors without context:
    * shadow -- base color for rendering shadows

    Some other styling variables are related to specific values and have no
    'c-' prefix:
    * default-radius -- default radius to be used for element corners that
      need to be a rounded a bit without taking too much focus
    * accent-radius -- default radius to be used for elements in a
      contrasting color (e.g. colored in an accent color)
    * active-radius -- default radius for elements that can be interacted
      with, such as form inputs and buttons

    Last but not least some (parametrized) mixins are added to the end of
    this file.

***/
/*
Because we generate SVG inline with LessCSS, the colors to do *that* need
to be styled with plain colors and not CSS variables. Classes using these
colors must add a selector for every supported theme themselves.
*/
:root {
  --c-edge-fg: #fff;
  --c-edge-bg: #333;
  --c-edge-link: var(--c-edge-fg);
  --c-edge-border: var(--c-edge-fg);
  --c-inactive-fg: #888;
  --c-inactive-bg: #eee;
  --c-active-fg: #000;
  --c-active-bg: #fff;
  --c-active-link: #0066d9;
  --c-active-border: #2d6cb3;
  --c-active-button-bg: #2d6cb3;
  --c-active-button-fg: #fff;
  --c-active-button-border: var(--c-active-button-bg);
  --c-active-danger: #e00;
  --c-active-confirm: #0a0;
  --c-active-error-bg: #f67575;
  --c-active-error-fg: #000;
  --c-active-error-border: #f23e3e;
  --c-active-form-bg: var(--c-active-bg);
  --c-active-form-fg: var(--c-active-fg);
  --c-active-form-label: var(--c-active-border);
  --c-active-form-border: var(--c-active-border);
  --c-accent-fg: #eee;
  --c-accent-bg: #409aff;
  --c-accent-link: #fff;
  --c-accent-border: var(--c-active-border);
  --c-accent-button-bg: var(--c-active-button-bg);
  --c-accent-button-fg: var(--c-active-button-fg);
  --c-accent-button-border: #fff;
  --c-accentdim-fg: #000;
  --c-accentdim-bg: #e9f3ff;
  --c-accentdim-link: var(--c-active-link);
  --c-accentdim-border: var(--c-active-border);
  --c-accentdim-button-bg: var(--c-active-button-bg);
  --c-accentdim-button-fg: var(--c-active-button-fg);
  --c-accentdim-button-border: var(--c-active-button-border);
  --c-accentbright-fg: #000;
  --c-accentbright-bg: #ffa242;
  --c-accentbright-link: #fff;
  --c-accentbright-border: #ccc;
  --c-accentbright-button-bg: var(--c-active-button-bg);
  --c-accentbright-button-fg: var(--c-active-button-fg);
  --c-accentbright-button-border: #000;
  --c-shadow: rgba(0, 0, 0, 0.25);
  --default-radius: 0.25rem;
  --accent-radius: 0.25rem;
  --active-radius: 0.4rem;
}
:root.theme-dark {
  /*** Dark mode colors, insofar as they are different. ***/
  --c-inactive-fg: #888;
  --c-inactive-bg: #080808;
  --c-active-fg: #fff;
  --c-active-bg: #222;
  --c-active-link: #73b5ff;
  --c-active-border: #bbb;
  --c-active-error-fg: #fff;
  --c-active-button-bg: #6ca0da;
  --c-active-danger: #e00;
  --c-active-confirm: #0a0;
  --c-accent-fg: #eee;
  --c-accent-bg: #004ea6;
  --c-accent-link: #fff;
  --c-accent-button-border: #fff;
  --c-accentdim-fg: #fff;
  --c-accentdim-bg: #336;
}
:root.theme-dos {
  /*** Gimmick ***/
  --c-edge-fg: #fff;
  --c-edge-bg: #000;
  --c-inactive-fg: #aaaaaa;
  --c-inactive-bg: #000;
  --c-active-fg: #fff;
  --c-active-bg: #0000aa;
  --c-active-link: #55ffff;
  --c-active-border: #ffff55;
  --c-active-button-bg: #00aaaa;
  --c-active-button-fg: #fff;
  --c-active-danger: #ff5555;
  --c-active-confirm: #00aa00;
  --c-active-error-bg: #aa0000;
  --c-active-error-fg: #fff;
  --c-active-error-border: var(--c-active-error-bg);
  --c-active-form-label: #ffff55;
  --c-active-form-border: #fff;
  --c-accent-fg: #000;
  --c-accent-bg: #00aaaa;
  --c-accent-link: #fff;
  --c-accentdim-fg: #fff;
  --c-accentdim-bg: #aaaaaa;
  --c-accentdim-link: #000;
  --c-accentbright-fg: #000;
  --c-accentbright-bg: #55ffff;
  --c-accentbright-link: #0000aa;
  --c-accentbright-border: var(--c-accentbright-fg);
  --c-accentbright-button-border: (var--c-accentbright-fg);
  --c-shadow: rgba(0, 0, 0, 0.5);
  --default-radius: 0;
  --accent-radius: 0;
  --active-radius: 0;
}
/***

  Default font LessCSS variables (used because CSS variables dont support
  lists):
  * heading -- for h1, h2 and h3 headers
  * body -- for body text and h4 or lower headers
  * legible -- for extreme legibility (might be monospace)
  * monospace -- a monospace font

***/
/***

  Mixin for styling a raised element (in principle this is an element that
  the user wants to interact with before interacting with other elements on
  the screen, such as a popout menu).

***/
/***

  Mixin for rendering inline SVG images. These are usually laid out as a
  <div> with a <span> placeholder text inside.

***/
/***

  Mixin for our logo.

***/
/*** The rest is a reset of the basic styles so all browsers render the same ***/
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
/* Mixin for rendering main items in the workspace area */
/* Mixin for rendering an element in the center of the browser window */
/* Mixin for inlining an SVG image */
/***

SVG for icons.

***/
/***

Styling for inline "badges".

***/
.badge {
  display: inline-block;
  border-radius: var(--c-default-radius);
  padding: var(--c-default-radius);
  color: var(--c-active-bg);
  background-color: var(--c-active-fg);
}
.badge.danger,
.badge.error {
  background-color: var(--c-active-danger);
}
.badge.confirm,
.badge.ok {
  background-color: var(--c-active-confirm);
}
/***

  Buttons within or without forms.

***/
button {
  background-color: var(--c-active-button-bg);
  color: var(--c-active-button-fg);
  font-size: 0.95rem;
  padding: 0.35em 1em;
  border-radius: var(--active-radius);
  border-width: 0.1em;
  border-color: var(--c-active-button-border);
  border-style: outset;
}
button:active {
  border-style: inset;
}
button:disabled {
  opacity: 0.6;
}
button.delete {
  border-color: var(--c-active-danger) !important;
  background-color: var(--c-active-danger) !important;
  color: var(--c-active-bg) !important;
}
button.expand {
  margin-top: 0.5em;
  margin-bottom: 1em;
  background-color: var(--c-active-bg);
  color: var(--c-active-fg);
}
button.expand.is-expanded::before {
  content: '« ';
}
button.expand.is-collapsed::after {
  content: ' »';
}
.buttongroup {
  margin: 1em 0;
}
.buttongroup button {
  margin-right: 1em;
}
.buttongroup button:last-child {
  margin-right: 0;
}
.buttongroup button.cancel {
  cursor: pointer;
  float: right;
  background: none !important;
  border: none !important;
  text-decoration: underline;
  color: var(--c-active-link) !important;
  margin-right: -1em;
  /* also negate padding */
}
.dialog_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: minmax(2em, 1fr) min-content minmax(2em, 1fr);
  grid-template-columns: minmax(2em, 1fr) min-content minmax(2em, 1fr);
  grid-template-areas: "lmargin tmargin rmargin" "lmargin dialog rmargin" "lmarking bmargin rmargin";
}
.dialog_wrapper .dialog_background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--c-inactive-bg);
  opacity: 0.5;
  z-index: 10;
}
.dialog_wrapper .dialog {
  grid-area: dialog;
  position: relative;
  min-height: min-content;
  width: max-content;
  display: grid;
  grid-template-rows: min-content min-content min-content;
  grid-template-areas: "title" "body" "buttons";
  background-color: var(--c-active-bg);
  color: var(--c-active-fg);
  box-shadow: 0 0 0.5em 0.125em var(--c-shadow);
  border-radius: var(--active-radius);
  overflow: hidden;
  border: 2px solid var(--c-accent-border);
  padding: 0;
  z-index: 100;
}
.dialog_wrapper .dialog h2 {
  grid-area: title;
  background-color: var(--c-accent-bg);
  color: var(--c-accent-fg);
  padding: 1rem 2rem;
  margin: 0;
}
.dialog_wrapper .dialog p {
  max-width: 40em;
}
.dialog_wrapper .dialog .dialog_body {
  grid-area: body;
  padding: 1em 2em;
  background-color: var(--c-active-bg);
  color: var(--c-active-fg);
  max-width: 80vw;
  /* Scroll markers are visible if the body is scrollable */
}
.dialog_wrapper .dialog .dialog_body.scrollable-top,
.dialog_wrapper .dialog .dialog_body.scrollable-bottom {
  border: 0.0624em solid var(--c-accentdim-border);
  border-radius: 0.25em;
  padding: 0 1em;
  margin: 1em 2em;
  overflow-x: hidden;
}
.dialog_wrapper .dialog .dialog_body .top-scroll-marker,
.dialog_wrapper .dialog .dialog_body .bottom-scroll-marker {
  position: sticky;
  height: 2em;
  background-color: var(--c-active-bg);
  background-position: center;
  background-size: 2em 2em;
  z-index: 10;
  margin: 0 -2em;
}
.dialog_wrapper .dialog .dialog_body .top-scroll-marker {
  top: 0;
  margin-bottom: -2em;
  box-shadow: var(--c-shadow) 0 0.25em 0.25em -0.25em;
}
.dialog_wrapper .dialog .dialog_body .bottom-scroll-marker {
  bottom: 0;
  margin-top: -2em;
  box-shadow: var(--c-shadow) 0 -0.25em 0.25em -0.25em;
}
.dialog_wrapper .dialog > .buttongroup {
  grid-area: buttons;
  background-color: var(--c-accentdim-bg);
  padding: 1em 2em;
  margin: 0;
}
.dialog_wrapper .dialog > .buttongroup button {
  background-color: var(--c-accentdim-button-bg);
  color: var(--c-accentdim-button-fg);
  border-color: var(--c-accentdim-button-border);
}
/* Styles for system errors */
.dialog_wrapper .dialog.error {
  border-color: var(--c-active-error-border);
}
.dialog_wrapper .dialog.error h2 {
  background-color: var(--c-active-error-bg);
  color: var(--c-active-error-fg);
}
/*** Scroll marker colors per theme ***/
/* Default theme ('theme-light') */
.dialog_wrapper .dialog .dialog_body .top-scroll-marker {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22?%3E%3Csvg%20width%3D%22130%22%20height%3D%2260%22%20viewBox%3D%220%200%2034.395832%2015.875001%22%20version%3D%221.1%22%20id%3D%22svg5%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%3Cdefs%20id%3D%22defs2%22%20/%3E%20%3Cg%20id%3D%22layer1%22%3E%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23000%3Bstroke-width%3A1.5875%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20%20d%3D%22M%201.3229172,13.229158%2017.197917,2.6458255%2033.072916,13.229158%22%20%20id%3D%22path894%22%20/%3E%20%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.dialog_wrapper .dialog .dialog_body .bottom-scroll-marker {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22?%3E%3Csvg%20%20width%3D%22130%22%20%20height%3D%2260%22%20%20viewBox%3D%220%200%2034.395832%2015.875001%22%20%20version%3D%221.1%22%20%20id%3D%22svg5%22%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cdefs%20id%3D%22defs2%22%20/%3E%3Cg%20id%3D%22layer1%22%3E%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23000%3Bstroke-width%3A1.5875%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M%201.3229172,2.6458415%2017.197917,13.229174%2033.072916,2.6458415%22%20id%3D%22path894%22%20/%3E%20%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
/* Dark mode */
.theme-dark .dialog_wrapper .dialog .dialog_body .top-scroll-marker {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22?%3E%3Csvg%20width%3D%22130%22%20height%3D%2260%22%20viewBox%3D%220%200%2034.395832%2015.875001%22%20version%3D%221.1%22%20id%3D%22svg5%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%3Cdefs%20id%3D%22defs2%22%20/%3E%20%3Cg%20id%3D%22layer1%22%3E%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23fff%3Bstroke-width%3A1.5875%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20%20d%3D%22M%201.3229172,13.229158%2017.197917,2.6458255%2033.072916,13.229158%22%20%20id%3D%22path894%22%20/%3E%20%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.theme-dark .dialog_wrapper .dialog .dialog_body .bottom-scroll-marker {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22?%3E%3Csvg%20%20width%3D%22130%22%20%20height%3D%2260%22%20%20viewBox%3D%220%200%2034.395832%2015.875001%22%20%20version%3D%221.1%22%20%20id%3D%22svg5%22%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cdefs%20id%3D%22defs2%22%20/%3E%3Cg%20id%3D%22layer1%22%3E%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23fff%3Bstroke-width%3A1.5875%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M%201.3229172,2.6458415%2017.197917,13.229174%2033.072916,2.6458415%22%20id%3D%22path894%22%20/%3E%20%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
/***

  Rendering of error messages.

***/
span.error {
  color: var(--c-active-danger);
  padding: 0.5em 0;
}
div.error {
  color: var(--c-active-error-fg);
  background-color: var(--c-active-error-bg);
  border: 0.125em solid var(--c-active-error-border);
  margin: 1em 0;
  padding: 1em;
  border-radius: 0.25em;
}
div.error button {
  display: inline-block;
  background: var(--c-active-bg);
  border: 1px solid var(--c-active-error-border);
  padding: 0.5em;
  color: var(--c-active-link);
}
div.error button::after {
  content: ' »';
}
div.error p:first-child {
  padding-top: 0;
  margin-top: 0;
}
div.error p:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
}
div.error .details {
  border: 0.125em solid var(--c-active-error-border);
  background-color: var(--c-active-bg);
  color: var(--c-active-fg);
  padding: 0.5em;
  margin: 1em 0 0.5em;
  font-family: monospace;
  white-space: pre-wrap;
  overflow: scroll;
  max-height: 20em;
}
main div.error {
  margin: 1em 2em;
}
main section div.error {
  margin: 1em 0;
}
/***

  Styling of simple feedback elements.

***/
form .feedback {
  display: inline-block;
  margin: 0;
  line-height: 140%;
}
form .feedback.loader {
  margin: 0;
  padding: 0;
  height: 1em;
  aspect-ratio: 4;
  background: radial-gradient(circle closest-side, var(--c-accent-bg) 90%, var(--c-active-bg)) 0/calc(100%/3) 100% space;
  clip-path: inset(0 100% 0 0);
  animation: feedback-loader 1s steps(4) infinite;
  background-position: left center;
}
form .feedback.fail,
form .feedback.fieldFail {
  color: var(--c-active-danger);
  background-size: 1em 1em;
  background-position: 0 0.7em;
  padding: 0.5em 0 0.5em 1.7em;
}
form .feedback.success {
  color: var(--c-active-confirm);
  background-size: 1em 1em;
  background-position: 0 0.7em;
  padding: 0.5em 0 0.5em 1.7em;
}
@keyframes feedback-loader {
  to {
    clip-path: inset(0 -34% 0 0);
  }
}
/***

Icons are defined per theme because we cannot use CSS variables to style
those.

***/
/* Default (also "theme-light") */
form .feedback.fail,
form .feedback.fieldFail {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23e00%22%20d%3D%22M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16%20c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z%20M21.419,13.421c0.781-0.781,0.781-2.048,0-2.828%20c-0.781-0.781-2.047-0.781-2.828,0L16,13.184l-2.583-2.583c-0.781-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828%20l2.582,2.583l-2.591,2.591c-0.781,0.781-0.781,2.047,0,2.828s2.048,0.781,2.829,0L16,18.84l2.591,2.591%20c0.781,0.781,2.047,0.781,2.828,0s0.781-2.047,0-2.828l-2.591-2.591L21.419,13.421z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
form .feedback.success {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%230a0%22%20d%3D%22M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16%20c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z%20M23.419,10.593c-0.781-0.781-2.047-0.781-2.828,0L14,17.184%20l-2.591-2.592c-0.781-0.78-2.048-0.78-2.829,0c-0.781,0.781-0.781,2.048,0,2.829l3.98,3.979c0.008,0.009,0.011,0.021,0.02,0.03%20c0.393,0.392,0.906,0.586,1.42,0.585c0.514,0.001,1.027-0.193,1.419-0.585c0.009-0.009,0.012-0.021,0.021-0.03l7.979-7.979%20C24.2,12.64,24.2,11.374,23.419,10.593z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
/* Dark mode */
.theme-dark form .feedback.fail,
.theme-dark form .feedback.fieldFail {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23e00%22%20d%3D%22M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16%20c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z%20M21.419,13.421c0.781-0.781,0.781-2.048,0-2.828%20c-0.781-0.781-2.047-0.781-2.828,0L16,13.184l-2.583-2.583c-0.781-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828%20l2.582,2.583l-2.591,2.591c-0.781,0.781-0.781,2.047,0,2.828s2.048,0.781,2.829,0L16,18.84l2.591,2.591%20c0.781,0.781,2.047,0.781,2.828,0s0.781-2.047,0-2.828l-2.591-2.591L21.419,13.421z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.theme-dark form .feedback.success {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%230a0%22%20d%3D%22M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16%20c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z%20M23.419,10.593c-0.781-0.781-2.047-0.781-2.828,0L14,17.184%20l-2.591-2.592c-0.781-0.78-2.048-0.78-2.829,0c-0.781,0.781-0.781,2.048,0,2.829l3.98,3.979c0.008,0.009,0.011,0.021,0.02,0.03%20c0.393,0.392,0.906,0.586,1.42,0.585c0.514,0.001,1.027-0.193,1.419-0.585c0.009-0.009,0.012-0.021,0.021-0.03l7.979-7.979%20C24.2,12.64,24.2,11.374,23.419,10.593z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.inactive-border {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
}
.active-border {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  outline: 0.0625rem solid var(--c-active-form-border);
}
.error-border {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  border: 0.0625rem solid var(--c-active-error-border) !important;
  outline: 0.0625rem solid var(--c-active-error-border) !important;
}
form {
  display: block;
}
form :disabled {
  opacity: 0.6;
}
form .field {
  padding: 0.5em;
  margin: 0 -0.5em;
  border-radius: var(--default-radius);
  display: grid;
  grid-template-rows: min-content min-content min-content min-content;
  grid-template-columns: 1fr;
  grid-template-areas: "label" "help" "input" "error";
  /* Styling of all text inputs */
}
form .field label {
  grid-area: label;
  padding: 0.25em 0;
  color: var(--c-active-form-label);
  white-space: nowrap;
}
form .field button.help {
  display: inline-block;
  padding: 0;
  border: none;
  background-color: transparent;
  background-size: 1em 1em;
  width: 1em;
  height: 1em;
  margin: 0 0 0 0.5em;
  vertical-align: bottom;
}
form .field p.help {
  background: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
  border-radius: var(--default-radius);
  padding: 0.5em;
  margin: 0.5em 0;
}
form .field .field-wrapper {
  grid-area: input;
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-template-areas: "prefix input suffix";
}
form .field .field-wrapper .prefix {
  grid-area: prefix;
  padding: var(--active-radius);
  padding-right: 0;
  font-size: 0.9rem;
}
form .field .field-wrapper .suffix {
  grid-area: suffix;
  padding: var(--active-radius);
  padding-left: 0;
  font-size: 0.9rem;
}
form .field .field-wrapper input,
form .field .field-wrapper select,
form .field .field-wrapper textarea,
form .field .field-wrapper span.fixed-value {
  grid-area: input;
  overflow: hidden;
  text-overflow: ellipsis;
}
form .field.as-select .field-wrapper,
form .field.type-text .field-wrapper,
form .field.type-password .field-wrapper,
form .field.type-textarea .field-wrapper {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  color: var(--c-active-form-fg);
  background-color: var(--c-active-form-bg);
  border-radius: var(--active-radius);
}
form .field.as-select .field-wrapper:focus-within,
form .field.type-text .field-wrapper:focus-within,
form .field.type-password .field-wrapper:focus-within,
form .field.type-textarea .field-wrapper:focus-within {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  outline: 0.0625rem solid var(--c-active-form-border);
}
form .field.as-select .field-wrapper:focus-within input,
form .field.type-text .field-wrapper:focus-within input,
form .field.type-password .field-wrapper:focus-within input,
form .field.type-textarea .field-wrapper:focus-within input {
  outline: none;
}
form .field.as-select .field-wrapper input,
form .field.type-text .field-wrapper input,
form .field.type-password .field-wrapper input,
form .field.type-textarea .field-wrapper input,
form .field.as-select .field-wrapper textarea,
form .field.type-text .field-wrapper textarea,
form .field.type-password .field-wrapper textarea,
form .field.type-textarea .field-wrapper textarea,
form .field.as-select .field-wrapper select,
form .field.type-text .field-wrapper select,
form .field.type-password .field-wrapper select,
form .field.type-textarea .field-wrapper select,
form .field.as-select .field-wrapper .fixed-value,
form .field.type-text .field-wrapper .fixed-value,
form .field.type-password .field-wrapper .fixed-value,
form .field.type-textarea .field-wrapper .fixed-value {
  font-size: 0.9rem;
  padding: var(--active-radius);
  border: none;
  outline: none;
  border-radius: var(--active-radius);
  background-color: transparent;
  color: var(--c-active-form-fg);
}
form .field.as-select .field-wrapper textarea,
form .field.type-text .field-wrapper textarea,
form .field.type-password .field-wrapper textarea,
form .field.type-textarea .field-wrapper textarea {
  resize: vertical;
  width: 100%;
  max-height: 50em;
  min-height: 3em;
}
form .field.type-checkbox,
form .field.type-radio {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
}
form .field.type-checkbox:focus,
form .field.type-radio:focus {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: 0.0625rem solid var(--c-active-form-border);
  outline: none;
}
form .field .error {
  grid-area: error;
  display: block;
  line-height: 140%;
  color: var(--c-active-danger);
  padding: 0.5em 0 0.5em 1.5em;
  background-size: 1em 1em;
  background-position: 0 0.6em;
}
form .field.with-error.as-select .field-wrapper,
form .field.with-error.type-text .field-wrapper,
form .field.with-error.type-password .field-wrapper,
form .field.with-error.type-textarea .field-wrapper {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  border: 0.0625rem solid var(--c-active-error-border) !important;
  outline: 0.0625rem solid var(--c-active-error-border) !important;
}
form .field.with-error.type-checkbox,
form .field.with-error.type-radio {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  border: 0.0625rem solid var(--c-active-error-border) !important;
  outline: 0.0625rem solid var(--c-active-error-border) !important;
}
form fieldset.with-error {
  margin: 0.5em -0.5em;
  padding: 0.5em;
  border-radius: var(--active-radius);
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  border: 0.0625rem solid var(--c-active-error-border) !important;
  outline: 0.0625rem solid var(--c-active-error-border) !important;
}
/***

Icons per theme

***/
/* Default (also 'theme-light') */
form .field button.help {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%232d6cb3%22%20d%3D%22M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16%20c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z%20M16,26.012c1.104,0,2-0.896,2-2s-0.896-2-2-2s-2,0.896-2,2%20S14.896,26.012,16,26.012z%20M16,6.012c-3.314,0-6,2.686-6,6c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5c0-1.657,1.343-3,3-3%20c1.656,0,3,1.343,3,3c0,1.656-1.344,3-3,3c-1.104,0-2,0.896-2,2v1c0,1.104,0.896,2,2,2s2-0.896,2-2v-0.349%20c2.328-0.825,4-3.04,4-5.651C22,8.698,19.313,6.012,16,6.012z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
form .field .error {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23e00%22%20d%3D%22M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16%20c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z%20M21.419,13.421c0.781-0.781,0.781-2.048,0-2.828%20c-0.781-0.781-2.047-0.781-2.828,0L16,13.184l-2.583-2.583c-0.781-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828%20l2.582,2.583l-2.591,2.591c-0.781,0.781-0.781,2.047,0,2.828s2.048,0.781,2.829,0L16,18.84l2.591,2.591%20c0.781,0.781,2.047,0.781,2.828,0s0.781-2.047,0-2.828l-2.591-2.591L21.419,13.421z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
/* Dark mode */
.theme-dark form .field button.help {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%236ca0da%22%20d%3D%22M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16%20c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z%20M16,26.012c1.104,0,2-0.896,2-2s-0.896-2-2-2s-2,0.896-2,2%20S14.896,26.012,16,26.012z%20M16,6.012c-3.314,0-6,2.686-6,6c0,0.828,0.672,1.5,1.5,1.5s1.5-0.672,1.5-1.5c0-1.657,1.343-3,3-3%20c1.656,0,3,1.343,3,3c0,1.656-1.344,3-3,3c-1.104,0-2,0.896-2,2v1c0,1.104,0.896,2,2,2s2-0.896,2-2v-0.349%20c2.328-0.825,4-3.04,4-5.651C22,8.698,19.313,6.012,16,6.012z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.theme-dark form .field .error {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%23e00%22%20d%3D%22M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16%20c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z%20M21.419,13.421c0.781-0.781,0.781-2.048,0-2.828%20c-0.781-0.781-2.047-0.781-2.828,0L16,13.184l-2.583-2.583c-0.781-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828%20l2.582,2.583l-2.591,2.591c-0.781,0.781-0.781,2.047,0,2.828s2.048,0.781,2.829,0L16,18.84l2.591,2.591%20c0.781,0.781,2.047,0.781,2.828,0s0.781-2.047,0-2.828l-2.591-2.591L21.419,13.421z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
/* Styling of contact inputs */
fieldset.address .street_address {
  display: grid;
  grid-template-columns: 1fr 6em 6em;
  column-gap: 0.5em;
}
fieldset.address .street_address .street {
  grid-column: 1;
}
fieldset.address .street_address fieldset.building {
  display: grid;
  grid-column: 2 / 4;
  grid-template-columns: subgrid;
  column-gap: 0.5em;
}
fieldset.address .street_address fieldset.building .building {
  grid-column: 1;
}
fieldset.address .street_address fieldset.building .building_addition {
  grid-column: 2;
}
fieldset.address .area_address {
  display: grid;
  grid-template-columns: 7em 1fr;
  column-gap: 0.5em;
}
fieldset.address .area_address .postcode {
  grid-column: 1;
}
fieldset.address .area_address .locality {
  grid-column: 2;
}
.multivalue-input {
  grid-area: input;
}
.multivalue-input ul,
.multivalue-input li {
  display: block;
  margin: 0;
  padding: 0;
}
.multivalue-input .empty {
  display: block;
  padding: 0.5em;
  opacity: 0.5;
  font-style: italic;
}
.multivalue-input .multivalue-values {
  max-height: 20em;
  overflow-x: scroll;
  background-color: var(--c-accentdim-bg);
  padding: 0.25em;
  /* To keep the scroll markers from escaping :-) */
  clip-path: xywh(0 0 100% 100% round var(--active-radius));
}
.multivalue-input .multivalue-values .multivalue-item {
  display: inline-block;
  background-color: var(--c-active-bg);
  color: var(--c-active-fg);
  padding: var(--default-radius) calc(var(--default-radius) + 0.25em);
  border-radius: var(--default-radius);
  margin: 0.25em;
  overflow-wrap: anywhere;
}
.multivalue-input .multivalue-values .multivalue-item::hover {
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
}
.multivalue-input .multivalue-values .multivalue-item.add {
  color: var(--c-active-confirm);
}
.multivalue-input .multivalue-values .multivalue-item.remove {
  color: var(--c-active-danger);
  text-decoration-line: line-through;
}
.multivalue-input .multivalue-values .multivalue-item.with_error {
  color: var(--c-active-danger) !important;
}
.multivalue-input .multivalue-values .multivalue-item button {
  margin: 0.125em -0.125em 0 0.25em;
}
.multivalue-input .multivalue-add {
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "label adder";
  align-items: center;
  border-top: 0.0625rem solid var(--c-active-form-border);
}
.multivalue-input .multivalue-add label {
  grid-area: label;
  padding: 0.1em 0 0.1em 0.5em;
}
.multivalue-input .multivalue-add label::after {
  content: ':';
}
.multivalue-input .multivalue-add .adder {
  grid-area: adder;
}
.multivalue-input .multivalue-add .adder > input {
  padding: 0.5em !important;
  width: 100%;
}
/*** 

Visible password input which allows for generating passwords and
editing them.

***/
.visible-password {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr min-content;
  grid-template-rows: auto;
  grid-template-areas: "input buttons";
}
.visible-password input {
  grid-area: input;
  min-width: 14em;
}
.visible-password .buttons {
  grid-area: buttons;
  white-space: nowrap;
  margin: 0 0 0 0.75em;
}
.visible-password .buttons button {
  margin: 0.25em 0.25em 0.25em 0;
  border-radius: calc(var(--active-radius) - 0.125em);
}
/***

  Suggest box component styling

***/
.suggestbox {
  width: 100%;
  position: relative;
  overflow: show;
  padding: 0.5em 0.25em;
}
.suggestbox input {
  width: 100%;
}
.suggestbox .suggestbox-options-wrapper {
  position: relative;
}
.suggestbox ul.suggestbox-options {
  position: absolute;
  top: 0.25em;
  left: 0.25em;
  display: block;
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  outline: 0.0625rem solid var(--c-active-form-border);
  background-color: var(--c-active-form-bg);
  color: var(--c-active-form-fg);
  border-bottom-left-radius: var(--active-radius);
  border-bottom-right-radius: var(--active-radius);
  box-shadow: 0 0 0.5em 0.125em var(--c-shadow);
  overflow-y: scroll;
  /* non-integer number to show scrollable items, ScrollContainer is
           not compatible with scrolIntoView  so cannot be used here */
  max-height: 10.75em;
  padding: 0;
  margin: 0;
}
.suggestbox ul.suggestbox-options li {
  display: block;
  padding: 0.5em;
  cursor: pointer;
}
.suggestbox ul.suggestbox-options li:hover {
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
}
.suggestbox ul.suggestbox-options li.focused {
  background-color: var(--c-accent-bg);
  color: var(--c-accent-fg);
}
/*

Animatie voor nu uitgezet.

::view-transition-group(resources-table) {
    animation-duration: .25s;
    ::view-transition-old(resources-table),
    ::view-transition-new(resources-table) {
        height: 100%;
        animation: none;
    }
    ::view-transition-old(resources-table) {
        object-fit: none;
    }
    ::view-transition-new(resources-table) {
        object-fit: none;
    }
}

::view-transition-group(resources-nav),
::view-transition-group(resources-search) {
    animation-duration: .25s;
}

*/
::view-transition-group(resources-table-search),
::view-transition-group(resources-table-nav) {
  animation-duration: 0.25s;
  animation-timing-function: ease;
}
::view-transition-old(resources-table-search),
::view-transition-new(resources-table-search),
::view-transition-old(resources-table-nav),
::view-transition-new(resources-table-nav) {
  object-fit: fill;
  height: 100%;
  mix-blend-mode: normal;
}
.resources-wrapper {
  grid-area: workspace;
  display: grid;
  min-height: 0;
  grid-template-rows: subgrid;
  grid-template-columns: subgrid;
  /*
        Scroll markers are rendered if part of the resources are outside
        the current view 
    */
  /*
    .workspace {
    	grid-area: workspace;
    	display: grid;
    	grid-template-rows: subgrid;
    	grid-template-columns: var(--workspace-gutter) minmax(40em, 1fr) var(--workspace-gutter);
    	grid-template-areas:
          "lmargin tmargin rmargin"
          "lmargin main rmargin"
          "lmargin main rmargin"
      	  "lmargin bmargin rmargin";

        main {
            grid-area: main;
        }
    }
        */
}
.resources-wrapper.resources-index {
  grid-template-columns: minmax(0, 1fr) 4fr minmax(0, 1fr);
  grid-template-areas: "top top top" "left main right" "bottom bottom bottom";
}
.resources-wrapper.resources-index .resources-table {
  grid-area: main;
}
.resources-wrapper.resources-index .resources-table nav {
  background-color: var(--c-active-bg);
  color: var(--c-active-fg);
}
.resources-wrapper.resources-index .resources-table nav table tr:has(a:hover) td {
  color: var(--c-accentdim-fg);
  background-color: var(--c-accentdim-bg);
}
.resources-wrapper.current-resource {
  grid-template-columns: min-content var(--workspace-gutter) 1fr;
  grid-template-areas: "top top top" "nav gutter main" "bottom bottom bottom";
}
.resources-wrapper.current-resource .resources-table {
  grid-area: nav;
  min-width: 20em;
}
.resources-wrapper.current-resource .resources-table nav {
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
}
.resources-wrapper.current-resource .resources-table nav table {
  table-layout: fixed;
}
.resources-wrapper.current-resource .resources-table nav table td,
.resources-wrapper.current-resource .resources-table nav table th {
  display: none;
  padding-right: 2rem;
  /* matches last-child padding in resource index */
}
.resources-wrapper.current-resource .resources-table nav table td:first-child,
.resources-wrapper.current-resource .resources-table nav table th:first-child {
  display: table-cell;
}
.resources-wrapper .resources-table nav .header,
.resources-wrapper.current-resource main .header {
  padding: 0 2rem;
}
.resources-wrapper .resources-table nav .panel .top-scroll-marker,
.resources-wrapper.current-resource main .panel .top-scroll-marker,
.resources-wrapper .resources-table nav .panel .bottom-scroll-marker,
.resources-wrapper.current-resource main .panel .bottom-scroll-marker {
  position: sticky;
  height: 1.5em;
  background-color: var(--c-active-bg);
  background-position: center;
  background-size: 1.5em 1.5em;
  z-index: 10;
}
.resources-wrapper .resources-table nav .panel .top-scroll-marker,
.resources-wrapper.current-resource main .panel .top-scroll-marker {
  top: 0;
  margin-bottom: -2em;
  box-shadow: var(--c-shadow) 0 0.25em 0.25em -0.25em;
}
.resources-wrapper .resources-table nav .panel .bottom-scroll-marker,
.resources-wrapper.current-resource main .panel .bottom-scroll-marker {
  bottom: 0;
  margin-top: -2em;
  box-shadow: var(--c-shadow) 0 -0.25em 0.25em -0.25em;
}
.resources-wrapper .resources-table {
  /* TODO animatie view-transition-name: resources-table; */
  display: grid;
  grid-template-rows: 1fr;
  min-height: 10em;
  /* overload default grid sizing */
}
.resources-wrapper .resources-table.with-header {
  grid-template-rows: min-content 1fr;
}
.resources-wrapper .resources-table.with-header .header {
  grid-row: 1;
  padding: 1.5rem 1.5rem 2rem;
}
.resources-wrapper .resources-table.with-header .header.search input {
  /* TODO animatie? view-transition-name: resources-search-input; */
  view-transition-name: resources-table-search;
  font-size: 1em;
  width: 100%;
  padding: 0.3em 0.5em;
  border-radius: calc(var(--active-radius) * 2);
  border: 2px solid var(--c-accent-border);
}
.resources-wrapper .resources-table.with-header .header.search input:focus {
  outline: 2px solid var(--c-accent-fg);
}
.resources-wrapper .resources-table.with-header nav {
  grid-row: 2;
}
.resources-wrapper .resources-table nav {
  width: 100%;
  grid-row: 1;
  box-shadow: 0 0 0.5em 0.125em var(--c-shadow);
  border-radius: var(--default-radius);
  background-color: var(--c-active-bg);
  color: var(--c-active-fg);
  min-height: 10em;
  /* overload default grid sizing */
  /* TODO animatie? view-transition-name: resources-search-nav; */
  view-transition-name: resources-table-nav;
}
.resources-wrapper .resources-table nav table {
  width: 100%;
  margin: 0 0 0.5em;
}
.resources-wrapper .resources-table nav table th {
  padding: 1rem;
}
.resources-wrapper .resources-table nav table td {
  padding: 0.75rem 1rem;
}
.resources-wrapper .resources-table nav table td:first-child,
.resources-wrapper .resources-table nav table th:first-child {
  padding-left: 2rem;
}
.resources-wrapper .resources-table nav table td:last-child,
.resources-wrapper .resources-table nav table th:last-child {
  padding-right: 2rem;
}
.resources-wrapper .resources-table nav table a {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resources-wrapper .resources-table nav table th a {
  text-decoration: none;
  color: var(--c-active-form-label);
}
.resources-wrapper .resources-table nav table td a {
  text-decoration: none;
  color: var(--c-active-fg);
}
.resources-wrapper .resources-table nav table td a.active {
  color: var(--c-accent-fg);
}
.resources-wrapper .resources-table nav table td:has(a.active) {
  background-color: var(--c-accent-bg);
}
.resources-wrapper main {
  display: grid;
  grid-area: main;
  grid-template-rows: min-content min-content 1fr;
  grid-template-areas: "title" "tabs" "panel";
  max-width: 90rem;
  min-height: 10em;
  /* overload default grid sizing */
  background-color: var(--c-active-bg);
  color: var(--c-active-fg);
  box-shadow: 0 0 0.5em 0.125em var(--c-shadow);
  overflow: hidden;
  border-radius: var(--default-radius);
}
.resources-wrapper main h1 {
  grid-area: title;
  padding: 2rem 2rem 1rem;
  margin: 0;
}
.resources-wrapper main h1 .identifier {
  display: inline-block;
  font-weight: normal;
  opacity: 0.5;
  margin-right: 0.25em;
}
.resources-wrapper main .tabs {
  grid-area: tabs;
  margin: 1rem 0;
  padding: 0 1.25rem;
  border-bottom: 1px solid var(--c-active-link);
}
.resources-wrapper main .tabs a {
  display: inline-block;
  font-size: 1.1em;
  padding: 0.75em;
  border-top-left-radius: var(--default-radius);
  border-top-right-radius: var(--default-radius);
  color: var(--c-active-link);
  text-decoration: none;
}
.resources-wrapper main .tabs a.active {
  background-color: var(--c-active-link);
  color: var(--c-active-bg);
}
.resources-wrapper main .panel {
  grid-area: panel;
  padding: 0;
  overflow-y: scroll;
}
.resources-wrapper main .panel section:not(.sticky) {
  padding: 1rem 2rem;
}
/*** Scroll marker colors per theme ***/
/* Default theme ('theme-light') */
.resources-table nav > .top-scroll-marker,
.current-resource main .panel > .top-scroll-marker,
.resources-table nav > .journal .top-scroll-marker,
.current-resource main .panel > .journal .top-scroll-marker {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22?%3E%3Csvg%20width%3D%22130%22%20height%3D%2260%22%20viewBox%3D%220%200%2034.395832%2015.875001%22%20version%3D%221.1%22%20id%3D%22svg5%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%3Cdefs%20id%3D%22defs2%22%20/%3E%20%3Cg%20id%3D%22layer1%22%3E%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23000%3Bstroke-width%3A1.5875%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20%20d%3D%22M%201.3229172,13.229158%2017.197917,2.6458255%2033.072916,13.229158%22%20%20id%3D%22path894%22%20/%3E%20%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.resources-table nav > .bottom-scroll-marker,
.current-resource main .panel > .bottom-scroll-marker,
.resources-table nav > .journal .bottom-scroll-marker,
.current-resource main .panel > .journal .bottom-scroll-marker {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22?%3E%3Csvg%20%20width%3D%22130%22%20%20height%3D%2260%22%20%20viewBox%3D%220%200%2034.395832%2015.875001%22%20%20version%3D%221.1%22%20%20id%3D%22svg5%22%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cdefs%20id%3D%22defs2%22%20/%3E%3Cg%20id%3D%22layer1%22%3E%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23000%3Bstroke-width%3A1.5875%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M%201.3229172,2.6458415%2017.197917,13.229174%2033.072916,2.6458415%22%20id%3D%22path894%22%20/%3E%20%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
/* Dark mode */
.theme-dark .resources-table nav > .top-scroll-marker,
.theme-dark .current-resource main .panel > .top-scroll-marker,
.theme-dark .resources-table nav > .journal .top-scroll-marker,
.theme-dark .current-resource main .panel > .journal .top-scroll-marker {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22?%3E%3Csvg%20width%3D%22130%22%20height%3D%2260%22%20viewBox%3D%220%200%2034.395832%2015.875001%22%20version%3D%221.1%22%20id%3D%22svg5%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%20%3Cdefs%20id%3D%22defs2%22%20/%3E%20%3Cg%20id%3D%22layer1%22%3E%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23fff%3Bstroke-width%3A1.5875%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20%20d%3D%22M%201.3229172,13.229158%2017.197917,2.6458255%2033.072916,13.229158%22%20%20id%3D%22path894%22%20/%3E%20%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.theme-dark .resources-table nav > .bottom-scroll-marker,
.theme-dark .current-resource main .panel > .bottom-scroll-marker,
.theme-dark .resources-table nav > .journal .bottom-scroll-marker,
.theme-dark .current-resource main .panel > .journal .bottom-scroll-marker {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3C?xml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%20standalone%3D%22no%22?%3E%3Csvg%20%20width%3D%22130%22%20%20height%3D%2260%22%20%20viewBox%3D%220%200%2034.395832%2015.875001%22%20%20version%3D%221.1%22%20%20id%3D%22svg5%22%20%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20%20xmlns%3Asvg%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cdefs%20id%3D%22defs2%22%20/%3E%3Cg%20id%3D%22layer1%22%3E%20%3Cpath%20style%3D%22fill%3Anone%3Bstroke%3A%23fff%3Bstroke-width%3A1.5875%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A4%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20d%3D%22M%201.3229172,2.6458415%2017.197917,13.229174%2033.072916,2.6458415%22%20id%3D%22path894%22%20/%3E%20%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.journal {
  display: grid;
  grid-template-rows: min-content 1fr;
  grid-template-columns: 1fr;
  grid-template-areas: "filter" "journal";
  width: 100%;
  height: 100%;
}
.journal .filter {
  grid-area: filter;
  padding: 0.5rem 1rem;
}
.journal .filter label::after {
  content: ': ';
  margin-right: 0.25rem;
}
.journal .entries {
  grid-area: journal;
  padding: 0 2rem;
}
.journal .entries ul {
  display: grid;
  width: 100%;
  grid-template-columns: max-content 1fr max-content;
  padding: 0;
}
.journal .entries ul li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  width: 100%;
  column-gap: 2rem;
}
.journal .entries ul li .timestamp {
  grid-row: 1;
  grid-column: 1;
  white-space: nowrap;
}
.journal .entries ul li .event {
  grid-row: 1;
  grid-column: 2 / -1;
  font-weight: bold;
}
.journal .entries ul li .origin {
  grid-row: 2;
  grid-column: 2 / -1;
  font-size: 80%;
}
.journal .entries ul li .data {
  grid-row: 3;
  grid-column: 2 / -1;
  padding: 0.5rem 0;
}
/* Loading bar rendered at the bottom, visible everywhere. */
.loading.foreground {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 125vw;
  height: 0.5rem;
  background-repeat: repeat-x;
  background: repeating-linear-gradient(90deg, var(--c-accentbright-bg), var(--c-accent-bg) 50%, var(--c-accentbright-bg) 100%);
  animation: loader-foreground 1s linear infinite;
}
@keyframes loader-foreground {
  0% {
    left: -25%;
  }
  100% {
    left: 0;
  }
}
/* Loading dots rendered in the center of the background, usually visible
 * only on empty screens. */
.loading.background {
  font-size: 20pt;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 125vw;
  height: 0.5rem;
  background-repeat: repeat-x;
  background: repeating-linear-gradient(90deg, var(--c-inactive-fg), var(--c-inactive-bg) 50%, var(--c-inactive-fg) 20%);
  animation: loader-foreground 1s linear infinite;
}
.loading.background:after {
  content: "Laden...";
}
@keyframes loader-foreground {
  0% {
    left: -25%;
  }
  100% {
    left: 0;
  }
}
/***

  Basic text styling 

***/
:root {
  font-family: 'Play', arial, helvetica, sans-serif;
}
h1 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 0 1em;
}
h2 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-size: 1.2em;
  font-weight: normal;
  margin: 1.2em 0 0.6em;
}
h3 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-size: 1em;
  font-weight: normal;
  margin: 0.9em 0 0.4em;
}
.danger h2,
.danger h3,
p.warning {
  color: var(--c-active-danger);
}
p,
ul,
ul li,
table.datalist td,
table.datalist th {
  font-size: 1em;
  margin: 0.5em 0;
  line-height: 140%;
}
pre,
code {
  font-family: monospace;
  white-space: pre-wrap;
}
code {
  display: block;
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
  margin: 0.5em 0;
  padding: 0.5em;
  border-radius: var(--default-radius);
}
a {
  text-decoration: underline;
}
a:hover {
  text-decoration: underline !important;
}
ul {
  padding-left: 1.5em;
}
li {
  list-style: square outside;
}
hr {
  color: var(--c-active-fg);
  margin: 2em;
  opacity: 0.25;
  border: solid 0.0625em;
}
/* Common layout for placeholders of empty lists */
.empty {
  opacity: 0.5;
  font-style: italic;
}
.theme-dos body,
.theme-dos input,
.theme-dos select,
.theme-dos textarea,
.theme-dos button {
  font-family: monospace !important;
  font-size: 1rem !important;
}
.theme-dos h1,
.theme-dos h2,
.theme-dos h3,
.theme-dos h4,
.theme-dos h5,
.theme-dos h6,
.theme-dos h7 {
  font-family: monospace !important;
  font-size: 1rem !important;
  color: #ffff55;
}
/***

Styling of toolbuttons, including their icons.

***/
.toolbuttongroup {
  text-align: right;
  white-space: nowrap;
}
.toolbuttongroup .toolbutton {
  margin-right: 0.2em;
}
.toolbuttongroup .toolbutton:last-child {
  margin-right: 0;
}
.toolbutton {
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  background-size: 1.2em 1.2em;
  background-position: center;
  border: none;
  background-color: transparent;
  border-radius: 0.125em;
  cursor: pointer;
  /* Hide the placeholder */
}
.toolbutton span {
  display: none;
}
.toolbutton:hover {
  background-color: var(--c-accentdim-bg);
}
/* Make sure icons have a color that is appropriate for their theme */
/* Default (also "theme-light") */
.toolbutton.icon-add {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%232d6cb3%22%20d%3D%22M28,20.012h-8v8c0,2.209-1.791,4-4,4s-4-1.791-4-4v-8H4%20c-2.209,0-4-1.791-4-4c0-2.21,1.791-4,4-4h8v-8c0-2.209,1.791-4,4-4s4,1.791,4,4v8h8c2.209,0,4,1.79,4,4%20C32,18.221,30.209,20.012,28,20.012z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.toolbutton.icon-change-password {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_02%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%232d6cb3%22%20d%3D%22M24,22.006l-2.008-2.008l-1.998,1.996l-2-2.002l-2.02,2.006%20L14,22.005v0.001c0,2.209-1.791,4-4,4H4c-2.209,0-4-1.791-4-4v-12c0-2.209,1.791-4,4-4h6c2.209,0,4,1.791,4,4h14l4,3.9L24,22.006z%20%20M8,12.807c0-0.442-0.358-0.801-0.8-0.801H6.8c-0.441,0-0.8,0.358-0.8,0.801v6.399c0,0.441,0.358,0.8,0.8,0.8h0.4%20c0.441,0,0.8-0.358,0.8-0.8V12.807z%22/%3E%20%3C/svg%3E');
  background-repeat: no-repeat;
}
.toolbutton.icon-delete {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%232d6cb3%22%20d%3D%22M21.661,16.007l5.178,5.174c1.562,1.562,1.562,4.095,0,5.657%20c-1.562,1.562-4.095,1.562-5.657,0l-5.178-5.174l-5.174,5.174c-1.562,1.562-4.095,1.562-5.656,0c-1.562-1.562-1.562-4.095,0-5.657%20l5.171-5.171l-5.159-5.155c-1.562-1.562-1.562-4.095,0-5.657c1.562-1.562,4.096-1.562,5.657,0l5.159,5.155l5.18-5.18%20c1.562-1.562,4.095-1.562,5.657,0c1.562,1.562,1.562,4.095,0,5.656L21.661,16.007z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.toolbutton.icon-restore {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22stroke_x5F_04%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%232d6cb3%22%20d%3D%22M16.001,32.001c-4.418,0-8.418-1.791-11.314-4.687l0.009-0.009%20c-0.423-0.366-0.695-0.901-0.695-1.505c0-1.104,0.896-2,2-2c0.603,0,1.138,0.273,1.504,0.695l0.01-0.01%20c2.171,2.172,5.171,3.515,8.485,3.515c6.627,0,12-5.372,12-12c0-6.627-5.373-12-12-12c-2.905,0-5.543,1.056-7.611,2.779l3.254,3.254%20c0.218,0.208,0.356,0.498,0.356,0.822c0,0.632-0.512,1.145-1.144,1.145H1.161c-0.006,0-0.01,0.003-0.016,0.003%20c-0.316,0-0.603-0.129-0.81-0.337c-0.208-0.207-0.337-0.493-0.337-0.811c0-0.005,0.003-0.01,0.003-0.016V1.145%20c0-0.632,0.512-1.144,1.144-1.144c0.326,0,0.616,0.139,0.824,0.357l3.579,3.578c2.804-2.438,6.445-3.936,10.454-3.936%20c8.836,0,16,7.163,16,16S24.838,32.001,16.001,32.001z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.toolbutton.icon-settings {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_02%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%232d6cb3%22%20d%3D%22M31.199,18.405l-3.811,1.386c-0.181,0.545-0.412,1.065-0.667,1.572%20l1.723,3.693c0.14,0.424,0.312,0.818,0,1.131l-2.263,2.264c-0.312,0.312-0.699,0.139-1.131,0l-3.699-1.728%20c-0.504,0.252-1.021,0.481-1.562,0.661l-1.39,3.82c-0.206,0.404-0.357,0.801-0.8,0.801h-3.2c-0.441,0-0.599-0.402-0.8-0.801%20l-1.389-3.82c-0.542-0.18-1.059-0.409-1.562-0.661l-3.7,1.728c-0.432,0.139-0.818,0.312-1.131,0l-2.263-2.264%20c-0.312-0.312-0.14-0.707,0-1.131l1.724-3.693c-0.255-0.507-0.486-1.027-0.668-1.572L0.8,18.405c-0.404-0.206-0.8-0.358-0.8-0.8%20v-3.2c0-0.442,0.401-0.599,0.8-0.8L4.61,12.22c0.182-0.546,0.413-1.065,0.668-1.573L3.555,6.954c-0.141-0.432-0.312-0.819,0-1.131%20l2.263-2.263c0.312-0.312,0.707-0.14,1.131,0l3.7,1.727c0.504-0.252,1.021-0.481,1.562-0.662L13.6,0.806%20c0.201-0.399,0.358-0.8,0.8-0.8h3.2c0.442,0,0.594,0.396,0.8,0.8l1.39,3.819c0.541,0.181,1.059,0.41,1.562,0.662l3.699-1.727%20c0.424-0.14,0.819-0.312,1.131,0l2.263,2.263c0.312,0.312,0.141,0.699,0,1.131l-1.723,3.692c0.255,0.508,0.486,1.027,0.667,1.573%20l3.811,1.386c0.399,0.201,0.801,0.357,0.801,0.8v3.2C32,18.047,31.604,18.199,31.199,18.405z%20M16,12.006c-2.209,0-4,1.79-4,4%20c0,2.209,1.791,4,4,4s4-1.791,4-4C20,13.796,18.209,12.006,16,12.006z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
/* Dark mode */
.theme-dark .toolbutton.icon-add {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%236ca0da%22%20d%3D%22M28,20.012h-8v8c0,2.209-1.791,4-4,4s-4-1.791-4-4v-8H4%20c-2.209,0-4-1.791-4-4c0-2.21,1.791-4,4-4h8v-8c0-2.209,1.791-4,4-4s4,1.791,4,4v8h8c2.209,0,4,1.79,4,4%20C32,18.221,30.209,20.012,28,20.012z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.theme-dark .toolbutton.icon-change-password {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_02%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%236ca0da%22%20d%3D%22M24,22.006l-2.008-2.008l-1.998,1.996l-2-2.002l-2.02,2.006%20L14,22.005v0.001c0,2.209-1.791,4-4,4H4c-2.209,0-4-1.791-4-4v-12c0-2.209,1.791-4,4-4h6c2.209,0,4,1.791,4,4h14l4,3.9L24,22.006z%20%20M8,12.807c0-0.442-0.358-0.801-0.8-0.801H6.8c-0.441,0-0.8,0.358-0.8,0.801v6.399c0,0.441,0.358,0.8,0.8,0.8h0.4%20c0.441,0,0.8-0.358,0.8-0.8V12.807z%22/%3E%20%3C/svg%3E');
  background-repeat: no-repeat;
}
.theme-dark .toolbutton.icon-delete {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_03%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%236ca0da%22%20d%3D%22M21.661,16.007l5.178,5.174c1.562,1.562,1.562,4.095,0,5.657%20c-1.562,1.562-4.095,1.562-5.657,0l-5.178-5.174l-5.174,5.174c-1.562,1.562-4.095,1.562-5.656,0c-1.562-1.562-1.562-4.095,0-5.657%20l5.171-5.171l-5.159-5.155c-1.562-1.562-1.562-4.095,0-5.657c1.562-1.562,4.096-1.562,5.657,0l5.159,5.155l5.18-5.18%20c1.562-1.562,4.095-1.562,5.657,0c1.562,1.562,1.562,4.095,0,5.656L21.661,16.007z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.theme-dark .toolbutton.icon-restore {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22stroke_x5F_04%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%236ca0da%22%20d%3D%22M16.001,32.001c-4.418,0-8.418-1.791-11.314-4.687l0.009-0.009%20c-0.423-0.366-0.695-0.901-0.695-1.505c0-1.104,0.896-2,2-2c0.603,0,1.138,0.273,1.504,0.695l0.01-0.01%20c2.171,2.172,5.171,3.515,8.485,3.515c6.627,0,12-5.372,12-12c0-6.627-5.373-12-12-12c-2.905,0-5.543,1.056-7.611,2.779l3.254,3.254%20c0.218,0.208,0.356,0.498,0.356,0.822c0,0.632-0.512,1.145-1.144,1.145H1.161c-0.006,0-0.01,0.003-0.016,0.003%20c-0.316,0-0.603-0.129-0.81-0.337c-0.208-0.207-0.337-0.493-0.337-0.811c0-0.005,0.003-0.01,0.003-0.016V1.145%20c0-0.632,0.512-1.144,1.144-1.144c0.326,0,0.616,0.139,0.824,0.357l3.579,3.578c2.804-2.438,6.445-3.936,10.454-3.936%20c8.836,0,16,7.163,16,16S24.838,32.001,16.001,32.001z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
.theme-dark .toolbutton.icon-settings {
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22fill_x5F_02%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20%20y%3D%220px%22%20width%3D%2232px%22%20height%3D%2232px%22%20viewBox%3D%220%200%2032%2032%22%20enable-background%3D%22new%200%200%2032%2032%22%20xml%3Aspace%3D%22preserve%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20fill%3D%22%236ca0da%22%20d%3D%22M31.199,18.405l-3.811,1.386c-0.181,0.545-0.412,1.065-0.667,1.572%20l1.723,3.693c0.14,0.424,0.312,0.818,0,1.131l-2.263,2.264c-0.312,0.312-0.699,0.139-1.131,0l-3.699-1.728%20c-0.504,0.252-1.021,0.481-1.562,0.661l-1.39,3.82c-0.206,0.404-0.357,0.801-0.8,0.801h-3.2c-0.441,0-0.599-0.402-0.8-0.801%20l-1.389-3.82c-0.542-0.18-1.059-0.409-1.562-0.661l-3.7,1.728c-0.432,0.139-0.818,0.312-1.131,0l-2.263-2.264%20c-0.312-0.312-0.14-0.707,0-1.131l1.724-3.693c-0.255-0.507-0.486-1.027-0.668-1.572L0.8,18.405c-0.404-0.206-0.8-0.358-0.8-0.8%20v-3.2c0-0.442,0.401-0.599,0.8-0.8L4.61,12.22c0.182-0.546,0.413-1.065,0.668-1.573L3.555,6.954c-0.141-0.432-0.312-0.819,0-1.131%20l2.263-2.263c0.312-0.312,0.707-0.14,1.131,0l3.7,1.727c0.504-0.252,1.021-0.481,1.562-0.662L13.6,0.806%20c0.201-0.399,0.358-0.8,0.8-0.8h3.2c0.442,0,0.594,0.396,0.8,0.8l1.39,3.819c0.541,0.181,1.059,0.41,1.562,0.662l3.699-1.727%20c0.424-0.14,0.819-0.312,1.131,0l2.263,2.263c0.312,0.312,0.141,0.699,0,1.131l-1.723,3.692c0.255,0.508,0.486,1.027,0.667,1.573%20l3.811,1.386c0.399,0.201,0.801,0.357,0.801,0.8v3.2C32,18.047,31.604,18.199,31.199,18.405z%20M16,12.006c-2.209,0-4,1.79-4,4%20c0,2.209,1.791,4,4,4s4-1.791,4-4C20,13.796,18.209,12.006,16,12.006z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
}
/***

  Main element styles, everything higher than resource view.

***/
:root {
  --workspace-gutter: 1.5em;
  --top-height: 3.5em;
  box-sizing: border-box;
}
body {
  background: var(--c-inactive-bg);
}
/* This bit is necessary to make sure we fill the entire screen; the
   #tessara container is the container in which the entire application runs,
   it is NOT rendered by React. 
*/
#tessera {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--c-inactive-bg);
}
#tessera .loading.foreground,
#tessera .loading.background {
  position: absolute;
}
.main_wrapper {
  display: grid;
  grid-template-areas: "top top top" "left guttertop right" "left workspace right" "left gutterbottom right";
  grid-template-rows: var(--top-height) var(--workspace-gutter) 1fr var(--workspace-gutter);
  grid-template-columns: var(--workspace-gutter) 1fr var(--workspace-gutter);
  height: 100vh;
  width: 100vw;
  background-color: var(--c-inactive-bg);
}
.top {
  grid-area: top;
  display: grid;
  grid-template-columns: minmax(1fr, min-content) max-content minmax(1fr, min-content);
  grid-template-areas: "logo menu session";
  background-color: var(--c-edge-bg);
  color: var(--c-edge-fg);
  white-space: nowrap;
}
.top .logo {
  grid-area: logo;
  padding: 0.875rem 1rem 1.125rem 2rem;
}
.top .logo a {
  display: inline-block;
  /* This URL-encodes the SVG and uses the charset= prefix which is both required by Internet Explorer */
  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20stroke-width%3D%220.501%22%20stroke-linejoin%3D%22bevel%22%20fill-rule%3D%22evenodd%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20version%3D%221.1%22%20overflow%3D%22visible%22%20width%3D%22270pt%22%20height%3D%2245pt%22%20viewBox%3D%220%200%20270%2045%22%3E%3Cg%20id%3D%22Document%22%20fill%3D%22none%22%20stroke%3D%22black%22%20transform%3D%22scale%281%20-1%29%22%3E%3Cg%20id%3D%22Spread%22%20transform%3D%22translate%280%20-45%29%22%3E%3Cg%20id%3D%22Layer%201%22%3E%3Cpath%20d%3D%22M%202.32,2.804%20L%202.32,25.151%20C%202.32,27.641%203.045,29.554%204.494,30.892%20C%205.943,32.229%208.042,32.898%2010.791,32.898%20L%2018.705,32.898%20C%2024.352,32.898%2027.176,30.316%2027.175,25.151%20L%2027.175,2.804%20L%2022.156,2.804%20L%2022.156,24.537%20L%2022.156,25.763%20C%2021.896,27.1%2020.763,27.769%2018.758,27.769%20L%2010.793,27.769%20C%209.494,27.769%208.594,27.537%208.092,27.072%20C%207.592,26.608%207.341,25.763%207.34,24.537%20L%207.34,2.804%20L%202.32,2.804%20Z%22%20stroke%3D%22none%22%20fill-rule%3D%22nonzero%22%20stroke-width%3D%221.386%22%20fill%3D%22%23409aff%22%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20stroke-miterlimit%3D%2279.8403193612775%22/%3E%3Cpath%20d%3D%22M%2034.182,10.717%20L%2034.182,24.204%20C%2034.182,30%2037.285,32.898%2043.491,32.898%20L%2050.96,32.898%20C%2053.45,32.898%2055.391,32.22%2056.784,30.863%20C%2058.178,29.507%2058.874,27.621%2058.874,25.206%20L%2058.874,21.639%20L%2039.202,12.5%20L%2039.202,11.498%20L%2039.202,11.163%20C%2039.425,9.79%2039.75,8.891%2040.177,8.464%20C%2040.604,8.037%2041.43,7.823%2042.656,7.823%20L%2059.202,7.823%20L%2059.202,2.804%20L%2042.374,2.804%20C%2039.55,2.804%2037.377,3.769%2035.854,5.701%20C%2034.74,7.15%2034.182,8.822%2034.182,10.717%20Z%20M%2039.207,18.007%20L%2053.856,24.813%20L%2053.854,25.259%20C%2053.854,26.225%2053.622,26.903%2053.158,27.292%20C%2052.693,27.683%2051.905,27.878%2050.79,27.877%20L%2042.6,27.877%20C%2040.335,27.878%2039.203,26.614%2039.202,24.085%20L%2039.207,18.007%20Z%22%20stroke%3D%22none%22%20fill-rule%3D%22nonzero%22%20stroke-width%3D%221.386%22%20fill%3D%22%23409aff%22%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20stroke-miterlimit%3D%2279.8403193612775%22/%3E%3Cpath%20d%3D%22M%2065.228,10.662%20L%2065.228,25.318%20L%2065.228,26.711%20C%2065.938,30.836%2068.627,32.898%2073.297,32.898%20L%2085.064,32.898%20L%2085.064,42.925%20L%2090.083,42.925%20L%2090.083,11.273%20C%2090.084,9.974%2089.936,8.915%2089.638,8.097%20C%2089.34,7.28%2088.783,6.407%2087.966,5.478%20C%2086.331,3.695%2084.529,2.804%2082.56,2.804%20L%2072.696,2.804%20C%2071.842,2.804%2070.857,3.045%2069.743,3.528%20C%2068.22,4.197%2067.087,5.135%2066.343,6.342%20C%2065.6,7.549%2065.228,8.989%2065.228,10.662%20Z%20M%2070.248,10.617%20C%2070.397,9.723%2070.621,9.071%2070.919,8.662%20C%2071.218,8.252%2071.702,7.973%2072.373,7.823%20L%2072.932,7.823%20L%2081.765,7.823%20C%2082.548,7.823%2083.2,8.066%2083.722,8.55%20C%2084.616,9.183%2085.064,10.133%2085.064,11.399%20L%2085.064,24.694%20C%2085.064,26.817%2084.154,27.878%2082.335,27.877%20L%2081.778,27.877%20L%2073.534,27.877%20C%2072.346,27.878%2071.502,27.626%2071,27.123%20C%2070.5,26.621%2070.249,25.755%2070.248,24.526%20L%2070.248,10.952%20L%2070.248,10.617%20Z%22%20stroke%3D%22none%22%20fill-rule%3D%22nonzero%22%20stroke-width%3D%221.386%22%20fill%3D%22%23409aff%22%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20stroke-miterlimit%3D%2279.8403193612775%22/%3E%3Cpath%20d%3D%22M%2097.09,10.717%20L%2097.09,24.204%20C%2097.09,30%20100.193,32.898%20106.399,32.898%20L%20113.868,32.898%20C%20116.358,32.898%20118.299,32.22%20119.692,30.863%20C%20121.086,29.507%20121.782,27.621%20121.782,25.206%20L%20121.782,21.639%20L%20102.11,12.5%20L%20102.11,11.498%20L%20102.11,11.163%20C%20102.333,9.79%20102.658,8.891%20103.085,8.464%20C%20103.512,8.037%20104.338,7.823%20105.564,7.823%20L%20122.11,7.823%20L%20122.11,2.804%20L%20105.282,2.804%20C%20102.458,2.804%20100.285,3.769%2098.762,5.701%20C%2097.648,7.15%2097.09,8.822%2097.09,10.717%20Z%20M%20102.115,18.007%20L%20116.764,24.813%20L%20116.762,25.259%20C%20116.762,26.225%20116.53,26.903%20116.066,27.292%20C%20115.601,27.683%20114.813,27.878%20113.698,27.877%20L%20105.508,27.877%20C%20103.243,27.878%20102.111,26.614%20102.11,24.085%20L%20102.115,18.007%20Z%22%20stroke%3D%22none%22%20fill-rule%3D%22nonzero%22%20stroke-width%3D%221.386%22%20fill%3D%22%23409aff%22%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20stroke-miterlimit%3D%2279.8403193612775%22/%3E%3Cpath%20d%3D%22M%20147.993,2.804%20L%20147.993,42.925%20L%20153.013,42.925%20L%20153.013,32.898%20L%20165.493,32.898%20C%20167.09,32.898%20168.353,32.656%20169.282,32.173%20C%20170.21,31.69%20171.046,30.845%20171.789,29.638%20C%20172.531,28.43%20172.903,27.139%20172.903,25.764%20L%20172.903,2.804%20L%20167.883,2.804%20L%20167.883,24.415%20L%20167.883,25.085%20C%20167.734,26.612%20166.952,27.543%20165.535,27.877%20L%20164.864,27.877%20L%20156.48,27.877%20C%20154.169,27.878%20153.014,26.763%20153.013,24.534%20L%20153.013,2.804%20L%20147.993,2.804%20Z%22%20stroke%3D%22none%22%20fill-rule%3D%22nonzero%22%20stroke-width%3D%221.386%22%20fill%3D%22%23ffa140%22%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20stroke-miterlimit%3D%2279.8403193612775%22/%3E%3Cpath%20d%3D%22M%20179.937,10.229%20L%20179.937,25.919%20C%20179.937,30.05%20182.165,32.377%20186.623,32.898%20L%20187.959,32.898%20L%20197.151,32.898%20L%20198.377,32.898%20C%20202.909,32.264%20205.174,29.952%20205.174,25.962%20L%20205.174,10.243%20C%20205.174,8.751%20204.858,7.502%20204.227,6.495%20C%20203.595,5.488%20202.536,4.556%20201.051,3.698%20C%20199.974,3.101%20198.674,2.804%20197.151,2.804%20L%20187.793,2.804%20C%20184.71,2.804%20182.463,4.032%20181.052,6.488%20C%20180.68,7.717%20180.309,8.964%20179.937,10.229%20Z%20M%20188.575,7.823%20L%20196.647,7.823%20C%20198.985,7.823%20200.154,9.086%20200.153,11.611%20L%20200.153,24.256%20C%20200.154,26.67%20198.985,27.878%20196.647,27.877%20L%20188.575,27.877%20C%20186.164,27.878%20184.958,26.67%20184.957,24.256%20L%20184.957,11.834%20C%20184.958,9.16%20186.164,7.823%20188.575,7.823%20Z%22%20stroke%3D%22none%22%20fill-rule%3D%22nonzero%22%20stroke-width%3D%221.386%22%20fill%3D%22%23ffa140%22%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20stroke-miterlimit%3D%2279.8403193612775%22/%3E%3Cpath%20d%3D%22M%20211.2,2.804%20L%20211.2,7.823%20L%20225.266,7.823%20L%20226.484,7.823%20C%20226.928,7.823%20227.38,8.028%20227.841,8.436%20C%20228.302,8.844%20228.533,9.641%20228.533,10.828%20L%20228.533,13.109%20C%20228.533,15%20227.548,15.946%20225.579,15.946%20L%20218.78,15.946%20C%20215.548,15.946%20213.3,17.024%20212.037,19.18%20C%20211.479,20.184%20211.2,21.188%20211.2,22.191%20L%20211.2,26.039%20C%20211.2,28.158%20211.793,29.831%20212.98,31.057%20C%20214.166,32.284%20215.798,32.898%20217.873,32.898%20L%20233.553,32.898%20L%20233.553,27.877%20L%20219.276,27.877%20L%20218.332,27.877%20C%20218.035,27.878%20217.609,27.739%20217.054,27.459%20C%20216.498,27.181%20216.22,26.576%20216.221,25.647%20L%20216.221,23.473%20C%20216.22,23.065%20216.369,22.619%20216.667,22.136%20C%20217.15,21.392%20217.911,21.02%20218.951,21.02%20L%20226.419,21.02%20L%20227.812,21.02%20C%20229.559,20.647%20230.952,19.835%20231.992,18.582%20C%20233.033,17.331%20233.553,15.864%20233.553,14.182%20L%20233.553,9.418%20C%20233.553,8.185%20233.201,7.026%20232.499,5.943%20C%20232.314,5.606%20232.102,5.298%20231.862,5.018%20C%20231.621,4.738%20231.315,4.447%20230.946,4.149%20C%20229.578,3.252%20228.321,2.804%20227.175,2.804%20L%20211.2,2.804%20Z%22%20stroke%3D%22none%22%20fill-rule%3D%22nonzero%22%20stroke-width%3D%221.386%22%20fill%3D%22%23ffa140%22%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20stroke-miterlimit%3D%2279.8403193612775%22/%3E%3Cpath%20d%3D%22M%20239.743,2.804%20L%20239.743,42.925%20L%20244.763,42.925%20L%20244.763,32.898%20L%20249.941,32.898%20L%20249.941,27.877%20L%20244.763,27.877%20L%20244.763,2.804%20L%20239.743,2.804%20Z%22%20stroke%3D%22none%22%20fill-rule%3D%22nonzero%22%20stroke-width%3D%221.386%22%20fill%3D%22%23ffa140%22%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20stroke-miterlimit%3D%2279.8403193612775%22/%3E%3Cpath%20d%3D%22M%20128.136,2.804%20L%20128.136,26.745%20C%20128.362,28.684%20128.926,30.119%20129.827,31.052%20C%20130.728,31.984%20132.193,32.599%20134.221,32.898%20L%20138.39,32.898%20L%20138.389,32.891%20L%20145.343,32.891%20L%20145.344,27.818%20L%20138.2,27.819%20L%20138.199,27.823%20L%20135.941,27.823%20C%20135.272,27.823%20134.641,27.609%20134.048,27.182%20C%20133.454,26.755%20133.157,25.965%20133.156,24.814%20L%20133.156,2.804%20L%20128.136,2.804%20Z%22%20stroke%3D%22none%22%20fill%3D%22%23409aff%22%20stroke-linejoin%3D%22miter%22%20stroke-width%3D%220.274%22%20marker-start%3D%22none%22%20marker-end%3D%22none%22%20stroke-miterlimit%3D%2279.8403193612775%22/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  height: 1.5rem;
  width: 8.8125rem;
  background-position: left;
}
.top .logo a span {
  display: none;
}
.top a {
  text-decoration: none;
}
.top ol,
.top ol li {
  display: inline-block;
}
.top nav {
  padding: 0 1.1em;
  /* optically 1em */
}
.top nav a {
  display: inline-block;
  padding: 1.25em 1em;
  font-size: 1em;
  color: var(--c-edge-fg);
}
.top nav.menu {
  grid-area: menu;
  text-align: center;
}
.top nav.session {
  grid-area: session;
  text-align: right;
}
.top nav.session .popup {
  position: fixed;
  top: calc(var(--top-height) - 0.5em);
  right: var(--workspace-gutter);
  background-color: var(--c-edge-bg);
  border: 1px solid var(--c-edge-border);
  border-radius: var(--active-radius);
  z-index: 1000;
  box-shadow: 0 0 0.5em 0.125em var(--c-shadow);
}
.top nav.session .popup nav {
  padding: 0;
  /* Styling for selector in menu, e.g. for current theme */
}
.top nav.session .popup nav ol {
  padding: 0.5em 0;
}
.top nav.session .popup nav li {
  display: block;
}
.top nav.session .popup nav li.theme,
.top nav.session .popup nav li.logout {
  border-top: 1px solid var(--c-edge-fg);
  padding-top: 0.5em;
  margin-top: 0.5em;
}
.top nav.session .popup nav a {
  color: var(--c-edge-fg);
  padding: 0.5em 1em;
}
.top nav.session .popup nav label {
  display: inline-block;
  padding: 0.5em 0.5em 0.5em 1em;
}
.top nav.session .popup nav label::after {
  content: ':';
}
.top nav.session .popup nav select {
  /* selector in menu, e.g. for current theme */
  margin: 0.5em 1em 0.5em 0;
  background-color: var(--c-edge-bg);
  color: var(--c-edge-fg);
  font-size: 1em;
  border-radius: var(--active-radius);
}
/***

  Styling of modals (popups and dialogs).

***/
.popup_wrapper .popup_background {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vw;
  z-index: 5;
}
.popup_wrapper .popup {
  z-index: 10;
}
/*** Placeholder rendering ***/
.placeholder {
  background: linear-gradient(-45deg, var(--c-inactive-bg) 40%, var(--c-active-bg) 50%, var(--c-inactive-bg) 60%);
  background-size: 300%;
  background-position-x: 100%;
  animation: placeholder-shimmer 1.5s infinite linear;
  border-radius: var(--c-active-radius);
}
@keyframes placeholder-shimmer {
  to {
    background-position-x: 0%;
  }
}
/***

  Works together with a Javascript hook that adds scrollable-top and
  scrollable-bottom to an element's classes when applicable because
  @container scroll-state queries are still experimental.

***/
.scrollable {
  overflow-y: scroll;
}
.top-scroll-marker,
.bottom-scroll-marker {
  display: none;
  opacity: 0;
  transition: opacity 0.25s;
}
.scrollable-top > .top-scroll-marker {
  display: block;
  opacity: 1;
  transition: all 0.25s;
}
.scrollable-bottom > .bottom-scroll-marker {
  display: block;
  opacity: 1;
  transition: all 0.25s;
}
/***

  Mixins for rendering arrows in the background.

***/
/***

  Works together with a Javascript hook that adds scrollable-top and
  scrollable-bottom to an element's classes when applicable because
  @container scroll-state queries are still experimental.

***/
/*
  Prevent text going through each other when updates are slow (i.e. for big
  tables in Safari) 
*/
.sticky-top th {
  background: var(--c-active-bg);
}
.scrollable-top thead.sticky-top {
  position: sticky;
  top: 0;
  left: 0;
  box-shadow: var(--c-shadow) 0 0.25em 0.25em -0.25em;
}
.scrollable-bottom .sticky-bottom .buttongroup {
  background: var(--c-accentdim-bg);
  box-shadow: var(--c-shadow) 0 -0.25em 0.5em -0.5em;
  margin: 0 -2em !important;
  padding: 1em 2em 2em !important;
  transition: background 0.25s;
}
/***

  Basic layout of tables.

***/
table {
  margin: 0 -0.25em;
  /* negates padding of cells */
  width: 100%;
}
table thead {
  color: var(--c-active-form-label);
  background-color: var(--c-active-bg);
}
table thead th {
  text-align: left;
  font-weight: bold;
  padding: 0.5em 0.25em;
}
table tbody td {
  padding: 0.25em;
}
table th.number,
table td.number {
  text-align: right;
}
table.datalist {
  margin: 1em 0;
  width: auto;
}
table.datalist th,
table.datalist td {
  text-align: left;
  padding: 0.5em;
}
table.datalist th {
  color: var(--c-active-form-label);
  padding-right: 1em;
  padding-left: 0;
}
table.datalist th::after {
  content: ':';
}
table.datalist.numbers td {
  text-align: right;
}
table.extra-legible td {
  font-family: 'Courier New', courier, monospace;
}
.resources-table.contact .email {
  /* this seems to be enough to trigger ellipsis? */
  max-width: 14em;
}
.resources-table.ticket .header {
  text-align: center;
}
.resources-table.ticket .number {
  width: min-content;
  text-align: left;
}
.resources-table.ticket .status {
  width: min-content;
}
.resources-table.ticket .updated {
  width: min-content;
}
.resources-table.ticket .subject {
  width: 50%;
}
/* Wider menu for tickets */
.resources-wrapper.current-resource.ticket {
  grid-template-columns: minmax(min-content, 1fr) var(--workspace-gutter) 2fr;
}
/* Menu should display ticket ID *and* description */
.resources-wrapper.current-resource .resources-table nav table {
  /* Never abbreviate ticket number */
  /* Show subject (partial) */
}
.resources-wrapper.current-resource .resources-table nav table td.number a,
.resources-wrapper.current-resource .resources-table nav table th.number a {
  overflow: visible;
}
.resources-wrapper.current-resource .resources-table nav table td.subject,
.resources-wrapper.current-resource .resources-table nav table th.subject {
  display: table-cell !important;
}
.current-resource.ticket section.articles .content {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: auto;
  /* Use different alignment only if there is
           some variation */
}
.current-resource.ticket section.articles .content:has(article.agent):has(article.customer) article.customer {
  grid-column: 1 / -2;
}
.current-resource.ticket section.articles .content:has(article.agent):has(article.customer) article.agent {
  grid-column: 2 / -1;
}
.current-resource.ticket .expand_collapse {
  grid-column: 1 / -1;
  text-align: center;
  padding-bottom: 0.5em;
}
.current-resource.ticket article {
  margin: 1rem 0;
  min-width: 20em;
  display: grid;
  grid-column: 1 / -1;
  grid-template-rows: min-content 1fr;
  grid-template-areas: "meta" "body";
}
.current-resource.ticket article .meta {
  grid-area: meta;
}
.current-resource.ticket article .meta .timestamp,
.current-resource.ticket article .meta .author {
  padding: 0.5em 1em;
  display: inline-block;
}
.current-resource.ticket article .meta .timestamp {
  float: right;
}
.current-resource.ticket article .meta .author {
  float: left;
}
.current-resource.ticket article .body {
  grid-area: body;
  border-radius: var(--default-radius);
  padding: 1em;
  white-space: pre-wrap;
}
.current-resource.ticket article.customer .body {
  background-color: var(--c-accent-bg);
  color: var(--c-accent-fg);
}
.current-resource.ticket article.agent .body {
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
}
main.ticket-create section {
  padding: 0 2rem;
}
.cronjob-frequencyspec {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  margin: 0.5em 0;
}
.cronjob-frequencyspec .field {
  padding: 0;
  margin: 0 1em 0 0;
}
.cronjob-frequencyspec .field:last-of-type {
  margin-right: 0;
}
.cronjob-log .cronjob-error {
  color: var(--c-active-danger);
}
/***

We would rather use <meter> for this, but that element cannot be styled
appropriately 

***/
.diskspace-meter .bar {
  display: block;
  background-color: var(--c-active-bg);
  border: 0.0625em solid var(--c-active-border);
  border-radius: var(--default-radius);
  overflow: hidden;
}
.diskspace-meter .bar .used {
  display: block;
  height: 1.5em;
  background-color: var(--c-accent-bg);
}
.diskspace-meter .summary,
.diskspace-meter .warning {
  display: block;
  margin: 0.5em 0;
}
.diskspace-meter .warning {
  color: var(--c-active-danger);
}
.diskspace-meter.high .bar .used {
  background-color: var(--c-active-danger) !important;
}
form .dns_records {
  /* Make sure we use all available columns of the form grid */
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 2fr min-content min-content 3fr min-content;
  grid-auto-rows: auto;
  white-space: nowrap;
}
form .dns_records tr {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  grid-auto-rows: auto;
  position: relative;
}
form .dns_records tr.error_description {
  color: var(--c-active-danger);
}
form .dns_records thead {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;
  z-index: 10;
}
form .dns_records tbody {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: 1 / 6;
  grid-auto-rows: auto;
  /* DNS editor has its own styling of inputs, but should match
         * styling of generic form fields. */
}
form .dns_records tbody tr {
  /* Similar to .field, but no border-radius for tr */
  clip-path: xywh(0 0 100% 100% round var(--active-radius));
}
form .dns_records tbody tr:focus-within {
  background-color: var(--c-accentdim-bg);
}
form .dns_records tbody td {
  display: grid;
  grid-template-columns: subgrid;
}
form .dns_records tbody td input,
form .dns_records tbody td select {
  display: grid;
}
form .dns_records tbody input,
form .dns_records tbody select {
  font-size: 0.9rem;
  padding: 0.25em;
  border-radius: var(--active-radius);
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  background-color: var(--c-active-form-bg);
  color: var(--c-active-form-fg);
}
form .dns_records tbody input:focus,
form .dns_records tbody select:focus {
  border: 0.0625rem solid var(--c-active-form-border);
  outline: none;
  outline: 0.0625rem solid var(--c-active-form-border);
}
.dns_change {
  display: grid;
  max-width: 80vw;
  grid-template-columns: 1fr 3fr;
  grid-template-areas: "title changes";
}
.dns_change h3 {
  padding: 1em 1em;
  grid-area: title;
  background-color: var(--c-accent-bg);
  color: var(--c-accent-fg);
}
.dns_change .changes {
  grid-area: changes;
  padding: 1.5em 1em 1em;
}
.dns_change .changes .label {
  width: 30%;
}
.dns_change .changes .ttl {
  width: 10%;
}
.dns_change .changes .type {
  width: 10%;
}
.dns_change .changes .targets {
  width: 50%;
}
.dns_change .changes .targets ul,
.dns_change .changes .targets li {
  padding: 0;
}
.dns_change .changes .targets li {
  list-style: none;
}
.dns_change .changes .new {
  color: var(--c-active-confirm);
}
.dns_change .changes .delete {
  color: var(--c-active-danger);
  text-decoration-line: line-through;
}
/*

  Styling of the login dialog

*/
.dialog.login {
  display: grid;
  max-width: 40em;
}
.dialog.login .dialog_body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "explanation form";
}
.dialog.login .dialog_body .explanation {
  grid-area: explanation;
  padding-right: 2em;
  border-right: 1px solid var(--c-accent-border);
}
.dialog.login .dialog_body .form {
  grid-area: form;
  padding-left: 2em;
}
.item-list.rejected-mail {
  display: grid;
  width: 100%;
  grid-template-columns: min-content min-content 1fr min-content min-content;
}
.item-list.rejected-mail li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  width: 100%;
}
.item-list.rejected-mail li > span {
  display: grid;
  grid-template-columns: subgrid;
}
.item-list.rejected-mail li > span .label {
  grid-column: 1;
}
.item-list.rejected-mail li > span .value {
  grid-column: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-list.rejected-mail li .timestamp {
  grid-row: 1;
  grid-column: 1;
}
.item-list.rejected-mail li .timestamp .value {
  grid-column: 1;
}
.item-list.rejected-mail li .sender,
.item-list.rejected-mail li .receiver {
  grid-row: 1;
  grid-column: 2 / 4;
}
.item-list.rejected-mail li .reason {
  grid-row: 1;
  grid-column: 4 / 6;
}
.item-list.rejected-mail li .subject {
  grid-row: 2;
  grid-column: 2 / -1;
}
.item-list.rejected-mail li .subject .value {
  grid-column: 2 / -1;
}
:root {
  box-sizing: border-box;
  color-scheme: light;
  /* add dark for dark mode later */
}