.player-comparison{
    position: relative;
    display: grid;
	grid-template-columns: 1fr minmax(200px, 1fr) 1fr;
    justify-items: center;
    align-items: center;
    height: 300px;
    padding: 0 8%;
}

.player-comparison .dropdown-icon-container{
    background-color: var(--bg-primary-dark);
    width: 1em;
    height: 1em;
    font-size: 40px;
}

.player-comparison .player-selector {
    z-index: 1;
    max-width: 250px;
	align-self: end;
	margin-bottom: 1.2em;
}

.player-comparison .player-selector > img {
    width: 250px;
    max-height: 225px;
    object-fit: contain;
}

.player-comparison .background-team-icon {
    position: absolute;
    filter: blur(4px) opacity(0.2) saturate(2);
    height: 100%;
    max-width: 33%;
    object-fit: contain;
}


.player-comparison .background-team-icon.left {
    left: 0px;
}

.player-comparison .background-team-icon.right {
    right: 0px;
}

.player-comparison .stats-grid {
	display:grid;
	grid-auto-flow:column;
	grid-template-columns: 1fr minmax(175px, auto) 1fr;
	column-gap:40px;
	max-width:340px;
	width:100%;
}

.player-comparison .stats-grid .stats-col {
	display:grid;
	row-gap:10px;
	justify-items:center;
	margin-bottom: 1.2em;
}

.player-comparison .stats-grid #stats-headers {
	white-space:no-wrap;
}

.match-details .comparison-header {
    color: var(--c-default-gray)
}

/* Bootstrap overwrite */
.match-details .dropdown-toggle::after {
    display: none !important;
}

.match-details .comparison-dropdown-button {
    /* display: flex;
    justify-content: space-between; */
    display: grid;
    grid-template-columns: auto 40px;
    /* background-color: var(--bg-primary-medium); */
    background-color: var(--bg-dark-purple);
    align-items: center;
    
    border-radius: 3px;
    cursor: pointer;
}

.match-details .comparison-dropdown-button h2 {
    text-transform: uppercase;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.match-details .player-selector .role-icon {
    width: 22.5px;
    height: 22.5px;
}

.player-comparison .dropdown-menu {
    width: 100%;
    background-color: var(--bg-dark-purple);
    box-shadow: #0f0f0f 4px 4px 5px -2px; /*see box-shadow-dark*/
}

.dropdown-item {
    /* color: white; */
    color: rgb(255 255 255 / 75%);
    cursor: pointer;
}

.player-comparison h2[id^="selected-player-name-"], 
.player-comparison .dropdown-item div {
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-item:focus, .dropdown-item:hover, .dropdown-item.active {
    color: white;
    background-color: var(--primary-pale);
}

.comparison-dropdown-button .chevron {
    display: block;
    height: 40px;
    width: 40px;
}

.comparison-dropdown-button:not(.show) .chevron {
    transform: rotate(180deg);
}


.comparison-header {
    grid-column: 2;
}