.project-test-history {
  h3 {
    font-weight: 200;
    line-height: 1em;
    margin: 0.66em 0 0;
  }
  h3 b { color: #777; }

  max-width: 860px;
  padding-right: 60px;
  margin: 0 auto;

  .project-test-totals {
    margin: 1em 0 2em;
    dd, dt { display: inline-block; }
    dd { font-weight: 600; margin: 0 0.33em 0 0; }
    dt { font-weight: 400; margin: 0 0.66em 0 0; }
  }
}

.timeline .timeline-event.project-test-commit {
  padding-left: 45px;
  text-indent: -25px;
  padding-right: 100px;
}

.project-test-commit {
  .project-test-commit-author {
    display: inline-block;
    text-indent: 0;
    padding: 0;
    margin: 0;
    vertical-align: top;
  }

  .project-test-commit-message {
    position: relative;
    top: 2px;
  }

  .project-test-status {
    position: absolute;
    display: inline-block;
    right: 0;
    padding: 2px 4px;
    text-indent: 0;
    text-align: right;
    text-transform: uppercase;
    font-weight: 500 !important;

    &.project-test-status-untested { color: #ddd; }
    &.project-test-status-pending { color: #888; }
    &.project-test-status-aborted { color: #ddd; }
    &.project-test-status-unknown { color: #888; }
    &.project-test-status-pass { color: #5db64c; }
    &.project-test-status-fail { color: #e24e32; }
  }
}

.project-tests tbody {
  .test-suite-name {
    color: #777;
    font-weight: 700;
  }

  .test-name {
    color: #333;
    font-weight: 200;
  }

  .test-passes {
    font-weight: 600;
    color: #5db64c;

    &.zero { color: #ddd; }
  }

  .test-fails {
    font-weight: 600;
    color: #e24e32;

    &.zero { color: #ddd; }
  }
}

$dot-graph-width: 144px;

.dot-graph {
  width: $dot-graph-width;
  height: 14px;
  vertical-align: top;
}

.test-graph {
  width: $dot-graph-width;
  min-width: $dot-graph-width;
  max-width: $dot-graph-width;
}

td.test-duration {
  text-align: right;
  line-height: normal;
  padding-bottom: 2px;

  .test-duration-average { display: block; }
  .test-duration-range {
    display: block;
    font-size: 0.75em;
    white-space: nowrap;
    color: #aaa;
  }
}

.dot-graph-rect {
  &.pass  { fill: #5DB64C; } // grass
  &.fail  { fill: #E24E32; } // tomato
  &.skip  { fill: #239ce7; } // sky
}