@font-face {
  font-family: 'Dover Serif Text';
  src: url('/assets/dover-serif-text-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Dover Sans Text';
  src: url('/assets/dover-sans-text-regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Dover Sans Text';
  src: url('/assets/dover-sans-text-italic.woff2') format('woff2');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: 'Dover Sans Text';
  src: url('/assets/dover-sans-text-bold.woff2') format('woff2');
  font-weight: bold;
  font-style: normal;
}


* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #f4f5ec;
  background:
  radial-gradient(circle farthest-side at 0% 50%,#f4f5ec 23.5%,rgba(240,166,17,0) 0)21px 30px,
  radial-gradient(circle farthest-side at 0% 50%,#e1eeee 24%,rgba(240,166,17,0) 0)19px 30px,
  linear-gradient(#f4f5ec 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0) 85%,#f4f5ec 0)0 0,
  linear-gradient(150deg,#f4f5ec 24%,#e1eeee 0,#e1eeee 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#e1eeee 0,#e1eeee 76%,#f4f5ec 0)0 0,
  linear-gradient(30deg,#f4f5ec 24%,#e1eeee 0,#e1eeee 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#e1eeee 0,#e1eeee 76%,#f4f5ec 0)0 0,
  linear-gradient(90deg,#e1eeee 2%,#f4f5ec 0,#f4f5ec 98%,#e1eeee 0%)0 0 #f4f5ec;
  background-size: 40px 60px;
  color: #33313e;
  font-family: 'Dover Sans Text';
  font-size: 20px;
}

@media (max-width: 760px) {
  body {
    font-size: 16px;
  }
}

.container::after {
  clear: both;
  content: ' ';
  display: table;
}

header {
  background: #333;
  box-shadow: inset 0 -3px 4px rgba(0,0,0,.5);
  color: #fefefe;
  margin-bottom: 0;
}

h1 {
  background-image: url('/assets/logo-white.svg');
  background-position: 50% 50%;
  background-repeat: no-repeat;
  display: block;
  float: left;
  height: 80px;
  margin: .5rem 1rem .5rem .5rem;
  overflow: hidden;
  text-indent: 99rem;
  white-space: nowrap;
  width: 80px;
}

h2 {
  font-family: 'Dover Serif Text';
  font-feature-settings: "lnum" 1, "kern" 1, "calt" 1;
  font-size: 1.5rem;
  font-weight: normal;
  margin: 0 0 1rem;
  text-align: center;
}

p {
  margin: 0 0 1.5rem;
}

p a {
  color: inherit;
}

hr {
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1.5rem auto;
  width: 50%;
}

nav a {
  color: #fff;
  line-height: 90px;
  line-height: calc(80px + 1rem);
  padding: .5rem .25rem;
  text-decoration: none;
}

main {
  background: #fefefe;
  border: 6px double #e1eeee;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .05), 0 0 1px 1px rgba(0,0,0,.05);
  margin: -3rem auto 3rem;
  max-width: 42rem;
  padding: 1.25rem 1rem 1.5rem;
}

@media (max-width: 1200px) {
  main {
    margin-top: 1rem;
  }
}

@media (max-width: 42rem) {
  main {
    border-left: 0;
    border-right: 0;
  }
}

footer {
  font-size: 16px;
  text-align: center;
  color: rgba(0,0,0,.33);
  margin-bottom: 4rem;
}

footer a {
  color: inherit;
}


/* Form parts */

p.intro {
  margin-bottom: .75rem;
}

p.intro.error {
  background: rgb(255, 255, 191);
  border-radius: 6px;
  box-shadow: 0 1px 1px rgb(240, 224, 157);
  padding: .15rem .3rem;
}

p.intro.error::before {
  color: rgb(201, 91, 58);
  content: "☞";
  padding: 0 .4rem;
}

fieldset {
  border: 0;
}

.form-group {
  margin: 0 0 .5rem;
}

.form-group::after {
  display: table;
  clear: both;
}

label {
  cursor: pointer;
  display: inline-block;
  width: 120px;
}

input, button {
  font-family: 'Dover Sans Text';
  font-size: 1rem;
  border-radius: 8px;
  padding: .25rem .5rem;
}

input {
  border: 1px solid #333;
}

input[type="text"],
input[type="email"] {
  padding: 5px;
}

.button,
button.button {
  cursor: pointer;
  display: inline-block;
  background: #f6f6f6;
  border: 0;
  border-radius: .8rem;
  color: #333;
  float: right;
  margin: 1rem auto;
  padding: .5rem 1.2rem;
  text-decoration: none;
}

button.primary,
.button.primary {
  box-shadow: 0 1px 3px rgba(0,0,0,.1), inset 0 -1px 0 rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 5px rgba(0,0,0,.05);
  cursor: pointer;
  display: inline-block;
  background: #de4a4a;
  border: 0;
  border-radius: .8rem;
  color: #fff;
  float: right;
  margin: 1rem auto;
  padding: .5rem 1.2rem;
  text-decoration: none;
}

button + button {
  margin-left: 1rem;
}

.note {
  font-size: 16px;
  margin: 1.6rem 1.5rem 1rem 0;
  float: left;
  color: rgba(0,0,0,.5);
}

.note a {
  color: inherit;
}

button.primary:focus,
.button.primary:focus,
button.primary:hover,
.button.primary:hover {
  background: #c73737;
}

.error {
  background: rgba(219, 206, 89, .5);
  margin: 0 0 1rem;
  padding: 5px;
}

.form-verify label {
  color: #888;
  height: 2rem;
}

.verify-input {
  font-weight: normal;
}

div.verify-input {
  display: inline-block;
}


table {
  font-feature-settings: "kern" 1, "calt" 1, "tnum" 1, "lnum" 1, "frac" 1;
  border: 2px solid #eee;
  margin: 1rem 0 2rem;
  width: 100%;
}

.receipt-note {
  box-shadow: 1px 2px 4px rgba(0,0,0,.1);
  background: #f2f1e6;
  margin-bottom: 2rem;
  padding: 8px 6px 2px;
}

.receipt-note::after,
.receipt-note dl::after {
  clear: both;
  content: '';
  display: table;
}

.receipt-note dl {
  margin: 0;
}

.receipt-note dl dt {
  clear: left;
  float: left;
  width: 160px;
}

.receipt-note dl dd {
  font-family: 'Dover Serif Text';
  font-feature-settings: "lnum" 1, "kern" 1, "calt" 1;
  float: left;
  width: 280px;
  margin-bottom: .5rem;
}

table th,
table td {
  padding: 4px 4px 3px;
}

table th {
  text-align: left;
  font-weight: normal;
}

table thead th {
  border-bottom: 2px dotted #ddd;
  background: #f8f8f8;
}

table thead th:last-of-type,
table td:last-of-type {
  text-align: right;
}

table tfoot th,
table tfoot td {
  border-top: 2px dotted #eee;
  background: #fafafa;
}

table tbody tr:nth-of-type(even) td {
  background: #fafafa;
}

.receipt-list {
  list-style: none;
}

.receipt-list dd {
  padding-bottom: .5rem;
  padding-left: 1rem;
}

.receipt-list strong {
  font-family: 'Dover Sans Text';
  font-weight: bold;
}

.receipt-list dt,
.receipt-list details summary {
  font-family: 'Dover Serif Text';
  font-feature-settings: "lnum" 1, "tnum" 1, "kern" 1;
  padding: 5px 3px;
  margin: 0 auto 2px;
  cursor: pointer;
}

.receipt-list details summary:hover {
  background: rgba(255, 128, 128, .2);
}

.receipt-list details .order-mark {
  float: right;
}
.receipt-list details .trials {
  opacity: .8;
  font-size: .8em;
  margin-right: 4px;
  float: right;
  background: rgba(255, 192, 203, 0.639);
  font-family: 'Dover Sans Text';
  font-weight: bold;
  padding: 2px;
  width: 1.2rem;
  text-align: center;
  border-radius: 3px;
}

.receipt-list dd + dt {
  border-top: 2px dotted #eee;
  padding-top: .5rem;
}

.receipt-list summary::marker {
  font-family: 'Dover Sans Text' !important;
}

.receipt-list details:open summary {
  background: rgba(255, 128, 128, .3);
  border-bottom: 1px solid rgb(149, 110, 117);
  margin-bottom: .5rem;
}

details table {
  margin-bottom: 1em;
}