/* global vars */
:root {
	--color-chart-text: black;
	--color-chart-center-text: #647d8f;
	--color-ok: #28a745;
	--color-nok: #e2000e;
	--color-neutral: silver;
	--color-seg01: #647d8f;
	--color-seg02: #6096bf;
	--color-seg03: #aabdcb;
	--color-seg04: #72a372;
	--color-seg05: #598059;
	--color-seg06: #cfe6cf;
	--color-seg07: #ccae8f;
	--color-seg08: #bf9060;
	--color-seg09: #806c59;
	--color-seg10: #e6cfcf;
	--color-seg11: #cc8f8f;
	--color-seg12: #bf6060;
	}

.highlight3{
	background: color-mix(in srgb, var(--color-ok) 50%, transparent);
}
.highlight2{
	background: color-mix(in srgb, var(--color-ok) 35%, transparent);
}
.highlight1{
	background: color-mix(in srgb, var(--color-ok) 20%, transparent);
}
.highlight0{
	background: color-mix(in srgb, var(--color-neutral) 50%, transparent);
}
.highlight-3{
	background: color-mix(in srgb, var(--color-nok) 50%, transparent);
}
.highlight-2{
	background: color-mix(in srgb, var(--color-nok) 35%, transparent);
}
.highlight-1{
	background: color-mix(in srgb, var(--color-nok) 20%, transparent);
}

.highlightPoints3{
	background: color-mix(in srgb, var(--color-ok) 50%, transparent);
}
.highlightPoints2{
	background: color-mix(in srgb, var(--color-ok) 35%, transparent);
}
.highlightPoints1{
	background: color-mix(in srgb, var(--color-ok) 20%, transparent);
}
.highlightPoints0{
	background: color-mix(in srgb, var(--color-nok) 50%, transparent);
}

.searchPlayer{
	font-size: 2.0em;
	position: fixed;
	top: 90px;
	left: calc(100dvw - 50px);
	z-index: 100;
}

.filterDash{
	padding-left: 15px;
	font-size: 1.5em;
}

.filterDashActive{
	color: blue !important;
}

.profile-wrapper {
	max-width: 1100px;
	margin: auto;
	padding: 30px 15px;
}

.stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 25px;
}

.chart-card {
	border-radius: 5px;
	padding: 20px;
	margin: 10px 0px;
	box-shadow: 0 0 25px rgba(0,0,0,0.4);
	transition: 0.3s ease;
}

.chart-card:hover {
	transform: translate(1px, 1px);
}