/* author James Smith 2024
   bs5 version
   css relating to the page header has been extracted from app.css
*/

div.topnav {
  height: 7vh;
  min-height: 50px;
  width: 100%;
  z-index: 10;
}

/* title */

.my-navbar-brand {
    float: left; /* required for navbar-toggler */
    padding: 15px 3vw 15px 3vw;
    font-size: 24px;
    line-height: 20px;
    color: #99c49b;
}
div.topnav .my-navbar-brand:hover {
    color: hsl(210, 40%, 40%);
    text-decoration: underline;
}

/* responsive mobile menu */

div.topnav .navbar-toggler {
    position: absolute;
    right: 0px;
}

/* navbar */

#navbarNavDropdown {
}

div.topnav ul.navbar-nav {
    margin-top: auto;
    margin-bottom: auto;
    flex-wrap: nowrap;
}

div.topnav ul.navbar-nav li {
    font-size: .85rem;
    text-wrap: nowrap;
}
div.topnav ul.navbar-nav li a:hover {
    color: white;
}

/* dropdowns */

div.topnav ul.dropdown-menu li {
  line-height: 1.4;
  font-size: .85rem;
  color: #333;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
div.topnav ul.dropdown-menu li a:hover {
    background-color: hsl(210, 55%, 55%);
    color: white;
}
div.topnav ul.dropdown-menu .dropdown-header {
    color: #999;
    font-size: .75rem;
    padding-top: 0px;
    padding-bottom: 0px;
}

/** search form **/

div.topnav .flex-item {
    padding-left: 5px;
    padding-right: 5px;
}
div.topnav .pull-right {
    margin-left: auto;
}

/** search input **/

div.topnav form .form-group input {
    height: 33px;
    font-family: Arial;
    font-size: .9rem;
    min-width: 70px;
}
div.topnav form .form-group input::placeholder {
    color: hsl(0, 0%, 70%);
}

/** search button **/

.btn-wwpdb-green  {
    color: #ffffff;
    background-color: #99c49b;
    border-color: #5cb85c;
}
.btn-wwpdb-green:hover,
.btn-wwpdb-green:focus,
.btn-wwpdb-green:active,
.btn-wwpdb-green.active{
    color: #ffffff;
    background-color: #47a447;
    border-color: #398439;
}
div.topnav form button {
    height: 35px;
}
div.topnav form svg {
    height: 13px;
    position: relative;
    top: -3px;
}
#logo {
    position: relative;
    top: -3px;
    padding-right: 20px;
}