:root {
    --radius: 8px;
    --border: 4px;
    --height: 48px;
    --speed: 0.25s;
}

@font-face {
    font-family: MINIAPP_Telkomsel_Batik_Sans_Regular;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/TelkomselBatikSans-Regular.woff");
}

@font-face {
    font-family: MINIAPP_Telkomsel_Batik_Sans_Bold;
    src: url("https://www.telkomsel.com/themes/custom/telkomsel/assets/css/fonts/TelkomselBatikSans-Bold.woff");
    /* src: url("C:\\Users\\user\\Downloads\\TelkomselBatikSans-Bold.woff"); */
}

.ftfc-telkomsel-batik {
    font-family: MINIAPP_Telkomsel_Batik_Sans_Bold;
}

.ftfc-poppins {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

.ftfc-poppins-100 {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
}

.ftfc-poppins-200 {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
}

.ftfc-poppins-300 {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
}

.ftfc-poppins-400 {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
}

.ftfc-poppins-500 {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}

.ftfc-poppins-600 {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
}

.ftfc-poppins-700 {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
}

.ftfc-poppins-800 {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
}

.ftfc-poppins-900 {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
}

.ftfc-bebas-neue {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
}

.ftfc-bebas-neue-100 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 100;
}

.ftfc-bebas-neue-200 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 200;
}

.ftfc-bebas-neue-300 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 300;
}

.ftfc-bebas-neue-400 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
}

.ftfc-bebas-neue-500 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 500;
}

.ftfc-bebas-neue-600 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 600;
}

.ftfc-bebas-neue-700 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 700;
}

.ftfc-bebas-neue-800 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 800;
}

.ftfc-bebas-neue-900 {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 900;
}

.ftsz-5-px {
    font-size: 0.313rem !important;
}

.ftsz-6-px {
    font-size: 0.375rem !important;
}

.ftsz-7-px {
    font-size: 0.438rem !important;
}

.ftsz-8-px {
    font-size: 0.5rem !important;
}

.ftsz-9-px {
    font-size: 0.563rem !important;
}

.ftsz-10-px {
    font-size: 0.625rem !important;
}

.ftsz-11-px {
    font-size: 0.688rem !important;
}

.ftsz-12-px {
    font-size: 0.75rem !important;
}

.ftsz-13-px {
    font-size: 0.813rem !important;
}

.ftsz-14-px {
    font-size: 0.875rem !important;
}

.ftsz-15-px {
    font-size: 0.938rem !important;
}

.ftsz-16-px {
    font-size: 1rem !important;
}

.ftsz-17-px {
    font-size: 1.063rem !important;
}

.ftsz-18-px {
    font-size: 1.125rem !important;
}

.ftsz-19-px {
    font-size: 1.188rem !important;
}

.ftsz-20-px {
    font-size: 1.25rem !important;
}

.ftsz-21-px {
    font-size: 1.313rem !important;
}

.ftsz-22-px {
    font-size: 1.375rem !important;
}

.ftsz-23-px {
    font-size: 1.438rem !important;
}

.ftsz-24-px {
    font-size: 1.5rem !important;
}

.ftsz-25-px {
    font-size: 1.563rem !important;
}

.ftsz-26-px {
    font-size: 1.625rem !important;
}

.ftsz-28-px {
    font-size: 1.75rem !important;
}

.ftsz-30-px {
    font-size: 1.875rem !important;
}

.ftsz-32-px {
    font-size: 2rem !important;
}

.ftsz-34-px {
    font-size: 2.125rem !important;
}

.ftsz-36-px {
    font-size: 2.25rem !important;
}

.ftsz-38-px {
    font-size: 2.475rem !important;
}

.ftsz-40-px {
    font-size: 2.6rem !important;
}

.ftsz-42-px {
    font-size: 2.725rem !important;
}

.ftsz-44-px {
    font-size: 2.85rem !important;
}

.text-gold {
    color: #F1DBB9;
}

/* Background untuk warna dasar */
body {
    background:
        /* radial-gradient(ellipse 200px 100px at 50% 70px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(ellipse 200px 100px at 50% 300px, #FFF, transparent),
        radial-gradient(ellipse 450px 250px at 50% 300px, #FDA22B, transparent),
        radial-gradient(circle 200px at bottom right, #0050AE, transparent), */
        rgba(59, 26, 69, 1) /* warna dasar bisa solid, atau gradient seperti di atas */;
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
}

.container {
    background-image: url('https://assets.telkomsel.com/public/asset/fullhtml/img/gallery/telkomsel/ilmupedia-next-talent-main-bg.png'); /* url/file gambar BG */
    background-size: contain;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: top;
    max-width: 540px;
}

.additional-bg-miniapp {
    position: absolute;
    z-index: -1;
    top: 0px;
    height: 100%;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0, 0.6) 0%, rgba(0,0,0,0) 10%);
    /* background-image: url('https://assets.telkomsel.com/public/asset/fullhtml/img/gallery/telkomsel/light-top-blackpink.png'); */
    background-position-x: center;
    background-repeat: no-repeat;
}

.additional-bg-bottom-miniapp {
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
    background: left/50px url("https://assets.telkomsel.com/public/asset/fullhtml/img/gallery/telkomsel/ornament-left-blackpink.png"), right/50px url("https://assets.telkomsel.com/public/asset/fullhtml/img/gallery/telkomsel/ornament-right-blackpink.png");
    background-position-y: bottom;
    background-repeat: no-repeat;
    filter: opacity(0.8);
}

.text-gradient-color {
    text-shadow: none;
    -webkit-text-stroke: initial;
    /* Filter untuk stroke (garis pinggir) */
    filter: 
        drop-shadow(1px 1px 0.15px #435789)
        drop-shadow(1px 0px 0.15px #435789)
        drop-shadow(1px -1px 0.15px #435789)
        drop-shadow(0px 1px 0.15px #435789)
        drop-shadow(0px 0px 0.15px #435789)
        drop-shadow(0px -1px 0.15px #435789)
        drop-shadow(-1px 1px 0.15px #435789)
        drop-shadow(-1px 0px 0.15px #435789)
        drop-shadow(-1px -1px 0.15px #435789);
    /* background untuk warna bagian dalam font */
    background: 
        linear-gradient(146.31deg, #fff 14.97%, #C3E1F7 30.8%, #fff 37.54%, #fff 47.31%, #C3E1F7 51.68%, #fff 56.4%, #fff 65.83%, #C3E1F7 69.87%, #fff 85.03%),
        linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
}

.text-shadow-1 {
    text-shadow: 1px 2px 3px rgba(160, 160, 160, 0.3);
}

.text-shadow-2 {
    text-shadow: 1px 2px 3px rgba(160, 160, 160, 0.5);
}

.text-shadow-3 {
    text-shadow: 1px 2px 3px rgba(160, 160, 160, 0.8);
}

.miniapp-container {
    width: 100%;
    max-width: 375px;
    min-height: 100vh;
    margin: 0px auto;
    padding: 20px 0px 10px;
}

.miniapp-btn-back {
    position: sticky;
    top: 10px;
    left: 10px;
    width: 24px;
    height: 24px;
    padding: 0px !important;
    box-shadow: 1px 1px rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.miniapp-btn-info-program {
    margin: 15px auto;
    border-radius: 20px;
}

.miniapp-title {
    color: white;
    -webkit-text-stroke: 0.1rem #EC1C1C;
}

/* COUNTDOWN */
.miniapp-countdown-container {
    display: flex;
    width: 100%;
    justify-content: center;
    margin: 0px auto;
}

.miniapp-countdown-box {
    border-radius: 6px;
    padding: 5px 15px;
    line-height: 0.9;
    background: linear-gradient(180deg,rgba(231, 143, 165, 0.9) 50%, rgba(155, 74, 95, 0.9) 50%);
    /* border: rgba(255,255, 255, 0.5) 1px solid; */
    margin: 2px;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
}

.miniapp-text-countdown {
    text-align: center;
    margin: 0px;
    /* color: rgba(163, 163, 163, 1); */
    color: white;
    border-radius: 10px;
    padding: 0px;
}

.miniapp-digit {
    color: white;
}

/* /COUNTDOWN */

/* COUPON */
.miniapp-coupon {
    text-align: center;
    width: 100%;
    border-radius: 5rem;
    overflow: hidden;
    margin: auto;
    justify-content: center;
    filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.5));
    align-items: center;
    border: rgba(255, 255, 255, 0.7) 1px solid;
    background:
        linear-gradient(115deg, rgba(44, 44, 44, 0.35) 0%, rgba(24, 28, 33, 0.85) 50%, rgba(44, 44, 44, 0.35) 100%);
}

.miniapp-coupon-container {
    vertical-align: middle;
}

.btn-info-program {
    border-radius: 8px;
    background: linear-gradient(#FFB03A, #EC1C1C);
    border: white 1px solid;
    color: white;
    font-weight: 500;
}

.text-half-circle {
    translate: -50%, -50%;
    font-family: MINIAPP_Telkomsel_Batik_Sans_Bold;
    /* transform:
                translate(-50%, -50%)
                rotate(calc(360deg / var(15) * var(1)))
                translateY(calc(var(90, 5) * -1ch)); */
}

.miniapp-border-gradient {
    width: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, white, transparent);
    margin: 5px auto;
}

.btn.btn-outline-light.text-white:hover {
    color: black !important;
}

.miniapp-btn-menu-ppp {
    /* background: linear-gradient(95deg, rgba(243, 1, 36, 1) 0%, rgba(250, 93, 93, 1) 50%, rgba(243, 1, 36, 1) 100%); */
    /* background: linear-gradient(98.26deg, #92354E 0%, #D08195 50.02%, #92354E 100.03%); */
    background: linear-gradient(98.26deg, #FF0000 0%, #FF4B00 50.02%, #FF0000 100.03%);
    border-radius: 2.5rem;
    rotate: -2deg;
    /* box-shadow: 3px 3px rgba(115, 0, 18, 1); */
    box-shadow: 4px 4px 0.5px 0px rgba(111, 27, 50, 1);
}

.miniapp-btn-menu {
    margin: auto;
    position: relative;
    /* padding: 30% 2em; */
    box-sizing: border-box;

    color: #FFF;
    background: linear-gradient(98.26deg, #FF0000 0%, #FF4B00 50.02%, #FF0000 100.03%);
    background-clip: padding-box; /* !importanté */
    border: solid 2px transparent; /* !importanté */
    border-radius: 2.5rem;
}

.miniapp-btn-menu::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    margin: -2px; /* !importanté */
    border-radius: inherit; /* !importanté */
    background: linear-gradient(to right, red, rgb(236, 198, 127), red);
}

.miniapp-has-coupons,
.miniapp-no-coupons {
    display: none;
}

.miniapp-tab {
    display: grid;
    grid-auto-flow: column;
    background: rgba(239, 241, 244, 1);
    border-radius: 5rem;
    grid-auto-columns: 1fr;
    position: relative;
    border: var(--border) solid rgb(239, 241, 244, 0.1);
    /* border: 4px solid #001A41; */
}

.miniapp-tab {
    --ease: linear(0, 0.1641 3.52%, 0.311 7.18%,
            0.4413 10.99%, 0.5553 14.96%,
            0.6539 19.12%, 0.738 23.5%,
            0.8086 28.15%, 0.8662 33.12%,
            0.9078 37.92%, 0.9405 43.12%,
            0.965 48.84%, 0.9821 55.28%,
            0.992 61.97%, 0.9976 70.09%, 1);
}

.miniapp-tab>input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.miniapp-tab:has(:checked:nth-of-type(1)) {
    --active: 0;
}

.miniapp-tab:has(:checked:nth-of-type(2)) {
    --active: 1;
}

.miniapp-tab:has(:checked:nth-of-type(3)) {
    --active: 2;
}

.miniapp-tab:has(:checked:nth-of-type(4)) {
    --active: 3;
}

.miniapp-tab :checked+label {
    --highlight: 1;
}

.miniapp-tab:has(input:nth-of-type(2)) {
    --count: 2;
}

.miniapp-tab:has(input:nth-of-type(3)) {
    --count: 3;
}

.miniapp-tab:has(input:nth-of-type(4)) {
    --count: 4;
}

.miniapp-tab label {
    padding: 0 clamp(0.5rem, 2vw + 0.25rem, 2rem);
    cursor: pointer;
    text-align: center;
    height: 100%;
    display: grid;
    border-radius: calc(5rem - var(--border));
    place-items: center;
    /* color: #001A41; */
    color: rgba(24, 28, 33, 1);
    transition: background, color;
    transition-duration: 0.25s;
    transition-timing-function: var(--ease, ease);
}

.miniapp-tab-winner {
    display: grid;
    grid-auto-flow: column;
    background: rgb(239, 241, 244, 0.4);
    border-radius: 5rem;
    grid-auto-columns: 1fr;
    position: relative;
    border: var(--border) solid rgb(239, 241, 244, 0.2);
    /* border: 4px solid #001A41; */
}

.miniapp-tab-winner {
    --ease: linear(0, 0.1641 3.52%, 0.311 7.18%,
            0.4413 10.99%, 0.5553 14.96%,
            0.6539 19.12%, 0.738 23.5%,
            0.8086 28.15%, 0.8662 33.12%,
            0.9078 37.92%, 0.9405 43.12%,
            0.965 48.84%, 0.9821 55.28%,
            0.992 61.97%, 0.9976 70.09%, 1);
}

.miniapp-tab-winner>input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.miniapp-tab-winner:has(:checked:nth-of-type(1)) {
    --active: 0;
}

.miniapp-tab-winner:has(:checked:nth-of-type(2)) {
    --active: 1;
}

.miniapp-tab-winner:has(:checked:nth-of-type(3)) {
    --active: 2;
}

.miniapp-tab-winner:has(:checked:nth-of-type(4)) {
    --active: 3;
}

.miniapp-tab-winner :checked+label {
    --highlight: 1;
}

.miniapp-tab-winner:has(input:nth-of-type(2)) {
    --count: 2;
}

.miniapp-tab-winner:has(input:nth-of-type(3)) {
    --count: 3;
}

.miniapp-tab-winner:has(input:nth-of-type(4)) {
    --count: 4;
}

.miniapp-tab-winner label {
    padding: 0 clamp(0.5rem, 2vw + 0.25rem, 2rem);
    cursor: pointer;
    text-align: center;
    height: 100%;
    display: grid;
    border-radius: calc(5rem - var(--border));
    place-items: center;
    color: #ffffff;
    transition: background, color;
    transition-duration: 0.25s;
    transition-timing-function: var(--ease, ease);
}

.miniapp-tab-winner input:not(:checked)+label:hover {
    --highlight: 0.35;
    background: white;
    color: rgba(0, 26, 65, 1);
}

.miniapp-tab-winner input:checked+label {
    --highlight: 0.35;
    background: white;
    color: rgba(0, 26, 65, 1);
}

.miniapp-tab-winner::after {
    pointer-events: none;
    content: "";
    width: calc(100% / var(--count));
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    color: black;
    z-index: -1;
    border-radius: calc(5rem - var(--border));
    /* mix-blend-mode: exclusion; */
    translate: calc(var(--active, 0) * 100%) 0;
    transition: translate, outline-color;
    transition-duration: var(--speed);
    transition-timing-function: var(--ease, ease);
    /* outline: 2px solid transparent; */
}

.miniapp-tab-winner:has(:focus-visible)::after {
    outline-color: red;
}

input:not(:checked)+label:hover {
    --highlight: 0.35;
    /* background: #001A41; */
    background: rgba(0, 26, 65, 1);
    color: white;
}

input:checked+label {
    --highlight: 0.35;
    /* background: #001A41; */
    background: rgba(0, 26, 65, 1);
    color: white;
}

.miniapp-tab::after {
    pointer-events: none;
    content: "";
    width: calc(100% / var(--count));
    height: 100%;
    background: rgba(0, 26, 65);
    position: absolute;
    /* color: black; */
    z-index: -1;
    border-radius: calc(5rem - var(--border));
    /* mix-blend-mode: exclusion; */
    translate: calc(var(--active, 0) * 100%) 0;
    transition: translate, outline-color;
    transition-duration: var(--speed);
    transition-timing-function: var(--ease, ease);
    outline: 2px solid transparent;
}

.miniapp-tab:has(:focus-visible)::after {
    outline-color: red;
}

.miniapp-info-detail p, .miniapp-tnc-detail p {
    /* margin: 0px; */
}

.miniapp-info-detail ol, .miniapp-tnc-detail ol, .miniapp-info-detail ul, .miniapp-tnc-detail ul {
    padding-inline-start: 1rem !important;
}

.table-leaderboard tr>td:nth-child(1), .table-leaderboard-racing tr>td:nth-child(1), .table-racing-winner tr>td:nth-child(1) {
    color: var(--bs-secondary-color)!important;
    width: 46px;
    text-align: center;
    align-content: center;
    background-color: transparent !important;
}

.table-leaderboard tr>td:nth-child(2), .table-leaderboard-racing tr>td:nth-child(2), .table-racing-winner tr>td:nth-child(2) {
    font-weight: 600;
    align-content: center;
    background-color: transparent !important;
}

.table-leaderboard tr>td:last-child, .table-leaderboard-racing tr>td:last-child, .table-racing-winner tr>td:last-child {
    text-align: right;
    align-content: center;
    background-color: transparent !important;
}

.miniapp-container-btn-pagination {
    position: fixed;
    bottom: 15px;
    left: 0px;
    width: 100%;
}

/* Overlay */
.miniapp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: flex-end; /* Modal di bawah */
    z-index: 999;
}

/* Modal Box */
.miniapp-modal {
    background: white;
    width: 100%;
    max-height: 90vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    bottom: 0px;
    padding: 16px;
    /* margin-bottom: 20px; */
    box-sizing: border-box;
    animation: slideUp 0.3s ease;
    position: fixed;
}

/* Animasi muncul dari bawah */
@keyframes slideUp {
    from {
    transform: translateY(100%);
    }
    to {
    transform: translateY(0);
    }
}

.miniapp-modal-header {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.miniapp-modal-body {
    max-height: 70vh;
    min-height: 30vh;
    margin-bottom: 10px;
    overflow-y: auto;
}

.miniapp-modal-footer {
    text-align: center;
}

.miniapp-close-btn {
    text-align: center;
    color: #fff;
    background-color: #888;
    border-radius: 1rem;
    font-size: 20px;
    line-height: 20px;
    width: 24px;
    height: 24px;
    padding: 2px;
    cursor: pointer;
    z-index: 999;
}

.miniapp-page-select-value {
    margin: 2px;
    padding: 10px;
    display: block;
}

input[type="radio"]:checked + .miniapp-page-select-value{
    background-color: rgb(227, 228, 230);
    color: black;
}

.miniapp-btn-page-select{
    width: 90%;
    background: rgba(0, 26, 65, 1);
}

.rank-badge {
    position: relative;
    background-color: #a5022b;
    padding: 5px;
    color: white;
}

.rank-badge:before {
    position: absolute;
    content: '';
}

.rank-badge:before {
    top: 2px;  /* border width */
    left: 2px;  /* border width */
    height: calc(100% - 4px);  /* 100% - (2 * border width) */
    width: calc(100% - 4px);  /* 100% - (2 * border width) */
    background: linear-gradient(120deg, #ffffff 0%, #f71c53 50%, #ffffff 100%);
}

.rank-badge, .rank-badge:before {
    clip-path: polygon(50% 0%, 90% 25%, 90% 75%, 50% 100%, 10% 75%, 10% 25%);
}

.header-video-winner {
    /* background: linear-gradient(180deg, #E78FA5 0%, #FFFCFD 116.91%); */
    background: linear-gradient(180deg, #C5E8FF 0%, #FFFCFD 116.91%);
    border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))) calc(var(--bs-border-radius) - (var(--bs-border-width))) 0px 0px;
    padding: 1rem;
}

.card {
    --bs-border-radius: 1.2rem !important;
}

.card-body {
    padding: 0.7rem !important;
    border-radius: 1rem !important;
}

.card-leaderboard-winner {
    /* background: linear-gradient(123.96deg, #FF547F -27.5%, #FDDAE3 81.72%); */
    background: linear-gradient(90deg, #FDA22B 0%, rgba(253, 162, 43, 0) 59.94%), #FFDA6A;
}

.miniapp-inline-hr {
    display: inline-block;
    width: 30%; /* Adjust width as needed */
    height: 1px; /* Adjust height/thickness as needed */
    background-color: rgba(133, 90, 90, 1); /* Color of the line */
    vertical-align: middle; /* Align with surrounding text */
    margin: 0 5px; /* Add some spacing around the line */
}

.form-control {
    font-size: inherit;
}

.animate-pulse {
    animation: PulseAnimate 2s linear 0s infinite normal forwards;
}

.hover-pointer {
    cursor: pointer;
}

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

    50% {
        transform: scale(1.05);
    }

    70% {
        transform: scale(1);
    }

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

.swiper-pagination-bullet-active {
    background-color: rgba(0, 26, 65, 1);
    width: 2rem;
    border-radius: 1rem;
}

.card-item-home {
    min-height: 170px;
    height: 100%;
    border: 1px solid rgba(0, 26, 65, 1);
    background: linear-gradient(120.63deg, rgba(44, 44, 44, 0.5) -15.7%, rgba(14, 79, 118, 0.8) 50.8%, rgba(44, 44, 44, 0.5) 118.6%);
}

.card-cta-ribbon-top-left {
    position: absolute;
    top: -25px;
    left: -13px;
    color: #fff;
     font-size: 18px;
    text-align: center;
    --s: 0.5rem; /* triangle size */  
    --r: 0.5rem; /* the radius */  
    padding: 0.2rem 0.5rem;
    border: var(--s) solid #0000;
    border-radius: calc(var(--r) + var(--s));
    border-bottom-left-radius: 0;
    background: border-box rgba(255, 0, 37, 1); /* the coloration */  
    -webkit-mask: 
        radial-gradient(100% 100% at 100% 100%,#0000 99%,#000 102%) var(--s) 100%/var(--s) var(--s) no-repeat border-box, 
        linear-gradient(#000 0 0) padding-box;
}

.card-cta-simple {
    height: 100%;
    border: 1px solid rgba(0, 26, 65, 1);
    background: linear-gradient(120.63deg, rgba(44, 44, 44, 0.5) -15.7%, rgba(14, 79, 118, 0.8) 50.8%, rgba(44, 44, 44, 0.5) 118.6%);
}

.bg-gradient-gold-top-to-bottom {
    background: 
        linear-gradient(180deg, rgb(250, 177, 5) 0%, rgba(80, 41, 92, 1) 70%) !important;
}

.bg-gradient-green-purple-left-to-right {
    background: linear-gradient(90deg, #006C89 0%, #A94471 100%);
}

.card-rounded-border-top {
    border-top-left-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))) !important;
    border-top-right-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))) !important;
}

.card-rounded-border-bottom {
    border-bottom-left-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))) !important;
    border-bottom-right-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))) !important;
}

.card-rounded-border {
    border-radius: calc(var(--bs-border-radius) - (var(--bs-border-width))) !important;
}

.card-no-border {
    border: 0 !important;
}

.sticky-scroll {
    position:sticky;
    top:10px;
    z-index: 99;
}

.miniapp-page-title {
    text-shadow:
        1px 3px 0px rgba(247, 7, 63, 1),
        2px 2px 0px rgba(247, 7, 63, 1),
        3px 1px 0px rgba(247, 7, 63, 1),
        -1px 3px 0px rgba(247, 7, 63, 1),
        -2px 2px 0px rgba(247, 7, 63, 1),
        -3px 1px 0px rgba(247, 7, 63, 1),
        1px -3px 0px rgba(247, 7, 63, 1),
        2px -2px 0px rgba(247, 7, 63, 1),
        3px -1px 0px rgba(247, 7, 63, 1),
        -1px -3px 0px rgba(247, 7, 63, 1),
        -2px -2px 0px rgba(247, 7, 63, 1),
        -3px -1px 0px rgba(247, 7, 63, 1);
}