.documentation .header {
    background: #f3f3f3;
    color: #494d55;
    padding: 20px 0;
}

.documentation .breadcrumb li.active, .documentation .breadcrumb li a {
    color: #000;
}

.documentation .header h1 {
    text-align: center;
}

.header {
    border-top: none;
}

span.file-path {
    background: #F8F8FF;
    /*border: black dashed 1px;*/
    padding: 3px;
    font-weight: bold;
}

body.documentation div.doc-wrapper div.container {
    margin-bottom: 600px; /* Need enough space after the content to be able to scroll directly the in-page elements by using #an-id links */
}

body.landing-page .cards-section {
    padding: 20px 0;
}
#doc-menu {
    max-width: 230px;
}

/* The nav lists every section on the page, so on a long page it is taller than the window.
   Bootstrap's affix pins it in place but does not bound its height, so its lower part sits
   below the fold with no way to reach it: scrolling moves the content and the nav stays put.
   Bound it to the window and give it its own scrollbar instead. main.js keeps the section
   you are reading scrolled into view within this box. */
#doc-menu.affix,
#doc-menu.affix-top,
#doc-menu.affix-bottom {
    max-height: calc(100vh - 130px); /* .affix sits at top: 110px, plus a little breathing room */
    overflow-y: auto;
    overflow-x: hidden;
}

/* A permanent scrollbar would be visual noise beside body text, so keep it thin and quiet
   until the pointer is over the nav. Progressive enhancement: browsers without these
   properties just show their normal scrollbar, which is still an improvement on no scroll. */
#doc-menu.affix,
#doc-menu.affix-top,
#doc-menu.affix-bottom {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
}

#doc-menu.affix:hover,
#doc-menu.affix-top:hover,
#doc-menu.affix-bottom:hover {
    scrollbar-color: #c8ccd4 transparent;
}

#doc-menu::-webkit-scrollbar {
    width: 6px;
}

#doc-menu::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 3px;
}

#doc-menu:hover::-webkit-scrollbar-thumb {
    background: #c8ccd4;
}

/* Section link hover styling */
.section-link {
    display: inline-block;
    margin-left: 8px;
    opacity: 0;
    font-size: 16px;
    transition: opacity 0.2s;
    color: #999;
    text-decoration: none;
}

h2:hover .section-link,
h3:hover .section-link {
    opacity: 1;
}

.section-link:hover {
    color: #0078D4;
    text-decoration: none;
}