.leaderboardsview .headerContainer {
    display: flex;
    margin: 15px;
    padding: 10px;
}

.leaderboardsview .tabsContainer.hide,
.leaderboardsview .leaderboardContainer.hide,
.leaderboardsview .messageContainer.hide {
    display: none;
}

.leaderboardsview .messageContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 50vh;
}

.leaderboardsview .messageContainer .title {
    font-family: "Metropolis Bold";
    font-size: 28px;
    line-height: 20px;
    letter-spacing: 0.28px;
    color: #0d4962;
    margin-bottom: 20px;
}

.leaderboardsview .messageContainer .description {
    font-family: "Metropolis Regular";
    font-size: 20px;
    line-height: 13px;
    letter-spacing: 0.2px;
    color: #0d4962;
}

.leaderboardsview .tabsContainer {
    display: flex;
    justify-content: center;
    margin: 50px 25px 34px;
    overflow-y: auto;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
/* Hide scrollbar for Chrome, Safari and Opera */
.leaderboardsview .tabsContainer::-webkit-scrollbar {
    display: none;
}

.leaderboardsview .tabsContainer.start {
    justify-content: flex-start;
}

.leaderboardsview .headerContainer .gameIcon img {
    width: 80px;
    height: 80px;
    border-radius: 15px;
}

.leaderboardsview .headerContainer .titleContainer {
    display: flex;
    flex-direction: column;
    margin-inline: 12px;
    justify-content: center;
}

.leaderboardsview .headerContainer .titleContainer .title {
    font-family: "Metropolis Bold";
    font-size: 28px;
    line-height: 20px;
    letter-spacing: 0.28px;
    color: #0d4962;
}

.leaderboardsview .headerContainer .titleContainer .subTitle {
    font-family: "Metropolis Regular";
    font-size: 20px;
    line-height: 20px;
    letter-spacing: 0.3px;
    margin-top: 5px;
    color: #333;
}

.leaderboardsview .leaderboardContainer {
    margin: 15px;
}

.leaderboardsview .leaderboardContainer .leaderboard .iconAndText {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
    cursor: pointer;
}

.leaderboardsview .leaderboardContainer .leaderboard .iconAndText .rankIcon {
    width: 32px;
    height: 32px;
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/rank_icon_blue_v1.svg);
    background-size: cover;
    background-repeat: no-repeat;
}

.leaderboardsview .leaderboardContainer .leaderboard .iconAndText .position {
    font-family: "Metropolis Bold";
    font-size: 20px;
    line-height: 16px;
    letter-spacing: 0.2px;
    color: #0d4962;
    padding-left: 10px;
    align-self: center;
}

.leaderboardsview .leaderboardContainer .leaderboard .table .tableRow .nameAndIcon {
    display: flex;
    align-items: center;
}

.leaderboardsview .leaderboardContainer .leaderboard .table .tableRow .nameAndIcon .thumbnail {
    height: 60px;
    width: 60px;
}

/* DARK MODE */
.dark .leaderboardsview .leaderboardContainer .leaderboard .iconAndText .rankIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/rank_icon_white_v1.svg);
}

.dark .leaderboardsview .messageContainer .title,
.dark .leaderboardsview .messageContainer .description,
.dark .leaderboardsview .headerContainer .titleContainer .title,
.dark .leaderboardsview .headerContainer .titleContainer .subTitle,
.dark .leaderboardsview .leaderboardContainer .leaderboard .iconAndText .position {
    color: white;
}