/* HEADER WALLET */
#divAppHeader #divHeaderWallet
{
    background-color:#292a2f;
    border-radius:10px;
    cursor:pointer;
    float:left;
    height:50px;
    margin-left:50px;
    padding-right:120px;
    position:relative;
    transition:color 0.25s, height 0.25s, margin 0.25s, padding 0.25s;
    user-select:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#divAppHeader #divHeaderWallet:hover, #divAppHeader #divHeaderWallet:focus
{
    color:#ffffff;
}

#divAppHeader #divHeaderWallet:before
{
    background-image:url('../images/icons/wallet.svg');
    background-position:14px 12px;
    background-repeat:no-repeat;
    content:"";
    height:100%;
    opacity:0.4;
    position:absolute;
    right:0px;
    top:0px;
    transition:background-position 0.25s, opacity 0.25s, width 0.25s;
    width:100px;
}

#divAppHeader #divHeaderWallet:hover:before, #divAppHeader #divHeaderWallet:focus:before
{
    opacity:1;
}

#divAppHeader #divHeaderWallet:after
{
    border:2px solid #3f4656;
    border-radius:10px;
    color:#ffffff;
    content:"Wallet";
    height:calc(100% - 4px);
    line-height:46px;
    padding:0px 15px 0px 40px;
    position:absolute;
    right:0px;
    top:0px;
    transition:border 0.25s, box-shadow 0.25s;
}

#divAppHeader #divHeaderWallet:hover:after, #divAppHeader #divHeaderWallet:focus:after
{
    border:2px solid #cffdff;
    box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9;
}

#divHeaderWallet .spnWalletRand
{
    float:left;
    margin-left:10px;
    position:relative;
    top:50%;
    transform:translateY(-50%);
}

#divHeaderWallet #divHeaderBalance
{
    float:left;
    height:100%;
}

#divHeaderWallet .spnWalletArrow:after
{
    content:">";
    float:left;
    font-size:12px;
    margin:17px 0px 0px 10px;
    position:relative;
    transform:rotate(90deg);
}

/* WALLET POPUP */
#divAppWallet
{
    background-color:rgba(0, 0, 0, 0.75);
    display:none;
    height:100%;
    left:0%;
    opacity:0;
    position:fixed;
    top:0%;
    width:100%;
    z-index:5;
}

#divAppWallet.show
{
	animation-duration:0.25s;
	animation-name:showWallet;
	display:block;
	opacity:1;
}

#divAppWallet .hide
{
    display: none !important;
}

#divAppWallet #divWalletPopup
{
    background-color:#1b1c20;
    border-radius:10px;
	box-shadow:inset 0px 20px 10px -20px rgba(255, 255, 255, 0.75), inset 0px -20px 10px -20px rgba(0, 0, 0, 0.75), 0px 0px 50px #000000;
	left:50%;
    opacity:0;
	overflow:hidden;
	padding:30px;
	position:absolute;
	top:50%;
	transform:translate(-50%, -50%);
    transition:height 0.25s, padding 0.25s;
	width:480px;
}

#divAppWallet.show #divWalletPopup
{
    animation-duration:0.25s;
	animation-name:showWallet;
	opacity:1;
}

#divAppWallet .h3PopupHeading
{
    height:40px;
	line-height:40px;
    margin-bottom:15px;
}

#divAppWallet .h3PopupHeading:before
{
	background-image:url('../images/icons/wallet.svg');
    background-position:center left;
	background-repeat:no-repeat;
    background-size:80%;
	content:"";
	float:left;
	height:40px;
	line-height:40px;
	margin-right:5px;
	opacity:0.5;
    width:40px;
}

#divAppWallet #btnClosePopup
{
	cursor:pointer;
	height:40px;
	position:absolute;
	right:20px;
	top:20px;
	width:40px;
}

#divAppWallet #btnClosePopup:before
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppWallet #btnClosePopup:after
{
	background-color:#3f4656;
	content:"";
	height:2px;
	left:8px;
	position:absolute;
	top:20px;
	transform:rotate(-45deg);
    transition:background-color 0.25s, box-shadow 0.25s;
	width:24px;
}

#divAppWallet #btnClosePopup:hover:before, #divAppWallet #btnClosePopup:focus:before, #divAppWallet #btnClosePopup:hover:after, #divAppWallet #btnClosePopup:focus:after
{
    background-color:#fbd3ff;
    box-shadow:0px 0px 5px #e600ff;
}

#divAppWallet .divDeposit, #divAppWallet .divWithdraw, #divAppWallet .divLimits, #divAppWallet .divVault
{
	display:none;
    position:relative;
}

#divAppWallet.deposit .divDeposit, #divAppWallet.withdraw .divWithdraw, #divAppWallet.limits .divLimits, #divAppWallet.vault .divVault
{
	display:block;
}

/* Read-only account + selector + change button only appear once a verified account exists. */
#divAppWallet .divWithdraw #divWithdrawAccount,
#divAppWallet .divWithdraw #drdWithdrawAccount,
#divAppWallet .divWithdraw #btnChangeAccount {
    display: none;
}

/* Capture phase (NOT bankVerified): show only the add-bank-account form + its button. */
#divAppWallet .divWithdraw:not(.bankVerified) #txtWithdrawAmount,
#divAppWallet .divWithdraw:not(.bankVerified) #drdSourceOfFunds,
#divAppWallet .divWithdraw:not(.bankVerified) #btnWithdraw {
    display: none;
}

/* Verified phase (bankVerified): amount + read-only account + withdraw; hide the capture form. */
#divAppWallet .divWithdraw.bankVerified #divWithdrawNewAccount,
#divAppWallet .divWithdraw.bankVerified #btnAddBankAccount,
#divAppWallet .divWithdraw.bankVerified #btnCancelAddAccount {
    display: none;
}

#divAppWallet .divWithdraw.bankVerified #divWithdrawAccount {
    display: block;
    clear: both;
    margin: 15px 0px;
}

/* 2+ verified accounts: show the selector dropdown instead of the single read-only line. */
#divAppWallet .divWithdraw.bankVerified.multiAccount #divWithdrawAccount {
    display: none;
}

#divAppWallet .divWithdraw.bankVerified.multiAccount #drdWithdrawAccount {
    display: block;
    margin: 15px 0px;
}

#divAppWallet .divWithdraw.bankVerified #btnChangeAccount {
    border: 1px solid #3f4656;
    border-radius: 10px;
    cursor: pointer;
    display: block;
    font-size: 14px;
    margin: 14px 0;
    padding: 11px;
    text-align: center;
    transition: border-color 0.2s, color 0.2s;
}

#divAppWallet .divWithdraw #btnAddBankAccount{
    width: 100%;
}

#divAppWallet .divWithdraw #btnCancelAddAccount {
    border: 1px solid #3f4656;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    margin: 14px 0 0;
    padding: 11px;
    text-align: center;
    transition: border-color 0.2s, color 0.2s;
}

#divAppWallet .divWithdraw #btnCancelAddAccount:hover {
    border-color: #6c5ce7;
    color: #ffffff;
}

#divAppWallet .divWithdraw.bankVerified #btnChangeAccount:hover {
    border-color: #6c5ce7;
    color: #ffffff;
}

/* Pending / failed bank accounts list — the same compact rows as the Profile › Bank Accounts list,
   shown above the always-visible add form (mirrors #divAppEditProfile .divBankAccount* / .divHr). */
#divAppWallet .divWithdraw #divWalletAccountsHr {
    height: 1px;
    background-color: #888b90;
    margin: 15px 0;
}

#divAppWallet .divWithdraw #divWalletBankAccounts .divBankAccountRow {
    align-items: center;
    background-color: #23242a;
    border: 1px solid #3f4656;
    border-radius: 10px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 12px 14px;
}

#divAppWallet .divWithdraw #divWalletBankAccounts .divBankAccountLabel {
    color: #ffffff;
    flex: 1;
    font-size: 14px;
}

#divAppWallet .divWithdraw #divWalletBankAccounts .divBankAccountStatus {
    font-size: 13px;
    white-space: nowrap;
}

#divAppWallet .divWithdraw #divWalletBankAccounts .divBankAccountStatus.pending {
    color: #e0b341;
}

#divAppWallet .divWithdraw #divWalletBankAccounts .divBankAccountStatus.rejected,
#divAppWallet .divWithdraw #divWalletBankAccounts .divBankAccountStatus.failed {
    color: #ff6b6b;
}

#divAppWallet .divWithdraw #divWalletBankAccounts .btnUploadBankDocument {
    color: #01eff9;
    cursor: pointer;
    font-size: 13px;
    white-space: nowrap;
}

#divAppWallet .divWithdraw #divWalletBankAccounts .btnRemoveBankAccount {
    color: #ff6b6b;
    cursor: pointer;
    font-size: 16px;
    /* 16px glyph with a ~40px touch target; negative margins absorb the box so the row doesn't grow. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    margin: -8px -8px -8px 0;
}

#divAppWallet .divWithdraw #divWalletBankAccounts .btnRemoveBankAccount:hover {
    opacity: 0.8;
}

#divAppWallet .divDeposit .divDepositNote
{
    display:none;
    clear:both;
}

#divAppWallet .divDeposit .divDepositNote .fs-deposit-range td
{
    font-size: 18px;
}

#divAppWallet .divDeposit .divDepositNote .fs-deposit-range .most_popular:after
{
    content: 'MOST POPULAR';
    border-radius: 10px;
    color: #ffffff;
    font-size: 11px;
    height: 28px;
    left: 0;
    position: absolute;
    margin-top: -4px;
    text-align: center;
    width: 100%;
    line-height: 28px;
    filter: drop-shadow(5px 5px 10px #000000);
    z-index: 1;
    border: 2px solid #3f4656;
    animation: pulsateButton 3s;
    animation-iteration-count: infinite;
}

#divAppWallet .divDeposit.hasNote .divDepositNote
{
    margin-top:10px;
    margin-bottom:10px;
    font-size: 80%;
    padding-left: 10px;
    padding-top: 10px;
}

#divAppWallet .divDeposit.hasNote .divDepositNote
{
    display:block;
}

#divAppWallet .divDeposit.hasNote .divDepositNote button
{
    float:right;
    zoom:0.8;
    margin-left:10px;
    margin-top:5px;
    position:relative;
    z-index:99;
}

#divAppWallet .divWithdraw.hasNote .divWithdrawNote
{
    clear:both;
    display:none;
    margin-top:15px;
    font-size:80%;
    padding:0px 10px;
}

#divAppWallet .divWithdraw.hasNote .divWithdrawNote
{
    display:block;
}

#divAppWallet #spnBonusesLink
{
	color:#ffffff;
	cursor:pointer;
	text-decoration:underline;
	text-shadow:0px 0px 5px #01eff9;
}

/* min-height, not height: the Vaulted row is a second line inside this box, and a fixed height
   would render it, give it layout, and then clip it to zero visible pixels — which reads exactly
   like the JS never ran. The overflow:hidden must stay: it is also the clearfix for the floated
   label/value pairs inside. */
#divAppWallet .divBalanceSection
{
    background-color:#292a2f;
	border-radius:10px;
    min-height:30px;
    margin:10px 0;
    overflow:hidden;
    padding:15px 20px;
    position:relative;
}

#divAppWallet #divVaultedRow
{
    clear:both;
    padding-top:8px;
}

#divAppWallet .divBalanceLabel
{
    color:#ffffff;
    float:left;
    font-size:18px;
    line-height:30px;
    width:72px;
}

#divAppWallet #divNormalBalance, #divAppWallet #divBonusBalance, #divAppWallet #divVaultedBalance
{
    color:#01eff9;
    float:left;
    font-size:18px;
    font-weight:700;
    line-height:30px;
    width:calc(50% - 95px);
}

#divAppWallet #divNormalBalance
{
    margin-right:20px;
}

#divAppWallet #divNormalBalance:before, #divAppWallet #divBonusBalance:before, #divAppWallet #divVaultedBalance:before
{
    content:"R";
    margin-right:5px;
}

#divAppWallet #btnBalanceInfo
{
    color:#888b90;
    cursor:pointer;
    font-size:22px;
    height:30px;
    line-height:30px;
    position:absolute;
    right:10px;
    text-align:center;
    top:15px;
    transition:color 0.25s, text-shadow 0.25s;
    width:30px;
}

#divAppWallet #btnBalanceInfo:hover, #divAppWallet #btnBalanceInfo:focus
{
    color:#ffffff;
    text-shadow:0px 0px 5px #e600ff;
}

/* DEPOSIT WIZARD */
#divAppWallet #divDepositStepIndicator
{
    text-align:center;
    margin:10px 0;
}

#divAppWallet .divStepDot
{
    display:inline-block;
    width:8px;
    height:8px;
    border-radius:50%;
    background-color:#3f4656;
    margin:0 4px;
    transition:background-color 0.3s;
}

#divAppWallet .divStepDot.active
{
    background-color:#7262f2;
}

#divAppWallet .divDepositStep
{
    display:none;
}

#divAppWallet .divDepositStep.active
{
    display:block;
}

/* FREE SPINS TILES */
#divAppWallet .divFreespinCampaignHeader
{
    color:#ffffff;
    font-size:18px;
    margin-bottom:10px;
    text-align:center;
}

#divAppWallet #divFreespinTiles .divFreespinTilesGrid
{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

#divAppWallet .divFreespinTile
{
    background-color:#292a2f;
    border:2px solid #292a2f;
    border-radius:10px;
    box-sizing:border-box;
    cursor:pointer;
    padding:12px 5px;
    text-align:center;
    transition:border 0.25s, box-shadow 0.25s, background-color 0.25s;
    width:calc((100% - 20px) / 3);
    user-select:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#divAppWallet .divFreespinTile:hover
{
    border:2px solid #3f4656;
}

#divAppWallet .divFreespinTile.selected
{
    border:2px solid rgba(0, 220, 240, 0.9);
    box-shadow:0 0 20px rgba(0, 220, 240, 0.35), 0 0 40px rgba(0, 220, 240, 0.15), inset 0 0 25px rgba(0, 220, 240, 0.08);
    background-color:rgba(0, 60, 80, 0.4);
    color:#ffffff;
}

#divAppWallet .divFreespinTile.mostPopular
{
    position:relative;
}

#divAppWallet .divFreespinTile.mostPopular .divFreespinTilePopular
{
    animation:pulsateBadge 3s infinite;
    background-color:rgba(0, 220, 240, 0.85);
    border-radius:8px;
    color:#ffffff;
    font-size:9px;
    left:50%;
    padding:2px 8px;
    position:absolute;
    top:-10px;
    transform:translateX(-50%);
    white-space:nowrap;
}

#divAppWallet .divFreespinTileAmount
{
    color:#ffffff;
    font-size:18px;
    font-weight:700;
    margin-bottom:4px;
}

#divAppWallet .divFreespinTileSpins
{
    color:#01eff9;
    font-size:13px;
}

#divAppWallet .divFreespinTilePopular
{
    color:#e981f5;
    font-size:10px;
    font-weight:700;
    text-transform:uppercase;
    margin-top:2px;
}

#divAppWallet .divFreespinValidUntil
{
    color:#888;
    font-size:12px;
    text-align:center;
    margin-top:10px;
}

/* STEP HEADERS */

#divAppWallet .divDepositStep button
{
    margin-top:20px;
    width:100%;
}

#divAppWallet .btnStepNext,
#divAppWallet #btnStep1Next,
#divAppWallet #btnStepBack,
#divAppWallet #btnStep2Back,
#divAppWallet #btnSkipFreespins
{
    background:transparent;
    border:2px solid #7262f2;
    color:#ffffff;
}

#divAppWallet .btnStepNext:hover,
#divAppWallet #btnStep1Next:hover,
#divAppWallet #btnStepBack:hover,
#divAppWallet #btnStep2Back:hover,
#divAppWallet #btnSkipFreespins:hover
{
    border-color:#9b8fff;
}

/* When NEXT is the first/main step (no free-spins step), fill it like the deposit button. */
#divAppWallet .btnStepNext.primaryStep
{
    background:linear-gradient(180deg, #ac78e4 0%, #7262f2 100%);
    border:none;
    color:#ffffff;
}

#divAppWallet .divFreespinBanner
{
    background-color:#292a2f;
    border-radius:10px;
    padding:8px 12px;
    margin-bottom:10px;
    font-size:14px;
    text-align:center;
    color:#e981f5;
}

#divAppWallet .divFreespinBanner.noMatch
{
    color:#888b90;
}

#divAppWallet .divStepLabel
{
    color:#ffffff;
    font-size:18px;
    margin-bottom:5px;
}

/* DEPOSIT */
#divAppWallet #divDepositTypes
{
    margin-top:10px;
}

#divAppWallet #divDepositTypes:after
{
	clear:both;
	content:"";
	display:block;
}

#divAppWallet .divDepositType
{
	background-color:#292a2f;
    border:2px solid #292a2f;
    border-radius:10px;
    cursor:pointer;
    height:20px;
    float:left;
	font-size:12px;
	line-height:12px;
	margin:0px 10px 10px 0px;
	padding:45px 0px 5px;
	position:relative;
	text-align:center;
	transition:border 0.25s, color 0.25s;
	width:calc((100% - 46px) / 4);
	user-select:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#divAppWallet .divDepositType:nth-child(4n)
{
	margin-right:0px;
}

#divAppWallet .divDepositType.selected
{
    border:2px solid #7262f2;
	color:#ffffff;
}

#divAppWallet .divDepositType.new-badge:before
{
    content:'NEW';
    background-color:#7262f2;
    border-radius:5px;
    color:#ffffff;
    font-size:9px;
    height:14px;
    line-height:14px;
    padding:0px 5px;
    position:absolute;
    text-align:center;
    top:-5px;
    right:-5px;
    z-index:1;
}

#divAppWallet .imgDepositType
{
    left:50%;
	max-height:25px;
	max-width:65px;
	position:absolute;
	top:35%;
	transform:translate(-50%, -50%);
}

#divAppWallet #divDepositPresets
{
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    margin-top:10px;
	user-select:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

#divAppWallet .divDepositPreset
{
    align-items:center;
	background-color:#292a2f;
    border:2px solid #292a2f;
    border-radius:10px;
    cursor:pointer;
	display:flex;
    height:48px;
    justify-content:center;
    transition:border 0.25s, color 0.25s;
    width:18%;
}

#divAppWallet .divDepositPreset:focus, #divAppWallet .divDepositPreset:active
{
    border:2px solid #7262f2;
	color:#ffffff;
}

/* VAULT
   Reuses .divDepositPreset for the amount chips rather than cloning the styling — the chips are
   the same control doing the same job. */
/* Empty when the player has a balance — the balance section's "Vault:" row carries the figure.
   :not(:empty) so it costs no vertical space in that case. */
#divAppWallet #divVaultSummary:not(:empty)
{
    color:#ffffff;
    font-size:16px;
    line-height:24px;
    margin-bottom:10px;
}

#divAppWallet #divVaultSummary .divVaultHeadline
{
    color:#01eff9;
    font-size:26px;
    font-weight:700;
    line-height:34px;
}

#divAppWallet #divVaultSummary .divVaultSub
{
    color:#9b9ba1;
    font-size:14px;
}

#divAppWallet #divVaultNote
{
    color:#9b9ba1;
    font-size:14px;
    line-height:20px;
    margin-bottom:10px;
}

#divAppWallet #divVaultNote .textWarning
{
    color:#ffb020;
}

#divAppWallet #divVaultPresets
{
    display:flex;
    justify-content:space-between;
}

#divAppWallet #txtVaultAmount
{
    margin-top:10px;
}

#divAppWallet #txtVaultAmount .txtTextInput
{
    height:48px;
    line-height:48px;
}

/* The two move actions share one row, half width each. The wider 25px gap above separates the
   pair from the amount entry as its own step. Geometry is equalised here because the house
   classes disagree (.large is 68px, .blue 40px); each button keeps its own visual identity.
   TAKE BACK's visibility stays JS-driven — hidden, the flex row hands its half to the primary. */
#divAppWallet .divVaultActions
{
    display:flex;
    gap:10px;
    margin-top:25px;
}

#divAppWallet .divVaultActions button
{
    flex:1 1 0;
    font-size:16px;
    height:56px;
    line-height:56px;
    margin:0;
    min-width:0;
    padding:0 10px;
    width:auto;
}

/* The 2px border eats into the line box; without this the label sits low. */
#divAppWallet .divVaultActions #btnVaultWithdraw
{
    line-height:52px;
}

/* Player-set lock block. Separated from the move buttons by the same 25px step that separates
   them from the amount entry — locking is a different act, not a third way to move money. */
#divAppWallet #divVaultLock
{
    margin-top:25px;
}

#divAppWallet #divVaultLockStatus
{
    color:#9b9ba1;
    display:none;
    font-size:14px;
    line-height:20px;
    margin-bottom:10px;
}

#divAppWallet #btnVaultLock
{
    display:none;
    width:100%;
}

/* VAULT LOCK POPUP
   Lives inside #divAppAlert (the Quick Vault pattern), so the #divAppWallet selectors above
   cannot reach it. Chip and button shapes mirror quickVault.css — copied rather than shared,
   because sport never loads quickVault.css and this file is the one stylesheet both builds do. */
#divAppAlert.vaultLockAlert .divAlertPopup
{
    box-sizing:border-box;
    width:360px;
}

.vlkHeader
{
    color:#ffffff;
    font-family:"JostBold", sans-serif;
    font-size:18px;
    margin-bottom:10px;
    text-align:left;
}

.vlkCopy
{
    color:#9b9ba1;
    font-size:14px;
    line-height:20px;
    margin-bottom:14px;
    text-align:left;
}

/* Five chips at one third each: three on the first row, two centred on the second — the same
   arithmetic as .qvPresets. */
.vlkPresets
{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:center;
    margin-bottom:12px;
}

.vlkPreset
{
    align-items:center;
    background-color:#292a2f;
    border:2px solid #292a2f;
    border-radius:10px;
    box-sizing:border-box;
    color:#ffffff;
    cursor:pointer;
    display:flex;
    flex:1 1 calc((100% - 16px) / 3);
    font-size:14px;
    height:44px;
    justify-content:center;
    max-width:calc((100% - 16px) / 3);
    padding:0 10px;
    transition:border-color 0.25s, color 0.25s;
    user-select:none;
    -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}

.vlkPreset:hover, .vlkPreset:focus, .vlkPreset.selected
{
    border-color:#7262f2;
    color:#ffffff;
}

/* Every message the popup gives lands here — it may not raise an Alert, because it IS one.
   Empty until something is said, so it costs no height in the common case. */
#divVlkNote
{
    color:#9b9ba1;
    font-size:14px;
    line-height:20px;
    text-align:left;
}

#divVlkNote:not(:empty)
{
    margin-top:10px;
}

#divVlkNote .textWarning
{
    color:#ffb020;
}

.btnVlkPrimary
{
    background:#6b42de;
    background:linear-gradient(180deg, #ac78e4 0%, #7262f2 100%);
    border:none;
    border-radius:10px;
    box-shadow:0px 0px 20px rgba(0, 0, 0, 0.5);
    color:#ffffff;
    cursor:pointer;
    display:block;
    font-family:"JostBold", sans-serif;
    font-size:18px;
    font-weight:900;
    height:56px;
    line-height:56px;
    margin-top:16px;
    padding:0;
    text-align:center;
    width:100%;
}

.btnVlkPrimary:disabled
{
    cursor:not-allowed;
    filter:grayscale(100%);
}

.btnVlkSecondary
{
    background:#292a2f;
    border:2px solid #3f4656;
    border-radius:10px;
    box-shadow:none;
    color:#888b90;
    cursor:pointer;
    display:block;
    font-family:"Jost", sans-serif;
    font-size:14px;
    font-weight:100;
    height:44px;
    line-height:40px;
    margin-top:10px;
    padding:0;
    text-align:center;
    transition:border 0.25s, box-shadow 0.25s, color 0.25s, text-shadow 0.25s;
    width:100%;
}

.btnVlkSecondary:hover, .btnVlkSecondary:focus
{
    border:2px solid #cffdff;
    box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9;
    color:#ffffff;
    text-shadow:0px 0px 5px #01eff9;
}

.btnVlkSecondary:disabled
{
    cursor:not-allowed;
    filter:grayscale(100%);
}








#divAppWallet #txtDepositAmount
{
    margin-top:10px;
}

#divAppWallet #txtDepositAmount .txtTextInput
{
    height:48px;
    line-height:48px;
}

#divAppWallet #divCards
{
    display:none;
}

#divAppWallet #divCards.show
{
    display:block;
}

#divAppWallet .radioButtonContainer
{
    margin-top: 30px;
}

#divAppWallet .btnRemoveCard
{
    position: absolute;
    cursor: pointer;
    right: 0;
    margin-top: -23px;
    font-size: 24px;
}

#divAppWallet .btnRemoveCard:hover, #divAppWallet .btnRemoveCard:focus
{
    color:#ffffff;
    text-shadow:0px 0px 5px #e600ff;
}

#divAppWallet #chkRememberCard
{
    margin-top:30px;
}


/* WITHDRAW */
#divAppWallet .divWithdrawalAlert
{
	background-color:#292a2f;
	border:2px solid #3f4656;
	border-radius:10px;
	color:#ffffff;
	margin-top:10px;
	padding:5px 10px;
}

#divAppWallet .divWithdrawalAlert p
{
	color:#888b90;
	font-size:14px;
}

#divAppWallet .divWithdrawalAlert span
{
	color:#ffffff;
}

#divAppWallet #txtWithdrawAmount
{
    float:left;
    margin:0px 0px 15px 0px;
    transition:margin 0.25s, width 0.25s;
    width:calc(50% - 15px);
}

#divAppWallet .divWithdraw.bankVerified #txtWithdrawAmount
{
    width:100%
}

#divAppWallet #drdBank
{
    float:left;
    margin-bottom:10px;
    margin-top:10px;
    transition:margin 0.25s, width 0.25s;
    width: 100%;
}

#divAppWallet #drdSourceOfFunds
{
    clear:both;
    display: inline-block;
    margin: 10px 0 15px 0;
    transition:margin 0.25s, width 0.25s;
    width: 100%;
}

#divAppWallet .divWithdrawTypeLabel
{
    clear:both;
    font-size:14px;
    margin-bottom:20px;
}

#divAppWallet .divAccountTypes
{
    display:flex;
    gap:15px;
}

#divAppWallet .divAccountTypes #rbtCheque,
#divAppWallet .divAccountTypes #rbtSavings
{
    flex:1;
}

#divAppWallet #txtAccountNumber
{
    clear:both;
    float:left;
    margin:10px 0 0 0;
    transition:margin 0.25s, width 0.25s;
    width:100%;
}

#divAppWallet #txtAccountHolder
{
    clear:both;
    float:left;
    margin:10px 0 15px 0;
    transition:margin 0.25s, width 0.25s;
    width:100%;
}

#divAppWallet #btnWithdraw
{
    clear:both;
    width:100%;
}

#divAppWallet.activeWithdrawal #btnWithdraw
{
    opacity:0;
}

#divAppWallet .divCancelWithdrawal
{
    background-color:#1b1c20;
    bottom:0px;
    display:none;
    left:0px;
    position:absolute;
    right:0px;
    top:0px;
}

#divAppWallet.activeWithdrawal .divCancelWithdrawal
{
    display:block;
}

#divAppWallet #divCancelText
{
    margin:30px 0px;
}

#divAppWallet #divCancelText ul
{
    padding:0px 0px 0px 18px;
}

#divAppWallet .divCancelWithdrawal #btnCancelWithdrawal
{
    display:block !important;
    margin:0 auto;
}

/* EXISTING WITHDRAWAL ACCOUNT */
#divAppWallet #divWithdrawAccount .divWithdrawAccountNumber{
    color:#ffffff;
    margin:0px 30px;
    text-align:center;
    text-shadow:0px 0px 5px #01eff9;
    line-height: 35px;
}

/* LIMITS */
#divAppWallet .divWithdrawalLimit
{
    color:#ffffff;
    margin:30px 0px 10px;
}

#divAppWallet .divWithdrawalLimit .divWithdrawalLimitHeadline
{
    display:block;
}

#divAppWallet .divWithdrawalLimit .divWithdrawalLimitDetail
{
    color:#888b90;
    display:block;
    font-size:13px;
    margin-top:6px;
}

#divAppWallet .divWithdrawalLimit .divWithdrawalLimitBlocker
{
    color:#cffdff;
    display:block;
    font-size:13px;
    margin-top:8px;
}

#divAppWallet .divWithdrawalLimitNote
{
    color:#888b90;
    font-size:13px;
    margin:0px 0px 180px;
}

#divAppWallet #divTransactionHistory
{
    cursor:pointer;
    font-size:14px;
    margin-top:20px;
    position:relative;
    text-align:center;
    text-decoration:underline;
    transition:color 0.25s, text-shadow 0.25s;
}

#divAppWallet #divTransactionHistory:hover, #divAppWallet #divTransactionHistory:focus
{
    color:#ffffff;
    text-shadow:0px 0px 5px #e600ff;
}

/* ANIMATION KEY FRAMES */
@keyframes pulsateBadge
{
    0%   {box-shadow:0px 0px 5px #01eff9; background-color:rgba(0, 220, 240, 0.85);}
    25%  {box-shadow:0px 0px 5px rgba(1, 239, 249, 0); background-color:rgba(0, 180, 200, 0.7);}
    50%  {box-shadow:0px 0px 5px #01eff9; background-color:rgba(0, 220, 240, 0.85);}
    75%  {box-shadow:0px 0px 5px rgba(1, 239, 249, 0); background-color:rgba(0, 180, 200, 0.7);}
    100% {box-shadow:0px 0px 5px #01eff9; background-color:rgba(0, 220, 240, 0.85);}
}

@keyframes showWallet
{
	0%   {opacity:0;}
	1%   {opacity:0;}
	100% {opacity:1;}
}

/* MEDIA QUERIES */
@media (max-height: 975px)
{
    /* WALLET POPUP */
    #divAppWallet.deposit.hasDepositBonusNote #divWalletPopup
    {
        height:calc(100% - 120px);
        overflow-y:auto;
    }
}

@media (max-height: 875px)
{
    /* WALLET POPUP */
    #divAppWallet.withdraw #divWalletPopup
    {
        height:calc(100% - 120px);
        overflow-y:auto;
    }
}

@media (max-height: 800px)
{
    /* WALLET POPUP */
    #divAppWallet.deposit #divWalletPopup
    {
        height:calc(100% - 100px);
        overflow-y:auto;
        top:20px;
        transform:translate(-50%, 0%);
    }
}

@media (max-height: 678px)
{
    /* WALLET POPUP */
    /* Vault joins limits here: summary, note, presets, amount, two buttons and a history list
       is a tall panel, and on a short viewport it needs the same scrollable treatment. */
    #divAppWallet.limits #divWalletPopup, #divAppWallet.vault #divWalletPopup
    {
        height:calc(100% - 100px);
        overflow-y:auto;
        top:20px;
		transform:translate(-50%, 0%);
    }
}

@media (max-width: 1200px)
{
    /* HEADER WALLET */
    #divAppHeader #divHeaderWallet
    {
        left:50%;
        margin-left:0px;
        position:absolute;
        transform:translateX(-50%);
    }

    /* WALLET POPUP */
    #divAppWallet.deposit #divWalletPopup, #divAppWallet.withdraw #divWalletPopup, #divAppWallet.limits #divWalletPopup, #divAppWallet.vault #divWalletPopup
    {
        height:calc(100% - 165px);
    }
}

@media (max-width: 600px)
{
    /* HEADER WALLET */
    #divAppHeader #divHeaderWallet
    {
        color:#ffffff;
        height:40px;
        margin-top:5px;
        padding-right:55px;
    }

    #divAppHeader #divHeaderWallet:before
    {
        background-position:9px 9px;
        opacity:1;
        width:40px;
    }

    #divAppHeader #divHeaderWallet:after
    {
        border:2px solid #cffdff;
        box-shadow:inset 0px 0px 5px #01eff9, 0px 0px 5px #01eff9;
        content:"";
        padding:0px 18px 0px 18px;
    }

    #divHeaderWallet .spnWalletArrow:after
    {
        display:none;
    }
}

@media (max-width: 540px)
{
    /* WALLET POPUP */
    #divAppWallet
    {
        display:block;
        opacity:1;
        transform:translate(-100%, 0%);
        transition:transform 0.25s;
    }

    #divAppWallet.show
    {
        animation:none;
        transform:translate(0%, 0%);
    }

    #divAppWallet.withdraw.hasWithdrawBonusNote #divWalletPopup, #divAppWallet #divWalletPopup, #divAppWallet.deposit #divWalletPopup, #divAppWallet.withdraw #divWalletPopup, #divAppWallet.limits #divWalletPopup, #divAppWallet.vault #divWalletPopup
    {
        box-shadow:none;
        border-radius:0px;
        height:calc(100% - 120px);
        left:0%;
        opacity:1;
        overflow-y:auto;
        padding:20px 20px 100px;
        top:0%;
        transform:translate(0%, 0%);
        width:calc(100% - 40px);
    }

    #divAppWallet.show #divWalletPopup
    {
        animation:none;
    }

    #divAppWallet #btnClosePopup
    {
        right:15px;
        top:15px;
    }

    #divAppWallet #btnClosePopup:before, #divAppWallet #btnClosePopup:after
    {
        background-color:#fbd3ff;
        box-shadow:0px 0px 5px #e600ff;
    }

    #divAppWallet .divBalanceLabel
    {
        font-size:16px;
        width:72px;
    }

    #divAppWallet #divNormalBalance, #divAppWallet #divBonusBalance, #divAppWallet #divVaultedBalance
    {
        font-size:16px;
        width:calc(50% - 85px);
    }
}

@media (max-width: 500px)
{
    #divAppWallet .divBalanceLabel
    {
        font-size:14px;
        width:62px;
    }

    #divAppWallet #divNormalBalance, #divAppWallet #divBonusBalance, #divAppWallet #divVaultedBalance
    {
        font-size:14px;
        width:calc(50% - 75px);
    }

    #divAppWallet #btnBalanceInfo
    {
        right:5px;
    }
}

@media (max-width: 420px)
{
    /* HEADER WALLET */
    #divHeaderWallet #divHeaderBalance .divRoller
    {
        font-size:13px;
    }

    /* WALLET POPUP */
    #divAppWallet.withdraw.hasWithdrawBonusNote #divWalletPopup, #divAppWallet #divWalletPopup, #divAppWallet.deposit #divWalletPopup, #divAppWallet.withdraw #divWalletPopup, #divAppWallet.limits #divWalletPopup, #divAppWallet.vault #divWalletPopup
    {
        height:calc(100% - 130px);
        padding:15px 15px 100px;
        width:calc(100% - 30px);
    }

    #divAppWallet #btnClosePopup
    {
        right:10px;
        top:10px;
    }

    #divAppWallet .divBalanceSection
    {
        padding:15px;
    }

    #divAppWallet .divBalanceLabel
    {
        font-size:13px;
        width:60px;
    }

    #divAppWallet #divNormalBalance, #divAppWallet #divBonusBalance, #divAppWallet #divVaultedBalance
    {
        font-size:13px;
        width:calc(50% - 70px);
    }

    /* WITHDRAW */
    #divAppWallet #txtWithdrawAmount
    {
        margin:10px 10px 20px 0px;
        width:calc(50% - 10px);
    }

    #divAppWallet #txtAccountNumber
    {
        margin:10px 0px 0px 0px;
        width:100%;
    }

    #divAppWallet #txtAccountHolder
    {
        margin:10px 0px 30px 0px;
        width:100%;
    }
}

/* Stack wallet over the game popup (z-index:15) when the game popup is open */
body.gameActive #divAppWallet
{
    z-index:20;
}