#PageSpinner {
  position: fixed;
  inset: 0;
  margin: 0;
  padding: 0;
  display: flex !important;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  background: #0e1f04;
  z-index: 9999999;
  visibility: visible;
  opacity: 1;
}

#PageSpinner.Hide {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: visibility 0.35s linear, opacity 0.35s linear;
}

#PageSpinner .SpinnerWrapper,
#PageSpinner .CircleBorder,
#PageSpinner .SpinnerContainer,
#PageSpinner .AppVersion {
  display: none !important;
}

#PageSpinner .MainIcon {
  display: block;
  width: 132px;
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.jj-splash-mark {
  position: absolute;
  z-index: 12;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 28px;
  letter-spacing: -0.4px;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}
.jj-splash-mark .jj-jojo { color: #f3f3f3; }
.jj-splash-mark .jj-bet { color: #f6eb1f; }

#PageSpinner .LoadingScreen {
  display: block !important;
  position: relative;
  width: 228px;
  height: 228px;
  border-radius: 50%;
  background: linear-gradient(#F5C51F, #F49920);
  animation: animateLoadingScreen 1.2s linear infinite;
  box-shadow: 0 0 28px 8px rgba(245, 197, 31, 0.55), 0 0 80px 18px rgba(244, 153, 32, 0.28);
  transform: translateZ(0);
  will-change: transform;
}

@keyframes animateLoadingScreen {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#PageSpinner .LoadingScreen span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: linear-gradient(#F5C51F, #F49920);
  transform: translateZ(0);
  pointer-events: none;
}
#PageSpinner .LoadingScreen span:nth-child(1) { filter: blur(5px); }
#PageSpinner .LoadingScreen span:nth-child(2) { filter: blur(10px); }
#PageSpinner .LoadingScreen span:nth-child(3) { filter: blur(25px); }
#PageSpinner .LoadingScreen span:nth-child(4) { filter: blur(90px); }

#PageSpinner .LoadingScreen:after {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: #0e1f04;
  border-radius: 50%;
  opacity: 0.96;
  z-index: 1;
}

body {
  background: #0e1f04;
}

img.LazyImage {
  opacity: 1 !important;
}

.SportsIframeWrapper,
#SportsIframe,
iframe.SportsIframe {
  min-height: 920px;
  width: 100%;
  border: 0;
  background: #0a0a0a;
  overflow: visible;
}
.SectionContent .SportsIframeWrapper {
  background: #0a0a0a;
  margin: 0;
}

.jj-guest {
  display: contents;
}

.jj-logged {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  position: relative;
}

.OperatorAccountContainer .jj-logged {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}
.OperatorAccountContainer .Button.OperatorHeaderDeposit {
  color: #294c0b;
}
.OperatorAccountContainer .Button.OperatorHeaderDeposit .PlusIcon svg {
  width: 1.2rem;
  margin-left: 0.4rem;
  fill: #294c0b;
}
.OperatorAccountContainer .Button.ToggleUserMenu {
  min-width: 0;
  padding: 0.5rem 0.7rem 0.2rem;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #f9c408 !important;
  fill: #f9c408 !important;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.OperatorAccountContainer .Button.ToggleUserMenu:hover {
  background: transparent;
  color: #f9c408;
  fill: #f9c408;
}
.OperatorAccountContainer .ToggleUserMenu svg {
  width: 2.4rem;
  height: 2.4rem;
  fill: #f9c408;
  margin-left: 0.2rem;
  vertical-align: middle;
}
.OperatorAccountContainer .ContentTriggerWrapper {
  position: relative;
}
.OperatorUserMenu {
  display: block;
  width: 32rem;
  position: absolute;
  top: 5.2rem;
  right: 0;
  z-index: 10050;
  background: #fff;
  color: #212121;
  fill: #252a31;
  font-size: 1.6rem;
  line-height: 2rem;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  box-shadow: rgba(90, 90, 90, 0.45) 0 6px 8px 0;
}
.ContentTriggerWrapper.IsActive .OperatorUserMenu,
.OperatorAccountContainer.IsActive .OperatorUserMenu {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
}
.OperatorUserMenuWrapper {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: #f3f3f3;
  padding: 0 0 1.5rem;
}
.OperatorUserMenuWrapper .OperatorUserText {
  padding: 1.6rem;
  font-weight: 600;
  color: #212121;
}
.OperatorUserMenuWrapper .TotalBalanceWrapper {
  box-sizing: border-box;
  padding: 1.6rem 0;
  margin: 0 1.6rem;
  font-size: 1.6rem;
  font-weight: 600;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
}
.OperatorUserMenuWrapper .BalanceWrapper,
.OperatorUserMenuWrapper .TotalBonusesWrapper {
  padding: 1.6rem;
  font-size: 1.6rem;
}
.OperatorUserMenuWrapper .TotalBonusesWrapper {
  padding: 0 1.6rem 1.6rem;
}
.OperatorUserMenuWrapper .BalanceWrapper .Text,
.OperatorUserMenuWrapper .TotalBalanceWrapper .Text,
.OperatorUserMenuWrapper .TotalBonusesWrapper .Text {
  display: inline-block;
  color: #4e4e4e;
}
.OperatorUserMenuWrapper .BalanceWrapper .Currency,
.OperatorUserMenuWrapper .TotalBalanceWrapper .Currency,
.OperatorUserMenuWrapper .TotalBonusesWrapper .Currency {
  display: inline-block;
  float: right;
  color: #212121;
}
.OperatorUserMenu .OperatorHeaderDeposit {
  display: block;
  min-width: 88%;
  margin: 1.6rem;
  padding: 0.9rem 0.8rem 1.1rem;
  font-size: 1.6rem;
  line-height: 2rem;
  text-align: center;
  text-decoration: none;
}
.OperatorHeaderWithdraw {
  display: block;
  min-width: 88%;
  margin: 0 1.6rem 1.6rem;
  padding: 0.9rem 0.8rem 1.1rem;
  background: none;
  border: 0.2rem solid #f9c408;
  color: #4e4e4e;
  text-transform: uppercase;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  font-size: 1.6rem;
}
.OperatorHeaderWithdraw:hover {
  background: none;
  border-color: #ffe900;
  color: #4e4e4e;
}
.OperatorUserSubmenu {
  display: block;
  background: #fff;
  margin: 0 1.6rem;
}
.OperatorUserSubmenu .Menu,
.OperatorUserSubmenu .List {
  display: block !important;
  width: 100% !important;
}
.OperatorUserSubmenu .MenuItem,
.OperatorUserSubmenu .ListItem {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  float: none !important;
  border-bottom: 0.1rem solid #f3f3f3;
}
.OperatorUserSubmenu .Anchor,
.OperatorUserSubmenu .LogOutButton {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  padding: 1rem 1.6rem;
  color: #212121;
  font-size: 1.4rem;
  line-height: 2.5rem;
  text-decoration: none;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-weight: 400;
  text-transform: capitalize;
  box-sizing: border-box;
  white-space: nowrap;
}
.OperatorUserSubmenu .Anchor:hover,
.OperatorUserSubmenu .LogOutButton:hover {
  background: #d7d7d7;
  color: #212121;
}

body.Page-Account .SectionContent {
  background: #f4f4f4;
  min-height: 62vh;
  color: #212121;
}
body.Page-Cashier .SectionContent {
  background: #23281f;
  min-height: 62vh;
  color: #fff;
}
.CashierPageWidgetContainer,
.ProfilePageContent {
  max-width: 96rem;
  margin: 0 auto;
  padding: 2.4rem 1.6rem 4rem;
}
.BankingMethods .TabsHeader {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0 0 1.6rem;
  border-bottom: 1px solid #dedede;
}
.BankingMethods .TabsHeader a {
  display: block;
  padding: 2rem 0;
  color: #212121;
  font-size: 1.6rem;
  font-weight: 600;
  text-decoration: none;
}
.BankingMethods .TabsHeader a.IsActive {
  color: #f9c408;
  border-bottom: 2px solid #f9c408;
}
.PaymentMethodList {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: auto;
  padding: 0.4rem 0 1.2rem;
}
.BankingMethods .PaymentMethodItem.ListItem {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 0.3rem;
  text-align: center;
}
.BankingMethods .PaymentMethodItem .Button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.BankingMethods .PaymentMethodIcon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.6rem;
  height: 5rem;
  overflow: hidden;
  background: #fff;
  border-radius: 0.5rem;
}
.BankingMethods .PaymentMethodItem.Active .PaymentMethodIcon {
  border: 2px solid #f9c408;
}
.BankingMethods .PaymentMethodItem img {
  width: 100%;
  height: auto;
}
.BankingMethods .PaymentLabel {
  display: none;
}
.BankingMethods .Form,
.ProfileForm {
  background: #fff;
  padding: 1.6rem;
  border-radius: 0.6rem;
  max-width: 48rem;
}
.BankingMethods .FormLabel,
.ProfileForm .FormLabel {
  display: block;
  margin: 0.8rem 0 1rem;
}
.BankingMethods .LabelText,
.ProfileForm .LabelText {
  display: block;
  margin-bottom: 0.4rem;
  color: #828282;
}
.BankingMethods .Input,
.ProfileForm .Input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 1px solid #cfcfcf;
  border-radius: 0.4rem;
}
.TransactionHistoryNavigator ul {
  display: flex;
  flex-wrap: wrap;
  overflow-x: auto;
  background: #f7f7f7;
}
.TransactionHistoryNavigator .ListItem .Button {
  display: block;
  width: 100%;
  padding: 1.6rem 1.2rem 1.2rem;
  color: #4e4e4e;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  font-size: 1.3rem;
}
.TransactionHistoryNavigator .ListItem .Button.IsActive,
.TransactionHistoryNavigator .ListItem .Button:hover {
  color: #f9c408;
  border-bottom-color: #f9c408;
}
.ComponentListTransactionHistory {
  width: 100%;
  margin: 1.6rem 0;
  background: #fff;
  font-size: 1.4rem;
}
.ComponentListTransactionHistory th,
.ComponentListTransactionHistory td {
  padding: 1.2rem 1rem;
  border-bottom: 1px solid #dedede;
  text-align: left;
  color: #212121;
}
.NoTransactionHistory {
  max-width: 96rem;
  margin: 0 auto;
  padding: 2.4rem 1.6rem;
  font-size: 1.4rem;
  color: #4e4e4e;
}
.ProfileForm .OperatorHeaderDeposit,
.BankingMethods .Form .OperatorHeaderDeposit {
  width: 100%;
  margin: 1.6rem 0 0;
  background: #f9c408;
  color: #294c0b;
  border: 0;
  padding: 0.9rem 0.8rem 1.1rem;
}

.jj-logged[hidden],
.jj-guest[hidden],
.ButtonLogin[hidden],
#RegisterButton-Header[hidden] {
  display: none !important;
}

.jj-balance-chip {
  display: inline-flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.25);
  border: 0.1rem solid hsla(0, 0%, 100%, 0.15);
  color: #fff;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  white-space: nowrap;
  font-size: 1.4rem;
  line-height: 2rem;
}

.jj-user-menu {
  position: relative;
}

.jj-user-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  min-width: 14rem;
  background: #203d08;
  border: 0.1rem solid hsla(0, 0%, 100%, 0.15);
  z-index: 20;
  list-style: none;
  padding: 0.4rem 0;
  margin: 0;
}

.jj-user-menu:hover .jj-user-dropdown,
.jj-user-menu:focus-within .jj-user-dropdown {
  display: block;
}

.jj-user-dropdown a {
  display: block;
  color: #fff;
  padding: 0.7rem 1.2rem;
  white-space: nowrap;
}

.jj-user-dropdown a:hover {
  background: #294c0b;
  color: #f9c408;
}

.LoginModal[hidden] {
  display: none !important;
}

.LoginModal:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: block;
}

.LoginModal .ModalOverlay {
  position: absolute;
  inset: 0;
  background: rgba(14, 31, 4, 0.72);
}

.LoginModal .ModalContent {
  position: relative;
  z-index: 2;
  margin: 4vh auto 0;
  max-width: 42rem;
  width: calc(100% - 2.4rem);
  background: #fff;
  color: #1a1a1a;
  border-radius: 0.8rem;
  padding: 2.4rem 2rem 2rem;
  box-shadow: 0 1.2rem 3.2rem rgba(14, 31, 4, 0.45);
}

.LoginModal .ModalCloseButton {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.LoginFormMobileHeader h2 {
  margin: 0 0 0.6rem;
  color: #294c0b;
  font-size: 2.4rem;
}

.LoginFormNoAccount {
  display: block;
  margin-bottom: 1.4rem;
  color: #294c0b;
}

.LoginFormWrapper .FormLabel {
  display: block;
  margin: 0.8rem 0 0.3rem;
}

.LoginFormWrapper .LabelText {
  color: #294c0b;
  font-weight: 600;
}

.LoginFormWrapper .Req {
  color: #c00;
}

.LoginFormWrapper input[type="text"],
.LoginFormWrapper input[type="password"],
.LoginFormWrapper input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem 1rem;
  border: 0.1rem solid #294c0b;
  border-radius: 0.4rem;
  background: #fff;
}

.LoginSubmitButton {
  display: block;
  width: 100%;
  margin-top: 1.4rem;
  padding: 1.1rem 1.2rem;
  background: #f9c408;
  color: #294c0b;
  border: 0;
  border-radius: 0.4rem;
  font-weight: 700;
  cursor: pointer;
}

.LoginSignupButton {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 1.1rem 1.2rem;
  background: #294c0b;
  color: #fff !important;
  text-align: center;
  border-radius: 0.4rem;
  box-sizing: border-box;
}

.LoginFormForgot {
  text-align: center;
  margin-top: 1rem;
}

.CustomLoginContent {
  font-size: 1.3rem;
  line-height: 1.5;
  margin: 1rem 0;
  color: #294c0b;
}

.jj-form-msg {
  color: #b42318;
  background: #fde8e8;
  border: 0.1rem solid #f5c2c0;
  padding: 0.8rem 1rem;
  border-radius: 0.4rem;
  margin: 0 0 1rem;
}

.jj-form-msg[hidden] {
  display: none !important;
}

.jj-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem 1.6rem 4rem;
  color: #fff;
}

.jj-page h1 {
  color: #f9c408;
  font-size: 2.4rem;
  margin: 0 0 1.6rem;
}

.jj-search {
  width: 100%;
  max-width: 42rem;
  margin: 0 0 1.6rem;
  padding: 1rem 1.2rem;
  border-radius: 0.4rem;
  border: 0.1rem solid hsla(0, 0%, 100%, 0.2);
  background: #203d08;
  color: #fff;
}

.jj-games {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14.4rem, 1fr));
  gap: 1.2rem;
}

.jj-game {
  display: block;
  background: #203d08;
  border: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  border-radius: 0.6rem;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
}

.jj-game img {
  display: block;
  width: 100%;
  height: 12rem;
  object-fit: cover;
  background: #142a06;
}

.jj-game span {
  display: block;
  padding: 0.7rem 0.8rem;
  font-size: 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.jj-game:hover {
  border-color: #f9c408;
  color: #f9c408;
}

.jj-empty {
  color: #d7e8c4;
  padding: 2rem 0;
}

.jj-pay-row {
  display: grid;
  grid-template-columns: 4.8rem 1fr auto;
  gap: 1.2rem;
  align-items: center;
  width: 100%;
  text-align: left;
  background: #203d08;
  border: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  color: #fff;
  padding: 1.2rem;
  margin: 0 0 0.8rem;
  border-radius: 0.6rem;
  cursor: pointer;
}

.jj-pay-row img {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
}

.jj-pay-row span,
.jj-pay-row em {
  display: block;
  font-style: normal;
  color: #d7e8c4;
  font-size: 1.3rem;
}

.jj-pay-form,
.jj-account-card,
.jj-promo,
.jj-tourney {
  background: #203d08;
  border: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  border-radius: 0.8rem;
  padding: 1.6rem;
  margin: 1.2rem 0;
  color: #fff;
}

.jj-pay-form label,
.jj-account-card dt {
  display: block;
  margin: 0.8rem 0 0.3rem;
  color: #f9c408;
}

.jj-pay-form input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.9rem;
  border-radius: 0.4rem;
  border: 0.1rem solid hsla(0, 0%, 100%, 0.2);
  background: #142a06;
  color: #fff;
}

.jj-pay-form button,
.jj-cta {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 1rem 1.6rem;
  background: #f9c408;
  color: #294c0b;
  border: 0;
  border-radius: 0.4rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

.jj-tabs {
  display: flex;
  gap: 0.8rem;
  margin: 0 0 1.6rem;
}

.jj-tabs a {
  color: #fff;
  border: 0.1rem solid hsla(0, 0%, 100%, 0.2);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
}

.jj-tabs a.is-on,
.jj-tabs a:hover {
  background: #f9c408;
  color: #294c0b;
  border-color: #f9c408;
}

.jj-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
}

.jj-table th,
.jj-table td {
  border-bottom: 0.1rem solid hsla(0, 0%, 100%, 0.12);
  padding: 0.8rem;
  text-align: left;
}

.jj-game-frame {
  width: 100%;
  min-height: 78vh;
  border: 0;
  background: #000;
}

.RegisterFormStepWrapper.Hidden {
  display: none !important;
}

.InputWrap {
  position: relative;
}

.PasswordToggleIcon {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  width: 2rem;
  height: 2rem;
  cursor: pointer;
  background: #294c0b;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 12a5 5 0 110-10 5 5 0 010 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 720px) {
  .jj-games {
    grid-template-columns: repeat(2, 1fr);
  }
  .LoginModal .ModalContent {
    margin-top: 1.2rem;
  }
  .LanguageSelectorContainer {
    display: none !important;
  }
  .WhatsappIconWrapper,
  .IosAppPageLinkWrapper {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #f9c408 !important;
    fill: #f9c408 !important;
  }
  .WhatsappIconWrapper svg,
  .IosAppPageLinkWrapper svg {
    width: 1.7rem !important;
    height: 1.7rem !important;
    fill: #f9c408 !important;
  }
  .OperatorMainMenu {
    display: none !important;
  }
  .SportsIframeWrapper,
  #SportsIframe,
  iframe.SportsIframe {
    min-height: 720px;
  }
}

.HamburgerButton {
  display: none !important;
  pointer-events: none !important;
}
.HeaderContainer .OperatorMobileNavMock {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  min-width: 40px !important;
  height: 5.5rem;
  flex: 0 0 40px;
  position: relative;
  z-index: 21;
}
.jj-hamburger {
  width: 40px;
  height: 5.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  z-index: 22;
}
.jj-hamburger-box {
  display: block;
  position: relative;
  width: 20px;
  height: 16px;
}
.jj-hamburger-inner,
.jj-hamburger-inner:before,
.jj-hamburger-inner:after {
  display: block;
  position: absolute;
  left: 0;
  width: 20px;
  height: 2.5px;
  background: #fff;
  border-radius: 1px;
  content: "";
  transition: transform 0.18s ease, opacity 0.18s ease, top 0.18s ease;
}
.jj-hamburger-inner {
  top: 50%;
  margin-top: -1.25px;
}
.jj-hamburger-inner:before { top: -7px; }
.jj-hamburger-inner:after { top: 7px; }
.jj-hamburger.is-open .jj-hamburger-inner { background: transparent; }
.jj-hamburger.is-open .jj-hamburger-inner:before {
  top: 0;
  transform: rotate(45deg);
}
.jj-hamburger.is-open .jj-hamburger-inner:after {
  top: 0;
  transform: rotate(-45deg);
}

#jj-sidenav {
  position: fixed;
  inset: 0;
  z-index: 100000;
}
#jj-sidenav[hidden] { display: none !important; }
.jj-sidenav-bg {
  position: absolute;
  inset: 0;
  background: rgba(14, 31, 4, 0.62);
}
.jj-sidenav-panel {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 80vw;
  max-width: 34rem;
  background: linear-gradient(0deg, #151516, #1e1e20);
  box-shadow: 0.4rem 0 3rem -0.6rem rgba(33, 33, 33, 0.8);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateX(-102%);
  transition: transform 0.28s ease;
}
#jj-sidenav.is-open .jj-sidenav-panel { transform: translateX(0); }
.jj-sidenav-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 5.5rem;
  padding: 0 1.2rem 0 0.4rem;
  background: linear-gradient(90deg, #294c0b 0, #203d08);
  border-bottom: 0.1rem solid #f9c408;
}
.jj-sidenav-x {
  width: 4.4rem;
  height: 5.5rem;
  border: 0;
  background: transparent;
  position: relative;
  cursor: pointer;
}
.jj-sidenav-x span {
  position: absolute;
  left: 1.3rem;
  width: 1.8rem;
  height: 0.18rem;
  background: #fff;
  border-radius: 1px;
}
.jj-sidenav-x span:first-child { transform: rotate(45deg); }
.jj-sidenav-x span:last-child { transform: rotate(-45deg); }
.jj-sidenav-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 800;
  font-size: 2.2rem;
  letter-spacing: -0.04em;
  line-height: 1;
}
.jj-sidenav-brand .jj-jojo { color: #f3f3f3; }
.jj-sidenav-brand .jj-bet { color: #f6eb1f; }
.jj-sidenav-links { display: flex; flex-direction: column; padding: 0.6rem 0 4rem; }
.jj-sidenav-link {
  display: block;
  padding: 1.35rem 1.6rem;
  color: #fff;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.jj-sidenav-link:active { background: rgba(255, 255, 255, 0.06); }
body.jj-nav-open { overflow: hidden; }

#jj-sidenav.MenuDrawer {
  display: flex;
  z-index: 100000;
  height: 100vh;
  height: var(--windowHeight, 100vh);
}
#jj-sidenav .MenuDrawerHeader .OperatorLogo,
#jj-sidenav .jj-drawer-logo {
  width: 11.2rem;
  height: 4.4rem;
  margin: 0;
}
#jj-sidenav .MenuDrawerHeader .OperatorLogo svg,
#jj-sidenav .jj-drawer-logo svg,
#jj-sidenav .MenuDrawerHeader .OperatorLogoLink {
  width: 11.2rem;
  height: 4.4rem;
  display: block;
}
#jj-sidenav .jj-tab-ico,
#jj-sidenav .ImageWithTransitionContainer {
  display: block;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 0.3rem;
}
#jj-sidenav .jj-tab-ico svg,
#jj-sidenav .MenuTabItemIcon {
  width: 3rem !important;
  height: 3rem !important;
  display: block;
  margin: 0 auto;
  object-fit: contain;
  opacity: 1 !important;
}
#jj-sidenav .MenuTabItem {
  color: hsla(0, 0%, 100%, 0.7);
  font-size: 1.1rem;
  line-height: 1.2;
  text-align: center;
}
#jj-sidenav .MenuTabItem.Active {
  color: #f9c408;
}
#jj-sidenav .MenuTabItem .Skeleton {
  display: none !important;
}
#jj-sidenav .DefaultTabPanelItemLink {
  display: flex !important;
  align-items: center;
  gap: 0.8rem;
  padding: 1.05rem 0.8rem !important;
  color: #e8e8e8 !important;
  font-size: 1.4rem;
  line-height: 1.3;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
#jj-sidenav .DefaultTabPanelItemIcon {
  width: 2rem !important;
  height: 2rem !important;
  object-fit: contain;
  border-radius: 0.3rem;
  flex: 0 0 2rem;
  margin-right: 0.2rem;
}

@media (min-width: 1100px) {
  .HeaderContainer .OperatorMobileNavMock,
  .jj-hamburger {
    display: none !important;
  }
  #jj-sidenav { display: none !important; }
}

/* Logged-in header: balance chip + user icon (MyAccount) */
.OperatorAccountContainer .jj-logged {
  display: flex;
  align-items: center;
  gap: 0;
}
.OperatorAccountContainer a.OperatorHeaderDeposit.CTASecondary,
.OperatorAccountContainer a#DepositButton-Header.OperatorHeaderDeposit {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 0;
  height: 38px;
  padding: 10px !important;
  margin: 0 16px;
  background: #f9c408 !important;
  color: #294c0b !important;
  fill: #294c0b !important;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  box-shadow: none;
  line-height: 1;
}
.OperatorAccountContainer .OperatorHeaderDeposit .TotalBalanceWrapper {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
}
.OperatorAccountContainer .OperatorHeaderDeposit .TotalBalanceWrapper .Text {
  display: none !important;
}
.OperatorAccountContainer .OperatorHeaderDeposit .FormattedAmount,
.OperatorAccountContainer .OperatorHeaderDeposit .CurrencyPlaceholder {
  color: #294c0b;
  margin: 0;
}
.OperatorAccountContainer .OperatorHeaderDeposit .CurrencyContainer {
  display: inline;
  white-space: nowrap;
  gap: 0;
}
.OperatorAccountContainer .OperatorHeaderDeposit .PlusIcon {
  display: inline-flex;
  margin-left: 4px;
}
.OperatorAccountContainer .OperatorHeaderDeposit .PlusIcon svg {
  width: 12px;
  height: 12px;
  fill: #294c0b;
}
.OperatorAccountContainer .Button.ToggleUserMenu {
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 5px !important;
  margin: 0 2px;
  background: transparent !important;
  border: 0 !important;
  color: #f9c408 !important;
  fill: #f9c408 !important;
  cursor: pointer;
  box-shadow: none !important;
}
.OperatorAccountContainer .ToggleUserMenu svg,
.OperatorAccountContainer .ToggleUserMenu .Icon,
.OperatorAccountContainer .ToggleUserMenu .ComponentIcon,
.OperatorAccountContainer .ToggleUserMenu .SvgIcon {
  width: 24px !important;
  height: 24px !important;
  margin: 0;
  background: transparent !important;
  display: inline-flex;
  fill: #f9c408;
  color: #f9c408;
}
.MyAccountDropdownContainer,
.InstanceToggleMenu.ContentTriggerWrapper {
  position: relative;
}
.ContentTriggerContentWrapper {
  display: none;
  position: absolute;
  top: 52px;
  right: 0;
  z-index: 10060 !important;
  overflow: visible !important;
}
.SectionHeader {
  z-index: 10050 !important;
  overflow: visible !important;
  transform: none !important;
}
body.is-logged .ModalWindow.LoginModal,
body.IsLoggedIn .ModalWindow.LoginModal,
body.is-logged .OperatorLoginWidget {
  display: none !important;
}
.ContentTriggerWrapper.IsActive .ContentTriggerContentWrapper,
.OperatorAccountContainer.IsActive .ContentTriggerContentWrapper,
.jj-account-portal {
  display: block !important;
}
.jj-account-portal {
  position: fixed !important;
  z-index: 10070 !important;
}
.MyAccountMenuWrapper {
  width: 350px;
  max-height: calc(100vh - 6rem);
  overflow-y: auto;
  background: #fff;
  color: #212121;
  border-radius: 0;
  box-shadow: 0 8px 24px rgba(33, 33, 33, 0.3);
  padding: 0 0 1.6rem;
  font-size: 1.3rem;
}
.MyAccount.TopWrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.2rem 1.4rem 0.8rem;
  background: #fff;
}
.MyAccountInboxLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #212121;
  text-decoration: none;
  font-size: 1.2rem;
  min-width: 5.6rem;
}
.MyAccountBell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  border-radius: 0.8rem;
  border: 0.3rem solid #f9c408;
  color: #f9c408;
  fill: #f9c408;
  background: #fff;
  margin-bottom: 0.2rem;
  padding: 0.35rem;
}
.MyAccountBell svg {
  width: 2.5rem;
  height: 2.5rem;
  fill: #f9c408;
}
.MyAccountUserBlock {
  text-align: right;
  flex: 1;
}
.MyAccountUserName {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 1.2;
  color: #212121;
}
.MyAccountSecurity {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.4rem;
  color: #6b6b6b;
  font-size: 1.2rem;
}
.MyAccountSecurityOn {
  display: inline-block;
  background: #2ea44f;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.MyAccountSwitch {
  display: inline-block;
  width: 3.4rem;
  height: 1.8rem;
  border-radius: 999px;
  background: #2ea44f;
  position: relative;
  vertical-align: middle;
}
.MyAccountSwitch:after {
  content: "";
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: #fff;
}
.MyAccountMenu.BalanceContainer {
  display: flex;
  background: #fff;
  text-align: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.MyAccountMenu.BalanceContainer .BalanceContainerItem {
  flex: 1;
}
.MyAccountMenu.BalanceContainer .Text {
  display: block;
  color: #6b6b6b;
  font-size: 1.15rem;
  margin-bottom: 0.3rem;
}
.MyAccountMenu.BalanceContainer .Currency {
  display: block;
  font-weight: 700;
  color: #212121;
  font-size: 1.5rem;
  float: none;
}
.MyAccountMenu.BalanceContainer .BalanceWrapper,
.MyAccountMenu.BalanceContainer .TotalBonusesWrapper,
.MyAccountMenu.BalanceContainer .TotalBalanceWrapper {
  padding: 1.4rem 0.5rem;
  margin: 0;
  border: 0;
}
.MyAccountMenuGrid,
.MyAccountMenu.LinksContainer {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0 20px 14px;
  gap: 0;
}
.MyAccountMenu.LinksContainer .MenuItem,
.MyAccountMenuGrid > .MyAccountMenuLink {
  flex: 0 0 25%;
  width: 25%;
  max-width: 25%;
  box-sizing: border-box;
  padding: 8px 2px;
}
.MyAccountMenuLink {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #212121;
  text-decoration: none;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 600;
}
.MyAccountMenuIcon,
.MenuItemImg {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 35px;
  height: 35px;
  margin-bottom: 0.4rem;
  background: transparent;
  border-radius: 0;
}
.MyAccountMenuIcon img,
.MyAccountMenuIcon svg,
.MenuItemImg img,
.MenuItemImg svg {
  width: 35px;
  height: 35px;
  object-fit: contain;
}
.MyAccountMenuLabel,
.MyAccountMenuLink .AnchorText {
  max-width: 8.2rem;
  color: #212121;
}
.MyAccountPromoCard,
.MyAccountTournamentCard {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #212121;
  text-decoration: none;
  text-align: left;
  padding: 0;
  margin: 0;
}
.MyAccountMenu.TornamentsRankContainer {
  padding: 0 20px 8px;
  color: #212121;
  font-size: 12px;
  line-height: 15px;
}
.MyAccountTournamentImg {
  width: 85px;
  height: 60px;
  object-fit: cover;
  border-radius: 5px;
  flex-shrink: 0;
}
.MyAccountTournamentCopy .Title {
  font-weight: 700;
  margin-bottom: 4px;
  color: #212121;
}
.MyAccountTournamentRank {
  display: flex;
  width: 100%;
  margin-top: 8px;
}
.MyAccountTournamentRank .RankSec,
.MyAccountTournamentRank .PrizeSec {
  width: 49%;
  background: #f9c408;
  display: flex;
  align-items: center;
  padding: 5px;
  margin: 5px;
  color: #294c0b;
  font-weight: 700;
  box-sizing: border-box;
}
.MyAccountTournamentRank .Icon {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 2px solid #132504;
  margin-right: 5px;
  padding-right: 3px;
  fill: #294c0b;
  color: #294c0b;
}
.MyAccountTournamentRank .Icon svg {
  width: 15px;
  height: 15px;
}
.MyAccountTournamentRank .RankInfo {
  line-height: 22px;
  padding: 0 10px 0 5px;
}
.MyAccountMenu.FooterContainer {
  padding: 4px 0 8px;
}
.MyAccountLogoutButton {
  display: block;
  width: auto;
  min-width: 16rem;
  margin: 0 auto;
  background: transparent !important;
  border: 0.2rem solid #2ea44f !important;
  color: #2ea44f !important;
  border-radius: 999px;
  padding: 0.7rem 2.4rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-transform: uppercase;
}

body.Page-Cashier .SectionContent,
body.Page-WidgetDeposit .SectionContent,
body.Page-WidgetWithdraw .SectionContent,
body.Page-Cashier .CashierPageWidgetContainer,
body.Page-Cashier .BankingMethods {
  background: #23281f !important;
  color: #fff;
  min-height: 70vh;
}
body.Page-Cashier .InstanceOperatorMyCasinoTabsHeader {
  display: flex;
  justify-content: center;
  max-width: 86rem;
  margin: 0 auto;
  padding: 0 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  list-style: none;
}
body.Page-Cashier .InstanceOperatorMyCasinoTabsHeader .ListItem {
  flex: 1 1 50%;
  max-width: 36rem;
  text-align: center;
}
body.Page-Cashier .InstanceOperatorMyCasinoTabsHeader .Anchor {
  display: block;
  padding: 1.8rem 0 1.4rem;
  color: rgba(255, 255, 255, 0.6);
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
  background: transparent;
  border: 0;
  position: relative;
}
body.Page-Cashier .InstanceOperatorMyCasinoTabsHeader .Anchor.IsActive {
  color: #f9c408;
}
body.Page-Cashier .InstanceOperatorMyCasinoTabsHeader .Anchor.IsActive:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  background: #f9c408;
}
.CashierPageWidgetContainer {
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 0 4rem;
  background: #23281f;
}
.CashierMethodListWidget {
  background: #23281f;
  padding-bottom: 20px;
  max-width: 713px;
  margin: 0 auto;
}
.MethodsListDescription {
  color: #fff;
  padding: 10px;
  text-align: left;
}
.MethodsListDescription h3 {
  font-size: 12px;
  text-transform: uppercase;
  margin: 10px 0;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.04em;
}
.MethodsListDescription p {
  color: #fff;
  opacity: 0.55;
  font-size: 12px;
  margin: 0;
  line-height: 1.4;
}
.CashierMethodList,
.CashierMethodsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin: 10px;
  max-width: 100%;
}
.SelectorWrapper,
.CashierMethodCard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 171px;
  height: 171px;
  padding: 5px 0;
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  border: 0;
  border-radius: 10px;
  color: #fff;
  text-align: left;
  cursor: pointer;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  box-sizing: border-box;
}
.SelectorWrapper::before,
.CashierMethodCard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 10px;
  background: linear-gradient(140deg, #f5f5f5 5%, #23281f 40%, #000 60%);
  opacity: 0.2;
}
.SelectorWrapper:hover,
.CashierMethodCard:hover,
.CashierMethodCard.Active {
  box-shadow: inset 0 0 7px #f9c408;
  transform: scale(1.02);
}
.MethodFavorite,
.CashierPopular {
  font-size: 8px;
  color: #fff;
  background: red;
  border-radius: 15px;
  margin: 0 5px;
  line-height: 10px;
  height: 16px;
  position: static;
  top: auto;
  right: auto;
  padding: 0;
  font-weight: 400;
}
.MethodFavorite p {
  padding: 3px;
  margin: 0;
}
.MethodLogo,
.CashierMethodCard .PaymentMethodIcon {
  margin: 5px;
  width: auto;
  height: auto;
  background: transparent;
}
.MethodLogo img,
.CashierMethodCard .PaymentMethodIcon img {
  width: auto;
  max-width: 89px;
  height: auto;
  max-height: 36px;
  object-fit: contain;
  display: block;
}
.MethodInfo {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  flex: 1;
}
.MethodTitle,
.CashierMethodName {
  color: #fff;
  margin: 5px;
  font-weight: 700;
  line-height: 1.2;
  font-size: 1.3rem;
  word-break: break-word;
}
.MethodLimits,
.CashierMethodLimits {
  margin: 5px;
  font-weight: 300;
  color: #fff;
  opacity: 0.7;
  font-size: 1.15rem;
  line-height: 1.35;
}
.MethodLimits p {
  margin: 0;
}
.PaymentProcessing,
.CashierMethodEta {
  padding: 5px;
  color: #f9c408;
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: auto;
}
body.Page-Cashier .PayCardForm {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  max-width: 48rem;
  margin: 1.6rem auto 0;
  border-radius: 1rem;
}
body.Page-Cashier .PayCardForm .LabelText,
body.Page-Cashier .PayCardForm .TabContentTitle {
  color: #fff;
}
body.Page-Cashier .PayCardForm .Input {
  background: #111;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

body.Page-Account .SectionContent {
  background: #f4f4f4 !important;
  color: #212121;
  padding: 110px 0 50px !important;
  min-height: 70vh;
}
[data-jj-account-shell] {
  max-width: 1100px;
  margin: 0 auto;
}
.ActiveBonusesWrapper {
  max-width: 1600px;
  margin: 0 auto;
  padding: 40px 32px;
  color: #212121;
}
.ActiveBonusesWrapper > .Title {
  font-size: 18px;
  font-weight: 600;
  line-height: 20px;
  padding: 17px 0 12px;
  margin: 0;
  color: #212121;
}
.BonusesContent {
  display: flex;
  flex-direction: column-reverse;
}
.CasinoBonusesContent {
  padding: 0 0 20px;
}
.BonusesFieldset {
  max-width: 590px;
  border: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 8px;
}
.InputContainer.FormLabel {
  display: block;
  flex: 0 0 398px;
  width: 398px;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
.InputContainer .LabelWrap {
  display: block;
  margin: 0 0 6px;
  color: #3d3d3d;
  font-size: 16px;
  line-height: 16px;
}
.InputContainer .Req { color: #d32f2f; margin-left: 2px; }
.InputWrap {
  display: inline-block;
  width: 398px;
  max-width: 100%;
}
.FormInput.E2E-bonusCode-input {
  display: inline-block;
  width: 100%;
  height: 40px;
  padding: 10px 12px;
  border: 0;
  border-radius: 4px;
  background: #fff;
  color: #212121;
  font-size: 16px;
  box-sizing: border-box;
}
.ButtonGroup {
  display: flex;
  flex: 0 0 174px;
  margin: 0 !important;
  width: 174px;
  align-self: flex-end;
}
.BonusesFieldset .InputContainer.FormLabel {
  margin: 0 !important;
}
.ComponentButton.InstanceActiveBonuses {
  display: block;
  width: 174px;
  height: 40px;
  padding: 9px 12px 11px;
  border: 0;
  border-radius: 4px;
  background: #f9c408;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
}
.CasinoBonusesMessage {
  font-size: 16px;
  line-height: 20px;
  padding: 0 8px;
  color: #212121;
}
.DiscountBonusSection { margin-top: 8px; }
.DiscountBonusSectionGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 343px);
  gap: 15px;
}
.DiscountBonusBanner {
  display: flex;
  flex-direction: column;
  width: 343px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  color: #212121;
}
.DiscountBonusBannerImg {
  display: block;
  width: 323px;
  height: 185px;
  margin: 10px 10px 0;
  object-fit: cover;
  border-radius: 6px;
}
.DiscountBonusBannerTitle {
  font-size: 14px;
  font-weight: 600;
  line-height: 15px;
  padding: 10px;
}
.DiscountBonusActions {
  display: flex;
  gap: 10px;
  margin: 10px;
}
.DiscountBonusButton {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 9px 12px 11px;
  background: #fff;
  border: 1px solid #f9c408;
  border-radius: 6px;
  color: #212121;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.InstanceBonusHistoryLayout,
.InstanceMycasinoHistoryLayout,
.InstanceMyCasinoPaymentHistoryLayout,
.ProfilePageContent {
  max-width: 1100px;
  margin: 50px auto;
  padding: 0 16px;
  color: #212121;
}
.InstanceBonusHistoryTitle,
.InstanceTransactionHistoryTitle,
.InstancePaymentHistoryTitle,
.ProfilePageContent .Title,
[data-jj-account-shell] > .ComponentLayout > .Title {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 20px;
  color: #212121;
}
.TransactionHistoryNWAContainer { width: 100%; }
.TransactionFilterNWAMinimal {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 20px;
}
.NoOfItemsToDisplayContainer {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: #4e4e4e;
}
.NoOfItemsToDisplayMessage { margin-right: 8px; }
.TransPaginationOptions {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.TransPaginationItem {
  min-width: 24px;
  text-align: center;
  font-size: 12px;
  color: #4e4e4e;
}
.TransPaginationItem.Active {
  background: #f9c408;
  color: #294c0b;
  border-radius: 4px;
  font-weight: 700;
  padding: 2px 6px;
}
.TransPaginationButton {
  background: transparent;
  border: 0;
  color: #4e4e4e;
  cursor: pointer;
  font-size: 12px;
}
.TransactionFilterButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 34px;
  padding: 8px 10px;
  background: #e5e4e2;
  border: 0;
  border-radius: 8px;
  color: #294c0b;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.ComponentListTransactionHistory {
  background: transparent;
  margin: 0;
}
.TransHistoryList { width: 100%; overflow-x: auto; }
.TransHistoryTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #cacaca;
  color: #212121;
  font-size: 16px;
  font-weight: 600;
  padding: 12px 24px 14px;
  box-sizing: border-box;
}
.TransHistoryTitle > span { flex: 1; }
.TransHistoryItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  color: #4e4e4e;
  font-size: 14px;
  padding: 13.5px 24px 14px;
  border-bottom: 1px solid #dedede;
  box-sizing: border-box;
}
.TransHistoryItem > div { flex: 1; }
.TransHistoryHours {
  display: block;
  font-size: 12px;
  color: #818181;
}
.PaginationWrapperNWA {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  margin-top: 8px;
}
.PaginationButton {
  background: transparent;
  border: 0;
  color: #c8c8c8;
  font-size: 30px;
  font-weight: 600;
  padding: 9px 12px 11px;
  line-height: 1;
}
.PaginationButton:not(:disabled) { color: #818181; cursor: pointer; }
.InstanceOperatorGamblingTimeDisclaimer {
  font-size: 13px;
  color: #4e4e4e;
  margin: 0 0 16px;
}

body.Page-Mycasino .jj-mycasino-tabs {
  display: flex;
  justify-content: center;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  border-bottom: 1px solid #dedede;
  list-style: none;
  background: transparent;
}
body.Page-Mycasino .jj-mycasino-tabs .ListItem {
  flex: 1 1 50%;
  max-width: 36rem;
  text-align: center;
}
body.Page-Mycasino .jj-mycasino-tabs .Anchor {
  display: block;
  padding: 1.8rem 0 1.4rem;
  color: #4e4e4e;
  font-weight: 700;
  font-size: 1.5rem;
  text-decoration: none;
  background: transparent;
  border: 0;
  position: relative;
}
body.Page-Mycasino .jj-mycasino-tabs .Anchor.IsActive { color: #f9c408; }
body.Page-Mycasino .jj-mycasino-tabs .Anchor.IsActive:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 4px;
  background: #f9c408;
}
.TransactionHistoryNavigator {
  display: flex;
  list-style: none;
  margin: 0 auto 0 0;
  padding: 0;
  background: transparent;
}
.TransactionHistoryNavigator .ListItem .Anchor,
.TransactionHistoryNavigator .ListItem .Button {
  display: block;
  padding: 8px 14px 10px;
  color: #4e4e4e;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 600;
}
.TransactionHistoryNavigator .ListItem .Anchor.IsActive,
.TransactionHistoryNavigator .ListItem .Button.IsActive {
  color: #f9c408;
  border-bottom-color: #f9c408;
}
.DocumentViewCell,
.DocumentActionCell { flex: 0.7; color: #818181; font-size: 13px; }

.ListAndDetailsContainer { width: 100%; }
.CashierMethodDetailsWrapper {
  max-width: 713px;
  margin: 0 auto;
  padding: 8px 10px 32px;
}
.CashierMethodDetailsWrapper .PayCardForm {
  max-width: none;
  margin: 0;
  background: transparent;
  padding: 0;
}
.CashierMethodDetailsWrapper .TabContentTitle { display: none; }
.CashierDetailsHead {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
}
.CashierBackAll {
  background: transparent;
  border: 0;
  color: #f9c408;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
.CashierDetailsBrand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.CashierDetailsBrand img {
  max-width: 89px;
  max-height: 36px;
  object-fit: contain;
}
.CashierDetailsBrand strong { display: block; font-size: 16px; }
.CashierDetailsBrand p { margin: 4px 0 0; opacity: 0.7; font-size: 13px; }
.CashierAmountChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 14px;
}
.CashierChip {
  min-width: 72px;
  height: 36px;
  padding: 0 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 8px;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.CashierChip:hover { box-shadow: inset 0 0 7px #f9c408; }

@media (max-width: 767px) {
  .OperatorTopLanguage,
  .LanguageSelectorContainer {
    display: none !important;
  }
  .SectionHeader {
    height: 54px;
  }
  .OperatorAccountContainer a.OperatorHeaderDeposit.CTASecondary,
  .OperatorAccountContainer a#DepositButton-Header.OperatorHeaderDeposit {
    height: 28px;
    padding: 8px !important;
    font-size: 14px;
    border-radius: 8px;
    margin: 0 4px 0 6px;
  }
  .OperatorAccountContainer .OperatorHeaderDeposit .TotalBalanceWrapper,
  .OperatorAccountContainer .OperatorHeaderDeposit .FormattedAmount {
    font-size: 14px;
  }
  .OperatorAccountContainer .OperatorHeaderDeposit .PlusIcon {
    margin-left: 4px;
  }
  .OperatorAccountContainer .OperatorHeaderDeposit .PlusIcon svg {
    width: 11px;
    height: 11px;
  }
  .OperatorAccountContainer .Button.ToggleUserMenu {
    width: 24px;
    height: 28px;
    min-width: 24px;
    padding: 2px !important;
  }
  .OperatorAccountContainer .ToggleUserMenu svg,
  .OperatorAccountContainer .ToggleUserMenu .Icon,
  .OperatorAccountContainer .ToggleUserMenu .SvgIcon {
    width: 20px !important;
    height: 24px !important;
  }
  .IosAppPageLinkWrapper,
  .WhatsappIconWrapper {
    width: 28px;
    height: 28px;
  }
  .ContentTriggerContentWrapper,
  .jj-account-portal {
    position: fixed !important;
    top: 54px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: 100vw;
  }
  .MyAccountMenuWrapper {
    width: 100% !important;
    max-width: 100vw;
    min-height: calc(100vh - 54px);
    max-height: calc(100vh - 54px);
    border-radius: 0;
    box-shadow: none;
    background: #fff;
  }
  .MyAccount.TopWrapper {
    min-height: 80px;
  }
  .MyAccountMenu.BalanceContainer {
    background: #294c0b;
  }
  .MyAccountMenu.BalanceContainer .Text,
  .MyAccountMenu.BalanceContainer .Currency {
    color: #fff;
  }
  .CashierMethodList,
  .CashierMethodsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin: 8px;
  }
  .SelectorWrapper,
  .CashierMethodCard {
    min-height: 171px;
    height: auto;
  }
  .ActiveBonusesWrapper { padding: 16px 12px; }
  .BonusesFieldset { flex-wrap: wrap; max-width: 100%; }
  .InputContainer.FormLabel,
  .InputWrap, .FormInput.E2E-bonusCode-input { width: 100% !important; flex: 1 1 100% !important; max-width: 100%; }
  .ButtonGroup { display: flex; margin: 8px 0 0; width: 100% !important; flex: 1 1 100% !important; }
  .ComponentButton.InstanceActiveBonuses { width: 100%; }
  .DiscountBonusSectionGrid { grid-template-columns: 1fr; }
  .DiscountBonusBanner { width: 100%; }
  .DiscountBonusBannerImg { width: calc(100% - 20px); height: auto; aspect-ratio: 323 / 185; }
  .TransHistoryTitle, .TransHistoryItem { padding-left: 12px; padding-right: 12px; font-size: 12px; }
  .InstanceBonusHistoryLayout,
  .InstanceMycasinoHistoryLayout,
  .InstanceMyCasinoPaymentHistoryLayout { margin: 16px auto; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .LanguageSelectorContainer { display: none !important; }
}

iframe[title="tawk.to'yu Ziyaret Edin"],
iframe[title*="tawk.to"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
}

iframe[src*="livechatinc"],
iframe[src*="livechat.com"],
#chat-widget-container,
[id^="chat-widget"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.jj-login-open iframe[title="chat widget"],
body.jj-login-open iframe[title="Chat widget"],
body.jj-login-open iframe[title="Sohbet aracı"] {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
html.tawk-force-open iframe[title="chat widget"],
html.tawk-force-open iframe[title="Chat widget"],
html.tawk-force-open iframe[title="Sohbet aracı"] {
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#jj-tawk-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  width: 60px;
  height: 60px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: #203d08;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#jj-tawk-fab:hover {
  background: #294c0b;
}
#jj-tawk-fab svg {
  width: 28px;
  height: 28px;
  fill: #fff;
}
#jj-tawk-fab.is-hidden,
body.jj-login-open #jj-tawk-fab {
  display: none !important;
}

/* Tawk home is Palazzo navy. Cover the header and empty body with JOJOBET chrome. */
#jj-chat-skin {
  position: fixed;
  z-index: 2147483647;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  pointer-events: none;
  font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}
#jj-chat-skin[hidden],
body.jj-login-open #jj-chat-skin {
  display: none !important;
}
#jj-chat-skin .jj-chat-head {
  pointer-events: auto;
  flex: 0 0 33%;
  box-sizing: border-box;
  background: #284b0a;
  color: #fff;
  padding: 26px 48px 14px 22px;
  position: relative;
}
#jj-chat-skin .jj-chat-logo {
  width: 132px;
  height: 38px;
  line-height: 0;
}
#jj-chat-skin .jj-chat-logo .SvgIcon,
#jj-chat-skin .jj-chat-logo .MainIcon,
#jj-chat-skin .jj-chat-logo svg {
  width: 132px !important;
  height: 38px !important;
  display: block;
}
#jj-chat-skin .jj-chat-hello {
  margin: 12px 0 0;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}
#jj-chat-skin .jj-chat-sub {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.78);
}
#jj-chat-skin .jj-chat-x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: #f9c408;
  font-size: 26px;
  line-height: 30px;
  cursor: pointer;
}
#jj-chat-skin .jj-chat-pass {
  flex: 0 0 17%;
}
#jj-chat-skin .jj-chat-fill {
  pointer-events: auto;
  flex: 1 1 auto;
  background: #10180a;
}
#jj-chat-skin .jj-chat-foot {
  flex: 0 0 11%;
}
#jj-chat-skin.is-chat .jj-chat-head {
  flex: 0 0 62px;
  padding: 16px 48px 0 18px;
}
#jj-chat-skin.is-chat .jj-chat-hello,
#jj-chat-skin.is-chat .jj-chat-sub,
#jj-chat-skin.is-chat .jj-chat-pass,
#jj-chat-skin.is-chat .jj-chat-fill,
#jj-chat-skin.is-chat .jj-chat-foot {
  display: none;
}
@media (max-width: 767px) {
  #jj-tawk-fab {
    right: 10px;
    bottom: 20px;
  }
}