:root {
	--bs-logo-label: #363636;
}

body {
	background-image: radial-gradient(circle at 80% 10%,
			rgba(255, 255, 255, 255),
			var(--bs-light) 70%);
	/* Other styles for your element */
}

@media (prefers-color-scheme: dark) {
	body {
		background-color: #333333;
		color: #b6b8bb;
		background-image: radial-gradient(circle at 80% 10%, #666666, #333333 70%);
		/* Other dark theme styles */
	}

	/* Custom CSS variables for dark mode */
	:root {
		--bs-emphasis-color-rgb: #b6b8bb;
		--bs-body-bg: #363636;
		--bs-body-color: #b6b8bb;
		--bs-primary: #b6b8bb;
		--bs-primary-bg-subtle: #a0a0aa;
		--bs-logo-label: #ffffff;
	}

	.navbar-toggler-icon {
		background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
	}

	.input-container input::placeholder {
		color: #909090;
		/* 您希望的颜色 */
		opacity: 1;
		/* 需要设置透明度为1来确保颜色正确显示 */
	}

	.form-floating label {
		color: #909090 !important;
		/* 您希望的颜色 */
		opacity: 1;
		/* 需要设置透明度为1来确保颜色正确显示 */
	}

	.invalid-feedback {
		color: var(--bs-body-color) !important;
	}

	.nav-link {
		color: var(--bs-body-color) !important;
	}

	.nav-tabs {
		--bs-nav-tabs-link-active-bg: none;
	}
}

.btn-primary {
	--bs-btn-bg: #12a0ff;
	--bs-btn-border-color: #12a0ff;
	/* --bs-btn-bg: #6667ab; */
	/* --bs-btn-border-color: #6667ab; */
}

.bg-primar {
	background-color: #12A0FF !important;
}

.bg-light {
	background-color: #FFFFFF !important;
}

.text-dark {
	color: #12A0FF !important;
}

.text-primarys {
	background: rgba(18, 160, 255, 0.2) !important;
	color: #12a0ff;
}

#svelte {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

pre {
	font-size: 16px;
	font-family: var(--font-mono);
	background-color: rgba(255, 255, 255, 0.45);
	border-radius: 3px;
	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
	padding: 0.5em;
	overflow-x: auto;
	color: var(--text-color);
}

button:focus:not(:focus-visible) {
	outline: none;
}

@media (min-width: 720px) {
	h1 {
		font-size: 2.4rem;
	}
}

section {
	margin-top: 10px;
}

html {
	overscroll-behavior-x: none;
	overscroll-behavior-y: none;
	touch-action: manipulation;
	scrollbar-width: none;
}

/* ::-webkit-scrollbar { */
/* width: 0px; */
/* Remove scrollbar space */
/* height: 0px; */
/* Remove scrollbar space */
/* background: transparent; */
/* Optional: just make scrollbar invisible */
/* } */

/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
	background: #e50000;
}

.tab-space {
	margin-top: 50px;
}

#leftPanel {
	position: absolute;
	top: 50%;
	left: 50px;
	width: 50px;
	height: 380px;
	transform: translate(0%, -50%);
	box-shadow:
		0 4px 8px 0 #000000cc,
		0 6px 20px 0 #000000cc;
	border-radius: 10px;
	z-index: 999;
}

.designer-topmenu {
	position: relative;
	z-index: 1000;
	width: 100%;
	background-color: rgba(0, 0, 255, 0.4);
}

.designer-topmenu.withlogo {
	padding-left: 80px;
}

.whiteback {
	background-color: rgba(255, 255, 255, 0.5);
}

.menu_has_form {
	background-color: #ffffffff;
}

.toolbox {
	height: 32px !important;
	padding-left: 8px !important;
	padding-right: 3px !important;
}

.toolbox img {
	height: 28px;
	width: 28px;
}

#mdNote {
	padding: 0px;
	background: #ffffff;
	box-shadow:
		0 4px 8px 0 #000000cc,
		0 6px 20px 0 #000000cc;
	position: absolute;
	top: 70px;
	right: 0px;
	width: 30vw;
	height: 100vh;
	border: 1px solid #0000004c;
	z-index: 999999999;
}

.stayright {
	text-align: right;
	justify-content: right;
	right: 300px;
	position: absolute;
	top: 0px;
}

.toolbar {
	width: 16px;
	height: 16px;
}

#rtcontrol {
	position: absolute;
	top: 5px;
	right: 5px;
}

#rtcontrol img {
	width: 18px;
	height: 18px;
}

#actionlog_button {
	position: absolute;
	top: 5px;
	right: 290px;
}

#actionloglist {
	padding: 5px;
	background: #ffffff;
	box-shadow:
		0 4px 8px 0 #000000cc,
		0 6px 20px 0 #000000cc;
	position: absolute;
	top: 100px;
	right: 5px;
	width: 240px;
	height: calc(100vh - 200px);
	border: 1px solid #000000cc;
	border-radius: 15px;
	z-index: 999;
}

#actionlog-close {
	position: absolute;
	top: 5px;
	right: 15px;
}

#actionlog-refresh {
	position: absolute;
	top: 5px;
	right: 70px;
}

#gotodesignercontrol {
	position: absolute;
	top: 5px;
	left: calc(100vw - 365px);
}

#large-container {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

#S1 {
	width: 100%;
	height: 100%;
	overflow: auto;
	margin: 0px;
	border: 0px solid grey;
	position: absolute;
	left: 0px;
	top: 0px;
}

.grid1 {
	background-image: url('/svg/grid1.svg');
	background-size: 20px 20px;
}

.grid2 {
	background-image: url('/svg/grid2.svg');
	background-size: 20px 20px;
}

.liukehong1 {
	background: red;
}

.ui-resizable-se {
	bottom: 17px;
}

.ui-state-hover {
	color: blueviolet;
}

.ui-state-active {
	color: blueviolet;
}

.msgarea {
	white-space: nowrap;
	font-size: 24px;
	z-index: 1000;
	color: #ffffff;
	position: absolute;
	right: 0px;
	top: 50px;
	width: fit-content;
	margin-top: 8px;
	padding: 0px 15px 0px 15px;
	border-radius: 20px 0px 0px 20px;
	background-color: #28a745;
	border: 1px solid #00000045;
}

.cocopadbg {
	background: red;
}

.btn.btn-outline-primary.sharp {
	background-color: #c2fffb !important;
	border-color: #c2fffb !important;
}

.boundingrect {
	z-index: 0;
	border-radius: 20px;
	background-color: #0000004c;
	border-color: red;
	border-width: 1px;
	border-style: dotted;
	position: absolute;
	left: 300px;
	top: 300px;
	width: 300px;
	height: 300px;
	display: none;
}

.cocoproperty .col {
	font-size: 14px;
	background-color: '#333333';
	padding-left: 0px;
}

.property-content {
	padding-left: 5px;
	padding-right: 5px;
}

.coco select {
	width: 100px !important;
	height: 24px !important;
	font-size: 14px;
}

.coco {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.coco .col {
	padding-left: 0px !important;
	padding-right: 0px !important;
}

.coco .sp-replacer {
	width: 100px !important;
	height: 24px !important;
}

.coco .ui-spinner {
	width: 100px !important;
	height: 24px !important;
}

.coco .font-picker {
	width: 100px !important;
	height: 24px !important;
	font-size: 12px !important;
	padding: 0px 30px 0px 0px !important;
}

.coco select {
	margin: 0px;
	padding: 0px 0px 0px 5px;
}

.btn-group.coco {
	background-color: white;
	box-shadow:
		0 4px 8px 0 #0000004c,
		0 6px 20px 0 #0000004c;
	border-radius: 10px;
}

.yellowtip {
	fill: '#000000';
}

.editors_none {
	display: none;
}

.editors_last {
	position: absolute;
	font-size: 10px;
	bottom: -18px;
	/* - height */
	left: 10px;
	height: 18px;
	overflow: hidden;
}

.cocoeditors {
	font-family: 'monospace';
	font-weight: 'normal';
	font-size: 10px;
	position: absolute;
	bottom: -20px;
	/* - height */
	left: 0px;
	width: 100%;
	height: 18px;
	overflow: show;
	text-align: right;
	color: black;
	background-color: #c2c2f3;
	border-radius: 5px;
	padding: 0px 2px 0px 2px;
}

.lastcocoeditor {
	font-family: 'monospace';
	font-weight: 'normal';
	font-size: 10px;
	position: absolute;
	bottom: -20px;
	/* - height */
	right: 0px;
	height: 18px;
	overflow: hidden;
	text-align: right;
	color: black;
	background-color: #e5dbff;
	border-radius: 5px;
	padding: 0px 2px 0px 2px;
}

.shadow1 {
	box-shadow:
		-1px 0 5px #8e8e8e,
		0 1px 5px #8e8e8e,
		1px 0 5px #8e8e8e,
		0 -1px 5px #8e8e8e;
}

.shadow2 {
	box-shadow:
		-1px 0 5px #8e8e8e,
		0 1px 5px #8e8e8e,
		1px 0 5px #8e8e8e,
		0 -1px 5px #8e8e8e;
}

.shadow3 {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.selected {
	box-shadow: 0 0 10px 5px #2726ff;
}

.hover {
	box-shadow: inset 0px 0px 5px 2px #8e8eff;
}

.padlayout {
	z-index: 999;
}

.nodisplay {
	display: none !important;
}

.displayblock {
	display: block;
}

.noshow {
	visibility: hidden;
}

.showAfterInit {
	visibility: hidden;
}

.showAfterColumnLoad {
	visibility: hidden;
}

.registerform-outer {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	position: absolute;
	top: 0px;
	left: 0px;
}

.registerform {
	position: absolute;
	width: 400px;
	height: 500px;
	background-color: transparent;
	z-index: 99999;
	border-radius: 20px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.no-right-border {
	border-right-width: 0px !important;
}

.no-padding {
	padding: 0px !important;
}

.profileform .right-eye {
	border: 1px solid #ced4da;
	border-left: 0px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	background-color: #c2eebfd9;
}

.office-form .right-eye {
	border-left: 0px;
	border-top-left-radius: 0px;
	border-bottom-left-radius: 0px;
	background-color: #c2eebfd9;
}

input#regUserCode {
	font-size: 26px;
	padding-left: 5px;
	text-align: center;
}

.columnpage {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	height: 100vh;
	display: flex;
	overflow: scroll;
}

.columnpage #columndocs {
	position: absolute;
	top: 120px;
	left: 100px;
}

.column_doc img {
	width: 100%;
}

.mycolumn .column_name {
	font-size: 24px;
}

.column_owner_avatar {
	width: 48px;
}

.explorer {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100vw;
	/* height: 100vh; */
	display: flex;
}

.explorer .inner {
	/*距离顶部100px, 左右两侧等距(auto)*/
	position: absolute;
	top: 110px;
	left: 50%;
	-webkit-transform: translate(0%, 0%);
	-moz-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	-o-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
	background-color: #ffffff;
	/*最大1000px, 窗口宽度的90%*/
	width: min(99vw, 1000px);
	/* height: calc(100vh - 120px); */
	/* padding: 20px; */
	border-radius: 5px;
}

.explorer .inner .tab-pane {
	padding: 0px;
}

.explorer .inner .card {
	background-color: #ffffffbb;
}

.explorer-navbar {
	height: 30px;
}

.explorer-navbar .bigger {
	font-size: 24px;
}

.explorer-content {
	width: 100%;
	height: calc(100% - 30px);
}

.explorer-content .tab-content {
	width: 100%;
	height: 100%;
	overflow: auto;
}

.explorer-user-avatar {
	position: relative;
	width: 80px;
	height: 80px;
	top: -20px;
	right: 0px;
}

.explorer-user-orgname {
	position: absolute;
	right: 20px;
	top: 20px;
}

#app {
	width: 100%;
	height: 100%;
}

#tabs-main {
	width: 100%;
	height: 100%;
}

.custom-select {
	background: #ffffff !important;
}

.borderless {
	border-top-style: hidden;
	border-right-style: hidden;
	border-left-style: hidden;
	border-bottom-style: groove;
	border-width: 0px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: none !important;
	outline: none !important;
	background: transparent !important;
}

.borderless:focus {
	outline: none !important;
}

select:focus {
	border: none !important;
	outline: none !important;
}

#mobile-docname {
	position: absolute;
	top: 0px;
	left: 5px;
	font-size: 12px;
	z-index: 100000;
}

.docname {
	font-size: 24px;
	color: white;
	padding-left: 5px;
	background-color: #4b92db;
	border-radius: 10px 10px 0px 0px;
	cursor: pointer;
}

.docpeople {
	font-size: 16px;
	color: #777777;
	padding-top: 0px;
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.chat_reddot {
	width: 10px;
	height: 10px;
	border-radius: 5px;
	background-color: red;
	position: relative;
	left: -10px;
}

.jelloOnce {
	animation: jellosmall 1s;
	animation-iteration-count: 3;
}

.chat_todo {
	display: flex;
	width: 100%;
}

.chat_todo .chat-button {
	justify-self: flex-start;
	width: 100%;
	align-self: center;
	align-content: center;
	text-align: center;
}

.chat_todo .todo-button {
	justify-self: flex-end;
	width: 100%;
	align-content: center;
	text-align: center;
}

.docpeople img {
	margin-left: 10px;
	margin-right: 3px;
	width: 24px;
	height: 24px;
}

.docpeople svg {
	margin-left: 10px;
	margin-right: 3px;
	width: 24px;
	height: 24px;
}

.docpeople .userinfo {
	transform: translate(0px, 0px);
}

.docpeople .btn-link {
	font-size: 16px;
	color: #555555;
}

.docpeople .dropdown-menu {
	background-color: #ffffffff;
}

.btn.focus,
.btn:focus {
	outline: 0;
	box-shadow: none !important;
}

.docnav {
	font-size: 14px;
}

.docnav img {
	width: 48px;
	height: 48px;
}

.shareItTips {
	font-size: 20px;
	justify-content: center;
	text-align: center;
}

.userbadge {
	font-family: 'monospace';
	font-size: 18px;
	position: absolute;
	white-space: nowrap;
	width: fit-content;
	z-index: 99999998;
	border: 1px solid #ffffff;
	border-radius: 20px;
	padding: 5px;
}

.userbadge_0 {
	color: #ffffff;
	background-color: #3f6c45;
}

.userbadge_1 {
	color: #ffffff;
	background-color: #cb0000;
}

.userbadge_2 {
	color: #ffffff;
	background-color: #6e6702;
}

.userbadge_3 {
	color: #ffffff;
	background-color: #db9501;
}

.userbadge_4 {
	color: #ffffff;
	background-color: #2d4262;
}

.userbadge_5 {
	color: #ffffff;
	background-color: #aa8538;
}

.userbadge_6 {
	color: #ffffff;
	background-color: #4b7447;
}

.userbadge_7 {
	color: #ffffff;
	background-color: #4f6457;
}

.userbadge_8 {
	color: #ffffff;
	background-color: #063852;
}

.userbadge_9 {
	color: #ffffff;
	background-color: #5d535e;
}

.userbadge_10 {
	color: #ffffff;
	background-color: #1995ad;
}

.userbadge_11 {
	color: #ffffff;
	background-color: #9b4f0f;
}

.userbadge_12 {
	color: #ffffff;
	background-color: #8d230f;
}

.userbadge_13 {
	color: #ffffff;
	background-color: #324851;
}

.locklabel {
	position: absolute;
	top: 0px;
	left: calc(50% - 5px);
	width: 10px;
	height: 10px;
	border-radius: 10px;
	border: 1px solid black;
	background-image: url('http://localhost:8191/frontend/assets/dot.svg');
}

.avatar-in-line {
	width: 28px;
	height: 28px;
}

.avatar-selected {
	border-radius: 20px;
	border: 1px solid #aaa;
	background-color: #62f2466c;
}

.avatar-active {
	border-radius: 20px;
	background-color: #e5dbff;
}

.centerpoint {
	position: absolute;
	top: 10px;
	left: 10px;
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: red;
	z-index: 999999;
}

.child {
	position: absolute;
	height: 200px;
	width: 100px;
	background-color: #afbbc6;
	cursor: move;
}

#readonlyDesc {
	position: absolute;
	bottom: 25px;
	left: 5px;
	background-color: #eeeeee69;
	border: 1px solid #aaa;
	z-index: 100;
}

#system_message {
	position: absolute;
	display: flex;
	width: 100%;
	bottom: 0px;
	left: 0px;
	background-color: #eeeeee39;
	z-index: 102;
	align-items: center;
	justify-content: center;
}

#minimap {
	position: absolute;
	width: 240px;
	height: 120px;
	/* 20% of A4*/
	bottom: 5px;
	left: 5px;
	background-color: #eee;
	border: 1px solid #aaa;
	opacity: 0.7;
	z-index: 10000000;
}

.minimap-node {
	position: absolute;
	background-color: #607a86;
}

.minimap-viewport {
	position: absolute;
	box-sizing: border-box;
	background-color: #4f6f7e66;
	z-index: 1000000000;
	cursor: move;
}

.kfknode img {
	width: 100%;
	height: 100%;
}

.page-title {
	font-size: 18px;
	font-weight: bold;
}

.mask {
	z-index: 999999999;
	background-color: #ffffff03;
	position: absolute;
	left: 0px;
	top: 0px;
}

.eraser {
	width: 100px;
	height: 100px;
}

#C1 {
	left: 0px;
	top: 0px;
	width: 6720px;
	height: 4800px;
	background-color: #00000022;
	overflow: auto;
	margin: 0px;
	position: absolute;
}

#overallbackground {
	width: 100vw;
	height: 100vh;
	background-color: #e0e0e0;
	z-index: -1000000;
}

#C9 {
	left: 840px;
	top: 600px;
	width: 5040px;
	height: 3600px;
	z-index: -1;
	user-select: none;
	position: absolute;
	outline: none;
	background-color: #ffffff22;
}

#containerbkg {
	left: 840px;
	top: 600px;
	width: 5040px;
	height: 3600px;
	z-index: 1;
	user-select: none;
	position: absolute;
	outline: none;
	overflow: hidden;
	position: absolute;
}

#C3 {
	left: 840px;
	top: 600px;
	width: 5040px;
	height: 3600px;
	z-index: 2;
	user-select: none;
	position: absolute;
	outline: none;
}

.brsnode {
	background-position: 0px 0px;
	background-repeat: repeat-x;
	background-size: 100% 100%;
	background-image: url('http://localhost:8191/frontend/assets/brain.svg');
	animation: jellosmall 5s;
	animation-iteration-count: infinite;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

@keyframes progress1 {
	from {
		width: 0;
	}

	to {
		width: 20px;
	}
}

@keyframes progress2 {
	from {
		width: 0;
	}

	to {
		width: 60px;
	}
}

@keyframes progress3 {
	from {
		width: 0;
	}

	to {
		width: 10px;
	}
}

.selectingrect {
	z-index: 3;
	border-radius: 0px;
	background-color: #0000004c;
	border-width: 4px;
	border-style: dotted;
	position: absolute;
	left: 300px;
	top: 300px;
	width: 300px;
	height: 300px;
	display: none;
}

#modeIndicator {
	z-index: 4;
}

.chat_item {
	display: flex;
	margin-top: 5px;
}

.chatname {
	white-space: nowrap;
	font-size: 8px;
}

.chat_item.me {
	align-self: flex-end;
}

.chat_item.me .chatmsg {
	margin-right: 5px;
	padding: 0px 5px 0px 5px;
	border-radius: 5px;
	background-color: #28a745;
	color: black;
}

.chat_item.other .chatmsg {
	margin-left: 5px;
	padding: 0px 5px 0px 5px;
	border-radius: 5px;
	background-color: #666666;
	color: white;
}

.chatavatar {
	width: 36px !important;
	height: 36px !important;
}

#linetransformer {
	position: absolute;
	top: 10px;
	height: 10px;
	width: 20px;
	height: 20px;
	z-index: 5;
}

*:focus {
	outline: none !important;
}

.invalid-feedback {
	color: black;
}

.cocohighlight-1 {
	background-color: #00000045;
}

.cocohighlight-2 {
	background-color: #e5dbff;
	border-radius: 10px;
	box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9);
}

.cocohighlight-3 {
	background-color: #e5dbff;
	padding: 0px 0px 0px 0px;
}

.inner-help {
	font-size: 12px;
}

.doc-owner-width {
	width: 80px !important;
	white-space: nowrap;
	overflow: hidden;
	font-size: 12px;
}

.doc-name-width {
	width: min(100%, 300px) !important;
	padding-left: 30px !important;
	padding-right: 0px !important;
	overflow: hidden;
	position: relative;
	margin: 0px 0px !important;
}

.doc-name-width .doc-name-inner {
	width: 100%;
	height: 100%;
	overflow: auto;
	white-space: nowrap;
	padding-right: 0px;
}

.doc-name-inner {
	height: 60px !important;
}

.doc-acl-width {
	white-space: nowrap;
}

.doc-acl-S {
	background-color: #007bff;
}

.doc-acl-O {
	background-color: #28a745;
}

.doc-acl-P {
	background-color: #ffc107;
}

.myhovered:hover {
	border-radius: 20px;
	background-color: #e5dbff;
}

.myhovered {
	white-space: nowrap;
}

#mic-option div {
	font-size: 10px;
}

#camera-option div {
	font-size: 10px;
}

.simplehover:hover {
	background-color: aqua;
}

.opicon:hover {
	transform-origin: center;
	transform: scale(1.5);
}

.my-doc-table td {
	padding: 0px !important;
}

.share-it-url {
	font-family: monospace;
	font-size: xx-small;
	background-color: whitesmoke;
}

table.quick-help-table {
	border: 1px solid #3e3ecc;
}

table.quick-help-table .title {
	background-color: #e5dbff;
	font-weight: bolder;
}

table.quick-help-table tr {
	border: 1px solid #e5dbffcc;
}

table.quick-help-table td:first-of-type {
	border: 1px solid #e5dbff;
	background-color: #f5fbff22;
}

/* 
.ql-container.ql-snow{
  border: 0px !important;
}*/

.ql-container {
	position: absolute !important;
	top: 0px;
}

.ql-toolbar {
	background-color: aqua;
	position: relative;
	transform: translate(0%, -100%);
	z-index: 99999;
}

.browser-warning {
	position: absolute;
	bottom: 2px;
	right: 2px;
	font-size: 12px;
}

.quilling-by {
	position: absolute;
	bottom: 0px;
	right: 0px;
	font-family: 'monospace';
	font-size: 10px;
	white-space: nowrap;
	width: fit-content;
	height: fit-content;
	z-index: 99999998;
	border-radius: 5px;
	background-color: aqua;
	animation: jello 1s;
	animation-iteration-count: infinite;
}

.ql-editor-pointer>* {
	cursor: pointer !important;
}

@keyframes jello {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(1.5);
		transform: scale(1.5);
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

.color-dynamic-black {
	color: black;
}

.color-dynamic-white {
	color: white;
}

.showFirstTimeHelp {
	position: absolute;
	right: 100px;
}

/* use a hand cursor intead of arrow for the action buttons */

.filepond--file-action-button {
	cursor: pointer;
}

/* the text color of the drop label*/

.filepond--drop-label {
	color: #555;
}

/* underline color for "Browse" button */

.filepond--label-action {
	text-decoration-color: #aaa;
}

/* the background color of the filepond drop area */

.filepond--panel-root {
	background-color: #eee;
}

/* the border radius of the drop area */

.filepond--panel-root {
	border-radius: 0.5em;
}

/* the border radius of the file item */

.filepond--item-panel {
	border-radius: 0.5em;
}

/* the background color of the file and file panel (used when dropping an image) */

.filepond--item-panel {
	background-color: #555;
}

/* the background color of the drop circle */

.filepond--drip-blob {
	background-color: #999;
}

/* the background color of the black action buttons */

.filepond--file-action-button {
	background-color: rgba(0, 0, 0, 0.5);
}

/* the icon color of the black action buttons */

.filepond--file-action-button {
	color: white;
}

/* the color of the focus ring */

.filepond--file-action-button:hover,
.filepond--file-action-button:focus {
	box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9);
}

/* the text color of the file status and info labels */

.filepond--file {
	color: white;
}

/* error state color */

[data-filepond-item-state*='error'] .filepond--item-panel,
[data-filepond-item-state*='invalid'] .filepond--item-panel {
	background-color: red;
}

[data-filepond-item-state='processing-complete'] .filepond--item-panel {
	background-color: green;
}

/* bordered drop area */

.filepond--panel-root {
	background-color: transparent;
	border: 2px solid #2c3340;
}

.ossimage {
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
}

.libray {
	height: 100px;
}

.msgInputWindow {
	position: absolute;
	z-index: 10000020;
	width: 100%;
	height: 30px;
	left: 50%;
	bottom: 30px;
	margin: 0px;
	border-radius: 0px;
	display: flex;
	background-color: transparent;
	align-items: center;
	justify-content: center;
	-webkit-transform: translate(-50%, 0%);
	-moz-transform: translate(-50%, 0%);
	-ms-transform: translate(-50%, 0%);
	-o-transform: translate(-50%, 0%);
	transform: translate(-50%, 0%);
}

.msgInputInner {
	border-radius: 5px;
	background-color: white;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.matlib-topick {
	position: absolute;
	z-index: 10000030;
	/*higher than minimap */
	left: 0px;
	bottom: 0px;
	margin: 5px;
	border-radius: 10px;
	display: flex;
	width: 100%;
	height: 80px;
	background-color: aqua;
	overflow-y: hidden;
	overflow-x: scroll;
	align-items: center;
	justify-content: center;
}

.matlib-topick img {
	height: 60px;
	padding-left: 2px;
}

.matlib-topick img:hover {
	border: 4px solid #74aef1;
	border-radius: 5px;
	transform-origin: center;
	transform: scale(1.2);
}

.matlib-title {
	z-index: -1;
	position: absolute;
	left: 5px;
	bottom: 5px;
}

.inputImg {
	width: 40px;
	height: 24px;
}

.opqrcode_in_share {
	width: 150px;
	height: 150px;
}

/* begin: Weibo.com paste css fix */
.pastedHtml img {
	max-width: 40px;
	max-height: 40px;
}

.pastedHtml .face {
	width: 18px;
	height: 18px;
}

.s-color-red {
	color: red;
}

/* end: Weibo.com paste css fix */

#lineExpand {
	position: absolute;
	top: 100px;
	left: 65px;
	display: flex;
	flex-direction: column;
	background-color: white;
	border-radius: 5px;
	box-shadow: 0 0 0 0.125em rgba(255, 255, 255, 0.9);
	z-index: 100000;
}

#lineExpand div {
	padding: bottom 5px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	border-radius: 5px;
}

#lineExpand div:hover {
	background-color: aqua;
}

#shape_line {
	background-image: url('http://localhost:8191/frontend/assets/line.svg');
}

#shape_rectangle {
	background-image: url('http://localhost:8191/frontend/assets/rectangle.svg');
}

#shape_ellipse {
	background-image: url('http://localhost:8191/frontend/assets/ellipse.svg');
}

#shape_polyline {
	background-image: url('http://localhost:8191/frontend/assets/polyline.svg');
}

#shape_polygon {
	background-image: url('http://localhost:8191/frontend/assets/polygon.svg');
}

#shape_freehand {
	background-image: url('http://localhost:8191/frontend/assets/freehand.svg');
}

.login-button-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.inner_image {
	width: 100%;
	height: 100%;
}

.inner_richtext {
	border: 0px solid #ccc !important;
}

.inner_yellowtip {
	padding: 4px !important;
}

#interLinkDialog {
	z-index: 5000;
	position: absolute;
	top: 100px;
	left: 90px;
	background-color: white;
	border-radius: 10px;
	box-shadow: 0px 1px 20px 2px #888888 !important;
}

.commenter {
	font-size: 10px;
}

.connect1_normal {
	fill: none;
	stroke-width: 2;
	stroke: #4b92db;
}

.connect1_hover {
	fill: none;
	stroke-width: 10;
	stroke: #4bdb92;
}

.two-cols {
	width: 100%;
	display: flex;
	flex-direction: row;
	padding: 0px;
}

.toolbox-half {
	width: 100px;
}

.toolbox-half img {
	width: 100%;
}

.node_button_area {
	position: absolute;
	top: 0px;
	right: -24px;
	width: 24px;
	height: 100%;
	padding-left: 5px;
}

.jump {
	width: 24px;
	height: 24px;
	border-radius: 6px;
	background-image: url('http://localhost:8191/frontend/assets/jumpto.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-color: white;
}

.jumpremove {
	width: 24px;
	height: 24px;
	margin-top: 4px;
	border-radius: 6px;
	background-image: url('http://localhost:8191/frontend/assets/jumpremove.svg');
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-color: white;
}

.nodeMessage {
	position: absolute;
	top: -18px;
	left: 0px;
	background-color: aqua;
	font-size: 14px;
	height: 18px;
	border-radius: 6px;
	white-space: nowrap;
	width: fit-content;
	padding: 0px 5px 0px 5px;
}

.shortcutkey {
	position: absolute;
	bottom: 0px;
	right: 0px;
	font-size: 9px;
}

.clickable {
	cursor: pointer;
}

.custom_header {
	width: 100vw;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 9999999999999999;
}

.custom_header_small {
	width: 100;
	position: fixed;
	top: 0px;
	right: 0px;
	z-index: 9999999999999999;
}

.ec_button {
	width: 24px;
	height: 24px;
	border-radius: 12px;
}

.ec_expanded {
	background-color: green;
	background-color: blue;
	background-image: url('http://localhost:8191/frontend/assets/minus.svg');
}

.ec_collapsed {
	background-color: blue;
	background-image: url('http://localhost:8191/frontend/assets/add.svg');
}

.ecpos0 {
	left: -26px;
	top: calc(50% - 12px);
}

.ecpos1 {
	left: calc(50% - 12px);
	top: -26px;
}

.ecpos2 {
	right: -26px;
	top: calc(50% - 12px);
}

.ecpos3 {
	left: calc(50% - 12px);
	bottom: -26px;
}

.textblock {
	display: flex;
	justify-content: center;
	align-items: left;
	flex-direction: column;
	font-size: 24px;
}

.tabbg {
	background-color: #d2e1ef;
}

.node {
	position: absolute;
	width: 32px;
	height: 32px;
	border: 2px solid #2726ff;
	box-shadow: inset 0px 0px 0px 1px #969696;
	box-sizing: border-box;
	border-radius: 15px;
}

.node:hover {
	background-color: #ffff00;
	box-shadow: 0 0 5px 2px #ffff00;
}

.node.selected {
	box-shadow: 0 0 5px 2px #2726ff;
}

svg path {
	fill: '#000000';
}

svg path.selected {
	stroke: #e29543;
}

svg text.selected tspan {
	fill: #000000;
}

.node p {
	position: absolute;
	margin-bottom: 0px;
	display: block;
	white-space: nowrap;
	bottom: -22px;
	left: 50%;
	transform: translate(-50%, 0%);
}

.node code,
.node ai,
.node.INFORM subject,
.node.INFORM content,
.node.ACTION .kvars,
.node.ACTION .katts,
.node.ACTION .instruct {
	display: none;
}

.node .mobilehandler {
	display: none;
}

.node.selected .mobilehandler {
	position: absolute;
	right: -25px;
	display: block;
	width: 24px;
	height: 24;
	border-radius: 16px;
	background-color: #2726ff;
	color: white;
	font-size: 19px;
}

.node .nodeidlabel {
	position: absolute;
	top: -20px;
	height: 24;
	font-size: 12px;
}

div.work,
div.pbo {
	display: none;
}

.input_error {
	background-color: red;
}

.node .kvars {
	display: none;
}

.node.START {
	left: 100px;
	top: 100px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/START.svg');
}

.node.ACTION {
	left: 300px;
	top: 100px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/ACTION.svg');
}

.node.INFORM {
	left: 400px;
	top: 300px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/INFORM.svg');
}

.node.SCRIPT {
	left: 400px;
	top: 300px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/SCRIPT.svg');
}

.node.SCRIPT[runmode='ASYNC'] {
	background-color: #ff333366;
}

.node.TIMER {
	left: 400px;
	top: 300px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/TIMER.svg');
}

.node.SUB {
	left: 400px;
	top: 300px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/SUB.svg');
}

.node.SUB[alone='yes'] {
	background-color: #ff333366;
}

.node.AND {
	left: 400px;
	top: 300px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/AND.svg');
}

.node.OR {
	left: 400px;
	top: 300px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/OR.svg');
}

.node.THROUGH {
	left: 400px;
	top: 300px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/THROUGH.svg');
}

.node.GROUND {
	left: 400px;
	top: 300px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/GROUND.svg');
}

.node.END {
	left: 800px;
	top: 300px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/svg/END.svg');
}

.node.ST_DONE {
	background-color: #dbdb22cc;
}

@keyframes jellosmall {
	0% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	50% {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}

	100% {
		-webkit-transform: scale(1);
		transform: scale(1);
	}
}

@keyframes jellocolor {
	50% {
		background-color: rgba(255, 255, 255, 0.8);
		-webkit-transform: scale(0.9);
		transform: scale(0.9);
	}
}

.node.ST_RUN {
	background-color: rgba(0, 0, 155, 0.2);
	animation: jellocolor 3s;
	animation-iteration-count: 1000;
}

.connect.ST_IGNORE {
	stroke-width: 5;
	stroke: #2726ff13;
	stroke-dasharray: 5, 5;
}

.connect.ST_DONE {
	stroke-width: 5;
	stroke: #4bdb92;
}

.connect.ST_RUN {
	stroke-width: 5;
	stroke: #4b92db;
}

#rightPanel {
	padding: 0px;
	background: #ffffff;
	box-shadow:
		0 4px 8px 0 #000000cc,
		0 6px 20px 0 #000000cc;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 250px;
	height: 100vh;
	border: 1px solid #0000004c;
}

#rightPanel #close_button {
	position: absolute;
	top: 0px;
	right: 2px;
}

.kfknavbar {
	background-color: #ffffff4c;
}

.kfk-input-template-name,
.kfk-input-team-name {
	width: 100%;
	display: flex;
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.kfk_template_list_item,
.kfk_team_list_item {
	padding-top: 10px;
}

.kfk-icon-title {
	font-size: 0.5rem;
}

.kfk-template-id,
.kfk-workflow-id,
.kfk-work-id,
.kfk-team-id {
	font-size: 18px;
	text-decoration: none;
}

.kfk-template-info {
	font-size: 0.2rem;
}

#tplid_title {
	font-size: 1.5rem;
}

.kfk-dropdown .active a {
	color: #ffffff;
}

.kfk-tag {
	margin-right: 5px;
	margin-bottom: 5px;
}

.kfk-tag:hover {
	background-color: rgba(255, 255, 0);
}

.kfk-tag a {
	text-decoration: none;
}

.kfk-tag a:hover {
	text-decoration: none;
}

.kfk-highlight-3 {
	background-color: rgba(255, 255, 255);
	border-radius: 5px;
}

.kfk-highlight-2 {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
}

.kfk-highlight-track-current .card-header {
	background-color: #2726ff;
	color: white;
}

.kfk-current {
	background-color: var(--primary-color);
}

.kfk-comment-section {
	background-color: #33333333;
	border-radius: 5px;
}

.kfk-bottom-10 {
	padding-bottom: 10px;
	border-bottom-style: solid;
	border-bottom: 1px dotted #6666ff;
}

.kfk-code-area {
	width: 100%;
	border: 0px solid;
}

.kfk-kvar-key-display {
	font-weight: bold;
}

.kfk-kvar-value-display {
	font-weight: normal;
}

.kfk-code-input {
	min-height: calc(20em + 0.75rem + 2px) !important;
}

.kfk-timer-code {
	font-size: 1.5em;
}

.kfk-timer-input input {
	max-width: 8em;
}

.kfk-property-id {
	font-size: 0.5em;
	color: #666666;
}

.kfk-menu-border {
	border-bottom-style: solid;
	border-bottom: 1px dotted #6666ff;
}

.kfk-navmenu {
	background-color: rgba(200, 200, 255);
}

.kfk-w-75 {
	max-width: 1400px;
}

.kfk-lastdays {
	font-size: 24px;
}

.kfk-fade {
	position: absolute;
	z-index: 1000;
	left: 0px;
	bottom: 0px;
	border: 1px solid #0000004c;
}

.kfk-tab-menu {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 5px;
	box-shadow: 0px 0px 5px rgba(20, 20, 20, 0.5);
	min-height: 66px;
}

.kfk-org-logo {
	width: 64px;
	height: 64px;
	border-radius: 2px;
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: contain;
	background-image: url('/images/metatocome.png');
}

.kfk-odd {
	background-color: rgba(255, 255, 255, 0.1);
}

.kfk-me {
	font-size: 8px;
}

.kfk-workflow-info {
	position: absolute;
	z-index: 999;
	left: 0px;
	padding: 5px 10px 5px 10px;
	width: 100%;
	bottom: 0px;
	font-weight: 400;
	background-color: rgba(0, 0, 0, 0.3);
	color: rgba(255, 255, 255, 1);
}

.kfk-wf-info-title {
	font-size: 8px;
	color: #dbdbd2;
}

.kfk-wf-info-value {
	font-size: 24px;
	color: #ffffff;
}

.kfk-result-list-2 {
	margin-top: 10px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.3);
}

.bd-callout-info {
	border-left-color: #5bc0de;
}

.bd-callout {
	padding: 1.25rem;
	margin-top: 1.25rem;
	margin-bottom: 1.25rem;
	border: 1px solid #e9ecef;
	border-left-width: 0.25rem;
	border-radius: 0.25rem;
}

.bd-masthead {
	padding: 3rem 0;
	background: linear-gradient(165deg, #f7f5fb 50%, #fff 50%);
}

.emp-footer-link {
	color: var(--footer-link-color);
}

.usertag {
	color: blue;
}

.usertag:hover {
	cursor: pointer;
}

.nav-link.active {
	text-decoration: none;
	text-decoration-thickness: 1px;
}

.kfk-round {
	border-radius: 10px;
}

.kfkshadow {
	box-shadow: 0px 0px 5px 5px #0d6efd66;
}

.toolbox {
	background-position: center;
	/* Center the image */
	background-repeat: no-repeat;
	/* Do not repeat the image */
	background-size: 24px;
	padding-right: 25px;
}

.toolbox.active {
	background-color: #2726ff;
	border-color: rgba(255, 255, 255, 0);
	background-size: 30px;
}

.toolbox.active .shortcutkey {
	color: #ffffff;
}

.toolbox.POINTER {
	background-image: url('/svg/POINTER.svg');
}

.toolbox.POINTER.active {
	background-image: url('/svg/POINTER2.svg');
}

.toolbox.ACTION {
	background-image: url('/svg/ACTION.svg');
}

.toolbox.ACTION.active {
	background-image: url('/svg/ACTION2.svg');
}

.toolbox.TIMER {
	background-image: url('/svg/TIMER.svg');
}

.toolbox.TIMER.active {
	background-image: url('/svg/TIMER2.svg');
}

.toolbox.SUB {
	background-image: url('/svg/SUB.svg');
}

.toolbox.SUB.active {
	background-image: url('/svg/SUB2.svg');
}

.toolbox.SCRIPT {
	background-image: url('/svg/SCRIPT.svg');
}

.toolbox.SCRIPT.active {
	background-image: url('/svg/SCRIPT2.svg');
}

.toolbox.AND {
	background-image: url('/svg/AND.svg');
}

.toolbox.AND.active {
	background-image: url('/svg/AND2.svg');
}

.toolbox.OR {
	background-image: url('/svg/OR.svg');
}

.toolbox.OR.active {
	background-image: url('/svg/OR2.svg');
}

.toolbox.INFORM {
	background-image: url('/svg/INFORM.svg');
}

.toolbox.INFORM.active {
	background-image: url('/svg/INFORM2.svg');
}

.toolbox.GROUND {
	background-image: url('/svg/GROUND.svg');
}

.toolbox.GROUND.active {
	background-image: url('/svg/GROUND2.svg');
}

.toolbox.CONNECT {
	background-image: url('/svg/CONNECT.svg');
}

.toolbox.CONNECT.active {
	background-image: url('/svg/CONNECT2.svg');
}

.toolbox.THROUGH {
	background-image: url('/svg/THROUGH.svg');
}

.toolbox.THROUGH.active {
	background-image: url('/svg/THROUGH2.svg');
}

@keyframes shaking {
	25% {
		-webkit-transform: rotate(30deg);
		transform: rotate(30deg);
	}

	50% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	75% {
		-webkit-transform: rotate(-30deg);
		transform: rotate(-30deg);
	}

	100% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
}

@-webkit-keyframes spinning {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spinning {
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@-webkit-keyframes loadingCircle {

	0%,
	100% {
		background-image: url('/svg/spinner/spinner00.svg');
	}

	20% {
		background-image: url('/svg/spinner/spinner20.svg');
	}

	40% {
		background-image: url('/svg/spinner/spinner40.svg');
	}

	60% {
		background-image: url('/svg/spinner/spinner00.svg');
	}

	80% {
		background-image: url('/svg/spinner/spinner40.svg');
	}
}

@keyframes loadingCircle {

	0%,
	100% {
		background-image: url('/svg/spinner/spinner00.svg');
	}

	20% {
		background-image: url('/svg/spinner/spinner20.svg');
	}

	40% {
		background-image: url('/svg/spinner/spinner40.svg');
	}

	60% {
		background-image: url('/svg/spinner/spinner00.svg');
	}

	80% {
		background-image: url('/svg/spinner/spinner40.svg');
	}
}

.input_good {
	padding-right: 25px;
	background: url('/svg/yes.svg') no-repeat right;
	background-size: 20px;
	background-color: white;
}

.input_wrong {
	padding-right: 25px;
	background: url('/svg/error.svg') no-repeat right;
	background-size: 20px;
	background-color: white;
}

.input_circle:before,
.input_circle {
	padding-right: calc(1.5em + 0.75rem);
	background: url('/svg/spinner/spinner00.svg') no-repeat right;
	background-size: 20px;
	animation: 1.5s linear 0s infinite normal none running loadingCircle;
}

.input_spinning:before,
.input_spinning {
	-webkit-animation: spinning 1s infinite linear;
	animation: spinning 1s infinite linear;
}

.spinner {
	width: 40px;
	height: 40px;
	background-image: url(/images/spinning.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	animation: 1.5s linear 0s infinite normal none running spinning;
}

@keyframes runninglogo {
	50% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

.runninglogo {
	width: 80px;
	height: 80px;
	margin-top: calc(50vh - 100px);
	background-image: url(/svg/yarknode.svg);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	animation: 2.5s linear 0s infinite normal none running runninglogo;
}

.runninglogo-ai {
	width: 80px;
	height: 80px;
	margin-top: calc(50vh - 100px);
	background-image: url(/images/caishen3_round.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	animation: 2.5s linear 0s infinite normal none running runninglogo;
}

.kfk-link {
	text-decoration: none;
	padding: 3px;
	color: var(--bs-primary);
}

.kfk-link.kfk-light {
	color: #ffffff;
}

.kfk-link:hover {
	background-color: var(--bs-primary-bg-subtle);
	border-radius: 5px;
	text-decoration: none;
}

.kfk-link.kfk-light:hover {
	border-radius: 5px;
	color: rgba(0, 0, 255, 0.4);
}

.kfk-link a {
	text-decoration: none;
	color: rgba(0, 0, 255, 0.4);
}

.iconDiv {
	display: inline-block;
}

.kfk-link:hover .aniSpin {
	animation: 1.5s linear 0s infinite normal none running spinning;
}

.kfk-link:hover .aniShake {
	animation: 0.5s linear 0s infinite normal none running shaking;
}

.kfk-a {
	text-decoration: none;
}

.kfk-avatar-small {
	width: 32px;
	height: 32px;
	border-radius: 16px;
}

.kfk-avatar-middle {
	width: 80px;
	height: 80px;
}

.kfk-avatar-letter-small {
	width: 36px;
	height: 36px;
	border-radius: 18px;
	border: 1px solid rgba(200, 200, 255, 0.8);
	background-color: rgba(0, 0, 255, 0.05);
	font-size: 24px;
	font-weight: bolder;
	overflow: hidden;
}

.kfk-avatar-letter-middle {
	width: 80px;
	height: 80px;
	background-color: rgba(0, 0, 255, 0.05);
	font-size: 36px;
	font-weight: bolder;
	overflow: hidden;
	text-align: cetner;
}

.kfk-cover-virtual {
	width: 90px;
	height: 60px;
	background-color: rgba(0, 0, 255, 0.05);
	color: rgba(0, 0, 0, 0.05);
	font-size: 36px;
	font-weight: bolder;
	overflow: hidden;
	text-align: cetner;
}

.kfk-signature {
	width: 100px;
	height: 50px;
}

.kfk-decision-done {
	height: 50px;
}

.form-control:focus {
	border-color: inherit;
	-webkit-box-shadow: none;
	box-shadow: none;
}

.kfk-trackentry {
	background-color: rgba(0, 0, 0, 0.03);
}

.kfk-table-input-field {
	min-width: 160px;
}

.avatar16 {
	width: 16px;
	height: 16px;
}

.avatar16 {
	width: 16px;
	height: 16px;
	border-radius: 10px;
}

.avatar20 {
	width: 20px;
	height: 20px;
	border-radius: 10px;
}

.avatar32 {
	width: 32px;
	height: 32px;
	border-radius: 16px;
}

.avatar40 {
	width: 40px;
	height: 40px;
	border-radius: 20px;
}

.avatar40-round5 {
	width: 40px;
	height: 40px;
	border-radius: 5px;
}

.avatar80-round10 {
	width: 80px;
	height: 80px;
	border-radius: 10px;
}

.avatar50-round25 {
	width: 50px;
	height: 50px;
	border-radius: 25px;
}

.avatar50-round25-highlight {
	width: 50px;
	height: 50px;
	border-radius: 25px;
	border-style: solid;
	border-width: 4px;
	border-color: #2776ff;
}

div#todo_comments img {
	max-width: 400px;
}

.comment_uid {
	color: #2776ffaa;
}

.cover-90 {
	width: 90px;
	height: 60px;
	border-radius: 5px;
}

.cover-fullscreen {
	position: fixed;
	top: 0;
	left: 5%;
	/* center the div horizontally */
	width: 90%;
	border-radius: 5px;
	z-index: 999;
	/* place the div above other elements */
}

#templatehelp kbd {
	background-color: #6348aa;
	color: #ffffff;
}

.kfk-origin-comment {
	background-color: '#33CC3333';
}

.mtc-cursor-default {
	cursor: default;
}

.mtc-cursor-move {
	cursor:
		url(/cur/move.cur) 4 4,
		move;
}

.mtc-cursor-pan {
	cursor:
		url(/cur/pan.cur) 4 4,
		move;
}

.mtc-cursor-kuang {
	cursor:
		url(/cur/kuang.cur) 4 4,
		move;
}

.mtc-cursor-ACTION {
	cursor:
		url(/cur/ACTION.cur) 4 4,
		pointer;
}

.mtc-cursor-INFORM {
	cursor:
		url(/cur/INFORM.cur) 4 4,
		pointer;
}

.mtc-cursor-SCRIPT {
	cursor:
		url(/cur/SCRIPT.cur) 4 4,
		pointer;
}

.mtc-cursor-TIMER {
	cursor:
		url(/cur/TIMER.cur) 4 4,
		pointer;
}

.mtc-cursor-SUB {
	cursor:
		url(/cur/SUB.cur) 4 4,
		pointer;
}

.mtc-cursor-AND {
	cursor:
		url(/cur/AND.cur) 4 4,
		pointer;
}

.mtc-cursor-OR {
	cursor:
		url(/cur/OR.cur) 4 4,
		pointer;
}

.mtc-cursor-GROUND {
	cursor:
		url(/cur/GROUND.cur) 4 4,
		pointer;
}

.mtc-cursor-CONNECT {
	cursor:
		url(/cur/CONNECT.cur) 4 4,
		pointer;
}

.mtc-cursor-THROUGH {
	cursor:
		url(/cur/THROUGH.cur) 4 4,
		pointer;
}

.mtc-cursor-POINTER {
	cursor:
		url(/cur/POINTER.cur) 0 0,
		pointer;
}

.textsig-0 {
	width: fit-content;
	max-width: 150px;
	height: 32px;
	border: 1px solid #0000004c;
	font-weight: 'bolder';
	font-size: 18px;
	padding: 0px 2px 0px 2px;
	margin: 2px;
	overflow-x: auto;
}

.refreshIndicator {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 24px;
	height: 24px;
	border: 1px solid;
	border-color: #6667ad66;
	border-radius: 12px;
	background-color: #d2e1ef;
	display: inline-block;
	transform-origin: center center;
	cursor: pointer;
}

.refreshIndicator.stale {
	border: 1px solid;
	border-color: #0d6efd66;
	border-radius: 12px;
	background-color: #d2e1ef;
}

@keyframes glow {
	50% {
		transform: rotate(180deg) scale(1.2);
	}

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

@keyframes huxi {
	25% {
		transform: scale(1.2);
	}

	50% {
		transform: scale(1);
	}

	75% {
		transform: scale(0.9);
	}

	100% {
		transform: scale(1);
	}
}

.refreshIndicator.active {
	background: transparent url(/images/metatocome-no-text.png) no-repeat center center;
	background-size: contain;
	background-repeat: no-repeat;
	transform-origin: center center;
	animation: 2s linear 0s infinite normal none running huxi;
	transition:
		width 2s,
		height 2s,
		background-color 2s,
		transform 2s;
}

.refreshIndicator.active.loading {
	animation: 2s linear 0s infinite normal none running glow;
}

.homecard:hover {
	cursor: pointer;
}

.debug {
	display: none;
	position: absolute;
	top: 10px;
	left: 40%;
}

.myaccordion .accordion-item {
	background-color: transparent !important;
}

.card_ST_DONE {
	background-color: rgba(255, 255, 255, 0.375);
}

.kfk-label {
	font-size: 9px;
}

.dropdown a {
	text-decoration: none;
}

.dropdown a:hover {
	text-decoration: none;
}

.ykcode {
	font-size: 16px;
	font-family: var(--font-mono);
	background-color: rgba(255, 255, 255, 0.45);
	border-radius: 3px;
	box-shadow: 2px 2px 6px rgb(255 255 255 / 25%);
	padding: 0.5em;
	color: var(--text-color);
}

.nodecoration {
	text-decoration: none;
}

.blink-cursor {
	display: inline-block;
	height: 1em;
	width: 0.5em;
	background-color: black;
	animation: blink 1s infinite;
}

/* Define the animation */
@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

.otherlogo {
	color: var(--kfk-footer-logo-bg-color);
}

.caishen-answer2 {
	position: relative;
	margin: 0.5rem 0 0.5rem 0;
	padding: 5px;
	border-radius: 5px;
	background-color: #f0f0f0;
	color: #333;
	line-height: 1.5;
	display: flex;
	align-items: flex-start;
	/* To align them vertically in the middle */
}

.caishen-question {
	margin: 10px 0;
	padding: 15px;
	border-radius: 5px;
	background-color: #a0f0a0;
	color: #333;
	line-height: 1.5;
	text-align: right;
}

.caishen-logo {
	width: 2rem;
	height: 2rem;
	margin: 0 5px 0 0;
	border-radius: 0.5rem;
	border: 1px solid #d4d4d4;
	/* Add a border */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	/* Add a shadow */
}

.caishen-logo-small {
	width: 1rem;
	height: 1rem;
	border-radius: 0.25rem;
}

.caishen_warning {
	color: rgba(0, 0, 0, 0.6);
	font-size: 0.2rem;
}

.kfk-invalid {
	color: red;
	font-size: 0.8rem;
}

/* add an amazing animation to the social icons */

.social-icons a {
	transition: all 0.3s ease-in-out;
}

/* .card:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	cursor: pointer;
} */
.cards {
	cursor: pointer;
	/* 设置鼠标样式为小手指 */
}

.cards:hover::after {
	cursor: pointer;
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0.25rem;
	background-color: #12a0ff;
	/* 设置条的颜色 */
}

/* 基础样式 */
.markdown-body {
	font-family: Arial, sans-serif;
	line-height: 1.6;
	padding: 20px;
}

/* 标题样式 */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3 {
	border-bottom: 1px solid var(--bs-btn-border-color);
	padding-bottom: 0.3em;
}

/* 段落样式 */
.markdown-body p {
	margin: 0.8em 0;
}

/* 列表样式 */
.markdown-body ul,
.markdown-body ol {
	padding-left: 2em;
}

/* 引用样式 */
.markdown-body blockquote {
	border-left: 4px solid var(--bs-btn-border-color);
	padding-left: 20px;
	font-style: italic;
	color: var(--text-color);
}

/* 代码块样式 */
.markdown-body pre {
	background-color: var(--bs-body-bg);
	padding: 15px;
	overflow-x: auto;
}

.markdown-body img {
	width: 100%;
	height: auto;
}

.markdown-body code {
	padding: 2px 6px;
	border-radius: 3px;
	font-family: 'Courier New', Courier, monospace;
	color: var(--bs-code-color) !important;
}

/* 链接样式 */
.markdown-body a {
	color: var(--bs-btn-bg);
	text-decoration: none;
}

.markdown-body a:hover {
	text-decoration: underline;
}

.hljs {
	line-height: 1.2;
	color: var(--text-color) !important;
	background-color: var(--bs-body-bg) !important;
}

.hljs pre {
	background-color: var(--bs-body-bg) !important;
	box-shadow: none !important;
}