/* 弹窗背景遮罩 */
.xxhMask {
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 999;
	height: 100%;
	width: 100%;
	display: block;
	background-color: #000;
	background-color: rgba(0, 0, 0, 0.3);
	filter: alpha(opacity=30);
	opacity: 0.3;
	-o-opacity: 0.3;
	-ms-opacity: 0.3;
	-moz-opacity: 0.3;
	-webkit-opacity: 0.3;
	-khtml-opacity: 0.3;
}

/* 弹窗容器 */
.xxhModal {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1000;
	visibility: hidden;
	transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-khtml-transform: translate(-50%, -50%);
	opacity: 0;
	-o-opacity: 0;
	-ms-opacity: 0;
	-moz-opacity: 0;
	-webkit-opacity: 0;
	-khtml-opacity: 0;
	transition: visibility 0s, opacity 0.5s linear;
	-o-transition: visibility 0s, opacity 0.5s linear;
	-ms-transition: visibility 0s, opacity 0.5s linear;
	-moz-transition: visibility 0s, opacity 0.5s linear;
	-webkit-transition: visibility 0s, opacity 0.5s linear;
	-khtml-transition: visibility 0s, opacity 0.5s linear;

	border: 1px solid #ccc;
	border-radius: 10px !important;
	-o-border-radius: 10px !important;
	-ms-border-radius: 10px !important;
	-moz-border-radius: 10px !important;
	-webkit-border-radius: 10px !important;
	-khtml-border-radius: 10px !important;

	background-color: #fff;

	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: space-between;
}

.xxhModal .icon {
	text-align: center;
	vertical-align: top;
	/* vertical-align:sub; */
	overflow: hidden;
	font-size: 28px;
	min-width: 1rem;
	width: 2rem;
	max-width: 3rem;
	line-height: 32px;
}

.xxhModal .l {
	float: left;
}

.xxhModal .r {
	float: right;
}

.xxhModal .head {
	display: list-item;
	list-style: none;
	min-height: 32px;
	padding-left: 9px;
	border-bottom: 1px solid #ccc;
	border-radius: 9px 9px 0 0 !important;
	-o-border-radius: 9px 9px 0 0 !important;
	-ms-border-radius: 9px 9px 0 0 !important;
	-moz-border-radius: 9px 9px 0 0 !important;
	-webkit-border-radius: 9px 9px 0 0 !important;
	-khtml-border-radius: 9px 9px 0 0 !important;
}

.xxhModal .title {
	line-height: 32px;
	color: #666;
	font-size: 1.1rem;
	padding-left: 3px;
	filter: alpha(opacity=70);
	opacity: 0.7;
	-o-opacity: 0.7;
	-ms-opacity: 0.7;
	-moz-opacity: 0.7;
	-webkit-opacity: 0.7;
	-khtml-opacity: 0.7;
}

/* 关闭按钮 */
.xxhModal .close {
	align-content: center;
	cursor: pointer;
	color: #fff;
	font-size: 28px;
	font-weight: bold;
	/*max-height: 31.8px;*/
	background-color: palevioletred;
	border-radius: 0 9px 0 0 !important;
	-o-border-radius: 0 9px 0 0 !important;
	-ms-border-radius: 0 9px 0 0 !important;
	-moz-border-radius: 0 9px 0 0 !important;
	-webkit-border-radius: 0 9px 0 0 !important;
	-khtml-border-radius: 0 9px 0 0 !important;
}

.xxhModal .close:hover,
.xxhModal .close:active {
	background-color: orangered;
}

.xxhModal .foot {
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	justify-content: space-between;
	min-height: 5px;
}

.xxhModal .btn {
	flex: 1;
	box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-khtml-box-sizing: border-box;

	padding: 0 0;
	margin: 0 0;
	width: auto;
	text-align: center;
	cursor: pointer;
	color: #666;
	background-color: whitesmoke;
	font-size: 20px;
	line-height: 32px;
}

.xxhModal .btn:hover,
.xxhModal .btn:active {
	background-color: ghostwhite;
}

.xxhModal .btnL {
	border-radius: 0 0 0 9px !important;
	-o-border-radius: 0 0 0 9px !important;
	-ms-border-radius: 0 0 0 9px !important;
	-moz-border-radius: 0 0 0 9px !important;
	-webkit-border-radius: 0 0 0 9px !important;
	-khtml-border-radius: 0 0 0 9px !important;

	border: 1px solid #ccc;
	border-left: none;
	border-bottom: none;
}

.xxhModal .btnMiddle {
	border-radius: 0 0 0 0 !important;
	-o-border-radius: 0 0 0 0 !important;
	-ms-border-radius: 0 0 0 0 !important;
	-moz-border-radius: 0 0 0 0 !important;
	-webkit-border-radius: 0 0 0 0 !important;
	-khtml-border-radius: 0 0 0 0 !important;

	border: 1px solid #ccc;
	border-bottom: none;
	border-left: none;
}

.xxhModal .btnR {
	border-radius: 0 0 9px 0 !important;
	-o-border-radius: 0 0 9px 0 !important;
	-ms-border-radius: 0 0 9px 0 !important;
	-moz-border-radius: 0 0 9px 0 !important;
	-webkit-border-radius: 0 0 9px 0 !important;
	-khtml-border-radius: 0 0 9px 0 !important;

	border: 1px solid #ccc;
	border-right: none;
	border-bottom: none;
	border-left: none;
}

.xxhModal .btnSingle {
	float: none;
	width: auto;
	border-radius: 0 0 9px 9px !important;
	-o-border-radius: 0 0 9px 9px !important;
	-ms-border-radius: 0 0 9px 9px !important;
	-moz-border-radius: 0 0 9px 9px !important;
	-webkit-border-radius: 0 0 9px 9px !important;
	-khtml-border-radius: 0 0 9px 9px !important;

	border-top: 1px solid #ccc;
	border-right: none;
	border-bottom: none;
	border-left: none;
}

.xxhModal .Ok {}

.xxhModal .Ok:focus,
.xxhModal .Ok:hover,
.xxhModal .Ok:active {}

.xxhModal .No {}

.xxhModal .No:focus,
.xxhModal .No:hover,
.xxhModal .No:active {}

.xxhModal .leftside {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 0 0 0 5px;
	margin: 3px 0 3px 3px;
}

.xxhModal .leftside .leftside-icon {
	display: inline-block;
	height: 1.5rem;
	width: 1.5rem;
	line-height: 1.5rem;
	/* padding: 3px; */
	text-align: center;
	vertical-align: middle;
}

.xxhModal .leftside .leftside-icon:not(:has(> svg)) {
	/* 内部不包含svg图标时，应用下面的样式 */
	border: 1px solid;
	border-radius: 50% !important;
	-o-border-radius: 50% !important;
	-ms-border-radius: 50% !important;
	-moz-border-radius: 50% !important;
	-webkit-border-radius: 50% !important;
	-khtml-border-radius: 50% !important;
}

.xxhModal .leftside .leftside-icon svg {
	fill: none;
	stroke: none;
}

.xxhModal .leftside .leftside-icon svg circle {
	fill: none;
	stroke: currentColor;
}

.xxhModal .leftside .leftside-icon svg path {
	fill: currentColor;
	stroke: currentColor;
}

/* 内容区域 */
.xxhModal .content {
	min-width: 10rem;
	line-height: 1.5rem;
	padding: 9px;
	margin: 0;
	text-align: center;
	overflow: auto;
}

/* 弹窗动画 */
@keyframes slideUp {
	from {
		visibility: hidden;
		opacity: 0;
		-o-opacity: 0;
		-ms-opacity: 0;
		-moz-opacity: 0;
		-webkit-opacity: 0;
		-khtml-opacity: 0;
		transform: translate(-50%, 100%);
		-o-transform: translate(-50%, 100%);
		-ms-transform: translate(-50%, 100%);
		-moz-transform: translate(-50%, 100%);
		-webkit-transform: translate(-50%, 100%);
		-khtml-transform: translate(-50%, 100%);
	}

	to {
		visibility: visible;
		opacity: 1;
		-o-opacity: 1;
		-ms-opacity: 1;
		-moz-opacity: 1;
		-webkit-opacity: 1;
		-khtml-opacity: 1;
		transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-khtml-transform: translate(-50%, -50%);
	}
}

/* 应用动画 */
.xxhModal.SlideUp-in {
	visibility: visible;
	opacity: 1;
	-o-opacity: 1;
	-ms-opacity: 1;
	-moz-opacity: 1;
	-webkit-opacity: 1;
	-khtml-opacity: 1;

	animation: slideUp 1s ease-out;
	-o-animation: slideUp 1s ease-out;
	-ms-animation: slideUp 1s ease-out;
	-moz-animation: slideUp 1s ease-out;
	-webkit-animation: slideUp 1s ease-out;
	-khtml-animation: slideUp 1s ease-out;
}

/* 滑入滑出动画 */
@keyframes slideUp-in-out {
	0% {
		visibility: hidden;
		opacity: 0;
		-o-opacity: 0;
		-ms-opacity: 0;
		-moz-opacity: 0;
		-webkit-opacity: 0;
		-khtml-opacity: 0;
		transform: translate(-50%, 150%);
		-o-transform: translate(-50%, 150%);
		-ms-transform: translate(-50%, 150%);
		-moz-transform: translate(-50%, 150%);
		-webkit-transform: translate(-50%, 150%);
		-khtml-transform: translate(-50%, 150%);
	}

	24% {
		visibility: visible;
		opacity: 1;
		-o-opacity: 1;
		-ms-opacity: 1;
		-moz-opacity: 1;
		-webkit-opacity: 1;
		-khtml-opacity: 1;
		transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-khtml-transform: translate(-50%, -50%);
	}

	70% {
		visibility: visible;
		opacity: 1;
		-o-opacity: 1;
		-ms-opacity: 1;
		-moz-opacity: 1;
		-webkit-opacity: 1;
		-khtml-opacity: 1;
		transform: translate(-50%, -50%);
		-o-transform: translate(-50%, -50%);
		-ms-transform: translate(-50%, -50%);
		-moz-transform: translate(-50%, -50%);
		-webkit-transform: translate(-50%, -50%);
		-khtml-transform: translate(-50%, -50%);
	}

	100% {
		visibility: hidden;
		opacity: 0;
		-o-opacity: 0;
		-ms-opacity: 0;
		-moz-opacity: 0;
		-webkit-opacity: 0;
		-khtml-opacity: 0;
		transform: translate(-50%, -150%);
		-o-transform: translate(-50%, -150%);
		-ms-transform: translate(-50%, -150%);
		-moz-transform: translate(-50%, -150%);
		-webkit-transform: translate(-50%, -150%);
		-khtml-transform: translate(-50%, -150%);
	}
}

/* 应用动画 */
.xxhModal.SlideUp-in-out {
	visibility: visible;
	opacity: 1;
	-o-opacity: 1;
	-ms-opacity: 1;
	-moz-opacity: 1;
	-webkit-opacity: 1;
	-khtml-opacity: 1;
	animation: slideUp-in-out 5s forwards;
	-o-animation: slideUp-in-out 5s forwards;
	-ms-animation: slideUp-in-out 5s forwards;
	-moz-animation: slideUp-in-out 5s forwards;
	-webkit-animation: slideUp-in-out 5s forwards;
	-khtml-animation: slideUp-in-out 5s forwards;
	/* forwards是停在动画最后的的那个画面。即只演示一次。
	/* infinite是动画播放次数为无限次。*/
}

/* 色彩主题皮肤，参考：https://www.cnblogs.com/guyu-/p/13967772.html */
.xxhModal.default,
.xxhModal.default .head,
.xxhModal.popup_default .leftside-icon,
.xxhModal.popup_default,
.xxhModal.secondary,
.xxhModal.secondary .head,
.xxhModal.popup_secondary .leftside-icon,
.xxhModal.popup_secondary {
	background-color: rgba(255, 255, 255, 1);
	border-color: #9B9B9B;
	color: #333333;
}

.xxhModal.popup_default .leftside-icon,
.xxhModal.popup_secondary .leftside-icon {
	color: #9B9B9B;
}

.xxhModal.default .title,
.xxhModal.secondary .title {
	color: #333333;
}


.xxhModal.primary,
.xxhModal.primary .head,
.xxhModal.popup_primary .leftside-icon,
.xxhModal.popup_primary {
	background-color: rgba(230, 240, 255, 1);
	border-color: #B3D4FF;
	color: #0052CC;
}

.xxhModal.popup_primary .leftside-icon {
	color: #0052CC;
}

.xxhModal.primary .title {
	/* color: #343a40; */
	color: #0052CC;
}

.xxhModal.success,
.xxhModal.success .head,
.xxhModal.popup_success .leftside-icon,
.xxhModal.popup_success {
	background-color: rgba(240, 255, 244, 1);
	border-color: #A5D6A7;
	color: #0A7221;
}

.xxhModal.popup_success .leftside-icon {
	color: #0A7221;
}

.xxhModal.success .title {
	color: #0A7221;
}

.xxhModal.info,
.xxhModal.info .head,
.xxhModal.popup_info .leftside-icon,
.xxhModal.popup_info {
	background-color: rgba(230, 249, 255, 1);
	border-color: #00B4D8;
	color: #007AA3;
}

.xxhModal.popup_info .leftside-icon {
	color: #00B4D8;
}

.xxhModal.info .title {
	color: #007AA3;
}

.xxhModal.warning,
.xxhModal.warning .head,
.xxhModal.popup_warning .leftside-icon,
.xxhModal.popup_warning {
	background-color: rgba(255, 245, 230, 1);
	border-color: #FFB347;
	color: #D35400;
}

.xxhModal.popup_warning .leftside-icon {
	color: #FFB347;
}

.xxhModal.warning .title {
	color: #D35400;
}


.xxhModal.danger,
.xxhModal.danger .head,
.xxhModal.popup_danger .leftside-icon,
.xxhModal.popup_danger {
	background-color: rgba(255, 228, 230, 1);
	border-color: #dc3545;
	color: #2c2c2c;
}

.xxhModal.popup_danger .leftside-icon {
	color: #dc3545;
}

.xxhModal.danger .title {
	color: #565656;
}


.xxhModal.gold,
.xxhModal.gold .head,
.xxhModal.popup_gold .leftside-icon,
.xxhModal.popup_gold {
	background-color: rgba(255, 249, 230, 1);
	border-color: #FFD700;
	color: #B38F00;
}

.xxhModal.popup_gold .leftside-icon {
	color: #FFD700;
}

.xxhModal.gold .title {
	color: #B38F00;
}

.xxhModal.costly,
.xxhModal.costly .head,
.xxhModal.popup_costly .leftside-icon,
.xxhModal.popup_costly {
	background-color: rgba(245, 230, 255, 1);
	border-color: #BA55D3;
	color: #6D00A3;
}

.xxhModal.popup_costly .leftside-icon {
	color: #BA55D3;
}

.xxhModal.gray .title {
	color: #6D00A3;
}

.xxhModal.gray,
.xxhModal.gray .head,
.xxhModal.popup_gray .leftside-icon,
.xxhModal.popup_gray {
	background-color: #fafafa;
	border-color: #EEEEEE;
	color: #555555;
}

.xxhModal.popup_gray .leftside-icon {
	color: #555555;
}

.xxhModal.gray .title {
	color: #555555;
}

.xxhModal.black,
.xxhModal.black .head,
.xxhModal.popup_black .leftside-icon,
.xxhModal.popup_black {
	background-color: #333333;
	border-color: #C1C1C1;
	color: #FFFFFF;
}

.xxhModal.popup_black .leftside-icon {
	color: #C1C1C1;
}

.xxhModal.black .title {
	color: #FFFFFF;
}

/* 其他色彩主题皮肤·自定义 */
.xxhModal.other,
.xxhModal.other .head,
.xxhModal.popup_other .leftside-icon,
.xxhModal.popup_other {
	background-color: rgba(222, 247, 255, 1);
	border-color: #608692;
	color: #2c2c2c;
}

.xxhModal.popup_other .leftside-icon {
	color: #608692;
}

.xxhModal.other .title {
	color: #565656;
}



.xxhModal.default,
.xxhModal.secondary,
.xxhModal.primary,
.xxhModal.success,
.xxhModal.info,
.xxhModal.warning,
.xxhModal.danger,
.xxhModal.gold,
.xxhModal.costly,
.xxhModal.gray,
.xxhModal.black,
.xxhModal.other {
	border-radius: 9px 9px 9px 9px !important;
	-o-border-radius: 9px 9px 9px 9px !important;
	-ms-border-radius: 9px 9px 9px 9px !important;
	-moz-border-radius: 9px 9px 9px 9px !important;
	-webkit-border-radius: 9px 9px 9px 9px !important;
	-khtml-border-radius: 9px 9px 9px 9px !important;

	background-color: #fff;
	color: #565656;
}

.xxhModal.popup_default,
.xxhModal.popup_secondary,
.xxhModal.popup_primary,
.xxhModal.popup_success,
.xxhModal.popup_info,
.xxhModal.popup_warning,
.xxhModal.popup_danger,
.xxhModal.popup_gold,
.xxhModal.popup_costly,
.xxhModal.popup_gray,
.xxhModal.popup_black,
.xxhModal.popup_other {
	flex-direction: row;
}

.xxhModal.popup_default .content,
.xxhModal.popup_secondary .content,
.xxhModal.popup_primary .content,
.xxhModal.popup_success .content,
.xxhModal.popup_info .content,
.xxhModal.popup_warning .content,
.xxhModal.popup_danger .content,
.xxhModal.popup_gold .content,
.xxhModal.popup_costly .content,
.xxhModal.popup_gray .content,
.xxhModal.popup_black .content,
.xxhModal.popup_other .content {
	margin: 3px;
	padding: 3px;
}