/* --------------------------------- 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                  : #3c3c3c;
  --content-background: #242424;
  --content-border                   : #606060;
  --content-text-color               : #FFFFFF;
  --content-heading-color            : var(--content-text-color);
  --content-link-color               : #75bdff;
  --content-link-focus-outline       : #75bdff;
  --table-header-background          : #5a759a;
  --table-header-text-color          : #ffffff;
  --table-content-background         : #373636;
  --table-border                     : #282828;
  --section-background               : #373636;
  --section-border                   : var(--section-background);
  --section-heading-color            : #FFFFFF;
  --doc-background                   : #121212;
  --doc-section-background           : #292929;
  --doc-section-active-border        : #ffffff;
  --note-background                  : #3c3c3c;
  --note-border                      : var(--note-background);
  --note-text-color                  : #ffffff;
  --note-heading-color               : #FFFFFF;
  --note-important-background        : #171717;
  --note-important-border            : #ffb298;
  --note-important-text-color        : #ffffff;
  --note-important-heading-color     : #ff9b89;
  --note-highlight-background        : #ffffff;
  --note-highlight-border            : var(--note-highlight-background);
  --note-highlight-text-color        : #000000;
  --note-highlight-heading-color     : #f14646;
  --note-highlight-link-color        : #0a35c2;
  --note-highlight-link-focus-outline: #0a35c2;
  --note-highlight-code-color        : #b43e00;
  --note-highlight-code-background   : #0000000f;
  --main-menu-background             : #FFFFFF;
  --main-menu-text-color             : #545454;
  --main-menu-text-alt-color         : #9c0000;
  --main-menu-active-color           : #000000;
  --left-menu-background             : #2c2c2c;
  --left-menu-border                 : #373636;
  --footer-background                : #313131;
  --input-border                     : #5c5c5c;
  --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;
  --output-background                : #000000;
  --pre-code-background              : #000000;
  --inline-code-background           : #ffffff1c;
  --inline-code-text-color           : #ffdbbf;
  --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: var(--content-text-color);
    font-size: 18px;
    font-family: "Nunito Light", "helvetica", "arial";
  }

  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: 18px 0; font-size: 175%; }
  h2 { margin: 12px 0; font-size: 135%; }
  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%;
    background: var(--pre-code-background);
    margin: 15px 0;
    line-height: 110%;
  }

  p code, ul code, table code {
    padding: 4px 4px 2px 4px;
    border-radius: 3px;
    background: var(--inline-code-background);
    color: var(--inline-code-text-color);
    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); }

  .no-block { text-align: left; }
  .indent { margin-left: 20px; }

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

  .hbox-2 > div {
    width: calc(100% / 2);
    margin-right: 20px;
  }

  .hbox-2 > div:last-child {
    margin-right: 0;
  }

  .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; }
  .split-horz h3 { padding-top: 2px; }

  .black {
    background: #000 !important;
  }

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

  .outer-content {
    background: var(--content-background);
  }

  .inner {
    box-sizing: border-box;
    padding: 0;
  }

  .inner-content {
    padding: 0 5px;
  }

  .outer-main-menu {
    background: var(--main-menu-background);
    color: var(--main-menu-text-color);
  }

  .inner-main-menu {
    display: flex;
    align-items: center;
    padding: 3px 1px 3px 1px;
    font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Tahoma", sans-serif;
  }

  .main-menu-item-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

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

  .main-menu-item {
    display: inline-block;
    padding: 1px 5px;
    margin: 2px 0px;
  }

  .main-menu-item-index {
    padding: 0 0;
    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: var(--main-menu-text-color);
  }

  .inner-main-menu a,
  .inner-main-menu a:visited {
    padding: 2px 2px;
    font-size: 90%;
    color: inherit;
    text-decoration: none;
  }

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

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

  .main-menu-item-sel > a,
  .main-menu-item-sel > a:visited,
  .main-menu-item-sel:hover > a {
    color: var(--main-menu-active-color);
    font-weight: bold;
  }

  .main-menu-item-sel:hover > a {
    color: var(--main-menu-active-color);
  }

  .main-menu-item-sel:focus {
  outline: 1px dashed var(--main-menu-active-color);
  }

  .main-menu-item-fiddle {
    color: var(--main-menu-text-alt-color);
  }

  .outer-content {
    padding: 1px 0px 10px 0px;
  }

  .footer-text {
    font-size: 90%;
    margin: 1em 0;
  }

  .outer-footer {
    padding: 5px 10px 10px 10px;
    background: var(--footer-background);
    color: var(--content-text-color);
    font-size: 90%;
  }

  .outer-docs-container {
    background: var(--doc-background);
  }

  .inner-docs-container {
    display: flex;
    padding: 0px 4px;
    padding-bottom: 5px;
  }

  .inner-footer { margin-top: 8px; padding: 0 5px; }
  .inner-footer h3 { padding: 1px 2px; }

  .left-menu {
    align-self: flex-start;
    flex-grow: 0;
    flex-shrink: 0;
    top: 15px;
    position: sticky;
    width: 225px;
    margin-top: 15px;
    margin-right: 15px;
    font-size: 18px;
  }

  .left-menu-content {
  }

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

  .left-menu-items {
    margin-top: 15px;
    background: var(--left-menu-background);
    padding: 7px;
    border: solid 1px var(--left-menu-border);
  }

  .left-menu-items a, .left-menu-items a:visited {
    display: block;
    padding: 2px 0 2px 4px;
    border-left: 4px solid transparent;
    color: #d9d9d9;
  }
  .left-menu-items a:hover {
    text-decoration: underline;
    color: #ffffff;
  }

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

  .outer-docs-navbar {
    margin-top: 15px;
  }

  .outer-docs-navbar > div {
    overflow: visible;
  }

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

  /* === Section | Notes === */
  .section, .output-section {
    margin: 14px 0px;
    padding: 4px 10px 5px 10px;
    font-size: 90%;
  }

  .section {
    border: 1px solid var(--section-border);
    background: var(--section-background);
  }

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

  .output-section {
    background: var(--output-background);
  }

  .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);
  }

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

  .note-highlight a, .note-highlight a:visited {
    color: var(--note-highlight-link-color);
  }

  .note-highlight a:focus {
    color: var(--note-highlight-link-color);
    outline-color: var(--note-highlight-link-focus-outline);
  }

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

  .note-highlight code {
    background: var(--note-highlight-code-background);
    color: var(--note-highlight-code-color);
  }

  .copyright {
    color: var(--content-text-color);
    font-weight: bold;
  }

  .table {
    box-sizing: border-box;
    width: 100%;
    margin: 12px 0;
    border: 1px solid var(--table-border);
    overflow-x: auto;
  }

  .table table {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border-spacing: 0;
  }
  .table tr {
    text-align: left;
    color: var(--content-text-color);
  }

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

  .docs-content .table td { border-color: #333; }
  .docs-content .table th { border-color: #333; }
  .docs-content .table tr { background: #1c1c1c;}

  .gallery {
    text-align: center;
    font-size: 1px;
  }
  .gallery > img {
    margin: 9px 15px 9px 0;
    border: 1px solid var(--content-border);
    width: calc((100% - 38px) / 3);
    height: calc((100% - 38px) / 3);
    max-width: 258px;
    max-height: 258px;
  }
  .gallery > img:last-child { margin-right: 0; }

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

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

  .output-container { margin-bottom: 15px; }
  .output-container pre { margin: 0; }

  .section-container { margin: 15px 0; }

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

  .output-content {
    box-sizing: border-box;
    background: var(--output-background);
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

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

  .figure-text {
    text-align: center;
    color: #dedede;
  }

  .output-content > img {
    display: block;
    width: 100%;
  }

  img.scalable-image {
    border: none;
    max-width: 100%;
  }

  .status-todo { color: #ff7575; }
  .status-work { color: #1edcff; }
  .status-done { color: #5eff4b; }

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

  .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 var(--doc-section-background);
    background: var(--doc-section-background);
    padding: 0px 15px;
    margin-top: 15px;
    transition: border-color 0.5s ease;
  }

  .doc-section-active {
    border: solid 1px var(--doc-section-active-border);
  }

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

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

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

  .docs-content-inner pre[class*="language-"] {
    font-size: 13px;
  }

  .docs-content-inner h1 {
    margin: 10px 0 10px 0;
  }

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

/* ----------------------------------- UI ----------------------------------- */
.ui-button, .ui-button:visited, .ui-button:hover {
  display: inline-block;
  margin: 2px 6px 2px 0px;
  padding: 1px 3px;
  color: #f4f4f4;
  background: #2e2e2e;
  border: 1px solid #6d6d6d;
  outline: none;
  text-decoration: none;
  text-shadow: none;
  transition: none;
}

.ui-button:hover, .ui-button:focus {
  border: 1px solid #FFF !important;
  color: #FFF;
}

.ui-button:focus {
  border: 1px solid #FFF;
  background: #545454;
  outline: none;
}

.ui-button:active {
  background: #FFF;
  color: #444;
}

.ui-button-custom, .ui-button-custom:visited, .ui-button-custom:hover {
  display: inline-block;
  padding: 10px 14px;
  color: #ffffff;
  background: #515151;
  border: 1px solid #919191;
  outline: none;
  text-decoration: none;
  text-shadow: none;
  transition: none;
  font-size: 14px;
  font-family: "Montserrat";
}

.ui-button-custom:hover {
  border: 1px solid #b8b8b8;
  background: #626262;
}

.ui-button-custom:focus {
  border: 1px solid #FFF;
  outline: none;
}

.ui-button-custom:active {
  background: #FFF;
  color: #444;
  border: 1px solid #025581;
}

.ui-button.ui-selected, .ui-selected {
  border: 1px solid #87d0ff;
  background: #0088c5;
  color: #fff ;
}

.ui-selected:hover, .ui-selected:focus {
  border: 1px solid #ffffff;
}

.ui-selected:active {
  background: #ffffff !important;
  color: #000;
}

#perf-dataset > .ui-selected { background: #0062d2; border: 1px solid #c5e1ff; }
#perf-mode    > .ui-selected { background: #0587b9; border: 1px solid #bbe4ff; }
#perf-test    > .ui-selected { background: #7465d1; border: 1px solid #dbc3ff; }
#perf-comp-op > .ui-selected { background: #a23f93; border: 1px solid #fcbae1; }
#perf-style   > .ui-selected { background: #ab425c; border: 1px solid #ffbfbf; }
#perf-metric  > .ui-selected { background: #a5643f; border: 1px solid #ffdac0; }

.ui-chart-outer {
  box-sizing: border-box;
  font-family: "Nunito Light";
  font-size: 125%;
  margin: 15px 0;
  background: var(--section-background);
  color: #eeeeee;
  fill: #b9b9b9;
  border: var(--section-border);
}

.ui-chart-header {
  padding: 15px 10px;
  text-align: center;
}

.ui-download-button {
  font-size: 105%;
  display: inline-block;
  padding: 20px 10px;
  background: #4981b7;
  color: #FFF;
  text-align: center;
  transition: background 0.2s ease;
  min-width: 300px;
  margin: 10px 10px 10px 0;
}

.ui-download-button:hover {
  text-decoration: none;
  background: #5bafff;
}

.ui-dropdown-content {
  position: absolute;
  margin-top: -1px;
  padding: 10px;
  right: 0;
  min-width: calc(min(100vw - 35px, 1000px));
  min-height: calc(min(100vh - 200px, 600px));
  background: #dbdbdb;
  color: #000;
  border: solid 1px #8e8e8e;
}

.ui-dropdown-content > textarea {
  background: #ffffff;
  color: #000;
  border: solid 1px #0085d7;
  resize: none;
}
/* -------------------------------------------------------------------------- */

/* -------------------------- Syntax Highlighting --------------------------- */
/* 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.blend2d-class  { color: var(--token-special); }
.token.blend2d-enum   { color: var(--token-special); }
/* -------------------------------------------------------------------------- */

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

  .split-horz { display: block; }
  .split-horz > div { flex: 1 50%; margin: 0; }
  .split-horz > div:first-child { margin-left: 0; margin-right: 0;}
  .split-horz > div:last-child { margin-left: 0; margin-right: 0;}
  .section-container div.section { margin-bottom: 15px; }
  .output-container div.output { margin-bottom: 15px; }

  .figure > img:not(:last-child) {
    margin: 1px 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: 105%; }
  code { font-size: 12px; }

  .outer > div {
    padding: 0 1px 0 1px;
  }

  .outer-content {
    padding: 1px 0px 1px 0px;
  }

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

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

  .inner-content {
    padding: 0;
  }

  .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: 0 1px 0 0;
  }

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

  .left-menu-items {
    flex: 1;
    margin: 1px 1px 1px 0;
    border: 0;
    background: none;
  }

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

  .note {
    padding: 2px 5px;
    font-size: 85%;
  }

  .table, .section, .note, .note-important, .note-highlight {
    margin: 4px 0px;
  }

  .gallery > img {
    margin: 3px 4px 3px 0;
    width: calc((100% - 16px) / 3);
    height: calc((100% - 16px) / 3);
  }

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