/*header positioning is handled in layout/layout.css
here we are specifying things for the elements inside the header
like navigation, menu, or other elements inside*/

.header-wrapper h1 {
    font-size: 28px;
    color: var(--font-dark);
    margin-top: 35px;
}
.connector-setting-navigation {
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-grey-shadow);
    display: flex;
    padding-left: var(--main-content-sides);
} /* This menu is not inside the <header> tag, but is considered part of it. */

.header-wrapper .connector-setting-navigation .navbar-nav {
    display: flex;
    height: 3.5em;
}

.header-wrapper .connector-setting-navigation .navbar-nav > li {
    height: 100%;
    margin-left: 0;
}

.header-wrapper .connector-setting-navigation .navbar-nav > li > a {
    display: flex;
    align-items: center;
    padding: 0 !important;
    height: 100%;
    border-bottom: 2px solid transparent;
    margin-right: 32px;
    color: var(--font-dark);
    font-style: normal;
    font-weight: 400;
}

.header-wrapper .connector-setting-navigation .navbar-nav > li > a.active {
    border-bottom: 2px solid #3F4B5A;
}

.header-wrapper .connector-setting-navigation .dropdown-menu {
    left: inherit;
}

.skip-to-side-nav-link,
.skip-to-content-link {
    left: 50%;
    padding: 10px;
    position: absolute;
    transform: translateY(-100%);
    transition: transform 0.1s;
    z-index: 9999; /* main content has z-index 999 ?*/
    color: black;
    background: white;
    pointer-events: none;
    border-radius: 10px;

}

.skip-to-side-nav-link:focus,
.skip-to-content-link:focus {
    transform: translateY(1%);
}


#top-right-nav {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}