section > content {
    max-width: 1600px;
}

section.active-match {
    min-height: calc(90vh - 142px);
}

section.active-match > content > columns {
    position: relative;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 42px;
}

@media(max-width: 1083px) {
    section.active-match > content > columns {
        grid-template-columns: 100%;
        gap: 32px;
    }
}

section.active-match > content > columns > columnwrap {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

section.active-match > content > columns > columnwrap > tile {
    position: relative;
    display: block;
    width: 100%;
}

section.active-match > content > columns > columnwrap > tile:not(:last-child) {
    margin-bottom: 32px;
}

section.active-match > content > columns > columnwrap > tile::before {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: linear-gradient(to bottom, rgba(10, 10, 10, .9), rgba(0, 0, 0, .9));
    clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px));
}

section.active-match > content > columns > columnwrap > tile::after {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    content: '';
    background: rgba(255, 255, 255, .05);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 32px 100%, 0 calc(100% - 32px), 0 0, 2px 2px, 2px calc(100% - 32px - 0.83px), calc(32px + 0.83px) calc(100% - 2px), calc(100% - 2px) calc(100% - 2px), calc(100% - 2px) 2px, 2px 2px);
}



section.active-match > content > columns > columnwrap > tile.details {
    flex-grow: 0;
    flex-shrink: 0;
}


section.active-match > content > columns > columnwrap > tile.details livebadge {
    position: absolute;
    right: 24px;
    top: 24px;
    display: inline-flex;
    align-items: center;
    padding: 8px 12px 8px 14px;
    border-radius: 5000px;
    background: linear-gradient(to top, rgba(179, 15, 15, 1), rgba(32, 11, 11, 1));
    box-shadow: inset 0px 0px 1px 1px rgba(255, 72, 72, 0.3), 0px -1px 1px 1px rgba(0, 0, 0, .75), 0px 1px 1px 1px rgba(255, 255, 255, .25);
}

section.active-match > content > columns > columnwrap > tile.details livebadge > dot {
    position: relative;
    display: block;
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    margin: 0 8px 0 0;
    background: #ffbebe;
    border-radius: 50%;
    animation: 2s livedotpulse linear infinite;
    box-shadow: 0px 0px 8px rgba(255, 255, 255, .6);
}

@keyframes livedotpulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: .65;
    }

    100% {
        opacity: 1;
    }
}

section.active-match > content > columns > columnwrap > tile.details livebadge > p {
    position: relative;
    display: block;
    text-transform: uppercase;
    color: #ffbebe;
    margin: 0;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 4px;
    line-height: 1;
}


section.active-match > content > columns > columnwrap > tile.details > img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 60%;
    object-fit: cover;
    object-position: center center;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000000, transparent);
    mask-image: linear-gradient(to bottom, #000000, transparent);
    mask-repeat: no-repeat;
    opacity: .5;
    pointer-events: none;
}

section.active-match > content > columns > columnwrap > tile.details > content {
    position: relative;
    display: block;
    width: 100%;
    padding: 42px;
    -webkit-filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
    filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > tile.details > content {
        padding: 28px;
    }
}

section.active-match > content > columns > columnwrap > tile.details > content > titlewrap {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 0 42px;
}

section.active-match > content > columns > columnwrap > tile.details > content > titlewrap > h3 {
    position: relative;
    display: block;
    margin: 0;
    font-weight: 700;
}

section.active-match > content > columns > columnwrap > tile.details > content > score {
    position: relative;
    display: block;
    width: 100%;
}

section.active-match > content > columns > columnwrap > tile.details > content > score > entry {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    opacity: 1;
    transition: opacity .3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

section.active-match > content > columns > columnwrap > tile.details > content > score > entry:not(:last-of-type) {
    margin-bottom: 16px;
}

section.active-match > content > columns > columnwrap > tile.details > content > score > entry > h6 {
    position: relative;
    display: block;
    flex: 0 0 72px;
    line-height: 1.2;
    margin: 7px 16px 0 0;
    text-align: right;
}

section.active-match > content > columns > columnwrap > tile.details > content > score > entry.w > h6 {
    background: -webkit-linear-gradient(#ffec74 20%, #E5C818 80%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}








section.active-match > content > columns > columnwrap > matchevents {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
}

section.active-match > content > columns > columnwrap > matchevents > content {
    position: relative;
    display: block;
    width: 100%;
}

section.active-match > content > columns > columnwrap > matchevents > content > tile {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100px;
    padding: 0 42px;
    transform-origin: left center;
    overflow: hidden;
}

@media(max-width: 1000px) {
    section.active-match > content > columns > columnwrap > matchevents > content > tile {
        height: 110px;
    }
}

section.active-match > content > columns > columnwrap > matchevents > content > tile:not(:last-child) {
    margin-bottom: 16px;
}


section.active-match > content > columns > columnwrap > matchevents > content > tile > glow {
    position: absolute;
    left: 0;
    top: -300px;
    width: 900px;
    height: 600px;
    display: block;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .1), transparent);
    z-index: 0;
}



section.active-match > content > columns > columnwrap > matchevents > content > tile::after {
    z-index: 2;
}

section.active-match > content > columns > columnwrap > matchevents > content > tile > img {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    margin: 0;
    padding: 0;
    object-fit: contain;
    object-position: center center;
    margin: 0 24px 0 0;
    z-index: 1;
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > matchevents > content > tile:not(:last-child) {
        margin-bottom: 8px;
    }

    section.active-match > content > columns > columnwrap > matchevents > content > tile {
        padding: 0 28px;
    }

    section.active-match > content > columns > columnwrap > matchevents > content > tile > img {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        margin: 0 24px 0 0;
    }
}

section.active-match > content > columns > columnwrap > matchevents > content > tile > textwrap {
    position: relative;
    display: block;
    width: 100%;
    flex: 1 1 100%;
    margin: 0;
    z-index: 1;
}

section.active-match > content > columns > columnwrap > matchevents > content > tile > textwrap > h5 {
    position: relative;
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin: 0 0 -4px;
    padding: 0;
    font-weight: 600;
}


section.active-match > content > columns > columnwrap > matchevents > content > tile.allies::before {
    background: linear-gradient(to bottom, rgba(8, 13, 15, 0.9), rgba(0, 0, 0, .9));
}

section.active-match > content > columns > columnwrap > matchevents > content > tile.allies > textwrap > h5 {
    background: linear-gradient(to top, #18576e, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.active-match > content > columns > columnwrap > matchevents > content > tile.allies > glow {
    background: radial-gradient(closest-side, rgba(81, 203, 255, 0.1), transparent);
}

section.active-match > content > columns > columnwrap > matchevents > content > tile.axis::before {
    background: linear-gradient(to bottom, rgba(13, 11, 9, 0.9), rgba(0, 0, 0, .9));
}

section.active-match > content > columns > columnwrap > matchevents > content > tile.axis > textwrap > h5 {
    background: linear-gradient(to top, #946126, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.active-match > content > columns > columnwrap > matchevents > content > tile.axis > glow {
    background: radial-gradient(closest-side, rgba(255, 185, 81, 0.1), transparent);
}


section.active-match > content > columns > columnwrap > matchevents > content > tile.special::before,
section.active-match > content > columns > columnwrap > matchevents > content > tile.allies.special::before,
section.active-match > content > columns > columnwrap > matchevents > content > tile.axis.special::before {
    background: linear-gradient(to bottom, rgba(21, 19, 10, 0.9), rgba(0, 0, 0, .9));
}

section.active-match > content > columns > columnwrap > matchevents > content > tile.special > glow,
section.active-match > content > columns > columnwrap > matchevents > content > tile.allies.special > glow,
section.active-match > content > columns > columnwrap > matchevents > content > tile.axis.special > glow {
    background: radial-gradient(closest-side, rgba(255, 236, 111, 0.65), transparent);
}


section.active-match > content > columns > columnwrap > matchevents > content > tile > textwrap > p {
    position: relative;
    display: block;
    width: 100%;
    margin: 2px 0 0 0;
    color: #e0e0e0;
    line-height: 1.45;
    font-size: 17px;
    font-weight: 500;
}




section.active-match > content > columns > columnwrap > tile.scoreboard {
    overflow: hidden;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px 8px 24px;
    background: linear-gradient(to top, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02));
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap {
        padding: 4px 8px 4px 16px;
    }
}

section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > img {
    position: relative;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > h6 {
    position: relative;
    display: block;
    flex: 1 1 auto;
    margin: 5px 0 0 0;
}

section.active-match > content > columns > columnwrap > tile.scoreboard.allies > titlewrap > h6 {
    background: linear-gradient(to top, #276176, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

section.active-match > content > columns > columnwrap > tile.scoreboard.axis > titlewrap > h6 {
    background: linear-gradient(to top, #946126, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > stats {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: auto;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > stats > p {
    position: relative;
    display: block;
    width: 48px;
    flex: 0 0 48px;
    text-align: center;
    margin: 0;
    color: #dddddd;
    font-weight: 600;
    line-height: 1;
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > stats > p {
        width: 36px;
        flex: 0 0 36px;
    }
}

section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > stats > p:first-of-type {
    width: 100px;
    flex: 0 0 100px;
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > stats > p:first-of-type {
        width: 62px;
        flex: 0 0 62px;
    }
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    padding: 4px 12px 4px 42px;
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > tile.scoreboard > players > player {
        padding: 2px 8px 2px 32px;
    }
}


section.active-match > content > columns > columnwrap > tile.scoreboard > players > player:not(:last-of-type) {
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > a {
    position: relative;
    display: block;
    flex-shrink: 0;
    flex-grow: 1;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    margin: 0;
    flex: 1 1 100%;
    letter-spacing: 1px;
    -webkit-user-select: none;
    user-select: none;
    color: #666666;
    transition: color .12s linear;
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > a {
        font-size: 16px;
    }
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > a:not(.a) {
    pointer-events: none;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > a.a:hover {
    transition: color .1s linear .04s;
    color: #ffffff;
}


section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > rank {
    position: relative;
    display: block;
    width: 38px;
    height: 32px;
    flex: 0 0 38px;
    margin: 0 16px 0 0;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > rank {
        margin: 0 8px 0 0;
    }
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > rank > spinnerwrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > rank > spinnerwrap > spinner {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, .5);
    border-radius: 50%;
    animation: rankSpinner 1s infinite;
}

@keyframes rankSpinner {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(0);
    }

    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > rank > img {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    margin: 0;
    padding: 0 0 0 0;
    opacity: 0;
    z-index: 0;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > titlewrap > rank > p {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 14px;
    font-weight: 900;
    font-family: "EurostileExt", sans-serif;
    padding: 4px 0 0 0;
    margin: 0;
    z-index: 1;
    -webkit-filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
    filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 1)) drop-shadow(0px 0px 4px rgba(0, 0, 0, 1));
}


section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > stats {
    position: relative;
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    width: auto;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > stats > p {
    position: relative;
    display: block;
    width: 48px;
    flex: 0 0 48px;
    text-align: center;
    margin: 0;
    color: #e6e6e6;
    font-weight: 500;
    letter-spacing: 2px;
    font-size: 18px;
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > stats > p {
        letter-spacing: 0;
        font-size: 16px;
        width: 36px;
        flex: 0 0 36px;
    }
}


section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > stats > p:first-of-type {
    width: 100px;
    flex: 0 0 100px;
}

@media(max-width: 800px) {
    section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > stats > p:first-of-type {
        width: 62px;
        flex: 0 0 62px;
    }
}

@media(min-width: 1084px) and (max-width: 1300px) {

    section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > stats > p:nth-child(5),
    section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > stats > p:nth-child(6),
    section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > stats > p:nth-child(5),
    section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > stats > p:nth-child(6) {
        display: none;
    }
}

@media(max-width: 800px) {

    section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > stats > p:nth-child(5),
    section.active-match > content > columns > columnwrap > tile.scoreboard > players > player > stats > p:nth-child(6),
    section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > stats > p:nth-child(5),
    section.active-match > content > columns > columnwrap > tile.scoreboard > titlewrap > stats > p:nth-child(6) {
        display: none;
    }
}

section.active-match > content > columns > columnwrap > tile.scoreboard > noplayers {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 200px;
}

section.active-match > content > columns > columnwrap > tile.scoreboard > noplayers > h5 {
    font-weight: 500;
}