line.histogramP50{
    fill: none;
    stroke: red;  
    stroke-width: 2;
    stroke-opacity: 0.5;
}

circle.histogramCumulative{
    fill: blue;
    stroke: blue;  
    stroke-width:3;
    stroke-opacity: 0.5;
    fill-opacity: 0.5;
}

path.histogramCumulative{
    stroke-width:2;
    stroke: blue;  
    fill:none;  
    stroke-opacity: 0.5;
}

rect.histogramBar.histogramBarHighlight{
    opacity: 1;
    stroke-width: 0;
}

rect.histogramBar{
    opacity: 0.7;
    stroke-width: 0;        
}

text.histogramBar{
    /*font-weight: bold;*/
    pointer-events: none;    
    /*font-family: Courier New,  Courier, monospace;*/            
}

.histogramStart{
    stroke-width: 3px;
    fill-opacity: 0;
    stroke-dasharray: 5,5;
    stroke: black;
    pointer-events: none;
}

.noStyle {

}

.legendColorBorder {
    border-style:solid;
    border-width:thin;
    border-color:black;
}

.tileBackgroundImage{
    opacity:1;
}

.unRotate {
    -ms-transform: rotate(90deg) translate(0%,0%);
    -webkit-transform: rotate(90deg) translate(0%,0%);
    transform: rotate(90deg) translate(0%,0%);
}

.rotateNeg90 {
    -ms-transform: rotate(-90deg) translate(-100%,0%);
    -webkit-transform: rotate(-90deg) translate(-100%,0%);
    transform: rotate(-90deg) translate(-100%,0%);
}

.drawingFill{
    opacity: 1;
}

.zoomHide {
    fill: black;
    opacity: 0.5;
}

.plotDropDownMenu{
    z-index:1000;
    vertical-align:top;
}  

.noOpacity {
    opacity:0;
}

.noEvents {
    pointer-events:none;
}

.stamp {
            
}
    
.trackSection {
    opacity:0.4;
    stroke-width:0;
}

.noteTextBoxPreview {

}

.noteTextBox {

}

.noteImage{
    max-height : 200px;
    max-width: 200px;
}        

.noteLabel{
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    stroke:black;
    fill:black;
    cursor:pointer;           
    font-weight:100;
    text-transform: uppercase;
    letter-spacing: 0.5px;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.noteLabel:hover{
    stroke:blue;
}        

.noteLabel:active{
    fill:lightblue;
    stroke:lightblue;
}        

.chartBackground {
    fill: white;
    
}

div.shadeMenu {
    position: absolute;
    width: auto;
    height: auto;
    background-color: white;
    border: solid;
    border-width: 2px;
    border-color: black;
    padding: 5px;
}

ul.shadeMenu {
    list-style: none;
    padding-left: 0;
}               

div.chartArea {
    position: relative;
}
        
.yAxis, .yAxisTick  {
    stroke: black;
    stroke-width: 1px;
}



.yAxisTickLabel  {            
    font-family: sans-serif;       
    text-anchor: end;            
}

.dontshowpoint {
    opacity: 0;
}

.showPoint {
    opacity: 0.8;
}

.point:hover {
    stroke: black;
    stroke-opacity: 0.4;
    opacity: 0.8;
    cursor: pointer;
}

.seriesLineOutOfBounds{
    stroke-dasharray: 5,5
}

.hideSeriesLineOutOfBounds{
    display:none;
}

.line {                        
    /*stroke-width: 2px;*/
    fill-opacity: 0;
}

.lineHitBox {
    stroke-width: 60px;
    opacity: 0;
}

.emphasizeLine {
    stroke-width: 6px;
}

.highlightLine {
    stroke-width: 4px;
}

.highlightArea {
    fill-opacity: 0.6;
}

.area, .highlightArea, .hideArea, .line {
    -webkit-transition: fill-opacity 0.5s, stroke-opacity 0.5s, stroke-width 0.5s; /* For Safari 3.1 to 6.0 */
    transition: fill-opacity 0.5s, stroke-opacity 0.5s, stroke-width 0.5s;
}

.area {            
    pointer-events: none;
}

.hideArea {
    stroke-opacity: 0;
    stroke-width: 0;
    fill-opacity: 0;
    pointer-events: none;
}

.xDrawingGridLine, .yDrawingGridLine{
    stroke: #b3b3b3;
}

.xGridLine, .yGridLine,.xMajorGridLine, .yMajorGridLine, .xDrawingGridLine, .yDrawingGridLine {
    stroke-opacity: 0.5;
    stroke-width: 1;
}

.xGridLine, .yGridLine {
    stroke: lightgrey;
}

.xMajorGridLine, .yMajorGridLine {
    stroke: slategray;            
}

.xBorderGridLine, .yBorderGridLine {
    stroke-opacity: 1;
    stroke-width: 2;
    stroke: black;            
}

.sectionLabel {
    font-family: sans-serif;       
    /*text-anchor: middle;*/    
    text-anchor: start;  
    font-size: 12px;  
}

.yNamedSectionsGridLine {
    stroke-opacity: 1;
    stroke-width: 2;
    stroke: slategray;              
}

.coordTooltip {
    position: absolute;
    width: auto;
    height: auto;
    pointer-events: none;
    opacity: 0.7;
    padding: 5px;
    background-color: black;
    color: white;
}

.toolTipText {
    margin: 0;
    font-family: sans-serif;
    font-size: 12px;
    line-height: 20px;    
}

.chartTitleContainer {
    background-color:white;
    pointer-events:all;
}

.chartTitleContainer, .chartGroupTitleContainer {    
}


.chartTitle {
    font-weight: bolder;
    text-align: left;         
    text-transform: uppercase;
    background-color:white;
    text-overflow:clip;
    overflow:visible;      
}

.chartGroupTitle {
    text-align:center;
    font-weight: normal;
    font-size:x-large;        
}

.chartGroupTitle {  
    text-overflow:ellipsis;
    overflow:hidden;          
}

.chartTitle, .chartGroupTitle {  
    display:inline-block;
    vertical-align:bottom;    
    white-space:normal;
}

.chartLegend {
    list-style: none;
    list-style-type: none;
    list-style-position:inside;
    margin:0;
    padding:0;       
}

.legendMax, .legendMin, .legendSeriesName{
    font-size: smaller;
}

.allTitlesContainer {    
    pointer-events:none;
}

.legendContainer {
    background-color:white;
}

.allTitlesContainerPlaceholder {
}

.legendContainer, .allTitlesContainer{
    z-index: 500;
    position:absolute;
}

.legendItemContainer {
    display: -webkit-flex;
    display: flex;              
}

.legendInputMin, .legendInputMax {
    width: 90%;
    background-color: transparent;
    border: 0px solid;                  
}

.legendInputMin {
    margin-left: 3px;
}

.legendInputMax {
    margin-right: 3px;
}

.legendMin {            
    text-align: left;
    -webkit-flex: 1;
    flex: 1;
}

.legendMax {
    text-align: right;
    -webkit-flex: 1;
    flex: 1;            
}
.legendSeriesName {
    text-align: left;
    -webkit-flex: 1;
    flex: 1;            
}

.legendSeriesNameClickable {    
    cursor: pointer;
}

.legendSeriesNameNotClickable {        
    color:grey;
}

.legendSeriesNameHighlight {
    font-weight: bold;
}

.legendVisibilityControl {
    margin: 2px;
}

.legendColor {
    border-width: 2px;
    border-color: black;
    height: 12px;
    width: 12px;
    cursor: pointer;
    display: inline-block;            
}

.horizHitBox {
    stroke: black;
    stroke-width: 8px;
    stroke-opacity: 0;
}

.topsLineClass {            
    stroke: #0011ff;    
    stroke-width: 2px;            
    stroke-opacity: 0.6;                        
}

.photoLineHitBox {
    stroke: teal;
    stroke-width: 20px;
    cursor: pointer;
    stroke-opacity: 0;
}

.photoLineTouchHitBox{
    stroke: teal;
    stroke-width: 100px;
    cursor: pointer;
    stroke-opacity: 0;
}

.defaultHorizontalLine {
    stroke: black;    
    stroke-width: 2px;            
    stroke-opacity: 0.6;
}        

.photoLineBuffer {
    stroke: red;
    stroke-width: 1px;
    stroke-opacity: 1;
    cursor: pointer;
}

.photoLine {
    stroke: red;
    stroke-width: 2px;
    stroke-opacity: 1;
    cursor: pointer;
}

.photoImage {
    cursor: pointer;
}

.lineLabel {
    font-size: small;
    position: absolute;
    text-align: right;
}
     
.measurementStartPoint, .measurementEndPoint {
    stroke: black;
    stroke-opacity: 0.4;
    opacity: 0.8;
    cursor: pointer;
}

.measurementConnector {
    stroke-width: 1px;
}

/*Tops ld t styles*/
.chartFunctionButton {
    cursor: pointer;
    margin: 3px;            
    pointer-events:all;
}

.chartFunctionButton:hover {
    cursor: pointer;
    color: orange;
}

.lineTrackTitleMouseOver {
    position: absolute;
    left: auto;
    right: auto;
}

.track {
    display: inline-block;   
    vertical-align:top;   
}

.photoThumbnail:hover {            
    opacity: 0;            
}

.photoThumbnail {
    position: absolute;            
    cursor: pointer;
}

.inlineBlock {
    display: inline-block;
}

#photoPreview {            
    /*-webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);*/    
    /*-webkit-transform: rotate(90deg) translate(-50%, -50%);
    -moz-transform: rotate(90deg) translate(-50%, -50%);
    -o-transform: rotate(90deg) translate(-50%, -50%);
    -ms-transform: rotate(90deg) translate(-50%, -50%);
    transform: rotate(90deg) translate(-50%, -50%);*/            
    /*position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;            
    margin: auto;
    max-width: 90%;
    max-height: 90%;*/
    /*pointer-events: none;*/
    /*background-color: black;*/                    
    /*width: 70%;*/
    /*height: 70%;*/
}

.photoMidSize {
    /*max-width: 90%;
    max-height: 15%;*/

    /*margin: auto;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);*/
    display: inline-block;
    max-height: 800px;
}

.hide {
    display: none;
}
.shadingTextBox {
    max-width: 25px;
}

line.photoBarrier {
    stroke-width:2px;
    stroke: red;
}

rect.photoResizer {
    stroke-width: 2px;
    stroke: black;
    fill: white;
    cursor: s-resize;
}
.moveCursor {
    cursor: move;
}

.photoFilter {
    opacity: 0.2;
    fill: transparent;
}

.selectedPhoto {
    fill: blue;
}
.selectedOriginPhoto {
    fill: green;
}
.photoLabel {
    font-size: smaller;
    fill: red;
    transform: translate(5px, 10px);
    font-weight:bold;
}