#content {
    margin-top: 40px;
}

@-moz-document url-prefix() {
    #personal-score-grid {
        margin-bottom: 10px;
    }
}

#personal-score-grid h2, #team-grid h2 {
    width: 100%;
}

.team-table th {
    border-radius: 35px;
    padding: 12px;
    background: #c00000;
    border: 3px solid white;
    white-space: nowrap;
    color: white;
}

.team-table td {
    padding-top: 5px;
    padding-bottom: 5px;
    word-break: break-all;
}

.leaderboard-header {
    display: grid;
    justify-content: center;
}

.leaderboard-header h2 {
    margin-bottom: 10px !important;
}

.indicator {
    cursor: pointer;
}

.desc_indicator:after {
    content: '\25BE';

}

.asc_indicator:after {
    content: "\25B4";
}

footer {
    margin-top: 15%;
}

#two-column {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    grid-column-gap: 5%;
    text-align: center;
}

#score-title {
    display: grid;
    justify-content: center;
    margin-bottom: 3%;
}

#content h1 {
    display: inline;
}

#my-stats {
    display: grid;
    grid-column: 1;
    grid-template-columns: 95%;
    grid-row-gap: 4%;
    border-radius: 55px;
    padding: 2% 4% 6% 10%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
    border: 2px solid #999999;

}

#team-stats {
    display: grid;
    grid-column: 1;
    grid-template-columns: 15% 5%;
    grid-column-gap: 25px;
    justify-content: center;
    grid-row-gap: 5%;
}

.stat {
    border: 2px solid #3b3838;
    text-align: center;
    border-radius: 45px;
    padding-left: 25px;
    padding-right: 35px;
    margin-right: 15px;
    white-space: nowrap;

}

.stat p {
    font-weight: bold;
    font-size: 11pt;
}

.stat-info {
    border: 2px solid black;
    text-align: center;
    display: grid;
    white-space: nowrap;
    align-items: center;
    height: 50px;
    width: auto;
    padding-left: 4%;
    padding-right: 4%;
    border-radius: 45px;
    font-weight: bold;
}

#main-grid {
    display: grid;
    grid-template-columns: 1100px;
    justify-content: center;
    grid-row-gap: 75px;
}

.item-grid {
    display: flex;
    margin-bottom: 15px;
}

#personal-score-grid, #team-grid {
    display: flex;
    grid-row-gap: 6%;
    flex-direction: row;
    flex-wrap: wrap;
}

#team-scoreboard-container li, #individual-scoreboard-container li {
    border: 2px solid;
    border-radius: 45px;
    padding-left: 5%;
    padding-right: 5%;
    height: 30px;
    width: auto;
    padding-top: 12px;
    margin-bottom: 5%;
}

#individual-scoreboard-container {
    counter-reset: section;
    padding: 1% 5% 10% 1%;
    width: 100%;
    border-right: 2px solid;
    font-weight: bold;
}

.score-circle::before {
    counter-increment: section;
    content: counter(section) " ";
    background: #3b3838;
    border-radius: 45px;
    padding: 8px;
    height: 45%;
    width: 65%;
    display: inline-grid;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.38), 0 4px 6px rgba(0, 0, 0, 0.23);
    color: white;
}

.score-circle {
    display: grid;
    align-items: center;
    white-space: nowrap;
    grid-template-columns: 15% 65%;
    justify-content: center;
    grid-column-gap: 2%;
}

.score-circle p {
    background: #3b3838;
    border-radius: 45px;
    padding: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.38), 0 4px 6px rgba(0, 0, 0, 0.23);
    white-space: normal;
    color: white;
}


#team-scoreboard-container {
    counter-reset: section2;
    display: grid;
    width: 100%;
    font-weight: bold;
}

.score-circle2::before {
    counter-increment: section2;
    content: counter(section2) " ";
    background: #3b3838;
    border-radius: 45px;
    padding: 8px;
    height: 45%;
    width: 65%;
    display: inline-grid;
    align-items: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.38), 0 4px 6px rgba(0, 0, 0, 0.23);
    color: white;
}

.score-circle2 {
    display: grid;
    align-items: center;
    white-space: nowrap;
    grid-template-columns: 15% 65%;
    grid-column-gap: 2%;
    justify-content: center;
}

.score-circle2 p {
    background: #3b3838;
    border-radius: 45px;
    padding: 18px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.38), 0 4px 6px rgba(0, 0, 0, 0.23);
    white-space: normal;
    color: white;
}

#individual-scoreboard-container h2, #team-scoreboard-container h2 {
    font-size: 1.8em;
    margin-bottom: 10%;
}

.sort-text {
    font-weight: normal;
}

/*----------------------------------- Media Queries -----------------------------------*/

@media only screen and (max-width: 1440px) {
    #main-grid {
        grid-template-columns: 950px;
    }

    footer {
        margin-top: 20%;
    }

    @-moz-document url-prefix() {
        #my-stats {
            padding: 2% 4% 8% 10%;
        }
    }
}


@media only screen and (max-width: 1024px) {

    .team-table {
        font-size: 10pt;
    }

    #main-grid {
        grid-template-columns: 875px;
    }


    #my-stats {
        grid-column-gap: 12%;
        padding: 1% 4% 4% 10%;
    }

    #team-grid h2, #personal-score-grid h2 {
        font-size: 1.1em;
        width: 100%;
    }

    #score-title {
        font-size: 0.9em;
    }

    .stat p {
        font-size: 0.8em;
    }


    #individual-scoreboard-container {
        padding: 1% 5% 10% 1%
    }


    .score-circle p, .score-circle2 p {
        font-size: 0.8em;
        padding: 15px;
    }

    .score-circle::before, .score-circle2::before {
        font-size: 0.8em;
        height: 45%;
        width: 80%;
    }

    .score-circle, .score-circle2 {
        grid-column-gap: 7%;
    }

    @-moz-document url-prefix() {
        #my-stats {
            padding: 1% 4% 7% 10%;
        }
    }

}

@media only screen and (max-width: 900px) {
    #main-grid {
        grid-template-columns: 750px;
    }

    .team-table th {
        border: 1px solid white;
    }

    .team-table {
        font-size: 9pt;
    }


}

@media only screen and (max-width: 840px) {

    .team-table {
        font-size: 8pt;
    }


    #my-stats {
        grid-column-gap: 12%;
        padding: 3% 0 6% 10%
    }

    #main-grid {
        grid-template-columns: 675px;
    }

    .stat p {
        font-size: 0.7em
    }

    .stat {
        padding-left: 15px;
        padding-right: 20px;
    }

    .score-circle2 p, .score-circle p {
        font-size: 0.7em;
    }

    .score-circle::before, .score-circle2::before {
        font-size: 0.7em;
    }
}

@media only screen and (max-width: 768px) {
    @-moz-document url-prefix() {
        #my-stats {
            padding: 1% 0 7% 10%;
        }
    }
}

@media only screen and (max-width: 690px) {


    #team-scoreboard-container table, #team-scoreboard-container thead, #team-scoreboard-container tbody,
    #team-scoreboard-container th, #team-scoreboard-container td, #team-scoreboard-container tr {
        display: block;
    }

    #team-scoreboard-container td {
        border: none;
        position: relative;
        padding-left: 55%;
        white-space: normal;
        text-align: left
    }

    #team-scoreboard-container td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 40px;
        width: 45%;
        padding-right: 10px;
        text-align: left;
        font-weight: bold;
        word-break: break-all;
    }

    #team-scoreboard-container td:before {
        content: attr(data-title);
    }

    #main-grid {
        grid-template-columns: 410px;
    }

    #my-stats {
        padding: 5% 0 15% 11%;
        grid-template-columns: 1fr;
        justify-items: left;
    }

    #score-title {
        margin-bottom: 2%;
    }

    #individual-scoreboard-container {
        border-right: none;
    }

    .score-circle2 p, .score-circle p {
        font-size: 0.8em;
    }

    .score-circle::before, .score-circle2::before {
        font-size: 0.8em;
    }

    #two-column {
        grid-template-columns: 1fr;
    }

    #personal-score-grid, #team-grid {
        grid-row-gap: 4%;
    }

    .item-grid {
        font-size: 14pt;
    }

    #team-grid h2, #personal-score-grid h2 {
        font-size: 16pt;
    }

    .team-table thead {
        margin-bottom: 25px;
    }


    .team-table thead tr {
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        border: none !important;
        justify-content: center;
    }

    .team-table thead tr th {
        display: inline-flex;
        margin-bottom: 5px;
        margin-right: 5px;
        font-size: 9pt;
    }

    .team-table tbody tr {
        margin-bottom: 25px;
        height: max-content;
        font-size: 10pt;
        border-radius: 35px;
        padding: 15px 10px 15px 0;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
        border: 2px solid #999999;
        line-height: 22px;
    }

    .mobile-hoz-line {
        background-color: black;
        height: 2px;
    }

}

@media only screen and (max-width: 425px) {

    #main-grid {
        grid-template-columns: 375px;
    }

    .team-table thead tr th {
        font-size: 8pt
    }

    .team-table {
        margin-bottom: 20%;
    }

    .item-grid {
        font-size: 12pt
    }

    #content h1, .leaderboard-header h2 {
        font-size: 20pt !important;
    }

    #team-grid h2, #personal-score-grid h2 {
        font-size: 14pt
    }

    @-moz-document url-prefix() {
        #my-stats {
            padding: 5% 0 20% 11%;
        }
    }

}

@media only screen and (max-width: 375px) {

    #main-grid {
        grid-template-columns: 315px;
    }

    #team-scoreboard-container td:before {
        left: 20px;
    }

    #team-scoreboard-container td {
        padding-left: 55%;
    }

    @-moz-document url-prefix() {
        #my-stats {
            padding: 5% 0 30% 11%;
        }
    }

}

@media only screen and (max-width: 320px) {

    .team-table tbody tr {
        font-size: 9pt !important;
    }

    #content h1, .leaderboard-header h2 {
        font-size: 19pt !important;
    }

    #main-grid {
        grid-template-columns: 290px;
    }

    footer {
        margin-top: 35%;
    }

    #my-stats {
        padding: 5% 0 20% 11%;
    }

    @-moz-document url-prefix() {
        #my-stats {
            padding: 5% 0 33% 11%;
        }
    }
}


/*----------------------------------- Emd of Media Queries -----------------------------------*/