/* Base ---------------------------------------------------------------- */
body {
    font-family: 'Source Sans Pro', sans-serif;
    min-height: 100vh;
    height: 100%;
    max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    margin-top: 34pt;
    padding-bottom: 0pt;
}

h1,
h2 {
    color: {{ theme_main }};
}

h3,
h4,
h5,
h6 {
    color: #374151;
}

p,
li {
    color: #3C3C3C;
    font-size: 13pt;
    line-height: 24pt;
}

a {
    color: {{ theme_main }};
}

img {
    border-radius: 5px;
    max-width: 100%;
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.07);
}

table {
    width: 100%;
    text-align: left;
    border-collapse: collapse;
    overflow-x: auto;
    display: block;
    width: fit-content;
}

code {
    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}

pre {
    border: 1px solid #E5E7EB;
    position: relative;
    padding: 1.5rem;
    background: #F8F9FB;
    border-radius: 10px;
    margin-bottom: 2rem;
    overflow: auto;
}

p code {
    font-size: 0.9em;
    background: #EFF1F5;
    padding-left: 5px;
    padding-right: 5px;
    border-radius: 5px;
    padding-bottom: 2px;
    padding-top: 2px;
}

blockquote p {
    font-size: 1.8rem;
    font-style: italic;
}

blockquote {
    padding-top: 30px;
    padding-bottom: 30px;
}

thead tr:last-child {
    font-size: 1.2rem;
}

thead tr:last-child {
    border-bottom: 1px solid #C2C2C2;
}

td,
th {
    padding: 15px;
}

.callout {
    margin-top: 28px;
    margin-bottom: 28px;
    width: 100%;
    border-radius: 5px;
    padding-left: 16px;
    padding-right: 16px;
    padding-bottom: 4px;
    box-sizing: border-box;
}

.callout p {
    padding-top: 8px;
    margin-top: 0px;
    margin-bottom: 4px;
    line-height: 18pt;
}

.callout p:last-child {
    margin-bottom: 4px;
}

.callout .callout-title {
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    margin-left: -16px;
    margin-top: -16px;
    margin-right: -16px;
    margin-bottom: 0px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 8px;
    padding-bottom: 8px;

    font-weight: 700;
    color: #FFF !important;
}

.callout.info {
    background: #e6efff;
}

.callout.info p.callout-title {
    background: #6875f5;
}

.callout.success {
    background: #ECFDF5;
}

.callout.success p.callout-title {
    background: #34D399;
}

.callout.warning {
    background: #FFFBEB;
}

.callout.warning p.callout-title {
    background: #FBBF24;
}

.callout.error {
    background: #FEF2F2;
}

.callout.error p.callout-title {
    background: #F87171;
}

/* General layout ------------------------------------------------------ */

.page {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 100vh;
}

.header,
.container {
    display: flex;
    justify-content: center;

    width: 100%;
    padding-left: 40px;
    padding-right: 40px;

    box-sizing: border-box;
}

.container {
    flex: 1;
}

.search,
.doctave-content {
    max-width: 830px;
    min-width: 380px;
    width: 100%;
    box-sizing: border-box;
}

.header {
    padding-top: 50px;
    padding-bottom: 20px;
}

.logo {
    display: flex;
}

.logo img {
    height: 45px;
    width: 45px;
    padding-right: 12px;
    box-shadow: none;
}

.logo,
.sidebar-left,
.sidebar-right,
.header-dummy-right {
    width: 300px;
    min-width: 300px;
}

.sidebar-left,
.sidebar-right {
    padding-top: 50px;
    box-sizing: border-box;
}

.sidebar-right {
    padding-left: 50px;
}

.sidebar-right .page-nav.fixed {
    top: 0;
    position: fixed;
    width: 280px;
}

.sidebar-right.bottom {
    display: flex;
    align-items: flex-end;
    padding-bottom: 230px;
}

.sidebar-right.bottom .page-nav {
    width: 280px;
    margin-top: -100px;
}

.sidebar-left {
    padding-bottom: 160px;
    padding-right: 50px;
}

.wave-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.wave-container p {
    padding-left: 40px;
    margin-bottom: 10px;
    color: #FFF;
}

.wave-container a {
    color: #FFF;
}

.wave-container svg {
    z-index: -1;
    position: absolute;
    bottom: 0;
}

.wave-container svg path {
    fill: {{ theme_main }};
}

.menu-toggle-button,
#menu-toggle-switch {
    display: none;
}

/* Changes to apply to "large" devices
 *
 * * Hide right navigation
 *
 */
@media screen and (max-width: 1200px) {

    .header-dummy-right,
    .sidebar-right {
        display: none;
    }
}

/* Changes to apply to "medium" devices
 *
 * * Hide main left navigation
 * * Start showing the menu toggle button
 * * Remove page shadow
 *
 */
@media screen and (max-width: 768px) {
    .page .container {
        overflow: hidden;
        justify-content: flex-start;
    }

    .header {
        flex-direction: column;
    }

    .logo {
        width: 100%;
        min-width: 100%;
    }

    .sidebar-left {
        position: fixed;
        display: none;
        top: 0;
        padding-top: 10px;
        overflow: auto;
        height: 100vh !important;
        max-height: 100vh !important;
    }

    .sidebar-left nav {
        padding-bottom: 50px;
    }

    .page .container .doctave-content {
        padding: 40px;
    }

    .menu-toggle-button {
        display: block;
        cursor: pointer;
        position: fixed;
        bottom: 15px;
        right: 50px;
        font-size: 1.6rem;
        z-index: 50;
        height: 25px;
        width: 25px;
        background: {{ theme_main }};
        color: white;
        padding: 10px;
        border-radius: 25px;
        line-height: 1.45rem;
        text-align: center;

        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    }

    #menu-toggle-switch:checked+.page {
        overflow: hidden;
    }

    #menu-toggle-switch:checked+.page .container .doctave-content {
        overflow-x: hidden;
        margin-left: 300px;
    }

    #menu-toggle-switch:checked+.page .header {
        margin-left: 300px;
    }

    #menu-toggle-switch:checked+.page .container .sidebar-left {
        display: block;
    }
}

/* Changes to apply to "small" devices
 *
 * * Tighten things up
 *
 */
@media screen and (max-width: 576px) {
    .page {
        padding-left: 5px;
        padding-right: 5px;
    }

    .header {
        padding-top: 20px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .header .logo .project-name {
        padding-bottom: 0px;
    }

    .doctave-content,
    .header,
    .header .search {
        min-width: 100%;
    }

    .page .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    .page .container .doctave-content {
        padding: 20px;
    }

    .menu-toggle-button {
        right: 15px;
    }
}

/* Dark mode ----------------------------------------------------------- */

#light-dark-mode-switch {
    display: block;
    cursor: pointer;
    color: #979797;
    background: #F3F3F3;
    width: 35px;
    height: 35px;
    line-height: 1.2em;
    text-align: center;
    padding: 5px;
    box-sizing: border-box;
    border-radius: 5px;
}

#light-dark-mode-switch:hover {
    background: #CECECE;
}

#light-dark-mode-switch svg {
    fill: #979797;
    height: 26px;
    width: 25px;
    /* Icon slightly off center? */
    margin-left: 2px;
    margin-top: -1px;
}

.dark #light-dark-mode-switch svg {
    margin-left: 0px;
    margin-top: 0px;
}

.dark #dark-mode-icon {
    display: none;
}

#light-mode-icon {
    display: none;
}

.dark #light-mode-icon {
    display: block;
}

.dark {
    background: #202B33;
}

.dark .search #search-form input {
    background: #202B33;
    border-color: #6B747B;
}

.dark .search .search-icon {
    background: #676767;
    color: #AFAFAF;
}

.dark .doctave-content {
    background: #30404D;
}

.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
    color: {{ theme_main_dark }};
}

.dark * {
    color: #FFF;
}

.dark a {
    color: {{ theme_main_dark }};
}

.dark h2.project-name a {
    color: #FFF;
}

.dark h2.project-name:after {
    color: {{ theme_main_dark }};
}

.dark h2.project-name:after {
    color: {{ theme_main_dark }};
}

.dark nav a {
    color: {{ theme_main_dark }};
}

.dark nav a.active:before {
    border-color: {{ theme_main_dark }};
}

.dark nav a.active {
    color: {{ theme_main_dark }};
}

.dark nav ul ul a {
    color: #FFF;
}

.dark code {
    color: #323232;
}

.dark .callout p {
    color: #374151;
}


.dark #search-results li {
    background: #202B33;
    border-color: #30404D;
}

.dark #search-results a:hover,
.dark #search-results a:focus {
    background: #30404D;
}

.dark .sidebar-right p {
    color: #888
}

.dark .sidebar-right hr {
    border-color: #888;
}

.dark .sidebar-right li a {
    font-size: 14pt;
    font-weight: 400;
    color: #FFF;
}

.dark .sidebar-right li a:hover {
    border-bottom: 1px solid {{ theme_main_dark }};
}

.dark .mermaid * {
    color: #3C3C3C;
}

.dark pre {
    background: #202B33;
    border: 1px solid #202B33;
    color: #FFF;
}

.dark code {
    color: #FFF;
}

.dark p code {
    color: #404040;
}

/* Main content -------------------------------------------------------- */

.doctave-content {
    z-index: 10;
    padding: 80px;
    background: #FFF;
    box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.07);
    border-radius: 10px 10px 0px 0px;
}

.doctave-content h1:first-child,
.doctave-content h2:first-child,
.doctave-content h3:first-child,
.doctave-content h4:first-child,
.doctave-content h5:first-child,
.doctave-content h6:first-child {
    font-weight: 400;
    margin-top: 0;
}

/* Left sidebar -------------------------------------------------------- */

.sidebar-left {
    height: calc(100% - 250px);
    overflow: auto;
}

.project-name {
    margin-top: 0px;
    padding-right: 20px;
}

.project-name:after {
    content: "DOCS";
    font-size: 12pt;
    display: block;
    color: {{ theme_main }};
    opacity: 56%;
}

.project-name a {
    font-family: 'Source Sans Pro', sans-serif;
    text-decoration: none;
}

nav {}

nav a {
    text-decoration: none;
}

nav a.active {
    color: {{ theme_main }};
}

nav a.active:before {
    content: "";
    border-left: 3px solid {{ theme_main }};
    padding-left: 10px;
}

nav a:hover {
    border-bottom: 1px solid {{ theme_main }};
}

nav ul {
    list-style: none;
    padding-left: 0pt;
}

nav ul li {
    line-height: 24pt;
}

nav ul ul li {
    line-height: 24pt;
}

nav ul a {
    font-size: 13pt;
    font-weight: 700;
}

nav ul ul {
    padding-left: 30pt;
    padding-top: 10pt;
    padding-bottom: 14pt;
}

nav ul ul a {
    font-size: 13pt;
    font-weight: 400;
    color: #545454;
}



/* Right sidebar ------------------------------------------------------- */

.sidebar-right {}

.page-nav-header {
    color: #ADADAD;
    margin-bottom: 4pt;
    font-size: 12pt;
    font-weight: 400;
}

.sidebar-right ul {
    list-style: none;
    padding-left: 0pt;
}

.sidebar-right li a {
    font-size: 13pt;
    font-weight: 400;
    color: #626262;
    text-decoration: none;
}

.sidebar-right li a:hover {
    border-bottom: 1px solid {{ theme_main }};
}

.sidebar-right a:hover {}

.sidebar-right li {
    line-height: 24pt;
}

.sidebar-right li.page-nav-level-2 {
    padding-left: 20px;
}

.sidebar-right li.page-nav-level-3 {
    padding-left: 40px;
}

.sidebar-right li.page-nav-level-4,
.sidebar-right li.page-nav-level-5,
.sidebar-right li.page-nav-level-6 {
    display: none;
}

/* Search -------------------------------------------------------------- */

.search #search-form {
    width: 100%;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.search #search-form input {
    font-family: 'Inter', sans-serif;
    color: #979797;
    height: 50px;
    outline: none;
    width: 100%;
    padding: 10px;
    border: 1px solid #EEEEEE;
    box-sizing: border-box;
    border-radius: 10px;
    box-sizing: border-box;
}

.search .search-icon {
    font-family: 'Inter', sans-serif;
    color: #AFAFAF;
    background: #F3F3F3;

    position: absolute;
    right: 10px;
    width: 30px;
    height: 30px;

    border-radius: 5px;

    line-height: 2em;
    text-align: center;
}

#search-results {
    z-index: 50;
    position: absolute;
    overflow: auto;

    width: 100%;
    top: 40px;
    left: 0px;

    padding-left: 0px;
    padding-right: 0px;

    background: none;
    list-style: none;
    border-radius: 10px;
    box-sizing: border-box;
    box-shadow: 0 0.1rem 1rem rgba(0, 0, 0, 0.1);
}

#search-results li {
    margin: 0;
    margin-top: -1px;
    border: 1px solid #E3E3E3;
    background: #FFF;
}

#search-results a {
    padding: 15px;
    width: 100%;
    display: inline-block;
    text-decoration: none;

    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#search-results a p {
    font-family: 'Source Sans Pro', sans-serif;
}

#search-results a:hover,
#search-results a:focus {
    background: #F4F4F4;
    outline: none;
}

#search-results .search-result-item-preview {
    margin-top: 10px;
    margin-bottom: 10px;
    color: #9B9B9B;
    text-decoration: none !important;
    font-size: 1rem;
}

#search-results li:first-child {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    margin-top: -5px;
}

#search-results li:last-child {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Katex --------------------------------------------------------------- */

.katex-error {
    border-radius: 8px;
    background-color: #ffa9a9;
    padding: 12px;
    padding-left: 12px;
    padding-right: 12px;
}

.katex-error-msg {
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding: 8px;
    padding-left: 12px;
    padding-right: 12px;
    margin-top: -12px;
    margin-right: -12px;
    margin-left: -12px;
    background-color: #f86767;
    font-weight: 500;
}