@font-face {
    font-family: 'NanumSquare Neo';
    src: url('/fonts/nanumsquare/NanumSquareNeoTTF-aLt.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquare Neo';
    src: url('/fonts/nanumsquare/NanumSquareNeoTTF-bRg.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquare Neo';
    src: url('/fonts/nanumsquare/NanumSquareNeoTTF-cBd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquare Neo';
    src: url('/fonts/nanumsquare/NanumSquareNeoTTF-dEb.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'NanumSquare Neo';
    src: url('/fonts/nanumsquare/NanumSquareNeoTTF-eHv.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* broad pick main body */
.broad-pick-main-body {
    font-family: NanumSquare Neo;
    display: flex;
    flex-direction: column;
}

/* live + ranking */
.broad-pick-main-body .broad-pick-live-ranking {
    display: flex;
    flex-direction: column;
    padding: 40px 0 40px;
    background-color: #f8f8fa;
    gap: 80px;
}

.broad-pick-live-ranking .broad-pick-header {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
}

.broad-pick-header .swiper-slide {
    width: 1100px !important;
    flex-shrink: 0;
}

.broad-pick-header .swiper-slide a {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 320px;
    border-radius: 15px;
    overflow: hidden;
}

.broad-pick-header .swiper-slide a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #000 40.59%, rgba(52, 52, 52, 0.00) 84.47%);
    z-index: 1;
}

.broad-pick-header .swiper-slide img {
    /* width: 1100px; */
    height: 320px;
    object-fit: fill;
    width: fit-content;
}

.broad-pick-header .live {
    position: absolute;
    top: 80px;
    left: 73px;
    border-radius: 5px;
    background: #FF0000;
    padding: 2px 10px;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 900;
    line-height: 20px;
    z-index: 2;
}

.broad-pick-header .title {
    position: absolute;
    top: 114px;
    left: 61px;
    color: #FFFFFF;
    font-size: 24px;
    font-weight: 900;
    line-height: 36px;
    z-index: 2;
    max-width: 30%;
}

.broad-pick-header .nav-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 3;
    border-radius: 5px;
    transition: background 0.3s;
    opacity: 0;
}

.broad-pick-header .swiper-next,
.broad-pick-header .swiper-prev {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 24px;
    cursor: pointer;
    z-index: 3;
    border-radius: 5px;
    transition: background 0.3s, opacity 0.3s;
    opacity: 0;
}

.broad-pick-header .draw-list:hover .swiper-next,
.broad-pick-header .draw-list:hover .swiper-prev {
    opacity: 1;
}

.broad-pick-header .swiper-prev {
    left: 10px;
}

.broad-pick-header .swiper-next {
    right: 10px;
}

.broad-pick-header.single-item .swiper-next,
.broad-pick-header.single-item .swiper-prev {
    display: none;
}

.broad-pick-ranking {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.broad-pick-ranking .title {
    display: flex;
    align-items: center;
    gap: 24px;
}

.broad-pick-ranking .title h2 {
    color: #222;
    font-size: 32px;
    font-weight: 800;
    line-height: normal;
}
.broad-pick-ranking .title p {
    color: #727272;
    font-size: 14px;
    font-weight: 350;
    line-height: normal;
}

.broad-pick-ranking .ranking {
    display: flex;
    gap: 16px;
}

.broad-pick-ranking .ranking .bp-ranking-info {
    width: 263px;
    flex-shrink: 0;
    box-sizing: border-box;
    min-height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 16px;
    border-radius: 15px;
    border: 1px solid #CCCCCC;
    background: #FFFFFF;
    box-shadow: 0px 0px 10px 0px rgba(221, 221, 221, 0.25);
}

.broad-pick-ranking .ranking .ranking-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
}

.broad-pick-ranking .ranking-header .title {
    display: flex;
    padding: 8px 14px;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    background: #F2F2F2;
    color: #282828;
    border: solid 1px #D9D9D9;
    font-size: 16px;
    font-weight: 800;
    line-height: normal;
}

.broad-pick-ranking .ranking-header .title:hover {
    cursor: pointer;
    color: #EC008C;
}

.broad-pick-ranking .ranking-list {
    width: 100%;
    display: flex;
}

.broad-pick-ranking .ranking-list ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.no-data {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #282828;
    font-size: 14px;
    font-weight: 400;
    width: 100%;
}

.broad-pick-ranking .ranking-list ul li {
    display: flex;
    align-items: center;
    margin: 0;
}

.broad-pick-ranking .ranking-list ul li>a {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}

.broad-pick-ranking .ranking-list ul li>a:hover {
    text-decoration: none;
}
.broad-pick-ranking .ranking-list ul li>a:hover .ranking-num,
.broad-pick-ranking .ranking-list ul li>a:hover .ranking-img-name .ranking-name,
.broad-pick-ranking .ranking-list ul li>a:hover .ranking-viewer,
.broad-pick-ranking .ranking-list ul li>a:hover .ranking-viewer-info .new{
    color: #EC008C !important;
}

.broad-pick-ranking li .ranking-info {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow: hidden;
}

.broad-pick-ranking li .ranking-num {
    min-width: 25px;
    color: #222;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    line-height: normal;
}

.broad-pick-ranking li .num-one {
    color: #0545B1;
}

.broad-pick-ranking li .ranking-img-name{
    display: flex;
    align-items: center;
    gap: 10px;
    overflow: hidden;
}

.broad-pick-ranking li .ranking-img-name .ranking-img img {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: contain;
    border: 0.5px solid #CCC;
}

.broad-pick-ranking li .ranking-img-name .ranking-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000000;
    font-size: 13px;
    font-weight: 700;
    line-height: normal;
}

.broad-pick-ranking li .ranking-viewer-info .new {
    color: #FF0000;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
}

.broad-pick-ranking li .ranking-viewer-info .ranking-viewer {
    min-width: 25px;
    white-space: nowrap;
    color: #666;
    font-size: 10px;
    font-weight: 400;
    line-height: normal;
}

/* broad pick + graph */
.broad-pick-main-body .broad-pick-graph {
    display: flex;
    flex-direction: column;
    padding: 40px 60px 40px;
    gap: 40px;
}

.broad-pick-graph .broad-pick-title {
    color: #EC008C;
    font-size: 36px;
    font-weight: 800;
    text-align: center;
}

.broad-pick-graph .broad-pick-tabs {
    display: flex;
    align-items: center;
}

.broad-pick-graph .broad-pick-tabs .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    border: solid 1px #D9D9D9;
    background-color: #F2F2F2;
    cursor: pointer;
    color: #282828;
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 800;
}

.broad-pick-graph .broad-pick-tabs .active {
    color: #EC008C;
}

.broad-pick-ranking-header {
    color: #000000;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
}

.broad-pick-rankings {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 55px;
}

.broad-pick-rankings .rank-item {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;
    border-bottom: solid 1px #CCCCCC;
    flex-grow: 1;
    width: calc((100% - 4 * 55px) / 5);
}

.broad-pick-rankings .rank-item:hover {
    text-decoration: none;
}
.broad-pick-rankings .rank-item:hover .rank-name {
    color: #EC008C !important;
}

.broad-pick-rankings .rank-item img {
    width: 100%;
    height: 316px;
    object-fit: fill;
}

.broad-pick-rankings .rank-item .rank-number {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    top: 0;
    left: 0;
    background-color: #282828;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: 900;
}

.broad-pick-rankings .rank-item .rank-one {
    left: 20px;
    width: 36px;
    height: 40px;
    background-color: #EC008C;
    clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}

.broad-pick-rankings .rank-item .rank-company {
    color: #666666;
    font-size: 14px;
    font-weight: 400;
    padding: 16px 0 8px;
}

.broad-pick-rankings .rank-item .rank-name {
    color: #000000;
    font-size: 16px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.broad-pick-graph .chart-container {
    display: flex;
    flex-direction: column;
    padding: 20px 0;
    width: 100%;
}

.broad-pick-graph .chart-container .chart-title {
    color: #000000;
    font-size: 24px;
    font-weight: 800;
    text-align: center;
}

.broad-pick-graph .chart-container .chart-wrapper {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.broad-pick-graph .chart-container .chart-line {
    flex: none;
    height: 615px;
    width: 100%;
}

#top5Chart {
    margin-left: 100px;
    min-width: 1000px;
}

/* community + banner */
.broad-pick-main-body .broad-pick-community-container {
    padding: 40px 0 80px;
    background-color: #f8f8fa;
}

.broad-pick-main-body .broad-pick-community-container .community-part {
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.broad-pick-community {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.broad-pick-community .community-title {
    display: flex;
    align-items: center;
    gap: 24px;
}

.broad-pick-community .community-title h2 {
    color: #222222;
    font-size: 32px;
    font-weight: 800;
    line-height: normal;
}

.broad-pick-community .community-title p {
    color: #727272;
    font-size: 14px;
    font-weight: 350;
    line-height: normal;
}

.broad-pick-community .community-article {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}

.broad-pick-community .community-article .community-article-info {
    width: calc((1100px - 2 * 24px) / 3);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.community-article-info .article-info-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.community-article-info .article-info-header .channel-title {
    color: #222222;
    font-size: 24px;
    font-weight: 800;
    line-height: 30px;
}

.community-article-info .article-info-header img {
    height: 30px;
    width: 84px;
}

.community-article-info .article-info-header .see-more {
    cursor: pointer;
    color: #727272;
    font-size: 14px;
    font-weight: 400;
}

.community-article-info .article-info-list {
    display: flex;
    min-height: 434px;
    padding: 20px 16px;
    border-radius: 15px;
    border: 1px solid #CCCCCC;
}

.community-article-info .article-info-list ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.community-article-info .article-info-list ul li::before {
    content: "•";
    color: #000000;
    font-size: 20px;
    margin: 0 10px;
}

.community-article-info .article-info-list ul li {
    display: flex;
    align-items: center;
    margin: 0;
}

.community-article-info .article-info-list ul li>a {
    display: flex;
    width: 100%;
    min-width: 0;
    color: #000000;
    font-size: 14px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-article-info .article-info-list ul li .article-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.community-article-info .article-info-list ul li:hover::before {
    color: #EC008C;
}

.community-article-info .article-info-list ul li>a:hover {
    color: #EC008C !important;
}

.community-part .broad-pick-community-banner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 223px;
    border-radius: 15px;
    background: radial-gradient(50% 50% at 50% 50%, #0D1523 0%, #040404 60%, #000000 74%);
    z-index: 1;
}

.broad-pick-community-banner span {
    font-size: 36px;
    font-weight: 900;
    background: linear-gradient(94.52deg, #63E3FF 8.44%, #2DCECE 94.31%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    z-index: 3;
}

.broad-pick-community-banner p {
    font-size: 36px;
    font-weight: 900;
    color: #FFFFFF;
    z-index: 3;
}

.broad-pick-community-banner .gradient-circle {
    position: absolute;
    width: 201px;
    height: 201px;
    border-radius: 50%;
    background: radial-gradient(50% 50% at 50% 50%, rgba(0, 41, 255, 0.1) 21%, rgba(0, 13, 82, 0.13) 54.5%, rgba(0, 0, 0, 0) 100%);
    z-index: 2;
}

/* common tooltip */
.custom-tooltip {
    position: absolute;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 5px;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.15s ease-in-out;
    opacity: 0;
}

/* common ranking main body */
.fomos-ranking-main-body {
    font-family: NanumSquare Neo;
    display: flex;
    flex-direction: column;
    padding: 40px 0 80px;
    gap: 40px;
}

/* common ranking title */
.fomos-ranking-title {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.fomos-ranking-title .title-text {
    font-weight: 800;
    font-size: 36px;
    color: #EC008C;
}

.fomos-ranking-title .title-des {
    font-weight: 400;
    font-size: 16px;
    color: #282828;
}

/* common ranking tabs */
.fomos-ranking-tabs {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.fomos-ranking-tabs .tabs-actions {
    display: flex;
    align-items: center;
}

.fomos-ranking-tabs .tabs-actions .tab {
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px #D9D9D9;
    background-color: #F2F2F2;
    cursor: pointer;
    color: #282828;
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 800;
}

.fomos-ranking-tabs .tabs-actions .active {
    color: #FFFFFF;
    background-color: #EC008C;
}

.fomos-ranking-tabs .tab-header {
    display: flex;
    gap: 24px;
    justify-content: center;
    align-items: center;
}

.fomos-ranking-tabs .tab-header button {
    display: flex;
    width: 90px;
    height: 32px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: transparent;
    border: 1px solid #F2F2F2;
    border-radius: 20px;
    cursor: pointer;
}

.fomos-ranking-tabs .tab-header .disabled {
    cursor: not-allowed;
    background-color: #f8f8f8;
}

.fomos-ranking-tabs .tab-header .header-text {
    font-weight: 800;
    font-size: 20px;
    color: #282828;
}

/* common ranking table */
.fomos-ranking-table {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.fomos-ranking-table table {
    text-align: center;
    border-collapse: collapse;
}

.fomos-ranking-table table thead, 
.fomos-ranking-table table tr {
    height: 60px;
}

.fomos-ranking-table table th {
    font-size: 14px;
    background-color: #F2F2F2;
    font-weight: 700;
    color: #282828;
    border-bottom: 1px solid #D9D9D9;
}

.fomos-ranking-table table th.th-idol {
    text-align: left;
    padding-left: 32px;
}

.fomos-ranking-table table .th-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: color 0.2s ease;
}

.fomos-ranking-table table .th-container:hover {
    color: #EC008C !important;
}

.fomos-ranking-table table .th-container.active p {
    color: #EC008C !important;
}

.fomos-ranking-table table .th-container button {
    border: none;
    cursor: pointer;
}

.fomos-ranking-table table .th-container button .sort-icon {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.fomos-ranking-table table .th-container button .sort-icon use {
    fill: none;
}

.fomos-ranking-table table tr:hover {
    background-color: #f9f9f9;
}

.fomos-ranking-table table td {
    padding: 0 4px;
    border-bottom: 1px solid #D9D9D9;
    border-top: 1px solid #D9D9D9;
    color: #666666;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.fomos-ranking-table table td.td-idol {
    color: #282828;
    font-weight: 900;
}

.fomos-ranking-table table td.td-idol .td-idol-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fomos-ranking-table table td.td-idol .td-idol-container .channel-icon {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.fomos-ranking-table table td.td-idol .td-idol-container .channel-icon-chzzk {
    background-image: url('/images/ic_chzzk.svg');
}

.fomos-ranking-table table td.td-idol .td-idol-container .channel-icon-soop {
    background-image: url('/images/ic_soop.svg');
}

.fomos-ranking-table table td.td-idol .td-idol-container .channel-icon-youtube {
    background-image: url('/images/ic_youtube.svg');
}

.fomos-ranking-table table td.td-idol .td-idol-container .channel-icon-fomos {
    background-image: url('/images/ic_fomos.svg');
}

.fomos-ranking-table table td.td-idol .td-idol-container .link-container {
    display: flex;
    gap: 8px;
    align-items: center;
}

.fomos-ranking-table table td.td-idol .td-idol-container .link-container .icon-avatar {
    width: 50px;
    height: 50px;
    cursor: pointer;
}

.fomos-ranking-table table td.td-idol .td-idol-container .link-container .idol-name {
    font-size: 16px;
    font-weight: 800;
    color: #282828;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fomos-ranking-table table td.td-idol .td-idol-container .link-container .idol-name:hover {
    cursor: pointer;
    color: #EC008C;
    text-decoration: underline;
}

/* custom td-idol-chzzk ranking */
.fomos-ranking-table table .td-idol-chzzk {
    max-width: 325px;
}

/* custom td-idol-soop ranking */
.fomos-ranking-table table .td-idol-soop {
    max-width: 415px;
}

/* custom td-idol-youtube ranking */
.fomos-ranking-table table .td-idol-youtube {
    max-width: 315px;
}

/* custom td-idol-fomos ranking */
.fomos-ranking-table table .td-idol-fomos {
    max-width: 595px;
}

/* custom td chzzk ranking */
.fomos-ranking-table table td.td-broadcast-time, td.td-peak-viewers, td.td-average-viewers  {
    max-width: 132px;
}

/* custom td soop ranking */
.fomos-ranking-table table td.td-star-balloon, td.td-viewer  {
    max-width: 152px;
}

/* custom td youtube ranking */
.fomos-ranking-table table td.td-daily-super-chat, td.td-daily-new-subscribers, td.td-cumulative-views  {
    max-width: 132px;
}

/* custom td fomos ranking */
.fomos-ranking-table table td.td-ranking-change  {
    max-width: 132px;
}

.fomos-ranking-table table td.td-ranking-change .ranking-change-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* common td-fomos-ranking  */
.fomos-ranking-table table td.td-fomos-ranking .td-fomos-ranking-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fomos-ranking-table table td.td-fomos-ranking .td-fomos-ranking-container .ranking {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* common td-sort  */
.fomos-ranking-table table td.td-sort {
    background-color: #F8F8FA;
}

.fomos-ranking-table table td.td-fomos-ranking .ranking {
    color: #282828 !important;
}

.fomos-ranking-table table td.td-fomos-ranking .ranking-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 94px;
    min-width: 94px;
    height: 32px;
    border: solid 1px #EC008C;
    border-radius: 20px;
    background-color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    color: #EC008C;
    cursor: pointer;
    text-decoration: none;
}

.fomos-ranking-table table td.td-fomos-ranking .ranking-btn .icon-star{
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

.fomos-ranking-table table td.td-fomos-ranking .ranking-btn .icon-star-active {
    background-image: url('/images/ic_star_active.svg');
}

.fomos-ranking-table table td.td-fomos-ranking .ranking-btn .icon-star-default {
    background-image: url('/images/ic_star_default.svg');
}

/* common td-ranking-trend  */
.fomos-ranking-table table td.td-ranking-trend .td-ranking-trend-container {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fomos-ranking-table table td.td-ranking-trend .trend-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 32px;
    border: none;
    border-radius: 20px;
    background-color: #EC008C;
    cursor: pointer;
}

.fomos-ranking-table table td.td-ranking-trend .trend-btn .icon-chart {
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    background-image: url('/images/ic_chart.svg');
}

/* chart */
.fomos-ranking-table table td.td-chart-cell {
    padding: 0;
}
.fomos-ranking-table table td.td-chart-cell .chart-container {
    display: flex;
    flex-direction: column;
    width: 1100px;
    background: #F2F2F2;
}

.fomos-ranking-table table td.td-chart-cell .chart-container .chart-wrapper {
    display: flex;
    width: 100%;
    overflow-x: auto;
    /* -webkit-overflow-scrolling: touch; */
    scrollbar-width: thin;
}

.fomos-ranking-table table td.td-chart-cell .chart-container .chart-line {
    flex: none;
    height: 250px;
    /* min-width: 1100px; */
    width: 100%;
}

.fomos-ranking-table table td.td-chart-cell .chart-container canvas {
    min-width: 1100px;
    padding: 0 20px 20px 40px;
}

/* common ranking pagination */
.ranking-pagination {
    display: flex;
    justify-content: center;
}


.ranking-pagination>a.page-num {
    display: flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border: 1px solid #D9D9D9;
    background-color: #FFFFFF;
    border-right: 0;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    color: #282828;
}

.ranking-pagination>a.page-num:last-of-type {
    border-right: 1px solid #D9D9D9;
}

.ranking-pagination>a.page-num.is-active {
    background-color: #333333;
    color: #FFFFFF;
}

.ranking-pagination>a.page-prev,
.ranking-pagination>a.page-next {
    width: 72px;
}

/* Loading Overlay for chart containers */
.chart-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s, opacity 0.3s linear;
    border-radius: 8px;
}

.chart-loading-overlay.show {
    visibility: visible;
    opacity: 1;
}

.chart-container {
    position: relative;
}

.loader {
    width: 40px;
    aspect-ratio: 1;
    display: grid;
    border: 4px solid #0000;
    border-radius: 50%;
    border-color: #ccc #0000;
    animation: l16 1s infinite linear;
}
.loader::before,
.loader::after {    
    content: "";
    grid-area: 1/1;
    margin: 2px;
    border: inherit;
    border-radius: 50%;
}
.loader::before {
    border-color: #EC008C #0000;
    animation: inherit; 
    animation-duration: .5s;
    animation-direction: reverse;
}
.loader::after {
    margin: 8px;
}
@keyframes l16 { 
    100% { transform: rotate(1turn); }
}