/*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 {
    width: 100%;
}

.header-wrapper .farapp-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1100;
    border-top: 8px solid;
    border-bottom: none;
    border-image: url(/static/css/redwood-layer/img/strip.svg) 30 round;
}

.header-wrapper .container-fluid {
    padding: 0;
    background: var(--bg-header);
}

.header-wrapper .navbar-collapse {
    padding: 4px var(--main-content-sides) 4px var(--main-content-sides);
    margin: 0;
}

.skip-to-side-nav-link,
.skip-to-content-link {
    position: fixed;
    top: 8px;
    left: 8px;
    padding: 8px 12px;
    transform: translateY(-200%); /* hidden by default */
    transition: transform 0.12s ease, opacity 0.12s ease;
    z-index: 2000;
    color: #000;
    background: #fff;
    pointer-events: none; /* avoid accidental hover/click */
    border-radius: 8px;
    font-size: 14px;
    font-weight: 400;
    box-shadow: 0 1px 4px rgba(0,0,0,.12);
    opacity: 0;
}

.skip-to-side-nav-link:focus,
.skip-to-content-link:focus {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}


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


.discriminator-list .dropdown-menu {
    max-height: 200px;
    overflow-y: auto;
    overscroll-behavior: contain;
    overflow-x: hidden;
}

.dropdown.discriminator-list .btn.dropdown-toggle:focus-visible,
.btn.dropdown-toggle.user-button:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, #0A84FF);
    outline-offset: var(--focus-ring-offset, 2px);
}

.farapp-nav-bar-container {
    background-color: white;
    height: 100%;
}

.avatar-circle {
    margin-top: 1.5em;
    margin-right: 1em;
}

.initials {
    position: relative;
    top: .75em;
    line-height: 1.5em;
    color: #fff;
    font-family: "Courier New", monospace;
    font-weight: bold;
}

.discriminator-list{
    margin-top: 0.9em;
}

.user-name {
    border-left: 2px solid var(--border-grey-shadow);
    margin-left: 26px;
}

.user-name > button {
    margin-top: 0.6em;
    display: flex;
    align-items: center;
}

.current-company {
    margin-top: 1.4em;
    margin-left: 1em;
}

.user-menu-item {
    display: block;
    padding-left: 1em;
    padding-top: .25em;
    padding-bottom: .25em;
}