* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: #ffffff;
  color: #000000;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 12px;
}

a {
  color: #0000cc;
  text-decoration: underline;
}
a:visited { color: #551a8b; }
a:hover { color: #cc0000; }

#header {
  background: #003366;
  color: #ffffff;
  padding: 8px 12px;
  border-bottom: 3px solid #001a33;
}
#logo {
  font-size: 20px;
  font-weight: bold;
  margin-right: 10px;
}
#tagline {
  font-size: 11px;
  color: #cfe0f0;
}
#freshness {
  font-size: 10px;
  color: #cfe0f0;
}

#controls {
  background: #eeeeee;
  border-bottom: 1px solid #999999;
  padding: 6px 12px;
  font-size: 12px;
}
#controls input[type="text"] {
  font-family: inherit;
  font-size: 12px;
  padding: 2px 4px;
  width: 220px;
}
#controls select {
  font-family: inherit;
  font-size: 12px;
}

#results {
  padding: 8px 12px 0 12px;
}
#results h2 {
  font-size: 16px;
  margin: 4px 0 8px 0;
}

#formatFilter {
  font-size: 12px;
  margin-bottom: 8px;
}
#formatFilter button.active-filter {
  font-weight: bold;
  text-decoration: none;
  color: #000000;
}

table.pep {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 14px;
}
table.pep caption {
  text-align: left;
  font-weight: bold;
  font-size: 13px;
  background: #dbe7f3;
  border: 1px solid #99b8d6;
  padding: 3px 6px;
  caption-side: top;
}
table.pep th {
  background: #f0f0f0;
  border: 1px solid #cccccc;
  padding: 3px 6px;
  text-align: left;
  font-size: 11px;
  white-space: nowrap;
}
table.pep td {
  border: 1px solid #dddddd;
  padding: 3px 6px;
  vertical-align: top;
}
table.pep tr.odd { background: #ffffff; }
table.pep tr.even { background: #f7f7f7; }
table.pep tr.best td { background: #eaffea; }
table.pep tr.oos td { color: #999999; }

.tag {
  display: inline-block;
  font-size: 10px;
  padding: 0px 4px;
  border: 1px solid #999999;
  margin-right: 3px;
  background: #ffffff;
  white-space: nowrap;
}
.tag.usa { border-color: #2a7a2a; color: #2a7a2a; }
.tag.intl { border-color: #a06a00; color: #a06a00; }
.tag.coa { border-color: #9a7200; color: #6b4f00; background: #fff6db; font-weight: bold; }
.tag.nocoa { border-color: #999999; color: #999999; }
.tag.best { border-color: #2a7a2a; background: #2a7a2a; color: #ffffff; }
.tag.oos { border-color: #cc0000; color: #cc0000; }
.tag.from { border-color: #a06a00; color: #a06a00; }
.tag.discovered { border: 1px dashed #b35c00; color: #b35c00; background: #fff3e6; }
.tag.format { border-color: #4a4a8a; color: #4a4a8a; background: #f0f0fa; }
.tag.trustpilot-active { border-color: #00753c; color: #00753c; background: #e9fbf1; font-weight: bold; }
.tag.trustpilot-removed { border-color: #999999; color: #999999; }

.pricecell { font-weight: bold; white-space: nowrap; }
a.buylink { font-weight: bold; white-space: nowrap; }
#logo a { color: #ffffff; text-decoration: none; }
#logo a:visited { color: #ffffff; }
.permg { color: #555555; font-size: 11px; }

button.linklike, a.linklike {
  background: none;
  border: none;
  color: #0000cc;
  text-decoration: underline;
  cursor: pointer;
  font-size: 11px;
  padding: 0;
  font-family: inherit;
}

#vendorPanel {
  margin: 10px 12px;
  padding: 8px;
  border: 1px solid #999999;
  background: #f7f7f7;
}
#vendorPanel h3 {
  margin: 0 0 6px 0;
  font-size: 13px;
}
.vendorRow {
  padding: 4px 0;
  border-bottom: 1px dotted #cccccc;
}
.vendorRow:last-child { border-bottom: none; }
.vendorNote { color: #555555; }

#footer {
  padding: 10px 12px 20px 12px;
  font-size: 11px;
  color: #555555;
  border-top: 1px solid #cccccc;
  margin-top: 10px;
}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 60px;
}
.modal.hidden { display: none; }
.modal-box {
  background: #ffffff;
  border: 2px solid #003366;
  padding: 12px 16px;
  max-width: 520px;
  width: 90%;
  max-height: 70vh;
  overflow-y: auto;
}
.modal-close { float: right; font-size: 11px; }
.modal-box h3 { margin-top: 0; }
.redditPost { padding: 6px 0; border-bottom: 1px dotted #cccccc; font-size: 11px; }
.redditPost:last-child { border-bottom: none; }
.redditMeta { color: #777777; }

.empty { padding: 20px; color: #777777; }