/* parse-color-link(string [string:null])
  enables support for internal linking of the $colors variable. in the color
  library, a string can be entered that is separated with /. The syntax is:
  "group/id"
 */
/* convert-simple-number(str [string:""])
  Converts a String-Number to a Number
  - this seems a complicated thing for sass to do
 */
:root {
  --white: #fff;
  --black: #222;
  --grey: #6f7787;
  --dark-grey: #575e6b;
  --light-grey: #eee;
  --light-grey-hover: #ddd;
  --red: #cf0a2c;
  --red-hover: #cf0a2c;
  --yellow: #ffe36d;
  --yellow: #fcc200;
  --blue: #0071ce;
  --blue-hover: #0071ce;
  --teal: #accde7;
  --teal-hover: #accde7;
  --purple: #7466bf;
  --purple-hover: #7466bf;
  --green: #34ac69;
  --app-max-width: 1920px;
  --active-tab-background: var(--grey);
  --active-tab-hover: var(--dark-grey);
  --active-tab-color: var(--white);
  --background: #eee;
  --hover: rgba(0, 0, 0, 0.04);
  --disabled: #a1aeb8;
  --dashed-border: 1px dashed #767676;
  --primary: #2673b3;
  --primary-logo: #2673b3;
  --primary-hover: #125f9f;
  --primary-active: #0c4c81;
  --warning: var(--yellow);
  --danger: var(--red);
  --success: var(--green);
  --space-nano: 4px;
  --space-micro: 8px;
  --space-small: 16px;
  --space-default: 24px;
  --space-large: 32px;
  --space-mega: 56px;
  --radius-small: 2px;
  --radius-default: 4px;
  --radius-big: 6px;
  --tile: #fff;
  --tile-shadow: 0 4px 40px rgba(0, 0, 0, 0.17);
  --hard-shadow: 0 4px 40px rgba(0, 0, 0, 0.5);
  --tile-border-radius: 6px;
  --tile-margin: var(--space-default);
  --tile-padding: var(--space-large);
  --default-text: #222222;
  --meta-text: var(--grey);
  --disabled-text: var(--grey);
  --size-default: 14px;
  --size-big: 15px;
  --icon-small: 1px;
  --icon-mid: 28px;
  --icon-big: 1px;
  --input-background: #fff;
  --input-radius: 2px;
  --input-border: 1px solid #ddd;
  --input-label-color: var(--black);
  --input-label-size: 14px;
  --button-radius: 3px;
  --button-background-primary: var(--primary);
  --button-hover-primary: var(--primary-hover);
  --button-active-primary: var(--primary-active);
  --button-disabled-primary: #92b9d9;
  --button-border-primary: 1px solid transparent;
  --button-color-primary: var(--white);
  --button-background-secondary: var(--white);
  --button-hover-secondary: #f8f8f8;
  --button-active-secondary: #eeeeee;
  --button-disabled-secondary: 1px solid #6f7787;
  --button-border-secondary: 1px solid #6f7787;
  --button-color-secondary: var(--black);
  --button-background-danger: var(--red);
  --button-hover-danger: #b80826;
  --button-active-danger: #a40621;
  --button-disabled-danger: #e78495;
  --button-border-danger: 1px solid transparent;
  --button-color-danger: var(--white);
  --toast-radius: 6px;
  --toast-info: #accde7;
  --toast-color-info: var(--default-text);
  --toast-warning: var(--yellow);
  --toast-color-warning: var(--default-text);
  --toast-success: #99d5b4;
  --toast-color-success: var(--default-text);
  --toast-danger: #cf0a2c;
  --toast-color-danger: var(--white);
  --list-border: 1px solid #ddd;
  --tag-violet-background: #dfdbf5;
  --tag-violet-hover: #e4e2f2;
  --tag-violet-text: #39345d;
  --tag-violet-importance: 10;
  --tag-pink-background: #efdaee;
  --tag-pink-hover: #d4c0d3;
  --tag-pink-text: #502b4e;
  --tag-pink-importance: 10;
  --tag-green-background: #c2e6d2;
  --tag-green-hover: #c6dfd1;
  --tag-green-text: #502b4e;
  --tag-green-importance: 10;
  --tag-blue-background: #cbe8ff;
  --tag-blue-hover: #d5ecff;
  --tag-blue-text: #14344d;
  --tag-blue-importance: 4;
  --tag-purple-background: #b2c0f2;
  --tag-purple-hover: #bfc9ed;
  --tag-purple-text: #372b43;
  --tag-purple-importance: 3;
  --tag-brown-background: #ece1ca;
  --tag-brown-hover: #e4ded0;
  --tag-brown-text: #433a2b;
  --tag-brown-importance: 10;
  --tag-turquoise-background: #c3fcf4;
  --tag-turquoise-hover: #d2f8f3;
  --tag-turquoise-text: #204a65;
  --tag-turquoise-importance: 2;
  --tag-grey-background: #eeeeee;
  --tag-grey-hover: #dedede;
  --tag-grey-text: #222222;
  --tag-grey-importance: 10;
  --tag-orange-background: #ffd2a8;
  --tag-orange-hover: #ffe0c3;
  --tag-orange-text: #543c25;
  --tag-orange-importance: 10;
  --tag-rose-background: #fcaac5;
  --tag-rose-hover: #ffc3d7;
  --tag-rose-text: #3b1824;
  --tag-rose-importance: 1;
}

@media screen {
  [data-theme=dark] {
    --background: #0d1d2b;
    --tile: #0f2c44;
    --default-text: #fff;
    --input-background: #0d1d2b;
    --hover: #0d1d2b;
    --dashed-border: 1px dashed #fff;
    --list-border: 1px solid #3d4b61;
    --input-border: 1px solid #3d4b61;
    --active-tab-background: var(--white);
    --active-tab-color: var(--black);
    --active-tab-hover: var(--light-grey);
    --button-background-secondary: transparent;
    --button-hover-secondary: #123653;
    --button-active-secondary: #174367;
    --button-disabled-secondary: 1px solid #6f7787;
    --button-border-secondary: 1px solid #6f7787;
    --button-color-secondary: var(--white);
    --primary-logo: #6895ba;
  }
}
.app {
  background: var(--background);
  display: flex;
  flex-direction: column;
}
.app__container {
  min-height: 100%;
  overflow: auto;
  overflow-x: hidden;
  margin: 0 auto -45px;
}
.app__view {
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}
.app__header {
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  max-width: var(--app-max-width);
  width: 100%;
  margin: 0 auto;
  flex-direction: column;
  box-sizing: border-box;
  padding: 0 var(--space-default);
}
.app__header--secondary {
  width: 100%;
  display: flex;
}
.app__content, .app__content--standalone, .app__content--free, .app__content--free--flex {
  padding: 0;
  flex-basis: 100%;
}
.app__content--black {
  background: var(--black);
}
.app__content--white {
  background: var(--white);
}
.app__content--free, .app__content--free--flex {
  padding: 0;
  flex: 1;
}
.app__content--free--flex {
  display: flex;
}
.app__content--standalone {
  display: flex;
  justify-content: center;
  align-items: center;
}
.app__footer {
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  font-size: 14px;
}
.app__footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: var(--app-max-width);
  width: 100%;
  margin: 0 auto;
}
.app__footer--push {
  height: 50px;
}
.app__footer.creditorial {
  display: flex;
  align-items: center;
  flex-basis: auto;
  padding: 10px 30px 5px;
  box-sizing: border-box;
}
.app__footer.creditorial svg {
  height: 20px;
  width: auto;
}
.app__footer.creditorial a {
  font-weight: 500;
  text-decoration: none;
  color: var(--default-text);
}
.app__footer.creditorial a:hover {
  text-decoration: underline;
}
.app__footer.creditorial p {
  margin: 0;
  font-weight: 500;
}
.app__nav-top, .app__nav-top__free {
  display: flex;
  align-items: flex-end;
  background-color: var(--black);
  height: 44px;
  padding: 0 20px;
}
.app__nav-top__free {
  height: auto;
}
.app__nav-top > *:not(h1):not(.tab-view), .app__nav-top__free > *:not(h1):not(.tab-view) {
  flex-basis: 100%;
  height: auto;
}
.app__nav-top > button, .app__nav-top__free > button {
  flex-basis: auto;
  margin-bottom: 10px;
}
.app__nav-top > h1, .app__nav-top__free > h1 {
  margin-right: 20px;
  margin-bottom: 0;
  margin-top: 5px;
  padding: 5px 0;
  white-space: nowrap;
  display: flex;
}
.app__nav-top > h1 small, .app__nav-top__free > h1 small {
  font-size: 0.6em;
  vertical-align: bottom;
}
.app__nav-top .top-right, .app__nav-top__free .top-right {
  text-align: right;
  align-self: center;
}

body,
html {
  height: 100%;
}

/*
  Core body scaffold
 */
body {
  margin: 0;
}
body *[data-hidden] {
  display: none;
  visibility: hidden;
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  background-color: transparent;
  font-size: 0;
}

body *.clear-padding {
  padding: 0;
}
body *.clear-padding-left {
  padding-left: 0;
}
body *.clear-padding-right {
  padding-right: 0;
}
body *.clear-padding-top {
  padding-top: 0;
}
body *.clear-padding-bottom {
  padding-bottom: 0;
}
body *.clear-padding-horizontal {
  padding-left: 0;
  padding-right: 0;
}
body *.clear-padding-vertical {
  padding-top: 0;
  padding-bottom: 0;
}

@media only screen and (max-width: 600px) {
  .app__footer * {
    font-size: 8px;
  }
  .app__footer svg {
    max-width: 100px;
  }
}
.monospace, pre.code-block {
  font-family: "Roboto Mono", monospace;
}

pre.code-block {
  font-weight: 600;
  background-color: rgba(255, 255, 255, 0.9);
  margin: 10px 10px 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
pre.code-block code {
  display: inline-block;
  font-size: 1.2em;
  padding: 10px;
}

/* inter-100 - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  src: url("/static/fonts/inter/inter-v11-latin-100.eot"); /* IE9 Compat Modes */
  src: local(""), url("/static/fonts/inter/inter-v11-latin-100.eot?#iefix") format("embedded-opentype"), url("/static/fonts/inter/inter-v11-latin-100.woff2") format("woff2"), url("/static/fonts/inter/inter-v11-latin-100.woff") format("woff"), url("/static/fonts/inter/inter-v11-latin-100.ttf") format("truetype"), url("/static/fonts/inter/inter-v11-latin-100.svg#Inter") format("svg"); /* Legacy iOS */
  font-display: swap;
}
/* inter-200 - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  src: url("/static/fonts/inter/inter-v11-latin-200.eot"); /* IE9 Compat Modes */
  src: local(""), url("/static/fonts/inter/inter-v11-latin-200.eot?#iefix") format("embedded-opentype"), url("/static/fonts/inter/inter-v11-latin-200.woff2") format("woff2"), url("/static/fonts/inter/inter-v11-latin-200.woff") format("woff"), url("/static/fonts/inter/inter-v11-latin-200.ttf") format("truetype"), url("/static/fonts/inter/inter-v11-latin-200.svg#Inter") format("svg"); /* Legacy iOS */
  font-display: swap;
}
/* inter-300 - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  src: url("/static/fonts/inter/inter-v11-latin-300.eot"); /* IE9 Compat Modes */
  src: local(""), url("/static/fonts/inter/inter-v11-latin-300.eot?#iefix") format("embedded-opentype"), url("/static/fonts/inter/inter-v11-latin-300.woff2") format("woff2"), url("/static/fonts/inter/inter-v11-latin-300.woff") format("woff"), url("/static/fonts/inter/inter-v11-latin-300.ttf") format("truetype"), url("/static/fonts/inter/inter-v11-latin-300.svg#Inter") format("svg"); /* Legacy iOS */
  font-display: swap;
}
/* inter-regular - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  src: url("/static/fonts/inter/inter-v11-latin-regular.eot"); /* IE9 Compat Modes */
  src: local(""), url("/static/fonts/inter/inter-v11-latin-regular.eot?#iefix") format("embedded-opentype"), url("/static/fonts/inter/inter-v11-latin-regular.woff2") format("woff2"), url("/static/fonts/inter/inter-v11-latin-regular.woff") format("woff"), url("/static/fonts/inter/inter-v11-latin-regular.ttf") format("truetype"), url("/static/fonts/inter/inter-v11-latin-regular.svg#Inter") format("svg"); /* Legacy iOS */
  font-display: swap;
}
/* inter-500 - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  src: url("/static/fonts/inter/inter-v11-latin-500.eot"); /* IE9 Compat Modes */
  src: local(""), url("/static/fonts/inter/inter-v11-latin-500.eot?#iefix") format("embedded-opentype"), url("/static/fonts/inter/inter-v11-latin-500.woff2") format("woff2"), url("/static/fonts/inter/inter-v11-latin-500.woff") format("woff"), url("/static/fonts/inter/inter-v11-latin-500.ttf") format("truetype"), url("/static/fonts/inter/inter-v11-latin-500.svg#Inter") format("svg"); /* Legacy iOS */
  font-display: swap;
}
/* inter-600 - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  src: url("/static/fonts/inter/inter-v11-latin-600.eot"); /* IE9 Compat Modes */
  src: local(""), url("/static/fonts/inter/inter-v11-latin-600.eot?#iefix") format("embedded-opentype"), url("/static/fonts/inter/inter-v11-latin-600.woff2") format("woff2"), url("/static/fonts/inter/inter-v11-latin-600.woff") format("woff"), url("/static/fonts/inter/inter-v11-latin-600.ttf") format("truetype"), url("/static/fonts/inter/inter-v11-latin-600.svg#Inter") format("svg"); /* Legacy iOS */
  font-display: swap;
}
/* inter-700 - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  src: url("/static/fonts/inter/inter-v11-latin-700.eot"); /* IE9 Compat Modes */
  src: local(""), url("/static/fonts/inter/inter-v11-latin-700.eot?#iefix") format("embedded-opentype"), url("/static/fonts/inter/inter-v11-latin-700.woff2") format("woff2"), url("/static/fonts/inter/inter-v11-latin-700.woff") format("woff"), url("/static/fonts/inter/inter-v11-latin-700.ttf") format("truetype"), url("/static/fonts/inter/inter-v11-latin-700.svg#Inter") format("svg"); /* Legacy iOS */
  font-display: swap;
}
/* inter-800 - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  src: url("/static/fonts/inter/inter-v11-latin-800.eot"); /* IE9 Compat Modes */
  src: local(""), url("/static/fonts/inter/inter-v11-latin-800.eot?#iefix") format("embedded-opentype"), url("/static/fonts/inter/inter-v11-latin-800.woff2") format("woff2"), url("/static/fonts/inter/inter-v11-latin-800.woff") format("woff"), url("/static/fonts/inter/inter-v11-latin-800.ttf") format("truetype"), url("/static/fonts/inter/inter-v11-latin-800.svg#Inter") format("svg"); /* Legacy iOS */
  font-display: swap;
}
/* inter-900 - latin */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  src: url("/static/fonts/inter/inter-v11-latin-900.eot"); /* IE9 Compat Modes */
  src: local(""), url("/static/fonts/inter/inter-v11-latin-900.eot?#iefix") format("embedded-opentype"), url("/static/fonts/inter/inter-v11-latin-900.woff2") format("woff2"), url("/static/fonts/inter/inter-v11-latin-900.woff") format("woff"), url("/static/fonts/inter/inter-v11-latin-900.ttf") format("truetype"), url("/static/fonts/inter/inter-v11-latin-900.svg#Inter") format("svg"); /* Legacy iOS */
  font-display: swap;
}
/* roboto-mono-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 100;
  src: url("/static/fonts/roboto/roboto-mono-v22-latin-100.woff2") format("woff2"), url("/static/fonts/roboto/roboto-mono-v22-latin-100.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-mono-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 200;
  src: url("/static/fonts/roboto/roboto-mono-v22-latin-200.woff2") format("woff2"), url("/static/fonts/roboto/roboto-mono-v22-latin-200.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-mono-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 300;
  src: url("/static/fonts/roboto/roboto-mono-v22-latin-300.woff2") format("woff2"), url("/static/fonts/roboto/roboto-mono-v22-latin-300.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-mono-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 400;
  src: url("/static/fonts/roboto/roboto-mono-v22-latin-regular.woff2") format("woff2"), url("/static/fonts/roboto/roboto-mono-v22-latin-regular.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-mono-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 500;
  src: url("/static/fonts/roboto/roboto-mono-v22-latin-500.woff2") format("woff2"), url("/static/fonts/roboto/roboto-mono-v22-latin-500.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-mono-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 600;
  src: url("/static/fonts/roboto/roboto-mono-v22-latin-600.woff2") format("woff2"), url("/static/fonts/roboto/roboto-mono-v22-latin-600.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* roboto-mono-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Mono";
  font-style: normal;
  font-weight: 700;
  src: url("/static/fonts/roboto/roboto-mono-v22-latin-700.woff2") format("woff2"), url("/static/fonts/roboto/roboto-mono-v22-latin-700.ttf") format("truetype"); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
.hbox {
  display: flex;
  flex-direction: row;
}
.hbox.centered {
  align-items: center;
}
.hbox.justice {
  justify-content: space-between;
  align-items: center;
}
.hbox.around {
  justify-content: space-around;
  align-items: flex-start;
}
.hbox.justify-start {
  justify-content: flex-start;
}
.hbox.margin {
  margin: 20px;
}

.vbox {
  display: flex;
  flex-direction: column;
}
.vbox.centered {
  align-items: center;
}
.vbox.margin {
  margin: 20px;
}

.flex, .flex-center {
  flex: 1;
}
.flex.margin, .margin.flex-center {
  margin: 20px;
}
.flex-half {
  flex: 0.5;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-wrap {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}
.flex-wrap > * {
  flex-basis: 350px;
}

body {
  overflow-x: hidden;
}

body *:focus {
  outline: 2px solid #004a80;
  outline-offset: 2px;
}

@keyframes staticProgressAnimation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}
.pw-datetime {
  width: 16ch;
  display: inline-block;
}

[data-clipboard] {
  cursor: pointer;
  transition: background-color 300ms ease-in-out;
}

.relative {
  position: relative;
}

.justify-end {
  justify-self: end;
}

.hidden {
  display: none !important;
}

.show-overflow-x {
  overflow-x: visible;
}

.scroll-x {
  overflow-x: auto;
}

.nopadding {
  padding: 0;
}

.padding-smoll {
  padding: 10px;
}

.uppercase {
  text-transform: uppercase;
}

.text-cutoff {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-collapser-click] {
  display: flex;
  position: relative;
  align-items: center;
  cursor: pointer;
}
[data-collapser-click] span:last-of-type {
  margin-right: var(--space-mega);
}
[data-collapser-click].disabled {
  opacity: 0.4;
  pointer-events: none;
}
[data-collapser-click]:after {
  content: "";
  font-weight: 600;
  width: 40px;
  filter: brightness(0);
  height: 40px;
  right: 0;
  position: absolute;
  display: inline-block;
  background-image: url("/static/svg/icons/expand_less.svg");
  background-size: 100%;
}
[data-collapser-click].closed {
  margin-bottom: 0;
}
[data-collapser-click].closed:after {
  content: "";
  background-image: url("/static/svg/icons/expand_more.svg");
}

[data-theme=dark] [data-collapser-click]:after {
  filter: brightness(1);
}

[data-collapsable-closed] [data-collapser-window] {
  display: none;
}

body {
  font-family: "Inter", system-ui, sans-serif;
  color: var(--default-text);
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
h1.sub,
h2.sub,
h3.sub,
h4.sub,
h5.sub,
h6.sub,
p.sub {
  color: var(--grey);
}

span.divider {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--grey);
  margin: 8px var(--space-micro);
}

b {
  font-weight: 600;
}

h1 {
  font-size: 28px;
  font-weight: 500;
  margin-bottom: var(--space-default);
}

h2 {
  font-size: 24px;
  font-weight: 500;
  display: block;
}
h2 .button-bar {
  float: right;
  display: inline-flex;
}
h2 .button,
h2 span {
  float: right;
  margin-left: auto;
}
h2 span {
  color: var(--grey);
}

h3 {
  font-size: 17px;
  font-weight: 600;
}

a.link {
  font-size: 15px;
  font-weight: 400;
  color: var(--default-text);
  cursor: pointer;
}

article p {
  margin-bottom: var(--space-micro);
}
article .article-link {
  text-decoration: underline;
}

ul {
  padding-left: 15px;
  margin: 0 0 var(--space-default);
}
ul:last-child {
  margin-bottom: 0;
}

li,
p {
  font-size: var(--size-default);
}
li a,
p a {
  text-decoration: underline;
}

a {
  text-decoration: none;
  color: var(--default-text);
}
a:hover {
  text-decoration: underline;
}

.prewrap {
  white-space: pre-wrap !important;
}

@media only screen and (max-width: 600px) {
  h1 {
    font-size: 24px;
  }
  h2 {
    font-size: 18px;
  }
}
.layout-centered {
  padding: var(--space-default);
  width: 500px;
  margin: 0 auto;
  box-sizing: border-box;
}
.layout-centered.big {
  width: 800px;
}
.layout-centered .split {
  display: flex;
}
.layout-centered .split .tile {
  margin-right: var(--space-default);
  flex: 1;
}
.layout-centered .split .tile:last-child {
  margin-right: 0;
}
.layout-centered > * {
  margin-bottom: var(--space-default);
}
.layout-full {
  padding: var(--space-default);
  height: 100%;
  flex: 1;
  display: flex;
  min-width: 0;
  flex-direction: column;
  box-sizing: border-box;
}
.layout-toolbar {
  display: flex;
  flex-direction: row;
  height: 100%;
  width: 100%;
  padding: var(--space-default);
  box-sizing: border-box;
  align-items: flex-start;
}
.layout-toolbar > * .tile {
  margin-bottom: var(--space-default);
}
.layout-toolbar > * .tile:last-child {
  margin-bottom: 0;
}
.layout-toolbar > *:first-child {
  flex-basis: 300px;
  min-width: 300px;
  margin-right: var(--space-default);
  box-sizing: border-box;
  height: fit-content;
}
.layout-toolbar > *:first-child.big {
  flex-basis: 400px;
  min-width: 400px;
}
.layout-toolbar > *:last-child {
  width: calc(100vw - 372px);
}
.layout-toolbar > *:last-child:first-child {
  width: 100%;
  max-width: 100%;
  margin-right: 0;
  flex: 1;
}
.layout-split {
  display: flex;
  flex-direction: row;
  gap: var(--space-default);
  padding: var(--space-default);
  min-width: 0;
  box-sizing: border-box;
  flex-wrap: wrap;
  align-items: flex-start;
}
.layout-split > .tile {
  width: 100%;
}
.layout-split__column {
  display: flex;
  gap: var(--space-default);
  min-width: 0;
  flex-direction: column;
  flex-basis: 50%;
  flex: 1;
}
.layout-full .footer-toolbar, .layout-split .footer-toolbar, .layout-toolbar .footer-toolbar {
  box-shadow: var(--hard-shadow);
  position: fixed;
  bottom: 60px;
  left: 24px;
  right: 24px;
  max-width: calc(var(--app-max-width) - 48px);
  box-sizing: border-box;
  margin: 0 auto;
  width: auto;
  padding: var(--space-small);
}

@media only screen and (max-width: 600px) {
  .layout-split,
.layout-toolbar,
.layout-centered {
    box-sizing: border-box;
    width: 100%;
    min-width: auto;
    flex-direction: column;
  }
  .layout-split .layout-split__column,
.layout-toolbar .layout-split__column,
.layout-centered .layout-split__column {
    flex-basis: auto;
    width: 100%;
  }
  .layout-toolbar > *:last-child {
    min-width: 100%;
    width: 100%;
  }
  .layout-toolbar > *:first-child {
    margin-bottom: var(--space-default);
    flex-basis: auto;
    margin-right: 0;
    min-width: auto;
    width: 100%;
  }
  .layout-toolbar > *:first-child.big {
    width: auto;
    min-width: 100%;
  }
}
.ace_editor {
  min-height: 555px;
  border-radius: var(--input-radius);
  border: var(--input-border);
  flex: 1;
  margin-bottom: var(--space-default);
}
.ace_editor .ace_gutter-layer {
  background: var(--background);
  color: var(--default-text);
}
.ace_editor .ace_content {
  background: var(--tile);
  color: var(--default-text);
}
.ace_editor .ace_cursor-layer .ace_cursor {
  color: var(--default-text);
}
.ace_editor .ace_gutter-layer .ace_gutter-active-line {
  background-color: var(--tile);
}

.blog {
  margin-bottom: var(--space-micro);
}
.blog:hover {
  background-color: var(--hover);
  text-decoration: none;
}
.blog:last-of-type {
  margin-bottom: 0;
}
.blog__img {
  max-height: 70px;
  max-width: 70px;
  min-height: 70px;
  min-width: 70px;
  margin-right: var(--space-micro);
}
.blog__img img {
  height: 100%;
  width: 100%;
}

.learn > * {
  border-right: var(--input-border);
  flex: 1;
  margin: var(--space-micro) 0;
  height: auto;
}
.learn > *:last-child {
  border-right: 0;
}
.learn > a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.learn > div {
  padding: 0 var(--space-default);
}
.learn > div.article {
  padding-left: 0;
}
.learn > div a {
  display: inline-block;
  margin-top: var(--space-micro);
}
.learn img,
.learn svg {
  width: 80%;
}

@media only screen and (max-width: 600px) {
  .learn {
    flex-direction: column;
  }
  .learn > * {
    border-right: 0;
  }
}
@media only screen and (max-width: 600px) {
  .blog {
    flex-direction: column;
    margin-bottom: var(--space-default);
  }
  .blog__img {
    margin-right: 0;
    max-height: 70px;
    max-width: 100%;
    min-height: 70px;
    min-width: 100%;
    overflow: hidden;
  }
  .blog .hbox {
    align-items: start;
    flex-direction: column;
  }
  .blog .hbox .divider {
    display: none;
  }
}
.article > form > fieldset, .article > fieldset {
  margin-bottom: var(--space-micro);
}
.article > p {
  margin-bottom: var(--space-micro);
}
.article > .tags:last-child, .article > p:last-child, .article > h1:last-child, .article > h2:last-child, .article > h3:last-child, .article > h4:last-child, .article > h5:last-child, .article > h6:last-child {
  margin-bottom: 0;
}
.article > h2 {
  margin-bottom: var(--space-micro);
}
.article > h2 div.ma-icon {
  margin-right: var(--space-small);
  display: inline-flex;
}
.article > h3 {
  margin-top: var(--space-micro);
  margin-bottom: var(--space-micro);
}
.article > .hbox {
  gap: var(--space-small);
}
.article .checkbox {
  margin: var(--space-small) var(--space-small) var(--space-small) 0;
}

.article-doc {
  max-width: 720px;
  margin: 40px auto;
  padding: 0 20px;
  background: var(--white);
}
.article-doc h1,
.article-doc h2 {
  margin: 30px 0 10px;
}
.article-doc h1:first-child,
.article-doc h2:first-child {
  margin-top: 0;
}
.article-doc h1 span,
.article-doc h2 span {
  float: none;
}
.article-doc h1 {
  font-size: 2em;
  font-weight: 800;
}
.article-doc h2 {
  font-weight: 1.6em;
  font-weight: 700;
}
.article-doc p {
  font-size: 16px;
  line-height: 22px;
  padding-left: 30px;
}
.article-doc dl dd,
.article-doc dl li,
.article-doc ol dd,
.article-doc ol li,
.article-doc ul dd,
.article-doc ul li {
  position: relative;
  margin-bottom: 5px;
}
.article-doc dl dd > span,
.article-doc dl li > span,
.article-doc ol dd > span,
.article-doc ol li > span,
.article-doc ul dd > span,
.article-doc ul li > span {
  display: block;
  position: absolute;
  top: 0;
  left: -40px;
}
.article-doc dl ol,
.article-doc ol ol,
.article-doc ul ol {
  list-style: decimal;
  margin: 10px 0;
}
.article-doc dl li,
.article-doc ol li,
.article-doc ul li {
  line-height: 1.3em;
  border-radius: 3px;
  padding: 5px 10px;
}
.article-doc details {
  padding: 30px;
  background-color: var(--background);
  color: var(--default-text);
}
.article-doc details ol li {
  margin-bottom: 5px;
}
.article-doc details ul {
  list-style: none;
  padding-left: 0;
}
.article-doc details ul li {
  margin-bottom: 5px;
}
.article-doc details ul li a {
  color: var(--default-text);
}
.article-doc details summary h1,
.article-doc details summary h2,
.article-doc details summary h3,
.article-doc details summary h4,
.article-doc details summary h5,
.article-doc details summary h6 {
  margin: 0;
  display: inline-block;
}
.article-doc img.top-image {
  margin: 40px 0 20px;
}
@media screen and (max-width: 720px) {
  .article-doc {
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
  }
  .article-doc h1 span,
.article-doc h2 span,
.article-doc h3 span,
.article-doc h4 span,
.article-doc h5 span,
.article-doc h6 span,
.article-doc p span {
    font-size: 0.8em;
    font-weight: 600;
    display: block;
  }
  .article-doc img.top-image {
    width: 240px;
    height: auto;
    margin: 40px auto;
  }
}

#big-dropper {
  position: fixed;
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  display: flex;
  opacity: 0;
  transition: all 300ms ease-in;
  align-items: center;
  justify-content: center;
}
#big-dropper-backdrop {
  background-color: var(--tile);
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 400ms ease-in-out;
}
#big-dropper h3 {
  word-break: break-all;
}
#big-dropper.shown {
  opacity: 1;
}
#big-dropper.shown .tile:not(.hidden) {
  margin-top: 0;
  opacity: 1;
}
#big-dropper .tile {
  display: flex;
  flex-direction: column;
  width: 500px;
  z-index: 1;
  position: relative;
  opacity: 1;
  transition: opacity 400ms ease-in-out, margin-top 400ms ease-in-out;
  margin-top: -200px;
}
#big-dropper .tile.hidden {
  margin-top: -200px;
}
#big-dropper .tile.article h2 {
  text-align: left;
}
#big-dropper .tile h2 {
  text-align: center;
}
#big-dropper .tile > .ma-icon svg {
  filter: none;
  fill: var(--primary);
  height: 180px;
  width: 180px;
  align-self: center;
}
#big-dropper .tile > .ma-icon svg + h2 {
  text-align: center;
}
#big-dropper .tile #file-info {
  border: var(--dashed-border);
  padding: var(--space-small);
  margin-bottom: var(--tile-margin);
  max-width: 100%;
}
#big-dropper .tile #file-info p,
#big-dropper .tile #file-info p span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
#big-dropper .tile #file-info p:last-of-type,
#big-dropper .tile #file-info p span:last-of-type {
  margin-bottom: 0;
}
#big-dropper .tile > button:first-child {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  position: absolute;
  right: var(--space-default);
  cursor: pointer;
  top: var(--space-default);
}
#big-dropper .tile fieldset,
#big-dropper .tile .button-bar {
  width: 100%;
}

.button {
  text-decoration: none;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}
.button.primary {
  background: var(--button-background-primary);
  border: var(--button-border-primary);
  color: var(--button-color-primary);
  border-radius: var(--button-radius);
  font-size: 15px;
  padding: var(--space-micro) var(--space-mega);
  user-select: none;
}
.button.primary .ma-icon {
  margin: 0;
}
.button.primary .ma-icon svg {
  height: 18px;
  width: 18px;
  filter: brightness(1);
}
.button.primary svg path {
  fill: var(--button-color-primary);
}
.button.primary:hover {
  background-color: var(--button-hover-primary);
  cursor: pointer;
  text-decoration: none;
}
.button.primary:active {
  background-color: var(--button-active-primary);
}
.button.primary.disabled, .button.primary:disabled {
  background-color: var(--button-disabled-primary);
  opacity: 0.5;
  cursor: not-allowed;
}
.button.primary.no-hover:hover {
  background-color: var(--button-background-primary);
  cursor: default;
  outline: none;
}
.button.primary.destructible:not(:disabled) {
  position: relative;
}
.button.primary.destructible:not(:disabled):hover ::after {
  content: "";
  top: 0;
  right: 0;
  height: 14px;
  width: 14px;
  border: var(--button-border-primary);
  border-radius: 50%;
  position: absolute;
  margin-right: -7px;
  margin-top: -7px;
  background: var(--white);
  background-image: url("/static/svg/icons/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}
.button.mid {
  padding: var(--space-nano) var(--space-large);
}
.button.mid.icon, .button.small.icon {
  padding: var(--space-nano);
}
.button.icon {
  padding: var(--space-nano);
  display: grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
}
.button.small {
  padding: var(--space-nano) var(--space-small);
}
.button.strech {
  width: 100%;
}
.button.secondary {
  background: var(--button-background-secondary);
  border: var(--button-border-secondary);
  color: var(--button-color-secondary);
  border-radius: var(--button-radius);
  font-size: 15px;
  padding: var(--space-micro) var(--space-mega);
  user-select: none;
}
.button.secondary .ma-icon {
  margin: 0;
}
.button.secondary .ma-icon svg {
  height: 18px;
  width: 18px;
  filter: brightness(1);
}
.button.secondary svg path {
  fill: var(--button-color-secondary);
}
.button.secondary:hover {
  background-color: var(--button-hover-secondary);
  cursor: pointer;
  text-decoration: none;
}
.button.secondary:active {
  background-color: var(--button-active-secondary);
}
.button.secondary.disabled, .button.secondary:disabled {
  background-color: var(--button-disabled-secondary);
  opacity: 0.5;
  cursor: not-allowed;
}
.button.secondary.no-hover:hover {
  background-color: var(--button-background-secondary);
  cursor: default;
  outline: none;
}
.button.secondary.destructible:not(:disabled) {
  position: relative;
}
.button.secondary.destructible:not(:disabled):hover ::after {
  content: "";
  top: 0;
  right: 0;
  height: 14px;
  width: 14px;
  border: var(--button-border-secondary);
  border-radius: 50%;
  position: absolute;
  margin-right: -7px;
  margin-top: -7px;
  background: var(--white);
  background-image: url("/static/svg/icons/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}
.button.mid {
  padding: var(--space-nano) var(--space-large);
}
.button.mid.icon, .button.small.icon {
  padding: var(--space-nano);
}
.button.icon {
  padding: var(--space-nano);
  display: grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
}
.button.small {
  padding: var(--space-nano) var(--space-small);
}
.button.strech {
  width: 100%;
}
.button.danger {
  background: var(--button-background-danger);
  border: var(--button-border-danger);
  color: var(--button-color-danger);
  border-radius: var(--button-radius);
  font-size: 15px;
  padding: var(--space-micro) var(--space-mega);
  user-select: none;
}
.button.danger .ma-icon {
  margin: 0;
}
.button.danger .ma-icon svg {
  height: 18px;
  width: 18px;
  filter: brightness(1);
}
.button.danger svg path {
  fill: var(--button-color-danger);
}
.button.danger:hover {
  background-color: var(--button-hover-danger);
  cursor: pointer;
  text-decoration: none;
}
.button.danger:active {
  background-color: var(--button-active-danger);
}
.button.danger.disabled, .button.danger:disabled {
  background-color: var(--button-disabled-danger);
  opacity: 0.5;
  cursor: not-allowed;
}
.button.danger.no-hover:hover {
  background-color: var(--button-background-danger);
  cursor: default;
  outline: none;
}
.button.danger.destructible:not(:disabled) {
  position: relative;
}
.button.danger.destructible:not(:disabled):hover ::after {
  content: "";
  top: 0;
  right: 0;
  height: 14px;
  width: 14px;
  border: var(--button-border-danger);
  border-radius: 50%;
  position: absolute;
  margin-right: -7px;
  margin-top: -7px;
  background: var(--white);
  background-image: url("/static/svg/icons/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}
.button.mid {
  padding: var(--space-nano) var(--space-large);
}
.button.mid.icon, .button.small.icon {
  padding: var(--space-nano);
}
.button.icon {
  padding: var(--space-nano);
  display: grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
}
.button.small {
  padding: var(--space-nano) var(--space-small);
}
.button.strech {
  width: 100%;
}
.button.warning {
  background: var(--button-background-warning);
  border: var(--button-border-warning);
  color: var(--button-color-warning);
  border-radius: var(--button-radius);
  font-size: 15px;
  padding: var(--space-micro) var(--space-mega);
  user-select: none;
}
.button.warning .ma-icon {
  margin: 0;
}
.button.warning .ma-icon svg {
  height: 18px;
  width: 18px;
  filter: brightness(1);
}
.button.warning svg path {
  fill: var(--button-color-warning);
}
.button.warning:hover {
  background-color: var(--button-hover-warning);
  cursor: pointer;
  text-decoration: none;
}
.button.warning:active {
  background-color: var(--button-active-warning);
}
.button.warning.disabled, .button.warning:disabled {
  background-color: var(--button-disabled-warning);
  opacity: 0.5;
  cursor: not-allowed;
}
.button.warning.no-hover:hover {
  background-color: var(--button-background-warning);
  cursor: default;
  outline: none;
}
.button.warning.destructible:not(:disabled) {
  position: relative;
}
.button.warning.destructible:not(:disabled):hover ::after {
  content: "";
  top: 0;
  right: 0;
  height: 14px;
  width: 14px;
  border: var(--button-border-warning);
  border-radius: 50%;
  position: absolute;
  margin-right: -7px;
  margin-top: -7px;
  background: var(--white);
  background-image: url("/static/svg/icons/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}
.button.mid {
  padding: var(--space-nano) var(--space-large);
}
.button.mid.icon, .button.small.icon {
  padding: var(--space-nano);
}
.button.icon {
  padding: var(--space-nano);
  display: grid;
  place-items: center;
  min-width: 28px;
  min-height: 28px;
}
.button.small {
  padding: var(--space-nano) var(--space-small);
}
.button.strech {
  width: 100%;
}

.block {
  margin-bottom: var(--space-small);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background-color: var(--tile);
}
.block.active {
  order: -1;
}
.block.expandable > h4 {
  cursor: pointer;
}
.block.expandable > h4::after {
  content: " ";
  height: 20px;
  position: absolute;
  width: 20px;
  background-image: url("/static/svg/icons/chevron_right.svg");
  right: 10px;
  top: 1px;
  filter: brightness(1);
}
.block.expandable:not(.expanded) .content {
  display: none;
}
.block.expanded h4:after {
  transform: rotate(90deg);
}
.block h4 {
  background: var(--primary);
  color: var(--white);
  padding: var(--space-nano) var(--space-micro);
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  position: relative;
  padding-right: var(--space-large);
}
.block h4 span:first-child {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 50px;
}
.block h4 span:last-child {
  font-size: 0.8em;
  font-weight: 400;
}
.block .content {
  box-sizing: border-box;
  border: var(--input-border);
  border-top: 0;
  padding: var(--space-nano) var(--space-micro);
}
.block .content > .block:last-child {
  margin-bottom: 0;
}
.block .content .key-value {
  flex: 1;
}

.code-block {
  border: var(--input-border);
  margin-bottom: var(--space-small);
}
.code-block__title {
  background: var(--primary);
  color: var(--white);
  padding: var(--space-nano) var(--space-micro);
}
.code-block__expand {
  text-align: center;
}
.code-block__expand button {
  background: var(--tile);
  color: var(--default-text);
  border: none;
  padding: 5px;
  margin: 0;
  width: 100%;
  cursor: pointer;
  font-size: 14px;
  border-top: var(--input-border);
}
.code-block__expand button:hover {
  cursor: pointer;
  font-weight: 500;
}
.code-block__line {
  display: flex;
}
.code-block__line:first-child > div {
  padding-top: 5px;
}
.code-block__line:last-child > div {
  padding-bottom: 5px;
}
.code-block__line__number {
  background: var(--tile);
  color: var(--default-text);
  min-width: 35px;
  padding-right: var(--space-micro);
  text-align: right;
  user-select: none;
  border-right: var(--input-border);
}
.code-block__line__content {
  margin-left: var(--space-micro);
  padding: 0 var(--space-micro);
  white-space: pre-wrap;
  font-family: "Roboto Mono", monospace;
  word-break: break-all;
}

.modal {
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: fixed;
  display: flex;
  align-items: center;
  z-index: 20;
}
.modal.out .modal-backdrop {
  opacity: 0;
}
.modal.out .tile {
  opacity: 0;
  margin-top: -200px;
}
.modal-backdrop {
  background-color: var(--tile);
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: opacity 400ms ease-in-out;
}
.modal > .tile {
  min-width: 620px;
  max-width: 700px;
  opacity: 1;
  margin-top: 0px;
  z-index: 20;
  margin: 0 auto;
  transition: opacity 400ms ease-in-out, margin-top 400ms ease-in-out;
  box-sizing: border-box;
  position: relative;
}
.modal > .tile > button {
  position: absolute;
  top: var(--space-default);
  right: var(--space-default);
  background: transparent;
  border: none;
  cursor: pointer;
}
.modal > .tile textarea {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 100%;
}

@media only screen and (max-width: 600px) {
  .modal > .tile {
    min-width: auto;
    max-width: none;
    width: 100%;
    margin: var(--space-default);
  }
}
.dropzone {
  border: var(--dashed-border);
  padding: var(--space-small);
  font-size: var(--size-default);
  margin-bottom: var(--space-default);
}
.dropzone button {
  background: none;
  border: none;
  text-decoration: underline;
  padding: 0;
  color: var(--text-default);
  cursor: pointer;
}

#file-info-holder .toast {
  margin-top: var(--space-small);
}

.checkbox {
  margin-right: var(--space-small);
}
.checkbox.centered {
  align-self: center;
}
.checkbox.small label {
  width: 28px;
  height: 16px;
  border-radius: 9px;
  border-width: 1px;
}
.checkbox.small label div {
  border-width: 1px;
  height: 12px;
  width: 12px;
  top: 1px;
  left: 1px;
}
.checkbox label {
  width: 56px;
  height: 32px;
  border: 2px solid var(--primary);
  border-radius: 18px;
  position: relative;
  display: block;
}
.checkbox label div {
  border: 2px solid var(--primary);
  height: 24px;
  width: 24px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  background: var(--white);
}
.checkbox input {
  display: none;
}
.checkbox input:checked + label {
  background: var(--primary);
}
.checkbox input:checked + label div {
  left: auto;
  right: 2px;
}

.clipboard {
  width: auto;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.clipboard p {
  min-width: 0;
  word-break: break-all;
  margin-right: var(--space-small);
}
.clipboard button {
  margin-left: auto;
}
.clipboard input {
  display: none;
}

fieldset {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column-reverse;
}
fieldset label {
  display: block;
  color: var(--default-text);
  font-size: var(--input-label-size);
  margin-bottom: var(--space-nano);
}
fieldset label > span {
  float: right;
  background-color: var(--background);
  padding: 2px;
  border-radius: 4px;
}
fieldset textarea,
fieldset input,
fieldset select {
  display: block;
  padding: var(--space-micro) var(--space-small);
  border-radius: var(--input-radius);
  border: var(--input-border);
  font-size: var(--input-label-size);
  background: var(--input-background);
  color: var(--default-text);
}
fieldset textarea:focus,
fieldset input:focus,
fieldset select:focus {
  background: var(--input-background);
  color: var(--default-text);
}
fieldset textarea::placeholder,
fieldset input::placeholder,
fieldset select::placeholder {
  color: var(--meta-text);
}
fieldset textarea[disabled],
fieldset input[disabled],
fieldset select[disabled] {
  background: var(--background);
  color: var(--disabled);
  border-color: var(--disabled);
}
fieldset textarea[disabled] + label,
fieldset input[disabled] + label,
fieldset select[disabled] + label {
  color: var(--disabled);
}
fieldset span {
  color: var(--meta-text);
  font-size: var(--input-label-size);
  margin-bottom: var(--space-micro);
}

.flex-wrapper {
  display: flex;
  flex-wrap: wrap;
}
.flex-wrapper > * {
  margin-right: 5px;
}

div.key-value {
  overflow: hidden;
  font-size: var(--size-default);
  display: flex;
  flex-direction: column;
  width: 100%;
}
div.key-value h4 {
  font-size: var(--size-big);
}
div.key-value > div {
  flex: 1;
  display: flex;
  padding: var(--space-nano) 0;
}
div.key-value > div .clipboard {
  width: 100%;
}
div.key-value > div .clipboard:hover {
  background: var(--hover);
}
div.key-value > div > div:first-child {
  width: 200px;
  flex: none;
  font-weight: 600;
}
div.key-value > div > div:not(:first-child) {
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-direction: column;
  display: flex;
  overflow: hidden;
  gap: var(--space-nano);
}
div.key-value > div > div:not(:first-child).wrap {
  white-space: normal;
  display: block;
  overflow: visible;
  word-break: break-all;
  padding-right: 10px;
}
div.key-value > div > div:not(:first-child) span p {
  max-width: 90%;
}

div.list, div.entity-list,
ul.list,
ul.entity-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
div.list > a, div.entity-list > a,
ul.list > a,
ul.entity-list > a {
  display: list-item;
  text-decoration: none;
  font-size: var(--size-default);
}
div.list > a:hover, div.entity-list > a:hover,
ul.list > a:hover,
ul.entity-list > a:hover {
  background: var(--hover);
}
div.list.status > li, div.status.entity-list > li,
ul.list.status > li,
ul.status.entity-list > li {
  border-left: 5px solid var(--background);
}
div.list.status > li.alert, div.status.entity-list > li.alert,
ul.list.status > li.alert,
ul.status.entity-list > li.alert {
  border-left-color: var(--red);
}
div.list.status > li.warning, div.status.entity-list > li.warning,
ul.list.status > li.warning,
ul.status.entity-list > li.warning {
  border-left-color: var(--yellow);
}
div.list.status > li.info, div.status.entity-list > li.info,
ul.list.status > li.info,
ul.status.entity-list > li.info {
  border-left-color: var(--primary);
}
div.list > a, div.entity-list > a, div.list > li, div.entity-list > li,
ul.list > a,
ul.entity-list > a,
ul.list > li,
ul.entity-list > li {
  border-bottom: var(--list-border);
  padding: var(--space-small) 0;
}
div.list > a .fold, div.entity-list > a .fold, div.list > li .fold, div.entity-list > li .fold,
ul.list > a .fold,
ul.entity-list > a .fold,
ul.list > li .fold,
ul.entity-list > li .fold {
  display: none;
}
div.list > a.expanded .fold, div.entity-list > a.expanded .fold, div.list > li.expanded .fold, div.entity-list > li.expanded .fold,
ul.list > a.expanded .fold,
ul.entity-list > a.expanded .fold,
ul.list > li.expanded .fold,
ul.entity-list > li.expanded .fold {
  display: block;
  margin-top: var(--space-small);
}
div.list > a .overflow, div.entity-list > a .overflow, div.list > li .overflow, div.entity-list > li .overflow,
ul.list > a .overflow,
ul.entity-list > a .overflow,
ul.list > li .overflow,
ul.entity-list > li .overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
div.list > a .button-bar, div.entity-list > a .button-bar, div.list > li .button-bar, div.entity-list > li .button-bar,
ul.list > a .button-bar,
ul.entity-list > a .button-bar,
ul.list > li .button-bar,
ul.entity-list > li .button-bar {
  flex-wrap: nowrap;
}
div.list > a.hover:hover, div.entity-list > a.hover:hover, div.list > li.hover:hover, div.entity-list > li.hover:hover,
ul.list > a.hover:hover,
ul.entity-list > a.hover:hover,
ul.list > li.hover:hover,
ul.entity-list > li.hover:hover {
  background-color: var(--hover);
}
div.list > a.clickable, div.entity-list > a.clickable, div.list > li.clickable, div.entity-list > li.clickable,
ul.list > a.clickable,
ul.entity-list > a.clickable,
ul.list > li.clickable,
ul.entity-list > li.clickable {
  position: relative;
}
div.list > a.clickable > .hbox:hover, div.entity-list > a.clickable > .hbox:hover, div.list > li.clickable > .hbox:hover, div.entity-list > li.clickable > .hbox:hover,
ul.list > a.clickable > .hbox:hover,
ul.entity-list > a.clickable > .hbox:hover,
ul.list > li.clickable > .hbox:hover,
ul.entity-list > li.clickable > .hbox:hover {
  cursor: pointer;
}
div.list > a.clickable::before, div.entity-list > a.clickable::before, div.list > li.clickable::before, div.entity-list > li.clickable::before,
ul.list > a.clickable::before,
ul.entity-list > a.clickable::before,
ul.list > li.clickable::before,
ul.entity-list > li.clickable::before {
  content: " ";
  height: 20px;
  position: absolute;
  width: 20px;
  background-image: url("/static/svg/icons/chevron_right.svg");
  left: 10px;
  filter: brightness(0);
}
div.list > a.expanded.clickable:before, div.entity-list > a.expanded.clickable:before, div.list > li.expanded.clickable:before, div.entity-list > li.expanded.clickable:before,
ul.list > a.expanded.clickable:before,
ul.entity-list > a.expanded.clickable:before,
ul.list > li.expanded.clickable:before,
ul.entity-list > li.expanded.clickable:before {
  transform: rotate(90deg);
}
div.list > a.active, div.entity-list > a.active, div.list > li.active, div.entity-list > li.active,
ul.list > a.active,
ul.entity-list > a.active,
ul.list > li.active,
ul.entity-list > li.active {
  font-weight: 600;
}
div.list > a.nano, div.entity-list > a.nano, div.list > li.nano, div.entity-list > li.nano,
ul.list > a.nano,
ul.entity-list > a.nano,
ul.list > li.nano,
ul.entity-list > li.nano {
  padding: var(--space-nano) 0;
}
div.list > a.micro, div.entity-list > a.micro, div.list > li.micro, div.entity-list > li.micro,
ul.list > a.micro,
ul.entity-list > a.micro,
ul.list > li.micro,
ul.entity-list > li.micro {
  padding: var(--space-micro) 0;
}
div.list > a.small, div.entity-list > a.small, div.list > li.small, div.entity-list > li.small,
ul.list > a.small,
ul.entity-list > a.small,
ul.list > li.small,
ul.entity-list > li.small {
  padding: var(--space-small) 0;
}
div.list > a:last-child, div.entity-list > a:last-child, div.list > li:last-child, div.entity-list > li:last-child,
ul.list > a:last-child,
ul.entity-list > a:last-child,
ul.list > li:last-child,
ul.entity-list > li:last-child {
  border-bottom: none;
}
div.list > a a, div.entity-list > a a, div.list > li a, div.entity-list > li a,
ul.list > a a,
ul.entity-list > a a,
ul.list > li a,
ul.entity-list > li a {
  color: var(--default-text);
  text-decoration: none;
  font-size: var(--size-default);
}
div.list > a a.active, div.entity-list > a a.active, div.list > li a.active, div.entity-list > li a.active,
ul.list > a a.active,
ul.entity-list > a a.active,
ul.list > li a.active,
ul.entity-list > li a.active {
  font-weight: 600;
}

[data-theme=dark] ul.list > li.clickable::before, [data-theme=dark] ul.entity-list > li.clickable::before {
  filter: brightness(1);
}

@media only screen and (max-width: 600px) {
  ul.list > li .button-bar, ul.entity-list > li .button-bar {
    flex-wrap: wrap;
  }
}
.loader {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  background: rgb(255, 255, 255);
  display: flex;
  flex-direction: column;
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
  z-index: 1;
  margin: var(--space-default);
  background: var(--tile);
}
.loader-hidden {
  opacity: 0;
}
.loader-holder {
  display: flex;
  align-items: center;
  height: 100%;
  margin: 0 auto;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-large);
}
.loader-holder__icon {
  background-color: var(--background);
  padding: var(--space-default);
  margin-bottom: var(--space-small);
  border-radius: 50%;
}
.loader-holder__spinner {
  border-radius: 50%;
  padding: var(--space-default);
  background: var(--background);
  margin-bottom: var(--space-micro);
}
.loader-holder__spinner i,
.loader-holder__spinner i:before {
  font-size: var(--icon-mid);
}

@keyframes radialSpinnerRota {
  0% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@keyframes radialSpinnerFill {
  0% {
    opacity: 1;
  }
  100%, 50% {
    opacity: 0;
  }
}
@keyframes radialSpinnerMask {
  0% {
    opacity: 0;
  }
  100%, 50% {
    opacity: 1;
  }
}
.radial-spinner {
  width: 16px;
  height: 16px;
  position: relative;
  background: transparent;
}
.radial-spinner__fill {
  width: 50%;
  height: 100%;
  transform-origin: 100% 50%;
  position: absolute;
  background: #ddd;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.radial-spinner__spinner {
  border-radius: 125px 0 0 125px;
  z-index: 200;
  border-right: none;
  animation: radialSpinnerRota 10s linear 1;
}
.radial-spinner__filler {
  border-radius: 0 125px 125px 0;
  z-index: 100;
  border-left: none;
  animation: radialSpinnerFill 10s steps(1, end) 1;
  left: 50%;
  opacity: 0;
}
.radial-spinner__mask {
  width: 50%;
  height: 100%;
  position: absolute;
  z-index: 300;
  opacity: 1;
  background: inherit;
  animation: radialSpinnerMask 10s steps(1, end) 1;
}

.main-nav {
  display: flex;
  width: 100%;
  max-width: var(--app-max-width);
  margin: 0 auto;
  display: flex;
  box-sizing: border-box;
  padding: var(--space-micro) 0;
}
.main-nav #toggle_menu {
  position: absolute;
  top: var(--space-small);
  right: var(--space-default);
  height: 34px;
  width: 34px;
  padding: var(--space-nano);
  user-select: none;
}
.main-nav #toggle_menu span {
  display: block;
  min-width: 24px;
  min-height: 3px;
  background-color: #fff;
  margin-bottom: 7px;
  transition: all 300ms ease-in-out;
  user-select: none;
}
.main-nav #toggle_menu.toggled span {
  position: absolute;
}
.main-nav #toggle_menu.toggled span:nth-child(1) {
  transform: rotate(45deg);
  top: 14px;
  left: 4px;
}
.main-nav #toggle_menu.toggled span:nth-child(2) {
  opacity: 0;
}
.main-nav #toggle_menu.toggled span:nth-child(3) {
  transform: rotate(-45deg);
  top: 14px;
  left: 4px;
}
.main-nav .powered-by {
  font-size: var(--size-default);
  display: flex;
  align-items: center;
  justify-items: center;
  margin-left: auto;
}
.main-nav .powered-by a {
  margin-left: 10px;
}
.main-nav i {
  font-style: normal;
}
.main-nav button {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  outline: inherit;
}
.main-nav #upsell_button {
  display: flex;
  flex-direction: row;
  width: auto;
  align-items: center;
  padding: var(--space-nano) var(--space-micro);
}
.main-nav #upsell_button:hover {
  color: var(--white);
}
.main-nav #upsell_button .ma-icon {
  margin-left: var(--space-micro);
}
.main-nav #upsell_button .ma-icon svg {
  height: 24px;
  width: 24px;
}
.main-nav__logo-holder {
  display: flex;
  margin-right: var(--space-micro);
  flex-direction: column;
}
.main-nav__logo-holder:hover {
  text-decoration: none;
}
.main-nav__logo-holder .versions {
  margin-bottom: 0;
  height: 20px;
  margin-top: var(--space-micro);
}
.main-nav__logo-holder .versions span {
  margin-bottom: 0;
  background-color: var(--white);
  font-size: 10px;
}
.main-nav__logo-holder--logo {
  height: 40px;
}
.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.main-nav__main {
  display: flex;
  flex-direction: row;
}
.main-nav__main li {
  display: flex;
  align-items: center;
  align-self: center;
  height: 40px;
  margin: 0 5px;
}
.main-nav__main li:first-child {
  margin-left: 20px;
}
.main-nav__main li.active {
  background-size: 20px;
}
.main-nav__main li.active a {
  color: var(--primary);
}
.main-nav__main li a {
  padding: 0 20px;
  color: var(--default-text);
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.main-nav__main li a:hover {
  color: var(--primary);
}
.main-nav__main li a sup {
  color: var(--red);
  position: absolute;
  right: -20px;
  top: 5px;
}
.main-nav__secondary {
  display: flex;
  flex-direction: row;
  height: fit-content;
  align-items: center;
  height: 40px;
}
.main-nav__secondary .powered-by {
  color: var(--white);
  margin-left: auto;
  font-weight: bold;
}
.main-nav__secondary .powered-by img {
  margin-left: 20px;
}
.main-nav__secondary .search {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}
.main-nav__secondary .search input[type=search] {
  background: var(--white);
  flex: 1;
  padding: var(--space-micro) var(--space-default) var(--space-micro) var(--space-large);
  font-size: 14px;
  border: 0;
  border-radius: 2px;
  transition: padding 200ms ease-in-out;
  position: relative;
}
.main-nav__secondary .search input[type=search]:focus, .main-nav__secondary .search input[type=search]:valid {
  padding: var(--space-micro) var(--space-default) var(--space-micro) var(--space-large);
}
.main-nav__secondary .search:before {
  content: "";
  width: 25px;
  height: 25px;
  position: absolute;
  background-image: url("/static/svg/icons/search.svg");
  background-size: 100%;
  left: var(--space-nano);
  filter: brightness(0);
  z-index: 1;
  opacity: 0.6;
}
.main-nav__secondary li {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 var(--space-micro);
}
.main-nav__secondary li:first-of-type {
  margin-left: 20px;
}
.main-nav__secondary li:last-child {
  margin-right: 0px;
}
.main-nav__secondary li:last-child a,
.main-nav__secondary li:last-child button {
  width: 30px;
  padding: 0 0 0 5px;
}
.main-nav__secondary li > a, .main-nav__secondary li > button, .main-nav__secondary li > form {
  color: var(--default-text);
  text-decoration: none;
  text-align: center;
  font-size: 22px;
  font-style: normal;
  padding: 0 5px;
  display: flex;
  margin: 0;
  flex-direction: column;
  flex: 1;
}
.main-nav__secondary li > a:hover, .main-nav__secondary li > button:hover, .main-nav__secondary li > form:hover {
  color: var(--primary);
}
.main-nav__secondary li > a:hover svg, .main-nav__secondary li > button:hover svg, .main-nav__secondary li > form:hover svg {
  fill: var(--primary);
}
.main-nav__secondary li > a i, .main-nav__secondary li > button i, .main-nav__secondary li > form i {
  flex: 1;
}
.main-nav__secondary li > a .ma-icon, .main-nav__secondary li > button .ma-icon, .main-nav__secondary li > form .ma-icon {
  height: auto;
}
.main-nav__secondary li > a.active svg, .main-nav__secondary li > button.active svg, .main-nav__secondary li > form.active svg {
  fill: var(--primary);
  filter: none;
}
.main-nav__secondary li > a span, .main-nav__secondary li > button span, .main-nav__secondary li > form span {
  font-size: 12px;
  font-weight: 600;
  margin-top: -2px;
}
.main-nav__secondary li > a span.extra-content, .main-nav__secondary li > button span.extra-content, .main-nav__secondary li > form span.extra-content {
  font-size: 0.8em;
  margin-left: 5px;
}

@media only screen and (min-width: 600px) {
  #toggle_menu {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .main-nav {
    flex-direction: column;
    max-height: 62px;
    overflow: hidden;
    transition: max-height 300ms ease-in-out;
    align-items: flex-start;
  }
  .main-nav.shown {
    max-height: 600px;
  }
  .main-nav__main {
    flex-direction: column;
    width: 100%;
  }
  .main-nav__main li:first-child {
    margin-top: var(--space-default);
    margin-left: 0;
  }
  .main-nav__main li:last-child {
    margin-bottom: var(--space-default);
  }
  .main-nav__secondary {
    justify-content: space-around;
    flex-wrap: wrap;
    height: auto;
  }
  .main-nav__secondary .search {
    width: 100%;
    margin-bottom: var(--space-small);
  }
  .main-nav__secondary li:first-child {
    margin-left: 0;
  }
}
.simple-value {
  padding: 10px;
  display: inline-block;
  margin: 0 7.5px 7.5px 0;
  background: var(--primary);
  color: var(--white);
}
.simple-value.inactive {
  filter: grayscale(80%);
}
.simple-value__button-holder {
  align-items: center;
  display: flex;
  margin-left: 20px;
}
.simple-value__label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
}
.simple-value__content {
  display: block;
  font-size: 18px;
}

.pagination {
  display: flex;
  justify-content: space-between;
  height: 24px;
  align-items: center;
}
.pagination > div {
  align-items: center;
  display: flex;
  gap: var(--space-small);
}
.pagination > div a {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}
.pagination > div a:hover {
  background-color: var(--hover);
}

.status-error {
  background: var(--white);
  width: 100%;
  height: auto;
  margin: 20px;
  padding: 40px 40px 40px 180px;
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
}
.status-error__title {
  margin-top: 20px;
  margin-bottom: 10px;
  font-size: 90px;
  line-height: 108px;
}
.status-error__description {
  margin-top: 0;
  line-height: 1.2em;
  font-weight: 600;
}
.status-error__description p {
  max-width: 660px;
  font-weight: 600;
  font-size: 20.88px;
}
.status-error a {
  margin-top: 40px;
}
.status-error__action {
  align-self: baseline;
}

@media only screen and (max-width: 1000px) {
  .status-error {
    padding-left: 40px;
    height: 100%;
  }
  .status-error__title {
    font-size: 40px;
  }
  .status-error__description {
    font-size: 18px;
  }
}
.tab-view {
  position: relative;
  display: grid;
  margin-left: auto;
}
.tab-view.both, .tab-view.left, .tab-view.right {
  margin-right: 10px;
}
.tab-view:after, .tab-view:before {
  font-weight: 600;
  position: absolute;
  top: 50%;
  font-size: 22px;
  margin-top: -15px;
  filter: brightness(0);
  display: inline-block;
  height: 30px;
  background-size: 100%;
  width: 30px;
}
.tab-view.both:before, .tab-view.right:before {
  content: "";
  left: -20px;
  background-image: url("/static/svg/icons/chevron_left.svg");
}
.tab-view.both:after, .tab-view.left:after {
  content: "";
  right: -20px;
  background-image: url("/static/svg/icons/chevron_right.svg");
}
.tab-view__bar {
  display: flex;
  overflow-x: auto;
  overflow: -moz-scrollbars-none;
}
.tab-view__bar.overflown {
  margin: 0 20px;
}
.tab-view__bar::-webkit-scrollbar {
  display: none;
}
.tab-view__bar > a, .tab-view__bar > button,
.tab-view__bar .tab-button {
  -webkit-appearance: none;
  padding: var(--space-micro) var(--space-default);
  margin-right: var(--space-nano);
  text-decoration: none;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  text-align: center;
  text-shadow: none;
  font-size: 14px;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-big);
  border: none;
  color: var(--default-text);
  background: var(--tile);
}
.tab-view__bar > a:hover, .tab-view__bar > button:hover,
.tab-view__bar .tab-button:hover {
  background: var(--hover);
}
.tab-view__bar > a:focus, .tab-view__bar > button:focus,
.tab-view__bar .tab-button:focus {
  outline: none;
}
.tab-view__bar > a sup, .tab-view__bar > button sup,
.tab-view__bar .tab-button sup {
  color: var(--red);
  font-weight: 600;
  position: absolute;
  top: 5px;
  right: 10px;
}
.tab-view__bar > a:last-child, .tab-view__bar > button:last-child,
.tab-view__bar .tab-button:last-child {
  margin-right: 0;
}
.tab-view__bar > a span, .tab-view__bar > button span,
.tab-view__bar .tab-button span {
  background: var(--white);
  padding: 5px 10px;
}
.tab-view__bar > a.active, .tab-view__bar > button.active,
.tab-view__bar .tab-button.active {
  font-weight: bold;
  background: var(--active-tab-background);
  color: var(--active-tab-color);
}
.tab-view__bar > a.active:hover, .tab-view__bar > button.active:hover,
.tab-view__bar .tab-button.active:hover {
  background: var(--active-tab-hover);
}
.tab-view__bar > a.disabled, .tab-view__bar > a:disabled, .tab-view__bar > button.disabled, .tab-view__bar > button:disabled,
.tab-view__bar .tab-button.disabled,
.tab-view__bar .tab-button:disabled {
  pointer-events: none;
  opacity: 0.5;
}
.tab-view__view__tab {
  display: none;
  padding: 0;
}
.tab-view__view__tab.active {
  display: block;
}

[data-theme=dark] .tab-view:after, [data-theme=dark] .tab-view:before {
  filter: brightness(1);
}

@media only screen and (max-width: 600px) {
  .tab-view__bar a {
    flex: none;
  }
}
.table {
  width: 100%;
  overflow: scroll;
  border-collapse: collapse;
  box-sizing: content-box;
  display: table;
}
.table.bordered {
  border: var(--list-border);
  box-sizing: border-box;
  border-radius: var(--radius-default);
}
.table #head {
  display: table-row;
}
.table #head > div {
  display: table-cell;
  padding: var(--space-micro) var(--space-small) var(--space-micro) var(--space-small);
  font-size: var(--size-default);
}
.table > a.row {
  display: table-row;
  border-bottom: var(--list-border);
  text-decoration: none;
}
.table > a.row:hover {
  background: var(--hover);
}
.table > a.row > div {
  padding: var(--space-micro) var(--space-small);
  display: table-cell;
  vertical-align: middle;
}
.table tbody tr:hover {
  background: var(--hover);
}
.table tr {
  font-size: var(--size-default);
}
.table tr:last-child td {
  border-bottom: none;
}
.table #head > div,
.table th {
  color: var(--meta-text);
  text-align: left;
  border-bottom: var(--list-border);
  font-weight: 400;
  padding: var(--space-micro) var(--space-small);
}
.table td {
  color: var(--default-text);
  white-space: nowrap;
  font-size: var(--size-default);
  border-bottom: var(--list-border);
  padding: var(--space-micro) var(--space-small);
}
.table td fieldset {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
}
.table td fieldset .button {
  flex: none;
  margin-right: var(--space-default);
}
.table td fieldset input,
.table td fieldset select {
  margin-right: var(--space-micro);
  flex: 1;
}
.table.micro tr td {
  padding: var(--space-micro) var(--space-small) var(--space-micro) var(--space-small);
}
.table.nano tr td {
  padding: var(--space-nano) var(--space-small) var(--space-nano) var(--space-small);
}

.tile-select {
  display: flex;
  flex-wrap: wrap;
  border: none;
  flex-direction: row;
}
.tile-select input:checked + label {
  background: var(--primary);
  color: var(--white);
}
.tile-select input:checked + label svg,
.tile-select input:checked + label img {
  filter: brightness(100%);
}
.tile-select input:checked + label:hover {
  background: var(--button-hover-primary);
  color: #fff !important;
}
.tile-select input.warning + label {
  background-color: var(--warning);
  color: var(--black);
}
.tile-select input.alert + label {
  background-color: var(--danger);
}
.tile-select .item {
  background: var(--background);
  width: 45px;
  height: 45px;
  margin-right: var(--space-nano);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}
.tile-select .item b,
.tile-select .item p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}
.tile-select .item b {
  font-size: var(--size-default);
}
.tile-select .item p {
  font-size: 10px;
}
.tile-select .item svg {
  margin-right: var(--space-micro);
  margin-left: var(--space-micro);
  height: 32px;
  width: 32px;
}
.tile-select .item svg,
.tile-select .item img {
  margin-right: var(--space-micro);
  margin-left: var(--space-micro);
  height: 32px;
  width: 32px;
  filter: brightness(0);
}
.tile-select .item:hover {
  background: var(--hover);
}
.tile-select .item:active {
  background: var(--light-grey);
}
.tile-select input {
  display: none;
}

[data-theme=dark] .tile-select img,
[data-theme=dark] .tile-select svg {
  filter: brightness(100) !important;
}

#notification-center {
  position: fixed;
  bottom: 15px;
  right: 15px;
  min-width: 420px;
  z-index: 1000;
  height: fit-content;
}
#notification-center .toast {
  max-width: 420px;
  transform: translateX(450px);
  transition: transform 0.5s;
  margin-bottom: 15px;
}
#notification-center .toast:last-child {
  margin-bottom: 0;
}
#notification-center .toast.in {
  transform: translateX(0);
}
#notification-center .toast .badge {
  margin-right: 7px;
}
@media screen and (max-width: 640px) {
  #notification-center {
    width: 100vw;
    min-width: unset;
    right: 0;
    bottom: 0;
  }
  #notification-center .toast {
    max-width: 100%;
    transform: translateY(450px);
  }
  #notification-center .toast.in {
    transform: translateY(0);
  }
}

.tooltip {
  position: absolute;
  box-sizing: border-box;
  font-size: var(--size-big);
  font-weight: 400;
  pointer-events: none;
  color: var(--black);
  text-shadow: none;
  max-width: 320px;
  background: var(--white);
  word-break: auto-phrase;
  z-index: 100;
  height: auto;
  overflow: hidden;
  border-radius: var(--tile-border-radius);
  box-shadow: var(--tile-shadow);
  padding: var(--space-small) var(--space-default);
  display: flex;
  align-items: center;
}
.tooltip.position-bottom, .tooltip.position-top {
  transform: translateX(-50%);
}
.tooltip.position-left, .tooltip.position-right {
  transform: translateY(-50%);
}

.tags {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: calc(var(--size-default) - var(--space-nano));
}
.tags.small a,
.tags.small span {
  min-width: 80px;
}
.tags.nano a,
.tags.nano span {
  padding: var(--space-nano) var(--space-micro);
  font-size: 11px;
  max-width: none;
  min-width: auto;
}
.tags.stretch a,
.tags.stretch span {
  width: 100%;
}
.tags.stretch a:last-child,
.tags.stretch span:last-child {
  margin-bottom: 0;
}
.tags a,
.tags span {
  background: var(--background);
  padding: var(--space-nano) var(--space-micro);
  margin-bottom: var(--space-nano);
  margin-right: var(--space-nano);
  text-decoration: none;
  color: var(--default-text);
  font-size: var(--size-default);
  text-align: center;
  min-width: 150px;
  border-radius: 12.5px;
  order: 5;
  font-weight: 600;
  text-transform: uppercase;
}
.tags a.destructible:not(:disabled),
.tags span.destructible:not(:disabled) {
  position: relative;
}
.tags a.destructible:not(:disabled):hover::after,
.tags span.destructible:not(:disabled):hover::after {
  content: "";
  border: 1px solid #ddd;
  top: 0;
  right: 0;
  height: 14px;
  width: 14px;
  border-radius: 50%;
  position: absolute;
  margin-right: -7px;
  margin-top: -7px;
  background: var(--white);
  background-image: url("/static/svg/icons/close.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}
.tags a.violet,
.tags span.violet {
  color: var(--tag-violet-text);
  background-color: var(--tag-violet-background);
  order: var(--tag-violet-importance);
}
.tags a.violet.hover:hover,
.tags span.violet.hover:hover {
  background-color: var(--tag-violet-hover);
}
.tags a.pink,
.tags span.pink {
  color: var(--tag-pink-text);
  background-color: var(--tag-pink-background);
  order: var(--tag-pink-importance);
}
.tags a.pink.hover:hover,
.tags span.pink.hover:hover {
  background-color: var(--tag-pink-hover);
}
.tags a.green,
.tags span.green {
  color: var(--tag-green-text);
  background-color: var(--tag-green-background);
  order: var(--tag-green-importance);
}
.tags a.green.hover:hover,
.tags span.green.hover:hover {
  background-color: var(--tag-green-hover);
}
.tags a.blue,
.tags span.blue {
  color: var(--tag-blue-text);
  background-color: var(--tag-blue-background);
  order: var(--tag-blue-importance);
}
.tags a.blue.hover:hover,
.tags span.blue.hover:hover {
  background-color: var(--tag-blue-hover);
}
.tags a.purple,
.tags span.purple {
  color: var(--tag-purple-text);
  background-color: var(--tag-purple-background);
  order: var(--tag-purple-importance);
}
.tags a.purple.hover:hover,
.tags span.purple.hover:hover {
  background-color: var(--tag-purple-hover);
}
.tags a.brown,
.tags span.brown {
  color: var(--tag-brown-text);
  background-color: var(--tag-brown-background);
  order: var(--tag-brown-importance);
}
.tags a.brown.hover:hover,
.tags span.brown.hover:hover {
  background-color: var(--tag-brown-hover);
}
.tags a.turquoise,
.tags span.turquoise {
  color: var(--tag-turquoise-text);
  background-color: var(--tag-turquoise-background);
  order: var(--tag-turquoise-importance);
}
.tags a.turquoise.hover:hover,
.tags span.turquoise.hover:hover {
  background-color: var(--tag-turquoise-hover);
}
.tags a.grey,
.tags span.grey {
  color: var(--tag-grey-text);
  background-color: var(--tag-grey-background);
  order: var(--tag-grey-importance);
}
.tags a.grey.hover:hover,
.tags span.grey.hover:hover {
  background-color: var(--tag-grey-hover);
}
.tags a.orange,
.tags span.orange {
  color: var(--tag-orange-text);
  background-color: var(--tag-orange-background);
  order: var(--tag-orange-importance);
}
.tags a.orange.hover:hover,
.tags span.orange.hover:hover {
  background-color: var(--tag-orange-hover);
}
.tags a.rose,
.tags span.rose {
  color: var(--tag-rose-text);
  background-color: var(--tag-rose-background);
  order: var(--tag-rose-importance);
}
.tags a.rose.hover:hover,
.tags span.rose.hover:hover {
  background-color: var(--tag-rose-hover);
}

.toast {
  padding: var(--space-small);
  border-radius: var(--toast-radius);
  margin-bottom: var(--space-micro);
  position: relative;
  transition: margin-top 400ms ease-in-out, opacity 400ms ease-in-out;
}
.toast.info {
  background: var(--toast-info);
  color: var(--toast-color-info);
  font-size: var(--size-default);
}
.toast.info [data-close-toast] {
  color: var(--toast-color-info);
}
.toast.info [data-close-toast] svg {
  fill: var(--toast-color-info);
}
.toast.info p {
  margin-bottom: 0;
}
.toast.warning {
  background: var(--toast-warning);
  color: var(--toast-color-warning);
  font-size: var(--size-default);
}
.toast.warning [data-close-toast] {
  color: var(--toast-color-warning);
}
.toast.warning [data-close-toast] svg {
  fill: var(--toast-color-warning);
}
.toast.warning p {
  margin-bottom: 0;
}
.toast.success {
  background: var(--toast-success);
  color: var(--toast-color-success);
  font-size: var(--size-default);
}
.toast.success [data-close-toast] {
  color: var(--toast-color-success);
}
.toast.success [data-close-toast] svg {
  fill: var(--toast-color-success);
}
.toast.success p {
  margin-bottom: 0;
}
.toast.danger {
  background: var(--toast-danger);
  color: var(--toast-color-danger);
  font-size: var(--size-default);
}
.toast.danger [data-close-toast] {
  color: var(--toast-color-danger);
}
.toast.danger [data-close-toast] svg {
  fill: var(--toast-color-danger);
}
.toast.danger p {
  margin-bottom: 0;
}
.toast-holder {
  margin-bottom: calc(var(--space-default) - var(--space-micro));
}
.toast [data-close-toast] {
  position: absolute;
  top: 0;
  right: 0;
  background: none;
  border: none;
  padding: var(--space-nano);
  cursor: pointer;
}
.toast .timer {
  animation: timer linear;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 5px;
  background-color: var(--primary);
}

@keyframes timer {
  0% {
    right: 0%;
  }
  100% {
    right: 100%;
  }
}
.entity-list {
  position: relative;
  display: flex;
  flex-direction: column;
}
.entity-list li {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.entity-list li input[type=checkbox] {
  display: none;
}
.entity-list li input[type=checkbox] + label {
  padding-left: var(--space-large);
  display: flex;
  align-items: center;
  flex: 1;
  cursor: pointer;
}
.entity-list li input[type=checkbox] + label .tags {
  margin-bottom: -5px;
}
.entity-list li input[type=checkbox] + label span {
  padding: 0 var(--space-small);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
}
.entity-list li input[type=checkbox] + label i {
  font-size: 22px;
}
.entity-list li input[type=checkbox] + label .button {
  float: right;
  margin-left: var(--space-micro);
  padding: var(--space-nano);
}
.entity-list li input[type=checkbox] + label:before {
  content: "";
  min-width: var(--space-small);
  position: absolute;
  left: 0;
  height: var(--space-small);
  background: var(--white);
  border: 1px solid #6f7787;
}
.entity-list li input[type=checkbox]:checked + label:before {
  background: var(--primary);
  background-image: url("/static/svg/icons/check.svg");
  background-position: center;
  background-size: 90%;
}

.platform-select {
  display: flex;
  border: none;
  flex-direction: row;
}
.platform-select > div {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-wrap: wrap;
}
.platform-select input:checked + label {
  background: var(--primary);
  color: var(--white);
}
.platform-select input:checked + label svg,
.platform-select input:checked + label img {
  filter: brightness(100%);
}
.platform-select input:checked + label:hover {
  background: var(--button-hover-primary);
  color: #fff;
}
.platform-select input:checked + label:hover img {
  filter: brightness(100%);
}
.platform-select input.warning + label {
  background-color: var(--warning);
  color: var(--black);
}
.platform-select input.warning + label img {
  filter: brightness(0%);
}
.platform-select input.alert + label {
  background-color: var(--danger);
}
.platform-select .item {
  background: var(--background);
  width: 45px;
  height: 45px;
  margin-right: var(--space-nano);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  border-radius: 4px;
}
.platform-select .item .content {
  flex: 1;
}
.platform-select .item .content b,
.platform-select .item .content p {
  text-align: left;
}
.platform-select .item b,
.platform-select .item p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
  text-align: center;
}
.platform-select .item p {
  font-size: 10px;
}
.platform-select .item svg {
  margin-right: var(--space-micro);
  margin-left: var(--space-micro);
  height: 32px;
  width: 32px;
}
.platform-select .item svg,
.platform-select .item img {
  margin-right: var(--space-micro);
  margin-left: var(--space-micro);
  height: 32px;
  width: 32px;
  filter: brightness(0);
}
.platform-select .item:hover {
  background: var(--hover);
}
.platform-select .item:active {
  background: var(--light-grey);
}
.platform-select .item.os, .platform-select .item.version {
  width: 140px;
  flex-direction: row;
}
.platform-select input {
  display: none;
}

[data-theme=dark] .platform-select img,
[data-theme=dark] .platform-select svg {
  filter: brightness(100) !important;
}

@media only screen and (max-width: 600px) {
  .platform-select {
    flex-direction: column;
    width: 100%;
  }
  .platform-select > div {
    gap: 4px;
    margin-bottom: var(--space-small);
    justify-content: space-between;
  }
  .platform-select .item.os {
    width: 100%;
    margin-right: 0;
  }
  .platform-select .item.version {
    max-width: 50%;
    min-width: 40%;
    flex: 1;
    margin: 0;
    justify-content: space-between;
  }
  .platform-select .item.version .content {
    overflow: hidden;
  }
  .platform-select .item.version .content b,
.platform-select .item.version .content p {
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .platform-select .item {
    padding: 2px var(--space-nano);
    height: auto;
    flex-direction: column;
    box-sizing: border-box;
  }
}
.button-bar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-micro);
}
.button-bar.centered {
  align-items: center;
}
.button-bar.no-wrap {
  flex-wrap: nowrap;
}
.button-bar .button:last-child {
  margin-right: 0;
}
.button-bar > div {
  display: flex;
}
.button-bar form {
  display: inline-block;
}
.button-bar.vertical {
  flex-direction: column;
  margin-top: 0;
}
.button-bar.vertical .clipboard {
  width: auto;
}
.button-bar.vertical form {
  width: 100%;
  display: inline-flex;
}
.button-bar.vertical form button {
  width: 100%;
}
.button-bar.vertical:last-child {
  margin-bottom: 0;
}
.button-bar.vertical .button {
  width: 100%;
}
.button-bar.vertical .button.help {
  height: 35px;
  min-width: 35px;
}
.button-bar.vertical .button:last-child {
  margin-bottom: 0;
}

.feedback-form p.lead {
  margin-top: 0;
}

.progress-bar {
  width: auto;
}
.progress-bar p {
  margin-bottom: var(--space-micro);
}
.progress-bar progress {
  width: 100%;
  position: relative;
  -webkit-appearance: none;
  margin-bottom: var(--space-small);
}
.progress-bar progress::-webkit-progress-bar {
  background-color: var(--light-grey);
  border: none;
  border-radius: var(--radius-default);
  overflow: hidden;
}
.progress-bar progress::-webkit-progress-value {
  background-color: var(--primary);
}

button[data-help-toggle] {
  border: none;
  background: var(--primary);
  border-radius: var(--button-radius);
  color: var(--white);
}
button[data-help-toggle]:hover {
  cursor: pointer;
  background: var(--button-hover-primary);
}

div[data-help-content] {
  display: none;
  margin: 0;
  margin-bottom: var(--space-default);
}
div[data-help-content].toggled {
  display: block;
}

.score-block {
  height: 150px;
  flex-basis: 150px;
  width: 150px;
  padding: 0;
  background: var(--background);
  display: flex;
  flex-direction: column;
}
.score-block-description {
  margin: 15px 20px 5px;
  text-align: center;
  font-size: 18px;
  font-weight: 600;
}
.score-block-text {
  font-size: 20px;
  width: 100%;
  text-align: center;
  flex: 1;
}
.score-block-text sup {
  font-size: 14px;
  margin-top: -36px;
}
.score-block-text span {
  font-size: 50px;
  font-weight: 600;
  margin-bottom: 10px;
}
.score-block-text span.warning {
  color: var(--yellow);
}
.score-block-text span.alert {
  color: var(--red);
}
.score-block-bar-holder {
  height: 20px;
  background: var(--dark-grey);
  position: relative;
}
.score-block-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
}
.score-block-bar.normal {
  background-color: var(--light-grey);
}
.score-block-bar.warning {
  background-color: var(--yellow);
}
.score-block-bar.alert {
  background-color: var(--red);
}

.small-score .score-block {
  height: 75px;
  flex-basis: 75px;
  width: 75px;
}
.small-score .score-block-description {
  font-size: 11px;
}
.small-score .score-block-text {
  font-size: 15px;
}
.small-score .score-block-text span {
  font-size: 22px;
  margin-top: -2px;
}
.small-score .score-block-text sup {
  font-size: 11px;
  margin-top: -21px;
}

.tile {
  background: var(--tile);
  box-shadow: var(--tile-shadow);
  border-radius: var(--tile-border-radius);
  padding: var(--tile-padding);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.tile[data-disabled=true] {
  opacity: 0.5;
  cursor: not-allowed;
}
.tile[data-disabled=false] {
  opacity: 1;
}
.tile.less-padding {
  padding: var(--space-small) var(--space-large);
}

.cookie-banner {
  position: fixed;
  bottom: -300px;
  width: 620px;
  margin: 0 auto;
  left: 50%;
  margin-left: -310px;
  transition: bottom 300ms ease-in-out;
}
.cookie-banner .button-bar {
  margin-top: var(--space-small);
}
.cookie-banner.up {
  bottom: var(--space-small);
}

@media only screen and (max-width: 600px) {
  .cookie-banner {
    width: auto;
    left: 10px;
    right: 10px;
    margin-left: auto;
  }
}
div.ma-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}
div.ma-icon svg {
  fill: var(--default-text);
}
div.ma-icon.nano svg {
  height: 4px;
  width: 4px;
}
div.ma-icon.micro svg {
  height: 8px;
  width: 8px;
}
div.ma-icon.small svg {
  height: 16px;
  width: 16px;
}
div.ma-icon.default svg {
  height: 24px;
  width: 24px;
}
div.ma-icon.large svg {
  height: 32px;
  width: 32px;
}
div.ma-icon.huge svg {
  height: 56px;
  width: 56px;
}
div.ma-icon.spin {
  animation: spin 3s infinite linear;
}

@keyframes spin {
  0% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
[data-theme=light] div.ma-icon img,
[data-theme=light] div.ma-icon svg {
  filter: brightness(0);
}

[data-theme=dark] div.ma-icon img,
[data-theme=dark] div.ma-icon svg {
  filter: brightness(1);
}

.scrollbox {
  overflow-y: auto;
}
@media only screen and (max-height: 2000px) {
  .scrollbox {
    max-height: 600px;
  }
}
@media only screen and (max-height: 1100px) {
  .scrollbox {
    max-height: 400px;
  }
}
@media only screen and (max-height: 800px) {
  .scrollbox {
    max-height: 300px;
  }
}
.scrollbox.flex, .scrollbox.flex-center {
  max-height: none;
  flex-basis: 100px;
}

/*# sourceMappingURL=common.css.map */