:root {

}

:root[color-mode="light"] {
  --rank-backer: rgba(230,230,230, 0.5);
  --all-time-back: rgba(230,230,230, 0.5);
  --all-time-border: 1px solid rgb(230,230,230);
  --container-shadow-grey: var(--std-shadow-thick);
  --container-shadow-grey-thin: var(--std-shadow);
  --container-shadow-rank: var(--std-shadow);

  --liv-bubble: rgba(17,91,91, 0.5);
  --liv-bubble-border: 1px solid rgba(17,91,91, 0.3);

  --range-divider-color: var(--container-color-base);
  --range-divider-border: var(--container-border-base);

  --grad-year-background: rgba(255, 220, 0, 0.2);
  --grad-year-backgroundd: #ffdc004d;
  --grad-year-background-solid: rgba(255, 220, 0, 0.5);

  --fin-shadow: 0px 0px 1px 0px rgba(0,0,0,0.9);
  --event-hover: rgba(255, 220, 0, 0.35);
    --container-shadow-rank: var(--std-shadow);

  --container-color-base-1: rgba(240,240,240, 0.5);
  --container-color-base-2: rgba(240,240,240, 0.1);
}

:root[color-mode="dark"] {
  --rank-backer: rgba(80,80,80, 0.5);
  --all-time-back: rgba(61, 153, 112, 0.15);
  --all-time-border: 1px solid rgba(61, 153, 112, 0.2);
  --container-shadow-grey: var(--std-shadow-thick);
  --container-shadow-grey-thin: var(--std-shadow);
  --container-shadow-rank: var(--std-shadow);

  --liv-bubble: rgba(203, 251, 126, 0.5);
  --liv-bubble-border: 1px solid rgba(203, 251, 126, 0.3);

  --range-divider-color: var(--black-base);
  --range-divider-border: 1px solid var(--black-base);

  --grad-year-background: rgba(61, 153, 112, 0.2);
  --grad-year-backgroundd: rgba(61, 153, 112, 0.35);
  --grad-year-background-solid: rgba(61, 153, 112, 0.5);

  --event-hover: rgba(61, 153, 112, 0.3);

  --container-color-base-1: rgba(35,35,35, 0.5);
  --container-color-base-2: rgba(35,35,35, 0.1);
}

.popover-body {
  font-weight: normal;
  padding: 4px;
  font-size: 9px;
  color: var(--font-color-base);
}

.player-search-container {
  position: absolute;
  top: unset;
  bottom: 0px;
  left: 0px;
  height: 23px;
  width: 190px;
  background-color: var(--black-base);
  border: var(--container-border-base);
}

.glass-inner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 23px;
  height: 100%;
  border-right: var(--container-border-base);
  background-color: var(--container-color-base);
  font-size: 10px;
  color: var(--font-color-faint);
}

.player-search {
  position: absolute;
  top: 0px;
  bottom: unset;
  left: 23px;
  height: calc(100% - 1px);
  width: calc(100% - 23px);
  border: none;
  background-color: var(--black-base);
  padding-left: 5px;
  font-size: 11px;
}

.datarow {
  /* overflow-y: visible; */
}

.sub-title-page {
  position: relative;
  font-size: 11px;
  color: var(--font-color-faint-2);
  /* margin-left: 2.5px; */
  top: -1.5px;
}

.main-div {
  position: relative;
  width: calc(100% + 30px);
  margin-left: -15px;
  margin-top: 5px;
}

.main-section {
  position: relative;
  padding: 3px;
}

.statsbar-div > .event-page-header { padding-left: 5px; margin-bottom: 5px; }

.statsbar-div {
  -ms-flex: 0 0 275px;
  flex: 0 0 275px;
  padding: 3px;
  border-right: var(--container-border-base);
}

.award-list {
  position: sticky;
  top: 0px;
  padding: 2.5px;
}

.award-list-item, .award-list-header {
  position: relative;
  height: 25px;
  display: flex;
  justify-content: left;
  align-items: center;
  font: 11px var(--font);
  color: var(--font-color-base);
  border-bottom: 1px solid var(--olive);
  padding: 2.5px;
  cursor: pointer;
}

.award-list-item.award-tbd {
  pointer-events: none;
  color: var(--font-color-faint-2) !important;
}

.award-tbd > .item-caret {
  font-size: 8px;
  font-weight: bold;
  width: auto;
}

.award-list-item:hover {
  background-color: var(--container-color-base);
}

.award-list-item:hover > .item-caret {
  opacity: 1;
}

.award-list-header {
  font-size: 10px; color: var(--blue); font-weight: bold;
  height: 20px;
  cursor: default;
}

.item-caret {
  position: absolute;
  right: 0px;
  width: 10px;
  font-size: 13px;
  color: var(--font-color-faint-2);
  opacity: 0.5;
}

.award-list-item.selected-award {
  background-color: var(--olive-lighter);
  font-weight: bold;
}

.award-list-item.selected-award > .item-caret {
  color: var(--olive); opacity: 1;
}

.award-outer {
  position: relative;
  margin-top: 10px;
  padding: 2.5px;
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: var(--container-border-base);
}

.award-name, .award-name-sub {
  position: relative;
  font: 18px var(--font);
  color: var(--font-color-base);
  margin-bottom: 2.5px;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.award-name-sub {
  font: 10px var(--font);
  margin: auto;
  margin-bottom: 2.5px;
  color: var(--font-color-faint-2);
  font-style: italic;
  max-width: 600px;
  margin-bottom: 0px;
  text-align: center;
}

.award-name > .fa-circle { color: var(--olive); font-size: 9px; }

.award-winner {
  position: relative;
  margin-top: 10px;
  color: var(--font-color-base);
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
}

.award-desc {
  position: relative;
  padding: 7.5px;
  margin: auto;
  margin-top: 12.5px;
  color: var(--font-color-base);
  font-weight: bold;
  font: 12.5px var(--font);
  line-height: 1.3;
  width: 90%;
  max-width: 700px;
  /* border-top: var(--container-border-base); */
  /* border-bottom: var(--container-border-base); */
}

.runner-up {
  position: relative;
  margin-top: 5px;
  border-radius: 3px;
  border: var(--container-border-base);
  background-color: var(--container-color-base);
  padding: 5px;
  font-size: 12px;
}

.the-runner-up {
  position: relative;
  display: flex;
  justify-content: left;
  align-items: center;
  /* font-weight: bold; */
  margin-bottom: 2px;
  color: var(--font-color-base);
}

.the-runner-up > img { height: 13px; width: auto; }
.the-runner-up > a { color: inherit; text-decoration: underline; }
.the-runner-up > span { font-size: 10px; }

.the-runner-up-2 {
  margin-top: 5px;
  border-top: var(--container-border-base);
  padding-top: 5px;
}

.runner-up-title {

  display: flex;
  justify-content: left;
  align-items: center;
  font-weight: bold;
}

.runner-up-title > .fa-circle { font-size: 7px; color: var(--olive); }

.runner-up-title-plot-below {
  margin-bottom: 5px;
}

.award-desc-honor {
  margin-top: -5px;
}

.inner-img {
  position: relative;
  margin-top: 5px;
  margin-bottom: 5px;
  background-color: var(--olive-superlight);
  border: 1px solid var(--olive-light);
  border-radius: 3px;
  /* margin: auto; */
  /* max-width: 700px; */
  overflow: hidden;
  padding: 0px;
}

.inner-img > img {
  width: calc(100%);
  height: auto;
}

.inner-img-smaller {
  border: none;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.inner-img-smaller > img {
  max-width: 425px;
  margin: auto;
}

.inner-plot {
  position: relative;
  margin-top: 7.5px;
  margin-bottom: 7.5px;
  background-color: var(--olive-superlight);
  border: 1px solid var(--olive-superlight);
  border-radius: 3px;
  /* margin: auto; */
  /* max-width: 700px; */
  padding: 5px;
}

.inner-plot.inner-plot-breakout {
  margin-top: 15px;
}

.inner-plot.inner-plot-final-round, .inner-plot.inner-plot-loos, .inner-plot.inner-plot-moos {
  height: 500px;
}

.inner-title {
  position: relative;
  font: 11px var(--font);
  padding-bottom: 2.5px;
  padding-left: 2.5px;
  /* font-weight: bold; */
  color: var(--font-color-base);
  border-bottom: 1px solid var(--olive);
}

.inner-title-header-row {
  height: 12.5px;
}

.datarow-cover {
  position: absolute;
  top: 0px;
  left: 30%;
  height: calc(100%);
  /* background-color: red; */
  width: 70%;
  pointer-events: none;
  /* width: calc(100% - 15px); */
  /* left: 7.5px; */
}

.inner-line {
  stroke: var(--font-color-faint-2);
  stroke-opacity: 0.5;
  stroke-dasharray: 3, 2;
}

.inner-line-zero {
  stroke: var(--font-color-base);
  stroke-dasharray: 3, 2;
}


.inner-table {
  position: relative;
  overflow-y: scroll;
  max-height: 200px;
  -ms-overflow-style: none;  /* Internet Explorer 10+ */
  scrollbar-width: none;  /* Firefox, Safari 18.2+, Chromium 121+ */
}

#breakout-sg-table.inner-table {
  overflow: visible;
}

.inner-table::-webkit-scrollbar {
    display: none;  /* Older Safari and Chromium */
}


.inner-datarow {
  position: relative;
  width: 100%;
  height: 25px;
  border-bottom: 1px solid var(--olive-superlight);
}

.data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 0px;
  font-size: 10px;
}

.dataheadd {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px;
  font: 9.5px var(--font) !important;
  color: var(--font-color-faint-2) !important;
  font-weight: normal;
  height: 100%;
}

.inner-plot-head {
  position: sticky;
  height: 20px;
  width: 100%;
  background-color: var(--container-color-base);
  border-bottom: 1px solid var(--olive);
}

.player-col { left: 0px; width: 40%; }
.num-awards-col { left: 40%; width: 10%; color: var(--font-color-base); font-weight: bold; }
.awards-col { left: 50%; width: 50%; justify-content: left; }

.player-col-young { width: 30%; }
.young-age-col { left: 30%; width: 17.5%; }
.young-year-col { left: 47.5%; width: 17.5%; }
.young-dgp-col { left: 65%; width: 35%; border-left: 1px solid var(--font-color-base); }

.player-col-breakout { width: 30%; }
.plot-col-breakout { left: 30%; width: 70%; }

.major-rank-col { width: 25px; left: 0px; justify-content: left; padding-left: 2.5px; }
.major-player-col { width: calc(25% - 25px); left: 25px; }
.major-season-col { left: 25%; width: 7.5%; }
.major-mast-col { left: 32.5%; width: 7.5%; }
.major-pga-col { left: 40%; width: 7.5%; }
.major-uso-col { left: 47.5%; width: 7.5%; }
.major-open-col { left: 55%; width: 7.5%; }
.major-sg-col { left: 62.5%; width: 20%; }
.major-dgp-col { right: 0%; width: 17.5%; justify-content: left; padding-left: 2.5px; }
.data.major-dgp-col { border-left: var(--container-border-base); }

.inner-datarow.highlighter {
  background-color: var(--olive-lighter); border-top: 1px solid var(--olive-light); border-bottom: 1px solid var(--olive-light);
}

.inner-datarow.no-bord {
  border: none;
}

.data.major-season-col {
  color: var(--blue);
  font-size: 9px;
  font-weight: bold;
}

.data.win { background-color: rgba(255, 193, 7, 0.7); }
.data.top-5 { background-color: var(--olive-light); }
.data.top-10 { background-color: var(--olive-superlight); }

.sg-inner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 50%;
  width: 50%;
  height: 75%;
  border-left: 1px solid var(--font-color-base);
}

.sg-inner-bar {
  position: absolute;
  left: 0px;
  height: 75%;
  top: 12.5%;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  background-color: var(--olive);
}

.sg-text {
  position: absolute;
  right: calc(100% + 3.5px);
  color: var(--font-color-faint-2);
  font-weight: bold;
  font-size: 8px;
}

.plot-dotter {
  position: absolute;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  background-color: red;
}

.plot-dotter-2025 {
  background-color: var(--olive);
  border: 1px solid rgb(40,40,40);
}

.plot-dotter-2024 {
  background-color: var(--red);
  border: 1px solid rgb(40,40,40);
}

.circle-legend {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  right: 0px;
  bottom: calc(100% + 1px);
  height: 15px;
  font: 9px var(--font);
  color: var(--font-color-faint-2);
  font-weight: bold;
}

.p-dott {
  float: left;
  height: 10px; width: 10px;
  border-radius: 50%;
}


.plot-col-axis {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 100%;
  top: 0px;
  font-size: 9px;
}

.plot-col-zero {
  color: var(--red); font-weight: bold;
}

#text-0.plot-col-axis { left: calc(0%); justify-content: start; }
#text-25.plot-col-axis { left: calc(25% - 25px); }
#text-50.plot-col-axis { left: calc(50% - 25px); }
#text-75.plot-col-axis { left: calc(75% - 25px); }
#text-100.plot-col-axis { right: 0px; justify-content: end; }



.dgp-backer {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  left: 0px;
  top: 15%;
  background-color: #012d54;
  background-color: rgba(133, 20, 75, 0.5);
  height: 70%;
  border: 1px solid rgba(133, 20, 75, 0.5);
  border-left: none;
  border-top-right-radius: 1.5px;
  border-bottom-right-radius: 1.5px;
  color: white;
  font-weight: bold;
}

/* .major-dgp-col > .dgp-backer {
  left: 5%;
} */

.dgp-backer > .dgp-text {
  position: absolute;
  right: 2px;
  /* color: rgba(230,230,230); */
  font-size: 8px;
}

.dgp-backer-low > .dgp-text {
  right: unset;
  left: calc(100% + 2.5px);
  color: var(--font-color-faint-2);
  font-size: 8px;
}


.player-col {
  font: 10.5px var(--font);
  color: var(--font-color-base);
  font-weight: bold;
  padding-left: 0px;
  display: flex;
  height: 100%;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
  justify-content: left; padding-left: 2.5px;
}

.player-col > .add-ellipsis >  a {
  color: inherit;
}

.add-ellipsis {
  margin: 0 0px;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.player-col > .add-ellipsis > img {
  height: 13.5px;
  width: auto;
  margin-top: -2px;
  /* margin-right: 2.5px; */
}

.data.cust-col {
  border-right: 1px solid var(--blue-light);
}

.player-col {
  justify-content: left;
  padding-left: 5px;
}

.winner-headshot {
  position: relative;
  float: left;
  width: 125px;
  height: 125px;
}

.headshot-outer {
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 5px;
  border-top-right-radius: 0px; border-bottom-right-radius: 0px;
  background-color: #94b0a4;
  border: 1px solid var(--olive-light);
  display: flex;
  justify-content: center;
  align-items: center;
}
:root[color-mode="dark"] .headshot-outer { background-color: #192b23; border-color: #1e382d; }

.headshot-outer > img { height: 100%; width: auto; position: absolute; bottom: 0px; }

.winner-info {
  position: relative;
  float: right;
  width: 310px;
  height: 125px;
  background-color: var(--container-color-base);
  border: var(--container-border-base);
  border-top-right-radius: 5px; border-bottom-right-radius: 5px;
  border-left: none;
}

.winner-info-row {
  position: relative;
  width: 100%;
  padding: 2px;
  padding-left: 6px;
  margin-top: 1px;
  align-items: center;
  font: 12px var(--font);
  color: var(--font-color-base);
}

.winner-info-row.the-winner { display: flex;
justify-content: left; font: 14px var(--font); font-weight: bold; }
.winner-info-row.the-winner > img { height: 15px; width: auto; }
.winner-info-row.the-winner > a { color: inherit; }


.winner-info-title {
  position: relative;
  width: 100%;
  font: 8px var(--font); color: var(--blue); font-weight: bold;
}

.sg-boxer {
  padding: 2.5px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 2px;
  color: var(--font-color-base);
  font-size: 9px; font-weight: bold;
}

.winner-info-content {
  position: relative;
  width: 100%;
  padding-top: 2.5px;
  padding-bottom: 2.5px;
  display: flex;
  justify-content: left;
  align-items: center;
}

.winner-info-content-sg, .winner-info-content-dgp {
  font-size: 10px;
}

.winner-info-content-dgp {

}


.winner-info-content-wins {
  height: 15px;
}

.dgp-outer {
  float: left;
  position: relative;
  height: 17.5px;
  border-left: 1px solid var(--font-color-base);
}

.dgp-outer-margin {
  margin-right: 15px;
}

.dgp-inner {
  position: absolute;
  display: flex;
  justify-content: right;
  align-items: center;
  padding-right: 2px;
  color: rgba(255, 255, 255, 0.95);
  left: 0px;
  top: 10%;
  background-color: #012d54;
  background-color: rgba(133, 20, 75, 0.5);
  height: 80%;
  width: 100%;
  border: 1px solid rgba(133, 20, 75, 0.5);
  border-left: none;
  border-top-right-radius: 1.5px;
  border-bottom-right-radius: 1.5px;
  font-size: 7.5px;
  font-weight: bold;
}

.dgp-inner-outer {
  left: calc(100% + 2px);
  position: absolute;
  color: var(--font-color-base);

}

.achieve-square, .achieve-img-outer {
  position: relative;
  float: left;
  margin: 1px;
  margin-right: 2px;
  top: 0.5px;
  height: 10px;
  width: 10px;
  border-radius: 0.5px;
}

.achieve-square-tour {
  border-radius: 50%;
}

.achieve-square.award-square {
  margin-top: 7.5px;
  margin-left: 10px;
  overflow: visible !important;
  display: flex;
  justify-content: center;
  align-items: center;
}


.achieve-square.award-square > .award-year-inner {
  position: absolute;
  bottom: calc(100% + 1.5px);
  font: 7px var(--font);
  color: var(--blue); font-weight: bold;
}

.achieve-tour-unlisted {
  overflow: visible !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 4px;
}

.achieve-tour-unlisted > .unlisted-inner {
  position: absolute;
  bottom: calc(100% + 2px);
  font: 6px var(--font);
  font-weight: bold;
  color: var(--font-color-faint-2);
}

.achieve-tour-unlisted:hover > .unlisted-inner { display: none; }

.achieve-img-outer {
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.achieve-img-outer-oly, .achieve-img-outer-dg {
  overflow: visible;
}

.achieve-img {
  height: 100%;
  width: auto;
}

.achieve-img-outer-oly > .achieve-img {
  height: 120% !important;
}

.achieve-img-outer-dg > .achieve-img {
  height: 110% !important;
}

#s14.achieve-square {
  background-color: rgba(7, 102, 82, 0.5);
  border: 1px solid rgba(7, 102, 82, 1);
}

#s26.achieve-square {
  background-color: rgba(224, 0, 64, 0.5);
  border: 1px solid rgb(224, 0, 64, 1);
}

#s33.achieve-square {
  background-color: rgba(41, 63, 104, 0.5);
  border: 1px solid #293f68;
}

#s100.achieve-square {
  background-color: rgba(255, 193, 7, 0.5);
  border: 1px solid #ffc107;
}

#s11.achieve-square {
  background-color: rgba(202, 170, 119, 0.75);
  border: 1px solid rgba(202, 170, 119, 1);
}

#spga.achieve-square {
  background-color: var(--red-light);
  border: 1px solid var(--red);
}

#schamp.achieve-square {
  background-color: var(--container-color-base);
  border: 1px solid var(--red);
}

#sgeneric.achieve-square {
  background-color: rgb(190,190,190);
  border: 1px solid rgb(180,180,180);
}

#sam.achieve-square {
  background-color: rgba(106, 113, 159, 0.5);
  border: 1px solid rgba(106, 113, 159, 1);
}

#spga_u.achieve-square {
  background-color: var(--red-lighter);
  border: 1px solid var(--red-light);
}

#seuro.achieve-square {
  background-color: var(--blue-light);
  border: 1px solid var(--blue);
}

#skft.achieve-square {
  background-color: var(--olive-light);
  border: 1px solid var(--olive);
}

#sdgpoy.achieve-square {
  background-color: rgb(40,40,40);
  border: 1px solid var(--olive);
}

#sliv.achieve-square {
  background-color: var(--font-color-faint-2);
  border: 1px solid var(--font-color-base);
}

#susam.achieve-square {
  background-color: var(--red);
  border: 1px solid var(--blue);
}

#susjram.achieve-square {
  background-color: var(--blue);
  border: 1px solid var(--red);
}

#scha.achieve-square {
  background-color: rgba(40, 167, 69, 0.5);
  border: 1px solid rgba(40, 167, 69, 1);
}

#sothers.achieve-square, #schamps.achieve-square {
  background-color: var(--container-color-base);
  border: var(--container-border-base);
}

#schamps.achieve-square {
  border-color: var(--red);
}

#sr2d.achieve-square {
  background-color: rgba(92,187,124, 0.75);
  border: 1px solid rgba(220,40,95, 1);
}

.small--only { display: none; }

.hidden-award {
  display: none;
}

.runner-up > .fa-circle {
  font-size: 5px; color: var(--font-color-base); position: relative; top: -2px;
}

.inner-ploty {
  position: absolute;
  left: 5px;
  top: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 17.5px);
  /* background-color: red; */
  border-left: 1px solid var(--olive);
  border-bottom: 1px solid var(--olive);
}

#loos-plot.inner-ploty, #moos-plot.inner-ploty {
  border-left: none;
}

.inner-line-final {
  stroke: var(--olive-lighter);
  stroke-dasharray: 3,2;
  stroke-width: 0.5;
}

.inner-line-final-0 {
  stroke: var(--olive);
  stroke-dasharray: 0,0;
  stroke-width: 1;
}

.axiss {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  font: 7.5px var(--font);
  color: var(--olive);
  font-weight: bold;
}

.axiss-y {
  left: 2.5px;
}

.axiss-loos-y {
  left: calc(22.2222% + 2.5px);
}

.axiss-x {
  bottom: 2.5px;
}

.diag-line {
  stroke: var(--red);
}

.final-dot, .loos-dot, .moos-dot {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--olive-lighter);
  border: 1px solid var(--olive-lighter);
  height: 8px;
  width: 8px;
  border-radius: 50%;
}

.hover-dot:hover {
  background-color: var(--olive-light);
  border-color: var(--font-color-base);
}

#joaquin-niemann.final-dot, #andrew-novak.moos-dot { background-color: var(--yellow); border-color: var(--yellow); }
#rasmus-neergaard-petersen.final-dot, #patrick-cantlay.loos-dot, #patrick-reed.moos-dot { background-color: var(--blue-light); border-color: var(--blue-light); }
#bryson-dechambeau.final-dot { background-color: rgb(224, 0, 64, 0.5); border-color: rgb(224, 0, 64, 0.5); }
#tommy-fleetwood.final-dot, #bryson-dechambeau.loos-dot, #justin-rose.moos-dot { background-color: rgba(255, 133, 27, 0.5); border-color: rgba(255, 133, 27, 0.5); }

#jon-rahm.loos-dot { background-color: var(--red); border-color: var(--red); }


.dot-name-inner {
  position: absolute;
  z-index: 2;
  bottom: calc(100% + 2.5px);
  color: var(--font-color-base);
  font: 8px var(--font);
  text-align: center;
  pointer-events: none;
}

.hidden-dot {
  display: none;
}

#bryson-dechambeau.final-dot > .dot-name-inner, #jon-rahm.loos-dot > .dot-name-inner, #patrick-reed.moos-dot > .dot-name-inner {
  bottom: unset;
  top: calc(100% + 2.5px);
}

.axis-label {
  position: absolute;
  font: 8px var(--font);
  color: var(--olive);
  font-style: italic;
}

.axis-label-x {
  right: 1px;
  top: calc(100% + 2.5px);
}

.axis-label-y {
  left: 2.5px;
  top: calc(0% + 1px);
}

.axis-label-y-loos {
  left: calc(22.2222% + 2.5px);
}

.targ-line, .targ-loos, .targ-moos {
  stroke: var(--font-color-base);
  stroke-dasharray: 3,1;
  pointer-events: none;
}

.targ-line-hide {
  opacity: 0;
}

@media (max-width: 768px) {

  .small--only { display: inline-block; text-decoration: inherit; }
  .big--only { display: none; }

  .main-section {
    position: relative;
    padding: 1.5px;
  }

  .main-div {
    margin-top: 0px;
  }

  .statsbar-div {
    -ms-flex: unset;
    flex: unset;
    padding: 1.5px;
    border-left: none;
    position: sticky;
    top: 0px;
    border-right: none;
    z-index: 1;
    border-bottom: var(--container-border-base);
    background-color: var(--black-base);
  }

  /* .player-col { left: 0px; width: 27.5%; justify-content: left; padding-left: 1px; }
  .dg-col { left: 27.5%; width: 7.5%; }
  .owgr-col { left: 35%; width: 7.5%; }
  .exempt-col { left: 42.5%; width: 40%; }
  .locked-col { left: 82.5%; width: 7.5%; }
  .starts-col { left: 90%; width: 10%; }
  .wins-col { display: none; } */

  .player-col > .add-ellipsis > img {
    height: 12px;
    margin-top: -2px;
  }

  .player-col > .add-ellipsis {
    padding-right: 0px;
  }


  .data {
    font-size: 9px;
  }

  .player-col {
    font-size: 9.5px;
  }


  .name-col {
    padding-top: 7.5px;
    font-size: 9px;
    padding-left: 16.5px;
    padding-right: 2px;
  }

  .flag-bg {
    top: calc(50% - 6px);
    height: 12px;
    width: auto;
  }

  .data.name-col { display: block; }

  .award-list {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    top: 0px;
    padding: 1px;
  }

  .award-list-item, .award-list-header {
    height: 17.5px;
    justify-content: center;
    align-items: center;
    font-size: 9px;
    border: 1px solid var(--olive);
    padding: 0px;
    margin: 1.5px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .award-list-item.award-tbd { opacity: 0.5; }

  .award-list-header {
    display: none;
  }

  .item-caret {
  display: none;
  }

  .award-list-item.selected-award {
    background-color: var(--olive-lighter);
    font-weight: bold;
  }

  .award-list-item.selected-award > .item-caret {
    color: var(--olive); opacity: 1;
  }

  .award-outer {
    margin-top: 5px;
    padding: 1px;
  }

  .award-name, .award-name-sub {
    font-size: 16px;
    margin-bottom: 1.5px;
  }

  .award-name-sub {
    font-size: 8.5px;
  }

  .award-name > .fa-circle { font-size: 7px; }

  .award-winner {
    margin-top: 7.5px;
  }

  .award-desc {
    padding: 5px;
    margin-top: 7.5px;
    font-size: 12px;
    /* line-height: 1.3; */
    width: 100%;
  }

  .runner-up {
    position: relative;
    margin-top: 5px;
    border-radius: 3px;
    border: var(--container-border-base);
    background-color: var(--container-color-base);
    padding: 5px;
  }

  .the-runner-up {
    position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
    /* font-weight: bold; */
    margin-bottom: 2px;
  }

  .the-runner-up > img { height: 13px; width: auto; }
  .the-runner-up > a { color: inherit; }

  .runner-up-title { font-size: 12px; }
  .runner-up-title > .fa-circle { font-size: 5px; color: var(--olive); }

  .award-desc-honor {
    margin-top: 0px;
  }

  .inner-img {
    position: relative;
    margin-top: 5px;
    margin-bottom: 5px;
    background-color: var(--olive-superlight);
    border: 1px solid var(--olive-light);
    border-radius: 3px;
    /* margin: auto; */
    /* max-width: 700px; */
    overflow: hidden;
    padding: 0px;
  }

  .inner-img > img {
    width: calc(100%);
    height: auto;
  }

  .inner-plot {
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 1.5px;
    padding: 2px;
  }

  .inner-title {
    font-size: 9.5px;
    padding-bottom: 1.5px;
    padding-left: 1.5px;
  }

  .inner-table {
    position: relataive;
    overflow-y: scroll;
    max-height: 175px;
  }

  .inner-datarow {
    height: 22.5px;
  }

  .data {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0px;
    font-size: 10px;
  }

  .player-col { left: 0px; width: 40%; }
  .num-awards-col { left: 40%; width: 10%; color: var(--font-color-base); font-weight: bold; }
  .awards-col { left: 50%; width: 50%; justify-content: left; }

  .player-col {
    font: 10.5px var(--font);
    color: var(--font-color-base);
    font-weight: bold;
    padding-left: 0px;
    display: flex;
    height: 100%;
    justify-content: left;
    align-items: center;
    padding-left: 5px;
    justify-content: left; padding-left: 2.5px;
  }

  .player-col > .add-ellipsis >  a {
    color: inherit;
  }

  .add-ellipsis {
    margin: 0 0px;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .player-col > .add-ellipsis > img {
    height: 13.5px;
    width: auto;
    margin-top: -2px;
    /* margin-right: 2.5px; */
  }

  .data.cust-col {
    border-right: 1px solid var(--blue-light);
  }

  .player-col {
    justify-content: left;
    padding-left: 5px;
  }

  .winner-headshot {
    width: 100px;
    height: 100px;
  }

  .headshot-outer {
    border-radius: 3px;
    border-top-right-radius: 0px; border-bottom-right-radius: 0px;
  }

  .winner-info {
    position: relative;
    float: right;
    width: calc(100% - 110px);
    height: 100px;
    background-color: var(--container-color-base);
    border: var(--container-border-base);
    border-top-right-radius: 3px; border-bottom-right-radius: 3px;
    border-left: none;
  }

  .winner-info-row {
    padding: 1px;
    padding-left: 3px;
    margin-top: 1px;
    align-items: center;
    font-size: 10px;
  }

  .winner-info-row.the-winner { font-size: 12px; }
  .winner-info-row.the-winner > img { height: 14px; }
  .winner-info-row.the-winner > a { color: inherit; }


  .winner-info-title {
    font-size: 6.5px;
  }

  .sg-boxer {
    padding: 2px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 1px;
    font-size: 8px;
  }

  .winner-info-content {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .winner-info-content-sg, .winner-info-content-dgp {
    font-size: 9.5px;
  }

  .winner-info-content-wins {
    height: 13px;
  }

  .dgp-outer {
    height: 15px;
  }

  .dgp-inner {
    padding-right: 1.5px;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    font-size: 7px;
  }

  .achieve-square, .achieve-img-outer {
    margin: 0.5px;
    margin-right: 1px;
    top: 0.5px;
    height: 8.5px;
    width: 8.5px;
  }

  .achieve-square.award-square {
    margin-top: 7.5px;
    height: 9.5px;
    width: 9.5px;
    margin-left: 10px;
  }


  .achieve-square.award-square > .award-year-inner {
    bottom: calc(100% + 1.5px);
    font: 7px var(--font);
  }

  .player-col { left: 0px; width: 30%; }
  .num-awards-col { left: 30%; width: 10%; color: var(--font-color-base); font-weight: bold; }
  .awards-col { left: 40%; width: 60%; justify-content: left; }

  .inner-img-smaller {
    border: none;
    background-color: transparent;
  }

  .dataheadd {
    font-size: 8.5px;
  }

  .inner-plot-head {
    height: 17.5px;
  }


  .major-rank-col { width: 17.5px; }
  .major-player-col { width: calc(25% - 17.5px); left: 17.5px; }
  .major-season-col { left: 25%; width: 10%; }
  .major-mast-col { left: 35%; width: 10%; font-size: 8.5px; font-weight: bold; }
  .major-pga-col { left: 45%; width: 10%; font-size: 8.5px; font-weight: bold; }
  .major-uso-col { left: 55%; width: 10%; font-size: 8.5px; font-weight: bold; }
  .major-open-col { left: 65%; width: 10%; font-size: 8.5px; font-weight: bold; }
  .major-sg-col { left: 75%; width: 25%; }
  .major-dgp-col { display: none; }

}

/* add classes when under sm */
@media (max-width: 576px) {

}