@import-normalize;.category-menu {
	top: 60px !important;
	border-top: solid 4px #008dfc;
	.ant-dropdown-menu {
		/* border-radius: 0 0 6px 6px !important; */
		padding: 0 !important;
		max-height: 80vh !important;
		min-width: 188px !important;
		overflow-y: auto;

		.ant-dropdown-menu-item {
			height: 40px;
		}
		.ant-dropdown-menu-item-active,
		.ant-dropdown-menu-item-selected {
			color: var(--word-title-color);
		}
	}

}

.category-name {
	color: #fff;
	display: flex;
	flex-flow: row;
	justify-content: center;
	align-items: center;
	font-size: 18px;
}

.category-icon {
	width: 24px;
	height: 24px;
}
.ant-layout-sider {
	&.mboc-sider-container {
		box-sizing: border-box;
		height: calc(100vh - var(--ant-layout-header-height));
		overflow: auto;
		background: url('/dots-w2p/assets/bg-sidebar@3x-Be-1HzMI.png') no-repeat 32% bottom;
		background-size: cover;
		position: relative;
		display: flex !important;
		justify-content: flex-end;
		&.header-hidden {
			display: none !important;
		}

		.ant-layout-sider-children {
			width: 240px;
		}

		&.ant-layout-sider-collapsed {
			justify-content: center;
			.ant-layout-sider-children {
				width: 68px;
			}
			.ant-layout-sider-trigger {
				margin-right: 0;
				.icon-sidebar-collapse {
					margin-right: 0 !important;
				}
			}
		}

		.mboc-sidebar-hd {
			position: relative;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 28px 16px 20px 24px;
			&:after {
				content: '';
				position: absolute;
				left: 24px;
				right: 16px;
				bottom: 0;
				height: 1px;
				background: url('/dots-w2p/assets/border-sidebar@3x-C96lh7lQ.png') no-repeat center center;
				background-size: 100% 100%;
			}

			.mboc-sidebar-hd__main {
				display: flex;
				align-items: flex-end;
				.text {
					display: block;
					margin-left: 4px;
					line-height: 14px;
					font-size: 24px;
					font-weight: normal;
					font-family: 'CorporateACon-Reg', 'HanyiShenYi-Regular-W70';
					font-stretch: condensed;
					color: #fff;
					white-space: nowrap;
					&.is-windows {
						line-height: 20px;
					}
				}
				img {
					width: 20px;
					height: 20px;
				}
			}
			.mboc-sidebar-hd__aside {
				display: block;
				width: 28px;
				height: 28px;
				background: url('/dots-w2p/assets/icon-sidebar-home@3x-h8bCqDsm.png') no-repeat center center;
				background-size: cover;
				border-radius: 5px;
				cursor: pointer;
				&:hover {
					background-image: url('/dots-w2p/assets/icon-sidebar-home-hover@3x-CrYKWr_v.png');
				}
			}
		}

		.ant-layout-sider-trigger {
			background-color: transparent !important;
			display: flex;
			height: 60px;
			justify-content: flex-end;
			align-items: flex-end;
			cursor: auto;
			width: 28px !important;
			margin-right: 16px;

			.icon-sidebar-collapse {
				margin-bottom: 32px;
				width: 28px;
				height: 28px;
				background: url('/dots-w2p/assets/icon-sidebar-collapse@3x-Bk9k42rk.png') no-repeat center center;
				background-size: cover;
				cursor: pointer;
				&:hover {
					background-image: url('/dots-w2p/assets/icon-sidebar-collapse-hover@3x-Bxh_jeRz.png');
				}
			}
		}

		.mobc-sidebar-menu {
			margin-top: 12px;
			margin-left: -4px;
			width: calc(100% + 4px);
			background: transparent;
			a.no-path-menu {
				&:hover {
					color: #fff;
				}
			}
			/** style for indent */
			/** level 1 item: submenu container: module name */
			> .ant-menu-submenu {
				> .ant-menu-submenu-title {
					height: 0;
				}
				/** level 2 item: submenu outter wrapper */
				> .ant-menu-sub {
					> .ant-menu-item {
						&:first-of-type {
							margin-top: 0;
						}
					}
				}
			}
		}
		.ant-menu-dark {
			.ant-menu-sub {
				&.ant-menu-inline {
					background: transparent;
				}
			}
		}
		.ant-menu-submenu {
			&:not(:first-child) {
				margin-top: 10px;
			}
		}

		.ant-menu-submenu,
		.ant-menu-item {
			.ant-menu-title-content {
				a {
					font-size: 16px;
					color: #fff;
					background-color: transparent;
					font-weight: normal;
					transition: transform 0.5s ease;
					opacity: 0.7;
					&:hover {
						opacity: 1;
						font-weight: 500;
					}
				}
			}
			img {
				opacity: 0.7;
			}
			.ant-menu-submenu-title {
				&:hover {
					.ant-menu-title-content {
						a {
							opacity: 1;
							font-weight: 500;
						}
					}
					img {
						opacity: 1;
					}
				}
			}
		}
		.ant-menu-item {
			width: 100%;
			margin: 10px 0 0 0;
		}

		.ant-menu-submenu-title {
			box-sizing: border-box;
			width: 100%;
			margin-inline: 0;
			margin-block: 0;
			padding-right: 15px;
			font-size: 16px;
		}
		.ant-menu-sub .ant-menu-submenu-selected .ant-menu-submenu-title,
		.ant-menu-item-selected {
			border-radius: 0;
			.ant-menu-title-content {
				a {
					font-weight: 500;
					opacity: 1;
					color: #008dfc;
					transition: transform 0.5s ease;
				}
				+ img {
					opacity: 1;
				}
			}
		}
		.ant-menu-item-selected {
			position: relative;
			background-color: rgba(0, 141, 252, 0.2);
			font-weight: 500;
			&:after {
				content: '';
				position: absolute;
				right: 0;
				height: 100%;
				width: 4px;
				background: #008dfc;
			}
		}
		.icon-expand-arrow {
			width: 24px;
			height: 24px;
			transition: transform 0.5s ease;
		}
		.ant-menu-submenu {
			&:not(.ant-menu-submenu-open) {
				.icon-expand-arrow {
					transform: rotate(180deg);
				}
			}
		}

		.ant-layout-sider-collapsed {
			.side-title {
				display: none;
			}
		}

		&.ant-layout-sider-collapsed {
			.ant-menu-inline-collapsed {
				margin-left: 0;
				margin-top: 32px;
				> .ant-menu-submenu {
					> .ant-menu-submenu-title {
						transition: all 0.3s;
						height: 20px;
						padding: 0;
						display: flex;
						flex-direction: column;
						align-items: center;

						.ant-menu-item-icon {
							display: block;
							height: 20px;
							width: 20px;
						}
					}
				}
			}

			.icon-sidebar-collapse {
				margin-right: 20px;
				transform: rotate(180deg);
			}

			.mboc-sidebar-hd {
				justify-content: center;
				padding: 28px 0 0;
				&::after {
					background: none;
				}
				.mboc-sidebar-hd__main {
					display: none;
				}
			}
		}
	}
}

.ant-menu-submenu-popup {
	.ant-menu-title-content {
		a {
			& {
				background-color: transparent;
				color: #fff !important;
				font-weight: normal;
				opacity: 0.7;
			}
			&:hover {
				opacity: 1;
				font-weight: 500;
			}
		}
	}
	&.ant-menu-dark .ant-menu-item-selected,
	.ant-menu-dark > .ant-menu .ant-menu-item-selected {
		background-color: transparent;
		color: #008dfc;
	}
	.ant-menu-submenu-selected,
	.ant-menu-item-selected {
		background-color: transparent;
		.ant-menu-item {
			margin-block: 0;
		}
		.ant-menu-title-content {
			a {
				opacity: 1;
				font-weight: 500;
				color: #008dfc !important;
			}
		}
	}

	.ant-menu-vertical.ant-menu-sub {
		max-height: calc(100vh - 152px);
	}
}
.detail-wrapper {
	min-width: 1200px;

	.title {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title-info > label:first-child {
			font-size: 24px;
			font-weight: 500;
			color: #1a1a1a;
		}

		.title-info > label:last-child {
			font-size: 24px;
			color: #848484;
			font-family: HelveticaNeue;
			padding-left: 16px;
		}

		.status-indicator {
			font-family: HelveticaNeue;
			font-size: 14px;
			color: #4f4f4f;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			gap: 8px;

			.indicator {
				height: 8px;
				width: 8px;
				border-radius: 50%;
			}
		}
	}
	.detail-content-wrapper {
		padding: 24px 40px 56px;
		display: flex;
		flex-direction: column;
		gap: 24px;

		> div {
			min-height: 100px;
			background: #fff;

			.subTitle {
				font-size: 18px;
				height: 62px;
				font-weight: 500;
				border-bottom: 1px solid #e8e8e8;
				color: #1a1a1a;
				padding: 18px 24px;
				display: flex;
				justify-content: space-between;
				align-items: center;
				position: relative;

				> button {
					color: #008dfc;
					border: none;
					padding: 0;
				}

        div {
					color: #848484;
					font-size: 14px;
				}

				.ant-upload-wrapper {
					button {
						color: #008dfc;
						border: none;
						padding: 0;
					}

					.ant-upload-list {
						position: absolute;
						right: 0;
						top: 56px;
						padding: 0 20px;
						width: auto;
						border-radius: 8px;
						box-shadow: 0 4px 4px 2px #f0f0f0;
						border: dashed 1px #e0e0e0;
						background-color: #fff;
						z-index: 999;
					}

					.ant-upload-list-item {
						margin: 21px 0;
            color: #1a1a1a;
            font-family: PingFangSC;

						.ant-upload-list-item-actions .ant-upload-list-item-action {
							opacity: 1;
						}

						.ant-upload-icon {
							padding-top: 8px;

							.anticon {
								> svg {
									color: #008dfc;
									width: 28px;
									height: 28px;
								}
							}
						}
						.ant-upload-list-item-progress {
							padding-inline-start: 36px;

							.ant-progress-bg .ant-progress-bg-outer {
								background-color: #008dfc;
							}
						}
					}
				}
			}
			> .detail-content {
				padding: 22px 24px 32px;

				.detail-value {
					padding-top: 10px;
					color: #848484;
				}
			}

			.table-content {
				padding: 32px 24px;
			}
		}
	}
}
.comment-and-upload-modal {
	.ant-modal-content {
		width: 840px;
		min-height: 400px;
		padding: 0;
		padding-top: 15px;

		.ant-modal-header {
			height: 40px;
			margin-bottom: 0;
			padding: 0 24px 14px;
			border-bottom: 1px solid #e8e8e8;
			.ant-modal-title {
				font-family: HelveticaNeue;
				font-size: 18px;
				font-weight: 500;
			}
		}

		.ant-modal-body {
			min-height: 296px;
			padding: 32px 120px;

			.comment-title {
				font-size: 16px;
				margin-bottom: 8px;
			}

			.comment-input {
				margin-top: 8px;
			}
		}

		.ant-modal-footer {
			height: 64px;
			margin-top: 0;
			padding: 16px 19px 16px 0;
			border-top: 1px solid #e8e8e8;
		}
	}
}

.upload-container {
	margin-top: 20px;
	.ant-upload-list {
		padding-top: 16px;

		.upload-file-item-container {
			height: 20px;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			margin-bottom: 12px;

			.upload-file-name {
				margin-left: 8px;
				margin-right: 13px;
				width: 120px;
				height: 20px;
				font-size: 14px;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: #4f4f4f;
			}

			.ant-progress-bg-outer {
				height: 2px !important;
				border-radius: 1px;
			}
		}
	}

	.upload-file-hint {
		color: #4f4f4f;
		opacity: 0.5;
		font-size: 14px;
		margin-left: 17px;
	}
}



@font-face {
  font-family: 'CorporateACon-Reg';
  src: local('CorporateACon-Reg'), url('/dots-w2p/assets/CorporateACon-Reg.otf') format('woff');
}

@font-face {
  font-family: 'HanyiShenYi-Regular-W70';
  src: url('/dots-w2p/assets/HanyiShenYi-Regular-70.ttf') format('truetype');
}

:root {
	--primary-color: #008dfc;
	--primary-hover-color: #33a4fd;
	--primary-click-color: #036dc1;
	--primary-bg-color: #000;

	--info-color: #eaf4fb;
	--success-color: #ecf4ed;
	--warning-color: #fdf9ea;
	--failed-color: #fbeded;
	--error-color: #d92121;

	--word-title-color: #1a1a1a; /* title */
	--word-menu-color: rgba(255, 255, 255, 0.8);
	--word-menu-selected: #33a4fd;
	--word-primary-text-color: #4f4f4f; /* primary text */
	--word-secondary-text-color: #848484; /* secondary text */
	--word-disable-color: #bbbbbb; /* disable */
	--word-border-color: #e8e8e8; /* border */
	--word-dividers-color: #f8f8f8; /* dividers */
	--word-background-color: #f5f5f5; /* background */
	--word-table-border-color: #f0f0f0; /* table border */
	--word-table-header-color: #fafafa; /* table header */
	--word-secondary-background-color: #fcfcfc;
}

.mb-details-page {
	height: 100%;

	display: flex;
	flex-flow: column nowrap;
	align-items: stretch;

	.mb-details-page-heaer {
		flex: none;
		background-color: #fff;
	}

	.mb-details-page-content {
		flex: auto;
		background-color: var(--word-background-color);
		padding: 24px 40px;
		margin: 0 -40px -24px;
	}

	.ant-tabs-nav {
		margin-bottom: 0 !important;
	}

	.ant-tabs-nav::before {
		border-bottom: 0 !important;
	}
}