.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;
}

.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: rgb(0, 0, 0);
  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: rgb(255, 235, 88);
}
.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: rgb(255, 235, 88);
}
.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 */