/* Pixel-match layer for the supplied CBTf Exchange reference. */

/* Fix Font Awesome font path — scraped CSS references original filename but
   the actual downloaded file has a hashed name */
@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/717535e6__fontawesome-webfont.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

html,
body {
  margin: 0;
  width: 100%;
  min-height: 100%;
  background: #ededed !important;
  font-family: Tahoma, Helvetica, sans-serif !important;
  font-size: 14px;
  overflow-x: hidden;
}

body * {
  font-family: Tahoma, Helvetica, sans-serif !important;
}

/* Login buttons — ensure icon renders properly */
.login i.fa,
.login i.fa-sign-in {
  display: inline-block !important;
  font-family: 'FontAwesome' !important;
  font-size: 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
  color: #fff !important;
  font-style: normal !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

:root {
  --header-bg: linear-gradient(180deg, #5c0679 0%, #4b0563 100%) !important;
  --login-btn-bg: #f6a21e !important;
  --header-signup-btn-background: #f6a21e !important;
  --sportsbar-bg: linear-gradient(180deg, #ff7a2a 0%, #ff3b1d 100%) !important;
  --dashboard-cmp-mobile-men-background: linear-gradient(180deg, #ff7a2a 0%, #ff3b1d 100%) !important;
  --mbl-sports-bar-bg: linear-gradient(180deg, #ff7a2a 0%, #ff3b1d 100%) !important;
  --markets-border-bottom: #c8ced3 !important;
}

/* Desktop frame shown in the reference */
@media (min-width: 993px) {
  .headerDesktop,
  .hideMobileHeader,
  app-header.headerDesktop.hideMobileHeader {
    display: block !important;
    height: 110px !important;
  }

  .site-header.app-header {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 2000 !important;
    width: 100% !important;
    height: 110px !important;
    background: linear-gradient(180deg, #5c0679 0%, #4b0563 100%) !important;
    border: 0 !important;
    padding: 0 61px 0 6px !important;
  }

  .before-login-items {
    height: 110px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .site-logo-con {
    height: 110px !important;
    margin-left: 0 !important;
  }

  .site-logo {
    width: 242px !important;
    height: 105px !important;
    object-fit: contain !important;
    object-position: left center !important;
    top: 0 !important;
  }

  .searchIconDiv {
    display: none !important;
  }

  .login-signup-uname-pass {
    height: 110px !important;
    gap: 24px !important;
    align-items: center !important;
  }

  .header-uname-pass {
    height: 38px !important;
    gap: 24px !important;
    align-items: center !important;
  }

  .phoneNumberDiv,
  .password.userPassword,
  .username.userPassword {
    width: 280px !important;
    height: 38px !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 5px !important;
    border: 1px solid #c8c8dc !important;
    background: #fff !important;
  }

  .phoneNumberInput,
  .password.userPassword,
  .username.userPassword {
    font-size: 20px !important;
    line-height: 38px !important;
    padding: 0 18px !important;
    color: #444 !important;
  }

  .login-signup {
    gap: 19px !important;
    align-items: center !important;
  }

  .login,
  .signup {
    width: 143px !important;
    height: 38px !important;
    margin: 0 !important;
    border-radius: 5px !important;
    background: #f6a21e !important;
    color: #fff !important;
    font-size: 20px !important;
    line-height: 38px !important;
    font-weight: 700 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  .login b,
  .signup b,
  .login i {
    font-size: 20px !important;
    line-height: 38px !important;
    vertical-align: top !important;
  }

  .app-body {
    display: grid !important;
    grid-template-columns: 346px minmax(720px, 1fr) 468px !important;
    gap: 12px !important;
    margin-top: 110px !important;
    height: auto !important;
    min-height: calc(100vh - 110px) !important;
    padding: 0 6px 0 36px !important;
    background: #ededed !important;
  }

  .sidebar,
  .content,
  .sidebarright {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    right: auto !important;
    position: relative !important;
  }

  .sidebar > *,
  .sidebarright > * {
    width: 100% !important;
    max-width: none !important;
  }

  .sidebarright > app-right-nav > div {
    width: 468px !important;
    position: fixed !important;
  }

  .content,
  .custom-css-layout-center,
  .sideLayout-fullmarket {
    width: 100% !important;
    background: #ededed !important;
    margin-top: 0 !important;
  }
}

/* Sports navigation strip — flows below the banner in the content column */
.mobile-men {
  display: block !important;
  position: relative !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  z-index: auto !important;
  height: auto !important;
  overflow: hidden !important;
  background: linear-gradient(180deg, #ff7a2a 0%, #ff3b1d 100%) !important;
  margin: 0 !important;
  padding: 4px 6px !important;
}

.mobile-men .show-this {
  display: flex !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
}

.mobile-men .menu-list {
  display: flex !important;
  align-items: stretch !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
  flex: 1 !important;
  gap: 2px !important;
  order: 0 !important;
}

.mobile-men .menu-item {
  height: auto !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  border-right: none !important;
}

.mobile-men .menu-item > div {
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 14px !important;
  border-radius: 4px !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
  white-space: nowrap !important;
}

/* Vimaan — black background, red text */
.mobile-men .menu-item.aviator > div {
  background: #000 !important;
  color: #e53935 !important;
}

/* Cricket, Tennis, Soccer, etc. — orange background, black text */
.mobile-men .menu-item.active > div {
  background: transparent !important;
  color: #000 !important;
}

.mobile-men .menu-item:not(.aviator):not(.active) > div {
  background: transparent !important;
  color: #000 !important;
}

.mobile-men .menu-list svg {
  width: 20px !important;
  height: 20px !important;
}

/* Vimaan icon — red on black background */
.mobile-men .menu-item.aviator .aviatorImg {
  filter: brightness(0) saturate(100%) invert(17%) sepia(94%) saturate(7484%) hue-rotate(0deg) brightness(95%) contrast(120%) !important;
  width: 20px !important;
  height: 20px !important;
}

/* Cricket icon — black on orange */
.mobile-men .menu-item.active svg {
  color: #000 !important;
}

/* Tennis, Soccer icons — black on orange */
.mobile-men .menu-item:not(.aviator):not(.active) svg {
  color: #000 !important;
}

.orange-nav-ic-txt,
.menutext {
  font-size: inherit !important;
  line-height: inherit !important;
  position: static !important;
}

/* Search icon — right aligned, dark square */
.a-search {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  order: 1 !important;
  margin-left: auto !important;
  background: #222 !important;
  color: #fff !important;
  padding: 0 12px !important;
  border-radius: 4px !important;
  min-height: 34px !important;
  cursor: pointer !important;
}

.a-search svg {
  width: 20px !important;
  height: 20px !important;
  fill: #fff !important;
}

/* Modal close button — replace empty square with X icon */
.login-popup-content .header-popup a,
.modal .header-popup a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 32px !important;
  height: 32px !important;
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  z-index: 10 !important;
}

.login-popup-content .header-popup a i,
.modal .header-popup a i {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: #e67e22 !important;
  border-radius: 50% !important;
  color: #000 !important;
  font-size: 18px !important;
  font-style: normal !important;
  font-family: 'FontAwesome' !important;
}

.login-popup-content .header-popup a i::before,
.modal .header-popup a i::before {
  content: '\00d7' !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
}

/* Left and right panels */
.sidebar .card,
.sidebarright .card {
  border-radius: 0 !important;
  border: 0 !important;
  background: #fff !important;
}

.sidebar .card-header,
.sidebarright .card-header {
  height: 40px !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  background: #000 !important;
  color: #fff !important;
  border-radius: 0 !important;
  border: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
}

.sidebarright .card-header {
  justify-content: flex-start !important;
}

.sidebar a,
.sidebar li,
.sidebar .nav-link {
  min-height: 44px !important;
  color: #0d2a66 !important;
  font-size: 20px !important;
  line-height: 44px !important;
}

/* Hero/banner */
.custom-owl-carousel,
.owl-carousel,
.owl-stage-outer,
.owl-stage,
.owl-item {
  height: 288px !important;
}

.custom-owl-carousel .owl-item img,
.custom-owl-carousel .img,
.owl-carousel .owl-item img {
  width: 100% !important;
  height: 288px !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block !important;
}

.owl-dots {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 14px !important;
  text-align: center !important;
}

.owl-dot span,
.owl-theme .owl-dots .owl-dot span {
  width: 15px !important;
  height: 15px !important;
  margin: 0 10px !important;
  background: #d2d2d2 !important;
  opacity: 1 !important;
}

/* Highlights/table */
.game-highlight-wrap {
  margin: 0 !important;
  padding: 0 !important;
}

.game-highlight-wrap h3 {
  height: 30px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  background: linear-gradient(180deg, #ff7a2a 0%, #ff3b1d 100%) !important;
  color: #000 !important;
  font-size: 16px !important;
  line-height: 30px !important;
  font-weight: 700 !important;
}

.game-menu-tab {
  margin: 0 !important;
  padding: 0 !important;
}

.game-menu-tab .nav-tabs {
  height: 24px !important;
  background: #d7d7d0 !important;
  border: 0 !important;
}

.game-menu-tab .nav-tabs .nav-link {
  width: 128px !important;
  height: 24px !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  color: #fff !important;
  background: #223a4a !important;
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
  text-align: center !important;
}

.game-menu-tab .nav-tabs .nav-link.active {
  color: #000 !important;
  background: #fff !important;
}

.dashboard-custom-table {
  width: 100% !important;
  table-layout: fixed !important;
  background: #fff !important;
  margin: 0 !important;
  border-collapse: collapse !important;
}

.dashboard-custom-table thead th {
  height: 24px !important;
  padding: 0 6px !important;
  background: #d7d7d0 !important;
  color: #000 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  font-weight: 700 !important;
}

.dashboard-custom-table tbody tr {
  height: 44px !important;
  border-bottom: 1px solid #c8ced3 !important;
}

.dashboard-custom-table tbody td {
  padding-top: 2px !important;
  padding-bottom: 2px !important;
  vertical-align: middle !important;
  font-size: 15px !important;
}

/* Casino games category strip — Popular, Universe Live, Universe Original */
app-old-casino .mobile-men {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  background: linear-gradient(180deg, #ff7a2a 0%, #ff3b1d 100%) !important;
  padding: 4px 6px !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

app-old-casino .mobile-men::-webkit-scrollbar {
  display: none !important;
}

app-old-casino .mobile-men .menu-list {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  overflow: visible !important;
  position: relative !important;
}

app-old-casino .mobile-men .menu-item {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

app-old-casino .mobile-men .menu-item > div {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 30px !important;
  padding: 0 18px !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}

/* Popular — black background, white text (unchanged) */
app-old-casino .mobile-men .menu-item.active > div {
  background: #000 !important;
  color: #fff !important;
}

/* Universe Live, Universe Original, International, etc. — orange background, black text */
app-old-casino .mobile-men .menu-item:not(.active) > div {
  background: transparent !important;
  color: #000 !important;
}

app-old-casino .mobile-men .orange-nav-ic-txt,
app-old-casino .mobile-men .menutext {
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 30px !important;
  position: static !important;
}

.td-event-name,
.td-event-name a,
.match-name {
  color: #2384d4 !important;
  font-size: 15px !important;
  line-height: 22px !important;
  font-weight: 700 !important;
}

.match-time,
.match-date {
  color: #6f6f6f !important;
  font-size: 13px !important;
}

.back,
.lay,
.back-1,
.lay-1,
.back-2,
.lay-2,
.back-3,
.lay-3 {
  height: 31px !important;
  min-width: 75px !important;
  border-radius: 0 !important;
  color: #000 !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 31px !important;
  text-align: center !important;
}

.back,
.back-1,
.back-2,
.back-3 {
  background: #72bbef !important;
}

.lay,
.lay-1,
.lay-2,
.lay-3 {
  background: #faa9ba !important;
}

/* Chat widgets in the reference */
.zsiq_floatmain,
.zsiq_float,
.zsiq_theme1,
.zsiq_theme2,
.stickyContactus,
.stickyContactusText {
  z-index: 2100 !important;
}

@media (max-width: 992px) {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden;
  }

  .site-header.app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 2000 !important;
    height: 55px !important;
    background: linear-gradient(180deg, #5c0679 0%, #4b0563 100%) !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .before-login-items {
    height: 55px !important;
    display: flex !important;
    align-items: center !important;
  }

  .site-logo-con {
    height: 55px !important;
    margin-left: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .site-logo {
    width: 160px !important;
    height: 55px !important;
    object-fit: contain !important;
    object-position: left center !important;
    top: 0 !important;
    left: 4px !important;
  }

  .searchIconDiv {
    display: none !important;
  }

  .login-signup-uname-pass {
    height: 55px !important;
  }

  .header-uname-pass {
    display: none !important;
  }

  .login-signup .login,
  .login-signup .signup {
    width: auto !important;
    height: 33px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    line-height: 33px !important;
    border-radius: 4px !important;
  }

  .mobile-men {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: auto !important;
  }

  .mobile-men .menu-item > div {
    height: 34px !important;
    font-size: 14px !important;
  }

  /* Keep casino category strip in flow on mobile (not fixed) */
  app-old-casino .mobile-men {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    z-index: auto !important;
  }

  .app-body {
    margin-top: 55px !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Cancel the scraped .content margin-top that doubles the offset */
  .content {
    margin-top: 0 !important;
  }

  .custom-owl-carousel,
  .owl-carousel,
  .owl-stage-outer,
  .owl-stage,
  .owl-item,
  .custom-owl-carousel .owl-item img,
  .custom-owl-carousel .img,
  .owl-carousel .owl-item img {
    height: 26vw !important;
    min-height: 97px !important;
    max-height: 220px !important;
  }

  .game-highlight-wrap h3 {
    height: 30px !important;
    font-size: 16px !important;
    line-height: 30px !important;
  }
}