.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0;
    --bs-navbar-nav-link-padding-y: 1rem;
    --bs-navbar-nav-link-padding-x: 0.7rem;
    --bs-navbar-toggler-padding-y: 0.5rem;
    --bs-navbar-toggler-padding-x: 1rem;
    /*--bs-navbar-color: rgba(0, 0, 0, 0,65); == default */
    --bs-navbar-hover-color: var(--cims-text-color-light);
    --bs-navbar-active-color: var(--cims-text-color-dark);
}

.navbar .dropdown-menu[data-bs-popper] {
    margin-top: -0.25rem;
}

.navbar-toggler {
    margin: 0.5rem 0;
    border: 2px solid transparent;
}

.navbar-nav {
    --bs-nav-link-padding-y: 1rem;
}

.navbar[data-bs-theme="dark"] {
    --bs-navbar-color: rgba(241, 241, 241, 1);
    --bs-navbar-hover-color: var(--bs-navbar-color);
    --bs-navbar-hover-bg: var(--cims-bg-color-dark);
    --bs-navbar-active-color: var(--bs-navbar-color);
    --bs-navbar-active-bg: var(--cims-bg-color-dark);
}

.navbar .nav-link {
    border: 1px solid transparent;
}

    .navbar .nav-link.active {
        font-weight: bold;
    }

#btnUserOptions.navbar-toggler:hover, #btnUserOptions.navbar-toggler:active {
    border: 2px solid var(--bs-navbar-toggler-border-color);
}

.navbar[data-bs-theme="dark"] #btnMenu.navbar-toggler:hover, .navbar[data-bs-theme="dark"] #btnMenu.navbar-toggler:active {
    background-color: var(--cims-bg-color-dark);
    border: 2px solid black;
    transition: background-color 0.1s ease;
}

.navbar[data-bs-theme="dark"] .navbar-nav .nav-link.active, .navbar[data-bs-theme="dark"] .navbar-nav .nav-link.show {
    background-color: var(--bs-navbar-active-bg);
    border: 1px solid black;
    transition: background-color 0.1s ease;
}

.navbar[data-bs-theme="dark"] .nav-link:focus, .navbar[data-bs-theme="dark"] .nav-link:hover {
    background-color: var(--bs-navbar-hover-bg);
    border: 1px solid black;
    transition: background-color 0.1s ease;
}

.navbar .nav-link:active {
    color: var(--cims-text-color-dark);
}

.navbar[data-bs-theme="dark"] .nav-link:active {
    color: var(--bs-navbar-color);
    background-color: var(--bs-body-bg);
}

.dropdown-menu {
    --bs-dropdown-font-weight: 500;
}

.dropdown-item {
    font-weight: var(--bs-dropdown-font-weight);
}

    .dropdown-item.active {
        font-weight: bold;
    }

.navbar .dropdown-menu {
    --bs-dropdown-bg: #dee2e6; /* from dark theme --bs-body-color */
    --bs-dropdown-link-hover-bg: inherit;
    --bs-dropdown-link-hover-color: var(--cims-text-color-dark);
    --bs-dropdown-link-active-bg: inherit;
    --bs-dropdown-link-active-color: var(--cims-text-color-light);
    --bs-dropdown-border-color: #909090;
}

.navbar[data-bs-theme="dark"] .dropdown-menu {
    --bs-dropdown-color: var(--bs-body-bg);
    --bs-dropdown-bg: var(--bs-body-color);
    --bs-dropdown-link-color: var(--bs-body-bg);
    --bs-dropdown-link-hover-bg: inherit;
    --bs-dropdown-link-hover-color: var(--cims-text-color-dark);
    --bs-dropdown-link-active-bg: inherit;
    --bs-dropdown-link-active-color: var(--cims-text-color-light);
    --bs-dropdown-border-color: #909090;
}

.navbar .dropdown-item {
    --bs-dropdown-item-padding-y: 0.5rem;
}

    .navbar .dropdown-item:active {
        color: var(--bs-body-bg);
        background-color: var(--bs-body-color);
    }

.navbar[data-bs-theme="dark"] .dropdown-item:active {
    color: var(--bs-navbar-color);
    background-color: var(--bs-body-bg);
}

/* Dropdown menu caret animation */
/* Base state of the caret */
.nav-item.dropdown .dropdown-toggle::after {
    transition: transform 0.2s ease-in-out; /* Smooth animation speed */
    vertical-align: middle;
}
/* Rotated state when the dropdown is open */
.nav-item.dropdown .dropdown-toggle.show::after {
    transform: rotate(180deg); /* Flips the arrow upwards */
}

/* dropdown animation for within the navigation bar and the user options bar */
/* @supports (transition-behavior: allow-discrete) is the right feature query
    here because allow-discrete and @starting-style landed together in the same
    browsers, so it's a reliable proxy for support without needing to query
    @starting-style directly. */
/* Animation enhancement for browsers that support it */
@supports (transition-behavior: allow-discrete) {
    .dropdown-menu {
        /* Base/closed state */
        display: none;
        opacity: 0;
        transform: translateY(-15px);
        transition: opacity 0.4s ease, transform 0.4s ease, display 0.4s allow-discrete;
    }

        .dropdown-menu.show {
            display: block;
            opacity: 1;
            transform: translateY(0);

            @starting-style {
                opacity: 0;
                transform: translateY(-15px);
            }
        }
}

#ConnectText, #ProductText, #BBoardHeading {
    font-weight: bold;
    white-space: nowrap;
}
#ConnectText, #BBoardHeading {
    color: var(--cims-text-color-dark);
}
#BBoardHeading {
    font-style: italic;
}

#FooterCustom, #back-to-top,
::selection {
    border: 1px solid black;
    background-color: var(--cims-bg-color-dark);
}

    #FooterCustom ::selection {
        background-color: white;
        color: var(--cims-text-color-dark);
    }

#LogoProductLocationDiv img {
    /* Going to let these new logos be the size that the customer wants - BUT setting a max just in case... may have to rethink for mobile view */
    max-height: 100px;
    width: auto;
}