<template>
	<view class="container" :style="{'padding-bottom': paddingBottomNumber + 'rpx'}">

		<uni-collapse ref="collapse" v-model="collapseValue">
			<!-- 订单信息 -->
			<uni-collapse-item style="margin-top: 0;" name="message" :open="true">
				<template v-slot:title>
					<view class="title-box">
						<text class="order-title">{{$t('index.order-info')}}</text>
						<text class="flag"></text>
					</view>
				</template>

				<uni-list class="custom-uni-list">
					<view class="list-item-bg">
						<uni-list-item style="width: 100%;" :border="false" :title="$t('index.buyer-name')"
							:rightText="orderInfo.buyerName"></uni-list-item>
					</view>
					<view class="list-item-bg">
						<uni-list-item style="width: 100%;" :border="false" :title="$t('index.buyer-code')"
							:rightText="orderInfo.buyerCode"></uni-list-item>
					</view>
					<view class="list-item-bg">
						<uni-list-item style="width: 100%;" :border="false" :title="$t('index.seller-name')"
							:rightText="orderInfo.sellerName"></uni-list-item>
					</view>
					<view class="list-item-bg">
						<uni-list-item style="width: 100%;" :border="false" :title="$t('index.seller-code')"
							:rightText="orderInfo.sellerCode"></uni-list-item>
					</view>
					<view class="list-item-bg">
						<uni-list-item style="width: 100%;" :border="false" :title="$t('index.document-type')"
							:rightText="orderInfo.creditFacilitiesTypeName"></uni-list-item>
					</view>
					<view class="list-item-bg">
						<uni-list-item style="width: 100%;" :border="false" :title="$t('index.delivery-type')"
							:rightText="orderInfo.receiveTypeName"></uni-list-item>
					</view>

				</uni-list>
			</uni-collapse-item>
			<!-- 配送商品信息 -->
			<!-- <uni-collapse-item name="deliveryReconciliation" :open="true" v-if="deliveryGoodsList.length && orderStatusActive < 6"> -->
			<uni-collapse-item name="deliveryReconciliation" :open="true" v-if="deliveryGoodsList.length">
				<!-- <template v-slot:title>
					<view class="title-box" id="receiptDeliveryRef">
						<text class="message">{{$t('index.delivery-product-info')}}</text>
					</view>
				</template> -->
				<template v-slot:title>
					<view class="title-box" style="height: 226rpx; " id="receiptDeliveryRef">
						<view>
							<view>
								<text class="message">{{$t('index.delivery-product-info')}}</text>
							</view>
							<view style="height: 30px;line-height: 30px;">
								<text class="message"
									style="color: #ADB0B5;">{{$t('index.delivery-product-num')}}：{{deliveryInfo.totalCount | transformPrice}}</text>
							</view>
							<view>
								<text class="message"
									style="color: #ADB0B5;">{{$t('index.product-sum')}}：{{ deliveryInfo.totalAmount | transformPrice}}{{$t('index.yuan')}}</text>
							</view>
						</view>
					</view>
				</template>
				<view class="content-box">
					<view class="product-box top-line" style="padding-bottom: 0;" v-for="(item, index) in deliveryGoodsList"
						:key="item.id">
						<view style="display: flex;padding: 30rpx 0; border-bottom: 1px solid #f2f2f2;">
							<image class="thumb" :src="item.imageUrl[0]" mode="aspectFill"></image>
							<view class="content">
								<view class="line">
									<text class="name">{{item.productName}}</text>
									<text class="describe" style="color: #666;">{{$t('index.card-num')}}：{{item.brandNumber}}</text>
									<text class="describe" style="color: #666;">{{$t('index.factory')}}：{{item.manufacturer}}</text>
									<text class="describe" style="color: #666;">{{$t('index.spec')}}：{{item.varieties}}</text>
									<view style="display: flex;">
										<text class="describe" style="color: #666;margin-right: 16px;" v-if="receivingInforSendmation[item.id]">{{$t('index.send-num')}}：{{ receivingInforSendmation[item.id] }}</text>
										<text class="describe" style="color: #666;" v-if="receivingInforReceivemation[item.id]">{{$t('index.receive-product-num')}}：{{ receivingInforReceivemation[item.id] }}</text>
									</view>
								</view>
								<view class="line peice">
									<text class="describe">×{{item.count | transformPrice}}</text>
									<block v-if="orderType === 'modify'">
										<!-- <input type="number" v-model="item.offerPrice" :cursor-spacing="10" style="border: 1rpx solid #93989E;" /> -->
										<step-price width="55" height="32" :value="item.offerPrice" @reduce="number=> onNumberChange(number, index)" @plus="number=> onNumberChange(number, index)" @input="number=> onNumberChange(number, index)"></step-price>
										<text class="describe" style="font-size: 14px;">{{$t('index.yuan')}}/{{item.unit}}</text>
									</block>
									<text v-else class="describe" style="font-size: 14px;">{{item.offerPrice | transformPrice}}{{$t('index.yuan')}}/{{item.unit}}</text>
								</view>
							</view>
						</view>
						<view style="display: flex;justify-content: flex-end;line-height: 88rpx;height: 88rpx;">
							{{$t('index.product-sum')}}：<text class="reconciliation-red"
								style="font-size: 14px;font-weight: 500;">{{item.productTotalPrice}}{{$t('index.yuan')}}</text>
						</view>
					</view>
					<view class="address-box" v-if="orderInfo.customerReceiveInfo">
						<text class="title"
							style="height: 96rpx;line-height: 96rpx;color: #666;">{{$t('index.delivery-address')}}</text>
						<view class="box">
							<view class="mian">
								<text class="name">{{orderInfo.customerReceiveInfo.receivePerson}}</text>
								<text class="value">{{orderInfo.customerReceiveInfo.receivePersonPhone}}</text>
							</view>
							<view class="address">{{orderInfo.customerReceiveInfo.warehouseAddress}}</view>
							<view class="address top-line">{{$t('index.delivery-time')}}：{{orderInfo.deliveryDate}}
							</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>

			<uni-collapse-item  name="delivery" :open="true" v-if="deliveryGoodsList.length && orderStatusActive >= 6">
				<template v-slot:title>
					<view class="title-box" id="receiptDeliveryRef">
						<text class="message">{{$t('index.product-reconciliation')}}（{{deliveryInfo.totalCount | transformPrice}}）</text>
						<text class="price-box">
							<text class="unit">￥</text>
							<text class="price">{{ deliveryInfo.totalAmount | transformPrice}}</text>
							<!-- <text class="flag">{{watchCollapse('deliveryReconciliation') ? '收起' : '展开'}}</text> -->
						</text>
					</view>
				</template>
				<view class="content-box">
					<view class="reconciliation-box">
						<view class="reconciliation-content-box" v-for="item in deliveryRreconciliationList" :key="item.id">
							<view class="content-status" :class="item.accountStatementStatus === 0 ? 'red' : 'green'">
								<text v-if="item.accountStatementStatus === 0" class="reconciliation-text">{{ $t('index.reconciliation-wait') }}</text>
								<text v-if="item.accountStatementStatus === 1" class="reconciliation-text">{{ $t('index.reconciliation-ok') }}</text>
							</view>
							<view class="amount-box">
								<view class="reconciliation" v-for="reconciliation in item.productList" :key="reconciliation.id">
									<view class="product-box">
										<image class="thumb" v-if="reconciliation.imageUrl" :src="reconciliation.imageUrl" mode="aspectFill"></image>
										<view class="content">
											<view class="line">
												<text class="name">{{reconciliation.productName}}</text>
												<text class="describe">({{reconciliation.brandNumber}}/{{reconciliation.manufacturer}}/{{reconciliation.varieties}})</text>
												
											</view>
											<view class="line peice">
												<text class="describe">×{{reconciliation.count | transformPrice}}<text class="reconciliation-red">({{reconciliation.sendGoodsCountOldNew}})</text></text>
												<text class="describe">{{reconciliation.invoicePrice | transformPrice}}<text class="reconciliation-red">({{reconciliation.offerPriceChangeOldNew}})</text> {{$t('index.unit.price')}}/{{ reconciliation.unit }}</text>
											</view>
										</view>
									</view>
									<view class="amount" style="justify-content: space-between">
										<text>{{$t('index.product-sum')}}：<text class="reconciliation-red">{{reconciliation.amountChangeOldNew}}</text></text>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- <view class="address-box">
						<view class="box">
							<text class="title">配送地址</text>
							<view class="mian">
								<text class="name">{{orderInfo.customerReceiveInfo.receivePerson}}</text>
								<text class="value">{{orderInfo.customerReceiveInfo.receivePersonPhone}}</text>
							</view>
							<view class="address">{{orderInfo.customerReceiveInfo.warehouseAddress}}</view>
							<view class="address top-line">交货时间：{{orderInfo.deliveryDate}}</view>
						</view>
					</view>

					<view class="address-box no-margin-top" v-if="pickupDelivery">
						<view class="box">
							<text class="title">自提地址</text>
							<view class="mian">
								<text class="name">{{pickupDelivery.billLadingPerson}}</text>
								<text class="value">{{pickupDelivery.phone}}</text>
								<text class="number">数量：{{pickupDelivery.count}}</text>
							</view>
							<view class="address">{{pickupDelivery.name}}</view>
							<view class="drive-box top-line">
								<view class="item" v-if="pickupDelivery.modelType">型号：{{pickupDelivery.modelType}}</view>
								<view class="item">车号：{{pickupDelivery.carNumber}}</view>
								<view class="item">身份证：{{pickupDelivery.cardId}}</view>
								<view class="item">提货日期：{{pickupDelivery.ladingDate}}</view>
								<view class="item" v-if="orderInfo.deliverWarehouseName">提货仓库：{{orderInfo.deliverWarehouseName}}</view>
							</view>
						</view>
					</view> -->
				</view>
			</uni-collapse-item>

			<!-- 合同信息 -->
			<uni-collapse-item v-if="orderStatusActive >= 2" name="contract" :open="true">
				<template v-slot:title>
					<view class="title-box" id="contractRef">
						<text class="message">{{$t('index.contract-info')}}</text>
					</view>
				</template>
				<view class="contract-box" style="border-top: 1px solid #f2f2f2;">
					<view class="contract-item" v-for="item in contractList" :key="item.id">
						<view class="contract">
							<view class="name">{{item.contractName}}({{item.contractNum}})</view>
							<view class="info">
								<text class="text">{{$t('index.from')}}：</text>
								<view class="text">{{item.sourceName}}</view>
							</view>
							<view class="text">{{$t('index.expiration-date')}}：{{item.startDate}}~{{item.endDate}}
							</view>
						</view>
						<view style="display: flex;flex-direction: column;">
							<uni-icons type="eye" size="30" @click.native="lookContract(item.uploadFileId)"></uni-icons>
							<uni-icons
								v-if="!item.sellerSignDate && orderStatusActive === 2.5 && orderType === 'contract'"
								type="auth-filled" size="30" @click.native="deleteContract(item)"></uni-icons>
						</view>
					</view>
					<view class="box">
						<no-data :show="isContractFlag" :isFull="false"
							:text="$t('index.contract-info-none')"></no-data>
					</view>
				</view>
			</uni-collapse-item>
			<!-- 定金信息 -->
			<uni-collapse-item v-if="orderStatusActive >= 3" name="deposit" :open="true">
				<template v-slot:title>
					<view class="title-box" id="frontMoneyRef">
						<text class="message">{{$t('index.deposit-info')}}<text
								style="margin: 0 20rpx">|</text>{{$t('index.deposit-rate')}}：{{orderMarginInfo.marginRate}}%</text>
						<text class="price-box">
							<text class="unit">￥</text>
							<text class="price">{{ orderMarginInfo.marginMoney | transformPrice}}</text>
						</text>
					</view>
				</template>
				<view class="contract-box">
					<view class="contract-item" v-for="item in orderMarginList" :key="item.id">
						<view class="deposit">
							<view class="allPrice">
								{{$t('index.order-sum')}}：￥{{orderMarginInfo.marginMoney}}{{$t('index.yuan')}}<text v-if="item.status === 'notPass'">（定金驳回）</text>
							</view>
							<view class="text">{{$t('index.this-time-pay')}}：¥{{item.marginAmount}}{{$t('index.unit.price')}}</view>
							<view class="text">{{$t('index.pay-time')}}：{{item.lastUpdateDate}}</view>
							<view class="image-list">
								<text class="enclosure-text">{{$t('index.annex')}}：</text>
								<view class="image">
									<view class="enclosure" v-for="(img, index) in item.fileResponseVoList"
										:key="img.id" @click="lookDeposit(item.fileResponseVoList, index)">
										{{img.fileName}}
									</view>
								</view>
							</view>
						</view>
						<!-- <uni-icons v-if="orderType === 'deposit'" type="trash" size="30" color="#99A0AF"
							@click="confirmOrder($t('index.msg-deposit-delete'), 'deleteDeposit', item.id)"></uni-icons> -->
					</view>
					<view class="box">
						<no-data :show="isDepositFlag" :isFull="false" :text="$t('index.deposit-info-no')"></no-data>
					</view>
				</view>
			</uni-collapse-item>

			<!-- 定金退款信息 -->
			<uni-collapse-item v-if="orderStatusActive >= 3 && orderMarginRefundList.length" name="depositRefund" :open="true">
				<template v-slot:title>
					<view class="title-box" id="contractRef">
						<text class="message">定金退款信息</text>
					</view>
				</template>
				<view class="contract-box">
					<view class="contract-item" v-for="item in orderMarginRefundList" :key="item.id">
						<view class="deposit">
							<view class="allPrice">
								申请退款金额：￥{{Math.abs(item.marginAmount || 0)}}{{$t('index.yuan')}}
							</view>
							<!-- <view class="text">{{$t('index.this-time-pay')}}：¥{{item.marginAmount}}元</view> -->
							<view class="text">申请退款时间：{{item.lastUpdateDate}}</view>
							<view class="image-list">
								<text class="enclosure-text">审核状态：</text>
								<view class="image" v-if="item.status === 'paid'">已缴纳</view>
								<view class="image" v-if="item.status === 'waitAudit'">待审核</view>
								<view class="image" v-if="item.status === 'notPass'">审核驳回</view>
								<view class="image" v-if="item.status === 'confirm'">审核通过</view>
							</view>
						</view>
						<!-- <uni-icons v-if="orderType === 'deposit'" type="trash" size="30" color="#99A0AF"
							@click="confirmOrder($t('index.msg-deposit-delete'), 'deleteDeposit', item.id)"></uni-icons> -->
					</view>
					<view class="box">
						<no-data :show="isDepositFlag" :isFull="false" :text="$t('index.deposit-info-no')"></no-data>
					</view>
				</view>
			</uni-collapse-item>

			<!-- 发票 -->
			<uni-collapse-item v-if="orderStatusActive >= 7 && invoiceHistoryList.length" name="invoice" :open="true">
				<template v-slot:title>
					<view class="title-box" id="openInvoiceRef">
						<text class="message">{{$t('index.invoice')}}</text>
					</view>
				</template>

				<view class="content-box">
					<view v-for="product in invoiceHistoryList" :key="product.name">
						<view class="invoice-history-box">
							<view class="content-status remain" v-if="product.value[0].productInvoiceStatus === 0">
								{{$t('index.invoice-wait-sure')}}
							</view>
							<view class="content-status confirm" v-if="product.value[0].productInvoiceStatus === 1">
								{{$t('index.invoice-confirmed')}}
							</view>
							<view class="content-status reject" v-if="product.value[0].productInvoiceStatus === 2">
								{{$t('index.review-pass-wait-inovice')}}
							</view>
							<!-- <view class="content-status confirm" v-if="product.value[0].productInvoiceStatus === 4">
								{{$t('index.invoice-confirmed')}}
							</view> -->
							<view style="flex: auto;">
								<view class="product-invoice">
									<view class="sub-title-box">
										<text>{{$t('index.product-invoice-info')}}</text>
										<text
											v-if="product.value[0].productInvoiceStatus === 4 && product.value[0].invoiceUrl"
											class="link"
											@click="downLoadInvoiceLink(product.value[0].invoiceUrl)">{{$t('index.invoice-link')}}</text>
									</view>
									<!-- 发票 -->
									<view class="product-invoice" v-for="rows in product.value" :key="rows.id">
										<view class="incoice" v-for="item in rows.productList" :key="item.id">
											<view class="product-box">
												<view class="content">
													<view class="line">
														<text class="name">{{item.productName}}</text>
														<text
															class="describe">({{item.brandNumber}}/{{item.manufacturer}}/{{item.varieties}})</text>
														<text
															class="describe">{{$t('index.receive-product-num')}}：{{item.updateCount}}</text>
														<text
															class="describe">{{$t('index.invoice-num')}}：{{item.invoiceCount}}</text>
													</view>
													<view class="line peice">
														<text class="name">￥{{item.tempAmount}}</text>
														<text
															class="describe">{{item.invoicePrice | transformPrice}} {{$t('index.unit.price')}}/{{item.unit}}</text>
														<text
															class="describe">{{item.taxRate}}%{{$t('index.tax-rate')}}</text>
													</view>
												</view>
											</view>
										</view>
									</view>
								</view>
	
								<view class="product-invoice">
									<view class="sub-title-box">
										<text>{{$t('index.invoice-info')}}</text>
									</view>
									<view class="product-invoice" v-for="item in product.value[0].invoiceInfoList"
										:key="item.id">
										<view class="physicalInvoice-box">
											<view class="name">{{$t('index.company-name')}}：{{item.companyName}}</view>
											<view class="text">{{$t('index.nashuirenshibiehao')}}：{{item.taxNum}}</view>
											<view class="text">{{$t('index.bank')}}：{{item.openBank}}</view>
											<view class="text">{{$t('index.account')}}：{{item.accountNum}}</view>
											<view class="text">{{$t('index.address')}}：{{item.address}}</view>
											<view class="text">
												{{$t('index.invoice-type')}}：{{transformInvoice(item.invoiceType)}}
											</view>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="invoice-validate-box" v-if="product.value[0].productInvoiceStatus === 0 && orderType === 'invoicing'">
							<view style="flex: 1;">
								<button @click="confirmOrder('确定驳回此开票吗？', 'invoicing', {flag: false, id: product.value[0].id})" class="button red">驳回</button>
							</view>
							<view style="flex: 1;margin-left:30rpx;">
								<button style="background: #086DCA;" @click="confirmOrder('确定同意此开票吗？', 'invoicing', {flag: true, id: product.value[0].id})"
									class="button blue">{{$t('index.sure')}}</button>
							</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>

			<!-- 支付尾款 -->
			<uni-collapse-item v-if="orderStatusActive >= 5 && orderPayStateActive > 0" name="payment" :open="true">
				<template v-slot:title>
					<view class="title-box" id="balancePaymentRef">
						<text class="message">{{$t('index.pay-balance-payment')}}<text style="margin: 0 20rpx">|</text>{{$t('index.sum')}}：{{paymentInfo.totalAmount}}</text>
						<text class="price-box" v-if="paymentInfo.surplusPay > 0">
							<text class="unit">{{$t('index.wait-pay')}}：￥</text>
							<text class="price">{{ paymentInfo.surplusPay | transformPrice}}</text>
						</text>
						<text class="price-box" v-else>
							<text class="unit">已超付：￥</text>
							<text class="price">{{ paymentInfo.surplusPay | transformPrice}}</text>
						</text>
					</view>
				</template>
				<view class="contract-box">
					<view class="contract-item" v-for="item in paymentInfo.paymentList" :key="item.id">
						<view class="deposit">
							<view class="allPrice">
								{{$t('index.order-sum')}}：￥{{paymentInfo.totalAmount}}{{$t('index.yuan')}}
							</view>
							<view class="text">
								{{$t('index.this-time-pay')}}：¥{{item.currentPaymentAmount}}{{$t('index.yuan')}}
							</view>
							<view class="text">{{$t('index.pay-time')}}：{{item.paymentDate}}</view>
							<view class="image-list">
								<text class="enclosure-text">{{$t('index.annex')}}：</text>
								<view class="image">
									<view class="enclosure" v-for="(img, index) in item.fileList" :key="img.id"
										@click="lookDeposit(item.fileList, index)">{{img.fileName}}</view>
								</view>
							</view>
						</view>
						<!-- <uni-icons type="trash" size="30" color="#99A0AF" @click="confirmOrder('确定删除此定金吗?？', 'deleteDeposit', item.id)"></uni-icons> -->
					</view>
					<view class="box">
						<no-data :show="isPaymentFlag" :isFull="false"
							:text="$t('index.pay-balance-payment.no')"></no-data>
					</view>
				</view>
			</uni-collapse-item>

			<!-- 尾款退款信息 -->
			<uni-collapse-item v-if="orderPayStateActive > 2 && refundBalanceList.length" name="depositRefund" :open="true">
				<template v-slot:title>
					<view class="title-box" id="contractRef">
						<text class="message">{{ $t('index.final-refund-information') }}</text>
					</view>
				</template>
				<view class="contract-box">
					<view class="contract-item" v-for="item in refundBalanceList" :key="item.id">
						<view class="deposit">
							<view class="allPrice">
								{{ $t('index.final-refund-money') }}：￥{{Math.abs(item.currentPaymentAmount || 0)}}{{$t('index.yuan')}}
							</view>
							<!-- <view class="text">{{$t('index.this-time-pay')}}：¥{{item.marginAmount}}元</view> -->
							<view class="text">{{ $t('index.final-refund-time') }}：{{item.lastUpdateDate}}</view>
							<view class="image-list">
								<text class="enclosure-text">{{ $t('index.final-refund-status') }}：</text>
								<view class="image" v-if="item.status === 'paid'">{{ $t('index.final-refund-pid') }}</view>
								<view class="image" v-if="item.status === 'waitAudit'">{{ $t('index.final-refund-waitAudit') }}</view>
								<view class="image" v-if="item.status === 'notPass'">{{ $t('index.final-refund-reject') }}</view>
								<view class="image" v-if="item.status === 'confirm'">{{ $t('index.final-refund-confirm') }}</view>
							</view>
						</view>
						<!-- <uni-icons v-if="orderType === 'deposit'" type="trash" size="30" color="#99A0AF"
							@click="confirmOrder($t('index.msg-deposit-delete'), 'deleteDeposit', item.id)"></uni-icons> -->
					</view>
					<view class="box">
						<no-data :show="isDepositFlag" :isFull="false" :text="$t('index.deposit-info-no')"></no-data>
					</view>
				</view>
			</uni-collapse-item>

			<!-- 线上验货 -->
			<uni-collapse-item v-if="orderType === 'inspectionGoods'" name="inspectionGoods" :open="true">
				<template v-slot:title>
					<view class="title-box" id="contractRef">
						<text class="message">线上验货</text>
					</view>
				</template>
				<view class="contract-box" style="border-top: 1px solid #f2f2f2;">
					<view class="contract-item" v-for="item in inspectionList" :key="item.id">
						<view class="contract">
							<view class="name">验货申请时间：{{item.inspectionDate}}</view>
							<view class="info">
								<text class="text">{{$t('index.from')}}：</text>
								<view class="text">
									{{item.platformType === 'buyer' ? '买家' : ''}}
									{{item.platformType === 'seller' ? '店铺' : ''}}
									{{item.platformType === 'supplier' ? '工厂' : ''}}
									{{item.platformType === 'operator' ? '自营' : ''}}
								</view>
							</view>
							<view class="text">备注：{{item.remark}}
							</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>

			<uni-collapse-item name="steps" :open="true">
				<template v-slot:title>
					<view class="title-box">
						<text class="message">{{$t('index.order-stream')}}</text>
					</view>
				</template>
				<view class="step-box">
					<view class="step-item" v-for="item in orderProcessList" :key="item.id">
						<view class="step">
							<view class="status-box">
								<text class="status">{{item.statusName}}</text>
								<text class="text" style="color: #93989E;">{{item.processingTime}}</text>
							</view>
							<view class="info">
								<view class="text">{{item.processingUserName || ''}}
									{{item.processingOrgName ? ('( ' + item.processingOrgName + ' )') : ''}}
								</view>
								<view class="text" v-if="item.remark">{{$t('index.remark')}}：{{item.remark}}</view>
							</view>
						</view>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<view class="orderType-box">
			<block v-if="orderType === 'modify'">
				<button class="button green" @click="confirmOrder('确认要修改价格吗？', 'modifyPrice')">{{ $t('index.modify-unit-price') }}</button>
			</block>
			<block v-if="orderType === 'orderVerify'">
				<view class="btn-btm">
					<view style="flex: 1;">
						<button class="button red"
							@click="confirmOrder('确认驳回此订单吗？', 'orderVerify', false)">{{ $t('index.reject') }}</button>
					</view>
					<view style="flex: 1;margin-left:30rpx;">
						<button style="background: #086DCA;" @click="$refs.marginRatePopup.open('center')"
							class="button blue">{{ $t('index.sure') }}</button>
					</view>
				</view>
			</block>
			<block v-if="orderType === 'inspectionGoods'">
				<view class="btn-btm">
					<view style="flex: 1;">
						<!-- <button class="button blue"	@click="jumpPage(`/pages/receivingDetail/sellerIndex?id=${orderInfo.id}&type=${orderInfo.receiveType}`)">回复</button> -->
						<button class="button blue"	@click="openReconciliationPopup">回复</button>
					</view>
					<view style="flex: 1;margin-left:30rpx;">
						<button style="background: #086DCA;" @click="confirmOrder('确认验货吗？', 'confirmInspection', true)"
							class="button blue">确认验货</button>
					</view>
				</view>
			</block>

			<block v-if="orderType === 'address'">
				<!-- <button v-if="orderInfo.receiveType && orderInfo.receiveType !== 'self'" class="button orange" @click="jumpPage(`/pages/address/index?id=${orderInfo.id}&addressId=${orderInfo.customerReceiveInfo.id}&time=${orderInfo.deliveryDate}`)">选择配送地址</button> -->
				<view class="btn-btm">
					<view style="flex: 1;">
						<button v-if="orderInfo.receiveType && orderInfo.receiveType !== 'self'" class="button orange"
							@click="onChoseDeliveryAddress">{{$t('index.delivery-address-select')}}</button>
					</view>
					<view style="flex: 1;margin-left:30rpx ;"
						v-if="orderInfo.receiveType && orderInfo.receiveType !== 'deliver'">
						<button style="background: #B60001;" class="button red"
							@click="onChoseSelfAddress">{{pickupSelf ? $t('index.edit') : $t('index.add')}}{{$t('index.self-pick-up-info')}}</button>
					</view>
				</view>
			</block>
			<block v-if="orderType === 'receiving'">
				<!-- <button v-if="orderInfo.receiveType" class="button green" -->
				<button v-if="currentType === 'operator'" class="button red" @click="jumpPage(`/pages/receivingDetail/index?id=${orderInfo.id}&type=${orderInfo.receiveType}`)">发货</button>
				<button v-else class="button red" @click="jumpPage(`/pages/receivingDetail/sellerIndex?id=${orderInfo.id}&type=${orderInfo.receiveType}`)">发货</button>
			</block>
			<block v-if="orderType === 'reconciliation'">
				<button v-if="orderInfo.receiveType" class="button red"
					@click="jumpPage(`/pages/receivingDetail/list?id=${orderInfo.id}&type=${orderInfo.receiveType}`)">对账（选择配送单）</button>
			</block>
			<block v-if="orderType === 'contract'">
				<view class="btn-btm">
					<view style="flex: 1;">
						<button class="button red" @click="onUploadContract">
							<uni-icons type="plusempty" color="white" size="15"></uni-icons>
							{{$t('index.contract-upload')}}</button>
					</view>
					<!-- <view style="flex: 1;margin-left:30rpx ;">
						<button style="background: #086DCA;"
							@click="confirmOrder($t('index.msg-contract-info-upload'), 'contract')" class="button">
							{{$t('index.sure')}}</button>
					</view> -->
				</view>
			</block>
			<block v-if="orderType === 'deposit'">
				<view class="btn-btm">
					<view style="flex: 1;">
						<button class="button red"
							@click="confirmOrder('确认驳回此定金吗？', 'deposit', false)">驳回</button>
					</view>
					<view style="flex: 1;margin-left:30rpx;">
						<button style="background: #086DCA;" @click="confirmOrder('确认审核通过吗？', 'deposit', true)"
							class="button blue">确认</button>
					</view>
				</view>
			</block>
			<block v-if="orderType === 'depositVerify'">
				<view class="btn-btm">
					<view style="flex: 1;">
						<button class="button red"
							@click="confirmOrder('确认驳回退款吗？', 'depositVerify', false)">审核驳回</button>
					</view>
					<view style="flex: 1;margin-left:30rpx;">
						<button style="background: #086DCA;" @click="confirmOrder('确定同意退款吗？', 'depositVerify', true)"
							class="button blue">审核同意</button>
					</view>
				</view>
			</block>
			<block v-if="orderType === 'balanceVerify'">
				<view class="btn-btm">
					<view style="flex: 1;">
						<button class="button red"
							@click="confirmOrder('确认驳回尾款审核吗？', 'balanceVerify', false)">审核驳回</button>
					</view>
					<view style="flex: 1;margin-left:30rpx;">
						<button style="background: #086DCA;" @click="confirmOrder('确定同意尾款审核吗？', 'balanceVerify', true)"
							class="button blue">审核同意</button>
					</view>
				</view>
			</block>
			<block v-if="orderType === 'Pay'">
				<view class="btn-btm">
					<view style="flex: 1;">
						<button style="background: #086DCA;" @click="confirmPayment"
							class="button blue">{{$t('index.pay-confirm')}}</button>
					</view>
					<view style="flex: 1;margin-left:30rpx ;">
						<button class="button red"
							@click="jumpPage(`/pages/payment/index?id=${orderInfo.id}`)">{{$t('index.pay-balance-payment')}}</button>
					</view>
				</view>
			</block>
			<block v-if="orderType === 'outbound'">
				<button v-if="orderInfo.receiveType" class="button red"
					@click="jumpPage(`/pages/receivingRecord/index?id=${orderInfo.id}&type=${orderInfo.receiveType}`)">出库</button>
			</block>
			<block v-if="orderType === 'balanceRefund'">
				<view class="btn-btm">
					<view style="flex: 1;">
						<button class="button red"
							@click="confirmOrder('确认驳回退款吗？', 'balanceRefund', false)">审核驳回</button>
					</view>
					<view style="flex: 1;margin-left:30rpx;">
						<button style="background: #086DCA;" @click="confirmOrder('确定同意退款吗？', 'balanceRefund', true)"
							class="button blue">审核同意</button>
					</view>
				</view>
			</block>
		</view>
		<!-- 当前流程 -->
		<view class="fixed-status" @click.stop="$refs.handPopup.open('right')">{{$t('index.order-node')}}</view>
		<uni-popup ref="handPopup" type="right">
			<view class="status-list">
				<view class="title">
					<text class="text">{{$t('index.order-node')}}</text>
					<uni-icons type="closeempty" color="#D5E2F3" size="20" @click="$refs.handPopup.close()"></uni-icons>
				</view>
				<view class="list-box">
					<view class="list" :class="[orderStatusActive > 1 ? 'finish' : 'active']" @click="onPageScrollTo()">
						<view class="chunk one">{{$t('index.platform-order')}}</view>
					</view>
					<view class="list" :class="{'active': orderStatusActive === 2, 'finish': orderStatusActive > 2}"
						@click="onPageScrollTo()">
						<view class="chunk two">{{$t('index.order-review')}}</view>
					</view>
					<view class="list" :class="{'active': orderStatusActive === 3, 'finish': orderStatusActive > 3}"
						@click="onPageScrollTo('frontMoneyRef')">
						<view class="chunk three">{{$t('index.deposit-payment')}}</view>
					</view>
					<view class="list" :class="{'active': orderStatusActive === 4, 'finish': orderStatusActive > 4}"
						@click="onPageScrollTo('frontMoneyRef')">
						<view class="chunk four">{{$t('index.deposit-review')}}</view>
					</view>
					<view class="list" :class="{'active': orderStatusActive === 5, 'finish': orderStatusActive > 5}"
						@click="onPageScrollTo('receiptDeliveryRef')">
						<view class="chunk five">{{$t('index.send-receive-product')}}</view>
					</view>
					<view class="list" :class="{'active': orderStatusActive === 6, 'finish': orderStatusActive > 6}"
						@click="onPageScrollTo('receiptDeliveryRef')">
						<view class="chunk six">{{$t('index.bill-confirm')}}</view>
					</view>
					<view class="list" :class="{'active': orderStatusActive === 7, 'finish': orderStatusActive > 7}"
						@click="onPageScrollTo('openInvoiceRef')">
						<view class="chunk seven">{{$t('index.invoicing')}}</view>
					</view>
					<view class="list"
						:class="{'active': (orderStatusActive >= 5 && orderPayStateActive === 1), 'finish': (orderStatusActive >= 5 && orderPayStateActive >= 2)}"
						@click="onPageScrollTo('balancePaymentRef')">
						<view class="chunk eight">{{$t('index.balance-paying')}}</view>
					</view>
					<view class="list"
						:class="{'active': (orderStatusActive >= 5 && orderPayStateActive === 2), 'finish': (orderStatusActive >= 5 && orderPayStateActive === 3)}"
						@click="onPageScrollTo('balancePaymentRef')">
						<view class="chunk nine">{{$t('index.balance-paying-review')}}</view>
					</view>
					<view class="list" :class="{'finish': orderStatusActive === 10}">
						<view class="chunk ten">{{$t('index.order-completion')}}</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="marginRatePopup" type="center" :mask-click="false">
			<view class="reconciliation-popup">
				<view class="box">
					<view class="title">保证金比例</view>
					<view class="message">
						<input v-model="marginRate" type="number" placeholder="保证金比例（0~100）" />
					</view>
				</view>
				<view class="bnt-box">
					<view class="btn cancel" @click="$refs.marginRatePopup.close()">{{$t('index.cancel')}}</view>
					<view class="btn confirm" @click="marginRateConfirm">{{$t('index.sure')}}</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="reconciliationPopup" type="center" :mask-click="false">
			<view class="reconciliation-popup">
				<view class="box">
					<view class="title">{{$t('index.reject-desc')}}</view>
					<view class="message">
						<textarea class="input" confirm-type="done" :placeholder="$t('index.reject-placeholder')"
							:maxlength="200" @input="refuseReasonInput" />
					</view>
				</view>
				<view class="bnt-box">
					<view class="btn cancel" @click="$refs.reconciliationPopup.close()">{{$t('index.cancel')}}</view>
					<view class="btn confirm" @click="reconciliationConfirm">{{$t('index.sure')}}</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="inspectionPopup" type="center" :mask-click="false">
			<view class="reconciliation-popup">
				<view class="box">
					<view class="title">验货回复</view>
				</view>
				<view class="box">
					<view>
						<uni-datetime-picker hide-second type="datetime" @change="changeInspectionDate" :value="inspectionDate" />
					</view>
					<view class="message">
						<textarea class="input" confirm-type="done" placeholder="请输入备注" :maxlength="200" @input="refuseReasonInput" />
					</view>
				</view>
				<view class="bnt-box">
					<view class="btn cancel" @click="$refs.inspectionPopup.close()">{{$t('index.cancel')}}</view>
					<view class="btn confirm" @click="inspectionConfirm">{{$t('index.sure')}}</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getOrderDetail,
		getOrderProcessList,
		getContractList,
		editProductPrice,
		contractConfirmation,
		getOrderMarginInfo,
		getOrderMarginRecords,
		getOrderMarginRefundRecords,
		deleteMargin,
		depositConfirmSubmit,
		getFnalPayment,
		normalConfirmPay,
		getAccountStatementByOrderId,
		operatorSaleOrderAudit,
		getNoAccountStatement,
		getGoodsCountByOrderId,
		getProductInvoiceByOrderId,
		examineMarginRefund,
		onExamineFinalRefund,
		paymentConfirmPay,
		rejectProductInvoice,
		agreeProductInvoice,
		paymentRejectPay,
		rejectAccountStatement,
		agreeAccountStatement,
		getFnalRefundPayment,
		orderInspectionProcess,
		saveInspectionProcess,
		onlineInspectionApi,
		getUploadFileId,
		getActorUrlApi
	} from '@/config/api.js'
	import noData from '../../components/no-data/no-data.vue';
	import stepPrice from '../../components/step-price/step-price.vue';
	import serverConfig from '@/config/server_config.js'
	let refuseReason = '',refuseId = null; // 对账驳回原因
	export default {
		name: 'detail',
		components: {
			noData,
			stepPrice
		},
		data() {
			return {
				currentType: JSON.parse(uni.getStorageSync('userInfo')).userCurrentPlat,
				orderType: 'detail',
				collapseValue: ['message', 'delivery', 'deliveryReconciliation', 'self', 'selfReconciliation', 'deposit', 'depositRefund',
					'contract', 'payment', 'productinvoice', 'physicalInvoice', 'invoice', 'steps'
				],
				orderInfo: {},
				deliveryGoodsList: [], // 配送商品列表
				deliveryRreconciliationList: [], // 配送商品对账单
				deliveryInfo: { // 配送商品信息
					totalCount: '0',
					totalAmount: '0'
				},
				pickupDelivery: null, // 配送商品的司机信息

				pickupSelf: null, // 自提商品的司机信息

				orderProcessList: [], // 审核流程
				orderStatusActive: 1,

				orderPayStateActive: 0,

				contractList: [], // 合同列表
				orderMarginInfo: {}, // 定金信息
				orderMarginList: [], // 定金列表
				orderMarginRefundList: [], // 定金退款列表

				paymentInfo: {}, // 尾款信息
				refundBalanceList: [],	// 尾款退款列表

				inspectionList: [],		// 线上验货

				invoiceList: [], // 未对账单
				invoiceType: [{
						lable: this.$t('index.invoice-electronic'),
						value: '1'
					},
					{
						lable: this.$t('index.invoice-electronic-ticket'),
						value: '2'
					},
					{
						lable: this.$t('index.invoice-ordinary-roll'),
						value: '3'
					},
					{
						lable: this.$t('index.invoice-ordinary'),
						value: '4'
					}
				], // 发票类型
				invoiceTypeKey: 0, // 物理发票下表

				receivingInforSendmation: {}, // 发货信息
				receivingInforReceivemation: {}, // 收货信息

				productInvoiceList: [], // 商品发票列表
				// physicalInvoiceList: [], // 物理发票列表
				invoiceHistoryList: [], // 已开票发票列表

				paddingBottomNumber: 0, // 页面底部的padding（button的个数）

				inspectionDate: '2024-05-12',
				marginRate: undefined,	// 保证金比例
			}
		},
		computed: {
			isContractFlag() {
				return this.contractList.length === 0
			},
			isDepositFlag() {
				return this.orderMarginList.length === 0
			},
			isPaymentFlag() {
				return this.paymentInfo.paymentList?.length === 0
			},
			isProductInvoiceFlag() {
				return this.productInvoiceList.length === 0
			}
		},
		filters: {
			transformPrice(str) {
				if (str) {
					let price = String(str).match(/^\d+(?:\.\d{0,4})?/, '')?.[0] || str // 两位小数
					// return price.replace(/(?:\.0*|(\.\d+?)0+)$/, '$1')	// 去除最后的0
					return Math.abs(parseFloat(price))
				} else {
					return '0'
				}
			}
		},
		methods: {
			getOrderProcessList(id) {
				getOrderProcessList({
					id
				}).then(({
					content
				}) => {
					this.orderProcessList = content
				})
			},
			onModifyPrice() {
				editProductPrice({
					...this.orderInfo,
					orderDetailVos: this.orderInfo.orderDetails,
				}).then(res=> {
					setTimeout(() => {
						uni.showToast({
							title: '修改成功！',
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					}, 30)
				})
			},
			onVerifyOrder(flag) {
				if(flag) {
					if(this.marginRate === undefined) {
						uni.showToast({
							title: '请输入保证金比例',
							icon: 'none'
						});
						return
					}
					if(this.marginRate < 0 || this.marginRate > 100) {
						uni.showToast({
							title: '请输入正确的保证金比例',
							icon: 'none'
						});
						return
					}
				}
				const statusObj = {}
				const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
				if(userInfo.userCurrentPlat === 'supplier') {
					statusObj['supplierExamineStatus'] = flag ? 'supplierExaminePass' : 'supplierExamineReject'
				} else {
					statusObj['platformExamineStatus'] = flag ? 'platformExaminePass' : 'platformExamineReject'
				}
				operatorSaleOrderAudit({
					id: this.orderInfo.id,
					marginRate: this.marginRate,
					refuseReason: '',
					...statusObj
				}).then(res=> {
					setTimeout(() => {
						uni.showToast({
							title: `${flag ? '审核': '驳回'}成功！`,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					}, 30)
				})
			},
			onGetDetail(id) {
				getOrderDetail({
					id
				}).then(({
					content
				}) => {
					this.orderInfo = content
					this.getProcess(content.stage)
					if (content.receiveType === "deliver") {
						this.deliveryGoodsList = content.orderDetails;
						this.deliveryInfo = {
							totalCount: content.totalCount,
							totalAmount: content.totalAmount
						}
					}
					setTimeout(() => {
						this.$nextTick(() => {
							this.$refs.collapse.resize()
							// this.scrollPage()
						})
					}, 3000)
				})
			},
			scrollPage() {
				if (this.orderType === 'contract') {
					this.onPageScrollTo('contractRef')
				}
				if (this.orderType === 'deposit') {
					this.onPageScrollTo('frontMoneyRef')
				}
				if (this.orderType === 'receiving') {
					this.onPageScrollTo('receiptDeliveryRef')
				}
				if (this.orderType === 'reconciliation') {
					this.onPageScrollTo('receiptDeliveryRef')
				}
				if (this.orderType === 'invoicing') {
					this.onPageScrollTo('openInvoiceRef')
				}
				if (this.orderType === 'Pay') {
					this.onPageScrollTo('balancePaymentRef')
				}
				uni.hideLoading();
			},
			getContractList() {
				getContractList({
					orderId: this.orderInfo.id
				}).then(({
					content
				}) => {
					let data = []
					content.forEach(item => {
						if (item.platformType === 'operator') item['sourceName'] = this.$t('index.platform-self')
						if (item.platformType === 'supplier') item['sourceName'] = this.$t('index.supplier')
						if (item.platformType === 'seller') item['sourceName'] = this.$t('index.seller')
						let uploadFileList = item.uploadFileId.split(',')
						uploadFileList.forEach(id => {
							data.push({
								...item,
								uploadFileId: id
							})
						})
					})
					this.contractList = data
				})
			},
			getPaymentList() {
				getFnalPayment({
					id: this.orderInfo.id
				}).then(({
					content
				}) => {
					this.paymentInfo = content
					if(this.orderType === 'balanceVerify' || this.orderType === 'balanceRefund') {
						setTimeout(() => {
							this.$nextTick(() => {
								this.onPageScrollTo('balancePaymentRef')
							})
						}, 1000)
					}
				})
			},
			getBalanceRefundList() {
				getFnalRefundPayment({id: this.orderInfo.id}).then(res => {
					this.refundBalanceList = res.content.paymentList;
				});
			},
			getOrderMarginInfo() {
				getOrderMarginInfo({
					id: this.orderInfo.id
				}).then(({
					content
				}) => {
					this.orderMarginInfo = content
				})
			},
			getOrderMarginRecords() {
				getOrderMarginRecords({
					id: this.orderInfo.id
				}).then(({
					content
				}) => {
					this.orderMarginList = content
					this.$nextTick(() => {
						this.$refs.collapse.resize()
					})
				})
			},
			getOrderMarginRefundRecords() {
				getOrderMarginRefundRecords({
					id: this.orderInfo.id
				}).then(({
					content
				}) => {
					this.orderMarginRefundList = content
					this.$nextTick(() => {
						this.$refs.collapse.resize()
					})
				})
			},
			getNoAccountStatementList() {
				getNoAccountStatement({
					orderId: this.orderInfo.id,
					page: 1,
					rows: 15
				}).then(({
					content
				}) => {
					this.invoiceList = content
				})
			},
			getProductInvoiceByOrderId() {
				getProductInvoiceByOrderId({
					orderId: this.orderInfo.id
				}).then(({
					content
				}) => {
					this.invoiceHistoryList = []
					this.invoiceHistoryList = Object.keys(content).map(item => ({
						name: item,
						value: content[item]
					}))
				})
			},
			getInvoiceInfoByOrderId() {
				// getInvoiceInfoByOrderId({
				// 	id: this.orderInfo.id
				// }).then(({
				// 	content
				// }) => {
				// 	content.forEach(item => {
				// 		item['priceAndTax'] = item.priceAndTax || ''
				// 		item['taxAmount'] = item.taxAmount || ''
				// 		item['taxRate'] = item.taxRate || ''
				// 	})
				// 	this.physicalInvoiceList = content
				// 	this.$nextTick(() => {
				// 		this.$refs.collapse.resize()
				// 	})
				// })
			},
			getProcess(status) {
				if (['platformExamine', 'supplierExamine'].includes(status)) {
					this.orderStatusActive = 2
				} else if (['contract'].includes(status)) {
					this.orderStatusActive = 2.5
				} else if (['margin'].includes(status) && this.orderInfo.payStatus === "unPay") {
					this.orderStatusActive = 3
				} else if (['margin'].includes(status) && ['marginWaitExamine', 'marginReject'].includes(this.orderInfo.payStatus)) {
					this.orderStatusActive = 4
				} else if (status === 'deliver' || this.orderInfo.deliverStatus === "noDeliver") {
					this.orderStatusActive = 5
				} else if (status === 'receive') {
					this.orderStatusActive = 5.5
				} else if (['reconcile'].includes(status)) {
					this.orderStatusActive = 6
				} else if (status === 'invoice' && this.orderInfo.invoiceStatus !== 'allInvoice') {
					this.orderStatusActive = 7
				} else if (status === 'invoice' && this.orderInfo.invoiceStatus === 'allInvoice') {
					this.orderStatusActive = 8
				} else if (['finished'].includes(status)) {
					this.orderStatusActive = 10
				}

				if (this.orderStatusActive >= 5) {
					if (['unPay', 'partPay'].includes(this.orderInfo.payStatus)) this.orderPayStateActive = 1;
					if (['balanceWaitExamine', 'balanceReject'].includes(this.orderInfo.payStatus)) this
						.orderPayStateActive = 2;
					if (['payed'].includes(this.orderInfo.payStatus)) this.orderPayStateActive = 3;
					this.getPaymentList(); //获取尾款信息
				}

				this.setBottomNumber()

				if (this.orderStatusActive >= 2) { //获取合同信息
					this.getContractList()
				}
				if (this.orderStatusActive >= 3) { //获取定金信息
					this.getOrderMarginInfo();
					this.getOrderMarginRecords();
					this.getOrderMarginRefundRecords();
				}
				if(this.orderStatusActive > 3) {
					this.getBalanceRefundList()
				}
				if (this.orderStatusActive >= 5) {
					this.getGoodsCountByOrderId() //收货数量记录
				}
				if (this.orderStatusActive >= 6) { //获取对账信息
					this.getAccountStatementByOrderId();
				}

				if (this.orderStatusActive >= 7) { //获取商品发票
					this.getNoAccountStatementList();
					this.getProductInvoiceByOrderId();

					if(this.orderType === 'invoicing') {
						setTimeout(() => {
							this.$nextTick(() => {
								this.onPageScrollTo('openInvoiceRef')
							})
						}, 1000)
					}
				}
			},
			watchCollapse(id) {
				return this.collapseValue.includes(id)
			},
			lookContract(id) {
				wx.downloadFile({
					url: `${serverConfig.baseURL}/api/file/file/download/viewPdfById?fileId=${id}`,
					success: function(res) {
						var filePath = res.tempFilePath;
						var flieArr = filePath.split('.');
						var suffix = flieArr[flieArr.length - 1]
						if (suffix.toLowerCase() === 'pdf') {
							wx.openDocument({
								filePath: filePath,
								fileType: 'pdf',
								success: function(res) {
									console.log(res);
								},
								fail: function(res) {
									console.log(res);
								}
							})
						} else {
							uni.previewImage({
								urls: [filePath]
							})
						}
					},
					fail: function(res) {
						console.log('文件下载失败');
					},
					complete: function(res) {},
				})
			},
			deleteContract(item) {
				// let _this = this
				// uni.showModal({
				// 	title: this.$t('index.notice-tip'),
				// 	content: this.$t('index.msg-contract-delete'),
				// 	success: function(res) {
				// 		if (res.confirm) {
				// 			deleteContract(id).then(res => {
				// 				uni.showToast({
				// 					title: this.$t('index.operate-success'),
				// 					icon: 'none'
				// 				});
				// 				_this.getContractList()
				// 			})
				// 		}
				// 	}
				// });
				getUploadFileId({
					contractId: item.id,
					contractUrl: item.uploadFileId,
					contractName: item.contractName + ".pdf"
				}).then(res=> {
					getActorUrlApi({
						actorId: item.sellerCode,
						contractId: item.id
					}).then(res=> {
						if(res && res.content) {
							uni.navigateTo({
								url: '/pages/web/web?webUrl=' + encodeURIComponent(res.content.actorSignTaskUrl)
							})
						}
					})
				})
			},
			getAccountStatementByOrderId() {
				getAccountStatementByOrderId({
					orderId: this.orderInfo.id,
					ladingType: 1
				}).then(({
					content
				}) => {
					content.forEach(item => {
						item['productList'] = JSON.parse(item.productInfo)
					})
					this.deliveryRreconciliationList = content.filter(item => item.ladingType === 1)
					console.log(this.deliveryRreconciliationList)
				})
			},
			lookDeposit(data, index) {
				const urls = data.map(item => {
					return `${serverConfig.baseURL}/api/file/file/download/viewPdfById?fileId=${item.id}`
				})
				uni.previewImage({
					current: index,
					urls
				})
			},
			getGoodsCountByOrderId() {
				getGoodsCountByOrderId({
					id: this.orderInfo.id
				}).then(({
					content
				}) => {
					this.receivingInforSendmation = content.send || {}
					this.receivingInforReceivemation = content.receive || {}
				})
			},
			confirmOrder(content, type, data) {
				let _this = this;
				uni.showModal({
					title: this.$t('index.msg-notice-tip'),
					content,
					success: function(res) {
						if (res.confirm) {
							switch (type) {
								case 'modifyPrice':
									_this.onModifyPrice(data)
									break;
								case 'orderVerify':
									_this.onVerifyOrder(data)
									break;
								case 'deposit':
									_this.depositSubmit(data)
									break;
								case 'depositVerify':
									_this.onDepositVerify(data)
									break;
								case 'balanceVerify':
									_this.onBalanceVerify(data)
									break;
								case 'deleteDeposit':
									_this.deleteDeposit(data)
									break;
								case 'payment':
									_this.paymentSubmit()
									break
								case 'contract':
									_this.confirmContract()
									break;
								case 'reconciliation':
									_this.onAccountStatement(data)
									break
								case 'invoicing':
									_this.confirmInvoicingSubmit(data)
									break
								case 'balanceRefund':
									_this.handleBalanceRefund(data)
									break
								case 'confirmInspection':
									_this.onConfirmInspection(data)
									break
								default:
									break
							}
						}
					}
				});
			},

			confirmInvoicingSubmit(data) {
				if(data.flag) {
					agreeProductInvoice({
						id: data.id
					}).then(res=> {
						setTimeout(() => {
							uni.showToast({
								title: '开票成功！',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					})
				} else {
					rejectProductInvoice({
						id: data.id,
						content: ''
					}).then(res=> {
						setTimeout(() => {
							uni.showToast({
								title: '驳回成功！',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					})
				}
			},
			confirmContract() {
				contractConfirmation({
					orderId: this.orderInfo.id
				}).then(res => {
					if (res.content) {
						setTimeout(() => {
							uni.showToast({
								title: this.$t('index.operate-success'),
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					} else {
						setTimeout(() => {
							uni.showToast({
								title: this.$t('index.operate-success'),
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					}
				}).catch((err) => {
					console.log(err)
				})
			},
			deleteDeposit(data) {
				deleteMargin({
					id: data
				}).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.operate-success'),
							icon: 'none'
						});
					}, 30)
					this.getOrderMarginRecords()
				})
			},
			depositSubmit(flag) {
				depositConfirmSubmit({
					id: this.orderInfo.id,
					payStatus: flag ? 'partPay' : 'marginReject',
					refuseReason: ''
				}).then(res => {
					uni.showToast({
						title: `${flag ? '审核': '驳回'}成功！`,
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						});
					}, 1500)
				})
			},
			onDepositVerify(flag) {
				examineMarginRefund({
					id: this.orderInfo.id,
					payStatus: flag ? 'partPay' : 'marginReject',
					refuseReason: ''
				}).then(res => {
					setTimeout(()=> {
						uni.showToast({
							title: `${flag ? '审核同意': '驳回'}成功！`,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					}, 30)
				})
			},
			onBalanceVerify(flag) {
				if(flag) {
					paymentConfirmPay({
						orderId: this.orderInfo.id,
						content: ''
					}).then(res => {
						setTimeout(()=> {
							uni.showToast({
								title: '审核成功！',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					})
				} else {
					paymentRejectPay({
						orderId: this.orderInfo.id,
						content: ''
					}).then(res => {
						setTimeout(()=> {
							uni.showToast({
								title: '驳回成功！',
								icon: 'none'
							});
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								});
							}, 1500)
						}, 30)
					})
				}
			},
			handleBalanceRefund(flag) {
				onExamineFinalRefund({
					id: this.orderInfo.id,
					payStatus: flag ? 'partPay' : 'marginReject',
					refuseReason: ''
				}).then(res=> {
					setTimeout(()=> {
						uni.showToast({
							title: `${flag ? '审核同意': '驳回'}成功！`,
							icon: 'none'
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					}, 30)
				})
			},
			onNumberChange(price, index) {
				this.deliveryGoodsList[index].offerPrice = price
				this.deliveryGoodsList[index].productTotalPrice = parseFloat((this.deliveryGoodsList[index].count * price).toFixed(2))
				this.deliveryInfo.totalAmount = this.deliveryGoodsList.reduce((pre, cur)=> {
					return parseFloat((pre + cur.count * cur.offerPrice).toFixed(2))
				}, 0)
			},
			confirmPayment() {
				if (this.paymentInfo.surplusPay > 0) {
					uni.showToast({
						title: `${this.$t('index.msg-blance-err')}:¥${this.paymentInfo.surplusPay}${this.$t('index.yuan')}`,
						icon: 'none'
					})
				} else {
					this.confirmOrder(this.$t('index.msg-is-blance-submit'), 'payment')
				}
			},
			paymentSubmit() {
				normalConfirmPay({
					orderId: this.orderInfo.id
				}).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.operate-success')
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					}, 30)
				})
			},
			getPickup(type) {
				if (type === 2 || type === 3) {
					getByOrderIdAndType({
						orderId: this.orderInfo.id,
						ladingType: 2
					}).then(({
						content
					}) => {
						if (typeof content === 'object') {
							this.pickupSelf = content
						}
					})
				}
			},
			onChoseDeliveryAddress() {
				this.jumpPage(`/pages/address/index?id=${this.orderInfo.id}&time=${this.orderInfo.deliveryDate}`)
			},
			onChoseSelfAddress() {
				if (this.pickupSelf && this.pickupSelf.name) {
					uni.showToast({
						title: this.$t('index.msg-modify-disable'),
						icon: 'none'
					});
				} else {
					if (this.pickupSelf) {
						this.jumpPage(`/pages/delivery/index?id=${this.orderInfo.id}&type=edit`)
					} else {
						this.jumpPage(`/pages/delivery/index?id=${this.orderInfo.id}`)
					}
				}
			},
			onUploadContract() {
				let operatorObj = this.contractList.find(item => item.platformType === 'operator')
				if (operatorObj) {
					this.jumpPage(
						`/pages/upload/index?id=${this.orderInfo.id}&name=${operatorObj.contractName}&code=${operatorObj.contractNum}`
					)
				} else {
					this.jumpPage(`/pages/upload/index?id=${this.orderInfo.id}&code=${this.orderInfo.orderNum}`)
				}
			},
			jumpPage(url) {
				uni.navigateTo({
					url
				})
			},
			openReconciliationPopup(item) {
				refuseId = item.id
				this.$refs.inspectionPopup.open('center')
			},
			changeInspectionDate(val) {
				this.inspectionDate = val
			},
			inspectionConfirm() {
				saveInspectionProcess({
					inspectionDate: this.inspectionDate,
					orderId: this.orderInfo.id,
					remark: refuseReason
				}).then(res=> {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.operate-success')
						});
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1500)
					}, 30)
				})
			},
			refuseReasonInput(e) {
				refuseReason = e.detail.value
			},
			marginRateConfirm() {
				this.onVerifyOrder(true)
			},
			reconciliationConfirm() {
				if (refuseReason) {
					this.$refs.reconciliationPopup.close()
					rejectAccountStatement({
						content: refuseReason,
						id: refuseId
					}).then(res => {
						setTimeout(() => {
							uni.showToast({
								title: this.$t('index.msg-reject-succ'),
								icon: 'none'
							});
						}, 30)
						this.onGetDetail(this.orderInfo.id)
					})
				} else {
					uni.showToast({
						title: this.$t('index.msg-reject-reson'),
						icon: 'none'
					});
				}
			},
			onConfirmInvoicing() {
				if (!this.productInvoiceList.length) {
					uni.showToast({
						title: this.$t('index.msg-enter-bill-select'),
						icon: 'none'
					});
					return
				}
				let physicalFlag = this.productInvoiceList.some(product => {
					return product.productList.some(item => {
						return !item.invoiceCount
					})
				})
				if (physicalFlag) {
					uni.showToast({
						title: this.$t('index.msg-enter-product-num'),
						icon: 'none'
					});
					return
				}
				// if(physicalFlag) {
				// 	uni.showToast({
				// 		title: '请填写完整物理发票数据',
				// 		icon: 'none'
				// 	});
				// 	return
				// }
				// if (!this.physicalInvoiceList.length) {
				// 	uni.showToast({
				// 		title: this.$t('index.msg-select-invoice-info'),
				// 		icon: 'none'
				// 	});
				// 	return
				// }
				// let flag = this.physicalInvoiceList.some(item=> {
				// 	return (!item.priceAndTax || !item.taxAmount || !item.taxRate)
				// })
				// if(flag) {
				// 	uni.showToast({
				// 		title: '请填写完整物理发票数据',
				// 		icon: 'none'
				// 	});
				// 	return
				// }
				this.confirmOrder(this.$t('index.msg-is-submit-invoice-info'), 'invoicing')
			},
			transformInvoice(type) {
				return this.invoiceType.find(item => item.value === type).lable
			},
			downLoadInvoiceLink(url) {
				wx.downloadFile({
					url,
					success: function(res) {
						var filePath = res.tempFilePath;
						wx.openDocument({
							filePath: filePath,
							fileType: 'pdf',
							success: function(res) {
								console.log(res);
							},
							fail: function(res) {
								console.log(res);
							}
						})
					},
					fail: function(res) {
						console.log('文件下载失败');
					},
					complete: function(res) {},
				})
			},
			onAccountStatement(row) {
				agreeAccountStatement({
					id: row.id
				}).then(res => {
					setTimeout(() => {
						uni.showToast({
							title: this.$t('index.operate-success'),
							icon: 'none'
						});
					}, 30)
					this.onGetDetail(this.orderInfo.id)
				})
			},
			invoiceTypeChange(event) {
				this.invoiceTypeKey = event.detail.value
			},
			setBottomNumber() {
				let btnNumber = 0;
				if (this.orderType === 'modify') btnNumber += 1
				if (this.orderType === 'orderVerify') btnNumber += 1
				if (this.orderStatusActive > 5 || this.orderType === 'receiving') btnNumber += 1
				if (['contract', 'depositVerify', 'deposit', 'Pay', 'balanceVerify', 'balanceRefund', 'inspectionGoods'].includes(this.orderType)) btnNumber += 1
				if (this.orderType === 'receiving') btnNumber += 1
				// if (this.orderType === 'invoicing') btnNumber += 3
				// if(this.orderType === 'address' || this.orderType === 'receiving') {
				if (this.orderType === 'address') {
					// if(this.orderInfo.receiveType === 'selfDeliver') {
					// 	btnNumber += 2
					// } else {
					btnNumber += 1
					// }
				}
				this.paddingBottomNumber = btnNumber > 0 ? 100 : 0
			},
			onPageScrollTo(ref) {
				if (ref) {
					var tity = uni.createSelectorQuery();
					tity.selectViewport().scrollOffset();
					tity.selectAll('#' + ref).boundingClientRect();
					tity.exec(function(res) { //执行请求
						if (res[1].length) { // 模块有数据
							uni.pageScrollTo({
								scrollTop: res[0].scrollTop + res[1][0].top
							})
						}
					})
				} else {
					uni.pageScrollTo({
						scrollTop: 0,
						duration: 300
					});
				}
				this.$refs.handPopup.close()
			},
			pageInspectionProcess(orderId) {
				orderInspectionProcess({
					params: {orderId,
					page: 1,
					rows: 30}
				}).then(res => {
					this.inspectionList = res.content.content;
				});
			},
			onConfirmInspection() {
				onlineInspectionApi({id: this.orderInfo.id}).then(res=> {

				})
			}
		},
		onLoad(options) {
			this.orderType = options.type
			this.onGetDetail(options.id)
			this.getOrderProcessList(options.id)
			if(options.type === 'inspectionGoods') {
				this.pageInspectionProcess(options.id)
			}
		},
		onShow() {
			if (this.orderInfo.orderNum) {
				this.onGetDetail(this.orderInfo.id)
				// 	// if(this.orderStatusActive > 2) {		// 上传合同后返回重新请求合同
				// 	// 	this.getContractList()
				// 	// }

				// 	// if(this.orderStatusActive > 2) {		// 支付定金后返回重新请求
				// 	// 	this.getOrderMarginInfo();
				// 	// 	this.getOrderMarginRecords();
				// 	// }
				// }

				// if(this.orderStatusActive >= 5 && this.orderPayStateActive > 0) {		// 支付定金后返回重新请求
				// 	this.getPaymentList();
				// }
			}
			// this.physicalInvoiceList = getApp().globalData.physicalInvoiceList
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		/deep/ .uni-collapse {
			background-color: #F5F5F6;
		}

		/deep/ .uni-collapse-item {
			margin-top: 10px;
			background-color: #fff;
		}
	}

	.list-item-bg {
		height: 110rpx;
		width: 100vw;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f2f2f2;
	}

	.title-box {
		height: 110rpx;
		padding-left: 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.order-title {
			font-size: 34rpx;
			color: #ADB0B5;
			line-height: 1;
			position: relative;
		}

		.flag {
			font-size: 12px;
			color: #99A0AF;
			vertical-align: middle;
		}

		.message {
			font-size: 15px;
			color: #222;
		}

		.price-box {
			line-height: 1;
			vertical-align: middle;

			.unit {
				color: #B60001;
				font-size: 12px;
			}

			.price {
				font-size: 40rpx;
				color: #B60001;
				margin-right: 20rpx;
			}
		}
	}

	.content-box {
		background-color: #fff;
		padding: 0 15px;

		.product-box {
			display: flex;
			flex-direction: column;
			padding: 20rpx 0;
			// border-bottom: 1rpx solid #D5E2F3;

			&.top-line {
				border-top: 1rpx solid #D5E2F3;
			}

			// border-top: 1rpx solid #D5E2F3;
			&:not(:last-of-type) {
				border-bottom: 1rpx solid #D5E2F3;
			}


			.thumb {
				flex: none;
				width: 140rpx;
				height: 140rpx;
				background: #F6F7F8;
				border-radius: 10rpx;
				margin-right: 18rpx;
			}

			.content {
				flex: auto;
				display: flex;
				justify-content: space-between;

				.line {
					display: flex;
					flex-direction: column;
					justify-content: start;

					&.peice {
						flex: none;
						align-items: flex-end;
					}

					.name {
						font-size: 30rpx;
						color: #222;
						font-weight: 500;
						// line-height: 1;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;

					}

					.describe {
						font-size: 12px;
						color: #222;
						// line-height: 1;
						// margin-top: 20rpx;
					}
				}
			}
		}

		.address-box {
			padding-bottom: 30rpx;

			&.no-margin-top {
				margin-top: 0;
			}

			.box {
				border: 1px solid #f2f2f2;
				padding: 30rpx 30rpx;
				position: relative;
				border-radius: 20rpx;

				.title {
					position: absolute;
					top: 0;
					left: 30rpx;
					display: inline-block;
					padding: 0 20rpx;
					line-height: 1;
					background-color: #fff;
				}

				.mian {
					vertical-align: middle;
					font-size: 28rpx;
					color: #B60001;
					line-height: 1;

					.name {
						font-size: 30rpx;
						font-weight: bold;
						color: #222;
						margin-right: 30rpx;
						height: 56rpx;
						line-height: 56rpx;
					}

					.value {
						margin-right: 80rpx;
					}
				}

				.address {
					color: #93989e;
					font-size: 13px;
					line-height: 50rpx;
					height: 50rpx;
				}



				.drive-box {
					padding-bottom: 30rpx;
					display: flex;
					flex-wrap: wrap;

					.item {
						min-width: 50%;
						flex: auto;
						color: #99A0AF;
						font-size: 12px;
						margin-top: 20rpx;
						line-height: 1;
					}
				}
			}
		}

		.reconciliation-box {
			border-top: 1rpx solid #D5E2F3;
			padding-top: 20rpx;

			.reconciliation-content-box {
				display: flex;
				&:not(:last-child) {
					// .amount-box .reconciliation {
					// 	border-bottom: 1rpx solid #aeb7ca;
					// }
					margin-bottom: 10px;
				}

				.content-status {
					flex: none;
					width: 1.5em;
					box-sizing: border-box;
				    border-top-left-radius: 10px;
				    border-bottom-left-radius: 10px;
					display: flex;
					align-items: center;
					font-size: 12px;
					color: #fff;
					white-space: break-spaces;
					&.red {
						background-color: #F56C6C;
					}
					&.green {
						background-color: #67C23A;
					}
					.reconciliation-text {
						text-align: center;
						color: #fff;
					}
				}

				.amount-box {
					flex: auto;
					margin-left: 5px;
					// border: 1rpx solid #D5E2F3;
					// border-radius: 20rpx;
					// padding: 0 30rpx;
	
	
					// .reconciliation:not(:first-of-type) {
					// 	border-top: 1rpx solid #aeb7ca;
					// }
	
					.amount {
						display: flex;
						// justify-content: end;
						padding: 30rpx 0;
						// padding-top: 20rpx;
					}
	
					.reconciliation-btn {
						// border-top: 1rpx solid #D5E2F3;
						display: flex;
						justify-content: space-between;
						padding: 20rpx 0;
	
						.button {
							display: flex;
							flex-grow: 1;
							height: 92rpx;
							line-height: 92rpx;
							color: #fff;
							font-size: 30rpx;
							font-weight: 500;
							border-radius: 0;
						}
					}
				}
			}
		}

		.box {
			border-top: 1rpx solid #D5E2F3;
			padding: 30rpx;
		}

		.invoice-history-box {
			border-top: 1rpx solid #D5E2F3;
			padding: 30rpx 0;
			display: flex;

			.content-status {
				flex: none;
				width: 1.5em;
				box-sizing: border-box;
				border-top-left-radius: 10px;
				border-bottom-left-radius: 10px;
				display: flex;
				justify-content: center;
				align-items: center;
				text-align: center;
				color: #fff;
				font-size: 12px;
				white-space: break-spaces;

				&.remain {
					background-color: #E6A23C;
				}

				&.reject {
					background-color: #B60001;
				}

				&.confirm {
					background-color: #03d97d;
				}
			}

			.product-invoice {
				padding-left: 20rpx;

				.sub-title-box {
					display: flex;
					justify-content: space-between;
					font-size: 28rpx;
					color: #B60001;

					.link {
						color: #B60001;
					}
				}

				.physicalInvoice-box {
					padding: 20rpx 0;

					.name {
						font-size: 28rpx;
						color: #B60001;
					}

					.text {
						font-size: 12px;
						color: #99A0AF;
					}
				}
			}
		}

		.invoice-validate-box {
			display: flex;
			padding-bottom: 20rpx;
			.button {
				height: 72rpx;
				line-height: 72rpx;
				color: #fff;
				font-size: 14px;
				border-radius: 0;
			}
		}
	}

	.contract-box {
		padding: 0 30rpx;

		.contract-item {
			// margin-top: 30rpx;
			border: 1px solid #f2f2f2;
			box-sizing: border-box;
			width: 100%;
			padding: 30rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.contract {
				line-height: 1;
				box-sizing: border-box;
				width: 100%;

				.name {
					font-size: 30rpx;
					color: #222;
					font-weight: bold;
				}

				.info {
					display: flex;
					align-items: center;
					margin: 20rpx 0;
					font-size: 0;

					.flag {
						height: 36rpx;
						line-height: 36rpx;
						text-align: center;
						border-radius: 10rpx;
						font-size: 13px;
						box-sizing: border-box;
						padding: 0 20rpx;

						&.operator {
							color: #00DF79;
							background-color: #E8FFF5;
							border: 1rpx solid #10D680;
						}

						&.buyer {
							color: #B60001;
							background-color: #ECF4FF;
							border: 1rpx solid #B60001;
						}
					}
				}

				.text {
					font-size: 13px;
					color: #93989E;

					&.info {
						margin: 16rpx 0;
					}
				}
			}

			.deposit {
				line-height: 1;
				box-sizing: border-box;
				width: 100%;

				.allPrice {
					font-size: 28rpx;
					color: #B60001;
				}

				.text {
					font-size: 12px;
					color: #99A0AF;
					margin-top: 20rpx;
				}

				.image-list {
					margin-top: 20rpx;
					display: flex;
					align-items: baseline;

					.enclosure-text {
						flex: none;
						font-size: 12px;
						color: #99A0AF;
					}

					.image {
						// display: flex;
						// flex-wrap: wrap;

						.enclosure {
							font-size: 12px;
							color: #636872;
							// margin-right: 50rpx;
							word-break: break-all;

							&+.enclosure {
								margin-top: 20rpx;
							}
						}
					}
				}
			}
		}

		.box {
			border-top: 1rpx solid #D5E2F3;
			padding: 30rpx;
		}
	}

	.step-box {
		border-top: 1rpx solid #D5E2F3;
		padding: 30rpx 0 40rpx;
		width: 690rpx;
		margin: 0 auto;

		.step-item {
			position: relative;

			&:not(:last-of-type) {
				padding-bottom: 60rpx;

				&::after {
					content: " ";
					position: absolute;
					top: 60rpx;
					left: 25rpx;
					bottom: 10rpx;
					width: 0;
					border-right: 1px solid #B60001;
				}
			}

			.step {
				padding-left: 76rpx;

				&::before {
					content: " ";
					position: absolute;
					top: 0;
					left: 0;
					width: 50rpx;
					height: 50rpx;
					background-color: #B60001;
					border-radius: 50%;
					opacity: .3;
				}

				&::after {
					content: " ";
					position: absolute;
					top: 8rpx;
					left: 8rpx;
					width: 34rpx;
					height: 34rpx;
					background-color: #B60001;
					border-radius: 50%;
				}

				.status-box {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					line-height: 1;

					.status {
						font-size: 30rpx;
						color: #333;
					}
				}

				.text {
					font-size: 13px;
					color: #666;
				}

				.info {
					margin-top: 20rpx;
				}
			}
		}
	}

	.orderType-box {
		position: fixed;
		left: 0;
		bottom: 0;
		right: 0;
		z-index: 8;
		background: #fff;
		padding: 0 30rpx 30rpx;

		.button {
			height: 92rpx;
			line-height: 92rpx;
			color: #fff;
			font-size: 14px;
			border-radius: 0;
		}
	}

	.fixed-status {
		position: fixed;
		top: 45%;
		right: 0;
		width: 1em;
		word-break: break-all;
		padding: 40rpx 10rpx;
		background-color: #B60001;
		font-size: 28rpx;
		color: #FFFFFF;
		border-radius: 20rpx 0px 0px 20rpx;
		z-index: 1;
	}

	.status-list {
		width: auto;
		height: 100vh;
		background-color: #fff;
		border-radius: 20rpx 0px 0px 20rpx;

		.title {
			padding: 0 20rpx;
			height: 72rpx;
			border-bottom: 1rpx solid #D5E2F3;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.text {
				font-size: 34rpx;
				color: #B60001;
			}
		}

		.list-box {
			padding: 30rpx;
			height: calc(100vh - 72px);
			overflow-y: auto;

			.list {
				position: relative;

				&:not(:first-of-type) {
					padding-top: 60rpx;

					&::before {
						content: " ";
						position: absolute;
						left: 22rpx;
						top: 10rpx;
						width: 0;
						height: 40rpx;
						border-right: 1px solid #99A0AF;
					}
				}

				.chunk {
					height: 50rpx;
					line-height: 50rpx;
					padding-left: 70rpx;
					font-size: 28rpx;
					color: #99A0AF;
					background-repeat: no-repeat;

					&.one {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjcsNTUuNEgxMi4xYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS40YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOHYyMC4xDQoJCQkJYzAsMC44LTAuNywxLjUtMS41LDEuNXMtMS41LTAuNy0xLjUtMS41VjkuNGMwLTEtMC44LTEuOC0xLjgtMS44SDEyLjFjLTEsMC0xLjgsMC44LTEuOCwxLjh2NDEuMmMwLDEsMC44LDEuOCwxLjgsMS44aDIxLjYNCgkJCQljMC44LDAsMS41LDAuNywxLjUsMS41UzM0LjUsNTUuNCwzMy43LDU1LjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0zOS40LDE4aC0yM2MtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDIzYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzQwLjksMTcuMyw0MC4yLDE4LDM5LjQsMTh6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzkuNCwyN2gtMjNjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgyM2MwLjgsMCwxLjUsMC43LDEuNSwxLjV2MEM0MC45LDI2LjMsNDAuMiwyNywzOS40LDI3eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTI4LjQsMzYuNWgtMTJjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgxMmMwLjgsMCwxLjUsMC43LDEuNSwxLjV2MA0KCQkJQzI5LjksMzUuOCwyOS4yLDM2LjUsMjguNCwzNi41eiIvPg0KCTwvZz4NCgk8cGF0aCBkPSJNNDYuNiw1MC4xTDQ2LjYsNTAuMWMtMS40LDAtMi41LTEuMS0yLjUtMi41VjM4YzAtMS40LDEuMS0yLjUsMi41LTIuNWgwYzEuNCwwLDIuNSwxLjEsMi41LDIuNXY5LjYNCgkJQzQ5LjEsNDksNDgsNTAuMSw0Ni42LDUwLjF6Ii8+DQoJPHBhdGggZD0iTTUyLjQsNDguNWwtNS4yLDUuMmMtMC4zLDAuMy0wLjgsMC4zLTEuMSwwbC01LjItNS4yYy0wLjUtMC41LTAuMS0xLjMsMC41LTEuM2gxMC41QzUyLjYsNDcuMiw1Mi45LDQ4LDUyLjQsNDguNXoiLz4NCjwvZz4NCjwvc3ZnPg0K');
						// background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogI0I2MDAwMTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjcsNTUuNEgxMi4xYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS40YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOHYyMC4xDQoJCQkJYzAsMC44LTAuNywxLjUtMS41LDEuNXMtMS41LTAuNy0xLjUtMS41VjkuNGMwLTEtMC44LTEuOC0xLjgtMS44SDEyLjFjLTEsMC0xLjgsMC44LTEuOCwxLjh2NDEuMmMwLDEsMC44LDEuOCwxLjgsMS44aDIxLjYNCgkJCQljMC44LDAsMS41LDAuNywxLjUsMS41UzM0LjUsNTUuNCwzMy43LDU1LjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0zOS40LDE4aC0yM2MtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDIzYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzQwLjksMTcuMyw0MC4yLDE4LDM5LjQsMTh6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzkuNCwyN2gtMjNjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgyM2MwLjgsMCwxLjUsMC43LDEuNSwxLjV2MEM0MC45LDI2LjMsNDAuMiwyNywzOS40LDI3eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTI4LjQsMzYuNWgtMTJjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgxMmMwLjgsMCwxLjUsMC43LDEuNSwxLjV2MA0KCQkJQzI5LjksMzUuOCwyOS4yLDM2LjUsMjguNCwzNi41eiIvPg0KCTwvZz4NCgk8cGF0aCBkPSJNNDYuNiw1MC4xTDQ2LjYsNTAuMWMtMS40LDAtMi41LTEuMS0yLjUtMi41VjM4YzAtMS40LDEuMS0yLjUsMi41LTIuNWgwYzEuNCwwLDIuNSwxLjEsMi41LDIuNXY5LjYNCgkJQzQ5LjEsNDksNDgsNTAuMSw0Ni42LDUwLjF6Ii8+DQoJPHBhdGggZD0iTTUyLjQsNDguNWwtNS4yLDUuMmMtMC4zLDAuMy0wLjgsMC4zLTEuMSwwbC01LjItNS4yYy0wLjUtMC41LTAuMS0xLjMsMC41LTEuM2gxMC41QzUyLjYsNDcuMiw1Mi45LDQ4LDUyLjQsNDguNXoiLz4NCjwvZz4NCjwvc3ZnPg0K');
					}

					&.two {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzk5QTBBRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjUsNTUuNEgxMmMtMi42LDAtNC44LTIuMS00LjgtNC44VjkuNGMwLTIuNiwyLjEtNC44LDQuOC00LjhoMzEuNWMyLjYsMCw0LjgsMi4xLDQuOCw0Ljh2MjAuMWMwLDAuOC0wLjcsMS41LTEuNSwxLjUNCgkJCQlzLTEuNS0wLjctMS41LTEuNVY5LjRjMC0xLTAuOC0xLjgtMS44LTEuOEgxMmMtMSwwLTEuOCwwLjgtMS44LDEuOHY0MS4yYzAsMSwwLjgsMS44LDEuOCwxLjhoMjEuNmMwLjgsMCwxLjUsMC43LDEuNSwxLjUNCgkJCQlTMzQuNCw1NS40LDMzLjUsNTUuNHoiLz4NCgkJPC9nPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5LjIsMThoLTIzYy0wLjgsMC0xLjUtMC43LTEuNS0xLjV2MGMwLTAuOCwwLjctMS41LDEuNS0xLjVoMjNjMC44LDAsMS41LDAuNywxLjUsMS41djBDNDAuNywxNy4zLDQwLDE4LDM5LjIsMTh6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzkuMiwyN2gtMjNjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgyM2MwLjgsMCwxLjUsMC43LDEuNSwxLjV2MEM0MC43LDI2LjMsNDAsMjcsMzkuMiwyN3oiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00OCw0NC41aC0zLjZjLTAuNSwwLTEtMC41LTEtMWwwLDBjMC0wLjUsMC41LTEsMS0xSDQ4YzAuNSwwLDEsMC41LDEsMWwwLDBDNDksNDQsNDguNSw0NC41LDQ4LDQ0LjV6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNNDMuNCw0My41di02YzAtMC41LDAuNS0xLDEtMWwwLDBjMC41LDAsMSwwLjUsMSwxdjZjMCwwLjUtMC40LDEtMSwxbDAsMEM0My45LDQ0LjUsNDMuNCw0NCw0My40LDQzLjV6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjguMiwzNi41aC0xMmMtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDEyYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzI5LjcsMzUuOCwyOSwzNi41LDI4LjIsMzYuNXoNCgkJCSIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTQ0LjcsNTQuNWMtNi4xLDAtMTEtNC45LTExLTExczQuOS0xMSwxMS0xMXMxMSw0LjksMTEsMTFTNTAuOCw1NC41LDQ0LjcsNTQuNXogTTQ0LjcsMzQuNWMtNSwwLTksNC05LDlzNCw5LDksOXM5LTQsOS05DQoJCQlTNDkuNiwzNC41LDQ0LjcsMzQuNXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
					}

					&.three {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzk5QTBBRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yOS44LDUzLjlDMjEuNyw1My45LDguMyw0Myw4LjMsMzEuNFYxNWMwLTAuOCwwLjMtMS41LDEtMmMwLjYtMC41LDEuNC0wLjcsMi4xLTAuNWMxLjEsMC4yLDIuMywwLjQsMy40LDAuNA0KCQkJYzUuNCwwLDEwLjQtMi42LDEzLjUtN2MwLjItMC4yLDAuNC0wLjUsMC43LTAuNmwwLDBjMC41LTAuMywxLjItMC4zLDEuNywwbDAsMGMwLjMsMC4xLDAuNSwwLjMsMC42LDAuNmMzLjEsNC40LDguMSw3LDEzLjUsNw0KCQkJYzEuMSwwLDIuMy0wLjEsMy40LTAuNGMwLjgtMC4yLDEuNSwwLDIuMSwwLjVjMC42LDAuNSwxLDEuMiwxLDJ2MTYuNEM1MS4zLDQzLDM3LjgsNTMuOSwyOS44LDUzLjl6IE0xMS4zLDE1LjZ2MTUuOA0KCQkJYzAsMTAuMywxMi42LDE5LjUsMTguNSwxOS41czE4LjUtOS4yLDE4LjUtMTkuNVYxNS42Yy0xLjIsMC4yLTIuMywwLjMtMy41LDAuM2MtNS44LDAtMTEuMy0yLjYtMTUtN2MtMy43LDQuNC05LjIsNy0xNSw3DQoJCQlDMTMuNiwxNS45LDEyLjQsMTUuOCwxMS4zLDE1LjZ6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zNi4zLDMwLjdIMjMuMmMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxMy4xYzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNy4yLDMwLjcsMzYuMywzMC43eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI4LjgsMzAuN2MtMC41LDAtMS0wLjMtMS4zLTAuOGwtNC4yLTcuNGMtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNmw0LjIsNy40YzAuNCwwLjcsMC4yLDEuNi0wLjYsMg0KCQkJCUMyOS4zLDMwLjcsMjksMzAuNywyOC44LDMwLjd6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzAuNywzMC43Yy0wLjMsMC0wLjUtMC4xLTAuNy0wLjJjLTAuNy0wLjQtMS0xLjMtMC42LTJsNC4yLTcuNGMwLjQtMC43LDEuMy0xLDItMC42YzAuNywwLjQsMSwxLjMsMC42LDJMMzIsMzANCgkJCQlDMzEuNywzMC41LDMxLjIsMzAuNywzMC43LDMwLjd6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzYuMywzNS43SDIzLjJjLTAuOCwwLTEuNS0wLjctMS41LTEuNXMwLjctMS41LDEuNS0xLjVoMTMuMWMwLjgsMCwxLjUsMC43LDEuNSwxLjVTMzcuMiwzNS43LDM2LjMsMzUuN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yOS44LDQxLjRjLTAuOCwwLTEuNS0wLjctMS41LTEuNVYyOS44YzAtMC44LDAuNy0xLjUsMS41LTEuNXMxLjUsMC43LDEuNSwxLjV2MTAuMUMzMS4zLDQwLjcsMzAuNiw0MS40LDI5LjgsNDEuNHoiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K');
					}

					&.four {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzk5QTBBRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTM2LjUsMjkuOEgyMy40Yy0wLjgsMC0xLjUtMC43LTEuNS0xLjVzMC43LTEuNSwxLjUtMS41aDEzLjFjMC44LDAsMS41LDAuNywxLjUsMS41UzM3LjQsMjkuOCwzNi41LDI5Ljh6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMjksMjkuOGMtMC41LDAtMS0wLjMtMS4zLTAuOGwtNC4yLTcuNGMtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNmw0LjIsNy40YzAuNCwwLjcsMC4yLDEuNi0wLjYsMg0KCQkJCUMyOS41LDI5LjcsMjkuMiwyOS44LDI5LDI5Ljh6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzAuOSwyOS44Yy0wLjMsMC0wLjUtMC4xLTAuNy0wLjJjLTAuNy0wLjQtMS0xLjMtMC42LTJsNC4yLTcuNGMwLjQtMC43LDEuMy0xLDItMC42YzAuNywwLjQsMSwxLjMsMC42LDJMMzIuMiwyOQ0KCQkJCUMzMS45LDI5LjUsMzEuNCwyOS44LDMwLjksMjkuOHoiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zNi41LDM0LjdIMjMuNGMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxMy4xYzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNy40LDM0LjcsMzYuNSwzNC43eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMwLDQwLjRjLTAuOCwwLTEuNS0wLjctMS41LTEuNVYyOC44YzAtMC44LDAuNy0xLjUsMS41LTEuNXMxLjUsMC43LDEuNSwxLjV2MTAuMUMzMS41LDM5LjcsMzAuOCw0MC40LDMwLDQwLjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPHBhdGggZD0iTTUwLjEsMzdjLTAuNy0wLjctMS42LTEuMy0yLjYtMS43Yy0xLTAuNC0yLjEtMC43LTMuMy0wLjdjLTQuNywwLTguNSwzLjgtOC41LDguNWMwLDEuNywwLjUsMy40LDEuNCw0LjcNCgkJYzAuNiwwLjksMS4zLDEuNiwyLjIsMi4yYzEuNCwxLDMuMSwxLjYsNC45LDEuNmM0LjcsMCw4LjUtMy44LDguNS04LjVDNTIuOCw0MC43LDUxLjcsMzguNiw1MC4xLDM3eiBNNDQuMyw0OC43DQoJCWMtMC44LDAtMS42LTAuMi0yLjMtMC41Yy0xLTAuNC0xLjgtMS4yLTIuMy0yYy0wLjUtMC45LTAuOS0xLjktMC45LTNjMC0zLDIuNS01LjUsNS41LTUuNWMwLjgsMCwxLjUsMC4yLDIuMSwwLjQNCgkJYzEsMC40LDEuOCwxLjEsMi40LDEuOWMwLjYsMC45LDEsMiwxLDMuMkM0OS44LDQ2LjIsNDcuMyw0OC43LDQ0LjMsNDguN3oiLz4NCgk8Zz4NCgkJPHBhdGggZD0iTTUzLjgsNTMuN2MtMC40LDAtMC44LTAuMS0xLjEtMC40bC0zLjUtMy41Yy0wLjYtMC42LTAuNi0xLjUsMC0yLjFjMC42LTAuNiwxLjUtMC42LDIuMSwwbDMuNSwzLjVjMC42LDAuNiwwLjYsMS41LDAsMi4xDQoJCQlDNTQuNSw1My41LDU0LjIsNTMuNyw1My44LDUzLjd6Ii8+DQoJPC9nPg0KCTxwYXRoIGQ9Ik0zNS42LDUwLjRjLTAuNC0wLjUtMS4xLTAuNy0xLjctMC40Yy0xLjUsMC42LTIuOCwxLTQsMWMtNS45LDAtMTguNS05LjItMTguNS0xOS41VjE1LjZjMS4yLDAuMiwyLjMsMC4zLDMuNSwwLjMNCgkJYzUuOCwwLDExLjMtMi42LDE1LTdjMy43LDQuNCw5LjIsNywxNSw3YzEuMiwwLDIuMy0wLjEsMy41LTAuM3YxNS44YzAsMC4xLDAsMC4yLDAsMC4zYzAsMC42LDAuMywxLjEsMC44LDEuNGMwLDAsMCwwLDAsMA0KCQljMSwwLjUsMi4yLTAuMiwyLjItMS4zYzAtMC4xLDAtMC4zLDAtMC40VjE1YzAtMC44LTAuMy0xLjUtMS0yYy0wLjYtMC41LTEuNC0wLjctMi4xLTAuNWMtMS4xLDAuMi0yLjMsMC40LTMuNCwwLjQNCgkJYy01LjQsMC0xMC40LTIuNi0xMy41LTdjLTAuMi0wLjItMC40LTAuNC0wLjYtMC42Yy0wLjUtMC4zLTEuMi0wLjMtMS43LDBsMCwwYy0wLjMsMC4xLTAuNSwwLjMtMC43LDAuNmMtMy4xLDQuNC04LjEsNy0xMy41LDcNCgkJYy0xLjEsMC0yLjMtMC4xLTMuNC0wLjRjLTAuOC0wLjItMS41LDAtMi4xLDAuNWMtMC42LDAuNS0xLDEuMi0xLDJ2MTYuNEM4LjUsNDMsMjEuOSw1My45LDMwLDUzLjljMS42LDAsMy4zLTAuNCw1LjEtMS4xDQoJCUMzNiw1Mi40LDM2LjMsNTEuMiwzNS42LDUwLjRDMzUuNyw1MC40LDM1LjYsNTAuNCwzNS42LDUwLjR6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==');
					}

					&.five {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzk5QTBBRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQ2LDYuNUgzNC41Yy01LjQsMC0xMCwzLjktMTEsOWgtOC43Yy0xLjUsMC0yLjksMC43LTMuNywyTDMuNSwyOC43Yy0wLjUsMC43LTAuOCwxLjYtMC44LDIuNVY0MmMwLDIuNSwyLDQuNSw0LjUsNC41aDAuNg0KCQljMC4zLDMuNiwzLjMsNi41LDcsNi41czYuNy0yLjksNy02LjVoMS41aDFoMTVjMCwzLjksMy4xLDcsNyw3czctMy4xLDctN2MwLTAuOC0wLjEtMS42LTAuNC0yLjNjMi43LTIuMSw0LjQtNS40LDQuNC04LjlWMTcuNw0KCQlDNTcuMywxMS41LDUyLjIsNi41LDQ2LDYuNXogTTEzLjYsMTkuMWMwLjMtMC40LDAuNy0wLjYsMS4yLTAuNmgyLjV2Ny43YzAsMS42LTEuMywyLjgtMi44LDIuOEg2LjlMMTMuNiwxOS4xeiBNMTQuOCw1MA0KCQljLTIuMiwwLTQtMS44LTQtNHMxLjgtNCw0LTRzNCwxLjgsNCw0UzE3LDUwLDE0LjgsNTB6IE0yMS4zLDQzLjVjLTEtMi42LTMuNi00LjUtNi41LTQuNXMtNS41LDEuOS02LjUsNC41aC0xDQoJCWMtMC44LDAtMS41LTAuNy0xLjUtMS41VjMyaDguN2MzLjIsMCw1LjgtMi42LDUuOC01Ljh2LTcuN2gzdjI1SDIxLjN6IE00Ni4zLDUwLjVjLTIuMiwwLTQtMS44LTQtNHMxLjgtNCw0LTRzNCwxLjgsNCw0DQoJCVM0OC41LDUwLjUsNDYuMyw1MC41eiBNNTQuMywzNS4zYzAsMi40LTEuMSw0LjgtMyw2LjNjLTEuMy0xLjMtMy0yLjEtNS0yLjFjLTIuOCwwLTUuMiwxLjYtNi4zLDRIMjYuM1YxNy43YzAtNC41LDMuNy04LjIsOC4yLTguMg0KCQlINDZjNC41LDAsOC4yLDMuNyw4LjIsOC4yVjM1LjN6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==');
					}

					&.six {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzk5QTBBRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjgsNTUuOUgxMi4yYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS45YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOFYzMGMwLDAuOC0wLjcsMS41LTEuNSwxLjUNCgkJCQlzLTEuNS0wLjctMS41LTEuNVY5LjljMC0xLTAuOC0xLjgtMS44LTEuOEgxMi4yYy0xLDAtMS44LDAuOC0xLjgsMS44djQxLjJjMCwxLDAuOCwxLjgsMS44LDEuOGgyMS42YzAuOCwwLDEuNSwwLjcsMS41LDEuNQ0KCQkJCVMzNC42LDU1LjksMzMuOCw1NS45eiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzkuNSwxOC41aC0yM2MtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDIzYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzQxLDE3LjgsNDAuMywxOC41LDM5LjUsMTguNXoNCgkJCSIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5LjUsMjcuNWgtMjNjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgyM2MwLjgsMCwxLjUsMC43LDEuNSwxLjV2MEM0MSwyNi44LDQwLjMsMjcuNSwzOS41LDI3LjV6DQoJCQkiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yOC41LDM3aC0xMmMtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDEyYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzMwLDM2LjMsMjkuMywzNywyOC41LDM3eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTQxLjgsNTFjLTQuNywwLTguNS0zLjgtOC41LTguNXMzLjgtOC41LDguNS04LjVzOC41LDMuOCw4LjUsOC41UzQ2LjQsNTEsNDEuOCw1MXogTTQxLjgsMzdjLTMsMC01LjUsMi41LTUuNSw1LjUNCgkJCXMyLjUsNS41LDUuNSw1LjVzNS41LTIuNSw1LjUtNS41UzQ0LjgsMzcsNDEuOCwzN3oiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik01MSw1Mi44Yy0wLjQsMC0wLjgtMC4xLTEuMS0wLjRsLTMuNS0zLjVjLTAuNi0wLjYtMC42LTEuNSwwLTIuMWMwLjYtMC42LDEuNS0wLjYsMi4xLDBsMy41LDMuNWMwLjYsMC42LDAuNiwxLjUsMCwyLjENCgkJCUM1MS44LDUyLjYsNTEuNCw1Mi44LDUxLDUyLjh6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=');
					}

					&.seven {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzk5QTBBRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00OC45LDMzLjRoLTMuNGwwLTNoMy40YzEuNywwLDMuMS0xLjQsMy4xLTMuMVYxMS42YzAtMS43LTEuNC0zLjEtMy4xLTMuMUgxMS4xQzkuNCw4LjUsOCw5LjksOCwxMS42djE1LjcNCgkJCWMwLDEuNywxLjQsMy4xLDMuMSwzLjFoMy40djNoLTMuNGMtMy40LDAtNi4xLTIuNy02LjEtNi4xVjExLjZjMC0zLjQsMi43LTYuMSw2LjEtNi4xaDM3LjhjMy40LDAsNi4xLDIuNyw2LjEsNi4xdjE1LjcNCgkJCUM1NSwzMC42LDUyLjMsMzMuNCw0OC45LDMzLjR6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzYuNiwzMS41SDIzLjRjLTEuNSwwLTIuOC0xLjItMi44LTIuOGMwLTEuNSwxLjItMi44LDIuOC0yLjhoMTMuMmMxLjUsMCwyLjgsMS4yLDIuOCwyLjhDMzkuNCwzMC4zLDM4LjEsMzEuNSwzNi42LDMxLjUNCgkJCXogTTIzLjQsMjhjLTAuNCwwLTAuOCwwLjMtMC44LDAuOHMwLjMsMC44LDAuOCwwLjhoMTMuMmMwLjQsMCwwLjgtMC4zLDAuOC0wLjhTMzcsMjgsMzYuNiwyOEgyMy40eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM2LjYsMzkuNUgyMy40Yy0xLjUsMC0yLjgtMS4yLTIuOC0yLjhjMC0xLjUsMS4yLTIuOCwyLjgtMi44aDEzLjJjMS41LDAsMi44LDEuMiwyLjgsMi44QzM5LjQsMzguMywzOC4xLDM5LjUsMzYuNiwzOS41DQoJCQl6IE0yMy40LDM2Yy0wLjQsMC0wLjgsMC4zLTAuOCwwLjhzMC4zLDAuOCwwLjgsMC44aDEzLjJjMC40LDAsMC44LTAuMywwLjgtMC44UzM3LDM2LDM2LjYsMzZIMjMuNHoiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0xOC44LDU0LjVjLTEuMywwLTIuNy0wLjUtMy43LTEuNWMtMS40LTEuMy0yLjEtMy4xLTIuMS01VjIyLjVjMC0zLjksMy4xLTcsNy03aDIwYzMuOSwwLDcsMy4xLDcsN1Y0OA0KCQkJYzAsMS45LTAuOCwzLjctMi4xLDVjLTIuMSwyLTUuNSwyLTcuNi0wLjFsMCwwYy0wLjgtMC44LTIuMi0xLTMuMS0wLjNMMzMsNTMuM2MtMS45LDEuMi00LjIsMS4yLTYuMSwwbC0xLjEtMC43DQoJCQljLTEtMC43LTIuMy0wLjUtMy4xLDAuM0MyMS43LDU0LDIwLjIsNTQuNSwxOC44LDU0LjV6IE0yMCwxOC41Yy0yLjIsMC00LDEuOC00LDRWNDhjMCwxLjEsMC40LDIuMSwxLjIsMi45DQoJCQljMC45LDAuOSwyLjUsMC44LDMuNC0wLjFjMS44LTEuOCw0LjgtMi4xLDYuOS0wLjdsMS4xLDAuN2MwLjgsMC42LDEuOSwwLjYsMi44LDBsMS4xLTAuN2MyLjItMS40LDUuMS0xLjIsNi45LDAuN2wwLDANCgkJCWMxLDEsMi41LDEsMy40LDAuMWMwLjgtMC44LDEuMi0xLjgsMS4yLTIuOVYyMi41YzAtMi4yLTEuOC00LTQtNEgyMHoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
					}

					&.eight {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzk5QTBBRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPGc+DQoJCQkJPHBhdGggZD0iTTMyLjEsNTZIMTAuNWMtMi42LDAtNC44LTIuMS00LjgtNC44VjEwYzAtMi42LDIuMS00LjgsNC44LTQuOEg0MmMyLjYsMCw0LjgsMi4xLDQuOCw0Ljh2MjAuMWMwLDAuOC0wLjcsMS41LTEuNSwxLjUNCgkJCQkJcy0xLjUtMC43LTEuNS0xLjVWMTBjMC0xLTAuOC0xLjgtMS44LTEuOEgxMC41Yy0xLDAtMS44LDAuOC0xLjgsMS44djQxLjJjMCwxLDAuOCwxLjgsMS44LDEuOGgyMS42YzAuOCwwLDEuNSwwLjcsMS41LDEuNQ0KCQkJCQlTMzIuOSw1NiwzMi4xLDU2eiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00Ni42LDQ1LjJINDNjLTAuNSwwLTEtMC41LTEtMWwwLDBjMC0wLjUsMC41LTEsMS0xaDMuNmMwLjUsMCwxLDAuNSwxLDFsMCwwQzQ3LjYsNDQuNyw0Ny4xLDQ1LjIsNDYuNiw0NS4yeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00Miw0NC4ydi02YzAtMC41LDAuNS0xLDEtMWwwLDBjMC41LDAsMSwwLjUsMSwxdjZjMCwwLjUtMC41LDEtMSwxbDAsMEM0Mi40LDQ1LjIsNDIsNDQuNyw0Miw0NC4yeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00My4yLDU1LjJjLTYuMSwwLTExLTQuOS0xMS0xMXM0LjktMTEsMTEtMTFzMTEsNC45LDExLDExUzQ5LjMsNTUuMiw0My4yLDU1LjJ6IE00My4yLDM1LjJjLTUsMC05LDQtOSw5czQsOSw5LDkNCgkJCQlzOS00LDktOVM0OC4yLDM1LjIsNDMuMiwzNS4yeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zMy42LDI2LjNIMTYuOGMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxNi44YzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNC40LDI2LjMsMzMuNiwyNi4zeiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTIzLjksMjYuM2MtMC41LDAtMS0wLjMtMS4zLTAuOGwtNS40LTkuM2MtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNmw1LjQsOS4zYzAuNCwwLjcsMC4yLDEuNi0wLjYsMg0KCQkJCUMyNC40LDI2LjMsMjQuMSwyNi4zLDIzLjksMjYuM3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yNi4zLDI2LjNjLTAuMywwLTAuNS0wLjEtMC43LTAuMmMtMC43LTAuNC0xLTEuMy0wLjYtMmw1LjQtOS4zYzAuNC0wLjcsMS4zLTEsMi0wLjZjMC43LDAuNCwxLDEuMywwLjYsMmwtNS40LDkuMw0KCQkJCUMyNy40LDI2LjEsMjYuOSwyNi4zLDI2LjMsMjYuM3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zMy42LDMyLjJIMTYuOGMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxNi44YzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNC40LDMyLjIsMzMuNiwzMi4yeiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI1LjIsNDEuN2MtMC44LDAtMS41LTAuNy0xLjUtMS41VjI1LjVjMC0wLjgsMC43LTEuNSwxLjUtMS41czEuNSwwLjcsMS41LDEuNXYxNC43QzI2LjcsNDEsMjYsNDEuNywyNS4yLDQxLjd6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
					}

					&.nine {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzk5QTBBRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjgsNTUuNEgxMi4yYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS40YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOHYyMC4xDQoJCQkJYzAsMC44LTAuNywxLjUtMS41LDEuNXMtMS41LTAuNy0xLjUtMS41VjkuNGMwLTEtMC44LTEuOC0xLjgtMS44SDEyLjJjLTEsMC0xLjgsMC44LTEuOCwxLjh2NDEuMmMwLDEsMC44LDEuOCwxLjgsMS44aDIxLjYNCgkJCQljMC44LDAsMS41LDAuNywxLjUsMS41UzM0LjYsNTUuNCwzMy44LDU1LjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00MS44LDUwLjVjLTQuNywwLTguNS0zLjgtOC41LTguNXMzLjgtOC41LDguNS04LjVzOC41LDMuOCw4LjUsOC41UzQ2LjQsNTAuNSw0MS44LDUwLjV6IE00MS44LDM2LjUNCgkJCWMtMywwLTUuNSwyLjUtNS41LDUuNXMyLjUsNS41LDUuNSw1LjVzNS41LTIuNSw1LjUtNS41UzQ0LjgsMzYuNSw0MS44LDM2LjV6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNNTEsNTIuM2MtMC40LDAtMC44LTAuMS0xLjEtMC40bC0zLjUtMy41Yy0wLjYtMC42LTAuNi0xLjUsMC0yLjFjMC42LTAuNiwxLjUtMC42LDIuMSwwbDMuNSwzLjVjMC42LDAuNiwwLjYsMS41LDAsMi4xDQoJCQlDNTEuOCw1Mi4xLDUxLjQsNTIuMyw1MSw1Mi4zeiIvPg0KCTwvZz4NCgk8Zz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzUuMywyNS43SDE4LjVjLTAuOCwwLTEuNS0wLjctMS41LTEuNXMwLjctMS41LDEuNS0xLjVoMTYuOGMwLjgsMCwxLjUsMC43LDEuNSwxLjVTMzYuMSwyNS43LDM1LjMsMjUuN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yNS42LDI1LjdjLTAuNSwwLTEtMC4zLTEuMy0wLjhsLTUuNC05LjNjLTAuNC0wLjctMC4yLTEuNiwwLjYtMmMwLjctMC40LDEuNi0wLjIsMiwwLjZsNS40LDkuM2MwLjQsMC43LDAuMiwxLjYtMC42LDINCgkJCQlDMjYuMSwyNS42LDI1LjksMjUuNywyNS42LDI1Ljd6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMjgsMjUuN2MtMC4zLDAtMC41LTAuMS0wLjctMC4yYy0wLjctMC40LTEtMS4zLTAuNi0ybDUuNC05LjNjMC40LTAuNywxLjMtMSwyLTAuNmMwLjcsMC40LDEsMS4zLDAuNiwybC01LjQsOS4zDQoJCQkJQzI5LjEsMjUuNCwyOC42LDI1LjcsMjgsMjUuN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zNS4zLDMxLjVIMTguNWMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxNi44YzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNi4xLDMxLjUsMzUuMywzMS41eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI2LjksNDFjLTAuOCwwLTEuNS0wLjctMS41LTEuNVYyNC44YzAtMC44LDAuNy0xLjUsMS41LTEuNXMxLjUsMC43LDEuNSwxLjV2MTQuN0MyOC40LDQwLjMsMjcuNyw0MSwyNi45LDQxeiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=');
					}

					&.ten {
						background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzk5QTBBRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjgsNTUuNEgxMi4yYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS40YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOHYyMC4xDQoJCQkJYzAsMC44LTAuNywxLjUtMS41LDEuNXMtMS41LTAuNy0xLjUtMS41VjkuNGMwLTEtMC44LTEuOC0xLjgtMS44SDEyLjJjLTEsMC0xLjgsMC44LTEuOCwxLjh2NDEuMmMwLDEsMC44LDEuOCwxLjgsMS44aDIxLjYNCgkJCQljMC44LDAsMS41LDAuNywxLjUsMS41UzM0LjYsNTUuNCwzMy44LDU1LjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0zOS41LDE4aC0yM2MtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDIzYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzQxLDE3LjMsNDAuMywxOCwzOS41LDE4eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5LjUsMjdoLTIzYy0wLjgsMC0xLjUtMC43LTEuNS0xLjV2MGMwLTAuOCwwLjctMS41LDEuNS0xLjVoMjNjMC44LDAsMS41LDAuNywxLjUsMS41djBDNDEsMjYuMyw0MC4zLDI3LDM5LjUsMjd6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00My4xLDQ3LjRsLTIuOC0yLjhjLTAuNC0wLjQtMC40LTEsMC0xLjR2MGMwLjQtMC40LDEtMC40LDEuNCwwbDIuOCwyLjhjMC40LDAuNCwwLjQsMSwwLDEuNGgwDQoJCQkJQzQ0LjIsNDcuOCw0My41LDQ3LjgsNDMuMSw0Ny40eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTQzLjEsNDZsNi4xLTYuMWMwLjQtMC40LDEtMC40LDEuNCwwbDAsMGMwLjQsMC40LDAuNCwxLDAsMS40bC02LjEsNi4xYy0wLjQsMC40LTEsMC40LTEuNCwwbDAsMA0KCQkJCUM0Mi44LDQ3LjEsNDIuOCw0Ni40LDQzLjEsNDZ6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yOC41LDM2LjVoLTEyYy0wLjgsMC0xLjUtMC43LTEuNS0xLjV2MGMwLTAuOCwwLjctMS41LDEuNS0xLjVoMTJjMC44LDAsMS41LDAuNywxLjUsMS41djBDMzAsMzUuOCwyOS4zLDM2LjUsMjguNSwzNi41eg0KCQkJIi8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNNDQuOSw1NC41Yy02LjEsMC0xMS00LjktMTEtMTFzNC45LTExLDExLTExczExLDQuOSwxMSwxMVM1MSw1NC41LDQ0LjksNTQuNXogTTQ0LjksMzQuNWMtNSwwLTksNC05LDlzNCw5LDksOXM5LTQsOS05DQoJCQlTNDkuOSwzNC41LDQ0LjksMzQuNXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
					}
				}

				&.active {
					&::before {
						border-right: 1px solid #B60001;
					}

					.chunk {
						color: #B60001;

						&.two {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogI2VjMzcyYTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjUsNTUuNEgxMmMtMi42LDAtNC44LTIuMS00LjgtNC44VjkuNGMwLTIuNiwyLjEtNC44LDQuOC00LjhoMzEuNWMyLjYsMCw0LjgsMi4xLDQuOCw0Ljh2MjAuMWMwLDAuOC0wLjcsMS41LTEuNSwxLjUNCgkJCQlzLTEuNS0wLjctMS41LTEuNVY5LjRjMC0xLTAuOC0xLjgtMS44LTEuOEgxMmMtMSwwLTEuOCwwLjgtMS44LDEuOHY0MS4yYzAsMSwwLjgsMS44LDEuOCwxLjhoMjEuNmMwLjgsMCwxLjUsMC43LDEuNSwxLjUNCgkJCQlTMzQuNCw1NS40LDMzLjUsNTUuNHoiLz4NCgkJPC9nPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5LjIsMThoLTIzYy0wLjgsMC0xLjUtMC43LTEuNS0xLjV2MGMwLTAuOCwwLjctMS41LDEuNS0xLjVoMjNjMC44LDAsMS41LDAuNywxLjUsMS41djBDNDAuNywxNy4zLDQwLDE4LDM5LjIsMTh6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzkuMiwyN2gtMjNjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgyM2MwLjgsMCwxLjUsMC43LDEuNSwxLjV2MEM0MC43LDI2LjMsNDAsMjcsMzkuMiwyN3oiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00OCw0NC41aC0zLjZjLTAuNSwwLTEtMC41LTEtMWwwLDBjMC0wLjUsMC41LTEsMS0xSDQ4YzAuNSwwLDEsMC41LDEsMWwwLDBDNDksNDQsNDguNSw0NC41LDQ4LDQ0LjV6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNNDMuNCw0My41di02YzAtMC41LDAuNS0xLDEtMWwwLDBjMC41LDAsMSwwLjUsMSwxdjZjMCwwLjUtMC40LDEtMSwxbDAsMEM0My45LDQ0LjUsNDMuNCw0NCw0My40LDQzLjV6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjguMiwzNi41aC0xMmMtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDEyYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzI5LjcsMzUuOCwyOSwzNi41LDI4LjIsMzYuNXoNCgkJCSIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTQ0LjcsNTQuNWMtNi4xLDAtMTEtNC45LTExLTExczQuOS0xMSwxMS0xMXMxMSw0LjksMTEsMTFTNTAuOCw1NC41LDQ0LjcsNTQuNXogTTQ0LjcsMzQuNWMtNSwwLTksNC05LDlzNCw5LDksOXM5LTQsOS05DQoJCQlTNDkuNiwzNC41LDQ0LjcsMzQuNXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.three {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogI2VjMzcyYTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yOS44LDUzLjlDMjEuNyw1My45LDguMyw0Myw4LjMsMzEuNFYxNWMwLTAuOCwwLjMtMS41LDEtMmMwLjYtMC41LDEuNC0wLjcsMi4xLTAuNWMxLjEsMC4yLDIuMywwLjQsMy40LDAuNA0KCQkJYzUuNCwwLDEwLjQtMi42LDEzLjUtN2MwLjItMC4yLDAuNC0wLjUsMC43LTAuNmwwLDBjMC41LTAuMywxLjItMC4zLDEuNywwbDAsMGMwLjMsMC4xLDAuNSwwLjMsMC42LDAuNmMzLjEsNC40LDguMSw3LDEzLjUsNw0KCQkJYzEuMSwwLDIuMy0wLjEsMy40LTAuNGMwLjgtMC4yLDEuNSwwLDIuMSwwLjVjMC42LDAuNSwxLDEuMiwxLDJ2MTYuNEM1MS4zLDQzLDM3LjgsNTMuOSwyOS44LDUzLjl6IE0xMS4zLDE1LjZ2MTUuOA0KCQkJYzAsMTAuMywxMi42LDE5LjUsMTguNSwxOS41czE4LjUtOS4yLDE4LjUtMTkuNVYxNS42Yy0xLjIsMC4yLTIuMywwLjMtMy41LDAuM2MtNS44LDAtMTEuMy0yLjYtMTUtN2MtMy43LDQuNC05LjIsNy0xNSw3DQoJCQlDMTMuNiwxNS45LDEyLjQsMTUuOCwxMS4zLDE1LjZ6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zNi4zLDMwLjdIMjMuMmMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxMy4xYzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNy4yLDMwLjcsMzYuMywzMC43eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI4LjgsMzAuN2MtMC41LDAtMS0wLjMtMS4zLTAuOGwtNC4yLTcuNGMtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNmw0LjIsNy40YzAuNCwwLjcsMC4yLDEuNi0wLjYsMg0KCQkJCUMyOS4zLDMwLjcsMjksMzAuNywyOC44LDMwLjd6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzAuNywzMC43Yy0wLjMsMC0wLjUtMC4xLTAuNy0wLjJjLTAuNy0wLjQtMS0xLjMtMC42LTJsNC4yLTcuNGMwLjQtMC43LDEuMy0xLDItMC42YzAuNywwLjQsMSwxLjMsMC42LDJMMzIsMzANCgkJCQlDMzEuNywzMC41LDMxLjIsMzAuNywzMC43LDMwLjd6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzYuMywzNS43SDIzLjJjLTAuOCwwLTEuNS0wLjctMS41LTEuNXMwLjctMS41LDEuNS0xLjVoMTMuMWMwLjgsMCwxLjUsMC43LDEuNSwxLjVTMzcuMiwzNS43LDM2LjMsMzUuN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yOS44LDQxLjRjLTAuOCwwLTEuNS0wLjctMS41LTEuNVYyOS44YzAtMC44LDAuNy0xLjUsMS41LTEuNXMxLjUsMC43LDEuNSwxLjV2MTAuMUMzMS4zLDQwLjcsMzAuNiw0MS40LDI5LjgsNDEuNHoiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K');
						}

						&.four {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogI2VjMzcyYTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTM2LjUsMjkuOEgyMy40Yy0wLjgsMC0xLjUtMC43LTEuNS0xLjVzMC43LTEuNSwxLjUtMS41aDEzLjFjMC44LDAsMS41LDAuNywxLjUsMS41UzM3LjQsMjkuOCwzNi41LDI5Ljh6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMjksMjkuOGMtMC41LDAtMS0wLjMtMS4zLTAuOGwtNC4yLTcuNGMtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNmw0LjIsNy40YzAuNCwwLjcsMC4yLDEuNi0wLjYsMg0KCQkJCUMyOS41LDI5LjcsMjkuMiwyOS44LDI5LDI5Ljh6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzAuOSwyOS44Yy0wLjMsMC0wLjUtMC4xLTAuNy0wLjJjLTAuNy0wLjQtMS0xLjMtMC42LTJsNC4yLTcuNGMwLjQtMC43LDEuMy0xLDItMC42YzAuNywwLjQsMSwxLjMsMC42LDJMMzIuMiwyOQ0KCQkJCUMzMS45LDI5LjUsMzEuNCwyOS44LDMwLjksMjkuOHoiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zNi41LDM0LjdIMjMuNGMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxMy4xYzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNy40LDM0LjcsMzYuNSwzNC43eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMwLDQwLjRjLTAuOCwwLTEuNS0wLjctMS41LTEuNVYyOC44YzAtMC44LDAuNy0xLjUsMS41LTEuNXMxLjUsMC43LDEuNSwxLjV2MTAuMUMzMS41LDM5LjcsMzAuOCw0MC40LDMwLDQwLjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPHBhdGggZD0iTTUwLjEsMzdjLTAuNy0wLjctMS42LTEuMy0yLjYtMS43Yy0xLTAuNC0yLjEtMC43LTMuMy0wLjdjLTQuNywwLTguNSwzLjgtOC41LDguNWMwLDEuNywwLjUsMy40LDEuNCw0LjcNCgkJYzAuNiwwLjksMS4zLDEuNiwyLjIsMi4yYzEuNCwxLDMuMSwxLjYsNC45LDEuNmM0LjcsMCw4LjUtMy44LDguNS04LjVDNTIuOCw0MC43LDUxLjcsMzguNiw1MC4xLDM3eiBNNDQuMyw0OC43DQoJCWMtMC44LDAtMS42LTAuMi0yLjMtMC41Yy0xLTAuNC0xLjgtMS4yLTIuMy0yYy0wLjUtMC45LTAuOS0xLjktMC45LTNjMC0zLDIuNS01LjUsNS41LTUuNWMwLjgsMCwxLjUsMC4yLDIuMSwwLjQNCgkJYzEsMC40LDEuOCwxLjEsMi40LDEuOWMwLjYsMC45LDEsMiwxLDMuMkM0OS44LDQ2LjIsNDcuMyw0OC43LDQ0LjMsNDguN3oiLz4NCgk8Zz4NCgkJPHBhdGggZD0iTTUzLjgsNTMuN2MtMC40LDAtMC44LTAuMS0xLjEtMC40bC0zLjUtMy41Yy0wLjYtMC42LTAuNi0xLjUsMC0yLjFjMC42LTAuNiwxLjUtMC42LDIuMSwwbDMuNSwzLjVjMC42LDAuNiwwLjYsMS41LDAsMi4xDQoJCQlDNTQuNSw1My41LDU0LjIsNTMuNyw1My44LDUzLjd6Ii8+DQoJPC9nPg0KCTxwYXRoIGQ9Ik0zNS42LDUwLjRjLTAuNC0wLjUtMS4xLTAuNy0xLjctMC40Yy0xLjUsMC42LTIuOCwxLTQsMWMtNS45LDAtMTguNS05LjItMTguNS0xOS41VjE1LjZjMS4yLDAuMiwyLjMsMC4zLDMuNSwwLjMNCgkJYzUuOCwwLDExLjMtMi42LDE1LTdjMy43LDQuNCw5LjIsNywxNSw3YzEuMiwwLDIuMy0wLjEsMy41LTAuM3YxNS44YzAsMC4xLDAsMC4yLDAsMC4zYzAsMC42LDAuMywxLjEsMC44LDEuNGMwLDAsMCwwLDAsMA0KCQljMSwwLjUsMi4yLTAuMiwyLjItMS4zYzAtMC4xLDAtMC4zLDAtMC40VjE1YzAtMC44LTAuMy0xLjUtMS0yYy0wLjYtMC41LTEuNC0wLjctMi4xLTAuNWMtMS4xLDAuMi0yLjMsMC40LTMuNCwwLjQNCgkJYy01LjQsMC0xMC40LTIuNi0xMy41LTdjLTAuMi0wLjItMC40LTAuNC0wLjYtMC42Yy0wLjUtMC4zLTEuMi0wLjMtMS43LDBsMCwwYy0wLjMsMC4xLTAuNSwwLjMtMC43LDAuNmMtMy4xLDQuNC04LjEsNy0xMy41LDcNCgkJYy0xLjEsMC0yLjMtMC4xLTMuNC0wLjRjLTAuOC0wLjItMS41LDAtMi4xLDAuNWMtMC42LDAuNS0xLDEuMi0xLDJ2MTYuNEM4LjUsNDMsMjEuOSw1My45LDMwLDUzLjljMS42LDAsMy4zLTAuNCw1LjEtMS4xDQoJCUMzNiw1Mi40LDM2LjMsNTEuMiwzNS42LDUwLjRDMzUuNyw1MC40LDM1LjYsNTAuNCwzNS42LDUwLjR6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.five {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogI2VjMzcyYTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQ2LDYuNUgzNC41Yy01LjQsMC0xMCwzLjktMTEsOWgtOC43Yy0xLjUsMC0yLjksMC43LTMuNywyTDMuNSwyOC43Yy0wLjUsMC43LTAuOCwxLjYtMC44LDIuNVY0MmMwLDIuNSwyLDQuNSw0LjUsNC41aDAuNg0KCQljMC4zLDMuNiwzLjMsNi41LDcsNi41czYuNy0yLjksNy02LjVoMS41aDFoMTVjMCwzLjksMy4xLDcsNyw3czctMy4xLDctN2MwLTAuOC0wLjEtMS42LTAuNC0yLjNjMi43LTIuMSw0LjQtNS40LDQuNC04LjlWMTcuNw0KCQlDNTcuMywxMS41LDUyLjIsNi41LDQ2LDYuNXogTTEzLjYsMTkuMWMwLjMtMC40LDAuNy0wLjYsMS4yLTAuNmgyLjV2Ny43YzAsMS42LTEuMywyLjgtMi44LDIuOEg2LjlMMTMuNiwxOS4xeiBNMTQuOCw1MA0KCQljLTIuMiwwLTQtMS44LTQtNHMxLjgtNCw0LTRzNCwxLjgsNCw0UzE3LDUwLDE0LjgsNTB6IE0yMS4zLDQzLjVjLTEtMi42LTMuNi00LjUtNi41LTQuNXMtNS41LDEuOS02LjUsNC41aC0xDQoJCWMtMC44LDAtMS41LTAuNy0xLjUtMS41VjMyaDguN2MzLjIsMCw1LjgtMi42LDUuOC01Ljh2LTcuN2gzdjI1SDIxLjN6IE00Ni4zLDUwLjVjLTIuMiwwLTQtMS44LTQtNHMxLjgtNCw0LTRzNCwxLjgsNCw0DQoJCVM0OC41LDUwLjUsNDYuMyw1MC41eiBNNTQuMywzNS4zYzAsMi40LTEuMSw0LjgtMyw2LjNjLTEuMy0xLjMtMy0yLjEtNS0yLjFjLTIuOCwwLTUuMiwxLjYtNi4zLDRIMjYuM1YxNy43YzAtNC41LDMuNy04LjIsOC4yLTguMg0KCQlINDZjNC41LDAsOC4yLDMuNyw4LjIsOC4yVjM1LjN6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.six {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogI2VjMzcyYTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjgsNTUuOUgxMi4yYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS45YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOFYzMGMwLDAuOC0wLjcsMS41LTEuNSwxLjUNCgkJCQlzLTEuNS0wLjctMS41LTEuNVY5LjljMC0xLTAuOC0xLjgtMS44LTEuOEgxMi4yYy0xLDAtMS44LDAuOC0xLjgsMS44djQxLjJjMCwxLDAuOCwxLjgsMS44LDEuOGgyMS42YzAuOCwwLDEuNSwwLjcsMS41LDEuNQ0KCQkJCVMzNC42LDU1LjksMzMuOCw1NS45eiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzkuNSwxOC41aC0yM2MtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDIzYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzQxLDE3LjgsNDAuMywxOC41LDM5LjUsMTguNXoNCgkJCSIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5LjUsMjcuNWgtMjNjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgyM2MwLjgsMCwxLjUsMC43LDEuNSwxLjV2MEM0MSwyNi44LDQwLjMsMjcuNSwzOS41LDI3LjV6DQoJCQkiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yOC41LDM3aC0xMmMtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDEyYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzMwLDM2LjMsMjkuMywzNywyOC41LDM3eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTQxLjgsNTFjLTQuNywwLTguNS0zLjgtOC41LTguNXMzLjgtOC41LDguNS04LjVzOC41LDMuOCw4LjUsOC41UzQ2LjQsNTEsNDEuOCw1MXogTTQxLjgsMzdjLTMsMC01LjUsMi41LTUuNSw1LjUNCgkJCXMyLjUsNS41LDUuNSw1LjVzNS41LTIuNSw1LjUtNS41UzQ0LjgsMzcsNDEuOCwzN3oiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik01MSw1Mi44Yy0wLjQsMC0wLjgtMC4xLTEuMS0wLjRsLTMuNS0zLjVjLTAuNi0wLjYtMC42LTEuNSwwLTIuMWMwLjYtMC42LDEuNS0wLjYsMi4xLDBsMy41LDMuNWMwLjYsMC42LDAuNiwxLjUsMCwyLjENCgkJCUM1MS44LDUyLjYsNTEuNCw1Mi44LDUxLDUyLjh6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=');
						}

						&.seven {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogI2VjMzcyYTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00OC45LDMzLjRoLTMuNGwwLTNoMy40YzEuNywwLDMuMS0xLjQsMy4xLTMuMVYxMS42YzAtMS43LTEuNC0zLjEtMy4xLTMuMUgxMS4xQzkuNCw4LjUsOCw5LjksOCwxMS42djE1LjcNCgkJCWMwLDEuNywxLjQsMy4xLDMuMSwzLjFoMy40djNoLTMuNGMtMy40LDAtNi4xLTIuNy02LjEtNi4xVjExLjZjMC0zLjQsMi43LTYuMSw2LjEtNi4xaDM3LjhjMy40LDAsNi4xLDIuNyw2LjEsNi4xdjE1LjcNCgkJCUM1NSwzMC42LDUyLjMsMzMuNCw0OC45LDMzLjR6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzYuNiwzMS41SDIzLjRjLTEuNSwwLTIuOC0xLjItMi44LTIuOGMwLTEuNSwxLjItMi44LDIuOC0yLjhoMTMuMmMxLjUsMCwyLjgsMS4yLDIuOCwyLjhDMzkuNCwzMC4zLDM4LjEsMzEuNSwzNi42LDMxLjUNCgkJCXogTTIzLjQsMjhjLTAuNCwwLTAuOCwwLjMtMC44LDAuOHMwLjMsMC44LDAuOCwwLjhoMTMuMmMwLjQsMCwwLjgtMC4zLDAuOC0wLjhTMzcsMjgsMzYuNiwyOEgyMy40eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM2LjYsMzkuNUgyMy40Yy0xLjUsMC0yLjgtMS4yLTIuOC0yLjhjMC0xLjUsMS4yLTIuOCwyLjgtMi44aDEzLjJjMS41LDAsMi44LDEuMiwyLjgsMi44QzM5LjQsMzguMywzOC4xLDM5LjUsMzYuNiwzOS41DQoJCQl6IE0yMy40LDM2Yy0wLjQsMC0wLjgsMC4zLTAuOCwwLjhzMC4zLDAuOCwwLjgsMC44aDEzLjJjMC40LDAsMC44LTAuMywwLjgtMC44UzM3LDM2LDM2LjYsMzZIMjMuNHoiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0xOC44LDU0LjVjLTEuMywwLTIuNy0wLjUtMy43LTEuNWMtMS40LTEuMy0yLjEtMy4xLTIuMS01VjIyLjVjMC0zLjksMy4xLTcsNy03aDIwYzMuOSwwLDcsMy4xLDcsN1Y0OA0KCQkJYzAsMS45LTAuOCwzLjctMi4xLDVjLTIuMSwyLTUuNSwyLTcuNi0wLjFsMCwwYy0wLjgtMC44LTIuMi0xLTMuMS0wLjNMMzMsNTMuM2MtMS45LDEuMi00LjIsMS4yLTYuMSwwbC0xLjEtMC43DQoJCQljLTEtMC43LTIuMy0wLjUtMy4xLDAuM0MyMS43LDU0LDIwLjIsNTQuNSwxOC44LDU0LjV6IE0yMCwxOC41Yy0yLjIsMC00LDEuOC00LDRWNDhjMCwxLjEsMC40LDIuMSwxLjIsMi45DQoJCQljMC45LDAuOSwyLjUsMC44LDMuNC0wLjFjMS44LTEuOCw0LjgtMi4xLDYuOS0wLjdsMS4xLDAuN2MwLjgsMC42LDEuOSwwLjYsMi44LDBsMS4xLTAuN2MyLjItMS40LDUuMS0xLjIsNi45LDAuN2wwLDANCgkJCWMxLDEsMi41LDEsMy40LDAuMWMwLjgtMC44LDEuMi0xLjgsMS4yLTIuOVYyMi41YzAtMi4yLTEuOC00LTQtNEgyMHoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.eight {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogI2VjMzcyYTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPGc+DQoJCQkJPHBhdGggZD0iTTMyLjEsNTZIMTAuNWMtMi42LDAtNC44LTIuMS00LjgtNC44VjEwYzAtMi42LDIuMS00LjgsNC44LTQuOEg0MmMyLjYsMCw0LjgsMi4xLDQuOCw0Ljh2MjAuMWMwLDAuOC0wLjcsMS41LTEuNSwxLjUNCgkJCQkJcy0xLjUtMC43LTEuNS0xLjVWMTBjMC0xLTAuOC0xLjgtMS44LTEuOEgxMC41Yy0xLDAtMS44LDAuOC0xLjgsMS44djQxLjJjMCwxLDAuOCwxLjgsMS44LDEuOGgyMS42YzAuOCwwLDEuNSwwLjcsMS41LDEuNQ0KCQkJCQlTMzIuOSw1NiwzMi4xLDU2eiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00Ni42LDQ1LjJINDNjLTAuNSwwLTEtMC41LTEtMWwwLDBjMC0wLjUsMC41LTEsMS0xaDMuNmMwLjUsMCwxLDAuNSwxLDFsMCwwQzQ3LjYsNDQuNyw0Ny4xLDQ1LjIsNDYuNiw0NS4yeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00Miw0NC4ydi02YzAtMC41LDAuNS0xLDEtMWwwLDBjMC41LDAsMSwwLjUsMSwxdjZjMCwwLjUtMC41LDEtMSwxbDAsMEM0Mi40LDQ1LjIsNDIsNDQuNyw0Miw0NC4yeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00My4yLDU1LjJjLTYuMSwwLTExLTQuOS0xMS0xMXM0LjktMTEsMTEtMTFzMTEsNC45LDExLDExUzQ5LjMsNTUuMiw0My4yLDU1LjJ6IE00My4yLDM1LjJjLTUsMC05LDQtOSw5czQsOSw5LDkNCgkJCQlzOS00LDktOVM0OC4yLDM1LjIsNDMuMiwzNS4yeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zMy42LDI2LjNIMTYuOGMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxNi44YzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNC40LDI2LjMsMzMuNiwyNi4zeiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTIzLjksMjYuM2MtMC41LDAtMS0wLjMtMS4zLTAuOGwtNS40LTkuM2MtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNmw1LjQsOS4zYzAuNCwwLjcsMC4yLDEuNi0wLjYsMg0KCQkJCUMyNC40LDI2LjMsMjQuMSwyNi4zLDIzLjksMjYuM3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yNi4zLDI2LjNjLTAuMywwLTAuNS0wLjEtMC43LTAuMmMtMC43LTAuNC0xLTEuMy0wLjYtMmw1LjQtOS4zYzAuNC0wLjcsMS4zLTEsMi0wLjZjMC43LDAuNCwxLDEuMywwLjYsMmwtNS40LDkuMw0KCQkJCUMyNy40LDI2LjEsMjYuOSwyNi4zLDI2LjMsMjYuM3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zMy42LDMyLjJIMTYuOGMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxNi44YzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNC40LDMyLjIsMzMuNiwzMi4yeiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI1LjIsNDEuN2MtMC44LDAtMS41LTAuNy0xLjUtMS41VjI1LjVjMC0wLjgsMC43LTEuNSwxLjUtMS41czEuNSwwLjcsMS41LDEuNXYxNC43QzI2LjcsNDEsMjYsNDEuNywyNS4yLDQxLjd6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.nine {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogI2VjMzcyYTsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjgsNTUuNEgxMi4yYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS40YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOHYyMC4xDQoJCQkJYzAsMC44LTAuNywxLjUtMS41LDEuNXMtMS41LTAuNy0xLjUtMS41VjkuNGMwLTEtMC44LTEuOC0xLjgtMS44SDEyLjJjLTEsMC0xLjgsMC44LTEuOCwxLjh2NDEuMmMwLDEsMC44LDEuOCwxLjgsMS44aDIxLjYNCgkJCQljMC44LDAsMS41LDAuNywxLjUsMS41UzM0LjYsNTUuNCwzMy44LDU1LjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00MS44LDUwLjVjLTQuNywwLTguNS0zLjgtOC41LTguNXMzLjgtOC41LDguNS04LjVzOC41LDMuOCw4LjUsOC41UzQ2LjQsNTAuNSw0MS44LDUwLjV6IE00MS44LDM2LjUNCgkJCWMtMywwLTUuNSwyLjUtNS41LDUuNXMyLjUsNS41LDUuNSw1LjVzNS41LTIuNSw1LjUtNS41UzQ0LjgsMzYuNSw0MS44LDM2LjV6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNNTEsNTIuM2MtMC40LDAtMC44LTAuMS0xLjEtMC40bC0zLjUtMy41Yy0wLjYtMC42LTAuNi0xLjUsMC0yLjFjMC42LTAuNiwxLjUtMC42LDIuMSwwbDMuNSwzLjVjMC42LDAuNiwwLjYsMS41LDAsMi4xDQoJCQlDNTEuOCw1Mi4xLDUxLjQsNTIuMyw1MSw1Mi4zeiIvPg0KCTwvZz4NCgk8Zz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzUuMywyNS43SDE4LjVjLTAuOCwwLTEuNS0wLjctMS41LTEuNXMwLjctMS41LDEuNS0xLjVoMTYuOGMwLjgsMCwxLjUsMC43LDEuNSwxLjVTMzYuMSwyNS43LDM1LjMsMjUuN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yNS42LDI1LjdjLTAuNSwwLTEtMC4zLTEuMy0wLjhsLTUuNC05LjNjLTAuNC0wLjctMC4yLTEuNiwwLjYtMmMwLjctMC40LDEuNi0wLjIsMiwwLjZsNS40LDkuM2MwLjQsMC43LDAuMiwxLjYtMC42LDINCgkJCQlDMjYuMSwyNS42LDI1LjksMjUuNywyNS42LDI1Ljd6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMjgsMjUuN2MtMC4zLDAtMC41LTAuMS0wLjctMC4yYy0wLjctMC40LTEtMS4zLTAuNi0ybDUuNC05LjNjMC40LTAuNywxLjMtMSwyLTAuNmMwLjcsMC40LDEsMS4zLDAuNiwybC01LjQsOS4zDQoJCQkJQzI5LjEsMjUuNCwyOC42LDI1LjcsMjgsMjUuN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zNS4zLDMxLjVIMTguNWMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxNi44YzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNi4xLDMxLjUsMzUuMywzMS41eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI2LjksNDFjLTAuOCwwLTEuNS0wLjctMS41LTEuNVYyNC44YzAtMC44LDAuNy0xLjUsMS41LTEuNXMxLjUsMC43LDEuNSwxLjV2MTQuN0MyOC40LDQwLjMsMjcuNyw0MSwyNi45LDQxeiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=');
						}
					}
				}

				&.finish {
					&::before {
						border-right: 1px solid #1677ff;
					}

					.chunk {
						color: #1677ff;

						&.two {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjUsNTUuNEgxMmMtMi42LDAtNC44LTIuMS00LjgtNC44VjkuNGMwLTIuNiwyLjEtNC44LDQuOC00LjhoMzEuNWMyLjYsMCw0LjgsMi4xLDQuOCw0Ljh2MjAuMWMwLDAuOC0wLjcsMS41LTEuNSwxLjUNCgkJCQlzLTEuNS0wLjctMS41LTEuNVY5LjRjMC0xLTAuOC0xLjgtMS44LTEuOEgxMmMtMSwwLTEuOCwwLjgtMS44LDEuOHY0MS4yYzAsMSwwLjgsMS44LDEuOCwxLjhoMjEuNmMwLjgsMCwxLjUsMC43LDEuNSwxLjUNCgkJCQlTMzQuNCw1NS40LDMzLjUsNTUuNHoiLz4NCgkJPC9nPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5LjIsMThoLTIzYy0wLjgsMC0xLjUtMC43LTEuNS0xLjV2MGMwLTAuOCwwLjctMS41LDEuNS0xLjVoMjNjMC44LDAsMS41LDAuNywxLjUsMS41djBDNDAuNywxNy4zLDQwLDE4LDM5LjIsMTh6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzkuMiwyN2gtMjNjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgyM2MwLjgsMCwxLjUsMC43LDEuNSwxLjV2MEM0MC43LDI2LjMsNDAsMjcsMzkuMiwyN3oiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00OCw0NC41aC0zLjZjLTAuNSwwLTEtMC41LTEtMWwwLDBjMC0wLjUsMC41LTEsMS0xSDQ4YzAuNSwwLDEsMC41LDEsMWwwLDBDNDksNDQsNDguNSw0NC41LDQ4LDQ0LjV6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNNDMuNCw0My41di02YzAtMC41LDAuNS0xLDEtMWwwLDBjMC41LDAsMSwwLjUsMSwxdjZjMCwwLjUtMC40LDEtMSwxbDAsMEM0My45LDQ0LjUsNDMuNCw0NCw0My40LDQzLjV6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjguMiwzNi41aC0xMmMtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDEyYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzI5LjcsMzUuOCwyOSwzNi41LDI4LjIsMzYuNXoNCgkJCSIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTQ0LjcsNTQuNWMtNi4xLDAtMTEtNC45LTExLTExczQuOS0xMSwxMS0xMXMxMSw0LjksMTEsMTFTNTAuOCw1NC41LDQ0LjcsNTQuNXogTTQ0LjcsMzQuNWMtNSwwLTksNC05LDlzNCw5LDksOXM5LTQsOS05DQoJCQlTNDkuNiwzNC41LDQ0LjcsMzQuNXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.three {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yOS44LDUzLjlDMjEuNyw1My45LDguMyw0Myw4LjMsMzEuNFYxNWMwLTAuOCwwLjMtMS41LDEtMmMwLjYtMC41LDEuNC0wLjcsMi4xLTAuNWMxLjEsMC4yLDIuMywwLjQsMy40LDAuNA0KCQkJYzUuNCwwLDEwLjQtMi42LDEzLjUtN2MwLjItMC4yLDAuNC0wLjUsMC43LTAuNmwwLDBjMC41LTAuMywxLjItMC4zLDEuNywwbDAsMGMwLjMsMC4xLDAuNSwwLjMsMC42LDAuNmMzLjEsNC40LDguMSw3LDEzLjUsNw0KCQkJYzEuMSwwLDIuMy0wLjEsMy40LTAuNGMwLjgtMC4yLDEuNSwwLDIuMSwwLjVjMC42LDAuNSwxLDEuMiwxLDJ2MTYuNEM1MS4zLDQzLDM3LjgsNTMuOSwyOS44LDUzLjl6IE0xMS4zLDE1LjZ2MTUuOA0KCQkJYzAsMTAuMywxMi42LDE5LjUsMTguNSwxOS41czE4LjUtOS4yLDE4LjUtMTkuNVYxNS42Yy0xLjIsMC4yLTIuMywwLjMtMy41LDAuM2MtNS44LDAtMTEuMy0yLjYtMTUtN2MtMy43LDQuNC05LjIsNy0xNSw3DQoJCQlDMTMuNiwxNS45LDEyLjQsMTUuOCwxMS4zLDE1LjZ6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zNi4zLDMwLjdIMjMuMmMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxMy4xYzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNy4yLDMwLjcsMzYuMywzMC43eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI4LjgsMzAuN2MtMC41LDAtMS0wLjMtMS4zLTAuOGwtNC4yLTcuNGMtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNmw0LjIsNy40YzAuNCwwLjcsMC4yLDEuNi0wLjYsMg0KCQkJCUMyOS4zLDMwLjcsMjksMzAuNywyOC44LDMwLjd6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzAuNywzMC43Yy0wLjMsMC0wLjUtMC4xLTAuNy0wLjJjLTAuNy0wLjQtMS0xLjMtMC42LTJsNC4yLTcuNGMwLjQtMC43LDEuMy0xLDItMC42YzAuNywwLjQsMSwxLjMsMC42LDJMMzIsMzANCgkJCQlDMzEuNywzMC41LDMxLjIsMzAuNywzMC43LDMwLjd6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzYuMywzNS43SDIzLjJjLTAuOCwwLTEuNS0wLjctMS41LTEuNXMwLjctMS41LDEuNS0xLjVoMTMuMWMwLjgsMCwxLjUsMC43LDEuNSwxLjVTMzcuMiwzNS43LDM2LjMsMzUuN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yOS44LDQxLjRjLTAuOCwwLTEuNS0wLjctMS41LTEuNVYyOS44YzAtMC44LDAuNy0xLjUsMS41LTEuNXMxLjUsMC43LDEuNSwxLjV2MTAuMUMzMS4zLDQwLjcsMzAuNiw0MS40LDI5LjgsNDEuNHoiLz4NCgkJPC9nPg0KCTwvZz4NCjwvZz4NCjwvc3ZnPg0K');
						}

						&.four {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTM2LjUsMjkuOEgyMy40Yy0wLjgsMC0xLjUtMC43LTEuNS0xLjVzMC43LTEuNSwxLjUtMS41aDEzLjFjMC44LDAsMS41LDAuNywxLjUsMS41UzM3LjQsMjkuOCwzNi41LDI5Ljh6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMjksMjkuOGMtMC41LDAtMS0wLjMtMS4zLTAuOGwtNC4yLTcuNGMtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNmw0LjIsNy40YzAuNCwwLjcsMC4yLDEuNi0wLjYsMg0KCQkJCUMyOS41LDI5LjcsMjkuMiwyOS44LDI5LDI5Ljh6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzAuOSwyOS44Yy0wLjMsMC0wLjUtMC4xLTAuNy0wLjJjLTAuNy0wLjQtMS0xLjMtMC42LTJsNC4yLTcuNGMwLjQtMC43LDEuMy0xLDItMC42YzAuNywwLjQsMSwxLjMsMC42LDJMMzIuMiwyOQ0KCQkJCUMzMS45LDI5LjUsMzEuNCwyOS44LDMwLjksMjkuOHoiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zNi41LDM0LjdIMjMuNGMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxMy4xYzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNy40LDM0LjcsMzYuNSwzNC43eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMwLDQwLjRjLTAuOCwwLTEuNS0wLjctMS41LTEuNVYyOC44YzAtMC44LDAuNy0xLjUsMS41LTEuNXMxLjUsMC43LDEuNSwxLjV2MTAuMUMzMS41LDM5LjcsMzAuOCw0MC40LDMwLDQwLjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPHBhdGggZD0iTTUwLjEsMzdjLTAuNy0wLjctMS42LTEuMy0yLjYtMS43Yy0xLTAuNC0yLjEtMC43LTMuMy0wLjdjLTQuNywwLTguNSwzLjgtOC41LDguNWMwLDEuNywwLjUsMy40LDEuNCw0LjcNCgkJYzAuNiwwLjksMS4zLDEuNiwyLjIsMi4yYzEuNCwxLDMuMSwxLjYsNC45LDEuNmM0LjcsMCw4LjUtMy44LDguNS04LjVDNTIuOCw0MC43LDUxLjcsMzguNiw1MC4xLDM3eiBNNDQuMyw0OC43DQoJCWMtMC44LDAtMS42LTAuMi0yLjMtMC41Yy0xLTAuNC0xLjgtMS4yLTIuMy0yYy0wLjUtMC45LTAuOS0xLjktMC45LTNjMC0zLDIuNS01LjUsNS41LTUuNWMwLjgsMCwxLjUsMC4yLDIuMSwwLjQNCgkJYzEsMC40LDEuOCwxLjEsMi40LDEuOWMwLjYsMC45LDEsMiwxLDMuMkM0OS44LDQ2LjIsNDcuMyw0OC43LDQ0LjMsNDguN3oiLz4NCgk8Zz4NCgkJPHBhdGggZD0iTTUzLjgsNTMuN2MtMC40LDAtMC44LTAuMS0xLjEtMC40bC0zLjUtMy41Yy0wLjYtMC42LTAuNi0xLjUsMC0yLjFjMC42LTAuNiwxLjUtMC42LDIuMSwwbDMuNSwzLjVjMC42LDAuNiwwLjYsMS41LDAsMi4xDQoJCQlDNTQuNSw1My41LDU0LjIsNTMuNyw1My44LDUzLjd6Ii8+DQoJPC9nPg0KCTxwYXRoIGQ9Ik0zNS42LDUwLjRjLTAuNC0wLjUtMS4xLTAuNy0xLjctMC40Yy0xLjUsMC42LTIuOCwxLTQsMWMtNS45LDAtMTguNS05LjItMTguNS0xOS41VjE1LjZjMS4yLDAuMiwyLjMsMC4zLDMuNSwwLjMNCgkJYzUuOCwwLDExLjMtMi42LDE1LTdjMy43LDQuNCw5LjIsNywxNSw3YzEuMiwwLDIuMy0wLjEsMy41LTAuM3YxNS44YzAsMC4xLDAsMC4yLDAsMC4zYzAsMC42LDAuMywxLjEsMC44LDEuNGMwLDAsMCwwLDAsMA0KCQljMSwwLjUsMi4yLTAuMiwyLjItMS4zYzAtMC4xLDAtMC4zLDAtMC40VjE1YzAtMC44LTAuMy0xLjUtMS0yYy0wLjYtMC41LTEuNC0wLjctMi4xLTAuNWMtMS4xLDAuMi0yLjMsMC40LTMuNCwwLjQNCgkJYy01LjQsMC0xMC40LTIuNi0xMy41LTdjLTAuMi0wLjItMC40LTAuNC0wLjYtMC42Yy0wLjUtMC4zLTEuMi0wLjMtMS43LDBsMCwwYy0wLjMsMC4xLTAuNSwwLjMtMC43LDAuNmMtMy4xLDQuNC04LjEsNy0xMy41LDcNCgkJYy0xLjEsMC0yLjMtMC4xLTMuNC0wLjRjLTAuOC0wLjItMS41LDAtMi4xLDAuNWMtMC42LDAuNS0xLDEuMi0xLDJ2MTYuNEM4LjUsNDMsMjEuOSw1My45LDMwLDUzLjljMS42LDAsMy4zLTAuNCw1LjEtMS4xDQoJCUMzNiw1Mi40LDM2LjMsNTEuMiwzNS42LDUwLjRDMzUuNyw1MC40LDM1LjYsNTAuNCwzNS42LDUwLjR6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.five {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggZD0iTTQ2LDYuNUgzNC41Yy01LjQsMC0xMCwzLjktMTEsOWgtOC43Yy0xLjUsMC0yLjksMC43LTMuNywyTDMuNSwyOC43Yy0wLjUsMC43LTAuOCwxLjYtMC44LDIuNVY0MmMwLDIuNSwyLDQuNSw0LjUsNC41aDAuNg0KCQljMC4zLDMuNiwzLjMsNi41LDcsNi41czYuNy0yLjksNy02LjVoMS41aDFoMTVjMCwzLjksMy4xLDcsNyw3czctMy4xLDctN2MwLTAuOC0wLjEtMS42LTAuNC0yLjNjMi43LTIuMSw0LjQtNS40LDQuNC04LjlWMTcuNw0KCQlDNTcuMywxMS41LDUyLjIsNi41LDQ2LDYuNXogTTEzLjYsMTkuMWMwLjMtMC40LDAuNy0wLjYsMS4yLTAuNmgyLjV2Ny43YzAsMS42LTEuMywyLjgtMi44LDIuOEg2LjlMMTMuNiwxOS4xeiBNMTQuOCw1MA0KCQljLTIuMiwwLTQtMS44LTQtNHMxLjgtNCw0LTRzNCwxLjgsNCw0UzE3LDUwLDE0LjgsNTB6IE0yMS4zLDQzLjVjLTEtMi42LTMuNi00LjUtNi41LTQuNXMtNS41LDEuOS02LjUsNC41aC0xDQoJCWMtMC44LDAtMS41LTAuNy0xLjUtMS41VjMyaDguN2MzLjIsMCw1LjgtMi42LDUuOC01Ljh2LTcuN2gzdjI1SDIxLjN6IE00Ni4zLDUwLjVjLTIuMiwwLTQtMS44LTQtNHMxLjgtNCw0LTRzNCwxLjgsNCw0DQoJCVM0OC41LDUwLjUsNDYuMyw1MC41eiBNNTQuMywzNS4zYzAsMi40LTEuMSw0LjgtMyw2LjNjLTEuMy0xLjMtMy0yLjEtNS0yLjFjLTIuOCwwLTUuMiwxLjYtNi4zLDRIMjYuM1YxNy43YzAtNC41LDMuNy04LjIsOC4yLTguMg0KCQlINDZjNC41LDAsOC4yLDMuNyw4LjIsOC4yVjM1LjN6Ii8+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.six {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjgsNTUuOUgxMi4yYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS45YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOFYzMGMwLDAuOC0wLjcsMS41LTEuNSwxLjUNCgkJCQlzLTEuNS0wLjctMS41LTEuNVY5LjljMC0xLTAuOC0xLjgtMS44LTEuOEgxMi4yYy0xLDAtMS44LDAuOC0xLjgsMS44djQxLjJjMCwxLDAuOCwxLjgsMS44LDEuOGgyMS42YzAuOCwwLDEuNSwwLjcsMS41LDEuNQ0KCQkJCVMzNC42LDU1LjksMzMuOCw1NS45eiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzkuNSwxOC41aC0yM2MtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDIzYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzQxLDE3LjgsNDAuMywxOC41LDM5LjUsMTguNXoNCgkJCSIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5LjUsMjcuNWgtMjNjLTAuOCwwLTEuNS0wLjctMS41LTEuNXYwYzAtMC44LDAuNy0xLjUsMS41LTEuNWgyM2MwLjgsMCwxLjUsMC43LDEuNSwxLjV2MEM0MSwyNi44LDQwLjMsMjcuNSwzOS41LDI3LjV6DQoJCQkiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yOC41LDM3aC0xMmMtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDEyYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzMwLDM2LjMsMjkuMywzNywyOC41LDM3eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTQxLjgsNTFjLTQuNywwLTguNS0zLjgtOC41LTguNXMzLjgtOC41LDguNS04LjVzOC41LDMuOCw4LjUsOC41UzQ2LjQsNTEsNDEuOCw1MXogTTQxLjgsMzdjLTMsMC01LjUsMi41LTUuNSw1LjUNCgkJCXMyLjUsNS41LDUuNSw1LjVzNS41LTIuNSw1LjUtNS41UzQ0LjgsMzcsNDEuOCwzN3oiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik01MSw1Mi44Yy0wLjQsMC0wLjgtMC4xLTEuMS0wLjRsLTMuNS0zLjVjLTAuNi0wLjYtMC42LTEuNSwwLTIuMWMwLjYtMC42LDEuNS0wLjYsMi4xLDBsMy41LDMuNWMwLjYsMC42LDAuNiwxLjUsMCwyLjENCgkJCUM1MS44LDUyLjYsNTEuNCw1Mi44LDUxLDUyLjh6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=');
						}

						&.seven {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00OC45LDMzLjRoLTMuNGwwLTNoMy40YzEuNywwLDMuMS0xLjQsMy4xLTMuMVYxMS42YzAtMS43LTEuNC0zLjEtMy4xLTMuMUgxMS4xQzkuNCw4LjUsOCw5LjksOCwxMS42djE1LjcNCgkJCWMwLDEuNywxLjQsMy4xLDMuMSwzLjFoMy40djNoLTMuNGMtMy40LDAtNi4xLTIuNy02LjEtNi4xVjExLjZjMC0zLjQsMi43LTYuMSw2LjEtNi4xaDM3LjhjMy40LDAsNi4xLDIuNyw2LjEsNi4xdjE1LjcNCgkJCUM1NSwzMC42LDUyLjMsMzMuNCw0OC45LDMzLjR6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNMzYuNiwzMS41SDIzLjRjLTEuNSwwLTIuOC0xLjItMi44LTIuOGMwLTEuNSwxLjItMi44LDIuOC0yLjhoMTMuMmMxLjUsMCwyLjgsMS4yLDIuOCwyLjhDMzkuNCwzMC4zLDM4LjEsMzEuNSwzNi42LDMxLjUNCgkJCXogTTIzLjQsMjhjLTAuNCwwLTAuOCwwLjMtMC44LDAuOHMwLjMsMC44LDAuOCwwLjhoMTMuMmMwLjQsMCwwLjgtMC4zLDAuOC0wLjhTMzcsMjgsMzYuNiwyOEgyMy40eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM2LjYsMzkuNUgyMy40Yy0xLjUsMC0yLjgtMS4yLTIuOC0yLjhjMC0xLjUsMS4yLTIuOCwyLjgtMi44aDEzLjJjMS41LDAsMi44LDEuMiwyLjgsMi44QzM5LjQsMzguMywzOC4xLDM5LjUsMzYuNiwzOS41DQoJCQl6IE0yMy40LDM2Yy0wLjQsMC0wLjgsMC4zLTAuOCwwLjhzMC4zLDAuOCwwLjgsMC44aDEzLjJjMC40LDAsMC44LTAuMywwLjgtMC44UzM3LDM2LDM2LjYsMzZIMjMuNHoiLz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0xOC44LDU0LjVjLTEuMywwLTIuNy0wLjUtMy43LTEuNWMtMS40LTEuMy0yLjEtMy4xLTIuMS01VjIyLjVjMC0zLjksMy4xLTcsNy03aDIwYzMuOSwwLDcsMy4xLDcsN1Y0OA0KCQkJYzAsMS45LTAuOCwzLjctMi4xLDVjLTIuMSwyLTUuNSwyLTcuNi0wLjFsMCwwYy0wLjgtMC44LTIuMi0xLTMuMS0wLjNMMzMsNTMuM2MtMS45LDEuMi00LjIsMS4yLTYuMSwwbC0xLjEtMC43DQoJCQljLTEtMC43LTIuMy0wLjUtMy4xLDAuM0MyMS43LDU0LDIwLjIsNTQuNSwxOC44LDU0LjV6IE0yMCwxOC41Yy0yLjIsMC00LDEuOC00LDRWNDhjMCwxLjEsMC40LDIuMSwxLjIsMi45DQoJCQljMC45LDAuOSwyLjUsMC44LDMuNC0wLjFjMS44LTEuOCw0LjgtMi4xLDYuOS0wLjdsMS4xLDAuN2MwLjgsMC42LDEuOSwwLjYsMi44LDBsMS4xLTAuN2MyLjItMS40LDUuMS0xLjIsNi45LDAuN2wwLDANCgkJCWMxLDEsMi41LDEsMy40LDAuMWMwLjgtMC44LDEuMi0xLjgsMS4yLTIuOVYyMi41YzAtMi4yLTEuOC00LTQtNEgyMHoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.eight {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPGc+DQoJCQkJPHBhdGggZD0iTTMyLjEsNTZIMTAuNWMtMi42LDAtNC44LTIuMS00LjgtNC44VjEwYzAtMi42LDIuMS00LjgsNC44LTQuOEg0MmMyLjYsMCw0LjgsMi4xLDQuOCw0Ljh2MjAuMWMwLDAuOC0wLjcsMS41LTEuNSwxLjUNCgkJCQkJcy0xLjUtMC43LTEuNS0xLjVWMTBjMC0xLTAuOC0xLjgtMS44LTEuOEgxMC41Yy0xLDAtMS44LDAuOC0xLjgsMS44djQxLjJjMCwxLDAuOCwxLjgsMS44LDEuOGgyMS42YzAuOCwwLDEuNSwwLjcsMS41LDEuNQ0KCQkJCQlTMzIuOSw1NiwzMi4xLDU2eiIvPg0KCQkJPC9nPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00Ni42LDQ1LjJINDNjLTAuNSwwLTEtMC41LTEtMWwwLDBjMC0wLjUsMC41LTEsMS0xaDMuNmMwLjUsMCwxLDAuNSwxLDFsMCwwQzQ3LjYsNDQuNyw0Ny4xLDQ1LjIsNDYuNiw0NS4yeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00Miw0NC4ydi02YzAtMC41LDAuNS0xLDEtMWwwLDBjMC41LDAsMSwwLjUsMSwxdjZjMCwwLjUtMC41LDEtMSwxbDAsMEM0Mi40LDQ1LjIsNDIsNDQuNyw0Miw0NC4yeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00My4yLDU1LjJjLTYuMSwwLTExLTQuOS0xMS0xMXM0LjktMTEsMTEtMTFzMTEsNC45LDExLDExUzQ5LjMsNTUuMiw0My4yLDU1LjJ6IE00My4yLDM1LjJjLTUsMC05LDQtOSw5czQsOSw5LDkNCgkJCQlzOS00LDktOVM0OC4yLDM1LjIsNDMuMiwzNS4yeiIvPg0KCQk8L2c+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zMy42LDI2LjNIMTYuOGMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxNi44YzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNC40LDI2LjMsMzMuNiwyNi4zeiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTIzLjksMjYuM2MtMC41LDAtMS0wLjMtMS4zLTAuOGwtNS40LTkuM2MtMC40LTAuNy0wLjItMS42LDAuNi0yYzAuNy0wLjQsMS42LTAuMiwyLDAuNmw1LjQsOS4zYzAuNCwwLjcsMC4yLDEuNi0wLjYsMg0KCQkJCUMyNC40LDI2LjMsMjQuMSwyNi4zLDIzLjksMjYuM3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yNi4zLDI2LjNjLTAuMywwLTAuNS0wLjEtMC43LTAuMmMtMC43LTAuNC0xLTEuMy0wLjYtMmw1LjQtOS4zYzAuNC0wLjcsMS4zLTEsMi0wLjZjMC43LDAuNCwxLDEuMywwLjYsMmwtNS40LDkuMw0KCQkJCUMyNy40LDI2LjEsMjYuOSwyNi4zLDI2LjMsMjYuM3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zMy42LDMyLjJIMTYuOGMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxNi44YzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNC40LDMyLjIsMzMuNiwzMi4yeiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI1LjIsNDEuN2MtMC44LDAtMS41LTAuNy0xLjUtMS41VjI1LjVjMC0wLjgsMC43LTEuNSwxLjUtMS41czEuNSwwLjcsMS41LDEuNXYxNC43QzI2LjcsNDEsMjYsNDEuNywyNS4yLDQxLjd6Ii8+DQoJCTwvZz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
						}

						&.nine {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjgsNTUuNEgxMi4yYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS40YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOHYyMC4xDQoJCQkJYzAsMC44LTAuNywxLjUtMS41LDEuNXMtMS41LTAuNy0xLjUtMS41VjkuNGMwLTEtMC44LTEuOC0xLjgtMS44SDEyLjJjLTEsMC0xLjgsMC44LTEuOCwxLjh2NDEuMmMwLDEsMC44LDEuOCwxLjgsMS44aDIxLjYNCgkJCQljMC44LDAsMS41LDAuNywxLjUsMS41UzM0LjYsNTUuNCwzMy44LDU1LjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik00MS44LDUwLjVjLTQuNywwLTguNS0zLjgtOC41LTguNXMzLjgtOC41LDguNS04LjVzOC41LDMuOCw4LjUsOC41UzQ2LjQsNTAuNSw0MS44LDUwLjV6IE00MS44LDM2LjUNCgkJCWMtMywwLTUuNSwyLjUtNS41LDUuNXMyLjUsNS41LDUuNSw1LjVzNS41LTIuNSw1LjUtNS41UzQ0LjgsMzYuNSw0MS44LDM2LjV6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNNTEsNTIuM2MtMC40LDAtMC44LTAuMS0xLjEtMC40bC0zLjUtMy41Yy0wLjYtMC42LTAuNi0xLjUsMC0yLjFjMC42LTAuNiwxLjUtMC42LDIuMSwwbDMuNSwzLjVjMC42LDAuNiwwLjYsMS41LDAsMi4xDQoJCQlDNTEuOCw1Mi4xLDUxLjQsNTIuMyw1MSw1Mi4zeiIvPg0KCTwvZz4NCgk8Zz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMzUuMywyNS43SDE4LjVjLTAuOCwwLTEuNS0wLjctMS41LTEuNXMwLjctMS41LDEuNS0xLjVoMTYuOGMwLjgsMCwxLjUsMC43LDEuNSwxLjVTMzYuMSwyNS43LDM1LjMsMjUuN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yNS42LDI1LjdjLTAuNSwwLTEtMC4zLTEuMy0wLjhsLTUuNC05LjNjLTAuNC0wLjctMC4yLTEuNiwwLjYtMmMwLjctMC40LDEuNi0wLjIsMiwwLjZsNS40LDkuM2MwLjQsMC43LDAuMiwxLjYtMC42LDINCgkJCQlDMjYuMSwyNS42LDI1LjksMjUuNywyNS42LDI1Ljd6Ii8+DQoJCTwvZz4NCgkJPGc+DQoJCQk8cGF0aCBkPSJNMjgsMjUuN2MtMC4zLDAtMC41LTAuMS0wLjctMC4yYy0wLjctMC40LTEtMS4zLTAuNi0ybDUuNC05LjNjMC40LTAuNywxLjMtMSwyLTAuNmMwLjcsMC40LDEsMS4zLDAuNiwybC01LjQsOS4zDQoJCQkJQzI5LjEsMjUuNCwyOC42LDI1LjcsMjgsMjUuN3oiLz4NCgkJPC9nPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0zNS4zLDMxLjVIMTguNWMtMC44LDAtMS41LTAuNy0xLjUtMS41czAuNy0xLjUsMS41LTEuNWgxNi44YzAuOCwwLDEuNSwwLjcsMS41LDEuNVMzNi4xLDMxLjUsMzUuMywzMS41eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTI2LjksNDFjLTAuOCwwLTEuNS0wLjctMS41LTEuNVYyNC44YzAtMC44LDAuNy0xLjUsMS41LTEuNXMxLjUsMC43LDEuNSwxLjV2MTQuN0MyOC40LDQwLjMsMjcuNyw0MSwyNi45LDQxeiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=');
						}

						&.ten {
							background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDYwIDYwIiBzdHlsZT0iZmlsbDogIzE2NzdGRjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTMzLjgsNTUuNEgxMi4yYy0yLjYsMC00LjgtMi4xLTQuOC00LjhWOS40YzAtMi42LDIuMS00LjgsNC44LTQuOGgzMS41YzIuNiwwLDQuOCwyLjEsNC44LDQuOHYyMC4xDQoJCQkJYzAsMC44LTAuNywxLjUtMS41LDEuNXMtMS41LTAuNy0xLjUtMS41VjkuNGMwLTEtMC44LTEuOC0xLjgtMS44SDEyLjJjLTEsMC0xLjgsMC44LTEuOCwxLjh2NDEuMmMwLDEsMC44LDEuOCwxLjgsMS44aDIxLjYNCgkJCQljMC44LDAsMS41LDAuNywxLjUsMS41UzM0LjYsNTUuNCwzMy44LDU1LjR6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0zOS41LDE4aC0yM2MtMC44LDAtMS41LTAuNy0xLjUtMS41djBjMC0wLjgsMC43LTEuNSwxLjUtMS41aDIzYzAuOCwwLDEuNSwwLjcsMS41LDEuNXYwQzQxLDE3LjMsNDAuMywxOCwzOS41LDE4eiIvPg0KCTwvZz4NCgk8Zz4NCgkJPHBhdGggZD0iTTM5LjUsMjdoLTIzYy0wLjgsMC0xLjUtMC43LTEuNS0xLjV2MGMwLTAuOCwwLjctMS41LDEuNS0xLjVoMjNjMC44LDAsMS41LDAuNywxLjUsMS41djBDNDEsMjYuMyw0MC4zLDI3LDM5LjUsMjd6Ii8+DQoJPC9nPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik00My4xLDQ3LjRsLTIuOC0yLjhjLTAuNC0wLjQtMC40LTEsMC0xLjR2MGMwLjQtMC40LDEtMC40LDEuNCwwbDIuOCwyLjhjMC40LDAuNCwwLjQsMSwwLDEuNGgwDQoJCQkJQzQ0LjIsNDcuOCw0My41LDQ3LjgsNDMuMSw0Ny40eiIvPg0KCQk8L2c+DQoJCTxnPg0KCQkJPHBhdGggZD0iTTQzLjEsNDZsNi4xLTYuMWMwLjQtMC40LDEtMC40LDEuNCwwbDAsMGMwLjQsMC40LDAuNCwxLDAsMS40bC02LjEsNi4xYy0wLjQsMC40LTEsMC40LTEuNCwwbDAsMA0KCQkJCUM0Mi44LDQ3LjEsNDIuOCw0Ni40LDQzLjEsNDZ6Ii8+DQoJCTwvZz4NCgk8L2c+DQoJPGc+DQoJCTxwYXRoIGQ9Ik0yOC41LDM2LjVoLTEyYy0wLjgsMC0xLjUtMC43LTEuNS0xLjV2MGMwLTAuOCwwLjctMS41LDEuNS0xLjVoMTJjMC44LDAsMS41LDAuNywxLjUsMS41djBDMzAsMzUuOCwyOS4zLDM2LjUsMjguNSwzNi41eg0KCQkJIi8+DQoJPC9nPg0KCTxnPg0KCQk8cGF0aCBkPSJNNDQuOSw1NC41Yy02LjEsMC0xMS00LjktMTEtMTFzNC45LTExLDExLTExczExLDQuOSwxMSwxMVM1MSw1NC41LDQ0LjksNTQuNXogTTQ0LjksMzQuNWMtNSwwLTksNC05LDlzNCw5LDksOXM5LTQsOS05DQoJCQlTNDkuOSwzNC41LDQ0LjksMzQuNXoiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4NCg==');
						}
					}
				}
			}
		}
	}

	.reconciliation-popup {
		background-color: #fff;
		border-radius: 20rpx;
		width: 600rpx;

		.box {
			padding: 50rpx 30rpx 30rpx;

			.title {
				font-size: 28rpx;
				color: #B60001;
				text-align: center;
			}

			.message {
				margin-top: 30rpx;
				border: 1rpx solid #eee;
				padding: 10rpx;
				box-sizing: border-box;
				border-radius: 20rpx;

				.input {
					width: 100%;
					height: 220rpx;
					font-size: 13px;
					color: #B60001;
				}
			}
		}

		.bnt-box {
			border-top: 1rpx solid #eee;
			display: flex;

			.btn {
				width: 50%;
				height: 100rpx;
				font-size: 14px;
				text-align: center;
				line-height: 100rpx;

				&.cancel {
					color: #333;
					border-right: 1rpx solid #eee;
				}

				&.confirm {
					color: #007aff;
				}
			}
		}
	}

	.reconciliation-red {
		color: #DE0000;
	}
	.reconciliation-green {
		color: #03d97d;
	}

	.physicalInvoice-input {
		// margin-top: 20rpx;

		/deep/ .uni-list-item__container {
			padding: 12px 0 !important;
			align-items: center;
		}

		.deposit-value {
			text-align: right;
		}

		/deep/ .uni-list-item__extra-text {
			font-size: 14px !important;
			color: #99A0AF !important;
		}
	}

	.account-statement {
		border-radius: 20rpx 20rpx 0 0;
		background-color: #fff;
		padding: 30rpx;

		.account-title {
			font-size: 16px;
			color: #B60001;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}

		.account-box {
			max-height: 60vh;
			overflow-y: auto;
			margin-top: 30rpx;

			.account {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 30rpx 0;
				border-top: 1rpx solid #eee;

				.left {
					.title {
						font-size: 28rpx;
						color: #B60001;
					}

					.message {
						font-size: 26rpx;
						color: #B60001;
						margin: 10rpx 0;
					}

					.date {
						font-size: 12px;
						color: #99A0AF;
					}
				}

				.chsoe {
					flex: none;
					padding-left: 20rpx;
					font-size: 14px;
					color: #B60001;

					&.disadled {
						color: #ccc;
					}
				}
			}
		}
	}

	.product-invoice-input {
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		color: #3b4144;

		.value {
			text-align: right;
		}
	}

	.btn-btm {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 0 30rpx;
	}

	.button {
		&.red {
			background-color: #DE0000;
		}

		&.orange {
			background-color: #F36E03;
		}

		&.blue {
			background-color: #B60001;
		}

		&.yellow {
			background-color: #dfc803;
		}

		&.green {
			background-color: #03d97d;
		}

		&::after {
			border-radius: 0;
			border: 0;
		}
	}
</style>