/***

    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


    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

    Button colors are also generic because buttons should look the same
    everywhere:
    * button-bg -- background color for buttons
    * button-bg-top -- top gradient color for buttons
    * button-bg-bottom -- bottom gradient color for buttons
    * button-fg -- foreground/text color for buttons
    * button-border -- border color for buttons
    * button-outline -- outline color for buttons

    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.

***/
/* Colors from our logo */
/*
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-fg-secondary: #003673;
  --c-active-bg: #fff;
  --c-active-link: #0066d9;
  --c-active-border: #2d6cb3;
  --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-accentdim-fg: #000;
  --c-accentdim-bg: #e9f3ff;
  --c-accentdim-link: var(--c-active-link);
  --c-accentdim-border: var(--c-active-border);
  --c-accentbright-fg: #000;
  --c-accentbright-bg: #ffa242;
  --c-accentbright-link: #fff;
  --c-accentbright-border: #ccc;
  --c-shadow: rgba(0, 0, 0, 0.25);
  --c-button-bg: #ddd;
  --c-button-bg-top: #ffffff;
  --c-button-bg-bottom: var(--c-button-bg);
  --c-button-fg: #000;
  --c-button-border: var(--c-button-bg);
  --c-button-outline: #777777;
  --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-fg-secondary: #eee;
  --c-active-bg: #222;
  --c-active-link: #73b5ff;
  --c-active-border: #bbb;
  --c-active-error-fg: #fff;
  --c-active-button-bg: #777;
  --c-active-button-bg-top: lighthen(#777, 10%);
  --c-active-button-bg-bottom: #777;
  --c-active-danger: #e00;
  --c-active-confirm: #0a0;
  --c-accent-fg: #eee;
  --c-accent-bg: #0072f3;
  --c-accent-link: #fff;
  --c-accent-button-border: #fff;
  --c-accentdim-fg: #fff;
  --c-accentdim-bg: #336;
  --c-accentbright-bg: #f47c00;
  --c-button-bg: #777;
  --c-button-bg-top: #c3c3c3;
  --c-button-fg: #000;
  --c-button-outline: #000000;
}
:root.theme-dos {
  /*** Gimmick ***/
  /* Edge is very close to normal colors, so no other restyling necessary. */
  --c-edge-fg: #fff;
  --c-edge-bg: #000;
  --c-inactive-fg: #aaaaaa;
  --c-inactive-bg: #000;
  --c-active-fg: #fff;
  --c-active-fg-secondary: #fff;
  --c-active-bg: #0000aa;
  --c-active-link: #55ffff;
  --c-active-border: #ffff55;
  --c-active-button-bg: #00aaaa;
  --c-active-button-bg-top: #00aaaa;
  --c-active-button-bg-bottom: #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);
  --c-button-bg: #00aaaa;
  --c-button-bg-top: var(--c-button-bg);
  --c-button-bg-bottom: var(--c-button-bg);
  --c-button-fg: #fff;
  --c-button-outline: var(--c-button-bg);
  --default-radius: 0;
  --accent-radius: 0;
  --active-radius: 0;
}
:root.theme-dos body,
:root.theme-dos input,
:root.theme-dos select,
:root.theme-dos textarea,
:root.theme-dos button,
:root.theme-dos p,
:root.theme-dos ul,
:root.theme-dos li,
:root.theme-dos a {
  font-family: monospace !important;
  font-size: 1rem !important;
}
:root.theme-dos h1,
:root.theme-dos h2,
:root.theme-dos h3,
:root.theme-dos h4,
:root.theme-dos h5,
:root.theme-dos h6,
:root.theme-dos h7 {
  font-family: monospace !important;
  font-size: 1rem !important;
  color: #ffff55;
}
/***

  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

***/
/***

  Mixins for basic font styling. These can be scaled for specific use cases
  (i.e. in the control panel the headings are usually smaller).

***/
/***

  Mixin for our logo.

***/
/* 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 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 to ender an element in the center of the browser window 

***/
/***

  Mixin for using any of the accented color schemes.

***/
/* Helps in some places */
button,
.button {
  background-color: var(--c-button-bg);
  background-image: linear-gradient(var(--c-button-bg-top), var(--c-button-bg-bottom));
  color: var(--c-button-fg) !important;
  border-radius: var(--active-radius);
  border-width: 0.1em;
  border-color: var(--c-button-border);
  border-style: outset;
  outline: solid 1px var(--c-button-outline);
  font-size: 1rem;
  padding: 0.5em 1em;
}
button:active,
.button:active {
  border-style: inset;
  background-color: var(--c-button-bg-bottom);
  background-image: linear-gradient(var(--c-button-bg-bottom), var(--c-button-bg-top));
}
button:disabled,
.button:disabled {
  background-color: transparent;
  background-image: none;
}
button[aria-expanded="true"]::after,
.button[aria-expanded="true"]::after {
  content: ' \00ab';
}
button[aria-expanded="false"]::after,
.button[aria-expanded="false"]::after {
  content: ' \00bb';
}
a.button {
  display: inline-block;
  text-decoration: none !important;
}
a.button:hover {
  text-decoration: none !important;
}
/* Mixin to style a button as not a button */
.no-button {
  background-color: transparent;
  background-image: none;
  color: inherit;
  border: none;
  outline: none;
  padding: 0;
}
/***

SVG for icons.

***/
/* Initalisation */
:root {
  box-sizing: border-box;
  color-scheme: light;
  /* add dark for dark mode later */
}
/* Common stuff */
/***

  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 {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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;
  background-size: contain;
}
form .feedback.fail span,
form .feedback.fieldFail span {
  display: none;
}
form .feedback.success {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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;
  background-size: contain;
}
form .feedback.success span {
  display: none;
}
/* Dark mode */
.theme-dark form .feedback.fail,
.theme-dark form .feedback.fieldFail {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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;
  background-size: contain;
}
.theme-dark form .feedback.fail span,
.theme-dark form .feedback.fieldFail span {
  display: none;
}
.theme-dark form .feedback.success {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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;
  background-size: contain;
}
.theme-dark form .feedback.success span {
  display: none;
}
ul.item-list {
  display: block;
  margin: 0.5em 0;
  padding: 0;
}
ul.item-list li {
  display: block;
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
  border-radius: var(--default-radius);
  margin: 0.35em 0;
  white-space: wrap;
  border: 0.0625em solid var(--c-accentdim-bg);
  padding: 0.25em 0;
  cursor: pointer;
}
ul.item-list li:hover {
  border-color: var(--c-accentdim-border);
}
ul.item-list li:hover span.value {
  text-decoration: underline;
}
ul.item-list li > span {
  white-space: nowrap;
  display: inline-block;
  padding: 0.25em;
  margin: 0 0.25em;
}
ul.item-list li > span .label {
  color: var(--c-active-form-label);
  padding-right: 1em;
  font-size: 0.9em;
}
ul.item-list li > span .label::after {
  content: ':';
}
/* 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;
  }
}
/* Render main items in the workspace area */
/*** 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%;
  }
}
/***

  Basic text styling 

***/
.danger h2,
.danger h3,
p.warning {
  color: var(--c-active-danger);
}
table.datalist td,
table.datalist th {
  font-size: 1rem;
  margin: 0.5rem 0;
  line-height: 140%;
}
.themedos table.datalist td,
.themedos table.datalist th {
  font-family: monospace !important;
  font-size: 1rem !important;
}
/* Common layout for placeholders of empty lists */
.empty {
  opacity: 0.5;
  font-style: italic;
}
/* Canvas: provides the background layout */
.dialog_wrapper {
  position: fixed;
  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;
}
/* 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 {
  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,%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;
  background-size: contain;
}
.dialog_wrapper .dialog .dialog_body .top-scroll-marker span {
  display: none;
}
.dialog_wrapper .dialog .dialog_body .bottom-scroll-marker {
  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,%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;
  background-size: contain;
}
.dialog_wrapper .dialog .dialog_body .bottom-scroll-marker span {
  display: none;
}
/* Dark mode */
.theme-dark .dialog_wrapper .dialog .dialog_body .top-scroll-marker {
  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,%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;
  background-size: contain;
}
.theme-dark .dialog_wrapper .dialog .dialog_body .top-scroll-marker span {
  display: none;
}
.theme-dark .dialog_wrapper .dialog .dialog_body .bottom-scroll-marker {
  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,%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;
  background-size: contain;
}
.theme-dark .dialog_wrapper .dialog .dialog_body .bottom-scroll-marker span {
  display: none;
}
/***

  Styling for "full browser" app (includes its own header).

***/
: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
   .fullbrowser container is the container in which the entire application runs,
   it is NOT rendered by React. 
*/
.fullbrowser {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--c-inactive-bg);
}
.fullbrowser .loading.foreground,
.fullbrowser .loading.background {
  position: absolute;
}
.fullbrowser_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);
}
.fullbrowser header {
  grid-area: top;
  display: grid;
  grid-template-columns: min-content 1fr;
  grid-template-areas: "logo nav";
  background-color: var(--c-edge-bg);
  color: var(--c-edge-fg);
  white-space: nowrap;
}
.fullbrowser header .logo {
  grid-area: logo;
  padding: 0.875rem 1rem 1.125rem 2rem;
}
.fullbrowser header .logo a {
  height: 1.5rem;
  width: 8.8125rem;
  background-position: left;
}
.fullbrowser header a {
  text-decoration: none;
}
.fullbrowser header nav {
  grid-area: nav;
  padding: 0 1.1em;
  /* optically 1em */
  text-align: center;
  /* Styling for rolldown menu */
}
.fullbrowser header nav ol,
.fullbrowser header nav ol li {
  display: inline-block;
}
.fullbrowser header nav ol {
  text-align: center;
}
.fullbrowser header nav li {
  cursor: pointer;
}
.fullbrowser header nav ol:last-child {
  float: right;
  /* Last rolldown menu is aligned differently */
}
.fullbrowser header nav ol:last-child .rolldown .popup {
  position: fixed;
  right: var(--workspace-gutter);
}
.fullbrowser header nav a {
  display: inline-block;
  padding: 1.25em 1em;
  font-size: 1em;
  color: var(--c-edge-fg);
}
.fullbrowser header nav .rolldown .popup {
  position: fixed;
  top: calc(var(--top-height) - 0.5em);
  background-color: var(--c-edge-bg);
  border: 1px solid var(--c-edge-border);
  border-radius: var(--active-radius);
  box-shadow: 0 0 0.5em 0.125em var(--c-shadow);
  z-index: 1000;
}
.fullbrowser header nav .rolldown .popup nav {
  padding: 0;
  /* Styling for selector in menu, e.g. for current theme */
}
.fullbrowser header nav .rolldown .popup nav ol {
  padding: 0.5em 0;
}
.fullbrowser header nav .rolldown .popup nav li {
  display: block;
  text-align: left;
}
.fullbrowser header nav .rolldown .popup nav a {
  color: var(--c-edge-fg);
  padding: 0.5em 1em;
}
.fullbrowser header nav .rolldown .popup nav label {
  display: inline-block;
  padding: 0.5em 0.5em 0.5em 1em;
}
.fullbrowser header nav .rolldown .popup nav label::after {
  content: ':';
}
.fullbrowser header nav .rolldown .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);
}
.fullbrowser header nav .rolldown .popup nav.session_menu li.theme,
.fullbrowser header nav .rolldown .popup nav.session_menu li.logout {
  border-top: 1px solid var(--c-edge-fg);
  padding-top: 0.5em;
  margin-top: 0.5em;
}
/***

  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;
}
/***

  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;
}
/* Elements */
/***

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.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 */
}
.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 {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23ddd%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;
  background-size: contain;
}
form .field button.help span {
  display: none;
}
form .field .error {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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;
  background-size: contain;
}
form .field .error span {
  display: none;
}
/* Dark mode */
.theme-dark form .field button.help {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23777%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;
  background-size: contain;
}
.theme-dark form .field button.help span {
  display: none;
}
.theme-dark form .field .error {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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;
  background-size: contain;
}
.theme-dark form .field .error span {
  display: none;
}
/***

  Item selecter (inside a resource view).

***/
/***

  Additional layout of tables.

***/
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;
}
/***

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 {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23ddd%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;
  background-size: contain;
}
.toolbutton.icon-add span {
  display: none;
}
.toolbutton.icon-change-password {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23ddd%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;
  background-size: contain;
}
.toolbutton.icon-change-password span {
  display: none;
}
.toolbutton.icon-delete {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23ddd%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;
  background-size: contain;
}
.toolbutton.icon-delete span {
  display: none;
}
.toolbutton.icon-restore {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23ddd%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;
  background-size: contain;
}
.toolbutton.icon-restore span {
  display: none;
}
.toolbutton.icon-settings {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23ddd%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;
  background-size: contain;
}
.toolbutton.icon-settings span {
  display: none;
}
/* Dark mode */
.theme-dark .toolbutton.icon-add {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23777%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;
  background-size: contain;
}
.theme-dark .toolbutton.icon-add span {
  display: none;
}
.theme-dark .toolbutton.icon-change-password {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23777%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;
  background-size: contain;
}
.theme-dark .toolbutton.icon-change-password span {
  display: none;
}
.theme-dark .toolbutton.icon-delete {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23777%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;
  background-size: contain;
}
.theme-dark .toolbutton.icon-delete span {
  display: none;
}
.theme-dark .toolbutton.icon-restore {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23777%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;
  background-size: contain;
}
.theme-dark .toolbutton.icon-restore span {
  display: none;
}
.theme-dark .toolbutton.icon-settings {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23777%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;
  background-size: contain;
}
.theme-dark .toolbutton.icon-settings span {
  display: none;
}
/* Form-specific elements */
/* 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);
}
/* Generic control panel stuff */
.journal ul.entries {
  display: grid;
  width: 100%;
  grid-template-columns: max-content 1fr max-content;
  padding: 0;
}
.journal ul.entries > li {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  width: 100%;
  column-gap: 2rem;
}
.journal ul.entries > li .timestamp {
  grid-row: 1;
  grid-column: 1;
  white-space: nowrap;
}
.journal ul.entries > li .event {
  grid-row: 1;
  grid-column: 2 / -1;
  font-weight: bold;
}
.journal ul.entries > li .origin {
  grid-row: 2;
  grid-column: 2 / -1;
  font-size: 80%;
}
.journal ul.entries > li .data {
  grid-row: 3;
  grid-column: 2 / -1;
}
.journal ul.entries > li .data ul {
  padding: 0;
  margin: 0;
}
.journal ul.entries > li .data ul li {
  display: block;
  margin: 0.25em 0;
}
/*

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-accentdim-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 min-content 1fr;
  grid-template-areas: "title" "tabs" "panel-nav" "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 {
  float: right;
  font-weight: normal;
  opacity: 0.5;
  margin-left: 0.25em;
}
.resources-wrapper main .tabs {
  grid-area: tabs;
  margin: 1rem 0 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 {
  display: grid;
  grid-row: 3 / -1;
  padding: 0;
  grid-template-rows: subgrid;
  grid-template-areas: "nav" "content";
}
.resources-wrapper main .panel > nav {
  grid-area: nav;
  padding: 1.5rem 2rem;
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
  border-bottom: 1px solid var(--c-active-link);
  /* Some places uses label/select without item-select */
}
.resources-wrapper main .panel > nav label {
  color: var(--c-accentdim-link);
  margin-right: 0.5em;
  font-weight: bold;
}
.resources-wrapper main .panel > nav label::after {
  content: ':';
}
.resources-wrapper main .panel > nav select {
  color: var(--c-active-link);
  border: 0.1em solid var(--c-accentdim-link);
  border-radius: var(--active-radius);
  padding: 0.25em;
  font-weight: bold;
}
.resources-wrapper main .panel > nav .item-select button {
  margin: 0 0 0 1rem;
}
.resources-wrapper main .panel > nav .item-select select {
  margin-right: 1rem;
}
.resources-wrapper main .panel > nav .item-table table {
  background-color: var(--c-acctive-bg);
  border: 1px solid var(--c-active-link);
  margin: 0;
}
.resources-wrapper main .panel > nav .item-table button {
  margin: 1.5rem 1rem 0 0;
}
.resources-wrapper main .panel > .panel-content {
  grid-area: content;
  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 .panel-content > .top-scroll-marker,
.resources-table nav > .journal .top-scroll-marker,
.current-resource main .panel .panel-content > .journal .top-scroll-marker {
  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,%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;
  background-size: contain;
}
.resources-table nav > .top-scroll-marker span,
.current-resource main .panel .panel-content > .top-scroll-marker span,
.resources-table nav > .journal .top-scroll-marker span,
.current-resource main .panel .panel-content > .journal .top-scroll-marker span {
  display: none;
}
.resources-table nav > .bottom-scroll-marker,
.current-resource main .panel .panel-content > .bottom-scroll-marker,
.resources-table nav > .journal .bottom-scroll-marker,
.current-resource main .panel .panel-content > .journal .bottom-scroll-marker {
  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,%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;
  background-size: contain;
}
.resources-table nav > .bottom-scroll-marker span,
.current-resource main .panel .panel-content > .bottom-scroll-marker span,
.resources-table nav > .journal .bottom-scroll-marker span,
.current-resource main .panel .panel-content > .journal .bottom-scroll-marker span {
  display: none;
}
/* Dark mode */
.theme-dark .resources-table nav > .top-scroll-marker,
.theme-dark .current-resource main .panel .panel-content > .top-scroll-marker,
.theme-dark .resources-table nav > .journal .top-scroll-marker,
.theme-dark .current-resource main .panel .panel-content > .journal .top-scroll-marker {
  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,%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;
  background-size: contain;
}
.theme-dark .resources-table nav > .top-scroll-marker span,
.theme-dark .current-resource main .panel .panel-content > .top-scroll-marker span,
.theme-dark .resources-table nav > .journal .top-scroll-marker span,
.theme-dark .current-resource main .panel .panel-content > .journal .top-scroll-marker span {
  display: none;
}
.theme-dark .resources-table nav > .bottom-scroll-marker,
.theme-dark .current-resource main .panel .panel-content > .bottom-scroll-marker,
.theme-dark .resources-table nav > .journal .bottom-scroll-marker,
.theme-dark .current-resource main .panel .panel-content > .journal .bottom-scroll-marker {
  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,%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;
  background-size: contain;
}
.theme-dark .resources-table nav > .bottom-scroll-marker span,
.theme-dark .current-resource main .panel .panel-content > .bottom-scroll-marker span,
.theme-dark .resources-table nav > .journal .bottom-scroll-marker span,
.theme-dark .current-resource main .panel .panel-content > .journal .bottom-scroll-marker span {
  display: none;
}
/* Resource-specific control panel stuff */
.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;
}
/* Service-specific control panel stuff */
.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;
}
/* Order cart and checkout */
.cart_overview table {
  display: grid;
  grid-template-columns: max-content min-content min-content min-content;
  grid-auto-rows: min-content;
  grid-auto-flow: row;
}
.cart_overview table td,
.cart_overview table th {
  white-space: nowrap;
  max-width: 30em;
  text-overflow: ellipsis;
  border: none;
}
.cart_overview table tbody,
.cart_overview table tfoot {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-autor-rows: min-content;
  grid-auto-flow: row;
  margin: 1em 0;
  border-radius: var(--default-radius);
  overflow: hidden;
}
.cart_overview table tbody tr,
.cart_overview table tfoot tr {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
}
.cart_overview table tbody tr td:first-child[colspan="2"],
.cart_overview table tfoot tr td:first-child[colspan="2"],
.cart_overview table tbody tr th:first-child[colspan="2"],
.cart_overview table tfoot tr th:first-child[colspan="2"] {
  grid-column: 1 / 2;
}
.cart_overview table tbody tr th[colspan="4"],
.cart_overview table tfoot tr th[colspan="4"] {
  grid-column: 1 / 4;
}
.cart_overview table tbody tr :not(:first-child):last-child,
.cart_overview table tfoot tr :not(:first-child):last-child {
  text-align: right;
}
/* NederHost-specific fixes */
#mijn_nederhost h1 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 1.875rem;
  font-weight: normal;
  padding: 0.75rem 0;
  line-height: 125%;
}
.theme-dos #mijn_nederhost h1 {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
#mijn_nederhost h2 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 1.8rem;
  line-height: 125%;
  font-weight: 300;
  padding: 1.35rem 0 0.675em;
}
.theme-dos #mijn_nederhost h2 {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
body {
  display: grid;
  grid-template-columns: 1fr min(80em, 100%) 1fr;
  grid-template-rows: min-content 1fr max-content;
  grid-template-areas: "header header header" "main main main" "footer footer footer";
  overflow: scroll;
}
/* General style for the content that is rendered at a maximum size of the
 * middle column. */
.content {
  grid-area: content;
  padding-left: 1em;
  padding-right: 1em;
}
header {
  display: grid;
  grid-area: header;
  grid-template-columns: subgrid;
  grid-template-rows: min-content min-content;
  grid-template-areas: "top top top" "main main main";
  position: sticky;
  top: 0;
  z-index: 20;
}
header .content {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  grid-template-areas: "logo main-nav meta-nav";
}
header .content menu,
header .content li,
header .content a {
  display: inline-block;
  white-space: nowrap;
}
header .content a {
  text-decoration: none;
  font-size: 1.1em;
}
header .content a:hover {
  text-decoration: underline;
}
main {
  grid-area: main;
  display: grid;
  grid-template-columns: subgrid;
  grid-auto-rows: min-content;
  grid-auto-flow: row;
  background-color: var(--c-active-bg);
  color: var(--c-active-fg);
}
main > section {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-areas: "left content right";
  padding: 0 1em;
}
main > section .content {
  grid-area: content;
  grid-auto-rows: min-content;
  grid-auto-flow: row;
  grid-column-gap: 4em;
  grid-row-gap: 2em;
  margin: 1em 0;
  /* Default for subsections */
}
main > section .content section {
  grid-column-gap: 4em;
  grid-row-gap: 2em;
}
main > section .content h1 {
  grid-column: 1 / -1;
}
main > section:first-child .content {
  padding-top: 2em;
}
footer {
  display: grid;
  grid-area: footer;
  grid-template-columns: subgrid;
  grid-template-rows: repeat(3, min-content);
  grid-template-areas: "main main main" "legal legal legal" "badges badges badges";
  background-color: var(--c-edge-bg);
  color: var(--c-edge-fg);
}
footer h2 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 125%;
  padding: 1.5rem 0 0.5rem;
}
.theme-dos footer h2 {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
footer ul,
footer li {
  display: block;
  padding: 0.25em 0;
  margin: 0;
}
footer > section {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  grid-template-areas: "left content right";
}
footer section.legal {
  grid-area: legal;
  background-color: var(--c-accent-bg);
  color: var(--c-accent-fg);
  text-align: center;
}
footer section.legal a {
  color: var(--c-accent-link);
}
footer section.legal ul li {
  display: inline-block;
}
footer section.legal ul li:not(:last-child)::after {
  content: '\00b7';
  margin: 0 1em;
}
footer section.legal a {
  text-decoration: none;
}
footer section.legal a:hover {
  text-decoration: underline;
}
footer section.main {
  grid-area: main;
  color: var(--c-edge-fg);
  background-color: var(--c-edge-bg);
}
footer section.main a {
  color: var(--c-edge-fg);
  text-decoration: none;
}
footer section.main a:hover {
  text-decoration: underline;
}
footer section.main .content {
  display: flex;
  padding: 1em 0 1.5em;
}
footer section.main .content nav {
  flex: 1;
}
footer section.badges {
  grid-area: badges;
  background-color: var(--c-active-bg);
}
header menu,
header li,
header a {
  display: inline-block;
  white-space: nowrap;
}
header .top,
header .main {
  display: grid;
  grid-template-columns: subgrid;
  grid-template-areas: "left content right";
}
header .top {
  grid-area: top;
  background-color: var(--c-accent-bg);
  color: var(--c-accent-fg);
}
header .top .content {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: 1fr min-content;
  grid-template-areas: "slogan nav";
}
header .top .content .slogan {
  grid-area: slogan;
  font-size: 1.1em;
  margin: 0.75em 0;
  white-space: nowrap;
}
header .top .content nav {
  grid-area: nav;
  text-align: right;
}
header .top .content a {
  margin: 0.75em 0 0.75em 1.5em;
  color: var(--c-accent-link);
}
header .main {
  grid-area: main;
  background-color: var(--c-edge-bg);
  color: var(--c-edge-fg);
}
header .main nav a {
  color: var(--c-edge-link);
  text-decoration: none;
  font-size: 1.1em;
  margin: 1em 0 0.5em 1.5em;
}
header .main nav a:hover {
  text-decoration: underline;
}
header .main .content {
  display: grid;
  grid-template-rows: subgrid;
  grid-template-columns: min-content 1fr min-content;
  grid-template-areas: "logo main meta";
}
header .main .content .logo {
  grid-area: logo;
  padding: 0.75em 1em 0.75em 0;
}
header .main .content .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;
  aspect-ratio: 6 / 1;
  height: 1.5em;
}
header .main .content .logo a span {
  display: none;
}
header .main .content .logo a span {
  display: none;
}
header .main .content .main {
  grid-area: main;
  text-align: center;
}
header .main .content .main menu {
  display: flex;
  justify-content: space-around;
}
header .main .content .meta {
  grid-area: meta;
  text-align: right;
}
header .meta a {
  height: 1.1em;
  width: 1.1em;
  margin: -0.2em 0;
}
header .meta a span {
  display: none;
}
header .meta #meta-login 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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23fff%22%20d%3D%22M28,31.998H4c-2.209,0-4-1.791-4-4v-2%20c0-3.699,5.029-6.803,11.85-7.718C9.545,16.283,8,12.896,8,10V8c0-4.419,3.582-8,8-8s8,3.581,8,8v2c0,2.896-1.545,6.283-3.85,8.279%20C26.971,19.194,32,22.298,32,25.998v2C32,30.207,30.209,31.998,28,31.998z%20M20,8c0-2.209-1.791-4-4-4s-4,1.791-4,4v2%20c0,2.209,1.791,6,4,6s4-3.791,4-6V8z%20M28,25.998c0-0.138-0.43-1.057-2.475-2.079c-2.441-1.221-5.914-1.921-9.525-1.921%20s-7.084,0.7-9.525,1.921C4.43,24.941,4,25.859,4,25.998v1.202C4,27.642,4.357,28,4.801,28h22.398C27.643,28,28,27.642,28,27.199%20V25.998z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
header .meta #meta-login a span {
  display: none;
}
header .meta #meta-cart 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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23fff%22%20d%3D%22M30,13.981l-2,12c-0.4,2.209-1.791,4-4,4H8%20c-2.209,0-3.615-1.791-4-4l-2-12c-1.105,0-2-0.896-2-2s0.895-2,2-2h4h9.172l7.412-7.414c0.781-0.781,2.049-0.781,2.83,0%20c0.779,0.781,0.779,2.047,0,2.829l-4.586,4.585H26h4c1.104,0,2,0.896,2,2S31.104,13.981,30,13.981z%20M25.199,13.981h-18.4%20c-0.441,0-0.799,0.406-0.799,0.8c0,0.394,2,10.4,2,10.4c0.1,0.441,0.357,0.8,0.799,0.8h14.4c0.441,0,0.713-0.364,0.801-0.8%20c0,0,2-10.013,2-10.4C26,14.394,25.641,13.981,25.199,13.981z%20M20,23.981c-1.105,0-2-0.895-2-2v-4c0-1.104,0.895-2,2-2%20c1.104,0,2,0.896,2,2v4C22,23.086,21.104,23.981,20,23.981z%20M12,23.981c-1.105,0-2-0.895-2-2v-4c0-1.104,0.895-2,2-2%20c1.104,0,2,0.896,2,2v4C14,23.086,13.104,23.981,12,23.981z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
  position: relative;
}
header .meta #meta-cart a span {
  display: none;
}
header .meta #meta-cart a span.description {
  display: inline-block !important;
  position: absolute;
  text-align: right;
  top: -0.6em;
  right: -1.5em;
  background-color: var(--c-accentbright-bg);
  color: var(--c-accentbright-fg);
  font-size: 0.8rem;
  font-weight: bold;
  border: 1px solid var(--c-edge-bg);
  border-radius: 1.5em;
  padding: 0.25em 0.5em;
}
header .meta #meta-search 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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23fff%22%20d%3D%22M31.178,31.161c-0.566,0.566-1.318,0.878-2.119,0.878%20c-0.801,0-1.554-0.312-2.121-0.878l-5.351-5.352c-2.176,1.396-4.758,2.216-7.535,2.216c-7.725,0-13.986-6.262-13.986-13.986%20S6.328,0.053,14.052,0.053s13.986,6.262,13.986,13.986c0,2.775-0.818,5.354-2.212,7.53l5.352,5.352%20C32.347,28.09,32.347,29.992,31.178,31.161z%20M14.052,4.049c-5.518,0-9.99,4.473-9.99,9.99s4.473,9.99,9.99,9.99%20s9.99-4.473,9.99-9.99S19.57,4.049,14.052,4.049z%20M29.764,28.335l-5.148-5.147c-0.437,0.503-0.908,0.975-1.411,1.411l5.147,5.148%20c0.189,0.188,0.439,0.292,0.707,0.292c0.266,0,0.517-0.104,0.705-0.292C30.153,29.357,30.153,28.725,29.764,28.335z%20M13.053,8.045%20c-2.759,0-4.995,2.236-4.995,4.995c0,0.552-0.447,0.999-0.999,0.999S6.06,13.592,6.06,13.04c0-3.862,3.131-6.993,6.993-6.993%20c0.552,0,0.999,0.447,0.999,0.999S13.605,8.045,13.053,8.045z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
header .meta #meta-search a span {
  display: none;
}
header .meta #meta-theme 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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%3D%22%23fff%22%20d%3D%22M18.995,32.013c-8.823,0-16-7.178-16-16s7.177-16,16-16c3.089,0,6.091,0.887,8.682,2.563%20c0.682,0.441,1.029,1.252,0.879,2.05c-0.152,0.799-0.771,1.427-1.567,1.589c-4.632,0.942-7.993,5.062-7.993,9.798%20s3.361,8.855,7.994,9.799c0.795,0.161,1.414,0.789,1.566,1.588c0.15,0.799-0.197,1.608-0.879,2.051%20C25.085,31.126,22.083,32.013,18.995,32.013z%20M18.995,4.013c-6.617,0-12,5.383-12,12s5.383,12,12,12%20c0.812,0,1.618-0.082,2.404-0.242c-3.888-2.525-6.404-6.912-6.404-11.758S17.51,6.78,21.399,4.255%20C20.613,4.095,19.807,4.013,18.995,4.013z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
header .meta #meta-theme a span {
  display: none;
}
.theme-dark header .meta #meta-theme 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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23fff%22%20d%3D%22M30,18.013h-2c-1.104,0-2-0.896-2-2s0.896-2,2-2h2%20c1.104,0,2,0.896,2,2S31.105,18.013,30,18.013z%20M29.125,10.745l-1.733,1c-0.956,0.552-2.18,0.225-2.732-0.732%20c-0.552-0.956-0.224-2.18,0.732-2.732l1.732-0.999c0.957-0.553,2.18-0.225,2.732,0.731C30.409,8.97,30.082,10.192,29.125,10.745z%20%20M23.732,6.62C23.18,7.577,21.957,7.905,21,7.353s-1.284-1.775-0.732-2.732l1-1.731C21.821,1.932,23.044,1.604,24,2.156%20c0.957,0.553,1.284,1.775,0.732,2.732L23.732,6.62z%20M16,6.013c-1.104,0-2-0.896-2-2v-2c0-1.104,0.896-2,2-2s2,0.896,2,2v2%20C18,5.117,17.105,6.013,16,6.013z%20M11,7.353c-0.957,0.553-2.18,0.225-2.732-0.732l-1-1.731C6.716,3.932,7.044,2.709,8,2.156%20c0.957-0.552,2.18-0.225,2.732,0.732l1,1.731C12.285,5.577,11.957,6.8,11,7.353z%20M7.34,11.013c-0.552,0.957-1.775,1.284-2.732,0.732%20l-1.732-1C1.919,10.192,1.592,8.97,2.144,8.013C2.696,7.057,3.92,6.729,4.876,7.281L6.608,8.28%20C7.565,8.833,7.893,10.057,7.34,11.013z%20M4,14.013c1.104,0,2,0.896,2,2s-0.896,2-2,2H2c-1.104,0-2-0.896-2-2s0.896-2,2-2H4z%20%20M2.876,21.28l1.732-1c0.957-0.552,2.18-0.225,2.732,0.732s0.225,2.18-0.732,2.732l-1.732,1c-0.956,0.552-2.18,0.225-2.732-0.732%20C1.592,23.057,1.919,21.833,2.876,21.28z%20M8.269,25.405c0.552-0.957,1.775-1.284,2.732-0.732c0.957,0.553,1.284,1.775,0.732,2.732%20l-1,1.732C10.18,30.094,8.957,30.422,8,29.869c-0.957-0.552-1.284-1.775-0.732-2.732L8.269,25.405z%20M16,26.013c1.104,0,2,0.896,2,2%20v2c0,1.104-0.896,2-2,2s-2-0.896-2-2v-2C14,26.908,14.896,26.013,16,26.013z%20M16,24.013c-4.418,0-8-3.582-8-8s3.582-8,8-8%20c4.418,0,8,3.582,8,8S20.419,24.013,16,24.013z%20M16,12.013c-2.209,0-4,1.791-4,4s1.791,4,4,4s4-1.791,4-4S18.209,12.013,16,12.013z%20%20M21,24.673c0.957-0.552,2.18-0.225,2.732,0.732l1,1.731c0.552,0.957,0.224,2.181-0.732,2.732c-0.957,0.553-2.18,0.225-2.732-0.731%20l-1-1.732C19.716,26.448,20.044,25.226,21,24.673z%20M24.661,21.013c0.552-0.957,1.776-1.284,2.732-0.732l1.733,1%20c0.956,0.553,1.283,1.776,0.731,2.732c-0.552,0.957-1.775,1.284-2.732,0.732l-1.732-1C24.437,23.192,24.108,21.97,24.661,21.013z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark header .meta #meta-theme a span {
  display: none;
}
/* Rendering skiplink at the top, invisible until selected */
.skiplink {
  position: absolute;
  top: -10em;
  background: var(--c-active-bg);
  color: var(--c-active-link);
  padding: 0.5em;
  display: block;
  border: 1px solid var(--c-active-border);
  border-radius: var(--c-active-radius);
  z-index: 10000;
}
.skiplink:focus {
  top: 0.5em;
  left: 0.5em;
}
/***

  Basic text styling 

***/
:root {
  font-family: 'Play', arial, helvetica, sans-serif;
}
h1 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 2.5rem;
  font-weight: normal;
  padding: 1rem 0;
  line-height: 125%;
}
.theme-dos h1 {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
h2 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 2rem;
  line-height: 125%;
  font-weight: 300;
  padding: 1.5rem 0 0.75em;
}
.theme-dos h2 {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
h3 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 125%;
  padding: 1.5rem 0 0.5rem;
}
.theme-dos h3 {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
p,
ul,
ul li {
  font-size: 1rem;
  margin: 0.5rem 0;
  line-height: 140%;
}
.themedos p,
.themedos ul,
.themedos ul li {
  font-family: monospace !important;
  font-size: 1rem !important;
}
hgroup:has(h1) {
  color: var(--c-accent-bg);
  display: block;
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 2.5rem;
  font-weight: normal;
  padding: 1rem 0;
  line-height: 125%;
}
.theme-dos hgroup:has(h1) {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
hgroup:has(h1) h1 {
  color: var(--c-active-fg);
  display: inline-block;
  margin-right: 0.25em;
}
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;
}
details summary {
  cursor: pointer;
  color: var(--c-active-link);
}
details summary:hover {
  text-decoration: underline;
}
/***

  Basic layout of tables.

***/
table {
  text-align: left;
}
table th,
table td {
  text-align: left;
  padding: 0.5em 1em;
  border: 0.1em solid var(--c-active-fg-secondary);
  overflow: hidden;
}
table thead {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 1.125rem;
  font-weight: normal;
  line-height: 125%;
  padding: 1.35rem 0 0.45rem;
  background-color: var(--c-accent-bg);
  color: var(--c-accent-fg);
}
.theme-dos table thead {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
table thead a {
  color: var(--c-accent-link);
}
table tbody,
table tfoot {
  font-size: 1rem;
  margin: 0.5rem 0;
  line-height: 140%;
}
.themedos table tbody,
.themedos table tfoot {
  font-family: monospace !important;
  font-size: 1rem !important;
}
table tbody th,
table tfoot th {
  color: var(--c-active-fg-secondary);
}
table tbody th:first-child:not(.next),
table tfoot th:first-child:not(.next) {
  font-weight: bold;
  background-color: var(--c-accent-bg);
  color: var(--c-accent-fg);
}
table tbody th:first-child:not(.next) a,
table tfoot th:first-child:not(.next) a {
  color: var(--c-accent-link);
}
table tfoot tr:first-child th,
table tfoot tr:first-child td {
  border-top: 0.2em solid var(--c-accent-bg);
}
/***

  Pictures for selling stuff. These are used to illustrate specific aspects
  of the services offered.

***/
/* A castle tower */
/* Two squares over each other */
/* Magic wand */
/* A lock */
/* Some ancient roll of text -- a script */
/* Terminal window with prompt */
/* Cylinders/storage symbol */
/* Lightning bolt */
/* Lines of stuff indicating multiple records */
/* Directional road sign */
/* Puzzle piece (filled) */
/* One gear */
/* Two nodes on a network */
/* An envelope */
/* User ID cart (photo and some lines) */
/* Sliders like an audio mixing deck */
/* A generic shield */
/* Office building */
/* A globe */
/***

The rest is legacy stuff. TODO: remove when no longer necessary.


// General mixin for inverticons.

.inverticon(@svg) {

  display: inline-block;
  .inline-svg(@svg);

  //
  .placeholder {
    display: none;
  }

//  background-size: 2em 2em;
//  background-position: center;

}

// Menu symbol (three thick lines)
.icon-menu (@color: @white) {
  .inverticon('<svg stroke-width="0.501" stroke-linejoin="bevel" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible" width="75pt" height="75pt" viewBox="0 0 75 75"><g id="Document" fill="none" stroke="black" transform="scale(1 -1)"><g id="Spread" transform="translate(0 -75)"><path d="M 4.562,58.433 L 70.437,58.433" fill="none" stroke="@{color}" stroke-width="9.41" stroke-miterlimit="79.8403193612775"/><path d="M 4.562,16.568 L 70.437,16.568" fill="none" stroke="@{color}" stroke-width="9.41" stroke-miterlimit="79.8403193612775"/><path d="M 4.562,37.5 L 70.437,37.5" fill="none" stroke="@{color}" stroke-width="9.41" stroke-miterlimit="79.8403193612775"/></g></g></svg>');
}

// Menu close symbol (x of two thick lines)
.icon-menu-close(@color: @white) {
  .inverticon('<svg stroke-width="0.501" stroke-linejoin="bevel" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible" width="75pt" height="75pt" viewBox="0 0 75 75"><g id="Document" fill="none" stroke="black" transform="scale(1 -1)"><g id="Spread" transform="translate(0 -75)"><path d="M 14.21,60.791 L 60.79,14.21" fill="none" stroke="@{color}" stroke-width="9.41" stroke-miterlimit="79.8403193612775"/><path d="M 14.209,14.21 L 60.79,60.79" fill="none" stroke="@{color}" stroke-width="9.41" stroke-miterlimit="79.8403193612775"/></g></g></svg>');
}

// Add symbol (plus sign)
.icon-add (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="fill_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M28,20.012h-8v8c0,2.209-1.791,4-4,4s-4-1.791-4-4v-8H4 c-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 C32,18.221,30.209,20.012,28,20.012z"/></svg>');
}

// Remove symbol (minus sign)
.icon-remove (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="fill_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M4,12.012h24c2.209,0,4,1.791,4,4s-1.791,4-4,4H4 c-2.209,0-4-1.791-4-4S1.791,12.012,4,12.012z"/></svg>');
}

// Trashcan
.icon-delete (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="stroke_x5F_01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M30,10l-2,18c0,2.209-1.791,4-4,4H8c-2.209,0-4-1.791-4-4L2,10 c-1.105,0-2-0.896-2-2c0-1.105,0.895-2,2-2h4h4V4c0-2.209,1.791-4,4-4h4c2.209,0,4,1.791,4,4v2h4h4c1.105,0,2,0.895,2,2 C32,9.104,31.105,10,30,10z M18,5.199V5V4.8C18,4.357,17.643,4,17.199,4h-2.398C14.357,4,14,4.357,14,4.8V5v0.199V6h0.801h2.398H18 V5.199z M25.199,10H6.801C6.357,10,6,10.357,6,10.8l2,16.399C8,27.641,8.357,28,8.801,28h14.398C23.643,28,24,27.641,24,27.199 L26,10.8C26,10.357,25.643,10,25.199,10z M20,24c-1.105,0-2-0.896-2-2v-6c0-1.104,0.895-2,2-2s2,0.896,2,2v6 C22,23.104,21.105,24,20,24z M12,24c-1.105,0-2-0.896-2-2v-6c0-1.104,0.895-2,2-2c1.104,0,2,0.896,2,2v6C14,23.104,13.104,24,12,24z"/></svg>');
}

// Edit (pen symbol on square)
.icon-edit (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="stroke_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"  y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M31.992,3.803C32,3.855,32.01,3.906,32.008,3.959 c0,0.019,0.004,0.035,0.004,0.054h-0.016c-0.02,0.173-0.084,0.342-0.217,0.475L30.486,5.78c-0.312,0.312-0.818,0.312-1.131,0 l-3.111-3.111c-0.312-0.312-0.312-0.819,0-1.132l1.293-1.292c0.133-0.133,0.303-0.197,0.475-0.217V0.013 c0.02,0,0.035,0.005,0.055,0.005c0.053-0.003,0.102,0.008,0.154,0.016C30.26,0.141,31.883,1.764,31.992,3.803z M27.779,8.487 l-7.293,7.293c-0.312,0.312-0.818,0.312-1.131,0l-3.111-3.111c-0.312-0.312-0.312-0.819,0-1.132l7.293-7.292 c0.312-0.312,0.82-0.312,1.131,0l3.111,3.11C28.092,7.668,28.092,8.175,27.779,8.487z M15.213,20.013h-1.201h-1.199h-0.801v-0.801 v-1.199v-1.2v-0.8h0.018c0.018-0.174,0.082-0.342,0.215-0.475l1.293-1.293c0.312-0.312,0.82-0.312,1.131,0l3.111,3.11 c0.312,0.312,0.312,0.819,0,1.132l-1.293,1.293c-0.133,0.134-0.301,0.198-0.475,0.215v0.018H15.213z M4.812,4.013 c-0.441,0-0.801,0.357-0.801,0.8v22.399c0,0.442,0.359,0.801,0.801,0.801h22.4c0.441,0,0.799-0.358,0.799-0.801V13.91l4-4v18.103 c0,2.209-1.791,4-4,4h-24c-2.209,0-4-1.791-4-4v-24c0-2.21,1.791-4,4-4h18.1l-4,4H4.812z"/></svg>');
}

// Undo (arrow circling back)
.icon-undo (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="stroke_x5F_04" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M16.001,32.001c-4.418,0-8.418-1.791-11.314-4.687l0.009-0.009 c-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 c2.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 c0.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 c-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 c0-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 c8.836,0,16,7.163,16,16S24.838,32.001,16.001,32.001z"/></svg>');
}

// Redundancy symbol: multiple arrows pointing up, some blocked. 
.icon-redundancy(@color) {
  .inverticon('<svg class="icon" version="1.1" id="stroke_x5F_04" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path class="foreground" fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M29.428,9.995l2.296,2.295c0.391,0.391,0.391,1.024,0,1.414 c-0.391,0.391-1.023,0.391-1.414,0l-2.296-2.295l-2.296,2.295c-0.391,0.391-1.023,0.391-1.414,0c-0.391-0.39-0.391-1.023,0-1.414 L26.6,9.995l-2.296-2.296c-0.391-0.391-0.391-1.023,0-1.414s1.023-0.391,1.414,0l2.296,2.296l2.296-2.296 c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414L29.428,9.995z M28.014,16.001c1.104,0,2,0.896,2,2s-0.896,2-2,2v4.555 c1.19,0.693,2,1.969,2,3.445c0,2.209-1.791,4-4,4s-4-1.791-4-4c0-1.477,0.81-2.752,2-3.445v-4.555c-1.104,0-2-0.896-2-2s0.896-2,2-2 H28.014z M20.48,7.981h-2.467v16.574c1.19,0.693,2,1.969,2,3.445c0,2.209-1.791,4-4,4s-4-1.791-4-4c0-1.477,0.81-2.752,2-3.445 V7.981h-2.466c-0.395,0.009-0.793-0.131-1.094-0.433c-0.586-0.585-0.586-1.533,0-2.118l4.481-4.968 c0.007-0.007,0.009-0.017,0.017-0.024C15.245,0.146,15.63,0,16.015,0.001C16.398,0,16.783,0.146,17.077,0.438 c0.008,0.009,0.012,0.021,0.02,0.029l4.479,4.963c0.584,0.585,0.584,1.533,0,2.118C21.272,7.851,20.876,7.99,20.48,7.981z M7.724,9.704c-0.391,0.391-1.023,0.391-1.414,0L4.014,7.409L1.718,9.704c-0.39,0.391-1.023,0.391-1.413,0 c-0.391-0.391-0.391-1.023,0-1.414L2.6,5.995L0.305,3.699c-0.391-0.391-0.391-1.023,0-1.414c0.39-0.391,1.023-0.391,1.413,0 l2.296,2.296L6.31,2.285c0.391-0.391,1.023-0.391,1.414,0s0.391,1.023,0,1.414L5.428,5.995L7.724,8.29 C8.114,8.681,8.114,9.313,7.724,9.704z M4.936,12.463c0.007-0.007,0.009-0.018,0.017-0.024C5.245,12.146,5.63,12,6.015,12 c0.384,0,0.769,0.146,1.062,0.438c0.008,0.009,0.012,0.021,0.02,0.029l4.479,4.962c0.584,0.586,0.584,1.534,0,2.119 c-0.303,0.302-0.699,0.441-1.095,0.433H8.014v4.574c1.19,0.693,2,1.969,2,3.445c0,2.209-1.791,4-4,4s-4-1.791-4-4 c0-1.477,0.81-2.752,2-3.445v-4.574H1.548c-0.396,0.009-0.792-0.131-1.095-0.433c-0.585-0.585-0.585-1.533,0-2.119L4.936,12.463z"></path></svg>');
}


// Wrench (tool)
.icon-wrench(@color) {
  .inverticon('<svg version="1.1" id="stroke_x5F_02" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"  y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M31.832,11.762L31.832,11.762 c-0.002,0.016-0.006,0.029-0.008,0.045c-0.02,0.104-0.039,0.206-0.062,0.31c-0.016,0.077-0.033,0.153-0.053,0.23 c-0.029,0.122-0.059,0.243-0.094,0.364c-0.033,0.123-0.068,0.244-0.107,0.365c-0.027,0.084-0.057,0.166-0.086,0.249 c-0.031,0.093-0.066,0.185-0.102,0.276c-0.029,0.075-0.057,0.151-0.088,0.226c-0.062,0.151-0.127,0.3-0.197,0.447 c-0.027,0.057-0.055,0.112-0.084,0.168c-0.053,0.108-0.107,0.217-0.166,0.323c-0.018,0.032-0.033,0.066-0.051,0.1l-0.002-0.002 c-1.705,3.072-4.98,5.154-8.744,5.154c-0.895,0-1.756-0.128-2.582-0.348L8.518,30.56c-1.953,1.952-5.119,1.952-7.072,0 c-1.951-1.953-1.951-5.118,0-7.071l10.891-10.891c-0.221-0.824-0.348-1.686-0.348-2.58c0-3.764,2.08-7.039,5.154-8.744l-0.002-0.002 c0.033-0.019,0.066-0.034,0.1-0.052c0.105-0.058,0.215-0.112,0.322-0.167c0.057-0.027,0.111-0.057,0.168-0.083 c0.146-0.069,0.297-0.134,0.447-0.196c0.074-0.031,0.15-0.061,0.227-0.089c0.092-0.035,0.184-0.069,0.275-0.102 c0.084-0.028,0.166-0.059,0.25-0.085c0.121-0.039,0.242-0.074,0.365-0.108c0.119-0.034,0.242-0.064,0.363-0.094 c0.076-0.019,0.154-0.036,0.23-0.053c0.104-0.022,0.207-0.043,0.311-0.062c0.014-0.003,0.029-0.006,0.043-0.009l0.002,0.001 c0.566-0.1,1.148-0.156,1.744-0.156c1.289,0,2.883,0.467,2.883,0.467c0.424,0.123,0.514,0.479,0.203,0.79L21.109,5.24l-0.891,0.889 c-0.312,0.312-0.312,0.818,0,1.131l4.525,4.525c0.312,0.312,0.82,0.312,1.133,0l2.988-2.989l1.865-1.864 c0.311-0.312,0.668-0.221,0.791,0.202c0,0,0.467,1.595,0.467,2.884C31.988,10.613,31.932,11.194,31.832,11.762z M14.498,17.507 c-0.391-0.391-1.023-0.391-1.414,0l-8.809,8.81c-0.391,0.391-0.391,1.023,0,1.414c0.389,0.391,1.023,0.391,1.414,0l8.809-8.809 C14.889,18.531,14.889,17.897,14.498,17.507z M22.494,13.512L18.49,9.506c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414 l4.004,4.006c0.391,0.39,1.023,0.39,1.414,0C22.885,14.535,22.885,13.901,22.494,13.512z"/></svg>');
}

// Key
.icon-key(@color) {
  .inverticon('<svg class="icon" version="1.1" id="stroke_x5F_02" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path class="foreground" fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M24,22.006l-2.008-2.008l-1.998,1.996l-2-2.002l-2.02,2.006 L14,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  M9.201,10.006h-4.4c-0.441,0-0.801,0.358-0.801,0.8v10.4c0,0.441,0.359,0.8,0.801,0.8h4.4c0.441,0,0.799-0.358,0.799-0.8v-10.4 C10,10.364,9.643,10.006,9.201,10.006z M26.801,13.006H14v3v2h2l2-2l2,2l2-2l2,2l2-2l2-2L26.801,13.006z M7.201,20.006h-0.4 c-0.441,0-0.801-0.357-0.801-0.8v-6.399c0-0.442,0.359-0.801,0.801-0.801h0.4C7.643,12.006,8,12.364,8,12.807v6.399 C8,19.648,7.643,20.006,7.201,20.006z"></path></svg>');
}

// >= 4, meant for IPv6 in combination with a 6, not an actual Inverticon
.icon-ge4(@color) {
  .inverticon('<svg stroke-width="0.501" stroke-linejoin="bevel" fill-rule="evenodd" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" overflow="visible" width="75pt" height="75pt" viewBox="0 0 75 75"><g id="Document" fill="none" stroke="@{color}" font-family="Times New Roman" font-size="16" transform="scale(1 -1)"><g id="Spread" transform="translate(0 -75)"><g id="Layer 1"><g id="Group" fill-rule="nonzero" stroke="none" stroke-width="3.331" fill="@{color}" stroke-miterlimit="79.8403193612775"><g id="Group_1"><path d="M 33.889,38.074 L 2.211,27.059 L 2.211,35.05 L 25.681,42.106 L 2.211,49.161 L 2.211,57.153 L 33.889,46.137 L 33.889,38.074 Z" marker-start="none" marker-end="none"/></g></g><g id="Group_2" fill-rule="nonzero" stroke="none" stroke-width="0.25" fill="@{color}" stroke-miterlimit="79.8403193612775"><g id="Group_3"><path d="M 33.717,25.384 L 2.367,14.444 L 2.367,22.508 L 33.717,33.448 L 33.717,25.384 Z" marker-start="none" marker-end="none"/></g></g><g id="Group_4" fill-rule="nonzero" stroke="none" stroke-width="0.25" fill="@{color}" stroke-miterlimit="79.8403193612775"><g id="Group_5"><path d="M 73.255,25.31 L 68.215,25.31 L 68.215,15.878 L 58.711,15.878 L 58.711,25.31 L 37.111,25.31 L 37.111,33.59 L 56.335,62.606 L 68.215,62.606 L 68.215,32.87 L 73.255,32.87 L 73.255,25.31 Z M 58.711,32.87 L 58.711,52.67 L 46.111,32.87 L 58.711,32.87 Z" marker-start="none" marker-end="none"/></g></g></g></g></g></svg>');
}

// Acknowledge symbol, green checkmark in circle.
.icon-ack(@color: @gentle_green){
  .icon-confirm(@color);
}

// Confirmation symbol, checkmark (defaults to white), for messages mostly.
.icon-confirm (@color: @white) {
  .inverticon('<svg version="1.1" id="stroke_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"> <path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M16,32.013c-8.836,0-16-7.164-16-16c0-8.837,7.164-16,16-16 s16,7.163,16,16C32,24.849,24.836,32.013,16,32.013z M16,4.013c-6.627,0-12,5.372-12,12c0,6.627,5.373,12,12,12s12-5.373,12-12 C28,9.385,22.627,4.013,16,4.013z M15.439,21.401c-0.008,0.009-0.012,0.021-0.02,0.03c-0.393,0.392-0.906,0.586-1.42,0.585 c-0.514,0.001-1.027-0.193-1.42-0.585c-0.008-0.009-0.012-0.021-0.02-0.03l-3.98-3.979c-0.781-0.781-0.781-2.048,0-2.828 c0.781-0.781,2.049-0.781,2.828,0L14,17.184l6.592-6.591c0.779-0.781,2.047-0.781,2.828,0s0.781,2.048,0,2.829L15.439,21.401z"/></svg>');
}

// Informational icon, for messages mostly.
.icon-info (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="stroke_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"> <path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M16,0.013c-8.836,0-16,7.163-16,16s7.164,16,16,16s16-7.163,16-16 S24.837,0.013,16,0.013z M16,28.013c-6.627,0-12-5.373-12-12s5.373-12,12-12s12,5.373,12,12S22.628,28.013,16,28.013z M16,6.013 c-1.104,0-2,0.896-2,2s0.896,2,2,2s2-0.896,2-2S17.105,6.013,16,6.013z M16,12.013c-1.104,0-2,0.896-2,2v10c0,1.104,0.896,2,2,2 s2-0.896,2-2v-10C18,12.908,17.105,12.013,16,12.013z"/></svg>');
}

// Warning triangle, for messages mostly.
.icon-warning (@color: @white) {
  .inverticon('<svg version="1.1" id="fill_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M28.136,32.014H3.862c-3.301,0-4.771-2.403-3.269-5.342 L13.269,2.213c1.502-2.938,3.961-2.938,5.463,0l12.673,24.459C32.906,29.611,31.436,32.014,28.136,32.014z M18,12.012 c0-1.104-0.896-2-2-2s-2,0.896-2,2v6c0,1.104,0.896,2,2,2s2-0.896,2-2V12.012z M16,22.012c-1.104,0-2,0.896-2,2s0.896,2,2,2 s2-0.896,2-2S17.104,22.012,16,22.012z"/></svg>');
}

// Cros in circle to signify an error, for messages mostly.
.icon-error (@color: @white) {
  .inverticon('<svg version="1.1" id="fill_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16 c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z M21.419,13.421c0.781-0.781,0.781-2.048,0-2.828 c-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 l2.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 c0.781,0.781,2.047,0.781,2.828,0s0.781-2.047,0-2.828l-2.591-2.591L21.419,13.421z"/></svg>');
}

// Looking glass icon, for searching.
.icon-lookingglass (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="stroke_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M31.178,31.161c-0.566,0.566-1.318,0.878-2.119,0.878 c-0.801,0-1.554-0.312-2.121-0.878l-5.351-5.352c-2.176,1.396-4.758,2.216-7.535,2.216c-7.725,0-13.986-6.262-13.986-13.986 S6.328,0.053,14.052,0.053s13.986,6.262,13.986,13.986c0,2.775-0.818,5.354-2.212,7.53l5.352,5.352 C32.347,28.09,32.347,29.992,31.178,31.161z M14.052,4.049c-5.518,0-9.99,4.473-9.99,9.99s4.473,9.99,9.99,9.99 s9.99-4.473,9.99-9.99S19.57,4.049,14.052,4.049z M29.764,28.335l-5.148-5.147c-0.437,0.503-0.908,0.975-1.411,1.411l5.147,5.148 c0.189,0.188,0.439,0.292,0.707,0.292c0.266,0,0.517-0.104,0.705-0.292C30.153,29.357,30.153,28.725,29.764,28.335z M13.053,8.045 c-2.759,0-4.995,2.236-4.995,4.995c0,0.552-0.447,0.999-0.999,0.999S6.06,13.592,6.06,13.04c0-3.862,3.131-6.993,6.993-6.993 c0.552,0,0.999,0.447,0.999,0.999S13.605,8.045,13.053,8.045z"/></svg>');
}

// Basket (for placing orders).
.icon-basket (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="stroke_x5F_02" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M30,13.981l-2,12c-0.4,2.209-1.791,4-4,4H8 c-2.209,0-3.615-1.791-4-4l-2-12c-1.105,0-2-0.896-2-2s0.895-2,2-2h4h9.172l7.412-7.414c0.781-0.781,2.049-0.781,2.83,0 c0.779,0.781,0.779,2.047,0,2.829l-4.586,4.585H26h4c1.104,0,2,0.896,2,2S31.104,13.981,30,13.981z M25.199,13.981h-18.4 c-0.441,0-0.799,0.406-0.799,0.8c0,0.394,2,10.4,2,10.4c0.1,0.441,0.357,0.8,0.799,0.8h14.4c0.441,0,0.713-0.364,0.801-0.8 c0,0,2-10.013,2-10.4C26,14.394,25.641,13.981,25.199,13.981z M20,23.981c-1.105,0-2-0.895-2-2v-4c0-1.104,0.895-2,2-2 c1.104,0,2,0.896,2,2v4C22,23.086,21.104,23.981,20,23.981z M12,23.981c-1.105,0-2-0.895-2-2v-4c0-1.104,0.895-2,2-2 c1.104,0,2,0.896,2,2v4C14,23.086,13.104,23.981,12,23.981z"/></svg>');
}

// Flag (used for domain name product, among others).
.icon-flag (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="stroke_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M28.644,13.264c-0.198,0.394-0.199,1.038-0.003,1.432l3.287,6.601 c0.196,0.395-0.004,0.717-0.443,0.717H16.804c-0.44,0-0.8-0.36-0.8-0.8v-2.4c0-0.44-0.36-0.8-0.8-0.8h-6.4 c-0.44,0-0.8-0.36-0.8-0.801V2.812c0-0.439,0.36-0.8,0.8-0.8h12.4c0.44,0,0.8,0.36,0.8,0.8v2.399c0,0.44,0.36,0.801,0.8,0.801h8.681 c0.439,0,0.639,0.321,0.441,0.715L28.644,13.264z M18.004,6.013h-0.8h-1.2h-3.2c-0.44,0-0.8,0.359-0.8,0.8v6.4 c0,0.439,0.36,0.8,0.8,0.8h5.19v-6.01l0.01,0.01V6.013z M24.172,13.257l1.27-2.529c0.197-0.394-0.001-0.715-0.441-0.715h-5.006 v4.754c0,0.017,0.009,0.029,0.009,0.046v1.2h-0.009v2h0.809h1.19h3.031c0.44,0,0.639-0.322,0.443-0.717l-1.299-2.607 C23.973,14.294,23.975,13.65,24.172,13.257z M6,32.013H2c-1.105,0-2-0.896-2-2s0.895-2,2-2h0.003v-26c0-1.104,0.896-2,2-2 c1.104,0,2,0.896,2,2v26C7.107,28.015,8,28.909,8,30.013C8,31.117,7.105,32.013,6,32.013z"/></svg>');
}



// Settings icon (sliders/switches) - used for features
.icon-settings (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="stroke_x5F_02" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M28,32.006H4c-2.209,0-4-1.791-4-4v-24c0-2.209,1.791-4,4-4h24 c2.209,0,4,1.791,4,4v24C32,30.215,30.209,32.006,28,32.006z M28,4.806c0-0.442-0.357-0.8-0.801-0.8H4.801 C4.357,4.005,4,4.364,4,4.806v22.399c0,0.442,0.357,0.801,0.801,0.801h22.398c0.443,0,0.801-0.358,0.801-0.801V4.806z M24,16.006v8 c0,1.104-0.895,2-2,2s-2-0.896-2-2v-8c-1.105,0-2-0.896-2-2v-2c0-1.105,0.895-2,2-2v-2c0-1.104,0.895-2,2-2s2,0.895,2,2v2 c1.105,0,2,0.896,2,2v2C26,15.11,25.105,16.006,24,16.006z M12,22.006v2c0,1.104-0.895,2-2,2s-2-0.896-2-2v-2c-1.105,0-2-0.896-2-2 v-2c0-1.105,0.895-2,2-2v-8c0-1.104,0.895-2,2-2s2,0.895,2,2v8c1.104,0,2,0.895,2,2v2C14,21.109,13.104,22.006,12,22.006z"/></svg>');
}

// Checkmark
.icon-check (@color: @gentle_green) {
  .inverticon('<svg version="1.1" id="fill_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M30.843,10.851l-15.941,15.94c-0.02,0.021-0.033,0.047-0.055,0.067 c-0.782,0.782-1.809,1.173-2.834,1.171c-1.026,0.002-2.053-0.389-2.835-1.171c-0.021-0.021-0.034-0.046-0.055-0.067l-7.941-7.94 c-1.562-1.562-1.562-4.095,0-5.657c1.562-1.562,4.095-1.562,5.657,0l5.174,5.174L25.186,5.194c1.562-1.562,4.095-1.562,5.657,0 C32.404,6.756,32.404,9.289,30.843,10.851z"/></svg>');
}












// Bookmark with star. Used for wildcards for now.
.icon-bookmarkstar (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="stroke_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M27.998,20.014v11.527c0,0.301-0.14,0.471-0.345,0.471 c-0.096,0-0.205-0.037-0.321-0.114l-10.675-7.113c-0.183-0.121-0.424-0.183-0.665-0.183s-0.483,0.062-0.666,0.184L4.663,31.897 c-0.115,0.077-0.225,0.114-0.32,0.114c-0.205,0-0.345-0.17-0.345-0.471v-13.46H4C4,11.524,4,4.933,4,4.014c0-2.209,1.791-4,4-4h16 c2.209,0,4,1.791,4,4v16H27.998z M24,4.014L24,4.014v0.799c0-0.438-0.353-0.793-0.789-0.799H8.79C8.354,4.02,8.002,4.373,8,4.81 v13.271c0,0.055,0,0.109-0.003,0.164v6.62l5.108-3.408c0.84-0.56,1.838-0.855,2.886-0.855c1.047,0.001,2.044,0.295,2.882,0.854 l5.124,3.414v-4.855c0-0.055,0.001-0.109,0.003-0.164V4.014z M21.606,11.411l-2.592,1.986l0.734,2.475 c0.018,0.083,0.037,0.165,0.061,0.246c0.384,1.293-0.092,1.831-1.07,1.353L16,15.587l-2.738,1.884 c-0.979,0.479-1.454-0.06-1.07-1.353c0.023-0.081,0.043-0.163,0.061-0.247l0.734-2.474l-2.592-1.986 c-0.765-0.786-0.402-1.408,0.949-1.442c0.164-0.004,0.33-0.024,0.496-0.055l2.298-0.059l0.821-2.321 c0.041-0.09,0.078-0.181,0.109-0.271c0.513-1.449,1.351-1.449,1.863,0C16.963,7.354,17,7.444,17.042,7.534l0.821,2.321l2.298,0.059 c0.166,0.03,0.332,0.051,0.496,0.055C22.008,10.003,22.371,10.625,21.606,11.411z"/></svg>');
}

// Info sign (filled circle with i). Used in forms.
.icon-infosign (@color: @dark_blue) {
  .inverticon('<svg version="1.1" id="fill_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M16,0.012c-8.837,0-16,7.163-16,16s7.163,16,16,16s16-7.163,16-16 S24.837,0.012,16,0.012z M18,24.012c0,1.104-0.896,2-2,2s-2-0.896-2-2v-10c0-1.104,0.896-2,2-2s2,0.896,2,2V24.012z M16,10.012 c-1.104,0-2-0.896-2-2s0.896-2,2-2s2,0.896,2,2S17.104,10.012,16,10.012z"/></svg>');
}

// Help sign (filled circle with ?). Used in forms.
.icon-helpsign (@color: @dark-blue) {
  .inverticon('<svg version="1.1" id="fill_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"  y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M16,32.012c-8.837,0-16-7.164-16-16c0-8.837,7.163-16,16-16 c8.836,0,16,7.163,16,16C32,24.848,24.836,32.012,16,32.012z M16,26.012c1.104,0,2-0.896,2-2s-0.896-2-2-2s-2,0.896-2,2 S14.896,26.012,16,26.012z M16,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 c1.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 c2.328-0.825,4-3.04,4-5.651C22,8.698,19.313,6.012,16,6.012z"/></svg>');
}


// Bag/toolbox
.icon-bag(@color) {
  .inverticon('<svg version="1.1" id="stroke_x5F_01" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M28,32H4c-2.209,0-4-1.791-4-4V10c0-2.209,1.791-4,4-4h6V4 c0-2.209,1.791-4,4-4h4c2.209,0,4,1.791,4,4v2h6c2.209,0,4,1.791,4,4v18C32,30.209,30.209,32,28,32z M18,5.2V5V4.8 C18,4.357,17.643,4,17.199,4h-2.398C14.357,4,14,4.357,14,4.8V5v0.2V6h0.801h2.398H18V5.2z M28,10.8c0-0.441-0.357-0.8-0.801-0.8 H4.801C4.357,10,4,10.358,4,10.8V18h4v-1.2C8,16.358,8.357,16,8.801,16h2.398C11.643,16,12,16.358,12,16.8V18h8v-1.2 c0-0.441,0.357-0.8,0.801-0.8h2.398C23.643,16,24,16.358,24,16.8V18h4V10.8z M28,20h-4v1.2c0,0.441-0.357,0.8-0.801,0.8h-2.398 C20.357,22,20,21.642,20,21.2V20h-8v1.2c0,0.441-0.357,0.8-0.801,0.8H8.801C8.357,22,8,21.642,8,21.2V20H4v7.2 C4,27.642,4.357,28,4.801,28h22.398C27.643,28,28,27.642,28,27.2V20z"/></svg>');
}

// Help/ring/buoy
.icon-helpbuoy(@color) {
  .inverticon('<svg version="1.1" id="stroke_x5F_03" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve"><path fill-rule="evenodd" clip-rule="evenodd" fill="@{color}" d="M28.629,6.213C30.735,8.922,32,12.316,32,16.013 c0,3.697-1.266,7.091-3.371,9.801l2.787,2.787c0.781,0.78,0.781,2.047,0,2.828s-2.047,0.781-2.828,0l-2.787-2.787 c-2.71,2.105-6.104,3.371-9.801,3.371s-7.091-1.266-9.8-3.371l-2.788,2.787c-0.78,0.781-2.047,0.781-2.828,0s-0.781-2.048,0-2.828 l2.787-2.788C1.266,23.104,0,19.71,0,16.013c0-3.696,1.266-7.091,3.371-9.8L0.584,3.426c-0.781-0.781-0.781-2.048,0-2.829 s2.048-0.781,2.828,0l2.788,2.787C8.91,1.278,12.303,0.013,16,0.013s7.092,1.266,9.801,3.371l2.787-2.787 c0.781-0.781,2.047-0.781,2.828,0s0.781,2.048,0,2.829L28.629,6.213z M20.059,27.294c3.355-1.209,6.002-3.874,7.213-7.226 l-3.883-1.041c-0.812,1.985-2.383,3.58-4.369,4.392L20.059,27.294z M16,28.012c0.727,0,1.436-0.075,2.127-0.199l-1.041-3.882 c-0.355,0.048-0.717,0.082-1.086,0.082s-0.73-0.034-1.086-0.082l-1.041,3.882C14.565,27.937,15.274,28.012,16,28.012z M11.943,27.294l1.038-3.875c-1.986-0.812-3.556-2.406-4.369-4.392l-3.883,1.041C5.94,23.42,8.586,26.085,11.943,27.294z M4,16.013 c0,0.728,0.08,1.434,0.205,2.125l3.878-1.039C8.036,16.743,8,16.382,8,16.013s0.035-0.73,0.083-1.086l-3.878-1.039 C4.081,14.579,4,15.285,4,16.013z M11.943,4.732C8.586,5.94,5.94,8.605,4.729,11.958l3.883,1.04c0.813-1.985,2.383-3.58,4.369-4.391 L11.943,4.732z M16,4.014c-0.727,0-1.436,0.075-2.127,0.199l1.041,3.882C15.27,8.047,15.631,8.013,16,8.013s0.73,0.034,1.086,0.082 l1.041-3.882C17.436,4.089,16.727,4.014,16,4.014z M16,12.013c-2.209,0-4,1.791-4,4s1.791,4,4,4s4-1.791,4-4 S18.209,12.013,16,12.013z M20.059,4.732L19.02,8.607c1.986,0.811,3.557,2.405,4.369,4.391l3.883-1.04 C26.061,8.605,23.415,5.94,20.059,4.732z M27.796,13.888l-3.879,1.039C23.965,15.282,24,15.644,24,16.013s-0.035,0.73-0.083,1.086 l3.879,1.039C27.92,17.446,28,16.74,28,16.013S27.92,14.579,27.796,13.888z"/></svg>');
}

***/
/* Service feature overview */
/* Should not be a CSS veriable */
main .features {
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
  box-shadow: 0 0 0.125em 0.03125em var(--c-shadow);
}
main .features a {
  color: var(--c-accentdim-link);
}
main .features .features-main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
main .features .features-main section {
  padding: 5em 0 0;
  text-align: center;
  background-size: 3em 3em !important;
  background-position: center 2em;
}
main .features .features-main section h2 {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 125%;
  padding: 1.5rem 0 0.5rem;
  color: var(--color-active-fg-secondary);
}
.theme-dos main .features .features-main section h2 {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
main .features .features-detail {
  padding: 2em 0;
  text-align: center;
}
main .features .features-detail summary {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 125%;
  padding: 1.5rem 0 0.5rem;
  color: var(--c-active-fg-secondary);
}
.theme-dos main .features .features-detail summary {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
main .features .features-detail table {
  margin: 2em auto 0 auto;
}
main .features .magic {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M30.716,8.51c0.094,0.135,0.182,0.246,0.27,0.338%20c1.12,1.178,1.084,2.067,0.857,2.605c-0.168,0.399-0.649,1.07-1.986,1.089c-0.049,0.001-0.098-0.003-0.146-0.009l-3.122-0.413%20l-1.117,2.06c-0.013,0.025-0.027,0.049-0.042,0.071c-0.049,0.075-0.084,0.134-0.112,0.185c-0.524,0.967-1.146,1.508-1.851,1.61%20c-0.513,0.074-1.009-0.097-1.395-0.483c-0.256-0.257-0.462-0.607-0.613-1.045c-0.016-0.047-0.029-0.095-0.038-0.145l-0.584-3.164%20l-3.164-0.584c-0.049-0.01-0.098-0.021-0.145-0.038c-0.436-0.149-0.787-0.356-1.043-0.612c0,0,0,0,0,0%20c-0.387-0.387-0.558-0.883-0.484-1.395c0.103-0.705,0.644-1.328,1.61-1.852c0.052-0.027,0.111-0.063,0.186-0.113%20c0.023-0.014,0.046-0.027,0.07-0.041l2.06-1.117l-0.413-3.121c-0.006-0.049-0.009-0.097-0.009-0.146%20c0.018-1.336,0.69-1.817,1.088-1.985c0.539-0.228,1.428-0.263,2.606,0.857c0.092,0.087,0.203,0.175,0.338,0.27%20c0.042,0.029,0.082,0.062,0.12,0.097l1.458,1.387l1.988-0.951c0.028-0.014,0.057-0.025,0.087-0.036%20c0.081-0.03,0.158-0.062,0.231-0.097c1.625-0.777,2.469-0.291,2.828,0.066C30.608,2.156,31.094,3,30.317,4.625%20c-0.035,0.073-0.067,0.15-0.097,0.231c-0.011,0.029-0.023,0.058-0.037,0.087l-0.95,1.988l1.385,1.458%20C30.654,8.427,30.687,8.467,30.716,8.51z%20M29.523,10.237l-0.418-0.512l-1.812-1.907c-0.288-0.303-0.359-0.753-0.179-1.13%20c0,0,1.036-2.366,1.422-3.163c-0.873,0.417-3.177,1.408-3.177,1.408c-0.377,0.18-0.827,0.109-1.13-0.179c0,0-2.19-1.94-2.68-2.417%20l0.469,3.543c0.055,0.415-0.152,0.82-0.519,1.02c0,0-2.443,1.423-3.158,1.796l3.545,0.655c0.411,0.076,0.733,0.397,0.809,0.809%20l0.65,3.521c0.44-0.824,1.8-3.133,1.8-3.133c0.199-0.368,0.605-0.574,1.02-0.52l3.587,0.475%20C29.695,10.428,29.523,10.237,29.523,10.237z%20M19.102,12.928c1.172,1.172,1.172,3.072,0,4.243L5.091,31.182%20c-1.171,1.172-3.071,1.172-4.243,0c-1.171-1.172-1.171-3.07,0-4.242l14.011-14.012C16.031,11.757,17.931,11.757,19.102,12.928z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .magic span {
  display: none;
}
.theme-dark main .features .magic {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M30.716,8.51c0.094,0.135,0.182,0.246,0.27,0.338%20c1.12,1.178,1.084,2.067,0.857,2.605c-0.168,0.399-0.649,1.07-1.986,1.089c-0.049,0.001-0.098-0.003-0.146-0.009l-3.122-0.413%20l-1.117,2.06c-0.013,0.025-0.027,0.049-0.042,0.071c-0.049,0.075-0.084,0.134-0.112,0.185c-0.524,0.967-1.146,1.508-1.851,1.61%20c-0.513,0.074-1.009-0.097-1.395-0.483c-0.256-0.257-0.462-0.607-0.613-1.045c-0.016-0.047-0.029-0.095-0.038-0.145l-0.584-3.164%20l-3.164-0.584c-0.049-0.01-0.098-0.021-0.145-0.038c-0.436-0.149-0.787-0.356-1.043-0.612c0,0,0,0,0,0%20c-0.387-0.387-0.558-0.883-0.484-1.395c0.103-0.705,0.644-1.328,1.61-1.852c0.052-0.027,0.111-0.063,0.186-0.113%20c0.023-0.014,0.046-0.027,0.07-0.041l2.06-1.117l-0.413-3.121c-0.006-0.049-0.009-0.097-0.009-0.146%20c0.018-1.336,0.69-1.817,1.088-1.985c0.539-0.228,1.428-0.263,2.606,0.857c0.092,0.087,0.203,0.175,0.338,0.27%20c0.042,0.029,0.082,0.062,0.12,0.097l1.458,1.387l1.988-0.951c0.028-0.014,0.057-0.025,0.087-0.036%20c0.081-0.03,0.158-0.062,0.231-0.097c1.625-0.777,2.469-0.291,2.828,0.066C30.608,2.156,31.094,3,30.317,4.625%20c-0.035,0.073-0.067,0.15-0.097,0.231c-0.011,0.029-0.023,0.058-0.037,0.087l-0.95,1.988l1.385,1.458%20C30.654,8.427,30.687,8.467,30.716,8.51z%20M29.523,10.237l-0.418-0.512l-1.812-1.907c-0.288-0.303-0.359-0.753-0.179-1.13%20c0,0,1.036-2.366,1.422-3.163c-0.873,0.417-3.177,1.408-3.177,1.408c-0.377,0.18-0.827,0.109-1.13-0.179c0,0-2.19-1.94-2.68-2.417%20l0.469,3.543c0.055,0.415-0.152,0.82-0.519,1.02c0,0-2.443,1.423-3.158,1.796l3.545,0.655c0.411,0.076,0.733,0.397,0.809,0.809%20l0.65,3.521c0.44-0.824,1.8-3.133,1.8-3.133c0.199-0.368,0.605-0.574,1.02-0.52l3.587,0.475%20C29.695,10.428,29.523,10.237,29.523,10.237z%20M19.102,12.928c1.172,1.172,1.172,3.072,0,4.243L5.091,31.182%20c-1.171,1.172-3.071,1.172-4.243,0c-1.171-1.172-1.171-3.07,0-4.242l14.011-14.012C16.031,11.757,17.931,11.757,19.102,12.928z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .magic span {
  display: none;
}
main .features .multiple {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M28,20h-6v-4h5.199C27.643,16,28,15.642,28,15.199V4.8%20C28,4.357,27.643,4,27.199,4H16.801C16.357,4,16,4.357,16,4.8V10h-4V4c0-2.209,1.791-4,4-4h12c2.209,0,4,1.791,4,4v12%20C32,18.209,30.209,20,28,20z%20M20,16v12c0,2.209-1.791,4-4,4H4c-2.209,0-4-1.791-4-4V16c0-2.209,1.791-4,4-4h12%20C18.209,12,20,13.791,20,16z%20M15.199,16H4.801C4.357,16,4,16.357,4,16.8v10.399C4,27.642,4.357,28,4.801,28h10.398%20C15.643,28,16,27.642,16,27.199V16.8C16,16.357,15.643,16,15.199,16z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .multiple span {
  display: none;
}
.theme-dark main .features .multiple {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M28,20h-6v-4h5.199C27.643,16,28,15.642,28,15.199V4.8%20C28,4.357,27.643,4,27.199,4H16.801C16.357,4,16,4.357,16,4.8V10h-4V4c0-2.209,1.791-4,4-4h12c2.209,0,4,1.791,4,4v12%20C32,18.209,30.209,20,28,20z%20M20,16v12c0,2.209-1.791,4-4,4H4c-2.209,0-4-1.791-4-4V16c0-2.209,1.791-4,4-4h12%20C18.209,12,20,13.791,20,16z%20M15.199,16H4.801C4.357,16,4,16.357,4,16.8v10.399C4,27.642,4.357,28,4.801,28h10.398%20C15.643,28,16,27.642,16,27.199V16.8C16,16.357,15.643,16,15.199,16z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .multiple span {
  display: none;
}
main .features .lock {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M28,32.006H4c-2.209,0-4-1.791-4-4v-12c0-2.209,1.791-4,4-4h2v-4%20c0-4.419,3.582-8,8-8h4c4.418,0,8,3.581,8,8v4h2c2.209,0,4,1.791,4,4v12C32,30.215,30.209,32.006,28,32.006z%20M22,8.006%20c0-2.21-1.791-4-4-4h-4c-2.209,0-4,1.79-4,4v4h4h4h4V8.006z%20M28,16.806c0-0.442-0.358-0.8-0.8-0.8H4.8c-0.442,0-0.8,0.357-0.8,0.8%20v10.399c0,0.442,0.358,0.801,0.8,0.801h22.4c0.442,0,0.8-0.358,0.8-0.801V16.806z%20M16,26.006c-2.209,0-4-1.791-4-4%20c0-2.21,1.791-4,4-4c2.209,0,4,1.79,4,4C20,24.215,18.209,26.006,16,26.006z%20M16,20.006c-1.105,0-2,0.895-2,2c0,1.104,0.895,2,2,2%20c1.104,0,2-0.896,2-2C18,20.9,17.105,20.006,16,20.006z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .lock span {
  display: none;
}
.theme-dark main .features .lock {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M28,32.006H4c-2.209,0-4-1.791-4-4v-12c0-2.209,1.791-4,4-4h2v-4%20c0-4.419,3.582-8,8-8h4c4.418,0,8,3.581,8,8v4h2c2.209,0,4,1.791,4,4v12C32,30.215,30.209,32.006,28,32.006z%20M22,8.006%20c0-2.21-1.791-4-4-4h-4c-2.209,0-4,1.79-4,4v4h4h4h4V8.006z%20M28,16.806c0-0.442-0.358-0.8-0.8-0.8H4.8c-0.442,0-0.8,0.357-0.8,0.8%20v10.399c0,0.442,0.358,0.801,0.8,0.801h22.4c0.442,0,0.8-0.358,0.8-0.801V16.806z%20M16,26.006c-2.209,0-4-1.791-4-4%20c0-2.21,1.791-4,4-4c2.209,0,4,1.79,4,4C20,24.215,18.209,26.006,16,26.006z%20M16,20.006c-1.105,0-2,0.895-2,2c0,1.104,0.895,2,2,2%20c1.104,0,2-0.896,2-2C18,20.9,17.105,20.006,16,20.006z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .lock span {
  display: none;
}
main .features .script {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M28,12h-2v16c0,2.209-1.791,4-4,4h-2h-2h-4h-2H4%20c-2.209,0-4-1.791-4-4v-4c0-2.209,1.791-4,4-4V4c0-2.209,1.791-4,4-4h14h6c2.209,0,4,1.791,4,4v4C32,10.209,30.209,12,28,12z%20%20M4.801,24C4.359,24,4,24.358,4,24.8v2.4C4,27.643,4.359,28,4.801,28H12h1.201h1.6C14.359,28,14,27.643,14,27.2V26v-1.2%20c0-0.441-0.357-0.8-0.799-0.8H4.801z%20M20,4L20,4H8.801C8.359,4,8,4.358,8,4.8V20h6c2.209,0,4,1.791,4,4v0.8V26c0,1.105,0.896,2,2,2%20c1.105,0,2-0.895,2-2V12V5.2V5V4.8C22,4.358,22.359,4,22.801,4H20z%20M28,5c0-0.553-0.447-1-1-1s-1,0.447-1,1v1v1v1h1%20c0.553,0,1-0.447,1-1V5z%20M18,18h-6c-1.104,0-2-0.896-2-2s0.896-2,2-2h6c1.105,0,2,0.896,2,2S19.105,18,18,18z%20M18,10h-6%20c-1.104,0-2-0.896-2-2s0.896-2,2-2h6c1.105,0,2,0.896,2,2S19.105,10,18,10z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .script span {
  display: none;
}
.theme-dark main .features .script {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M28,12h-2v16c0,2.209-1.791,4-4,4h-2h-2h-4h-2H4%20c-2.209,0-4-1.791-4-4v-4c0-2.209,1.791-4,4-4V4c0-2.209,1.791-4,4-4h14h6c2.209,0,4,1.791,4,4v4C32,10.209,30.209,12,28,12z%20%20M4.801,24C4.359,24,4,24.358,4,24.8v2.4C4,27.643,4.359,28,4.801,28H12h1.201h1.6C14.359,28,14,27.643,14,27.2V26v-1.2%20c0-0.441-0.357-0.8-0.799-0.8H4.801z%20M20,4L20,4H8.801C8.359,4,8,4.358,8,4.8V20h6c2.209,0,4,1.791,4,4v0.8V26c0,1.105,0.896,2,2,2%20c1.105,0,2-0.895,2-2V12V5.2V5V4.8C22,4.358,22.359,4,22.801,4H20z%20M28,5c0-0.553-0.447-1-1-1s-1,0.447-1,1v1v1v1h1%20c0.553,0,1-0.447,1-1V5z%20M18,18h-6c-1.104,0-2-0.896-2-2s0.896-2,2-2h6c1.105,0,2,0.896,2,2S19.105,18,18,18z%20M18,10h-6%20c-1.104,0-2-0.896-2-2s0.896-2,2-2h6c1.105,0,2,0.896,2,2S19.105,10,18,10z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .script span {
  display: none;
}
main .features .terminal {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M28,32H4c-2.209,0-4-1.791-4-4V4c0-2.209,1.791-4,4-4h24%20c2.209,0,4,1.791,4,4v24C32,30.209,30.209,32,28,32z%20M8,4.8C8,4.357,7.643,4,7.199,4H4.801C4.357,4,4,4.357,4,4.8v2.399%20C4,7.642,4.357,8,4.801,8h2.398C7.643,8,8,7.642,8,7.199V4.8z%20M28,4.8C28,4.357,27.643,4,27.199,4H12.801C12.357,4,12,4.357,12,4.8%20v2.399C12,7.642,12.357,8,12.801,8h14.398C27.643,8,28,7.642,28,7.199V4.8z%20M28,12.8c0-0.442-0.357-0.8-0.801-0.8H4.801%20C4.357,12,4,12.357,4,12.8v14.399C4,27.642,4.357,28,4.801,28h22.398C27.643,28,28,27.642,28,27.199V12.8z%20M19.199,24h-4.398%20C14.357,24,14,23.642,14,23.199v-0.4C14,22.357,14.357,22,14.801,22h4.398C19.643,22,20,22.357,20,22.799v0.4%20C20,23.642,19.643,24,19.199,24z%20M10.104,23.708c-0.391,0.391-1.023,0.391-1.414,0c-0.389-0.39-0.389-1.022,0-1.413l2.295-2.297%20l-2.295-2.297c-0.389-0.39-0.389-1.022,0-1.412c0.391-0.391,1.023-0.391,1.414,0l2.996,3c0.197,0.195,0.293,0.453,0.293,0.709%20c0,0.258-0.096,0.514-0.293,0.71L10.104,23.708z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .terminal span {
  display: none;
}
.theme-dark main .features .terminal {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M28,32H4c-2.209,0-4-1.791-4-4V4c0-2.209,1.791-4,4-4h24%20c2.209,0,4,1.791,4,4v24C32,30.209,30.209,32,28,32z%20M8,4.8C8,4.357,7.643,4,7.199,4H4.801C4.357,4,4,4.357,4,4.8v2.399%20C4,7.642,4.357,8,4.801,8h2.398C7.643,8,8,7.642,8,7.199V4.8z%20M28,4.8C28,4.357,27.643,4,27.199,4H12.801C12.357,4,12,4.357,12,4.8%20v2.399C12,7.642,12.357,8,12.801,8h14.398C27.643,8,28,7.642,28,7.199V4.8z%20M28,12.8c0-0.442-0.357-0.8-0.801-0.8H4.801%20C4.357,12,4,12.357,4,12.8v14.399C4,27.642,4.357,28,4.801,28h22.398C27.643,28,28,27.642,28,27.199V12.8z%20M19.199,24h-4.398%20C14.357,24,14,23.642,14,23.199v-0.4C14,22.357,14.357,22,14.801,22h4.398C19.643,22,20,22.357,20,22.799v0.4%20C20,23.642,19.643,24,19.199,24z%20M10.104,23.708c-0.391,0.391-1.023,0.391-1.414,0c-0.389-0.39-0.389-1.022,0-1.413l2.295-2.297%20l-2.295-2.297c-0.389-0.39-0.389-1.022,0-1.412c0.391-0.391,1.023-0.391,1.414,0l2.996,3c0.197,0.195,0.293,0.453,0.293,0.709%20c0,0.258-0.096,0.514-0.293,0.71L10.104,23.708z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .terminal span {
  display: none;
}
main .features .storage {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M29.99,16.018v8c0,0.058-0.002,0.114-0.008,0.17%20c-0.125,4.764-5.592,7.83-13.998,7.83c-8.504,0-14-3.14-14-8c0-0.055,0.002-0.108,0.004-0.162v-3.844H1.986v-5.89%20c0-0.035-0.002-0.069-0.002-0.104c0-0.032,0.002-0.063,0.002-0.095v-1.911h0.002V6.159C1.986,6.11,1.98,6.062,1.98,6.012%20c0-4.145,7.033-6,14.002-6c6.803,0,13.664,1.77,13.984,5.711c0.014,0.096,0.023,0.194,0.023,0.294v8%20c0,0.023-0.002,0.046-0.002,0.069v1.871C29.988,15.978,29.99,15.997,29.99,16.018z%20M15.982,4.012c-5.529,0-8.881,1.261-9.82,2%20c0.939,0.74,4.291,2,9.82,2c5.527,0,8.879-1.26,9.818-2C24.861,5.273,21.51,4.012,15.982,4.012z%20M25.99,9.94%20c-2.428,1.329-5.859,2.075-10.006,2.075c-4.133,0-7.564-0.749-9.994-2.08v3.974c0,0.018-0.002,0.035-0.002,0.053%20c0,0.031-0.002,0.061-0.004,0.091c0.045,2.263,4.328,3.965,10,3.965c5.701,0,10.002-1.72,10.002-4c0-0.048,0-0.095,0.004-0.141V9.94%20z%20M25.99,19.941c-2.428,1.329-5.859,2.075-10.006,2.075c-4.133,0-7.564-0.749-9.994-2.08v3.974c0,0.018-0.002,0.035-0.002,0.053%20c0,0.031-0.002,0.061-0.004,0.091c0.045,2.263,4.328,3.965,10,3.965c5.701,0,10.002-1.72,10.002-4c0-0.047,0-0.094,0.004-0.141%20V19.941z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .storage span {
  display: none;
}
.theme-dark main .features .storage {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M29.99,16.018v8c0,0.058-0.002,0.114-0.008,0.17%20c-0.125,4.764-5.592,7.83-13.998,7.83c-8.504,0-14-3.14-14-8c0-0.055,0.002-0.108,0.004-0.162v-3.844H1.986v-5.89%20c0-0.035-0.002-0.069-0.002-0.104c0-0.032,0.002-0.063,0.002-0.095v-1.911h0.002V6.159C1.986,6.11,1.98,6.062,1.98,6.012%20c0-4.145,7.033-6,14.002-6c6.803,0,13.664,1.77,13.984,5.711c0.014,0.096,0.023,0.194,0.023,0.294v8%20c0,0.023-0.002,0.046-0.002,0.069v1.871C29.988,15.978,29.99,15.997,29.99,16.018z%20M15.982,4.012c-5.529,0-8.881,1.261-9.82,2%20c0.939,0.74,4.291,2,9.82,2c5.527,0,8.879-1.26,9.818-2C24.861,5.273,21.51,4.012,15.982,4.012z%20M25.99,9.94%20c-2.428,1.329-5.859,2.075-10.006,2.075c-4.133,0-7.564-0.749-9.994-2.08v3.974c0,0.018-0.002,0.035-0.002,0.053%20c0,0.031-0.002,0.061-0.004,0.091c0.045,2.263,4.328,3.965,10,3.965c5.701,0,10.002-1.72,10.002-4c0-0.048,0-0.095,0.004-0.141V9.94%20z%20M25.99,19.941c-2.428,1.329-5.859,2.075-10.006,2.075c-4.133,0-7.564-0.749-9.994-2.08v3.974c0,0.018-0.002,0.035-0.002,0.053%20c0,0.031-0.002,0.061-0.004,0.091c0.045,2.263,4.328,3.965,10,3.965c5.701,0,10.002-1.72,10.002-4c0-0.047,0-0.094,0.004-0.141%20V19.941z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .storage span {
  display: none;
}
main .features .lightning {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M27.354,14.762L16.812,30.529%20c-0.008,0.012-0.016,0.023-0.023,0.035C15.957,31.751,15.045,32,14.426,32c-0.9,0-2.422-0.62-2.422-2.944v-7.011%20c-0.002-0.016-0.002-0.032-0.002-0.048v0h-4.85c-1.295,0-2.334-0.568-2.85-1.558c-0.512-0.984-0.387-2.152,0.344-3.208L15.193,1.47%20c0.008-0.012,0.016-0.023,0.025-0.034c0.83-1.187,1.742-1.437,2.361-1.437c0.9,0,2.424,0.621,2.424,2.944v5.053%20c0,0.028-0.002,0.057-0.002,0.084v1.916h4.846c1.295,0,2.334,0.568,2.85,1.558C28.209,12.538,28.084,13.706,27.354,14.762z%20%20M19.232,13.997c-0.012,0-0.021,0.003-0.033,0.003h-2.398C16.357,14,16,13.642,16,13.2v-2.4c0-0.005,0.002-0.01,0.002-0.015V7.997%20c0-0.028,0-0.057,0.002-0.084V7.453L8.947,17.997H14V18h1.199C15.643,18,16,18.358,16,18.8V20h0.002v1.914%20c0,0.027,0.002,0.056,0.002,0.083v2.546l7.049-10.546H19.232z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .lightning span {
  display: none;
}
.theme-dark main .features .lightning {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M27.354,14.762L16.812,30.529%20c-0.008,0.012-0.016,0.023-0.023,0.035C15.957,31.751,15.045,32,14.426,32c-0.9,0-2.422-0.62-2.422-2.944v-7.011%20c-0.002-0.016-0.002-0.032-0.002-0.048v0h-4.85c-1.295,0-2.334-0.568-2.85-1.558c-0.512-0.984-0.387-2.152,0.344-3.208L15.193,1.47%20c0.008-0.012,0.016-0.023,0.025-0.034c0.83-1.187,1.742-1.437,2.361-1.437c0.9,0,2.424,0.621,2.424,2.944v5.053%20c0,0.028-0.002,0.057-0.002,0.084v1.916h4.846c1.295,0,2.334,0.568,2.85,1.558C28.209,12.538,28.084,13.706,27.354,14.762z%20%20M19.232,13.997c-0.012,0-0.021,0.003-0.033,0.003h-2.398C16.357,14,16,13.642,16,13.2v-2.4c0-0.005,0.002-0.01,0.002-0.015V7.997%20c0-0.028,0-0.057,0.002-0.084V7.453L8.947,17.997H14V18h1.199C15.643,18,16,18.358,16,18.8V20h0.002v1.914%20c0,0.027,0.002,0.056,0.002,0.083v2.546l7.049-10.546H19.232z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .lightning span {
  display: none;
}
main .features .records {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M30,32H14c-1.104,0-2-0.896-2-2v-4c0-1.104,0.896-2,2-2h16%20c1.104,0,2,0.896,2,2v4C32,31.104,31.105,32,30,32z%20M30,20.001H14c-1.104,0-2-0.896-2-2.001v-4c0-1.104,0.896-2,2-2h16%20c1.104,0,2,0.896,2,2v4C32,19.105,31.105,20.001,30,20.001z%20M30,8H14c-1.104,0-2-0.895-2-2V2c0-1.104,0.896-2,2-2h16%20c1.104,0,2,0.896,2,2v4C32,7.105,31.105,8,30,8z%20M6,32H2c-1.104,0-2-0.896-2-2v-4c0-1.104,0.896-2,2-2h4c1.104,0,2,0.896,2,2v4%20C8,31.104,7.105,32,6,32z%20M6,20.001H2c-1.104,0-2-0.896-2-2.001v-4c0-1.104,0.896-2,2-2h4c1.104,0,2,0.896,2,2v4%20C8,19.105,7.105,20.001,6,20.001z%20M6,8H2C0.896,8,0,7.105,0,6V2c0-1.104,0.896-2,2-2h4c1.104,0,2,0.896,2,2v4C8,7.105,7.105,8,6,8z%22%20/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .records span {
  display: none;
}
.theme-dark main .features .records {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M30,32H14c-1.104,0-2-0.896-2-2v-4c0-1.104,0.896-2,2-2h16%20c1.104,0,2,0.896,2,2v4C32,31.104,31.105,32,30,32z%20M30,20.001H14c-1.104,0-2-0.896-2-2.001v-4c0-1.104,0.896-2,2-2h16%20c1.104,0,2,0.896,2,2v4C32,19.105,31.105,20.001,30,20.001z%20M30,8H14c-1.104,0-2-0.895-2-2V2c0-1.104,0.896-2,2-2h16%20c1.104,0,2,0.896,2,2v4C32,7.105,31.105,8,30,8z%20M6,32H2c-1.104,0-2-0.896-2-2v-4c0-1.104,0.896-2,2-2h4c1.104,0,2,0.896,2,2v4%20C8,31.104,7.105,32,6,32z%20M6,20.001H2c-1.104,0-2-0.896-2-2.001v-4c0-1.104,0.896-2,2-2h4c1.104,0,2,0.896,2,2v4%20C8,19.105,7.105,20.001,6,20.001z%20M6,8H2C0.896,8,0,7.105,0,6V2c0-1.104,0.896-2,2-2h4c1.104,0,2,0.896,2,2v4C8,7.105,7.105,8,6,8z%22%20/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .records span {
  display: none;
}
main .features .roadsign {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M31.41,12.415c0,0-2.742,2.816-4.416,4.417C26,17.782,25,18,25,18%20h-9v10h2c1.105,0,2,0.896,2,2s-0.895,2-2,2h-8c-1.104,0-2-0.896-2-2s0.896-2,2-2h2V18H2c-1.104,0-2-0.896-2-2V6c0-1.104,0.896-2,2-2%20h10V2c0-1.104,0.896-2,2-2c1.105,0,2,0.896,2,2v2h9c0,0,1,0.236,1.99,1.166c1.689,1.585,4.42,4.42,4.42,4.42%20C32.191,10.367,32.191,11.633,31.41,12.415z%20M26.631,10.427l-1.902-1.872c-0.312-0.309-0.93-0.562-1.369-0.562h-6.557%20c-0.439,0-1.16,0-1.6,0h-2.4c-0.439,0-1.16,0-1.6,0h-6.4c-0.439,0-0.801,0.36-0.801,0.8v4.399c0,0.44,0.361,0.8,0.801,0.8h6.4%20c0.439,0,1.16,0,1.6,0h2.4c0.439,0,1.16,0,1.6,0h6.562c0.439,0,1.055-0.253,1.367-0.563l1.9-1.879%20C26.945,11.242,26.943,10.735,26.631,10.427z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .roadsign span {
  display: none;
}
.theme-dark main .features .roadsign {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M31.41,12.415c0,0-2.742,2.816-4.416,4.417C26,17.782,25,18,25,18%20h-9v10h2c1.105,0,2,0.896,2,2s-0.895,2-2,2h-8c-1.104,0-2-0.896-2-2s0.896-2,2-2h2V18H2c-1.104,0-2-0.896-2-2V6c0-1.104,0.896-2,2-2%20h10V2c0-1.104,0.896-2,2-2c1.105,0,2,0.896,2,2v2h9c0,0,1,0.236,1.99,1.166c1.689,1.585,4.42,4.42,4.42,4.42%20C32.191,10.367,32.191,11.633,31.41,12.415z%20M26.631,10.427l-1.902-1.872c-0.312-0.309-0.93-0.562-1.369-0.562h-6.557%20c-0.439,0-1.16,0-1.6,0h-2.4c-0.439,0-1.16,0-1.6,0h-6.4c-0.439,0-0.801,0.36-0.801,0.8v4.399c0,0.44,0.361,0.8,0.801,0.8h6.4%20c0.439,0,1.16,0,1.6,0h2.4c0.439,0,1.16,0,1.6,0h6.562c0.439,0,1.055-0.253,1.367-0.563l1.9-1.879%20C26.945,11.242,26.943,10.735,26.631,10.427z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .roadsign span {
  display: none;
}
main .features .puzzle {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M27.001,24.001h-1v4c0,2.209-1.791,4-4,4h-4v-1%20c0-2.762-2.238-5-5-5s-5,2.238-5,5v1h-4c-2.209,0-4-1.791-4-4v-4h1c2.762,0,5-2.238,5-5s-2.238-5-5-5h-1v-4c0-2.209,1.791-4,4-4h4%20v-1c0-2.762,2.238-5,5-5s5,2.238,5,5v1h4c2.209,0,4,1.791,4,4v4h1c2.762,0,5,2.238,5,5S29.763,24.001,27.001,24.001z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
main .features .puzzle span {
  display: none;
}
.theme-dark main .features .puzzle {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M27.001,24.001h-1v4c0,2.209-1.791,4-4,4h-4v-1%20c0-2.762-2.238-5-5-5s-5,2.238-5,5v1h-4c-2.209,0-4-1.791-4-4v-4h1c2.762,0,5-2.238,5-5s-2.238-5-5-5h-1v-4c0-2.209,1.791-4,4-4h4%20v-1c0-2.762,2.238-5,5-5s5,2.238,5,5v1h4c2.209,0,4,1.791,4,4v4h1c2.762,0,5,2.238,5,5S29.763,24.001,27.001,24.001z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .puzzle span {
  display: none;
}
main .features .gear {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%3D%22%23003673%22%20d%3D%22M17.402,32.008h-2.801c-1.594,0-2.234-1.295-2.445-1.721l-0.039-0.077c-0.035-0.071-0.068-0.144-0.094-0.219%20l-0.848-2.331l-2.248,1.049c-0.074,0.035-0.15,0.064-0.229,0.09l-0.086,0.029c-0.264,0.088-0.664,0.223-1.15,0.223%20c-0.674,0-1.307-0.263-1.783-0.739l-1.98-1.98c-1.127-1.128-0.666-2.497-0.514-2.946l0.027-0.082%20c0.023-0.075,0.053-0.149,0.088-0.222l1.049-2.247l-2.33-0.847c-0.078-0.028-0.154-0.062-0.227-0.099l-0.082-0.041%20c-0.422-0.211-1.709-0.852-1.709-2.44v-2.8c0-1.594,1.295-2.235,1.721-2.446l0.076-0.038c0.072-0.036,0.145-0.068,0.219-0.095%20l2.332-0.847L3.301,8.934c-0.035-0.074-0.064-0.15-0.09-0.229L3.182,8.618C3.031,8.17,2.576,6.807,3.697,5.684l1.98-1.98%20c0.477-0.477,1.111-0.739,1.787-0.739c0.49,0,0.893,0.136,1.16,0.226l0.08,0.027c0.076,0.025,0.15,0.054,0.223,0.088l2.248,1.049%20l0.848-2.331c0.025-0.075,0.059-0.148,0.094-0.219l0.039-0.077c0.211-0.425,0.852-1.72,2.445-1.72h2.801%20c1.588,0,2.229,1.287,2.439,1.709l0.041,0.082c0.037,0.073,0.07,0.149,0.1,0.226l0.846,2.331l2.248-1.049%20c0.072-0.034,0.146-0.063,0.223-0.088l0.08-0.027c0.268-0.09,0.67-0.226,1.16-0.226c0.676,0,1.311,0.262,1.787,0.739l1.98,1.98%20c1.123,1.124,0.666,2.487,0.516,2.936l-0.029,0.086c-0.025,0.078-0.055,0.154-0.09,0.228l-1.049,2.247l2.332,0.847%20c0.074,0.027,0.146,0.059,0.219,0.095l0.076,0.038c0.426,0.211,1.721,0.853,1.721,2.446v2.8c0,1.589-1.287,2.229-1.709,2.44%20l-0.082,0.041c-0.072,0.037-0.148,0.07-0.225,0.099l-2.332,0.847l1.049,2.247c0.035,0.072,0.064,0.146,0.088,0.222l0.027,0.082%20c0.152,0.449,0.613,1.818-0.512,2.946l-1.98,1.979c-0.479,0.478-1.111,0.74-1.785,0.74c-0.486,0-0.885-0.135-1.15-0.223%20l-0.086-0.029c-0.078-0.025-0.154-0.055-0.229-0.09l-2.248-1.049l-0.846,2.33c-0.029,0.078-0.062,0.153-0.1,0.227l-0.041,0.082%20C19.631,30.721,18.99,32.008,17.402,32.008z%20M15.557,28.008h0.891l0.988-2.721c0.209-0.574,0.67-1.021,1.25-1.215%20c0.361-0.119,0.738-0.277,1.117-0.468c0.547-0.274,1.188-0.282,1.742-0.024l2.629,1.227l0.627-0.629l-1.225-2.625%20c-0.26-0.555-0.25-1.197,0.025-1.744c0.189-0.379,0.348-0.756,0.469-1.12c0.193-0.579,0.641-1.04,1.215-1.249l2.717-0.987v-0.889%20l-2.717-0.988c-0.574-0.209-1.021-0.669-1.215-1.249c-0.121-0.365-0.279-0.741-0.469-1.12c-0.275-0.547-0.285-1.189-0.025-1.744%20l1.225-2.626l-0.627-0.628l-2.629,1.227c-0.555,0.258-1.195,0.25-1.742-0.024c-0.379-0.19-0.756-0.348-1.117-0.468%20c-0.58-0.193-1.041-0.64-1.25-1.215l-0.988-2.72h-0.891l-0.988,2.72c-0.209,0.575-0.67,1.022-1.25,1.215%20c-0.361,0.12-0.738,0.277-1.117,0.468c-0.547,0.274-1.188,0.283-1.742,0.024L7.832,7.208L7.203,7.836l1.225,2.626%20c0.26,0.555,0.25,1.197-0.025,1.744c-0.189,0.379-0.348,0.756-0.469,1.12c-0.193,0.58-0.641,1.04-1.215,1.249l-2.717,0.988v0.889%20l2.717,0.987c0.574,0.209,1.021,0.67,1.215,1.249c0.121,0.364,0.279,0.741,0.469,1.12c0.275,0.547,0.285,1.189,0.025,1.744%20l-1.225,2.625l0.629,0.629l2.627-1.227c0.555-0.258,1.195-0.25,1.742,0.024c0.381,0.19,0.756,0.349,1.117,0.468%20c0.58,0.193,1.041,0.641,1.25,1.215L15.557,28.008z%20M16.002,20.008c-2.205,0-4-1.795-4-4.001c0-2.205,1.795-4,4-4s4,1.795,4,4%20C20.002,18.213,18.207,20.008,16.002,20.008z%20M16.006,14.012c-1.102,0-2,0.897-2,2s0.898,2,2,2c1.104,0,2-0.896,2-2%20S17.109,14.012,16.006,14.012z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .gear {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%3D%22%23eee%22%20d%3D%22M17.402,32.008h-2.801c-1.594,0-2.234-1.295-2.445-1.721l-0.039-0.077c-0.035-0.071-0.068-0.144-0.094-0.219%20l-0.848-2.331l-2.248,1.049c-0.074,0.035-0.15,0.064-0.229,0.09l-0.086,0.029c-0.264,0.088-0.664,0.223-1.15,0.223%20c-0.674,0-1.307-0.263-1.783-0.739l-1.98-1.98c-1.127-1.128-0.666-2.497-0.514-2.946l0.027-0.082%20c0.023-0.075,0.053-0.149,0.088-0.222l1.049-2.247l-2.33-0.847c-0.078-0.028-0.154-0.062-0.227-0.099l-0.082-0.041%20c-0.422-0.211-1.709-0.852-1.709-2.44v-2.8c0-1.594,1.295-2.235,1.721-2.446l0.076-0.038c0.072-0.036,0.145-0.068,0.219-0.095%20l2.332-0.847L3.301,8.934c-0.035-0.074-0.064-0.15-0.09-0.229L3.182,8.618C3.031,8.17,2.576,6.807,3.697,5.684l1.98-1.98%20c0.477-0.477,1.111-0.739,1.787-0.739c0.49,0,0.893,0.136,1.16,0.226l0.08,0.027c0.076,0.025,0.15,0.054,0.223,0.088l2.248,1.049%20l0.848-2.331c0.025-0.075,0.059-0.148,0.094-0.219l0.039-0.077c0.211-0.425,0.852-1.72,2.445-1.72h2.801%20c1.588,0,2.229,1.287,2.439,1.709l0.041,0.082c0.037,0.073,0.07,0.149,0.1,0.226l0.846,2.331l2.248-1.049%20c0.072-0.034,0.146-0.063,0.223-0.088l0.08-0.027c0.268-0.09,0.67-0.226,1.16-0.226c0.676,0,1.311,0.262,1.787,0.739l1.98,1.98%20c1.123,1.124,0.666,2.487,0.516,2.936l-0.029,0.086c-0.025,0.078-0.055,0.154-0.09,0.228l-1.049,2.247l2.332,0.847%20c0.074,0.027,0.146,0.059,0.219,0.095l0.076,0.038c0.426,0.211,1.721,0.853,1.721,2.446v2.8c0,1.589-1.287,2.229-1.709,2.44%20l-0.082,0.041c-0.072,0.037-0.148,0.07-0.225,0.099l-2.332,0.847l1.049,2.247c0.035,0.072,0.064,0.146,0.088,0.222l0.027,0.082%20c0.152,0.449,0.613,1.818-0.512,2.946l-1.98,1.979c-0.479,0.478-1.111,0.74-1.785,0.74c-0.486,0-0.885-0.135-1.15-0.223%20l-0.086-0.029c-0.078-0.025-0.154-0.055-0.229-0.09l-2.248-1.049l-0.846,2.33c-0.029,0.078-0.062,0.153-0.1,0.227l-0.041,0.082%20C19.631,30.721,18.99,32.008,17.402,32.008z%20M15.557,28.008h0.891l0.988-2.721c0.209-0.574,0.67-1.021,1.25-1.215%20c0.361-0.119,0.738-0.277,1.117-0.468c0.547-0.274,1.188-0.282,1.742-0.024l2.629,1.227l0.627-0.629l-1.225-2.625%20c-0.26-0.555-0.25-1.197,0.025-1.744c0.189-0.379,0.348-0.756,0.469-1.12c0.193-0.579,0.641-1.04,1.215-1.249l2.717-0.987v-0.889%20l-2.717-0.988c-0.574-0.209-1.021-0.669-1.215-1.249c-0.121-0.365-0.279-0.741-0.469-1.12c-0.275-0.547-0.285-1.189-0.025-1.744%20l1.225-2.626l-0.627-0.628l-2.629,1.227c-0.555,0.258-1.195,0.25-1.742-0.024c-0.379-0.19-0.756-0.348-1.117-0.468%20c-0.58-0.193-1.041-0.64-1.25-1.215l-0.988-2.72h-0.891l-0.988,2.72c-0.209,0.575-0.67,1.022-1.25,1.215%20c-0.361,0.12-0.738,0.277-1.117,0.468c-0.547,0.274-1.188,0.283-1.742,0.024L7.832,7.208L7.203,7.836l1.225,2.626%20c0.26,0.555,0.25,1.197-0.025,1.744c-0.189,0.379-0.348,0.756-0.469,1.12c-0.193,0.58-0.641,1.04-1.215,1.249l-2.717,0.988v0.889%20l2.717,0.987c0.574,0.209,1.021,0.67,1.215,1.249c0.121,0.364,0.279,0.741,0.469,1.12c0.275,0.547,0.285,1.189,0.025,1.744%20l-1.225,2.625l0.629,0.629l2.627-1.227c0.555-0.258,1.195-0.25,1.742,0.024c0.381,0.19,0.756,0.349,1.117,0.468%20c0.58,0.193,1.041,0.641,1.25,1.215L15.557,28.008z%20M16.002,20.008c-2.205,0-4-1.795-4-4.001c0-2.205,1.795-4,4-4s4,1.795,4,4%20C20.002,18.213,18.207,20.008,16.002,20.008z%20M16.006,14.012c-1.102,0-2,0.897-2,2s0.898,2,2,2c1.104,0,2-0.896,2-2%20S17.109,14.012,16.006,14.012z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .gear span {
  display: none;
}
main .features .gear span {
  display: none;
}
main .features .network {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23003673%22%20d%3D%22M30,14h-4v2h1c0.553,0,1,0.448,1,1c0,0.553-0.447,1-1,1h-4%20c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h1v-2h-4c-1.104,0-2-0.896-2-2V4c0-1.104,0.896-2,2-2h10c1.105,0,2,0.896,2,2v8%20C32,13.104,31.105,14,30,14z%20M28,6.8C28,6.358,27.643,6,27.201,6h-4.4C22.359,6,22,6.358,22,6.8v2.4c0,0.442,0.359,0.8,0.801,0.8%20h4.4C27.643,10,28,9.642,28,9.2V6.8z%20M12,14H8v2h1c0.553,0,1,0.448,1,1c0,0.553-0.447,1-1,1H5c-0.553,0-1-0.447-1-1%20c0-0.552,0.447-1,1-1h1v-2H2c-1.104,0-2-0.896-2-2V4c0-1.104,0.896-2,2-2h10c1.105,0,2,0.896,2,2v8C14,13.104,13.105,14,12,14z%20%20M10,6.8C10,6.358,9.643,6,9.201,6h-4.4C4.359,6,4,6.358,4,6.8v2.4C4,9.642,4.359,10,4.801,10h4.4C9.643,10,10,9.642,10,9.2V6.8z%20%20M2,26h4v-5c0-0.552,0.447-1,1-1s1,0.448,1,1v5h16v-5c0-0.552,0.447-1,1-1s1,0.448,1,1v5h4c1.105,0,2,0.896,2,2s-0.895,2-2,2H2%20c-1.104,0-2-0.896-2-2S0.896,26,2,26z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .network {
  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%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%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%23eee%22%20d%3D%22M30,14h-4v2h1c0.553,0,1,0.448,1,1c0,0.553-0.447,1-1,1h-4%20c-0.553,0-1-0.447-1-1c0-0.552,0.447-1,1-1h1v-2h-4c-1.104,0-2-0.896-2-2V4c0-1.104,0.896-2,2-2h10c1.105,0,2,0.896,2,2v8%20C32,13.104,31.105,14,30,14z%20M28,6.8C28,6.358,27.643,6,27.201,6h-4.4C22.359,6,22,6.358,22,6.8v2.4c0,0.442,0.359,0.8,0.801,0.8%20h4.4C27.643,10,28,9.642,28,9.2V6.8z%20M12,14H8v2h1c0.553,0,1,0.448,1,1c0,0.553-0.447,1-1,1H5c-0.553,0-1-0.447-1-1%20c0-0.552,0.447-1,1-1h1v-2H2c-1.104,0-2-0.896-2-2V4c0-1.104,0.896-2,2-2h10c1.105,0,2,0.896,2,2v8C14,13.104,13.105,14,12,14z%20%20M10,6.8C10,6.358,9.643,6,9.201,6h-4.4C4.359,6,4,6.358,4,6.8v2.4C4,9.642,4.359,10,4.801,10h4.4C9.643,10,10,9.642,10,9.2V6.8z%20%20M2,26h4v-5c0-0.552,0.447-1,1-1s1,0.448,1,1v5h16v-5c0-0.552,0.447-1,1-1s1,0.448,1,1v5h4c1.105,0,2,0.896,2,2s-0.895,2-2,2H2%20c-1.104,0-2-0.896-2-2S0.896,26,2,26z%22/%3E%3C/svg%3E');
  background-repeat: no-repeat;
  background-size: contain;
}
.theme-dark main .features .network span {
  display: none;
}
main .features .network span {
  display: none;
}
main section.contact {
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
}
main section.contact a {
  color: var(--c-accentdim-link);
}
h1.faq,
.faq h2,
.faq_contact h2,
.faq_contact p {
  text-align: center;
}
main section.faq,
.faq main section {
  display: grid;
  grid-template-columns: 1fr min(100%, 60em) 1fr;
  grid-auto-flow: row;
  grid-row-gap: 0 !important;
}
main section.faq h2,
.faq main section h2 {
  grid-column: 1 / -1;
}
main section.faq details,
.faq main section details {
  grid-column: 2;
  display: block;
  padding: 1rem;
}
main section.faq details summary,
.faq main section details summary {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 125%;
  padding: 1.5rem 0 0.5rem;
  font-size: 1.1em;
  color: var(--c-active-fg-secondary);
}
.theme-dos main section.faq details summary,
.theme-dos .faq main section details summary {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
/***

  Styling for service overview pages.

***/
body.service main > section:first-child .content {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: min-content min-content;
  grid-template-areas: "title title" "highlights order_box";
  grid-row-gap: 0;
  margin-bottom: 0;
}
body.service main > section:first-child .content hgroup {
  grid-area: title;
}
body.service main > section:first-child .content .highlights {
  grid-area: highlights;
  margin-bottom: 1em;
}
body.service main > section:first-child .content .highlights ul {
  margin: 0;
  padding: 0;
}
body.service main > section:first-child .content .highlights ul li {
  margin: 0;
  padding: 0.25em 0;
  display: block;
  font-size: 1.2em;
}
body.service main > section:first-child .content .order_box {
  grid-area: order_box;
  background-color: var(--c-accentbright-bg);
  color: var(--c-accentbright-fg);
  text-align: center;
  padding: 1.5em 2em 2.5em;
  border-top-left-radius: var(--active-radius);
  border-top-right-radius: var(--active-radius);
}
body.service main > section:first-child .content .order_box a {
  color: var(--c-accentbright-link);
}
body.service main > section:first-child .content .order_box .price {
  display: block;
  position: relative;
  white-space: nowrap;
  vertical-align: baseline;
  margin: 0.5em 0 1em;
}
body.service main > section:first-child .content .order_box .price .in {
  display: block;
  white-space: nowrap;
  text-align: center;
}
body.service main > section:first-child .content .order_box .price .in .amount {
  display: inline-block;
  border-right: 0.1rem solid var(--c-accentbright-fg);
  padding-right: 0.25em;
  margin-right: 0.125em;
  font-size: 2em;
  font-weight: bold;
  text-align: right;
  white-space: nowrap;
}
body.service main > section:first-child .content .order_box .price .in .amount .currency {
  font-size: 1.2rem;
  font-weight: normal;
  position: relative;
  top: -0.5em;
  left: 0.25em;
}
body.service main > section:first-child .content .order_box .price .in .amount .vat {
  display: block;
  font-weight: normal;
  font-size: 1rem;
  padding: 0.1em 0 0;
}
body.service main > section:first-child .content .order_box .price .in .period {
  display: inline-block;
  text-align: left;
  font-weight: bold;
}
body.service main > section:first-child .content .order_box .price .in .period .per,
body.service main > section:first-child .content .order_box .price .in .period .length {
  display: block;
}
body.service main > section:first-child .content .order_box .price .ex {
  display: block;
  text-align: center;
  padding: 1em 0 0.5em;
}
body.service main > section:first-child .content .order_box .price .ex .currency {
  margin-right: 0.1em;
}
body.service main > section:first-child .content .order_box .price .ex .period {
  display: none;
}
body.service main > section:first-child .content .order_box .button {
  margin-top: 0.5em;
}
main section.scaling h2,
main section.scaling h3 {
  text-align: center;
}
main section.scaling .scaling_options ul {
  display: flex;
}
main section.scaling .scaling_options ul .variant {
  background-color: var(--c-accent-bg);
  color: var(--c-accent-fg);
  flex: 1;
  margin: 0 2em;
  border: 0.1em solid var(--c-accent-border);
  border-radius: var(--accent-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}
main section.scaling .scaling_options ul .variant a {
  color: var(--c-accent-link);
}
main section.scaling .scaling_options ul .variant .desc {
  margin: 0;
  padding: 0.5em;
  background-color: var(--c-accentdim-bg);
  color: var(--c-accentdim-fg);
  display: block;
}
main section.scaling .scaling_options ul .variant .desc a {
  color: var(--c-accentdim-link);
}
main section.scaling .scaling_options ul .variant .desc li {
  display: block;
  text-align: center;
}
main section.scaling .scaling_options ul .variant .price_diff {
  display: block;
  text-align: center;
  margin: 0;
  padding: 0.5em;
  flex: 1;
}
main section.scaling .scaling_options ul .variant .price_diff .included {
  display: block;
  padding-top: 1.5em;
  font-weight: bold;
}
main section.scaling .scaling_options ul .variant .price_diff .plus {
  font-weight: bold;
  font-size: 1.2em;
}
main section.scaling .scaling_options ul .variant .price_diff .in {
  display: block;
  font-weight: bold;
}
main section.scaling .scaling_options ul .variant .price_diff .ex {
  display: block;
}
main section.scaling .scaling_options ul .variant .price_diff .ex::before {
  content: '(';
}
main section.scaling .scaling_options ul .variant .price_diff .ex::after {
  content: ')';
}
main section.scaling .scaling_options ul .variant .price_diff .period {
  display: none;
}
.domain_pricing .content {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
  grid-auto-rows: min-content;
}
.domain_pricing .content h2 {
  grid-column: 1 / -1;
  text-align: center;
}
.domain_pricing .content p {
  grid-column: 1 / -1;
  text-align: center;
}
.domain_pricing .content summary {
  font-family: 'Roboto Slab', 'Play', arial, helvetica, sans-serif;
  font-feature-settings: "liga" off;
  font-size: 1.25rem;
  font-weight: normal;
  line-height: 125%;
  padding: 1.5rem 0 0.5rem;
}
.theme-dos .domain_pricing .content summary {
  font-family: monospace;
  font-size: 1rem !important;
  color: #ffff55;
}
.domain_pricing .content .popular,
.domain_pricing .content .everything {
  grid-column: 2;
  text-align: center;
}
.domain_pricing .content .popular table,
.domain_pricing .content .everything table {
  white-space: nowrap;
}
.domain_pricing .content .popular table th,
.domain_pricing .content .everything table th {
  width: 30%;
}
.domain_pricing .content .popular table .price .in,
.domain_pricing .content .everything table .price .in {
  width: 50%;
}
.domain_pricing .content .popular table .price .ex,
.domain_pricing .content .everything table .price .ex {
  text-align: right;
}
.domain_pricing .content .popular table .price .ex .period,
.domain_pricing .content .everything table .price .ex .period {
  display: none;
}
:root {
  box-sizing: border-box;
  color-schema: light;
  /* add dark for dark mode later */
}