html {
  scroll-behavior: smooth;
}

.foreground{
  fill:none;
  stroke:#6482b0;
  stroke-width: .7;
}

.similarPlays{
  stroke:#333333;
}

.matrixLabel{
  stroke:#4a4a4a;
  fill: #4a4a4a;
  text-anchor:middle;
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  text-transform: capitalize;
  font-size: 1em;
  font-weight: lighter;
}

.background{
  fill:none;
  stroke:#e0e0e0;
  stroke-width: .7;
}

.header{
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}

.not-active{
  display: none;
}

.passBar{
  fill:#babdc2
  /* fill:#a8acb3; */
}

.axis_group{
  font-weight: normal;
  stroke:#444547;
  fill:#444547;
  font-size:.9em;
  text-transform: capitalize;


}
.pcpLabel{
  stroke:#444547;
  fill: #444547;
  text-anchor:middle;
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  text-transform: capitalize;
  font-size: 1em;
  font-weight: normal;
}

.runBar{
  fill:#6482b0;
}

.opaquePCPLines{
  opacity:0;
}

.fakeRect{
  pointer-events:all;

  fill:none;
  /* stroke:gray;
  stroke-width:1px; */
}

.matrixRect{
  fill:#6482b0;;
  /* stroke:black;
  stroke-width:1px; */
}

.deSelectedMatrixRect{
  fill:#e0e0e0;
}

.deHoverMatrixRect{
  /* opacity:0.5; */
}

/* g {
  pointer-events: bounding-box;
}

svg {
  pointer-events: bounding-box;
} */
#Field{
  align-items: center;
  display: flex;
}

.hoverRect{
  pointer-events:all;
  fill:none;
  opacity:1;
}

.vertHoverRect{
  pointer-events:all;
  fill:none;
  opacity:1;
}

.activeHoverRect{
  fill:gray;
  opacity:.3;
}

.notSelectedFromBrush{
  opacity:0 !important;
}

.notSelectedFromMatrix{
  opacity:0 !important;
}

div.tooltip{
    z-index: 100;
    position: absolute;
    text-align: center;
    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    min-width: 80px;
    max-width: 200px;
    min-height: 130px;
    padding: 10px;
    background: white;
    stroke: #333333;
    border-radius: 8px;
    pointer-events: none;
}

div.matrixTooltip{
    position: absolute;
    text-align: center;
    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    min-width: 30px;
    height: 30px;
    padding: 5px;
    background: white;
    stroke: #333333;
    border-radius: 8px;
    pointer-events: none;
}

.tooltip h1{
    margin: auto;
    font-size: 13px;
    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.tooltip h2{
    margin: auto;
    font-size: 9px;
    /* font: 12px sans-serif; */
    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.matrixTooltip h1{
    margin: auto;
    font: 16px sans-serif;
    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.notSelected{
  opacity: .3;
  stroke: #333333;
}

.selectedPlay {
  stroke-width: 2px;
  stroke:black;
}

.currentPlay {
  fill:white;
  stroke:#333333;
}

.successRects text{
  /* font-weight: 100; */
  font-size: 8px;
  text-anchor: middle;
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  alignment-baseline: central;
}

.percentageRect text {
  /* lengthAdjust: spacingAndGlyphs; */
  /* font-weight: 100; */
  font-size: 8px;
  font-weight: bold;
  text-anchor: middle;
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  alignment-baseline: central;
}

.fgRects text {
  /* lengthAdjust: spacingAndGlyphs; */
  /* font-weight: 100; */
  font-size: 8px;
  text-anchor: middle;
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  alignment-baseline: central;
}

.percentageRect rect {
  /* stroke: black;
  stroke-width: 1px; */
  /* fill: white; */
}

.successRects rect {
  /* stroke: black;
  stroke-width: 1px; */
  /* fill: white; */
}

.fgRects rect {
  /* stroke: black;
  stroke-width: 1px; */
  /* fill: white; */
}

.centerText {
  text-anchor: middle;
  alignment-baseline: central;
  font-weight: bold;
  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}


.homeTeam {
  fill:#6482b0;
  cursor: pointer;
  font-weight: bold;
}

.awayTeam {
  fill:#6482b0;
  cursor: pointer;
  font-weight: bold;

}

.selectedTeamText {
  fill: #80bf92;
}

.yardLine {
  letter-spacing: 3;
}

select{
  min-width: 150px;
}

#storySVGDiv{
  z-index: 100;
  position:absolute;
  top:0;
  left:0;
}

.tooltipDiv{
  z-index: 100;
  position: absolute;
  text-align: center;
  min-width: 80px;
  max-width: 400px;
  min-height: 130px;
  padding: 10px;
  background: white;
  stroke: #333333;
  border-radius: 8px;
  pointer-events: none;
  border: 1px solid black;
}

h4 {
  font-size: .75em;
}
.frame{
  text-align: center;
}

#doc{
  width: 800px;
  height: 1000px;
  border: 1px solid black;
  border-radius: 10px;
}

#youtube{
  border: 1px solid black;
  border-radius: 10px;
  width: 800px;
  height: 500px;
}