.subtitle { display: block; font-style: italic; }
table .header { color: white; background-color: black; }

.blocks { display: flex; flex-wrap: wrap; justify-content: space-around; }
.pageblock { width: 650px; float: left; display: block; margin: 10px 0; }
.pageblock table { border-collapse: collapse; border: 1px solid black; }
.pageblock td { border: 1px solid black; overflow: hidden; }

table .name { width: 400px; }
table .price { width: 60px; text-align: center; }
table td.price::before { content: "$"; }
table .sku { width: 70px; text-align: center; }
table .month { width: 70px; text-align: center; }
table .quantity { width: 20px; text-align: center; }

#form { margin: auto; width: 100%; text-align: center; margin-top: 10px; }
#form .fields { line-height: 1.5; text-align: left; display: inline-block; }
#form .field_name { width: 200px; display: inline-block; text-align: right; }

#form .field_input { text-align: center; display: block; }
#form .field_name + .field_input { text-align: left; display: inline-block; }

input.touched:required:invalid, input.touched:focus:invalid {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAeVJREFUeNqkU01oE1EQ/mazSTdRmqSxLVSJVKU9RYoHD8WfHr16kh5EFA8eSy6hXrwUPBSKZ6E9V1CU4tGf0DZWDEQrGkhprRDbCvlpavan3ezu+LLSUnADLZnHwHvzmJlvvpkhZkY7IqFNaTuAfPhhP/8Uo87SGSaDsP27hgYM/lUpy6lHdqsAtM+BPfvqKp3ufYKwcgmWCug6oKmrrG3PoaqngWjdd/922hOBs5C/jJA6x7AiUt8VYVUAVQXXShfIqCYRMZO8/N1N+B8H1sOUwivpSUSVCJ2MAjtVwBAIdv+AQkHQqbOgc+fBvorjyQENDcch16/BtkQdAlC4E6jrYHGgGU18Io3gmhzJuwub6/fQJYNi/YBpCifhbDaAPXFvCBVxXbvfbNGFeN8DkjogWAd8DljV3KRutcEAeHMN/HXZ4p9bhncJHCyhNx52R0Kv/XNuQvYBnM+CP7xddXL5KaJw0TMAF8qjnMvegeK/SLHubhpKDKIrJDlvXoMX3y9xcSMZyBQ+tpyk5hzsa2Ns7LGdfWdbL6fZvHn92d7dgROH/730YBLtiZmEdGPkFnhX4kxmjVe2xgPfCtrRd6GHRtEh9zsL8xVe+pwSzj+OtwvletZZ/wLeKD71L+ZeHHWZ/gowABkp7AwwnEjFAAAAAElFTkSuQmCC);
  background-position: right top; background-repeat: no-repeat; -moz-box-shadow: none;
}
input.touched:required:valid {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAepJREFUeNrEk79PFEEUx9/uDDd7v/AAQQnEQokmJCRGwc7/QeM/YGVxsZJQYI/EhCChICYmUJigNBSGzobQaI5SaYRw6imne0d2D/bYmZ3dGd+YQKEHYiyc5GUyb3Y+77vfeWNpreFfhvXfAWAAJtbKi7dff1rWK9vPHx3mThP2Iaipk5EzTg8Qmru38H7izmkFHAF4WH1R52654PR0Oamzj2dKxYt/Bbg1OPZuY3d9aU82VGem/5LtnJscLxWzfzRxaWNqWJP0XUadIbSzu5DuvUJpzq7sfYBKsP1GJeLB+PWpt8cCXm4+2+zLXx4guKiLXWA2Nc5ChOuacMEPv20FkT+dIawyenVi5VcAbcigWzXLeNiDRCdwId0LFm5IUMBIBgrp8wOEsFlfeCGm23/zoBZWn9a4C314A1nCoM1OAVccuGyCkPs/P+pIdVIOkG9pIh6YlyqCrwhRKD3GygK9PUBImIQQxRi4b2O+JcCLg8+e8NZiLVEygwCrWpYF0jQJziYU/ho2TUuCPTn8hHcQNuZy1/94sAMOzQHDeqaij7Cd8Dt8CatGhX3iWxgtFW/m29pnUjR7TSQcRCIAVW1FSr6KAVYdi+5Pj8yunviYHq7f72po3Y9dbi7CxzDO1+duzCXH9cEPAQYAhJELY/AqBtwAAAAASUVORK5CYII=);
  background-position: right top; background-repeat: no-repeat;
}  

body { width: fit-content; }
body > .header { text-align: center; margin: auto; }
body > .header:after { clear: both; }
body > .header div { margin: auto; max-width: 60%; }

.logo { width: 500px; max-width: 75%; }
select.stores optgroup { font-weight: bold; font-size: 110%; color: white; background-color: black; }
select.stores optgroup option{ font-size: 100%; color: black; background-color: white; }
select.stores option.default { font-style: italic; }
select.stores{ font-size: 20px; margin-bottom: 20px; }

#quantityOrdered { position: fixed; bottom: 60px; top: auto; right: 0; color: #FFF; background-color: #37373a; display: none; width: 50%; min-width: 200px; max-width: 100%; margin: 5px; border-radius: 10px; padding: 5px; }
#quantityOrdered.top { top: 30px; bottom: auto; }
#quantityOrdered input { float: right; right: 5; bottom: 2; }
#quantityOrdered .products span { display: block; }
#quantityOrdered .products { display: block; }
#quantityOrdered .menu { float: right; background:url('images/minimize-maximize.jpg') -32px 0; background-repeat: no-repeat; height: 30px; width: 32px; }
#quantityOrdered.minimized { width: 25%;  }
#quantityOrdered.minimized  .products { display: none; }

.quantity .amount { cursor: pointer; }
.quantity .buttons { margin: auto; position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 200px; max-width: 80%; width: 33%; border: 2px solid black; padding: 20px; background-color: white; border-radius: 10px; }
.quantity .buttons button { margin: 10px; padding: 10px; }

.tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; padding: 5px 0; border-radius: 6px; position: absolute; z-index: 1; }
.tooltip:hover .tooltiptext { visibility: visible; }

.error { color: red; }
.error span { display: block; }
.success { color: green; }

@media only screen and (max-width: 850px){
    .pageblock { width: 100%; float: none; }
    .blocks { display: block; width: 100%; }
    #form {width: 100%; text-align: left; margin-top: 10px; }
    #form .fields { text-align: left; display: block; }
    #form .field_name { width: auto; display: block; text-align: left; }
    #form .field_input { text-align: left; display: block; }
    #quantityOrdered { width: 90%; margin: 5px 4%; }
    body > .header div { max-width: 95%; }
}


#searcher { position: fixed; bottom: 20px; top: auto; left: 0; background-color: #37373a; color: #FFF; min-width: 200px; max-width: 100%; margin: 5px; border-radius: 10px; padding: 5px; }
#searcher.top { top: 0; bottom: auto; }
#searcher input { width: 200px; }
#searcher #noresults { display: none; color: #F88; padding: 5px; }

.searchHide { display: none; }

#server-results { font-size: 36px; }