header { background: grey; color: #fff; }

header .left { margin-left: 1rem; font-size: 2rem; }
header .left a { text-decoration: none; }

header .left img { display: block; height: 40px; }

header a:link, header a:visited { color: #fff; }

header nav.user button,
header nav.user button:hover,
.dropdown button { color: #fff; }

.mainEnv { padding: 0; }

footer { background: lightgrey; }

main button {
  background-color: steelblue; color: #fff;
  border:           1px solid steelblue; border-radius: 0;
  font-size:        1rem;
  box-shadow:       3px 3px 0 0 rgba(0, 0, 0, 0.3);
  padding:          0.4rem 1.2rem;
  cursor:           pointer;
}
main button a { text-decoration: none; }
main button a:link, main button a:visited { color: #fff; }

main img { width: 100%; }

/* Reservation */
#reservation .body { border: 1px solid silver; padding: 1rem; }
#reservation .progress {
  color:   grey; background-color: gainsboro; cursor: pointer;
  display: flex; }
#reservation .progress > div { width: 50%; text-align: center; padding: 0.4rem; }
#reservation .progress .current { color: #000; background-color: silver; }
#reservation label { white-space: nowrap; }
#reservation .checkin-checkout-dates { display: flex; gap: 2.4rem; }
#reservation .checkin-date,
#reservation .checkout-date {
  display: grid; column-gap: 0; grid-template-columns: 1fr 1fr; align-items: center;
}
#reservation .checkin-checkout-dates .error { grid-column: 1/3; }
#reservation-check-dates { display: none; flex-direction: column; gap: 1.2rem; }
#reservation-guest-info { display: none; grid-template-columns: 5.5rem 1fr 5rem 5.5rem 1fr; }
#reservation input[type] { width: auto; }
#reservation .reserve-room-env { grid-column: 1/3; }
#firstname-error, #email-error { grid-column: 1/3; margin-bottom: 1.2rem; }
#lastname-error, #phone-error { grid-column: 4/7; margin-bottom: 1.2rem; }