/* roboto-regular - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/roboto-v20-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: url('/fonts/roboto-v20-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v20-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v20-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v20-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v20-latin-ext_latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-500 - latin-ext_latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/roboto-v20-latin-ext_latin-500.eot'); /* IE9 Compat Modes */
  src: url('/fonts/roboto-v20-latin-ext_latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-v20-latin-ext_latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-v20-latin-ext_latin-500.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-v20-latin-ext_latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-v20-latin-ext_latin-500.svg#Roboto') format('svg'); /* Legacy iOS */
}

/* roboto-slab-500 - latin */
@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/roboto-slab-v11-latin-500.eot'); /* IE9 Compat Modes */
  src: url('/fonts/roboto-slab-v11-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/roboto-slab-v11-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/roboto-slab-v11-latin-500.woff') format('woff'), /* Modern Browsers */
       url('/fonts/roboto-slab-v11-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/roboto-slab-v11-latin-500.svg#RobotoSlab') format('svg'); /* Legacy iOS */
}

/* ubuntu-mono-regular - latin-ext_latin */
@font-face {
  font-family: 'Ubuntu Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/ubuntu-mono-v10-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
  src: url('/fonts/ubuntu-mono-v10-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/ubuntu-mono-v10-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/ubuntu-mono-v10-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
       url('/fonts/ubuntu-mono-v10-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/ubuntu-mono-v10-latin-ext_latin-regular.svg#UbuntuMono') format('svg'); /* Legacy iOS */
}

:root {
  --color-bg: #FFF;
  --color-bg-alt: #F9F9F9;
  --color-fg: #444;
  --color-primary: rgb(33.33% 33.33% 33.33%); /*lch(36.146% 0.007 254.884), #555*/
  --color-accent: rgb(21.96% 45.77% 90.66%); /*lch(50% 66 280)*/
  --color-highlight: rgb(99.77% 99.03% 71.48%); /*lch(98% 35 102)*/
  --color-highlight-alt: rgb(98.63% 97.89% 70.4%); /*lch(97% 35 102)*/
  --color-border: #DDD;
  --color-shadow: #0003;
}

* {
  box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6, th, b, strong {
  font-weight: 500;
}
h1, h2, h3, h4, p, input, textarea, button {
  margin: 0;
  padding: 0;
}
input, textarea, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
}

h1 {
  font-size: 2.2em;
}
h1.maybeLong {
  font-size: 2em;
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
h2 {
  font-size: 1.4em;
}
h3 {
  font-size: 1.2em;
}
h4 {
  font-size: 1em;
}

a {
  text-decoration: none;
}
a:link,
a:visited {
  color: var(--color-accent);
}
a:hover:not(.disabled),
a:active:not(.disabled) {
  text-decoration: underline;
}

a.disabled {
  pointer-events: none;

  color: var(--color-border)
}

a.greyLink:link,
a.greyLink:visited {
    color: unset;
}
a.greyLink:hover,
a.greyLink:active {
    text-decoration: none;
    color: var(--color-accent);
}

a.buttonLike {
  display: block;

  padding: 10px;

  background-color: white;
  border: 1px solid var(--color-border);
  border-radius: 5px;

  color: var(--color-fg);
  text-align: center;
  line-height: 1.15;
}
a.buttonLike:link,
a.buttonLike:visited {
  color: var(--color-fg);
}
a.buttonLike:hover,
a.buttonLike:active {
  background-color: white;

  color: var(--color-primary);
  text-decoration: none;
}

a.mainButton {
  display: block;

  padding: 10px;

  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 5px;

  color: white;
  font-weight: bold;
  text-align: center;
}
a.mainButton:link,
a.mainButton:visited {
  color: white;
}
a.mainButton:hover,
a.mainButton:active {
  background-color: white;

  color: var(--color-primary);
  text-decoration: none;
}

input,
textarea,
button {
  padding: 10px;

  border: 1px solid var(--color-border);
  border-radius: 5px;

  color: var(--color-fg);
}
input,
textarea {
  background-color: white;
  box-shadow: inset 0px 1px 3px var(--color-shadow);
}
button {
  background-color: var(--color-bg);

  text-align: center;
}
button:hover,
button:active {
  background-color: white;
  color: var(--color-primary);

  cursor: pointer;
}
button.mainButton {
  background-color: var(--color-primary);
  border: 1px solid var(--color-primary);

  color: white;
  font-weight: bold;
}
button.mainButton:hover,
button.mainButton:active {
  background-color: white;

  color: var(--color-primary);
}
input[type="checkbox"] {
  position: relative;
  top: 0.2rem;

  width: 1.2rem;
  height: 1.2rem;

  line-height: 1;

  color: #0078E7;
}
input[type="checkbox"]::before {
  content: "✔";

  position: absolute;
  top: 0.1rem;
  left: 0.2rem;

  visibility: hidden;
}
input[type="checkbox"]:checked::before {
  visibility: visible;
}

.expander {
  cursor: pointer;
}
.expander > button,
.expander > button:hover,
.expander > button:active {
  padding: 0;

  background-color: unset;
  border: none;
}

textarea {
  height: 150px;
  resize: vertical;
}

svg.icon {
  display: block;

  width: 1.4em;
  height: 1.4em;
}
svg.icon.floatLeft {
  float: left;

  margin-right: 5px;
}
svg.icon.inline {
  display: inline;
  vertical-align: -10%;

  width: 1em;
  height: 1em;
  margin-left: 1px;
  margin-right: 1px;
}
svg.icon.inline.withMarginLeft {
  margin-left: 5px;
}

code {
  padding: 0 3px;

  background-color: white;
  border: 1px solid var(--color-border);
  border-radius: 3px;

  font-family: 'Ubuntu Mono', monospace;

  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
code.block {
  display: block;

  padding: 10px;

  border-radius: 5px;
}

.mono {
  font-family: 'Ubuntu Mono', monospace;
}

table {
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  /*border-collapse: collapse;*/
  border-spacing: 0;
  background-color: white;
}
table th,
table td {
  padding: 5px;

  text-align: left;
  vertical-align: top;
}
table th.alignRight,
table td.alignRight {
  text-align: right;
}
table td {
  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}

table.responsive {
  width: 100%;
}
table.responsive tbody tr:nth-child(odd) td {
  background-color: var(--color-bg-alt);
}
table.responsive tbody tr td.highlight {
  background-color: var(--color-highlight);
}
table.responsive tbody tr:nth-child(odd) td.highlight {
  background-color: var(--color-highlight-alt);
}

table.keyValue td:first-child {
  width: max-content;

  text-align: right;
  overflow-wrap: normal;
  white-space: nowrap;
}

ul.lineList {
  display: inline-flex;
  flex-direction: column;

  list-style: none;

  margin: 0;
  padding: 5px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: white;
}
ul.lineList li {
  padding: 5px;

  overflow-wrap: break-word;
  overflow-wrap: anywhere;
}
ul.lineList li:nth-child(odd) {
  background-color: var(--color-bg-alt);
}

ul.linkBar {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  list-style: none;

  margin: 0;
  padding: 0;
}
ul.linkBar li {
  flex-shrink: 0;
}
ul.linkBar li a,
ul.linkBar li form button {
  display: block;

  padding: 10px;

  text-align: center;
}
ul.linkBar li:not(:last-child) a.buttonLike,
ul.linkBar li:not(:last-child) form {
  margin-right: 5px;
}

.linkRow {
  display: flex;
  justify-content: center;
}
.linkRow > a {
  padding: 10px;
}

form.buttonBar {
  display: flex;
  justify-content: center;
}
form.buttonBar button:not(:last-child) {
  margin-right: 5px;
}

.blockHeader {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  width: 100%;
}
.blockHeader > *:not(:last-child):not(.spacer) {
  margin-right: 5px;
}

.bigNumbers {
  display: flex;
  flex-wrap: wrap;

  padding: 10px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background-color: white;
}
.bigNumbers .bigNumberBox {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  align-items: center;

  width: 140px;
  min-width: min-content;
  padding: 10px;
}
.bigNumbers .bigNumberBox .bigNumber {
  margin-bottom: 10px;

  font-size: 2em;
}
.bigNumbers .bigNumberBox .bigNumberDescription {
  max-width: min(180px, 25vw);

  text-align: center;
}

.spacer {
  flex-grow: 1;

  padding: 0;
  margin: 0;
}

.hidden {
  display: none !important;
}
.invisible {
  visibility: hidden !important;
}

html {
  width: 100%;
  height: 100%;

  scroll-behavior: smooth;
}
body {
  display: inline-flex;
  flex-direction: column;

  min-width: 300px;
  width: 100%;
  min-height: 100%;

  background-color: var(--color-bg);

  color: var(--color-fg);
  font-size: 16px;
  font-family: 'Roboto', Arial, sans-serif;
  line-height: 1.4;
}

.contentWrapper {
  display: flex;
  flex-direction: column;

  min-height: 100vh;

  color: var(--fg-color);
}

header {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 0 20px;
  border-bottom: 1px solid var(--color-border);

  background-color: var(--color-bg-alt);
}
header nav.inlineMenu {
  display: flex;
}
header nav.mobileMenu {
  display: none;
  flex-wrap: wrap;

  width: 100%;
  max-width: 1200px;
}
header nav.mobileMenu > * {
  flex-shrink: 0;
  flex-grow: 1;
  flex-basis: 0;
}
header nav.subMenu {
  display: flex;
  flex-wrap: wrap;

  width: 100%;
  max-width: 1200px;
}
header svg.icon {
  align-self: center;
}
header a {
  flex-shrink: 0;
}
header a.greyLink {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 15px;
}
header a.greyLink.selected {
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 13px;
}
header a.logo {
  padding-top: 5px;
  padding-bottom: 5px;
}
header a.logo h2 {
  font-family: 'Ubuntu Mono', monospace;
  font-weight: 400;
}
header .headerWrapper {
  display: flex;

  width: 100%;
  max-width: 1200px;
}
header .headerWrapper a.buttonLike {
  align-self: center;

  padding: 9px;
  margin: 5px;
}
header .headerWrapper a.buttonLike:last-child {
  margin-right: 15px;
}
header .headerWrapper form {
  display: flex;
  justify-content: center;
  align-items: center;

  padding: 5px;
}
header .headerWrapper form:last-child {
  padding-right: 15px;
}
header .headerWrapper form button {
  padding: 9px;
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 15px 20px;

  background-color: var(--color-fg);
  color: white;
}
footer h2 a.logo {
  font-family: 'Ubuntu Mono', monospace;
  font-weight: 400;
}
footer .footerWrapper {
  display: flex;
  align-items: flex-start;
  align-items: baseline;

  width: 100%;
  max-width: 1200px;
}
footer .footerWrapper > * {
  flex-basis: 0;
  flex-grow: 1;

  margin: 30px 0 30px 15px;
}
footer .footerWrapper > *:last-child {
  margin-right: 15px;
}

footer ul {
  list-style: none;

  padding: 0;
  margin: 0;

  border: none;
}
footer ul li {
  padding: 0;
  margin-bottom: 5px;
}
footer ul li:last-child {
  margin-bottom: 0;
}

main {
  flex-grow: 1;

  display: flex;
  flex-direction: column;

  background-color: var(--color-bg);
}

main .infoRow:nth-child(even) {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);

  background-color: var(--color-bg-alt);
}

main .infoRow:last-child {
  flex-grow: 1;
}

.titleBlock {
  text-align: center;
}
.titleBlock h1 {
  margin: 60px 0 20px;

  font-family: 'Roboto Slab', Arial, sans-serif;
}

.infoRow {
  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 15px 20px;
}

.infoWrapper {
  display: flex;
  align-items: center;

  width: 100%;
  max-width: 1200px;
}
.infoWrapper.alignBlocks {
  align-items: flex-start;
  align-items: baseline;
}
.infoWrapper.verticalBlocks {
  flex-direction: column;
  align-items: stretch;
}

.infoWrapper > * {
  padding: 15px;
}
.infoWrapper .textBlock {
  flex-grow: 1;
}
.infoWrapper.equalBlocks > * {
  flex-basis: 0;
}
.infoWrapper.smallFirstBlock > * {
  flex-basis: 0;
  flex-grow: 2;
}
.infoWrapper.smallFirstBlock > *:first-child {
  flex-basis: 0;
  flex-grow: 1;
}

form.scanSite {
  /* So we can absolutely position an alert relative to it. */
  position: relative;

  flex-grow: 1;

  display: flex;
  justify-content: center;
}
form.scanSite input {
  flex-grow: 1;

  max-width: 400px;
  margin-right: 10px;
}
form.scanSite .alertWrapper {
  position: absolute;
  z-index: 10;
  bottom: -10px;

  display: flex;
  justify-content: center;

  width: 100%;
}

form.scanSites {
  flex-grow: 1;

  display: flex;
  flex-direction: column;
}
form.scanSites > *:not(:last-child) {
  margin-bottom: 10px;
}
form.scanSites button {
  align-self: flex-end;
}

form.search {
  display: flex;
  justify-content: center;
}
form.search input[type="search"] {
  flex-grow: 1;

  max-width: 600px;
  margin-right: 10px;
}

.searchWrapper {
  align-self: center;

  display: flex;
  flex-direction: column;

  width: 100%;
  max-width: 700px;
}

.columnSelector {
  padding: 5px;

  font-size: 0.9rem;
}
.columnSelector .columns {
  display: flex;
  flex-wrap: wrap;
}
.columnSelector .columns .column {
   /* 3 columns of checkboxes */
  width: calc(100% / 3);
  padding: 5px;
}
.columnSelector .columns .column > *:not(:last-child) {
  margin-right: 5px;
}

form.resourceSubmit {
  flex-grow: 1;

  display: flex;
  flex-direction: column;
}
form.resourceSubmit > *:not(:last-child) {
  margin-bottom: 10px;
}
form.resourceSubmit button {
  align-self: flex-end;
}

form.resourceCompare {
  /* So we can absolutely position an alert relative to it. */
  position: relative;

  flex-grow: 1;

  display: flex;
  justify-content: center;
}
form.resourceCompare input {
  flex-grow: 1;

  max-width: 400px;
  margin-right: 10px;
}
form.resourceCompare .alertWrapper {
  position: absolute;
  z-index: 10;
  bottom: -10px;

  display: flex;
  justify-content: center;

  width: 100%;
}

form.supplyChainSubmit {
  /* So we can absolutely position an alert relative to it. */
  position: relative;

  flex-grow: 1;

  display: flex;
  flex-direction: column;
}
form.supplyChainSubmit > *:not(:last-child) {
  margin-bottom: 10px;
}
form.supplyChainSubmit button {
  align-self: flex-end;
}
form.supplyChainSubmit .alertWrapper {
  position: absolute;
  z-index: 10;
  bottom: -10px;

  display: flex;
  justify-content: center;

  width: 100%;
}

.textBlock.centered {
  text-align: center;
}

.textBlock > *:not(:last-child) {
  margin-bottom: 10px;
}
.textBlock > h1,
.textBlock > h2,
.textBlock > h3,
.textBlock > h4 {
  margin-top: 30px;
}
.textBlock > h1:first-child,
.textBlock > h2:first-child,
.textBlock > h3:first-child,
.textBlock > h4:first-child {
  margin-top: 0;
}

.textBlock > svg {
  display: block;

  width: auto;
  height: auto;
  max-width: 100%;
  margin: 0 auto;
  padding: 5px;

  background-color: white;
  border-radius: 5px;
}

.textBlock > .loginBox {
  width: 100%;
  max-width: 300px;
  margin: 60px auto 20px;
  padding: 20px;

  border: 1px solid var(--color-border);
  border-radius: 5px;

  text-align: center;
}
.textBlock > .loginBox > * {
  margin-bottom: 20px;
}
.textBlock > .loginBox > *:last-child {
  margin-bottom: 0;
}
.textBlock > .loginBox h1 {
  margin-top: 50px;
  margin-bottom: 50px;
  font-family: 'Roboto Slab', Arial, sans-serif;
}
.textBlock > .loginBox form button {
  width: 100%;
}

a.toTop {
  display: block;

  padding: 10px;

  text-align: center;
}

/* Drop double column sections to single column. */
@media only screen and (max-width: 900px) {

  .infoWrapper {
    flex-direction: column;
    align-items: stretch;
  }
  .infoWrapper.alignBlocks {
    align-items: stretch;
  }
  .infoWrapper .textBlock {
    flex-grow: 0;
  }

}

/* Shrink padding. */
@media only screen and (max-width: 800px) {

  header {
    align-items: stretch;

    padding: 0;
  }

  header a.greyLink {
    padding: 12px;
  }
  header a.greyLink.selected {
    padding-bottom: 10px;
  }
  header .headerWrapper a.buttonLike {
    padding: 10px;
    margin: 1px;
  }
  header .headerWrapper a.buttonLike:last-child {
    margin-right: 12px;
  }
  header .headerWrapper form {
    padding: 1px;
  }
  header .headerWrapper form:last-child {
    padding-right: 12px;
  }
  header .headerWrapper form button {
    padding: 10px;
  }

  footer {
    padding: 15px 0;
  }
  footer .footerWrapper > * {
    margin: 24px 0 24px 12px;
  }
  footer .footerWrapper > *:last-child {
    margin-right: 12px;
  }

  .infoRow {
    align-items: stretch;

    padding: 15px 0;
  }

  .infoWrapper > * {
    padding: 12px;
  }

}

/* Use grid layout for certain responsive tables at larger widths. */
@media not all and (max-width: 700px) {

  table.responsive.grid {
    display: grid;
  }
  table.responsive.grid thead,
  table.responsive.grid tbody,
  table.responsive.grid tr {
    display: contents;
  }
  table.responsive.grid td {
    overflow-wrap: normal;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  table.responsive.grid tr > *:nth-child(1) { grid-column-start: 1; }
  table.responsive.grid tr > *:nth-child(2) { grid-column-start: 2; }
  table.responsive.grid tr > *:nth-child(3) { grid-column-start: 3; }
  table.responsive.grid tr > *:nth-child(4) { grid-column-start: 4; }
  table.responsive.grid tr > *:nth-child(5) { grid-column-start: 5; }
  table.responsive.grid tr > *:nth-child(6) { grid-column-start: 6; }
  table.responsive.grid tr > *:nth-child(7) { grid-column-start: 7; }
  table.responsive.grid tr > *:nth-child(8) { grid-column-start: 8; }
  table.responsive.grid tr > *:nth-child(9) { grid-column-start: 9; }
  table.responsive.grid tr > *:nth-child(10) { grid-column-start: 10; }
  table.responsive.grid tr > *:nth-child(11) { grid-column-start: 11; }
  table.responsive.grid tr > *:nth-child(12) { grid-column-start: 12; }
  table.responsive.grid tr > *:nth-child(13) { grid-column-start: 13; }
  table.responsive.grid tr > *:nth-child(14) { grid-column-start: 14; }
  table.responsive.grid tr > *:nth-child(15) { grid-column-start: 15; }
  table.responsive.grid tr > *:nth-child(16) { grid-column-start: 16; }
  table.responsive.grid tr > *:nth-child(17) { grid-column-start: 17; }
  table.responsive.grid tr > *:nth-child(18) { grid-column-start: 18; }
  table.responsive.grid tr > *:nth-child(19) { grid-column-start: 19; }
  table.responsive.grid tr > *:nth-child(20) { grid-column-start: 20; }

  table.responsive.grid td.flexShrink {
    display: flex;
  }
  table.responsive.grid td.flexShrink > *.shrink {
    overflow: hidden;
    text-overflow: ellipsis;
  }

}

/* Change to mobile layout. */
@media only screen and (max-width: 700px) {

  /*
    We want to hide the header row, but can't just set `display: none` as we
    want it to be read by screenreaders.
  */
  table.responsive thead {
    /* Take it out of the document flow. */
    position: absolute;
    /* Clip it to only show an infintely small polygon. */
    clip: rect(0 0 0 0);
    /* `clip` is deprecated - `clip-path` replaces it. */
    clip-path: polygon(0 0, 0 0, 0 0);
  }
  table.responsive tr {
    display: block;
  }
  table.responsive td {
    display: block;

    text-align: right;
  }
  /* Insert the column name - pulled from `data-label` - before each cell. */
  table.responsive td::before {
    content: attr(data-label);
    float: left;
    /*
      Set the font explicitly in case the font of this column has been
      changed, e.g. set to a monospace font.
    */
    font-family: 'Roboto', Arial, sans-serif;
  }

  table.keyValue {
    border-spacing: 0;
  }
  table.keyValue tr {
    display: block;
  }
  table.keyValue td {
    display: block;
  }
  table.keyValue td:first-child {
    padding-bottom: 0;

    text-align: left;
    font-size: 0.8em;
  }

  .bigNumbers .bigNumberBox .bigNumberDescription {
    font-size: 0.8em;
  }

  /* Switch menus */
  header nav.inlineMenu {
    display: none;
  }
  header nav.mobileMenu {
    display: flex;
  }

  footer .footerWrapper {
    flex-direction: column;
    align-items: flex-start;
  }
  footer .footerWrapper > * {
    margin: 24px 12px 0 12px;
  }
  footer .footerWrapper > *:last-child {
    margin-right: 12px;
    margin-bottom: 24px;
  }

  .titleBlock h1 {
    margin: 30px 0 10px;
  }

  .columnSelector .columns .column {
    /* 2 columns of checkboxes */
    width: 50%;
  }

  form.resourceCompare {
    flex-direction: column;
  }
  form.resourceCompare input {
    max-width: unset;
    margin-right: 0;
    margin-bottom: 10px;
  }
  form.resourceCompare button {
    align-self: flex-end;
  }
}

/* Shrink UI further for really small screens. */
@media only screen and (max-width: 400px) {

  .bigNumbers .bigNumberBox {
    width: 120px;
  }

  body {
    font-size: 14px;
  }

  header a.greyLink {
    padding: 10px;
  }
  header a.greyLink.selected {
    padding-bottom: 8px;
  }
  header .headerWrapper a.buttonLike {
    padding: 8px;
  }
  header .headerWrapper a.buttonLike:last-child {
    margin-right: 10px;
  }
  header .headerWrapper form:last-child {
    padding-right: 10px;
  }
  header .headerWrapper form button {
    padding: 8px;
  }

  footer .footerWrapper > * {
    margin: 20px 10px 0 10px;
  }
  footer .footerWrapper > *:last-child {
    margin-right: 10px;
    margin-bottom: 20px;
  }

  .infoWrapper > * {
    padding: 10px;
  }

  .columnSelector .columns .column {
    /* 1 column of checkboxes */
    width: 100%;
  }

}