:root[color-mode="dark"] {
  --grad-year-background: rgba(0, 116, 217, 0.15);
}

.table-top-div {
  height: 27px;
}

.head {
  top: 27px;
}

.dg-100 { background-color: var(--blue-lighter); }
.dg-30 { background-color: var(--blue-light); }
.dg-10 { background-color: var(--blue); }
.dg-1 { background-color: var(--yellow); color: black; }

.dgp-100 { background-color: rgba(133, 20, 75, 0.3); }
.dgp-30 { background-color: rgba(133, 20, 75, 0.5); }
.dgp-10 { background-color: rgba(133, 20, 75, 1); color: white; }
.dgp-1 { background-color: gold; color: black; }

.owgr-100 { background-color: rgba(63, 132, 103, 0.3); }
/* .owgr-30 { background-color: var(--olive-light); } */
.owgr-10 { background-color: rgba(63, 132, 103, 0.9); color: var(--font-color-base); }
.owgr-1 { background-color: rgba(211, 195, 158, 1); color: black; }

.dg-topper {
  /* border: none; */
  border-color: var(--blue-light);
  /* font-size: 8.5px; */
  /* height: auto; */
  /* padding-bottom: 2.5px; */
  /* border-bottom: 1px solid var(--font-color-base); */
  background-color: var(--blue-lighter);
  color: var(--font-color-base);
  /* background-color: black; */
}

.dg-topper > .fa-chevron-left, .dg-topper > .fa-chevron-right {
  color: var(--blue) !important;
}

.ev-axis {
  background-color: var(--blue);
}

.pos-ev-bar-back {
  background-color: var(--blue);
}

.zero-line-trend {
  stroke: var(--blue);
}

.rank-lines {
  stroke: var(--olive);
}

.owgr-status-logo {
  height: 19px;
  margin-right: 2.5px;
  width: auto;
}

.player-col, .name-col { width: 25%; left: 0px; }
.event-bubble-col { left: 25%; width: 12%; }
.trend-col { left: 36%; width: 16%; }
.dg-rank-col { left: 52%; width: 10%; }
.dg-change-col { left: 62%; width: 5%; }
.ev-col { left: 67%; width: 18%; }
.wagr-rank-col { left: 85%; width: 10%; }
.wagr-change-col, .header-wagr-change { left: 95%; width: 5%;}
.dg-points-col { left: 88%; width: 0%; overflow: hidden; }
.dgp-change-col { left: 96.5%; width: 0%; overflow: hidden; }

.wagr-change-col { border-right: none; }
.dg-rank-col, .wagr-rank-col { border-left: var(--datarow-border); }

.dg-topper { left: 52%; width: 33%; }

.points-topper {
  width: 15%;
  right: 0px;
}

#lpga.event-bubble { background-color: #304E70; border: 0.5px solid var(--black-base); opacity: 0.75; }
.circle-lpga { color: #304E70; }

#klpga.event-bubble { background-color: #ef3b2a; border: 0.5px solid var(--black-base); opacity: 0.75; }
.circle-klpga { color: #ef3b2a; }

#jlpga.event-bubble { background-color: #137d3b; border: 0.5px solid var(--black-base); opacity: 0.75; }
.circle-jlpga { color: #137d3b; }

#let.event-bubble { background-color: #42a7c6; border: 0.5px solid var(--black-base); opacity: 0.75; }
.circle-let { color: #42a7c6; }

.lpga-date {
  font: 11px var(--font);
  padding: 2.5px;
  padding-left: 3.5px;
  padding-right: 3.5px;
  background-color: var(--black-base);
  /* background-color: var(--blue); */
  color: var(--font-color-base);
  font-weight: bold;
  border: 1px solid var(--blue);
  border-radius: 1px;
}

@media (max-width: 768px) {

  .player-col, .name-col { width: 25%; left: 0px; }
  .event-bubble-col { left: 25%; width: 12.5%; }
  .trend-col { left: 36%; width: 16%; width: 0%; overflow: hidden; }
  .dg-rank-col { left: 37.5%; width: 12.5%; }
  .dg-change-col { left: 50%; width: 7.5%; }
  .ev-col { left: 57.5%; width: 22.5%; }
  .wagr-rank-col { left: 80%; width: 12.5%; }
  .wagr-change-col, .header-wagr-change { left: 92.5%; width: 7.5%;}
  .dg-points-col { left: 88%; width: 0%; overflow: hidden; }
  .dgp-change-col { left: 96.5%; width: 0%; overflow: hidden; }

  .wagr-change-col { border-right: none; }
  .dg-rank-col, .wagr-rank-col { border-left: var(--datarow-border); }

  .dg-topper { left: 37.5%; width: 42.5%; }

  .points-topper {
    width: 20%;
    right: 0px;
  }

  .drop-row {
    padding-top: 14px;
    height: 32px;
  }

  .lpga-date {
    font-size: 9.5px;
    padding: 1.5px;
    padding-left: 2.5px;
    padding-right: 2.5px;
    z-index: 10px;
    margin-bottom: 1px;
  }

  .table-top-div {
    height: 25px;
    margin-top: 0px;
    z-index: 9;
  }

  .head {
    top: 25px;
  }

  .player-search-container {
    width: 140px;
    min-width: 22%;
}

}