.body {
  background-color: lightgrey;
}
.content {
  margin: 0;
  padding: 0;
  background-color: white;
}
.app {
  background-color: white;
}

.main-nav {
  margin: 0;
  padding: 3px;
  background-color: lightblue;
  color: darkblue;
}
.navbar-brand img {
  height: 50px;
}
.nav-item {
  margin-right: 15px;
}
.nav-link {
  border: solid lightblue 1px;
}
.nav-link:hover {
  background-color: white;
  border: solid lightblue 1px;
}
.nav-link.active {
  color: lightblue;
  border: solid darkblue 1px;
}
.nav-link i.fa {
  padding-right: 5px;
}
.dropdown-menu {
  background-color: lightblue;
  color: darkblue;
}
.dropdown-item {
}
#login {
  width: 110px;
  text-align: right;
  border-left: solid darkblue 1px;
}

.top-banner {
  padding: 15px;
  padding-top: 70px;
  padding-bottom: 60px;
  text-align: center;
  background-color: lightgrey;
  background-image: url("../images/banner-home.jpg");
  color: white;
}
#login-info {
  position:absolute;
  top: 80px;
  left: 10px;
  padding: 10px;
  text-align: left;
  color: white;
  background-color: transparent;
  opacity: 0.8;
}
#logout {
  position: absolute;
  top: 0px;
  right: 0px;
  margin: 5px;
  width: 120px;
  height: 60px;
  background-color: transparent;
  display: none;
  cursor: pointer;
}
#logout:hover {
  opacity: 0.8;
  border: solid red 1px;
}
#logout.show {
  display: block;
}
#login-error {
  padding-top: 10px;
  color: red;
  font-weight: bold;
}

.btn-add-to-list {
  margin-left: 15px;
  background-color: lightblue;
  color: darkblue;
  border: solid 1px darkblue;
}
.btn-add-to-list:hover {
  margin-left: 15px;
  background-color: darkblue;
  color: lightblue;
  border: solid 1px lightblue;
}

/* -- add footer columns -- */
#footer {
  padding-top: 0px;
  background-color: lightblue;
}
#footer .footer-left, #footer .footer-middle, #footer .footer-right  {
  text-align: center;
  padding-top: 20px;
  padding-bottom: 20px;
}
#footer .footer-middle {
  border-left: solid black 1px;
  border-right: solid black 1px;
}