:root {
  --leaderboard-min-height: 800px;
}

.leaderboard_group{
	min-height: var(--leaderboard-min-height);
	display: flex;
	flex-direction: column;
	padding: 20px;
	background-color: #455AC5;
	font-family: 'Montserrat';


	margin: auto;
	text-align: center;

	align-items: center;

    color: #fff;


	.leaderboards_title{
		color: #fff;
	}


	
	.tabs{
		width: 400px;
		display: flex;
		flex-direction: column;
		gap: 20px;
		font-weight: 500;

		
		&.disabled{
			pointer-events: none;
		}


		.tab_group{
			height: 47px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border: 1px solid rgba(255,255,255,0.3);
			border-radius: 10px;
			overflow: hidden;
			text-transform: uppercase;

			li{
				display: flex;
				flex: 1;
			}

			a{
				flex: 1;
				color: #fff;
				padding: 20px;
				border-radius: 5px;
				color: rgba(255,255,255,0.4);
			}

			li.ui-state-active a, a:hover, a:focus, a:active{
				background: rgba(238, 238, 238, 0.1);
				color: #fff;
			}
		}

		.tab_group.secondary{
			height: unset;
			font-size: 12px;
			border: none;
			border-radius: 0;
			flex-wrap: wrap;

			li{
				display: flex;
				/* overflow: hidden; */
			}

			a{
				color: #fff;
				padding: 7px;
				white-space: nowrap;
				/* overflow: hidden; */
				/* text-overflow: ellipsis; */
			}
		}

	}


	.hidden{
		display: none;
	}

	.force_hidden{
		display: none !important;
	}

	.transparent_until_ready{
		opacity: 0;
	}

	.loading {

		display: flex;
		align-items: center;
		justify-content: center;
		height: calc(var(--leaderboard-min-height) - 300px);
		.spinner{

			display: inline-block;
			width: 40px;
			height: 40px;
			border: 4px solid #ccc;
			border-top-color: #000;
			border-radius: 50%;
		}
	}



}


.leaderboard{

    display: flex;
    flex-direction: column;
	align-items: center;
    gap: 20px;

	.rankings{
		position: relative;
    	padding-bottom: 15px;

		display: flex;
		flex-direction: column;
		gap: 10px;

		.user_row{
			display: flex;
			align-items: center;
			gap: 5px;
			flex: 1;

			background-color: hsl(0deg 0% 85% / 35%);
			color: #fff;
			display: flex;
			align-items: center;
			border-radius: 6px;
			font-weight: 800;
			border: 2px solid transparent;
			margin-left: 50px;
			padding-left: 50px;
			position: relative;


			.rank {
				font-size: 14px;
				font-weight: 800;       
				color: #fff;
				min-width: 60px;
				margin-left: -40px;
				position: absolute;
				text-align: right;	
				left: -55px;
			}



			.avatar {
				width: 48px;
				height: 48px;
				border-radius: 100%;
				overflow: hidden;
				border: 2px solid hsl(0deg 0% 85% / 35%);
				position: absolute;
				left: -24px;
			}


			.user_name {
				padding: 10px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}




			.points_and_flag {
				display: flex;
				align-items: center;
				gap: 5px;
				margin-left: auto;
				padding: 5px 10px;
				flex-shrink: 0;

				.user_flag {
					width: 20px;
					object-fit: contain;
					border-radius: 100%;
				}
			}


		}

		.user_row.active {
			margin-top: 8px; margin-bottom: 8px;

			.rank {
				font-size: 18px;
			}

			border: 2px solid #31c5ac;
			color: #31c5ac;

			.avatar {
				border: 2px solid #31c5ac;
			}
		}

		.double_arrow {
			text-align: right;
			color: hsl(0deg 0% 85% / 35%);
		}

	}





}


/* simple animations */
.fadein{
	opacity: 0;
	animation:opacity 0.8s;
	/* animation-delay: 0.2s; */
	animation-fill-mode: forwards; /* keeps final state */
}
@keyframes opacity{from{opacity:0} to{opacity:1}}

.spin{
	animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }