.ty-flow-container {
	box-sizing: border-box;
	// border: 1px solid;
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 200px;
	overflow-x: auto;
	overflow-y: auto;

	.ty-flow-node {
		cursor: pointer;
	}

	p {
		margin: 0;
	}


	.ty-flow-circleError-selected {
		fill: #ff4d4f;
	}

	.ty-flow-circle-selected {
		fill: #1677ff;
		stroke: #fff;
	}

	.ty-flow-line-selected {
		stroke: #1677ff !important;
		stroke-width: 2 !important;
		/* 添加箭头 */
		marker-end: url(#arrowMarkeActive);
	}

	.ty-flow-line-clicked {
		stroke: #1677FF !important;
		stroke-width: 2 !important;
		marker-end: url(#arrowMarkeActive);
		/* 添加箭头 */
	}

	/*块儿元素显示省略号*/
	.ty-flow-text-ellipsis {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	//折叠面板的下拉样式
	.ty-flow-fold {
		position: absolute;
		overflow-y: auto;

		::-webkit-scrollbar-thumb {
			background: #c8c9cc;
			border-radius: 30px;
		}

		::-webkit-scrollbar {
			border-radius: 3px;
			height: 6px;
			width: 6px;
		}

		:hover {
			&::-webkit-scrollbar {
				background-color: #c8c9cc;
			}

			/*定义滚动条的轨道，内阴影及圆角*/
			&::-webkit-scrollbar-track {
				background-color: #F3F5FA;
			}

			/*定义滑块，内阴影及圆角*/
			&::-webkit-scrollbar-thumb {
				background-color: #c8c9cc;
			}
		}


		&-box {
			margin: 0;
			list-style: none;
			// width: 230px;
			max-height: 135px;
			text-align: left;
			padding: 4px 6px 7px 8px;
			animation-duration: 0.5s;
			/* 动画持续时间 */
			animation-timing-function: ease-in;
			background: #F3F5FA;
			overflow-y: auto;
			box-sizing: border-box;
			overflow-x: hidden;


			&-item {
				height: 39px;
				font-size: 12px;
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: rgba(255, 255, 255, 0.65);
				margin-bottom: 4px;
				color: #333;
				padding: 0 16px 0 7px;
				box-sizing: border-box;

				&-left {
					width: 80%;
					display: flex;
					align-items: center;

					&-icon {
						width: 24px;
						height: 25px;
						margin-right: 20px;
						overflow: hidden;
						display: flex;
						align-items: center;
						justify-content: center;

						img {
							width: 100%;
							height: 100%;
							object-fit: contain;
						}

						svg {
							// width: 100%;
							// height: 100%;
							color: #8392B8;
						}
					}

					&-name {
						flex: 1;
					}
				}

				// .common-icon {
				// 	font-size: 17px;
				// 	padding-left: 8px;
				// }

				// i {
				// 	margin-right: 6px;
				// 	font-style: normal;
				// }

				// img {
				// 	width: 24px;
				// 	height: 24px;
				// 	margin-right: 4px;
				// 	display: inline-block;
				// 	margin-left: 7px;
				// }

				// span {
				// 	width: 100%;
				// }

				&:hover {
					// background: #b5b5b5;
					cursor: pointer;
				}
			}

			&-item:last-child {
				margin-bottom: 0;
			}
		}
	}

	.ty-flow-operate {
		position: absolute;
		// background: black;
		color: #fff;

		&-wrap {
			text-align: center;
		}

		&-jump:hover {
			cursor: pointer;
		}
	}
}

//操作选项框
.ty-flow-popover {
	& * {
		padding: 0;
		margin: 0;
		box-sizing: border-box;
	}

	ul {
		list-style: none;
	}

	&-options {
		color: var(--ty-color-text-label, rgba(0, 0, 0, 0.65));
		padding-bottom: 12px;
		font-family: PingFangSC-Medium, PingFang SC;



		.ty-flow-popover-title {
			width: 100%;
			line-height: 22px;
			margin-bottom: 16px;
			padding-top: 1px;
			padding-left: 0;
			border-width: 1px;
			border-bottom-style: solid;
			border-color: var(--aspm-bg-color-border, rgba(0, 0, 0, 0.1));
			// border-bottom: 1px solid rgba(0, 0, 0, 0.1);

			&>p {
				width: 100%;
				font-size: 13px;
				font-weight: 500;
				display: inline-block;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			span {
				font-size: 12px;
				font-weight: 400;
				word-break: break-all;
				padding-right: 17px;
				display: inline-block;
				line-height: 22px;
			}
		}

		li {
			width: 100%;
			height: 32px;
			font-size: 12px;
			font-weight: 400;
			margin-top: 4px;
			line-height: 32px;
			padding-left: 25px;

		}

		li:hover {
			font-weight: 400;
			color: var(--ty-color-text-heading, rgba(0, 0, 0, 0.85));
			cursor: pointer;
			background: var(--aspm-bg-color-gery, #F7F8FA);
		}

		p {
			width: 100%;
			height: 20px;
			font-size: 12px;
			font-weight: 400;
			margin-top: 11px;
			padding-left: 16px;
		}
	}

	& .ant-popover-content {
		min-width: 136px;
	}

	& .ant-popover-content .ant-popover-inner {
		padding: 0;
		border-radius: 2px;
	}

	& .ant-popover-content .ant-popover-inner-content,
	& .ant-popover-content .ant-popover-inner .ant-popover-inner-content {
		padding: 0
	}
}

.ty-flow-icon-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ty-flow-icon-box {
	position: relative;
	box-sizing: border-box;

	img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.ty-flow-icon-img {
		display: block;
	}

	.ty-flow-icon-img-active {
		display: none;
	}
}

.ty-flow-icon-box-active,
.ty-flow-icon-box-click-active {
	color: #fff;

	.ty-flow-icon-img {
		display: none;
	}

	.ty-flow-icon-img-active {
		display: block;
	}
}

.ty-flow-tooltip {
	position: absolute;
	top: 0;
	left: 0;
	width: 50px;
	height: 20px;
	overflow: hidden;
	z-index: -1;
	// border: 1px solid;
	display: flex;
	justify-content: center;

	.ant-tooltip {
		--antd-arrow-background-color: var(--ty-color-bg-container, #fff);

		.ant-tooltip-inner {
			background-color: var(--ty-color-bg-container, #fff);
			color: var(--ty-color-text-label, rgba(0, 0, 0, 65%));
		}
	}

}