main.match-details .team-comparator {
    display: grid;
    grid-template-columns: 1fr 75% 1fr;
}

main.match-details .team-comparator span {
    color: var(--primary-pale);
}

main.match-details .team-comparator span.winner {
    color: var(--active-blue);
}

main.match-details .team-comparator span:nth-of-type(3n) {
    text-align: end;
}


main.match-details .team-comparator .comparator-bar {
    border-radius: 25px; 
    height: 10px;
}

main.match-details .team-comparator .comparator-bar.outer {
    width: 100%;
    background-color: var(--status-default-gray);
}

main.match-details .team-comparator .comparator-bar.inner {
    
    background: linear-gradient(90deg, #284078, #4185fa);
}

main.match-details .team-comparator *:nth-child(5n-4), 
main.match-details .team-comparator *:nth-child(5n) {
    grid-column: span 3;
}

main.match-details .team-comparator *:nth-child(5n) {
    height: 18px
}



main.match-details .team-comparator .comparator-bar.inner.flipped {
    transform: scaleX(-1);
    float: right;
}


.match-details-banner {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 25% 50% 25%;
    min-height: 90px;
}

.match-details-banner > div {
    width: 100%;
    height: 100%;

    background: linear-gradient(70deg, #1f1f2c, #191923);
}

.match-details-banner > div:first-child {
    background: linear-gradient(70deg, #191923, #1f1f2c);
    z-index: 1;
    box-shadow: #00000073 8px 0px 15px -5px;
}

.match-details-banner > div:last-child {
    z-index: 1;
    box-shadow: #00000073 -8px 0px 15px -5px;
}



.match-details-banner>div:first-child>span,
.match-details-banner>div:last-child>span {
    font-size: 15px;
    font-weight: bolder;
}

.match-details-banner>div:first-child > *,
.match-details-banner>div:last-child > * {
    margin: 0 40px;
}

.match-details-banner .versus {
    display: grid;
    grid-auto-flow: column;
    align-content: center;
    grid-template-columns: 1fr 15% 1fr;
    padding: 0 5%;
}

.match-details-banner .versus span {
    font-weight: 500;
    font-size: 18px;
}

.match-details-banner .versus img {
    max-height: 45px;
    object-fit: contain;
}


.match-details-banner .versus>div:first-child,
.match-details-banner .versus>div:last-child {
    display: flex;
    align-items: center;
    gap: 15px;
}


.match-details-banner .versus>div:first-child {
    justify-content: end;
}

.match-details-banner .versus>div:last-child {
    justify-content: start;
}

.match-details-banner .versus>:nth-child(2) {
    /* Scores */
    height: 100%;
    width: 100%;
    position: relative;
    display:flex;
    justify-content: center;
    align-items: center;

}

.match-details-banner .versus>:nth-child(2)>:first-child {
    position: absolute;
    transform: translateY(30px);
    font-size: 12px;
    font-weight: lighter;
}

.match-details-banner .versus>:nth-child(2)>:last-child {
    font-size: 28px;
    font-weight: 400;
}

.match-details-banner .banner-date span {
	font-size: inherit;
}

.lol-scoreboard {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 0.5rem;
}

/* LoL scoreboards start */
#lol-scoreboards.scoreboards .item-container {
    width: 25px;
    height: 25px;
    background-color: transparent;
}

#lol-scoreboards.scoreboards .champion-stats {
    display: grid;
    grid-template-columns: 100px 30% auto auto;
    height: 100%;
}

#lol-scoreboards.scoreboards .core-team-stats {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 5px;
    justify-items: center;
}

#lol-scoreboards.scoreboards.hok .core-team-stats {
    grid-template-columns: repeat(6, 1fr);
}

#lol-scoreboards.scoreboards.hok .core-champion-stats {
    grid-template-rows: repeat(2, 1fr);
}

#lol-scoreboards.scoreboards .core-team-stats img {
    width: 100%;
    max-width: 15px;
    max-height: 15px;
}

#lol-scoreboards.scoreboards .core-champion-stats {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-auto-flow: column;
    gap: 5px;
    justify-content: center;
    align-items: center;
    align-self: center;
}

#lol-scoreboards.scoreboards .core-champion-stats > span:first-of-type {
    color: #777798;
    font-weight: bold
}


#lol-scoreboards.scoreboards .core-champion-stats > *:nth-child(-n+3) {
    justify-self: center;
}

#lol-scoreboards.scoreboards .lol-teamstats:first-child,
#lol-scoreboards.scoreboards .lol-teamstats:first-child .core-team-stats,
#lol-scoreboards.scoreboards .lol-teamstats:first-child .core-champion-stats {
    direction: rtl;
}
#lol-scoreboards.scoreboards .lol-teamstats:first-child > .position-icon {
    visibility: hidden;
}

#lol-scoreboards.scoreboards .lol-teamstats {
    display: grid;
    grid-template-columns: auto 36% repeat(4, 1fr);
    grid-template-rows: 55px repeat(5, minmax(80px, 1fr));
    align-items: center;
    gap: 5px 0;
}

#lol-scoreboards.scoreboards .lol-teamstats .position-icon {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    width: 30px;
}

#lol-scoreboards.scoreboards .lol-teamstats .position-icon img {
    right: 50%;
    position: absolute;
    max-height: unset;
}

#lol-scoreboards.scoreboards .lol-teamstats h3 {
    word-spacing: 1000px;
}

#lol-scoreboards.scoreboards .lol-teamstats > *:not(:first-child):not(:nth-child(2)):nth-child(-n+6) {
    height: 100%;
    background-color: var(--bg-dark-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.2rem;
}

#lol-scoreboards.scoreboards .lol-teamstats > *:not(:nth-child(-n+5)):not(:nth-child(6n+7)) {
    background-color: var(--bg-primary-darkest);
    height: 100%;
}

#lol-scoreboards.scoreboards .lol-teamstats > *:not(:first-child):not(:nth-child(6n+7)) {
    border-color: var(--bg-dark-purple);
    border-style: solid;
    border-width: 1px 0 1px 0;
}

#lol-scoreboards.scoreboards .lol-teamstats:not(:first-child) > *:nth-child(2),
#lol-scoreboards.scoreboards .lol-teamstats:first-child > *:nth-child(6n),
#lol-scoreboards.scoreboards .lol-teamstats:not(:first-child) > *:nth-child(6n+7) {
    border-left-width: 1px;
    border-radius: 5px 0 0 5px;
}

#lol-scoreboards.scoreboards .lol-teamstats:first-child > *:nth-child(2),
#lol-scoreboards.scoreboards .lol-teamstats:first-child > *:not(:nth-child(n+6)):nth-child(6n+7),
#lol-scoreboards.scoreboards .lol-teamstats:not(:first-child) > *:nth-child(6n) {
    border-right-width: 1px;
    border-radius: 0px 5px 5px 0px;
}


#lol-scoreboards.scoreboards .lol-teamstats:not(:first-child) > *:nth-child(2) {
    border-left-width: 2px;
    border-top-width: 2px;
}

#lol-scoreboards.scoreboards .lol-teamstats:first-child > *:nth-child(2) {
    border-right-width: 2px;
    border-top-width: 2px;
}

#lol-scoreboards.scoreboards .lol-teamstats.lol-side-red > *:nth-child(2),
#lol-scoreboards.scoreboards .lol-teamstats.lol-side-red .core-champion-stats > span:first-of-type {
    border-color: rgb(152 112 124);
    color: rgb(152 112 124);
}

#lol-scoreboards.scoreboards .lol-teamstats.lol-side-red .core-team-stats img,
#lol-scoreboards.scoreboards .lol-teamstats.lol-side-red .core-champion-stats img {
    filter: hue-rotate(90deg);
}


#lol-scoreboards.scoreboards .lol-teamstats > *:not(:nth-child(-n+7)):nth-child(6n+8) {
    border-width: 1px;
    border-radius: 5px 5px 5px 5px;
}

#lol-scoreboards.scoreboards .lol-teamstats:first-child > *:nth-child(3) {
    border-radius: 0 5px 5px 0;
}

#lol-scoreboards.scoreboards .lol-teamstats:not(:first-child) > *:nth-child(3) {
    border-radius: 5px 0 0 5px;
}

#lol-scoreboards.scoreboards .champion-portrait {
    flex: 1;
    background-size: cover;
    background-position: 50%;
}


.lol-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
}

.lol-runes {
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
    gap: 5px;
}

.lol-runes > * {
    align-self: center;
}

#lol-scoreboards.scoreboards .lol-runes > .item-container:last-child {
    height: 1.25rem;
}


.lol-runes .item-container:not(:first-child) img,
.lol-spells .item-container img {
    width: 20px;
}
/* LoL scoreboards end */

/* PICK BAN START */
body.cs2 .pick-ban-section {
    display: flex;
    flex-direction: row;
    padding: 65px 70px;
    position: relative;
}


body.cs2 .pick-ban-section .map-logo {
    padding: 10px;
    border: 2px solid white;
    border-radius: 50%;
    width: 85px;
    height: 85px;
    background-color: var(--bg-primary-medium);
}

body.cs2 .pick-ban-section .map-logo.picked {
    border-color: var(--active-blue);
}

body.cs2 .pick-ban-section .pick-ban {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* TODO rename to something like match-details-timeline-divider? */
body.cs2 .match-details .pick-ban-divider {
    content: "";
    height: 1px;
    width: 100%;
    background-color: var(--primary-pale);
    display: block;
    margin: auto 0;
    z-index: 1;
}


body.cs2 .match-details .pick-ban-divider:last-child {
    display: none;
}

body.cs2 .pick-ban-section .pick-ban .pick-ban-label {
    position:absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: 5px;
}


body.cs2 .pick-ban-section .pick-ban:nth-child(4n+3) .pick-ban-label {
    top: -40px;
}

body.cs2 .pick-ban-section .pick-ban:nth-child(4n+5) .pick-ban-label {
    bottom: -40px;
}


body.cs2 .pick-ban-section .map-logo.banned {
    border-color: #D90927; /* TODO What shade of red do we use?  */
}

body.cs2 .pick-ban-section .map-logo.picked {
    border-color: var(--active-blue);
}

body.cs2 .pick-ban-section .pick-ban-label span {
    color: #919191; /* TODO new color */
}

body.cs2 .pick-ban-section span.banned {
    color: #D90927; /* TODO What shade of red do we use?  */
}

body.cs2 .pick-ban-section span.picked {
    color: var(--active-blue);
}
body.cs2 .pick-ban-section .two-tone-decor {
    position: absolute;
    display: block;
    width: 100%;
    height: 50%;
    z-index: 0;
}

body.cs2 .pick-ban-section .two-tone-decor.top {
    top: 0px;
    left: 0px;
}

body.cs2 .pick-ban-section .two-tone-decor.bottom {
    left: 0;
    bottom: 0;
}
/* PICK BAN END */


.dual-article-container {
    display: flex;
    gap: 20px;
}

.dual-article-container > article {
    width: 50%;
    min-height: 500px;
}


.match-details .map-winner-score {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    min-width: 25px;
    /* TODO actually make it square */
    background-color: var(--bg-primary-dark); 
}

.match-details .map-winner-score span {
    color: var(--primary-pale)
}


.match-details .map-winner-score.won {
    background-color: var(--active-blue);
}

.match-details .map-winner-score.won span {
    color: white;
}

.match-details .chevron {
    background-color: var(--primary-pale);
    -webkit-mask: url(/images//icons/chevron.svg) no-repeat center;
    mask: url(/images//icons/chevron.svg) no-repeat center;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out,-webkit-transform .2s ease-in-out;
}

.match-details .match-list-switch {
    border-radius: 3px;
    position: relative;
    width: 25px;
    height: 25px;
}

.match-details .match-list-switch input:checked + .chevron {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

main.match-details #accordion .head-to-head-map {
    display: grid;
    grid-template-columns: auto auto auto;
    align-items: center;
    justify-items: center;
    border: 1px var(--primary-pale) solid;
    border-radius: 3px;
}

main.match-details #accordion .head-to-head-map > *:first-child {
    position: relative;
    grid-column: span 2;
    grid-row: span 2;
     background-size: cover;
}

main.match-details #accordion .head-to-head-map .head-to-head-winner {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 50px;
    gap: 3px;
    backdrop-filter: brightness(0.4) saturate(0.4);
}



main.match-details #accordion .pick-ban-divider {
    min-width: 10px;
    max-width: 90px
}

main.match-details #accordion input {
    opacity: 0;
    width: 0;
    height: 0;
}

main.match-details #cs2-teamstats table thead th:first-child {
    width: 33%;
}

/* MATCH DETAILS */
main.match-details {
    z-index: 1;
}

main.match-details iframe#scoreboard-widget {
    height: 0;
    transition: height 0.4s ease-in-out;
}

main.match-details table.played-maps {
    table-layout: auto;
}

main.match-details .half-overview .map-image,
main.match-details .played-maps .map-image {
    filter: brightness(0.4) saturate(0.4);
}

main.match-details .played-maps .map-image {
    max-height: 45px;
    object-fit: cover
}



main.match-details table.played-maps thead tr th:nth-child(3) {
    width: 55%;
}

main.match-details .header.header-with-logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px;
}

main.match-details table thead tr.team-stats-header-dire {
    background: linear-gradient(90deg, #4f2232, #2b212e);
}

main.match-details table thead tr.team-stats-header-radiant {
    background: linear-gradient(90deg, #26265e, rgb(34 34 56));
}

#dota2-scoreboards thead th:first-child {
    width: 15%;
}

#dota2-scoreboards thead th:first-child h3 {
    padding-left: 20px;
}

#dota2-scoreboards thead th:not(:first-child) h3 {
    text-align: center;
}

#dota2-scoreboards thead th h3,
#dota2-scoreboards tbody td:not(:first-child) span {
    /* color: var(--c-haze-blue); */
    color: var(--primary-pale);
}

.scoreboards .nav-link {
    padding: 0;
    /* border: none; */
}

.scoreboards .nav-tabs {
    border: none;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.scoreboards .nav-link:focus:not(:active) {
    border-color: transparent;
}

.scoreboards .nav-link {
	border: none;
}

.scoreboards .nav-link.active {
	box-shadow: 0px 0px 7.5px 0px var(--active-blue);
    transition: box-shadow 0.025s ease-in-out;
    background-color: transparent !important;
}

.scoreboards .nav-link:not(.active):hover {
	box-shadow: 0px 0px 4px 0px rgba(var(--active-blue-rgb), 0.66);
    transition: box-shadow 0.025s ease-in-out;
}


#dota2-scoreboards div.winner:not(:active) {
    border-color: transparent;
}

.map-overview {
    font-size: 14px;
    font-weight: bold;
}

.map-overview .map-overview-grid  {
    color: var(--active-blue);
}

.map-overview .map-overview-grid >:last-child {
    color: red;
}

.map-overview span {
    color: inherit;
    border-color: inherit;
    font-size: 14px;
    font-weight: bold;
}

.map-overview .map-overview-grid >:last-child .kill-compare > div {
    background-color: red;
}

.map-overview .kill-compare > div {
    background-color: var(--active-blue);
    content: '';
    width: 0px;
    height: 5px;
    max-width: 80px;
    border-radius: 1px;
}

.map-overview .map-winner .kill-compare > div {
    background-color: var(--active-blue);
}

.map-overview .map-overview-grid >:last-child .win-lose-box {
    border-color: red;
}
    
.map-overview .win-lose-box {
    border-radius: 3px;
    border: 1px solid var(--active-blue);
    background-color: var(--bg-primary-dark);
    height: 25px;
}

.map-overview .win-lose-box span {
    text-align: center;
    min-width: 25px;
}

.map-overview .sword-icon {
    filter: brightness(0) invert(1);
    width: 15px;
    height: 15px;
}

.map-overview .map-overview-grid {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    width: 100%;
    gap: 16px;
}

.map-overview .map-overview-bg  {
    filter: brightness(0.4);
    height: 50px;
}

.scoreboards .item-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
    background-color: rgb(61, 61, 81)
}

.scoreboards .item-container img {
    object-fit: cover;
    max-width: none;
}

.scoreboards .item-container,
.scoreboards .item-container img {
    border-radius: 15%;
}


#dota2-scoreboards .scepter {
    max-height: 30px;
}

#dota2-scoreboards .scepter.upper svg #Path_2516,
#dota2-scoreboards .scepter.upper svg #Union_9,
#dota2-scoreboards .scepter.lower svg #Path_2519,
#dota2-scoreboards .scepter.lower svg #Path_2520,
#dota2-scoreboards .scepter.lower svg #Path_2521 {
    fill: #6496fac4;
}


.scoreboards .nav-tabs,
.scoreboards .moba-pick-bans,
.scoreboards .tab-pane>*:not(:last-child) {
    margin-bottom: 20px;
}

#dota2-scoreboards .cropped-player-container {
    height: 50px;
    min-width: 50px;
    max-width: 50px;
    position: relative;
}

/* TODO add cs2 scope to its pick-ban CSS? */
.moba-pick-bans {
    font-size: 12px;
    gap: 10px;
}

.moba-pick-bans .bans,
.moba-pick-bans .picks {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
}

.moba-pick-bans div.pick-ban-label {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 75px;
    height: 40px;
}

.moba-pick-bans div.pick-ban-label > div {
    background-color: var(--bg-primary-medium);
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: calc(100% + 20px);
    height: 100%;
}



/* #dota2-scoreboards .moba-pick-bans .bans .hero-portrait:not(:first-child):not(:last-child),
#dota2-scoreboards .moba-pick-bans .picks .pick-wrapper:not(:first-child):not(:last-child) {
    margin: 0 5px;
}

#dota2-scoreboards .moba-pick-bans .bans .hero-portrait:first-child,
#dota2-scoreboards .moba-pick-bans .picks .pick-wrapper:first-child {
    margin-right: 5px;
}

#dota2-scoreboards .moba-pick-bans .bans .hero-portrait:last-child,
#dota2-scoreboards .moba-pick-bans .picks .pick-wrapper:last-child {
    margin-right: 5px;
} */

.moba-pick-bans .picks {

}

.moba-pick-bans .picks .pick-wrapper,
.moba-pick-bans .hero-portrait > img {
    border-radius: 5px;
}

.moba-pick-bans .hero-portrait img {
    object-fit: cover;
}

.moba-pick-bans .picks .hero-portrait img {
    width: 108px;
    height: calc(0.75 * 108px);
}

.moba-pick-bans .bans .hero-portrait img {
    width: 65px;
    height: calc(0.75 * 65px);
    filter: saturate(0.2);
    
}


.moba-pick-bans .picks .pick-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-primary-medium);
    text-align: center;
}

#lol-scoreboards.scoreboards .lol-teamstats .player-name-wrapper > span,
.moba-pick-bans .picks .pick-wrapper > span {
    margin: 0.2em;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 65px;
    overflow: hidden;
    direction: initial;
}

.scoreboards div.level-indicator {
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    left: 0.25em;
    bottom: 0.25em;

    background-color: var(--bg-primary-medium);
    width: 1.5em;
    height: 1.5em;
    text-align: center;
    border-radius: 0.3em;
    font-weight: bold;

}

#dota2-scoreboards .skill-order-wrapper {
    display: flex;
    justify-content: end;
    margin-bottom: 10px;
    flex: 0;
}

#dota2-scoreboards .skill-order {
    height: 50px;
    /* justify-content: right; */
    align-items: center;
    padding: 0 0.25rem;
    border-radius: 0 0 5px 5px;
    padding-right: 20px;

}
#dota2-scoreboards .skill-order > div {
    height: 30px;
}

#dota2-scoreboards .skill-order .level-indicator {
    right: 0.25em;
    left: unset;
    background: radial-gradient(closest-side, black -50%, transparent);
    font-size: 8px;
}

#dota2-scoreboards .skill-order .level-indicator span {
    font-size: 1em;
}

#dota2-scoreboards .skill-order .item-container {
    border: 1px darkgray solid;
    border-radius: 5px;
}

#dota2-scoreboards .skill-order .item-container img {
    border-radius: 5px;
}

#dota2-scoreboards .bi-plus-square-fill {
    cursor: pointer;
    color: rgb(65, 68, 86);
    font-size: 25px;
}

#dota2-scoreboards .form-check-input:checked + .bi-plus-square-fill {
    color: var(--primary-pale);
}

#dota2-scoreboards .form-check-input:checked + .bi-plus-square-fill.dire {
    color: #984663;
}

#dota2-scoreboards .form-check-input:checked + .bi-plus-square-fill.radiant {
    color: #4d4bc4;
}

#dota2-scoreboards img.talent-tree-icon:hover  {
    cursor: help;
    filter: hue-rotate(150deg) brightness(1.5);
}

#dota2-scoreboards #dota2-teamstats table thead tr th:nth-last-child(1){
    width: 160px;
}

#dota2-scoreboards #dota2-teamstats table thead tr th:nth-last-child(2){
    width: 400px;
}

#dota2-scoreboards #dota2-teamstats .level-indicator {
    font-size: 10px;
}

#dota2-scoreboards #dota2-teamstats .dota2-scoreboard-mechanics {
    display: grid;
    grid-auto-columns: 1fr;
    grid-auto-flow: column;
    max-width: 120px;
    justify-items: center;
    align-items: center; 
    flex: 1;
}

body.dota2 .popover {
    max-width: none;
    background-color: transparent;
}

body.dota2 .popover.show div.popover-body {
    padding: 0;
}

body.dota2 .popover.show div.popover-arrow {
    display: none;
}

body.dota2 .talent-tree-popover span {
    color: var(--c-haze-blue);
    padding: 0 5px;
}


body.dota2 .talent-tree-popover {
    width: 440px;
    height: 250px;

    display: grid;
    grid-template-columns: 1fr 45px 1fr;
    grid-auto-flow: dense;

    grid-template-rows: repeat(auto-fit, minmax(0, 1fr));
    background-color: var(--bg-primary-dark);
    border: 1px solid var(--bg-primary-darkest);
    border-radius: 5px;
}

body.dota2 .talent-tree-popover h2 {
    grid-column: span 3;
    color: white;
    letter-spacing: 0.3em;
    /* font-weight: lighter; */
    font-size: 14px;
}
body.dota2 .talent-tree-popover h2, body.dota2 .talent-tree-popover span {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;

}

.talent-tree-popover .tier {
    grid-column: 2;
    
}

body.dota2 .talent-tree-popover span.selected, 
body.dota2 .talent-tree-popover .tier {
    color: #F1C88A;
}

.talent-tree-popover .tier {
    border-left: 1px solid var(--bg-dark-purple);
    border-right: 1px solid var(--bg-dark-purple);
}
.talent-tree-popover span.tier:nth-of-type(4) {
    border-bottom: 1px solid var(--bg-dark-purple);
}

.talent-tree-popover span:nth-of-type(5),
.talent-tree-popover span:nth-of-type(6) {
    border-top: 1px solid var(--bg-dark-purple);
}

body.dota2 .talent-tree-popover span.tier {
    color: #F1C88A;
}

.talent-tree-popover *:first-child,
.talent-tree-popover .tier {
    background-color: var(--bg-primary-darkest);
}

/* MATCH DETAILS END */


/* HALVES START */
.half-overview .map-image {
    max-height: 100px;
}

.halves-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(45px, 1fr));
    grid-auto-flow: row;
    background-color: var(--bg-primary-darkest);
    flex-grow: 1;
}

.halves-grid>* {
    border: 1px solid var(--bg-woodsmoke);
    display: flex;
    justify-content: center;
    align-items: center;
}

.halves-grid span {
    text-align: center;
    width: 100%;
}

.halves-grid .bg-red-team {
    background-color: var(--cs-dark-peru);
}

.halves-grid .bg-blue-team {
    background-color:var(--cs-dark-slate-blue);
}

.halves-grid > *:nth-child(5n+2) {
    /* TODO any shorthand for this? */
    border-top: none;
    border-bottom: none;
    border-left: 1px solid var(--active-blue);
    border-right: 1px solid var(--active-blue);
}

.halves-grid > *:nth-child(5n+2) span {
    text-shadow: 0px 0px 12px white;
}

.halves-grid > *:nth-child(2) {
    border-top: 1px solid var(--active-blue);
}

.halves-grid > *:nth-last-child(4) {
    border-bottom: 1px solid var(--active-blue);
}

.halves-grid > *:nth-child(-n+5) {
    color: var(--primary-pale);
}
/* HALVES END */