/* -------------------------------- Variables ------------------------------- */
:root {
  --body-background                  : #3c3c3c;

  --content-border                   : #606060;
  --content-background               : #202020;
  --content-text-color               : #F5F5F5;
  --content-heading-color            : var(--content-text-color);
  --content-link-color               : #4db5ff;
  --content-link-focus-outline       : #ffffff;
  --content-figure-text-color        : #dedede;
  --content-highlight-red            : #ff7575;
  --content-highlight-blue           : #1edcff;
  --content-highlight-green          : #5eff4b;
  --content-target-text-color        : #ffff8b;

  --footer-background                : #313131;
  --footer-text-color                : #b6b6b6;

  --section-border                   : #383838;
  --section-background               : #383838;
  --section-text-color               : #ffffff;
  --section-heading-color            : #FFFFFF;

  --section-remark-border            : #4c9de8;
  --section-remark-background        : #1d2f4a;
  --section-remark-text-color        : #ffffff;
  --section-remark-heading-color     : #ffffff;

  --section-important-border         : #ff875f;
  --section-important-background     : #382c2c;
  --section-important-text-color     : #ffffff;
  --section-important-heading-color  : #ffffff;

  --section-critical-border          : #ff7104;
  --section-critical-background      : #722e2e;
  --section-critical-text-color      : #ffffff;
  --section-critical-heading-color   : #ffffff;

  --section-output-background        : #000000;

  --table-border                     : #121212;
  --table-header-background          : #5a759a;
  --table-header-text-color          : #ffffff;
  --table-content-background         : #343434;

  --main-menu-focus-frame            : #ffffff;
  --main-menu-background             : #233854;
  --main-menu-text-color             : #c8f4ff;
  --main-menu-text-alt-color         : #a28eff;
  --main-menu-text-hover-color       : #ffffff;
  --main-menu-active-color           : #ffffff;

  --left-menu-border                 : #2c2b2b;
  --left-menu-background             : #1f1f1f;
  --left-menu-title-color            : #FFFFFF;
  --left-menu-item-color             : #4db5ff;
  --left-menu-item-hover-color       : #FFFFFF;
  --left-menu-active-border          : #2eaaff;
  --left-menu-active-background      : #FFFFFF;
  --left-menu-active-color           : #000000;

  --doc-background                   : #000000;
  --doc-section-border               : #2c2b2b;
  --doc-section-background           : #212121;
  --doc-section-active-border        : #fff2a7;
  --doc-note-border                  : #4b81b5;
  --doc-note-background              : #58585870;
  --doc-note-text-color              : #FFFFFF;
  --doc-note-heading-color           : #fff6c0;
  --doc-remark-border                : #c203db;
  --doc-remark-background            : #58585870;
  --doc-remark-heading-color         : #fff6c0;
  --doc-warning-border               : #ffaa3a;
  --doc-warning-background           : #58585870;
  --doc-warning-heading-color        : #fff6c0;
  --doc-attention-border             : #ff4141;
  --doc-attention-background         : #58585870;
  --doc-attention-heading-color      : #fff6c0;
  --doc-deprecated-border            : #bdbdbd;
  --doc-deprecated-background        : #58585870;
  --doc-deprecated-heading-color     : #fff6c0;
  --doc-todo-border                  : #0359db;
  --doc-todo-background              : #58585870;
  --doc-todo-heading-color           : #fff6c0;
  --doc-bug-border                   : #ff9050;
  --doc-bug-background               : #58585870;
  --doc-bug-heading-color            : #fff6c0;
  --doc-label-border                 : #4c94cc;
  --doc-label-background             : rgba(23, 84, 152, 0.17);
  --doc-label-text-color             : #7bd9ff;
  --doc-table-border                 : #292929;
  --doc-table-background             : #1c1c1c;
  --doc-path-border                  : #666666;
  --doc-path-background              : var(--doc-background);
  --doc-icon-background              : #6590b7;
  --doc-icon-color                   : #fff;

  --input-border                     : #666666;
  --input-border-hover               : #d0d0d0;
  --input-border-focus               : #ffffff;
  --input-background                 : #000000;
  --input-text-color                 : #FFFFFF;
  --input-placeholder-color          : #848484;

  --dropdown-background              : #FFFFFF;
  --dropdown-border                  : #ececec;
  --dropdown-hover-background        : #c3c3c3;
  --dropdown-selected-background     : #9ac9ff;
  --dropdown-icon-background         : #0370db;
  --dropdown-icon-border             : #0370db;
  --dropdown-icon-text-color         : #ffffff;
  --dropdown-text-color              : #000000;
  --dropdown-args-color              : #532400;
  --dropdown-match-color             : #0046a6;

  --inline-code-background           : #00000038;
  --inline-code-text-color           : #ffdbbf;

  --pre-code-background              : #000000;
  --token-default                    : #FFFFFF;
  --token-nohl                       : #c8c8c8;
  --token-comment                    : #8c8c8c;
  --token-operator                   : #5eecff;
  --token-keyword                    : #b8a9ff;
  --token-number                     : #c0ff96;
  --token-string                     : #ffa37d;
  --token-other                      : #EE9900;
  --token-invalid                    : #FF0000;
  --token-special                    : #ff95ff;

  --site-width                       : 1220px;
  --site-doc-width                   : 1420px;
  --main-menu-icon-size              : 48px;
  --left-menu-width                  : 240px;
  --left-menu-active-border-size     : 4px;
  --list-item-margin                 : 30px;
  --split-margin                     : 10px;
  --pre-margin                       : 16px;
  --block-margin                     : 16px;
  --table-frame-size                 : 1px;
  --common-padding-x                 : 10px;
  --common-padding-y                 : 4px;
}
/* -------------------------------------------------------------------------- */

/* --------------------------------- Fonts ---------------------------------- */
@font-face {
  font-family: "Nunito Light";
  font-weight: normal;
  font-style: normal;
  src: url("./fonts/Nunito-Light.ttf");
}
/* -------------------------------------------------------------------------- */

/* --------------------------------- Reset ---------------------------------- */
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, hr,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section,
summary, time, mark, audio, video {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

a { cursor: pointer; }
*:focus { outline: none; }
a:focus { outline: 1px dashed currentcolor; }

b { font-weight: bold; }
i { font-style: italic; }
sub { vertical-align: sub; font-size: 80%; }
sup { vertical-align: super; font-size: 80%; }

p, ul, ol { text-align: justify; }
ul { list-style: disc outside none; }
/* -------------------------------------------------------------------------- */

/* ------------------------------- Page Styles ------------------------------ */
@media all {
  html {
    overflow-y: scroll;
  }

  body {
    width: 100%;
    background: var(--body-background);
    color: var(--content-text-color);
    font-size: 18px;
    font-family: "Nunito Light", "helvetica", "arial";
  }

  div {
    scroll-margin-top: 15px;
  }

  pre, code {
    font-family: "Consolas", monospace;
    font-size: 14px;
  }

  h1, h2, h3, h4, h5, h6 {
    color: var(--content-heading-color);
    font-family: "Nunito Light", "helvetica", "arial";
    font-weight: bold;

    &:target {
      color: var(--content-target-text-color);
    }
  }

  h1 { margin: 12px 0; font-size: 160%; }
  h2 { margin: 10px 0; font-size: 125%; }
  h3 { margin: 10px 0; font-size: 110%; }
  h4 { margin: 6px  0; font-size: 110%; }
  h5 { margin: 3px  0; font-size: 105%; }

  table, li, p { line-height: 1.4em; }
  ul, ol, p { margin: 10px 0; }
  ul, ol { padding-left: var(--list-item-margin); }
  ul ul { margin: 4px 0; }
  li { margin: 5px 0; line-height: inherit; }

  a {
    margin: 2px 0;
    padding: 0 2px;
    color: var(--content-link-color);
    text-decoration: none;
    line-height: inherit;
    transition: color 0.2s ease;
    &:visited { color: var(--content-link-color); }
    &:hover { text-decoration: underline; }
    &:focus { outline: 1px dashed var(--content-link-focus-outline); }
  }

  code {
    border-radius: 3px;
    padding: 4px 4px 2px 4px;
    background: var(--inline-code-background);
    color: var(--inline-code-text-color);
    white-space: pre;
  }

  pre {
    box-sizing: border-box;
    width: 100%;
    margin: var(--pre-margin) 0;
    line-height: 110%;
    background: var(--pre-code-background);
    & code {
      border: none;
      margin: 0;
      padding: 0;
      background: inherit;
      color: var(--token-default);
    }
  }

  .x-hbox, .x-vbox {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    align-items: stretch;
  }
  .x-vbox { flex-direction: column; }
  .x-flex { flex: 1; }

  .x-hbox-half {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    align-items: stretch;
    & > div { width: calc(100% / 2); margin-right: var(--split-margin); }
    & > div:last-child { margin-right: 0; }
  }

  .x-hsplit {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    align-items: stretch;
    & > div { flex: 1 50%; margin: 0 8px; }
    & > div:first-child { margin-left: 0; }
    & > div:last-child { margin-right: 0; }
    & h1, & h2, & h3 { padding-top: 2px; }
  }

  .x-outer {
    box-sizing: border-box;
    width: 100%;
    padding: 1px 0;
    & > div {
      box-sizing: border-box;
      max-width: var(--site-width);
      margin: 0 auto;
    }
  }
  .x-inner { padding: 0 var(--block-margin); }

  .x-figure {
    text-align: center;
    & > img {
      border: 1px solid var(--content-border);
      margin: 5px 0;
      max-width: calc(100% - 2px);
    }
  }
  .x-figure-text {
    text-align: center;
    color: var(--content-figure-text-color);
  }

  .x-gallery-2 {
    text-align: center;
    font-size: 1px;
    & > img {
      margin: 9px 15px 9px 0;
      width: calc((100% - 16px) / 2);
    }
    & > img:last-child { margin-right: 0; }
  }

  .x-gallery-3 {
    text-align: justify;
    font-size: 1px;
    & > img {
      margin: 0 17px 0 0;
      width: calc((100% - 38px) / 3);
      height: calc((100% - 38px) / 3);
      max-width: 396px;
      max-height: 396px;
    }
    & > img:last-child { margin-right: 0; }
  }

  .x-align-left { text-align: left; }
  .x-unselectable { -webkit-user-select: none; user-select: none; }
  .x-highlight-red { color: var(--content-highlight-red); }
  .x-highlight-blue { color: var(--content-highlight-blue); }
  .x-highlight-green { color: var(--content-highlight-green); }
  .x-black-background { background: #000 !important; }
  .x-scalable-image { border: none; max-width: 100%; }

  .x-section, .x-section-remark, .x-section-important, .x-section-critical, .x-section-output {
    margin: var(--block-margin) 0;
    padding: var(--common-padding-y) var(--common-padding-x);
    border: 1px solid var(--section-border);
    background: var(--section-background);
    color: var(--section-text-color);
    font-size: 94%;
    & h1, & h2, & h3, & h4, & h5, & h6 { color: var(--section-heading-color); }
  }
  .x-section-remark {
    border: 1px solid var(--section-remark-border);
    background: var(--section-remark-background);
    color: var(--section-remark-text-color);
    & h1, & h2, & h3, & h4, & h5, & h6 { color: var(--section-remark-heading-color); }
  }
  .x-section-important {
    border: 1px solid var(--section-important-border);
    background: var(--section-important-background);
    color: var(--section-important-text-color);
    & h1, & h2, & h3, & h4, & h5, & h6 { color: var(--section-important-heading-color); }
  }
  .x-section-critical {
    border: 1px solid var(--section-critical-border);
    background: var(--section-critical-background);
    color: var(--section-critical-text-color);
    & h1, & h2, & h3, & h4, & h5, & h6 { color: var(--section-critical-heading-color); }
  }
  .x-section-output {
    background: var(--section-output-background);
  }
  .x-section-container {
    margin: var(--block-margin) 0;
  }

  .x-table {
    box-sizing: border-box;
    width: 100%;
    border: var(--table-frame-size) solid var(--table-border);
    margin: 12px 0;
    overflow-x: auto;
    & table {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      border-collapse: collapse;
      border-spacing: 0;
    }
    & tr {
      text-align: left;
      color: var(--content-text-color);
    }

    & td, & th {
      border-style: solid;
      border-width: 0 1px 1px 0;
      border-color: var(--table-border);
      margin-bottom: 5px;
      line-height: inherit;
      padding: 4px 8px;
      text-align: left;
    }
    & th {
      background: var(--table-header-background);
      color: var(--table-header-text-color);
      font-weight: bold;
    }
    & tr { background: var(--table-content-background); }
    & tr:last-child td { border-bottom-width: 0; }
    & td:last-child, & th:last-child { border-right-width: 0; }
  }

  .x-status-table {
    & > thead > tr {
      & th:nth-child(1) { width: 13em; }
      & th:nth-child(2) { width: 6em; }
      & th:nth-child(3) { min-width: 12em; }
    }
  }

  .x-main-menu-outer {
    padding: 0;
    background: var(--main-menu-background);
    color: var(--main-menu-text-color);
  }
  .x-main-menu-inner {
    display: flex;
    align-items: center;
    padding: 3px calc(var(--block-margin) - 5px);
    font-family: "Nunito Light", "helvetica", "arial";
  }

  .x-main-menu-icon { width: var(--main-menu-icon-size); height: var(--main-menu-icon-size); }
  .x-main-menu-separator { margin: 0 3px; }
  .x-main-menu-list { display: flex; align-items: center; flex-wrap: wrap; }

  .x-main-menu-item {
    display: inline-block;
    outline: none;
    margin: 2px 4px;
    color: var(--main-menu-text-color);
    font-size: 105%;
    & > a {
      padding: 2px 2px;
      color: inherit;
      text-decoration: none;
      &:hover { color: var(--main-menu-text-hover-color); }
      &:focus { outline: 1px dashed var(--main-menu-focus-frame); }
    }
  }
  .x-main-menu-item.x-alternate {
    color: var(--main-menu-text-alt-color);
  }
  .x-main-menu-item.x-selected {
    & > a {
      font-weight: bold;
      color: var(--main-menu-active-color);
      &:hover { color: var(--main-menu-active-color); }
      &:focus { outline: 1px dashed var(--main-menu-active-color); }
    }
  }
  .x-main-menu-item-index { display: flex; flex-direction: column; padding: 0 0; }
  .x-main-menu-item-index-name { font-size: 110%; }
  .x-main-menu-item-index-description { font-size: 75%; font-weight: normal; }


  .x-left-menu {
    align-self: flex-start;
    flex-grow: 0;
    flex-shrink: 0;
    top: var(--block-margin);
    position: sticky;
    width: var(--left-menu-width);
    margin-top: calc(var(--block-margin) + 1px);
    margin-right: var(--block-margin);
    font-size: 18px;
  }
  .x-left-menu-header {
    padding: 5px 1px;
    padding-left: calc(var(--left-menu-active-border-size) + 4px);
    color: var(--left-menu-title-color);
    font-size: 110%;
    font-weight: bold;
  }
  .x-left-menu-items {
    margin-top: var(--block-margin);
    background: var(--left-menu-background);
    padding: 7px;
    border: solid 1px var(--left-menu-border);
    & a, & a:visited {
      display: block;
      padding: 2px 0 2px 4px;
      border-left: var(--left-menu-active-border-size) solid transparent;
      color: var(--left-menu-item-color);
      text-decoration: none !important;
      &:hover {
        color: var(--left-menu-item-hover-color);
      }
    }
    & a.x-selected, & a.x-selected:hover {
      text-decoration: none !important;
      border-left: var(--left-menu-active-border-size) solid var(--left-menu-active-border);
      background: var(--left-menu-active-background);
      color: var(--left-menu-active-color);
      font-weight: bold;
    }
  }

  .x-content-outer { background: var(--content-background); }
  .x-funding-outer { background: var(--content-background); font-weight: bold; }
  .x-footer-outer { background: var(--footer-background); color: var(--footer-text-color); font-size: 90%; }
  .x-footer-inner { margin-top: 8px; }
  .x-footer-text { margin: 1em 0; font-size: 90%; }
  .x-copyright { color: var(--content-text-color); font-weight: bold; }

  .x-output-container {
    margin-bottom: var(--block-margin);
    & pre { margin: 0; }
  }

  .x-output {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .x-output-content {
    box-sizing: border-box;
    background: var(--section-output-background);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    & > img { display: block; max-width: 100%; }
  }
}

@media all and (max-width: 1000px) {
  body { font-size: 16px; }
  code { font-size: 12px; }

  .x-hsplit {
    display: block;
    & > div { flex: 1 50%; margin: 0; }
    & > div:first-child { margin-left: 0; margin-right: 0; }
    & > div:last-child { margin-left: 0; margin-right: 0; }
  }

  .x-figure > img:not(:last-child) { margin: 1px 0; }

  .x-main-menu-icon {
    width: calc(var(--main-menu-icon-size) * 0.75);
    height: calc(var(--main-menu-icon-size) * 0.75);
  }
}

@media all and (max-width: 700px) {
  body { font-size: 15px; }

  p, ul {
    margin-top: 4px;
    margin-bottom: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  h1 { margin: 8px 0; font-size: 150%; }
  h2 { margin: 8px 0; font-size: 120%; }
  h3 { margin: 6px 0; font-size: 105%; }
  h4 { margin: 4px 0; font-size: 105%; }

  .x-outer > div { padding: 0 1px; }
  .x-inner { padding: 0 2px; }

  .x-main-menu-inner { font-size: 90%; padding: 2px 5px 6px 5px; }
  .x-main-menu-separator { margin: 0 1px; }

  .x-left-menu {
    top: unset;
    position: unset;
    width: unset;
    margin: 0 1px 0 0;
  }

  .x-left-menu-content {
    display: flex;
    margin-top: 3px;
  }

  .x-left-menu-items {
    flex: 1;
    margin: 1px 1px 1px 0;
    border: 0;
    background: none;
    &:last-child { margin-right: 0; }
  }

  .x-section { padding: 2px 5px; font-size: 85%; }
  .x-section, .x-section-important, .x-section-critical, .x-table { margin: 4px 0; }
}
/* -------------------------------------------------------------------------- */

/* ------------------------------ Documentation ----------------------------- */
@media all {
  .x-doc-container-outer {
    background: var(--doc-background);
    & > div { max-width: var(--site-doc-width); }
  }
  .x-doc-container-inner {
    display: flex;
  }

  .x-doc-path {
    box-sizing: border-box;
    padding: 6px var(--block-margin);
    border: solid 1px var(--doc-path-border);
    background: var(--doc-path-background);
    font: inherit;
    font-size: 18px;
    & .x-selected { font-weight: bold; }
  }

  .x-doc-content-outer {
    flex: 1;
    margin: 15px 0 10px 0;
    overflow: hidden;
  }
  .x-doc-content-inner {
    margin: 2px 0;
    & pre[class*="language-"] { font-size: 13px; }
    & h1 { margin: 10px 0; }
    & .x-table {
      & tr       { background: var(--doc-table-background); }
      & td, & th { border-color: var(--doc-table-border); }
    }
  }

  .x-doc-section {
    border: solid 1px var(--doc-section-border);
    background: var(--doc-section-background);
    padding: 0 var(--block-margin);
    margin-top: var(--block-margin);
    transition: border-color 0.5s ease;
    & > div:first-child { margin-top: var(--block-margin); }
    & > div:last-child { margin-bottom: var(--block-margin); }
  }
  .x-doc-section.x-selected {
    border: solid 1px var(--doc-section-active-border);
  }

  .x-doc-param {
    padding-left: 2ch;
  }

  .x-doc-search-bar {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 0;
    font-size: 16px;
    background: var(--input-background);
    border: solid 1px var(--input-border);
    &:hover {
      border: solid 1px var(--input-border-hover);
    }
    & input {
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      padding: 2px 6px;
      border: none;
      background: none;
      font-size: 18px;
      color: var(--input-text-color);
      font: inherit;
      font-size: 18px;
    }

    & input::placeholder {
      color: var(--input-placeholder-color);
    }
  }
  .x-doc-search-bar.x-selected {
    position: relative;
    box-sizing: border-box;
    border: solid 1px var(--input-border-focus);
    box-shadow: 0 0 5px var(--input-border-focus);
  }
  .x-doc-search-dropdown {
    box-sizing: border-box;
    position: absolute;
    z-index: 9999;
    left: -1px;
    right: -1px;
    top: 100%;
    min-width: calc(min(100vw - 36px, var(--site-doc-width) - 8px));
    max-height: calc(min(100vh - 200px, 600px));
    overflow: auto;
    user-select: none;

    background: var(--dropdown-background);
    border: solid 1px var(--dropdown-border);
    box-shadow: 0 0 5px var(--dropdown-border);

    font-family: "Consolas", monospace;
    font-size: 14px;
  }
  .x-doc-search-type {
    display: inline-block;
    padding: 0px 4px;

    background: var(--dropdown-icon-background);
    border-radius: 2px;
    border: solid 1px var(--dropdown-icon-border);
    color: var(--dropdown-icon-text-color);

    font-family: "monospace";
    font-size: 95%;
  }

  .x-doc-search-item { padding: 2px 4px; }
  .x-doc-search-item.hovered { background: var(--dropdown-hover-background); }
  .x-doc-search-item.selected { background: var(--dropdown-selected-background); }
  .x-doc-search-name { color: var(--dropdown-text-color); }
  .x-doc-search-args { color: var(--dropdown-args-color); font-size: 12px; }
  .x-doc-search-hl   { color: var(--dropdown-match-color); font-weight: bold; }
}

@media all and (max-width: 700px) {
  .x-doc-content-outer {
    margin: 4px 0 0px 0;
  }
  .x-doc-container-inner {
    display: block;
  }
  .x-doc-search-bar { margin-top: 1px; }
  .x-doc-section { margin-top: 4px; padding: 0 4px; }
}

@media all {
  .doxy {
    font-size: 95%;
    & h1, & h2, & h3, & h4, & h5, & h6 { color: var(--content-heading-color); }
    & h1 { font-size: 130%; margin: 12px 0; }
    & h2 { font-size: 130%; margin: 10px 0; }
    & h3 { font-size: 120%; margin: 10px 0; }
    & a {
      padding: 0;
      background: none;
      border: none;
    }

    & .permalink {
      display: inline-block;
      opacity: 0;
      font-size: 85%;
      text-indent: 0;
      &:focus-within { opacity: 1; }
    }
    & h1:hover > .permalink, & h2:hover > .permalink, & h3:hover > .permalink { opacity: 1; }

    & .dynheader { margin: 8px 0; text-align: center; color: --var(--token-nohl); }
    & .dyncontent { margin: 8px 0; text-align: center; }

    & .inherit_header {
      margin: 10px 0;
    }

    & .inherit {
      padding-left: 18px;
    }

    & .fragment {
      padding: 10px 12px;
      background: var(--pre-code-background);
      color: var(--token-default);
      font-family: "Consolas", monospace;
      font-size: 14px;
      line-height: 1.25;
      & > .line { white-space: pre; }
    }

    & .section {
      margin: var(--block-margin) 0;
      padding: 1px 12px;
      background: var(--doc-note-background);
      color: var(--doc-note-text-color);
      border-left: solid 4px var(--pre-code-background);
      & h1, & h2, & h3, & h4 { color: var(--doc-note-heading-color); }
    }

    & .section.note {
      border-color: var(--doc-note-border);
    }

    & .section.remark {
      border-color: var(--doc-remark-border);
      background: var(--doc-remark-background);
      & h1, & h2, & h3, & h4 { color: var(--doc-remark-heading-color); }
    }

    & .section.warning {
      border-color: var(--doc-warning-border);
      background: var(--doc-warning-background);
      & h1, & h2, & h3, & h4 { color: var(--doc-warning-heading-color); }
    }

    & .section.attention {
      border-color: var(--doc-attention-border);
      background: var(--doc-attention-background);
      & h1, & h2, & h3, & h4 { color: var(--doc-attention-heading-color); }
    }

    & .section.deprecated {
      border-color: var(--doc-deprecated-border);
      background: var(--doc-deprecated-background);
      & h1, & h2, & h3, & h4 { color: var(--doc-deprecated-heading-color); }
    }

    & .section.bug {
      border-color: var(--doc-bug-border);
      background: var(--doc-bug-background);
      & h1, & h2, & h3, & h4 { color: var(--doc-bug-heading-color); }
    }

    & .section.todo {
      border-color: var(--doc-todo-border);
      background: var(--doc-todo-background);
      & h1, & h2, & h3, & h4 { color: var(--doc-todo-heading-color); }
    }

    & h2.memtitle {
      display: block;
      margin: var(--block-margin) 0;
      line-height: 1.25;
      font-weight: 300;
      font-family: "Consolas", monospace;;
      color: var(--token-nohl);
    }

    & .memdoc > b {
      display: block;
      margin: 10px 0;
    }

    & .memname {
      color: var(--content-heading-color);
    }

    & span.mlabels {
      margin-left: 8px;
    }

    & span.mlabel {
      background-color: var(--doc-label-background);
      border: solid 1px var(--doc-label-border);
      color: var(--doc-label-text-color);
      margin: 0 5px;
      padding: 1px 3px;
      border-radius: 3px;
      font-size: 65%;
      white-space: nowrap;
      vertical-align: middle;
    }

    & .fieldtable td, .fieldtable th {
      border: 1px solid var(--doc-section-background);
    }

    & table.fieldtable {
      table-layout: fixed;
      width: 100%;
      border-top: none;
      border-spacing: 0px;
      margin-bottom: 10px;
      color: #fff;
      background: var(--table-content-background);
    }

    & .fieldtable .fieldname {
      font-weight: bold;
    }

    & .fieldtable td, .fieldtable th {
      padding: 3px 7px 2px;
      border-left: none;
      border-bottom: none;
    }

    & .fieldtable th {
      background-color: var(--table-header-background);
      color: var(--table-header-text-color);
      font-size: 110%;
      text-align:left;
      font-weight: bold;
    }

    & .fieldtable td:last-child, .fieldtable th:last-child {
      border-right: none;
    }

    & .fieldtable .section {
      margin: 4px 0;
    }

    & .fieldtable td.fielddoc p { margin: 0; }

    & .dyncontent > .center > img { filter: invert(1); }

    & div.directory {
      font-size: 95%;
    }

    & div.directory .levels {
      white-space: nowrap;
      width: 100%;
      text-align: right;
      font-size: 9pt;
    }

    & div.directory .levels span {
      cursor: pointer;
      padding-left: 2px;
      padding-right: 2px;
      color: #719fff;
    }

    & table.directory .desc {
      padding: 2px 6px;
    }

    & span.arrowhead {
      position: relative;
      padding: 0;
      margin: 0 0 0 2px;
      display: inline-block;
      width: 5px;
      height: 5px;
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
      transform: rotate(-45deg);
      transition: transform 0.3s ease;
    }

    & span.arrowhead.opened {
      transform: rotate(45deg);
    }

    & .selected span.arrowhead {
      border-right: 2px solid #fff;
      border-bottom: 2px solid #fff;
    }

    & .icon {
      display: inline-block;
      margin: 2px 4px 2px 6px;
      padding: 1px 3px;
      border-radius: 4px;
      background-color: var(--doc-icon-background);
      color: var(--doc-icon-color);
      text-align: center;
      font-size: 14px;
      font-weight: bold;
      line-height: normal;
      user-select: none;
    }

    & .iconfolder {
      width: 24px;
      height: 18px;
      margin-top: 6px;
      vertical-align:top;
      display: inline-block;
      position: relative;
    }

    & .icondoc {
      width: 24px;
      height: 18px;
      margin-top: 3px;
      vertical-align:top;
      display: inline-block;
      position: relative;
    }

    & .inherit_header {
      font-weight: 400;
      cursor: pointer;
      -webkit-user-select: none;
      user-select: none;
    }

    & .arrow, .dynarrow {
      display: inline-block;
      width: 15px;
      margin: 0 2px 0 -2px;
      cursor: pointer;
      user-select: none;
      & > span {
        width: 12px;
        padding: 5px 5px 5px 2px;
      }
    }
  }
}
/* -------------------------------------------------------------------------- */

/* ----------------------------------- UI ----------------------------------- */
@media all {
  /* Fiddle UI & Monaco Editor */
  .ui-bar {
    margin-bottom: 4px;
  }

  .ui-input {
    padding: 3px 4px;
    border: solid 1px #9e9e9e;
    background: #1b1b1b;
    color: #fff;
    font: inherit;
    font-size: 15px;
  }

  .ui-input:hover {
    border: 1px solid #ffffff;
  }

  .ui-input:focus {
    border: 1px solid #ffffff;
    outline: none;
    box-shadow: 0 0 6px #ffffff;
  }

  .ui-button, .ui-button:visited, .ui-button:hover {
    display: inline-block;
    cursor: pointer;
    margin: 2px 6px 2px 0;
    padding: 2px 4px;
    border: 1px solid #777;
    color: #fff !important;
    background: #171717;
    outline: none !important;
    text-decoration: none;
    font: inherit;
    font-size: 15px;
  }

  .ui-button:hover {
    border: 1px solid #ffffff;
  }

  .ui-button:focus {
    color: #50c0ff;
    border: 1px dashed #ffffff;
    outline: none;
  }

  .ui-button:active {
    border: 1px solid #000 !important;
    background: #ffffff !important;
    color: #000 !important;
    box-shadow: 0 0 6px #ffffff;
  }

  .ui-inline-check, .ui-inline-check:visited, .ui-inline-check:hover {
    display: inline-block;
    cursor: pointer;
    padding: 3px 4px;
    background: transparent;
    color: #e2e2e2 !important;
    border: 1px solid #666666;
    outline: none !important;
    text-decoration: none;
    font: inherit;
    font-size: 15px;
  }

  .ui-inline-check:focus {
    border: 1px solid #ffffff;
    color: #ffffff;
    outline: none;
    box-shadow: 0 0 6px #ffffff;
  }

  .ui-inline-check:active, .ui-inline-check.selected {
    border: 1px solid #000000;
    background: #ffffff !important;
    color: #000 !important;
  }

  .ui-inline-check:hover {
    border: 1px solid #ffffff !important;
    box-shadow: 0 0 6px #ffffff;
  }

  .ui-radio, .ui-radio:visited, .ui-radio:hover {
    display: inline-block;
    cursor: pointer;
    padding: 3px 4px;
    border: 1px solid transparent;
    background: transparent;
    color: #fff !important;
    outline: none !important;
    text-decoration: none;
    font: inherit;
    font-size: 15px;
  }

  .ui-radio:focus {
    border: 1px solid #ffffff;
    color: #ffffff;
    outline: none;
    box-shadow: 0 0 6px #ffffff;
  }

  .ui-radio:active, .ui-radio.selected {
    border: 1px solid #000000;
    background: #ffffff !important;
    color: #000 !important;
  }

  .ui-radio:hover {
    border: 1px solid #ffffff !important;
    box-shadow: 0 0 6px #ffffff;
  }

  .monaco-wrap {
    box-sizing: border-box;
    border: solid 1px #b5b5b5;
  }

  .monaco-wrap.focus {
    border: 1px solid #ffffff;
    box-shadow: 0 0 3px #ffffff;
  }

  .notebook-wrap {
    box-sizing: border-box;
    border: solid 1px #b5b5b5;
    background: #1e1e1e;
    color: #ececec;
    overflow: auto;
  }
}
/* -------------------------------------------------------------------------- */

/* -------------------------- Syntax Highlighting --------------------------- */
@media all {
  /* Code blocks */
  pre[class*="language-"] {
    display: block;
    padding: 1em;
    overflow-x: auto;
    color: var(--token-default-color);
  }

  /* Inline code */
  :not(pre) > code[class*="language-"] {}

  .token.comment,
  .token.prolog,
  .token.cdata,
  .token.italic { font-style: italic; }

  .token.important,
  .token.punctuation,
  .token.bold { font-weight: bold; }

  .token a { color: inherit; }
  .token.entity { cursor: help; }

  .token.namespace      {}
  .token.doctype        { color: var(--token-keyword); }
  .token.entity         { color: var(--token-default); }
  .token.url            { color: var(--token-default); }
  .token.variable       { color: var(--token-default); }
  .token.comment        { color: var(--token-comment); }
  .token.prolog         { color: var(--token-comment); }
  .token.cdata          { color: var(--token-comment); }
  .token.operator       { color: var(--token-operator); }
  .token.punctuation    { color: var(--token-operator); }
  .token.atrule         { color: var(--token-keyword); }
  .token.attr-value     { color: var(--token-keyword); }
  .token.attr-name      { color: var(--token-keyword); }
  .token.property       { color: var(--token-keyword); }
  .token.inserted       { color: var(--token-keyword); }
  .token.builtin        { color: var(--token-keyword); }
  .token.keyword        { color: var(--token-keyword); }
  .token.tag            { color: var(--token-keyword); }
  .token.boolean        { color: var(--token-keyword); }
  .token.symbol         { color: var(--token-keyword); }
  .token.selector       { color: var(--token-keyword); }
  .token.directive      { color: var(--token-keyword); }
  .token.directive-hash { color: var(--token-keyword); }
  .token.number         { color: var(--token-number); }
  .token.constant       { color: var(--token-number); }
  .token.char           { color: var(--token-string); }
  .token.string         { color: var(--token-string); }
  .token.regex          { color: var(--token-other); }
  .token.important      { color: var(--token-other); }
  .token.deleted        { color: var(--token-invalid); }
  .token.known-class    { color: var(--token-special); }
  .token.known-enum     { color: var(--token-special); }
}
/* -------------------------------------------------------------------------- */