
.btn:focus, .btn:hover {
    box-shadow: 0 0 0 0.1rem var(--navbar-btn-hover-outline-color);
}

.navbar {
    background-color: var(--navbar-bg-color);

    .side-nav-toggle {
        cursor: pointer;
        margin-left: 13px;
        font-size: 1.2rem;
        i {
            color: var(--navbar-fa-icon-color);
        }
    }
}

/* small devices (phones, 650px and down) */
@media only screen and (max-width:650px) {
    .navbar-nav {
        width: 0;
    }
}

// On Really small screens, hide the server settings wheel and show it in nav
// TODO: Look into doing this with bootstrap 5 (and moving to _utilities.scss)
.xs-only {
    display: none;
}
.not-xs-only {
    display: inherit;
}
@media only screen and (max-width:300px) {
    .xs-only {
        display: inherit;
    }
    .not-xs-only {
        display: none;
    }
}

.nav-item.dropdown {
    position: unset;
}

.navbar-brand {
    font-family: var(--brand-font-family);
    font-weight: bold;
    margin: 0 1rem;

    &:hover {
        text-decoration: none;
    }

    .logo {
        max-height: 28px;
        vertical-align: text-top;
    }

    .phone-hidden {
        vertical-align: middle;
    }
}

.focus-visible:focus {
    visibility: visible;
    color:  var(--nav-header-text-color);
}

.ng-autocomplete {
    margin-bottom: 0px;
}

.primary-text {
    color:  var(--nav-header-text-color);
    border: none;
}

.search-result {
    width: 24px;
    margin-top: 5px;
}

.scroll-to-top:hover {
    animation: MoveUpDown 1s linear infinite;
}

.text-light {
    color: var(--search-result-text-lite-color) !important;
}
