/*upgrade*/
.payment-container {
	border: 1px solid #dcdddf;
	border-radius: 5px;
	padding: 20px 20px 20px 50px;
	text-align: left;
	transition: border-color 0.3s ease;
	min-height: 390px;
}
.payment-container.alipay {
	border-color: #1a57ff;
}
.payment-container.wechat {
	border-color: #07c160;
}
.payment-container.bank {
	border-color: #dc3545;
}
.qr-code-container {
	display: none;
	text-align: left;
	position: relative; /* For overlay positioning */
}
.qr-code-container.active {
	display: block;
}
.qr-code-container img {
	max-width: 222px;
	border: 1px solid #dcdddf;
	border-radius: 5px;
	display: none;
}
.qr-code-container img.loaded {
	display: block;
}
.qr-code-placeholder {
	width: 222px;
	height: 222px;
	line-height: 222px;
	border: 1px solid #dcdddf;
	border-radius: 5px;
	background: #f5f5f5;
	color: #666;
	font-size: 16px;
	text-align: center;
	display: block;
}
.qr-code-placeholder.hidden {
	display: none;
}
.qr-code-overlay {
	position: absolute;
	top: 61px;
	margin-left: 1px;
	width: 222px; /* Match QR code container width */
	height: 222px; /* Match QR code container height */
	display: none;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
	border-radius: 5px;
	opacity: 0.9;
}
.qr-code-overlay.waiting {
	background: #ffd377; /* Yellow for waiting */
	color: #814600;
}
.qr-code-overlay.success {
	background: #ff0000; /* Red for success */
}
.qr-code-overlay.active {
	display: flex;
}
.show-table-btn {
	background: #ffffff;
	border: 1px solid #dcdddf;
	padding: 5px 10px;
	border-radius: 5px;
	cursor: pointer;
	font-size: 14px;
	margin-right: 10px;
	float: right;
	margin-top: 8px;
}
.show-table-btn:hover {
	background: #f0f0f0;
}
.error-message {
	color: red;
	font-size: 14px;
	margin-top: 10px;
}
.payment-options {
	margin: 0 0 0 50px;
	text-align: left;
	display: none;
}
.payment-options.active {
	display: flex;
}
.payment-option-btn {
	background: #ffffff;
	border: 1px solid #dcdddf;
	padding: 10px 20px;
	border-radius: 20px;
	cursor: pointer;
	font-size: 14px;
	margin: 0 20px 5px 10px;
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, top 0.3s ease;
}
.payment-option-btn svg {
	width: 1.5em;
	height: 1.5em;
	vertical-align: -0.2em;
	fill: currentColor;
	overflow: hidden;
	text-align: center;
	float: left;
	margin-right: 7px;
	margin-top: 0px;
}

.payment-option-btn:hover:not(.active) {
	background: #f1f2f3;
}

.payment-option-btn.alipay.active {
	background: #ffffff;
	border-color: #1a57ff;
	border-bottom: 1px solid white;
	color: #1a57ff;
	position: relative;
	bottom: -6px;
	border-radius: 5px 5px 0 0;
	font-weight: bold;
}
.payment-option-btn.wechat.active {
	background: #ffffff;
	border-color: #07c160;
	border-bottom: 1px solid white;
	color: #07c160;
	position: relative;
	bottom: -6px;
	border-radius: 5px 5px 0 0;
	font-weight: bold;
}
.payment-option-btn.bank.active {
	background: #ffffff;
	border-color: #dc3545;
	border-bottom: 1px solid white;
	color: #dc3545;
	position: relative;
	bottom: -6px;
	border-radius: 5px 5px 0 0;
	font-weight: bold;
}
.bank-details {
	display: none;
	text-align: left;
	padding: 0 0 10px 0;
}
.bank-details.active {
	display: block;
}
.upgrade-status {
	height: 44px;
	line-height: 44px;
	border-radius: 5px;
	background: linear-gradient(to right, #ffebcd, #ffd377);
	color: #814600;
	display: block;
	width: 222px;
	text-align: center;
}

#bankPaymentAmount
{
	color:#d9241d;
	margin-left: 20px;
}
/*upgrade*/

/*finance*/
.finance .li {
	color: #121212;
	width: 100%;
	font-size: 14px;
	display: flex;
	align-items: center;
}

.finance .blank,.keybox .blank,.bidding .blank {
	width: 100%;
	margin: 0 auto;
	text-align: center;
	margin: 30px 0 30px 0;
}

.finance .nav {
	background: #ebecef;
	border-radius: 5px 5px 0 0;
}

.finance .odd {
	background: #f9f9f9;
	border-top: 1px solid #f9f9f9;
	border-bottom: 1px solid #f9f9f9;
}

.finance .even {
	background: #ffffff;
	border-top: 1px solid #ffffff;
	border-bottom: 1px solid #ffffff;
}

.finance .odd:hover, .finance .even:hover {
	background: #eff4fb;
	border-bottom: 1px solid #88a9d2;
}

.finance .li .row {
	padding: 12px 15px 12px 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.finance .li .id {
	width: 50px;
}

.finance .sm {
	font-size: 12px;
}

.finance .li .type {
	width: 50px;
}

.finance .li .amount {
	width:100px;
}


.finance .li .balance {
	width: 120px;
	text-align: left;
}

.finance .li .end {
	color: #121212;
	flex: 1;
	width: 95%;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
}

.finance .li .time {
	width: 150px;
	text-align: left;
}

.finance .li a {
	display: inline-block;
	margin: 0 0 0 5px;
	padding: 5px 10px;
	font-size: 12px;
	border-radius: 3px;
	border: none;
	color: white;
	text-decoration: none;
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.finance .li a:hover {
	opacity: 0.9;
}

.finance .li .edit {
	background: linear-gradient(to right, #187fff, #2c4eff);
}

.finance .li .delete {
	background-color: #f56c6c;
}
/*finance*/


/*算力充值*/
.opt {
	width: 100%;
	display: table;
}

.opt a {
	font-weight: 16px;
	color: #326bff;
	margin: 0 5px 10px 5px;
	width: calc(20% - 12px);
	padding: 15px 0 15px 0;
	border-radius: 10px;
	display: block;
	float: left;
	text-align: center;
	border: 1px solid #326bff;
	text-decoration: none;
}

.opt dd {
	font-size: 12px;
	padding-top: 5px;
	text-align: center;
	margin-left: 0px;
}

.opt dt {
	margin: 0 0 10px 10px;
	float: right;
	position: absolute;
	text-align: right;
}

.opt dt i {
	font-size: 19px;
	padding: 0 0 10px 10px;
}

.opt a:hover:not(.nowopt) {
	border: 1px solid #814600;
	color: #814600;
}

.opt .nowopt {
	color: #814600;
	background: linear-gradient(to right, #ffebcd, #ffd377);
	border: 1px solid transparent;
}

.opt .nowopt i {
	color: #814600 !important;
}

.opt dt i:not(.nowopt) {
	color: #ffffff;
	font-size: 19px;
	padding: 0 0 10px 10px;
}

.hidden {
	display: none;
}
/*算力充值*/