/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Body and HTML settings */
html, body {
    height: 100%;
    font-family: Roboto;
    font-size: max(12px, min(2vw, 16px));
    background-color: #fff;
    overflow: hidden; /* Prevent the main window from scrolling */
}

ul {
    padding-left: 2.0rem;  /* For item lists in the element's documentation (e.g. equation) */
}

p {
    margin: 0 0 10px;
    font-family: Roboto;
}

h2 {
    margin-top: 0px;
}

hr {
    border: none;
    height: 2px;
    color: #333;
    background-color: #333;
}

a:focus {
    outline: none;
}

a.name {
    color: #19578a;
    font-size: max(12px, min(4vw, 20px));
}

.top-banner {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 6vh; /* Height of the fixed top banner */
    height: 6dvh; /* Define after "vh" to override for mobile devices */
    background-color: #333;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
}
.top-banner .title {
    color: white;
    font-size: max(12px, min(2.5vw, 27px));
    padding-left: 2rem;
    padding-right: 1rem;
    flex: 1;
    text-align: center;
}
.top-banner .toc-button {
    cursor: pointer;
    height: 24px;
    width: 24px;
}

.git-icon {
    padding: 0px;
}

/* Holds the table of contents (toc) and the schema documentation (docs) */
.container {
    display: flex;
    height: calc(100vh - 6vh);  /* Adjust height for the fixed top banner */
    height: calc(100dvh - 6dvh); /* Define after "vh" to override for mobile devices */
    width: 100vw;
    margin-top: 6vh;  /* Space for the fixed top banner */
    margin-top: 6dvh;  /* Define after "vh" to override for mobile devices */
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
}

/* Table of contents */
.toc {
    width: max-content;
    background-color: #453831;
    overflow-y: auto; /* Scrollable */
    overflow-x: hidden;
}
.toc-bullet {
    color: #CDB2B2;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}
.toc-section-header {
    color: #ddd5e5;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    margin-left: -2.0rem; /* Negative of ul.padding-left */
    font-weight: normal;
    font-size: max(12px, min(2.3vw, 16px));
    text-align: center;
}
.toc-link {
    color: #bcb39f;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
    padding: 0.4rem 0.4rem;
    text-decoration: none;
    font-weight: normal;
    font-size: max(12px, min(2vw, 16px));;
}
.toc-link:hover {
    color: #af570a;
}

@media screen and (max-width: 600px) {
    .toc {
        display: none;
    }
}

.docs {
    flex: 1; /* Takes remaining space */
    padding: 10px;
    overflow-y: auto; /* Scrollable */
    background-color: #fff;
}

.panel {
    margin-bottom: 20px;
    background-color: #fff;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
    box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-group {
    margin-bottom: 20px;
}
.panel-group .panel {
    margin-bottom: 0;
    border-radius: 4px;
    word-break: break-word;
}
.panel-heading {
    padding: 10px 15px;
    border-bottom: 1px solid transparent;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
}
.panel-group .panel-heading {
    border-bottom: 0;
}
.panel-default {
    border-color: #ddd;
}
.panel-title {
    margin-top: 0;
    margin-bottom: 0;
    font-size: max(12px, min(2vw, 16px));
    color: inherit;
}
.xs3p-panel-help {
    color: #CCCCCC;
    cursor: pointer;
}

/* Used by the HELP button in a CollapseableBox /*
.pull-right {
    float: right !important;
} */

/* Syntax highlighting */

pre {
    padding: 5px;
    background-color: #E9E9E9;
    font-size: max(12px, min(2vw, 16px));
    font-family: Roboto;
}

pre code {
    color: #32356B;
    background-color: #E9E9E9;
    white-space: unset;
}

code {
    color: #32356B;
    background-color: #E9E9E9;
}

.codehilite .err {color: #FFF; background-color: #D2322D; font-weight: bold;} /* Error */
.codehilite .c   {color: #999;}
.codehilite .cs  {color: #999; font-style: italic;}
.codehilite .nt  {color: #32356B} /* make same as .hljs-name */
.codehilite .na  {color: #69875B} /* make same as .hljs-attr */
.codehilite .s   {color: #96372F} /* make same as .hljs-string */
.codehilite .nn  {color: #FF0000} /* don't think it is used, red should be very visible */
.codehilite a    {color: inherit !important; text-decoration: underline !important;}
/* .codehilite a:hover {opacity: 0.7 !important;} */

/* highlight.js syntax highlighting in document tags */
pre code.hljs {
    display: block;
    overflow-x: auto;
    padding: 0.1rem;
    font-size: max(12px, min(2vw, 16px));
    font-family: Roboto;
    color: #000;
}
.hljs-meta {color: #32356BAA}   /* XML */
.hljs-tag  {color: #32356BAA}   /* XML */
.hljs-name {color: #32356B}     /* XML */
.hljs-attr {color: #69875B}     /* XML */
.hljs-string {color: #96372F}   /* XML and Python */
.hljs-keyword {color: #cf222e}  /* Python */
.hljs-comment {color: #999999}  /* Python */
.hljs-built_in {color: #128A2A} /* Python */
.hljs-literal {color: #cf222e}  /* Python */
.hljs-number {color: #030A8C}   /* Python */
.hljs-punctuation {color: #030A8C} /* regex, using the r language syntax highlighter */
.hljs-operator {color: #000}       /* regex, using the r language syntax highlighter */

.md-version {
    font-size: 1.0rem;
    height: 1.5rem;
    color: #1c7d93;
}
.md-version__current {
    color: inherit;
    cursor: pointer;
    outline: none;
    position: relative;
}
.md-version__list {
    background-color: #fff;
    border-radius: .5rem;
    box-shadow: 0 0.2rem 0.5rem #0000001a,0 0 0.05rem #00000040;
    color: #000;
    list-style-type: none;
    margin: .4rem .4rem;
    width: 8rem;
    max-height: 0;
    opacity: 0;
    overflow: auto;
    padding: 0;
    position: relative;
    scroll-snap-type: y mandatory;
    top: .15rem;
    transform: translateX(-10%);
    transition: max-height 0ms .5s,opacity .25s .25s;
    z-index: 10
}
.md-version:focus-within .md-version__list,.md-version:hover .md-version__list {
    width: 8rem;
    max-height: 10rem;
    opacity: 1;
    transition: max-height 0ms,opacity .25s
}
.md-version__item {
    line-height: 1.6rem;
    margin-left: 0.5rem;
}
.md-version__link {
    cursor: pointer;
    display: block;
    outline: none;
    scroll-snap-align: start;
    transition: color .25s,background-color .25s;
    white-space: nowrap;
    width: 100%
}
.md-version__link:focus,.md-version__link:hover {
    color: #F76B2F;
    text-decoration: none;
}

h3.xs3p-subsection-heading {
    margin-bottom: 20px;
}

.xs3p-in-panel-table {
    margin-bottom: 0px;
}

.panel-heading .xs3p-panel-title:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114";
    float: left;
    color: grey;
    margin-right: 10px;
}
.panel-heading .xs3p-panel-title.collapsed:after {
    content: "\e080";
}
.panel-info > .panel-heading .xs3p-panel-title:after {
    color: white;
}

.btn-doc {
    padding: 0px;
    border: 0px none;
    background: none repeat scroll 0% 0% transparent;
    line-height: 1;
    font-size: max(12px, min(2vw, 16px));
}

.unpre {
    font-family: Roboto;
    font-size: max(12px, min(2vw, 16px));
    white-space: normal;
    word-break: normal;
    word-wrap: normal;
}

.popover {
    max-width: 30vw;
    font-family: Roboto;
    font-size: max(12px, min(2vw, 16px));
}

.schemaImports {
    padding-left: 1.0rem;
}