:root {
  --selected: grey;
}

/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */
.errorMsg {
  color: red;
  font-weight: bold;
}
#primary {
  width: 100%;
}
#availability-result,
#charges-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.group-container,
.model-container,
.charge-container {
  width: 100%;
  /* min-height: 20vh; */
  display: flex;
  flex-direction: row;
  margin-bottom: 10px;
  padding: 10px;
}
.charge-container {
  cursor: pointer;
  width: 48%;
  /*margin-bottom: 1%;*/
  margin-left: 2%;
  flex-direction: column;
  border: 1px solid black;
  border-radius: 10px;
  transition: background 0.5s linear, transform 0.5s linear;
}
.charge-name {
  text-align: center;
  font-weight: bold;
  font-size: 1.5em;
}
.charge-image {
  padding-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.charge-image img {
  width: 150px;
  height: 150px;
  max-width: initial;
  max-height: initial;
}
.charge-description {
  text-align: justify;
  font-size: 0.7em;
  font-weight: bold;
}
.charge-min-max,
.charge-tax-info {
  text-align: center;
  font-size: 0.7em;
}
.group-pricelist-item:hover,
.model-pricelist-item.available:hover,
.charge-container:hover,
.charge-container.selected {
  background: var(--selected);
  transform: scale(1.05);
}
.unavailable.group-pricelist-item:hover,
.unavailable.model-pricelist-item.available:hover {
  background: initial;
  transform: initial;
}
.group-pricelist-item:active,
.model-pricelist-item.available:active {
  transform: scale(0.95);
}
.charge-info {
  display: flex;
  flex-direction: column;
  height: 50%;
  width: 100%;
}
.group-price,
.model-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* height: 50%; */
  width: 100%;
  align-items: center;
}
.group-info,
.model-info {
  border: 1px solid black;
  border-radius: 10px;
  padding: 5px;
  width: 70%;
  display: grid;
  grid-template-areas:
    "image extraData"
    "info info";
}
.group-extra-data,
.model-extra-data {
  grid-area: extraData;
  text-align: left;
}
.group-conditions,
.model-conditions {
  width: 100%;
  text-align: right;
}
.group-image,
.model-image {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-area: image;
}
.group-image img,
.model-image img {
  width: 150px;
  /* height: 150px; */
  max-width: initial;
  /* max-height: initial; */
}
.group-data,
.model-data {
  grid-area: info;
  display: grid;
  grid-template-areas:
    "name doors"
    "group group"
    "suitcases airbags"
    "emissions squares"
    "transmission empty";
}
.group-data-item,
.model-data-item {
  display: grid;
  grid-template-areas: "title value";
  margin-left: 5%;
  margin-right: 5%;
}
.group-data-title,
.model-data-title {
  font-weight: bold;
  grid-area: title;
  text-align: left;
}
.group-data-value,
.model-data-value {
  text-align: right;
  grid-area: value;
}
.group-name,
.model-name {
  grid-area: name;
}
.model-container .group-name {
  grid-area: group;
}
.group-transmission,
.model-transmission {
  grid-area: transmission;
}
.group-suitcases,
.model-suitcases {
  grid-area: suitcases;
}
.group-emissions,
.model-emissions {
  grid-area: emissions;
}
.group-doors,
.model-doors {
  grid-area: doors;
}
.group-airbags,
.model-airbags {
  grid-area: airbags;
}
.group-squares,
.model-squares {
  grid-area: squares;
  text-align: center;
}
.group-price-info,
.model-price-info {
  width: 29%;
  margin-left: 1%;
  display: flex;
  flex-direction: column;
}
.group-pricelist-item,
.model-pricelist-item {
  display: grid;
  grid-template-areas:
    "name name info"
    "day day day"
    "earlyPaymentDiscount earlyPaymentDiscount earlyPaymentDiscount"
    "extraCharges extraCharges extraCharges"
    "total total total"
    "button button button";
  border: 1px solid black;
  border-radius: 10px;
  margin-bottom: 5px;
  text-align: center;
  cursor: pointer;
  transition: background 0.5s linear, transform 0.2s linear;
}
.group-pricelist-item.unavailable,
.model-pricelist-item.unavailable {
  border: 1px solid red;
  cursor: not-allowed;
}
.group-pricelist-item-name,
.model-pricelist-item-name {
  grid-area: name;
  font-weight: bold;
}
.group-pricelist-item-info,
.model-pricelist-item-info {
  grid-area: info;
  font-weight: bold;
  text-align: left;
}
.group-pricelist-item-info .tooltiptext,
.model-pricelist-item-info .tooltiptext {
  visibility: hidden;
  width: 20em;
  max-height: 50vh;
  text-align: center;
  border-radius: 6px;
  position: absolute;
  padding: 10px;
  z-index: 1;
  border: 1px solid black;
  overflow-y: scroll;
  opacity: 0;
  transition: visibility 0.3s linear, opacity 0.3s linear;
}
.group-pricelist-item-info:hover .tooltiptext,
.group-pricelist-item-info .tooltiptext:hover,
.model-pricelist-item-info:hover .tooltiptext,
.model-pricelist-item-info .tooltiptext:hover {
  visibility: visible;
  opacity: 1;
}
.group-pricelist-early-payment-discount {
  grid-area: earlyPaymentDiscount;
  text-decoration: underline;
}
.group-pricelist-item-charges,
.model-pricelist-item-charges {
  grid-area: extraCharges;
  font-size: 0.8em;
}
.group-pricelist-item-day,
.model-pricelist-item-monthly {
  grid-area: day;
  font-size: 2em;
}
.group-pricelist-item-day-without-tax,
.model-pricelist-item-day-without-tax {
  font-size: 0.5em;
}
.group-pricelist-item-total,
.model-pricelist-item-total {
  grid-area: total;
  padding-bottom: 5px;
  border-radius: 5px 5px 5px 5px;
}
.group-pricelist-item-total-tax-warn,
.model-pricelist-item-total-tax-warn {
  font-size: 0.7em;
  text-align: right;
  margin-right: 10%;
}
.group-pricelist-item-button,
.model-pricelist-item-button {
  grid-area: button;
  background-color: black;
  color: white;
  border-radius: 0px 0px 10px 10px;
}
.unavailable .group-pricelist-item-button {
  color: black;
  background-color: red;
  font-weight: bold;
}
.model-pricelist-item.unavailable .model-pricelist-item-button {
  color: black;
  background-color: red;
}
.pricelist-priority-hight {
  background-color: red;
  animation-name: hightPriorityMove;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-out;
  animation-delay: 4s;
}
.pricelist-priority-middle {
  background-color: yellow;
}
.pricelist-priority-low {
  background-color: white;
}
@keyframes hightPriorityMove {
  0% {
    transform: translate(0px);
  }
  12.5% {
    transform: translate(10px);
  }
  25% {
    transform: translate(-20px);
  }
  37.5% {
    transform: translate(15px);
  }
  50% {
    transform: translate(-10px);
  }
  62.5% {
    transform: translate(7.5px);
  }
  75% {
    transform: translate(-5px);
  }
  100% {
    transform: translate(0px);
  }
}
.charge-price {
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
}
.charge-qty {
  flex-direction: row;
  width: 100%;
  font-size: 2em;
  justify-content: center;
  padding: 10px;
  /*display: none;*/
  display: flex;
}
/*.charge-qty.show {
    display: flex;
}*/
.charge-qty-add-container,
.charge-qty-value-container,
.charge-qty-remove-container {
  width: 33.33%;
  display: flex;
  justify-content: center;
}
.charge-select {
  width: 75%;
}
.charge-qty-add {
  background-color: #44c767;
  border-radius: 10px;
  border: 1px solid #18ab29;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  width: 100%;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 1px 0px #2f6627;
}
.charge-qty-remove {
  background-color: #e4685d;
  border-radius: 10px;
  border: 1px solid #ffffff;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-family: Arial;
  width: 100%;
  text-align: center;
  text-decoration: none;
  text-shadow: 0px 1px 0px #b23e35;
}

.group-total {
  font-size: 3em;
}
.group-total-day,
.group-total,
.group-supplement-weekend,
.group-supplements,
.group-charges-customer {
  text-align: right;
}
/*.group-total:after,
.group-total-day:after,
.charge-price:after {
    content: '€';
}*/

#nrc_availability_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#nrc_avail_groups_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#nrc_avail_charges_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
#charges-cards-conainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
#charges-container {
  width: 100%;
}
#nrc_customer_form {
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.btn {
  /*position: absolute;*/
  /*right: 0px;*/
  /*bottom: -70px;*/
  /*width: 10%;*/
  /*height: 10%;*/

  transition: transform 0.1s linear;
}
.btn:hover {
  transform: scale(1.02);
}
.btn:active {
  transform: scale(0.9);
}

#sidebar-booking-data {
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: column;
  background-color: white;
  width: 100%;
  border-radius: 10px 10px 10px 10px;
  border: 1px solid black;
}
#sidebar-booking-data > .container-info {
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: column;
  width: inherit;
  padding: 10px;
}
#sidebar-booking-data > .container-info > .row {
  width: 100%;
  display: flex;
  flex-direction: row;
  font-size: 0.95em;
  cursor: pointer;
  padding: 5px;
}
#sidebar-booking-data > .container-info > .row.not-allowed,
.not-allowed,
.not-allowed .btn {
  cursor: not-allowed;
}
#sidebar-booking-data > .container-info > .row:hover {
  background-color: var(--selected);
  color: white;
  font-weight: bold;
}
#sidebar-booking-data > .container-info > .title {
  width: 100%;
  display: flex;
  flex-direction: row;
  font-size: 0.95em;
  padding: 5px;
  font-weight: bold;
}
#sidebar-booking-data > .container-info > .title > .type,
#sidebar-booking-data > .container-info > .row > .type {
  width: 15%;
  text-align: left;
  font-weight: bold;
}
#sidebar-booking-data > .container-info > .title > .name,
#sidebar-booking-data > .container-info > .row > .name {
  width: 40%;
  text-align: left;
}
#sidebar-booking-data > .container-info > .title > .qty,
#sidebar-booking-data > .container-info > .row > .qty {
  width: 15%;
  text-align: center;
}
#sidebar-booking-data > .container-info > .title > .price-unit,
#sidebar-booking-data > .container-info > .row > .price-unit {
  width: 15%;
  text-align: center;
}
#sidebar-booking-data > .container-info > .title > .price,
#sidebar-booking-data > .container-info > .row > .price {
  width: 15%;
  text-align: right;
}
#sidebar-booking-data > .container-total {
  display: flex;
  align-items: center;
  justify-content: left;
  flex-direction: column;
  width: inherit;
  padding: 10px;
  border-top: 1px solid black;
}
.taxes-warn {
  font-size: 0.7em;
  text-align: right;
  width: 100%;
}
#sidebar-booking-data > .container-total > .row {
  width: 100%;
  display: flex;
  flex-direction: row;
}
#sidebar-booking-data > .container-total > .row > .type {
  width: 80%;
  text-align: right;
  font-weight: bold;
}
#sidebar-booking-data > .container-total > .row > .price {
  width: 20%;
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: right;
}
#customer-payment-options-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.customer-payment-option {
  width: 43%;
  border: 1px solid black;
  padding: 5%;
  display: flex;
  justify-content: center;
  border-radius: 5px;
  flex-direction: column;
}
#customer-payment-options-container input[type="radio"] {
  display: none;
}
#customer-payment-options-container label {
  display: inline-block;
  background: #1a1a1a;
  font-size: 16px;
  cursor: pointer;
  margin-top: 5%;
  border: 0;
  border-radius: 2px;
  color: #fff;
  font-family: Montserrat, "Helvetica Neue", sans-serif;
  font-weight: 700;
  letter-spacing: 0.046875em;
  line-height: 1;
  padding: 0.84375em 0.875em 0.78125em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
}
#customer-payment-options-container input[type="radio"]:checked + label,
div#customer-create-account-container button.actived {
  background: #007acc;
  color: white;
}
div#customer-button-container {
  margin-top: 5%;
  display: flex;
  justify-content: center;
}
div.customer-container,
div.booking-container {
  margin-top: 5%;
  border: 1px solid black;
  border-radius: 5px;
  padding: 5%;
}
div#customer-container {
  margin-top: initial;
}
.nrc-hidden {
  display: none;
}
label.field-required:after {
  content: " *";
  color: red;
  font-weight: bold;
}
.group-pricelist-item-info-char:before {
  content: "🛈";
}

#availability-result .categories-container {
  display: flex;
  flex-direction: row;
  width: 100%;
  flex-wrap: wrap;
}
#availability-result .categories-container .category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-around;
  text-align: center;

  width: 150px;
  height: 150px;
  padding: 15px;
  border-radius: 5px;

  transition: background 0.5s linear, transform 0.5s linear;
}
#availability-result .categories-container .category.selected {
  background-color: #2f6627;
  color: white;
  font-weight: bold;
}
#availability-result .categories-container .category:hover {
  cursor: pointer;
  transform: scale(1.05);
  background-color: var(--selected);
}
#availability-result .categories-container .category .category-image {
  width: 120px;
}
#availability-result .categories-container .category .category-image img {
  width: 100px;
  height: 100px;
  border-radius: 5px;
}
#availability-result .categories-container .category .category-name {
  font-size: 0.9em;
  width: 100%;
  text-align: center;
}
#availability-result .categories-container .category .category-name span {
  text-transform: lowercase;
}
#availability-result
  .categories-container
  .category
  .category-name:first-letter {
  text-transform: uppercase;
}
#availability-result .model-container.hidden {
  display: none;
}
#container-ages {
  display: flex;
  flex-direction: row;
}
.hide {
  display: none;
}