/* 图例区域:1行4列 */
.wrapper_example {
	display: grid;
	grid-template-rows: repeat(1, 40px);
	grid-template-columns: repeat(5, 40px);
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	float: right;
	width: auto;
	overflow-x: auto;
	text-align: center;
	background: #ffffff;
	border-color: #ef342a;
}

/* 图例区域:1行1列 */
.wrapper_example-2 {
	display: grid;
	grid-template-rows: repeat(1, 40px);
	grid-template-columns: repeat(2, 40px);
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	float: right;
	width: auto;
	overflow-x: auto;
	text-align: center;
	background: #ffffff;
	border-color: #ef342a;
}

/* 头部图示使用 */
.item-example {
	font-weight: bold;
  color: red;
	line-height: 40px;
	text-align: center;
	/* border: 1px solid #00a0a0;*/
}

/* 普通 */
.material-border-null {
	background-color: #ffffff;
	border: 1px solid #00a0a0;
}

/* 半成品 8 */
.material-border-8 {
	text-align: center;
	background-color: #6aab9c;
	border: 3px solid #6aab9c;
}

/* 食品添加剂 7 */
.material-border-7 {
	text-align: center;
	background-color: #384e78;
	border: 3px solid #384e78;
}

/* 过敏源 2 */
.material-border-2 {
	text-align: center;
	background-color: #d064c0;
	border: 1px solid #e06c78;
}

/* 标签 6 */
.material-border-6 {
	text-align: center;
	background-color: #00ffff;
	border: 1px solid #e06c78;
}
.item-example-span {
	float: left;
	margin-right: 10px;
	font-weight: 800;
	line-height: 38px;
	text-align: center;
}

/* 货位方格区域 */
.autoWrapper {
	display: grid;
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	width: auto;
	padding: 0 30px 30px;
	overflow-x: auto;
	text-align: center;
	background: #ffffff;
	border-color: #ef342a;
}

/* 货位方格区域:针对与密集库：横向29，纵向57 */
.wrapper-Col50-row59 {
	display: grid;
	grid-template-rows: repeat(41, 28px);
	grid-template-columns: repeat(31, 28px);
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	width: auto;
	padding: 0 30px 30px;
	overflow-x: auto;
	text-align: center;
	background: #ffffff;
	border-color: #ef342a;
}

/* 货位方格区域 */
.wrapper-Col31-layer9 {
	display: grid;
	grid-template-rows: repeat(7, 38px);
	grid-template-columns: repeat(30, 38px);
	grid-row-gap: 10px;
	grid-column-gap: 10px;
	width: auto;
	padding: 0 30px 30px;
	overflow-x: auto;
	text-align: center;
	background: #ffffff;
	border-color: #ef342a;
}

/* 所有货位小方格的原始状态
    border: 1px solid #00a0a0; */
.item {
	font-weight: bold;
	line-height: 38px;
	text-align: center;
}
.item_title {
	font-weight: bold;
	line-height: 38px;
	text-align: center;
	border: 1px solid #ffffff;
}

/* 锁定货位的样式 EXTEND3=1 */
.keep-loc {
	background: #5989a2;
	border: 1px solid #00a0a0;
}

/* 存储状态:载货 */
.Load-NoIn {
  background-image: url("../../../../assets/image/locView/Load-NoIn.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

.Load-NoOut {
	background-image: url("../../../../assets/image/locView/Load-NoOut.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.Load-Freeze {
	background-image: url("../../../../assets/image/locView/Load-Freeze.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.Load-Normal {
	background-image: url("../../../../assets/image/locView/Load-Normal.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* 存储状态：空闲 */
.Free-Normal {
	color: #00a0a0;
}
.Free-Normal #div{
  font-size: large;
  color: #00a0a0;
}
.Free-NoOut {
	background-image: url("../../../../assets/image/locView/Free-NoOut.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.Free-NoIn {
	background-image: url("../../../../assets/image/locView/Free-NoIn.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.Free-Freeze {
	background-image: url("../../../../assets/image/locView/Free-Freeze.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* 存储状态：预出 */
.DoIn {
	background-image: url("../../../../assets/image/locView/DoIn.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* 存储状态：预入 */
.DoOut {
	background-image: url("../../../../assets/image/locView/DoOut.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.Fault {
	background: #ffee02;
	border: 1px solid #ef342a;
}

/* 通道的背景 */
.Point {
	background-color: #d4dff5;
	background-image: url("../../../../assets/image/locView/Channel.png");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
/* 通道的背景 */
.Area {
	background-color: #00aaff;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
/* 站台 */
.Station {
	background-color: #aa0000;
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

/* 不是货位的小方格 */
.none-loc {
	background-color: #384e78;
	border: 3px solid #384e78;
}

/* 马赛克背景 */
.Mosaic {
	position: relative;
	width: 38px;
	height: 38px;
	overflow: hidden;
	border: 0 solid transparent;
	box-shadow: 1px 1px 8px grey;
}
.Mosaic::after {
	--lineStart: 4%;
	--lineEnd: 96%;
	--bgStart: 25%;
	--bgEnd: 75%;
	--color: #5989a2;

	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	content: "";
	background-image:
				/* 前两个渐变是为了防止 rotate 之后的分割线 */ linear-gradient(
			0deg,
			var(--color) var(--lineStart),
			transparent var(--lineStart),
			transparent var(--lineEnd),
			var(--color) var(--lineEnd)
		),
		linear-gradient(
			-90deg,
			var(--color) var(--lineStart),
			transparent var(--lineStart),
			transparent var(--lineEnd),
			var(--color) var(--lineEnd)
		),
		linear-gradient(
			45deg,
			var(--color) var(--bgStart),
			transparent var(--bgStart),
			transparent var(--bgEnd),
			var(--color) var(--bgEnd)
		),
		linear-gradient(
			-45deg,
			var(--color) var(--bgStart),
			transparent var(--bgStart),
			transparent var(--bgEnd),
			var(--color) var(--bgEnd)
		);
	background-size: 15px 15px;
	transform: rotate(45deg);
}

/* 半成品 8 */
.material-border-8 {
	text-align: center;
	background-color: #e3e7e6;
	border: 3px solid #6aab9c;
}

/* 食品添加剂 7 */
.material-border-7 {
	text-align: center;
	background-color: #384e78;
	border: 3px solid #384e78;
}

/* 过敏源 2 */
.material-border-2 {
	text-align: center;
	background-color: #d064c0;
	border: 1px solid #e06c78;
}

/* 标签 6 */
.material-border-6 {
	text-align: center;
	background-color: #00ffff;
	border: 1px solid #e06c78;
}
.selectedByLocId {
	background-color: red;
	border: 1px solid red;
}
