@font-face {
    font-family: text_extrabold;
    src: url(font/Barlow-ExtraBold.ttf);
}

@font-face {
    font-family: text_bold;
    src: url(font/Barlow-Bold.ttf);
}

@font-face {
    font-family: text_bold_game;
    src: url(font/BarlowCondensed-Bold.ttf);
}

@font-face {
    font-family: text_semibold;
    src: url(font/Barlow-SemiBold.ttf);
}

@font-face {
    font-family: text_medium;
    src: url(font/Barlow-Medium.ttf);
}

@font-face {
    font-family: text_regular;
    src: url(font/Barlow-Regular.ttf);
}

@font-face {
    font-family: text_regular_game;
    src: url(font/BarlowCondensed-Regular.ttf);
}

:root {
    font-size: 3vw;
    --f-scale: 1;
    --zoom-variable: 1;
    --safearea-top: env(safe-area-inset-top, 0px);
    --safearea-bottom: env(safe-area-inset-bottom, 0px);
    /* --safearea-top: 1rem; */
    /* --safearea-bottom: 1rem; */
}

html {
    /* Gunakan !important untuk mencegah override */
    -webkit-text-size-adjust: none !important;
    text-size-adjust: none !important;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html,
body {
    min-height: 100svh !important;
    min-height: -webkit-fill-available;
}

html,
body {
    overscroll-behavior: none;
}

body {
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    /* zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable))); */
    min-height: 100vh;
    min-height: 100dvh;
    font-family: text_regular;
    overflow-x: hidden;
    background-color: #000;
    padding-bottom: calc(0rem + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
}

.modal-backdrop {
    --bs-backdrop-opacity: .8;
}

h1,
h2,
h3,
h4,
h5 {
    /* Hapus perbesaran bawaan browser */
    font-size: 100%;

    /* Tambahan: Matikan fitur autosize spesifik untuk elemen ini */
    -webkit-text-size-adjust: none !important;
}

h1,
.h1 {
    font-size: calc((2rem) * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
}

h2,
.h2 {
    font-size: calc((1.5rem) * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
}

h3,
.h3 {
    font-size: calc((1.4rem) * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.4 * var(--f-scale)) / var(--zoom-variable)));
}

h4,
.h4 {
    font-size: calc((1.35rem) * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
}

h5,
.h5 {
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
}

.text_red_2 {
    color: #b45f65;
}

.auto-text {
    white-space: nowrap;
    display: block;
    --font-base: 16;
    /* default */

    font-size: calc(var(--font-base) * var(--f-scale) * 1px) !important;
    zoom: min(1, calc((var(--font-base) * var(--f-scale)) / var(--zoom-variable))) !important;

    opacity: 0;
    /* transition: opacity 0.15s ease; */
}

.img_flip {
    transform: scale(-1, 1);
}

.grayscale {
    filter: grayscale(1);
}

/* font-size: 2.25rem;
font-size: calc(2.25rem * var(--f-scale)) !important;
zoom: min(1, calc(calc(2.25 * var(--f-scale)) / var(--zoom-variable))); */
/* ====================================================================================================================================== */
.btn_close:hover,
.btn_close:focus,
.btn_close:active,
.btn_close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 2.75rem;
    height: 2.75rem;
    border: 0 !important;
}

.btn_close>img {
    max-width: 100%;
    height: auto;
    filter: brightness(0) saturate(100%) invert(17%) sepia(18%) saturate(995%) hue-rotate(157deg) brightness(91%) contrast(88%);
}

.btn_tnc {
    /* background-color: #0376a3; */
    background: linear-gradient(180deg,
            #a9e6f3,
            #67d2e8);

    background-size: 100% 100%;
    width: 3.5rem;
    height: 3.5rem;
    z-index: 1;
    position: absolute;
    top: 1rem;
    /* top: calc(1rem + env(safe-area-inset-top, 0px)); */
    left: 1rem;
    border: 2px solid #1aafd6;
    border-radius: 12px 12px 12px 12px;
    color: #000 !important;
    font-family: text_bold;
}

.btn_tnc:hover,
.btn_tnc:focus,
.btn_tnc:active {
    color: #0800a6 !important;
}

.btn_tnc>span {
    font-size: 2.25rem;
    font-size: calc(2.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2.25 * var(--f-scale)) / var(--zoom-variable)));
    margin-top: -.1rem;
    margin-left: .1rem;
}


.btn_back {
    /* background-color: #0376a3; */
    background: url(../image/icon/VYCB_btn_kuning_small.webp);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 3rem;
    height: 3rem;
    z-index: 1;
    /* position: absolute; */
    /* top: 1rem; */
    /* left: 1rem; */
    border-radius: 50%;
    color: #0800a6;
    font-family: text_bold;
}

.btn_back>img {
    height: 1.5rem;
    margin-top: -.1rem;
    margin-left: -.15rem;
    filter: brightness(0) saturate(100%) invert(12%) sepia(75%) saturate(7053%) hue-rotate(249deg) brightness(62%) contrast(130%);
}

.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: text_bold;
}

.btn:active {
    scale: 0.9;
}

.btn_kuning {
    background: url('../image/icon/VYCB_btn_kuning_panjang.webp');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #0800a6;
    border: 0 !important;
}

.btn_kuning:active,
.btn_kuning:hover,
.btn_kuning:focus {
    color: #0800a6 !important;
}

.btn_biru:hover,
.btn_biru:focus,
.btn_biru:active,
.btn_biru {
    width: 100%;
    height: 4rem;
    border: 2px solid #c5fbff !important;
    border-radius: 2.6rem;
    box-shadow: 0px -3px 16px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px -3px 16px 0px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #abeef3, #69d2e8);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: auto;
}

.btn_biru span {
    font-family: text_bold;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    color: #253741;
}

.btn_biru img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(15%) saturate(1128%) hue-rotate(157deg) brightness(91%) contrast(89%);
}

.btn_abu:hover,
.btn_abu:focus,
.btn_abu:active,
.btn_abu {
    width: 100%;
    height: 4rem;
    border: 2px solid #f2f2f2 !important;
    border-radius: 2.6rem;
    box-shadow: 0px -3px 16px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px -3px 16px 0px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #b2b7ba, #717a7f);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: auto;
}

.btn_abu span {
    font-family: text_bold;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
}

.btn_abu img {
    filter: brightness(0) saturate(100%) invert(18%) sepia(15%) saturate(1128%) hue-rotate(157deg) brightness(91%) contrast(89%);
}

.btn_orange:hover,
.btn_orange:focus,
.btn_orange:active,
.btn_orange {
    width: 100%;
    height: 4rem;
    border: 2px solid #ffec90 !important;
    border-radius: 2.6rem;
    box-shadow: 0px -3px 16px 0px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0px -3px 16px 0px rgba(0, 0, 0, 0.35);
    background: linear-gradient(180deg, #fed151, #ff9e1a);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: auto;
}

.btn_orange span {
    font-family: text_bold;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    text-shadow:
        -1px -1px 0 #c97600,
        -1px 0px 0 #c97600,
        -1px 1px 0 #c97600,
        0px -1px 0 #c97600,
        0px 1px 0 #c97600,
        1px -1px 0 #c97600,
        1px 0px 0 #c97600,
        1px 1px 0 #c97600;
}

.btn_orange img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1024%) hue-rotate(141deg) brightness(115%) contrast(100%);
}

.btn_share img {
    width: 2rem;
    margin-right: 1rem;
    filter: unset;
}

.auto-text {
    white-space: nowrap;
    display: block;
    --font-base: 16;
    /* default */

    font-size: calc(var(--font-base) * var(--f-scale) * 1px);
    zoom: min(1, calc((var(--font-base) * var(--f-scale)) / var(--zoom-variable)));

    opacity: 0;
    /* transition: opacity 0.15s ease; */
}

.btn_vote_match:active,
.btn_vote_match:focus,
.btn_vote_match:hover,
.btn_vote_match {
    background: linear-gradient(180deg, #fed151, #ff9e1a);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    border: 2px solid #ffec90 !important;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    width: 7rem;
    height: 6rem;
    padding: 1rem;
}

.btn_vote_match>img {
    width: 3rem;
    padding-top: .25rem;
}

.btn_vote_match>span {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    text-shadow:
        -1px -1px 0 #c97600,
        -1px 0px 0 #c97600,
        -1px 1px 0 #c97600,
        0px -1px 0 #c97600,
        0px 1px 0 #c97600,
        1px -1px 0 #c97600,
        1px 0px 0 #c97600,
        1px 1px 0 #c97600;
    color: #fff;
}

.back-button {
    position: absolute;
    top: .5rem;
    left: 1.5rem;
}

.img_back {
    height: 2.5rem;
    /* position: absolute; */
    /* left: 5%; */
    /* top: 30%; */
}

.btn_jadwal_lengkap {
    position: relative;
}

.btn_jadwal_lengkap img {
    margin-right: 1rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%) scale(-1, 1);
    width: 1rem;
}

/* ====================================================================================================================================== */
/* first time */

#popup_onboarding {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #012574, #1c6ca4);
    padding-top: calc(0rem + env(safe-area-inset-top, 0px));
    padding-bottom: calc(0rem + env(safe-area-inset-bottom, 0px));
}

.header_first_time {
    text-align: center;
    margin-top: 2rem;
}

.header_first_time .subtitle {
    font-size: 1.75rem;
    font-size: calc(1.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.75 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    font-family: text_bold;
    margin-bottom: .15rem;
}

.header_gopay {
    width: 12rem;
    margin-left: auto;
    margin-right: auto;
}

/* CONTENT */
.content_firsttime {
    position: relative;
    flex-grow: 1;
}

.item_firsttime {
    width: 48%;
    text-align: center;
    font-size: .8rem;
    font-size: calc(.8rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(.8 * var(--f-scale)) / var(--zoom-variable)));
    position: absolute;
    line-height: 1;
    color: #fff;
    font-family: text_bold;
}

.item_firsttime p {
    margin-top: 1rem;
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
}

.item_2.item_firsttime p {
    margin-top: 0.5rem;
}

.item_3.item_firsttime p {
    margin-top: 2rem;
    line-height: 1.2;
}

.item_4.item_firsttime p {
    margin-top: -1rem;
}

.item_firsttime img {
    width: 11rem;
}

.item_3.item_firsttime img {
    width: 8rem;
}

.item_4.item_firsttime img {
    width: 13rem;
}

.item_1 {
    top: 4%;
    left: 26%;
}

.item_2 {
    top: 27%;
    left: 0%;
}

.item_3 {
    top: 26%;
    left: 56%;
    /* width: 50%; */
}

.item_4 {
    top: 62%;
    left: 25%;
    width: 50%;
}

.panah_onboarding {
    position: absolute;
}

.panah_1 {
    top: 12%;
    width: 2.5rem;
    left: 56%;
    rotate: -46deg;
}

.panah_2 {
    scale: 1 1;
    top: 55%;
    left: 59%;
    rotate: 49deg;
    width: 2.5rem;
}

.btn_firsttime {
    height: 3.5rem;
    position: absolute;
    bottom: 3rem;
    width: 28rem;
    left: 50%;
    transform: translate(-50%, 0);
    transform-origin: 0% 50%;
    border: 0;
    color: #0800a6 !important;
}

.btn_firsttime:active,
.btn_firsttime:focus,
.btn_firsttime:hover {
    border: 0 !important;
}

.btn_firsttime>span {
    font-size: 1.75rem;
    font-size: calc(1.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.75 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    font-family: 'text_semibold';
}

.info_box {
    text-align: center;
    padding: 1rem;
    line-height: 1.1;
    font-family: 'text_bold';
}

.btn_firsttime,
.panah_onboarding,
.item_firsttime {
    scale: 0;
    transition: scale .5s ease;
}

.btn_firsttime.show,
.item_firsttime.show {
    scale: 1;
}

.panah_1.show {
    scale: 1;
}

.panah_2.show {
    scale: 1 1;
}

.panah_3.show {
    scale: -1 1;
}

/* ========================================================================================================= */
/* Home */
.rotating_banner_container {
    padding-top: .5rem;
}

.rotating_banner_container .swiper-pagination {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    bottom: 2.75rem;
}

.rotating_banner_container .swiper-pagination-bullet {
    width: .85rem;
    height: .85rem;
    border-radius: 1rem;
    background-color: #69728b;
    opacity: 1;
}

.rotating_banner_container .swiper-pagination-bullet.swiper-pagination-bullet-active {
    width: 1rem;
    height: 1rem;
    opacity: 1;
    background-color: #fdfffb;
}

.total_ruby_container {
    margin-left: auto;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: .5rem;
}

.text_total_ruby {
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_medium;
    color: #717a7e;
    line-height: 1;
}

.card_tukar {
    /* left: 5rem; */
    width: 10rem;
    padding-right: 0;
    /* top: 1.5rem; */
    background-image: url(../image/icon/DBL_lbl_abu_ruby.webp) !important;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    /* border-radius: 2rem; */
    padding: .75rem;
    position: static;
    height: 2.5rem;
    /* z-index: 2; */
    /* margin-top: -.25rem; */
    /* margin-left: auto; */
    margin-right: 3.25rem;
    padding-left: 1rem;
}

.card_tukar img {
    width: 1.6rem;
}

.btn_tukar:active,
.btn_tukar:focus,
.btn_tukar:hover,
.btn_tukar {
    border: 0 !important;
    transition: scale 0.2s ease;
    height: calc(2.25rem + 4px);
    width: auto;
    line-height: 1;
    margin-left: 1.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    border-radius: 1.6rem;
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    padding-top: .75rem;
    padding-bottom: .75rem;
    margin-top: unset;
    margin-bottom: unset;
}

.btn_tukar>span {
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
    /* font-family: text_bold_game; */
}

.card_tukar .card_tukar_body {
    width: 34%;
    min-width: 2.5rem;
    max-width: 2.5rem;
    width: 30%;
    text-align: center;
    font-size: 1.5rem;
    font-size: calc(1.65rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    padding-top: .1rem;
    color: #fff;
    font-family: text_regular_game;
}

#section_username {
    margin-top: -4rem;
    position: relative;
    color: #fff;
    background-color: #000;
}

#section_username::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 30px;

    background: linear-gradient(to bottom,
            transparent,
            #000);
}


.section_username {
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_semibold;
    padding-left: 2rem;
    padding-right: 2rem;
}

.btn_edit_username {
    width: 2rem;
    height: 2rem;
}

.garis_username {
    margin-top: -1rem;
}

.container_poin {
    position: relative;
    padding: 0 1rem;
}

.poin_content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1rem 2rem;
}

.section_poin {
    /* padding: 1rem 2rem;
    background-color: darkgray;
    display: flex;
    align-items: center; */
    position: relative;
}

.text_poin {
    color: #b3dee7;
}

.poin_kamu_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: .75rem 1rem;
    text-align: center;
    color: #fff;
    font-family: 'text_semibold';
    line-height: 1;
}

.img_glow_jadwal {
    width: 21rem;
    margin-left: auto;
    position: absolute;
    top: -58%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
}

.poin_kamu {
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    margin-top: .25rem;
}

.btn_leaderboard {
    width: 27rem;
    margin-top: 1rem;
    height: 3.5rem;
    font-family: 'text_bold';
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    position: relative;
}

.btn_leaderboard>span {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
}

.btn_leaderboard>img {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translate(0, -50%);
    width: 2rem;
}

.lb_kosong {
    text-align: center;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    margin-top: 2rem;
}

.banner_vote_juara {
    background-color: aquamarine;
    border: 2px solid #000;
    border-radius: 1rem;
    padding: 1rem;
}

.judul_jadwal {
    text-align: center;
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    font-family: 'text_semibold';
}

.bg_header {
    background: linear-gradient(180deg, #034ea1 calc(1rem + var(--safearea-top)), #1681c4 calc(1rem + var(--safearea-top)));
    /* height: 14rem;
    height: calc(14rem + var(--safearea-top)); */
    height: 18.5rem;
    height: calc(18.5rem + var(--safearea-top));
    padding-top: 0rem;
    padding-top: calc(0rem + var(--safearea-top));
}

.bg_home {
    width: 100%;
    min-height: 26rem;
    height: 50vh;
    min-height: calc(26rem + env(safe-area-inset-top, 0px));
    max-height: calc(36rem + env(safe-area-inset-top, 0px));
    object-fit: cover;
    object-position: bottom;
    background: linear-gradient(180deg, #034ea1, #1681c4);
}

.logo_home {
    position: absolute;
    top: 36%;
    left: 50%;
    width: 12rem;
    transform: translate(-50%, -50%);
}

.glow_home {
    position: absolute;
    top: 65%;
    left: 50%;
    width: 18rem;
    transform: translate(-50%, -50%);
    filter: brightness(0) saturate(100%) invert(77%) sepia(28%) saturate(5998%) hue-rotate(151deg) brightness(91%) contrast(85%);
    opacity: .4;
}

.sinar_home {
    position: absolute;
    top: 65%;
    left: 50%;
    width: 18rem;
    transform: translate(-50%, -50%);
    filter: brightness(0) saturate(100%) invert(90%) sepia(6%) saturate(4644%) hue-rotate(156deg) brightness(105%) contrast(104%);
}

.sub_logo {
    position: absolute;
    top: 77.5%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #f8fca7;
    font-size: 2.25rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2.25 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_bold';
    width: 28rem;
    text-align: center;
    text-shadow: -2px -2px 0 #4a2e04, -2px -1px 0 #4a2e04, -2px 0px 0 #4a2e04, -2px 1px 0 #4a2e04, -2px 2px 0 #4a2e04, -1px -2px 0 #4a2e04, -1px -1px 0 #4a2e04, -1px 0px 0 #4a2e04, -1px 1px 0 #4a2e04, -1px 2px 0 #4a2e04, 0px -2px 0 #4a2e04, 0px -1px 0 #4a2e04, 0px 1px 0 #4a2e04, 0px 2px 0 #4a2e04, 1px -2px 0 #4a2e04, 1px -1px 0 #4a2e04, 1px 0px 0 #4a2e04, 1px 1px 0 #4a2e04, 1px 2px 0 #4a2e04, 2px -2px 0 #4a2e04, 2px -1px 0 #4a2e04, 2px 0px 0 #4a2e04, 2px 1px 0 #4a2e04, 2px 2px 0 #4a2e04;
    z-index: 1;
}

.banner_dukungan {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

.banner_dukungan_text {
    padding: .5rem 0 .5rem 1rem;
    font-family: text_bold;
    color: #fff;
}

.banner_dukungan_title {
    font-size: 1.15rem;
    font-size: calc(1.15rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.15 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1.2;
    color: #fff;
    margin-top: .5rem;
    margin-bottom: .5rem;
}

.banner_dukungan_desc {
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
}

.banner_dukungan_nama_tim {
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    color: #f7e83b;
    margin-top: -.5rem;
}

.bosnia_dan_herzegovina.banner_dukungan_nama_tim {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    white-space: nowrap;
}

.tim_fav_container {
    display: flex;
    margin-right: 1rem;
    margin-top: 1rem;
}

.tim_fav_icon {
    height: 5rem;
    margin-left: auto;
    border: 2px solid #b2c4c8;
}

.text_regis_container {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    padding-left: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
}

.text_regis {
    flex-grow: 1;
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_semibold;
    color: #fff;
    padding-left: 2rem;
    margin-top: -.5rem;
    text-shadow:
        -1px -1px 0 #975306,
        -1px 0px 0 #975306,
        -1px 1px 0 #975306,
        0px -1px 0 #975306,
        0px 1px 0 #975306,
        1px -1px 0 #975306,
        1px 0px 0 #975306,
        1px 1px 0 #975306;
}

.img_regis {
    width: 4rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.img_regis>img {
    height: 3rem;
}

/* ========================================================================================================= */
/* Match */
.list_match {
    display: flex;
}

.card_home {
    background: #fff;
    padding: 1rem;
    border-radius: 1.6rem;
    border: 1px solid #dfdfdf;
}

.card_home_header {
    display: flex;
    padding-bottom: 1rem;
    border-bottom: 2px solid #f2f1f6;
    margin-bottom: .5rem;
}

.card_home_header>img {
    width: 5.5rem;
    height: auto;
}

.card_home_header_text {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_semibold';
    color: #253741;
}

.match_content {
    flex-grow: 1;
    padding-left: .5rem;
    position: relative;
}

.match_team {
    font-family: text_semibold;
    color: #253741;
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    height: 3rem;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: .5rem;
}

.match_team span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 0rem;
    text-align: start;
}

#overlay_vote .voted_team_1 .match_team {
    height: 4.75rem;
    padding-left: .5rem;
}

#overlay_vote .voted_team_2 .match_team {
    height: 3.75rem;
    padding-left: .5rem;
}

#overlay_vote .voted_team_2 .match_team.team_2 {
    margin-top: 1.5rem;
}

.match_team>.logo_tim_container {
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 2.5rem;
}

.match_team>.logo_tim_container>img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}

.match_result {
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.6rem;
    font-family: text_semibold;
    color: #8d8d8d;
    border-left: 2px solid #dfdfdf;
    margin-top: .5rem;
    margin-bottom: 1.15rem;
    width: 4rem;
}

#overlay_vote .voted_team_1 .match_result {
    height: 3rem;
    padding-left: .5rem;
    margin-bottom: 1.75rem;
    margin-top: .75rem;
}

#overlay_vote .voted_team_2 .match_result {
    height: 3rem;
    padding-left: .5rem;
    margin-bottom: 2.35rem;
    margin-top: 0.35rem;
}


.match_result.win {
    color: #0c7be9;
}

.match_category {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    text-align: center;
    rotate: 180deg;
    width: 2.9rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #c1354b;
    font-family: 'text_semibold';
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
}

.match_category.boys {
    color: #204e6f;
}

.match_category.girls {
    color: #c1354b;
}

.match_tgl_play {
    color: #7a7a7e;
    font-family: 'text_regular';
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
}

.card_header {
    margin-top: -1rem;
    margin-left: -1rem;
    border-bottom: 2px solid #f2f1f6;
    margin-bottom: .5rem;
}

.header_live {
    width: 15rem;
    position: relative;
}

.header_live_text {
    position: absolute;
    display: flex;
    top: 0;
    left: 0;
    padding: 1rem;
    font-size: 1.5rem;
    color: #fff;
    align-items: center;
    height: 100%;
    width: 100%;
    gap: .5rem;
    font-family: text_semibold;
    line-height: 1;
    padding-bottom: 1.1rem;
}

.dot_putih {
    width: 1rem;
    height: 1rem;
    background-color: #fff;
    border-radius: 50%;
    margin-top: .1rem;
}

.vote_dibuka {
    padding: .5rem 1rem;
    font-size: 1.75rem;
    font-family: text_semibold;
    color: #253741;
}

.btn_tebak:active,
.btn_tebak:focus,
.btn_tebak:hover,
.btn_tebak {
    width: 27rem;
    height: 3.25rem;
    position: relative;
    margin-top: 1rem;
}

.btn_tebak>span {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    margin-top: -.1rem;
}

.btn_tebak.btn_abu>span {
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
}

.btn_tebak>img {
    margin-right: 1rem;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%) scale(-1, 1);
    width: 1rem;
}

.btn_tebak .img_alert {
    left: unset;
    right: 0;
}

#jadwal_lengkap .img_alert {
    left: 95%;
    right: 0;
}

/* ========================================================================================================= */
/* Vote */

#overlay_vote .match_icon {
    width: auto;
}

/* #overlay_vote .text_vs {
    width: 8.5rem;
    font-size: 3.75rem;
    font-size: calc(3.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(3.75 * var(--f-scale)) / var(--zoom-variable)));
    position: relative;
    align-items: unset;
} */

#overlay_vote .text_vs {
    width: 9.5rem;
    font-size: 3.75rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(3.75 * var(--f-scale)) / var(--zoom-variable)));
    position: relative;
    align-items: center;
    display: flex;
    font-family: text_bold;
    text-align: center;
    justify-content: center;
}

#overlay_vote .skor_pinalti_container {
    display: flex;
    align-items: center;
    gap: .5rem;
}

#overlay_vote .text_vs.text_vote {
    align-items: center;
    font-size: 2.75rem;
    font-size: calc(2.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2.75 * var(--f-scale)) / var(--zoom-variable)));
}

#overlay_vote .text_jadwal {
    font-family: text_semibold;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    color: #5c6b72;
    line-height: 1;
}

#overlay_vote .text_tgl_play {
    color: #5a6c70;
    font-size: 1.25rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1;
    margin-bottom: 1rem;
}

#overlay_vote .text_tgl_play.long {
    margin-bottom: 2rem;
}

#overlay_vote .match_play {
    width: 9rem;
    position: relative;
}

#overlay_vote .nama_tim_match {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    position: relative;
}

.match_vote {
    position: relative;
}

.icon_tim_container {
    height: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#overlay_vote .match_vote .nama_tim_match {
    width: 90%;
    text-align: center;
    color: #253741;
    padding-bottom: 0;
    margin-left: 5%;
    margin-right: auto;
    line-height: 1;
    min-width: 0;
    font-size: 1.25rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    position: relative;
    height: 5.5rem;
    display: flex;
    align-items: end;
    justify-content: center;
    z-index: 1;
    position: relative;
    margin-bottom: 1rem;
    font-family: text_bold;
    padding-left: .5rem;
    padding-right: .5rem;
    padding-bottom: .5rem;
}

#overlay_vote .match_vote.active .nama_tim_match {
    color: #fff;
}

.text_voted {
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    color: #68804a;
    font-family: text_semibold;
    margin-top: .5rem;
}

.label_sudah_vote_header {
    color: #253741;
    font-family: text_bold;
    font-size: 1.75rem;
    font-size: calc(1.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.75 * var(--f-scale)) / var(--zoom-variable)));
    position: relative;
    z-index: 1;
}

.label_sudah_vote_team {
    color: #253741;
    font-family: text_bold;
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    margin-bottom: 1rem;
    line-height: 1.1;
    text-align: center;
}

#overlay_vote .match_vote .vote_tim_konten {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 7rem;
    padding-top: 0;
}

#overlay_vote .match_vote .vote_tim_konten .icon_tim_container .icon_tim {
    width: 7.25rem;
}

#overlay_vote .border_select {
    position: absolute;
    bottom: -1px;
    width: 100%;
    left: 0;
    height: 100%;
}

/* Hasil & Match */
#overlay_vote .vote_tim_konten {
    width: 11rem;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
}

.vote_overlay_banner.kalah {
    background-color: yellow;
    padding: 1rem;
    /* width: calc(100% + 3rem); */
    /* margin-left: -1.5rem; */
}

.vote_overlay_text {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1.1;
    /* margin-bottom: .5rem; */
    font-family: 'text_medium';
    /* color: #912706; */
}

#section_has_claim .vote_overlay_text {
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
}

.vote_overlay_reward {
    font-size: 3.75rem;
    font-size: calc(3.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(3.75 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_bold';
    color: #fff;
    line-height: 1;
    margin-top: .75rem;
    margin-bottom: .5rem;
}

#overlay_vote .vote_overlay_reward {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.label_kalah_vote {
    font-family: text_semibold;
    color: #fff;
    line-height: 1.3;
}

.label_kalah_footer {
    color: #b3c5d2;
    line-height: 1.3;
}

.vote_overlay_reward img {
    width: 3.75rem;
    margin-top: -.5rem;
}

#overlay_vote .vote_overlay_reward img {
    height: 3.75rem;
    width: auto;
}

.text_footer_juara {
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
    margin-top: 1rem;
    font-family: text_semibold;
    color: #5d6a72;
    text-align: center;
    line-height: 1.2;
}

.btn_share_container {
    padding: 1.5rem;
}

.vote_reward {
    background: #eaffeb;
    text-align: center;
    border: 2px solid #237632;
    margin-left: 1rem;
    margin-right: 1rem;
    border-radius: 1.6rem;
    color: #479647;
    padding: .25rem 1rem;
}

.vote_reward.kalah {
    background: #fff0f0;
    border: 2px solid #ffa5a0;
    color: #c50c2e;
}

.vote_reward_title {
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_bold;
}

.vote_reward_desc {
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_semibold;
    line-height: 1.2;
}

.vote_reward_val {
    font-size: 4rem;
    font-size: calc(4rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(4 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_bold;
    line-height: 1.1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: .5rem;
}

.vote_reward_val>img {
    width: 4.5rem;
}

.vote_reward_footer {
    font-size: 1.15rem;
    font-size: calc(1.15rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.15 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_medium;
}

.glow_tebak {
    position: absolute;
    left: 0;
    width: 27rem;
    transform: translate(0, -50%);
}

.voted_team_1 .glow_tebak {
    top: 1.5rem;
}

.voted_team_2 .glow_tebak {
    top: 6.5rem;
}

.glow_tebak_text {
    position: absolute;
    top: .5rem;
    left: 1rem;
    font-family: text_semibold;
    color: #0e711b;
    font-size: 1.15rem;
}

.banner_header_hasil {
    width: 19rem;
    margin-top: -3.25rem;
    margin-left: -.5rem;
}

.banner_header_text {
    position: absolute;
    top: -1%;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 2.5rem;
    color: #fff;
    font-family: text_bold;
}

.container_blink_kiri,
.container_blink_kanan {
    position: absolute;
    bottom: 1rem;
    width: 5rem;
    height: 5rem;
}

.container_blink_kiri {
    left: -1rem;
}

.container_blink_kanan {
    right: -1rem;
}

/* ========================================================================================================= */
#overlay_reward_match {
    background: linear-gradient(180deg, #000000 44rem, #1688be);
}

#overlay_reward_match .bg_hasil_match_2 {
    top: -2rem;
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 21%,
            black 40%,
            transparent 87%);
}

#overlay_reward_match .bg_hasil_match_2.seri {
    top: -5rem;
}

.vote_kamu_mini_container>span {
    color: #00f1ff;
}

.vote_kamu_mini_container>img {
    width: 3rem;
    border: 1px solid #b2c4c8;
    margin-top: -.35rem;
}

.bg_hasil_match {
    position: absolute;
    z-index: -1;
    top: 2rem;
    top: calc(2rem + env(safe-area-inset-top, 0px));
    left: 0;
    width: 100%;
    /* filter: blur(.05rem); */
    pointer-events: none;
}

.bg_hasil_match_2 {
    top: -1rem;
    top: calc(-1rem + env(safe-area-inset-top, 0px));
    mask-image: linear-gradient(to bottom,
            transparent 0%,
            black 21%,
            black 62%,
            transparent 87%);
}

.nama_tim_menang {
    text-align: center;
    font-size: 2.75rem;
    font-size: calc(2.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2.75 * var(--f-scale)) / var(--zoom-variable)));
    color: #f8e83b;
    font-family: text_bold;
    line-height: 1;
    padding-left: 1rem;
    padding-right: 1rem;
    margin-bottom: .5rem;
}

.subtitle_tim_menang {
    text-align: center;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1;
    color: #fff;
    font-family: text_bold;
}

/* ========================================================================================================= */
/* Leaderboard */
#overlay_hadiah,
#overlay_leaderboard {
    background: linear-gradient(180deg, #000000 44rem, #1688be);
    color: #fff;
}

.lb_periode {
    text-align: center;
    font-family: 'text_bold';
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
}

.lb_lastrefresh {
    text-align: center;
    font-family: 'text_regular';
}

.juara_container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    /* overflow-x: hidden; */
    width: 10rem;
}

.trophy {
    max-width: 100%;
    height: auto;
    width: 8rem;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

.jumlah_dukungan_nama_tim {
    font-family: text_bold;
}

.juara_2 .jumlah_dukungan_juara_container {
    border-image-slice: 39 27 27 27 fill;
    border-image-width: 2em 2em 2em 2em;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(../image/icon/VYCB_lbl_podium_silver.svg);
    border-style: solid;
    height: 14rem;
    margin-top: -5rem;
    padding-top: 6rem;
}

.juara_1 .jumlah_dukungan_juara_container {
    border-image-slice: 39 27 27 27 fill;
    border-image-width: 2em 2em 2em 2em;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(../image/icon/VYCB_lbl_podium_gold.svg);
    border-style: solid;
    height: 16rem;
    margin-top: -5rem;
    padding-top: 6rem;
}

.juara_2 .trophy {
    width: 7rem;
    margin-left: auto;
}

.juara_3 .trophy {
    width: 6.5rem;
    margin-left: auto;
}

.juara_3 .jumlah_dukungan_juara_container {
    border-image-slice: 39 27 27 27 fill;
    border-image-width: 2em 2em 2em 2em;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(../image/icon/VYCB_lbl_podium_bronze.svg);
    border-style: solid;
    height: 13rem;
    margin-top: -4rem;
    padding-top: 5rem;
}

.jumlah_dukungan_juara_container {
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 50%; */
    /* transform: translate(-50%, 0); */
    text-align: center;
    width: 100%;
    padding-left: .5rem;
    padding-right: .5rem;
}

.text_poin_juara {
    font-size: 3rem;
    font-size: calc(3rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(3 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_bold;
    line-height: 1;
}

.text_poin_desc {
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_bold;
    line-height: 1;
}

.container_lb {
    background: linear-gradient(180deg, #1b788f, #323e4d 6rem);
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    color: #fff;
    border-top: 4px solid #17b5da;
    padding-bottom: 12rem;
    padding-bottom: calc(12rem + env(safe-area-inset-bottom, 0px));
}

.rank_lb {
    display: flex;
    color: #fff;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    /* padding-top: .5rem; */
    /* padding-bottom: .5rem; */
    position: relative;
}

.rank_lb_self::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(23, 181, 218, 1) 39%,
            rgba(23, 181, 218, 1) 68%,
            transparent 100%);
    pointer-events: none;
    z-index: 0;
    height: 3.5rem;
    margin-top: -.8rem;
}

.content_lb {
    position: relative;
    z-index: 1;
    padding: 1rem 2rem;
}

.rank_number {
    min-width: 10%;
    position: relative;
}

.rank_name {
    flex-grow: 1;
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    position: relative;
}

.rank_dukungan {
    text-align: end;
    width: 35%;
    position: relative;
}

.lb_bottom_container {
    position: fixed;
    bottom: 0;
    z-index: 1;
    width: 100%;
    /* margin-bottom: 1rem; */
    /* padding-left: 1rem; */
    /* padding-right: 1rem; */

    border-image-slice: 150 190 110 210 fill;
    border-image-width: 3em 5em 3em 4em;
    border-image-outset: 0px 0px 15px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(../image/icon/VYCB_lbl_profile.svg);
    border-style: solid;
    padding-bottom: calc(0rem + env(safe-area-inset-bottom, 0px));
}

.lb_bottom {
    /* border: 1px solid #000; */
    /* background-color: gray; */
    /* border-radius: 2rem; */
    padding: 1rem;
}

.lb_bottom .poin_kamu {
    margin-top: .5rem;
}

.lb_bottom_title {
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_bold';
}

.text_desc_lb {
    width: 60%;
    color: #b3dee7;
    font-family: 'text_semibold';
}

.btn_daftar_hadiah {
    width: 12rem;
    height: 3rem;
}

.btn_daftar_hadiah>span {
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1;
}

.wreath {
    position: absolute;
    top: 5.5rem;
    height: 2.5rem;
}

.wreath_1 {
    rotate: 52deg;
    left: -2.5rem;
}

.wreath_2 {
    right: -2.5rem;
    transform: scale(-1, 1);
    rotate: -52deg;
    /* left: -3rem; */
}

.juara_2 .wreath {
    position: absolute;
    top: 4.75rem;
    height: 2rem;
}

.juara_2 .wreath_1 {
    rotate: 52deg;
    left: -1.5rem;
}

.juara_2 .wreath_2 {
    right: -1.5rem;
    transform: scale(-1, 1);
    rotate: -52deg;
}

.juara_3 .wreath {
    position: absolute;
    top: 4.75rem;
    height: 2rem;
}

.juara_3 .wreath_1 {
    rotate: 52deg;
    left: -1rem;
}

.juara_3 .wreath_2 {
    right: -1rem;
    transform: scale(-1, 1);
    rotate: -52deg;
}

.header_list_hadiah {
    display: flex;
}

.detail_text_hadiah {
    font-family: text_regular;
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
}

.list_hadiah_container {
    background: linear-gradient(180deg, #1b788f, #323e4d 6rem);
    border-radius: 1rem;
    color: #fff;
    padding: 1rem;
}

.list_hadiah_header {
    font-size: 1.75rem;
    font-size: calc(1.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.75 * var(--f-scale)) / var(--zoom-variable)));
    text-align: center;
    font-family: text_bold;
}

.table_hadiah th,
.table_hadiah td {
    background: unset;
    color: #fff;
}

.table_hadiah th {
    color: #17b5da;
}

.img_glow_hadiah {
    width: 21rem;
    margin-left: auto;
    position: absolute;
    top: 93%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* ========================================================================================================= */

/* OVERLAY */
.popup_overlay {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;
    z-index: 1050;
    overflow-y: auto;
    background-color: #fff;
    overflow-x: hidden;
}

.overlay_header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    position: relative;
    padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}

.overlay_header_text {
    color: #fff;
    font-family: 'text_bold';
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
}

/* ========================================================================================================= */
/* TIMELINE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.timeline_container {
    background: linear-gradient(180deg, #14a7df, #0b89d3);
    padding-bottom: 2rem;
}

.timeline {
    position: relative;
    white-space: nowrap;
    max-width: 100vw !important;
    max-width: 100dvw !important;
    /* padding: 0 10px; */
    margin: 0 auto;
    display: grid;
    height: 5.5rem;
    overflow-x: scroll;
    -ms-scroll-snap-type: x proximity;
    scroll-snap-type: x proximity;
    padding-left: 45% !important;
    padding-right: 45% !important;
    scroll-behavior: smooth;
}

.timeline::-webkit-scrollbar,
.timeline ol::-webkit-scrollbar {
    display: none;
}

.timeline::-webkit-scrollbar-thumb,
.timeline::-webkit-scrollbar-track {
    display: none;
}

.timeline::-webkit-scrollbar-thumb {
    display: none;
    /* background: var(--midnight-green); */
}

.timeline::-webkit-scrollbar-track {
    display: none;
    /* background: var(--yellow); */
}

.timeline ol {
    cursor: grab;
    position: absolute;
    padding-left: 45%;
    padding-right: 45%;
    transition: all 1s;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    scroll-behavior: smooth;
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}

.timeline ol li {
    /* position: relative; */
    width: 6rem;
    height: 3.2rem;
    border-radius: 1.6rem;
    z-index: 1;
    display: inline-block;
    transform-style: preserve-3d;
    scroll-snap-align: center;
    font-size: 1.25rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    /* padding-bottom: .25rem; */
    flex-direction: column;
    line-height: 1;
    color: #7ac4e8;
}

.timeline ol li.active {
    /* position: relative; */
    /* width: 3rem; */
    /* height: 3rem; */
    /* border-radius: 50%; */
    z-index: 1;
    display: inline-block;
    transform-style: preserve-3d;
    scroll-snap-align: center;
    animation: mymove .2s;
    color: white;
}

@keyframes mymove {
    from {
        color: #7ac4e8;
    }

    to {
        color: white;
    }
}

.timeline ol li:hover {
    cursor: pointer;
}

.timeline ol li:not(:first-child)::before {
    /* position: absolute;
    display: block;
    content: '';
    width: 3rem;
    margin-right: 13rem;
    height: .25rem;
    z-index: -1;
    background-color: transparent; */
}

.timeline ol li.active:not(:first-child)::before {
    /* width: 3rem;
    margin-right: 13rem; */
}

.timeline ol li:not(:first-child) {
    margin-left: 0rem;
}

/* .timeline ol li:not(:last-child)::after {
    position: relative;
    display: inline-block;
    list-style-type: none;
    width: 5rem;
    height: 5px;
} */

.judul {
    color: #fff;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
}

.current_bulan {
    background-color: #0a84cd;
    border: 2px solid #78e5ff;
    color: #fff;
    border-radius: 1.6rem;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    padding: .25rem 1rem;
    font-family: 'text_semibold';
}

.timeline_day {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_bold';
}

.timeline_tgl {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_regular;
}

/* ====================================================================================================================================== */
/* Jadwal */
.content_bottom.content_jadwal {
    margin-top: -2rem
}

/* ====================================================================================================================================== */
/* custom modal */
.custom-modal {
    background: transparent;
    border: none;
    width: 30rem;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    /* border-radius: 1.6rem; */
    position: relative;
    isolation: isolate;
}

.modal-middle {
    background: url(../image/icon/VYCB_popUp_mid.webp);
    background-repeat: repeat-y;
    background-size: 100% auto;
    padding: 1rem;
    color: #fff;
    margin-top: -12rem;
    margin-bottom: -14.5rem;
    padding-bottom: 0;
    border-radius: 3rem;
}

.custom-modal .modal-title {
    font-size: 2.15rem;
    font-size: calc(2.15rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2.15 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    font-family: 'text_semibold';
}

.custom-modal .modal-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 25rem;
    height: 6rem;
    border: 0;
    font-size: 7rem;
    font-size: calc(7rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(7 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1;
    padding-left: 2rem;
    padding-top: 1.5rem;
}

.img_warning {
    width: 11rem;
    margin-top: 1rem;
}

.tambah_kesempatan_keterangan_1 {
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    font-family: 'text_semibold';
    margin-top: 1rem;
}

.btn_modal {
    height: 3.5rem;
    width: 24rem;
    position: relative;
}

.btn_modal>span {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
}

.btn_modal>img {
    margin-right: 1rem;
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translate(0, -50%);
    width: 1.5rem;
}

.text_header_modal {
    color: #fff;
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_semibold;
    line-height: 1.3;
}

.text_keterangan_modal {
    font-size: 1.2rem;
    font-size: calc(1.2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.2 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    line-height: 1.3;
    font-family: 'text_semibold';
}

.subtitle_keterangan_modal {
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    color: #b3c5d2;
    line-height: 1.3;
    font-family: 'text_semibold';
}

.btn_submit_vote:hover,
.btn_submit_vote:focus,
.btn_submit_vote:active,
.btn_submit_vote {
    height: 3.5rem;
    width: 27rem;
}

.btn_submit_vote>span {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
}

.gap_playoff {
    margin-left: 2rem;
    margin-right: 2rem;
}

.banner_reward {
    background: linear-gradient(180deg, #1b788f 0%, #323e4d 4rem);
    border-radius: 1rem;
    padding: 1rem;
}

.banner_reward_title {
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_semibold;
}

.label_total_poin {
    position: relative;
    border-image-slice: 50 50 50 50 fill;
    border-image-width: 2em 2em 2em 2em;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(../image/icon/VYCB_lbl_biru_kecil.svg);
    display: flex;
    height: 5rem;
    align-items: center;
}

.label_total_poin_text {
    color: #fff;
    line-height: 1.1;
    padding-top: .5rem;
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_semibold';
}

.label_total_poin_val {
    font-size: 1.75rem;
    font-size: calc(1.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.75 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1.1;
    color: #fff;
    font-family: text_bold;
    padding-top: .5rem;
    text-align: end;
    margin-right: 1.25rem;
}

.label_total_poin_big .label_total_poin_text {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
}

.label_total_poin_big .label_total_poin_val {
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
}

.btn_lb_pendek {
    width: 12.5rem;
    height: 3.5rem;
    margin-left: -.25rem;
}

.btn_lb_pendek>img {
    width: 2rem;
    margin-right: .25rem;
}

.btn_lb_pendek>span {
    font-size: 1.1rem;
    font-size: calc(1.1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.1 * var(--f-scale)) / var(--zoom-variable)));
}

/* ====================================================================================================================================== */
/* modal error */
#modal_error {
    z-index: 2005;
}

#modal_error .custom-modal .modal-title {
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    font-family: 'text_semibold';
}

/* modal vote belum dibuka */
#modal_vote_upcoming .custom-modal .modal-title {
    font-size: 2.25rem;
    font-size: calc(2.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2.25 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    font-family: 'text_semibold';
}

.timer_vote_judul {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
}

.timer_vote {
    font-size: 4.5rem;
    font-size: calc(4.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(4.5 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_bold';
}

/* modal hadiah */
#modal_claim_reward_monthly .custom-modal .modal-title,
#modal_claim_reward_match .custom-modal .modal-title {
    font-size: 2.15rem;
    font-size: calc(2.15rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2.15 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    font-family: 'text_semibold';
}

/* Modal username */
#modal_username .modal-content {
    background: linear-gradient(180deg, #000000 44rem, #1688be);
    height: 100vh;
    height: 100dvh;
    border-radius: 0;
    color: #fff;
}

#modal_username .modal-dialog {
    max-width: unset;
}

#modal_username .form-label {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    margin-bottom: 0;
    padding-left: .75rem;
    color: #fff;
    font-family: text_bold;
}

#modal_username small {
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
}

#modal_username .banner_warning img {
    width: 20%;
}

#modal_username #reminder_close2 {
    top: 2.25rem;
    right: .5rem;
}

#modal_username #reminder_close2 img {
    width: 1.75rem;
}

#modal_username .input_gopayid {
    border-image-slice: 31 36 31 36 fill;
    border-image-width: .5em .5em .5em .5em;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(../image/icon/VYCB_lbl_username_01.svg);
    border-style: solid;
    height: 4.5rem;
    font-size: 1.75rem;
    font-size: calc(1.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.75 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_bold';
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: unset;
}

#modal_username .inputUsername {
    border-image-slice: 31 36 31 36 fill;
    border-image-width: .5em .5em .5em .5em;
    border-image-outset: 0px 0px 0px 0px;
    border-image-repeat: stretch stretch;
    border-image-source: url(../image/icon/VYCB_lbl_username_02.svg);
    border-style: solid;
    height: 4.5rem;
    font-size: 1.75rem;
    font-size: calc(1.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.75 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_bold';
    color: #fff;
    -webkit-text-fill-color: #fff;
    background: unset;
}

.box-hidden {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 1s ease, opacity 1s .25s ease;
}

/* keadaan visible */
.box-show {
    max-height: 100vh;
    opacity: 1;
}

.berhasil_input {
    position: relative;
    width: 23rem;
    margin-left: auto;
    margin-right: auto;
}

.label_berhasil_input {
    position: absolute;
    bottom: .6rem;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
}

#submitUsername {
    height: 3.75rem;
    width: 100%;
}

#submitUsername>span {
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
}

.img_warning {
    width: 11rem;
    margin-top: 1rem;
}

#modal_updateUsername .custom-modal .modal-title {
    font-size: 2.25rem;
    font-size: calc(2.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2.25 * var(--f-scale)) / var(--zoom-variable)));
}

#modal_offline .custom-modal .modal-title {
    font-size: 1.8rem;
    font-size: calc(1.8rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.8 * var(--f-scale)) / var(--zoom-variable)));
    white-space: nowrap;
}

.img_alert {
    width: 2rem;
    top: -17%;
    position: absolute;
    left: 86%;
    transition: left 0.5s ease;
    width: 1rem;
    height: 1rem;
    background-color: #ff3c36;
    border-radius: 50%;
}

.left .img_alert {
    left: -5%;
    /* right: unset; */
}

.right .img_alert {
    left: 85%;
    /* right: -5%; */
}

.center .img_alert {
    left: 85%;
    /* right: -5%; */
}

.img_alert.img_percent {
    top: -2%;
    left: 61%;
    z-index: 1;
    width: 1.5rem;
}

/* ====================================================================================================================================== */
/* TNC */

#overlay_tnc {
    position: fixed;
    top: env(safe-area-inset-top, 0px);
    left: 0;
    height: 100vh;
    height: 100dvh;
    width: 100vw;
    width: 100dvw;
    background: #ecf0f3;
    z-index: 1050;
    overflow-y: auto;
    z-index: 2000;
    padding-bottom: calc(0rem + env(safe-area-inset-bottom, 0px));
}

#overlay_tnc .tnc_bg {
    padding: 1rem;
    margin-top: 1rem;
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    margin-bottom: 2rem;
    margin-bottom: calc(2rem + var(--safearea-bottom));
    color: #253741;
    font-family: 'text_medium';
}

#overlay_tnc .gradient_tnc {
    background: linear-gradient(180deg, transparent, #44474d 80%);
    height: 4rem;
    height: calc(4rem + var(--safearea-bottom));
    width: 100%;
    position: fixed;
    bottom: 0;
    z-index: 0;
}

#overlay_tnc .gradient_tnc_2 {
    background: linear-gradient(180deg, #7c7f86, transparent 80%);
    height: 4rem;
    height: calc(59rem + var(--safearea-bottom));
    width: 100%;
    position: fixed;
    top: 0;
    z-index: -1;
    opacity: .5;
}

#overlay_tnc .btn_kembali_tnc {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding-bottom: 0rem;
    padding-bottom: calc(0rem + var(--safearea-bottom));
    background: #145a7e;
    background: linear-gradient(180deg, transparent 3.35rem, #145a7e 3.35rem);
}

#overlay_tnc .btn_kembali_tnc>img {
    width: 100%;
    height: 3.5rem;
}

#overlay_tnc .header_overlay {
    top: -100%;
    animation: pulling_up .5s ease 0s 1 forwards;
    /* width: 28rem; */
    width: 100%;
    padding-top: calc(0rem + var(--safearea-top));
    background: #293e6b;
    background: linear-gradient(180deg, #293e6b calc(0rem + var(--safearea-top)), transparent calc(0rem + var(--safearea-top)));
}

#overlay_tnc .overlay_dukungan_title {
    top: .5rem;
    font-size: 2.5rem;
    font-size: calc(2.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2.5 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1;
    /* transform: rotate(-14deg); */
    left: 1rem;
    position: absolute;
    color: #fff;
    font-family: text_bold;
    width: 90%;
    padding-top: calc(0rem + var(--safearea-top));
}

#overlay_tnc .overlay_dukungan_title_desc {
    font-size: 3.5rem;
    font-size: calc(3.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(3.5 * var(--f-scale)) / var(--zoom-variable)));
}

#overlay_tnc .text_btn_kembali {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: 'text_bold';
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    padding-bottom: 0rem;
    padding-bottom: calc(0rem + var(--safearea-bottom));
    width: 95%;
}

#overlay_tnc .text_btn_kembali img {
    height: 1.5rem;
    margin-right: .5rem;
    margin-bottom: .225rem;
    /* filter: brightness(0) saturate(100%) invert(9%) sepia(56%) saturate(3075%) hue-rotate(224deg) brightness(93%) contrast(111%); */
}

.tnc_bg {
    min-height: 50vh;
    min-height: 50dvh;
}

.bg_icon_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    width: 100%;
    height: 25rem;
    height: calc(25rem + env(safe-area-inset-top, 0px));
    object-fit: cover;
    object-position: bottom;
}

.btn_trigger {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translate(0, -50%);
}

.btn_trigger>img {
    transform: rotate(-90deg);
    height: 1.5rem;
    margin-top: .25rem;
    margin-left: .15rem;
}

.btn_trigger>img.active {
    transform: rotate(90deg);
    height: 1.5rem;
    margin-top: -0.15rem;
    margin-left: 0;
}

.hadiah_container {
    display: block;
    border-radius: 1rem;
    /* padding-top: 4rem; */
    /* margin-top: -3rem; */
    padding-left: 1rem;
    padding-bottom: .5rem;
    padding-right: 1rem;
}

/* ====================================================================================================================================== */
.label_sudah_vote {
    position: relative;
}

.match_glow_vote {
    position: absolute;
    top: 36%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26rem;
    opacity: 1;
    pointer-events: none;
}

#bola_floating_container_2,
#bola_floating_container {
    text-align: center;
    position: fixed;
    margin: 0 auto;
    left: calc(100% - 6.5rem);
    z-index: 1031;
    width: 4.1rem;
    top: 17%;
    width: fit-content;
}

#bola_floating_container_2 {
    left: calc(100% - 6rem);
    top: 13rem;
    top: calc(13rem + env(safe-area-inset-top, 0px));
}

#bola_floating_container_2.ui-widget-content,
#bola_floating_container.ui-widget-content {
    background-color: unset;
    border: none;
}

#bola_floating_container .bola_floating {
    width: 5.5rem;
    height: auto;
}

#bola_floating_container_2 .bola_floating {
    width: 5rem;
    height: auto;
}

#bola_floating_container_2 img,
#bola_floating_container img {
    pointer-events: none;
}

.bola_floating_text {
    position: absolute;
    color: #0800a6;
    font-family: 'text_bold';
    top: 82%;
    font-size: .8rem;
    font-size: calc(.8rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(.8 * var(--f-scale)) / var(--zoom-variable)));
    transform: translate(-50%, -50%);
    left: 50%;
    width: 6rem;
    line-height: 1;
    text-shadow:
        -1px -1px 0 #fff,
        -1px 0px 0 #fff,
        -1px 1px 0 #fff,
        0px -1px 0 #fff,
        0px 1px 0 #fff,
        1px -1px 0 #fff,
        1px 0px 0 #fff,
        1px 1px 0 #fff;
}

.vote_overlay_reward_fola {
    font-size: 22.5rem;
    font-size: calc(2.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(22.5 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_bold';
    color: #fff;
    line-height: 1;
    margin-top: -1rem;
}

.tambah_kesempatan_keterangan_fola {
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
    font-family: 'text_semibold';
    margin-top: 2rem;
}

/* ====================================================================================================================================== */

/* animasi */
.breathing {
    animation: breathing 1s linear .75s infinite normal;
}

@keyframes breathing {
    50% {
        transform: scale(1.25);
    }
}

.breathing_small {
    animation: breathing_small 1.5s linear 0s infinite normal;
}

@keyframes breathing_small {
    50% {
        transform: scale(1.1);
    }
}

.breathing_bola {
    animation: breathing_bola 2s linear 0s infinite normal;
}

@keyframes breathing_bola {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.1);
    }

    75% {
        transform: scale(.95);
    }

    100% {
        transform: scale(1);
    }
}

.modal-slide-up.fade .modal-dialog {
    transform: translateY(100vh);
    opacity: 0;
    transition: transform 0.4s ease-out, opacity 0.3s ease;
}

.modal-slide-up.show .modal-dialog {
    transform: translateY(0);
    opacity: 1;
}


.content_bottom {
    padding: 1rem;
    background: #ecf0f3;
    border-radius: 1.6rem 1.6rem 0 0;
    margin-top: -.75rem;
    position: relative;
    z-index: 2;
    overflow: auto;
    flex-grow: 1;
    padding-bottom: 6rem;
    padding-bottom: calc(6rem + var(--safearea-bottom));
}

.content_bottom.short {
    padding-bottom: 0rem;
    padding-bottom: calc(0rem + var(--safearea-bottom));
}

.page {
    min-height: 100vh;

    display: grid;

    grid-template-rows: 14rem 1fr;
    /* grid-template-rows:
        clamp(26rem, 50vh, 36rem)
        1fr; */
}

.card_daily_checkin {
    background: #ffffff;
    border: 2px solid #dfdfdf;
    padding: .5rem 1rem;
    margin-top: 1rem;
    border-radius: 1rem;
    color: #fff;
    position: relative;
}

.card_daily_checkin_header {
    font-size: 1.4rem;
    font-size: calc(1.4rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.4 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_semibold;
    color: #253741;
    border-bottom: 2px solid #f2f1f6;
}

.card_daily_checkin_small {
    text-align: center;
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_medium;
    color: #273945;
    margin-top: .25rem;
}

/* .day_daily.claimed {
    background-color: #24699b;
}

.day_daily.need_claim {
    background: url(../image/icon/DBL_lbl_hadiahAvailable.png);
    padding-bottom: 0;
    color: #5c0f00;
} */

.daily_checking_container {
    display: flex;
    padding: 0 0 0 0;
    justify-content: space-between;
    gap: .25rem;
}

.day_daily {
    width: 13%;
    text-align: center;
    border-radius: .6rem;
    padding-top: .25rem;
    padding-bottom: .5rem;
    height: fit-content;
    position: relative;
    height: 7.5rem;
}

.claim_bg {
    display: block;
    width: 110%;
    height: 7.5rem;
    margin-left: -5%;
}

.day_daily.need_claim {
    width: 17%;
    padding-bottom: 0;
    color: #5c0f00;
}

.day_text_4,
.day_text {
    position: absolute;
    top: 80%;
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_medium;
    color: #717a7e;
}

.claimed .day_text {
    color: #717a7e;
}

.need_claim .day_text {
    top: 62%;
    color: #975306;
}

.day_text_2 {
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    margin-bottom: .75rem;
    font-family: text_bold;
    color: white;
    left: 50%;
    top: 67%;
    transform: translate(-50%, -50%);
    text-shadow: 2px 0 #066083,
        -2px 0 #066083,
        0 2px #066083,
        0 -2px #066083,
        1px 1px #066083,
        -1px -1px #066083,
        1px -1px #066083,
        -1px 1px #066083;
}

.need_claim .day_text_2 {
    top: 51%;
    text-shadow:
        2px 0 #5a2805,
        -2px 0 #5a2805,
        0 2px #5a2805,
        0 -2px #5a2805,
        1px 1px #5a2805,
        -1px -1px #5a2805,
        1px -1px #5a2805,
        -1px 1px #5a2805;
}

.day_text_2>img {
    width: 1rem;
}

.daily_kado {
    position: relative;
    width: 100%;
    height: 100%;
}

.daily_yellow_box {
    position: relative;
    display: block;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.daily_checked {
    position: absolute;
    width: 3.5rem;
    top: 65%;
    left: 63%;
    transform: translate(-50%, -50%);
}

.claim_content {
    position: absolute;

    inset: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}

.day_daily .gift_image {
    width: 95%;
    transform: translateY(15px);
}

.need_claim .gift_image {
    position: absolute;
    width: 72%;
    left: 51%;
    top: 8%;
    transform: translateX(-50%);
}

.need_claim .day_text_3 {
    position: absolute;
    width: 80%;
    left: 50%;
    top: 80%;
    transform: translateX(-50%);
    color: white;
    font-family: text_bold;
}

.modal-sm-custom {
    max-width: 680px;
}

.daily-modal {
    border: none;
    border-radius: 2rem;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    width: 30rem;
    margin-left: auto;
    margin-right: auto;
    overflow: visible;
}

.daily-modal .modal-header {
    padding: 2.5rem 2rem .5rem;
    background: transparent;
}

.daily-modal .modal-body {
    padding: 1rem 2rem 2.5rem;
}

.modal_header_text {
    width: 100%;
    margin: 0;
    text-align: center;
    font-family: text_bold;
    line-height: 1.05;
    color: #223543;
}

.informasi_header {
    margin-top: 1rem;
    font-family: text_semibold;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1.3;
    color: #6a7782;
}

.btn-close-custom {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    border: none;
    background: none;
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    color: #223543;
    font-weight: bold;
    z-index: 10;
}

.reward_title {
    font-family: text_bold;
    font-size: 2.5rem;
    font-size: calc(2.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    margin-top: 1rem;
    line-height: 1;
    color: #223543;
}

.reward_subtitle {
    margin-top: .5rem;
    font-family: text_semibold;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    color: #6a7782;
}

.reward_container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin: 3rem 0;
}

.reward_amount {
    font-family: text_bold;
    font-size: 6rem;
    font-size: calc(6rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(6 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1;
    color: #344451;
}

.reward_ruby {
    width: 7rem;
}

.modal_reward .daily-modal .modal-body {
    padding: 3rem 2.5rem 3rem;
}

/* .modal_reward .btn_biru span{
    font-size:1.9rem;
} */


/* ====================================================== Dropdown =============================================================== */
.select_region {
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    padding: 1rem;
    color: #fff;
    z-index: 1;
}

.body_pilih_tim .select_region {
    position: static;
    transform: unset;
    width: 100%;
    padding: 0;
}

.region_selected {
    position: absolute;
    /* top: 45%; */
    /* left: 50%; */
    /* transform: translate(-50%, -50%); */
    font-size: 2rem;
    font-size: calc(2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(2 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_medium;
}

.region_selected>.img_alert {
    left: 97%;
    z-index: 5;
}

.body_pilih_tim .region_selected {
    position: static;
    transform: unset;
    width: 100%;
}

/* The container must be positioned relative: */
.region_selected {
    position: relative;
    /* font-family: Arial; */
}

.region_selected select {
    display: none;
    /*hide original SELECT element: */
}

/* style the items (options), including the selected item: */
.select-selected {
    color: #253741;
    cursor: pointer;
    background: url(../image/icon/DBL_dropdown.png);
    background-size: 100% 100%;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: text_semibold;
    line-height: 1;
    /* padding-bottom: .5rem; */
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    position: relative;
    z-index: 3;
}

.select-items .dropdown_item {
    position: relative;
    color: #2b4e5e;
    padding: .25rem;
    border: 1px solid transparent;
    /* border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent; */
    cursor: pointer;
    font-size: 1.35rem;
    font-size: calc(1.2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_semibold';
    line-height: 1.2;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Style items (options): */
.select-items {
    position: absolute;
    background: linear-gradient(180deg, #40add8e6, #a6edf2e6);
    top: 65%;
    left: 0;
    right: 0;
    z-index: 2;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    max-height: 10rem;
    overflow: auto;
    padding-top: 1.75rem;
    padding-bottom: .5rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    height: 9.3rem;
}

/* Hide the items when the select box is closed: */
.select-hide {
    display: none;
}

.select-items .dropdown_item:hover,
.same-as-selected {
    /* background-color: #01aed6E6; */
    border-radius: 2rem;
    /* width: 91%; */
    margin-left: auto;
    margin-right: auto;
}

.bg_team_pilih {
    margin-top: -0.5rem;
}

.select-items .img_alert {
    width: 2rem;
    top: 50%;
    position: absolute !important;
    left: 86%;
    transition: left 0.5s ease;
    width: 1rem !important;
    height: 1rem !important;
    background-color: #ff3c36;
    border-radius: 50%;
    transform: translate(0, -50%);
}

.os-scrollbar {
    --os-viewport-percent: 0.7203;
    --os-scroll-direction: 0;
    --os-size: 0.5rem;
    --os-track-bg: #248fb9;
    --os-handle-bg: #fff;
    --os-padding-axis: .6rem;
    /* --os-track-border-radius: 0; */
    --os-padding-perpendicular: 0px;
    --os-padding-axis: 15px;
    margin-right: .15rem;
    margin-top: .35rem;
}

/* ========================================================================================================= */
/* navbar */
.navbar {
    position: fixed;
    bottom: 0;
    /* max-height: 10vh; */
    /* max-height: 10dvh; */
    width: 100vw;
    width: 100dvw;
    padding-top: .5rem;
    justify-content: center;
    padding-bottom: calc(.5rem + var(--safearea-bottom));

    background-color: #fff;
    color: #8d8d8d;
    /* border-top: 2px solid #999999; */
    z-index: 2;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.3);
}

/* .highlight {
    border-radius: 1rem;
    padding-top: .5rem;
} */

.navbar img {
    height: 2rem;
}

.navbar_icon_container {
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.highlight .navbar_icon_container {
    background: #def5fb;
    border-radius: 1rem;
    padding: .5rem;
}

.navbar img.img_mabar {
    height: 2rem;
    margin-top: .25rem;
    margin-bottom: .25rem;
}

.navbar>div>div {
    padding-left: .25rem;
    padding-right: .25rem;
}

.icon_navbar {
    filter: brightness(0) saturate(100%) invert(63%) sepia(0%) saturate(7%) hue-rotate(195deg) brightness(87%) contrast(82%);
}

.highlight .icon_navbar {
    filter: brightness(0) saturate(100%) invert(54%) sepia(94%) saturate(3835%) hue-rotate(163deg) brightness(105%) contrast(90%);
}

.text_navbar {
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_semibold;
}

.highlight .text_navbar {
    font-family: text_bold;
    color: #5f5f5f;
}

/* ========================================================================================================= */
/* header */
.header_bg {
    background: linear-gradient(180deg, #034ea1, #0b65b1);
    padding-top: 1rem;
    padding-top: calc(1rem + var(--safearea-top));
}

.header_text {
    text-align: center;
    color: #ddeff5;
    font-size: 2rem;
    line-height: 2rem;
    padding-bottom: 1rem;
    font-family: text_bold;
    height: 5rem;
}

.header_icon {
    height: 3.5rem;
    /* margin-top: 1rem; */
}

.header_line {
    margin-top: -2.5rem;
    width: 30rem;
    height: .2rem;
    opacity: .5;
}

/* ========================================================================================================= */
/* sekolah terfav */
.last_vote_container {
    background: linear-gradient(180deg, #0b65b1, #1581c2);
    padding-top: 1rem;
    padding-bottom: 3rem;
}

.last_vote_label {
    background: linear-gradient(180deg, #fbf5b9, #efaf4d);
    border: 2px solid #fdfac6;
    margin-left: 1rem;
    margin-right: 1rem;
    padding: .5rem 1rem;
    border-radius: .8rem;
    color: #b23808;
    font-family: text_semibold;
    display: flex;
    margin-top: 1rem;
    margin-bottom: .5rem;
}

.last_vote_text {
    width: 82%;
    font-size: 1.15rem;
    font-size: calc(1.15rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.15 * var(--f-scale)) / var(--zoom-variable)));
    line-height: 1.1;
}

.last_vote_tnc_container {
    width: 18%;
    display: flex;
    justify-content: end;
    align-items: center;
}

.last_vote_tnc_container .btn_tnc {
    position: relative;
    transform: unset;
    top: 0;
    left: 0;
}

.last_vote_tnc_container .btn_tnc span {
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    margin-top: -.1rem;
    margin-left: .1rem;
}

.search_header {
    text-align: center;
    font-size: 1.75rem;
    font-size: calc(1.75rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.75 * var(--f-scale)) / var(--zoom-variable)));
    color: #253741;
    font-family: text_bold;
}

#input_nama,
#search {
    width: 100%;
    background: linear-gradient(#d2dae0, #d2dae0);
    border: 0 !important;
    height: 3.5rem;
    padding-right: 3rem;
    font-size: 1.25rem;
    color: #253741;
    border-radius: 1rem;
    font-family: 'text_semibold';
    box-shadow: unset !important;
    border-radius: 1.6rem;
    padding-left: 1.5rem;
}

input#input_nama::placeholder,
input#search::placeholder {
    color: #93a0a9;
    opacity: 1;
    /* Firefox kadang membuat placeholder lebih transparan */
}

.img_search {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    right: 1rem;
    width: 1.5rem;
}

.list_party_container {
    margin-top: 1rem;
}

.label_tim {
    display: flex;
    border-bottom: 2px solid #caccce;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
}

.label_tim img {
    width: 4rem;
    height: 100%;
}

.nama_tim_container {
    flex-grow: 1;
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: center;
    margin-left: 1rem;
}

.nama_tim_search {
    color: #253741;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_bold;
    line-height: 1.2;
}

.nama_kota_search {
    color: #717a7e;
    font-size: 1rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_regular;
    line-height: 1.2;
}

.label_pilih_vote_desc {
    color: #253741;
    font-family: text_bold;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    margin-bottom: 2rem;
    line-height: 1.1;
    text-align: center;
}

.label_pilih_vote_footer {
    color: #253741;
    font-family: text_semibold;
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
    margin-bottom: 1rem;
    line-height: 1.1;
    text-align: center;
}

.podium_container {
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 6rem;
    position: relative;
    margin-bottom: 1rem;
    overflow: hidden;
}

.glow_podium {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    opacity: .3;
    width: 32rem;
}

.nama_tim_podium_container {
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* vertikal tengah */
}

.rank_3 .nama_tim_podium_container {
    height: 4rem;
}

.nama_tim_podium {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-align: center;
    line-height: 1.5;
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    padding-left: .75rem;
    padding-right: .75rem;
    font-family: text_semibold;
}

/* .nama_tim_podium {
    line-height: 1.5;
    height: 4.5rem;
    display: -webkit-box;
    box-orient: vertical;
    -webkit-box-orient: vertical;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    padding-left: .75rem;
    padding-right: .75rem;
    font-family: text_semibold;
} */

.value_tim_podium {
    height: 2rem;
    background: #4aa1e4;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 1rem;
    margin-top: .5rem;
    margin-left: 1rem;
    margin-right: 1rem;
}

.rank_1 .value_tim_podium {
    height: 2.25rem;
    margin-left: .5rem;
    margin-right: .5rem;
    font-size: 1.35rem;
    font-size: calc(1.35rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.35 * var(--f-scale)) / var(--zoom-variable)));
}

.rank_1 {
    position: absolute;
    top: 0.5rem;
    width: 29%;
    left: 50%;
    transform: translate(-50%, 0);
}

.podium_rank_container_1 {
    position: relative;
    text-align: center;
    height: 7.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.podium_rank_container_1.voted {
    transform: translateY(-.25rem);
}

.img_rank_1 {
    max-width: 7rem;
    max-height: 7rem;
}

.badge_rank_1 {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    width: 3rem;
}

.rank_1_name_container {
    height: 11rem;
    text-align: center;
    /* padding-top: 2.75rem; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rank_1_name_container.voted {
    padding-top: 2rem;
}

.rank_1 .nama_tim_podium_container {
    height: 7rem;
}

.rank_1 .voted .nama_tim_podium_container {
    height: 5rem;
}


.glow_podium_1 {
    position: absolute;
    width: 110%;
    bottom: -.5rem;
    left: -5%;
}

.rank_2 {
    position: absolute;
    top: 3.5rem;
    width: 29%;
}

.podium_rank_container_2 {
    position: relative;
    text-align: center;
    height: 7.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.podium_rank_container_2.voted {
    transform: translateY(-2rem);
}

.rank_2 .nama_tim_podium_container {
    height: 4.5rem;
}

.img_rank_2 {
    max-width: 6.5rem;
    max-height: 6.5rem;
}

.badge_rank_2 {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    width: 3rem;
}

.rank_2_name_container {
    height: 8rem;
    text-align: center;
    padding-top: .25rem;
}

.glow_podium_2 {
    position: absolute;
    width: 100%;
    top: 4.5rem;
    left: 0%;
}

.rank_3 {
    position: absolute;
    top: 4.5rem;
    width: 29%;
    right: 2rem;
}

.img_rank_3 {
    max-width: 6rem;
    max-height: 6rem;
}

.podium_rank_container_3 {
    position: relative;
    text-align: center;
    height: 7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.badge_rank_3 {
    position: absolute;
    bottom: .5rem;
    left: .5rem;
    width: 3rem;
}

.rank_3_name_container {
    height: 8rem;
    text-align: center;
    padding-top: .25rem;
}

.glow_podium_3 {
    position: absolute;
    width: 100%;
    top: 3.5rem;
    left: 0%;
}

.podium_rank_container_3.voted {
    transform: translateY(-2.5rem);
}

.glow_podium_text {
    position: absolute;
    color: #0f711c;
    font-size: 1rem;
    font-size: calc(1rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1 * var(--f-scale)) / var(--zoom-variable)));
    top: 7.5%;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    line-height: 1;
    font-family: 'text_bold';
}

.row_perteam {
    background: linear-gradient(90deg, #97d9e9, #0b72d1 10rem);
    display: flex;
    border-radius: 1rem;
    border: 1px solid #fff;
    margin-bottom: 1rem;
    height: 3.5rem;
}

.rank_container {
    margin: .5rem;
    background: #014087;
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #9adce8;
    margin-top: auto;
    margin-bottom: auto;
}

.logo_tim {
    width: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: .15rem;
    padding-bottom: .15rem;
}

.logo_tim img {
    max-height: 100%;
}

.detail_tim {
    width: fit-content;
    flex-grow: 1;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: .5rem;
    font-family: text_bold;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    color: #fff;
}

.vote {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 1rem;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    color: #85d4ed;
}

.row_perteam.putih {
    background: linear-gradient(90deg, #fff, #fff 10rem);
    border: 1px solid #d1e0e5;
    color: #243740;
}

.putih .rank_container {
    background: #f3f3f3;
    color: #80888b;
}

.putih .vote {
    color: #6f767e;
}

.putih .detail_tim {
    color: #25383f;
}

.row_perteam.hijau {
    background: linear-gradient(90deg, #d3ff9d, #d3ff9d 10rem);
    border: 1px solid #d1e0e5;
    color: #199800;
    flex-direction: column;
    height: unset;
}

.row_perteam_content {
    display: flex;
    height: 3.5rem;
}

.hijau .rank_container {
    background: #9ad94c;
    color: #199700;
}

.hijau .vote {
    color: #6f767e;
}

.hijau .detail_tim {
    color: #25383f;
}

.text_team_terfav {
    text-align: center;
    font-size: 1.25rem;
    font-size: calc(1.25rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.25 * var(--f-scale)) / var(--zoom-variable)));
    font-family: text_bold;
}

.btn_terfav_container {
    padding-left: 3rem;
    padding-right: 3rem;
    padding-bottom: 1rem;
}

.dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    height: 2rem;
    margin-bottom: 1rem;
}

.dots span {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: #97d9e9;
}

.dots span.active {
    width: .75rem;
    height: .75rem;
    background: #97d9e9;
}

.label_big_5 {
    background: linear-gradient(180deg, #dcf2f6, #9cdbea);
    border: 2px solid #f4fcfc;
    padding: 1rem;
    border-radius: 1rem;
}

.label_big_title {
    color: #253741;
    font-size: 1.5rem;
    font-size: calc(1.5rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.5 * var(--f-scale)) / var(--zoom-variable)));
    font-family: 'text_semibold';
    text-align: center;
}

.label_big_content {
    color: #465b66;
    font-family: text_semibold;
    line-height: 1.2;
    margin-bottom: 1rem;
    font-size: 1.2rem;
    font-size: calc(1.2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.2 * var(--f-scale)) / var(--zoom-variable)));
    text-align: center;
}

.sekolah_terdaftar {
    font-size: 1.2rem;
    font-size: calc(1.2rem * var(--f-scale)) !important;
    zoom: min(1, calc(calc(1.2 * var(--f-scale)) / var(--zoom-variable)));
    color: #fefefe;
    text-align: center;
    font-family: text_regular;
    margin-top: 1rem;
    margin-bottom: 1rem;
}