/* The PIXI reference moves individual world objects. Never translate the SVG scene as one sheet. */
.exact-stage svg > g { transform: none !important; }

@media screen and (max-width: 850px) {
  html, body, #root, .jetx-form { width: 100% !important; min-width: 0 !important; height: auto !important; min-height: 100% !important; overflow-x: hidden !important; }
  body { padding: 25px 0 38px !important; background: var(--background) !important; }
  .loader-hood-react { height: 25px !important; }
  .hood-smartsoft-logo { width: 145px !important; height: 25px !important; margin-left: 5px !important; flex-basis: 145px !important; background-size: 145px auto !important; }
  .hood-timer-container { width: 112px !important; margin-right: 7px !important; flex-basis: 112px !important; font-size: 12px !important; }

  header { position: fixed !important; top: 25px !important; left: 0 !important; width: 100% !important; height: 40px !important; padding: 4px !important; background: var(--grey) !important; z-index: 5 !important; }
  header .content { width: 100% !important; min-width: 0 !important; height: 32px !important; padding: 0 !important; }
  header .logo { float: left !important; width: 60px !important; height: 23px !important; margin: 5px 0 0 6px !important; background: var(--logo) center/contain no-repeat !important; }
  header .promotion-button, header .promotion-dailyleaderboard-button, header .promotion-wheel-button, header .jackpot, header .stop-button-div, header .hide-bets, header .user, header .redirect-to-history-parent, header .lobby-icon, header #balloon-icon, header #plinko-icon { display: none !important; }
  header .right { display: block !important; float: right !important; width: auto !important; height: 32px !important; margin: 0 2px !important; }
  header .right:has(.exit), header .right:has(.chat-icon), header .right:has(.menu-icon) { display: block !important; }
  header .right .button { width: 32px !important; height: 32px !important; }
  header #balance { display: block !important; width: auto !important; max-width: 146px !important; height: 32px !important; margin: 0 2px !important; padding: 3px 6px !important; border-radius: 6px !important; font-size: 8px !important; }
  header #balance svg { width: 15px !important; height: 15px !important; margin-right: 4px !important; }
  header #balance .value { display: block !important; font-size: 11px !important; line-height: 13px !important; }

  section#game { width: 100% !important; height: auto !important; min-height: calc(100vh - 63px) !important; padding: 40px 0 0 !important; overflow: visible !important; }
  section#game > .content { display: block !important; width: 100% !important; min-width: 0 !important; height: auto !important; padding: 0 !important; }
  #left.header-history { position: relative !important; display: block !important; width: 100% !important; height: 28px !important; padding: 0 !important; overflow: hidden !important; background: var(--background) !important; }
  #left.header-history .history-list { position: absolute !important; left: 0 !important; top: 0 !important; display: block !important; width: 100% !important; height: 28px !important; padding: 4px 4px 0 !important; overflow: hidden !important; white-space: nowrap !important; }
  #left.header-history .history-item { display: inline-block !important; width: auto !important; min-width: 41px !important; height: 20px !important; margin: 0 4px 4px 0 !important; padding: 0 9px !important; border-radius: 6px !important; line-height: 20px !important; font-size: 11px !important; vertical-align: top !important; }

  #main { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 0 !important; }
  #main .rtp { display: none !important; }
  #main > div:has(> .exact-canvas) { width: 100% !important; height: 176px !important; margin: 0 0 5px !important; aspect-ratio: auto !important; }
  #main > div > .exact-canvas, #main .canvas { position: relative !important; width: 100% !important; height: 176px !important; margin: 0 0 5px !important; border-radius: 3px !important; }
  .exact-stage { border-radius: 3px !important; }
  .exact-stage svg { transform: none !important; }
  .exact-coefficient { top: 44% !important; font-size: 54px !important; }
  .round-loader-caption { font-size: 7px !important; }
  #online-users { right: 8px !important; bottom: 4px !important; transform: none !important; font-size: 12px !important; }

  #main .buttons { display: block !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 0 !important; background: var(--background) !important; }
  #main .cash-game { display: block !important; width: 100% !important; height: auto !important; }
  #main .buttons-col { display: block !important; width: 100% !important; min-height: 0 !important; margin: 0 0 5px !important; padding: 0 5px !important; }
  #main .buttons-col#button-1 { display: none !important; }
  #main .buttons-col .bet-div { display: grid !important; width: 100% !important; min-height: 151px !important; grid-template-columns: calc(50% - 2.5px) calc(50% - 2.5px); grid-template-rows: auto auto; gap: 5px; padding: 5px !important; border-radius: 6px !important; background: var(--button-background) !important; }
  #main .buttons-col .bet-col1 { display: contents !important; }
  #main .buttons-col .bet-input.bets { grid-column: 1; grid-row: 1; }
  #main .buttons-col .bet-list { grid-column: 1; grid-row: 2; }
  #main .buttons-col .bet-input.cash-out { grid-column: 2; grid-row: 1; }
  #main .buttons-col > .bet-div > .bet-col2 { display: block !important; width: 100% !important; height: 65px !important; grid-column: 2; grid-row: 2; }
  #main .buttons-col > .bet-div > .bet-col2 .bet { height: 65px !important; }
  #main .bet-input { width: 100% !important; margin-bottom: 0 !important; }
  #main .bet-input .auto { height: 28px !important; margin-bottom: 5px !important; line-height: 28px !important; }
  #main .bet-input .label { font-size: 10px !important; }
  #main .bet-input .input { height: 34px !important; }
  #main .bet-input .input > div { height: 34px !important; }
  #main .bet-list { display: flex !important; gap: 3px !important; }
  #main .bet-list a { width: 25% !important; height: 27px !important; margin: 0 !important; line-height: 27px !important; font-size: 10px !important; }

  #right.info-div { display: block !important; width: 100% !important; height: calc(100vh - 405px) !important; min-height: 180px !important; padding: 0 5px 38px !important; text-align: center !important; }
  #right.info-div > .info { width: 100% !important; height: 100% !important; }
  #right.info-div .info-tabs { display: none !important; }
  #right.info-div .info-content { display: block !important; width: 100% !important; height: 100% !important; overflow: hidden !important; }
  #right.info-div .info-content .head { position: sticky !important; top: 0 !important; width: 100% !important; height: 28px !important; padding-right: 13px !important; border-radius: 6px 6px 0 0 !important; line-height: 28px !important; font-size: 11px !important; }
  #right.info-div .info-content .list { height: calc(100% - 30px) !important; overflow-y: auto !important; }
  #right.info-div .info-content .row { width: 100% !important; height: 26px !important; margin-bottom: 1px !important; padding-right: 13px !important; border-radius: 0 !important; line-height: 26px !important; font-size: 11px !important; }

  .jetx-mobile-bar { display: none !important; }
  footer.reference-mobile-footer { position: fixed !important; right: 0 !important; bottom: 0 !important; left: 0 !important; z-index: 10000 !important; display: block !important; width: 100% !important; height: 38px !important; padding: 1px 5px !important; overflow: hidden !important; background: #000 !important; white-space: nowrap !important; }
  footer.reference-mobile-footer .footer-menu, footer.reference-mobile-footer .footer-menu > div { display: block !important; height: 36px !important; overflow: hidden !important; }
  footer.reference-mobile-footer a { position: relative !important; display: inline-block !important; height: 36px !important; margin: 0 -2px !important; padding: 0 9px !important; color: #858ba3 !important; font: 10px/36px var(--font-family-medium) !important; }
  footer.reference-mobile-footer a.active { color: var(--tab-color) !important; }
  footer.reference-mobile-footer a.active:before { content: ''; position: absolute; left: 2px; bottom: 0; width: calc(100% - 2px); height: 4px; border-radius: 4px 4px 0 0; background: var(--tab-color); }
  footer.reference-mobile-footer a.menu { float: right !important; }

  .menu-div { position: fixed !important; z-index: 10020 !important; right: 0 !important; bottom: 38px !important; left: auto !important; top: auto !important; width: 100% !important; height: calc(100% - 38px) !important; background: transparent !important; }
  .menu-div-content { position: fixed !important; right: 10px !important; bottom: 42px !important; width: 172px !important; padding: 4px !important; border-radius: 6px !important; background: #1c1e29 !important; }

  .sound-consent { display: block !important; padding: 0 !important; background: rgba(0,0,0,.6) !important; backdrop-filter: blur(5px); }
  .sound-consent-card { position: absolute !important; left: 5% !important; top: 50% !important; box-sizing: border-box !important; width: 90% !important; max-width: none !important; height: 155px !important; margin: -77px 0 0 !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: #1f2129 !important; box-shadow: 0 0 20px rgba(0,0,0,.5) !important; }
  .sound-consent-icon, .sound-consent-copy { display: none !important; }
  .sound-consent-title { box-sizing: border-box !important; height: 76px !important; margin: 0 !important; padding-top: 30px !important; color: transparent !important; font-size: 0 !important; line-height: 16px !important; }
  .sound-consent-title:after { content: 'Would you like sound?'; color: #fff; font: bold 14px/16px var(--font-family-nu4, var(--font-family-bold)); }
  .sound-consent-actions { display: flex !important; justify-content: center !important; gap: 14px !important; }
  .sound-consent-actions button { display: block !important; width: 135px !important; height: 50px !important; flex: none !important; margin: 0 !important; padding: 0 !important; border-radius: 6px !important; color: transparent !important; background: #353843 !important; font-size: 0 !important; }
  .sound-consent-actions button:after { color: #fff; font: bold 14px/50px var(--font-family-nu4, var(--font-family-bold)); }
  .sound-consent-actions button.sound-on:after { content: 'Yes'; }
  .sound-consent-actions button:not(.sound-on):after { content: 'No'; color: #a8abbd; }
  .sound-consent-actions button:before { content: ''; display: inline-block; width: 18px; height: 18px; margin: 0 10px -4px 0; background: url('/reference/JetXStg3/Content/ImagesLight/Mobile/sound-no.svg') center/contain no-repeat; }
  .sound-consent-actions button.sound-on:before { background-image: url('/reference/JetXStg3/Content/ImagesLight/Mobile/sound-yes.svg'); }
}

@media screen and (max-width: 359px) {
  footer.reference-mobile-footer a { padding: 0 6px !important; font-size: 9px !important; }
  .sound-consent-actions { gap: 8px !important; }
  .sound-consent-actions button { width: 128px !important; }
}