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(56%) saturate(0%) hue-rotate(68deg) brightness(103%) contrast(96%);
}
.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: left;
}
#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
{
   color: #FFFFFF;
   font-family: Arial;
   font-weight: 400;
   font-size: 27px;
   line-height: 31px;
}
#wb_Text1 p, #wb_Text1 ul
{
   margin: 0;
   padding: 0;
}
#wb_Text1
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#Html1
{
   display: inline-block;
   width: 100%;
   height: 1500px;
   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;
   background-color: transparent;
   background-image: none;
   border: 0px solid #DEE2E6;
}
#wb_Text1
{
   font-size: 21px;
   margin: 0;
   padding: 0;
   text-align: center;
   line-height: 24px;
}
#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: 480px;
   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;
   background-color: transparent;
   background-image: none;
   border: 0px solid #DEE2E6;
}
#wb_Text1
{
   font-size: 27px;
   margin: 0;
   padding: 0;
   text-align: center;
   line-height: 30px;
}
#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;
   background-color: transparent;
   background-image: none;
   border: 0px solid #DEE2E6;
}
#wb_Text1
{
   font-size: 21px;
   margin: 0;
   padding: 0;
   text-align: center;
   line-height: 24px;
}
#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;
}
    /* WYSIWYG LEFT-SHIFT OVERRIDE: Stops the builder software from throwing components off-screen */
    @media (max-width: 768px) {
        body, html { max-width: 100vw !important; overflow-x: hidden !important; }
        div[id^="wb_Html"], div[id^="Html"] {
            left: 0 !important;
            margin-left: 0 !important;
            transform: none !important;
            width: 100% !important;
            box-sizing: border-box !important;
        }
    }

    .f4dk-hn-container {
        width: 100%;
        background: #000000;
        font-family: Arial, Helvetica, sans-serif;
        color: #ffffff;
        box-sizing: border-box;
        padding: 10px 20px;
    }
    .f4dk-hn-top-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        margin-bottom: 25px;
        text-align: center;
    }
    .f4dk-hn-title {
        font-size: 22px;
        font-weight: bold;
        letter-spacing: 0.02em;
    }
    .f4dk-hn-subtitle {
        font-size: 12px;
        color: #888888;
        text-transform: uppercase;
        letter-spacing: 0.05em;
    }
    .f4dk-hn-tabs {
        display: flex;
        gap: 12px;
        margin-top: 5px;
    }
    .f4dk-hn-tab-btn {
        background: #1a1a1a;
        color: #ffffff;
        border: 1px solid #444444;
        padding: 8px 20px;
        font-size: 13px;
        font-weight: bold;
        text-transform: uppercase;
        cursor: pointer;
        border-radius: 4px;
        transition: all 0.15s ease-in-out;
    }
    .f4dk-hn-tab-btn.active, .f4dk-hn-tab-btn:hover {
        background: #fac814;
        color: #000000;
        border-color: #fac814;
    }

    /* Column Grid Displays */
    .f4dk-hn-grid-by-side {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
        gap: 20px;
        max-width: 1120px;
        margin: 0 auto;
        width: 100%;
    }
    .f4dk-hn-grid-all-side {
        display: none; 
        max-width: 900px;
        margin: 0 auto;
        width: 100%;
    }

    .f4dk-hn-widget {
        background: #111111;
        border: 1px solid #333333;
        border-radius: 4px;
        overflow: hidden;
        height: max-content;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
    }
    .f4dk-hn-widget-header {
        padding: 10px 12px;
        font-size: 14px;
        font-weight: bold;
        text-align: center;
    }
    .f4dk-hn-meta-brand {
        background: #1a1a1a;
        padding: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        border-bottom: 1px solid #2a2a2a;
    }
    .f4dk-hn-meta-brand img {
        height: 22px;
        object-fit: contain;
    }

    /* FIXED: Prevent wide tables from exploding card boundaries on mobile viewports */
    .f4dk-table-scroller {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .f4dk-hn-table {
        width: 100%;
        border-collapse: collapse;
    }
    .f4dk-hn-table th {
        background: #222222;
        color: #aaaaaa;
        font-size: 11px;
        font-weight: bold;
        padding: 8px;
        border-bottom: 1px solid #333333;
        text-transform: uppercase;
        white-space: nowrap;
    }
    .f4dk-hn-table td {
        padding: 8px;
        font-size: 13px;
        font-weight: bold;
        border-bottom: 1px solid #1a1a1a;
        text-align: center;
        white-space: nowrap;
    }
    .f4dk-hn-table tr:hover td {
        background: #161616;
    }
    
    .f4dk-num-link {
        color: #fac814 !important;
        font-size: 14px;
        font-weight: bold;
        text-decoration: underline;
        cursor: pointer;
        display: inline-block;
    }
    .f4dk-num-link:hover {
        color: #ff3344 !important;
    }
    .f4dk-hn-widget-footer {
        background: #161616;
        padding: 6px;
        font-size: 10px;
        color: #555555;
        text-align: center;
        border-top: 1px solid #222222;
        margin-top: auto;
    }

    /* Mobile Adaptations */
    @media (max-width: 600px) {
        .f4dk-hn-container { padding: 10px; }
        .f4dk-hn-title { font-size: 18px; }
        .f4dk-hn-tabs { width: 100%; justify-content: center; }
        .f4dk-hn-tab-btn { padding: 8px 12px; font-size: 12px; flex: 1; text-align: center; }
        .f4dk-hn-grid-by-side { grid-template-columns: 1fr; max-width: 100%; }
    }