html { font-family: sans-serif; font-size: 14px; }


.introrow { display: flex; justify-content: space-between; gap: 10px 30px; }


.filter-dropdown {
    margin-right: 10px;
    padding: 4px 10px 4px 4px;
    font-size: 16px;
}
.filter-dropdown option {
    font-size: 16px;
}

ul.player-list { list-style-type: none; padding: 0; }
ul.player-list li { padding: 4px 0; cursor: pointer; }
ul.player-list li:nth-child(odd) { background-color: #fee;  }


li span { display: inline-block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

.rank { width: 28px; padding-right: 8px; text-align: right; }
.rankChange { width: 28px; padding-right: 8px; text-align: center; display: inline-block; font-size: 11px; }
.name { width: 120px; padding-right: 8px; }
.club { width: 100px; padding-right: 8px; }
.shows { width: 20px; padding-right: 8px; text-align: right;}
.gf { width: 22px; padding-right: 2px; text-align: right;}
.ga { width: 22px; padding-left: 2px; text-align: left;}
.gp { width: 18px; padding-right: 8px; text-align: right; }
.player-details { display: none; }
.player.active .player-details { display: block; }

.rankChange .positive { color: green; }
.rankChange .negative { color: red; }
.rankChange .neutral { font-weight: bold; }




.detail-box {
    border: 1px solid #daa;
    background-color: #eee;
    margin: 4px 4px 4px 4px;
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.2em;
}

.detail-head {
    font-weight: bold;
}

ul.games {
    list-style-type: none; 
    margin: 0;
    padding: 0;
}
ul.player-list li ul.games li { background-color: transparent; padding: 2px 0; }


@media (max-width: 440px)  { 
    .name { width: 90px; }
    .club { width: 70px; font-size: 12px; }
}