#top {
    top: 0;
    right: 15px;
    background: $blue;
    position: absolute;

    ul:not(.login-nav) {
        margin: 0;
        z-index: 1;
        padding: 0 2rem;
        position: relative;
        padding-bottom: 2px;
        display: inline-block;

        li {
            list-style: none;
            position: relative;
            display: inline-block;

            a {
                color: #ffffff;
                font-size: 0.875rem;
                padding: 0 1.5rem;
                text-decoration: none;

                &:hover {
                    color: rgba(255,255,255,0.8);
                }
            }

            &:not(:last-of-type) {
                &:after {
                    top: 0;
                    right: 0;
                    content: "|";
                    color: #ffffff;
                    position: absolute;
                }
            }
        }
    }

    ul.login-nav {
        right: 0;
        margin: 0;
        width: 100px;
        float: right;
        display: none;

        > li {
            > a {
                color: #ffffff;
                padding-top: 2px;
                padding-bottom: 2px;

                &:hover,
                &:focus,
                &:active {
                    color: #ffffff;
                    background: darken($red, 10%);
                }

                &.btn {
                    border: none;
                    text-align: center;
                    padding-bottom: 2px;
                }

                i {
                    margin-left: 0.5rem;
                }
            }

            .dropdown-menu {
                right: 0;
                top: 100%;
                width: 100%;
                border: none;
                padding: 1.5rem;
                min-width: 250px;
                background: $blue;
                position: absolute;

                input,
                select {
                    margin-bottom: 1.5rem;
                }
            }
        }
    }

    .login {
        display: none;
    }

    .search {
        z-index: 1;
        position: relative;
        background: #1666a1;
        display: inline-block;

        input {
            border: none;
            height: 35px;
            color: #ffffff;
            background: none;
            padding-left: 1.5rem;
            padding-right: 1.5rem;

            &:focus {
                outline: none;
            }

            &::placeholder {
                opacity: 1;
                color: rgba(246, 246, 246, 0.38);
            }
        }

        button {
            border: none;
            background: #1666a1;
        }

        svg path {
            fill: #ffffff;
        }
    }
}

@media (max-width: $screen-md-max) {
    #top {
        ul.login-nav {
            display: inline-block;
        }
    }
}

@media (max-width: $screen-sm-max) {
    #top {
        left: 0;
        right: 0;

        ul:not(.login-nav) {
            display: none;
        }

        ul.login-nav {
            display: inherit;
            position: absolute;

            > li > a.btn {
                padding-bottom: 1px;
            }
        }

        .search {
            left: 0;
            right: 100px;
            position: absolute;

            input {
                width: 100%;
            }

            button {
                top: 0;
                right: 0;
                bottom: 0;
                position: absolute;
            }
        }

        .login {
            display: inherit;
        }
    }
}
