.leaderboard-wrapper {
    max-width: 85vw;

	h2 {
		margin-top: 1em !important;
		font-size: 1.8rem;
		color: #fff;
		margin-bottom: .2em;
	}
    input[type="search"], input[type="text"], input[type="number"], select {
        width: 20rem;
        background: transparent;
        border-radius: 50px;
        color: #fff;
        display: inline-block;
        &::-webkit-input-placeholder {
            color: #eee;
        }

        &::-moz-placeholder {
            color: #eee;
        }
    }
    #race-filter-form {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        gap: 2em;

        &:before {
            content: '';
            position: absolute;
            width: 675px;
            height: 300px;
            background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.00) 100%);
            z-index: -1;
        }
    }

    .league-filter {
        position: relative;
        display: inline-flex;
        gap: 1em;
        font-size: 1.2rem;

        input {
            visibility: hidden;
            position: absolute;

            &:checked + span {
                color: #FF8000;
            }
        }

        label {
            cursor: pointer;

            span {
                padding: 10px;
            }
        }
    }

    input[type="search"] {
        width: 20rem;
        background: transparent;
        border-radius: 50px;
        color: #fff;
        display: inline-block;

        &::-webkit-search-cancel-button {
            position: relative;
            right: 20px;
            -webkit-appearance: none;
            cursor: pointer;
            height: 20px;
            width: 20px;
            margin-top: -1px;
            border-radius: 10px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAABMUlEQVRIx6XWrZLCQAzA8ey5yjp0HwJLHaoV5wDDgyDqmHMInoJ3Q1XQQfA/cTvALtttk1vVmW5+/UiaRhAqvqkQy3qLpuIK9NRYmJoeuFIJW/7WTUsh1Nx89FZYgoUKGFgKBQc9hWPN8Iw7UAhCyVFH4Wh4rSMl/iZV1AijpSKme2M0VMTsKEhkYZKKmAY3ltAsNZOZohRMjlIyCWpgjTMwCQoaWgOTpGzMk+r+zXiqYBcwbY75GjvhRAbpI9vURMNMWR8tyeipiGlNVZSqYlNBpoPU1HiAispvnk1Nb5xBfdTxyPUmqI8vK/MGMl070TacIiHd66+24KSrkog6sUCEkkvYDw1Fe6EU9sYhIvz774WzP7ybxpq7jz4LNQ/gwcY0aG18dC0IK35YmUc/H/0LjGGpwPsWCBcAAAAASUVORK5CYII=) no-repeat center center;
            background-size: contain;
        }
    }

    .search {
        position: relative;

        &:after {
            content: '';
            position: absolute;
            right: 12px;
            top: calc(50% - 11px);
            width: 20px;
            height: 20px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAQAAABLCVATAAACIklEQVRIx62VT08TURDAp5W0NWy5Ka160gNoJH4GD4CikhA0XIyJB/ToRyA2fABTaPkYQP13w3hQ9G7qRWNCu6CeistJqj8vb9/uZt/uvo3MZSdv5v125r15MwUxCGW5LnfkqozLBRHpyQ/5JM/lTeG32At1NjjEJIe0qdlBKqxyRJoc0aCSHcsHbGQ3NS6u0Q8579FklglGGWWCWdbYC1l7TCVhavS0W59HjMQ8itzjm/ZxOW/CnOajdtnESYy6ynYowfhZsarNzyimnmORpvZ9Gj9k/6a20jEKta1vsB41begjdKyKpIqrdrQiVazL76F10S6rHQNKweINfeGnrEEj+o5n/LWizCttq/DHFlQYSkep8wHostJeSR55qb5XApBfWF9ygb6q77kgX09l6+Th4KhdXhARfuK5IvLr7W+wcKC0ei6Qn9J+APLVS7lAF+OgrtLmcoFuqW83XpC9eOtIKUi/d00HiyX9RJatQY8NTyT0aF2qVpgx9tWO9ajhLL+U4XX2e6NIx6+hWO+moZtVM7OxrWvfFdMY2tXmTnKCjPFC+72jbG7+wZT4yRNj83+gzwaGfGfR/Lep0ByBPi1uMomDwyRztCPDagjAMUtm1BneWg3I9xwoLRFVoZExsj1WKLPIcQZKhBptBkbIgBbjyuuuRg25n3zJJWZYY4fPeHh02aHJdKSKbVFWFb4USnDhpFB9kZNB/S9IhAVcXG7/A3bkEDQSVovxAAAAAElFTkSuQmCC) no-repeat center center;
            background-size: contain;

        }
    }

    .leaderboard {
        width: 100%;
        border-collapse: separate;
        border-spacing: 0 1em;

        &.searching {
            tr:not(.searched,.no-rows) {
                transform: scale(.96);
                filter: blur(1px);
            }

            .searched {
                background: #ff8000;
            }
        }

        thead {
            visibility: hidden;
        }

        .pos-1, .pos-2, .pos-3 {
            .pos {
                position: relative;
                overflow: hidden;
                z-index: 1;

                &::after {
                    position: absolute;
                    content: '';
                    background: var(--pos-color);
                    width: 200px;
                    height: 100px;
                    transform: rotate(50deg);
                    left: 0;
                    top: -1.3em;
                    transform-origin: top left;
                    z-index: -1;
                }

                &::before {
                    position: absolute;
                    content: var(--position);
                    left: -.5rem;
                    top: 0;
                    line-height: 5.4rem;
                    opacity: .3;
                    pointer-events: none;
                    font-size: 6rem;
                }
            }
        }

        .pos-1 {
            --position: '1';
            --pos-color: #E61E29;
        }

        .pos-2 {
            --position: '2';
            --pos-color: #F26522;
        }

        .pos-3 {
            --position: '3';
            --pos-color: #F59E00;
        }

        tr {
            color: #fff;
            background: #33363F;
            vertical-align: middle;
            line-height: 1em;

            td {
                padding-top: 26px;
                padding-bottom: 22px;
            }

            &.no-rows td {
                padding-left: 20px;
                padding-right: 20px;
            }

            .pos {
                font-size: 2rem;
                font-weight: 950;
                width: 4em;
                text-align: left;
                padding-left: 20px;
            }

            .gamertag {
                font-size: 1.2rem;
                vertical-align: bottom;
                font-weight: 950;
                padding-right: 8px;
                white-space: nowrap;
            }

            .time {
                font-size: 1.6rem;
                font-weight: 950;
                text-align: right;
                padding-right: 5vw;

                &:after {
                    content: '';
                    display: inline-block;
                    width: 1.2rem;
                    height: 1.2rem;
                    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAYCAYAAAD6S912AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFeSURBVHgBlVWBcYMwDLRzGYARvEHZoOkG3SDeBDYII3SEbgDZgE4AG6QbuFIi94QsG/x3OowsPZYsCWsKCCE08PgEcaSaUay1q6kFkDmQR0ixgLQ5v1OB8wLSKHoHkiW0uQ0K95teJ3pi+L8gPhd2lpBInXmd1JEKc7gC2cxs/JPI2q8SkQcZQx4L2XRM59UT7RCV8CQ8i/BGFp6hfN0pVARexrtJL2tIQlZONtDFaFH0wnbUcpYcX+z7wz7hleSIvuAoSYfklLBomfJBueROfeFjTdh2k8NO4QT3mj4F23hpERck5G00m3pwH3c64LBm1irOwihpeqwvyM3/WuHYRkh1xS9FmzAqQjri2rgxMuWtgrBjfgvfkEV6PUB2FT5eGozCoJM1SXZYezdhO8V9y/Nh9OGAxj/0/mbSSb6CfKj1G+rH16RFoRFjTpcdIq/57v0CWrP9Ka2YglJ7/gFsGXdo+OgBkgAAAABJRU5ErkJggg==) no-repeat center;
                    background-size: contain;
                    margin-left: 1em;
                }
            }
        }
    }

    #infinite-scroll-sentinel {
        margin: auto;
        width: 60px;
        aspect-ratio: 4;
        color: #ff8000;
        --_g: no-repeat radial-gradient(circle closest-side, currentColor 90%, transparent);
        background: none;
    }

    &.loading #infinite-scroll-sentinel {
        background: var(--_g) 0 50%, var(--_g) 50% 50%, var(--_g) 100% 50%;
        background-size: calc(100% / 3) 100%;
        animation: l7 1s infinite linear;
    }
}

@keyframes l7 {
    33% {
        background-size: calc(100% / 3) 0%, calc(100% / 3) 100%, calc(100% / 3) 100%
    }
    50% {
        background-size: calc(100% / 3) 100%, calc(100% / 3) 0%, calc(100% / 3) 100%
    }
    66% {
        background-size: calc(100% / 3) 100%, calc(100% / 3) 100%, calc(100% / 3) 0%
    }
}

.wrapper-half {
    margin-right: 2%;
    width: 48%;
    display: inline-block;
    vertical-align: top;

    .leaderboard tr {
        &:not(.pos-1,.pos-2,.pos-3) .pos {
            font-size: 1.5rem;
        }

        .pos {
            width: 2.2em;

            &:after {
                transform: rotate(60deg) !important;
                top: -1.9em !important;
            }
        }

        .gamertag {
            font-size: 1rem;
        }

        .time {
            font-size: 1.15rem;

            &:after {
                display: none;
            }
        }
    }
}

#leaderboard-form {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: space-between;
    align-items: center;

    > label, > div {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }

    select {
        width: 100%;
        option {
            background: #000;
            color: #fff;
        }
    }

    input[type=radio] {
        float: none;
        display: inline-block;
        margin-left: 5px;
        vertical-align: middle;
    }
}

@media (max-width: 767px) {
    .leaderboard-wrapper {
        .leaderboard tr {
            &:not(.pos-1,.pos-2,.pos-3) .pos {
                font-size: 1.5rem;
            }

            .pos {
                width: 2.2em;

                &:after {
                    transform: rotate(60deg) !important;
                    top: -1.9em !important;
                }
            }

            .gamertag {
                font-size: 1rem;
            }

            .time {
                font-size: 1.15rem;

                &:after {
                    display: none;
                }
            }
        }
    }
}