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

*:focus { outline: none; }
a:focus { outline: 1px dashed currentcolor; }
/* -------------------------------------------------------------------------- */

/* --------------------------------- 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-color: #222;
    background-image: url("./images/background-page.jpeg");
    background-repeat: repeat;
    color: #f1f1f1;
    font-size: 18px;
    font-family: "Nunito Light", "helvetica", "arial";
  }

  h1, h2, h3 {
    color: #FFFFFF;
    font-family: "Montserrat", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Tahoma", sans-serif;
    text-shadow: #000 0px 0px 4px, #000 0px 0px 1px;
  }

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

  p { text-align: justify; }
  b { font-weight: bold; }
  i { font-style: italic; }

  p, ul { margin: 8px 0; }
  ul ul { margin: 4px 0; }

  p, li, table {
    line-height: 1.4em;
  }

  ul {
    text-align: justify;
    padding-left: 30px;
    list-style: disc outside none;
  }

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

  pre {
    box-sizing: border-box;
    width: 100%;
    border: 1px solid #55a8e8;
    background: rgba(0, 0, 0, 0.5);
    margin: 15px 0;
  }

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

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

  video {
    display: inline-block;
    border: 1px solid #000;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  }

  a, a:visited {
    padding: 0px 2px;
    margin: 2px 0px;
    line-height: inherit;
    color: #75b7ff;
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
  }
  a:hover { text-decoration: underline; }
  a:focus { outline: 1px dashed #fff; }

  .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 10px; }
  .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%;}
  .inner { box-sizing: border-box; padding: 0px 10px; }

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

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

  .inner-main-menu {
    display: flex;
    align-items: center;
    padding: 3px 1px 3px 1px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    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 {
    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: #545454;
  }

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

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

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

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

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

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

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

  .outer-content {
    background: rgba(39, 115, 158, 0.37);
  }
  .outer-content-2 {
    background: rgba(48, 160, 224, 0.37);
    color: #fff;
  }
  .outer-content-3 {
    background: rgba(55, 145, 197, 0.34);
    color: #efefef;
  }

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

  .outer-footer {
    background: linear-gradient(to bottom, #378ab74a, transparent);
    color: #cfcfcf;
    border-top: solid 1px #3aabfd;
    font-size: 90%;
  }

  .outer-docs-container {
  }

  .inner-docs-container {
    display: flex;
    padding: 15px 10px;
  }

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

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

  .left-menu-content {
  }

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

  .left-menu-items {
    margin-top: 15px;
    background: rgba(29, 83, 113, 0.34);
    padding: 7px;
  }

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

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

  .docs-content {
    background: rgba(35, 100, 136, 0.34);
    padding: 0px 15px 10px 15px;
    flex: 1;
    overflow: hidden;
  }

  .outer-docs-navbar {
    margin-top: 15px;
  }
  .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 rgb(255, 130, 39);
    background: rgba(0, 0, 0, 0.41);
  }

  .note {
    margin: 15px 0px;
    padding: 5px 15px;
    border: 1px solid #ff9c82;
    font-size: 90%;
    background: rgba(0, 0, 0, 0.4);
  }

  .copyright {
    color: #dfdfdf;
    font-weight: bold;
  }

  .table {
    box-sizing: border-box;
    width: 100%;
    margin: 12px 0;
    border: 1px solid #55a8e8;
    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: #fff;
  }

  .table td, .table th {
    border: 1px solid #55a8e8;
    border-width: 0px 1px 1px 0px;
    margin-bottom: 5px;
    line-height: inherit;
    padding: 4px 8px;
    text-align: left;
  }
  .table th {
    background: rgb(5, 95, 138);
    color: #fff;
    font-weight: bold;
  }
  .table tr:nth-child(odd) { background: rgba(0, 0, 0, 0.47); }
  .table tr:nth-child(even) { background: rgba(0, 0, 0, 0.34); }
  .table tr:last-child td { border-bottom-width: 0px; }
  .table td:last-child, .table th:last-child {
    border-right-width: 0px;
  }

  .gallery {
    text-align: center;
    font-size: 1px;
  }
  .gallery > img {
    margin: 9px 15px 9px 0;
    border: 1px solid #3e85bd;
    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;
    border: 1px solid #3e85bd;
    width: calc((100% - 24px) / 2);
    height: calc((100% - 24px) / 2);
    max-width: 514px;
  }
  .gallery-2 > img:last-child { margin-right: 0; }

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

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

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

  .output-content {
    box-sizing: border-box;
    background: #000;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .figure {
    text-align: center;
  }
  .figure > img {
    border: 1px solid #5faae6;
    margin: 5px;
  }
  .figure-text {
    text-align: center;
    font-style: italic;
  }

  .output-content {
    border: 1px solid #55a8e8;
  }

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

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

  .status-yes  { color: #5eff4b; }
  .status-no   { color: #ff7575; }
  .status-hack { color: #fdff6d; }

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

  .issue-table > thead > tr > th:nth-child(2) { width: 9em; }
  .issue-table > thead > tr > th:nth-child(3) { width: 9em; }
  .issue-table > thead > tr > th:nth-child(4) { width: 9em; }

  .doc-search-bar {
    position: relative;
    box-sizing: border-box;
    margin: 0;

    background: #125f9040;
    border: solid 1px #265a75;
  }

  .doc-search-bar.active {
    background: #132c40;
    border: solid 1px #55c4ff;
  }

  .doc-search-bar input {
    background: none;
    color: #fff;
  }

  .doc-search-bar input::placeholder {
    color: #85b5d4;
  }

  .doc-search-dropdown {
    background: #1f1f1f;
    border: solid 1px #43bae4;

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

/* ----------------------------------- UI ----------------------------------- */
.ui-button, .ui-button:visited, .ui-button:hover {
  display: inline-block;
  margin: 2px 6px 2px 0px;
  padding: 2px 4px;
  color: #DDD;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid #447da9;
  border-radius: 3px;
  outline: none;
  text-decoration: none;
  text-shadow: none;
  transition: none;
}

.ui-button:hover, .ui-button:focus {
  border: 1px solid #FFF;
  background: rgba(0, 0, 0, 0.05);
  color: #FFF;
}

.ui-button:focus {
  border: 1px solid #FFF;
  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: #58007361;
  border: 1px solid #c45bff;
  outline: none;
  text-decoration: none;
  text-shadow: none;
  transition: none;
  font-size: 14px;
  font-family: "Montserrat";
}

.ui-button-custom:hover {
  border: 1px solid #e1acff;
  background: rgba(164, 17, 210, 0.32);
}

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

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

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

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

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

.ui-chart-outer {
  box-sizing: border-box;
  font-family: "Nunito Light";
  font-size: 125%;
  margin: 15px 0;
  background: rgba(0, 20, 31, 0.5);
  color: #eeeeee;
  fill: #b9b9b9;
  border: solid 1px #136cb3;
}

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

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

.ui-download-button:hover {
  text-decoration: none;
  background: #136abd;
}

.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: #fff;
  color: #111;
  border: solid 1px #d68eff;
}
/* -------------------------------------------------------------------------- */

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

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

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

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

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

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

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

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

/* --------------------------------- Fixes ---------------------------------- */
.hljs {
  padding: 5px;
  background: none;
}
/* -------------------------------------------------------------------------- */