@charset 'utf-8';

body {
	background: var(--bg-basic);
}

.head .title {
	font-size: 20px;
	font-weight: 700;
}

.content {
	margin-top: 8px;
	padding: 0 8px;
}
.content .piece {
	margin-top: 16px;
}
.content .piece h4 {
	text-align: left;
	font-size: 16px;
	font-weight: 500;
}
.content .piece .crux {
	margin-top: 8px;
	margin-left: 8px;
}
.content .crux .key {
	width: 88px;
	text-align: right;
}
.content .crux .val {
	width: calc(100% - 168px);
	margin: 0 4px;
	padding: 4px 4px;
}
.content .password {
	position: relative;
}
.content .password::after {
	/* content: 'input 元素不支持伪元素'; */
}

.content .crux .btn {
	width: 64px;
}
.content .pwd-box {
	position: relative;
}
.content .pwd-box .eye {
	position: absolute;
	width: 24px;
	height: 24px;
	padding: 0;
	/* top: 0; */
	right: 80px;
	background: transparent;
	box-shadow: 0 0 1px c;
	z-index: 9;
}
.content .piece .clue {
	margin-left: 12px;
	margin-top: 4px;
	color: var(--color-tip);
	font-size: var(--fsize-basic);
}
.content .piece .occupy {
	width: 64px;
}


.btn-logout {
	width: 100%;
	margin-top: 32px;
	padding: 12px 0;
	color: var(--color-warn);
	font-size: 16px;
	letter-spacing: 2px;
	border-radius: 8px;
	background: transparent;
	border: 1px solid var(--color-warn);
}
.btn-disabled {
	cursor: no-drop;
	background-color: var(--color-grey);
}
.btn-disabled:active {
	transform: none;
}

.tips {
	margin-top: 8vh;
	color: var(--color-gray);
	font-size: var(--fsize-supp);
	text-align: center;
}
.tips a {
	color: var(--color-link);
}

/* 找回账号弹窗 */
.modal-retrieve {
	/* display: block; */
	color: var(--color-basic);
}
.modal-retrieve .modal-content {
	padding: 16px 12px;
	border-radius: 8px;
}
.modal-retrieve .modal-title {
	font-weight: 700;
	text-align: center;
	letter-spacing: 2px;
}
.modal-retrieve .modal-main {
	margin-top: 12px;
	text-align: center;
}
.modal-retrieve .retrieve-content {
	margin-top: 12px;
	padding: 4px 32px;
	text-align: left
}
.modal-retrieve .piece {
	display: flex;
	align-items: center;
	justify-content: start;
	margin: 8px 0;
}
.modal-retrieve .piece .key {
	display: inline-block;
	width: 84px;
	text-align: right;
	white-space: nowrap;
}
.modal-retrieve .piece .val {
	text-align: left;
}
.modal-retrieve .piece .icon {
	width: 16px;
	margin-left: 4px;
}
.modal-retrieve .retrieve-tip {
	color: var(--color-tip);
	font-size: var(--fsize-basic);
}
.retrieve-tip .service {
	margin-top: 4px;
}
.retrieve-tip .icon {
	width: 16px;
	margin: 0 4px;
}
.retrieve-tip .text {
	color: #007BFF;
	line-height: 24px;
}