body
{
   background-color: #000000;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}
.wb-theme-header
{
   background-color: #333333;
   background-image: none;
   border: 1px solid #A3A3A3;
   border-radius: 0px;
   color: #EEEEEE;
   --background-color: rgba(51,51,51,1.00);
   --border-color: #A3A3A3;
   --border-width: 1px;
   --color: #EEEEEE;
}
.wb-theme-content
{
   background-color: #F9F9F9;
   background-image: none;
   border: 1px solid #CCCCCC;
   border-radius: 0px;
   color: #222222;
   --background-color: rgba(249,249,249,1.00);
   --border-color: #CCCCCC;
   --border-width: 1px;
   --color: #222222;
   --icon-color: #222222;
   --colorize: invert(11%) sepia(6%) saturate(11%) hue-rotate(5deg) brightness(92%) contrast(91%);
}
.wb-theme-button, .wb-theme-static
{
   background-color: #111111;
   background-image: none;
   border: 1px solid #777777;
   border-radius: 0px;
   color: #E3E3E3;
   --background-color: rgba(17,17,17,1.00);
   --border-color: #777777;
   --border-width: 1px;
   --color: #E3E3E3;
}
.wb-theme-button:hover
{
   background-color: #1C1C1C;
   background-image: none;
   border: 1px solid #000000;
   border-radius: 0px;
   color: #FFFFFF;
   --background-color: rgba(28,28,28,1.00);
   --border-color: #000000;
   --border-width: 1px;
   --color: #FFFFFF;
}
.wb-theme-button.active, .wb-theme-button:active, .active > .wb-theme-button
{
   background-color: #FFFFFF;
   background-image: none;
   border: 1px solid #CCCCCC;
   border-radius: 0px;
   color: #222222;
   --background-color: rgba(255,255,255,1.00);
   --border-color: #CCCCCC;
   --border-width: 1px;
   --color: #222222;
}
#wb_LayoutGrid1
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid1
{
   box-sizing: border-box;
   padding: 0;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid1 > .row
{
   margin-right: 0;
   margin-left: 0;
}
#LayoutGrid1 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 0px;
   padding-left: 0px;
   position: relative;
}
#LayoutGrid1 > .row > .col-1
{
   float: left;
}
#LayoutGrid1 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 100%;
   text-align: center;
}
#LayoutGrid1:before,
#LayoutGrid1:after,
#LayoutGrid1 .row:before,
#LayoutGrid1 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid1:after,
#LayoutGrid1 .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#LayoutGrid1 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_Text1 div
{
   text-align: center;
}
#wb_Text1
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#Html1
{
   display: inline-block;
   width: 100%;
   height: 1350px;
   overflow: auto;
   z-index: 1;
}
@media only screen and (max-width: 768px)
{
body
{
   background-color: #000000;
   background-image: none;
}
#MasterPage1
{
   left: 0px;
   top: 0px;
   width: 768px;
   height: 1725px;
   visibility: visible;
   display: inline;
}
#wb_LayoutGrid1
{
   visibility: visible;
   display: table;
   background-color: #000000;
   background-image: none;
   background-image: none;
}
#wb_LayoutGrid1
{
   height: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}
#LayoutGrid1
{
   height: auto;
   padding: 0;
}
#LayoutGrid1 .row
{
   margin-right: 0px;
   margin-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   padding-right: 0px;
   padding-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   display: block;
   width: 100%;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   text-align: left;
}
#wb_Text1
{
   width: 100%;
   visibility: visible;
   display: block;
   margin: 0;
}
#wb_Text1
{
   margin: 0;
   padding: 0;
}
#Html1
{
   visibility: visible;
   display: block;
}
}
@media only screen and (max-width: 480px)
{
body
{
   background-color: #000000;
   background-image: none;
}
#MasterPage1
{
   left: 0px;
   top: 0px;
   width: 490px;
   height: 1849px;
   visibility: visible;
   display: inline;
}
#wb_LayoutGrid1
{
   visibility: visible;
   display: table;
   background-color: #000000;
   background-image: none;
   background-image: none;
}
#wb_LayoutGrid1
{
   height: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}
#LayoutGrid1
{
   height: auto;
   padding: 0;
}
#LayoutGrid1 .row
{
   margin-right: 0px;
   margin-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   padding-right: 0px;
   padding-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   display: block;
   width: 100%;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   text-align: left;
}
#wb_Text1
{
   width: 100%;
   visibility: visible;
   display: block;
   margin: 0;
}
#wb_Text1
{
   margin: 0;
   padding: 0;
}
#Html1
{
   visibility: visible;
   display: block;
}
}
@media only screen and (max-width: 320px)
{
body
{
   background-color: #000000;
   background-image: none;
}
#MasterPage1
{
   left: 0px;
   top: 0px;
   width: 320px;
   height: 1725px;
   visibility: visible;
   display: inline;
}
#wb_LayoutGrid1
{
   visibility: visible;
   display: table;
   background-color: #000000;
   background-image: none;
   background-image: none;
}
#wb_LayoutGrid1
{
   height: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}
#LayoutGrid1
{
   height: auto;
   padding: 0;
}
#LayoutGrid1 .row
{
   margin-right: 0px;
   margin-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   padding-right: 0px;
   padding-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   display: block;
   width: 100%;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   text-align: left;
}
#wb_Text1
{
   width: 100%;
   visibility: visible;
   display: block;
   margin: 0;
}
#wb_Text1
{
   margin: 0;
   padding: 0;
}
#Html1
{
   visibility: visible;
   display: block;
}
}
/* Forces the website to never exceed the screen width and hides horizontal overflow */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* 1. AGGRESSIVE MOBILE OVERFLOW LOCK */
html, body, #wb_Workspace { 
    overflow-x: hidden !important; 
    max-width: 100vw !important; 
    margin: 0 !important; 
}

/* 2. FORCE THE 4D WIDGETS TO SQUISH ON MOBILE */
@media (max-width: 480px) {
    .f4dk-top-bar { flex-wrap: wrap !important; }
    .fourd-grid-container, .f4dk-board-grid { 
        grid-template-columns: 1fr !important; 
        min-width: 0 !important;
        width: 100% !important;
    }
    table, .mg-matrix-table, .sg-shares-table, .plain-data-table { 
        table-layout: fixed !important; 
        width: 100% !important; 
        word-break: break-all !important; 
    }
    .f4dk-widget-header { padding: 8px 5px !important; }
    .toto-balls-row { gap: 2px !important; }
    .mg-box { width: 17px !important; height: 17px !important; font-size: 10px !important; }
}

/* 3. MASTER PAGE STRETCH FIX */
@media (max-width: 1024px) {
    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    #wb_Layer1, #Layer1, #Layer1_Container, 
    #wb_ContentPlaceHolder1, 
    #wb_LayoutGrid1, #LayoutGrid1 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ========================================================================= */
/* 4. SLEEK MOBILE HAMBURGER ICON AND CANVAS MENU STYLING                    */
/* ========================================================================= */
#wb_header { position: relative !important; z-index: 99999 !important; }
#wb_MegaMenu1 { position: relative !important; z-index: 100000 !important; }

/* Hide hamburger on desktop by default */
#MegaMenu1-hamburger { display: none; }

@media (max-width: 1024px) {
   /* Hamburger Icon */
   #MegaMenu1-hamburger { 
       display: flex !important; 
       flex-direction: column !important;
       justify-content: space-around !important;
       width: 35px !important;
       height: 28px !important;
       cursor: pointer !important; 
       pointer-events: auto !important; 
       position: absolute !important; 
       right: 20px !important;
       top: 15px !important; 
       z-index: 100001 !important; 
   }
   
   #MegaMenu1-hamburger .line {
       display: block !important;
       width: 100% !important;
       height: 3px !important;
       background-color: #fac814 !important; 
       border-radius: 3px !important;
   }

   /* Canvas Menu Hidden State */
   #wb_MegaMenu1:not(.open) #MegaMenu1-nav { 
       display: block !important; 
       visibility: hidden !important; 
       opacity: 0 !important; 
       transform: translateX(100%) !important; 
       transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
   }
   
   /* Canvas Menu Open State */
   #wb_MegaMenu1.open #MegaMenu1-nav { 
       display: block !important; 
       visibility: visible !important; 
       opacity: 1 !important; 
       position: fixed !important; 
       top: 0 !important; 
       right: 0 !important; 
       left: auto !important; 
       width: 285px !important; 
       height: 100vh !important; 
       background: #0f0f0f !important; /* Deep dark background */
       z-index: 200000 !important; 
       box-shadow: -8px 0 25px rgba(0,0,0,0.9) !important; 
       padding: 25px !important; 
       box-sizing: border-box !important; 
       transform: translateX(0) !important; 
       transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important; 
   }
   
   /* The Close 'X' Button */
   #MegaMenu1-close { 
       text-align: right !important; 
       margin-bottom: 25px !important; 
       width: 100% !important; 
   }
   #MegaMenu1-close a { 
       color: #fac814 !important; 
       font-size: 40px !important; 
       line-height: 1 !important;
       text-decoration: none !important; 
       font-weight: bold !important; 
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
   }
   
   /* Clean, modern navigation links (strips WYSIWYG button defaults) */
   ul#MegaMenu1 {
       display: flex !important;
       flex-direction: column !important;
       gap: 5px !important;
       padding: 0 !important;
       margin: 0 !important;
       list-style: none !important;
   }
   
   ul#MegaMenu1 li {
       background: transparent !important;
       border: none !important;
       margin: 0 !important;
       padding: 0 !important;
   }
   
   ul#MegaMenu1 li a,
   ul#MegaMenu1 li a.wb-theme-button,
   ul#MegaMenu1 li a.button {
       color: #ffffff !important;
       font-size: 15px !important;
       font-weight: bold !important;
       text-transform: uppercase !important;
       text-decoration: none !important;
       display: block !important;
       background: transparent !important; /* Strips the ugly white boxes */
       border: none !important; 
       border-bottom: 1px solid #222222 !important; /* Clean separator */
       padding: 15px 10px !important;
       box-shadow: none !important;
       text-align: left !important;
       letter-spacing: 0.05em !important;
       transition: color 0.2s, background 0.2s !important;
   }
   
   ul#MegaMenu1 li a:hover,
   ul#MegaMenu1 li a:active {
       color: #fac814 !important;
       background: rgba(255, 255, 255, 0.03) !important; /* Subtle highlight on tap */
   }
}
/* ========================================================================= */
/* HEADER CLEANUP: Hides any accidental text boxes placed in the header layer*/
/* ========================================================================= */
#Layer1_Container > div:not(#wb_Image2):not(#wb_MegaMenu1) {
    display: none !important;
}
    .f4dk-wrapper { width: 100%; background: #000000; font-family: Arial, Helvetica, sans-serif; color: #ffffff; box-sizing: border-box; padding: 10px 20px; }
    .f4dk-top-bar { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 15px; }
    .f4dk-title-text { font-size: 18px; font-weight: bold; color: #ffffff; }
    .f4dk-nav-btn { background: #2d2d2d; color: #ffffff; border: 1px solid #555555; padding: 4px 12px; font-size: 13px; cursor: pointer; border-radius: 3px; }
    .f4dk-nav-btn:hover { background: #444444; }
    .f4dk-nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
    .f4dk-date-badge { background: #222222; border: 1px solid #444444; color: #fac814; padding: 3px 10px; font-size: 13px; font-weight: bold; border-radius: 3px; }
    
    /* UPDATED: Fluid Responsive Grid */
    .f4dk-board-grid { 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); 
        justify-content: center; 
        gap: 20px; 
        max-width: 1200px; 
        margin: 0 auto; 
        transition: opacity 0.15s ease-in-out; 
    }
    
    /* UPDATED: 16:9 Aspect Ratio with Stretch Capabilities */
    .f4dk-widget { 
        background: #111111; 
        border: 1px solid #333333; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        aspect-ratio: 16 / 9; /* Desktop Aspect Ratio */
        min-height: max-content; /* Failsafe to protect massive Toto data */
    }
    
    .f4dk-widget-header { padding: 8px 10px; font-size: 13px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
    .f4dk-meta-row { background: #1a1a1a; padding: 5px 8px; font-size: 11px; color: #aaaaaa; display: flex; justify-content: space-between; border-bottom: 1px solid #2a2a2a; }
    
    .mg-matrix-table { width: 100%; border-collapse: collapse; flex: 1; } /* flex: 1 allows table to stretch */
    .mg-matrix-table th { background: #222222; color: #fac814; font-size: 11px; padding: 5px; border: 1px solid #2a2a2a; text-transform: uppercase; }
    .mg-matrix-table td { padding: 8px 4px; border: 1px solid #222222; text-align: center; }
    .mg-digit-row { display: flex; align-items: center; justify-content: center; gap: 2px; flex-wrap: wrap; }
    .mg-box { width: 19px; height: 19px; border: 1px solid #555555; background: #000000; color: #ffffff; font-size: 11px; font-weight: bold; display: inline-flex; align-items: center; justify-content: center; margin: 1px 0; }
    .mg-plus { color: #fac814; font-weight: bold; font-size: 11px; margin: 0 1px; }

    /* UPDATED: Allow sections to evenly stretch to fill 16:9 height */
    .toto-section { 
        border-bottom: 1px solid #333333; 
        padding: 10px 8px; 
        display: flex; 
        flex-direction: column; 
        justify-content: center;
        flex: 1; 
    }
    .toto-section:last-child { border-bottom: none; }
    .toto-game-title { font-size: 12px; font-weight: bold; color: #fac814; text-align: center; text-transform: uppercase; margin-bottom: 6px; }
    .toto-balls-row { display: flex; justify-content: center; gap: 5px; margin-bottom: 6px; flex-wrap: wrap; align-items: center; }
    .toto-num { background: #ffffff; color: #000000; font-size: 13px; font-weight: bold; padding: 2px 6px; border-radius: 2px; min-width: 16px; text-align: center; }
    .toto-jackpot-line { font-size: 13px; font-weight: bold; color: #ff3344; text-align: center; word-break: break-all; margin-top: 4px; }

    .plain-data-table { width: 100%; border-collapse: collapse; margin-top: 5px; }
    .plain-data-table td { border: 1px solid #2a2a2a; padding: 5px 8px; font-size: 12px; font-weight: bold; }
    .plain-lbl { color: #aaaaaa; width: 20%; text-align: left; }
    .plain-val { color: #ffffff; text-align: left; }
    
    .sg-shares-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 5px; flex: 1; }
    .sg-shares-table th { background: #222222; color: #aaaaaa; padding: 5px; border: 1px solid #2d2d2d; }
    .sg-shares-table td { padding: 5px; border: 1px solid #2d2d2d; text-align: center; font-weight: bold; }
    .f4dk-loader { grid-column: 1 / -1; text-align: center; color: #fac814; font-size: 18px; padding: 100px 0; font-weight: bold; }

    /* RESPONSIVE BREAKPOINTS */
    @media (max-width: 1060px) {
        .f4dk-board-grid { grid-template-columns: 1fr; max-width: 500px; }
        .f4dk-widget { 
            aspect-ratio: 9 / 16; /* Mobile Aspect Ratio */
        }
    }