/* Reset some default styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: aliceblue;
  text-align: center;
  font-size: 16px;
}

footer {
  margin-top: 2em;
  padding: 1em;
  background-color: #0183d6;
  color: white;
}

h2 {
  font-size: 2.2em;
}

div.main {
  border: 2px solid black;
  border-radius: 0.5em;
  background-color: white;
  padding: 1em;
  max-width: 700px;
  width: 95%;
  margin: 0 auto;
  text-align: left;
}

table {
  width: 100%;
  border-collapse: collapse;
}
table thead {
  background-color: #0183d6;
  color: white;
}
table td, table th {
  padding: 0 0.3em;
}
table tr:nth-child(even) {
  background-color: #fff4cc;
}

.plate-preview {
  display: inline-block;
  font-size: 2em;
  font-weight: bold;
  background-color: #ffce1e;
  border: 3px solid #353535;
  padding: 1em;
  border-radius: 5px;
}

.button {
  display: inline-block;
  padding: 0.5em 1em;
  background-color: #0183d6;
  color: white;
  text-decoration: none;
  border-radius: 0.5em;
  border: none;
  line-height: 1.6em;
  font-size: 1em;
  cursor: pointer;
}
.button:hover {
  background-color: #01579b;
}
.button--complete {
  background-color: #00a000;
}
.button--complete:hover {
  background-color: #007700;
}
.button--cancel {
  background-color: #a00000;
}
.button--cancel:hover {
  background-color: #770000;
}
.button--close {
  background-color: #a00000;
}
.button--close:hover {
  background-color: #770000;
}

.navigation {
  display: flex;
  gap: 0.5em;
  flex-wrap: wrap;
}
.navigation__item {
  display: inline-block;
}
.navigation__item--hamburger::before {
  content: "...";
  color: white;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  background-color: #0183d6;
  cursor: pointer;
}
.navigation__item--hamburger:hover::before {
  background-color: #01579b;
}
.navigation__item > a {
  text-decoration: none;
  font-weight: bold;
  padding: 0.5em 1em;
  border-radius: 0.5em;
  background-color: #0183d6;
  color: white;
}
.navigation__item > a:hover {
  background-color: #01579b;
}
.navigation__hamburger {
  display: none;
  position: absolute;
  margin-top: 1em;
  background-color: #0183d6;
  width: 95%;
  max-width: 700px;
  border-radius: 0.5em;
}
@media (max-width: 768px) {
  .navigation__hamburger {
    left: 2.5vw;
  }
}
.navigation__hamburger--open {
  display: block;
}
.navigation__hamburger li {
  list-style: none;
}
.navigation__hamburger a {
  display: block;
  padding: 0.5em 1em;
  color: white;
  text-decoration: none;
  font-weight: bold;
}
.navigation__hamburger a:hover {
  background-color: #01579b;
}

header {
  margin-bottom: 1em;
}
header nav {
  width: 95%;
  max-width: 700px;
  margin: 0 auto;
}
header .button--login, header .button--logout {
  position: absolute;
  right: 1em;
  top: 1em;
}

.top-actions {
  display: flex;
  margin-bottom: 1em;
}

.svg-icon {
  display: inline-block;
}
.svg-icon svg {
  width: 1em;
  height: auto;
  color: #797979;
}

form label {
  display: block;
  font-weight: bold;
  color: #484848;
}
form input, form select {
  background-color: #e5e5e5;
  border: none;
  border-radius: 0.2em;
  height: 2em;
}
form select {
  font-size: 1em;
  padding: 0.5em;
}
form input:focus {
  outline: none;
  background-color: #f5f5f5;
}
form input.error {
  border-color: red;
}
form input[type=checkbox] {
  height: 1em;
}
form input[type=text], form input[type=email], form input[type=password] {
  width: 100%;
  font-size: 1em;
  padding: 0.5em;
}
form button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 0.2em;
  padding: 0.5em 1em;
  cursor: pointer;
  margin-top: 1em;
  font-size: 1em;
}
form button:hover {
  background-color: #0056b3;
}

#promotion_form_services, #order_form_services, #order_form_vehicleType {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
#promotion_form_services label, #order_form_services label, #order_form_vehicleType label {
  display: inline-block;
  background-color: #e5e5e5;
  padding: 1em;
  border-radius: 0.5em;
  color: black;
  cursor: pointer;
}
#promotion_form_services input[type=checkbox], #order_form_services input[type=checkbox], #order_form_vehicleType input[type=checkbox], #promotion_form_services input[type=radio], #order_form_services input[type=radio], #order_form_vehicleType input[type=radio] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  width: 0;
  height: 0;
  display: none;
}
#promotion_form_services input[type=checkbox]:checked + label, #order_form_services input[type=checkbox]:checked + label, #order_form_vehicleType input[type=checkbox]:checked + label, #promotion_form_services input[type=radio]:checked + label, #order_form_services input[type=radio]:checked + label, #order_form_vehicleType input[type=radio]:checked + label {
  background-color: #ffcf1f;
}

#promotion_form_services, #order_form_services, #order_form_vehicleType {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
#promotion_form_services label, #order_form_services label, #order_form_vehicleType label {
  display: inline-block;
  background-color: #e5e5e5;
  padding: 1em;
  border-radius: 0.5em;
  color: black;
  cursor: pointer;
}
#promotion_form_services input[type=checkbox], #order_form_services input[type=checkbox], #order_form_vehicleType input[type=checkbox], #promotion_form_services input[type=radio], #order_form_services input[type=radio], #order_form_vehicleType input[type=radio] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  width: 0;
  height: 0;
  display: none;
}
#promotion_form_services input[type=checkbox]:checked + label, #order_form_services input[type=checkbox]:checked + label, #order_form_vehicleType input[type=checkbox]:checked + label, #promotion_form_services input[type=radio]:checked + label, #order_form_services input[type=radio]:checked + label, #order_form_vehicleType input[type=radio]:checked + label {
  background-color: #ffcf1f;
}

.order-status {
  text-align: center;
}

.order-status__details {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  font-weight: bold;
  border-bottom: 1px solid;
  margin: 1em 0;
  gap: 0.3em;
}
.order-status__details:last-child {
  border-bottom: none;
}
@media (max-width: 600px) {
  .order-status__details__client-name, .order-status__details__vehicle-type {
    display: none;
  }
}
.order-status__details__services {
  width: 100%;
}
.order-status__details__plate {
  background-color: #ffcf1f;
  border-radius: 0.2em;
  font-weight: bold;
  padding: 0 0.2em;
}
.order-status__details__actions {
  margin-bottom: 0.5em;
}
.order-status__details__operator {
  width: 100%;
  display: flex;
}
.order-status__details__operator__name {
  background-color: #0183d6;
  color: white;
  border-radius: 0.3em;
  padding: 0 0.5em;
}
.order-status__details__operator__name.operator--unassigned {
  background-color: #c56262;
}
.order-status__details__operator__name .svg-icon {
  display: inline-flex;
  vertical-align: sub;
}
.order-status__details__operator__name .svg-icon svg {
  color: white;
}

.order-voucher, .order-invoice {
  text-align: center;
}
.order-voucher__title, .order-invoice__title {
  font-size: 1.5em;
  font-weight: bold;
  margin: 0 0 0.5em;
}
.order-voucher__info, .order-voucher__items, .order-invoice__info, .order-invoice__items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1em;
}
.order-voucher__info td, .order-voucher__info th, .order-voucher__items td, .order-voucher__items th, .order-invoice__info td, .order-invoice__info th, .order-invoice__items td, .order-invoice__items th {
  text-align: right;
}
.order-voucher__info td:first-child, .order-voucher__info th:first-child, .order-voucher__items td:first-child, .order-voucher__items th:first-child, .order-invoice__info td:first-child, .order-invoice__info th:first-child, .order-invoice__items td:first-child, .order-invoice__items th:first-child {
  text-align: left;
}
.order-voucher__info td:first-child, .order-voucher__info th:first-child, .order-invoice__info td:first-child, .order-invoice__info th:first-child {
  font-weight: bold;
}
.order-voucher__items thead tr, .order-invoice__items thead tr {
  border-bottom: 1px solid black;
  border-top: 1px solid black;
}
.order-voucher__total, .order-invoice__total {
  text-align: right;
  font-size: 1.5em;
  font-weight: bold;
}

.home {
  /* Hero Section */
  /* Reduce H2 size on mobile */
  /* Services Section */
  /* About Section */
  /* Contact Section */
}
.home .hero {
  background: url("../images/background-OoQW0BE.png") no-repeat center center/cover;
  /*background: #404040;*/
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 3em 20px;
}
.home .hero h2 {
  font-size: 3em;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .home .hero h2 {
    line-height: 1.2;
    font-size: 2em;
  }
}
.home .main {
  margin: 0;
  width: 100%;
  border: none;
  background: none;
  padding: 0;
  max-width: unset;
}
.home .hero p {
  font-size: 20px;
  margin-bottom: 30px;
}
.home .btn {
  background: #f4b400;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  font-size: 18px;
  border-radius: 5px;
  display: inline-block;
}
.home .services {
  padding: 50px 0;
  background: white;
  text-align: center;
}
.home .services h2 {
  margin-bottom: 40px;
}
.home .service-item {
  margin-bottom: 30px;
}
.home .service-item h3 {
  font-size: 24px;
  margin-bottom: 10px;
}
.home .about {
  padding: 50px 0;
  text-align: center;
}
.home .contact {
  padding: 50px 0;
  background: white;
  text-align: center;
}

/*# sourceMappingURL=app.output.css.map */