<div class="cabinet-block">
    <div class="cabinet-block__header">
		<div class="cabinet-block__items">
			<div class="cabinet-block__name"><span class="masha_index masha_index25" rel="25"></span>Баланс</div>
			<div class="cabinet-block__pos">
				<div class="cabinet-block__small-button cabinet-block__small-button-right balanceHistory" data-toggle="tooltip" data-placement="left" onclick="$('#replanishBalance').modal('show')" title="" data-original-title="Паполнить счёт"> <i class="far fa-history"></i></div>
			</div>
		</div>
    </div>
    <div class="cabinet-block__body">
		<div class="cabinet-content__gifts">
			<div class="row">
				<div class="col-xl-6 col-md-12 mb-3">
					<div class="balance-block">
						<div class="balance-block__button balance-block__button_plus" onclick="refresh_data('cabinet_ref_realbalance');"><i class="fas fa-sync-alt"></i></div>
						<div class="balance-block__value balance-block__real" id="cabinet_ref_realbalance">{$user_balance}</div>
						<div class="balance-block__desc">Реальный баланс</div>
					</div>
				</div>
				<div class="col-xl-6 col-md-12 mb-3">
					<div class="balance-block">
						<div class="balance-block__button balance-block__button_plus" onclick="refresh_game_balance(this);"><i class="fas fa-sync-alt"></i></div>
						<div class="balance-block__value balance-block__real" id="cabinet_ref_realbalance">{$user_game_balance}</div>
						<div class="balance-block__desc">Игровой баланс</div>
					</div>
				</div>
			</div>
		</div>
    </div>
</div>


<script>
$(function(){
    $('[data-toggle="tooltip"]').tooltip();    
});
</script>

<style>
.balance-block {
  position: relative;
  display: block;
  margin: 0 auto;
  background: #f7f7f7;
  padding: 30px 15px;
  width: 90%;
  border-radius: 3px;
}

.balance-block__value {
  color: #a7a7a7;
  font-size: 26px;
  font-weight: 600;
  text-align: center;
}

.balance-block__value svg {
  font-size: 15px;
  color: #a7a7a7;
  margin-left: 2px;
  opacity: 0.56;
}

.balance-block__desc {
  color: #a7a7a7;
  font-size: 11px;
  text-align: center;
}

.balance-block__button {
  color: #4465e6;
  position: absolute;
  top: 8px;
  right: 10px;
  cursor: pointer;
}

.balance-block__button-left {
  color: #a7a7a7;
  right: 31px;
  font-size: 13px;
}

</style>