.basket-order-send-message-action {
	max-width: 750px;
}

.basket-order-status-action {
	max-width: 500px;
}

.basket-order-status-progress {
	width: 100%;
	position: relative;
	margin-bottom: 2rem;
	margin-top: 1rem;
	/* doesn't work because the dropdowns are hidden then! */
	/*overflow-x: auto;*/
}
.basket-order-status-column {
	width: 200px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	opacity: 0.25;
}

.basket-order-status-point {
	width: 180px;
	overflow: visible;
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 0;
	min-height: 116px;
}
.basket-order-status-point button.dropdown-toggle {
	justify-content: space-between;
}
.basket-order-status-column .card-header {
	background-color: var(--bs-dark-bg-subtle);
}
.basket-order-status-column.done {
	opacity: 1;
}
.basket-order-status-column.done .basket-order-status-point {
	background-color: var(--bs-gray-200);
}
.basket-order-status-column.done .card-header {
	background-color: var(--typo3-state-success-bg);
}
.basket-order-status-column.done.status-canceled-unpaid .card-header {
	background-color: var(--typo3-state-danger-bg);
}
.typo3-12 .basket-order-status-column.done .card-header {
	background-color: var(--bs-success);
}
.typo3-12 .basket-order-status-column.done.status-canceled-unpaid .card-header {
	background-color: var(--bs-danger);
}
.basket-order-status-column.done .card-header .card-title {
	color: white;
}
.basket-order-status-column.last {
	width: 180px;
	margin-right: 0;
}
.basket-order-status-column::before {
	content: "";
	position: absolute;
	right: 0;
	top: 19px;
	width: 10px;
	height: 10px;
	border-top: 2px solid var(--bs-gray-500);
	border-right: 2px solid var(--bs-gray-500);
	transform: translateY(-50%) rotate(45deg);
}
.basket-order-status-column::after {
	position: absolute;
	top: 18px;
	right: -1px;
	content: '';
	width: 22px;
	height: 2px;
	border: 1px solid var(--bs-gray-500);
	display: block;
	background-color: var(--bs-gray-500);
}
.basket-order-status-column:last-of-type::before,
.basket-order-status-column:last-of-type::after {
	display: none;
}

.basket-order-status-point span.date {
	text-align: center;
	height: 1rem;
}