h1#main_title {
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0.5em;
    border-radius: 0.5em;
}

input#indexPageFilter {
  width: 100%;
  border: 1px solid rgba(0,60,100,0.3);
  padding: 0.7em;
}

::placeholder {
  color: rgba(0,60,100,0.5);
}

th.orderBy::before {
  font-size: 0.7em;
  cursor: pointer;
  content: '▲';
}

th.orderBy.reverse::before {
  content: '▼';
}

.units {
  vertical-align: bottom;
  text-align: center;
  background-color: black;
  color: white;
  border-radius: 3pt;
  background-image: url('units.png');
  background-size: contain;
  background-repeat: no-repeat;
  margin-right: 0.5em;
  padding: 1em;
  padding-left: 3em;
  font-size: 8pt;
}

.component-value {
  background-color: rgba(30, 120, 175, 1);
}
.component-profit {
  background-color: green;
}
.component-cost {
  background-color: red;
}

body {
  background-repeat: no-repeat;
  background-position: center top;
  background-origin: border-box;

  font-family: Arial, sans-serif;
  padding: 1em;
  margin: auto;
  max-width: 60em;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

h1 {
  font-size: 32pt;
}

h2 {
  font-size: 24pt;
}

h3 {
  font-size: 16pt;
}

h4 {
  font-size: 14pt;
}

h5 {
  font-size: 12pt;
}

h6 {
  font-size: 10pt;
}

p, blockquote, ul, ol, dl, li, table, pre {
  margin: 1em 0;
}

img {
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

table, th, td {
  padding: 1em;
}

tr:nth-child(even) {
  background-color: rgba(255,255,255,0.6);
}

tr:nth-child(odd) {
  background-color: rgba(0,60,100,0.1);
}

th, td  {
  text-align: right;
}

th:first-child, td:first-child {
  text-align: left;
}

table#indexPage th {
  cursor: pointer;
}

a, a:visited {
  color: #4183C4;
  text-decoration: none;
}

button {
  font-size: 10pt;
  padding: 4px 6px;
  border-radius: 4pt;
  border: 1px solid #bbb;
  background-color: #eee;
}

code, pre {
  font-family: monospace;
}