/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap'); */ /* Knockout font variants for left-sidebar themed pages */ /* Commented out external Knockout fonts — using built-in default font instead. @font-face { font-family: 'Knockout-JuniorFeatherwt'; src: url('/fonts/Knockout-HTF28-JuniorFeatherwt.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Knockout'; src: url('/fonts/Knockout-HTF34-JuniorSumo.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Knockout-50-Welterweight'; src: url('/fonts/Knockout-HTF50-Welterweight.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Knockout-69-FullLiteweight'; src: url('/fonts/Knockout-HTF69-FullLiteweight.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } body:has(#left-sidebar-dynamic-header) * { font-family: 'Knockout', Arial, sans-serif !important; } */ /* ── Open Sans — the V3 (moneybets) theme font, self-hosted from /public/fonts ── moneybets.net/casino loads Open Sans (Google Fonts) and uses `font-family: Open Sans, sans-serif`. We self-host the same variable woff2 (weights 300–800, latin + latin-ext) so V3 renders the exact font offline. It auto-applies whenever the V3 header is on the page (body:has rule below); icon fonts (Font Awesome, Material Symbols) and inline SVGs keep their own font / are unaffected. */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/open-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('/fonts/open-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ───────────────────────────────────────────────────────────────────────────── --brand-font — the one custom property a brand template may set to choose its typeface. Why this exists. The rule further down this file (the `h1..h6, p, span, div, a, label, td, th` block) matches those elements DIRECTLY. A direct element match always beats an inherited value, no matter how specific the inherited rule was. So a brand that sets typography the normal way — `body { font-family: ... }` in its own template CSS — is silently defeated on almost every element on the page, which is why every brand currently looks the same. The fix is to read the same variable at each of the four places this file already sets a font, so a brand's declaration lands ON the winning rule instead of underneath it. Setting `--brand-font` on `:root` or `body` in a template's own CSS now reaches headings, body text, buttons and menu items together. Nothing changes for a brand that sets nothing. `--brand-font` is deliberately left UNDEFINED here — there is no `:root { --brand-font: ... }` — so every `var()` below falls through to the fallback after the comma, which is that rule's exact current value. The four current defaults stay four different values; they are not collapsed into one. ───────────────────────────────────────────────────────────────────────────── */ /* When the V3 (moneybets) header is present, use Open Sans for all text. Set on so it inherits to descendants without overriding element-level icon fonts (.fa / Material Symbols) or inline SVGs. V1/V2/other themes are unaffected. */ body:has(#left-sidebar-dynamic-header-v3) { font-family: var(--brand-font, 'Open Sans', sans-serif); } html { /* overflow-y: scroll; */ overflow-y: auto; } /* Light theme body background — white */ body.has-left-sidebar.ls-light-theme, html body.has-left-sidebar.ls-light-theme { background: #F5F8FC !important; background-color: #F5F8FC !important; } /* Light-theme SVG fix — many inline SVGs in the frontend hardcode the pale fill `#ECF4F7` (visible on the dark theme's near-black surfaces, invisible on the light theme's #F5F8FC / white surfaces). Override the SVG presentation attribute via CSS `fill` so the same icon markup renders black in light mode without touching the SVG source. We list BOTH uppercase and lowercase hex variants explicitly (some browsers / SVG renderers treat attribute values case-sensitively even though HTML attributes are nominally case-insensitive), AND we target the descendants of any fill-bearing element (in case a child has been resolved to its own currentColor and doesn't inherit through the ). Selector specificity stays high enough (class + attribute) that no other rule should beat it. */ body.ls-light-theme [fill="#ECF4F7"], body.ls-light-theme [fill="#ecf4f7"], body.ls-light-theme [fill="#ECF4F7"] *, body.ls-light-theme [fill="#ecf4f7"] *, body.ls-light-theme [fill="#ECF4F7"] path, body.ls-light-theme [fill="#ecf4f7"] path, html body.ls-light-theme [fill="#ECF4F7"], html body.ls-light-theme [fill="#ecf4f7"], html body.ls-light-theme [fill="#ECF4F7"] *, html body.ls-light-theme [fill="#ecf4f7"] * { fill: #000000 !important; } /* Robust light-theme fix for section-title SVG icons rendered via dangerouslySetInnerHTML in DynamicGameCarouselComponent and DynamicSliderComponent. The wrapping carries `ls-dynamic-svg-icon`. We enumerate every shape element (svg, g, path, polygon, circle, rect, ellipse, line, polyline) plus the universal descendant selector AND `[fill]` attribute selectors so the rule matches whether the SVG hardcodes a fill on the , on a wrapping , on individual paths, or uses `currentColor`. `html body.ls-light-theme` keeps specificity high enough to beat bluebet.css overrides; `!important` on `fill` overrides the SVG presentation attribute (per CSS spec, presentation attrs have specificity 0). Purely additive — does not interfere with the existing `[fill="#ECF4F7"]` rule above. */ html body.ls-light-theme .ls-dynamic-svg-icon, html body.ls-light-theme .ls-dynamic-svg-icon *, html body.ls-light-theme span.ls-dynamic-svg-icon, html body.ls-light-theme span.ls-dynamic-svg-icon *, html body.ls-light-theme .ls-dynamic-svg-icon svg, html body.ls-light-theme .ls-dynamic-svg-icon svg *, html body.ls-light-theme .ls-dynamic-svg-icon svg g, html body.ls-light-theme .ls-dynamic-svg-icon svg g *, html body.ls-light-theme .ls-dynamic-svg-icon svg path, html body.ls-light-theme .ls-dynamic-svg-icon svg polygon, html body.ls-light-theme .ls-dynamic-svg-icon svg circle, html body.ls-light-theme .ls-dynamic-svg-icon svg rect, html body.ls-light-theme .ls-dynamic-svg-icon svg ellipse, html body.ls-light-theme .ls-dynamic-svg-icon svg [fill], html body.ls-light-theme .ls-dynamic-svg-icon svg [fill] * { fill: #000000 !important; color: #000000 !important; } .gjs-input-holder input, .gjs-sm-field input, .gjs-sm-field input, .gjs-clm-field input, .gjs-clm-select input, .gjs-sm-field select, .gjs-clm-field select, .gjs-clm-select select { color: #000 !important; } /* The direct element match described at the top of this file. This is the rule that beats any brand's `body { font-family }`, so it is the rule that has to read --brand-font. Default (variable unset) is unchanged: 'principal'. */ h1, h2, h3, h4, h5, h6, p, span, div, a, label, td, th { font-family: var(--brand-font, 'principal', Arial, sans-serif); } /* Buttons never inherit font-family from body in any browser, so they need the variable explicitly or a brand's typeface would stop at the button edge. Default (variable unset) is unchanged: Roboto. */ button { font-family: var(--brand-font, Roboto, Helvetica, Arial, sans-serif); } .history-details-table { /* Hover effect on the table rows */ /* tbody .MuiTableRow-root:is(:first-child) { background-color: rgba(255, 255, 255, 0.5) !important; } */ tbody .MuiTableRow-root { .MuiTableCell-body { border-bottom: 1px solid #ddd !important; border-right: 1px solid rgba(0, 0, 0, 0.1) !important; } } tbody .MuiTableRow-root:hover { background-color: rgba(255, 255, 255, 0.4) !important; cursor: pointer !important; } } /* ::-webkit-scrollbar { width: 6px; height: 0px; } ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active { background: #eeeeee; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-track:hover, ::-webkit-scrollbar-track:active { background: #ffffff; } */ html:not(.legacy) ::-webkit-scrollbar { width: 6px; height: 0px; } html:not(.legacy) ::-webkit-scrollbar-thumb, html:not(.legacy) ::-webkit-scrollbar-thumb:hover, html:not(.legacy) ::-webkit-scrollbar-thumb:active { background: #eeeeee; } html:not(.legacy) ::-webkit-scrollbar-track, html:not(.legacy) ::-webkit-scrollbar-track:hover, html:not(.legacy) ::-webkit-scrollbar-track:active { background: #ffffff; } /* ------------------------------- */ @keyframes LoopRotate { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } .button-type-select { display: block; width: 100%; padding: 0.375rem 0.75rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: #212529; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; background-clip: padding-box; border: 1px solid #dee2e6; border-radius: 0.375rem; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .modal-actions { display: flex; flex-wrap: wrap; grid-gap: 5px; } /* The base body font for every layout that is not V3. Reading the variable here is what carries a brand's typeface to elements the element-list rule above does not name — list items, table captions, form controls, bare text nodes. Default (variable unset) is unchanged: the ui-sans-serif system stack. */ body { font-family: var( --brand-font, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji ); line-height: 1.5; .MuiTypography-root { line-height: 1.5; } .info-fields-dp { &.MuiBox-root { margin: 0; padding: 0; border: none; } } [id*='custom-dynamic-header-'], #custom-dynamic-header { padding-top: 5px !important; padding-bottom: 5px; height: 50px !important; min-height: 50px; display: flex; align-items: center; z-index: 998; justify-content: space-between; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px -1px, rgba(0, 0, 0, 0.14) 0px 4px 5px 0px, rgba(0, 0, 0, 0.12) 0px 1px 10px 0px; @media (max-width: 767px) { padding-inline: 10px; } @media (max-width: 1000px) { #custom-hamburger-button { padding-inline: 0; margin-left: 5px !important; svg { width: 24px; height: 24px; display: block; } } } } .bottom-logos { margin: auto; display: flex !important; align-items: center !important; justify-content: center !important; gap: 120px !important; padding-bottom: 20px; transform: translateX(0px) translateY(0px) !important; @media (max-width: 500px) { gap: 50px !important; } } .custom-header-actions { column-gap: 4px !important; .custom-header-button { height: 30px; width: 100px; /* color: rgb(0, 0, 0) !important; NOT REQUIRED (Aryan Dev) */ padding: 0 16px !important; } /* .custom-header-button { &:hover { background: rgb(0, 0, 0) !important; color: #fff !important; } } */ } .profile-opener { .custom-header-button { width: 42px; height: 42px; padding: 8px !important; background: #4e4e4e !important; &:hover { background: #323232 !important; } } } img[alt='+ Jugados'] { animation: 4s linear 0s infinite normal none running LoopRotate; max-width: 45px; margin: 0 auto; } .mobile-menu-drawer { .MuiList-root { margin-top: 8px; .MuiListItem-root { .MuiButtonBase-root { margin-inline: 12px; padding: 10px; .MuiListItemText-root { margin: 0; .MuiTypography-root { font-size: 12px; } } } } } } .profile-opener + #custom-hamburger-button { display: none !important; } .drawer-site-menu { display: none; @media (max-width: 1000px) { display: block; padding-top: 40px; } } @media (max-width: 560px) { .cambiar-dialog { .MuiDialog-container { .MuiDialogActions-root { flex-direction: column; .MuiButtonBase-root { margin-inline: 0 !important; } } } } } @media (max-width: 450px) { .profile-main-page, .history-main-page { padding: 70px 20px 20px !important; } .cambiar-btn { width: 100%; } } .hide-below-520px { @media (max-width: 520px) { display: none !important; } } .flex-column-below-600px { @media (max-width: 600px) { flex-direction: column !important; gap: 16px; } } /* -----------------Temp Styling Start-------------------- */ #custom-dynamic-page { height: auto !important; min-height: 100vh; } .cell { border: none !important; contain: layout style; } /* Prevent CLS for CMS-rendered category banner images (CASSINO, ESPORTES etc.) */ .cell img { aspect-ratio: auto; max-width: 100%; height: auto; } .cell .MuiBox-root { contain: layout style; } #buttonWithImage { &:hover { background-color: #000 !important; color: #fff !important; } } div#iv5lh { font-weight: 500; } .social-icons { a { border: 2px solid #fff; border-radius: 50px; padding: 8px; display: inline-block; background-color: transparent; transition: background-color 0.3s ease, border-color 0.3s ease; width: 46px; height: 46px; &:hover { background: #313645 !important; border: 2px solid #313645 !important; } img { width: 100% !important; height: 100% !important; border-radius: 0 !important; padding: 0 !important; border: none !important; max-width: 30px; max-height: 30px; object-fit: contain; } } } #imbe4 { a { font-size: 11px !important; letter-spacing: 0.02857em; } } #iluil { column-gap: 20px !important; } div#ihb7p { font-size: 11px !important; font-family: 'Inter', sans-serif; line-height: 1.6; padding-inline: 60px; } .footer-column { > div:first-child { margin-bottom: 12px !important; } a { font-weight: 400 !important; transition: 0.3s; margin-bottom: 12px !important; &:hover { color: #a6adc2 !important; text-decoration: underline !important; } &:last-child { margin-bottom: 0 !important; } } } #ixxro { max-width: 70px; height: auto !important; margin-bottom: 10px; } #imn6f { margin-bottom: 5px !important; } /* #custom-dynamic-footer { transform: translateX(0px) translateY(0px); background-color: #222631; padding: 40px 0 0; } */ .casino-drex-header-button { font-weight: 600 !important; cursor: pointer !important; } .custom-footer-container { justify-content: center; flex-wrap: wrap; display: flex !important; padding: 0 !important; max-width: inherit !important; > div { display: flex; flex-direction: column; align-items: center; margin-left: 60px; margin-right: 60px; margin-bottom: 40px; @media (max-width: 1100px) { margin-inline: 0 !important; width: 50% !important; } } > .te-escuchamos-column { width: 240px; height: 137px; @media (max-width: 500px) { width: 100% !important; } } .te-escuchamos-column + .footer-column { margin-inline: 0 !important; @media (max-width: 500px) { width: 100% !important; margin-bottom: 20px; } } } #ipoaw { padding-bottom: 38px !important; @media (max-width: 1100px) { gap: 50px; } } #ihs4e { margin-bottom: 48px !important; padding-top: 10px; } .game-grid-container { contain: layout style; } .game-grid-container > .game-grid { .game-item-container { .game-item-image-wrapper { margin: 0; width: 100%; display: block; } } /* width: 100% !important; */ @media (max-width: 1100px) { grid-template-columns: repeat(auto-fit, 120px) !important; } @media (max-width: 535px) { grid-template-columns: repeat(auto-fit, 105px) !important; gap: 10px !important; } } div#i43q3 { padding: 30px; @media (max-width: 900px) { display: flex; flex-direction: column; align-items: center; justify-content: center; } @media (max-width: 450px) { padding: 10px; } .cell > .MuiBox-root { overflow: hidden; border-radius: 8px; .MuiButtonBase-root { position: absolute; bottom: 20px; top: auto !important; transform: translate(-50%, 0); left: 50%; padding: 0px 16px; height: 40px; min-width: 100px; } } } /* -----------------Temp Styling End-------------------- */ } /* ------------------------------- */ /* Performance: Promote animated elements to composite layers to avoid non-composited animations */ /* Fixes 129 non-composited animation warnings from Lighthouse */ /* Header/footer ::after pseudo-elements animate 'left' property - promote to own layer */ html:not(.legacy) [id*='custom-dynamic-header-']::after, html:not(.legacy) #custom-dynamic-header::after, html:not(.legacy) #custom-dynamic-footer::after { will-change: transform; transform: translateZ(0); } /* Play buttons animate background-position via keyframes - promote to own layer */ html:not(.legacy) .play-button, html:not(.legacy) .custom-register-button, html:not(.legacy) .view-more-button, html:not(.legacy) .MuiButton-containedPrimary { will-change: transform; transform: translateZ(0); } /* Game item containers have hover transforms and filter animations */ html:not(.legacy) .game-item-container { will-change: transform; transform: translateZ(0); } /* Title lines have sparkle animations */ html:not(.legacy) .title-line-left::before, html:not(.legacy) .title-line-right::before { will-change: transform; transform: translateZ(0); } /* SVG paths (CircularProgress) animate stroke-dashoffset - this is expected, promote to own layer */ html:not(.legacy) .MuiCircularProgress-svg path { will-change: stroke-dashoffset; } /* Mobile 2-column grid for .row with .cell-33 children (e.g. CASSINO / CASSINO AO VIVO / ESPORTES) */ @media (max-width: 650px) { .row { display: grid !important; grid-template-columns: 1fr 1fr !important; justify-items: center !important; grid-gap: 10px !important; gap: 10px !important; margin: 0 !important; } .row > * { width: 100% !important; max-width: 100% !important; padding: 0 !important; } /* Center the last odd item across both columns */ .row > *:last-child:nth-child(odd) { grid-column: 1 / -1 !important; max-width: 50% !important; justify-self: center !important; } }