.challengerankings .headerContainer {
    display: flex;
    align-items: center;
}

.challengerankings .leaderboard {
    padding-inline: 10px;
}

.challengerankings .leaderboard .nameAndIcon {
    display: flex;
    align-items: center;
}

.challengerankings .leaderboard .nameAndIcon .teamName,
.challengerankings .leaderboard .rank,
.challengerankings .leaderboard .metric {
    font-family: "Metropolis Regular";
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.18px;
    margin-left: 24px;
    color: #0d4962;
}

.challengerankings .leaderboard .rank,
.challengerankings .leaderboard .metric {
    color: #333;
}

.challengerankings .leaderboard .metric {
    margin-left: 0;
    margin-right: 10px;
}

.challengerankings .headerContainer .challengeImage {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-size: cover;
    background-repeat: no-repeat;
}

.challengerankings .headerContainer .textContainer {
    padding-left: 10px;
}

.challengerankings .headerContainer .textContainer .title {
    font-family: "Metropolis Bold";
    font-size: 28px;
    letter-spacing: 0.28px;
    color: #0d4962;
}

.challengerankings .headerContainer .textContainer .iconAndText,
.challengerankings .iconAndText {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-block: 15px;
}
.challengerankings .iconAndText.hide,
.challengerankings .headerContainer .textContainer .iconAndText.hide {
    display: none;
}
.challengerankings .headerContainer .textContainer .iconAndText {
    justify-content: start;
    margin-top: 8px;
}

#_challengeRules {
    cursor: pointer;
}

.challengerankings .headerContainer .textContainer .iconAndText .text {
    font-family: "Metropolis Regular";
    font-size: 18px;
    line-height: 24px;
    letter-spacing: 0.18px;
    color: #333;
    padding-left: 10px;
}
.challengerankings .iconAndText .text {
    font-family: "Metropolis Bold";
    font-size: 20px;
    line-height: 16px;
    letter-spacing: 0.2px;
    color: #0d4962;
    padding-left: 10px;
}

.challengerankings .tabsContainer {
    display: flex;
    justify-content: center;
    margin-block: 25px;
}

.challengerankings .headerContainer .textContainer .iconAndText .dateIcon,
.challengerankings .headerContainer .textContainer .iconAndText .metricIconDURATION,
.challengerankings .headerContainer .textContainer .iconAndText .metricIconDISTANCE,
.challengerankings .headerContainer .textContainer .iconAndText .metricIconCALORIES,
.challengerankings .headerContainer .textContainer .iconAndText .rulesIcon,
.challengerankings .iconAndText .rankIcon {
    width: 24px;
    height: 24px;
    background-size: cover;
    background-repeat: no-repeat;
}

.challengerankings .headerContainer .textContainer .iconAndText .dateIcon {
    background-image: url(https://d2oshyevc4uefc.cloudfront.net/app/assets/calendar_icon_m_v1.png);
}

.challengerankings .headerContainer .textContainer .iconAndText .metricIconDURATION {
    background-image: url(https://d2oshyevc4uefc.cloudfront.net/app/assets/clock_icon_black_m_v2.png);
}

.challengerankings .headerContainer .textContainer .iconAndText .metricIconDISTANCE {
    background-image: url(https://d2oshyevc4uefc.cloudfront.net/app/assets/distance_icon_black_m_v2.png);
}

.challengerankings .headerContainer .textContainer .iconAndText .metricIconCALORIES {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/calories_icon_black_accesibility_v1.png);
}

.challengerankings .headerContainer .textContainer .iconAndText .rulesIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/rule_icon_black_v1.svg);
}

.challengerankings .iconAndText .rankIcon {
    width: 32px;
    height: 32px;
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/rank_icon_blue_v1.svg);
}

/* DARK MODE */
.dark .challengerankings .headerContainer .textContainer .iconAndText .text,
.dark .challengerankings .iconAndText .text,
.dark .challengerankings .headerContainer .textContainer .title,
.dark .challengerankings .leaderboard .nameAndIcon .teamName,
.dark .challengerankings .leaderboard .rank,
.dark .challengerankings .leaderboard .metric {
    color: rgba(255, 255, 255, 0.87);
}
.dark .challengerankings .headerContainer .textContainer .iconAndText .dateIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/calendar_icon_DM_m_v1.png);
}
.dark .challengerankings .headerContainer .textContainer .iconAndText .rulesIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/rule_icon_white_v1.svg);
}
.dark .challengerankings .iconAndText .rankIcon {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/rank_icon_white_v1.svg);
}
.dark .challengerankings .headerContainer .textContainer .iconAndText .metricIconDURATION {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/clock_icon_DM_m_v1.png);
}
.dark .challengerankings .headerContainer .textContainer .iconAndText .metricIconDISTANCE {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/distance_icon_DM_m_v1.png);
}
.dark .challengerankings .headerContainer .textContainer .iconAndText .metricIconCALORIES {
    background-image: url(https://d1gq9jzbezk7fw.cloudfront.net/p/en_US/gv/i/calories_icon_white_DM_accessibility_m_v1.png);
}