body {
    font-family: sans-serif;
    background-color: #111;
    color: #eee;
    padding: 1rem;
}

a {
    color: #eee;
}

#controls, #results td {
    color: #eee;
}

header > div {
    margin-top: 1rem;
}

header {
    margin-bottom: 2rem;
}

th {
    text-align: left;
}

.regressed {
    background-color: #DB3026;
}

.fixed {
    background-color: #5630DB;
}

.same-build-fail {
    background-color: #65461E;
}

.same-test-fail {
    background-color: #788843;
}

.same-test-pass {
    background-color: #72A156;
}

.unknown {
    background-color: #494B4A;
}

#controls {
    line-height: 3.5em;
    margin-bottom: 2rem;
}

#controls > span {
    padding: 0.5em;
    padding-left: 1em;
    padding-right: 1em;
    margin: 0.5em;
    white-space: nowrap;
    border: 0.2rem solid #111;
}

#controls > span:hover {
    cursor: pointer;
}

#controls > span.selected {
    border: 0.2rem solid #eee;
}

#controls .count::before {
    content: "( ";
    opacity: 0.5;
}

#controls .count::after {
    content: " )";
    opacity: 0.5;
}

#results > div {
    display: none;
    width: 44em;
    border-bottom: 0.2rem solid #222;
}

#results > div.header {
    display: block;
}

#results > div.visible {
    display: block;
}

#results > div > span {
    word-break: keep-all;
    overflow: hidden;
    text-overflow: ellipses;
    display: inline-block; 
    margin: 0.5em;
}

#results > div > span:first-child {
    width: 24em;
}

#results > div > span:nth-child(2) {
    width: 8em;
}

#results > div > span:nth-child(3) {
    width: 8em;
}

#results > div:first-child {
    display: block;
}