.custom-vis-layout.playablebubblechart .axis path, .custom-vis-layout.playablebubblechart .axis line {
 fill: none;
 stroke: rgb(0, 0, 0);
 shape-rendering: crispedges;
 }

.custom-vis-layout.playablebubblechart text {
 cursor: default;
 }

.custom-vis-layout.playablebubblechart h1 {
 font-weight: 400;
 }

.custom-vis-layout.playablebubblechart #chart {
 height: 506px;
 }

.custom-vis-layout.playablebubblechart text {
 font-size: 10px;
 }

.custom-vis-layout.playablebubblechart .dot {
 stroke: rgb(0, 0, 0);
 }

.custom-vis-layout.playablebubblechart .axis path, .custom-vis-layout.playablebubblechart .axis line {
 fill: none;
 stroke: rgb(0, 0, 0);
 shape-rendering: crispedges;
 }

.custom-vis-layout.playablebubblechart .label {
 fill: rgb(119, 119, 119);
 }

.custom-vis-layout.playablebubblechart .animation.label {
 font-style: normal;
 font-variant-caps: normal;
 font-weight: 300;
 font-stretch: normal;
 font-size: 36px;
 line-height: normal;
 font-family: "Helvetica";
 fill: rgb(221, 221, 221);
 }

.custom-vis-layout.playablebubblechart .country.label {
 font-style: normal;
 font-variant-caps: normal;
 font-weight: 400;
 font-stretch: normal;
 font-size: 36px;
 line-height: normal;
 font-family: "Helvetica";
 fill: rgb(221, 221, 221);
 }

.custom-vis-layout.playablebubblechart .year.label.active {
 fill: rgb(170, 170, 170);
 }

.custom-vis-layout.playablebubblechart circle.pointTrajectory {
 pointer-events: none;
 stroke: lightgray;
 fill: black;
 opacity: 0;
 }

.custom-vis-layout.playablebubblechart path.lineTrajectory {
 stroke-width: 2px;
 stroke-opacity: 0.5;
 stroke: black;
 fill: none;
 pointer-events: none;
 }

.custom-vis-layout.playablebubblechart .selected {
 stroke-width: 4px;
 }

.custom-vis-layout.playablebubblechart text {
 cursor: default;
 }

.custom-vis-layout.playablebubblechart h1 {
 font-weight: 400;
 }

.custom-vis-layout.playablebubblechart #chart {
 height: 506px;
 }

.custom-vis-layout.playablebubblechart text {
 font-size: 10px;
 }

.custom-vis-layout.playablebubblechart .dot {
 stroke: rgb(0, 0, 0);
 }

.custom-vis-layout.playablebubblechart .axis path, .custom-vis-layout.playablebubblechart .axis line {
 fill: none;
 stroke: rgb(0, 0, 0);
 shape-rendering: crispedges;
 }

.custom-vis-layout.playablebubblechart .label {
 fill: rgb(119, 119, 119);
 }

.custom-vis-layout.playablebubblechart .year.label {
 font-style: normal;
 font-variant-caps: normal;
 font-weight: 400;
 font-stretch: normal;
 font-size: 36px;
 line-height: normal;
 font-family: "Helvetica";
 fill: rgb(221, 221, 221);
 }

.custom-vis-layout.playablebubblechart circle.pointTrajectory {
 pointer-events: none;
 stroke: lightgray;
 fill: black;
 opacity: 0;
 }

.custom-vis-layout.playablebubblechart path.lineTrajectory {
 stroke-width: 2px;
 stroke-opacity: 0.5;
 stroke: black;
 fill: none;
 pointer-events: none;
 }

.custom-vis-layout.playablebubblechart .selected {
 stroke-width: 4px;
 }

.custom-vis-layout.playablebubblechart .referenceLine {
    stroke-width: 2px;
    stroke-dasharray: 5 10;
    stroke: red;
}



.custom-vis-layout.playablebubblechart #playButton {
    position: absolute;
    left: 2px;
    bottom: 2px;
    height: 24px;
    width: 24px;
}

.custom-vis-layout.playablebubblechart .play {
    background-image: url("images/playButton.png");
    background-size: contain;
}

.custom-vis-layout.playablebubblechart .stop {
    background-image: url("images/stopButton.png");
    background-size: contain;
}

.custom-vis-layout.playablebubblechart .tooltip {
    position: absolute;
    top: 2px;
    right: 2px;
    border-radius: 8px;
    padding: 8px;
    background: rgb(231, 231, 231);
    border: 2px solid lightgray;
}

.custom-vis-layout.playablebubblechart .tooltip .attrName {
    padding: 2px;
    font-weight: bold;
}

.custom-vis-layout.playablebubblechart .tooltip .attrValue {
    padding: 2px;
}

.custom-vis-layout.playablebubblechart .bubbleLabelRect {
    visibility: none;
    fill: lightgray;
}

.custom-vis-layout.playablebubblechart .bubbleLabelText {
    font-family: "Helvetica";
    fill: black;
    font-size: 10pt;
    opacity: 0.6;
    stroke: none;
    alignment-baseline: middle;
}

.custom-vis-layout.playablebubblechart .trajectory {
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

/* START - dragit.css */
.custom-vis-layout.playablebubblechart path.lineTrajectory, path.subTrajectory {
    stroke-width: 2;
    stroke-opacity: 0.2;
    opacity: 0.5;
    fill-opacity: 0.3;
    stroke: gray;
    fill: none;
    pointer-events: none;
  }
  
  .custom-vis-layout.playablebubblechart path.lineTrajectoryMonotone {
    stroke-width: 2;                            
    fill: none;   
    pointer-events: none;   
    stroke: lightgray;   
  }
  
  .custom-vis-layout.playablebubblechart circle.pointTrajectory {
     pointer-events: none;
     stroke: lightgray;
     fill: black;
     opacity: .5;
  }
  
  .custom-vis-layout.playablebubblechart line.lineClosestTrajectory {
    stroke: black;
    stroke-dasharray: 4,4;
    display: block;
  }
  
  .custom-vis-layout.playablebubblechart line.lineClosestPoint {
    stroke: black;
    opacity: .1;
    display: block;
  }
  
  .custom-vis-layout.playablebubblechart .selected {
    opacity: .5;
  }
  
  .custom-vis-layout.playablebubblechart circle.pointClosestTrajectory {
    opacity: .1;
    display: block;
  }
  
  .custom-vis-layout.playablebubblechart circle.focusGuide {
    opacity: 1;
    display: block;
    fill: none;
    stroke: black;
  }
  /* END dragit.css */