d3panels.css

/* figures will always be within a div with class="qtlcharts" */
svg.qtlcharts, svg.d3panels {
    font-family: sans-serif;
    font-size: 11pt;
}

svg.qtlcharts .title text, svg.d3panels .title text {
    dominant-baseline: middle;
    fill: #0074D9;
    text-anchor: middle;
}

svg.qtlcharts .y.axis text, svg.d3panels .y.axis text {
    dominant-baseline: middle;
    text-anchor: end;
}

svg.qtlcharts .y.axis text.title, svg.d3panels .y.axis text.title {
    text-anchor: middle;
    fill: slateblue;
}

svg.qtlcharts .x.axis text, svg.d3panels .x.axis text {
    dominant-baseline: hanging;
    text-anchor: middle;
}

svg.qtlcharts .x.axis text.title, svg.d3panels .x.axis text.title {
    fill: slateblue;
}

svg.qtlcharts line.axis.grid, svg.d3panels line.axis.grid {
    fill: none;
    stroke-width: 1;
    pointer-events: none;
}

svg.qtlcharts line.x.axis.grid, svg.d3panels line.x.axis.grid {
    stroke: rgb(200, 200, 200);
    stroke-width: 3;
}

svg.qtlcharts line.y.axis.grid, svg.d3panels line.y.axis.grid {
    stroke: white;
}

svg.qtlcharts .extent, svg.d3panels .extent {
    fill: #cac;
    opacity: 0.3;
}

svg.qtlcharts circle.selected, svg.d3panels circle.selected {
    fill: hotpink;
    opacity: 1;
}

svg.qtlcharts a, svg.d3panels a {
    color: #08c;
    text-decoration: none;
}

svg.qtlcharts a:hover, svg.d3panels a:hover {
    color: #333;
    text-decoration: underline;
}

svg.qtlcharts text.crosstab, svg.d3panels text.crosstab {
    dominant-baseline: middle;
    text-anchor: end;
}

svg.qtlcharts text.crosstabtitle, svg.d3panels text.crosstabtitle {
    dominant-baseline: middle;
    text-anchor: center;
}

/* figure captions */
.caption {
    font-family: Sans-serif;
    font-size: 11pt;
    margin-left: 60px;
    width: 600px;
}


/* tool tips */
div.d3panels-tooltip {
          position: absolute;
          text-align: center;
          width: max-content;
          height: min-content;
/*          max-width: 160px; */
          padding: 5px;
          font-size: 16px;
          font-family: sans-serif;
          font-weight: bold;
          background: darkslateblue;
          color: white;
          text-align: center;
          border: 0px;
          border-radius: 3px;
          pointer-events: none;
          z-index: 999;
}
/* tool tip */
div.d3panels-tooltip-tri {
          position: absolute;
          text-align: center;
          width: 32px;
          height: 32px;
          padding: 0px;
          font-size: 16px;
          font-family: sans-serif;
          font-weight: bold;
          background: #ffffff00;
          color: darkslateblue;
          text-align: center;
          border: 0px;
          pointer-events: none;
          z-index: 998;
}


/* error message */
div.error p {
    font-family: sans-serif;
    font-size: 16pt;
    font-weight: bold;
    padding: 5px;
}

div.qtlcharts {
    font-family: sans-serif;
    font-size: 12pt;
}

div.searchbox {
    font-family: Sans-serif;
    font-size: 12pt;
    margin-left: 60px;
}

/* default form input made gray */
div.searchbox.inactive input {
  color: #888;
}