.graphs {
  position: relative; }

.bacs-chart-legend {
  display: flex;
  flex-direction: column;
  height: 100%;
  z-index: 2;
  margin-top: 5px; }
  .bacs-chart-legend svg {
    flex-shrink: 0; }
    .bacs-chart-legend svg text, .bacs-chart-legend svg tspan {
      dominant-baseline: hanging; }
  .bacs-chart-legend path.symbol {
    stroke: #000000; }
  .bacs-chart-legend .-description {
    margin-top: 0.5rem;
    margin-right: 1rem;
    text-align: right; }
  .bacs-chart-legend.-no-outline {
    margin-top: 0; }
    .bacs-chart-legend.-no-outline .outlined rect {
      stroke: none;
      fill: #cccccc;
      fill-opacity: 0.5; }
    .bacs-chart-legend.-no-outline path.symbol {
      opacity: 0.5; }
    .bacs-chart-legend.-no-outline tspan {
      fill: #666666; }
    .bacs-chart-legend.-no-outline .-selected rect {
      stroke: none;
      fill: none; }
    .bacs-chart-legend.-no-outline .-selected tspan {
      fill: #000000; }
    .bacs-chart-legend.-no-outline .-selected path.symbol {
      opacity: 1; }
    .bacs-chart-legend.-no-outline .-hover .outlined rect {
      stroke: #999999; }
  .bacs-chart-legend.-outline {
    margin-top: 0; }
    .bacs-chart-legend.-outline .outlined rect {
      stroke: none;
      fill: #cccccc;
      fill-opacity: 0.5; }
    .bacs-chart-legend.-outline path.symbol {
      opacity: 0.5; }
    .bacs-chart-legend.-outline tspan {
      fill: #666666; }
    .bacs-chart-legend.-outline .-selected rect {
      stroke: #cccccc;
      fill: transparent; }
    .bacs-chart-legend.-outline .-selected tspan {
      fill: #000000; }
    .bacs-chart-legend.-outline .-selected path.symbol {
      opacity: 1; }
    .bacs-chart-legend.-outline .-hover .outlined rect {
      stroke: #999999; }
  .bacs-chart-legend .-footer {
    display: flex;
    margin-top: auto;
    align-items: center;
    padding-left: 2rem;
    justify-content: space-between;
    font-size: 0.9rem; }
    .bacs-chart-legend .-footer .-reset {
      cursor: pointer;
      padding-bottom: 0.25rem; }
      .bacs-chart-legend .-footer .-reset:hover {
        font-weight: bold;
        border-bottom: 1px solid #666666; }

.-bacs-chart {
  position: relative;
  font-family: 'Noto Sans JP', serif;
  top: 0;
  left: 0;
  margin-bottom: 30px; }
  .-bacs-chart .-title {
    line-height: 2.5rem;
    width: 100%;
    text-align: center;
    font-size: 1rem; }
    .-bacs-chart .-title .-sub {
      padding-left: 1rem;
      font-size: 0.9rem; }
  .-bacs-chart svg {
    flex-shrink: 0;
    margin-right: 0.5rem;
    margin-left: 0.5rem; }
    .-bacs-chart svg .grid-container .main line {
      stroke: #efefef; }
    .-bacs-chart svg .grid-container .axis line {
      stroke: #000000; }
    .-bacs-chart svg .axis path.domain {
      stroke: #efefef; }
    .-bacs-chart svg .axis text {
      font-size: 8px;
      font-weight: 500; }
      .-bacs-chart svg .axis text.label {
        font-size: 10px; }
    .-bacs-chart svg .plot-balls-chart .plot-items .plot {
      cursor: pointer; }
      .-bacs-chart svg .plot-balls-chart .plot-items .plot:hover {
        stroke-width: 5;
        opacity: 1; }
      .-bacs-chart svg .plot-balls-chart .plot-items .plot[data-active] {
        opacity: 0;
        animation: fadeInActivePlot 0.5s ease-out forwards; }
      .-bacs-chart svg .plot-balls-chart .plot-items .plot.-none {
        opacity: 0.2 !important; }
  .-bacs-chart .-body {
    position: relative; }
    .-bacs-chart .-body div.-no-dataset {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center; }
    .-bacs-chart .-body .-zoom {
      position: absolute;
      right: -1em;
      bottom: 2px;
      width: 20px;
      height: 20px;
      background-color: #666666;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer; }
      .-bacs-chart .-body .-zoom:hover {
        background-color: darkred; }
      .-bacs-chart .-body .-zoom img {
        width: 12px;
        height: 12px; }

.bacs-chart-inning-range.--wide {
  margin-left: 20px; }

.bacs-chart-series-line.--past {
  margin-bottom: 5px;
  position: relative; }
  .bacs-chart-series-line.--past .-unit {
    display: flex;
    justify-content: space-between;
    font-size: 7px;
    position: absolute;
    width: 310px;
    top: 1px; }
    .bacs-chart-series-line.--past .-unit .-left {
      padding-left: 5px;
      color: #4eb029; }
    .bacs-chart-series-line.--past .-unit .-right {
      color: #5275c9; }
    .bacs-chart-series-line.--past .-unit.-x2 {
      width: 615px; }
  .bacs-chart-series-line.--past svg {
    margin-right: 20px; }
    .bacs-chart-series-line.--past svg .axis text {
      font-size: 6.5px;
      font-weight: bold; }
    .bacs-chart-series-line.--past svg .axis.left text {
      fill: #4eb029; }
    .bacs-chart-series-line.--past svg .axis.right text {
      fill: #5275c9; }
    .bacs-chart-series-line.--past svg .axis.bottom .ticks line {
      stroke: none; }
.bacs-chart-series-line.--past.--x2 .-unit {
  width: 610px; }
.bacs-chart-series-line.--he-past {
  margin-top: -20px;
  padding-top: 20px;
  z-index: 1; }
  .bacs-chart-series-line.--he-past .-unit {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    position: absolute;
    width: 100%;
    top: 1px;
    font-weight: bold; }
    .bacs-chart-series-line.--he-past .-unit .-left {
      padding-left: 5px; }
    .bacs-chart-series-line.--he-past .-unit .-right {
      margin-right: -1rem; }
  .bacs-chart-series-line.--he-past svg .axis.left text {
    font-size: 11px; }
  .bacs-chart-series-line.--he-past svg .axis.bottom text {
    font-size: 9px; }
  .bacs-chart-series-line.--he-past svg path.line {
    stroke-width: 2px;
    filter: brightness(0.5); }

.vs-data-release .-back-chart-group {
  display: flex; }
  .vs-data-release .-back-chart-group .-bacs-chart {
    margin-left: 10px; }
    .vs-data-release .-back-chart-group .-bacs-chart svg .extra-rect .zone-rect-0 {
      stroke: #666666;
      fill-opacity: 0.2; }
    .vs-data-release .-back-chart-group .-bacs-chart svg .extra-rect .zone-rect-1 {
      fill-opacity: 0.2; }

.bacs-batting-zone svg {
  background: #ffffff; }
  .bacs-batting-zone svg .area-item path {
    stroke: black;
    stroke-width: 0.3;
    cursor: pointer;
    fill-opacity: 0.1;
    opacity: 0.8; }
  .bacs-batting-zone svg .area-item text {
    display: none;
    font-size: 15px;
    font-weight: bold; }
  .bacs-batting-zone svg .area-item.-active {
    cursor: pointer; }
    .bacs-batting-zone svg .area-item.-active text {
      display: inherit;
      font-size: 18px; }
    .bacs-batting-zone svg .area-item.-active path {
      fill-opacity: 0.8; }
    .bacs-batting-zone svg .area-item.-active.-selected text {
      font-weight: bold; }
    .bacs-batting-zone svg .area-item.-active.-selected path {
      opacity: 1; }
    .bacs-batting-zone svg .area-item.-active.-hover path {
      opacity: 0.8;
      fill-opacity: 1;
      fill: #ffeb58; }
    .bacs-batting-zone svg .area-item.-active.-hover text {
      font-size: 18px;
      font-weight: bold; }
.bacs-batting-zone.-theme svg .area-item.-active.-selected path {
  fill: #ffeb58; }
.bacs-batting-zone.-he-theme svg .area-item.-active.-selected path {
  opacity: 1;
  font-weight: bold;
  stroke-color: #0D47A1;
  stroke-width: 1; }
.bacs-batting-zone.-he-theme svg .area-item.-active.-selected.-hover path {
  opacity: 0.8;
  fill-opacity: 1; }

.bacs-batting-angle svg .axis text {
  font-size: 14px;
  fill: #000000; }
.bacs-batting-angle svg .axis path {
  stroke: #cccccc; }
.bacs-batting-angle svg .axis line {
  stroke: #cccccc; }
.bacs-batting-angle svg .chart-group .area path {
  fill-opacity: 0.7;
  stroke-width: 1.5px; }

.bacs-batting-stadium.-bacs-chart svg g.axis .angle-axis line {
  stroke: red; }
  .bacs-batting-stadium.-bacs-chart svg g.axis .angle-axis line.tick-angle-0, .bacs-batting-stadium.-bacs-chart svg g.axis .angle-axis line.tick-angle-180 {
    stroke: none;
    fill: none; }
  .bacs-batting-stadium.-bacs-chart svg g.axis .angle-axis line.tick-angle-45, .bacs-batting-stadium.-bacs-chart svg g.axis .angle-axis line.tick-angle-135 {
    stroke: white;
    stroke-width: 2px;
    fill: none; }
.bacs-batting-stadium.-bacs-chart svg g.axis .angle-axis text {
  font-family: "monospace";
  fill: black;
  font-size: 15px; }
.bacs-batting-stadium.-bacs-chart svg g.axis .value-axis .arc-axis path {
  stroke: white;
  fill: white;
  opacity: 0.02; }
.bacs-batting-stadium.-bacs-chart svg g.axis .value-axis .ticks path.domain {
  fill: none;
  stroke: none; }
.bacs-batting-stadium.-bacs-chart svg g.axis .value-axis .ticks .tick line {
  stroke: none; }
.bacs-batting-stadium.-bacs-chart svg g.axis .value-axis .ticks .tick text {
  fill: white; }
.bacs-batting-stadium.-bacs-chart svg g.axis text {
  font-size: 15px;
  font-weight: 500; }
  .bacs-batting-stadium.-bacs-chart svg g.axis text.label {
    font-size: 10px; }
.bacs-batting-stadium.-bacs-chart svg g.segment {
  opacity: 1;
  stroke-width: 1.5px; }
  .bacs-batting-stadium.-bacs-chart svg g.segment path {
    opacity: 0.05;
    fill: white;
    stroke-width: 1px; }
  .bacs-batting-stadium.-bacs-chart svg g.segment.-hover path {
    opacity: 0.1;
    fill: blue; }
  .bacs-batting-stadium.-bacs-chart svg g.segment.selected path {
    opacity: 0.3;
    fill: white; }
  .bacs-batting-stadium.-bacs-chart svg g.segment.selected.-hover path {
    fill: pink;
    opacity: 0.1; }
  .bacs-batting-stadium.-bacs-chart svg g.segment.arc-dot path.border {
    opacity: 1;
    stroke: white;
    stroke-width: 1px;
    stroke-dasharray: 5, 10; }
.bacs-batting-stadium.-bacs-chart svg .arc-out {
  opacity: 0.1;
  fill: white;
  cursor: pointer; }
  .bacs-batting-stadium.-bacs-chart svg .arc-out:hover {
    opacity: 0.1;
    fill: blue; }
  .bacs-batting-stadium.-bacs-chart svg .arc-out.selected {
    fill: white;
    opacity: 0.3; }
    .bacs-batting-stadium.-bacs-chart svg .arc-out.selected:hover {
      fill: pink;
      opacity: 0.1; }
.bacs-batting-stadium.-bacs-chart svg .ball-plot .plot path {
  cursor: pointer; }
  .bacs-batting-stadium.-bacs-chart svg .ball-plot .plot path.-none {
    opacity: 0.3; }
  .bacs-batting-stadium.-bacs-chart svg .ball-plot .plot path.-selected {
    opacity: 1; }
.bacs-batting-stadium.-bacs-chart svg .ball-plot .plot.-hover path {
  stroke-width: 5px;
  stroke-color: white; }
.bacs-batting-stadium.-bacs-chart svg .ball-plot .plot.-none {
  opacity: 0.3; }
.bacs-batting-stadium.-bacs-chart svg .ball-plot .plot.-selected {
  opacity: 1; }
.bacs-batting-stadium.-bacs-chart.zone-select-disabled svg g.segment.-hover path {
  opacity: 0; }
.bacs-batting-stadium.-bacs-chart.zone-select-disabled svg .arc-out {
  cursor: none; }
  .bacs-batting-stadium.-bacs-chart.zone-select-disabled svg .arc-out:hover {
    opacity: 0; }

.bacs-chart-pie svg {
  background-color: #ffffff; }
  .bacs-chart-pie svg .chart-group .pie .value path {
    stroke: #ffffff; }
  .bacs-chart-pie svg .chart-group .pie .value.-hover path {
    stroke-width: 2px; }

.modal-zoom-chart {
  width: 100vw;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center; }
  .modal-zoom-chart .-body {
    width: 812px;
    height: calc(-60px + 100vh);
    position: relative;
    min-width: 820px;
    border-radius: 4px;
    background: #ededed;
    padding-top: 2rem;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center; }

@keyframes fadeInActivePlot {
  0% {
    opacity: 0; }
  70% {
    opacity: 0.8; }
  100% {
    opacity: 1; } }

/*# sourceMappingURL=bacsChart.css.map */