:root {
  --card-head-text: 13px var(--font);
}

:root[color-mode="light"] {
  --ryder-back: rgba(255, 220, 0, 0.2);
  --ryder-hover: rgba(255, 220, 0, 0.3);
  --back-hoverr: rgba(0,0,0,0.1);
  /* --back-hoverr: var(--olive-superlight); */
}

:root[color-mode="dark"] {
  --ryder-back: rgba(61, 153, 112, 0.2);
  --ryder-back: rgba(255, 220, 0, 0.1);
  --ryder-hover: rgba(61, 153, 112, 0.3);
  --back-hoverr: rgba(255,255,255,0.1);
  /* --back-hoverr: var(--olive-superlight); */
}

.page-body {
  min-width: 900px;
}

.top-row {
  border-bottom: var(--container-border-base);
  height: 41px;
}

.header-logo-bg {
  opacity: 0.95;
  width: 27px;
  height: auto;
  position: relative;
  top: -2px;
}

.page-hole-title {
  position: relative;
  font: 13px var(--font);
  color: var(--font-color-base);
  font-weight: bold;
  text-align: center;
  /* background-color: green; */
  width: calc(100% + 30px);
  margin-left: -15px;
  padding: 4px;
  background-color: var(--container-color-base);
  border-bottom: var(--container-border-base);
}

.page-hole-subtitle {
  position: relative;
  font: 9px var(--font);
  color: var(--font-color-base);
  font-weight: bold;
  text-align: left;
  /* background-color: green; */
  width: calc(100% + 30px);
  margin-left: -15px;
  padding: 5px;
  padding-bottom: 2px;
  /* font-style: italic; */
}

.zoomed-title {
  color: var(--font-color-faint-2);
}

.start-datey, .end-datey {
  color: var(--font-color-base); font-size: 10px;
  font-style: italic;
}

.main-outer {
  position: relative;
  width: calc(100% + 30px);
  margin-left: -15px;
  height: 350px;
  /* background-color: red; */
  padding: 2px;
}

.main-scrubber {
  position: relative;
  width: 100%;
  height: 100%;
  margin-top: 20px;
  border: var(--container-border-base);
  /* z-index: -1; */
}

.scrub-outer {
  position: relative;
  width: calc(100% + 30px);
  margin-left: -15px;
  height: 60px;
  /* background-color: red; */
  padding: 2px;
  /* font-style: italic; */
}

.rolling-scrubber {
  position: relative;
  width: 100%;
  height: 100%;
  border: var(--container-border-base);
}

.brush {
  stroke-width: 1;
  stroke: var(--font-color-base);
  stroke-opacity: 0.4;
  fill: var(--olive);
  fill-opacity: 0.15;
  /* filter: url(#glow); */
  stroke: var(--olive);
  stroke-opacity: 0.75;
  stroke-width: 1.5;
}

.brush-axis-line {
  pointer-events: none;
  opacity: 1;
  stroke: var(--font-color-base);
  stroke-width: 0.9;
}

.may-help {
  position: absolute;
  right: 1px;
  bottom: 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 8px var(--font);
  font-weight: bold;
  color: var(--font-color-base);
  padding: 1px;
  background-color: var(--container-color-base);
}

.may-back {
  fill: var(--container-color-base);
  pointer-events: none;
  z-index: -1;
}

.brush-bars, .main-bars {
  pointer-events: none;
  opacity: 0.75;
}

.main-bars { opacity: 0.75;
pointer-events: none; }

#under-par-bar.brush-bars, #under-par-bar.main-bars { fill: #caaa77; }
#over-par-bar.brush-bars, #over-par-bar.main-bars { fill: #293f68; }

.gridlines {
  stroke: var(--font-color-faint);
  stroke-opacity: 0.1;
  pointer-events: none;
}

#zero-grid.gridlines {
  stroke-opacity: 0.75;
  stroke-width: 1.4;
  pointer-events: none;
}

.axis-y-lab {
  position: absolute;
  left: 2px;
  font: 7.5px var(--font);
  color: var(--font-color-base);
  font-weight: bold;
  height: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  /* background-color: var(--black-base); */
}

.back-rect {
  position: absolute;
  height: 100%;
  /* border-right: var(--container-border-base); */
  /* border-left: var(--container-border-base); */
  /* background-color: var(--container-color-base); */
  top: 0px;
  /* z-index: -1; */
}

.back-rect-hover {
  background-color: var(--back-hoverr);
}

.main-scrubber > svg { pointer-events: none; z-index: 1; }

.r-topper {
  position: absolute;
  bottom: calc(100% + 1px);
  height: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: var(--container-border-base);
  font: 8px var(--font);
  font-weight: bold;
  color: var(--font-color-base);
  background-color: var(--container-color-base);
  border-left: var(--container-border-base);
}

.r-topper.no-back { background-color: transparent;}
.r-topper.show-no { color: rgba(0,0,0,0) !important; }

.wind-box, .temp-box, .gust-box {
  position: absolute;
  width: 100%;
  max-width: 40px;
  top: 22px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.temp-box { top: 0px; }

.gust-box {
  top: 40px;
  height: 12px;
  font-size: 8px;
  color: var(--font-color-base);
}

.wind {
  width: 45%;
  height: auto;
}

.wind-dir-table {
  height: 8px;
  width: auto;
  margin-left: 2px;
  margin-right: 2px;
}

.resize, .background {
    pointer-events: none;
}

.desc-topper, .power-topper {
  position: relative;
  width: calc(100% + 20px);
  margin-left: -10px;
  height: 25px;
  margin-top: 20px;
  background-color: var(--black-base);
}

.power-topper {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0px;
  margin-top: 0px;
  z-index: 5;
}

.hover-hour-desc {
  position: absolute;
  bottom: 5px;
  font: 9px var(--font); color: var(--font-color-base);
  font-weight: bold;
}

.table-topper {
  position: absolute;
  bottom: 0px;
  font: 9px var(--font);
  color: var(--font-color-faint);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--container-color-base);
  border: var(--container-border-base);
  padding: 2px;
}

.desc-table, .power-table {
  position: relative;
  /* border-top: var(--container-border-base); */
  margin-top: 0px;
  width: calc(100% + 20px);
  margin-left: -10px;
}

.power-table {
  margin-bottom: 20px;
}

.power-table { margin-top: 0px; }

.filter-title {
  position: relative;
  font: 9px var(--font);
  color: var(--font-color-base);
  border-top: 2px solid var(--font-color-faint-2);
  font-weight: bold;
  text-align: left;
  /* background-color: green; */
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-top: 15px;
  padding: 5px;
  padding-bottom: 2px;
  padding-top: 10px;
  /* font-style: italic; */
}

.datahead {
  padding: 0px;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  font: 9px var(--font);
  color: var(--font-color-faint);
  font-weight: bold;
}

.desc-table > .head > .datahead { pointer-events: none; }
.desc-table > .head { top: -25px; }


.power-table > .head { top: 25px; }

.date-col { left: 0px; width: 8%; }
.time-col { left: 8%; width: 6%; }
.round-col { left: 14%; width: 5%; }
.played-col { left: 19%; width: 5%; }
.pin-col { left: 24%; width: 5%; }
.cond-col { left: 29%; width: 11%; }
.temp-col { left: 40%; width: 6%; }
.wind-col { left: 46%; width: 10%; }
.gust-col { left: 56%; width: 8%; }
.score-col { left: 64%; width: 9%; }
.birdie-col { left: 73%; width: 9%; }
.bogey-col { left: 82%; width: 9%; }
.water-col { left: 91%; width: 9%; }

.condition-topper {
  left: 24%; width: 40%;
}

.scoring-topper {
  right: 0%; width: 36%; background-color: var(--olive-lighter);
}

.weather-row {
  position: relative;
  height: 30px;
  width: 100%;
  border-bottom: var(--datarow-border);
}

.weather-row:hover { background-color: var(--datarow-hover); }

.data {
  position: absolute;
  display: flex;
  height: 100%;
  padding: 0px;
  font: 10px var(--font);
  font-weight: bold;
  color: var(--font-color-faint);
  justify-content: center;
  align-items: center;
  border-right: var(--datarow-border);
}

:root[color-mode="light"] .highli { color: rgb(230,230,230); }

.pin-col {
  font-size: 8px;
}

.time-col { font-size: 9px; }

.may-table {
  background-color: var(--container-color-base);
}

.ow-icon {
  height: 30px;
  width: auto;
}

.filter-menu {
  position: relative;
  width: calc(100% + 20px);
  margin-top: 5px;
  /* height: 100px; */
  margin-left: -10px;
  background-color: var(--container-color-base);
  border-radius: 5px;
  margin-bottom: 10px;
}

.filter-menu-subsection {
  padding-left: 5px;
  padding-right: 5px;
  border-bottom: var(--container-border-base);
  font: 9px var(--font);
  padding: 5px;
  padding-bottom: 2px;
  font-weight: bold;
  color: var(--font-color-base);
}

.filter-menu-update-div {
  border-top: var(--container-border-base);
  height: 25px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.update-filter-button {
  position: absolute;
  font: 9px var(--font);
  color: rgb(250,250,250);
  font-weight: bold;
  border-radius: 2px;
  left: 3px;
  padding: 5px;
  padding-top: 3px;
  padding-bottom: 3px;
  background-color: rgba(41, 63, 104, 0.7);
  cursor: pointer;
}

.update-filter-button:hover {
  background-color: rgba(41, 63, 104, 1);
  /* color: var(--black-base); */
}

.not-first-subsection { margin-top: 5px; }

.check-divver {
  height: 40px;
}

.slider-divver {
  height: 40px;
}

.slider-divver-left, .check-divver-left {
  padding-left: 5px;
}

.slider-menu-title {
  position: absolute;
  top: 6px;
  font: 9px var(--font);
  color: var(--font-color-faint);
  font-weight: bold;
}

#slider4 {
  left: 10px;
  top: 22px;
  width: calc(100% - 40px);
}

#slider4 .tooltip.in {
  opacity: 1;
  margin-top: -18px !important;
}

.tooltip-inner {
  font: 9px var(--font);
  font-weight: bold;
  color: var(--font-color-base);
  padding-top: 3px;
  padding-bottom: 3px;
  background-color: var(--black-base)
}

.slider-selection {
	background: rgba(41, 63, 104, 0.8) !important;
  /* background: transparent; */
}

.check-options-div {
  position: absolute;
  bottom: 5px;
  left: 3px;
}

.check-option {
  padding: 1px;
  float: left;
  padding-left: 2px; padding-right: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 10px var(--font);
  font-weight: bold;
  color: var(--font-color-faint);
  cursor: pointer;
  margin-right: 10px;
}

.check-month-option > .check-value, .check-round-pin > .check-value {
  font-size: 9px;
  position: relative;
  top: -0.5px;
}

.check-option:hover {
  color: var(--font-color-base);
}

.check-value {
  margin-left: 2px;
}

.checked > .check-circle { color: rgba(202, 170, 119, 1) !important; }

.filter-summary {
  position: relative;
  width: calc(100% + 30px);
  margin-left: -15px;
  padding-bottom: 5px;
  border-bottom: var(--container-border-base);
}

.filter-summary-title {

}

.satisfy-num {
  padding-left: 5px;
  margin-top: 2px;
  margin-bottom: 2px;
  font: 11px var(--font);
  color: var(--font-color-faint-2);
  font-weight: bold;
  font-style: italic;
}

.satisfy-second { display: none; }

.filter-summary-title {
  color: var(--font-color-base);
  font-size: 9px;
  font-weight: bold;
  /* text-decoration: underline; */
  font-style: normal;
}

.key-num {
  color: var(--font-color-base);
}

.sorted { color: var(--font-color-base); border: none; }

.up-sorty, .down-sorty { display: none; margin-left: 3px; }

.drag-notifier {
  position: absolute;
  right: 2px;
  top: 2px;
  color: var(--font-color-base);
  font-size: 8px;
  animation: blinker 1000ms linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.boxy {
  float: left;
  height: 9px;
  width: 13px;
  background-color: var(--olive-superlight);
  border: 1px solid var(--olive);
  margin-right: 2px;
}