svg {
  font: 12px sans-serif;
  /*shape-rendering: crispEdges;*/
}

/*trying to solve issues in firefox that adds big round borders on text inputs*/
input[type=text] {
    border-top-width: 1px;
    border-left-width: 1px;
    border-bottom-width: 2px;
    border-right-width: 1px;
}


#newPlotLink, #globalSettings{
    width: 100px;
    position: absolute;
    cursor: pointer;
    text-decoration: underline;
    color: #007bff;
    font-weight: bold;
    user-select: none;
    text-align: center;

}

#globalSettingsContainer{
    position: absolute;
    background-color: white;
    border-color: #444;
    border-style: solid;
    border-width: 1px;
    padding: 4px;
    z-index: 501;
    display: none;
}

#labelFontSize, #tickFontSize{
    width: 146px;
}

.removePlot{
    position: absolute;
    font-size: 1.5em;
    z-index: 500;
    width: 12px!important;
    height: 12px!important;
    cursor: pointer;
    opacity: 0.7;
}

.arrowChangePlot{
    position: absolute;
    font-size: 1.5em;
    z-index: 500;
    margin-left:-4px;
    color: #444!important;
    cursor: pointer;
}


#zoomXBox {
    cursor:ew-resize;
}

.zoomYBox, .zoomY2Box{
    cursor: ns-resize;
}


.axis path,
.axis line {
    fill: none;
    shape-rendering: crispEdges;
    stroke: #ccc;
    stroke-dasharray: 2;
    stroke-width: 1;
}

.color.axis path,
.color.axis line {
    fill: none;
    shape-rendering: crispEdges;
    stroke: #ccc;
    stroke-dasharray: 0;
    stroke-width: 1;
}


.subaxis path,
.subaxis line {
    fill: none;
    shape-rendering: crispEdges;
    stroke: #777;
    stroke-width: 1;
}


#filters .axis path,
#filters .axis line {
    fill: none;
    stroke: black;
    stroke-width: 1;
    shape-rendering: crispEdges;
    stroke-dasharray: none 
}


.color.axis{
    cursor: ns-resize;
}

/*#rectangleOutline{
    fill: none;
    shape-rendering: crispEdges;
    stroke: #ccc;
    stroke-width: 1;
}*/

.cogIcon{
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACkAAAApCAYAAACoYAD2AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3RJTUUH4gUHDBgdKmiqBAAAAetJREFUWMPt1k+ITlEYx/GPaUKaSMRMMwssRhkrokTiKckGyxH5kyyUslI2KISUWEmNBSELRdmqJylZ+bO0JJT8WaBRDMbmvnV7m1dmvO87qfutW/f8znPP/d1znufcQ0VFRUVFRTuY0oxBImIK3mNOIS3MzBfNMtnRpHEWlQzCimbOZMcEZq0vItbUySv+1I6I/ohY1pbljohpeICVuIez2Ii9mF0K/YZbGCr6tuMDlmfmm/Ga7Bxn/KnCIGworrGYhh3FVWM+rmN9q5f7GoYnuGqjuNzynMzMZ9hVvLDMVSzBVCzAcfysizmdmTcmYrJzAs/cxkfMrbUzc3ep/yWORcQITpT0oXZuQf0lg7U8HYtzRQHVWNXy6o6ITgziMAZKXV2ZOdzgmedYXDTf4gIuZeanVs3k06JwBur0vgYGO9BbkrpxBq8ior9VJht9/f4G+k50jaFPx+tWFc5jrB5DPxARL3AxM78X//EtON9gnCeZ+bVVOTkLs/AFPXiEmaWQz0Vl99QV1ig24yFmYCQz37XlFBQRW3HnL0JPZuaRyToFNesE1ZLNvMbauvaVIgV6cbSkr5tMk92l+/vYl5k/Svl7sOibFxEdmfmr7UuWmYPYhLvYVjNYcAg3sQdL/8VgRUVFRUVFxf/Hb5P/eXsCd5P8AAAAAElFTkSuQmCC');
    background-position: center; 
    cursor: pointer;
    height: 41px;
    position: absolute;
    width: 41px;
    z-index: 20;
}


.filterContainer{
    box-shadow: 3px 3px 2px #ccc;
    margin-left: 4px;
    margin-top: 3px;
    padding-top: 10px;
    position: relative;

}

.boolParameterContainer{
    margin-top: 6px;
}

.boolParameterContainer input {
    float: left;
    margin-top: 0px;
}

.choiceParameterContainer {
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 6px;
}

.choiceParameterContainer label{
    float: left;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 2px;
}

.choiceParameterContainer select{
    float: right;
}


.brush .extent{
    fill-opacity: 0.6;
}

.parameterLabel {
    font-size: 0.8em;
    position: absolute;
    transform-origin: left;
}


.axisLabel{
    cursor: pointer;
    pointer-events: all;

}

#regressionInfo{
    background-color: white;
    font-family: arial;
    font-weight: bold;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    text-align: center;
    width: 400px;
    z-index: 5;
}

.parameterInfo{
    position: absolute;
    background-color: white;
    border-color: #444;
    border-style: solid;
    border-width: 1px;
    font-family: arial;
    padding: 1px;
    text-align: center;
    width: 270px;
    z-index: 500;
}

.color-picker-h, .color-picker-sv{
    top: 0px;
}

.svgIcon{
    margin-right: 5px;
}

.labelitem{
    color: #007bff;
    cursor: pointer;
    font-weight: bold;
    margin: 5px;
}

.labelitem:hover { 
    text-decoration: underline;
}

.parameterClose{
    cursor: pointer;
    float: right;
    margin-top: -9px;
}


#parameterSettings label, 
#parameterSettings input,
#parameterSettings select {
    display: inline-block;
}

#parameterSettings label {
    text-align: right;
    width: 30%;
}

#parameterSettings label {
    margin-bottom: 10px;
}

#parameterSettings label + input{
    margin: 0 5% 0 4%;
    width: 55%;
}

#parameterSettings label + select{
    margin: 0 3% 0 4%;
    width: 57%;
}

#parameterSettings input + input {
    float: right;
}

#parameterSettings input + select {
    float: right;
}

#opacityInput{
    vertical-align: middle;
}


#parameterSettings{
    background-color: white;
    border-color: #444;
    border-style: solid;
    border-width: 1px;
    font-family: arial;
    max-height: 80%;
    overflow-y: auto;
    padding: 5px;
    padding-top: 15px;
    position: absolute;
    width: 262px;
    z-index: 500;
}

.buttonContainer{
    width: 100%;
}

#applyButton{
    width: 100%;
}


.yAxisPanel, .y2AxisPanel{
    background-color: white;
    border-color: #999;
    border-style: solid;
    border-width: 1px;
    /*max-height: 200px;*/
    padding-right: 24px;
    padding: 5px;
    position: absolute;
    width: 210px;
    z-index: 500;
    /*overflow-y: auto;*/
}


#xSettings{
    background-color: white;
    border-color: #999;
    border-style: solid;
    border-width: 1px;
    /*height: 200px;*/
    padding-right: 24px;
    padding: 5px;
    position: absolute;
    width: 210px;
    z-index: 500;
   /* overflow-y: auto;*/
}

.choices__inner{
    min-height: 22px!important;
}

.choices__list--dropdown .choices__item--selectable {
    padding-right: 5px!important;
}


.choices__item{
    font-size: 12px !important;
    padding-bottom: 5px!important;
    padding-top: 5px!important;
}

.choices__list--single {
    padding: 0px!important;
}


#colorscaleContainer{
    float: right;
    height: 100%;
}


.filterContainer.maskfilter {
    overflow-x: hidden;
    overflow-y: scroll;
}

.maskinput{
    float: left!important;
    position:relative;
    margin-left: 0px;
}

.filterContainer label{
    top: -2px;
    display:inline-block;
    font-size: 0.8em;
    position:relative;
    vertical-align:middle;
    width: 120px;
}


.editButton{
    margin-top: 3px;
    margin-left: 23px;
    border-color: #555;
    border-radius: 2px;
    border-style: solid;
    border-width: 1px;
    cursor: pointer;
    height: 10px;
    margin-right: 5px;
    float: left;
    text-align: center;
    width: 10px;
    z-index: 5;
}

.editButton.add:before {
    content: "+";
    line-height: 11px;
}


.editButton.remove:before {
    content: "–";
}



/* Label selection styles */
.choices__inner{
    margin-top: 9px;
    padding: 0!important;
}

.choices__list{
    padding-left: 5px!important;
}

.choices__item.choices__item--selectable{
    margin-top: 3px!important;
}

.choices__item{
    border-radius: 3px!important;
}

.cross {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSIjMDAwIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIGQ9Ik0yLjU5Mi4wNDRsMTguMzY0IDE4LjM2NC0yLjU0OCAyLjU0OEwuMDQ0IDIuNTkyeiIvPjxwYXRoIGQ9Ik0wIDE4LjM2NEwxOC4zNjQgMGwyLjU0OCAyLjU0OEwyLjU0OCAyMC45MTJ6Ii8+PC9nPjwvc3ZnPg==);
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-size: 100%;
    height: 8px;
    width: 8px;
}

.labelClose{
    cursor: pointer;
    position: absolute;
    right: 3px;
    top: 3px;
    z-index: 1;
}

.pencilIcon{
    position: absolute;
    right: 9px;
    top: -2px;
    z-index: 1;
    transform: rotate(-180deg);
}

.pencilIcon:before{
    content: "\2710 ";
    position: absolute;
    left: 0px;
    top: -2px;
    font-size: 13px;
}

.eraserIcon{
    background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAMAAACecocUAAAARVBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADc6ur3AAAAFnRSTlMAAgMKCxUbHjM0XWFim6CmtbnDxd7xXSXl0gAAAEZJREFUCFs9x0kCgCAMBMEOirvigvz/qSYRnct0ga0XP9tSjvBn+WBZMXsqhHG9KzouiS8myODQJLUOS+LeEDZPRcrn4PUAJlkEj+JsHDEAAAAASUVORK5CYII=");
    background-position: 1px -1px;
    right: 23px;
    top: -2px;
    position: absolute;
}

#ySettings .choices{
    margin-bottom: 5px!important;
}

.axisOption{
    font: 400 13.3333px Arial;
    margin-top: 15px;
}

.axisOption label {
    cursor: pointer;
}

.axisOption input {
    float: right;
    margin-top: 1px;
    vertical-align: top;

}

.axisOption input[type=text]{
    width: 150px;
}


.graphlyTooltip{
    background-color: white;
    display: none;
    font-family: 'arial';
    font-size: 0.9em;
    max-height: 250px;
    overflow-y: auto;
    padding: 5px;
    position: absolute;
    width: 365px;
    z-index: 501;
}

 #xAxisCustomLabel, #yAxisCustomLabel, #y2AxisCustomLabel{
    margin-top: -3px;
}

.modifyAxisIcon{
    pointer-events: all;
}

.modifyAxisIcon:hover, #rangeEditCancel:hover, #rangeEditConfirm{
    cursor: pointer;
}

#rangeEditCancel, #rangeEditConfirm{
    padding: 0;
    width: 16px;
    height: 22px;
    margin-top: 1px;
}

.rangeEdit{
    margin: 2px;
    position: absolute;
    border-radius: 1px;
    border-width: 1px;
    font-size: 11px;
    z-index: 20;
    height: 17px;
}

#rangeEditMin, #rangeEditMax{
    padding-left: 2px;
    min-width: 22px;
    width: auto;
}

.wrongFormInput{
    background-color: #ffd0d0!important;
}

.hidden{
    display: none;
}

.groupSelect {
    position: absolute;
    z-index: 5;
}