.d3barchartrace text{
    font-size: 12pt;
    font-family: Open Sans, sans-serif;
  }
  .d3barchartrace text.title{
    font-size: 18pt;
    font-weight: 500;
  }
  .d3barchartrace    text.subTitle{
      font-weight: 500;
      fill: #777777;
    }
    .d3barchartrace  text.caption{
      font-weight: 400;
      font-size: 14px;
      fill: #777777;
    }
    .d3barchartrace  text.label{
      font-weight: 600;
    }
  
    .d3barchartrace text.valueLabel{
     font-weight: 300;
    }
  
    .d3barchartrace  text.timeText{
      font-size: 48pt ;
      font-weight: 700;
      opacity: 0.25;
    }
    .d3barchartrace  .tick text {
      fill: #777777;
    }
    .d3barchartrace .xAxis .tick:nth-child(2) text {
      text-anchor: start;
    }
    .d3barchartrace  .tick line {
      shape-rendering: CrispEdges;
      stroke: #dddddd;
    }
    .d3barchartrace  .tick line.origin{
      stroke: #aaaaaa;
    }
    .d3barchartrace  path.domain{
      display: none;
    }

/*     .d3barchartrace .raceButton  {
        position: absolute; 
        width: 40px;
        height: 40px;

    } */

    .d3barchartrace .raceButton  {
      position: relative; 
      width: 20px;
      height: 20px;
      border: 1px solid rgba(256,256,256,0.8) ;
      border-radius: 50%;
      box-sizing: border-box;
  }

 

    .d3barchartrace .raceButton.play {
      background-image :     url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAWCAMAAAAYXScKAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABgUExURQAAADs7Ozs7Ozk5OTk5OTw5OTw5OTo3Nzs3Nzw4ODs4ODs3Nzw3Nzs5OTw4ODw4ODw4ODs4ODs4ODs4OEdERFNRUWxqaoSDg5GPj6moqLW0tM7Nzdra2ufm5vPz8////3B8jdgAAAATdFJOUwAaJygxWV5qgYiTlLi5vMnn8ve9fjHJAAAACXBIWXMAABcRAAAXEQHKJvM/AAAAn0lEQVQoU3WR2xKDIAwFo4iKoqL0Ym1r/v8vBRLq0MF9cXOGAZMAIep+slNXC64DrY20nACUI0eesaSwWjggliqkA5eRwYcNFycNQDGTbnf6OuYCJCviymatBMWGiJ94XIFmcynii1yDIaEUv0/v5i/dw+UmvWG7BdfJaw92df7ZvtJBh/x18U66yHd8MZ2LSean7shtyCHqzm2zp20CHHZQG/0w8N+rAAAAAElFTkSuQmCC') ; 
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: contain;
  }
  .d3barchartrace .raceButton.stop {
      background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAVCAMAAABxCz6aAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA/UExURQAAAD09PTw1NTw4ODo6Ojs4ODo3Nzs4ODs4ODw3Nzs4ODs4ODs4ODs4ODs4ODs4ODs4ODw4ODs4ODs4OP///1ZSq+YAAAATdFJOUwAVIkBCW1xkcXicoK630OTs8PEq8A0WAAAACXBIWXMAABcRAAAXEQHKJvM/AAAAdUlEQVQoU22RWQ6AIAxExxUXlPX+Z5XKhIjp+2iZF8KKyrxb5+w+Mwrjlcg1UmGNVIWwVGeYiRE3eCbihyIPhsYBTO8g59xqmrBJ6+WGU1ovT9zSenlD6k8mfaa6prq7ek71Rvrd1VcClsBciGt1+ssXvn8EPJhlF+eCw2PNAAAAAElFTkSuQmCC') ;
      background-repeat: no-repeat;
      background-position: bottom;
      background-size: contain;
  }
  .d3barchartrace .raceButton.prev {
      background-image :  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA/UExURQAAADo6Ojw4ODs5OTs3Nzw4ODs4ODo4ODs4ODs4OEdERGBdXWxqapGPj6moqMLBwc7Nzdra2ufm5vPz8////w4DJ9QAAAAJdFJOUwA1RGePmszN0wOMy/oAAAAJcEhZcwAAFxEAABcRAcom8z8AAACZSURBVChTdZHbEsMgCEQxxgsmbXrx/7+1sGDHzth9yA5HZchCphBT5pJi8BraeWh3QrRVR6q6OfR6yPB8U1UVomfvXa3d9Su9g7rTduGMA0U46PG0FxwpwZWeb+/DiQpc6ptCo5lgoAqNMmWY1ueXlqkvHy+naZ6B28No/JmXGX8h8055DSG3ZQ5/MlvnK1rtQiR7K5x9b0QfDq4OVz03d7cAAAAASUVORK5CYII=') ;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
  }
  .d3barchartrace .raceButton.next {
      background-image : url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAVCAMAAACeyVWkAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAnUExURQAAADo6Ojw4ODs5OTs3Nzw4ODs4ODo4ODs4ODs4OJGPj6moqP///6c0iaoAAAAJdFJOUwA1RGePmszN0wOMy/oAAAAJcEhZcwAAFxEAABcRAcom8z8AAACNSURBVChTddHREoUgCARQzFAx//97L4tAPXj3oR1PDdMg7ZTKTTrX4mfLLZHbhegaTsi4HP0c2fz9EhnAPXPisdZC6eyCVgC7SqFqraAcWomtATOVqVsD1gxtZLX1CRVqu4E5ob9zH3tlB85/UEyt8b/AVN3cu6+I7e24hz87O+9Xc7oLjd5bl+b3RvQDPzIMb2zxPc4AAAAASUVORK5CYII=') ;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
  }
  
.d3barchartrace .sliderDiv {
  position: absolute ;
  z-index : 1000 ;  
  box-sizing : border-box ;  
  border : none ; 
  
}

.d3barchartrace .sliderDiv .sliderLabel {
  position: absolute ;
  font-size : 12px ; 
  text-align: center ;
  overflow: hidden ; 
}




   
.d3barchartrace .ticks {
  font-size: 10px;
}

.d3barchartrace   .track,
.d3barchartrace .track-inset,
.d3barchartrace .track-overlay {
  stroke-linecap: round;
}

.d3barchartrace  .track {
  stroke: #000;
  stroke-opacity: 0.3;
  stroke-width: 10px;
}

.d3barchartrace .track-inset {
  stroke: #dcdcdc;
  stroke-width: 8px;
}

.d3barchartrace .track-overlay {
  pointer-events: stroke;
  stroke-width: 50px;
  stroke: transparent;
  cursor: grab ;
}

.d3barchartrace .handle {
  fill: #fff;
  stroke: #000;
  stroke-opacity: 0.5;
  stroke-width: 1.25px;
}


.d3barchartrace .handleLabel {
    position: absolute ;     
    background: rgb(25, 26, 26,0.5);
    text-align: center;  
}