.sportsbook iframe {
  height: calc(100% - 1px);
}

.sportsbook .slot-iframe.show {
  top: 125px;
  height: calc(100vh - 125px);
}

.PhoneInput input:focus-visible {
  outline: 0;
}

.PhoneInput input {
  border: 0;
}

.login-auth-box {
  width: 500px;
  max-width: 90%;
}

.login-auth input {
  padding: 10px;
  width: 60px !important;
  height: 60px !important;
}

.login-auth > div {
  margin-top: 20px;
  justify-content: space-between;
}

.live-casino-bets .game-name {
  width: 110px;
}

.live-casino-bets .report-type {
  width: 70px;
}

.live-casino-bets .report-amount {
  width: 70px;
}

#floater {
  position: absolute;
  top: 50vh;
  right: 0;
  width: 50px;
  height: auto;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 10001;
  border-radius: 3px 0 0 3px;
  padding: 0px;
  box-shadow: rgb(255 255 255 / 98%) -5px 0px 10px -5px;
  /* background-color: #41a6d9; */
  /* color: white; */
  text-align: center;
  box-sizing: border-box;
}

#floater img {
  width: 50px;
  height: 50px;
}

.modal-18plus img {
  height: 30px;
}
.login-page {
  justify-content: flex-start;
}
.login-box {
  margin: 2% 0;
}
.footer.footer-login {
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
}
.grecaptcha-badge {
  visibility: hidden;
}
.username-text .success-form {
  width: 100%;
  text-align: left;
}
.phnumber-text .success-form {
  width: 100%;
  text-align: left;
}
.blink-message {
  display: flex;
  align-items: center;
  color: var(--text-sidebar);
  padding: 5px;
}
.blink-message > div {
  -moz-animation: blinktext normal 1s infinite ease-in-out;
  -webkit-animation: blinktext normal 1s infinite ease-in-out;
  -ms-animation: blinktext normal 1s infinite ease-in-out;
  animation: blinktext normal 1s infinite ease-in-out;
  text-decoration: underline;
  line-height: 1.5;
  font-size: 18px;
}
@-moz-keyframes blinktext {
  0% {
    opacity: 1;
    color: red;
  }

  50% {
    opacity: 1;
    color: yellow;
  }

  100% {
    opacity: 1;
    color: red;
  }
}

@-webkit-keyframes blinktext {
  0% {
    opacity: 1;
    color: red;
  }

  50% {
    opacity: 1;
    color: yellow;
  }

  100% {
    opacity: 1;
    color: red;
  }
}

@-ms-keyframes blinktext {
  0% {
    opacity: 1;
    color: red;
  }

  50% {
    opacity: 1;
    color: yellow;
  }

  100% {
    opacity: 1;
    color: red;
  }
}

@keyframes blinktext {
  0% {
    opacity: 1;
    color: red;
  }

  50% {
    opacity: 1;
    color: yellow;
  }

  100% {
    opacity: 1;
    color: red;
  }
}
@media screen and (max-width: 767px) {
  .login-auth input {
    padding: 10px;
    width: 40px !important;
    height: 40px !important;
  }

  .sportsbook .slot-iframe.show {
    top: 50px;
    height: calc(100vh - 50px);
    left: 0;
    width: 100%;
  }
  .login-box img {
    max-height: 70px;
  }
  .social-icon {
    height: 30px;
    width: 30px;
  }
  .social-icon img {
    height: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1199px) {
  .sportsbook .slot-iframe.show {
    top: 60px;
    height: calc(100vh - 60px);
    left: 0;
    width: 100%;
  }
}

/* ── LIVE CASINO (reference panel jaisa) ────────────────────────────────────────────────
   Owner ko reference (jeetkaadda) ka Live Casino hoobahoo chahiye. Uska markup is repo ki
   hi classes par chalta hai (casino-list / casino-list-item rect rect2 / ...), isliye zyada
   kuch nahi chahiye — sirf do farak the, jo yahan SIRF `.live-casino-page` ke andar theek
   kiye gaye hain taaki baaki casino pages waise ke waise rahein:

   1) DESKTOP par grid: reference me tile `calc(10% - 1.8px)` chaudi hai (10 ek line me).
      Is repo me `.casino-list-item` 14.28% (7 ek line me) aur `.rect` 16.66% (6) hai.
   2) `rect2`: reference me ye class banner ko 53.33% (chaudi patti) banati hai. Is repo me
      `rect2` ka koi rule hai hi nahi — `.rect` khud 53.33% karta hai, to nateeja wahi banta
      hai; phir bhi rule saaf-saaf likh diya taaki markup aur CSS ek doosre se na bhatke.

   MOBILE par kuch nahi likha — dono repo ke mobile rules pehle se BILKUL EK JAISE hain
   (tile 33.33%, `.rect` par calc(50% - 10px), banner 53.33%), naap kar milaya. */
/* Grid — sab kuch NAAP kar (reference: allpanel9.global/live-casino-list/CS/24):
     reference mobile  : 2 per row, tile 177x95     |  hamara: 2 per row, 175x94   -> mil gaya
     reference desktop : 7 per row, tile 138x74     |  hamara: 6 per row (.rect 16.66%)
   Mobile par kuch likhna hi nahi tha — responsive.css ke rules pehle se barabar hain.
   Desktop par `.rect` 16.66% (6 per row) karta hai, isliye ek line me 7 laane ke liye use
   base wali chaudai (14.28%) par le aaye — bilkul waise hi jaise reference me ek line me 7
   aate hain.
   ⚠️ Tile ka PIXEL naap barabar nahi hoga aur wo theek hai: reference ka content-area ~978
   chauda hai, hamara ~1175 (sidebar ka layout alag hai). Isliye milaan "ek line me kitne"
   ka hai, pixel ka nahi — warna hamare yahan tiles jaan bujh ke chhoti karni padti.

   Pehle maine 10-per-row ka override likha tha — wo jeetkaadda repo ki CSS se aaya tha, jo
   asli reference hai hi nahi; usse tiles chhoti (117x62) ho gayi thi. */
@media only screen and (min-width: 768px) {
  .live-casino-page .casino-list-item.rect {
    width: calc(14.28% - 1.8px);
  }
}
.live-casino-page .casino-list-item.rect.rect2 .casino-list-item-banner {
  padding-top: 53.33%;
}

/* search ke chalte hue rangeen border ka animation (reference me inline <style> se aata tha) */
@keyframes liveBorderMove {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* DEMO ki TV — asli stream nahi chalti, taale wali tasveer aati hai.
   Asli TV `.live-tv` me iframe absolute baithta hai, isliye dabbe par 16:9 ki padding hoti
   hai. Tasveer normal flow me hai, to wahi padding neeche ek badi khali patti chhod deti thi
   (owner: "live tv m kafi space aa reha hai demo m"). Demo wale dabbe me padding hata di —
   ab tasveer jitni jagah chahiye, utni hi. */
.live-tv.live-tv-demo {
  padding-bottom: 0;
}
.live-tv.live-tv-demo img {
  position: static;
  display: block;
  width: 100%;
  height: auto;
}

/* ── IN-IFRAME MODE (When embedded inside Admin Market Analysis) ── */
.in-iframe-mode .header-top,
.in-iframe-mode .header-bottom,
.in-iframe-mode .header,
.in-iframe-mode .header-menu,
.in-iframe-mode .header-top-menu,
.in-iframe-mode .latest-event,
.in-iframe-mode .latest-events-container,
.in-iframe-mode .latest-event-item,
.in-iframe-mode .news,
.in-iframe-mode .top-header,
.in-iframe-mode .header-rules,
.in-iframe-mode .user-details,
.in-iframe-mode #floater,
.in-iframe-mode .footer,
.in-iframe-mode .footer-top,
.in-iframe-mode .footer-bottom,
.in-iframe-mode .footer-text,
.in-iframe-mode .footer-links,
.in-iframe-mode .support-detail,
.in-iframe-mode .secure-logo,
.in-iframe-mode .social-icons-box,
.in-iframe-mode .right-sidebar,
.in-iframe-mode .sidebar,
.in-iframe-mode .left-sidebar,
.in-iframe-mode .sidebar-box,
.in-iframe-mode footer,
.in-iframe-mode header {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.in-iframe-mode,
.in-iframe-mode html,
.in-iframe-mode body,
.in-iframe-mode #root,
.in-iframe-mode .main-content,
.in-iframe-mode .page-content,
.in-iframe-mode .container-fluid,
.in-iframe-mode .sports-page,
.in-iframe-mode .sports-container,
.in-iframe-mode .center-main-container,
.in-iframe-mode .center-container,
.in-iframe-mode .home-page,
.in-iframe-mode .bet-table,
.in-iframe-mode .bet-table-body,
.in-iframe-mode .horse-list-box {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}

.in-iframe-mode .center-main-container {
  width: 100% !important;
}

/* Hide Latest Event bar & header-top-menu completely */
.latest-event,
.latest-events-container,
.latest-event-item,
.header-top-menu {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.header-top-menu::-webkit-scrollbar,
.latest-events-container::-webkit-scrollbar {
  display: none !important;
}