:root {
    --tocnav-icon-width: 18px;
}

/* --------------Start page header bar ------------*/

#headbar {
    font-family: var(--marketsans-fontname), Arial, sans-serif;
    background-color: #ffffff;
    max-width: var(--screen-size-6);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3fr;
    padding: var(--spacing-large);
}

#headbar nav {
    grid-area: 1 / 1 / 1 / -1;
}

img.logo {
    display: inline-block;
    height: 40px;
    width: 257px;
}

/* Position the logo vertically within nav element*/
nav > a { 
    position:relative;
    top: 4px;
}

.icon--window {
    height: 16px;
    width: 14px;
    margin: -2px var(--spacing-tiny) 0 var(--spacing-tiny);
}

#dochead {
    grid-area: 2 / 1 / 2 / -1;
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
    padding: var(--spacing-medium) 0 var(--spacing-small);
}

#version {
    padding-left: var(--spacing-extra-small);
}

#docsetAll {
    grid-area: 3 / 1 / 3 / -1;
    padding: var(--spacing-large) 0 var(--spacing-tiny);
    border-bottom: var(--border-width-default) var(--border-style-default) var(--border-color-secondary);
}

#docsetAll > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#docsetAll > ul > li {
    display: inline;
    font-size: var(--font-size-medium);
    line-height: var(--line-height-medium);
    padding: 0 var(--spacing-large) 0 0;
}

#docsetAll > ul > li.selected {
    font-weight: var(--font-weight-bold);
}

#docsetAll a:link,
#docsetAll a:visited,
#docsetAll a:hover,
#docsetAll a:active {
    color: var(--color-text-default);
    text-decoration: none;
}

#docsetAll a:hover {
    text-decoration: underline;
}

.docsetThis {
    color: red;
}

.docsetOther {
    color: red;
}

/* --------------End page header bar ------------*/

#bottomhalf {
    position: relative;
    display: grid;
    grid-template-columns: max-content max-content minmax(0, 1fr);
    grid-template-areas: "dv sb dc";
    grid-template-rows: auto;
    padding: var(--spacing-large) 0 0 var(--spacing-large);
}

#sidebarButtonCont {
    grid-area: dv;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    margin: 0 var(--spacing-small) 0 0;
}
 
#sidebarButton {
    background: var(--color-grey1) url(../assets/smartmenus/css/sm-edp/icons/icon-close-small.svg) no-repeat center center;
    border: 2px solid transparent;
    border-radius: 50px;
    box-sizing: border-box;
    font-family: inherit;
    height: 40px;
    margin: 0;
    padding: 0;
    vertical-align: text-bottom;
    width: 40px;
}

#sidebar {
    grid-area: sb;
    width: 232px;

}

#sidebar.flag {
    display: none;
}

#sidebar a,
#sidebar a:link,
#sidebar a:hover
#sidebar a:visited,
#sidebar a:focus,
#sidebar a:active {
    display: block;
    color: var(--color-text-default);
    text-decoration: none;
    padding: var(--spacing-extra-small) 0;
}

#sidebar a:hover {
    text-decoration: underline;
}

#tocnav {
    padding-top: var(--spacing-extra-small);
    padding-right: var(--spacing-large);
    overflow-wrap: break-word;
}

#tocnav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: none;
}

#tocnav li {
    margin: 0;
    list-style: none;
    padding: 0 0 0 var(--tocnav-icon-width);
    position: relative;
}

/* IE leaves a blank space where span is added so this is to avoid that */
* html #tocnav li {
    float: left;
    display: inline;
}

#tocnav li span {
    float: left;
    position: absolute;
    top: 11px;
    left: 0;
    width: var(--tocnav-icon-width);
    height: 13px;
    cursor: auto;
    font-size: 0;
}

#tocnav li span.collapsed {
    background: url(arrowClosedDkGray.png) no-repeat 0 0;
    cursor: pointer;
}

#tocnav li span.collapsedHover {
    background: url(arrowClosedHoverGray.png) no-repeat 0 0;
    cursor: pointer;
}

#tocnav li span.expanded {
    background: url(arrowOpenDkGray.png) no-repeat 0 0;
    cursor: pointer;
}

#tocnav li span.expandedHover {
    background: url(arrowOpenHoverGray.png) no-repeat 0 0;
    cursor: pointer;
}

/* selected class? */
#tocnav li a.selected {
    font-weight: var(--font-weight-bold);
}

#doc {
    grid-area: dc;
    padding-right: var(--spacing-large);
    max-width: var(--screen-size-6);
    min-width: 0;
}

#doc h1:only-of-type,
main a:first-child + h1:first-of-type {
    margin-top: 0;
}

.chapterlist a:link {
    text-decoration: none;
}

.chapterlist a:visited {
    text-decoration: none;
}

.chapterlist a:hover {
    text-decoration: underline;
}

table.chapternav {
    background-color: #eeeeee;
    border-top: 1px solid #99cc33;
    border-left: 1px solid #99cc33;
    border-right: 1px solid #99cc33;
    border-bottom: 1px solid #99cc33;
    width: 180px;
    float: right;
    margin: var(--spacing-extra-small);
    padding: var(--spacing-extra-small);
}

table.chapternav td {
    padding: var(--spacing-extra-small);
}

table.devguidetable {
    width: auto;
    margin: 0 5px 0 5px;
}

p.tablenote {
    background-color: #e2e2da;
    border: 1px solid #cccccc;
    padding: 8px 15px;
    margin: 1rem 1.5rem 1rem 1.7rem;
}

.topicheading {
    text-align: center;
    font-weight: var(--font-weight-bold);
}

#currentpage {
    font-weight: var(--font-weight-bold);
}

#currentpage li {
}

ul.topiclist li {
    list-style-type: none;
}

ul ul li {
    list-style-type: circle;
}

table.example td {
    background-color: var(--color-background-highlight);
    font-family: var(--font-mono);
    font-size: var(--font-size-small);
    margin: 15px 0 20px 20px;
    padding: 5px;
    border-width: 1px;
    border-style: solid;
    border-color: #e1e1e1;
}

.centered {
    text-align: center;
}

.badge {
    display: none;
    /* background-color: #3665f3;
    vertical-align: top;
    position: relative;
    top: -0.25em;
    left: 0.25em;
    align-items: center;
    border-radius: 16px;
    color: #fff;
    display: inline-flex;
    font-size: 10px;
    height: 16px;
    justify-content: center;
    min-width: 8px;
    padding: 2px 6px;
    white-space: nowrap; */
}

/* .badge:hover {
    font-weight: normal;
} */

.footer_notes {
    max-width: none;
}

.footer_notes>a {
    margin-right: 32px;
    font-size: 0.875em;
    line-height: var(--line-height-small);
    text-decoration: none !important;
    color: var(--link-foreground-color-hover,var(--color-foreground-secondary)) !important;
}

.footer_notes>a:hover {
    text-decoration: underline !important;
}

.copyright {
    font-size: var(--font-size-small);
    line-height: var(--line-height-small);
}

.copyright>a {
    text-decoration: none !important;
    color: var(--link-foreground-color-hover,var(--color-foreground-secondary)) !important;
}

.copyright>a:hover {
    text-decoration: underline !important;
}

ul.plus {
    background-color: #ffffff;
    color: #555555;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid #dddddd;
    display: none;
    top: 28px;
    margin-top: -6px;
    padding-top: 2px;
    position: absolute;
    left: 5px;
    width: 200px;
    /* set this then set ul.plus li's width */
}

ul.plus li {
    background: none repeat scroll left bottom transparent;
    list-style-type: none;
    float: left;
    height: 100%;
    list-style-type: none !important;
    margin-bottom: 0;
    margin-left: 10px;
    margin-top: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #dddddd;
    width: 190px; /* match this to ul.plus width minus margin-left*/
}

ul.plus li a:link,
ul.plus li a:visited,
ul.plus li a:hover,
ul.plus li a:active {
    border: 0;
    text-decoration: none;
    color: #666666;
    display: block;
    font-size: var(--font-size-default);
    line-height: var(--line-height-default);
    margin: 0;
    padding: 0;
    position: relative;
    top: -1px;
}

ul.plus li a:hover {
    color: #eeaa00;
    background-color: white;
    padding-right: 6px;
    padding: 0;
}


@media (max-width: var(--screen-size-3)) {
    
    
    #headbar {
        padding: var(--spacing-extra-small) var(--spacing-small);
    }
}