/* stylesheet.css */
.leaderboard {
    width: 100%;
    margin: 0 auto 0 auto;
    color: white;
	font-size:12pt;
}

.leaderboard .row {
    overflow: hidden;
    margin: auto;
    text-align: center;
    display: block;
	padding:10px 0;
}

.leaderboard .row.header {
    background: #540a66;
    color: white;
    font-weight: bold;
	border-radius:10px 10px 0 0;
}

.leaderboardpage .styled-pagination li a.active {border-color:#87229f;background-color:#87229f;}
.leaderboardpage .styled-pagination li a:hover {border-color:#87229f;background-color:#87229f;}

.leaderboardpage .mainsubheader img {max-width:300px;}

.leaderboard .col {
    float: left;
    padding: 20px 10px 10px 10px;
    box-sizing: border-box;
}

.leaderboard .col3 span {display:none;}
.leaderboardpage .services-detail .auto-container {max-width:1200px;}

.leaderboard .col1, .header .col {padding:15px;}

.leaderboard .col img {
    float: left;
    height: 20px;
    margin-right: 5px;
}

.leaderboard .col span {
    float: left;
    line-height: 20px;
}

.leaderboard .col7 span {float:none;}

/* Column widths for desktop */
.leaderboard .col1 { width: 10.5%; } 
.leaderboard .col2 { width: 17.5%; }
.leaderboard .col3 { width: 23%; }  
.leaderboard .col4 { width: 14.5%; } 
.leaderboard .col5 { width: 11.5%; }
.leaderboard .col6 { width: 11%; } 
.leaderboard .col7 { width: 12%; }



/* Mobile responsiveness */
@media screen and (max-width: 700px) {
	.leaderboard .col3 {display:none;}
	
    .leaderboard .col {
        padding: 8px;
    }
    
    .leaderboard .col7 {display:none;}
    .leaderboard .col1 { width: 23%; }
    .leaderboard .col2 { width: 35%; }
    .leaderboard .col4 { width: 23%; }
    .leaderboard .col5 {display:none;}
    .leaderboard .col6 { width: 19%; }
    .leaderboard .col2 img, .leaderboard .col2 span {float:none;}
	
	
    .leaderboard .col img {
        height: 16px;
    }
    
    .leaderboard .col span {
        font-size: 14px;
        line-height: 16px;
    }
}


@media screen and (max-width: 450px) {
.leaderboard .col3 img, .leaderboard .col3 span {float:none;}
.leaderboard {font-size:11pt;}
}

@media screen and (max-width: 400px) {
    .leaderboard .col {
        padding: 6px;
    }
    
    .leaderboard .col img {
        height: 14px;
    }
    
    .leaderboard .col span {
        font-size: 12px;
        line-height: 14px;
    }
	
.header .col {padding:10px 5px;}
    
}

@media screen and (max-width: 300px) {
    .leaderboard .col {
        padding: 4px;
    }
    
    .leaderboard .col1 { width: 23%; }
    .leaderboard .col2 { width: 28%; }
    .leaderboard .col3 { width: 28%; }
    .leaderboard .col4 { width: 20.5%; }
    .leaderboard .col5 { display:none; } /* Wins: at least 10% */
    
    .leaderboard .col span {
        font-size: 10px;
    }
    
    .leaderboard .wins { display: block; }
}

.leaderboard .rank span {
    display: inline-block;
    border: 2px solid #78dcf0;
    padding: 5px 3px;
    border-radius: 12px;
    float: none;
    width: 40px;
}

.leaderboard .col img {
    display: inline-block;
    width: auto;
}

.leaderboard .col { flex: none; }
.colcentre, .leaderboard .col4 span, .leaderboard .col5 span, .leaderboard .col6 span {display:inline-block;overflow:hidden;float:none;}

.leaderboard .row:not(.header):nth-child(even) {
    background-color: #04102d;
}

.styled-pagination {
    user-select: none;
}

.styled-pagination li a {
    line-height: 40px;
    height: 40px;
    width: 40px;
    min-width: 40px;
    border-radius: 40px;
}