@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@300;400;600;800&display=swap');

/* Header Title Start */
/* Needed because the #header-title and #responsive-header-title are our custom elements */
#header .logo {
    top: 52%;
    margin-left: 17px;
}

#header div#header-title {
    font-size: 1.56em;
    font-weight: 200;
    color: #ffffff;
    display: inline-block;
    position: relative;
    left: 55px;
    top: 12.5px;
}

#responsiveHeader .logo {
    display: inline-block;
}

#responsiveHeader div#responsive-header-title {
    font-size: 1.56em;
    font-weight: 200;
    color: #ffffff;
    display: inline-block;
    position: relative;
    left: 10px;
    top: 18px;
}

/* Header Title End */

/* Navigation Panel Tabs Start */

.tab {
    width: 50%;
    /* Needed to make the Contents and Glossary tab equal width */
}

.tabs-nav li {
    margin-top: 0;
    transition: color 0.3s ease;
}

.tabs-nav li.tabs-nav-active,
.tabs-nav li#TocTab.tabs-nav-active,
.tabs-nav li#GlossaryTab.tabs-nav-active {
    width: 100%;
    transition: border-bottom 0.3s ease;
}

.tabs-nav li.tabs-nav-inactive,
.tabs-nav li#TocTab.tabs-nav-inactive,
.tabs-nav li#GlossaryTab.tabs-nav-inactive {
    width: 100%;
    box-shadow: none;
}

.tabs-nav li.tabs-nav-inactive:hover,
.tabs-nav li#TocTab.tabs-nav-inactive:hover,
.tabs-nav li#GlossaryTab.tabs-nav-inactive:hover {
    border-bottom: 3px solid #94ceb9;
}

.tabs-nav li.tabs-nav-inactive .tabs-nav-text {

    transition: color 0.2s ease;
}

.tabs-panel {
    background-color: #f9f9f9;
    border: none;
    top: 37px;
}

/* Navigation Panel Tabs End */

/* Navigation Panel Start*/

/* Separator Between Navigation and Content */
#navigationResizeBar {
    top: 50px;
    width: 5px;
    background: rgb(209, 211, 212);
}

#navigation {
    outline-color: transparent;
}

/* Navigation Panel End*/

/* Custom TOC Entries Start */
.tree-node.Tutorial > div:hover, 
.web .tree-node-leaf.Tutorial > div:hover,
.web .tree-node.tree-node-expanded.Tutorial > div:hover,
.web .tree-node.tree-node-collapsed.Tutorial > div:hover  {
    /* This adds a background when hovering over a TOC entry */
	background-color: #c8eafc;

}

.web .tree-node.tree-node-leaf.tree-node-selected.Tutorial > div,
.web .tree-node.tree-node-leaf.tree-node-selected.Tutorial > div:hover,
.web .tree-node.tree-node-expanded.tree-node-selected.Tutorial > div,
.web .tree-node.tree-node-expanded.tree-node-selected.Tutorial > div:hover,
.web .tree-node.tree-node-collapsed.tree-node-selected.Tutorial > div,
.web .tree-node.tree-node-collapsed.tree-node-selected.Tutorial > div:hover {
	/* This adds a background when a TOC entry is selected */
	background-color: #99ccff;
}

.tree-node.Tutorial .new-indicator {
    /* This removes the duplicate New asterisk */
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
}

/* Custom TOC Entries Start */

/* Content Body Start */
html.left-layout #contentBody {
    border-radius: 0;
}

#contentBody {
    background-color: #fff;
}

#contentBodyInner {
    border: none;
    top: 37px;
    right: 0;
    left: 0;
}

/* Content Body End */

/* Show/Hide Navigation Button Start */
html.left-layout #show-hide-navigation {
    box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.2);
    width: 14px;
    height: 50px;
    top: 50%;
    background-color: rgba(6, 127, 204, 0.85);
    transition: all .3s ease;
}

html.left-layout #show-hide-navigation:hover {
    background-color: rgba(6, 127, 204, 1);
}

html.left-layout #show-hide-navigation:after {
    left: 52%;
}

/* Show/Hide Navigation Button End */


/* Toolbar Buttons Start */

/* Need to keep this because Flare doesn't allow us to override from UI */
.toolbar-buttons {
    top: 0px;
    left: 0;
    right: 0;
    background: #f1f2f2;
    padding: 6px 21px;
    border-bottom: 1px solid #d1d3d4;
}

.button {
    box-shadow: none;
    transition: all 0.1s ease;
}

.button:hover {
    -webkit-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
}

/* Toolbar Buttons End */

/* Search Box Start */
.search-bar {
	/* Needed to support Flare 2021 */
    right: 11px;
    margin-top: 11px;
}

.search-account-container {
    top: 0;
    /* Needed to support Flare 2020 */
}

#search-field {
    width: 215px;
    transition: all 0.3s ease;
}

.search-filter-content {
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
    right: 32px;
}

.search-filter span:after {
    opacity: 0.8;
}

#search-field::-webkit-input-placeholder,
#search-field:-moz-placeholder,
#search-field::-moz-placeholder,
#search-field:-ms-input-placeholder {
    color: #919191;
}

.tree .tree-node.tree-node-leaf>div.SearchFilter:hover {
    background: #C8EAFD;
}

/* Search Box End */

/* Search Results Start */

#searchPane {
    margin: 8px 24px;
}

#results-heading .total-results {
    /* This selector is not exposed in the Flare UI. */
    font-weight: 800;
}

#resultList>li {
    /* Needed to support our custom pagination */
    max-width: 650px;
    overflow-wrap: break-word;
}

#pagination {
    /* This completely changes how the pagination works */
    position: fixed;
    bottom: 24px;
    right: 0;
    width: 36%;
    background: #F1F2F2;
    box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.16);
    padding-left: 8px;
    opacity: 0.94;
}

/* Search Results End */

/* Search Glossary Start */
#search-glossary {
    border-radius: 4px;
    border: 1px solid #D1D3D4;
    padding: 6px 7px;
    font-size: 12px;
    font-weight: 200;
    outline: none;
}

#search-glossary::-webkit-input-placeholder,
#search-glossary:-moz-placeholder,
#search-glossary::-moz-placeholder,
#search-glossary:-ms-input-placeholder {
    color: #919191;
}

/* Search Glossary End */

/* Tablet Start */
@media only screen and (max-width: 1023px) {

    /* Search Results Start */
    #pagination {
        text-align: center;
        width: 100%;
        bottom: 0;
        opacity: 1;
    }

    #resultList {
        padding-bottom: 40px;
    }

    #resultList>li {
        max-width: 100%;
    }

    /* Search Results End */

    /* Navigation Panel Tabs Start */
    .tabs-panel {
        top: 0;
        background-color: #f9f9f9;
    }

    .tabs-panel .tabs-panel-active {
        background-color: #f9f9f9;
    }

    .tab {
        width: 100%;
        /* Needed to overwrite the 50% set for desktop */
    }

    /* Navigation Panel Tabs End */

    /* Toolbar Buttons Start */
    #contentBody .toolbar-buttons {
        top: 60px;
    }

    /* Toolbar Buttons End */

    /* Content Body Start */
    #contentBodyInner {
        top: 98px;
    }

    html.left-layout #body #contentBody {
        left: 0;
    }

    body.hide-extras.active #navigation[role="complementary"] {
        width: 33%;
        display: block;
    }

    body.active #contentBody[role="main"] {
        margin-right: 0px;
        width: 67%;
    }

    /* Content Body End */
}

/* Tablet End */

/* Because the logo won't position correctly in Microsoft browsers */
@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    #responsiveHeader .logo {
        top: 11px;
    }
}

@supports (-ms-accelerator:true) {
    #responsiveHeader .logo {
        top: 11px;
    }
}

/* Mobile Start */
@media only screen and (max-width: 767px) {
    /*#contentBody #search-sidebar {
        width: 270px;
    } */

    html.left-layout #navigation {
        border-right: 5px solid rgb(209, 211, 212);
    }

    html.left-layout #body #contentBody {
        left: 0;
    }

    body.hide-extras.active #navigation[role="complementary"] {
        width: 70%;
    }

    body.active #contentBody[role="main"] {
        margin-right: -70%;
        width: inherit;
    }

}

/* Mobile End */