.workDash {
	&-d {
		display: flex;
		width: 100%;
		justify-content: space-around;
		// & .ant-space-item {
		//   flex: 1;
		// }
	}
	&-item {
		flex: 1;
		display: flex;
		gap: 16px;
		&-img {
			width: 48px;
			height: 48px;
			background-color: rgba(242, 243, 245, 0.95);
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			& img {
				width: 24px;
				height: 24px;
			}
		}
		&-div {
		}
		&-title {
			font-size: 14px;
			line-height: 22px;
			color: #4e5969;
			display: flex;
		}
		&-value {
			color: #1d2129;
			font-size: 18px;
			line-height: 26px;
			display: flex;
		}
	}
	&-item1 {
		flex: 2;
		display: flex;
		gap: 16px;
	}
	&-main {
		display: flex;
		flex: 2;
		background-color: #fff;
		&-flex_1 {
			flex: 1;
			background-color: #fff;
		}
		&-card {
			// width: 197px;
			&-one {
				padding: 0 16px 16px;
				display: flex;
				gap: 24px;
				justify-content: space-between;
			}
			&-head {
				display: flex;
				&-l {
					width: 80px;
					height: 80px;
					background-color: #08979c;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 5px 0px 0px 5px;
					&-img {
						width: 48px;
						height: 48px;
						border-radius: 50%;
						background-color: #96e0d7;
						display: flex;
						justify-content: center;
						align-items: center;
						& img {
							width: 24px;
							height: 24px;
						}
					}
				}
				&-r {
					background: linear-gradient(271deg, #13c2c2 0%, rgba(5, 174, 174, 0.8) 14%);
					color: #fff;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					justify-content: center;
					border-radius: 0px 5px 5px 0px;
					padding-left: 16px;
					flex: 1;
					&-title {
						font-size: 14px;
					}
					&-value {
						font-size: 20px;
						line-height: 28px;
						font-weight: 500;
						display: flex;
						align-items: center;
						height: 28px;
					}
					&-subValue {
						font-size: 12px;
						line-height: 28px;
						font-weight: 400;
						position: relative;
						top: 2px;
					}
				}
			}
			&-body {
				display: flex;
				flex-wrap: wrap;
				padding: 10px;
				gap: 16px;
        margin-top: 12px;
				&-flex {
					display: flex;
					flex-direction: column;
					gap: 4px;

					&-title {
						font-size: 12px;
						line-height: 20px;
						color: #4e5969;
					}
					&-value {
						color: #1d2129;
						font-size: 14px;
						line-height: 22px;
					}
				}
			}
		}
	}
	&-main1 {
		// display: flex;
		flex: 1;
		background-color: #fff;
		&-chart {
			display: flex;
			flex-wrap: wrap;
			padding: 0 16px 12px;
		}
		&-flex {
			width: 50%;
			display: flex;
			gap: 16px;
			justify-content: center;
			padding: 11px 0;
			&-l {
				font-size: 14px;
				line-height: 22px;
				color: #4e5969;
				display: flex;
				flex-direction: column;
				gap: 4px;
				&-value {
					color: #1d2129;
					font-size: 18px;
					line-height: 26px;
				}
				&-subValue {
					font-size: 14px;
					line-height: 22px;
					color: #4e5969;
				}
			}
			&-r {
				width: 72px;
				height: 48px;
				padding: 4px 12px;
				text-align: center;
				font-size: 12px;
				line-height: 20px;
				&-green {
					background: #e8ffea;
					color: #00b42a;
				}
				&-orange {
					background: #fff7e6;
					color: #ef6c24;
				}
				&-blue {
					background: #e6f7ff;
					color: #1890ff;
				}
			}
		}
	}
	&-grade {
		padding: 16px;
		display: flex;
		flex-direction: column;
		gap: 8px;
		&-item {
			padding: 12px 8px;
			&-t {
				display: flex;
				justify-content: space-between;
				&-orange {
					padding: 2px 12px;
					color: #ef6c24;
					border-radius: 2px;
					background: #fff7e6;
					border: 1px solid #fa8c16;
				}
				&-blue {
					padding: 2px 12px;
					color: #3491fa;
					border-radius: 2px;
					background: #e8f7ff;
					border: 1px solid #3491fa;
				}
				&-red {
					padding: 2px 12px;
					color: #f76560;
					border-radius: 2px;
					background: #ffece8;
					border: 1px solid #f53f3f;
				}
				&-value {
					font-size: 18px;
					line-height: 28px;
					margin-right: 4px;
				}
				&-unit {
					font-size: 12px;
					line-height: 20px;
					color: #86909c;
				}
			}
			&-b {
				margin-top: 8px;
				&-bg {
					height: 3px;
					width: 100%;
					background: #e9eaeb;
					position: relative;
					&-orange {
						width: 80%;
						height: 3px;
						position: absolute;
						top: 0;
						left: 0;
						background: linear-gradient(270deg, #ffc069 0%, #fa8c16);
					}
					&-blue {
						width: 20%;
						height: 3px;
						position: absolute;
						top: 0;
						left: 0;
						background: linear-gradient(270deg,#57a9fb 0%, #3491fa);
					}
          &-red {
						width: 10%;
						height: 3px;
						position: absolute;
						top: 0;
						left: 0;
						background: linear-gradient(270deg,#f76560 0%, #f53f3f);
					}
				}
			}
			&-orange {
				border: 1px solid #fa8c16;
			}
			&-blue {
				border: 1px solid #3491fa;
			}
			&-red {
				border: 1px solid #f76560;
			}
		}
	}
}

.workDash-bg_2 {
	background: #1890ff;
	&_img {
		background-color: #91d5ff;
	}
	&_r {
		background: linear-gradient(271deg, #1890ff 0%, rgba(24, 144, 255, 0.8) 14%);
	}
}

.workDash-bg_3 {
	background: #ef6c24;
	&_img {
		background-color: #ffcba1;
	}
	&_r {
		background: linear-gradient(271deg, #ef6c24 0%, rgba(239, 108, 36, 0.8) 14%);
	}
}

.workDash-bg_4 {
	background: #d10269;
	&_img {
		background-color: #ffa6c6;
	}
	&_r {
		background: linear-gradient(271deg, #d10269 0%, rgba(209, 2, 105, 0.8) 14%);
	}
}