.water-fall-chart {width:100%; overflow: visible; font-size: 12px; line-height: 1em; color: white; background-color: #eee;}
  .water-fall-chart * {box-sizing: border-box;}
  .water-fall-chart button {cursor: pointer;}
  
  .water-fall-holder {fill:#ccc;}
  
  .water-fall-chart .left-fixed-holder {overflow: visible;}
  .water-fall-chart .marker-holder {width:100%;}
  .water-fall-chart .line-label-holder {cursor: pointer;}
  .water-fall-chart .line-holder {stroke-width:1; stroke: #ccc; stroke-opacity:0.5; transition: all 60ms;}
  .water-fall-chart .line-holder .line-mark {fill: #69009e; opacity: 0.01; stroke-width: 0; transition: all 60ms;}
  .water-fall-chart .line-holder.active {stroke: #69009e; stroke-width:2; stroke-opacity:1;}
  .water-fall-chart .line-holder.active .line-mark { opacity: 0.4;}
  .water-fall-chart .type-onload .line-holder  {stroke: #c0c0ff;}
  .water-fall-chart .type-oncontentload .line-holder  {stroke: #d888df;}
  
  .water-fall-chart .labels {width:100%;}
  .water-fall-chart .labels .inner-label {pointer-events: none;}
  .water-fall-chart .time-block.active {opacity: 0.8;}
  .water-fall-chart .line-end,
  .water-fall-chart .line-start {display: none; stroke-width:1; stroke-opacity:0.5; stroke: #000;}
  .water-fall-chart .line-end.active,
  .water-fall-chart .line-start.active {display: block;}
  
  .left-fixed-holder .label-full-bg {fill: #fff; opacity: 0.9;}
  
  .time-scale line {stroke:#0cc; stroke-width:1;}
  .time-scale line.sub-second-line {stroke: #ccc; opacity: 0.75; stroke-width:0.50;}
  .time-scale text {font-weight:bold;}
  
  .row-item {cursor: pointer;}
  .row-item .even {fill: #ccc; opacity: 0.05;}
  .row-item .odd {fill: #000; opacity: 0.05;}
  .row-item:hover .odd,
  .row-item:hover .even {fill: #000; opacity: 0.1;}
  
  .row-item:focus {outline: solid 1.5px #aaa; outline-offset: -1.5px}
  .row-item:focus .odd,
  .row-item:focus .even {fill: #000; opacity: 0.2; }
  
  .row-item .rect-holder text {fill: #aaa}
  .row-item.status5xx .even {fill: #f66;}
  .row-item.status5xx .odd {fill: #f00;}
  .row-item.status4xx .even{fill: #c33;}
  .row-item.status4xx .odd {fill: #c00;}
  .row-item.status3xx .even {fill: #ff6;}
  .row-item.status3xx .odd {fill: #ff0;}
  
  .row-item.status5xx .even,
  .row-item.status5xx .odd,
  .row-item.status4xx .even,
  .row-item.status4xx .odd,
  .row-item.status3xx .even,
  .row-item.status3xx .odd {opacity: 0.3;}
  .row-item.status5xx:hover .even,
  .row-item.status5xx:hover .odd,
  .row-item.status4xx:hover .even,
  .row-item.status4xx:hover .odd,
  .row-item.status3xx:hover .even,
  .row-item.status3xx:hover .odd {opacity: 0.5;}
  
  .tooltip-holder {overflow: visible;}
  .tooltip * {padding: 0; margin:0;}
  .tooltip html {font-size: 10px; line-height: 1.2em;}
  .tooltip body {position: relative;}
  .tooltip-payload {position: absolute; top:0; left:0; padding: 0.25em; font-size: 10px; display: inline-block;  background: rgba(255,255,255, 0.9); border: solid 1px #f0f0f0; word-break: break-all; overflow-wrap: break-word; transition: opacity 300ms;}
  .tooltip-payload.no-anim {transition: none;}
  
  /** overlay animation settings **/
  .water-fall-chart .line-label-holder,
  .row-item,
  .water-fall-chart .line-holder line,
  .time-scale line,
  .time-scale text {transition:transform 60ms;}
  .water-fall-chart.closing {transition-delay: 60ms;}
  
  .labels { overflow: hidden;}
  
  /*block colours for MIME types*/
  .block-css {fill: #a6d18f;}
  .block-iframe,
  .block-html,
  .block-svg,
  .block-internal {fill: #82a8de;}
  .block-img,
  .block-image {fill: #b394cf;}
  .block-script,
  .block-javascript,
  .block-js {fill: #e0b483;}
  .block-link {fill: #89afe6;}
  .block-swf,
  .block-flash {fill: #42aab1;}
  .block-font {fill: #e15d4e;}
  .block-xmlhttprequest,
  .block-ajax {fill: #f00;} /*remove?*/
  .block-plain,
  .block-other {fill: #b3b3b3;}
  
  /*block colours for Timing*/
  .block-blocked {fill: #aaa;}
  .block-dns {fill: #159588;}
  .block-connect {fill: #fd9727;}
  .block-ssl {fill:#c141cd;}
  .block-send {fill: #b0bec5;}
  .block-wait {fill: #1ec659;}
  .block-receive {fill: #1eaaf1;}
  .block-undefined {fill: #0f0;}
  
  /* Info overlay SVG - wrapper */
  .info-overlay-bg {fill: #fff; stroke: #cdcdcd;}
  .info-overlay-close-btn {fill: rgba(205, 205, 205, 0.8); transform: translate(-23px, -23px); cursor: pointer;}
  .info-overlay-close-btn text {fill: #111; pointer-events: none;}
  .info-overlay-close-btn:focus {border: solid 1px #36c;}
  
  /* Info overlay SVG - timings tab */
  .info-overlay-holder .connect {border-right: solid 5px #fd9727; padding-right: 5px;}
  .info-overlay-holder .blocked {border-right: solid 5px #aaa; padding-right: 5px;}
  .info-overlay-holder .ssltls {border-right: solid 5px #c141cd; padding-right: 5px;}
  .info-overlay-holder .send {border-right: solid 5px #b0bec5; padding-right: 5px;}
  .info-overlay-holder .wait {border-right: solid 5px #1ec659; padding-right: 5px;}
  .info-overlay-holder .receive {border-right: solid 5px #1eaaf1; padding-right: 5px;}
  .info-overlay-holder .dns {border-right: solid 5px #159588; padding-right: 5px;}
  
  /* Info overlay HTML - types */
  .type-css {background: #406B29;}/*a6d18f - 40%*/
  .type-iframe,
  .type-html,
  .type-svg,
  .type-internal {background: #1C4278;} /*82a8de - 40%*/
  .type-img,
  .type-image {background: #4D2E69;} /*b394cf - 40%*/
  .type-script,
  .type-javascript,
  .type-js {background: #7A4E1D;} /*e0b483 - 40%*/
  .type-link {background: #89afe6;} /*89afe6 - 40%*/
  .type-swf,
  .type-flash {background: #234980;} /*#42aab1 - 40%*/
  .type-font {background: #AE2A1B;} /*#e15d4e - 40%*/
  .type-xmlhttprequest,
  .type-ajax {background: #CC0000;} /* f00 40%*/
  .type-plain,
  .type-other {background: #808080;} /*#b3b3b3 - 40%*/
  
  /* Info overlay HTML - base */
  .info-overlay-holder * { padding: 0; margin:0; font-size: 12px;}
  .info-overlay-holder body { position: relative;  height: 450px; clear: both; padding: 0; margin:0; width:100%; background: #333; color: #eee;}
  .info-overlay-holder body .wrapper { height: 450px; width: 100%; overflow: scroll;}
  
  /* Info overlay HTML - header */
  .info-overlay-holder header {position: relative; box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.25);}
  .info-overlay-holder header,
  .info-overlay-holder header a,
  .info-overlay-holder header button {color: #fff; text-decoration: none;}
  .info-overlay-holder header a:hover,
  .info-overlay-holder header a:focus {text-decoration: underline;}
  .info-overlay-holder .requestID {font-weight: bold;}
  .info-overlay-holder h3,
  .info-overlay-holder h3 a {font-size: 1.1em; padding: 1em; margin:0; font-weight: normal; overflow-wrap: break-word;}
  .info-overlay-holder h3 strong {font-size: 1.1em;}
  .info-overlay-holder .tab-nav ul {margin: 0; padding: 0;}
  .info-overlay-holder .tab-nav li {margin: 0; padding: 0; display: inline-block;}
  .info-overlay-holder button { background: transparent; outline:0; border:0; border-bottom: solid 2px transparent; padding: 0.5em 1em; margin:0 0.25em;}
  .info-overlay-holder li:first-child  button {margin-left: 1em;}
  .info-overlay-holder button:focus,
  .info-overlay-holder button.active:focus,
  .info-overlay-holder button:hover {border-color: rgba(255,255,255, 0.6);}
  .info-overlay-holder button.active {border-color: #fff; cursor: default;}
  .info-overlay-holder button.active:focus {border-color: rgba(255,255,255, 0.8);}
  
  /* Info overlay HTML - content */
  .info-overlay-holder dt {float: left; clear: both; margin-top: 0.5em; width: 25%; text-align: right; font-weight: bold; }
  .info-overlay-holder dd {float: left; width:73%; margin: 0.5em 0 0 2%; padding: 0 0 0.5em 0;}
  .info-overlay-holder dt:after { content: ":"; }
  .info-overlay-holder pre {font-size: 11px; line-height: 23px;  border-radius: 0; background: #000000;}
  
  .info-overlay-holder .tab {float: left; width:100%; height: 350px; padding:12px 12px 24px;}
  .info-overlay-holder .tab h2 {font-size: 1.2em; margin:0.5em 0 0; padding: 0.5em 0 0.5em 1em; clear: both; border-top: solid 1px #efefef;}
  .info-overlay-holder .tab h2:first-child {border-top: 0; padding-top: 0;}
  .info-overlay-holder .tab pre {overflow-y: hidden; width:100%; min-height: 100%;}
  .info-overlay-holder .tab .preview {width: auto; max-width: 100%; max-height: 500px; border: solid 1px #666;}
  .info-overlay-holder .tab dl:after {content: ""; display: table; clear: both;}
  .info-overlay-holder .tab.raw-data {padding: 0;}
  .info-overlay-holder .tab.raw-data pre {padding:12px 12px 24px;}
  
  /** Legend */
  .resource-legend { margin: 0; padding: 0; font-size: 0.75em; line-height: 1.5em; display: inline-block;}
  .resource-legend li {margin: 0 1em 0 0; padding: 0; white-space: nowrap; display: inline-block;}
  .resource-legend li:before {content:''; width: 1em; height: 1em; margin: 0 0.5em 0 0; vertical-align: text-top; display: inline-block; }
  
  .resource-legend .legend-blocked:before { background: #aaa;}
  .resource-legend .legend-dns:before { background: #159588;}
  .resource-legend .legend-connect:before { background: #fd9727; }
  .resource-legend .legend-ssl:before { background: #c141cd; }
  .resource-legend .legend-send:before { background: #b0bec5; }
  .resource-legend .legend-wait:before { background: #1ec659; }
  .resource-legend .legend-receive:before { background: #1eaaf1; }
  
  .icon {
    fill: #666;
  }
  
  .icon-4xx,
  .icon-5xx,
  .icon-no-cache,
  .icon-no-gzip,
  .icon-warning {
    fill: #b55;
  }