:root {
  --ff-sansserif: "Helvetica Neue", "Microsoft YaHei", Arial, sans-serif;
  --ff-monospace: Monaco, Consolas, "Courier New", monospace;
  --body-bg: #fff;
  --body-fg: #555;
  --body-fc: #444;
  --scroll-thumb-bg: #eee;
  --scroll-thumb-bg-h: #ccc;
  --scroll-thumb-bg-a: #bbb;
  --header-h: 44px;
  --header-bg: #ffffff;
  --footer-bg: #f8f8f8;
  --control-bg: #ffffff;
  --control-fg: #444;
  --title-bg: #eee;
  --tree-line: #f8f8f8;
  --scroll-bar: 8px;
}

*,*::before,*::after {box-sizing: border-box;}
html {font-size: 14px; font-family: var(--ff-sansserif);}
body {margin: 0; padding: 0; background-color: var(--body-bg); color: var(--body-fg); line-height: 1.5;}
[hidden], template {display: none;}
a {color: #337ab7; text-decoration: none;}
hr {height: 1px; border-bottom: 1px solid #2b3339;}
pre {overflow: auto;}
code, kbd, pre, samp {font-family: monospace; font-size: 1em;}
button, input, optgroup, select, textarea {color: inherit; font: inherit; margin: 0;}
button {overflow: visible;}
button, select {text-transform: none;}
button, input, select, textarea {font-family: inherit; font-size: inherit; line-height: inherit; background-color: var(--control-bg); color: var(--control-fg);}
.table {background-color: var(--body-bg); border: 1px solid var(--body-fg); width: 100%; border-collapse: collapse; border-spacing: 0;}
.table th {text-align: left;}
.table td, .table th {padding: 4px;}
.table th,.table tr td {border: 1px solid var(--scroll-thumb-bg-h);}

::-webkit-scrollbar {width: var(--scroll-bar); height: var(--scroll-bar); background-color: transparent;}
::-webkit-scrollbar-track {margin: 0; background: transparent;}
::-webkit-scrollbar-thumb {background-color: var(--scroll-thumb-bg);}
::-webkit-scrollbar-thumb:hover {background-color: var(--scroll-thumb-bg-h);}
::-webkit-scrollbar-thumb:active {background-color: var(--scroll-thumb-bg-a);}
::-webkit-scrollbar-corner {background: transparent;}

p {font-size: 14px; line-height: 1.6;}
h1 {font-size: 24px; font-weight: 500; margin: 0;}
h2 {font-size: 20px; margin: 15px 0 10px 0;}
h3 {font-size: 18px; margin: 15px 0 10px 0;}
h4 {font-size: 16px; margin: 15px 0 10px 0;}
h5 {font-size: 14px; margin: 15px 0 10px 0;}
h6 {font-size: 12px; margin: 15px 0 10px 0;}

.scrollbar-0::-webkit-scrollbar {display: none;}
.scroll {overflow: auto!important;}
.scroll-x {overflow: hidden; overflow-x: auto!important;}
.scroll-y {overflow: hidden; overflow-y: auto!important;}
.scroll-hidden {overflow: hidden;}
.scroll,.scroll-x,.scroll-y,.scroll-hidden {overscroll-behavior: contain;}

.flex {display: flex; flex-wrap: wrap; padding-left: var(--gutter); padding-right: var(--gutter);}
.flex > [class*=flex-] {position: relative; width: 100%; padding-left: var(--gutter); padding-right: var(--gutter);}
.flex-np > [class*=flex-] {padding-left: 0; padding-right: 0;}
.flex-01 {flex: 0 0 8.333333%; max-width: 8.333333%;}
.flex-02 {flex: 0 0 16.666667%; max-width: 16.666667%;}
.flex-03 {flex: 0 0 25%; max-width: 25%;}
.flex-04 {flex: 0 0 33.333333%; max-width: 33.333333%;}
.flex-05 {flex: 0 0 41.666667%; max-width: 41.666667%;}
.flex-06 {flex: 0 0 50%; max-width: 50%;}
.flex-07 {flex: 0 0 58.333333%; max-width: 58.333333%;}
.flex-08 {flex: 0 0 66.666667%; max-width: 66.666667%;}
.flex-09 {flex: 0 0 75%; max-width: 75%;}
.flex-10 {flex: 0 0 83.333333%; max-width: 83.333333%;}
.flex-11 {flex: 0 0 91.666667%; max-width: 91.666667%;}
.flex-12 {flex: 0 0 100%; max-width: 100%;}
.flex-auto {flex: 0 0 auto; width: auto; max-width: none;}
.flex-fill {flex-basis: 0; flex: 1; flex-grow: 1; max-width: 100%;}
.flex-none {flex: none;}
@media (max-width: 768px) {
  .flex-01-m {flex: 0 0 8.333333%; max-width: 8.333333%;}
  .flex-02-m {flex: 0 0 16.666667%; max-width: 16.666667%;}
  .flex-03-m {flex: 0 0 25%; max-width: 25%;}
  .flex-04-m {flex: 0 0 33.333333%; max-width: 33.333333%;}
  .flex-05-m {flex: 0 0 41.666667%; max-width: 41.666667%;}
  .flex-06-m {flex: 0 0 50%; max-width: 50%;}
  .flex-07-m {flex: 0 0 58.333333%; max-width: 58.333333%;}
  .flex-08-m {flex: 0 0 66.666667%; max-width: 66.666667%;}
  .flex-09-m {flex: 0 0 75%; max-width: 75%;}
  .flex-10-m {flex: 0 0 83.333333%; max-width: 83.333333%;}
  .flex-11-m {flex: 0 0 91.666667%; max-width: 91.666667%;}
  .flex-12-m {flex: 0 0 100%; max-width: 100%;}
  .flex-auto-m {flex: 0 0 auto; width: auto; max-width: none;}
  .flex-fill-m {flex-basis: 0; flex: 1; flex-grow: 1; max-width: 100%;}
  .flex-none-m {flex: none;}
}
.flex-r,.flex-c {display: flex; flex-wrap: nowrap;}
.flex-r {flex-direction: row;}
.flex-c {flex-direction: column;}
.flex-a,.flex-f {position: relative;}
.flex-a {flex: none;}
.flex-f {flex: 1;}
.flex-v {overflow: hidden;}
.flex-s {position: relative; padding-top: 100%;}
.flex-s .flex-s-c {position: absolute; left: 0; top: 0; right: 0; bottom: 0;}
.flex-s-4-3 {padding-top: 75%;}

.a-i-s {align-items: flex-start!important;}
.a-i-c {align-items: center!important;}
.a-i-e {align-items: flex-end!important;}
.j-c-s {justify-content: flex-start!important;}
.j-c-c {justify-content: center!important;}
.j-c-e {justify-content: flex-end!important;}
.m-a-d {margin: 15px;}
.p-a-d {padding: 15px;}
.m-l-r {margin-left: 15px; margin-right: 15px;}
.m-t-b {margin-top: 15px; margin-bottom: 15px;}
.p-l-r {padding-left: 15px; padding-right: 15px;}
.p-t-b {padding-top: 15px; padding-bottom: 15px;}
.t-a-l {text-align: left;}
.t-a-c {text-align: center;}
.t-a-r {text-align: right;}
.m-l-d {margin-left: 15px;}
.m-l-s {margin-left: 5px;}
.m-l-a {margin-left: auto;}
.m-r-a {margin-right: auto;}

.tree {user-select: none; -webkit-user-select:none; -ms-user-select:none; -moz-user-select: none; font-weight: bold;}
.tree, .tree ul {margin: 0; padding: 0; list-style: none;}
.tree li > ul {display: none;}
.tree-bold {display: flex; flex-flow: row nowrap; align-items: center; line-height: 36px;}
.tree-bold:hover {opacity: 1;}
.tree-icon {margin-right: .4em;}
.tree-text {flex: 1;}
.tree-pack {border-bottom: 1px solid var(--tree-line);}
.tree-node {cursor: pointer; display: flex; flex-flow: row wrap; align-items: center; line-height: 36px;}
.tree-node:hover {background-color: #eeeeee; color: #1976D2;}
.tree-head {pointer-events: none; background-color: var(--tree-line); border: none; color: #999; font-size: 10px; line-height: 20px; margin: 0; padding: 0; padding-left: 10px; text-transform: uppercase;}
.tree-null0 {width: 0.5em;}
.tree-null1 {width: 1.8em;}
.tree-null2 {width: 3.2em;}
.tree-null3 {width: 4.6em;}
.tree-arrow {pointer-events: none; margin-left: 5px; margin-right: 8px; opacity: .5; border-left: 4px dashed; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: .3s;}
.tree-arrow-r {display: none; margin-left: 1em;}
.tree-selected {box-shadow: inset 4px 0 0 0 #03a9f4;}
.tree-expanded > ul {display: block!important;}
.tree-expanded > .tree-bold {color: #1976D2;}
.tree-expanded > .tree-bold .tree-arrow {transform: rotate(90deg);}
.tree-expanded > .tree-bold .tree-arrow-r {display: block;}
.tree-searched ul {display: block!important;}
.tree-searched .tree-bold {display: none;}
.tree-filtered {display: none!important;}
.tree-group {height: 1px; margin-left: 1.9em; background-color: var(--tree-line);}
.tree-link {flex: 1;}
.tree-pack .tree-head {font-weight: normal; padding-left: 24px;}

.header {position: sticky; top: 0; display: flex; flex-flow: row nowrap; height: var(--header-h); background-color: var(--header-bg); box-shadow: 0 2px 2px #ddddddcc; z-index: 10;}
.header .logo {font-weight: bold; font-size: 14px; line-height: 42px; padding-left: 10px; color: #555;}
.header .logo a {color: #4183c4; text-decoration: none;}
.header .logo a:focus,.sidenav .help-title a:hover {text-decoration: none;}
.header .expand-tree {display: none; background: transparent; height: 42px; border: 0; margin: 0; padding: 0 12px; outline: none;}
.header .expand-tree span {background-color: #2194CE; display: block; width: 20px; height: 2px; margin-top: 4px;}
.header .expand-tree span:nth-child(1) {margin-top: 0;}
.header .locales {margin-right: 15px; padding: 0 10px; background-color: transparent; border-color: transparent;}
.header .locales:focus {border-color: #ddd;}
.header .to-home {font-weight: bold;}

.footer {background-color: var(--footer-bg); border-top: 1px solid #eee;}
.footer .copyright {padding: 15px;}

x-navbar {box-shadow: 2px 0 4px #ddddddcc; z-index: 5;}
.navbar {position: sticky; top: var(--header-h); width: 300px; max-height: calc(100vh - 96px);}
.navbar-search {position: relative; padding: 5px; border-bottom: 1px solid var(--tree-line); z-index: 1;}
.navbar-search-input {border: 0; width: 100%; margin: 0; padding: 5px 10px; outline: none; border: 1px solid transparent;}
.navbar-search-nput:focus {border-color: #81d4fa;}
.navbar .tree {font-weight: bold;}
.documents {padding: 5px 10px;}

figure {margin: 0;}
figure img {max-width: 100%;}

.text-hl {color: #288DDB;}

.frame {display: flex; flex-flow: row nowrap;}
.main {flex: 1; min-height: calc(100vh - var(--header-h));}
.main-header {margin: 20px;}
.main-header h1 {background-color: var(--title-bg); padding-left: 10px; padding-top: 5px; padding-bottom: 5px;}
.main li {line-height: 2; margin-top: 5px; margin-bottom: 5px;}
.subtopic {font-size: 12px; line-height: 2; margin: 0; padding-left: 10px; background-color: #ddd; border-bottom: 1px dashed #f0f0f0;}
.container {margin-left: auto; margin-right: auto; padding-right: 20px; padding-left: 20px;}

.ul,.ol {list-style: none; padding: 0;}

@media all and (max-width: 768px) {
  .header .expand-tree {display: block;}
  .header .locales {margin-right: 0;}
  x-navbar {position: fixed; top: var(--header-h); bottom: 0; width: 100%; background-color: var(--body-bg); border-right: none;}
  .navbar {width: 100%; max-height: 100%;}
  .main {overflow-y: hidden;}
  .main-header {margin: 0; margin-bottom: 5px; padding: 0;}
  .container {padding-right: 10px; padding-left: 10px;}
  .mobile-hide {display: none;}
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: #242424;
    --body-fg: #999;
    --body-fc: #444;
    --scroll-thumb-bg: #333;
    --scroll-thumb-bg-h: #444;
    --scroll-thumb-bg-a: #555;
    --header-bg: #101010;
    --footer-bg: #242424;
    --control-bg: #202020;
    --control-fg: #999999;
    --tree-line: #333;
  }
  .header {box-shadow: 0 2px 2px rgba(0,0,0,.2);}
  .footer {border-color: #303030;}
  .main-header h1 {background-color: #363636;}
  .subtopic {background-color: #343434; border-color: #404040;}
}