*{
    box-sizing:border-box;
}

html,
body{
    margin:0!important;
    padding:0!important;
    width:100%!important;
    min-height:100%!important;
    background:#000!important;
}

#react-public-chart-root{
    display:block!important;
    visibility:visible!important;
    width:100%!important;
    min-height:100vh!important;
    background:#000!important;
}

.sg-page-wrapper{
    width:100%!important;
    margin:0!important;
    padding:3px 4px 24px!important;
    background:#000!important;
}

.sg-title,
.sg-subtitle{
    display:none!important;
}


/* ================= RESULT ================= */

.sg-result-box{
    width:100%!important;
    margin:0 auto 7px!important;
    padding:8px 5px!important;
    background:#fff600!important;
    border:4px double #ff2700!important;
    text-align:center!important;
}

.sg-market-name{
    color:#153cff!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:clamp(24px,3vw,38px)!important;
    line-height:1!important;
    font-weight:900!important;
    font-style:italic!important;
    text-transform:uppercase!important;
}

.sg-result-value{
    margin-top:5px!important;
    color:#000!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:clamp(24px,3vw,36px)!important;
    line-height:1!important;
    font-weight:900!important;
    font-style:italic!important;
}


/* ================= BUTTON ================= */

.sg-nav-bar{
    margin:6px auto 8px!important;
    text-align:center!important;
}

.sg-btn{
    display:inline-block!important;
    min-height:34px!important;
    padding:6px 11px!important;
    background:#fff!important;
    color:#d90000!important;
    border:3px solid #ffe500!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:15px!important;
    line-height:1!important;
    font-weight:900!important;
    font-style:italic!important;
    text-decoration:none!important;
}


/* ================= TABLE COMMON ================= */

.sg-table-wrapper{
    width:100%!important;
    margin:0 auto!important;
    padding:0!important;
    background:#fff!important;
    border:4px solid #7628ff!important;
}

.sg-chart-table{
    width:100%!important;
    margin:0!important;
    background:#fff!important;
    border-collapse:collapse!important;
    table-layout:fixed!important;
}

.sg-chart-table th,
.sg-chart-table td{
    border:1px solid #777!important;
    text-align:center!important;
    vertical-align:middle!important;
}

.sg-date-col{
    color:#000!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-weight:900!important;
    font-style:italic!important;
    text-shadow:1px 1px 0 #ffd900!important;
}


/* =================================================
   JODI DESKTOP
================================================= */

#react-public-chart-root[data-chart-type="jodi"]
.sg-table-wrapper{
    max-width:1080px!important;
}

#react-public-chart-root[data-chart-type="jodi"]
.sg-chart-table thead th{
    height:44px!important;
    padding:5px 2px!important;
    background:#681017!important;
    color:#fff!important;
    border-color:#7628ff!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:16px!important;
    font-weight:900!important;
    font-style:italic!important;
}

#react-public-chart-root[data-chart-type="jodi"]
.sg-chart-table td{
    height:66px!important;
    background:#fff!important;
    border-color:#7628ff!important;
}

#react-public-chart-root[data-chart-type="jodi"]
.sg-date-col{
    width:145px!important;
    font-size:14px!important;
    line-height:1.1!important;
}

#react-public-chart-root[data-chart-type="jodi"]
.sg-jodi-cell{
    color:#000!important;
    background:#fff!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:clamp(26px,2.3vw,36px)!important;
    line-height:1!important;
    font-weight:900!important;
    font-style:italic!important;
    letter-spacing:-1px!important;
}

#react-public-chart-root[data-chart-type="jodi"]
.sg-jodi-cell.cell-red{
    color:red!important;
}


/* =================================================
   PANEL DESKTOP
================================================= */

#react-public-chart-root[data-chart-type="panel"]
.sg-panel-wrapper{
    max-width:860px!important;
    overflow:hidden!important;
}

#react-public-chart-root[data-chart-type="panel"]
.sg-chart-table thead{
    display:none!important;
}

#react-public-chart-root[data-chart-type="panel"]
.sg-chart-table td{
    height:82px!important;
    padding:0!important;
    background:#fff!important;
}

#react-public-chart-root[data-chart-type="panel"]
.sg-date-col{
    width:140px!important;
    font-size:14px!important;
    line-height:1.1!important;
}

.panel-cell-flex{
    width:100%!important;
    min-height:76px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    padding:0 3px!important;
    background:#fff!important;
}

.pana-col{
    display:flex!important;
    flex-direction:column!important;
    flex:0 0 12px!important;
    width:12px!important;
    min-width:12px!important;
    color:#000!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:11px!important;
    line-height:1!important;
    font-weight:900!important;
    font-style:italic!important;
}

.pana-col > div{
    width:12px!important;
    height:13px!important;
    line-height:13px!important;
}

.p-jodi-val{
    flex:1 1 auto!important;
    min-width:0!important;
    color:#000!important;
    background:#fff!important;
    font-family:Georgia,"Times New Roman",serif!important;
    font-size:30px!important;
    line-height:1!important;
    font-weight:900!important;
    font-style:italic!important;
    letter-spacing:-1px!important;
}

.p-jodi-val.cell-red,
.cell-red{
    color:red!important;
}


/* ================= FOOTER ================= */

.sg-footer{
    margin-top:14px!important;
    padding-bottom:14px!important;
    background:#000!important;
    color:#888!important;
    text-align:center!important;
}


/* =================================================
   MOBILE
================================================= */

@media(max-width:768px){

    html,
    body{
        overflow-x:hidden!important;
        touch-action:pan-y pinch-zoom!important;
    }

    .sg-page-wrapper{
        width:100%!important;
        max-width:100%!important;
        padding:2px 2px 18px!important;
    }

    .sg-result-box{
        margin-bottom:5px!important;
        padding:6px 3px!important;
        border-width:2px!important;
    }

    .sg-market-name{
        width:100%!important;
        max-width:100%!important;
        padding:0 2px!important;
        font-size:clamp(17px,5.2vw,24px)!important;
        line-height:1.05!important;
        letter-spacing:-.4px!important;
        white-space:normal!important;
        overflow:visible!important;
        text-overflow:clip!important;
    }

    .sg-result-value{
        margin-top:3px!important;
        font-size:clamp(20px,6vw,27px)!important;
    }

    .sg-nav-bar{
        margin:4px auto 6px!important;
    }

    .sg-btn{
        min-height:32px!important;
        padding:5px 8px!important;
        font-size:14px!important;
    }

    .sg-table-wrapper{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        border-width:2px!important;
        overflow:hidden!important;
    }

    .sg-chart-table{
        width:100%!important;
        min-width:0!important;
        max-width:100%!important;
        table-layout:fixed!important;
    }


    /* MOBILE JODI */

    #react-public-chart-root[data-chart-type="jodi"]
    .sg-chart-table thead th{
        height:30px!important;
        padding:2px 0!important;
        font-size:clamp(7.5px,2.2vw,10px)!important;
    }

    #react-public-chart-root[data-chart-type="jodi"]
    .sg-chart-table td{
        height:48px!important;
        padding:0!important;
    }

    #react-public-chart-root[data-chart-type="jodi"]
    .days-7 .sg-date-col{
        width:19%!important;
    }

    #react-public-chart-root[data-chart-type="jodi"]
    .days-6 .sg-date-col{
        width:21%!important;
    }

    #react-public-chart-root[data-chart-type="jodi"]
    .days-5 .sg-date-col{
        width:23%!important;
    }

    #react-public-chart-root[data-chart-type="jodi"]
    .sg-date-col{
        font-size:clamp(7px,2.2vw,9.5px)!important;
        line-height:1.05!important;
        white-space:nowrap!important;
    }

    #react-public-chart-root[data-chart-type="jodi"]
    .sg-jodi-cell{
        padding:0!important;
        font-size:clamp(14px,4.2vw,19px)!important;
        font-weight:900!important;
    }

    #react-public-chart-root[data-chart-type="jodi"]
    .days-6 .sg-jodi-cell{
        font-size:clamp(15px,4.6vw,21px)!important;
    }

    #react-public-chart-root[data-chart-type="jodi"]
    .days-5 .sg-jodi-cell{
        font-size:clamp(16px,5vw,23px)!important;
    }


    /* MOBILE PANEL */

    #react-public-chart-root[data-chart-type="panel"]
    .sg-panel-wrapper{
        width:100%!important;
        max-width:100%!important;
        min-width:0!important;
        margin:3px auto 0!important;
        overflow:hidden!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .sg-chart-table td{
        height:54px!important;
        min-width:0!important;
        padding:0!important;
        overflow:hidden!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .days-7 .sg-date-col{
        width:19%!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .days-6 .sg-date-col{
        width:21%!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .days-5 .sg-date-col{
        width:23%!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .sg-date-col{
        padding:1px 0!important;
        font-size:clamp(7.5px,2.35vw,10px)!important;
        line-height:1.07!important;
        white-space:nowrap!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .panel-cell-flex{
        width:100%!important;
        min-width:0!important;
        min-height:52px!important;
        gap:1px!important;
        padding:0 1px!important;
        overflow:hidden!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .pana-col{
        flex:0 0 6px!important;
        width:6px!important;
        min-width:6px!important;
        max-width:6px!important;
        font-size:clamp(7px,1.95vw,9px)!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .pana-col > div{
        width:6px!important;
        height:10px!important;
        line-height:10px!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .p-jodi-val{
        flex:1 1 auto!important;
        min-width:0!important;
        padding:0!important;
        font-size:clamp(16px,4.55vw,20px)!important;
        line-height:1!important;
        font-weight:900!important;
        letter-spacing:-1.1px!important;
        -webkit-text-stroke:.2px currentColor!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .days-6 .p-jodi-val{
        font-size:clamp(17px,5vw,22px)!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .days-5 .p-jodi-val{
        font-size:clamp(18px,5.6vw,24px)!important;
    }
}


@media(max-width:359px){

    .sg-market-name{
        font-size:16px!important;
    }

    #react-public-chart-root[data-chart-type="jodi"]
    .sg-jodi-cell{
        font-size:13px!important;
    }

    #react-public-chart-root[data-chart-type="panel"]
    .p-jodi-val{
        font-size:14px!important;
    }
}



/* DPR_CHART_NAV_CLEAN_START */

/*
========================================================
 ALL DPRATAN JODI + PANEL CHARTS

 TOP:
   Go To Bottom ONLY

 BOTTOM:
   Back To Top ONLY
========================================================
*/


/*
TOP navigation immediately follows result box.
Hide everything except Go To Bottom.
*/

#react-public-chart-root
.sg-result-box + .sg-nav-bar
.sg-btn:not([data-dpr-action="bottom"]){

    display:none !important;
}


/*
Make sure Go To Bottom remains visible.
*/

#react-public-chart-root
.sg-result-box + .sg-nav-bar
.sg-btn[data-dpr-action="bottom"]{

    display:inline-block !important;
}


/*
BOTTOM navigation immediately follows table wrapper.
Hide everything except Back To Top.
*/

#react-public-chart-root
.sg-table-wrapper + .sg-nav-bar
.sg-btn:not([data-dpr-action="top"]){

    display:none !important;
}


/*
Make sure Back To Top remains visible.
*/

#react-public-chart-root
.sg-table-wrapper + .sg-nav-bar
.sg-btn[data-dpr-action="top"]{

    display:inline-block !important;
}


/*
Keep both nav rows centered and clean.
*/

#react-public-chart-root
.sg-result-box + .sg-nav-bar,

#react-public-chart-root
.sg-table-wrapper + .sg-nav-bar{

    width:100% !important;

    text-align:center !important;

    justify-content:center !important;
}


/*
Mobile same rule.
*/

@media screen and (max-width:768px){

    #react-public-chart-root
    .sg-result-box + .sg-nav-bar
    .sg-btn:not([data-dpr-action="bottom"]){

        display:none !important;
    }


    #react-public-chart-root
    .sg-table-wrapper + .sg-nav-bar
    .sg-btn:not([data-dpr-action="top"]){

        display:none !important;
    }


    #react-public-chart-root
    .sg-result-box + .sg-nav-bar
    .sg-btn[data-dpr-action="bottom"],

    #react-public-chart-root
    .sg-table-wrapper + .sg-nav-bar
    .sg-btn[data-dpr-action="top"]{

        display:inline-block !important;
    }

}

/* DPR_CHART_NAV_CLEAN_END */



/* DPR_TOP_RESULT_DISPLAY_V1_START */

#react-public-chart-root
.sg-result-box
.sg-result-value{
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    margin:5px auto 0 !important;
    padding:2px 6px 5px !important;
    color:#000 !important;
    font-size:clamp(28px,3vw,38px) !important;
    line-height:1.08 !important;
    font-weight:900 !important;
    text-align:center !important;
    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    text-indent:0 !important;
    transform:none !important;
    opacity:1 !important;
    visibility:visible !important;
}

@media (max-width:768px){
    #react-public-chart-root
    .sg-result-box
    .sg-result-value{
        font-size:clamp(26px,7vw,34px) !important;
    }
}

/* DPR_TOP_RESULT_DISPLAY_V1_END */

/* =====================================================
   DPR REACT V6 — SINGLE FRONTEND OWNER
   ===================================================== */

html,
body{
    margin:0!important;
    padding:0!important;
    background:#000!important;
    overflow-anchor:none!important;
}

#react-public-chart-root{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    overflow-anchor:none!important;
}

#react-public-chart-root .sg-page-wrapper{
    width:100%!important;
    margin:0!important;
    padding:2px 2px 18px!important;
    box-sizing:border-box!important;
}

#react-public-chart-root .sg-title,
#react-public-chart-root .sg-subtitle{
    display:none!important;
}

#react-public-chart-root .sg-result-box{
    width:100%!important;
    max-width:100%!important;
    min-height:72px!important;
    box-sizing:border-box!important;
    margin:0 0 2px!important;
    padding:6px 4px!important;
    overflow:visible!important;
}

#react-public-chart-root .sg-market-name{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    line-height:1.05!important;
    white-space:normal!important;
    overflow:visible!important;
}

#react-public-chart-root .sg-result-value{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    margin:3px auto 0!important;
    padding:1px 5px 3px!important;
    box-sizing:border-box!important;

    font-size:clamp(28px,3.2vw,40px)!important;
    line-height:1.05!important;
    font-weight:900!important;

    white-space:nowrap!important;
    word-break:normal!important;
    overflow:visible!important;
    text-overflow:clip!important;

    text-align:center!important;
}

#react-public-chart-root .sg-nav-bar{
    width:100%!important;
    margin:1px auto 4px!important;
    padding:0!important;
    display:flex!important;
    justify-content:center!important;
    align-items:center!important;
    gap:0!important;
}

#react-public-chart-root .sg-nav-bar .sg-btn{
    flex:none!important;
    margin:0!important;
}

#react-public-chart-root .sg-table-wrapper{
    margin-top:0!important;
    padding-top:0!important;
}

#react-public-chart-root .sg-bottom-nav{
    margin:7px auto 3px!important;
}

.dpr-react-loading{
    min-height:120px;
}

@media(max-width:768px){

    #react-public-chart-root .sg-page-wrapper{
        padding:1px 2px 14px!important;
    }

    #react-public-chart-root .sg-result-box{
        min-height:64px!important;
        padding:5px 3px!important;
        margin-bottom:2px!important;
    }

    #react-public-chart-root .sg-result-value{
        font-size:clamp(26px,7.4vw,34px)!important;
        margin-top:2px!important;
    }

    #react-public-chart-root .sg-nav-bar{
        margin:1px auto 3px!important;
    }
}

/* DPR_REACT_V6_STABLE_BOOT_V2 */

#react-public-chart-root:empty::before{
    content:"Loading chart...";
    display:flex;
    width:100%;
    min-height:70vh;
    box-sizing:border-box;
    align-items:flex-start;
    justify-content:center;
    padding-top:70px;
    background:#000;
    font-size:17px;
    font-weight:700;
    text-align:center;
}

#react-public-chart-root .dpr-react-boot{
    display:flex;
    width:100%;
    min-height:70vh;
    box-sizing:border-box;
    align-items:flex-start;
    justify-content:center;
    padding-top:70px;
    background:#000;
    font-size:17px;
    font-weight:700;
    text-align:center;
}

#react-public-chart-root button.sg-btn{
    font:inherit;
    cursor:pointer;
}

@media(max-width:768px){

    #react-public-chart-root:empty::before,
    #react-public-chart-root .dpr-react-boot{
        min-height:72vh;
        padding-top:55px;
        font-size:16px;
    }
}