@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
: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: "Inter", sans-serif;
  --radius: 1.5rem;
  --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(180deg, #710001 60%, #2e0000);
  --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, #4b464a 5%, #c10b1a);
}

* { 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: .875rem;transition: all .3s ease-in-out;line-height: 1.4;background-color: var(--body-bg);padding-top: var(--menu-height);padding-bottom: 6rem; }
.fs-12 { font-size: 12px; }
.fs-8 { font-size: 8px; }
.fs-9 { font-size: 9px; }
.fs-10 { font-size: 10px; }
.fs-11 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-15 { font-size: 0.937rem; }
.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: rgba(140, 141, 146, 1);}
a:hover {color: var(--brand);}
.btn:focus, .form-control:focus, .form-select:focus, .form-check-input:focus { box-shadow: none; }
.btn { padding: .35rem 1rem .45rem 1rem;border-radius: .2rem;justify-content: center;font-size: 13px; align-items: center;gap: .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: var(--white);
    background-image: linear-gradient(-180deg, #2f424d 0%, #141e21 100%);
    border-color: #333 !important;
}
.btn-outline-secondary { color: #243a48;background: rgba(197, 208, 215, .4);border-color: #7e97a7;  }
.btn-outline-primary { background-color: rgba(94, 190, 255, .15);border: 1px solid #7e97a7;color: #3b5160; }

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
  max-width: 575px;
  padding-left: .5rem;padding-right: .5rem;
}
.form-control { font-size: .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: .25rem;border-radius: .5rem;background-color: var(--light-gray);position: absolute;top: .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: 3.1rem; }
.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: 38px; }
.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: 8px; }
.navbar .balance__btn .count { font-size: 10px; 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,.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-image: var(--red-dark-gradient-bg);color: #fff; }
.footer__fixed__menu .active { background-image:var(--red-dark-gradient-bg);color: #fff; }
.footer__fixed__menu a { font-size: 10px;line-height: 10px; }
.footer__fixed__menu a svg { width: 26px;height: 21px; }

/* 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: 4px solid var(--yellow); color: var(--white);
}
.game__card .title__box a { color: var(--white); }
.game__card .play__btn { background: var(--red-dark-gradient-bg);color: var(--white);padding: .2rem .25rem .2rem .75rem;font-size: 12px;clip-path: polygon(10% 0%, 100% 0%, 100% 100%, 0% 100%);width: calc(4.5rem + 2px);margin-left: -2px; }

.support__box { padding-left: 12% !important; }
.policy__link a { color: #666;font-size: 15px;
  font-weight: 700;
  text-decoration: none; }
.policy__link li:not(:last-child)::after { content: '|';display: inline-block;color: #bbb;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: 3rem; }
.login__wrapper .support__box { background-color: rgba(255,255,255,.6); }
.login__wrapper .policy__link a { color: rgba(255, 255, 255, 0.9); }
.login__wrapper .policy__link li:not(:last-child)::after { color: rgba(255, 255, 255, 0.9); }
.btn-login {     background: linear-gradient(180deg, #4b464a 5%, #c10b1a);border: 1px solid var(--black);color: var(--white);letter-spacing: 1px; }
.login__wrapper .support__box .link__dark { color: var(--white); }
.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: 13px;height: 13px;background-repeat: no-repeat;background-size: 9px;background-position: center center;border-radius: 3px; }
.game__icon.play { background-image: var(--play);background-color: #e4550f; }
.game__icon.live { background-image: var(--live);background-color: #1876b2; }
.game__icon.clock { background-image: var(--clock);background-color: #60ba1e; }
.game__icon.fancy { background-image: var(--fancy);background-color: #0a92a5; }
.game__icon.bookmark { background-image: var(--bookmark);background-color: #1876b2; }
.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: 1.3333333333vw solid rgba(0, 0, 0, 0);border-bottom: 3.7333333333vw solid #fff; }
.play__list { border-bottom: 2px solid var(--dark); }
.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; }
.play__list a .status { width: 10px;height: 10px;background-color: #c5d0d8;left: 0rem;bottom: 0.2rem;border: 1px solid rgba(51,51,51,.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: .25rem;overflow: hidden;background-color: #a2b1ba;box-shadow: inset 0 0.2666666667vw 0.8vw 0 rgba(0,0,0,.5);cursor: pointer; }
.switch__btn .icon { position: absolute;left: 3px;top: 3px;width: 8px;height: 20px;background: #fff;box-shadow: 0 0.5333333333vw 1.0666666667vw 0 rgba(0, 0, 0, .5), inset 0 -0.8vw 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, .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, .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, .15); }


.game__wrap { background-color: var(--black); }
.game__wrap .reload__btn { border-left: 1px solid rgba(255,255,255,.15);width: 2.5rem;height: 3.5rem; }
.date { font-size: 8px;color: #7e97a7; }

.info__table .info__box { width: 8rem; }
.info__table .btn__sort { background: #e0e6e6;clip-path: polygon(0 1%, 100% 0, 84% 100%, 0% 100%); }
.info__table .bg-blue { background-color: #72bbef; }
.info__table .bg-red { background-color: #faa9ba; }
.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,<svg viewBox="0 0 40 30" preserveAspectRatio="xMinYMax" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h32l8 30H0z" fill="%23182832"/></svg>'),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; }
.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; }
.collapse__box { background-color: #dceaf4; }
.collapse__box .btn-secondary.max { background-color: rgba(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, .4);border-color: #be79094a;width: calc(100% - 4rem);height: 2.4rem; }
.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; }


.form-check-input { box-shadow: inset 0 1px 0 0 rgba(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: .5rem; }

.noscroller::-webkit-scrollbar { display: none; }
.noscroller { -ms-overflow-style: none;scrollbar-width: none; }
.wrapper {
  padding-left: 0px !important;
}
body {
  background: #ffffff !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;
}