/* =========================================================
   Single-table position race graph
========================================================= */

.single-table-position-graph {
	display: none;
}

@media (min-width: 1100px) {
	#groupstage.single-table-workbench .group.single-table-workbench-main>.single-table-position-graph {
		grid-column: 1 / 4;
		grid-row: 2;
		display: block;
		margin-top: 2px;
		border-radius: 22px;
		overflow: hidden;
		background: rgba(13, 21, 23, 0.94);
		border: 1px solid rgba(255, 255, 255, 0.085);
		box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
	}

	.position-graph-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		padding: 15px 18px 12px;
		background: rgba(255, 255, 255, 0.045);
		border-bottom: 1px solid rgba(255, 255, 255, 0.075);
	}

	.position-graph-title {
		color: #fff;
		font-size: 15px;
		font-weight: 900;
		letter-spacing: 0;
	}

	.position-graph-subtitle {
		margin-top: 3px;
		color: rgba(255, 255, 255, 0.46);
		font-size: 11px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.08em;
	}

	.position-graph-body {
		position: relative;
		overflow: hidden;
		padding: 12px 14px 14px;
	}

	/*  .position-graph-svg {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    background:
      radial-gradient(circle at 50% 20%, rgba(61, 209, 220, 0.055), transparent 18rem),
      rgba(7, 16, 18, 0.34);
  }

  .position-graph-bg {
    fill: rgba(7, 16, 18, 0.18);
  }

  .position-graph-grid {
    stroke: rgba(255,255,255,0.075);
    stroke-width: 1;
  }
*/


	/* replacement for above */
	.position-graph-svg {
		width: 100%;
		height: auto;
		display: block;
		border-radius: 18px;
	}

	.position-graph-bg {
		fill: rgba(7, 16, 18, 0.34);
	}

	.position-graph-glow {
		pointer-events: none;
		display: none;
	}


	.position-graph-body {
		position: relative;
		overflow: hidden;
	}

	.position-graph-body::before {
		content: "";
		position: absolute;
		inset: 12px 14px 14px;
		border-radius: 18px;
		pointer-events: none;
		z-index: 1;
		background:
			radial-gradient(circle at 50% 20%, rgba(61, 209, 220, 0.055), transparent 18rem),
			repeating-linear-gradient(0deg,
				rgba(255, 255, 255, 0.018) 0,
				rgba(255, 255, 255, 0.018) 1px,
				transparent 1px,
				transparent 4px),
			repeating-linear-gradient(90deg,
				rgba(255, 255, 255, 0.012) 0,
				rgba(255, 255, 255, 0.012) 1px,
				transparent 1px,
				transparent 4px);
		mix-blend-mode: screen;
		opacity: 0.8;
	}

	.position-graph-svg,
	.position-graph-days,
	.position-graph-legend {
		position: relative;
		z-index: 2;
	}


	/*--------------------*/


	.position-graph-x-grid {
		stroke: rgba(255, 255, 255, 0.035);
		stroke-width: 1;
	}

	.position-graph-x-grid.is-labeled {
		stroke: rgba(255, 255, 255, 0.060);
	}

	.position-graph-x-label {
		fill: rgba(255, 255, 255, 0.38);
		font-size: 10px;
		font-weight: 800;
	}

	.position-graph-axis-label {
		fill: rgba(255, 255, 255, 0.38);
		font-size: 11px;
		font-weight: 800;
	}

	.position-graph-cutoff {
		stroke: rgba(61, 209, 220, 0.30);
		stroke-width: 1.5;
		stroke-dasharray: 5 5;
	}

	.position-graph-cutoff-label {
		fill: rgba(61, 209, 220, 0.92);
		font-size: 9.5px;
		font-weight: 950;
		letter-spacing: 0.08em;
		paint-order: stroke;
		stroke: rgba(5, 12, 15, 0.88);
		stroke-width: 3px;
		stroke-linejoin: round;
		pointer-events: none;
	}

	.position-race-line {
		fill: none;
		stroke: rgba(255, 255, 255, 0.15);
		stroke-width: 1.45;
		stroke-linecap: round;
		stroke-linejoin: round;
		pointer-events: none;
		transition: opacity 0.12s ease, stroke-width 0.12s ease, stroke 0.12s ease;
	}

	.position-race-hover-line {
		fill: none;
		stroke: transparent;
		stroke-width: 14;
		stroke-linecap: round;
		stroke-linejoin: round;
		pointer-events: stroke;
		cursor: pointer;
	}

	.position-graph-tooltip {
		position: absolute;
		z-index: 6;
		left: 0;
		top: 0;
		transform: translate(-50%, calc(-100% - 12px));
		min-width: 132px;
		max-width: 220px;
		padding: 8px 10px;
		border-radius: 12px;
		border: 1px solid rgba(61, 209, 220, 0.30);
		background: rgba(5, 12, 15, 0.94);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.36);
		color: #fff;
		pointer-events: none;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.08s ease;
	}

	.position-graph-tooltip.is-visible {
		opacity: 1;
		visibility: visible;
	}

	.position-graph-tooltip-team {
		font-size: 12px;
		font-weight: 900;
		line-height: 1.2;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.position-graph-tooltip-meta {
		margin-top: 3px;
		color: rgba(255, 255, 255, 0.66);
		font-size: 11px;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.04em;
	}

	.position-race-point {
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.10s ease, r 0.10s ease;
	}

	.position-race-point.is-hovered,
	.position-race-point.is-selected {
		opacity: 0.95;
	}

	.single-table-position-graph.has-hovered-team .position-race-line {
		opacity: 1;
	}

	.single-table-position-graph.has-hovered-team .position-race-line.is-hovered {
		stroke: var(--position-graph-team-color);
		opacity: 1;
		stroke-width: 3.8;
	}

	.single-table-position-graph.has-selected-team .position-race-line.is-selected {
		stroke: var(--position-graph-team-color);
		opacity: 1;
		stroke-width: 3.2;
	}

	.single-table-position-graph.has-selected-team .position-race-line.is-selected.is-hovered {
		stroke-width: 4.2;
	}

	.position-graph-focus-line {
		stroke: rgba(255, 255, 255, 0.30);
		stroke-width: 1.5;
		stroke-dasharray: 4 4;
	}

	.position-graph-focus-label {
		fill: rgba(255, 255, 255, 0.64);
		font-size: 11px;
		font-weight: 900;
	}

	.position-race-end-label {
		fill: rgba(255, 255, 255, 0.48);
		font-size: 7.5px;
		font-weight: 850;
		letter-spacing: -0.02em;
		cursor: pointer;
		user-select: none;
		pointer-events: auto;
		paint-order: stroke;
		stroke: rgba(5, 12, 15, 0.76);
		stroke-width: 2.4px;
		stroke-linejoin: round;
		transition: fill 0.12s ease, opacity 0.12s ease;
	}

	.position-race-end-label.is-hovered,
	.position-race-end-label.is-selected {
		fill: var(--position-graph-team-color);
	}

	.single-table-position-graph.has-selected-team .position-race-end-label {
		opacity: 0.70;
	}

	.single-table-position-graph.has-selected-team .position-race-end-label.is-selected {
		opacity: 1;
	}

	.position-graph-empty {
		min-height: 300px;
		margin: 12px 14px 14px;
		border-radius: 18px;
		background:
			repeating-linear-gradient(0deg,
				rgba(255, 255, 255, 0.018) 0,
				rgba(255, 255, 255, 0.018) 1px,
				transparent 1px,
				transparent 4px),
			repeating-linear-gradient(90deg,
				rgba(255, 255, 255, 0.012) 0,
				rgba(255, 255, 255, 0.012) 1px,
				transparent 1px,
				transparent 4px),
			radial-gradient(circle at 50% 20%, rgba(61, 209, 220, 0.055), transparent 18rem),
			rgba(7, 16, 18, 0.34);
		/*
      radial-gradient(circle at 50% 20%, rgba(61, 209, 220, 0.055), transparent 18rem),
      rgba(7, 16, 18, 0.34);
    */
		border: 1px solid rgba(255, 255, 255, 0.045);
		color: rgba(255, 255, 255, 0.50);
		font-size: 13px;
		font-weight: 900;
		text-align: center;
		display: grid;
		place-items: center;
		padding: 24px;
	}

	.position-graph-future-void {
		fill: rgba(255, 255, 255, 0.035);
	}

	.position-graph-future-boundary {
		stroke: rgba(255, 255, 255, 0.24);
		stroke-width: 1.5;
		stroke-dasharray: 5 5;
	}

	.position-graph-future-label {
		fill: rgba(255, 255, 255, 0.52);
		font-size: 10px;
		font-weight: 950;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		paint-order: stroke;
		stroke: rgba(5, 12, 15, 0.88);
		stroke-width: 3px;
		stroke-linejoin: round;
		pointer-events: none;
	}

	.position-graph-day.is-future {
		opacity: 0.42;
	}

	.position-graph-day.is-future:hover {
		opacity: 0.70;
	}


}

@media (min-width: 1100px) and (max-width: 1320px) {
	#groupstage.single-table-workbench .group.single-table-workbench-main>.single-table-position-graph {
		margin-top: 0;
	}


	.position-graph-day {
		min-width: 22px;
		height: 21px;
		font-size: 9px;
	}
}

.position-graph-future-void {
	fill: rgba(255, 255, 255, 0.035);
}

.position-graph-future-boundary {
	stroke: rgba(255, 255, 255, 0.24);
	stroke-width: 1.5;
	stroke-dasharray: 5 5;
}


.position-graph-day.is-future {
	opacity: 0.42;
}

.position-graph-day.is-future:hover {
	opacity: 0.70;
}