#logo {
    align-items: center;
    display: flex;

    img {
        height: 20px;
    }
}

#header_search {
    background-color: $background-color-primary;
    border-radius: 0;
    border: 1px solid $background-color-primary;
    display: flex;
    flex-direction: column;
    padding: 0;

    ul {
        padding: 0;
        margin: 0;
        // border-radius: 0 16px 16px 0;
        display: flex;
        align-items: center;
        color: white;
        background-color: $background-color-primary;
        z-index: 2;
        flex-grow: 1;

        li {
            background: transparent;
            border: 0;
            border-radius: 0;

            border: 0;
            border-bottom-width: 0;
            padding-bottom: 0;
            list-style-type: none;
            margin: 0;
            white-space: nowrap;

            a {
                color: #FFF;
                padding: 0 .25em;
                margin: 0 .25em;
                border: 2px solid transparent;
                font-size: 110%;
            }
        }
    }

    form {
        display: flex;
        position: relative;
    }

    .form-title {
        padding: 0 16px 0 .5rem;
        background-color: $background-color-primary;
        border-radius: 0 16px 16px 0;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        z-index: 2;
        white-space: nowrap;
        flex-basis: 15%;

        label {
            color: white;
            font-weight: bold;
            margin: 0;
            white-space: nowrap;
        }
    }

    .control-label {
        i {
            &[class^="fa"] {
                margin-left: .5em;
            }
        }
    }

    .form-content {
        background-color: white;
        margin-left: -16px;
        padding-left: 16px;
        border-radius: 0 16px 16px 0;
        white-space: nowrap;
        z-index: 1;
        display: flex;
        flex-grow: 1;

        input[type="text"],
        select {
            background-color: transparent;
            border: 0;
            border-radius: 0;
            box-shadow: unset;
            margin: 0;

            &:not(:first-child) {
                border-left: 1px solid #e0e0e0;
            }
        }

        input + input {
            padding-right: .5em;
        }
    }

    .form-control {
        font-size: 1em;
    }

    .form-extra-content {
        right: 60px;
        position: absolute;
        top: 31px;
        background-color: #f3f4f4;
        background-color: white;
        padding: 1em;
        border-radius: 0 0 8px 8px;
        border: 1px solid $background-color-primary;
        border-top: 0 none;
        box-shadow: 0 2px 2px 1px #00000030;
        z-index: 1000;
        display: none;

        a {
            color: $green-text-color;
        }

        div {
            margin-bottom: .5em;
        }

        .form-control {
            display: block;
            width: 100%;
        }

        label {
            display: block;
            margin-bottom: 0;
        }
    }

    .form-extra-content-toggle {
        background-color: transparent;
        opacity: .5;
        padding-right: 1em;

        &:hover {
            opacity: 1;
        }

        &.extra-content-open {
            color: $background-color-secondary;
            opacity: 1;

            .form-extra-content-icon {
                text-shadow: 0 0 5px #ffe300;
            }
        }
    }

    input[type="submit"],
    button[type="submit"] {
        height: 31px;
        background-color: $background-color-secondary;
        color: white;
        border: 0;
        text-shadow: unset;
        border-radius: 0;
        margin-left: -16px;
        margin-right: 0;
        padding-left: calc( 16px + .7em );
        padding-right: .9em;

        &:hover {
            background-color: lighten( $background-color-secondary, 5 );
        }
    }

    input[type="button"], button {
        height: 31px;
        border: 0;
        text-shadow: unset;

        &:active {
            box-shadow: unset;
        }
    }

    .tab-content {
        background-color: transparent;
        padding: 0;

        &:first-of-type {
            flex-basis: 50%;
        }
    }

    .tab-title {
        display: inline;
    }

    &.toptabs {
        margin: 0;

        .tab-pane {
            padding: 0;
        }
    }

    .nav-tabs {
        border-bottom: 0;
        justify-content: center;
        padding: .5rem 0;

        > li {
            > a {
                background-color: $background-color-primary;
                border: 2px solid $background-color-primary;
                border-radius: 0;
                color: #FFF;
                font-weight: normal;
                line-height: 1.3;
                margin: 0 .25em;
                padding: 0 .25em;

                &.active {
                    border-bottom: 2px solid #FFF;
                    cursor: default;
                    padding: 0 .25em;

                    &:focus,
                    &:hover {
                        border-bottom-color: #FFF;
                    }
                }

                &:hover, &:focus, &:active {
                    background-color: $background-color-primary;
                    border: 2px solid $background-color-primary;
                    border-bottom-color: $background-color-secondary;
                    padding: 0 .25em;
                    text-decoration: none;
                }
            }


        }
    }
}

#logged-in-menu {
    &:hover, &:active, &:focus {
        text-decoration: none;
    }
}

#sub-header {
    display: flex;
    justify-content: space-between;
}

#shortcut {
    display: flex;
    margin: 0;
    padding: 0.65em 10px 0.8em 10px;

    .title {
        font-style: italic;
        font-weight: normal;
    }
}

#header {
    + #breadcrumbs {
        margin-top: 1em;
    }

    > .container-fluid {
        padding: 0;
    }
}

.breadcrumb-item {
    &.active {
        a {
            color: dimgray;
        }
    }
}

#lastborrower-window {
    display: none;

    > * {
        padding: 0 .4em;
    }
}

#helper {
    display: inline-block;
    padding: .2rem .75rem;
}

#lastborrowerlink {
    padding: 0 .7rem;

    & + .dropdown-toggle {
        margin-left: 0;
        padding: 0 .7rem;

        &:hover {
            background-color: #FFF;
        }
    }
}

.nav-link-text {
    display: none;

    &.langlabel {
        display: none;
    }
}

#catalog-search-link {
    border: 0;

    & > a {
        padding-right: 7px;
    }
}

#catalog-search-dropdown {
    display: none;

    & > a {
        border-left: 1px solid darken( $green-text-color, 5% );
        padding-left: 7px;

        &:hover,
        &.catalog-search-dropdown-hover {
            background-color: darken( $background-color-primary, 5% );
            border-left: 1px solid lighten( $green-text-color, 15% );
        }
    }
}

.langmenu-hidden {
    display: list-item;
}

#user-menu {
    flex-wrap: nowrap;
}

@media only screen and ( min-width: 576px ) {
    #header_search {
        flex-direction: row;
        padding: 0 .8rem;
        padding-left: 0;

        .form-title {
            padding: 0 16px 0 .5rem;
        }

        .nav-tabs {
            justify-content: flex-start;
            padding: 0;
        }

        .tab-title {
            display: none;
        }

        button[type="submit"] {
            border-radius: 0 16px 16px 0;
            margin-right: 1em;
        }

    }

}

@media ( min-width: 767px ) {
    .nav-link-icon {
        display: none;
    }

    .nav-link-text {
        display: inline;
    }

    #catalog-search-dropdown {
        display: list-item;
    }

    #catalog-search-link {
        border-right: 1px solid $background-color-primary;
    }
}

@media ( max-width: 767px ) {
    .header-menu-link {
        display: inline-block;
    }

    #cartmenulink {
        background: transparent none;
        padding-left: 1.5em;
    }

    #user-menu {
        .open {
            .dropdown-menu {
                background-color: #352C35;
                position: absolute;
            }
        }

        li {
            float: left;

            li {
                float: none;
            }
        }
    }
}

@media ( min-width: 1200px ) {
    #header_search {
        .tab-title {
            display: inline;
        }
    }
}

@media ( min-width: 1250px ) {
    .nav-link-text {
        &.langlabel {
            display: inline;
        }
    }
}

@media ( max-width: 1000px ) {
    #header_search {
        padding-left: 0;

        .form-title {
            flex-basis: unset;
        }

        .control-text {
            display: none;
        }
    }
}

@media ( max-width: 1200px ) {
    #header_search {
        .residentsearch {
            flex-grow: 1;
        }

        .tab-content:first-of-type {
            flex-basis: 75%;
        }

        > ul {
            flex-grow: 0;
        }
    }
}
