:root {

}

:root[color-mode="light"] {

  --the-needle: rgb(200,200,200);
  --griddy: rgb(220,220,220);
}

:root[color-mode="dark"] {
  --griddy: rgb(43,43,43);
  --the-needle: rgb(65,65,65)
}

.insights-report {
  position: relative;
  width: 100%;
  margin-left: 0px;
  font: 11px var(--font);
  color: var(--font-color-base);
  /* background-color: red; */
  /* height: 150px; */
  padding: 2.5px;
  border-bottom: var(--container-border-base);
  border-top: var(--container-border-base);
}

.insights-report > .fa-stars { font-size: 8.5px; color: gold; }

.insight-sample {
  color: var(--olive);
  position: relative;
  font-size: 17.5px;
  font-weight: bold;
}

.insight-sample-bad {
  color: var(--red);
}

.insights-container {
  position: relative;
  width: 100%;
  margin-left: 0px;
  /* background-color: red; */
  /* height: 150px; */
  padding: 2.5px;
}

.insights-inner {
  /* position: absolute; */
  /* width: calc(100% - 5px); */
  /* height: calc(100% - 5px); */
  /* background-color: yellow; */
  padding: 0px;
}

.insights-inner-1 { padding-right: 1px; }
.insights-inner-2 { padding-left: 1px; }

.insights-main-title {
  position: relative;
  padding: 2px;
  font: 10px var(--font);
  color: var(--blue);
  font-weight: bold;
  /* background-color: green; */
}

.insight-info-container {
  /* position: relative; */
  margin-left: -0.5px;
  border-radius: 1px;
  padding: 1px;
  padding-top: 0.5px; padding-bottom: 0.5px;
  cursor: pointer;
}

.insight-info-container:hover {
  /* background-color: var(--container-color-base); */
}

.insights-content {
  position: relative;
  /* background-color: yellow; */
  /* height: 100px; */
}

.insights-content-stddev, .insights-content-decomp, .insights-content-bomb {
  padding: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
}

.insights-main-title > .fa-chevron-square-right { color: var(--font-color-base); font-size: 7.5px; position: relative; top: -0.5px; }

.std-dev-title, .std-dev-insights, .gauge-insights {
  position: relative;
  width: 100%;
  font: 10px var(--font);
  color: var(--font-color-base);
  /* font-weight: bold; */
}

.decomp-legend {
  position: absolute;
  right: 0px;
  top: 0px;
  height: 100%;
  /* background-color: red; */
  display: flex;
  justify-content: center;
  align-items: center;
}

.decomp-legend-item {
  float: right;
  color: var(--font-color-base);
  margin-left: 7px;
  font-size: 7px;
}

.decomp-legend-item > .fa-square {
  position: relative;
  top: 0.5px;
  font-size: 9px;
}

.insights-content-bomb > .std-dev-title {
  text-align: center;
  padding-right: 7.5px;
}

.std-dev-insights, .gauge-insights {
  margin-top: 10px;
  width: 95%;
  margin: auto;
  border-top: var(--container-border-base);
  color: var(--font-color-faint);
  padding: 7.5px;
}

.decomp-plot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: auto;
  margin-top: 12.5px;
  border: var(--container-border-base);
  /* background-color: red; */
  height: 22.5px;
}

.decomp-title {
  position: absolute;
  left: 1px;
  bottom: calc(100% + 1.5px);
  font: 8px var(--font);
  color: var(--font-color-faint-2);
  /* font-weight: bold; */
}

.decomp-plot-2 > .decomp-title {
  color: var(--font-color-faint);
  /* font-weight: bold; */
}

.decomp-plot-3 > .decomp-title {
  color: var(--font-color-base);
  font-weight: bold;
}

.decomp-div {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 8.5px var(--font);
  font-weight: bold;
  color: var(--font-color-faint);
  top: 0px;
  height: 100%;
  cursor: pointer;
}

.decomp-div-null {
  left: 0px;
  width: 100%;
}

.decomp-plot-3 > #putt.decomp-div:hover {
  color: white;
}

.decomp-low { color: transparent; }

.chart-gauge-outer {
  position: relative;
  height: 145px;
  /* background-color: red; */
  width: 95%;
  margin: auto;
  border-bottom: var(--container-border-base);
}

.chart-gauge {
  width: 300px;
  margin: auto;
  position: relative;
  /* border-bottom: var(--container-border-base); */
}

.gauge-text {
  position: absolute;
  font: 8px var(--font);
  color: var(--font-color-faint-2);
  width: 70px;
  text-align: center;
  /* background-color: red; */
}

.gauge-legend {
  position: absolute;
  left: calc(100% - 75px);
  width: 150px;
  /* background-color: red; */
  /* height: 50px; */
  pointer-events: none;
  top: 0px;
}

.gauge-leg {
  position: relative;
  padding: 2px;
  font: 8px var(--font);
  color: var(--font-color-faint);
}

.gauge-leg-this { color: var(--font-color-base); }

.gauge-text-beware { left: calc(50% - 125px - 5px); top: 110px; color: var(--blue); }
.gauge-text-disfavours { left: calc(50% - 95px - 5px); top: 55px; color: var(--blue-light); }
.gauge-text-neutral { left: calc(50% - 35px - 5px); top: 40px; }
.gauge-text-favours { left: calc(50% + 25px - 5px); top: 55px; color: var(--olive-light); }
.gauge-text-paradise { left: calc(50% + 55px - 5px); top: 110px; color: var(--olive); }

.gauge-straight-para { color: var(--blue); font-weight: bold; }
.gauge-straight { color: var(--blue-light); font-weight: bold; }
.gauge-neutral { color: var(--font-color-faint-2); font-weight: bold; }
.gauge-bomb-para { color: var(--olive-light); font-weight: bold; }
.gauge-bomb-para { color: var(--olive); font-weight: bold; }

.gauged {
  color: var(--font-color-base);
  font-weight: bold;
  -webkit-transition: all 500ms linear;
  -moz-transition: all 500ms linear;
  -o-transition: all 500ms linear;
  transition: all 500ms linear;
}

.chart-color1 {
  fill: var(--blue-light);
  stroke: var(--container-color-base);
}
.chart-color2 {
  fill: var(--blue-superlight);
  stroke: var(--container-color-base);
}
.chart-color3 {
  fill: var(--black-base);
  stroke: var(--container-color-base);
}
.chart-color4 {
  fill: var(--olive-superlight);
  stroke: var(--container-color-base);
}
.chart-color5 {
  fill: var(--olive-light);
  stroke: var(--container-color-base);
}

.needle,
.needle-center {
  fill: var(--font-color-base);
}

.avg-needle {
  fill: var(--the-needle);
  /* stroke: var(--olive); */
}


.std-dev-plot {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 90%;
  margin: auto;
  padding-top: 15px;
  /* background-color: red; */
  height: 70px;
}

.the-bar {
  position: absolute;
  background-color: var(--container-color-base);
  border: var(--container-border-base);
  border-radius: 2.5px;
  height: 5px;
  width: 100%;
}

.sd-axis-text {
  position: absolute;
  top: calc(100% + 5px);
  width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 8px var(--font);
  color: var(--font-color-faint-2);
  opacity: 0.75;
}

.the-bar-notable {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 15px var(--font);
  color: var(--font-color-base);
  font-weight: bold;
  /* pointer-events: none; */
}

.average-notable, .course-notable {
  width: 20px;
  bottom: calc(100% + 5px);
  text-align: center;
}

.bar-notable-text {
  position: absolute;
  display: none;
  font-size: 7px;
  color: var(--font-color-base);
  bottom: calc(100% + 2.5px);
  width: 50px;
}

.bunched-notable {
  left: 5px;
  font-size: 7.5px;
  width: 120px;
  bottom: calc(100% + 17.5px);
  text-align: left;
}

.spread-notable {
  left: unset;
  font-size: 7.5px;
  right: 5px;
  width: 120px;
  bottom: calc(100% + 17.5px);
  text-align: right;
}

.bar-notable-inner-upper {
  position: relative;
  color: var(--font-color-base);
  width: 100%;
}

.bunched-notable > .bar-notable-inner-upper, .spread-notable > .bar-notable-inner-upper {
  color: var(--container-color-base) !important;
}

.course-notable > .bar-notable-inner-upper {
  color: var(--olive) !important;
}

.average-notable > .bar-notable-inner-upper {
  /* opacity: 0.75; */
}

.bar-notable-inner-lower {
  color: var(--font-color-base);
  position: relative;
  font-size: 8px;
  margin-top: -1px;
  width: 100%;
}

.the-sd-ball {
  position: absolute;
  height: 15px;
  width: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  top: calc(10% - 7px);
}

.the-sd-ball-ball {
  position: absolute;
  height: 12px;
  width: 12px;
  top: 1.5px;
  background-color: var(--olive);
  left: -6px;
  border: 1px solid var(--font-color-base);
  border-radius: 6px;
}

.the-sd-text {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 100px; */
  /* left: -50px; */
  bottom: calc(100% + 1px);
  /* width: 100px; */
  font: 14px var(--font);
  font-weight: bold;
  pointer-events: none;
  color: var(--font-color-base);
  background-color: var(--black-base);
}

.sd-bumped {
  bottom: unset;
  top: calc(100% + 1px);
}

.the-plots {
  position: relative;
  width: 100%;
  white-space: nowrap;
  overflow-x: scroll;
  padding: 5px;
  padding-left: 0px;
}

.corr-plot {
  display: inline-block;
  position: relative;
  width: 220px !important;
  margin: 5px;
  margin-left: 10px;
  margin-top: 10px;
  /* bottom: 5px; */
  margin-left: 2.5px;
  /* margin-right: 2.5px; */
  height: calc(220px);
  /* background-color: ; */
  border: var(--container-border-base);
  border-width: 0.5px;
  /* border-top: none; */
  cursor: pointer;
}

.corr-legend {
  position: absolute;
  left: calc(235px);
  width: calc(100% - 250px);
  /* pointer-events: none; */
  /* height: 100px; */
  /* background-color: yellow; */
  top: 27.5px;
}

.corr-legend-item {
  position: relative;
  padding: 1.5px;
  font: 8px var(--font);
  color: var(--font-color-faint-2);
}

.corr-leg-this {
  padding-bottom: 5px;
  border-bottom: var(--container-border-base);
}

.corr-hover-facts, .corr-filter-options {
  position: relative;
  /* margin-top: 5px; */
  /* border-bottom: var(--container-border-base); */
  width: 100%;
  font: 9px var(--font);
  padding: 5px;
  color: var(--font-color-base);
}

.corr-filter-options {
  border-bottom: var(--container-border-base);
}

.corr-filters {
  position: relative;
  width: 100%;
  margin-left: 0px;
  margin-top: 2.5px;
  z-index: 10;
}

.corr-filter-option {
  padding: 2.5px;
  cursor: pointer;
}

#l.corr-filter-option > .fa-check-circle { color: var(--olive); }
#s.corr-filter-option > .fa-check-circle { color: var(--orange); }
#a.corr-filter-option > .fa-check-circle { color: var(--blue); }
#i.corr-filter-option > .fa-check-circle { color: var(--red); }


.corr-filter-option > .fa-check-circle { display: none; }
.corr-filter-option.selected-filter > .fa-circle { display: none; }
.corr-filter-option.selected-filter > .fa-check-circle { display: inline-block; }

.corr-filter-option:hover {
  background-color: var(--container-color-base);
}

.corr-hover-inside {
  margin-top: 2.5px;
  padding-left: 10px;
  font-size: 8.5px;
}

.corr-hover-facts > .fa-circle {
  font-size: 6px;
  margin-right: 2.5px;
  position: relative;
  top: -0.5px;
}

.corr-insights {
  position: relative;
  margin-top: 0px;
  width: 100%;
  font: 10px var(--font);
  border-bottom: var(--container-border-base);
  color: var(--font-color-faint);
  padding: 5px;
}

.corr-leg-course {
  color: var(--font-color-faint);
}

.corr-leg-this {
  color: var(--font-color-base);
}

.corr-leg-box {
  float: left;
  margin-top: 2px;
  width: 15px;
  height: 5px;
  /* background-color: red; */
  margin-right: 2.5px;
}

.gauge-leg-course > .corr-leg-box > svg > line {
  stroke: var(--the-needle);
  stroke-width: 2;
}

.gauge-leg-this > .corr-leg-box > svg > line {
  stroke: var(--font-color-base);
  stroke-width: 2;
}

.corr-leg-all > .corr-leg-box > svg > line {
  stroke: var(--blue);
  stroke-dasharray: 3,1;
  stroke-width: 1;
}

.corr-leg-course > .corr-leg-box > svg > line {
  stroke: var(--red);
  stroke-opacity: 0.5;
  stroke-width: 1;
}

.corr-leg-this > .corr-leg-box > svg > line {
  stroke: var(--red);
  stroke-width: 1.25;
}

.corr-plot-sticky {
  position: -webkit-sticky;
  position: sticky;
  display: inline-block;
  left: 0px;
  margin-left: 0px;
  margin-top: -100px !important;
  border: none;
  width: 250px !important;
  border-right: var(--container-border-base);
  /* top: 0px !important; */
  /* bottom: unset; */
  /* left: 0px; */
  z-index: 1;
  background-color: yellow;
}

.corr-plot-title {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 100%;
  left: -1px;
  width: calc(100% + 2px);
  height: 15px;
  font: 9px var(--font);
  color: var(--font-color-base);
  background-color: var(--container-color-base);
  border: var(--container-border-base);
}

.gridds {
  stroke: var(--griddy);
  opacity: 0.45;
  stroke-width: 0.8;
}

.line-average {
  stroke: var(--blue);
  stroke-dasharray: 3,1;
  stroke-width: 1.5;
  pointer-events: none;
}

.course-average {
  stroke: var(--red);
  stroke-opacity: 0.5;
  stroke-width: 1.5;
  pointer-events: none;
}

.this-average {
  stroke: var(--red);
  stroke-opacity: 1;
  stroke-width: 2;
  pointer-events: none;
}

#grid-0.grids-y, #grid-0.grids-acc, #grid-0.grids-dist { stroke: var(--font-color-faint); opacity: 1; stroke-width: 0.8; }

.we-are-filtering {
  stroke-opacity: 0;
}

.labby {
  position: absolute;
  padding: 2px;
  font: 7px var(--font);
  color: var(--font-color-base);
  font-weight: bold;
  pointer-events: none;
  /* top: 1px; */
}

.lab-y { top: 0px; }
.lab-x { right: 0px; }

.dots {
  fill: rgb(170,170,170);
  fill-opacity: 0.5;
  stroke: var(--griddy);
  stroke-width: 0.5;
  /* fill-opacity: 0.5; */
}

.dots-1 {
  opacity: 0.4;
}

.we-are-filtering.dots-1 {
  opacity: 0.2;
  pointer-events: none;
}

.corr-filter-desc {
  position: relative;
  margin-top: 1px;
  display: flex;
  justify-content: left;
  align-items: center;
  border-top: var(--container-border-base);
  padding: 2.5px;
  flex-wrap: wrap;
}

.corr-filter-hide {
  display: none;
}

.filter-desc-leg-circle {
  float: left;
  border-radius: 50%;
  height: 6px;
  width: 6px;
  margin-left: 0.5px;
  margin-right: 0.5px;
}

.filter-desc-leg-in-row {
  float: right;
  position: relative;
  height: 9px;
  width: auto;
  /* border: 1px solid var(--font-color-base); */
  margin-left: 2px;
  margin-right: 0px;
  font: 7px var(--font);
  color: rgb(250,250,250);
  font-weight: bold;
  /* top: 1.5px; */
  border-radius: 1px;
  min-width: 8px;
  display: flex;
  justify-content: center;
  padding: 2px;
  align-items: center;
}

.leg-in-row-second { margin-left: 1px; }

.filter-desc-leg-in-row.do-not-show { display: none; }

.corr-hover-facts > .filter-desc-leg-circle {
  position: relative;
  top: 2px;
}

.filter-desc-leg-circle-hidden {
  display: none;
}

.corr-filter-relative {
  position: relative;
  margin-top: 2px;
  display: flex;
  justify-content: left;
  align-items: center;
  width: 100%;
}

.dots-1.filter-hit { fill-opacity: 1 !important; opacity: 1 !important; pointer-events: auto !important; }
#l.dots-1.filter-hit { fill: var(--olive); } #l.filter-desc-leg-circle { background-color: var(--olive); }
#l-a.dots-1.filter-hit { fill: #FFDC00; } #l-a.filter-desc-leg-circle { background-color: #FFDC00; color: black; }
#l-i.dots-1.filter-hit { fill: #85144b; } #l-i.filter-desc-leg-circle { background-color: #85144b; }

#i.dots-1.filter-hit { fill: var(--red) } #i.filter-desc-leg-circle { background-color: var(--red); }

#a.dots-1.filter-hit { fill: var(--blue); } #a.filter-desc-leg-circle { background-color: var(--blue); }
#s-a.dots-1.filter-hit { fill: #39CCCC; } #s-a.filter-desc-leg-circle { background-color: #39CCCC; }
#s.dots-1.filter-hit { fill: var(--orange); } #s.filter-desc-leg-circle { background-color: var(--orange); }
#s-i.dots-1.filter-hit { fill: var(--font-color-base); } #s-i.filter-desc-leg-circle { background-color: var(--font-color-base); }


/* #a.dots-1 {
  fill: var(--blue);
  fill-opacity: 1;
  opacity: 1;
} */

/* #s-a.dots-1 {
  fill: var(--blue);
  fill-opacity: 1;
  opacity: 1;
} */

/* #l-a.dots-1 {
  fill: var(--yellow);
  fill-opacity: 1;
  opacity: 1;
} */

/* #s-i.dots-1 {
  fill: var(--orange);
  fill-opacity: 1;
  opacity: 1;
} */

.svg-all:hover > .dots-1 { fill-opacity: 1; opacity: 1; }
.svg-all:hover > .this-average { stroke-width: 1.25; opacity: 0.25; }
.svg-all:hover > .line-average { stroke-width: 1; opacity: 0.25; }
.svg-all:hover > .course-average { stroke-width: 1; opacity: 0.25; }

.dots-1-hover {
  fill: var(--red);
  fill-opacity: 1;
  opacity: 1;
  stroke: var(--font-color-base);
}

.line-fit {
  stroke: red;
  stroke-width: 1.5;
}

.datarow.corr-filtered-off {
  display: none !important;
}

@media (max-width: 768px) {


  .filter-desc-leg-in-row {
    height: 8px;
    margin-left: 2px;
    font-size: 6.5px;
    min-width: 6px;
  }

  .insights-report {
    font-size: 10px;
    padding: 2.5px;
    border-bottom: var(--container-border-base);
  }

  .insights-report > .fa-stars { font-size: 8px; }

  .insight-sample {
    font-size: 15.5px;
  }

  .insight-sample-bad {
    color: var(--red);
  }

  .insights-container {
    padding: 1.5px;
  }

  .insights-inner {
    padding: 0px;
  }

  .insights-inner-1 { padding-right: 0px; }
  .insights-inner-2 { padding-left: 0px; }

  .insights-main-title {
    padding: 1px;
    font-size: 9px;
  }

  .insights-content-stddev, .insights-content-decomp, .insights-content-bomb {
    padding: 6px;
    padding-top: 3px;
    padding-bottom: 3px;
  }

  .std-dev-title, .std-dev-insights, .gauge-insights {
    font-size: 9px;
  }

  .decomp-legend-item {
    margin-left: 5px;
    font-size: 6.5px;
  }

  .decomp-legend-item > .fa-square {
    top: 0.5px;
    font-size: 8px;
  }

  .insights-content-bomb > .std-dev-title {
    text-align: center;
    padding-right: 7.5px;
  }

  .std-dev-insights, .gauge-insights {
    margin-top: 5px;
    width: 95%;
    padding: 5px;
  }

  .std-dev-insights {
    padding-left: 5px;
    padding-right: 5px;
    width: 97.5%;
  }

  .decomp-plot {
    width: 97.5%;
    margin-top: 10px;
    height: 20px;
  }

  .decomp-title {
    left: 0.5px;
    bottom: calc(100% + 1px);
    font-size: 7px;
  }

  .decomp-div {
    font-size: 7.5px;
  }

  .gauge-legend {
    /* position: absolute;
    left: 300px;
    width: 120px; */
    left: unset;
    right: 0;
    width: 200px;
  }

  .gauge-legend > .gauge-leg {
    text-align: right;
  }

  .std-dev-plot {
    width: 97.5%;
    margin: auto;
    padding-top: 12px;
    height: 60px;
  }

  .sd-axis-text {
    font-size: 7.5px;
  }

  .bar-notable-text {
    font-size: 6.5px;
    bottom: calc(100% + 2.5px);
  }

  .the-plots {
    padding: 2.5px;
  }

  .corr-plot {
    width: 220px !important;
    margin: 5px;
    margin-top: 5px;
    margin-left: 0px;
    height: calc(220px);
  }

  .corr-legend {
    left: calc(230px);
    width: calc(100% - 240px);
    top: 18px;
  }

  .corr-leg-this {
    padding-bottom: 5px;
    border-bottom: var(--container-border-base);
  }

  .corr-hover-facts, .corr-filter-options {
    font-size: 8px;
    padding: 2.5px;
  }

  .corr-hover-inside {
    margin-top: 2.5px;
    padding-left: 10px;
    font-size: 8.5px;
  }

  .corr-hover-facts > .fa-circle {
    font-size: 6px;
    margin-right: 2.5px;
    position: relative;
    top: -0.5px;
  }

  .corr-insights {
    font-size: 8px;
    padding: 2.5px;
  }

  .corr-leg-box {
    width: 10px;
  }

  .corr-filters {
    margin-top: 2px;
  }

  .corr-filter-option {
    padding: 2px;
  }

  .corr-filter-desc {
    position: relative;
    margin-top: 1px;
    display: block;
    padding: 2px;
  }

  .corr-filter-desc > .filter-desc-leg-circle {
    margin-top: 2px;
    height: 5px; width: 5px;
  }

  .corr-hover-facts > .filter-desc-leg-circle {
    height: 5px; width: 5px;
  }

  .corr-filter-relative {
    position: relative;
    margin-top: 1px;
    display: block;
  }

  .corr-filter-relative > i { display: none; }

  .corr-filter-hide {
    display: none;
  }

  .corr-hover-inside {
    margin-top: 1px;
    padding-left: 0px;
    font-size: 7.5px;
  }

}