#trace-container {
  font-size: 12px;
  margin-bottom: 50px;
}

#trace-container .binary-annotation {
  display: none;
}

#trace-container .span {
  cursor: pointer;
  display: none;
  position: relative;
  border-bottom: solid 1px #fff;
  border-top: solid 1px #fff;
}

#trace-container .service-span:hover {
  background: #eee;
  border-color: #ccc;
}

#trace-container .span:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

#trace-container .span .handle {
  width: 200px;
  overflow: hidden;
  white-space: nowrap;
  float: left;
  opacity: 0.25;
}

/* ensure spans are shown even if the don't have a name */
#trace-container .span .handle .service-name:after {
  content: ".";
  visibility: hidden;
}

#trace-container .span.highlight .handle,
#trace-container .service-span:hover .handle {
  opacity: 1;
}

#trace-container .span .handle .expander {
  margin-left: -1.1em;
  color: #000;
  padding: 2px;
  margin-right: 0.25em;
  cursor: pointer;
  font-family: monospace;
}

#trace-container .span .handle .service-name {
  background: #0084b4;
  color: #fff;
  padding: 2px;
}

#trace-container .span .duration-container {
  position: relative;
  margin-left: 205px;
}

#trace-container #timeLabel.span {
  overflow: visible;
  display: block;
  white-space: nowrap;
}

#trace-container #timeLabel.span .handle {
  opacity: 1;
}

#trace-container #timeLabel.span .time-marker {
  margin-left: -1%;
}

#trace-container .span .time-marker {
  position: absolute;
  color: #333;
}

#trace-container .span .time-marker-0 { left: 0; }
#trace-container .span .time-marker-1 { left: 20%; }
#trace-container .span .time-marker-2 { left: 40%; }
#trace-container .span .time-marker-3 { left: 60%; }
#trace-container .span .time-marker-4 { left: 80%; }
#trace-container .span .time-marker-5 { left: 99.5%; }

#trace-container .span .duration {
  position: absolute;
  background: #ccc;
  overflow: visible;
  white-space: nowrap;
  padding: 2px;
}

#trace-container .span .duration .annotation {
  position: absolute;
  top: 5px;
  height: 10px;
  width: 10px;
  background: #fff;
  border: solid 1px #000;
  border-radius: 1em;
  margin-left: -6px;
}

#trace-container .span .duration .annotation.core {
  display: none;
}

#trace-container .span .duration .tooltip {
  white-space: normal;
}

#trace-container .span.depth-0 .duration { background: rgba(66, 146, 198, 0.1); }
#trace-container .span.depth-1 .duration { background: rgba(66, 146, 198, 0.20); }
#trace-container .span.depth-2 .duration { background: rgba(66, 146, 198, 0.40); }
#trace-container .span.depth-3 .duration { background: rgba(66, 146, 198, 0.60); }
#trace-container .span.depth-4 .duration { background: rgba(66, 146, 198, 0.80); }
#trace-container .span.depth-5 .duration { background: rgba(66, 146, 198, 1); }

#trace-controls form {
  margin-bottom: 0px;
}

/* hide the fact that these are links */
#trace-controls .trace-stats {
  margin-top: 5px;
}
#trace-controls .trace-stats {
  color: #000;
  cursor: default;
  background: rgba(0, 0, 0, 0);
}

#trace-controls .trace-stats strong {
  font-weight: 300;
}

#trace-controls .trace-stats .key {
  display: inline-block;
}

#trace-controls .trace-stats .key:last-child {
  margin-right: 0;
}

#trace-controls .trace-stats .key:last-child .badge {
  margin-right: 0;
}

#trace-controls .col-sm-4 {
  padding-left: 0;
}

#trace-controls .col-sm-8 {
  padding-right: 5px;
}

#trace-controls .trace-stats {
  text-align: right;
}

#trace-controls .trace-stats .badge {
  border-radius:0;
  display: inline-block;
  margin-right: 15px;
  padding: 7px 7px;
}

#trace-controls .form-inline {
  margin-left: 5px;
}

#spanPanel #binaryAnnotations td.value {
  word-break: break-all;
  max-width: 75%;
}

#trace-controls .form-inline button {
  border-radius: 0;
  box-shadow: none;
}
