#topsection .navbar {
    flex: 1;
}

.navbar-nav {
    margin-left: auto;
    margin-right: auto;
}

/* Header */
#topsection {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: fixed;
    top: 0;
    background-color: #583184;
    color: white;
    margin: 0;
    min-height: 68px; /* Height of top section */
    height: auto;
    width: 100%;
    padding-bottom: .2em;
    clear: both;
    padding-top: 8px;
    z-index: 999;
}

/* Header links */
#topsection a {
    color: white;
}

/* The left side column's logo */
#logo {
    margin-top: -5px;
    float: left;
    filter: grayscale(1) brightness(5);
}

/* Login display inside header */
#logindisplay {
    margin-right: .5em;
}

#inner-logon {
    padding: 0;
    display: flex;
    white-space: nowrap;
}

.navbar-nav:not(.nav-item),
.navbar-collapse {
    width: 100%;
}

/* First and second to last nav list item */
/* Second to last item is the Searchbox */
.nav-item:first-of-type,
.nav-item:nth-last-of-type(2) {
    margin-left: 0;
}

/* Do not display the Searchbox if window size is less than 1350px. See below */
.nav-item:nth-last-of-type(2) {
    display: none;
}

#profile-link {
    display: inline;
}

.login-link {
    display: flex;
    padding-left: 5px;
}

/* 
    For additional accessibility on devices with no CSS support.
    Width and height required to ensure visibility.
*/
.for-screenreaders {
    display: inline-block;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin-left: -1px;
    margin-top: -1px;
}

@media screen and (max-width: 1400px) {
    .navbar-nav, .search-outer {
        margin-left: 10px;
    }

    #top-menu-items div {
        flex-direction: column;
    }

    #inner-logon {
        flex-direction: column;
        margin-left: 10px;
        padding: 8px 0;
    }
}

@media (min-width: 1350px) {
    .navbar-expand-custom {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .navbar-expand-custom .navbar-nav {
        flex-direction: row;
    }

    .navbar-expand-custom .navbar-nav .nav-link {
        padding-right: .5rem;
        padding-left: .5rem;
    }

    .navbar-expand-custom .navbar-collapse {
        display: flex !important;
    }

    .navbar-expand-custom .navbar-toggler {
        display: none;
    }

    .collapse {
        display: none !important;
    }

    #search-mobile-nav {
        display: none !important;
    }

    /* First and second to last nav list item */
    /* Second to last item is the Searchbox */
    .nav-item:first-of-type,
    .nav-item:nth-last-of-type(2) {
        margin-left: auto;
    }

    /* Show */
    .nav-item:nth-last-of-type(2) {
        display: block;
    }
}

/******************************************/
/*** Hacky media tweaks to nav elements ***/
/******************************************/

/* Near the point where extra search box gets misaligned with the UI */
@media (max-width: 425px) {
    #search-mobile-nav {
        display: none !important;
    }

    .nav-item:nth-last-of-type(2) {
        display: block !important;
    }
}

/* Fix margin block on .nav-items this narrow media */
@media (min-width: 1350px) and (max-width: 1400px) {
    .nav-item {
        margin-block: auto;
    }
}

@media (max-width: 1400px) {
    .nav-item:nth-last-child(-n+2) #inner-logon,
    .nav-item:nth-last-child(-n+2) #search-box,
    .nav-item:nth-last-child(-n+2) #search-box-mobile {
        margin-inline: 0;
    }

    .nav-item:last-child .login-link {
        padding-left: 0;
    }

    /* 
        `span.for-screenreaders` causes small misalignment.
        These two rules should fix it visually without affecting the screenreader element too much.
    */
    .nav-item #profile-link a span.for-screenreaders {
        display: flex;
    }
    .nav-item #profile-link span.for-screenreaders {
        order: 1;
    }
}