/** circles **/
 .chart {
   /* background-color: yellow; */
 }
  #circleChart1 circle {
    fill: steelblue; 
  }
  #circleChart1 circle.indystar-data-point {
    /*fill: #004f70;*/
    fill: rgba(0,192,255, 0.3);
  }
  #circleChart1 circle.adnetwork-data-point {
    /*fill: #6a3500;*/
    fill: rgba(255,138,0, 0.3);
  }
  #circleChart1 circle.adnetwork-indystar-data-point {
    /*fill: #0d5300;*/
    fill: rgba(22,202,0, 0.3);
  } 

  #circleChart1 text {
    fill: #999;
    font: 10px sans-serif;
    text-anchor: end;
  }
  
  #circleChart1 rect
  {
    fill:#000;
  }
  
  /** axes **/
  #circleChart1 .axis text {
    font: 12px sans-serif !important;
  }
  
  #circleChart1 .axis path,
  #circleChart1 .axis line {
    fill: none;
    stroke: #999;
    shape-rendering: crispEdges;
  }
  
  .y-axis-label text,
  .y2-axis-label text {
    font-weight: bolder !important;
    font-size: 0.75em !important;
  }


/** trend lines **/
  .average-line {
    fill: none;
    stroke: steelblue;
    stroke-width: 5px;
  }
  .average-line-indystar {
    stroke: rgb(0,192,255);
  }
  .average-line-adnetwork {
    stroke: rgb(255,138,0);
  }
  .average-line-adnetwork-indystar {
    stroke: rgb(22,202,0);
  }
  .average-line-google-benchmark {
    stroke-opacity: 0;
    stroke: rgb(255, 255, 255);
    stroke-dasharray: 10 5; 
  }
  
  .average-line-google-benchmark-segment {
    stroke-width: 5px;
    stroke: rgb(255, 255, 255);
    stroke-dasharray: 10 5;
    stroke-dashoffset: 0;
  }
  .average-line-google-benchmark.fade-in {
    
  }
  
  /** Control Panel display toggles **/
  .chart-hidden {
    fill-opacity: 0;
    stroke-opacity: 0;
    opacity: 0;
  }


/** fade-in animation **/
/* make keyframes that tell the start state and the end state of our object */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.average-line-google-benchmark.fade-in,
.average-line-google-benchmark-segment.fade-in
{
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn linear 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn linear 1;
	animation:fadeIn linear 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration : 0.9s;
	-moz-animation-duration    : 0.9s;
	animation-duration         : 0.9s;
} 
.label.fade-in
{
	opacity:0;  /* make things invisible upon start */
	-webkit-animation:fadeIn linear 1;  /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */
	-moz-animation:fadeIn linear 1;
	animation:fadeIn linear 1;

	-webkit-animation-fill-mode:forwards;  /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/
	-moz-animation-fill-mode:forwards;
	animation-fill-mode:forwards;

	-webkit-animation-duration : 0.4s;
	-moz-animation-duration    : 0.4s;
	animation-duration         : 0.4s;
} 

#circleChart1 .adnetwork-indystar-label,
#circleChart1 .adnetwork-label,
#circleChart1 .indystar-label
{
  cursor: pointer;
  
}

#circleChart1 {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Chrome/Safari/Opera */
     -khtml-user-select: none; /* Konqueror */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  not supported by any browser */
}


#circleChart1 .indystar-label rect {
  fill: rgb(0,192,255);
}

#circleChart1 .indystar-label text {
  font-size: 12px;
  font-family: sans-serif;
  stroke: rgb(0,0,0);
  stroke-opacity: 1;
  fill: rgb(0,0,0);
  text-anchor: middle;
  
}

#circleChart1 .adnetwork-label rect {
  fill: rgb(255,138,0);
}

#circleChart1 .adnetwork-label text {
  font-size: 12px;
  font-family: sans-serif;
  stroke: rgb(0,0,0);
  stroke-opacity: 1;
  fill: rgb(0,0,0);
  text-anchor: middle;
  
}

#circleChart1 .adnetwork-indystar-label rect {
  fill: rgb(22,202,0);
}

#circleChart1 .adnetwork-indystar-label text {
  font-size: 12px;
  font-family: sans-serif;
  stroke: rgb(0,0,0);
  stroke-opacity: 1;
  fill: rgb(0,0,0);
  text-anchor: middle;
  
}

#circleChart1 .google-benchmark-label rect {
  fill: rgb(255,255,255);
  stroke: #fff;
  stroke-opacity: 1;
  stroke-width: 2;
}

#circleChart1 .google-benchmark-label text {
  font-size: 12px;
  font-family: sans-serif;
  stroke: rgb(255,255,255);
  stroke-opacity: 1;
  fill: rgb(255,255,255);
  text-anchor: middle;
  
}
.outside-bubble-info-container {
  display: block;
}
.bubble-info-container {
  border: solid purple 2px;
  color: #fff;
  max-width: 300px;
  min-width: 300px;
  width: 300px;
  background-color:#333;
  border-radius:10px;
  margin-top:-15px;
}

.bubble-info-container-indystar {
  border: 2px solid #00c0ff;
}

.bubble-info-container-adnetwork {
  border: 2px solid #ff8a00;
}

.bubble-info-container-adnetwork-indystar {
  border: 2px solid #16ca00;
}

.bubble-info-title 
{
  font-size:1.15em;
  font-weight:bold;
  text-align:center;
  color:#000;
  padding:5px;
  border-top-left-radius:10px;
  border-top-right-radius:10px;
}

.bubble-info-title-indystar
{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00c0ff+0,1e5799+99 */
  background: #00c0ff; /* Old browsers */
  background: -moz-linear-gradient(top,  #00c0ff 0%, #1e5799 99%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #00c0ff 0%,#1e5799 99%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #00c0ff 0%,#1e5799 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00c0ff', endColorstr='#1e5799',GradientType=0 ); /* IE6-9 */
}

.bubble-info-title-adnetwork
{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff8a00+-1,833d00+100 */
  background: #ff8a00; /* Old browsers */
  background: -moz-linear-gradient(top,  #ff8a00 -1%, #833d00 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #ff8a00 -1%,#833d00 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #ff8a00 -1%,#833d00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff8a00', endColorstr='#833d00',GradientType=0 ); /* IE6-9 */
}

.bubble-info-title-adnetwork-indystar
{
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#19ca00+0,0b5b00+100 */
  background: #19ca00; /* Old browsers */
  background: -moz-linear-gradient(top,  #19ca00 0%, #0b5b00 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #19ca00 0%,#0b5b00 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #19ca00 0%,#0b5b00 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#19ca00', endColorstr='#0b5b00',GradientType=0 ); /* IE6-9 */
}

.bubble-info-lifts 
{
  padding:10px;
  border-bottom-left-radius:10px;
  border-bottom-right-radius:10px;
  
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,333333+100 */
  background: #000000; /* Old browsers */
  background: -moz-linear-gradient(top,  #000000 0%, #333333 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top,  #000000 0%,#333333 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom,  #000000 0%,#333333 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#333333',GradientType=0 ); /* IE6-9 */
}

.bubble-info-difference-indystar
{
  color:#00c0ff;
  margin:10px 0;
}

.bubble-info-difference-adnetwork
{
  color:#ff8a00;
  margin:10px 0;
}

.bubble-info-difference-adnetwork-indystar
{
  color:#19ca00;
  margin:10px 0;
  
  padding-left:10px;
  text-indent:-10px;
}

.bubble-info-difference-google
{
  color:#FFFFFF;
  margin:10px 0;
}

.bubble-triangle-down
{
  width: 0px;
	height: 0px;
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	
  margin: 0 44%;
  position: relative;
  bottom: -15px;
}

.bubble-triangle-down-indystar
{
  border-top: 15px solid #00c0ff;
}

.bubble-triangle-down-adnetwork
{
	border-top: 15px solid #ff8a00;
}

.bubble-triangle-down-adnetwork-indystar
{
	border-top: 15px solid #16ca00;
}

/* easter egg, click the 'd' --jel */
#circleChart1 circle.roll-along {
  /* fill: steelblue; */
  fill: rgb(0,0,0); 
}