.container {
	display: flex;
	justify-content: center;
	align-items: center;
}

.background-color {
	background-color: rgb(236, 236, 236);
}

.main-svgImg {
	text-align: center;
}

.image-container {
	transition: transform 0.2s ease, filter 0.2s ease;
	cursor: pointer;
	/* transform-origin: center center; */
	overflow: hidden;
}

/* 鼠标悬停时：图片微微放大 */
.image-container:hover {
	transform: scale(1.1);
}

/* 图片被点击时，模拟按下效果 */
.image-container:active {
	transform: scale(0.98);
	filter: brightness(0.9);
}

.image-containerBig {
	transition: transform 0.2s ease, filter 0.2s ease;
	cursor: pointer;
	/* transform-origin: center center; */
	overflow: hidden;
}

/* 鼠标悬停时：图片微微放大 */
.image-containerBig:hover {
	transform: scale(1.3);
}

/* 图片被点击时，模拟按下效果 */
.image-containerBig:active {
	transform: scale(0.98);
	filter: brightness(0.9);
}

/* 恢复出厂设置 */
.xnt-refresh {
	box-shadow: 2px 2px 2px #a9aaac, -2px -2px 2px #ffffff;
	color: rgb(128, 128, 128);
}

.xnt-refresh:hover {
	box-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #A6D4DA;
	color: white;
	background: linear-gradient(to right, #B5E4E9, #00A3B0);
}

.xnt-refresh:active {
	box-shadow: 2px 2px 2px #a9aaac, -2px -2px 2px #ffffff;
}

/*作用于外框或者大一点的圆(没有触碰和点击效果) */
.xnt2 {
	box-shadow: 4px 4px 4px #a9aaac, -4px -4px 4px #ffffff;
}

/*作用于外框或者大一点的圆 大一倍的新拟态 */
.xnt1 {
	box-shadow: 4px 4px 4px #a9aaac, -4px -4px 4px #ffffff;
}

/* 作用于外框 大一倍的新拟态鼠标触碰 */
.xnt1:hover {
	box-shadow: 4px 4px 4px #ffffff, -4px -4px 4px #a9aaac;
}

/* 作用于外框 大一倍的新拟态选中 */
.xnt1-select {
	box-shadow: 4px 4px 4px #ffffff, -4px -4px 4px #a9aaac;
}

/* 虚拟态外框蓝色 */
.xnt1-blue {
	 box-shadow: 4px 4px 4px #A6D4DA, -2px -2px 2px #ffffff;
	color: #00A3B0;
	background: linear-gradient(to right, #B5E4E9, #00A3B0);
}

/* 默认新拟态样式(没有触碰和点击效果) */
.xnt {
	box-shadow: 2px 2px 2px #a9aaac, -2px -2px 2px #ffffff;
	color: rgb(128, 128, 128);
}

/* 蓝色新拟态样式(没有触碰和点击效果) */
.xnt-blue {
	box-shadow: 2px 2px 2px #A6D4DA, -2px -2px 2px #ffffff;
	color: white;
	background: linear-gradient(to right, #B5E4E9, #00A3B0);
}

/* 绿色新拟态样式(没有触碰和点击效果) */
.xnt-green {
	box-shadow: 2px 2px 2px #67D8CC, -2px -2px 2px #ffffff;
	color: white;
	background: linear-gradient(to right, #97E1D9, #0AC7BA);
}

/* 灰色新拟态样式(有触碰和点击效果,作用于按钮) */
.xnt-grey-button {
	box-shadow: 2px 2px 2px #a9aaac, -2px -2px 2px #ffffff;
	color: rgb(128, 128, 128);
}

.xnt-grey-button:hover {
	box-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #a9aaac;
	color: rgb(128, 128, 128);
}

.xnt-grey-button:active {
	box-shadow: 2px 2px 2px #a9aaac, -2px -2px 2px #ffffff;
	color: rgb(128, 128, 128);
}

/* 蓝色新拟态样式(有触碰和点击效果,作用于按钮) */
.xnt-blue-button {
	box-shadow: 2px 2px 2px #A6D4DA, -2px -2px 2px #ffffff;
	color: white;
	background: linear-gradient(to right, #B5E4E9, #00A3B0);
}

.xnt-blue-button:hover {
	box-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #A6D4DA;
}

.xnt-blue-button:active {
	box-shadow: 2px 2px 2px #A6D4DA, -2px -2px 2px #ffffff;
}

/* 灰色的确定或者取消按钮 */
.xnt-grey-confirm {
	box-shadow: 2px 2px 2px #a9aaac, -2px -2px 2px #ffffff;
	color: rgb(128, 128, 128);
}

.xnt-grey-confirm:hover {
	box-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #a9aaac;
}

.xnt-grey-confirm:active {
	box-shadow: 2px 2px 2px #a9aaac, -2px -2px 2px #ffffff;
}

/* 蓝色确定按钮 */
.xnt-blue-confirm {
	box-shadow: 2px 2px 2px #A6D4DA, -2px -2px 2px #ffffff;
	color: white;
	background: linear-gradient(to right, #B5E4E9, #00A3B0);
}

.xnt-blue-confirm:hover {
	box-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #A6D4DA;
}

.xnt-blue-confirm:active {
	box-shadow: 2px 2px 2px #A6D4DA, -2px -2px 2px #ffffff;
}

/* 绿色取消按钮 */
.xnt-green-cancel {
	box-shadow: 2px 2px 2px #67D8CC, -2px -2px 2px #ffffff;
	color: white;
	background: linear-gradient(to right, #97E1D9, #0AC7BA);
}

.xnt-green-cancel:hover {
	box-shadow: 2px 2px 2px #ffffff, -2px -2px 2px #67D8CC;
}

.xnt-green-cancel:active {
	box-shadow: 2px 2px 2px #67D8CC, -2px -2px 2px #ffffff;
}

/* 字体灰色 */
.setting-grey {
	color: rgb(124, 124, 124);
}

.setting-black {
	color: rgba(0, 0, 0, 0.8);
}

/*字体蓝色  */
.setting-blue {
	color: #549FD8;
}

/* 灰色内阴影 */
.xnt-inset {
	background-color: rgb(236, 236, 236);
	box-shadow: inset 6px 6px 12px #c0c2c5, inset -8px -8px 16px #ffffff;
}

/* 蓝色内阴影 */
.xnt-blue-inset {
	background-color: rgb(236, 236, 236);
	box-shadow: inset 6px 6px 12px #A6D4DA, inset -8px -8px 16px #ffffff;
	color: #549FD8 !important;
}

/* 内环样式 */
.outToggle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 155px;
	height: 55px;
	border-radius: 50px;
	box-shadow: 6px 6px 6px #a9aaac, 0px 0px 6px #ffffff;
}

.toggle {
	width: 140px;
	height: 45px;
	border-radius: 50px;
	position: relative;
	cursor: pointer;
	transition: background-color 0.3s;
	box-shadow: 2px 2px 4px #ffffff, -2px -2px 4px #a9aaac;
}

.toggle.active {
	background: linear-gradient(to right, #B5E4E9, #00A3B0);
	box-shadow: 2px 2px 4px #ffffff, -2px -2px 4px #00A3B0;
}

.toggle .slider {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	position: absolute;
	top: 2px;
	left: 4px;
	transition: transform 0.3s;
	background-color: rgb(236, 236, 236);
	color: rgb(128, 128, 128);
}

.toggle.active .slider {
	transform: translateX(92px);
	color: #00A3B0;
}

.slider {
	box-shadow: 2px 2px 4px #a9aaac, -2px -2px 4px #ffffff;
}

.toggle .slider::before {
	display: flex;
	justify-content: center;
	align-items: center;
	content: "+";
	font-size: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

/* 默认状态 */
.aBtn{
    transition: transform 0.1s ease, filter 0.1s ease;
    cursor: pointer;
    overflow: hidden;
}

/* 模拟 :active 按下效果 */
.aBtn.active-effect {
    /* transform: scale(0.98);
    filter: brightness(0.9); */
	transform: scale(0.95);
    filter: brightness(0.7);
}


/* 默认状态 */
.bBtn{
    transition: transform 0.1s ease, filter 0.1s ease;
    cursor: pointer;
    overflow: hidden;
}

/* 模拟 :active 按下效果 */
.bBtn.active-effect {
	transform: scale(0.95);
    filter: brightness(0.7);
}

/* 默认状态 */
.xBtn{
    transition: transform 0.1s ease, filter 0.1s ease;
    cursor: pointer;
    overflow: hidden;
}

/* 模拟 :active 按下效果 */
.xBtn.active-effect {
	transform: scale(0.95);
    filter: brightness(0.7);
}


/* 默认状态 */
.yBtn{
    transition: transform 0.1s ease, filter 0.1s ease;
    cursor: pointer;
    overflow: hidden;
}


/* 模拟 :active 按下效果 */
.yBtn.active-effect {
	transform: scale(0.95);
    filter: brightness(0.7);
}

/* 默认状态 */
.zrBtn{
    transition: transform 0.1s ease, filter 0.1s ease;
    cursor: pointer;
    overflow: hidden;
}


/* 模拟 :active 按下效果 */
.zrBtn.active-effect {
	transform: scale(0.95);
    filter: brightness(0.7);
}

/* 默认状态 */
.rBtn{
    transition: transform 0.1s ease, filter 0.1s ease;
    cursor: pointer;
    overflow: hidden;
}


/* 模拟 :active 按下效果 */
.rBtn.active-effect {
	transform: scale(0.95);
    filter: brightness(0.7);
}
/* 加载中 */
.loading-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	pointer-events: all;
  }
  .loading-spinner {
	width: 50px;
	height: 50px;
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
  }
  @keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
  }