:root {

}

:root[color-mode="light"] {
  --fin-hover: rgba(200,200,200,0.7);
  --axis-col: rgb(100,100,100);
}

:root[color-mode="dark"] {
  --fin-hover: rgba(80,80,80,0.7);
  --axis-col: rgb(180,180,180);
}

.explainer {
  position: relative;
  margin-top: 10px;
  margin-left: -15px !important;
  width: calc(100% + 30px);
  padding-top: 5px;
  /* display: none; */
  font: 13px var(--font);
  color: var(--font-color-faint);
  line-height: 1.4;
  /* height: 28px; */
  padding-left: 7px;
  padding-right: 5px;
}

.enhanced {
  color: var(--font-color-base);
  font-weight: bold;
  font-style: italic;
}

.drop-row {
  position: relative;
  margin-top: 7px;
  margin-left: -15px !important;
  width: calc(100% + 30px);
  padding-top: 17px;
  border-top: var(--container-border-base);
  /* height: 28px; */
}

.tour-filter-control {
  position: absolute;
  bottom: 0px;
  left: 5px;
  font: 11px var(--font);
  color: var(--font-color-base);
  cursor: pointer;
}

.tour-filter-control:hover {
  text-decoration: underline;
}

.chev {
  position: relative;
  top: -1px;
}

.tour-row {
  position: relative;
  margin-top: 0px;
  margin-left: -15px !important;
  width: calc(100% + 30px);
  padding-top: 10px;
  height: 0;
  opacity: 0;
}

.player-search {
  top: 5px;
  left: 2px;
  margin: 1px 0;
}

.player-search-glass {
  top: 13px;
  left: 7px;
}


.table-container {
  position: relative;
  width: calc(100% + 30px);
  height: auto;
  margin-left: -15px;
  margin-right: -15px;
}

.tour-filter-block {
  display: none;
}

.head {
  top: 35px;
}


.sorted-prob-base {
  opacity: 0.6;
}

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

.table-div {
  position: relative;
  width: 100%;
  margin-bottom: 15px;
}

.download-div {
  position: absolute;
  top: 1px;
  right: 1px;
  padding-top: 5px;
  height: 23px;
  opacity: 0.8;
  font: 10px var(--font);
  cursor: pointer;
  color: var(--font-color-base);
  text-align: left;
}

.download-div:hover {
  text-decoration: underline;
}

.tour-col {
  font: 11px var(--font);
  font-weight: bold;
  text-align: center;
  color: var(--font-color-faint-2);
  padding-top: 10px;
}

.fin-col {

}

.fin-text-div {
  position: absolute;
  top: 0px;
  width: 20%;
  height: calc(100% - 3px);
  font: 11px var(--font);
  color: var(--font-color-faint-2);
  text-align: center;
  padding-top: 9px;
  cursor: pointer;
  /* font-weight: bold; */
}

.fin-text-div:hover {
  background-color: var(--fin-hover);
  color: var(--font-color-base);
}

.popover-tour {
  font-size: 9px;
  font-weight: bold;
  color: var(--font-color-base);
}

.fin-div {
  position: absolute;
  bottom: 0px;
  width: 20%;
  height: 3px;
}

/* .fin-div {
  position: absolute;
  width: 16px;
  height: 16px;
  left: calc(50% - 8px);
  top: 7px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
} */

.fin-pos {
  background-color: var(--red);
}

.fin-neg {
  background-color: var(--blue);
}

.ev-bar-container {
  position: relative;
  width: 95%;
  top: 2px;
  height: 45%;
  margin: auto;
}

.pos-ev-bar {
  position: absolute;
  height: 100%;
  background-color: var(--red);
  opacity: 0.6;
  border-top-right-radius: 1px;
  border-bottom-right-radius: 1px;
}

.neg-ev-bar {
  position: absolute;
  height: 100%;
  background-color: var(--blue);
  opacity: 0.6;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
}

.bar-hovered {
  opacity: 1;
}

.ev-axis {
  border-right: 1px solid var(--axis-col);
  position: absolute;
  width: 0px;
  height: calc(100% + 6px);
  top: -3px;
}

.ev-text {
  position: absolute;
  top: 0px;
  color: var(--font-color-faint);
  font: 10px var(--font);
  /* opacity: 0.5; */
}

.total-text {
  opacity: 0.9;
}

.ev-text-pos {
  margin-right: 4px;
}

.ev-text-neg {
  margin-left: 4px;
}


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

  .explainer {
    margin-top: 7px;
    /* display: none; */
    font: 11px var(--font);
    line-height: 1.3;
    padding-left: 4px;
    padding-right: 3px;
  }

  .tour-filter-control {
    right: 3px;
    font: 10px var(--font);
  }

  .tour-col {
    font: 9px var(--font);
    padding-top: 9px;
  }

  .fin-text-div {
    font: 8px var(--font);
    padding-top: 8px;
  }

  .ev-text {
    font: 8px var(--font);
  }

  .ev-text-pos {
    margin-right: 3px;
  }

  .ev-text-neg {
    margin-left: 3px;
  }

  .player-search {
    width: 110px;
  }

  .player-search-glass {
    top: 12px;
    left: 6px;
  }


}