<template>
	<view class="bg-container">
		<image class="bg-image" src="/static/images/bg_mine.png"></image>
		<view class="content-container">
			<view id="func-box" style="padding: 0rpx 30rpx 0rpx 30rpx;">
				<view class="custom-navbar"
					:style="{'height':totalHeight+'px','padding-top':statusBarHeight+'px','justify-content':'center','color':'#532A00'}">
					<view class="navbar-title">AI喵著</view>
				</view>
				<view class="container-box">
					<view class="box-up">
						<view class="balance" @click="doRefresh">
							<view>{{accountInfo.accountMoney/100}}</view>
							<view class="icon-refresh" :animation="animationData"></view>
						</view>
						<view class="balance-box">
							<view class="balance-desc">账户余额</view>
							<view class="balance-btn" @click="doPay">充值</view>
						</view>
					</view>
					<view class="box-down">
						<view class="mt-10">套餐包余额</view>
						<view class="package-bag">
							<view class="package-bag-item" @click="openCreate" data-type="ALL">
								<text class="title">全托管</text>
								<text class="num">{{allCount}}</text>
							</view>
							<view class="package-bag-item" @click="openCreate" data-type="MATERIAL">
								<text class="title">写材料</text>
								<text class="num">{{materialCount}}</text>
							</view>
							<view class="package-bag-item" style="align-items:center;" @click="doCoupons">
								<view class="icon icon-coupon-ind"></view>
								<view class="title" style="margin-left: 3px;">优惠卷</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="menu-box" :style="{'height':contentHeight+'rpx'}">
				<scroll-view scroll-y :style="{'height':contentHeight+'rpx'}">
					<view class="menu-container">
						<block v-for="(item,index) in menuList" :key="index">
							<view class="menu-item" @click="itemClick" hover-class="menu-item-active"
								:data-path="item.path">
								<view :class="item.icon"></view>
								<view class="menu-title">{{item.title}}</view>
							</view>
							<view class="divider-padding"></view>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog type="info" :show-close="false" confirmText="关闭" title="提示"
			:content="alertMsg"></uni-popup-dialog>
	</uni-popup>
	<uni-popup ref="msg" type="message">
		<uni-popup-message :isTop="false" :type="msgType" :message="msgTxt" :duration="2000"></uni-popup-message>
	</uni-popup>
</template>

<script>
	import {
		copyrightUrl
	} from '@/common/js/net/http.js'
	import UserApi from '@/common/js/net/UserApi.js'
	import ProApi from '@/common/js/net/projectApi.js'
	import {
		pxToRpx
	} from '@/common/js/util.js'
	import {
		menuList
	} from '@/common/js/data.js'
	export default {
		data() {
			return {
				contentHeight: 100,
				totalHeight: 50,
				statusBarHeight: 24,
				allCount: 0,
				materialCount: 0,
				accountInfo: {},
				animationData: {},
				animation: null,
				alertMsg: '', //alertDialog提示内容
				menuList: menuList,
				msgType: 'info',
				msgTxt: '',
				allPrice: 0, //全托管价格
				materialPrice: 0, //写材料价格
				urgent: 0, //加急价格
			}
		},
		onLoad() {
			// 创建一个动画实例
			const animation = uni.createAnimation({
				duration: 1000,
				timingFunction: 'ease'
			});
			this.animation = animation
			this.doGetPrice()
			this.countBarHeight()
		},
		onReady() {
			this.calculateRemainingHeight()
		},
		onShow() {
			this.getMineAccount()
			this.getMinePackageCount()
		},
		onPullDownRefresh() {
			this.getMineAccount()
			this.getMinePackageCount()
			uni.stopPullDownRefresh()
		},
		methods: {
			//计算状态栏等高度
			countBarHeight() {
				//#ifdef MP-WEIXIN || H5
				const windowInfo = uni.getWindowInfo()
				const deviceInfo = uni.getDeviceInfo()
				this.statusBarHeight = windowInfo.statusBarHeight
				this.totalHeight = deviceInfo.osName.toLowerCase() == 'ios' ? 48 : 50 // 导航栏总高度
				//#endif
				//#ifdef MP-ALIPAY ||MP-BAIDU||MP-TOUTIAO || MP-KUAISHOU || MP-XHS
				const deviceInfo = uni.getSystemInfoSync()
				this.statusBarHeight = deviceInfo.statusBarHeight
				this.totalHeight = deviceInfo.osName.toLowerCase() == 'ios' ? 48 : 50 // 导航栏总高度
				console.log('手机平台', deviceInfo.osName)
				//#endif
			},
			//计算高度
			calculateRemainingHeight() {
				// 获取窗口高度
				const systemInfo = uni.getSystemInfoSync();
				const windowHeight = systemInfo.windowHeight
				const screenWidth = systemInfo.screenWidth
				const screenHeight = systemInfo.screenHeight
				console.log(windowHeight);
				// bg-title  container-title
				// 获取已占用元素的高度
				const query = uni.createSelectorQuery().in(this);
				query.select('#func-box').boundingClientRect(data => {
					if (data) {
						const occupiedHeight = data.height;
						// 计算剩余高度
						let tabbarHeight = screenHeight - windowHeight
						// #ifdef MP-TOUTIAO
						this.contentHeight = windowHeight - occupiedHeight - 35;
						// #endif
						// #ifndef MP-TOUTIAO
						this.contentHeight = windowHeight - occupiedHeight - tabbarHeight - 20;
						// #endif

						let coverHeight = pxToRpx(this.contentHeight, screenWidth)
						this.contentHeight = coverHeight
					} else {
						console.log('未获取到高度');
					}
				}).exec();
			},
			//刷新账户
			doRefresh() {
				const _self = this
				_self.playAnimation()
				_self.getMineAccount() //获取账户信息
				_self.getMinePackageCount() //获取套餐包信息
				_self.doGetPrice() //获取单价
			},
			//跳转支付
			doPay() {
				uni.navigateTo({
					url: '/pages/pay/payment/payment'
				})
			},
			//跳转创建
			openCreate(e) {
				uni.navigateTo({
					url: '/pages/mine/mineAccount/minePackageRecord/minePackageRecord'
				})
				// const _self = this;
				// const type = e.currentTarget.dataset.type;
				// const count = type === 'ALL' ? _self.allCount : _self.materialCount;
				// if (count > 0) {
				// 	_self.doGetPackage(type);
				// } else {
				// 	_self.msgType = 'error';
				// 	_self.msgTxt = '您的账户当前无套餐包，为正常使用请及时充值。';
				// 	_self.$refs.msg.open();
				// }
			},
			//跳转优惠卷
			doCoupons() {
				uni.navigateTo({
					url: '/pages/mine/mineAccount/mineCoupons/mineCoupons'
				})
			},
			//跳转页面
			itemClick(e) {
				const path = e.currentTarget.dataset.path
				const title = e.currentTarget.dataset.title
				uni.navigateTo({
					url: path
				})
			},
			//获取单价
			doGetPrice() {
				uni.showLoading({
					title: '加载中...',
				})
				const _self = this
				ProApi.doGetPrice()
					.then(res => {
						uni.hideLoading()
						console.log(res)
						res.projTypes.forEach(el => {
							if (el.type == 'ALL') {
								_self.allPrice = el.price //全托管价格
							} else if (el.type == 'MATERIAL') {
								_self.materialPrice = el.price //写材料价格
							}
						});
						_self.urgent = res.additional.urgent //加急价格
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgTxt = '网络错误,请刷新页面'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
			//播放刷新动画
			playAnimation() {
				const _self = this
				// 重置动画
				_self.animation.scale(1, 1).rotate(0).step({
					duration: 0
				});
				_self.animationData = _self.animation.export()
				_self.animation.scale(0.8, 0.8).rotate(180).step()
				// 定义新的动画
				_self.animation.scale(1, 1).rotate(360).step()
				_self.animationData = _self.animation.export()
				setTimeout(() => {
					_self.animationData = {}
				}, 1100);
			},
			//获取账户余额
			getMineAccount() {
				const _self = this
				UserApi.doGetMineAccount()
					.then(res => {
						_self.accountInfo = res
					})
					.catch(err => {
						_self.msgType = 'error'
						_self.msgTxt = err.msg ? err.msg : '网络信号开小差啦，请您稍后再试，给您添麻烦～'
						_self.$refs.msg.open()
					})
			},
			//获取账户余额
			getMinePackageCount() {
				const _self = this
				UserApi.doGetMinePackageCount()
					.then(res => {
						_self.allCount = res.ALL
						_self.materialCount = res.MATERIAL
					})
					.catch(err => {
						console.log(err)
						_self.allCount = 0
						_self.materialCount = 0
						_self.msgType = 'error'
						_self.msgTxt = err.msg ? err.msg : '网络信号开小差啦，请您稍后再试，给您添麻烦～'
						_self.$refs.msg.open()
					})
			},
			//获取套餐包详情
			doGetPackage(type) {
				const _self = this
				uni.showLoading({
					title: '加载中...'
				})
				const data = {
					page: 1,
					rows: 10,
					packageType: type,
					keyong: 1,
				}
				ProApi.doGetPackageList(data)
					.then(res => {
						uni.hideLoading()
						console.log(res.rows)
						if (res.rows && res.rows.length > 0) {
							const packageId = res.rows[0].packageInfoId
							const price = type == 'ALL' ? _self.allPrice : _self.materialPrice
							uni.navigateTo({
								url: `/pages/copyright/createProjectInfo/createProjectInfo?type=${type}&price=${price}&isUrgent=false&pId=${packageId}`
							})
						} else {
							_self.msgTxt = '您的账户当前无套餐包，为正常使用请及时充值。'
							_self.msgType = 'error'
							_self.$refs.msg.open()
						}
					})
					.catch(err => {
						uni.hideLoading()
						_self.msgTxt = '获取套餐包失败,请稍后重试'
						_self.msgType = 'error'
						_self.$refs.msg.open()
					})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.bg-container {
		position: relative;
	}

	.navbar-title {
		font-size: 40rpx;
		text-align: center;
		font-weight: bold;
	}

	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-size: cover;
		background-repeat: no-repeat;
	}

	.content-container {
		position: relative;
		z-index: 1;
		color: white;
	}

	.container-content {
		display: flex;
		flex-direction: column;
		padding: 20rpx;
	}

	.container-box {
		display: flex;
		flex-direction: column;
	}

	.box-up {
		display: flex;
		flex-direction: column;
		background: linear-gradient(to right, #FFDBB4, #FFEDD2);
		padding: 20rpx 40rpx;
		color: #532A00;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}

	.box-down {
		display: flex;
		flex-direction: column;
		background: linear-gradient(to right, #FFF0DE, #FEEBD0);
		padding: 10rpx 40rpx;
		color: #532A00;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
	}

	.balance-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.balance-btn {
		padding: 10rpx 40rpx;
		background-color: #4EAF79;
		border-radius: 10rpx;
		color: white;
	}

	.balance-desc {
		font-size: 24rpx;
		margin-top: 10rpx;
		font-weight: 400;
	}

	.balance {
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: 48rpx;
		font-weight: 600;
	}



	.arrow-down {
		width: 0;
		height: 0;
		margin-left: 30rpx;
		border-top: 14rpx solid transparent;
		border-bottom: 14rpx solid transparent;
		border-left: 14rpx solid #532A00;
	}

	.package-bag {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.package-bag-item {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: baseline;
		padding-bottom: 5px;
	}

	.package-bag-item .icon {
		width: 40rpx;
		height: 40rpx;
	}

	.package-bag .title {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.package-bag .num {
		margin-left: 10rpx;
		font-size: 40rpx;
		font-weight: bold;
	}

	.menu-box {
		display: flex;
		flex-direction: column;
		margin-top: 30rpx;
		background: white;
		border-radius: 20rpx;
		padding-top: 20rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}

	.menu-item {
		display: flex;
		flex-direction: row;
		padding: 30rpx 40rpx;
		align-items: center;
		margin-left: 20rpx;
		margin-right: 20rpx;
		width: 75vw;
	}

	.menu-container {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}

	.divider-padding {
		background-color: #efefef6b;
		height: 1px;
		width: 75vw;
		align-self: center;
	}

	.menu-icon {
		width: 48rpx;
		height: 48rpx;
	}

	.menu-title {
		font-size: 28rpx;
		color: black;
		margin-left: 20rpx;
	}

	.menu-item-active {
		transform: translateY(2px);
	}



	.menu-item-active::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 5px;
		height: 5px;
		background: rgba(255, 255, 255, 0.5);
		opacity: 0;
		border-radius: 100%;
		transform: scale(1, 1) translate(-50%, -50%);
		transform-origin: 50% 50%;
	}

	.menu-item-active::after {
		animation: ripple 0.6s ease-out;
	}

	@keyframes ripple {
		0% {
			transform: scale(0, 0);
			opacity: 0.5;
		}

		100% {
			transform: scale(20, 20);
			opacity: 0;
		}
	}


	.ic-user {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzNjUwMjM5MzQ1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjUyNzEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUxMS45OTQyNjQgMEMyMjkuMjMxODE0IDAgMCAyMjkuMjIwMzQxIDAgNTExLjk5NDI2NHMyMjkuMjMxODE0IDUxMS45OTQyNjQgNTExLjk5NDI2NCA1MTEuOTk0MjY0IDUxMi4wMDU3MzYtMjI5LjIyMDM0MSA1MTIuMDA1NzM2LTUxMS45OTQyNjRTNzk0Ljc2ODE4NiAwIDUxMS45OTQyNjQgMHpNMzQ2LjA0NDcwMiAzNTcuOTQxNjc0YzUuNTI5NzQtODMuOTMyNzM0IDcwLjk5MTc2NS0xMzguMzgxMTY5IDE0MS40OTAyMTQtMTQ4LjA5ODM2OCAzLjkwMDY0Ni0wLjUzOTIwNyA3LjY3NTA5Ni0xLjkzODg1MSAxMS40NzI0OS0yLjkzNjk1N2gyNy40NTM2NjdjMjcuNTMzOTc1IDMuNTc5NDE3IDUyLjE3Njg4MiAxMy43NjY5ODcgNzYuNTEwMDMzIDI3LjM2MTg4OCA2NS4wMTQ1OTggMzYuMTg0MjMyIDg4LjI0NjM5IDExNy4yNzE3ODggNjguMzg3NTEgMTgyLjEzNzI0NC0yNC4xNjEwNjMgNzguOTA3NzgzLTExMi4zNjE1NjMgMTI4Ljk1MDc4My0xOTUuMTgxNDY1IDExMS4xMTEwNjEtNzkuNTYxNzE1LTE3LjE1MTM3Mi0xMzUuMTY4ODcyLTkzLjUzNTIwNy0xMzAuMTMyNDQ5LTE2OS41NDA0NXogbTQyNS40MjI4NTggNDEwLjI3OTE3MWMtMzAuMTM4MjMgMTkuMzg4NTA3LTY1LjA2MDQ4OCAyOC40ODYxOTItMTAwLjYxMzczMyAzMy4xODk5MTMtNTMuOTIwNzAxIDcuMTEyOTQ0LTEwOC4zNDYxOTEgMTEuMTE2ODQyLTEzOS4xNzI3NzEgMTQuMTU3MDUyLTk1LjIyMTY2My0yLjM4NjI3OC0xNjYuODY3MzYxLTQuNjQ2MzU4LTIzNS4zMDA3NjEtMjYuMTU3Mjc2LTc1LjU5MjIzNC0yMy43ODI0NzEtNzMuMTgzMDExLTQzLjM3NzQ4My02MS4xNDgzNjktOTYuNjkwMTQyIDE3LjI4OTA0Mi03Ni42MTMyODUgNjUuMDM3NTQzLTEzNC40MTE2ODggMTQyLjEzMjY3My0xNzAuNjk5MTcyYTI3LjAxNzcxMyAyNy4wMTc3MTMgMCAwIDEgNS4xODU1NjUtMS43NjY3NjQgMTk2LjAzMDQyOSAxOTYuMDMwNDI5IDAgMCAwIDgzLjAzNzg4IDQwLjM5NDYzNmM2My4yNDc4MzUgMTMuNjE3ODQ1IDEyOS4wNzY5OC01LjUwNjc5NSAxNzYuMzY2NTgxLTQ1LjQ4ODQyMWExMi4wNTc1ODcgMTIuMDU3NTg3IDAgMCAxIDEuODEyNjU0IDAuNjc2ODc3cTEzOS4zNTYzMzEgNjYuNDQ4NjU5IDE1MS4xODQ0NjcgMjA5LjMzODUxN2MxLjYxNzYyMSAxOS4xMjQ2NC03LjI5NjUwMyAzMi42NTA3MDUtMjMuNDg0MTg2IDQzLjA0NDc4eiIgZmlsbD0iI0U5OUQ0MiIgcC1pZD0iNTI3MiI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
		width: 24px;
		height: 24px;
	}

	.ic-order {
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzNjUwNDc1MzQ1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjgzMDUiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTMxOS41MjEwMzIgOTYuNDIxMTYxIDQwMC42ODEyOSA5Ni40MjExNjFDNDA4LjY0MjA2NSA0NC40MjgzODcgNDUzLjMzNDcxIDQuNDkyMzg3IDUwNy41NzM2NzcgNC40OTIzODcgNTYxLjgxMjY0NSA0LjQ5MjM4NyA2MDYuNDM5MjI2IDQ0LjQyODM4NyA2MTQuNDY2MDY1IDk2LjQyMTE2MUw2OTguNDAxMDMyIDk2LjQyMTE2MSA2OTguNDAxMDMyIDIyOC4yNTI5MDMgMzE5LjQ4OCAyMjguMjUyOTAzIDMxOS40ODggOTYuNDIxMTYxIDMxOS41MjEwMzIgOTYuNDIxMTYxWk05MjQuMTc2NTE2IDg5MC4yNTIzODdDOTI0LjE3NjUxNiA5NTcuOTY4NTE2IDg2OS4zMDk5MzUgMTAxMi44NjgxMjkgODAxLjYyNjgzOSAxMDEyLjg2ODEyOUwyMjAuMTkzMDMyIDEwMTIuODY4MTI5QzE1Mi40NDM4NzEgMTAxMi44NjgxMjkgOTcuNjQzMzU1IDk1Ny45Njg1MTYgOTcuNjQzMzU1IDg5MC4yNTIzODdMOTcuNjQzMzU1IDIyMS41ODAzODdDOTcuNjQzMzU1IDE1My44OTcyOSAxNTIuNDQzODcxIDk5LjAzMDcxIDIyMC4xOTMwMzIgOTkuMDMwNzFMMjQ0LjMzOTYxMyA5OS4wMzA3MSAyNDQuMzM5NjEzIDMwOS41MTIyNTggNzc3LjQ0NzIyNiAzMDkuNTEyMjU4IDc3Ny40NDcyMjYgOTkuMDMwNzEgODAxLjU5MzgwNiA5OS4wMzA3MUM4NjkuMjc2OTAzIDk5LjAzMDcxIDkyNC4xNDM0ODQgMTUzLjg5NzI5IDkyNC4xNDM0ODQgMjIxLjU4MDM4N0w5MjQuMTQzNDg0IDg5MC4yNTIzODcgOTI0LjE3NjUxNiA4OTAuMjUyMzg3WiIgZmlsbD0iI0ZDQ0EwMCIgcC1pZD0iODMwNiI+PC9wYXRoPjwvc3ZnPg==');
	}

	.ic-invoice {
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzNjUwNjQ1Mzg5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijk0OTIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTkyNi40MjEzMzMgMTU3LjEydjM0MS4zMzMzMzNINzk3LjAxMzMzM2wwLjAyMTMzNCA0MDQuMDEwNjY3LTE1Ni4yNjY2NjctNzcuMzc2LTEzMi4xMzg2NjcgNjYuNzczMzMzLTEzMi4xMzg2NjYtNjYuNzczMzMzLTE1NS40NTYgNzYuOC0wLjAyMTMzNC00MDMuNDM0NjY3SDk0LjQyMTMzM3YtMzQxLjMzMzMzM2g4MzJ6IG0tMTkzLjQwOCAyMDIuNjQ1MzMzaC00NDh2NDM5LjEyNTMzNGw5MS43OTczMzQtNDUuMzMzMzM0IDEzMS44MTg2NjYgNjYuNTYgMTMxLjg4MjY2Ny02Ni41NiA5Mi41MDEzMzMgNDUuNzgxMzM0VjM1OS43NjUzMzN6IG0tOTYuMDY0IDI0NC4yMDI2Njd2NjRoLTI1NnYtNjRoMjU2eiBtMC0xNDcuMDUwNjY3djY0aC0yNTZ2LTY0aDI1NnogbTIyNS40NzItMjM1LjgxODY2NmgtNzA0djIxMy4zMzMzMzNoNjIuNTkybDAuMDIxMzM0LTEzOC42NjY2NjdoNTc2bC0wLjAyMTMzNCAxMzguNjY2NjY3aDY1LjQwOHYtMjEzLjMzMzMzM3oiIGZpbGw9IiMxNjc3RkYiIHAtaWQ9Ijk0OTMiPjwvcGF0aD48L3N2Zz4=');
	}

	.ic-contact {
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQzNjUxMDYwODE4IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM0MzM1IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik05MjQuNDYzNTE4IDE3OS43MTMwMzUgOTguNDU5OTY0IDE3OS43MTMwMzVjLTE5LjI5MjM5MiAwLTM0LjkzMjYwNCAxNS42NDAyMTItMzQuOTMyNjA0IDM0LjkzMjYwNGwwIDU5My4yOTc1ODRjMCAxOS4yOTEzNjggMTUuNjQwMjEyIDM0LjkzMDU1NyAzNC45MzI2MDQgMzQuOTMwNTU3bDgyNi4wMDM1NTQgMGMxOS4yOTEzNjggMCAzNC45MzE1OC0xNS42MzkxODkgMzQuOTMxNTgtMzQuOTMwNTU3TDk1OS4zOTUwOTggMjE0LjY0NTYzOEM5NTkuMzk1MDk4IDE5NS4zNTMyNDYgOTQzLjc1NDg4NiAxNzkuNzEzMDM1IDkyNC40NjM1MTggMTc5LjcxMzAzNXpNNTQyLjgwNDA3NSAzNjcuNTUyMTQ0bDMzMS45MzQ5NDggMCAwIDY0LjUyMzU0OUw1NDIuODA0MDc1IDQzMi4wNzU2OTMgNTQyLjgwNDA3NSAzNjcuNTUyMTQ0ek01NDIuODA0MDc1IDQ5My4wMjY4OGwzMzEuOTM0OTQ4IDAgMCA2NC41MjM1NDlMNTQyLjgwNDA3NSA1NTcuNTUwNDI5IDU0Mi44MDQwNzUgNDkzLjAyNjg4ek0zMzQuOTY5NTYzIDI3MS43MjM2MTFjOTEuODk4MDEzIDAgOTIuMDQyMjk5IDcwLjMwNDIwNiA5Mi4wNDIyOTkgMTA5Ljg3MjM4NyAwIDM5LjUzNDQxMi0zNi43OTkxMTQgMTEyLjk4NzMzMS05Mi4wNDIyOTkgMTEzLjA3NTMzNS01NS4xODQ4NTcgMC4wODgwMDQtOTIuMDQyMjk5LTczLjU0MDkyMy05Mi4wNDIyOTktMTEzLjA3NTMzNUMyNDIuOTI4Mjg3IDM0Mi4wNTY0NyAyNDMuMTAxMjI1IDI3MS43MjM2MTEgMzM0Ljk2OTU2MyAyNzEuNzIzNjExek0xNzkuNDM5MyA1NTIuNDQ4MjI0YzIzLjY4NjQ2OS0xOC4zMjYzOTEgOTEuODA4OTg2LTQ4Ljk0MzcxMiA5MS44MDg5ODYtNDguOTQzNzEybDQzLjAwNjQ5IDgxLjgxMTI4NCA3Ljg2NjE1NS0xOS44NDYtMTIuMTUwNzM4LTI0LjQ0MzcxNSAyNC4yNDIxMjQtMjQuNDc0NDE0IDI0LjI0MDA3NyAyNC40NzQ0MTQtMTIuMTE5MDE1IDI0LjQ0MzcxNSA2LjU1NjMyMyAxOS4zNzgzNDkgNDQuMjU3OTkzLTgxLjM0MzYzM2MwIDAgMjEuNzAyMjc4IDkuNzg0ODU0IDQ0LjgwOTU1NSAyMS41NTkwMTVsMC4wMzA2OTkgMCAwIDEwMS42ODM4OUwxNDUuMzc4NTUzIDYyNi43NDc0MTdDMTQ1LjM3ODU1MyA2MjYuNzQ4NDQxIDE1NS44MTQyMyA1NzAuODk5NDU4IDE3OS40MzkzIDU1Mi40NDgyMjR6TTg3Ny41NDM5MDUgNzYwLjEyMDAzMWwtNzMyLjE2NTM1MiAwTDE0NS4zNzg1NTMgNjk1LjU5NTQ1OGw3MzIuMTY1MzUyIDBMODc3LjU0MzkwNSA3NjAuMTIwMDMxeiIgZmlsbD0iI0ZDQ0EwMCIgcC1pZD0iMzQzMzYiPjwvcGF0aD48L3N2Zz4=');
	}

	.icon-refresh {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ0MTY2MTkyNTg5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU2MDkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTkzNi41OTQyODYgNjAzLjQyODU3MXEwIDIuODUyNTcxLTAuNTg1MTQzIDQuMDIyODU3LTM2LjU3MTQyOSAxNTMuMTYxMTQzLTE1My4xNjExNDMgMjQ4LjMydC0yNzMuMTE1NDI5IDk1LjE1ODg1N3EtODMuNDU2IDAtMTYxLjQyNjI4Ni0zMS40NTE0Mjl0LTEzOS4xMTc3MTQtODkuNzQ2Mjg2bC03My43MjggNzMuNzI4cS0xMC44MjUxNDMgMTAuODI1MTQzLTI1Ljc0NjI4NiAxMC44MjUxNDN0LTI1Ljc0NjI4Ni0xMC44MjUxNDMtMTAuODI1MTQzLTI1Ljc0NjI4NmwwLTI1NnEwLTE0Ljg0OCAxMC44MjUxNDMtMjUuNzQ2Mjg2dDI1Ljc0NjI4Ni0xMC44MjUxNDNsMjU2IDBxMTQuODQ4IDAgMjUuNzQ2Mjg2IDEwLjgyNTE0M3QxMC44MjUxNDMgMjUuNzQ2Mjg2LTEwLjgyNTE0MyAyNS43NDYyODZsLTc4LjI2Mjg1NyA3OC4yNjI4NTdxNDAuNTk0Mjg2IDM3Ljc0MTcxNCA5Mi4wMTM3MTQgNTguMjk0ODU3dDEwNi44NjE3MTQgMjAuNTUzMTQzcTc2LjU4MDU3MSAwIDE0Mi44NDgtMzcuMTU2NTcxdDEwNi4yNzY1NzEtMTAyLjI1MzcxNHE2LjI5MDI4Ni05LjcyOCAzMC4yODExNDMtNjYuODUyNTcxIDQuNTM0ODU3LTEzLjE2NTcxNCAxNy4xMTU0MjktMTMuMTY1NzE0bDEwOS43MTQyODYgMHE3LjQ2MDU3MSAwIDEyLjg3MzE0MyA1LjQxMjU3MXQ1LjQxMjU3MSAxMi44NzMxNDN6TTk1MC44NTcxNDMgMTQ2LjI4NTcxNGwwIDI1NnEwIDE0Ljg0OC0xMC44MjUxNDMgMjUuNzQ2Mjg2dC0yNS43NDYyODYgMTAuODI1MTQzbC0yNTYgMHEtMTQuODQ4IDAtMjUuNzQ2Mjg2LTEwLjgyNTE0M3QtMTAuODI1MTQzLTI1Ljc0NjI4NiAxMC44MjUxNDMtMjUuNzQ2Mjg2bDc4Ljg0OC03OC44NDhxLTg0LjU1MzE0My03OC4yNjI4NTctMTk5LjQ2MDU3MS03OC4yNjI4NTctNzYuNTgwNTcxIDAtMTQyLjg0OCAzNy4xNTY1NzF0LTEwNi4yNzY1NzEgMTAyLjI1MzcxNHEtNi4yOTAyODYgOS43MjgtMzAuMjgxMTQzIDY2Ljg1MjU3MS00LjUzNDg1NyAxMy4xNjU3MTQtMTcuMTE1NDI5IDEzLjE2NTcxNGwtMTEzLjczNzE0MyAwcS03LjQ2MDU3MSAwLTEyLjg3MzE0My01LjQxMjU3MXQtNS40MTI1NzEtMTIuODczMTQzbDAtNC4wMjI4NTdxMzcuMTU2NTcxLTE1My4xNjExNDMgMTU0LjI1ODI4Ni0yNDguMzJ0Mjc0LjI4NTcxNC05NS4xNTg4NTdxODMuNDU2IDAgMTYyLjMwNCAzMS43NDR0MTM5Ljk5NTQyOSA4OS40NTM3MTRsNzQuMzEzMTQzLTczLjcyOHExMC44MjUxNDMtMTAuODI1MTQzIDI1Ljc0NjI4Ni0xMC44MjUxNDN0MjUuNzQ2Mjg2IDEwLjgyNTE0MyAxMC44MjUxNDMgMjUuNzQ2Mjg2eiIgZmlsbD0iIzUzMkEwMCIgcC1pZD0iNTYxMCI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 5px;
		width: 18px;
		height: 18px;
	}

	.ic-pay-record {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1MzkyMTQyNzY1IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ3ODEiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTYyNC4zNjA3MjcgODUxLjc4MTgxOGMwIDk1LjE4NTQ1NS0xMzkuNjM2MzY0IDE3Mi4yMTgxODItMzEyLjE4MDM2MyAxNzIuMjE4MTgyUzAgOTQ2LjgyNzYzNiAwIDg1MS43ODE4MTh2LTY3LjkwOTgxOGMwLjc0NDcyNyA5NC44MTMwOTEgMTQwLjE0ODM2NCAxNzEuNDczNDU1IDMxMS44NTQ1NDUgMTcxLjQ3MzQ1NXMzMTIuMTgwMzY0LTc3LjA3OTI3MyAzMTIuMTgwMzY0LTE3Mi4yMTgxODJWODUxLjc4MTgxOHogbTAtMTE5LjkwMTA5MWMwIDk1LjIzMi0xMzkuNjM2MzY0IDE3Mi4yMTgxODItMzEyLjE4MDM2MyAxNzIuMjE4MTgyUzAgODI2LjkyNjU0NSAwIDczMS43NDEwOTF2LTY3LjkwOTgxOGMwLjc0NDcyNyA5NC44MTMwOTEgMTQwLjE0ODM2NCAxNzEuNTIgMzExLjg1NDU0NSAxNzEuNTJzMzEyLjE4MDM2NC03Ny4wNzkyNzMgMzEyLjE4MDM2NC0xNzIuMjE4MTgydjY4LjY1NDU0NXogbS0zMTIuMTgwMzYzIDUyLjQ1NjcyOGMtMTcyLjIxODE4MiAwLTMxMi4xODAzNjQtNzcuMTI1ODE4LTMxMi4xODAzNjQtMTcyLjIxODE4MnMxMzkuNjM2MzY0LTE3Mi4yMTgxODIgMzEyLjE4MDM2NC0xNzIuMjE4MTgyIDMxMi4xODAzNjQgNzcuMTI1ODE4IDMxMi4xODAzNjMgMTcyLjIxODE4Mi0xMzkuNjgyOTA5IDE3Mi4wNzg1NDUtMzEyLjE4MDM2MyAxNzIuMDc4NTQ1ek0xMDI0IDY1MS42MzYzNjRjMCA5NS4xODU0NTUtMTM5LjYzNjM2NCAxNzIuMjE4MTgyLTMxMi4xODAzNjQgMTcyLjIxODE4MS05LjMwOTA5MSAwLTE4LjYxODE4Mi0wLjMyNTgxOC0yNy40NjE4MTgtMC43OTEyNzJ2LTQwLjQwMTQ1NWE2MC41MDkwOTEgNjAuNTA5MDkxIDAgMCAwLTMuMTE4NTQ1LTE5LjMxNjM2M2MwLjU1ODU0NS0yLjkzMjM2NCAwLjQ2NTQ1NS02LjAwNDM2NCAwLjgzNzgxOC04Ljk4MzI3M3ExNC43NTQ5MDkgMC43NDQ3MjcgMjkuNzQyNTQ1IDAuNzkxMjczYzE3Mi40OTc0NTUgMCAzMTIuMTgwMzY0LTc3LjA3OTI3MyAzMTIuMTgwMzY0LTE3Mi4yMTgxODJWNjUxLjYzNjM2NHogbTAtMTE5Ljg1NDU0NmMwIDk1LjE4NTQ1NS0xMzkuNjM2MzY0IDE3Mi4yMTgxODItMzEyLjE4MDM2NCAxNzIuMjE4MTgyLTkuMzA5MDkxIDAtMTguNjE4MTgyLTAuMjc5MjczLTI3LjQ2MTgxOC0wLjc5MTI3M3YtNDAuNDAxNDU0YTYwLjUwOTA5MSA2MC41MDkwOTEgMCAwIDAtMy4xMTg1NDUtMTkuMjY5ODE4YzAuNTU4NTQ1LTIuOTc4OTA5IDAuNDY1NDU1LTYuMDUwOTA5IDAuODM3ODE4LTkuMDI5ODE5cTE0Ljc1NDkwOSAwLjc5MTI3MyAyOS43NDI1NDUgMC43OTEyNzNDODg0LjM2MzYzNiA2MzUuNTMxNjM2IDEwMjQgNTU4LjU0NTQ1NSAxMDI0IDQ2My4yNjY5MDl2NjguNzAxMDkxeiBtMC0xMTkuOTQ3NjM2YzAgOTUuMjc4NTQ1LTEzOS42MzYzNjQgMTcyLjIxODE4Mi0zMTIuMTgwMzY0IDE3Mi4yMTgxODJxLTE1LjA4MDcyNyAwLTMwLjIwOC0wLjg4NDM2NEExNzIuNzMwMTgyIDE3Mi43MzAxODIgMCAwIDAgNjUwLjUxOTI3MyA1MTJhNTUwLjAyNzYzNiA1NTAuMDI3NjM2IDAgMCAwIDYxLjI1MzgxOCAzLjM5NzgxOGMxNzIuNDk3NDU1IDAgMzEyLjE4MDM2NC03Ny4xMjU4MTggMzEyLjE4MDM2NC0xNzIuMjE4MTgydjY4LjY1NDU0NnogbTAtMTE5Ljg1NDU0NmMwIDk1LjIzMi0xMzkuNjM2MzY0IDE3Mi4yMTgxODItMzEyLjE4MDM2NCAxNzIuMjE4MTgyYTUzMy4yNzEyNzMgNTMzLjI3MTI3MyAwIDAgMS0xMzAuMzI3MjcyLTE1LjgyNTQ1NCA0MDcuNTUyIDQwNy41NTIgMCAwIDAtMTEzLjUyNDM2NC00OS4wMTIzNjQgMTM1LjgxOTYzNiAxMzUuODE5NjM2IDAgMCAxLTY4LjMyODcyNy0xMDcuNDczNDU1VjIyMy45NzY3MjdjMC43OTEyNzMgOTQuODEzMDkxIDE0MC4xOTQ5MDkgMTcxLjU2NjU0NSAzMTIuMTMzODE4IDE3MS41NjY1NDZTMTAyNCAzMTguNzQzMjczIDEwMjQgMjIzLjQxODE4MnY2OC43MDEwOTF6TTcxMS43NzMwOTEgMzQ0LjQzNjM2NGMtMTcyLjIxODE4MiAwLTMxMi4xODAzNjQtNzcuMDc5MjczLTMxMi4xODAzNjQtMTcyLjIxODE4MnMxMzkuNjM2MzY0LTE3Mi4yMTgxODIgMzEyLjE4MDM2NC0xNzIuMjE4MTgyUzEwMjQgNzcuMDc5MjczIDEwMjQgMTcyLjIxODE4MnMtMTM5LjYzNjM2NCAxNzIuMjE4MTgyLTMxMi4yMjY5MDkgMTcyLjIxODE4MnoiIGZpbGw9IiNGRkJBMzQiIHAtaWQ9IjQ3ODIiPjwvcGF0aD48L3N2Zz4=');
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
	}

	.ic-invoice-info {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1NzM3NDQ3MTAwIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjQ0MTMiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTUxMiA1MTJtLTQ3NS40Mjg1NzEgMGE0NzUuNDI4NTcxIDQ3NS40Mjg1NzEgMCAxIDAgOTUwLjg1NzE0MiAwIDQ3NS40Mjg1NzEgNDc1LjQyODU3MSAwIDEgMC05NTAuODU3MTQyIDBaIiBmaWxsPSIjN0U0RkZGIiBwLWlkPSI0NDE0Ij48L3BhdGg+PHBhdGggZD0iTTY1Ni4wOTE0MjkgNDIyLjc2NTcxNGExNi43NDk3MTQgMTYuNzQ5NzE0IDAgMCAxIDE3LjE4ODU3MSAxNS43OTg4NTd2MzA0LjM0NzQyOWE2LjU4Mjg1NyA2LjU4Mjg1NyAwIDAgMS0zLjUxMDg1NyA1LjQ4NTcxNCA3LjE2OCA3LjE2OCAwIDAgMS02LjcyOTE0MyAwYy0zLjgwMzQyOS0yLjQxMzcxNC02NC4yMTk0MjktMzcuODE0ODU3LTY0LjIxOTQyOS0zNy44MTQ4NTdhMTQuNDA5MTQzIDE0LjQwOTE0MyAwIDAgMC0xNC4xMTY1NzEgMGwtNjUuMTcwMjg2IDM3LjUyMjI4NmExNy41NTQyODYgMTcuNTU0Mjg2IDAgMCAxLTcuNjggMS4yNDM0MjggMjAuMjYwNTcxIDIwLjI2MDU3MSAwIDAgMS04LjA0NTcxNC0xLjI0MzQyOGwtNjEuOTUyLTM2Ljg2NGExNC40MDkxNDMgMTQuNDA5MTQzIDAgMCAwLTE0LjExNjU3MSAwbC0yMy40MDU3MTUgMTMuNDU4Mjg2LTE1Ljc5ODg1NyA5LjA2OTcxNC0yNi42MjQgMTUuMjg2ODU3YTguMjY1MTQzIDguMjY1MTQzIDAgMCAxLTcuMzE0Mjg2LTAuMzY1NzE0IDcuNjA2ODU3IDcuNjA2ODU3IDAgMCAxLTMuODc2NTcxLTUuNzc4Mjg2VjQzOS4wNzY1NzFhMTYuMDkxNDI5IDE2LjA5MTQyOSAwIDAgMSA1LjEyLTExLjYyOTcxNCAxNy42Mjc0MjkgMTcuNjI3NDI5IDAgMCAxIDEyLjE0MTcxNC00Ljc1NDI4NnogbS00Ny4wMzA4NTggMTQ4LjE4NzQyOUg0MTQuOTM5NDI5YTE1Ljk0NTE0MyAxNS45NDUxNDMgMCAwIDAtMTYuMDkxNDI5IDE1LjUwNjI4NmMwIDguNTU3NzE0IDcuMjQxMTQzIDE1LjQzMzE0MyAxNi4wOTE0MjkgMTUuNTc5NDI4aDE5NC4xMjExNDJjNS44NTE0MjkgMC4wNzMxNDMgMTEuMzM3MTQzLTIuODUyNTcxIDE0LjMzNi03LjY4YTE0LjkyMTE0MyAxNC45MjExNDMgMCAwIDAgMC0xNS43MjU3MTQgMTYuNDU3MTQzIDE2LjQ1NzE0MyAwIDAgMC0xNC4zMzYtNy42OHogbTAtNzAuNDM2NTcySDQxNC45Mzk0MjlhMTYuNDU3MTQzIDE2LjQ1NzE0MyAwIDAgMC0xNC4zMzYgNy42OCAxNC45MjExNDMgMTQuOTIxMTQzIDAgMCAwIDAgMTUuNzI1NzE1YzIuOTk4ODU3IDQuODI3NDI5IDguNDg0NTcxIDcuNzUzMTQzIDE0LjMzNiA3LjY4aDE5NC4xMjExNDJjNS44NTE0MjkgMC4wNzMxNDMgMTEuMzM3MTQzLTIuOTI1NzE0IDE0LjMzNi03LjY4YTE0LjkyMTE0MyAxNC45MjExNDMgMCAwIDAgMC0xNS43MjU3MTUgMTYuNDU3MTQzIDE2LjQ1NzE0MyAwIDAgMC0xNC4zMzYtNy42OHpNNzI0LjExNDI4NiAzNDIuMjM1NDI5YzE0LjExNjU3MSAwIDI1LjYgMTAuOTcxNDI5IDI1LjYgMjQuMzU2NTcxdjExMS45MDg1NzFhMjUuNTI2ODU3IDI1LjUyNjg1NyAwIDAgMS0yNS42IDI0LjQyOTcxNWgtMzMuNTcyNTcyVjQ0Mi41MTQyODZoMS45NzQ4NTdhMjAuMzMzNzE0IDIwLjMzMzcxNCAwIDAgMCAyMC40OC0xOS43NDg1NzIgMjAuMzMzNzE0IDIwLjMzMzcxNCAwIDAgMC0yMC40OC0xOS44OTQ4NTdIMzMxLjQ4MzQyOWEyMC45OTIgMjAuOTkyIDAgMCAwLTE4LjIxMjU3MiA5Ljg3NDI4NiAxOS4wMTcxNDMgMTkuMDE3MTQzIDAgMCAwIDAgMTkuOTY4IDIwLjk5MiAyMC45OTIgMCAwIDAgMTguMjg1NzE0IDkuODAxMTQzaDEuOTAxNzE1djYwLjQxNmgtMzMuNjQ1NzE1YTI1LjA4OCAyNS4wODggMCAwIDEtMjUuNTI2ODU3LTI0LjQyOTcxNXYtMTExLjkwODU3MWMwLTEzLjQ1ODI4NiAxMS40ODM0MjktMjQuMzU2NTcxIDI1LjYtMjQuMzU2NTcxeiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNDQxNSI+PC9wYXRoPjwvc3ZnPg==');
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
	}

	.ic-unbind {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ1NDAwMzc2MjkxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjYwMTgiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTUxMiA5ODRDMjUxLjc1IDk4NCAzOS45OSA3NzIuMjYgMzkuOTkgNTEyUzI1MS43NSA0MCA1MTIgNDBzNDcyLjAxIDIxMS43NCA0NzIuMDEgNDcyUzc3Mi4yNSA5ODQgNTEyIDk4NHoiIGZpbGw9IiNGRkY4RUYiIHAtaWQ9IjYwMTkiPjwvcGF0aD48cGF0aCBkPSJNNTEyIDgwQzI3My44MiA4MCA3OS45NyAyNzMuNzkgNzkuOTcgNTEyczE5My44NCA0MzIgNDMyLjAyIDQzMiA0MzIuMDMtMTkzLjc5IDQzMi4wMy00MzJDOTQ0LjAzIDI3My43OSA3NTAuMTggODAgNTEyIDgweiBtMC04MGMyODIuNzggMCA1MTIgMjI5LjIzIDUxMiA1MTJzLTIyOS4yMiA1MTItNTEyIDUxMlMwIDc5NC43NyAwIDUxMiAyMjkuMjIgMCA1MTIgMHoiIGZpbGw9IiNGRkE3MzgiIHAtaWQ9IjYwMjAiPjwvcGF0aD48cGF0aCBkPSJNMjc4LjYzIDI3OC42NmMyNy4zNC0yNy4yOSA3MS43My0yNy4yOSA5OS4wMiAwbDM2Ny43MiAzNjcuNjljMjcuMjkgMjcuMjkgMjcuMjkgNzEuNyAwIDk5LTI3LjM0IDI3LjI5LTcxLjczIDI3LjI5LTk5LjAyIDBsLTM2Ny43Mi0zNjcuN2MtMjcuMjktMjcuMjktMjcuMjktNzEuNyAwLTk4Ljk5eiIgZmlsbD0iI0ZGRkZGRiIgcC1pZD0iNjAyMSI+PC9wYXRoPjxwYXRoIGQ9Ik03MTcuMDYgNzE3LjA2YzExLjcyLTExLjY5IDExLjcyLTMwLjczIDAtNDIuNDJsLTM2Ny42Ny0zNjcuN2MtMTEuNzMtMTEuNy0zMC43Ny0xMS43LTQyLjQ1IDAtMTEuNjcgMTEuNy0xMS43MyAzMC43MyAwIDQyLjQzbDM2Ny42NyAzNjcuNjljMTEuNzMgMTEuNyAzMC43NyAxMS43IDQyLjQ1IDB6IG01Ni41NyA1Ni41N2MtNDIuOTYgNDIuOTYtMTEyLjU5IDQyLjk2LTE1NS41NSAwbC0zNjcuNzItMzY3LjdjLTQyLjk2LTQyLjk2LTQyLjk2LTExMi42MSAwLTE1NS41NiA0Mi45Ni00Mi45NiAxMTIuNTktNDIuOTYgMTU1LjU1IDBsMzY3LjcyIDM2Ny42OWM0Mi45NiA0Mi45NyA0Mi45NiAxMTIuNjIgMCAxNTUuNTd6IiBmaWxsPSIjRkZBNzM4IiBwLWlkPSI2MDIyIj48L3BhdGg+PHBhdGggZD0iTTczMC41MiAzOTguNzZsLTMzOS40IDMzOS40MWMtNy41MyA3LjUtMTcuNjYgMTEuNzEtMjguMzEgMTEuNzEtMTAuNiAwLTIwLjc5LTQuMjEtMjguMjYtMTEuNzFsLTQyLjQ1LTQyLjQyYy0zLjY5LTMuNzEtNi42Ni04LjEzLTguNjUtMTIuOTgtMi00Ljg1LTMuMDctMTAuMDUtMy4wNy0xNS4zczEuMDgtMTAuNDYgMy4wNy0xNS4zMWMyLTQuODUgNC45Ny05LjI2IDguNjUtMTIuOThsMzM5LjQtMzM5LjQxYzMuNzQtMy43MSA4LjE0LTYuNjYgMTMtOC42N2EzOS45NzQgMzkuOTc0IDAgMCAxIDE1LjMxLTMuMDRjNS4yMiAwIDEwLjQ0IDEuMDMgMTUuMzEgMy4wNCA0Ljg2IDIuMDEgOS4yNyA0Ljk2IDEyLjk1IDguNjdsNDIuNDUgNDIuNDNjNy40OCA3LjUgMTEuNzMgMTcuNjggMTEuNzMgMjguMjggMCAxMC42MS00LjI1IDIwLjc4LTExLjczIDI4LjI4eiIgZmlsbD0iI0ZGRjhFRiIgcC1pZD0iNjAyMyI+PC9wYXRoPjxwYXRoIGQ9Ik03MTMuMTYgMzcxLjQxbC0zMzkuNCAzMzkuNDFjLTcuNTMgNy41MS0xNy42NiAxMS43Mi0yOC4zMSAxMS43Mi0xMC42IDAtMjAuNzktNC4yMi0yOC4yNi0xMS43MmEzOS44OCAzOS44OCAwIDAgMS0xMS43My0yOC4yOGMwLTEwLjYxIDQuMi0yMC43OCAxMS43My0yOC4yOGwzMzkuNC0zMzkuNDFjNy41My03LjQ1IDE3LjY2LTExLjYyIDI4LjI2LTExLjU5IDEwLjU1IDAuMDIgMjAuNjggNC4yNCAyOC4yMSAxMS43MmEzOS45MDUgMzkuOTA1IDAgMCAxIDExLjY3IDI4LjJjMC4wNiAxMC41Ni00LjE0IDIwLjcyLTExLjU3IDI4LjIzeiIgZmlsbD0iI0ZGQTczOCIgcC1pZD0iNjAyNCI+PC9wYXRoPjwvc3ZnPg==');
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
	}

	.ic-msg {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ2NTE1Mjg3MDE2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI2MzIiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTkzNC42Mjc1NTYgODI3LjczMzMzM2EyNzMuMDA5Nzc4IDI3My4wMDk3NzggMCAwIDAtMTA2LjMyNTMzNC0yMDQuNTcyNDQ0VjM5Ny40MjU3NzhjMC0xMzAuMzg5MzMzLTkyLjEwMzExMS0yNDAuMDcxMTExLTIxMy45MDIyMjItMjY2LjA2OTMzNHYtNS4xMkExMDcuOTc1MTExIDEwNy45NzUxMTEgMCAwIDAgNTA3LjE2NDQ0NCAxNy45NzY4ODljLTU4LjgyMzExMSAwLTEwNy4wMDggNDguNjk2ODg5LTEwNy4wMDggMTA4LjE0NTc3OHY1LjE3Njg4OWMtMTIxLjc0MjIyMiAyNS45OTgyMjItMjEzLjkwMjIyMiAxMzUuNjgtMjEzLjkwMjIyMiAyNjYuMDY5MzMzdjIyNS44NDg4ODlhMjczLjAwOTc3OCAyNzMuMDA5Nzc4IDAgMCAwLTEwNi4zODIyMjIgMjA0LjYyOTMzM2gxMDYuMzgyMjIydjAuNjgyNjY3SDgyOC4zMDIyMjJ2LTAuNjgyNjY3aDEwNi4zMjUzMzR2LTAuMTEzNzc4eiBtLTQ0OS45OTExMTIgMTgyLjk1NDY2N2gyNi41NjcxMTJjNjkuNzQ1Nzc4IDAgMTI3LjY1ODY2Ny01My4yNDggMTM2LjAyMTMzMy0xMjEuNDAwODg5SDM2Ny41MDIyMjJjOC40MTk1NTYgNjguMTUyODg5IDY2LjM4OTMzMyAxMjEuNDAwODg5IDEzNi4wNzgyMjIgMTIxLjQwMDg4OUg0ODQuNjkzMzMzeiIgZmlsbD0iI0ZGQjgwMCIgcC1pZD0iMjYzMyI+PC9wYXRoPjwvc3ZnPg==');
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
	}

	.custom-tips {
		margin-top: 82px;
	}

	.ic-refund {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ2NTgyMTEwOTk2IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjM1NzYiIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiI+PHBhdGggZD0iTTU1MC4wMjc2MzYgMjI3Ljc0NjkwOWEyNzkuMjcyNzI3IDI3OS4yNzI3MjcgMCAxIDEgMCA1NTguNTQ1NDU1IDI3OS4yNzI3MjcgMjc5LjI3MjcyNyAwIDAgMSAwLTU1OC41NDU0NTV6IG0tNTQuNDU4MTgxIDE0Mi4xNDk4MThhMjIuMDYyNTQ1IDIyLjA2MjU0NSAwIDAgMC0zMS4xODU0NTUgMzEuMTg1NDU1bDQ3LjEwNCA0Ny4xMDRoLTQyLjM1NjM2NGEyMi4wNjI1NDUgMjIuMDYyNTQ1IDAgMSAwIDAgNDQuMTI1MDkxaDU4LjgzMzQ1NXYyOS4zNzAxODJINDY5LjE3ODE4MmEyMi4wNjI1NDUgMjIuMDYyNTQ1IDAgMSAwIDAgNDQuMTI1MDloNTguNzg2OTA5djczLjU0MTgxOWEyMi4wNjI1NDUgMjIuMDYyNTQ1IDAgMCAwIDQ0LjEyNTA5MSAwdi03My41NDE4MTloNTguNzg2OTA5YTIyLjA2MjU0NSAyMi4wNjI1NDUgMCAxIDAgMC00NC4wNzg1NDVINTcyLjA0MzYzNnYtMjkuNDE2NzI3aDU4LjgzMzQ1NWEyMi4wNjI1NDUgMjIuMDYyNTQ1IDAgMSAwIDAtNDQuMDc4NTQ2aC00Mi4zNTYzNjRsNDcuMTk3MDkxLTQ3LjE1MDU0NSAxLjU4MjU0Ni0xLjgxNTI3M2EyMi4wNjI1NDUgMjIuMDYyNTQ1IDAgMCAwLTMyLjc2OC0yOS4zNzAxODJMNTUyLjQ5NDU0NSA0MjEuODQxNDU1bC0xLjU4MjU0NSAxLjgxNTI3Mi0wLjkzMDkwOSAxLjI1NjcyOGEyMi4xNTU2MzYgMjIuMTU1NjM2IDAgMCAwLTIuNTEzNDU1LTMuMDcybC01MS45OTEyNzItNTEuOTQ0NzI4eiIgZmlsbD0iIzNCOERGRiIgcC1pZD0iMzU3NyI+PC9wYXRoPjxwYXRoIGQ9Ik05NzcuNDU0NTQ1IDUxMmMwLTIzMS4zMzA5MDktMTg4LjUwOTA5MS00MTguOTA5MDkxLTQyMS4wMDM2MzYtNDE4LjkwOTA5MS0yMzIuNTQxMDkxIDAtNDIxLjA1MDE4MiAxODcuNTc4MTgyLTQyMS4wNTAxODIgNDE4LjkwOTA5MWEzMC4wMjE4MTggMzAuMDIxODE4IDAgMCAwIDMwLjA2ODM2NCAyOS4xODRjMTYuMzM3NDU1IDAgMjkuNjk2LTEyLjkzOTYzNiAzMC4xMTQ5MDktMjkuMTg0IDAtMTk4LjI4MzYzNiAxNjEuNTEyNzI3LTM1OS4wNTE2MzYgMzYwLjg2NjkwOS0zNTkuMDUxNjM2IDE5OS4zMDc2MzYgMCAzNjAuODY2OTA5IDE2MC43MjE0NTUgMzYwLjg2NjkwOSAzNTkuMDUxNjM2IDAgMTk4LjI4MzYzNi0xNjEuNTU5MjczIDM1OS4wNTE2MzYtMzYwLjg2NjkwOSAzNTkuMDUxNjM2YTM2MC42MzQxODIgMzYwLjYzNDE4MiAwIDAgMS0xNjguMjYxODE4LTQxLjI4NTgxOCAzMC4xNjE0NTUgMzAuMTYxNDU1IDAgMCAwLTQwLjAyOTA5MSAxMi44IDI5LjgzNTYzNiAyOS44MzU2MzYgMCAwIDAgMTEuOTYyMTgyIDQwLjEyMjE4MkE0MjAuOTU3MDkxIDQyMC45NTcwOTEgMCAwIDAgNTU2LjQ1MDkwOSA5MzAuOTA5MDkxQzc4OC45NDU0NTUgOTMwLjkwOTA5MSA5NzcuNDU0NTQ1IDc0My4zMzA5MDkgOTc3LjQ1NDU0NSA1MTJ6TTE3OS43NTg1NDUgNTk3LjgyOTgxOGw1NC41NTEyNzMtNzIuNDI0NzI3YTE3LjY4NzI3MyAxNy42ODcyNzMgMCAwIDAtMTQuMjQyOTA5LTI4LjM5MjcyN0gxMTAuOTE3ODE4YTE3LjY4NzI3MyAxNy42ODcyNzMgMCAxIDAtMTQuMjQyOTA5IDI4LjM5MjcyN2w1NC41NTEyNzMgNzIuNDI0NzI3YTE3Ljg3MzQ1NSAxNy44NzM0NTUgMCAwIDAgMjguNTMyMzYzIDB6IiBmaWxsPSIjM0I4REZGIiBwLWlkPSIzNTc4Ij48L3BhdGg+PC9zdmc+');
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
	}

	.ic-repair {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ2NTgyMjU3MDY5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjEyNjg2IiB3aWR0aD0iMTYiIGhlaWdodD0iMTYiPjxwYXRoIGQ9Ik04NjEuMTg0IDk1Mi4zMmMzMy4yOCAwIDYwLjQxNi0yNy42NDggNjAuNDE2LTYxLjQ0VjEzMy4xMmMwLTMzLjc5Mi0yNy4xMzYtNjEuNDQtNjAuNDE2LTYxLjQ0SDE2Mi44MTZDMTI5LjUzNiA3MS42OCAxMDIuNCA5OS4zMjggMTAyLjQgMTMzLjEydjc1Ny43NmMwIDMzLjc5MiAyNy4xMzYgNjEuNDQgNjAuNDE2IDYxLjQ0aDY5OC4zNjh6IG0tMTYuODk2LTgwMy44NHY3MjcuMDRIMTc5LjJWMTQ4LjQ4aDY2NS4wODh6IiBwLWlkPSIxMjY4NyIgZmlsbD0iIzEyOTZkYiI+PC9wYXRoPjxwYXRoIGQ9Ik03MTEuNjggMjE1LjU1MkgzMTIuMzJjLTIwLjk5MiAwLTM4LjQgMTcuNDA4LTM4LjQgMzguNHMxNy40MDggMzguNCAzOC40IDM4LjRoMzk5LjM2YzIwLjk5MiAwIDM4LjQtMTcuNDA4IDM4LjQtMzguNHMtMTcuNDA4LTM4LjQtMzguNC0zOC40eiBtMCAxMjhIMzEyLjMyYy0yMC45OTIgMC0zOC40IDE3LjQwOC0zOC40IDM4LjRzMTcuNDA4IDM4LjQgMzguNCAzOC40aDM5OS4zNmMyMC45OTIgMCAzOC40LTE3LjQwOCAzOC40LTM4LjRzLTE3LjQwOC0zOC40LTM4LjQtMzguNHpNNTMxLjk2OCA2NDIuMDQ4Yy0xNC4zMzYgMTMuODI0LTI5LjE4NCAyOS42OTYtNDEuNDcyIDQxLjk4NCAxMy44MjQgMTMuODI0IDI3LjY0OCAyNy4xMzYgMzIuNzY4IDMyLjc2OGwtMjguNjcyIDM3LjM3NmMtMTEuMjY0LTE2LjM4NC0zMy4yOC00MS40NzItNTIuMjI0LTYyLjQ2NHYxNTUuMTM2aC00OS4xNTJWNzA2LjU2Yy0xNy40MDggMTUuODcyLTMzLjc5MiAzMC4yMDgtNTEuMiA0MS45ODQtNC42MDgtMTMuMzEyLTE3LjQwOC0zNy4zNzYtMjUuNi00Ni41OTIgNDYuMDgtMjcuMTM2IDkzLjY5Ni03NS4yNjQgMTIzLjM5Mi0xMjQuOTI4SDMyOS4yMTZ2LTQ0LjAzMmg3Mi43MDRjLTkuMjE2LTEzLjgyNC0yMy41NTItMzAuNzItMzYuMzUyLTQ0LjAzMmwzNS4zMjgtMjUuMDg4YzE2Ljg5NiAxNC44NDggMzUuODQgMzUuODQgNDQuNTQ0IDUwLjE3NmwtMjQuNTc2IDE4Ljk0NGg0Ni4wOGw4LjcwNC0yLjA0OCAyOC4xNiAxOS45NjhjLTEzLjgyNCAzMi43NjgtMzMuNzkyIDY0LjUxMi01NS44MDggOTQuMjA4IDQuNjA4IDMuNTg0IDkuNzI4IDguMTkyIDE1LjM2IDEzLjMxMiAxMS43NzYtMTUuMzYgMjUuMDg4LTMyLjc2OCAzMi4yNTYtNDYuNTkybDM2LjM1MiAzMC4yMDh6IG04MC4zODQtNTYuODMyYzI5LjY5NiAyNS4wODggNzMuNzI4IDYxLjQ0IDk1LjIzMiA4NC45OTJsLTM5LjkzNiAzNS44NGMtMTUuMzYtMTkuNDU2LTQ2LjA4LTQ3LjYxNi03Mi43MDQtNzEuNjh2MjEwLjk0NGgtNTMuMjQ4VjQ2NC44OTZoNTMuMjQ4VjU5OS4wNGwxNy40MDgtMTMuODI0eiIgcC1pZD0iMTI2ODgiIGZpbGw9IiMxMjk2ZGIiPjwvcGF0aD48L3N2Zz4=');
		background-repeat: no-repeat;
		background-size: cover;
		width: 24px;
		height: 24px;
	}

	.icon-refresh {
		background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzQ0MTY2MTkyNTg5IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjU2MDkiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiI+PHBhdGggZD0iTTkzNi41OTQyODYgNjAzLjQyODU3MXEwIDIuODUyNTcxLTAuNTg1MTQzIDQuMDIyODU3LTM2LjU3MTQyOSAxNTMuMTYxMTQzLTE1My4xNjExNDMgMjQ4LjMydC0yNzMuMTE1NDI5IDk1LjE1ODg1N3EtODMuNDU2IDAtMTYxLjQyNjI4Ni0zMS40NTE0Mjl0LTEzOS4xMTc3MTQtODkuNzQ2Mjg2bC03My43MjggNzMuNzI4cS0xMC44MjUxNDMgMTAuODI1MTQzLTI1Ljc0NjI4NiAxMC44MjUxNDN0LTI1Ljc0NjI4Ni0xMC44MjUxNDMtMTAuODI1MTQzLTI1Ljc0NjI4NmwwLTI1NnEwLTE0Ljg0OCAxMC44MjUxNDMtMjUuNzQ2Mjg2dDI1Ljc0NjI4Ni0xMC44MjUxNDNsMjU2IDBxMTQuODQ4IDAgMjUuNzQ2Mjg2IDEwLjgyNTE0M3QxMC44MjUxNDMgMjUuNzQ2Mjg2LTEwLjgyNTE0MyAyNS43NDYyODZsLTc4LjI2Mjg1NyA3OC4yNjI4NTdxNDAuNTk0Mjg2IDM3Ljc0MTcxNCA5Mi4wMTM3MTQgNTguMjk0ODU3dDEwNi44NjE3MTQgMjAuNTUzMTQzcTc2LjU4MDU3MSAwIDE0Mi44NDgtMzcuMTU2NTcxdDEwNi4yNzY1NzEtMTAyLjI1MzcxNHE2LjI5MDI4Ni05LjcyOCAzMC4yODExNDMtNjYuODUyNTcxIDQuNTM0ODU3LTEzLjE2NTcxNCAxNy4xMTU0MjktMTMuMTY1NzE0bDEwOS43MTQyODYgMHE3LjQ2MDU3MSAwIDEyLjg3MzE0MyA1LjQxMjU3MXQ1LjQxMjU3MSAxMi44NzMxNDN6TTk1MC44NTcxNDMgMTQ2LjI4NTcxNGwwIDI1NnEwIDE0Ljg0OC0xMC44MjUxNDMgMjUuNzQ2Mjg2dC0yNS43NDYyODYgMTAuODI1MTQzbC0yNTYgMHEtMTQuODQ4IDAtMjUuNzQ2Mjg2LTEwLjgyNTE0M3QtMTAuODI1MTQzLTI1Ljc0NjI4NiAxMC44MjUxNDMtMjUuNzQ2Mjg2bDc4Ljg0OC03OC44NDhxLTg0LjU1MzE0My03OC4yNjI4NTctMTk5LjQ2MDU3MS03OC4yNjI4NTctNzYuNTgwNTcxIDAtMTQyLjg0OCAzNy4xNTY1NzF0LTEwNi4yNzY1NzEgMTAyLjI1MzcxNHEtNi4yOTAyODYgOS43MjgtMzAuMjgxMTQzIDY2Ljg1MjU3MS00LjUzNDg1NyAxMy4xNjU3MTQtMTcuMTE1NDI5IDEzLjE2NTcxNGwtMTEzLjczNzE0MyAwcS03LjQ2MDU3MSAwLTEyLjg3MzE0My01LjQxMjU3MXQtNS40MTI1NzEtMTIuODczMTQzbDAtNC4wMjI4NTdxMzcuMTU2NTcxLTE1My4xNjExNDMgMTU0LjI1ODI4Ni0yNDguMzJ0Mjc0LjI4NTcxNC05NS4xNTg4NTdxODMuNDU2IDAgMTYyLjMwNCAzMS43NDR0MTM5Ljk5NTQyOSA4OS40NTM3MTRsNzQuMzEzMTQzLTczLjcyOHExMC44MjUxNDMtMTAuODI1MTQzIDI1Ljc0NjI4Ni0xMC44MjUxNDN0MjUuNzQ2Mjg2IDEwLjgyNTE0MyAxMC44MjUxNDMgMjUuNzQ2Mjg2eiIgZmlsbD0iIzUzMkEwMCIgcC1pZD0iNTYxMCI+PC9wYXRoPjwvc3ZnPg==');
		background-size: cover;
		background-repeat: no-repeat;
		margin-left: 5px;
		width: 18px;
		height: 18px;
	}

	.custom-tips {
		margin-top: 82px;
	}
</style>