/*
  Header of the account pages that are reached without being signed in, in the look of
  www.plantivo.de: a narrow dark bar with the ways to reach us, and a light bar underneath carrying
  the logo and the way to the demo.

  The values (colours, sizes, spacings) are taken from that website so both look the same. Markup:
  Pages/Shared/Account/PublicTopBar.cshtml.
*/

.public-top-bar {
  /* Cancels the padding of #MainTopContainer, so the bars run the full width of the container. */
  margin: -10px -10px 20px -10px;
}

.public-top-bar .public-top-bar-inner {
  padding: 0 30px;
  display: flex;
  align-items: center;
}

/* ---- narrow dark bar: phone number, e-mail, contact ---- */

.public-top-bar-contact {
  background-color: #333333;
}

.public-top-bar-contact .public-top-bar-inner {
  min-height: 36px;
  justify-content: flex-end;
}

.public-top-bar-contact a {
  display: flex;
  align-items: center;
  margin: 0 3px;
  padding: 3px 10px;
  color: #ffffff;
  font-size: 12px;
  line-height: 21.6px;
  text-decoration: none;
  transition: background-color .3s, color .3s;
}

.public-top-bar-contact a:hover,
.public-top-bar-contact a:focus {
  background-color: rgba(100, 166, 110, .7);
  color: #f7f7f7;
  text-decoration: none;
}

.public-top-bar-contact i {
  margin-right: 8px;
  font-size: 17px;
}

/* ---- light bar: logo and demo ---- */

.public-top-bar-brand {
  background-color: #ffffff;
  border-bottom: 1px solid #edeaea;
}

.public-top-bar-brand .public-top-bar-inner {
  min-height: 74px;
  justify-content: space-between;
}

.public-top-bar-logo img {
  display: block;
  width: 160px;
  height: auto;
}

/*
  Grey, not green: on this page the sign in is the point, the demo is the side road. The website
  keeps the green for ordering and gives its "Anmelden" and "Jetzt Demo testen" buttons this grey.
*/
.public-top-bar-button {
  display: inline-flex;
  align-items: center;
  padding: 9px 20px;
  border: 0;
  border-radius: 0;
  background-color: #e9e9e9;
  color: #333333;
  font-size: 12px;
  font-weight: 600;
  line-height: 14px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s, color .2s;
}

.public-top-bar-button:hover,
.public-top-bar-button:focus {
  background-color: #d9d9d9;
  color: #333333;
  text-decoration: none;
}

/* The website drops the contact bar on small screens and keeps the brand bar. */
@media (max-width: 1024px) {
  .public-top-bar-contact {
    display: none;
  }

  .public-top-bar .public-top-bar-inner {
    padding: 0 15px;
  }
}