#root {
	height: 100%;
	/*overflow: hidden;*/
}

@font-face {
	font-family: 'Lora';
	src: url(assets/3776a8a912e8fab399bd.woff2) format('woff2'),
	url(assets/30ea0f09162d1a2be363.woff) format('woff');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Lora';
	src: url(assets/e8f108507160c990f7aa.woff2) format('woff2'),
	url(assets/c74b48e29f460614b62e.woff) format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url(assets/22ff664246224281f766.woff2) format('woff2'),
	url(assets/60c87085aa524976235c.woff) format('woff');
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: 'Lora';
	src: url(assets/a76b5a19dfb19d66d257.woff2) format('woff2'),
	url(assets/5391a0b45619591d28c3.woff) format('woff');
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}
/*:root {*/
/*	--primary-background-color: #fff;*/
/*	--primary-text-color: #000;*/
/*	--color-popover-checked-bg: 1px solid #cccccc;*/
/*}*/
.note-light-mode {
	--modal-bg: #fcfcfc;
	--active-bg-color: #dbecff;
	--active-radio-btn-bg: #4180c7;
	--siderbar-bg-color: #fcfcfc;
	--siderbar-font-color: #202124;
	--siderbar-icon-color: #555555;
	--siderbar-icon-hover-bg: #f1f3f4;
	--sider-handle: #ffffff;
	--siderbar-svg-hover-bg: #d9dadb;
}

.note-dark-mode {
	--modal-bg: #393e3f;
	--active-bg-color: #74a5dc;
	--active-radio-btn-bg: #74a5dc;
	--siderbar-bg-color: #272b2d;
	--siderbar-font-color: #f1f3f4;
	--siderbar-icon-color: #e6e9ed;
	--siderbar-icon-hover-bg: #8a8d91;
	--sider-handle: #3e3f41;
	--siderbar-svg-hover-bg: #5c5f61;
	--show-note-book-text-bg-color: #919295;
}

.night-theme {
	--primary-background-color: #272b2d;
	--primary-text-color: #e6e9ed;
	--color-popover-checked-bg: #e6e9ed;
	--header-icon-background: #9a9b9e;
	--show-note-book-text-bg-color: #67696c;
	--input-border-color: #e6e9ed;
	--note-content-color: #e6e9ed;
	--note-content-bg-color: #272b2d;
	--note-input-bg-color: #393e3f;
	--add-note-button-bg: #757779;
	--selected-icon-bg: #e6e9ed;
}

.gray-theme {
	--primary-background-color: #e7e7e7;
	--primary-text-color: #424242;
	--color-popover-checked-bg: #424242;
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #e7e7e7;
	--input-border-color: #424242;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #424242;
}

.blue-theme {
	--primary-background-color: #e7eeff;
	--primary-text-color: #4180c7;
	--color-popover-checked-bg: #4180c7;
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #e7eeff;
	--input-border-color: #4180c7;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #4180c7;
}

.purple-theme {
	--primary-background-color: #e9e4f0;
	--primary-text-color: #774bd7;
	--color-popover-checked-bg: #774bd7;
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #ececf8;
	--input-border-color: #774bd7;
	--note-content-color: #202124;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #774bd7;
}

.red-theme {
	--primary-background-color: #ffeaea;
	--primary-text-color: #c91515;
	--color-popover-checked-bg: #c91515;
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #ffeaea;
	--input-border-color: #c91515;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #c91515;
}

.green-theme {
	--primary-background-color: #e5f7e5;
	--primary-text-color: #1e8d1e;
	--color-popover-checked-bg: #1e8d1e;
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #e5f7e5;
	--input-border-color: #1e8d1e;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #1e8d1e;
}

.orange-theme {
	--primary-background-color: #f4e9e6;
	--primary-text-color: #f37701;
	--color-popover-checked-bg: #f37701;
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #f4e9e6;
	--input-border-color: #f37701;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #f37701;
}

.pink-theme {
	--primary-background-color: #ffeeee;
	--primary-text-color: #ff697e;
	--color-popover-checked-bg: #ff697e;
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #ffeeee;
	--input-border-color: #ff697e;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #ff697e;
}

.yellow-theme {
	--primary-background-color: #fff1c4;
	--primary-text-color: #1a1707;
	--color-popover-checked-bg: #ffd95e;
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #fff1c4;
	--input-border-color: #1a1707;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}


.gradient-theme-blue-yellow {
	/*background-image: linear-gradient( 179.1deg,  rgba(255,250,172,1) 10.3%, rgba(13,167,168,1) 148% );*/
	--primary-background-color: linear-gradient(to bottom, rgba(249, 244, 233, 1) 3.4%, rgba(243, 220, 193, 1) 23.5%, rgba(224, 171, 165, 1) 45%, rgba(161, 127, 161, 1) 65.3%, rgba(115, 106, 152, 1) 87.2%);
	--primary-text-color: rgb(84, 87, 150);
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #f3ead5;
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}

.gradient-theme-blue-pink {
	/*--primary-background-color: linear-gradient(to top, #92e8f6 0%, #f5c9d2 100%);*/
	--primary-background-color: linear-gradient(to bottom, rgba(252, 225, 208, 1) 30%, rgba(255, 173, 214, 1) 55.7%, rgba(162, 186, 245, 1) 81.8%);
	--primary-text-color: rgb(108, 138, 209);
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: rgb(214, 222, 238);
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}

.gradient-theme-blue-cyan {
	--primary-background-color: linear-gradient(to bottom, rgba(172, 230, 246, 1) -0.5%, rgba(68, 100, 145, 1) 99.8%);
	--primary-text-color: rgb(28, 24, 24);
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: rgb(255, 255, 255);
	--show-note-book-text-bg-color: rgb(194, 235, 241);
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}


.gradient-theme-green-blue {
	--primary-background-color: linear-gradient(to top, rgb(182, 244, 146), rgb(51, 139, 147));
	--primary-text-color: rgb(255, 255, 255);
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: rgb(182, 244, 146);
	--show-note-book-text-bg-color: rgb(182, 244, 146);
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}

.image-background-windmill {
	--primary-background-color: url(assets/90e24fcdeeb6e7984d31.png) no-repeat center/cover;
	--primary-text-color: rgb(255, 255, 255);
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #d1d1d1;
	--show-note-book-text-bg-color: #a9b6dd;
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #224373;
}

.image-background-mountain {
	--primary-background-color: url(assets/71f52d75a613d795704b.png) no-repeat center/cover;
	--primary-text-color: rgb(255, 255, 255);
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #d1d1d1;
	--show-note-book-text-bg-color: #e1c6c0;
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}

.image-background-dragonfly {
	--primary-background-color: url(assets/ed829a56c18a96a132f7.png) no-repeat center/cover;
	--primary-text-color: rgb(0, 0, 0);
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #bbcb6b;
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}

.image-background-tower {
	--primary-background-color: url(assets/5c171e356128fd2e18e0.png) no-repeat center/cover;
	--primary-text-color: rgb(0, 0, 0);
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #ffffff;
	--show-note-book-text-bg-color: #cde2e7;
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}

.image-background-field {
	--primary-background-color: url(assets/b3a14598b1ada09ce89d.png) no-repeat center/cover;
	--primary-text-color: white;
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #f5c991;
	--show-note-book-text-bg-color: #f5c991;
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}

.image-background-wheat {
	--primary-background-color: url(assets/2d7fed9af2bc8d8829ee.png) no-repeat center/cover;
	--primary-text-color: white;
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #d1d1d1;
	--show-note-book-text-bg-color: #d6c6a3;
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}

.image-background-sunset {
	--primary-background-color: url(assets/88117c75eeb667436f9c.png) no-repeat center/cover;
	--primary-text-color: white;
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #d1d1d1;
	--show-note-book-text-bg-color: #fbb394;
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}

.image-background-blueSky {
	--primary-background-color: url(assets/9399af6b05660ef50178.png) no-repeat center/cover;
	--primary-text-color: white;
	--color-popover-checked-bg: var(--primary-background-color);
	--header-icon-background: #d1d1d1;
	--show-note-book-text-bg-color: #8ebecf;
	--input-border-color: white;
	--note-content-color: #202124;
	--note-content-bg-color: #fdfdfd;
	--note-input-bg-color: #ffffff;
	--add-note-button-bg: #f0f0f0;
	--selected-icon-bg: #202124;
}


.themecolor-popover-title {
	text-align: start;
	font-size: 14px;
	margin-bottom: 8px;
	padding: 0;
	margin-top: 0;
	/*color: #a9a6a6;*/
	color: var(--siderbar-icon-color);
}


.theme-color-panel {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(4, 1fr);
}

.color-little-box {
	cursor: pointer;
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	border-radius: 100%;
	border: 1px solid;
	border-color: var(--selected-icon-bg);
	background: var(--primary-background-color);
}


.color-little-box.current-theme {
	box-shadow: inset 0 0 0 2px white;
	background: var(--color-popover-checked-bg);
	/*box-shadow: 0 0 0 2px white,0 0 0 3px var(--selected-icon-bg);*/
}


.show-noteList-box {
	/*padding:24px 24px 24px 24px;*/
}


.main-section-header svg path {
	fill: var(--primary-text-color);
}

.main-section-header svg path {
	stroke: var(--primary-text-color);
}



.note-container {
	position: relative;
	width: 100%;
	height: 100vh;
	transition: width .3s ease;
	box-sizing: border-box;
	background: #f6f8fa;
	/*transition: background 0.5s;*/
}


.container {
	padding: 0;
	height: 100%;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
	background: #ffffff;
	display: flex;
	flex-flow: row nowrap;
	/*background: linear-gradient(0deg, rgb(123 188 188) 0%, rgb(250 226 175 / 55%) 100%);*/
	/*background: radial-gradient(circle, rgba(238,174,202,1) 23%, rgba(148,187,233,1) 100%);*/
}

.sub-menu-content-disappear {
	opacity: 0; /* 完全透明 */
	height: 0; /* 高度为0，折叠起来 */
	visibility: hidden; /* 隐藏元素 */
}


.sub-menu-content {
	user-select: none;
	width: 100%;
	height: auto; /* 自动根据内容的高度 */
	display: grid;
	/*grid-template-columns: repeat(2, 1fr);*/
	/*grid-template-columns: repeat(auto-fill, minmax(89px, 1fr));*/
	grid-template-columns: repeat(auto-fill, 89px);
	gap: 14px;
	opacity: 1; /* 完全可见 */
	visibility: visible; /* 确保占据空间 */
	transition: opacity 1s ease, height 0.4s ease; /* 增加过渡时间 */
	box-sizing: border-box;
	overflow: visible;
	transition: width 0.4s ease;
	transition: grid-template-columns 0.5s ease;
}

.sub-menu-content .notebook-option {
	display: flex;
	flex-flow: column;
	width: 100%;
	height: 100%;
	align-items: center;
	position: relative;
}

.sub-menu-content .notebook-option .current-editing-icon {
	background: var(--modal-bg);
	right: 3px;
	position: absolute;
	top: 3px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	/* background: var(--primary-background-color); */
	border-radius: 28px;
}

.sub-menu-content .notebook-option .notebook-cover {
	width: 89px;
	height: 115px;
	aspect-ratio: 9 / 11; /* 保证宽高比一致 */
	cursor: pointer;
	object-fit: cover; /* 图片按比例填充 */
	display: block;
	border-radius: 4px;
	/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.15);*/
	box-sizing: border-box;
	transition: border-color 0.3s ease;
	box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.notebook-cover.selected {
	border: 1px outset black;
}

.sub-menu-content .notebook-option .notebook-title {
	text-align: center;
	color: var(--siderbar-font-color);
	width: 89px;
	white-space: nowrap;
	padding: 3px 0;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.4;
	max-height: calc(1.4em * 2);
	height: fit-content;
	white-space: pre-wrap;
	word-wrap: break-word;
	word-break: break-word;
}

.feedback-content {
	font-size: 14px;
	line-height: 32px;
}

.email-text {
	font-size: 14px;
}


.all-notebook-header {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.collapse-header {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.collapse-header span {
	color: #555555;
	font-weight: bold;
	margin-left: 30px;
}

.collapse-header svg {
	margin-left: 16px;
}

.collapse-header svg path {
	fill: #555555;
}

.selected-favorites {
	background: #fff8bf;
}

.selected-notebook-title {
	font-weight: bolder;
	/*background: #fff8bf;*/
	/*text-decoration: underline;*/
	/*color: var(--primary-text-color);*/
}

.add-notebook-icon-box {
	width: 20px;
	height: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.all-notebook-header .title-add {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.title-add span:first-of-type {
	color: #555555;
	font-weight: bold;
	margin: 0 0 0 30px;
}

.title-add span:last-of-type {
	color: #555555;
	font-size: 14px;
	margin-right: 4px;
}

.sub-menu-title {
	font-size: 16px;
	width: 100%;
	height: fit-content;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	align-items: center;
	cursor: pointer;
	user-select: none;
	padding: 6px 10px 6px 0;
	height: 40px;
	border-radius: 4px;
	box-sizing: border-box;
	margin-bottom: 6px;
}

.sub-menu-title:hover {
	background-color: #f1f3f4;
}


.ant-collapse .ant-collapse-content > .ant-collapse-content-box {
	padding: 0;
}

.ant-collapse-ghost > .ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box {
	padding: 0;
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header {
	padding: 0;
	display: flex;
	align-items: center;
	padding: 6px 10px 6px 0;
	height: 40px;
	border-radius: 8px;
	box-sizing: border-box;
	font-size: 16px;
}


.ant-collapse > .ant-collapse-item > .ant-collapse-header:not(.active-collapse):hover {
	background-color: #f1f3f4;
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header.active-collapse {
	background: #dbecff;
}

.ant-collapse > .ant-collapse-item:last-child {
	border-radius: 0;
}

.ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header {
	border-radius: 8px;
	margin: 4px 10px;
}

.ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-header-text {
	display: flex;
	align-items: center;
	flex-flow: row nowrap;
}

.ant-collapse-header {
	margin: 0 10px;
	display: flex;
	align-items: center;
	padding: 6px 10px 6px 0;
	height: 40px;
	border-radius: 8px;
	box-sizing: border-box;
	border-radius: 4px;
	font-size: 16px;
}

.sidebar-content-panel {
	width: 100%;
	height: calc(100% - 99px);
	box-sizing: border-box;
	overflow: auto;
}

.sidebar-content-panel::-webkit-scrollbar {
	display: none;
	width: 4px; /* 宽度 */
}

/* 滚动条上的滚动滑块 */
.sidebar-content-panel::-webkit-scrollbar-thumb {
	background-color: #d7d7d7; /* 滑块背景色 */
	border-radius: 2px; /* 圆角 */
}

/* 滚动条轨道 */
.sidebar-content-panel::-webkit-scrollbar-track {
	background-color: #f1f1f1; /* 轨道背景色 */
}

.sidebar-container {
	width: 100%;
	height: 100%;
	background: #2e3234;
}
.sidebar-container .menu-item {
	border-radius: 8px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	/*justify-content: space-between;*/
	flex-flow: row;
	box-sizing: border-box;
	flex-wrap: nowrap;
	cursor: pointer;
	user-select: none;
	margin: 4px 6px;
	height: 40px;
	color: #f1f3f4;
	background: transparent;
	cursor: pointer;
}

.sidebar-container .menu-item:has(.active-search-input) {
	cursor: none;
	background-color: #dbecff;
}

.sidebar-container .menu-item svg path {
	fill: #f1f3f4;
}

/*.sidebar-container .menu-item:has(.active-search-input) svg path {*/
/*	fill: #202124;*/
/*}*/

/*.sidebar-container .menu-item:has(.active-search-input):hover {*/
/*	background-color: #dbecff;*/
/*}*/

/*.sidebar-container .menu-item span {*/
/*	color: #555555;*/
/*}*/

.sidebar-container .menu-item.archive-notebook-menu:hover {
	background-color: #474747;
}

/*.sidebar-container .menu-item:not(:has(.active-search-input)) .search-input:hover {*/
/*	background-color: #f1f3f4;*/
/*}*/

/*.sidebar-container .menu-item:not(:has(.active-search-input)):hover .search-input {*/
/*	background-color: #f1f3f4;*/
/*}*/


.sidebar-content-panel .sidebar-menu-list .menu-item:hover {
	background-color: #f1f3f4;
}


.sidebar-content-panel .sidebar-menu-list .menu-item.active-sidebar-item {
	background-color: #dbecff;
}

.sidebar-content-panel .sidebar-menu-list .menu-item.active-sidebar-item svg path {
	fill: #202124;
}

.sidebar-content-panel .sidebar-menu-list:not(:has(.active-sidebar-item)) svg path {
	fill: #555555;
}

.sidebar-container .menu-item span {
	/*color: #202124;*/
	/*font-weight: bold;*/
	/*margin-left: 12px;*/
	/*height: 21px;*/
	font-size: 16px;
}

.sidebar-container .menu-item svg {
	width: 16px;
	height: 16px;
	/*margin-right: 14px;*/
}

.sidebar-container .menu-item svg.sidebar-menu-item-icon {
	
	margin-right: 14px;
}


.sidebar-content-panel {
	position: relative;
}

.sidebar-container .sidebar-top-bar {
	box-sizing: border-box;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 0 16px;
}

.sidebar-container .sidebar-top-bar {
	box-sizing: border-box;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-direction: row;
	flex-wrap: nowrap;
	margin: 0 8px;
}

.sidebar-container .sidebar-top-bar .notebooks-list-text {
	font-size: 16px;
	color: var(--siderbar-font-color);
	user-select: none;
}

.sidebar-container .sidebar-top-bar .topbar-icon {
	width: 40px;
	height: 40px;
	border-radius: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.sidebar-container svg path {
	fill: #f1f3f4;
}

.sidebar-container .sidebar-top-bar .topbar-icon:hover {
	background:#474747;
}

.sidebar-container .sidebar-top-bar .collapse-sidebar-and-add-new-sort {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.sidebar-container .sidebar-top-bar:hover .collapse-sidebar-icon {
	opacity: 1;
}

.sidebar-container .sidebar-top-bar .collapse-sidebar-icon {
	opacity: 0;
}

.sidebar-container .sidebar-top-bar .collapse-sidebar-icon svg path {
	/*fill: #9c9a9a;*/
}

.sidebar-container .sidebar-top-bar:has(.sidebar-menu-dropdown) .expand-drawer-icon {
	background: var(--siderbar-icon-hover-bg);
	
}


.sidebar-content-panel .sidebar-footer-add-new-notebook-area {
	position: absolute;
	bottom: 0;
	width: calc(100% - 20px);
}

.more-operates-popover-content {
	display: flex;
	flex-flow: column;
	box-sizing: border-box;
}

.more-operates-popover-content span {
	padding: 4px;
	border-radius: 4px;
	cursor: pointer;
}

.more-operates-popover-content span:hover {
	background: #f1f3f4;
}

.sidebar-content-panel .expand-sort-notebook-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar-content-panel .fold-sort-icon svg {
	/*transform: rotate(-90deg);*/
}

.sidebar-content-panel .notebook-operation-bar {
	display: flex;
	justify-content: space-between;
	
}

.sidebar-content-panel .notebook-operation-bar:hover .add-and-more-button {
	visibility: visible;
}

.sidebar-content-panel .notebook-operation-bar:hover {
	background: #474747;
}

.sidebar-content-panel .notebook-operation-bar .add-and-more-button {
	visibility: hidden;
	display: flex;
	align-items: center;
	flex-flow: row;
	flex-wrap: nowrap;
}

.sidebar-content-panel .notebook-operation-bar .add-and-more-button span {
	border-radius: 100%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: row;
	flex-wrap: nowrap;
}

.sidebar-content-panel .notebook-operation-bar .list-sort-options {
	margin-right: 10px;
}

.sidebar-content-panel .notebook-operation-bar .add-and-more-button span:hover {
	background: #6a6c6c;
}


.delete-current-sort {
	color: red;
}

.sidebar-content-panel .sidebar-footer-add-new-notebook-area .add-new-notebook-button span {
	color: #555555;
	font-weight: bold;
	margin-left: 30px;
	height: 18px;
}

.sidebar-content-panel .sidebar-footer-add-new-notebook-area .add-new-notebook-button svg {
	width: 20px;
	height: 20px;
	margin-left: 16px;
}

.sidebar-content-panel .sidebar-footer-add-new-notebook-area .add-new-notebook-button svg path {
	fill: #555555;
}

.sidebar-notebook-item {
	position: relative;
}


.react-resizable {
	height: 100%;
}

/* 自定义的拖动手柄 */

.resize-handle-container {
	background: var(--sider-handle);
	position: fixed; /* 固定在视口 */
	top: 0; /* 固定到顶部 */
	right: 0; /* 固定到右侧 */
	height: 100%;
	z-index: 10; /* 确保在上层 */
	cursor: col-resize;
	width: 2px;
}

.custom-resize-handle {
	/*width: 2px;*/
	/*background-color: rgba(0, 0, 0, 0.1);*/
	/*cursor: col-resize;*/
}

.resize-handle-container:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.react-resizable {
	padding: 0;
}

.create-notebook-text {
	color: #03a9f4;
	text-decoration: underline;
	font-style: italic;
	cursor: pointer;
}

.resizable-box {
	position: relative;
	height: 100vh;
}


.username-setting {
	box-sizing: border-box;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	margin: 0 16px;
}

.username-setting .avatar-username-email {
	box-sizing: border-box;
	height: 50px;
	display: flex;
	flex-flow: row;
	align-items: center;
}

.username-setting .username-email {
	box-sizing: border-box;
	display: flex;
	flex-flow: column;
	padding: 10px;
	margin: 0 16px;
}

.username-setting .username-email p {
	margin: 0;
}

.ant-collapse-item > .ant-collapse-content > .ant-collapse-content-box.notebook-lists-content {
	margin-left: 30px;
	padding: 16px;
	max-height: 500px;
	overflow-y: auto;
}

.all-sorts-notebook {
	height: 100%;
	overflow: auto;
}

.all-sorts-notebook::-webkit-scrollbar {
	width: 6px; /* 宽度 */
}

/* 滚动条上的滚动滑块 */
.all-sorts-notebook::-webkit-scrollbar-thumb {
	background-color: var(--siderbar-svg-hover-bg); /* 滑块背景色 */
	border-radius: 4px; /* 圆角 */
}

/* 滚动条轨道 */
.all-sorts-notebook::-webkit-scrollbar-track {
	background-color: var(--siderbar-icon-hover-bg); /* 轨道背景色 */
}


.notebook-lists-content {
	margin-left: 30px;
	box-sizing: border-box;
	padding: 0 6px 0 16px;
	/*max-height: calc(100% - 80px);*/
	/*max-height: 70vh;*/
	/*overflow-y: auto;*/
}

/*.notebook-lists-content::-webkit-scrollbar {*/
/*	width: 4px; !* 宽度 *!*/
/*}*/

/*!* 滚动条上的滚动滑块 *!*/
/*.notebook-lists-content::-webkit-scrollbar-thumb {*/
/*	background-color: #d7d7d7; !* 滑块背景色 *!*/
/*	border-radius: 2px; !* 圆角 *!*/
/*}*/

/*!* 滚动条轨道 *!*/
/*.notebook-lists-content::-webkit-scrollbar-track {*/
/*	background-color: #f1f1f1; !* 轨道背景色 *!*/
/*}*/

.sidebar-menu-list {
	width: 100%;
}

.ant-menu {
	width: 100%;
}

.ant-menu-light.ant-menu-root.ant-menu-inline {
	border-inline-end: none;
}

.ant-menu-light.ant-menu-inline .ant-menu-sub.ant-menu-inline {
	background-color: white;
}


.ant-menu-inline.ant-menu-root .ant-menu-item, .ant-menu-inline.ant-menu-root .ant-menu-submenu-title {
	margin: 0;
	padding-left: 0 !important;
	width: 100%;
}

.ant-divider-horizontal {
	margin: 0px 0;
}

.sidebar-book-container {
	width: 100%;
	height: calc(100% - 28px)
}

.empty-container {
	height: calc(100% - 60px);
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column wrap;
}

.empty-container svg path {
	fill: var(--primary-text-color);
}

.empty-container p {
	color: var(--primary-text-color);
}

.empty-container p {
	font-size: 16px;
	/*margin-bottom: 80px;*/
}

html,
body {
	transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
	/*overflow: hidden;*/
	width: 100%;
	height: 100%;
	
}

body {
	/*background: #ffffff;*/
	font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.resizable-box.react-resizable {
	transition: all .2s ease;
	background: #ffffff;
	
}

.resizable-box::-webkit-scrollbar {
	display: none;
}

.collpased {
	padding: 0;
	margin: 0;
}

.dropdown-delete-notebook-button {
	color: red;
}

.show-mode-box {
	padding: 24px;
	box-sizing: border-box;
	height: calc(100% - 50px);
	overflow-x: hidden;
	overflow-y: auto;
}

.show-mode-box::-webkit-scrollbar-button {
	display: none;
}

.show-mode-box::-webkit-scrollbar {
	display: inline-block;
	width: 6px;
}

.show-mode-box::-webkit-scrollbar-track {
	background: transparent;
}

.show-mode-box::-webkit-scrollbar-thumb {
	background: lightgray;
	width: 6px;
	border-radius: 4px;
}

.show-mode-box::-webkit-scrollbar-thumb:hover {
	background:darkgray;
}


.resizing {
	transition: unset !important;
}

.time-and-book{
	display: flex;
	align-items: center;
	flex-flow: row nowrap;
}
.note-list-sub-title {
	user-select: none;
	font-size: 14px;
	margin: 8px 0 8px 0;
	color: var(--primary-text-color);
}

/*宫格模式 ,卡片模式和列表模式分别设置不同的ul和noteItem*/
.note-item-title {
	color: var(--note-content-color);
	font-size: 16px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5; /* 设置行高 */
	height: calc(1.5em * 1); /* 根据行高和显示的行数计算最大高度 */
	white-space: pre-wrap;
	/*font-weight: bolder;*/
}

.note-card-mode {
	display: grid;
	/*grid-template-columns: repeat(2, 1fr);*/
	gap: 16px;
}

.note-card-mode-item {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	line-height: 1.5;
	/*width: calc(50% - 8px);*/
	/*height: calc(1.5em * 6 + 62px);*/
	background: var(--note-input-bg-color);
	color: var(--note-content-color);
	padding: 4px;
	box-sizing: border-box;
	transition: box-shadow 0.1s ease-in-out;
	border: 2px solid transparent;
	opacity: 0.9;
}

.note-card-mode-item:hover {
	cursor: pointer;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	/*box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);*/
}

.note-card-mode-content {
	color: var(--note-content-color);
	font-size: 14px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/*-webkit-line-clamp: 6;*/
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5; /* 设置行高 */
	min-height: calc(1.5em * 6);
	/*height: calc(1.5em * 7); */
	white-space: pre-wrap;
	word-wrap: break-word; /* 强制长文本换行 */
	word-break: break-word; /* 强制长文本换行，尤其是数字 */
}

.note-card-mode-item:has(.note-item-title) .note-card-mode-content {
	-webkit-line-clamp: 6;
	height: calc(1.5em * 6);
}

.note-card-mode-item:not(:has(.note-item-title)) .note-card-mode-content {
	-webkit-line-clamp: 7;
	height: calc(1.5em * 7);
}

.note-grid-mode-content {
	color: var(--note-content-color);
	font-size: 14px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 6;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5; /* 设置行高 */
	max-height: calc(1.5em * 6); /* 根据行高和显示的行数计算最大高度 */
	height: fit-content;
	white-space: pre-wrap;
	word-wrap: break-word; /* 强制长文本换行 */
	word-break: break-word; /* 强制长文本换行，尤其是数字 */
}

.note-grid-mode {
	display: block; /* 变为块级元素 */
}

.note-grid-mode-item {
	display: flex;
	flex-flow: row;
	background: var(--note-input-bg-color);
	color: var(--note-content-color);
	border-radius: 8px;
	padding: 4px;
	box-sizing: border-box;
	margin-bottom: 16px;
	/*width: calc(50% - 8px); !* 保持宽度大约为父容器的一半 *!*/
	transition: box-shadow 0.1s ease-in-out;
	border: 2px solid transparent;
	opacity: 0.9;
}

.note-grid-mode-2-columns .note-grid-mode-item {
	width: calc(50% - 8px); /* 两列布局 */
}

.note-grid-mode-3-columns .note-grid-mode-item {
	width: calc(33.33% - 10.67px); /* 三列布局 */
}

.note-grid-mode-4-columns .note-grid-mode-item {
	width: calc(25% - 12px); /* 四列布局 */
}


.note-grid-mode-5-columns .note-grid-mode-item {
	width: calc(20% - 12.8px); /* 四列布局 */
}


.note-grid-mode-item:hover {
	cursor: pointer;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
	/*box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);*/
}

.note-ul-mode {
	width: 100%;
	height: 100%;
	flex-flow: column;
	display: flex;
}

.note-ul-mode-item {
	display: flex;
	flex-direction: row;
	line-height: 1.5;
	height: fit-content;
	width: 100%;
	background: var(--note-input-bg-color);
	color: var(--note-content-color);
	padding: 10px;
	/*z-index: 10;*/
	box-sizing: border-box;
	/*margin-bottom: 16px;*/
	transition: box-shadow 0.1s ease-in-out;
	opacity: 1;
	border-bottom: 1px solid lightgray;
	border-left: 6px solid transparent;
}

.note-ul-mode-item:hover {
	border-radius: 6px;
	border-bottom: 1px solid transparent;
	border-left: 6px solid limegreen;
	background: #f9fdf5;
	background: #f9fbee;
	background: #fbfdf6;
	cursor: pointer;
	/*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);*/
	/*box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);*/
}
.note-ul-mode-item:has(.note-item-title) .note-ul-mode-content{
	display: none;
}

.note-ul-mode-content {
	color: var(--note-content-color);
	font-size: 14px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	/*-webkit-line-clamp: 6;*/
	-webkit-line-clamp: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 1.5; /* 设置行高 */
	/*max-height: calc(1.5em * 6); */
	max-height: calc(1.5em * 1); 
	height: fit-content;
	white-space: pre-wrap;
	word-wrap: break-word; /* 强制长文本换行 */
	word-break: break-word; /* 强制长文本换行，尤其是数字 */
}

.note-details {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	height: 32px;
	width: 100%;
}

.note-details:has(.time-and-book){
	justify-content: space-between;
}

.note-details:has(.deadline-text){
	justify-content: space-between;
}

.note-details:not(:has(.deadline-text)){
	/*justify-content: flex-end;*/
}

.note-details:has(.show-note-book-text){
	justify-content: space-between;
}

.note-time {
	margin-right: 4px;
	font-size: 12px;
	color: #8b8a8a;
}

.show-note-book-text {
	color: var(--primary-text-color);
	background-color: var(--show-note-book-text-bg-color);
	margin-right: 4px;
	font-size: 12px;
	border-radius: 4px;
	padding: 0px 4px;
}

.show-noteList-box:has(.note-ul-mode) .note-operation-buttons {
	width:60%;
}

.show-noteList-box:has(.note-grid-mode) .note-operation-buttons:has(.pin-note-button) {
	width: 70%;
}

.show-noteList-box:has(.note-card-mode) .note-operation-buttons:has(.pin-note-button) {
	width: 70%;
}

.show-noteList-box:has(.note-grid-mode) .note-operation-buttons:not(:has(.pin-note-button)) {
	width: 70%;
}

.show-noteList-box:has(.note-card-mode) .note-operation-buttons:not(:has(.pin-note-button)) {
	width: 70%;
}

.note-operation-buttons {
	visibility: hidden;
	user-select: none;
	cursor: pointer;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	transition: visibility 0.2s ease-in-out;
}

.note-operation-buttons .note-buttons-common {
	background: transparent;
	border-radius: 32px;
	height: 32px;
	width: 32px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.note-operation-buttons .note-buttons-common svg {
	width: 16px;
	height: 16px;
}

.note-operation-buttons .note-buttons-common:hover {
	background: var(--siderbar-icon-hover-bg);
}

.note-card-mode-item:hover .note-operation-buttons {
	visibility: visible;
}

.note-ul-mode-item:hover .note-operation-buttons {
	visibility: visible;
}

.note-grid-mode-item:hover .note-operation-buttons {
	visibility: visible;
}

.note-card-mode-item:hover .check-note-button {
	visibility: visible;
}

.note-ul-mode-item:hover .check-note-button {
	visibility: visible;
}

.note-grid-mode-item:hover .check-note-button {
	visibility: visible;
}

.note-operation-buttons:has(.notebooks-popover) .move-note-button path {
	fill: #539af0;
}

.note-operation-buttons:has(.note-delete-popConfirm) .delete-note-icon path {
	fill: red;
}

.note-operation-buttons .note-buttons-common:hover .delete-note-icon path {
	fill: red;
}

.note-operation-buttons .note-buttons-common:hover .deadline-icon path {
	/*fill: orange;*/
}

.note-operation-buttons .note-buttons-common:hover .star-button path {
	/*fill: gold;*/
}

.note-operation-buttons .note-buttons-common:hover .pin-note-button path {
	/*fill: #000000;*/
}

.note-operation-buttons .note-buttons-common:hover .move-note-button path {
	/*fill: #539af0;*/
}

.check-note-button {
	height: fit-content;
	visibility: hidden;
	background: transparent;
	border-radius: 100%;
	/*height: 32px;*/
	/*width: 32px;*/
	display: flex;
	justify-content: center;
	align-items: center;
	transition: visibility 0.2s ease-in-out;;
}

.check-note-button:hover .check-note-icon path {
	/*fill: #ffd512;*/
	/*fill: black;*/
}
.check-note-button:hover{
	background: var(--siderbar-icon-hover-bg);
}

.check-note-button svg.check-note-icon {
	width: 16px;
	height: 16px;
}

.check-note-button .check-note-icon.isChecked path {
	fill: black;
	fill: var(--selected-icon-bg);
}

.show-noteList-box .deadline-text {
	color: #999c9f;
	font-size: 14px;
}

.show-noteList-box .deadline-text.blue {
	color: #699fd7;
	font-size: 14px;
}

.show-noteList-box .deadline-text.red {
	color: #f14b6c;
	font-size: 14px;
}

.show-noteList-box .checked-note {
	border: 2px solid;
	border-color: var(--selected-icon-bg);
}

.show-noteList-box .checked-note .check-note-button {
	visibility: visible;
}

.show-noteList-box:has(.checked-note) .note-ul-mode-item .note-operation-buttons {
	visibility: hidden;
}

.show-noteList-box:has(.checked-note) .note-card-mode-item .note-operation-buttons {
	visibility: hidden;
}

.show-noteList-box:has(.checked-note) .note-grid-mode-item .note-operation-buttons {
	visibility: hidden;
}

.note-ul-mode-item:has(.completed-todo-icon) .note-operation-buttons {
	visibility: hidden;
}

.note-card-mode-item:has(.completed-todo-icon) .note-operation-buttons {
	visibility: hidden;
}
.note-grid-mode-item:has(.completed-todo-icon) .note-operation-buttons {
	visibility: hidden;
}



.note-ul-mode-item:has(.completed-todo-icon) .note-ul-mode-content {
	color: #8e8f90;
	text-decoration: line-through;
}

.note-card-mode-item:has(.completed-todo-icon) .note-card-mode-content {
	color: #8e8f90;
	text-decoration: line-through;
}

.note-grid-mode-item:has(.completed-todo-icon) .note-grid-mode-content {
	color: #8e8f90;
	text-decoration: line-through;
}

.note-ul-mode-item:has(.completed-todo-icon) .note-item-title {
	color: #8e8f90;
	text-decoration: line-through;
}

.note-card-mode-item:has(.completed-todo-icon) .note-item-title {
	color: #8e8f90;
	text-decoration: line-through;
}

.note-grid-mode-item:has(.completed-todo-icon) .note-item-title {
	color: #8e8f90;
	text-decoration: line-through;
}


.common-note-item {
	width: 100%;
	display: flex;
	flex-flow: column wrap;
}

.pin-note path {
	fill: #000000;
}

.main-section-header .emoji-and-title {
	font-size: 24px;
	font-weight: bolder;
	font-family: Arial, sans-serif;
	width: fit-content;
	margin-left: 16px;
	user-select: none;
	white-space: nowrap;
	color: var(--primary-text-color);
	display: flex;
	align-items: center;
	flex-flow: row nowrap;
}

.main-section-header .emoji-and-title .notebook-emoji {
	margin-right: 2px;
	width: 40px;
	height: 40px;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.main-section-header .emoji-and-title .notebook-emoji:hover {
	background: #eeedec;
}

.main-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-flow: row nowrap;
	height: 50px;
	/*border-bottom: 1px solid;*/
	/*border-color: var(--primary-text-color);*/
}

.main-section-header .notelist-header-icon {
	/*margin-right: 30px;*/
	/*background:  transparent;*/
	border-radius: 40px;
	height: 40px;
	width: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.main-section-header .notelist-header-icon:hover {
	background: #eeedec;
}

.selected-mode {
	background: var(--header-icon-background);
	/*border-color: var(--primary-text-color);*/
}

.note-title-bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: fit-content;
	/*margin-left: 20px;*/
}

.rename-notebook-title-input {
	/*height: 28px;*/
	font-size: 24px;
	font-weight: bold;
	width: fit-content;
	outline: none;
	border: none;
	/*border-bottom: 1px solid black;*/
	background: transparent;
}

.emoji-popover .ant-popover-inner {
	padding: 4px;
}

.emoji-popover-panel::-webkit-scrollbar {
	width: 2px; /* 宽度 */
}

/* 滚动条上的滚动滑块 */
.emoji-popover-panel::-webkit-scrollbar-thumb {
	background-color: var(--siderbar-svg-hover-bg); /* 滑块背景色 */
	border-radius: 4px; /* 圆角 */
}

/* 滚动条轨道 */
.emoji-popover-panel::-webkit-scrollbar-track {
	background-color: var(--siderbar-icon-hover-bg); /* 轨道背景色 */
}

.emoji-popover-panel {
	display: grid;
	padding: 10px;
	height: 200px;
	overflow-y: auto;
	grid-template-columns: repeat(6, 1fr);
}

.emoji-popover-panel .emoji-little-box {
	font-size: 20px;
	cursor: pointer;
	user-select: none;
}

.top-tool-bar {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: space-between;
	margin-right: 24px;
}

.expand-icon {
	cursor: pointer;
}

.delete-confirm-title {
	color: red;
	font-weight: bold;
	padding: 0 4px;
}

.add-new-note-section {
	display: flex;
	width: 100%;
	justify-content: center;
	flex-direction: row;
	margin: 0px 0 20px 0;
}

/*输入框*/
.add-note-input {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: 1px solid;
	border-color: var(--input-border-color);
	border-radius: 6px;
	outline: none;
	padding: 4px;
	width: 50%;
	background: var(--note-input-bg-color);
	height: 40px;
	font-size: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input-and-edit {
	display: flex;
	align-items: center;
	flex-direction: column;
	width: calc(100% - 16px);
}

.edit-item-cancel-button {
	margin-top: 6px;
	width: 16px;
	display: flex;
	justify-content: center;
}

.edit-item-cancel-button .cancel-edit-button {
	width: 16px;
	height: 16px;
}

.edit-item-cancel-button svg:hover path {
	fill: red;
	cursor: pointer;
}

.edit-item-cancel-button svg {
	height: 14px;
	width: 14px;
	cursor: pointer;
}

.note-info-input-section {
	background: var(--note-input-bg-color);
	box-sizing: border-box;
	border-radius: 6px;
	display: flex;
	width: 50%;
	flex-direction: row;
	border: 1px solid;
	border-color: var(--input-border-color);
	transition: all 0.6s ease;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.note-info-input-section .edit-note-options .edit-note-icons svg path {
	fill: var(--note-content-color);
}

.note-title-input {
	padding: 4px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: none;
	outline: none;
	width: 100%;
	background: white;
	height: 40px;
	font-size: 16px;
	border-top-right-radius: 6px;
	border-top-left-radius: 6px;
}

.input-note-textarea {
	padding: 0px 4px 4px 4px;
	transition: height 0.3s ease;
	resize: none;
	font-family: "Microsoft YaHei UI";
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: none;
	outline: none;
	width: 100%;
	background: white;
	min-height: calc(2 * 1.5em); /* 2行，每行1.5倍行高 */
	max-height: 500px;
	height: auto;
	overflow: hidden;
	line-height: 1.5;
	font-size: 14px;
}

.input-note-textarea::-webkit-scrollbar {
	display: inline-block;
	width: 2px;
}

.input-note-textarea::-webkit-scrollbar-thumb {
	background: #c4c4c4;
	border-radius: 4px;
	width: 2px;
	height: 4px;
}

.edit-note-icons {
	width: 40%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}


.add-new-note-input {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: 1px solid;
	border-color: var(--primary-text-color);
	border-radius: 6px;
	outline: none;
	padding: 0px 4px;
	width: calc(100% - 56px);
	background: white;
	height: 40px;
	font-size: 16px;
	position: absolute;
	right: 28px;
	left: 24px;
}

/* 按钮（放大镜）样式 */
.search-btn {
	background-color: transparent;
	border: none;
	cursor: pointer;
	padding: 5px;
	width: fit-content;
	height: fit-content;
	font-size: 16px;
}


.preview-area {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
}

.preview-area .preview-img {
	text-align: center;
	width: 100%;
	position: relative;
}

.preview-area img {
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.15);
	width: 100%;
	height: 220px;
	object-fit: cover;
}


.preview-title {
	max-width: 100%;
	height: 20px;
	margin: 8px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.note-title-bar {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.note-title-bar .down-outline-box {
	height: 24px;
	width: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.expand-icon {
	height: 40px;
	width: 40px;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 4px;
}

.expand-icon:hover {
	background: var(--header-icon-background);
}

.moreOptionContainer {
	box-sizing: border-box;
	width: fit-content;
	height: fit-content;
	cursor: pointer;
	user-select: unset;
	background: white;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
	
}

.option-item {
	padding: 5px;
	background-color: white;
}

.add-NB-modal-content {
	width: 100%;
	height: fit-content;
	display: grid;
	grid-template-columns: 60% 40%;
}

.add-NB-modal-content-plain {
	width: 100%;
	height: fit-content;
	display: grid;
}

.add-NB-modal-content-plain .emoji-item {
	user-select: none;
	width: 30px;
	height: 30px;
	font-size: 20px;
	margin-right: 6px;
	cursor: pointer;
}

.plain-mode-emoji-input {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.plain-mode-emoji-input .ant-input-outlined {
	background: var(--modal-bg);
}

.plain-mode-emoji-input .ant-input-clear-icon {
	color: var(--siderbar-icon-color);
}


.plain-mode-emoji-input .ant-input-affix-wrapper {
	color: var(--siderbar-font-color);
}

.plain-mode-emoji-input .ant-input-affix-wrapper > input.ant-input::placeholder {
	color: var(--siderbar-svg-hover-bg);
}


.add-emoji-icon {
	box-sizing: border-box;
	font-size: 20px;
	margin-right: 8px;
	display: flex;
	/*flex-flow: row nowrap;*/
	align-items: center;
	justify-content: center;
	height: 36px;
	width: 36px;
	border-radius: 100%;
	border-right: 30px;
	cursor: pointer;
}

.add-emoji-icon svg path {
	fill: var(--siderbar-icon-color);
}

.add-emoji-icon:hover {
	background: var(--siderbar-icon-hover-bg);
}

.plain-mode-emoji-input:has(.add-emoji-icon) .ant-input-affix-wrapper {
	width: calc(100% - 40px);
}

.add-NB-modal-content .title-input {
	width: 96%;
	color: var(--siderbar-font-color);
	background: var(--modal-bg);
}

.add-NB-modal-content .title-input .ant-input-clear-icon {
	color: var(--siderbar-font-color);
}

.add-NB-modal-content .title-input .ant-input::placeholder {
	color: var(--siderbar-font-color);
}

.edit-note-modal .ant-modal .ant-modal-body {
	max-height: calc(100vh - 180px);
	/*height: calc(100vh - 114px);*/
}

.edit-note-modal .ant-modal-content {
	background: var(--note-input-bg-color);
}

.ant-input-outlined:hover {
	border: 1px solid;
	border-color: var(--siderbar-font-color);
}

.ant-input-outlined:focus {
	border: 1px solid black;
	box-shadow: none;
}

.ant-input-outlined:focus-within {
	border: 1px solid;
	box-shadow: none;
	border-color: var(--siderbar-font-color);
}

.ant-modal .ant-modal-content {
	padding: 18px;
}

.edit-NB-info {
	width: 100%;
	padding-right: 20px;
	box-sizing: border-box;
}

.edit-NB-info p {
	margin: 8px 0;
}

.edit-NB-info .cover-file-upload {
	display: inline-block;
	padding: 5px 10px;
	background-color: #1890ff; /* Ant Design 蓝色 */
	color: white;
	border-radius: 4px;
	cursor: pointer;
	font-size: 14px;
	text-align: center;
}

.img-cover-box {
	overflow-y: scroll;
	height: 204px;
	display: grid;
	grid-template-columns:repeat(4, 1fr);
	width: fit-content;
	gap: 6px;
}

.img-cover-box::-webkit-scrollbar {
	display: inline-block;
	width: 2px;
	height: 4px;
}

.img-cover-box::-webkit-scrollbar-thumb {
	background: #9c9a9a;
	border-radius: 4px;
	width: 2px;
	height: 4px;
}

.img-cover-box img {
	cursor: pointer;
	object-fit: cover;
	box-shadow: 2px 2px 4px #c7c6c6;
}

.ant-tooltip {
	/*font-size: 10px;*/
}

.ant-tooltip .ant-tooltip-inner {
	min-height: unset;
}
.ant-tooltip .ant-tooltip-inner{
	padding: 2px 6px;
}
.field {
	width: fit-content;
}

.lab {
	display: flex;
	align-items: center;
	width: fit-content;
	height: fit-content;
	background-color: #eeeeee;
	border-bottom: 1px solid #d9d9d9;
}

.content {
	width: fit-content;
	height: 0;
	overflow: hidden;
	transition: height .3s linear;
}

.ipt {
	display: none;
}

.ipt:checked ~ .content {
	height: fit-content;
}

.ipt:checked ~ .lab svg {
	transform: rotate(-180deg);
}


.star-button {
	cursor: pointer;
	transition: fill 0.2s;
}

.star-button-active path {
	fill: gold;
}

.star-button-active {
	animation: shake-and-scale 0.5s ease-in-out;
}

@keyframes shake-and-scale {
	0% {
		transform: rotate(0) scale(1.3);
	}
	25% {
		transform: rotate(20deg) scale(1.3);
	}
	50% {
		transform: rotate(-20deg) scale(1.3);
	}
	75% {
		transform: rotate(5deg) scale(1.3);
	}
	100% {
		transform: rotate(5deg) scale(1);
	}
}


.ant-modal-root .ant-modal-mask {
	position: fixed;
	inset: 0;
	z-index: 1000;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.75);
	pointer-events: none;
}

.highlight-title-part {
	background: yellow;
}

.dark-mode-highlight-title-part {
	background: #5f79bd;
}

.note-title-section {
	position: relative;
	height: 44px;
}

.highlight-note-title {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: none;
	outline: none;
	color: transparent;
	background: transparent;
	font-size: 24px;
	height: 100%;
	white-space: nowrap;
	font-family: inherit;
	overflow: hidden;
	line-height: 1.5;
}

.note-item-title-input {
	color: var(--note-content-color);
	height: 100%;
	position: relative;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: none;
	outline: none;
	background: transparent;
	z-index: 2;
	font-size: 24px;
	white-space: nowrap;
	font-family: inherit;
	overflow: hidden;
	line-height: 1.5;
	/*border-bottom: 1px solid #141414;*/
}

.add-note-input::placeholder {
	color: #b3b7bf;
}

.note-item-title-input::placeholder {
	color: #b3b7bf;
}


.seach-note-menu span {
	color: #555555;
	/*font-weight: bold;*/
	margin-left: 30px;
	height: 21px;
	font-size: 16px;
	vertical-align: middle;
}

.search-input {
	background: transparent;
	color: #f1f3f4;
	vertical-align: middle;
	box-sizing: border-box;
	padding: 0px;
	font-size: 16px;
	width: calc(100% - 30px);
	/*height: 21px;*/
	/*margin: 0px 0px 0 14px;*/
	outline: none;
	border: none;
	/*cursor: pointer;*/
}

/*.search-input.active-search-input {*/
/*	background: #dbecff;*/
/*	cursor: auto;*/
/*}*/


.search-input::placeholder {
	color: #f1f3f4;
	/*color: #202124;*/
	/*font-weight: bold;*/
}

.search-input:focus::placeholder {
	color: #bfc1c2;
	
}

.search-input:focus {
	cursor: auto;
	/*font-weight: bold;*/
}

.search-input:focus {
	cursor: auto;
	/*font-weight: bold;*/
}

.search-input:focus {
	caret-color: white;
	
}

.notebooks-popover .notebooks-popover-item {
	padding: 4px;
	border-radius: 4px;
	cursor: pointer;
}

.notebooks-popover .notebooks-popover-item:hover {
	background: #eeeeee;
}

.notebooks-popover.ant-popover .ant-popover-inner {
	max-height: 240px;
	overflow-y: auto;
	padding: 6px;
}

.notebooks-popover.ant-popover .ant-popover-content {
	/*height: 300px;*/
	/*overflow-y: auto;*/
}

.notebooks-popover.ant-popover .ant-popover-content .ant-popover-inner::-webkit-scrollbar {
	display: block;
	width: 4px; /* 宽度 */
}

/* 滚动条上的滚动滑块 */
.notebooks-popover.ant-popover .ant-popover-content .ant-popover-inner::-webkit-scrollbar-thumb {
	background-color: #d7d7d7; /* 滑块背景色 */
	border-radius: 2px; /* 圆角 */
}

/* 滚动条轨道 */
.notebooks-popover.ant-popover .ant-popover-content .ant-popover-inner::-webkit-scrollbar-track {
	background-color: #f1f1f1; /* 轨道背景色 */
}

.ant-modal-confirm-btns .ant-btn:not(:disabled):focus-visible {
	outline: none;
}

.notebook-amount {
	font-size: 16px;
	display: flex;
	align-items: center;
	flex-flow: row nowrap;
}

.recycleBin-mention {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
	height: fit-content;
}

.recycleBin-mention span:last-child {
	border: 1px solid black;
	margin-left: 8px;
	padding: 4px;
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
	border-radius: 4px;
	user-select: none;
	cursor: pointer;
}

.recycleBin-mention span:first-child {
	color: var(--siderbar-font-color);
}

.recycleBin-mention span {
	user-select: none;
}

.recycleBin-mention span:last-child:hover {
	color: red;
}

.input-new-sort {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: 1px solid;
	border-color: var(--siderbar-font-color);
	border-radius: 6px;
	outline: none;
	padding: 4px;
	width: 100%;
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
	height: 32px;
	font-size: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.input-sort-modal .ant-modal-content {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.input-sort-modal .ant-btn-variant-outlined {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}


.input-sort-modal .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.feedback-copy-button {
	display: flex;
	align-items: center;
	flex-flow: row nowrap;
	cursor: pointer;
	text-decoration: underline;
}

.feedback-copy-button svg {
	margin-right: 10px;
}

.setting-modal .ant-modal-content {
	padding: 20px 6px 20px 20px;
	width: 36vw;
	height: 58vh;
	overflow-y: auto;
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}


.setting-modal .ant-modal-content svg path {
	fill: var(--siderbar-font-color);
}

.setting-modal .ant-modal-content .ant-modal-body {
	height: 100%;
}

.setting-modal .ant-modal-content .setting-modal-content {
	height: 100%;
}

.setting-modal .ant-modal-content .setting-modal-content .selected-setting-radio {
	/*background:var(--active-radio-btn-bg);*/
	/*color: white;*/
}

.open-no-cover-mode {
	margin-bottom: 14px;
}

.setting-modal .ant-modal-content .setting-modal-content .setting-radio-button {
	width: 80%;
	padding: 6px 10px;
	border-radius: 16px;
	border: 1px solid #d2d6d6;
	/*border-color: var(--siderbar-font-color);*/
	cursor: pointer;
	/*color: var(--siderbar-bg-color);*/
	text-align: center;
	/*box-shadow: 0 1px 2px 0 rgb(139, 142, 145), 0 1px 3px 1px rgb(220, 222, 224);*/
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.setting-modal .ant-modal-content .setting-modal-content .setting-radio-button .radio-button-circle {
	border-radius: 100%;
	width: 20px;
	height: 20px;
	background: var(--modal-bg);
	border: 1px solid #d7d9dc;
}

.setting-modal .ant-modal-content .setting-modal-content .selected-setting-radio .radio-button-circle {
	background: var(--active-radio-btn-bg);
	
}

.setting-modal .setting-radio-group {
	display: grid;
	width: 100%;
	grid-template-rows: repeat(auto-fit, minmax(20%, 1fr));
	gap: 10px;
	margin-bottom: 14px;
}

.setting-modal-content {
	display: grid;
	grid-template-columns: 25% 75%;
	/*height: 200px;*/
}

.setting-modal-content .setting-sidebar {
	display: flex;
	flex-flow: column;
	flex-wrap: nowrap;
	border-right: 1px solid #eeeeee;
	padding-right: 10px;
}

.setting-modal-content .setting-sidebar .setting-item {
	/*font-size: 16px;*/
	/*cursor: pointer;*/
	/*user-select: none;*/
	/*border-radius: 100%;*/
	/*width: 50px;*/
	/*height: 50px;*/
	/*display: flex;*/
	/*justify-content: center;*/
	/*align-items: center;*/
	/*margin: 2px 0 0px 16px;*/
}

.setting-modal-content .setting-sidebar .setting-item {
	font-size: 16px;
	margin-bottom: 6px;
	cursor: pointer;
	user-select: none;
	border-radius: 6px;
	padding: 4px 0 6px 16px;
}

.setting-modal-content .setting-sidebar .setting-item:hover {
	background: var(--siderbar-icon-hover-bg);
}

.setting-modal-content .setting-sidebar .setting-item.active-setting-item {
	background: var(--active-bg-color);
}

.setting-modal-content .setting-panel {
	overflow: auto;
	padding: 10px 24px 0 24px;
}

.setting-modal-content .setting-panel p {
	margin: 8px 0 14px 0;
	font-weight: 700;
}

.setting-modal-content .setting-panel::-webkit-scrollbar {
	width: 6px; /* 垂直滚动条宽度 */
	height: 8px; /* 水平滚动条高度 */
}

/* 滚动条轨道 */
.setting-modal-content .setting-panel::-webkit-scrollbar-track {
	background: #f1f1f1; /* 轨道背景色 */
	border-radius: 4px;
}

/* 滚动条滑块 */
.setting-modal-content .setting-panel::-webkit-scrollbar-thumb {
	background: #9fa0a1; /* 滑块颜色 */
	border-radius: 4px;
}

/* 滑块悬停时 */
.setting-modal-content .setting-panel::-webkit-scrollbar-thumb:hover {
	background: #555555;
}


.theme-mode-radios .ant-radio-button-wrapper {
	color: var(--siderbar-font-color);
	background: var(--siderbar-icon-hover-bg);
}

.sidebar-menu-dropdown .ant-dropdown-menu {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.sidebar-menu-dropdown .ant-dropdown-menu .ant-dropdown-menu-title-content {
	color: var(--siderbar-font-color);
}


.sidebar-menu-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:hover {
	background: var(--siderbar-icon-hover-bg);
}

.note-display-mode-dropdown .ant-dropdown-menu {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.note-display-mode-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-selected {
	background: var(--active-bg-color);
}

.note-display-mode-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-group-list .ant-dropdown-menu-item-selected:hover {
	background: var(--active-bg-color);
}

.note-display-mode-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-group-title {
	color: var(--siderbar-font-color);
}

.note-display-mode-dropdown .ant-dropdown-menu .ant-dropdown-menu-title-content {
	color: var(--siderbar-font-color);
}


.note-display-mode-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:hover {
	background: var(--siderbar-icon-hover-bg);
}

.notebook-dropdown-menu .ant-dropdown-menu {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.notebook-dropdown-menu .ant-dropdown-menu .ant-dropdown-menu-title-content {
	/*color: var(--siderbar-font-color);*/
}


.notebook-dropdown-menu .ant-dropdown-menu .ant-dropdown-menu-item:hover {
	background: var(--siderbar-icon-hover-bg);
}

.notebook-dropdown-menu .ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover {
	background: var(--siderbar-icon-hover-bg);
}

.notebook-dropdown-menu .ant-dropdown-menu .ant-dropdown-menu-submenu {
	color: var(--siderbar-font-color);
}


.notebook-dropdown-menu .ant-dropdown-menu .ant-dropdown-menu-submenu .ant-dropdown-menu {
	color: var(--siderbar-font-color);
	background: var(--siderbar-icon-hover-bg);
}

.notebook-dropdown-menu .ant-dropdown-menu .ant-dropdown-menu-sub {
	background: gray;
}

.notebook-dropdown-menu .ant-dropdown-menu .ant-dropdown-menu-submenu .ant-dropdown-menu-submenu-placement-rightTop {
	color: var(--siderbar-font-color);
	background: var(--siderbar-icon-hover-bg);
}

.colors-popover .ant-popover-inner {
	background: var(--modal-bg);
}


.addNotebook-modal .ant-modal-content {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.addNotebook-modal .ant-modal-title {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.addNotebook-modal .ant-btn-variant-outlined {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.addNotebook-modal .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown-menu-sub {
	background-color: var(--modal-bg); /* 子菜单背景色 */
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown-menu-sub .ant-dropdown-menu-item {
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown-menu-sub .ant-dropdown-menu-item:hover {
	background: var(--siderbar-icon-hover-bg);
}

.note-dark-mode .ant-dropdown .ant-dropdown-menu {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item {
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item:hover {
	background: var(--siderbar-icon-hover-bg);
}

.note-dark-mode .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title {
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title:hover {
	background: var(--siderbar-icon-hover-bg);
}

.note-dark-mode .ant-dropdown {
	color: var(--siderbar-font-color);
}

.note-dark-mode .notebooks-popover.ant-popover .ant-popover-inner {
	background: var(--modal-bg);
}

.note-dark-mode .notebooks-popover.ant-popover .ant-popover-inner .ant-popover-inner-content {
	color: var(--siderbar-font-color);
}

.note-dark-mode .notebooks-popover.ant-popover .ant-popover-inner .ant-popover-inner-content {
	color: var(--siderbar-font-color);
}

.note-dark-mode .notebooks-popover.ant-popover .ant-popover-inner .ant-popover-inner-content .notebooks-popover-item:hover {
	background: var(--siderbar-icon-hover-bg);
}

.note-dark-mode .notebooks-popover.ant-popover .ant-popover-arrow:before {
	background: var(--modal-bg);
}

.note-dark-mode .ant-popover-inner {
	background: var(--modal-bg);
}

.note-dark-mode .ant-popover-arrow:before {
	background: var(--modal-bg);
}

.note-dark-mode .ant-popconfirm .ant-popconfirm-message .ant-popconfirm-title {
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-popconfirm .ant-popconfirm-message .ant-popconfirm-description {
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-popconfirm .ant-btn-variant-outlined {
	color: var(--siderbar-font-color);
	background: var(--modal-bg);
}

.note-dark-mode .ant-popconfirm .ant-btn-variant-outlined:hover {
	background: var(--modal-bg);
}

.rename-sort-input {
	color: #f1f3f4;
	font-size: 16px;
	width: fit-content;
	outline: none;
	border: none;
	/*border-bottom: 1px solid black;*/
	background: transparent;
}

.note-dark-mode .rename-sort-input {
	/*background: var(--siderbar-bg-color);*/
	color: var(--siderbar-font-color);
}

.note-dark-mode .rename-notebook-title-input {
	/*background: var(--siderbar-bg-color);*/
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}


.note-dark-mode .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title:hover {
	background: var(--siderbar-icon-hover-bg);
}


.note-dark-mode .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title:hover .ant-dropdown-menu-submenu-arrow-icon {
	background: var(--siderbar-icon-hover-bg);
}

.note-dark-mode .ant-dropdown-menu .ant-dropdown-menu-submenu.ant-dropdown-menu-submenu-disabled .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown-menu .ant-dropdown-menu-submenu .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon {
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
	transition: none;
}

.note-dark-mode .ant-dropdown-menu .ant-dropdown-menu-submenu .ant-dropdown-menu-submenu-title .ant-dropdown-menu-submenu-arrow-icon:hover {
	background: var(--siderbar-icon-hover-bg);
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown-menu .ant-dropdown-menu-submenu:hover .ant-dropdown-menu-submenu-arrow-icon {
	background: var(--siderbar-icon-hover-bg);
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-submenu-title {
	transition: none;
}

.note-dark-mode .ant-modal .ant-modal-content {
	background: var(--modal-bg);
}

.note-dark-mode .ant-modal-confirm .ant-modal-confirm-title {
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-modal-confirm .ant-modal-confirm-content {
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-btn-color-default {
	color: var(--siderbar-font-color);
}

.note-dark-mode .ant-btn-variant-outlined {
	background: var(--modal-bg);
}

.note-dark-mode .ant-btn-variant-outlined:not(:disabled):not(.ant-btn-disabled):hover {
	background: var(--modal-bg);
}

.note-dark-mode .ant-dropdown .ant-dropdown-menu .ant-dropdown-menu-item-selected {
	background: var(--siderbar-icon-hover-bg);
}

.plain-note-book-list {
	padding: 0 6px 0 16px;
}

.plain-note-book-item {
	padding: 10px 0 10px 10px;
	margin: 4px 0 4px 20px;
	user-select: none;
	cursor: pointer;
	color: #f1f3f4;
	border-radius: 8px;
	box-sizing: border-box;
	height: 40px;
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
}

.plain-note-book-item:hover {
	background: #474747;
}

.plain-note-book-item .plain-notebook-icon {
	margin-right: 8px;
	font-size: 20px;
	text-shadow: 0px 0px 1px white;
}

.plain-note-book-item svg path {
	fill: #f1f3f4;
}

.plain-note-book-item.isSelected {
	background: #474747;
}

.note-dark-mode .plain-note-book-item:hover {
	background: var(--siderbar-icon-hover-bg);
}

.note-dark-mode .plain-note-book-item.isSelected {
	background: #8a8d91;
}


.top-operations-drawer {
	position: absolute;
	top: -52px; /* 初始位置在页面外 */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	height: 52px;
	background-color: var(--siderbar-bg-color);
	color: var(--siderbar-font-color);
	line-height: 52px;
	transition: top 3s ease-in-out; /* 过渡效果 */
	display: none; /* 默认不显示 */
	font-size: 20px;
	padding: 0 20px;
}

.top-operations-drawer.show {
	box-sizing: border-box;
	padding: 0 20px;
	z-index: 1;
	top: 0px; /* 动画目标位置 */
	display: flex; /* 显示div */
	justify-content: space-between;
	align-items: center;
	flex-flow: row nowrap;
}

.top-operations-drawer.show .drawer-icon {
	display: flex; /* 显示div */
	align-items: center;
	flex-flow: row nowrap;
}

.top-operations-drawer.show .drawer-left {
	display: flex; /* 显示div */
	align-items: center;
	flex-flow: row nowrap;
}

.top-operations-drawer.show .cancel-edit-button svg {
	height: 20px;
	width: 20px;
	cursor: pointer;
}

.top-operations-drawer.show .cancel-edit-button:hover svg path {
	fill: red;
}

.top-operations-drawer.show .note-buttons-common {
	width: 40px;
	height: 40px;
	margin-right: 20px;
	display: flex; /* 显示div */
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	cursor: pointer;
}
.top-operations-drawer .note-buttons-common {
	width: 40px;
	height: 40px;
	margin-right: 20px;
	display: flex; /* 显示div */
	justify-content: center;
	align-items: center;
	border-radius: 100%;
	cursor: pointer;
}

.top-operations-drawer.show .note-buttons-common:hover {
	background: var(--siderbar-icon-hover-bg);
}

.top-operations-drawer.show .drawer-icon .note-buttons-common svg {
	width: 22px;
	height: 22px;
}

.todo-icon-box {
	margin-right: 20px;
}
.feedback-dearUsers{
	margin: 6px 0;
}
.input-sort-modal .ant-modal-title{
	background: var(--modal-bg);
	color: var(--siderbar-font-color);
}

.default-book-select{
	margin-top: 10px;
	outline: none;
	width: 90%;
	padding: 6px 10px;
	border-radius: 16px;
	border: 1px solid #d2d6d6;
	cursor: pointer;
	/* color: var(--siderbar-bg-color); */
	text-align: center;
	/* box-shadow: 0 1px 2px 0 rgb(139, 142, 145), 0 1px 3px 1px rgb(220, 222, 224); */
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.default-book-select.active{
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}
.setting-modal .ant-modal-content .default-book-select svg path{
	fill: #d2d6d6;
}
.notebook-selector-content{
	/*position: absolute; !* 使其可以浮动在其他元素上 *!*/
	top: 100%; /* 距离上方容器底部 */
	left: 0;
	width: 90%; /* 保证宽度与容器一致 */
	background-color: var(--modal-bg);
	color: var(--siderbar-font-color);
	border: 1px solid #d2d6d6;
	/*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); !* 给下拉框加点阴影效果 *!*/
	z-index: 10; /* 确保下拉框浮动在其他内容之上 */
	padding: 10px 10px 10px 10px; /* 给下拉框内的内容加点内边距 */
	display: flex;
	flex-direction: column;
	user-select: none;
	border-bottom-right-radius: 16px;
	border-bottom-left-radius: 16px;
	border-top: none;
}
.notebook-selector{
	position: relative;
	margin-bottom: 14px;
}
.notebook-selector-content .sort-title{
	color: #8b8c8d;
	font-size: 12px;
}

.notebook-selector-content .notebook-title{
	font-size: 14px;
	padding: 4px 0 4px 8px;
	border-radius: 8px;
	cursor: pointer;
	margin-bottom: 4px;
}

.notebook-selector-content .notebook-title.current-default{
	background: var(--siderbar-icon-hover-bg);
}

.notebook-selector-content .notebook-title:hover{
	background: var(--siderbar-icon-hover-bg);
}
.notebook-selector-content .inner-content{
	padding-right: 8px;
	max-height: 200px;
	overflow-y: auto;
}
.notebook-selector-content .inner-content::-webkit-scrollbar {
	width: 2px; /* 宽度 */
}

/* 滚动条上的滚动滑块 */
.notebook-selector-content .inner-content::-webkit-scrollbar-thumb {
	background-color: #d7d7d7; /* 滑块背景色 */
	border-radius: 2px; /* 圆角 */
}

/* 滚动条轨道 */
.notebook-selector-content .inner-content::-webkit-scrollbar-track {
	background-color: #f1f1f1; /* 轨道背景色 */
}
.add-NB-modal-content-plain .edit-NB-info{
	padding-right: 0;
}

.recover-bin-remark{
	font-size: 14px;
	/*color: #9c9a9a;*/
}

.recover-bin-remark .prev-notebook{
	font-size: 14px;
	/*background: #e6e7e7;*/
	font-weight: 700;
	margin-right: 4px;
	padding: 2px 4px 2px 0;
	border-radius: 6px;
}

.recover-deletedNote-confirm-modal .confirm-title svg path{
	fill: #faad14;
}

.recover-deletedNote-confirm-modal .confirm-title svg{
	width: 22px;
	height: 22px;
	margin-right: 12px;
}

.recover-deletedNote-confirm-modal .confirm-title {
	
	display: flex;
	align-items: center;
}

.recover-deletedNote-confirm-modal .modal-content {
	margin-left: 34px;
}
.privacy-content{
	line-height: 32px;
}

.task-icon-box{
	/*margin: auto auto;*/
	/*height: 100%;*/
	/*display: flex;*/
	/*align-items: center;*/
}
.task-icon{
	margin-right: 10px;
	border: 1px solid black;
	/* background: green; */
	width: 24px;
	height: 24px;
	/*margin-top: 7px;*/
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 16px;
}
.task-icon span{
	opacity: 0;
	transition: opacity .3s linear;
	height: 18px;
}

.task-icon.completed-todo-icon span{
	opacity: 1;
	/*transition: opacity .3s linear;*/
	height: 18px;
}

.task-icon span svg path{
	fill: var(--selected-icon-bg);
}

.task-icon:hover span{
	opacity: 1;
}

.dead-line-calender{
	width: 208px;
	background: var(--modal-bg);
	/*padding: 6px;*/
}

/*.dead-line-calender .calender-footer{*/
/*	display: flex;*/
/*	flex-flow: row nowrap;*/
/*	justify-content: flex-end;*/
/*}*/

.dead-line-calender .divider{
	height: 1px;
	background: var(--siderbar-icon-hover-bg);
}
.calender-grid{
	display: grid;
	grid-template-columns: repeat(7,1fr);
	/*gap: 2px;*/
	width: 208px;
	background: var(--modal-bg);
}

.calender-top-bar .current-year-month{
	user-select: none;
	color: var(--siderbar-font-color);
	font-weight: bold;
}
.calender-top-bar .switch-calender{
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	border-radius: 100%;
}
.calender-top-bar .switch-calender:hover{
	background: var(--siderbar-icon-hover-bg);
}
.calender-top-bar{
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}

.calender-top-bar svg path{
	fill: var(--siderbar-font-color);
}

.calender-grid .date-box{
	user-select: none;
	display: flex;
	justify-content: center;
	align-items: center;
	/*padding: 10px;*/
	width: 28px;
	height: 28px;
	box-sizing: border-box;
	border-radius: 100%;
	border: 1px solid transparent;
}

.calender-grid .date-box.current-date-box{
	color: var(--siderbar-font-color);
	cursor: pointer;
}

.calender-grid .date-box.current-date-box.selected-date{
	background:  var(--show-note-book-text-bg-color);
	border: 1px solid  var(--show-note-book-text-bg-color);
}
.calender-grid .date-box.current-date-box.selected-date:hover{
	background:  var(--show-note-book-text-bg-color);
	border: 1px solid  var(--show-note-book-text-bg-color);
}

.note-dark-mode .calender-grid .date-box.current-date-box.selected-date{
	background:  var(--siderbar-icon-hover-bg);
	border: 1px solid  var(--siderbar-icon-hover-bg);
}
.note-dark-mode .calender-grid .date-box.current-date-box.selected-date:hover{
	background:  var(--siderbar-icon-hover-bg);
	border: 1px solid  var(--siderbar-icon-hover-bg);
}

.calender-grid .date-box.current-date-box.today-date{
	border: 1px solid var(--siderbar-font-color);
}

.calender-grid .date-box.current-date-box.today-date:hover{
	border: 1px solid var(--siderbar-font-color);
}

.calender-grid .date-box.current-date-box:hover{
	background: var(--siderbar-icon-hover-bg);
	border: 1px solid var(--siderbar-icon-hover-bg);
}

.calender-grid .date-box.other-date-box{
	color: var(--siderbar-svg-hover-bg);
}

.calender-grid .day-box{
	user-select: none;
	text-align: center;
	color: var(--siderbar-font-color);
	margin-bottom: 4px;
	margin-top: 4px;
	/*padding: 10px;*/
}

.UpdateTimePop-description{
	display: flex;
	flex-flow: column wrap;
}
.UpdateTimePop-description-item{
	display: flex;
	
	/*flex-flow: row nowrap;*/
	flex-flow: column wrap;
}

.delete-deadline{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0px 4px;
	border: 1px solid #575859;
	border-radius: 4px;
	/*width: fit-content;*/
	margin-top: 6px;
	cursor: pointer;
	user-select: none;
	color: var(--siderbar-font-color);
}

.delete-deadline:hover{
	border: 1px solid red;
	color: red;
}
.UpdateTimePop-description-item .time-tip-text{
	color: var(--siderbar-font-color);
	user-select: none;
}

.UpdateTimePop-description-item .note-time{
	user-select: none;
}

.forestNote-app-site-page{
	width: 100%;
	margin: 0 auto;
	height: fit-content;
	box-sizing: border-box;
	overflow: auto;
	margin-top: 50px;
}

.forestNote-app-site-page .topbar{
	width: 100%;
	height: 50px;
	box-shadow: 0px -5px 15px 1px rgba(0,0,0,0.2);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	/*position: absolute;*/
	z-index: 10;
	background: white;
}

.forestNote-app-site-page .topbar .top-nav-container .brand{
	
	display: flex;
	justify-content: center;
	align-items: center;
	
}

.forestNote-app-site-page .topbar .top-nav-container{
	width: 60vw;
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*background: white;*/
	user-select: none;
}

.forestNote-app-site-page .topbar .brand-name{
	font-family: 'Lora',Georgia;
	font-size: 24px;
	font-weight: bold;
	cursor: pointer;
	text-decoration: none;
	color: #374146;
}

.forestNote-app-site-page .topbar .nav-item a{
	font-size: 18px;
	padding: 16px;
	text-decoration: none;
	color: #374146;
	white-space: nowrap;
	
}
.forestNote-app-site-page .topbar .nav-item a:hover{
	color: #3dc23d;
}

.forestNote-app-site-page .topbar .nav{
	display: flex;
	justify-content: space-between;
}

.forestNote-app-site-page .slogan{
	font-family: 'Lora',Georgia;
	padding-top: 12vh;
	/*font-style: italic;*/
	/*padding-top: 30px;*/
	font-size: 72px; /* 大字体 */
	font-weight: 700;
	/*color: #2e7d32; */
	color: #464947; 
	margin-bottom: 20px;
	text-align: center;
	white-space: nowrap;
	user-select: none;
}

.forestNote-app-site-page .slogan-explanation{
	margin: 20px;
	padding-top: 30px;
	font-size: 30px; 
	font-weight: bold;
	color: #5b615c; 
	margin-bottom: 20px;
	text-align: center;
}

.forestNote-app-site-page .home-section-footer-start-button{
	margin: 20px;
	margin-top: 12vh;
	font-size: 30px; 
	font-weight: bold;
	color: #f6f7f5;
	text-align: center;
	width: 100%;
	display: flex;
	justify-content: center;
}

.forestNote-app-site-page .get-started-button{
	padding:16px 28px;
	border: 2px solid #3dc23d;
	background: #3dc23d;
	/*background: linear-gradient(135deg, #a8e6cf 30%, #36af72 70%);*/
	width: fit-content;
	border-radius: 14px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.forestNote-app-site-page .get-started-button:hover{
	transform: translateY(-4px);
	box-shadow:  4px 4px 4px #464947;
}

.forestNote-app-site-page .brand-logo{
	width: 36px;
	height: 36px;
	margin-right: 20px;
	cursor: pointer;
}


html {
	scroll-behavior: smooth;
}

.forestNote-app-site-page .section {
	/*height: 80vh; */
	/*padding: 40px;*/
	/*border-bottom: 2px solid #ccc;*/
	margin: 0 auto;
	/*max-width: 74vw;*/
	box-sizing: border-box;
	/*margin-top: 90px;*/
}

.forestNote-app-site-page .section.features-content .feature-content-item:nth-child(even) .information-text {
	margin-right: 80px;
}

.forestNote-app-site-page .section.features-content .feature-content-item {
	display: flex;
	justify-content: space-between;
	flex-flow: row nowrap;
	align-items: center;
	padding-top: 12vh;
	padding-bottom: 12vh;
	padding-left: 20vw;
	padding-right: 20vw;
	/*background: #e1fbd5;*/
	background: white;
}

.forestNote-app-site-page .section.features-content .feature-content-item .feature-img-container {
	/*height: 100px;*/
	width: 50%;
	position: relative;
	/*margin-right: 100px;*/
}

.forestNote-app-site-page .section.features-content .feature-content-item .information-text {
	width: 50%;
	display: flex;
	flex-flow: column wrap;
	/*align-items: center;*/
	/*margin-right: 80px;*/
}

.forestNote-app-site-page .section.features-content .feature-content-item.category-information .feature-img-container img{
	object-fit: cover;
	width: 40%;
	box-shadow: 0px 13px 34px 0px rgba(0,0,0,0.12);
	padding: 12px;
	background: #fcfcfc;
	border-radius: 18px;
}


.forestNote-app-site-page .section.features-content .feature-content-item.category-information .feature-img-container .img-two{
	position: absolute;
	transform: rotate(12deg);
	width: 32%;
	bottom: 14px;
	left: 36%;
}


.forestNote-app-site-page .section.features-content .feature-content-item .features-content-item-title{
	font-size: 44px;
	font-weight: bold;
	color: green;
	font-family: Lora;
}

.forestNote-app-site-page .section.features-content .feature-content-item .feature-content-item-details{
	font-size: 26px;
	width: 100%;
	/*font-weight: bold;*/
}

.forestNote-app-site-page .section.features-content .feature-content-item.addImage-information .feature-img-container img{
	width: 70%;
	object-fit: cover;
	box-shadow: 0px 13px 34px 0px rgba(0,0,0,0.12);
	padding: 12px;
	background: #ffffff;
	border-radius: 18px;
}

.forestNote-app-site-page .section.features-content .feature-content-item.addImage-information .information-text{
	margin-right: 50px;
}

.forestNote-app-site-page .section.features-content .feature-content-item.richtext-information .feature-img-container img{
	width: 70%;
	object-fit: cover;
	box-shadow: 0px 13px 34px 0px rgba(0,0,0,0.12);
	padding: 12px;
	background: #ffffff;
	border-radius: 18px;
}

.forestNote-app-site-page .forestNote-swiperSlide-card {
	box-sizing: border-box;
	height: 286px;
	display: flex;
	flex-flow: row wrap;
	border: 1px solid black;
	border-radius: 8px;
	background: #fbfcf6;
	padding: 0 16px 16px 16px;
	user-select: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.forestNote-app-site-page .forestNote-swiperSlide-card:hover {
	transform: scale(1.03);
	box-shadow:  4px 4px 4px #464947;
}

.forestNote-app-site-page .forestNote-swiperSlide-card .feature-card-title {
	display: flex;
	justify-content: center;
	width: 100%;
	font-size: 22px;
	font-weight: bold;
	margin: 16px;
	user-select: none;
}

.forestNote-app-site-page .home-divide-container{
	position: relative;
}
.forestNote-app-site-page .home-divide-container .sub-slogan{
	font-family: 'Lora', Georgia;
	/*border: 1px solid #f6f667;*/
	box-shadow: 2px 4px 24px #0000002e;
	/* text-shadow: 1px 1px 2px black; */
	border-radius: 10px;
	font-weight: bold;
	color: #5c5b5b;
	/*background: #fff8ba;*/
	background: white;
	font-size: 30px;
	text-align: center;
	padding: 20px;
	z-index: 1;
	width: fit-content;
	margin: 0 auto;
}
.forestNote-app-site-page .home-divide-container::before {
	position: absolute;
	content: "";
	background: #fff;
	height: 50%;
	width: 100%;
	top: 0;
	z-index: -1;
}

.forestNote-app-site-page .home-divide-container::after {
	position: absolute;
	content: "";
	background: #f0ffe9;
	height: 50%;
	width: 100%;
	bottom: 0;
	z-index: -1;
}

.forestNote-app-site-page .target-group-nav {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	padding: 200px 20vw;
	background: #f0ffe9;
	gap: 100px;
}

.forestNote-app-site-page .target-group-nav .nav-right-bar .nav-image img{
	object-fit: cover;
	width: 480px;
}


.forestNote-app-site-page .target-group-nav .nav-left-bar .nav-title{
	padding: 16px 16px 16px 0;
	font-size: 24px;
	display: flex;
	align-items: center;
	border-bottom: 2px solid #e6f6c8;
	background: #f0ffe9;
	position: relative;
	user-select: none;
	cursor: pointer;
	transition: color 0.5s linear;
}
.forestNote-app-site-page .target-group-nav .nav-left-bar .nav-title svg{
	margin-right: 10px;
	padding-top: 4px;
	box-sizing: border-box;
	transition: transform 0.5s linear;
}
.forestNote-app-site-page .target-group-nav .nav-left-bar{
	width: 48%;
	height: 458px;
}


.forestNote-app-site-page .target-group-nav .nav-left-bar .tab-content {
	height: 0;
	overflow: hidden;
	transition:height 1s ease;
	line-height: 1.4;
	padding-top:10px ;
	font-size: 16px;
	box-sizing: border-box;
}

.forestNote-app-site-page .target-group-nav .nav-left-bar .tab-content.active-tab-content {
	animation: heightPulse 6s linear;
}
@keyframes heightPulse {
	0% {
		height: 0; /* 初始高度为 0 */
	}
	10% {
		height: 52px; 
	}
	30% {
		height: 52px; 
	}
	50% {
		height: 52px;
	}
	70% {
		height: 52px;
	}
	90% {
		height: 52px;
	}
	100% {
		height: 0; /* 最终高度回到 0 */
	}
}

@keyframes growWidth {
	from {
		width: 0%;
	}
	to {
		width: 100%;
	}
}


.forestNote-app-site-page .target-group-nav .nav-left-bar .nav-title.active-tab::before{
	width: 100%;
	content:'';
	height: 3px;
	background: #04d504;
	position: absolute;
	left: 0;
	bottom: -2px;
	animation: growWidth 6s linear;
}

.forestNote-app-site-page .target-group-nav .nav-left-bar .nav-title.active-tab {
	color: #04d504;
}

.forestNote-app-site-page .target-group-nav .nav-left-bar .nav-title.active-tab svg path{
	fill: #04d504;
}

.forestNote-app-site-page .target-group-nav .nav-left-bar .nav-title.active-tab svg{
	transition: transform 0.3s linear;
	transform: rotate(90deg);
	padding-left: 4px;
}


.faq-section {
	padding: 60px 20px;
	background: #f9fdf6;
	font-family: 'Helvetica Neue', sans-serif;
}

.faq-title {
	text-align: center;
	font-size: 36px;
	margin-bottom: 40px;
	color: #2d4739;
	font-family: 'Lora', Georgia;
}

.faq-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	grid-auto-rows: 240px;
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
}

.faq-card {
	background: #fff;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.faq-card h3 {
	font-size: 18px;
	margin-bottom: 12px;
	color: #324d3e;
}

.faq-card p {
	font-size: 15px;
	color: #555;
	line-height: 1.6;
}

.faq-card code {
	background: #e6f4ea;
	padding: 2px 6px;
	border-radius: 4px;
	font-family: monospace;
}
.highlight-card {
	background: linear-gradient(135deg, #e6ffe6, #f0fff0);
	border-left: 6px solid #69c27d;
}


.about-section {
	padding: 40px 20px;
	background-color: #f0f4f0; /* 浅绿色背景 */
	text-align: center;
}

.about-section h2 {
	font-family: 'Lora', serif;
	font-size: 36px;
	margin-bottom: 20px;
}

.about-content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
}

.about-text {
	max-width: 1000px;
	text-align: left;
}

.about-text p {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: #464947;
	line-height: 1.6;
	margin-bottom: 20px;
}

.cta-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-top: 20px;
}

.start-button, .donate-button {
	padding: 10px 20px;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	text-decoration: none;
	border-radius: 5px;
	transition: background-color 0.3s ease;
}

.start-button {
	background-color: #2e7d32; /* 深绿色 */
	color: #f6f7f5; /* 白色文字 */
	border: none;
	cursor: pointer;
}

.start-button:hover {
	background-color: #3d8b40; /* 稍亮的绿色 */
	box-shadow: 2px 2px 2px black;
}

.donate-button {
	background-color: #5b615c; /* 深灰色 */
	color: #f6f7f5;
}

.donate-button:hover {
	background-color: #6b716c; /* 稍亮的灰色 */
}

.about-decoration {
	display: flex;
	justify-content: center;
}




.contact-section {
	padding: 40px 20px;
	background-color: #f0f4f0; /* 浅绿色背景 */
	text-align: center;
}

.contact-section h2 {
	font-family: 'Lora', serif;
	font-size: 36px;
	margin-bottom: 20px;
}

.contact-content {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 40px;
	max-width: 1200px;
	margin: 0 auto;
}

.contact-text {
	max-width: 1000px;
	text-align: left;
}

.contact-text p {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: #464947;
	line-height: 1.6;
	margin-bottom: 20px;
}

.contact-links {
	margin-top: 20px;
}

.contact-links p {
	font-family: 'Open Sans', sans-serif;
	font-size: 18px;
	color: #464947;
	margin-bottom: 10px;
}

.contact-links strong {
	color: #2e7d32; /* 深绿色 */
}

.contact-link {
	color: #2e7d32;
	text-decoration: none;
	transition: color 0.3s ease;
}

.contact-link:hover {
	color: #3d8b40; /* 稍亮的绿色 */
	text-decoration: underline;
}

.contact-decoration {
	display: flex;
	justify-content: center;
}




body, html {
	height: 100%;
	margin: 0;
}
.public-DraftEditor-content{
	overflow-y: auto;
}
.public-DraftEditor-content::-webkit-scrollbar {
	display: inline-block;
	width: 2px;
	height: 4px;
}
.public-DraftEditor-content::-webkit-scrollbar-thumb {
	background: lightgray;
	border-radius: 4px;
	width: 2px;
	height: 4px;
}

.public-DraftEditor-content::-webkit-scrollbar-thumb:hover {
	background: darkgray;
}
.editor-container{
	background: transparent;
	color: var(--note-content-color);
	overflow-y: scroll;
}
.editor-container::-webkit-scrollbar {
	display: inline-block;
	width: 6px;
	height: 4px;
}
.custom-block {
	margin: 0;
	padding: 0;
	line-height: 1.5; /* 与容器一致 */
	font-size: 16px; /* 与容器一致 */
}
.rich-text-input{
	white-space: pre-wrap;
	word-wrap: break-word;
	word-break: break-word;
}
.rich-text-input {
	
	font-size: 16px; /* 统一字体大小 */
	line-height: 1.5; /* 统一行高，推荐 1.5 倍字体大小 */
	padding: 8px; /* 统一内边距 */
	min-height: 100%; /* 确保足够高度 */
	border: 1px solid #ccc;
}

.rich-text-input .public-DraftStyleDefault-block {
	margin: 0; /* 移除块默认外边距 */
	padding: 0; /* 移除块内边距 */
	line-height: 1.5; /* 与容器保持一致 */
}

/* 调整 placeholder 样式 */
.rich-text-input .public-DraftEditorPlaceholder-root {
	color: #999;
	font-size: 16px; /* 与内容一致 */
	line-height: 1.5; /* 与内容一致 */
	position: absolute; /* 确保定位不偏移 */
	top: 8px; /* 与 padding 对齐 */
	left: 8px;
	pointer-events: none; /* 防止点击干扰 */
}

/* 确保光标和文本对齐 */
.rich-text-input .public-DraftEditor-content {
	line-height: 1.5;
	font-size: 16px;
}
.rich-text-input::placeholder{
	color: #b3b7bf;
}
.editor-container::-webkit-scrollbar-thumb {
	background: lightgray;
	border-radius: 4px;
	width: 2px;
	height: 4px;
}
.editor-container::-webkit-scrollbar-thumb:hover {
	background: darkgray;
}
.editor-container::-webkit-scrollbar-track {
	background: transparent;
}
.rich-text-options{
	padding-right: 40px;
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-around;
	height: 50px;
	width: 100%;
	align-items: center;
	box-sizing: border-box;
	/*border-bottom: 1px solid #d0d0d0;*/
	/*border-top: 1px solid #d0d0d0;*/
}
.rich-text-options button{
	border-radius: 100%;
	background: transparent;
	outline: unset;
	border: unset;
	cursor: pointer;
	user-select: unset;
	box-sizing: border-box;
	height: 36px;
	width: 36px;
	min-height: 16px;
	min-width: 16px;
}

.rich-text-options button svg path{
	fill: var(--note-content-color);
}
.rich-text-options button:hover{
	background-color: var(--add-note-button-bg);
	border-radius: 100%;
}
.align-left {
	text-align: left;
}

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

.align-right {
	text-align: right;
}

.align-justify {
	text-align: justify;
}
.eraser-icon{
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding: 8px 0 8px 0;
	margin-top: 4px;
	height: fit-content;
	width: 100%;
	border-radius:6px;
	cursor: pointer;
}
.eraser-icon:hover{
	background: var(--siderbar-icon-hover-bg);
}

.color-popover-title {
	padding-bottom: 10px;
	color: var(--siderbar-font-color);
}
.eraser-text{
	color: var(--siderbar-font-color);
}
.eraser-icon svg path{
	fill: var(--siderbar-icon-color);
}
.eraser-icon svg{
	margin-right: 8px;
}

.eraser-icon:hover{
	fill: var(--siderbar-icon-hover-bg);
}
.font-color-content{
	width: fit-content;
	height: fit-content;
}
.all-font-colors {
	display: grid;
	grid-template-columns: repeat(6,1fr);
}

.font-color-circle {
	border-radius: 100%;
	margin-right: 10px;
	margin-bottom: 10px;
	width: 30px; 
	height: 30px; 
	text-align: center;
	box-sizing: border-box; 
	cursor: pointer;
	transition: transform .2s ease;
	border: 1px solid;
}


.font-color-circle:last-child {
	margin-right: 0;
	margin-bottom: 0;
}
.selected-color {
	box-shadow: inset 0 0 0 3px white;
}

.font-color-circle:hover {
	transform: scale(1.2);
}


.modal-top-bar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

.modal-top-bar  div {
	padding: 1px 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	outline: unset;
	border: unset;
	cursor: pointer;
	user-select: unset;
	box-sizing: border-box;
	height: 36px;
	width: 36px;
	min-height: 16px;
	min-width: 16px;
}

.modal-top-bar div svg path{
	fill: var(--note-content-color);
}

.modal-top-bar .cancel-edit-icon:hover svg path {
	border-radius: 100%;
	fill: red;
}



.modal-top-bar  div:hover {
	background-color: var(--add-note-button-bg);
	border-radius: 100%;
}
.edit-note-icons{
	width: 40%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
.edit-note-options{
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 4px;
}
.edit-note-options .edit-note-option-item:nth-child(-n+3){
	width: 32px;
	height: 32px;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.edit-note-options .edit-note-option-item:nth-child(n+4){
	width: fit-content;
	height: fit-content;
	border-radius: 2px;
	padding: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.edit-note-options .edit-note-option-item:hover{
	background: var(--show-note-book-text-bg-color);
	cursor: pointer;
}
.add-new-button {
	width: 60px;
	height: 24px;
	background: var(--add-note-button-bg);
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border-radius: 4px;
	/*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.1);*/
	padding: 0;
	/*position: absolute;*/
	/*right: 40px;*/
	/*bottom: 34px;*/
	cursor: pointer;
	z-index: 20;
	user-select: none;
}
.add-new-button svg path{
	fill: var(--note-content-color);
}
.add-new-button:hover {
	background: var(--show-note-book-text-bg-color);
}
.superFancyBlockquote {
	color: #888a8c;
	font-family: 'Microsoft YaHei UI', Georgia, serif;
	/*font-style: italic;*/
	text-align: center;
	/*width: 90%;*/
	border-left: 3px solid #dedfe2;
	margin: 10px 0;
	box-sizing: border-box;
	padding: 10px 0 10px 14px;
}

.font-size-option{
	cursor: pointer;
	user-select: none;
	border-radius: 4px;
	padding: 4px;
	color: var(--siderbar-font-color);
}

.font-size-option:hover{
	background: var(--siderbar-icon-hover-bg);
}

.font-size-popover.ant-popover .ant-popover-inner{
	padding: 4px;
}
.note-editor-container{
	/*background: var(--primary-background-color);*/
}
.editor-container {
	font-size: 16px;
	line-height: 1.5;
	/*margin: 10px 0;*/
	min-height: 100%;
	background-color: transparent; /* 默认背景色 */
	position: relative;
}

/* 米黄纸张背景 */
.editor-container.beige-paper {
	background:url(assets/41fda1282050e921c0b7.png) no-repeat center top;
	background-size: 100% 100%;
}
/* 小波点背景 */
.editor-container.polka-dots {
	background: radial-gradient(
		circle,
		#ccc 1px,
		transparent 1px
	);
	background-size: 16px 16px;
}

/* 横线背景 */
.editor-container.horizontal-lines {
	background: linear-gradient(
		to bottom,
		transparent 23px,
		#ddd 23px,
		#ddd 24px,
		transparent 24px
	);
	background-size: 100% 24px;
}

/* 格子背景 */
.editor-container.grid-lines {
	background: linear-gradient(
		to bottom,
		transparent 19px,
		#ddd 19px,
		#ddd 20px,
		transparent 20px
	),
	linear-gradient(
		to right,
		transparent 19px,
		#ddd 19px,
		#ddd 20px,
		transparent 20px
	);
	background-size: 24px 24px;
}





* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.container {
	display: flex;
	height: 100vh;
	width: 100%;
}

.panel {
	flex: 1;
	min-width: 300px; /* 最小宽度 */
	
}

.panel:nth-child(5) {
	background: #fff;
	padding-right: 10px;
}
.splitter {
	width: 2px;
	background: #f2f3f7;
	cursor: col-resize;
	user-select: none;
	flex-shrink: 0; /* 防止分隔线被压缩 */
}

.splitter:hover {
	background: #dad9d9;
}