html {
  
}

body{
	background-color: #7401ce;
}


/* TITLE */

#CTN_PageTitle{
	margin-top: 15vh;
	margin-bottom: 7vh;
}

#CTN_Seasons{
	font-family: SS;
  font-size: 2em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fff;

	margin-bottom: 20px;
}

#CTN_Seasons span{
	padding: 5px 8px;
}


/* LE LOADING */
.leaderboard .loading {
	font-family: 'Mali', cursive;
	font-weight: 500;
	font-size: 3em;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	margin-top: 30px;
}


/* LE LEADERBOARD DYNAMIQUE */
.filters {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.filters input{
	width: 20%;
	max-width: 70%;
	margin-top: 20px;
	
	font-family: 'Mali', cursive;
	color: #3c006a;
}

input::placeholder {
    color: gray;
}

.filters .ninza-buttons{
	flex-basis: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.ninza-buttons label {
	padding: 0 10px 0 10px;
	margin: 0 5px 0 5px;

	font-family: SS;
   	font-size: 2em;
	text-transform: uppercase;
	text-decoration: none;

	background-color: none;
	color: #fff;
}

.ninza-buttons .ninza-icon {
  width: 80px;
  filter: grayscale(100%) brightness(10000%);
}



/* LE TABLEAU général*/

.leaderboard-container{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 30px;
	margin-bottom: 30px;
}

table{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 0px;
}

tr{
	flex-basis: 70%;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;

	background-color: #53c2d3;
}

/* LE TABLEAU colonnes fine tweak*/
/* Formattage du texte et du fond*/
tr:nth-child(even) {
    background-color: #79d7e5;
}

table tr:first-child {
	font-family: 'Road Rage', cursive;
	font-size: 2.2rem;
	color: #333;
	background-color: #53c2d3;
}

table tr:not(:first-child) {
	font-family: 'Mali', cursive;
	font-size: 1.5rem;
	color: #000;
	font-weight: 500;
}


/* Tailles des colonnes */
tr .position, tr .score, tr .peak, tr .wins-losses, tr .ninza{
	width: 12%;
	text-align: center;
}

tr .nickname{
	width: 25%;
	text-align: left;
}

tr .rank{
	width: 15%;
}


/* Centrage des images et ce genre de facéties */
table .ninza-icon{
	width: 60px;
	filter: grayscale(100%);
}

table .star-icon{
	width: 15px;
}

table .rank{
	display: flex;
	justify-content: space-evenly;
}

table .rank .rank-content{
	display: flex;
	flex-direction: column;
	align-items: center;

	font-size: 1.2rem;
	text-transform: capitalize;
}

table .rank .rank-content .subrank{
	display: inline-flex;
}

.leaderboard .rank-icon {
  max-height: 50px;
}


/* POUR LES FILTRES */
/* Trucs de base + quand sélectionné */
.leaderboard input[name="ninza"] {
  display: none;
}

.leaderboard input[name="ninza"]:checked+label .ninza-icon {
  filter: none;
}

.leaderboard input[name="ninza"]:checked+label{
	background-color: #fff;
	color: #3c006a;
}

.leaderboard input[name="ninza"]+label span {
  display: none;
}

/* Pour quand c'est en :hover */
.leaderboard label:hover .ninza-icon{
	filter: saturate(200%);
}

.leaderboard label:hover{
	background-color: #fff;
	color: #7400cd !important;
	text-decoration: underline;
}


/* ARROWS */
.pages-navigation-button{
	flex-basis: 70%;
	padding: 10px 0 10px 0;
	display: flex;
	justify-content: space-between;
	align-items: center;

	background-color: #53c2d3;
}

.leaderboard .page-previous,
.leaderboard .page-next  {
  height: 39px;
  width:  81px;
  margin: 0px 30px 0 30px;
  cursor: pointer;

  background-size: cover;
}

.leaderboard .disabled{
	cursor: default;
}

.leaderboard .page-previous {
  background-image: url("../img/leaderboards/Icon_ArrowPrev.png"); /* previous arrow */
}

.leaderboard .page-previous.disabled {
  background-image: url("../img/leaderboards/Icon_ArrowPrev_Disabled.png"); /* previous arrow disabled */
}

.leaderboard .page-next {
  background-image: url("../img/leaderboards/Icon_ArrowNext.png"); /* next arrow */
}

.leaderboard .page-next.disabled  {
  background-image: url("../img/leaderboards/Icon_ArrowNext_Disabled.png");  /* next arrow disabled */
}