:root {
--sports-icons: url("/assets/themes/betting/images/icon/sport.png");
--chess-icon: url("/assets/themes/betting/images/icon/chess-pieces.png");
--chip-icon: url("/assets/themes/betting/images/icon/chip.png");
}
:root {
--brand: #720403;
--yellow: #720403;
--blue: #6ac2ff;
--link-color: #2789ce;
--green: #6bbd11;
--dark: #000000;
--black: #2b1a19;
--white: #ffffff;
--body-bg: #eee;
--body-text-color: #1e1e1e;
--body-font: Helvetica, Tahoma, sans-serif;
--radius: 1.6rem;
--menu-height: 3.5rem;
--footer-menu-bg: linear-gradient(-180deg, #243a48 20%, #172732 91%);
--footer-menu-active-bg: linear-gradient(-180deg, #d72010 60%, #710100);
--login-page-bg: linear-gradient(56deg, #ffcc2e 4%, #ffb80c 42%);
--news-bg: linear-gradient(-180deg, #2f424d 0%, #141e21 100%);
--title-bg: linear-gradient(-180deg, #2e4b5e 0%, #243a48 82%);
--sport-tab-bg: linear-gradient(180deg, #ffcc2e 0%, #ffbd14 100%);
--sport-tab-active-bg: linear-gradient(-180deg, #2f424d 0%, #141e21 100%);
--red-dark-gradient-bg: linear-gradient(-180deg, #243a48 20%, #172732 91%);
--play: url('data:image/svg+xml,');
--live: url('data:image/svg+xml,');
--bookmark: url('data:image/svg+xml,');
--fancy: url('data:image/svg+xml,');
--clock: url('data:image/svg+xml,');
--game-e: url('data:image/svg+xml,');
--pinGrey: url('data:image/svg+xml,');
--pinGreen: url('data:image/svg+xml,');
--cricket-ball-active: url('data:image/svg+xml,');
--cricket-ball-dark: url('data:image/svg+xml,');
--election-ball-dark: url('data:image/svg+xml,');
--football: url('data:image/svg+xml,');
--football-active: url('data:image/svg+xml,');
--minus-icon: url('data:image/svg+xml,');
--plus-icon: url('data:image/svg+xml,');
}
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
}
*::after,
*::before {
margin: 0%;
padding: 0%;
}
html {
font-size: 100%;
width: 100%;
height: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
}
body {
text-rendering: optimizeLegibility;
font-family: var(--body-font);
color: var(--body-text-color);
font-weight: 400;
font-style: normal;
font-size: 0.875rem;
transition: all 0.3s ease-in-out;
line-height: 1.4;
background-color: var(--body-bg);
/* padding-top: var(--menu-height); */
padding: 0px !important;
padding-bottom: 2.5rem;
}
.fs-12 {
font-size: 13px;
}
.fs-8 {
font-size: 9px;
}
.fs-9 {
font-size: 10px;
}
.fs-10 {
font-size: 11px;
}
.fs-11 {
font-size: 12px;
}
.fs-13 {
font-size: 14px;
}
.fs-15 {
font-size: 16px;
}
.fs-18 {
font-size: 1.125rem;
}
.text-black {
color: #000000;
}
.bg-dark {
background-color: var(--dark) !important;
}
.bg-light {
background-color: var(--brand-light-bg) !important;
}
.bg-green {
background-color: var(--green) !important;
}
.bg-primary {
background-color: var(--brand) !important;
}
.text-dark {
color: var(--dark) !important;
}
.text-black {
color: #243a48 !important;
}
.text-primary {
color: var(--brand) !important;
}
.bg-dark-gradient {
background-image: var(--red-dark-gradient-bg);
}
a {
text-decoration: none;
display: inline-block;
transition: all 0.3s ease-in-out;
color: rgb(35, 35, 35);
font-weight: 500;
}
a:hover {
color: var(--brand);
}
.btn:focus,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
box-shadow: none;
}
.btn {
padding: 0.35rem 1rem 0.45rem 1rem;
border-radius: 0.2rem;
justify-content: center;
font-size: 13px;
align-items: center;
gap: 0.5rem;
display: inline-flex;
transition: all 0.4s ease-in-out;
line-height: 1.3;
font-weight: 500;
}
ul,
ol {
padding-left: 1rem;
}
.btn-primary {
--bs-btn-color: var(--dark) !important;
--bs-btn-bg: var(--brand) !important;
--bs-btn-border-color: var(--brand) !important;
--bs-btn-hover-color: var(--dark);
--bs-btn-hover-bg: #bb2d3b;
--bs-btn-hover-border-color: #720403;
--bs-btn-focus-shadow-rgb: 225, 83, 97;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #720403;
--bs-btn-active-border-color: #720403;
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: var(--red);
--bs-btn-disabled-border-color: var(--red);
}
.btn-dark {
color: #ffb200 !important;
background-image: linear-gradient(-180deg, #2f424d 0%, #141e21 100%);
border-color: #222 !important;
}
.btn-dark-unactive {
color: #ffffff;
background-image: linear-gradient(-180deg, #2f424d 0%, #141e21 100%);
border-color: #222 !important;
}
.btn-outline-secondary {
color: #1e1e1e;
background-image: linear-gradient(-180deg, #ffffff 0%, #eeeeee 89%);
border-color: #7e97a7;
}
.btn-outline-primary {
background-color: rgba(94, 190, 255, 0.15);
border: 1px solid #7e97a7;
color: #3b5160;
}
.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
max-width: 575px;
padding-left: clamp(5px, 1.6vw, 8px);
padding-right: clamp(5px, 1.6vw, 8px);
}
.form-control {
font-size: 0.875rem;
}
.offcanvas.offcanvas-bottom {
border-top-left-radius: var(--radius);
border-top-right-radius: var(--radius);
}
.offcanvas {
z-index: 1050;
}
.offcanvas-bottom::after {
content: "";
width: 2rem;
height: 0.25rem;
border-radius: 0.5rem;
background-color: var(--light-gray);
position: absolute;
top: 0.5rem;
left: 50%;
transform: translateX(-50%);
}
.offcanvas-bottom .offcanvas-body {
padding-top: 2.25rem;
}
/*====================== header Styles ===================*/
.navbar {
width: 100%;
position: fixed;
left: 0;
top: 0;
right: 0;
z-index: 999;
background: #999
linear-gradient(90deg, rgba(34, 193, 195, 1) 0%, rgba(253, 187, 45, 1) 100%) !important;
height: var(--menu-height);
}
.navbar .logo {
height: 3rem;
}
.navbar .sign__up {
background-image: linear-gradient(-180deg, #666666 0%, #333333 100%);
border-color: #000;
}
.navbar .login {
background-image: var(--red-dark-gradient-bg);
}
/* .navbar .btn { height: 34px; } */
.navbar .bet__btn svg path {
fill: var(--white);
}
.navbar .balance__btn {
font-size: 10px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.navbar .balance__btn .label {
font-size: 12px;
}
.navbar .balance__btn .count {
font-size: 12px;
border: 1px solid var(--brand);
padding: 2px 5px;
border-radius: 4px;
}
.navbar .reload__btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
}
.setting__canvas .side__header {
background: linear-gradient(-180deg, #2f424d 0%, #141e21 100%);
}
.setting__canvas .side__header .close__btn {
border-left: 1px solid rgba(255, 178, 0, 0.3);
}
.setting__canvas .stack__list .btn-outline-dark {
color: var(--body-text-color);
background-image: linear-gradient(-180deg, #ffffff 0%, #eeeeee 89%);
border: 1px solid #aaa;
}
.setting__canvas .stack__list .btn-outline-dark.active {
color: var(--brand);
background: #444;
border-color: #222;
}
/* .setting__canvas .play__list > li { border-bottom: 1px solid #e0e6e6; } */
.account__canvas {
background-color: #e0e6e6;
}
.account__canvas .bg-secondary {
background-color: #5f849d !important;
}
.account__canvas .badge {
font-size: 10px;
padding: 2px 4px;
border-radius: 2px;
}
/* ---- Footer fixed menu styels -------- */
.footer__fixed__menu {
background: var(--red-dark-gradient-bg);
z-index: 999;
}
.footer__fixed__menu .active {
background-image: var(--red-dark-gradient-bg);
color: #fff;
}
.footer__fixed__menu a {
font-size: clamp(10px, 3.2vw, 16px);
line-height: 1.4;
}
.footer__fixed__menu a svg {
width: clamp(20px, 5.867vw, 31px);
height: clamp(18px, 5.633vw, 28px);
margin: 0 auto clamp(2px, 0.533vw, 3px);
}
/* Custom Coming Soon Popover Styles */
.coming-soon-popover {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 1000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.coming-soon-trigger:hover .coming-soon-popover {
opacity: 1;
}
/* Remove modal styles since we're using popovers */
#comingSoonBootstrapModal {
display: none !important;
}
/* game card global styles */
.game__card .title__box {
background-image: linear-gradient(
270deg,
rgba(69, 94, 104, 0) 4%,
#000000 97%
);
text-transform: capitalize;
border-bottom: clamp(4px, 1.12vw, 6px) solid #ffb80c;
color: var(--white);
width: 10%;
}
.game__card .title__box a {
color: var(--white);
font-weight: bold;
font-size: clamp(12px, 3.733vw, 18px);
}
.game__card .play__btn {
background-color: #ffb80c;
color: var(--white);
padding: 0.2rem 0.25rem 0.2rem 0.75rem;
font-size: 12px;
clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);
width: calc(4.5rem + 2px);
margin-left: -2px;
white-space: nowrap; /* Ensure text stays on one line */
}
.support__box {
padding-left: 12% !important;
background-color: rgba(255, 255, 255, 0.6);
}
.policy__link a {
color: #666 !important;
text-decoration: underline;
font-size: clamp(11px, 3.467vw, 17px);
}
.policy__link li:not(:last-child)::after {
content: "|";
display: inline-block;
color: #666;
margin: 0 4px;
}
/* ----- login wrapper styles ---- */
.login__wrapper {
/* margin-top: calc(-1 * var(--menu-height)); */
background-image: var(--login-page-bg);
min-height: 100vh;
}
.login__wrapper .logo {
max-height: 6rem;
}
.login__wrapper .support__box {
background-color: rgba(255, 255, 255, 0.6);
}
.login__wrapper .policy__link a {
color: rgba(255, 255, 255, 0.9);
}
.login__wrapper .policy__link li:not(:last-child)::after {
color: #666;
}
.btn-login {
color: #ffb200;
background-image: linear-gradient(180deg, #474747 0%, #070707 100%);
border: clamp(1px, 0.267vw, 2px) solid #222;
}
.login__wrapper .support__box .link__dark {
color: rgba(0, 0, 0, 0.7);
}
.login__wrapper .support__box img {
/* filter: contrast(0) brightness(10); */
}
/* ---- news box styles ------- */
.news__box {
background-image: var(--news-bg);
}
.news__box a {
color: var(--blue);
}
.news__box a span {
color: var(--dark);
background-color: var(--blue);
font-size: 12px;
font-weight: 400;
padding: 0 4px;
border-radius: 2px;
font-style: italic;
}
/* ---- tabs box styles ------ */
.tab__wrap {
background-color: #172832;
}
.tab__wrap .search__btn {
height: 3rem;
width: 3rem;
}
.custom__tabs .nav-link {
color: var(--white);
font-size: 12px;
}
.custom__tabs .nav-link.active {
color: var(--white);
background: var(--red-dark-gradient-bg);
}
.custom__tabs .nav-item:not(:last-child) .nav-link {
border-right: 1px solid rgba(255, 255, 255, 0.35);
}
.game__icon {
width: clamp(13px, 3.9vw, 19px);
height: clamp(13px, 3.9vw, 19px);
background-repeat: no-repeat;
background-size: 9px;
background-position: center center;
border-radius: 3px;
}
.game__icon.play {
background-color: #e4550f;
border-radius: 4px;
position: relative;
width: 15px;
height: 15px;
display: inline-block;
}
.game__icon.play::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 10px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.game__icon.live {
background-image: var(--live);
background-color: #1876b2;
}
.game__icon.clock {
background-image: var(--clock);
background-color: #60ba1e;
}
.game__icon.fancy {
background: linear-gradient(
90deg,
#32cd32 0%,
#32cd32 50%,
#0b92a5 50%,
#0b92a5 100%
);
border-radius: 4px;
position: relative;
width: 25px;
height: 14px;
display: inline-block;
}
.game__icon.fancy::before {
content: "";
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 12px;
background: url('data:image/svg+xml,')
no-repeat center;
background-size: contain;
}
.game__icon.fancy::after {
content: "";
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 9px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.game__icon.bookmark {
background: linear-gradient(
90deg,
#32cd32 0%,
#32cd32 50%,
#236bc4 50%,
#236bc4 100%
);
border-radius: 4px;
position: relative;
width: 25px;
height: 14px;
display: inline-block;
}
.game__icon.bookmark::before {
content: "";
position: absolute;
left: 3px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 12px;
background: url('data:image/svg+xml,')
no-repeat center;
background-size: contain;
}
.game__icon.bookmark::after {
content: "";
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
width: 9px;
height: 9px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.game__flex__box .game__icon:first-child {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.game__flex__box .game__icon:last-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.game__e {
height: 13px;
background-color: #fff;
color: #1f5172;
border-radius: 2px;
border: 1px solid #1f5172;
padding-right: 2px;
overflow: hidden;
font-size: 8px;
}
.game__e i {
width: 13px;
height: 13px;
background: var(--game-e) no-repeat top 2px left 2px / 6px;
display: block;
background-color: #1f5172;
position: relative;
}
.game__e i:after {
position: absolute;
right: 0;
content: "";
border-left: clamp(4px, 1.333vw, 7px) solid rgba(0, 0, 0, 0);
border-bottom: clamp(12px, 3.733vw, 18px) solid #fff;
}
.play__list {
border-bottom: 1px solid #e9e9e9;
}
.play__list a {
color: var(--link-color);
}
.play__list a .title {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
font-size: 16px !important;
font-weight: bold !important;
}
.play__list a .status {
width: 10px;
height: 10px;
background-color: #c5d0d8;
left: 0rem;
bottom: 0.2rem;
border: 1px solid rgba(51, 51, 51, 0.4);
}
.play__list a .status.active {
background-color: var(--green);
}
.pin__btn {
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-image: var(--pinGrey);
border: 0;
}
.pin__btn.sm {
width: 20px;
height: 20px;
}
.pin__btn.active {
background-image: var(--pinGreen);
}
.play__list > li:not(:last-child) {
border-bottom: 1px solid #e0e6e6;
}
/* ---- switch btn styles -------- */
.switch__btn .box {
width: 30px;
height: 26px;
display: block;
border-radius: 0.25rem;
overflow: hidden;
background-color: #a2b1ba;
box-shadow: inset 0 clamp(1px, 0.267vw, 2px) clamp(3px, 0.8vw, 4px) 0
rgba(0, 0, 0, 0.5);
cursor: pointer;
}
.switch__btn .icon {
position: absolute;
left: 3px;
top: 3px;
width: 8px;
height: 20px;
background: #fff;
box-shadow: 0 clamp(2px, 0.533vw, 3px) clamp(4px, 1.067vw, 5px)
rgba(0, 0, 0, 0.5),
inset 0 clamp(-3px, -0.8vw, -4px) 0 0 #cad5d5;
border-radius: 3px;
display: flex;
justify-content: center;
align-items: center;
}
.switch__btn .icon::after {
content: "";
display: block;
width: 4px;
height: 6px;
background: #e0e6e6;
box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, 0.26);
border-radius: 3px;
}
.switch__btn input[type="checkbox"]:checked + .box {
background-color: #6bbd11;
}
.switch__btn input[type="checkbox"]:checked + .box .icon {
left: auto;
right: 3px;
}
/* ---- Sports page styles ------ */
.sports__tab__wrap {
background: var(--brand);
border-bottom: 1px solid #070707;
}
.sports__tab__wrap .nav-pills .nav-link {
color: var(--white);
font-size: 12px;
border-radius: 4px 4px 0 0 !important;
}
.sports__tab__wrap .nav-pills .nav-link.active {
background: var(--sport-tab-active-bg);
background-color: transparent;
color: var(--brand);
}
.sports__tab__wrap .nav-pills .nav-link .icon {
width: 13px;
height: 13px;
display: block;
background-repeat: no-repeat;
background-position: center center;
background-size: 13px;
}
.sports__tab__wrap .nav-pills .nav-link .icon.ball {
background-image: var(--cricket-ball-dark);
}
.sports__tab__wrap .nav-pills .nav-link .icon.eclection {
background-image: var(--election-ball-dark);
}
.sports__tab__wrap .nav-pills .nav-link.active .icon.ball {
background-image: var(--cricket-ball-active);
}
.sports__tab__wrap .nav-pills .nav-link .icon.football {
background-image: var(--football);
}
.sports__tab__wrap .nav-pills .nav-link.active .icon.football {
background-image: var(--football-active);
}
.inner__tab {
background: #e3e3e3;
}
.inner__tab .nav-pills {
box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.15);
}
.inner__tab .nav-pills .nav-link {
color: #1e1e1e;
width: 11rem;
}
.inner__tab .nav-pills .nav-link.active {
color: #0074c4;
background: #fff;
box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.15);
}
.game__wrap {
background-color: var(--black);
}
.game__wrap .reload__btn {
border-left: 1px solid rgba(255, 255, 255, 0.15);
width: 2.5rem;
height: 3.5rem;
}
.date {
font-size: 8px;
color: #7e97a7;
}
.info__table .info__box {
width: 12rem;
padding-top: 5px;
padding-bottom: 5px;
}
.info__table .btn__sort {
background: #e0e6e6;
clip-path: polygon(0 1%, 100% 0, 84% 100%, 0% 100%);
}
.info__table .bg-blue {
background-color: #72bbef;
width: 6rem;
height: 36px;
border-radius: 3px;
border: 1px solid #72bbef;
}
.info__table .bg-red {
background-color: #faa9ba;
width: 6rem;
height: 36px;
border-radius: 3px;
border: 1px solid #ca6a7e;
}
.info__table td {
padding: 0%;
font-size: 13px;
vertical-align: middle;
}
.info__table.warning th,
.info__table.warning td {
background-color: #f8f6e1;
}
.pin__box {
background: url('data:image/svg+xml,'),
linear-gradient(-180deg, #0a92a5 0%, #087989 82%) no-repeat center center /
cover;
width: 2.4rem;
height: 30px;
}
.pin__box .pin__btn {
height: 30px;
background-size: 16px;
}
.bet__info {
background-image: linear-gradient(-180deg, #0a92a5 0%, #087989 82%);
height: 30px;
}
/* Single line ellipsis for titles */
.single-line-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block; /* Ensure it takes up full width for ellipsis to work */
}
.question__btn {
background: url("../images/icons/bg-fanctbet_rules.svg") no-repeat center
center / cover;
margin-left: -1px;
}
.sport__detail__tabs {
background-color: #111;
}
.sport__detail__tabs .nav-pills .nav-link {
white-space: nowrap;
color: var(--white);
position: relative;
}
.sport__detail__tabs .nav-pills .nav-item::after {
content: "";
width: 1px;
height: 100%;
background-color: #ffffff3d;
position: absolute;
top: 0;
right: 0%;
display: block;
}
.sport__detail__tabs .nav-pills .nav-link.active {
background-color: var(--white);
color: var(--black);
}
.result__list .result__btn {
background-color: #72e3a0;
}
.result__list .result__btn.bg-green {
background-color: #72bbef !important;
border: 1px solid #3876a2;
border-radius: 3px !important;
}
.result__list .result__btn.bg-red {
background-color: #faa9ba;
height: auto;
border-radius: 3px !important;
}
.collapse__box {
background-color: #dceaf4;
}
.collapse__box .btn-secondary.max {
background-color: rgba(0, 0, 0, 0.1);
font-size: 10px;
}
.counter__box {
border: 1px solid #aaa;
}
.counter__box .btn {
background-image: linear-gradient(-180deg, #ffffff 0%, #eeeeee 89%);
}
/* .counter__box .btn::after { content: '';width: 20px;height: 20px;display: block; } */
/* .counter__box .btn.minus::after { background: var(--minus-icon) no-repeat center center / 15px; } */
/* .counter__box .btn.plus::after { background: var(--plus-icon) no-repeat center center / 15px; } */
.counter__box .form-control {
background-color: #fff0ca;
box-shadow: inset 0 3px 8px rgba(161, 128, 45, 0.4);
border-color: #be79094a;
width: calc(100% - 0rem);
height: 2.4rem;
padding: 0.3rem 0.1rem;
}
.form-control.size__large {
height: 2.65rem;
}
.coin__list {
background-image: linear-gradient(-180deg, #32617f 20%, #1f4258 91%);
}
.calculate__list .btn-outline-light {
color: var(--black);
border-color: #aaa;
background-color: #fff;
font-size: clamp(13px, 4vw, 20px);
}
.form-check-input {
box-shadow: inset 0 1px 0 0 rgba(0, 0, 0, 0.4);
border: 0;
}
.form-check-input:checked {
border-color: var(--brand);
background-color: var(--brand);
}
.modal ul,
.modal ol {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.noscroller::-webkit-scrollbar {
display: none;
}
.noscroller {
-ms-overflow-style: none;
scrollbar-width: none;
}
.wrapper {
padding-left: 0px !important;
}
body {
background: #eeeeee !important;
}
/* .leftbar.active {
background: white;
} */
.leftbar {
background: --red-dark-gradient-bg !important;
}
.btn-custom.light {
background: var(--primary) !important;
color: var(--black);
}
.leftbar {
background: --red-dark-gradient-bg !important;
background-size: inherit !important;
}
/* homeSlider */
.game-mobile-menu {
width: 100%;
padding: 15px 0 10px;
}
.game-mobile-menu ul {
margin: 0px;
padding: 0px;
display: flex;
align-items: center;
grid-gap: 0;
gap: 0;
margin: 0px;
padding: 0px;
}
.game-mobile-menu ul li {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
grid-gap: 5px;
gap: 5px;
cursor: pointer;
list-style: none;
}
.game-mobile-menu ul li .iconShow {
background: #e30303;
margin: 0 5px;
padding: 10px;
width: 55px;
height: 55px;
border-radius: 8px;
transition: all 0.3s ease;
font-size: 22px;
color: #fff;
}
.game-mobile-menu ul li .iconShow svg {
fill: #fff;
width: 25px;
height: 25px;
}
.game-mobile-menu ul li .iconShow img {
width: 22px;
height: auto;
}
.game-mobile-menu ul li .menu-name {
display: block;
line-height: normal;
text-transform: capitalize;
transition: inherit;
white-space: nowrap;
font-size: 12px;
font-weight: 700;
}
:root {
--easeOutBounceEasing: linear(
/* Start to 1st bounce */ 0,
0.063,
0.25,
0.563,
1 36.4%,
/* 1st to 2nd bounce */ 0.812,
0.75,
0.813,
1 72.7%,
/* 2nd to 3rd bounce */ 0.953,
0.938,
0.953,
1 90.9%,
/* 3rd bounce to end */ 0.984,
1 100% 100%
);
}
.ball {
translate: 0 -220%;
animation: drop 2s infinite;
animation-timing-function: var(--easeOutBounceEasing);
}
@keyframes drop {
to {
translate: 0;
}
}
.blinkIcon {
animation: blinkAni 2s ease 0s infinite normal forwards;
}
@keyframes blinkAni {
0%,
50%,
100% {
opacity: 1;
}
25%,
75% {
opacity: 0;
}
}
.scaleIcon {
animation: scaleAni 2s ease 0s infinite normal forwards;
}
@keyframes scaleAni {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@media only screen and (min-width: 900px) {
.offcanvas.offcanvas-start {
width: 700px !important;
}
}
/* fancy & premium tabs start*/
.bookmaker,
.fancy-head,
.premium-head {
position: absolute;
top: 0;
width: 100%;
zoom: 1;
}
.fancy-head h4 {
position: relative;
height: 25px;
line-height: 25px;
font-size: 12px;
color: #fff;
z-index: 1;
float: left;
zoom: 1;
}
.bookmaker .in-play span,
.fancy-head .in-play span,
.premium-head .in-play span {
padding: 0 14px 0 8px;
cursor: pointer;
}
.fancy-head .tc-content h5 span,
.fancy-head h4 span,
.tc-content .fancy-head h5 span {
background-position: 0 -4749px;
}
.fancy-head h4 span {
min-width: 72px;
line-height: 30px;
padding: 0 10px;
vertical-align: top;
display: inline-block;
background: linear-gradient(-180deg, #0a92a5 0%, #087989 82%);
font-weight: 700;
}
.fancy-head .in-play-sportbook span {
background: #e4550e;
cursor: pointer;
border-top-left-radius: 10px;
}
.sprt-card {
display: none;
}
.btn-fancybet_rules,
.btn-premium_rules {
vertical-align: top;
/* margin-left: -4px; */
height: 30px;
font-size: 0;
text-indent: -99999px;
width: 41px;
display: inline-block;
background-repeat: no-repeat;
background-image: url(/assets/themes/betting/images/icon/bg-fanctbet_rules.svg);
}
.btn-premium_rules {
background-image: url(/assets/themes/betting/images/icon/bg-premium_rules.svg);
}
.btn-fancybet_rules::before,
.btn-premium_rules::before {
content: "";
width: 15px;
height: 15px;
background-repeat: no-repeat;
margin: 8px 12px;
background-size: contain;
display: block;
background-image: url('data:image/svg+xml,');
}
.marketinfo {
width: 15px;
height: 15px;
position: absolute;
right: 8px;
top: 8px;
background-repeat: no-repeat;
background-size: contain;
display: inline-block;
background-image: url('data:image/svg+xml,');
}
.fancy-head h4:after {
content: "";
display: block;
clear: both;
}
/* .fancy-head h4:before {
content: "";
position: absolute;
top: 0;
left: -4.5333333333vw;
width: 4.5333333333vw;
height: 8vw;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: 101% 101%
} */
.fancy-head .other-tab {
position: relative;
height: 25px;
line-height: 25px;
color: #c5d0d7 !important;
font-weight: 700;
padding: 0 10px;
margin-left: 7px;
background: #243a48;
z-index: 0;
display: flex;
float: left;
}
.card-fancybet {
background: #0c92a5;
padding: 0;
border: none;
border-radius: unset;
}
.sportbook {
background: linear-gradient(180deg, #f26d1c 15%, #d14100 100%);
padding: 0;
border: none;
border-radius: unset;
}
.casino-sportbook {
background: var(--newsColor);
padding: 0;
border: none;
border-radius: unset;
}
.fancy-bet {
font-size: 12px;
}
.fancy_bet_tab-wrap,
.special_bets-tab-wrap {
background-image: linear-gradient(180deg, #f26d1c 15%, #d14100 100%);
align-items: center;
justify-content: center;
/* padding-left: 5px; */
}
.fancy_bet_back {
background-image: linear-gradient(180deg, #0a92a5 15%, #076875 100%);
}
.special_bets-tab {
width: auto;
border-radius: 5px;
margin: 5px 0 3px;
/* justify-content: center; */
align-items: center;
padding: 0;
overflow-x: auto; /* Show scrollbar only when content overflows */
white-space: nowrap; /* Prevent content from wrapping */
}
.fancy_bet_tab-wrap,
.special_bets-tab {
display: flex;
}
.special_bets-tab li {
list-style: none;
padding: 2px 5px;
position: relative;
}
.special_bets-tab li:first-child::after {
display: none;
}
.special_bets-tab li::after {
content: "";
position: absolute;
top: 50%;
width: 1px;
height: clamp(18px, 5.333vw, 26px);
background-color: rgba(255, 255, 255, 0.4);
transform: translate(-50%, -50%);
}
.special_bets-tab .select a {
background-color: #fff;
color: #a34005;
text-decoration: none;
}
.special_bets-tab a {
min-width: 70px;
height: 18px;
line-height: 18px;
color: rgba(163, 64, 5, 0.85);
font-weight: 700;
border-radius: 4px;
box-sizing: border-box;
padding: 0 5px;
display: block;
text-align: center;
}
.fancy_bet_tab-wrap .select a {
color: #000 !important;
font-size: 12px;
}
.fancy_bet_tab-wrap a {
color: #fff !important;
font-size: 12px;
}
#fancyBetHeadNew {
top: -28px;
}
/* fancy & premium tabs end */
#footerFixedMenu {
z-index: 11 !important;
}
#user-head {
display: none;
}
.text-secondary-light {
color: #777;
}
/* sports page live count start */
.sports-list {
background-image: linear-gradient(180deg, #ffcc2e 0%, #ffbd14 100%);
border-bottom-color: #070707;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
color: #070707;
grid-gap: 1px;
padding: 10px 10px 0;
}
.sports-list .sports-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
grid-gap: 7px;
padding: 5px;
font-weight: 700;
cursor: pointer;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.sports-list .sports-item.active {
padding: 0 10px;
color: #ffb200;
background-image: linear-gradient(180deg, #474747 0%, #070707 100%);
}
.sports-list .sports-item:hover {
background-image: linear-gradient(180deg, #474747 0%, #070707 100%);
padding: 0 10px;
}
.match-count {
position: absolute;
top: -9px;
right: 5px;
font-size: 12px;
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
padding: 0 5px;
}
.match-count .img {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
background-color: #fff;
padding: 0 5px;
}
.match-count .img img {
animation: blink 1s infinite;
}
@keyframes blink {
0% {
opacity: 1;
}
50% {
opacity: 0.4;
}
100% {
opacity: 1;
}
}
.match-count .count {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
background-color: #ee0000;
padding: 0 7px;
color: #fff;
}
/* sports page live count end */
.highlight {
background-image: linear-gradient(-180deg, #2e4b5e 0%, #243a48 82%);
color: #fff;
font-size: clamp(12px, 3.733vw, 18px);
line-height: 1.5;
font-weight: 600;
padding: 7px;
text-align: center;
}
.categorized-by-holder {
background: #ebebeb;
padding: 3px 50px;
}
.categorized-by-list {
display: grid;
grid-template-columns: 1fr 1fr;
background: #d9d9d9;
border-radius: 5px;
border: 2px solid #d1d1d1;
}
.categorized-by-list .categorized-by-item {
font-weight: bold;
font-size: clamp(10px, 3.2vw, 16px);
text-align: center;
padding: 5px;
border-radius: 5px;
}
.categorized-by-list .categorized-by-item.active {
color: #2381e0;
background: #fff;
}
.competition_name {
margin-bottom: 0;
background-color: #eff3f5;
padding: 5px 15px;
border-top: 1px solid #dedede;
border-bottom: 1px solid #dedede;
font-weight: 600;
font-size: 0.9rem;
color: #236bc4;
}
.match-list {
background-color: #fff;
}
.match-item {
display: flex;
padding: 7px;
border-bottom: 1px solid #d9d9d9;
align-items: center;
cursor: pointer;
}
.match-item-left {
width: 4%;
}
.match-item-middle {
width: 88%;
}
.match-item-right {
width: 8%;
text-align: right;
}
.match-item-right svg {
display: inline-block;
width: 25px;
height: 25px;
}
.match-item-right button::before {
content: "";
display: inline-block;
width: 25px;
height: 25px;
background: url('data:image/svg+xml,')
no-repeat;
background-size: contain;
}
/* White SVG for pinned state */
.match-item-right button.btn-success::before {
background: url('data:image/svg+xml,')
no-repeat;
background-size: contain;
}
.inplay-circle {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
background-color: #c1c1c1;
border: 1px solid rgba(51, 51, 51, 0.4);
}
.inplay-circle.active {
background-color: #6bbd11;
border: 1px solid rgba(51, 51, 51, 0.4);
}
.event-name {
font-size: clamp(13px, 4vw, 20px);
color: #2789ce;
font-weight: bold;
}
.no-match-available {
padding: 5px;
color: #b63333;
}
.text-blue {
color: #1127a5 !important;
}
.balance-info .professional-balance,
.profit-loss-info .professional-profit {
font-size: 1.25rem;
font-weight: 600;
margin: 0.2rem 0;
display: block;
color: #fff;
}
.balance-profit-info {
gap: 0;
margin: 0.5rem 0;
color: #fff;
}
.vertical-separator {
width: 1px;
background-color: #ccc;
height: 40px;
margin: 0 1rem;
}
.balance-info,
.profit-loss-info {
padding: 0 0.5rem;
}
.carousel-control-prev-icon,
.carousel-control-next-icon {
display: none;
}
/* promot gif styles */
.promot-gif-wrapper {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
.promot-gif-wrapper::before {
content: "";
position: absolute;
top: clamp(-5px, -1.5vw, -7px);
left: 50%;
transform: translateX(-50%);
width: 96%;
height: clamp(18px, 5.333vw, 26px);
background-image: var(--red-dark-gradient-bg);
border-radius: 50% 50% 0 0;
z-index: -1;
}
@media (max-width: 768px) {
.promot-gif-wrapper::before {
content: "";
position: absolute;
top: clamp(-19px, -5.5vw, -27px);
left: 50%;
transform: translateX(-50%);
width: 110%;
height: clamp(66px, 20.333vw, 91px);
background-image: var(--red-dark-gradient-bg);
border-radius: 50% 50% 0 0;
z-index: -1;
}
}
.promot-gif {
width: 17.8666666667vw;
height: 16.2666666667vw;
margin: 0 auto;
margin-left: 1.133333vw;
margin-top: -5vw;
z-index: 99;
position: relative;
border-radius: 50%;
}
@media (min-width: 768px) {
.promot-gif {
width: 4.5333333333vw;
height: 4.2666666667vw;
margin-top: -1.5vw;
margin-left: 0.466667vw;
}
}
/* Single line ellipsis for titles */
.single-line-ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block; /* Ensure it takes up full width for ellipsis to work */
}
/* Custom Coming Soon Popover Styles */
.coming-soon-popover {
position: absolute;
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 5px 10px;
border-radius: 4px;
font-size: 12px;
z-index: 1000;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.coming-soon-trigger:hover .coming-soon-popover {
opacity: 1;
}
/* Remove modal styles since we're using popovers */
#comingSoonBootstrapModal {
display: none !important;
}
.minified-content {
padding-bottom: 3.5rem;
}
/* Sports Icons CSS */
.icon-cricket {
background: url('data:image/svg+xml,')
no-repeat;
width: 25px;
height: 25px;
display: inline-block;
background-size: contain;
}
.sports-item.active .icon-cricket {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-soccer {
background: url('data:image/svg+xml,')
no-repeat;
width: 25px;
height: 25px;
display: inline-block;
background-size: contain;
}
.sports-item.active .icon-soccer {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-esoccer {
background: url('data:image/svg+xml,')
no-repeat;
width: 26px;
height: 24px;
display: inline-block;
background-size: contain;
}
.sports-item.active .icon-esoccer {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-tennis {
background: url('data:image/svg+xml,')
no-repeat;
width: 25px;
height: 25px;
display: inline-block;
background-size: contain;
}
.sports-item.active .icon-tennis {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-basketball {
background: url('data:image/svg+xml,')
no-repeat;
width: 25px;
height: 25px;
display: inline-block;
background-size: contain;
}
.sports-item.active .icon-basketball {
background: url('data:image/svg+xml,')
no-repeat;
}
.icon-horseracing {
background: url('data:image/svg+xml,')
no-repeat;
width: 24px;
height: 25px;
display: inline-block;
background-size: contain;
}
.sports-item.active .icon-horseracing {
background: url('data:image/svg+xml,')
no-repeat;
}
.a-search {
position: sticky;
z-index: 999;
right: 0;
top: 0px;
padding: 0;
background: #525252 !important;
float: right;
display: block;
min-width: 50px;
min-height: 38px;
}
/* Footer Navigation Active State */
.active-nav {
background-image: linear-gradient(-180deg, #32617f 20%, #1f4258 91%);
}
.a-search:before {
content: "";
position: absolute;
z-index: -1;
right: clamp(41px, 12.8vw, 67px);
width: clamp(34px, 10.267vw, 54px);
height: clamp(39px, 12vw, 63px);
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: clamp(19px, 5.867vw, 29px);
height: clamp(19px, 5.867vw, 29px);
background: url('data:image/svg+xml,')
center no-repeat;
border-radius: clamp(4px, 1.333vw, 7px);
background-size: cover;
}
.info-inplay {
background: url('data:image/svg+xml,')
no-repeat;
border-radius: clamp(4px, 1.333vw, 7px);
}
.game-wrap h4 {
color: #fff;
}
.game-info {
background-color: #243a48;
background-image: linear-gradient(-180deg, #2e4b5e 0%, #243a48 82%);
color: #ffffff;
padding: 10px;
justify-content: space-between;
margin-bottom: 0;
display: flex;
font-weight: bold;
font-size: clamp(11px, 3.467vw, 17px);
}
.match-btn {
justify-content: center;
list-style: none;
background-color: #e0e6e6;
display: flex;
margin: 0;
padding: 0;
}
.match-btn li:last-of-type:after {
display: none;
}
.match-btn li {
position: relative;
}
.match-btn .btn-pin {
background-image: url(../../../images/bg-match-btn-left.png);
}
.match-btn .btn-pin.select {
background-image: url(../../../images/bg-match-btn-left-select.png) !important;
}
.match-btn .btn-refresh {
background-image: url(../../../images/bg-match-btn-right.png);
}
.match-btn a {
align-items: center;
justify-content: center;
width: clamp(88px, 26.667vw, 136px);
height: clamp(25px, 7.467vw, 37px);
background-repeat: no-repeat;
background-size: contain;
color: #fff;
font-size: clamp(10px, 3.2vw, 16px);
font-weight: bold;
display: flex;
}
.match-btn a:before {
content: "";
width: clamp(12px, 3.733vw, 18px);
height: clamp(12px, 3.733vw, 18px);
margin-right: clamp(2px, 0.533vw, 3px);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
.match-btn .btn-pin:before {
background-image: url('data:image/svg+xml,');
}
.match-btn .btn-refresh:before {
background-image: url('data:image/svg+xml,');
}
.match-btn li:after {
content: "";
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: clamp(2px, 0.533vw, 3px);
height: clamp(25px, 7.467vw, 37px);
background: rgba(22, 40, 49, 0.9);
box-shadow: -1px 0 0 0 rgba(255, 255, 255, 0.3) inset;
}
/* Override Bootstrap tab display issue */
.tab-content > .tab-pane.show {
display: block !important;
}
/* Bet ticker animations using transitions instead of keyframes */
.bet-ticker-box.spark-back {
transition: background-color 0.3s ease, color 0.3s ease !important;
background-color: #f8e71c !important;
background: #f8e71c !important;
color: #fff !important;
}
.bet-ticker-box.spark-lay {
transition: background-color 0.3s ease, color 0.3s ease !important;
background-color: #26f1f8 !important;
background: #26f1f8 !important;
color: #fff !important;
}
/* Clean bet ticker animation styles */
.bet-ticker-box.spark-back {
transition: background-color 0.3s ease, color 0.3s ease !important;
background-color: #f8e71c !important;
background: #f8e71c !important;
color: #fff !important;
}
.bet-ticker-box.spark-lay {
transition: background-color 0.3s ease, color 0.3s ease !important;
background-color: #26f1f8 !important;
background: #26f1f8 !important;
color: #fff !important;
}
/* Bookmaker Market specific styles */
.bet-ticker-box.bookmaker-market {
border-radius: clamp(3px, 1.067vw, 5px);
border: clamp(1px, 0.267vw, 2px) solid #fff;
}
/* Selected/Clicked state styles */
.bet-ticker-box.selected-back {
background-color: #1a8ee1 !important;
color: #fff !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}
.bet-ticker-box.selected-lay {
background-color: #f4496d !important;
color: #fff !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}
/* Premium selected state styles */
.bet-ticker-box.selected-premium {
background-color: #16a660 !important;
color: #fff !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}
/* Fancy selected state styles */
.bet-ticker-box.selected-fancy-back {
background-color: #1a8ee1 !important;
color: #fff !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}
.bet-ticker-box.selected-fancy-lay {
background-color: #f4496d !important;
color: #fff !important;
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
}
div#scoreCard {
margin-left: -6px;
margin-right: -6px;
margin-bottom: -4px;
}
.fancy-head .pin-on,
.fancy-head .pin-off {
position: relative;
width: clamp(35px, 10.667vw, 52px);
height: clamp(26px, 8vw, 39px);
margin-right: 0;
background: url('data:image/svg+xml,'),
linear-gradient(-180deg, #0a92a5 0%, #087989 82%);
background-repeat: no-repeat, no-repeat;
background-position: left, right;
background-size: cover, cover;
bottom: 1.5px;
}
.fancy-head .pin-on:before,
.fancy-head .pin-off:before {
position: absolute;
left: clamp(5px, 1.6vw, 8px);
top: clamp(3px, 1.067vw, 5px);
display: block;
width: clamp(19px, 5.867vw, 29px);
height: clamp(19px, 5.867vw, 29px);
background: url('data:image/svg+xml,')
no-repeat;
background-size: cover;
content: "";
}
@media screen and (min-aspect-ratio: 16/9) {
.fancy-head .pin-on,
.fancy-head .pin-off {
width: 5.9970014993vmax;
height: 4.4977511244vmax;
}
.fancy-head .pin-on:before,
.fancy-head .pin-off:before {
left: 0.8995502249vmax;
top: 0.5997001499vmax;
width: 3.2983508246vmax;
height: 3.2983508246vmax;
}
}
.fancy-head .pin-off:before {
background: url('data:image/svg+xml,')
no-repeat center;
background-size: cover;
}