/* global stuff a la Vue/Bootstrap */
*, ::after, ::before {
    box-sizing: border-box;
}

html body {
  font-size: 1rem;
  font-weight: 400;
  background-color: white;
}

/* fonts; a little over-specific here to beat Vue/Bootstrap where it's used */
html, html body, .product-price, .shipping_range_table  {
  margin: 0px;
  font-family: 'Roboto Slab', Tahoma, Geneva, sans-serif;  /* 'Molengo' */
  color: #151515;
}

h1, h2.fancy, h3.fancy {
  font-family: 'Lobster', Tahoma, Geneva, sans-serif;
}

h2,h3,h4,h5,h6, #designonline, #explain, ul#mainmenu li.highlight a, body#checkout #logobar #headertext {
  font-family: 'Roboto', Tahoma, Geneva, sans-serif;  /* 'Molengo' */
}

/** content **/

h1 {
  font-size: 3em;
  font-weight: normal;
}

h3.fancy {
  font-size: 1.3em;
  margin-bottom: 0.4em;
}

h3.associated {
  margin-bottom: 0.2em;
}
h3.associated + p {
  margin-top: 0.2em;
}

.subtitled {
  margin-bottom: 0px;
}

.subtitle {
  font-size: 75%;
  margin-top: -0.2em;
  margin-bottom: 1.3em;
  margin-left: 1em;
}

a {
  color: #0233c6; /* #007bff; changed for higher contrast */
  text-decoration: underline dotted silver;
  background-color: transparent;
}
a:hover {
  text-decoration: underline;
}
a.specifyunderline, #headbar a.specifyunderline{
  text-decoration: none;
}
a:hover.specifyunderline .underline{
  text-decoration: underline;
}

a img {
  border: none;
}
a.plainlink {
  text-decoration: none !important;
}
a.plainlink:hover {
  text-decoration: underline !important;
}

address {
  margin-left: 2em;
  font-style: normal;
  font-weight: bold;
}

ul {
 list-style-type: square; 
}

p {
  line-height: 130%;
}

.blockcenter {
  display: block;
  margin-left: auto;
  margin-right: auto
}

.textcenter {
  text-align: center;
}

.right {
  text-align: right;
}

.left {
  text-align: left;
}

.reduced {
  font-size: 90%;
}

.small {
  font-size: 75%;
}

.x-small {
  font-size: 50%;
}

.tight {
  margin: 0px;
}

.hidden {
  display: none !important;
}

.softhidden {
  display: none;
}

.dim {
  color:#888;
}

.clear {
  clear: both;
}

.vert-space {
  height: 1em;
}

.hr {
  height: 0.5ex;
  background: #bbb;  /* for non-css3 browsers */     /* TODO: background-color? */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#aaaaaa', endColorstr='#eeeeee'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#eee)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #aaa,  #eee); /* for firefox 3.6+ */
}

.spaced {
   padding-top: 0.5em 
}

.nobreak {
  white-space: nowrap;
}

.flexcolumns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.flexcolumn {
  width: 90vw;
  max-width: 28rem;
  margin: 1rem;
}

/* http://devgrow.com/super-simple-css-buttons/ */
.button {
    padding: 5px 10px;
    display: inline;
    background: #bbb url(/resources/images/button.png) repeat-x bottom;
    border: none;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    text-shadow: 0.1px 0.1px #666;
    }
.button:hover {
    background-position: 0 -48px;
    }
.button:active {
    background-position: 0 top;
    position: relative;
    top: 1px;
    padding: 6px 10px 4px;
    }

.button.bmred { background-color: #d40000; }
.button.red { background-color: #e50000; }
.button.purple { background-color: #9400bf; }
.button.green { background-color: #58aa00; }
.button.orange { background-color: #ff9c00; }
.button.blue { background-color: #0F4AD6; }
.button.black { background-color: #333; }
.button.white { background-color: #fff; color: #000; text-shadow: 1px 1px #fff; }
.button.small { font-size: 75%; padding: 3px 7px; }
.button.small:hover { background-position: 0 -50px; }
.button.small:active { padding: 4px 7px 2px; background-position: 0 top; }
.button.x-small { font-size: 50%; padding: 1px 10px; }
.button.x-small:hover { background-position: 0 -54px; }
.button.x-small:active { padding: 1px 10px 1px; background-position: 0 top; }
.button.large { font-size: 125%; padding: 7px 12px; }
.button.large:hover { background-position: 0 -35px; }
.button.large:active { padding: 8px 12px 6px; background-position: 0 top; }
button[disabled].button, button[disabled].button:hover, button[disabled].button:active,
button.button:disabled, button.button:disabled:hover, button.button:disabled:active {
  background: #fff url(/resources/images/button.png) repeat-x bottom;
  color: #ccc; text-shadow: 1px 1px #fff;
  background-position: initial;
  top:0;
  /* padding: 5px 10px; */
  cursor: auto;
  cursor: not-allowed;
}
.button.large[disabled], .button.large[disabled]:hover, .button.large[disabled]:active { padding: 7px 12px; }
.button.small[disabled], .button.small[disabled]:hover, .button.small[disabled]:active { padding: 3px 7px; }

.simplebutton.blue {
  background-color: #0F4AD6;
  color:white;
  font-weight: bold;
}
.simplebutton[disabled].blue {
  background-color: #fff;
}

.error {
  border: thin dashed red;
  background-color: yellow;
  padding: 0.5em;
}

.pagelinks {
  position: relative;
  width: 100%;
  height: 0px;
  text-align: right;
}

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* spinner for loading 
   from https://www.w3docs.com/snippets/css/how-to-create-loading-spinner-with-css.html
*/
.spin {
  display: inline-block;
  /* color:#0F4AD6; */
  /* background-color: #333; */
  width: 50px;
  height: 50px;
  border: 3px solid silver;
  border-radius: 50%;
  border-top-color: #0F4AD6;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  to {
    -webkit-transform: rotate(360deg);
  }
}

/* Template layout */

.simpleforms form label {
  font-size: 1.3em;
}
.simpleforms form .control label {
  display: block;
}
.simpleforms form .control input {
  width: 15em;
/*   text-transform: lowercase; */  /*why?*/
}
.simpleforms form input.btn {
  width: auto;
  font-size: 1.3em;
  color: #333;
  background-color: white;
  border: 0.1em #aaa solid;
}
.simpleforms form input.btn:hover {
    background-color: #eee;
}
.simpleforms form input.btn:active {
    background-color: #fff;
}
.simpleforms form .control.submit {
  margin-top: 1em;
}
.simpleforms form div.error, .errorbox {
  margin-top: 1ex;
  padding-bottom: 1ex;
  border: medium orange solid;
  background-color: orange;
}
.simpleforms form p.description {
  margin: 0px;
}
.simpleforms form p.errortext {
  margin: 0px;
}

.simpleforms form .control .button {
  margin-top: 1em;
}


/** template structure **/

body {
  margin: 0px;
}

.constrained {
  width: 90%;
  max-width: 60rem;
  margin: 0px auto;
}
.constrained.extra {
  max-width: 36em;
}

#logobar {
  top:0;left:0;
  width:100%;
  text-align:center;
  vertical-align: top;
  margin-bottom: 0;
}
#logo {
  position:relative;
  top: 0.8rem;
  width: 50%;
  max-width: 300px;
  /* margin-left: 3rem;
  margin-right: 3rem; */
}

ul#mainmenu {
  display:inline-block;
  font-size: 1rem;
  margin-top: 1.2rem;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 0;
}
@media (min-width: 550px) {
  #logobar {
    padding-left: 3rem;
    padding-right: 3rem;
  }
  ul#mainmenu {
    font-size: 1.5rem;
    margin-bottom: 1.0rem;
  }
}
ul#mainmenu li {
  position: relative;
  display:inline;
  margin: 0px 0.3em;
}
ul#mainmenu li img.bg {
  display: none;
}
ul#mainmenu li.highlight img.bg {
  display: inline;
  position: absolute;
  left: 0px;
  width: 100%;
  top: 0px;
  height: 110%;
  z-index: -1;
}
ul#mainmenu li a {
  color: black;
  margin: 0.3em;
}
ul#mainmenu li.highlight a {
  color: white;
  text-decoration: none;
}
ul#mainmenu li.caps {
  margin-right: 0;
}
ul#mainmenu li.connect {
  margin: 0;
}
ul#mainmenu li.labels {
  margin-left: 0;
}


#messagebar {  
  background-color:#eee;
  font-size: small;
}
#messagebar p img {
  height:2em;
  vertical-align:middle;
  padding-right: 0.2rem;
}
#messagebar p {
  text-align: center;
  padding: 6px;
  margin: 0;
  margin-top:0.3em;
  padding-bottom: 0.3rem;
  line-height:0.9;
  font-size: 80%;
}
@media (min-width: 550px) {
  #messagebar {
    font-size: initial;
  }
}


#menu {
  position:absolute;
  top:0; left:0;
  margin: 5px;
}
#menu #hamburger {
  display:block;
  text-decoration: none;
}
#menu #hamburger .buns {
  cursor:pointer;
  margin: 0.4rem;
  width: 2rem;
  height: 1.75rem;
  border-top: .25rem solid gray;
  border-bottom: .25rem solid gray;
}
#menu #hamburger .buns .patty {
  height: 0.75rem;
  width: 100%;
  border-bottom: .25rem solid gray;
}
#menu #hamburger .icon {
  position: relative;
  height: 0;
  top: 0.5rem;
  left: 0.6rem;
}
#menu #hamburger .icon .bi {
  width: 2.5rem;
  height: 2.5rem;
}

#menu .inside {
  display:none;
}
#menu:hover .inside, #menu.active .inside {
  display:block;
  position: absolute;
  z-index:10;
  top: 12px;
  left: 12px;
  padding: 1rem;
  border: 2px #eee solid;
  background-color: white;
  
  animation: fadeIn ease-in 1;
	animation-fill-mode:forwards;
	animation-duration:0.1s;
}
#menu .inside div {
  margin: 1rem;
}
.underlay {
  display:none;
  position:fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  background-color: #5552;
}
.underlay.active {
  display:block;
}

#cartbar {
  position: absolute;
  top: 0; right: 0;
  text-align: right;
  margin:6px;
  margin-right: 10px;
}
#cartbar a:hover .simpleCart_quantity {
  text-decoration: underline;
}
#carttextlink {
  display: inline-block;
  font-size: 1.2rem;
  min-width: 44px;
  min-height: 44px;
  
}
#cartbar #boxlink {
  display:inline-block;
  text-align: center;
  width: 2.5em;
  min-width: 44px;
  min-height: 44px;
}
#cartbar #boxlink img {
  vertical-align:middle;
}
#cartbar #boxicon {
  height: 2.2rem;
}
#cartbar #closeicon {
  height: 1.5rem;
  /* position: relative; */
  margin-top: -0.2rem;
  margin-right: 0.2rem;
}


#headbar {
  color:white;
  margin: 0.5em 0px;
  padding: 1em;
  
  background: #777;  /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#999999'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#222), to(#999)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #222,  #999); /* for firefox 3.6+ */
}

#headbar h1 {
  margin: 0px;
  text-align: center;
}

#headbar a {
  text-decoration: underline;
  color:white;
}
#headbar a:active {
  color:silver;
}

.vertspacer {
  height: 6em;
}

#footbar {
  clear: both;
  border-top: 0.5em #ddd solid;
  padding: 0px 0px 2em 0px;;
  background: #eee;
  text-align: center;
}

#footbar .social img {
  width:3em;
}

/** inside cart */

/* main cart box */
#cartDisplay {
  display: block;
  max-width:45rem;
  width: 90vw;
  position:absolute;
  top:2rem; right:0;
  text-align: left;
  background-color: white;
  border: 1px solid gray;
  z-index:9999;
  
  padding: 0.5em;
  border-radius: 4px;
  box-shadow: 0.2em 0.2em 0.1em #aaaaaa;
}

/* cart row styling */
#cartDisplay .headerRow {
 /* display:none; */
  font-size: small;
  font-weight: bold;
  padding-bottom: 0.3rem;
  margin-bottom: 0;
  border-bottom: thin solid #dfdfdf;
}
#cartDisplay .headerRow .item-name {
  display: none;
}
/* #cartDisplay .itemRow {
} */
#cartDisplay #cartData .itemRow {
  padding-bottom: 0.7rem;
  margin-top: 0.3rem;
  padding-bottom: 0.3rem;
  border-bottom: thin solid #dfdfdf;
}
/*#cartDisplay .itemRow.even {
  background-color: #eee;
}*/

#cartSummary {
  padding-top: 0.7em;
  padding-bottom: 1.7em;
}

/* cart layout: row containers */
#cartDisplay .headerRow, #cartDisplay .itemRow  {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* #cartDisplay .itemRow div, .headerRow div {
  display: inline-block;
   *zoom: 1;
   *display: inline;
  vertical-align: middle;  
} */

/* cart layout columns */
#cartDisplay .item-image, #cartDisplay .item-custom {
  width:3.6rem;
  flex-shrink: 0;
}
#cartDisplay .item-image img {
  width: 3rem;
}
#cartDisplay iframe.item-design {
  width: 4rem;
  height: 3.3rem;
  outline: none;
  display: block;
  border: none;
  margin: 0;
  padding: 0;
  overflow: none;
}
#cartDisplay .item-design img {
  width: 100%;
}

#cartDisplay .item-fake {
  width:0;
  flex-grow: 1;
  flex-shrink: 1;
}

#cartDisplay .item-name {
  width:26em;
  flex-grow: 1;
  flex-shrink: 1;
  
  text-align: left;
  /* white-space: nowrap; */
  overflow: hidden;
  text-overflow: ellipsis;
  /* max-width: 27em;
  float:left;*/
}
#cartDisplay .item-name.right {
  text-align: right;
}
#cartDisplay #cartSummary .item-name {
  width:auto;
}
@media (max-width: 47rem) {
  #cartDisplay .item-name {
    order: -1;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }
}


#cartDisplay .item-price {
  width: 3.8rem;  
  flex-shrink: 0;
}

#cartDisplay .item-quantity {
  width: 3.0rem;
  text-align: right;
  padding-right: 0.6rem;
  flex-shrink: 0;
}
#cartDisplay .item-quantity input {
  width: 2.7rem;
  text-align: right;
}
#cartDisplay #cartSummary .item-quantity {
  padding-right: 0;
}

#cartDisplay .item-total {
  text-align: right;
  margin-right: 0.3rem;
  width: 4.5rem;
  flex-shrink: 0;
}

#cartDisplay .item-remove {
  width: 0.5rem;
  flex-shrink: 0;
}


/* shipping choices */
.cartOptions {
 padding-top: 0.3em;
 padding-bottom: 0.3em;
}

#cartCountry {
  /* width: 95%; */
  max-width: 99%;
}

.cartOptionsStateChoose, .cartOptionsPostalcodeChoose {
  padding-left: 0.5em;
}

#cartOptionsShippingChoose {
  float: right;
  clear:both;
  text-align: right;
  padding-right:0.1em;
}

.cartOptionsBackState, .cartOptionsBackPostalcode {
  padding-left: 0.5em;
}

#cartTotal {
  padding-top: 1em;  
}
#cartTotal div {
  padding-right:0.6em;
}
#cartTotal .label {
  padding-right:1.6em;
}
#cartTotal .amount {
  display: inline-block;
  /* IE7 */
   /* *zoom: 1; 
   *display: inline; */
  width: 5em;
}

#cartinnercheckout {
  margin:1rem;
}

#cartShipping {
  text-align: right;
  font-size: 90%;
}

.cartColumns .cartColumnLabel {
  position: relative;
  left: 21em;
  width: 3.7em;
}

.cartColumns .cartColumnQty {
  position: relative;
  left: 23.6em;
  width: 2em;
}

.cartColumns .cartColumnTotal {
  position: relative;
  left: 25.6em;
  width: 3em;
}

/* custom item display iframe in cart */
.orderdesign {
  margin-top: 0.5em;
}

.capinfo, .detailinfo, .orderdesign {
  display:none;
}

/** Specific pages **/

/* shop: item & category */

#headbar .cookiecrumbs, #headbar .description {
  display: block;
  width: 100%;
}

.product-price {
  color: maroon;
  font-weight: bold
}

.product-price.sale {
  color: red;
}

.sale_icon {
  height: 1.2em;
}


/* price box */

#pricebox, .pricebox {
  max-width: 20rem;
  width: 90%;
  border: thin #ddd solid;
  padding: 1rem;
  margin: 1rem;
  margin-left: auto;
  margin-right: auto;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
@media (min-width: 550px) {
  #pricebox, .pricebox {
    float:right;
    margin-left: 1rem;
  }
}

#pricebox > div {
  padding-bottom: 1ex;
}
#pricebox #quantity, .product .item_Quantity, .orderquantity {
  width: 2.5em;
}

.item_sale img.sale {
  height: 1.5em;
}
#pricebox div.item_sale {
  padding-bottom: 0;
}

#infoarea img#itemimg {
  vertical-align: top;
  padding-right: 1em;
  padding-bottom: 1em;
  float: left;
  width: 12rem;
  max-width: 33%;
}

#infoarea .product-image {
 width: 12em;   
}

#infoarea {
  padding-top: 0.5em;
}

/* customized cap display */

#designthumbs {
  overflow: auto;
  height: 20em;
}

.designthumb {
  height: 9em;
  width: 8em;
  padding: 5px;  /* px no so great, but em is apparently not stable enough */
  margin: 0.5em;
}
.designthumb:hover {
  cursor: pointer;
}
.preview .designthumb:hover {
  cursor: auto;
}
.designthumb.selected {
  background: #fff;
  border: 3px gold solid;
  padding: 2px;
}
.designthumb h3 {
  font-size: 0.7em;
  margin: 0px;
  margin-bottom: 0.2em;
}

.smallcap {
  width: 8em;
  height: 8em;
  position: relative;
  overflow: hidden;
}
.smallcap img {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
}

/* registration_code */

/* input#code, input#email, input#pw, input#pw2 {
   width: 36ex !important; 
} */

/* registration_pw */
#headbar form div#pass1 {
  margin-top: 1em;
}
#headbar form div#regpwsubmit {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* shipping */
.shipping_range_table {
  text-align: center;
  white-space: nowrap;
  padding-left: 3em;
}

/* design page */

#designresources h3 {
  margin-top:3em;
  border-bottom: thin solid red;
}

.samplecap {
  width: 10em;
}

.templateimg {
  clear: left;  
  padding-top: 1.0em;
}

.templateimg img {
  width: 4em;
  float: left;
  padding-right: 0.8em;
  padding-bottom: 0.5em;
}

/* recapping */
#recap-einstein {
  width: 4em;
  float: left;
  padding-right: 0.5em;
}

table#recap-results {
 width: 18em;
 margin-left: 4em;
}
table#recap-results, table#recap-results th, table#recap-results td {
  border: thin black solid;
}  
table#recap-results th, table#recap-results td {
  padding: 0.3em;
}

.captioned {
 float: left;
 text-align: center;
 margin: 1em;
}
.captioned p {
 margin-top: 0; 
 font-size: small;
}

#recap-day7 {
 height: 10em;
}

#recap-day14 {
  height: 10em;
}

/* checkout */

ul.plainlist {
  list-style-type: none;
  padding-left: 0;
}

body#checkout #logobar {
  margin:auto;
  width:100%;
  margin-bottom: 1rem;
}

/* body#checkout #logobar #logo {
} */

body#checkout #headbar {
  padding-left: 0;
  padding-right: 0;
}
body#checkout #headbar h1 {
  text-align: left;
  size: 50%;
}

/* common checkout map */

#headbar > .constrained {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
}

.checkoutmap {
  flex-grow: 1;
  width: 16%;
  min-width: 5rem;
  border: none;
  padding: 0.5em;
  margin: 0;
}

#headbar .checkoutmap a {
  text-decoration: none;
}
#headbar .checkoutmap a:hover {
  text-decoration: underline;
}

.checkoutmap.selected {
  border: thin white solid;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  background-color: #7d7d7d;
/*   color: black; */
}

.checkoutmap .checkoutmapstep {
  font-size: x-small;
  font-weight: bold;
  color: #AAAAAA;
  padding-left: 0;
}

.checkoutmap .checkoutmaplabel {
  font-family: Lobster;
/*   font-variant:small-caps; */
  font-weight: bold;
  padding-left: 0.5em;
}

.checkoutmap.clickable {
  cursor: pointer;
}
.checkoutmap.clickable .checkoutmaplabel {
  text-decoration: underline;
}


/* common checkout/manage */

table.ordersummary {
  border: 0px;
  border-collapse:collapse;
  border-bottom: thin solid silver;
  width: 60%;
}

table.ordersummary tr.ordersummaryheader td {
  font-weight: bold;
  font-size: small;
  color: silver;
  padding-bottom: 0px;
}

table.ordersummary td {
  color: #333;
  width: 12%;
  padding-top: 0px;
}

#checkoutItems .designthumb h3, #checkoutItems .designthumb .x-small {
    display: none;
}

.checkoutSummary {
  display: inline-block;
  vertical-align:top;
  width: 90%;
  max-width: 19rem;
  padding-bottom: 1em;
}

.checkoutSummary > div {
  margin-top: 1em;
}

#checkoutItems {
  width: 100%;
}

#checkoutItems .productlisting {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;

  border-bottom: thin #ddd solid;
}

#checkoutItems .productlisting.head {
  border-bottom: medium #ccc solid;
  padding-left: 0.3em;
  color: grey;
  font-size: small;
  padding-top: 0.5rem;
}

#checkoutItems .productlisting.head .name {
  text-align: left;
}

#checkoutItems .productlisting.item {
  min-height: 100px;
  padding-top: 3px;
  padding-bottom: 3px;
}

#checkoutItems .productlisting.sums.subtotal {
  padding-top: 0.6rem;
  border-top: medium #ccc solid;
  border-bottom: none;
}

#checkoutItems .productlisting .preview {
  width:8rem;
  flex-grow: 0;
  flex-shrink: 0;
  padding: 0.2em;
}

#checkoutItems .productlisting .preview .simple {
  width: 100%;
  padding-top:auto;
  padding-bottom:auto;
  padding-left: 0.4em;
  padding-right: 0.4em;
}

#checkoutItems .designthumb {
  margin:0;
  padding:0;
  height: 8rem;
  width: 8rem;
}

#checkoutItems .designthumb h3, #checkoutItems .designthumb .x-small {
  display:none;
}

#checkoutItems .productlisting > span {
  flex-grow: 0;
  flex-shrink: 0;
  padding-left:0.6rem;
}

#checkoutItems .productlisting .name {
  flex-grow: 1;
  flex-shrink: 1;
  width: 20rem;
}
@media (max-width: 30rem) {
  #checkoutItems .productlisting .name {
    order: -1;
  }    
  #checkoutItems .productlisting.item .name {
    padding-top: 1rem;
    font-weight: bold;
  }    
  #checkoutItems .productlisting.head .name {
    display: none;
  }    
}

#checkoutItems .productlisting .space {
  width: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

#checkoutItems .productlisting .each {
  width: 3.5rem;
  text-align: right;
}

#checkoutItems .productlisting .qty {
  width: 2.5rem;
  text-align: right;
}

#checkoutItems .productlisting .subtotal {
  width: 4.2rem;
  text-align: right;
}

/* summary lines */

  #checkoutItems .productlisting.sums {
  flex-wrap: nowrap;
  justify-content: flex-end;
  border-bottom: none;
  padding-top: 0.3rem;
}
#checkoutItems .productlisting.sums .preview,
#checkoutItems .productlisting.sums .name,
#checkoutItems .productlisting.sums .each {
  width: 0;
}
#checkoutItems .productlisting.sums .qty {
  flex-grow:1;
  width: 15rem;
}
#checkoutItems .productlisting.sums .subtotal {
  width: 5rem;
}

/* #checkoutItems .productlisting.sums.subtotal {
} */
#checkoutItems .productlisting.sums.subtotal .name {
  width: 10em;
  flex-grow: 1;
  text-align: left;
  padding-left: 0.5em;
}
#checkoutItems .productlisting.sums.subtotal .qty {
  width: 6rem;
}


/* Deal with Vue wanting to set things globally, but everything is already 
 * spaced based on default settings. Ideally we'd just deal with these 
 * everywhere, but that'll have to wait for a restyle.
 */
 #logobar img {
   vertical-align: initial;
 }

 html body {
   line-height: 1.15;
 }