/* WMS web components styles */
.wms .failure {
	color: red;
}

.wms .failureBox {
	background-color: red;
	color: white;
}

.wms .warning {
	color: orange;
}

.wms .warningBox {
	background-color: orange;
}

.wms .success {
	color: lightgreen;
}

.wms .successBox {
	background-color: lightgreen;
}

.wms .selected,
.wms .selected td,
.wms .lu_selected {
	background-color: var(--special-backcolor, Highlight) !important;
	color: var(--special-color, HighlightText) !important;
}

.wms label {
	padding: 0 0;
}

@media (max-width: 600px) {
	dialog.wms[open] {
		position: fixed !important;
		inset: auto !important;
		margin: 0 !important;
		top: 50px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		display: block !important;
	}
}

dialog.wms[open] button {
	min-width: 5em;
}

dialog.wms[open] header {
	font-weight: bold;
}

.wms .sentiment {
	width: 2em;
	height: 2em;
	line-height: 2em;
	border-radius: 50%;
	background: CanvasText;
	color: Canvas;
	text-align: center;
	font-weight: bold;
	font-size: 1em;
	cursor: pointer;
}

.wms input[readonly] {
	font-weight: bold;
	border: none;
}

.wms [aria-disabled=true] .sentiment {
	background-color: GrayText;
}

.wms-place {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	padding: 0.5em 0;
	font-size: large;
	align-items: center;
	text-align: center;
}

.wms-place input {
	text-align: center;
}

.wms i {
	cursor: pointer;
}

.wms table {
	border-collapse: collapse;
}

.wms thead>tr>th {
	padding: 0.25em;
	border-bottom: thin solid gray;
	font-size: smaller;
	color: initial;
}

.wms tbody>tr>td {
	padding: 0.25em;
	border-bottom: thin solid gray;
	color: initial;
}

.wms select,
.wms input,
.wms button {
	padding: 0.25em;
}

wms-storage-unit {
	width: 90%;
}

wms-storage-unit table {
	width: 100%;
	border-collapse: collapse;
}

wms-storage-unit table tr:last-child td {
	border-bottom: thick solid CanvasText;
}

wms-storage-unit th {
	padding: 0.5em;
}

wms-storage-unit td {
	position: relative;
	border: thin solid CanvasText;
	padding: 0.25em;
	height: 4em !important;
	vertical-align: top;
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

wms-storage-unit td[data-sentiment]::after {
	content: attr(data-sentiment);
	position: absolute;
	top: 4px;
	right: 4px;

	font-weight: bold;
	background: CanvasText;
	color: Canvas;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
	border-radius: 50%;
	text-align: center;
	margin: 0.25em;
}

wms-storage-unit td.selected {
	background: lightgreen;
	color: black;
}

wms-storage-unit td.available {
	outline: 3px solid Highlight;
	outline-offset: -4px;
}

wms-storage-unit td.unavailable {
	outline: 3px solid red;
	outline-offset: -4px;
}

wms-storage-unit td.put {
	cursor: pointer;
}