/* This file is part of PeakRDL-html <https://github.com/SystemRDL/PeakRDL-html>.
 * and can be redistributed under the terms of GNU GPL v3 <https://www.gnu.org/licenses/>.
 */

/* ------------------------------ Color Scheme ------------------------------ */
:root {
    --main-text-color:#404040;
    --title-text-color: #fff;
    --title-text-color-hover: #fff;
    --footer-text-color: #808080;
    --url-color: #2980b9;
    --url-color-hover: #3091d1;
    --overlay-bg-rgba: 0,0,0,0.5;
    --reserved-text-color:#808080;
    --content-preview-text-color:#ccc;

    --offpage-bg-color:#eee;
    --main-bg-color:#fcfcfc;
    --title-bg-color: #2980b9;
    --title-bg-color-hover: #2e8ece;
    --alt-row-bg-color:#f3f6f6;
    --inline-code-block-bg-color: #fff;
    --code-block-bg-color: #efc;
    --input-bg-color: #fff;
    --input-invalid-bg-color: #f99;
    --highlight-color: #f1c40f;
    --progressbar-color: #f1c40f;

    --content-border-color: #e1e4e5;
    --strong-content-border-color: #aaa;
    --blockquote-bar-color: #ccc;

    --button-border-color: #949494;
    --button-text-color: #4c4c4c;
    --button-gradient-top-color: #f5f5f5;
    --button-gradient-bottom-color: #dddddd;

    --button-disabled-border-color: #ccc;
    --button-disabled-text-color: #999;
    --button-disabled-bg-color: #e8e8e8;

    --admonition-title-text-color: #fff;
    --admonition-title-bg-color: #6ab0de;
    --admonition-bg-color: #e7f2fa;
    --admonition-error-title-bg-color: #f29f97;
    --admonition-error-bg-color: #fdf3f2;
    --admonition-warning-title-bg-color: #f0b37e;
    --admonition-warning-bg-color: #ffedcc;
    --admonition-note-title-bg-color: #6ab0de;
    --admonition-note-bg-color: #e7f2fa;
    --admonition-hint-title-bg-color: #1abc9c;
    --admonition-hint-bg-color: #dbfaf4;

    --idx-edit-text-color: #fff;
    --idx-edit-bg-color: #2e8ece;
    --idx-edit-input-border-color: #2472a4;

    --crumb-idx-hover-text-color: #fff;
    --crumb-idx-hover-bg-color: #2e8ece;

    --tree-text-color: #d9d9d9;
    --tree-bg-color: #303030;
    --tree-border-color: #303030;
    --tree-hover-text-color: #d9d9d9;
    --tree-hover-bg-color: #4e4a4a;
    --tree-hover-border-color: #303030;
    --tree-selected-text-color: #444;
    --tree-selected-border-color: #c9c9c9;

}

@media (prefers-color-scheme: dark) {
    :root {
        --main-text-color: #C0C0C0;
        --title-text-color: #ccc;
        --title-text-color-hover: #eee;
        --footer-text-color: #444;
        --url-color: #2e8fcf;
        --url-color-hover: #35a0e6;
        --overlay-bg-rgba: 0,0,0,0.65;
        --reserved-text-color:#444;
        --content-preview-text-color:#888;

        --offpage-bg-color: #111;
        --main-bg-color: #000;
        --title-bg-color: #005e9a;
        --title-bg-color-hover: #2e8ece;
        --alt-row-bg-color:#222;
        --inline-code-block-bg-color: #111;
        --code-block-bg-color: #2a301f;
        --input-bg-color: #000;
        --input-invalid-bg-color: #A33;
        --highlight-color: #7e6500;
        --progressbar-color: #7e6500;

        --content-border-color: #444;
        --strong-content-border-color: #555;
        --blockquote-bar-color: #444;

        --button-border-color: #6c6c6c;
        --button-text-color: #999;
        --button-gradient-top-color: #444;
        --button-gradient-bottom-color: #222;

        --button-disabled-border-color: #555;
        --button-disabled-text-color: #555;
        --button-disabled-bg-color: #222;

        --admonition-title-text-color: #ccc;
        --admonition-title-bg-color: #12806a;
        --admonition-bg-color: #263330;
        --admonition-error-title-bg-color: #730000;
        --admonition-error-bg-color: #300;
        --admonition-warning-title-bg-color: #8b6b00;
        --admonition-warning-bg-color: #342800;
        --admonition-note-title-bg-color: #3d6580;
        --admonition-note-bg-color: #262e33;
        --admonition-hint-title-bg-color: #12806a;
        --admonition-hint-bg-color: #263330;

        --idx-edit-text-color: #ccc;
        --idx-edit-bg-color: #005e9a;
        --idx-edit-input-border-color: #004e80;

        --crumb-idx-hover-text-color: #000;
        --crumb-idx-hover-bg-color: #54abe6;

        --tree-text-color: #d9d9d9;
        --tree-bg-color: #303030;
        --tree-border-color: #303030;
        --tree-hover-text-color: #d9d9d9;
        --tree-hover-bg-color: #4e4a4a;
        --tree-hover-border-color: #303030;
        --tree-selected-text-color: #ccc;
        --tree-selected-border-color: #222;
    }
}

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

html{
    background-color: var(--offpage-bg-color);
    font-family: "Lato","proxima-nova","Helvetica Neue",Arial,sans-serif;
    font-weight: normal;
    color: var(--main-text-color);
}

a {
    text-decoration: none;
    color: var(--url-color);
}

a:hover {
    color: var(--url-color-hover);
}

:not(html) {
    line-height: inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    font-family: "Roboto Slab","ff-tisa-web-pro","Georgia",Arial,sans-serif;
    color: var(--main-text-color);
}

table {
    border: solid 1px var(--content-border-color);
    border-collapse: collapse;
    empty-cells: show;
    margin-top: 1em;
}

th {
    border-bottom: solid 2px var(--content-border-color);
    font-weight: bold;
}

td, th {
    border-color: var(--content-border-color);
    padding: 0.5em;
}

td:first-child, th:first-child {
    border-left-width: 0;
}

tr:nth-child(2n) td {
    background-color: var(--alt-row-bg-color);
}

tr.reserved-field, tr.reserved-addr {
    color: var(--reserved-text-color);
}

td > p:first-child {
    margin-top: 0px;
}

td > p:last-child {
    margin-bottom: 0px;
}

hr {
    border: 0;
    border-top: solid 1px var(--content-border-color);
    margin: 1em 0em;
}

dt {
    font-weight: bold;
}

blockquote {
    margin-left: 0px;
    padding-left: 0.25em;
    border-left: solid 0.313em var(--blockquote-bar-color);
}

pre {
    background-color: var(--code-block-bg-color);
    border: solid 1px var(--content-border-color);
    padding: 0.75em;
}

code {
    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
    font-size: 0.75em;
    line-height: 1.4;

    /* inline code format */
    background-color: var(--inline-code-block-bg-color);
    border: solid 1px var(--content-border-color);
    padding: 0.17em 0.41em;;
    font-weight: bold;
}

pre code {
    /* undo inline formatting for code block */
    background-color: inherit;
    border: none;
    padding: 0em;
    font-weight: normal;
}

input {
    background-color: var(--input-bg-color);
    color: var(--main-text-color);
}

input.invalid {
    background-color: var(--input-invalid-bg-color);
}

button {
    border-style: solid;
    border-width: 1px;
    border-color: var(--button-border-color);
    color: var(--button-text-color);
    border-radius: 2px;
    background-image: linear-gradient(var(--button-gradient-top-color), var(--button-gradient-bottom-color));
    padding: 0.25em 0.9em;
}

button:disabled {
    border-color: var(--button-disabled-border-color);
    color: var(--button-disabled-text-color);
    background-color: var(--button-disabled-bg-color);
    background-image: none;
}


/*:target, :target td {*/
.target-highlight, .target-highlight td {
    background-color: var(--highlight-color)!important;
}

mark {
    background-color: var(--highlight-color);
}

#_ProgressBar {
    width: 15em;
    margin: auto;
}

#_ProgressBar path {
    stroke: var(--strong-content-border-color);
    stroke-width: 3;
}

#_ProgressBar path + path {
    stroke: var(--progressbar-color);
    stroke-width: 8;
}

.progressbar-text {
    color: var(--main-text-color)!important;
}

/* ------------------------------- Admonitions ------------------------------ */
.admonition-title:before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f06a";
    margin-right:4px;
}

.admonition {
    padding:12px;
    line-height:24px;
    margin-bottom:24px;
    background: var(--admonition-bg-color);
}

.admonition-title {
    font-weight:bold;
    display:block;
    color: var(--admonition-title-text-color);
    background: var(--admonition-title-bg-color);
    margin:-12px;
    padding:6px 12px;
    margin-bottom:12px;
}

.admonition p:last-child {
    margin-bottom:0;
}

.admonition.danger,
.admonition.error{
    background: var(--admonition-error-bg-color);
}

.admonition.danger .admonition-title,
.admonition.error .admonition-title{
    background: var(--admonition-error-title-bg-color);
}

.admonition.attention,
.admonition.caution,
.admonition.warning {
    background: var(--admonition-warning-bg-color);
}

.admonition.attention .admonition-title,
.admonition.caution .admonition-title,
.admonition.warning .admonition-title {
    background: var(--admonition-warning-title-bg-color);
}

.admonition.note,
.admonition.seealso {
    background: var(--admonition-note-bg-color);
}

.admonition.note .admonition-title,
.admonition.seealso .admonition-title {
    background: var(--admonition-note-title-bg-color);
}

.admonition.hint,
.admonition.important,
.admonition.tip {
    background: var(--admonition-hint-bg-color);
}

.admonition.hint .admonition-title,
.admonition.important .admonition-title,
.admonition.tip .admonition-title {
    background: var(--admonition-hint-title-bg-color);
}

/* ------------------------------- Button Icons ----------------------------- */

.collapse-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f146";
}

.search-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f002";
}

.close-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f00d";
}

.menu-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f0c9";
}

.home-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f015";
}

.help-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f059";
}

.copy-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: normal;
    content: "\f0c5";
}

.reset-button::before {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f2ea";
}

/* --------------------------------- Sidebar -------------------------------- */
#_SBTitlebar {
    background-color: var(--title-bg-color);
}

#_SBTitlebox {
    font-size: 1.125em;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
    line-height: 2.2em;

    color: var(--title-text-color);
}

#_Overlay {
    background-color: rgba(var(--overlay-bg-rgba));
}

#_SBResizer:hover {
    background-color: rgba(128, 128, 128, 0.5);
}

.sb-button-strip {
    padding: 0em 0.3em 0.3em 0.3em;
}

.sb-button-strip button, .sb-button-strip a.button-link{
    background-color: inherit;
    background-image: none;
    border: none;
    width: 1.25em;
    height: 1.25em;
    font-size: 1.5em;
    text-align: center;
    vertical-align: middle;
    color: var(--title-text-color);
    padding: 0em;
    border-radius: 3px;
}

.sb-button-strip button:hover, .sb-button-strip a.button-link:hover{
    color: var(--title-text-color-hover);
    background-color: var(--title-bg-color-hover);
    border: none;
}

#_SBTreeContainer {
    background-color: var(--tree-bg-color);
    color: var(--tree-text-color);
}

#_SBTree {
    padding-top: 0.5em;
}

#_SBTree a {
    color: inherit;
}

.node {
    line-height: 1.3em;
    border-color: var(--tree-border-color);
    border-top-style: solid;
    border-top-width: 1px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-style: solid;
    border-left-width: 1px;
}

.node-icon {
    width: 1.25em;
    text-align: center;
}

.node:hover{
    color: var(--tree-hover-text-color);
    border-color: var(--tree-hover-border-color);
    background-color: var(--tree-hover-bg-color);
}

.node.open .node-icon::before {
    font-family: "Font Awesome 5 Free";
    font-weight: normal;
    content: "\f146";
}

.node.closed .node-icon::before {
    font-family: "Font Awesome 5 Free";
    font-weight: normal;
    content: "\f0fe";
}

.node.leaf .node-icon::before {
    font-weight: normal;
    content: "\2022";
}

.node.selected {
    background-color: var(--main-bg-color);
    color: var(--tree-selected-text-color);
    font-weight: bold;
    border-color: var(--tree-selected-border-color);
}

.node.selected a:focus {
    outline: none;
}

/* ----------------------------- Mobile Titlebar ---------------------------- */
#_MobiTitlebar {
    background-color: var(--title-bg-color);
    color: var(--title-text-color);
}

#_MobiTitlebox {
    vertical-align: middle;
    font-size: 1.125em;
    font-weight: bold;
    text-align: center;
    line-height: 2em;
}

#_MobiTitlebar button{
    background-color: inherit;
    background-image: none;
    border: none;
    font-size: 1.5em;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
    text-align: center;
    vertical-align: middle;
    color: var(--title-text-color);
    padding: 0em;
}

#_MobiTitlebar button:hover{
    color: var(--title-text-color-hover);
    background-color: var(--title-bg-color-hover);
    border: none;
}
/* ------------------------------- Main Window ------------------------------ */

.main {
    background-color: var(--main-bg-color);
    padding-left: 1.875em;
    padding-right: 1.875em;
}

#_Crumbtrail {
    padding-top: 0.875em;
}

.crumb-separator {
    padding: 0em 0.25em;
}

.crumb-idx {
    font-weight: bold;
    padding: 0.07em;
}

.crumb-idx:hover{
    background-color: var(--crumb-idx-hover-bg-color);
    color: var(--crumb-idx-hover-text-color);
}

dl.node-info {
    display: grid;
    justify-content: start;
}

.node-info dt{
  grid-column: 1;
}

.node-info dd {
  grid-column: 2;
  margin-left: 0.5em;
}

#_AbsAddr div {
    display: inline;
    visibility: hidden;
    color: var(--url-color);
    margin-left: 1em;
}
#_AbsAddr div:hover {
    color: var(--url-color-hover);
}

#_AbsAddr:hover div {
    visibility: visible;
}

#_AbsAddr div::after {
    font-family: "Font Awesome 5 Free";
    font-weight: bold;
    content: "\f05a";
}

div#_AbsAddrDetails {
    display: none;
    grid-column: 2;
    margin-left: 0.5em;
    border-left: solid 0.313em var(--blockquote-bar-color);
    padding-left: 0.5em;
}

div#_AbsAddrDetails.open {
    display: grid;
}

#_AbsAddrDetails dt{
  grid-column: 1;
}

#_AbsAddrDetails dd {
  grid-column: 2;
  margin-left: 0.5em;
}


input.field-value-tester {
    border: solid 1px var(--strong-content-border-color);
    padding: 0.25em 0.5em;
    width: 9em;
}

select.field-value-enum-tester {
    padding: 0.0em 0.25em;
    width: 12em;
    height: 2.3em;
    font-size: 0.75em;
}

input#_RegValueTester {
    border: solid 1px var(--strong-content-border-color);
    padding: 0.25em 0.5em;
    width: 8em;
}

footer {
    padding-bottom: 0.875em;
    color: var(--footer-text-color);
}

.headerlink {
    visibility: hidden;
}

.headerlink::after {
    font-family: "Font Awesome 5 Free";
    font-size: 0.75em;
    font-weight: bold;
    content: "\f0c1";
}

.radix-button {
    font-size: 0.79em;
    font-weight: bold;
    padding: 0.25em 0.48em;
    border-style: solid;
    border-width: 1px;
    border-color: var(--button-border-color);
    color: var(--button-text-color);
    border-radius: 2px;
    background-image: linear-gradient(var(--button-gradient-top-color), var(--button-gradient-bottom-color));
}

.reset-button {
    font-size: 0.90em;
    padding: 0.30em 0.50em;
    border-style: solid;
    border-width: 1px;
    border-color: var(--button-border-color);
    color: var(--button-text-color);
    border-radius: 2px;
    background-image: linear-gradient(var(--button-gradient-top-color), var(--button-gradient-bottom-color));
}

h1:hover .headerlink::after,
h2:hover .headerlink::after,
h3:hover .headerlink::after,
h4:hover .headerlink::after,
tr:hover .headerlink::after {
    visibility: visible;
}

/* --------------------------------- Search --------------------------------- */
#_SearchBar {
    padding-top: 0.875em;
    padding-bottom: 0.875em;
}

#_SearchBar input {
    border: solid 1px var(--strong-content-border-color);
    padding: 0.5em 1em;
    font-size: 1.125em;
}

#_SearchResults {
    padding: 0em;
    width: 100%;
}

#_SearchResults li:first-child {
    border-top: solid 1px var(--content-border-color);
}

#_SearchResults li {
    display: block;
    width: 100%;
    padding: 0.5em 0em;
    border-bottom: solid 1px var(--content-border-color);
}

#_SearchResults .selected {
    background-color: var(--alt-row-bg-color);
}

#_SearchResults a {
    color: var(--main-text-color);
}

.search-content-preview {
    color: var(--content-preview-text-color);
    padding-left: 2em;
    padding-top: 0.5em;
  }

/* --------------------------- Index Editor Modal --------------------------- */
#_IdxEditModal {
    background-color: var(--idx-edit-bg-color);
    box-shadow: rgba(0, 0, 0, 0.25) 1px 3px 6px 1px;
}

#_IdxEditModal::before {
    border-bottom-color: var(--idx-edit-bg-color);
}

#_IdxEditInput {
    border: solid 1px var(--idx-edit-input-border-color);
    padding: 0.25em 0.5em;
}

#_IdxEditRange {
    color: var(--idx-edit-text-color);
}

/* ------------------------------ Generic Modal ----------------------------- */
.generic-modal-overlay {
    background-color: rgba(var(--overlay-bg-rgba));
}

.generic-modal {
    background-color: var(--main-bg-color);
    border: 1px solid var(--strong-content-border-color);
    padding: 0em 1em 1em 1em;
}

.generic-modal h1 {
    font-size: 1.5em;
}

.generic-modal h2 {
    font-size: 1.3em;
}

.generic-modal h3 {
    font-size: 1.1em;
}

/* ------------------------------- Help Modal ------------------------------- */
.kb-shortcut-key {
    border: solid 1px var(--strong-content-border-color);
    background-color: var(--alt-row-bg-color);
    padding: 0.125em 0.25em;
    margin-left: 0.125em;
    margin-right: 0.125em;
    border-radius: 0.25em;
}

.generic-modal dt {
    margin-top: 1em;
    margin-bottom: 0.1em;
}

/* ---------------------------------- Fonts --------------------------------- */
@font-face {
    font-family:"Lato";
    font-weight:400;
    font-style:normal;
    src:url("../fonts/Lato/lato-regular.eot");
    src:url("../fonts/Lato/lato-regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Lato/lato-regular.woff2") format("woff2"),
        url("../fonts/Lato/lato-regular.woff") format("woff"),
        url("../fonts/Lato/lato-regular.ttf") format("truetype");
}
@font-face {
    font-family:"Lato";
    font-weight:700;
    font-style:normal;
    src:url("../fonts/Lato/lato-bold.eot");
    src:url("../fonts/Lato/lato-bold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Lato/lato-bold.woff2") format("woff2"),
        url("../fonts/Lato/lato-bold.woff") format("woff"),
        url("../fonts/Lato/lato-bold.ttf") format("truetype");
}
@font-face {
    font-family:"Lato";
    font-weight:700;
    font-style:italic;
    src:url("../fonts/Lato/lato-bolditalic.eot");
    src:url("../fonts/Lato/lato-bolditalic.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Lato/lato-bolditalic.woff2") format("woff2"),
        url("../fonts/Lato/lato-bolditalic.woff") format("woff"),
        url("../fonts/Lato/lato-bolditalic.ttf") format("truetype");
}
@font-face {
    font-family:"Lato";
    font-weight:400;
    font-style:italic;
    src:url("../fonts/Lato/lato-italic.eot");
    src:url("../fonts/Lato/lato-italic.eot?#iefix") format("embedded-opentype"),
        url("../fonts/Lato/lato-italic.woff2") format("woff2"),
        url("../fonts/Lato/lato-italic.woff") format("woff"),
        url("../fonts/Lato/lato-italic.ttf") format("truetype");
}
@font-face {
    font-family:"Roboto Slab";
    font-weight:400;
    font-style:normal;
    src:url("../fonts/RobotoSlab/roboto-slab.eot");
    src:url("../fonts/RobotoSlab/roboto-slab-v7-regular.eot?#iefix") format("embedded-opentype"),
        url("../fonts/RobotoSlab/roboto-slab-v7-regular.woff2") format("woff2"),
        url("../fonts/RobotoSlab/roboto-slab-v7-regular.woff") format("woff"),
        url("../fonts/RobotoSlab/roboto-slab-v7-regular.ttf") format("truetype")
}
@font-face {
    font-family:"Roboto Slab";
    font-weight:700;
    font-style:normal;
    src:url("../fonts/RobotoSlab/roboto-slab-v7-bold.eot");
    src:url("../fonts/RobotoSlab/roboto-slab-v7-bold.eot?#iefix") format("embedded-opentype"),
        url("../fonts/RobotoSlab/roboto-slab-v7-bold.woff2") format("woff2"),
        url("../fonts/RobotoSlab/roboto-slab-v7-bold.woff") format("woff"),
        url("../fonts/RobotoSlab/roboto-slab-v7-bold.ttf") format("truetype")
}


/*!
 * Font Awesome Free 5.3.1 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-style: normal;
    src:url("../fonts/FontAwesome/fa-solid-900.eot");
    src:url("../fonts/FontAwesome/fa-solid-900.eot?#iefix") format("embedded-opentype"),
        url("../fonts/FontAwesome/fa-solid-900.woff2") format("woff2"),
        url("../fonts/FontAwesome/fa-solid-900.woff") format("woff"),
        url("../fonts/FontAwesome/fa-solid-900.ttf") format("truetype"),
        url("../fonts/FontAwesome/fa-solid-900.svg#fontawesome") format("svg");
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-weight: 400;
    font-style: normal;
    src:url("../fonts/FontAwesome/fa-regular-400.eot");
    src:url("../fonts/FontAwesome/fa-regular-400.eot?#iefix") format("embedded-opentype"),
        url("../fonts/FontAwesome/fa-regular-400.woff2") format("woff2"),
        url("../fonts/FontAwesome/fa-regular-400.woff") format("woff"),
        url("../fonts/FontAwesome/fa-regular-400.ttf") format("truetype"),
        url("../fonts/FontAwesome/fa-regular-400.svg#fontawesome") format("svg");
}