@import '~bootstrap/scss/mixins/_breakpoints.scss';

$primary-color: white;
$bg-color: rgb(22, 27, 34);

.btn:focus, .btn:hover {
    box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 1);
}

.navbar {
    background-color: $bg-color;
}

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

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

.navbar-brand {
    font-family: "Spartan", sans-serif;
    font-weight: bold;

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

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

.focus-visible:focus {
    visibility: visible;
    color: white;
}

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

.primary-text {
    color: $primary-color;
    border: none;
}

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

.form-inline .form-group {
    width: 100%;
}

@media (min-width: 576px) {
    .form-inline .form-group {
        width: 100%;
    }
}

@include media-breakpoint-down(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)) {
    .ng-autocomplete {
        width: 100%; // 232px
    }
}

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

@keyframes MoveUpDown {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-10px);
    }
}