#couplingPreviewDialog {
	width: 100vw;

	& div.dialog-main-message {
		padding: 0;
		margin: 0 1.8em;
		border: solid 1px var(--formation-table-main-border);
		height: calc(100vh - 25em);
		overflow-y: scroll;

		>div:first-child {
			background-color: rgba(255, 255, 255, 0.9);
			border-bottom: 1px solid #ccc;
			position: sticky;
			top: 0;
			left: 0;
			padding: 1em;

			>p {
				margin-top: 0;
			}

			>.cars-container {
				flex-wrap: nowrap;
				overflow-x: scroll;
			}

		}

		>div:last-child {
			padding: 1em;
		}

		& p {
			margin-bottom: 0;
		}
	}

	.cars-container {
		display: flex;
		flex-wrap: wrap;
	}

	#preview-current-formation,
	#preview-current-candidate {
		.outer {
			margin: 10px;
			width: calc(var(--simutrans-paktype) * var(--small-preview-ratio) + 2px);
			height: calc(var(--simutrans-paktype) * var(--small-preview-ratio) + 2px);
			border: 1px solid var(--simutrans-transparent);

			.image-container {
				transform-origin: left top;
				border: none;
			}
		}
	}

	#preview-current-formation .outer.dummy {
		border-color: transparent;
	}

	#preview-current-formation .outer:not(.dummy):last-child,
	#preview-current-candidate .outer {
		cursor: pointer;
		border: 1px solid #000;

		&:hover {
			border-color: #f00;
		}
	}

	& button#clear-preview-formation-button {
		margin-left: 0.8em;
		margin-right: 0.8em;
	}

	.status-bar {
		position: sticky;
		bottom: 0;
		left: 0;
		padding: 0.5em;
		width: 100%;
		min-height: 4em;
		background-color: rgba(255, 255, 255, 0.9);
		border-top: 1px solid #ccc;
	}
}