html,
body,
#app {
	height: 100%;
}

#app {
	min-width: 320px;
	max-width: 100%;
	margin: 0 auto;
	box-shadow: 0px 0px 20px #e5e8eb;
}

body {
	padding-bottom: constant(safe-area-inset-bottom);
	padding-left: 0px !important;
	padding-right: 0px !important;
	overscroll-behavior: none;
}

.n-layout-toggle-button {
	width: 32px !important;
	height: 32px !important;
	opacity: 0;
	display: none !important;
}

.wrap-main {
	padding: 0 15px;
	padding-top: 10px;
	padding-bottom: 20px;
	max-width: 750px;
	margin: 0 auto;
	background-color: var(--moss-bg-content-color);
}

.btns {
	border-radius: 8px;
	padding: 6px 10px;

	&.normal {
		color: #6B83FF;
		background: var(--moss-header-color);
		border: 1px solid #6B83FF;
	}

	&.danger {
		background: var(--moss-header-color);
		border: 1px solid #FF6772;
		color: #FF6671;
	}
}

.main-bg {
	padding: 0 15px;
	padding-top: 20px;
	padding-bottom: 60px;
	min-height: 100%;
	background-color: var(--moss-bg-content-color);
	color: var(--moss-text);
}

.box {
	background-color: var(--moss-header-color);
	border-radius: 5px;
	padding: 17px 15px;

	.btn {
		color: var(--moss-text-blue-color);
	}
}

@media screen and(max-width: 400px) {
	.none {
		display: none !important;
	}

	.item-min-width {
		width: 60px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.item-desc-min-width {
		width: 100px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

fade1-enter-active,
.fade1-leave-active {
	transition: opacity .3s;
}

.fade1-enter-active {
	animation: bounce-in .3s;
	// transition: all 1s;
}

.fade1-enter,
.fade1-leave-to {
	opacity: 0;
}

.fade1-leave-active {
	animation: bounce-in .3s reverse;
	// transition: all 1s;
}

.height-enter-active,
.height-leave-active {
	transition: 60px;
	overflow: hidden;
	/* 过渡的持续时间 */
}

.height-enter-from {
	height: 0;
	opacity: 0;
	/* 初始高度和最终高度 */
	overflow: hidden;
	/* 隐藏超出部分 */
}

.height-enter-to {
	height: 60px;
	opacity: 1;
	/* 初始高度和最终高度 */
	overflow: hidden;
	/* 隐藏超出部分 */
}

.height-leave-from {
	height: 60px;
	opacity: 1;
	/* 初始高度和最终高度 */
	overflow: hidden;
	/* 隐藏超出部分 */
}

.height-leave-to {
	height: 0;
	opacity: 0;
	/* 初始高度和最终高度 */
	overflow: hidden;
	/* 隐藏超出部分 */
}



@keyframes bounce-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.code-block-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 6px;
	line-height: 1.45;

	.code-block-header__copy,
	.code-block-header__insert {
		cursor: pointer;
		color: var(--moss-text-blue-color);

		&:hover {
			opacity: 0.7;
		}
	}
}

.footer-item-btn {
	white-space: nowrap;
	display: flex;
	align-items: center;
	// background: var(--moss-bg-btn-color);
	border-radius: 27px;
	// color: var(--moss-text-ask-color);
	padding: 2px 8px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-size: 12px;

	&.model-version {
		// background-color: var(--moss-bg-ask-color);
	}

	.icon {
		font-size: 14px;
	}
}


#data-wrapper {
	// height: 10000px;
}

.n-input .n-input__border,
.n-base-selection .n-base-selection__border {
	// border: 1px solid rgb(224, 224, 230) !important;
}

::-webkit-scrollbar {
	// display: none;
}

::-webkit-scrollbar-thumb {
	background: #ccd0d6;
	border-radius: 10px;
}

.dark {
	::-webkit-scrollbar-thumb {
		background: #565656;
		border-radius: 10px;
	}
}

.flex-center {
	display: flex;
	align-items: center;
}

.self-model {
	overflow: hidden;
	border-radius: 16px;



	.ant-modal-body {
		padding: 0;
	}
}

.loading {
	width: 16px;
	height: 16px;
	margin-right: 6px;
	animation: spin 2s linear infinite;
	/* 使用 @keyframes 动画 */
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

p {
	margin-bottom: 0 !important;
}

.ant-back-top {
	// bottom: 150px;
}


.my-pagination {
	// color:var(--moss-text-ask-color);
	margin-top: 5px;
	border-radius: 20px;
	// border: 1px solid var(--moss-text-ask-color);
	height: 30px;
	margin-left: -10px;

	.van-pagination__item {
		background-color: transparent;

		&::after {
			border: 0px;
		}
	}
}

.m-pointer {
	cursor: pointer;
}

.ant-notification-notice {
	border-radius: 12px !important;
}

.van-tabbar {
	// height: auto;
	height: 60px;
	position: relative;

	.van-tabbar-item {
		// height: 55px;
	}

	&::after {
		content: '';
		display: none;
	}
}

.my-drawer {

	.n-drawer-content {
		.n-drawer-body-content-wrapper {
			padding: 0 !important;
		}
	}

}

.btn {
	cursor: pointer;

	&:active {
		transform: scale(.96);
	}
}

@keyframes scaleAnimation {
	0% {
		transform: scale(1);
		/* 初始状态，不进行缩放 */
	}

	50% {
		transform: scale(0.95);
		/* 在动画的中间阶段进行缩放 */
	}

	100% {
		transform: scale(1);
		/* 回到原始大小 */
	}
}

/* 将动画应用到需要缩放的元素上 */
.element-to-animate {
	animation: scaleAnimation 2s ease-in-out infinite;
	/* 使用动画，并设定动画参数 */
}


.ant-switch {
	background-color: #00000040 !important;
}

.ant-switch-checked {
	background-color: #1890ff !important;
}


.mySwitch {

	.n-switch__rail {
		// background-color: pink !important;
	}

	&.n-switch--active {
		.n-switch__rail {
			background-color: #38416A !important;
		}
	}

}

.setting-switch {
	.n-switch__rail {
		// background-color: pink !important;
	}

	&.n-switch--active {
		.n-switch__rail {
			background-color: #7569FF !important;
		}
	}
}

.my-nav-bar {
	background-color: transparent;

	.van-icon-arrow-left {
		color: #1A1A1A;
	}

	&::after {
		display: none;
	}
}

.dark {
	.my-nav-bar {

		.van-icon-arrow-left {
			color: #fff
		}
	}
}


.myPopover {
	border-radius: 11px !important;
	background-color: #ffffff;
}

.dark {
	.myPopover {
		background-color: #3A3A3C;
	}
}

.my-drawer {
	// height: 74vh;

	.ant-drawer-content-wrapper {
		.ant-drawer-content {
			background: #FFFFFF;
			// box-shadow: 0px -3px px 0px rgba(231, 232, 241, 1);
			border-radius: 18px 18px 0px 0px;
		}

		.ant-drawer-body {
			padding: 0px 0px;
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}

	}

	.ant-drawer-header {
		position: relative;
		border-bottom: 0px;
		// display: none;
		text-align: center;

		.ant-drawer-close {
			position: absolute;
			margin-right: 24px;
			right: 0;
			top: 16px
		}
	}
}

.dark {
	.my-drawer {
		// height: 74vh;

		.ant-drawer-content-wrapper {
			.ant-drawer-content {
				background: #212121;
				box-shadow: 0px -2px 15px 0px rgba(19, 19, 19, 1);
				border-radius: 18px 18px 0px 0px;
			}
		}

		.ant-drawer-header {
			background: #212121;

			.ant-drawer-close {
				color: rgb(145 145 145 / 45%)
			}

			.ant-drawer-title {
				color: #fff;
			}
		}

	}
}


.my-checkbox {
	.ant-checkbox-inner {
		width: 20px;
		height: 20px;
		position: relative;
		background: #FFFFFF;
		border-radius: 4px;
		border: 1px solid #828793;
	}

	.ant-checkbox-input {
		&::focus {
			border-color: transparent;
		}
	}

	.ant-checkbox-checked {
		.ant-checkbox-inner {
			width: 20px;
			height: 20px;
			background-color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			overflow: hidden;

			&::after {
				width: 16px;
				border: 0;
				height: 16px;
				background-color: transparent;
				background-image: url('https://codemoss-1253302184.cos.ap-beijing.myqcloud.com/light/history/icon-tick.png');
				background-repeat: no-repeat;
				background-size: contain;
				left: 2px;
				top: 3px;
				transform: rotate(0deg) scale(1) translate(0%, 0%);
				content: '';
			}
		}

		&::after {
			border: 0;
		}
	}
}

.dark {
	.my-checkbox {
		.ant-checkbox-inner {
			width: 20px;
			height: 20px;
			position: relative;
			border-radius: 4px;
			background: #212121;
			border: 1px solid #6A6A6A !important;
		}

		.ant-checkbox-checked {

			// border: 1px solid #7569FF;
			.ant-checkbox-inner {
				border: 1px solid #7569FF !important;
				&::after {
					background-image: url('https://codemoss-1253302184.cos.ap-beijing.myqcloud.com/dark/history/icon-tick.png');
				}
			}
		}

	}
}


.van-overlay {
	z-index: 1000;
}

.ant-popover-my{
	.ant-popover-inner-content {
		padding: 0px !important;
		max-height: 340px !important;
		overflow: auto !important;
	}

	.ant-popover-inner {
		border-radius: 8px !important;
	}
}

