html, body {
  position: relative;
  height: 100%;
  font-family: Arial, Helvetica, sans-serif !important; 
  /*font-family: 'Open Sans' !important;*/
}

.ui-layout-pane {
    background: #FFFFCC;
}

#sldplot, #rplot {
    width: 100%;
    height: 48%;
    position: relative;
}

.axis-label {
  font-size: 18px;
}

.axis .tick text {
  font-size: 14px;
}

.axis path,
.axis line {
  fill: none;
  stroke: #FFF;
  shape-rendering: crispEdges;
}


.grid path {
      stroke-width: 1;
      fill: none;
}
.grid .tick {
    stroke: DarkGreen;
    opacity: 0.4 !important;
    stroke-width: 1;
    shape-rendering: crispEdges;
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
}
 
.axis path {
    fill: none;
    stroke: green;
    stroke-width: 2px;
    shape-rendering: crispEdges;
}
 
.axis text {
    fill: green;
}
 
.axis line {	
    stroke: green;
    shape-rendering: crispEdges;
}
 
.axis .axis-label {
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
}

text.axis-label tspan.sup, text.axis-label tspan.sub {
    font-size: 50%;
}

.legend, .tick {
    user-select: none; 
    -webkit-user-select: none; 
    -moz-user-select: none;
}

#rplot path.line {
    fill: none;
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-opacity: 1;
}

#sldplot path.edge, path.extension {
    fill: none;
    stroke-width: 12px;
    stroke-linejoin: round;
    stroke-opacity: 0.25;
}

#sldplot path.extension {
    stroke-linejoin: miter;
    stroke-dasharray: 5,15; 
}

.highlight {
    stroke-width: 4.5px;
}
 
.corner {
    /* consider the stroke-with the mouse detect radius? */
    stroke: transparent;
    stroke-width: 10px;  
    cursor: pointer;
}
 
.corner:hover, .corner.selected {
    stroke: rgba(68, 127, 255, 0.3);
}

rect {
  fill: none;
  user-select: none; 
  -webkit-user-select: none; 
  -moz-user-select: none;
}

rect.zoom {
    stroke: steelblue;
    fill-opacity: 0.5;
}
table {
    display: inline-block;
    border-collapse: collapse;
}
table, th, td {
    border: 2px solid green;
}

table td.data-cell.meaningless span {
    opacity: 0.25;
    pointer-events: none;
    user-select: none;
}

table td.data-cell {
    background-color: white;
    color: DarkBlue;
}

table td.data-cell.selected:not(.meaningless) {
    background-color: lightgreen;
}

table td.data-cell.parse-error {
    background-color: pink !important;
}

table td.data-cell:focus-within {
    outline: 3px solid green;
    outline-offset: -3px;
}

table span.data-value {
  padding: 2px;
  border: 1px;
  color: inherit;
  user-select: inherit;
  outline: none;
}

text.position-cursor {
    stroke: white;
    fill: white;
}

#q_controls {
  padding-bottom: 1em;
}

.q-range.controls {
    vertical-align: top;
    display: inline-block;
    margin-right: 0px;
}

.q-range.controls input {
    margin-right: 0;
}

#centerpane, #right {
    background-color: black;
    color: yellow;
}

div.flex-column {
   display: -webkit-flex;
   display: flex;
   -webkit-flex-direction: column;
   flex-direction: column;
   height: 100%;
}

footer {
  text-align: center;
  margin-top: auto;
}

footer a {
  color: LightGreen;
}

hr {
  width: 100%;
}

hr.betweenplots {
    border-color: white;
    opacity: 0.4;
}

.fit.log {
    width: 100%;
    text-align: left;
}

.ui-dialog.help {
    width: 75% !important;
}

.ui-dialog.help h3 {
    margin-bottom: 4px !important;
}

.ui-dialog.help .footer {
    font-size: 80%;
}