@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;600&family=Inter:wght@300;400;600&display=swap");
html {
    height:     100%;
    overflow-x: hidden;
    overflow-y: scroll;
}

body {
    font:             400 16px/24px "Inter", sans-serif;
    color:            #222222;
    background-color: #1d2a52;
    display:          flex;
    flex-direction:   column;
    min-height:       100%;
}

a {
    color: #2491f3;
}

p {
    font:          400 16px/26px "Inter", sans-serif;
    margin-top:    24px;
    margin-bottom: 0;
}
p > img {
    display:   block;
    margin:    0 auto;
    max-width: 100%;
}

h2, h3 {
    margin-bottom: 0;
    margin-top:    44px;
}

h4, h5, h6 {
    margin-bottom: 0;
    margin-top:    24px;
}

h1 {
    font:           400 30px/40px "Inter", sans-serif;
    text-transform: uppercase;
    margin-bottom:  0;
}

h2 {
    font: 400 28px/36px "Inter", sans-serif;
}

h3 {
    font: 400 24px/32px "Inter", sans-serif;
}

h5 {
    font:           600 14px/20px "Inter", sans-serif;
    text-transform: uppercase;
    color:          #707070;
}

h1:target, h2:target, h3:target {
    scroll-margin-top: 90px;
}

ul, ol {
    padding: 0;
    margin:  20px 0 0 24px;
}
ul li, ol li {
    margin-left: 20px;
    line-height: 30px;
}
ul li > p, ol li > p {
    margin: 0;
}
ul li > ul, ol li > ul {
    margin-top: 0;
}

ol {
    margin-left: 0;
}

table {
    width:      100%;
    margin-top: 24px;
    font-size:  14px;
}
table th {
    padding:          12px 16px;
    background-color: rgba(0, 0, 0, 0.54);
    font-weight:      bold;
    color:            #ffffff;
    white-space:      nowrap;
}
table td {
    border-top:       solid 1px rgba(0, 0, 0, 0.07);
    background-color: #f9f9f9;
    padding:          12px 16px;
    vertical-align:   top;
}

code {
    font: inherit;
}

blockquote {
    border-left:   solid 4px #a2a2a2;
    padding:       10px 16px;
    margin-top:    24px;
    margin-bottom: 0;
    color:         #707070;
}
blockquote > p {
    margin:    0;
    font-size: 14px;
}

h2 + p, h2 + table, h3 + p {
    margin-top: 10px;
}

p + ul {
    margin-top: 10px;
}

h5 + div.highlight {
    margin-top: 6px;
}

h5 + table {
    margin-top: 6px;
}

p + p {
    margin-top: 14px;
}

header {
    height:           60px;
    border-bottom:    solid 1px #c2cfe0;
    padding:          0 15px;
    background-color: #ffffff;
    position:         sticky;
    top:              0;
    z-index:          10;
}
header .col-2.logo {
    min-width: 250px;
    max-width: 250px;
    padding:   0;
}
header .col-2.logo a.logo {
    background-image:    url("/assets/images/logo.svg");
    background-size:     contain;
    background-repeat:   no-repeat;
    background-position: center;
    display:             block;
    height:              60px;
    width:               170px;
    margin:              0 auto;
}
header .col-4.search {

}

footer {
    background-color: #1d2a52;
    padding:          30px 15px;
    font-size:        14px;
    color:            #ffffff;
}
footer .col-2.logo {
    min-width: 250px;
    max-width: 250px;
    color:     #ffffff;
    padding:   0;
}
footer .col-2.logo a {
    background-image:  url("/assets/images/logo-icon-white.svg");
    background-size:   contain;
    background-repeat: no-repeat;
    display:           block;
    height:            23px;
    width:             170px;
    margin:            0 auto;
}
footer .col.info {
    padding-left: 40px;
}
footer .col.info a {
    color:           #ffffff;
    text-decoration: none;
}
footer .col.info a:hover {
    text-decoration: underline;
}

input[type=checkbox]#__search {
    display: none;
}

div#search {
    position: relative;
}
div#search .search-overlay {
    position:         fixed;
    display:          none;
    background-color: rgba(0, 0, 0, 0.54);
    left:             0;
    top:              0;
    right:            0;
    bottom:           0;
    margin-bottom:    0;
    z-index:          100;
    cursor:           pointer;
}
div#search form[name=search] {
    position: relative;
    z-index:  1001;
}
div#search input[name=query] {
    background-color: #ebedf5;
    border:           solid 1px #ebedf5;
    border-radius:    6px;
    outline:          none;
    padding:          8px 14px 8px 40px;
    font-size:        16px;
    margin-top:       10px;
    transition:       color .25s, background-color .25s, box-shadow .25s, width .25s;
}
div#search input[name=query]:focus {
    border: solid 1px #ebedf5;
}
div#search label.search-icon {
    position: absolute;
    left:     12px;
    top:      20px;
    color:    #828282;
}
div#search label.search-icon i.fe {
    opacity:   0.8;
    font-size: 18px;
}
div#search .search-result {
    display:                    none;
    position:                   relative;
    background-color:           #ffffff;
    box-shadow:                 rgba(0, 0, 0, 0.14) 0 6px 10px 0, rgba(0, 0, 0, 0.12) 0 1px 18px 0, rgba(0, 0, 0, 0.4) 0 3px 5px -1px;
    z-index:                    1000;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius:  6px;
    overflow:                   hidden;
}
div#search .search-result .result-meta {
    background-color: #f4f4f4;
    font-size:        13px;
    padding:          10px 20px 10px 40px;
    color:            #707070;
}
div#search .search-result .result-list {
    list-style: none;
    padding:    0;
    margin:     0;
}
div#search .search-result ul {
    max-height: 60vh;
    overflow-y: auto;
}
div#search .search-result ul li {
    margin-left: 0;
}
div#search .search-result ul li a {
    display:         block;
    color:           #222222;
    text-decoration: none;
}
div#search .search-result ul li a i.fe {
    float:       left;
    line-height: 50px;
    width:       50px;
    text-align:  center;
    font-size:   20px;
    opacity:     0.6;
}
div#search .search-result ul li a b {
    display: block;
}
div#search .search-result ul li a span {
    display:     block;
    padding:     0 20px 6px 50px;
    font-size:   14px;
    line-height: 24px;
    color:       #808080;
    word-break:  break-word;
}
div#search .search-result ul li a.page b {
    font-size:   18px;
    font-weight: normal;
    line-height: 52px;
}
div#search .search-result ul li a.article b {
    font-size: 16px;
    padding:   6px 0 2px 50px;
}
div#search .search-result ul li a:hover {
    background-color: rgba(36, 145, 243, 0.1);
}
div#search .search-result ul li:last-child a:last-child {
    padding-bottom: 10px;
}

#__search:checked ~ header .search-overlay {
    display: block;
}
#__search:checked ~ header input[name=query] {
    background-color:           #ffffff;
    border-color:               #ffffff;
    box-shadow:                 rgba(0, 0, 0, 0.07) 0 0 13.2px 0;
    width:                      100%;
    border-bottom-left-radius:  0;
    border-bottom-right-radius: 0;
}
#__search:checked ~ header .search-result {
    display: block;
}

.admonition {
    border-left: solid 4px #ffffff;
    margin-top:  24px;
}
.admonition p {
    padding:   10px 16px;
    margin:    0;
    font-size: 14px;
}
.admonition p.admonition-title {
    font-weight: bold;
}
.admonition.warning {
    border-left-color: #ff9100;
}
.admonition.warning p.admonition-title {
    background-color: rgba(255, 145, 0, 0.1);
}
.admonition.info {
    border-left-color: #00b8d4;
}
.admonition.info p.admonition-title {
    background-color: rgba(0, 184, 212, 0.1);
}
.admonition.tip {
    border-left-color: #00bfa5;
}
.admonition.tip p.admonition-title {
    background-color: rgba(0, 191, 165, 0.1);
}
.admonition.abstract {
    border-left-color: #00b0ff;
}
.admonition.abstract p.admonition-title {
    background-color: rgba(0, 176, 255, 0.1);
}

nav.tabs {
    float: right;
}
nav.tabs ul {
    list-style: none;
    padding:    0;
    margin:     0;
}
nav.tabs ul li {
    display:     inline-block;
    margin-left: 0;
}
nav.tabs ul li a {
    display:         block;
    line-height:     36px;
    font-size:       14px;
    color:           #222222;
    text-decoration: none;
    padding:         0 20px;
    margin-top:      12px;
    text-transform:  uppercase;
}
nav.tabs ul li a:hover {
    color: #1d2a52;
}
nav.tabs ul li a.active {
    margin-top:    0;
    line-height:   59px;
    color:         #1d2a52;
    border-bottom: solid 1px #1d2a52;
}
nav.tabs ul li a.blue {
    background-color: #1d2a52;
    color:            #ffffff;
    margin-left:      15px;
}

main {
    display:          flex;
    flex:             1;
    flex-direction:   column;
    padding:          0 15px;
    background-color: #ffffff;
    min-height:       100%;
}
main > div {
    flex: 1;
}
main .col-2.menu {
    min-width:    250px;
    max-width:    250px;
    padding:      30px 0 60px 0;
    border-right: solid 1px #c2cfe0;
}
main .col-6.content {
    padding: 30px 15px 60px 40px;
}
main .col.toc {
    padding: 30px 15px 60px 40px;
}

main nav.menu {
    //position: sticky;
    top:      90px;
}
main nav.menu ul {
    list-style:  none;
    padding:     0;
    margin:      0;
    font-size:   14px;
    line-height: 26px;
}
main nav.menu ul li {
    margin:      0;
    padding:     0;
    white-space: nowrap;
    line-height: 26px;
}
main nav.menu ul li a {
    display:         block;
    color:           #222222;
    text-decoration: none;
}
main nav.menu ul li a:hover, main nav.menu ul li a.active {
    color: #2491f3;
}
main nav.menu ul li a.active {
    border-right: solid 1px #1d2a52;
    margin-right: -1px;
}
main nav.menu ul li > ul {
    margin-left: 20px;
}
main nav.menu ul li.item-level-1 {
    border-top:   solid 1px #c2cfe0;
    padding-left: 20px;
}
main nav.menu ul li.item-level-1 > b {
    display:        block;
    margin:         0 0 12px 20px;
    text-transform: uppercase;
    color:          #222222;
    font-weight:    bold;
}
main nav.menu ul li.item-level-1:first-child {
    border-top:  none;
    padding-top: 0;
}

main nav.toc {
    position: sticky;
    top:      90px;
}
main nav.toc b {
    display:        block;
    font-size:      14px;
    line-height:    26px;
    text-transform: uppercase;
    margin-bottom:  12px;
}
main nav.toc ul {
    list-style:  none;
    padding:     0;
    margin:      0;
    font-size:   14px;
    line-height: 26px;
}
main nav.toc ul li {
    padding:     0;
    margin:      0;
    line-height: 26px;
}
main nav.toc ul li a {
    color:           #222222;
    text-decoration: none;
}
main nav.toc ul li a:hover {
    color: #2491f3;
}

.highlight {
    margin-top: 24px;
}
.highlight code {
    font-family:      "Roboto Mono", SFMono-Regular;
    display:          block;
    background-color: #f4f4f4;
    padding:          12px 16px;
}
.highlight code .o,
.highlight code .ow {
    color: rgba(0, 0, 0, 0.54);
}
.highlight code .p {
    color: rgba(0, 0, 0, 0.54);
}
.highlight code .cpf,
.highlight code .l,
.highlight code .s,
.highlight code .sb,
.highlight code .sc,
.highlight code .s2,
.highlight code .si,
.highlight code .s1,
.highlight code .ss {
    color: #1c7d4d;
}
.highlight code .cp,
.highlight code .se,
.highlight code .sh,
.highlight code .sr,
.highlight code .sx {
    color: #db1457;
}
.highlight code .m,
.highlight code .mb,
.highlight code .mf,
.highlight code .mh,
.highlight code .mi,
.highlight code .il,
.highlight code .mo {
    color: #d52a2a;
}
.highlight code .k,
.highlight code .kd,
.highlight code .kn,
.highlight code .kp,
.highlight code .kr,
.highlight code .kt {
    color: #3f6ec6;
}
.highlight code .kc,
.highlight code .n {
    color: #36464e;
}
.highlight code .no,
.highlight code .nb,
.highlight code .bp {
    color: #6e59d9;
}
.highlight code .nc,
.highlight code .ne,
.highlight code .nf,
.highlight code .nn {
    color: #a846b9;
}
.highlight code .nd,
.highlight code .ni,
.highlight code .nl,
.highlight code .nt {
    color: #3f6ec6;
}
.highlight code .c,
.highlight code .cm,
.highlight code .c1,
.highlight code .ch,
.highlight code .cs,
.highlight code .sd {
    color: rgba(0, 0, 0, 0.54);
}
.highlight code .na,
.highlight code .nv,
.highlight code .vc,
.highlight code .vg,
.highlight code .vi {
    color: rgba(0, 0, 0, 0.54);
}
.highlight code .ge,
.highlight code .gr,
.highlight code .gh,
.highlight code .go,
.highlight code .gp,
.highlight code .gs,
.highlight code .gu,
.highlight code .gt {
    color: rgba(0, 0, 0, 0.54);
}