/* Mobile View Styles */
/* Default hidden on desktop */
.mobile-bottom-nav {
display: none;
}
/*
Generic Responsive Override
Prevents horizontal scrolling on tablets and smaller laptops
that are narrower than the fixed desktop layout (1350px).
*/
@media screen and (max-width: 1366px) {
.full-wrap,
.header.full-wrap,
.menu-wrap .full-wrap,
.footer .full-wrap {
min-width: 0 !important;
width: 100% !important;
max-width: 100% !important;
padding-left: 10px;
padding-right: 10px;
box-sizing: border-box;
}
.support-social-mobile {
display: none;
}
}
/* Mobile Horizontal Scrollable Menu */
@media screen and (max-width: 991px) {
/* Highlight Label (Secondary Menu) Scrolling ONLY */
#highlightLabel {
overflow: hidden !important; /* Ensure parent clips content */
width: 100% !important;
}
#highlightLabel .wrap-highlight {
display: block !important;
overflow-x: auto !important;
overflow-y: hidden !important;
white-space: nowrap !important;
width: 100% !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
}
#highlightLabel .wrap-highlight::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
#highlightLabel #label {
display: inline-flex !important; /* Allow horizontal expansion */
flex-wrap: nowrap !important;
width: auto !important; /* Let content dictate width */
padding: 0 55px 0 10px !important;
margin: 0 !important;
list-style: none !important;
position: relative !important;
left: 0 !important; /* Override inline style */
}
#highlightLabel #label li {
display: inline-block !important;
flex: 0 0 auto !important;
float: none !important;
}
}
@media (min-width: 768px) {
.tv-bet,
.openbets-panel,
.mobile-only,
.mobile-btn,
.support-social-mobile,
.mobile-item,
.mobile-item1,
.subtab-search,
.header-right-bar-mobile,
.img-bg,
.main-mobile,
.sports-row-mobile,
.mobile-h3,
.sorting-wrap,
.promo-banner,
.highlight-fix,
.footer-kv,
.upcoming-list {
display: none;
}
.padding-btm {
padding-bottom: 0px;
}
}
@media (max-width: 767px) {
/* Global Resets & Adjustments for Mobile */
body {
padding-bottom: 60px;
}
.full-wrap {
width: 100%;
min-width: 100%;
padding: 0;
}
/* Header Modifications */
.top {
height: auto;
background: #333;
/* Dark background for header */
position: relative;
min-width: 300px;
padding-bottom: 50px;
}
.top .header {
height: 50px;
background-image: linear-gradient(180deg, #474747 0%, #070707 100%);
/* Match reference header color */
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 5px;
border-bottom: 1px solid #444;
position: fixed;
top: 0;
z-index: 99;
}
/* Logo */
.top .header h1 {
margin: 0;
padding: 0;
float: none;
width: auto;
height: 40px;
}
.top .header h1 a {
background-size: contain;
width: 45px;
height: 30px;
display: block;
}
/* Login/Signup Buttons */
.top .header .login-wrap {
float: none;
margin: 0;
padding: 0;
display: flex;
gap: 0px;
position: static;
height: auto;
width: auto;
background: transparent;
align-items: center;
}
.top .header .login-wrap li {
display: none;
/* Hide inputs */
margin: 0;
padding: 0;
background: none;
}
/*Login setting on mobile*/
.login-panel .btn {
padding-bottom: 40px;
}
.login_to_go {
left: 80%;
width: 290px;
}
.full-wrap,
.header.full-wrap {
padding-right: 5px !important;
}
.kv {
display: none;
}
/*after login btn*/
.btn-account,
.header-right-bar,
.account-wrap {
display: none;
}
.btn-plus {
margin-left: 50px;
}
.header-right-bar-mobile {
display: flex;
align-items: center;
gap: 6px;
justify-content: flex-end;
}
.header-right-bar-mobile span,
.header-right-bar-mobile strong {
font-size: 8px !important;
}
.header-right-bar-mobile .balance-box {
line-height: 12px;
min-width: 200px;
}
.img-bg {
background-color: rgba(255, 255, 255, 0.1);
padding: 6px;
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
border-radius: 4px 4px 0;
}
.btn-setting {
background: url('data:image/svg+xml,')
no-repeat;
background-size: contain;
}
/*after login bets*/
.tv-bet {
min-width: 80px;
max-width: 100px;
}
a.a-open_bets {
padding: 6px 5px;
border-left-width: 0;
border-radius: 4px 4px 0;
}
.a-open_bets {
position: relative;
flex: 1;
}
.full-wrap a {
color: #ffb200;
border-color: #000;
background-color: rgba(255, 255, 255, 0.1);
line-height: 12px;
font-weight: bold;
border: 1px solid rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.3);
margin-right: 2px;
}
.a-open_bets img {
background: url('data:image/svg+xml,')
no-repeat;
width: 20px;
height: 19px;
margin-right: 5px;
}
/*In Play Page Tabs start*/
.padding-btm {
padding-bottom: 100px !important;
}
.subtabs {
width: 320px !important;
}
.subtab {
font-weight: 700 !important;
font-size: 10px !important;
}
.col-matched {
display: none;
}
/*In play PAge Tabs end*/
/* OPEN BETS PANEL FULL SCREEN */
.openbets-panel {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #f2f2f2;
z-index: 99999;
display: none;
flex-direction: column;
}
/* show panel */
.openbets-panel.active {
display: flex;
}
/* header like skyexch */
.openbets-header {
height: 45px;
background: linear-gradient(#333, #111);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 12px;
color: #fff;
font-weight: 900;
font-size: 14px;
border-bottom: 1px solid #000;
}
.openbets-close {
background: transparent;
border: none;
color: #ffb400;
font-size: 18px;
font-weight: 900;
cursor: pointer;
}
/* body blank area */
.openbets-body {
flex: 1;
background: #f2f2f2;
}
/*End OPEN BETS PANEL style */
/*Remove valid code on mobile*/
.login-wrap .valid-code {
display: none !important;
}
/* Show only specific buttons and style them */
.top .header .login-wrap li.li-login,
.top .header .login-wrap li.li-signup {
display: block;
}
/* Fallback if :has is not supported or structure is different */
.top .header .login-wrap li a.btn-signup,
.top .header .login-wrap li a.btn-login {
display: block;
float: none;
width: auto;
height: 35px;
line-height: 32px;
padding: 0 20px;
border-radius: 3px;
font-weight: bold;
text-indent: 0;
background: none;
font-size: 12px;
}
.top .header .login-wrap li a.btn-signup {
background: linear-gradient(to bottom, #555, #333);
color: #fff;
border: 1px solid #666;
text-align: center;
}
.top .header .login-wrap li a.btn-login {
background: #d0021b;
/* Red color from reference */
color: #fff;
border: 1px solid #a00;
display: flex;
align-items: center;
gap: 5px;
}
/* Hide the transparent image icon inside login button to avoid layout issues */
.top .header .login-wrap li a.btn-login img {
display: none !important;
}
.top .header .login-wrap li a.btn-login:before {
content: "";
/* FontAwesome user icon approximation or similar */
font-family: sans-serif;
background-image: url(../images/mobile/gamehall/user-icon.svg);
background-size: contain;
width: 4.2666666667vw;
height: 4.2666666667vw;
}
/* Hide search and other elements */
#searchWrap {
display: none !important;
}
/* Hide Desktop Menu */
.menu-wrap {
display: none;
}
/* Main Content Area */
#centerColumn {
margin: 0;
width: 100%;
}
/* Promo Banner */
.promo-banner-wrap {
margin-bottom: 0;
}
.promo-banner {
height: auto;
}
.promo-banner .slides li img {
width: 100%;
height: auto;
}
/* Game Hall / Entrances */
.gamehall-wrap-simple {
padding: 5px;
display: flex;
flex-wrap: wrap;
gap: 5px;
background: #eee;
}
.gamehall-wrap-simple a {
display: block;
position: relative;
margin: 0 !important;
float: none !important;
border: 1px solid #fff;
/* White border as seen in reference */
box-sizing: border-box;
overflow: hidden;
}
/* Full width items */
.gamehall-wrap-simple a:not(.entrance-half) {
width: 100%;
height: auto;
}
/* Half width items */
.gamehall-wrap-simple a.entrance-half {
width: calc(50% - 2.5px);
height: auto;
}
/* Images in entrances */
.gamehall-wrap-simple a img {
width: 100%;
height: auto;
display: block;
}
/* Fix Play Now visibility in mobile */
.entrance-title {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
padding: 0px 8px;
height: 26px;
border-bottom: 2px solid #ffb80c;
}
.entrance-title dt {
font-size: 13px;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-indent: 0px;
}
.entrance-title dd {
width: 19.133333vw;
line-height: 7.4666666667vw;
height: 6.4vw;
background-image: url('data:image/svg+xml,');
background-size: contain;
background-repeat: no-repeat;
background-position: left;
text-indent: 5vw;
font-size: 2.9333333333vw;
font-weight: bold;
color: #000 !important;
}
.entrance-title dd:after {
position: absolute;
z-index: -1;
bottom: -1px;
right: 0;
width: 64px;
height: 104%;
content: "";
}
/* Titles and Play Now buttons overlay */
/*.entrance-title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: rgba(0, 0, 0, 0.7);
color: #fff;
padding: 5px 10px;
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
z-index: 2;
}
.entrance-title dt {
font-size: 14px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 2px #000;
}
.entrance-title dd {
background: #ffc107;
/* Yellow button */
/*color: #000;
padding: 2px 8px;
border-radius: 3px;
font-size: 11px;
font-weight: bold;
text-transform: uppercase;
}
/* Specific adjustments for banners without standard title structure */
/* Blog banner might need specific handling if it doesn't have entrance-title */
/* Bottom Navigation */
.mobile-bottom-nav {
display: flex;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #1e2d3b;
/* Dark blue/grey background */
height: 60px;
z-index: 1000;
justify-content: space-around;
align-items: center;
border-top: 1px solid #444;
}
.mobile-bottom-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #fff;
text-decoration: none;
font-size: 10px;
flex: 1;
height: 100%;
transition: color 0.3s ease;
-webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav-item svg {
width: 24px;
height: 24px;
margin-bottom: 4px;
fill: currentColor;
}
.mobile-bottom-nav-item.active,
.mobile-bottom-nav-item:active {
color: #ffc107;
}
/*Mobile Bottom*/
.icon-multi-markets {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-home {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-account {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-inplay {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-sports {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-promote {
width: 67px;
height: 61px;
}
.icon-cricket {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-soccer {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-tennis {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-esoccer {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-HR {
background: url('data:image/svg+xml,')
no-repeat;
}
/*Multi-markets, in-play start*/
.main {
display: block !important;
background-color: #f0f0f0;
}
.sidebar {
display: none !important;
}
.betslip {
display: none !important;
}
.content {
width: 100% !important;
padding: 0 !important;
}
/*Multi-markets, in-play start*/
/*Sports start*/
.a-search {
position: absolute;
z-index: 2;
right: 0;
width: 12.8vw;
height: 12.2666666667vw;
padding: 0;
background-image: linear-gradient(180deg, #525252 0%, #2d2d2d 100%);
border-left: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 0;
}
.a-search::before {
content: "";
position: absolute;
z-index: -1;
right: 13.0666666667vw;
width: 8.2666666667vw;
height: 12.2666666667vw;
background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 110%);
}
.a-search::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 5.8666666667vw;
height: 5.8666666667vw;
background: url('data:image/svg+xml,')
center no-repeat center no-repeat;
background-size: cover;
}
/*Sports end*/
/*Footer*/
.footer {
background-color: #eee;
}
.extend-wrap {
display: grid;
grid-template-columns: 1fr;
width: 270px;
margin-left: 20px;
}
.mobile-btn {
width: 39%;
margin-left: 20px;
}
.policy-link {
font-size: 10px;
}
.power-wrap_forsky,
.mobile-wrap,
.browser-wrap {
display: none;
}
.support-social-mobile {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-column-gap: 6px;
width: 270px;
margin-left: 20px;
}
.mobile-item {
width: 70px;
font-size: 11px;
}
.mobile-item1 {
width: 110px;
font-size: 11px;
}
.support-social {
font-size: 11px !important;
}
.support-social img {
margin-right: 1px;
}
.support-wrap.extend-support {
margin: 0 auto 0px auto;
padding: 0px;
}
.app-link {
margin-bottom: 80px;
}
/* Adjust layout for columns */
.col-left {
display: none !important;
}
.col-center {
float: none;
width: 100%;
}
/*horse-racing*/
.page {
grid-template-columns: 1fr !important;
}
/*cricket*/
.main-mobile {
grid-template-columns: 1fr !important;
display: grid !important;
}
.sports-row-mobile {
grid-template-columns: 1fr 40px !important;
}
.banner1,
.col-odds,
.sports-header,
.sports-table-head,
.support-wrap,
.footer {
display: none !important;
}
.footer-kv {
margin-bottom: 20px;
}
.mobile-h3 {
background-image: linear-gradient(-180deg, #2e4b5e 0%, #243a48 82%);
color: #fff;
font-size: 3.7333333333vw;
line-height: 2.2;
text-align: center;
}
.sorting-wrap {
display: flex;
justify-content: center;
align-items: center;
height: 10.6666666667vw;
}
.tag-live {
top: 3px;
}
.upcoming-list{
background-color: #fff;
border-bottom: 0.2666666667vw solid #7e97a7;
margin-bottom: 80px;
}
.upcoming-list li{
display:flex;
border-bottom: 1px solid #e0e6e6;
list-style: none;
align-items: center;
}
.upcoming-list a{
display: block;
padding: 1.6vw 2.6666666667vw 1.8666666667vw;
flex: 1;
position: relative;
font-size: 12px;
font-weight: bold;
line-height: 1.6;
flex-wrap: wrap;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-sizing: border-box;
}
.upcoming-list .time{
display: block;
font-size: 3.2vw;
line-height: 1.1;
color: #777;
margin-right: 1.3333333333vw;
}
.upcoming-list li:last-of-type{
border-width: 0;
}
.upcoming-list .upcoming-list-col3 {
display: block;
}
.upcoming-list-col3 h4 {
background-color: #c5d0d8;
font-size: 3.7333333333vw;
color: #3b5160;
line-height: 8.5333333333vw;
font-weight: normal;
text-align: center;
}
.upcoming-list-col3 ul {
display: flex;
align-items: stretch;
overflow-x: auto;
overflow-y: hidden;
}
.upcoming-list-col3 li {
flex: 1;
align-items: flex-start;
border-bottom-width: 0;
border-right: 1px solid #e0e6e6;
}
.upcoming-list-col3 a {
line-height: 1.2;
padding: 1.3333333333vw 1.8666666667vw;
white-space: normal;
}
/*Horse Racing*/
.next-race, .next-links {
display: none !important;
}
}