/* --------------------------------- 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; }
p, ul, ol { text-align: justify; }
/* -------------------------------------------------------------------------- */

/* -------------------------------- Variables ------------------------------- */
:root {
  --body-background                  : #2e2e2e;

  --content-background               : #181818;
  --content-border                   : #606060;
  --content-text-color               : #FFFFFF;
  --content-heading-color            : var(--content-text-color);
  --content-link-color               : #4db5ff;
  --content-link-focus-outline       : #ffffff;

  --table-header-background          : #404040;
  --table-header-text-color          : #ffffff;
  --table-content-background         : #080808;
  --table-border                     : #6d6d6d;

  --section-background               : #2A2A2A;
  --section-border                   : var(--section-background);
  --section-heading-color            : #FFFFFF;

  --note-background                  : #2A2A2A;
  --note-border                      : var(--note-background);
  --note-heading-color               : #FFFFFF;

  --note-important-background        : #2A2A2A;
  --note-important-border            : #ffc192;
  --note-important-heading-color     : #ffffff;

  --main-menu-background             : #FFFFFF;
  --main-menu-text-color             : #545454;
  --main-menu-text-alt-color         : #9c0000;
  --main-menu-active-color           : #000000;
  --left-menu-background             : #2A2A2A;
  --left-menu-border                 : #2A2A2A;
  --footer-background                : #262626;

  --input-border                     : #5c5c5c;
  --input-border-hover               : #d0d0d0;
  --input-border-focus               : #ffffff;
  --input-background                 : #202020;
  --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           : #3F3F3F;
  --inline-code-text-color           : #FFFFFF;

  --pre-code-background              : #2A2A2A;
  --token-default                    : #FFFFFF;
  --token-comment                    : #8c8c8c;
  --token-operator                   : #5eecff;
  --token-keyword                    : #53b1ff;
  --token-number                     : #c0ff96;
  --token-string                     : #ffa37d;
  --token-other                      : #EE9900;
  --token-invalid                    : #FF0000;
  --token-special                    : #c895ff;
}
/* -------------------------------------------------------------------------- */

/* --------------------------------- Fonts ---------------------------------- */
@font-face {
  font-family: "Montserrat";
  font-weight: normal;
  font-style: normal;
  src: url("./fonts/Montserrat-Regular.otf");
}

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

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

.non-selectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}
/* -------------------------------------------------------------------------- */

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

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

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

  h1, h2, h3, h4, h5, h6 {
    color: var(--content-heading-color);
    font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Tahoma", sans-serif;
  }

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

  h1 { margin: 16px 0; font-size: 175%; }
  h2 { margin: 10px 0; font-size: 125%; }
  h3 { margin: 10px 0; font-size: 110%; }

  p, li, table { line-height: 1.4em; }
  p, ul { margin: 8px 0; }
  ul ul { margin: 4px 0; }
  ul, ol { padding-left: 30px; }
  ul { list-style: disc outside none; }

  li {
    margin: 5px 0px;
    line-height: inherit;
  }

  pre {
    box-sizing: border-box;
    width: 100%;
    margin: 16px 0;
    padding: 0.5em;
    background: var(--pre-code-background);
  }

  p code, ul code {
    padding: 2px 3px;
    border: solid 1px rgba(104, 202, 255, 0.45);
    border-radius: 3px;
    background: rgba(0, 0, 0, 0.25);
    white-space: nowrap;
  }

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

  .split-horz {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    align-items: stretch;
  }

  .split-horz > div { flex: 1 50%; margin: 0 8px; }
  .split-horz > div:first-child { margin-left: 0; }
  .split-horz > div:last-child { margin-right: 0; }

  .no-block { text-align: left; }

  .outer { box-sizing: border-box; width: 100%; }
  .inner { box-sizing: border-box; padding: 0px 10px; }

  .outer-docs-container {
    background: #181818;
    padding-top: 1px;
  }

  .outer-page-container {
    background: #181818;
    padding-top: 1px;
  }

  .outer > div {
    box-sizing: border-box;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
    /* overflow: hidden; */
  }

  .outer-main-menu {
    background: #343434;
    color: #fff;
  }

  .inner-main-menu {
    display: flex;
    align-items: center;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid transparent;
    font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Tahoma", sans-serif;
    font-size: 90%;
    text-align: left;
  }

  .main-menu-logo {
    width: 48px;
    height: 48px;
  }

  .main-menu-sep {
    margin: 0 3px;
  }

  .main-menu-item {
    display: inline-block;
    padding: 5px;
  }

  .main-menu-item-index {
    display: flex;
    flex-direction: column;
  }
  .main-menu-item-index-name {
    font-size: 120%;
  }
  .main-menu-item-index-desc {
    font-size: 75%;
    font-weight: normal;
  }

  .main-menu-item,
  .main-menu-item:hover {
    outline: none;
    color: #ffffff;
  }

  .main-menu-item > a,
  .main-menu-item > a:visited {
    color: #c2c2c2;
    text-decoration: none;
  }

  .main-menu-item:hover > a {
    color: #ffffff;
  }

  .main-menu-item > a:focus {
    outline: 1px dashed #ffffff;
  }

  .main-menu-item-sel > a,
  .main-menu-item-sel > a:visited,
  .main-menu-item-sel:hover > a {
    color: #ffffff;
    font-weight: bold;
  }

  .main-menu-item-sel:hover > a {
    color: #74dfff;
  }

  .main-menu-item-sel:focus {
    outline: 1px dashed #ffffff;
  }

  .inner-page-container {
    padding: 16px 14px 28px 14px;
  }

  .note, .note-important, .note-highlight {
    margin: 15px 0px;
    padding: 0 8px;
    font-size: 90%;
  }

  .note {
    border: 1px solid var(--note-border);
    background: var(--note-background);
    color: var(--note-text-color);
  }

  .note h1, .note h2, .note h3 {
    color: var(--note-heading-color);
  }

  .note-important {
    border: 1px solid var(--note-important-border);
    background: var(--note-important-background);
    color: var(--note-important-text-color);
  }

  .note-important h1, .note-important h2, .note-important h3 {
    color: var(--note-important-heading-color);
  }

  .outer-docs-content {
    background: rgba(255, 255, 255, 0.13);
  }

  .inner-docs-content {
    margin: 2px 0px 20px 0px;
  }

  .inner-docs-container {
    display: flex;
    padding: 0px 14px;
  }

  .outer-footer {
    background: var(--footer-background);
    color: #b6b6b6;
  }

  .inner-footer {
    margin-top: 1px;
    padding: 20px 15px 50px 15px;
    font-size: 80%;
  }
  .inner-footer a, .inner-footer a:visited { color: #5ec3ff; }

  .left-menu {
    align-self: flex-start;
    margin-top: 15px;
    top: 0px;
    position: sticky;
    width: 225px;
    margin-right: 16px;
  }

  .left-menu-header {
    padding: 5px 1px;
    font-size: 110%;
    font-weight: bold;
  }

  .left-menu-items {
    margin-top: 16px;
    background: #2a2a2a;
    padding: 7px;
  }

  .left-menu-items a, .left-menu-items a:visited {
    display: block;
    padding: 2px 0 2px 4px;
    border-left: 4px solid transparent;
  }

  .left-menu-items a:hover {
    text-decoration: none;
    color: #ffffff;
  }

  .left-menu-items a.active {
    color: #000000;
    font-weight: bold;
    border-left: 4px solid #2eaaff;
    background: #ffffff;
  }
  .left-menu-items a.active:hover {
    text-decoration: none;
    color: #000;
  }

  .docs-content {
    flex: 1;
    overflow: hidden;
    margin: 15px 0 10px 0;
  }

  .outer-docs-navbar {
    margin-top: 16px;
  }
  .outer-docs-navbar > div {
    overflow: visible;
  }

  .docs-content-inner code.hljs {
    font-size: 13px;
  }

  .inner-docs-content {
    margin: 2px 0px 20px 0px;
  }

  .section {
    padding: 0px 10px 5px 10px;
    border: 1px solid rgba(0, 0, 0, 0.22);
    background: rgba(0, 0, 0, 0.25);
  }

  .copyright {
    color: #dcdcdc;
  }

  .highlight-green {color: #7eff7e;}
  .highlight-red {color: #ff7777;}

  .doc-search-bar input {
    font: inherit;
    font-size: 18px;
  }

  .doc-path {
    box-sizing: border-box;
    border: solid 1px #626262;
    padding: 6px 15px;

    font: inherit;
    font-size: 18px;
  }

  .doc-path-active {
    font-weight: bold;
  }

  .doc-section, .doc-intro {
    border: solid 1px #626262;
    padding: 0px 15px;
    margin-top: 15px;
    transition: border-color 0.5s ease;
  }

  .doc-section-active {
    border: solid 1px #fff562;
  }

  .doc-section > div:first-child { margin-top: 15px; }
  .doc-section > div:last-child { margin-bottom: 15px; }

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

  .doc-search-bar {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 4px 0px;
    font-size: 16px;
    background: var(--input-background);
    border: solid 1px var(--input-border);
  }

  .doc-search-bar:hover {
    border: solid 1px var(--input-border-hover);
  }

  .doc-search-bar.active {
    border: solid 1px var(--input-border-focus);
    box-shadow: 0 0 5px var(--input-border-focus);
  }

  .doc-search-bar input {
    background: none;
    color: var(--input-text-color);
  }

  .doc-search-bar input::placeholder {
    color: var(--input-placeholder-color);
  }

  .doc-search-dropdown {
    font-family: "Consolas", monospace;
    font-size: 14px;

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

    max-height: 400px;
    min-width: calc(min(100vw - 36px, 1200px));
  }

  .doc-search-type {
    background: var(--dropdown-icon-background);
    border: solid 1px var(--dropdown-icon-border);
    border-radius: 2px;
    color: var(--dropdown-icon-text-color);
  }

  .doc-search-item.hovered { background: var(--dropdown-hover-background); }
  .doc-search-item.selected { background: var(--dropdown-selected-background); }

  .doc-search-name { color: var(--dropdown-text-color); }
  .doc-search-args { color: var(--dropdown-args-color); font-size: 12px; }
  .doc-search-hl   { color: var(--dropdown-match-color); font-weight: bold; }

  /* 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: 0px 0px 6px #ffffff;
  }

  .ui-button, .ui-button:visited, .ui-button:hover {
    display: inline-block;
    cursor: pointer;
    margin: 2px 6px 2px 0px;
    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: 0px 0px 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: 0px 0px 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: 0px 0px 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: 0px 0px 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: 0px 0px 6px #ffffff;
  }

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

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

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

}

/* -------------------------------------------------------------------------- */

/* --------------------------------- LowRes --------------------------------- */
@media all and (max-width: 1000px) {
  body {
    font-size: 16px;
  }

  .main-menu-logo {
    width: 32px;
    height: 32px;
  }

  .inner-page-container {
    padding: 0px 0px;
  }

  .split-horz { display: block; }
  .split-horz > div { flex: 1 50%; margin: 0; }
  .split-horz > div:first-child { margin: 0; }
  .split-horz > div:last-child { margin: 0; }
}

@media all and (max-width: 640px) {
  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: 6px 0; font-size: 120%; }
  h3 { margin: 4px 0; font-size: 100%; }
  code { font-size: 12px; }

  .hide-in-lowres {
    display: none;
  }

  .inner-main-menu {
    font-size: 90%;
    padding: 2px 5px 6px 5px;
  }

  .main-menu-logo {
    width: 24px;
    height: 24px;
  }

  .main-menu-sep {
    margin: 0 1px;
  }

  .outer-docs-navbar {
    margin: 4px 0;
  }
  .inner-docs-navbar {
    margin: 0;
    padding: 0 2px;
  }

  .inner-docs-container {
    display: block;
    padding: 0;
  }

  .left-menu {
    top: unset;
    position: unset;
    width: unset;
    margin-right: unset;
  }

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

  .left-menu {
    margin: 0 1px;
  }

  .left-menu-items {
    flex: 1;
    margin: 1px 1px 1px 0;
    padding: 2px 4px;
  }

  .left-menu-items:last-child {
    margin-right: 0px;
  }

  .doc-search-bar {
    margin-top: 1px;
  }

  .docs-content {
    padding: 0px 4px 4px 4px;
  }
}
/* -------------------------------------------------------------------------- */

/* --------------------------------- Fixes ---------------------------------- */
.hljs {
  padding: 0.25em;
  padding-left: 6px;
  background: none;
}
/* -------------------------------------------------------------------------- */