body {
  position: relative;
  padding: 8px;
  }

div, span, input {
  font-family: "Varela Round", sanserif;
  }

select {
  width: 100%;
  }

div.poslCart {
  max-width: 40em;
  margin-left: auto;
  margin-right: auto;
  }

div.block > div { display: none; }
div.block > div.title { display: block; }
div.block.open > div { display: block; }

img#phead {
  width: 5em;
  position: absolute;
  right: calc(max(0px,50vw - 20em - 8px));
  top: 0;
  }

div.block {
  border: 0.05em solid #c0c0c0;
  border-radius: 0.25em;
  padding: 0.5em;
  margin-bottom: 0.5em;
  }

div.title {
  background-color: #ffe0e0;
  border-radius: 0.25em;
  cursor: pointer;
  padding: 0.5em;
  margin-bottom: 0.5em;
  }
div.title:before {
  content: "\2716";
  display: none;
  color: red;
  background-color: white;
  padding-left: 0.25em;
  padding-right: 0.25em;
  margin-right: 0.25em;
  }
div.block.valid div.title {
  background-color: #e0ffe0;
  }
div.block.valid div.title:before {
  display: inline-block;
  content: "\2705";
  margin-right: 0.5em;
  }

div.intro {
  margin-bottom: 0.5em;
  }

div.lineItem.donationAmount div.input { 
  position: relative;
  }

div.lineItem.donationAmount span.prefix { 
  position: absolute;
  left: 0.5em;
  }

div.lineItem.donationAmount input { 
  text-align: right;
  padding-left: 1.5em;
  width: calc(100% - 2em);
  }

div.lineItem {
  border-top: 0.05em dotted #c0c0c0;
  padding-top: 0.5em;
  }
div.lineItem div.input {
  display: inline-block; 
  vertical-align: text-top;
  width: 31%; 
  text-align: right;
  padding-right: 3%;
  }

div.lineItem input[type="button"] {
  width: calc(min(100%, 6em));
  position: relative;
  bottom: 0.25em;
  }

div.lineItem div.note {
  display: inline-block; 
  vertical-align: text-top;
  width: 65%; 
  text-align: left;
  }
div.lineItem input {
  width: 100%;
  }
@media screen and (max-width: 600px) {
  div.lineItem { 
    padding: 1em 0;
    }
  div.lineItem div.input { 
    display: block;
    margin-bottom: 0.5em;
    padding-right: 0;
    text-align: center; 
    width: 100%;
    }
  div.lineItem input {
    width: auto;
    }
  div.lineItem div.note { 
    display: block;
    padding-right: 0;
    text-align: center; 
    width: 100%; 
    }
  }

div.lineItem div.price {
  margin-top: 0.5em;
  text-align: right;
  display: none;
  }

div.lineItem.priced div.price {
  display: block;
  }

div.lineItem div.price > div { 
  display: inline-block;
  background-color: #ffffc0;
  font-style: oblique;
  }
div.lineAmount {
  padding-left: 0.25em;
  }
div.linePriceNote {
  padding-right: 0.25em;
  }

div.lineItem span.infoButton {
  margin: 0 0.5em;
  border: 1px solid black;
  border-radius: 0.25em;
  padding: 0 0.25em;
  cursor: pointer;
  }

div.lineItem div.info {
  margin-top: 0.5em;
}

div.lineItem span.info {
  font-style: italic;
}

div.lineItem.info span.note {
  display: inline-block;
  width: calc(100% - 3em);
  }

div.lineItem.info span.infoButton.close {
  display: inline-block;
  margin-right: 0.5em;
  vertical-align: text-top;
  }

div.lineItem.info span.info {
  display: inline-block;
  width: calc(100% - 3em);
  vertical-align: text-top;
  }

div.lineItem span.infoButton.open {
  display: inline-block;
  }

div.lineItem.info span.infoButton.open,
div.lineItem span.infoButton.close,
div.lineItem span.info {
  display: none;
  }

div.lineItem select:invalid,
div.lineItem input:invalid {
  background-color: #ff8080;
  }

div.block div.lineItem.confirm,
div.block div.paymentType,
div.block div.unreview {
  display: none;
  }

/* specific line items */
div.block div.lineItem.hotelCode,
div.block div.lineItem.wscProxyName,
div.block div.lineItem.nscProxyName {
  display: none;
  }
div.block.hotel.open div.lineItem.hotelCode,
div.block.proxied.open div.lineItem.wscProxyName,
div.block.proxied.open div.lineItem.nscProxyName {
  display: block;
  }

div.error {
  background-color: #ffe0e0;
  color: red;
  margin-top: 1em;
  }

/* alternate presentation when reviewing order */
div.reviewing div.block,
div.reviewing div.lineItem {
  padding: 0;
  border: none;
  display: block;
  }
div.reviewing div.title,
div.reviewing div.intro,
div.reviewing div.input,
div.reviewing div.note {
  display: none;
  }
div.reviewing div.block.paymentChosen div.lineItem.confirm div,
div.reviewing div.block div.paymentType div,
div.reviewing div.block div.unreview div {
  display: inline-block;
  }
div.reviewing div.block.paymentChosen div.lineItem.confirm,
div.reviewing div.block div.paymentType,
div.reviewing div.block div.unreview {
  display: block;
  padding-top: 0.5em;
  }
div.reviewing .review div.price {
  border-top: 1px solid black;
  padding-top: 0.5em;
  }
div.reviewing div.lineItem.priced div.price {
  text-align: left;
  display: flex;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  }
div.reviewing div.lineItem div.price > div {
  background-color: transparent;
  font-style: normal;
  }
div.reviewing div.lineItem div.linePriceNote {
  order: 1;
  }
div.reviewing div.lineItem div.lineAmount {
  order: 3;
  }
/* dot leaders - https://stackoverflow.com/questions/2508732/create-leading-dots-in-css */
div.reviewing div.lineItem div.price::after {
  background-image: radial-gradient(circle, currentcolor 1px, transparent 1.5px);
  background-position: bottom;
  background-size: 1ex 4.5px;
  background-repeat: space no-repeat;
  content: "";
  flex-grow: 1;
  height: 1em;
  order: 2;
  }

/* order complete */

div.complete div.block.paymentChosen div.lineItem.confirm,
div.complete div.block div.paymentType,
div.complete div.block div.unreview {
  display: none;
  }

div.complete#error {
  margin-top: 1em;
  }