html {
    /* Light mode */
    --primary-color:           #7850C8;
    --primary-dark-color:      #5000C8;
    --primary-light-color:     #A256FB;
    --primary-lighter-color:   #D4B8F5;
    --primary-lightest-color:  #EDE3FB;
 
    --side-nav-background:     #2B2040;
    --side-nav-foreground:     #D4B8F5;
    --page-outline-vis:        #5E3498;
 
    --searchbar-background:    var(--page-background-color);
    --searchbar-foreground:    var(--page-foreground-color);
 
    --link-color:              #04CFFF;
    --param-color:             #A256FB;
 
    --top-height: 200px;
    --side-nav-fixed-width:    335px;
    --menu-display:            none;
    --content-maxwidth: 1050px;
    --table-line-height: 24px;
    --toc-sticky-top: var(--spacing-medium);
    --toc-width: 200px;
    --toc-max-height: calc(100vh - 2 * var(--spacing-medium) - 85px);

}



@media (prefers-color-scheme: dark) {
    html:not(.light-mode) {
        color-scheme: dark;
 
        --primary-color:           #A256FB;
        --primary-dark-color:      #D4B8F5;
        --primary-light-color:     #7850C8;
        --primary-lighter-color:   #262830;
        --primary-lightest-color:  #19191D;
 
        --side-nav-background:     #16181E;
        --side-nav-foreground:     var(--page-foreground-color);
        --page-outline-vis:        #5E3498;
 
        --param-color:             #C89BF8;
        --link-color:              #04CFFF;
    }
}


html.dark-mode {
    color-scheme: dark;
 
    --primary-color:           #A256FB;
    --primary-dark-color:      #D4B8F5;
    --primary-light-color:     #7850C8;
    --primary-lighter-color:   #262830;
    --primary-lightest-color:  #19191D;
 
    --side-nav-background:     #16181E;
    --side-nav-foreground:     var(--page-foreground-color);
    --page-outline-vis:        #5E3498;
 
    --param-color:             #C89BF8;
    --link-color:              #04CFFF;
}

a:link, a:visited, a:hover, a:focus, a:active {
    color: var(--link-color) !important;
}

.paramname {
    color: var(--param-color);
}

dl.section dd, dl.bug dd, dl.deprecated dd {
    margin-inline-start: revert;
}

#top {
    background: var(--side-nav-background);
    position: fixed;
    top: 0;
    left: 0;
    width: var(--side-nav-fixed-width);
    height: var(--top-height);
    z-index: 100;
    margin-bottom: 0;
    overflow: visible
}

#titlearea {
    padding: 0;
    margin: 0;
    border-bottom: 1px solid var(--separator-color, #3b3b3b);
    height: var(--top-height);
    width: 100%;
}

#titlearea table,
#titlearea table tbody,
#titlearea table tr {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#titlearea table tr td {
    display: block;
    width: 100%;
    text-align: center;
}

#projectalign {
    display: block;
    text-align: center;
    padding: 4px 12px 8px;
}

#projectlogo img {
    width: 64px;
    height: 64px;
    max-height: none !important;
    display: block;
    margin: 12px auto 0;
    padding-top: 0;
}

#projectname {
    font-size: 1.1em;
    line-height: 1.2;
}

#projectbrief {
    display: block;
    font-size: 0.8em;
    opacity: 0.7;
    margin-top: 2px;
}

#projectversion {
    font-size: 0.75em;
    opacity: 0.6;
    padding-top: 2px;
    text-align: center;
}


.op-badge {
    font-size: 12px;
    font-weight: bold;
    padding: 2px 4px ;
    border-radius: 6px;
    vertical-align: top;
    border: 1px solid rgba(0,0,0,0.1);
}

.op-req {
    background-color: #e74c3c;
    color: white;
}

.op-opt {
    background-color: #3498db;
    color: white;
}

#doc-content {
    margin-left: var(--side-nav-fixed-width) !important;
    padding-top: 1rem;
}



@media screen and (min-width: 768px) {
    #nav-path {
        position: fixed;
        right: 0;
        left: 0;
        bottom: 0;
        width: auto;
    }
}