.wizard-step-wrapper {
	height: 600px;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px 
	/* padding: 10px;
	box-sizing: border-box;
	border: 1px solid rgba(var(--midgrey), 0.25);
	border-radius: 10px; */
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header {
	border-bottom: 0px solid rgba(var(--midgrey), 0.25) !important;
	height: 0px !important;
	min-height: 0px !important;
	padding: 0px !important;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .dxbl-popup-header-button {
	position: absolute !important;
	right: 20px;
	top: 20px;
	z-index: 5;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .dxbl-popup-header-button:hover {
	background: var(--site-primary) !important;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-header .view-caption-root {
	display:none;
}
.dxbl-popup:has(.wizard-step-wrapper) .dxbl-modal-content .dxbl-modal-body {
	padding: 0px !important;
	/* The wizard-step-wrapper owns internal scrolling; keep the modal body from
	   adding its own scrollbar when content lands a hair over the fixed height. */
	overflow: hidden !important;
}
.wizard-step-wrapper:has(.wizard-welcome){
	border: 0px !important;
}

.wizard-footer-button {
    margin: 0px !important;
	border-top:  1px solid rgba(var(--midgrey), 0.25);
	padding: 10px;
	height: 50px;
}
.wizard-step-wrapper button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled),
.wizard-footer-button  button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled) {
	border-radius: 8px;
}

.wizard-step-wrapper button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled):hover,
.wizard-footer-button  button.dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):not(:disabled):hover {
    border: 1px solid var(--site-primary) !important;
}
.wizard-step-wrapper button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled),
.wizard-footer-button  button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled) {
    border: 1px solid rgba(var(--midgrey), 0.25) !important;
	box-shadow: 0px 0px 0px rgba(var(--primary), 0.5);
	border-radius: 8px;
}
.wizard-step-wrapper button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover,
.wizard-footer-button  button.dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover {
    background-color:rgba(var(--primary), 0.15) !important;
}
.wizard-prev-btn::before {
	content:"";
	width: 16px; 
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../IImageService/arrow-left") center center no-repeat !important;
	background-size: cover !important;
	margin-right: 5px;
}
.wizard-finish-btn::before {
	content:"";
	width: 16px; 
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../IImageService/check") center center no-repeat !important;
	background-size: cover !important;
	margin-right: 5px;
	filter: var(--icon-filter-white);
}
.wizard-close-btn::before {
	content:"";
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../IImageService/check") center center no-repeat !important;
	background-size: cover !important;
	margin-right: 5px;
	filter: var(--icon-filter-white);
}
.wizard-next-btn::after {
	content:"";
	width: 16px; 
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	background: url("../IImageService/arrow-right") center center no-repeat !important;
	background-size: cover !important;
	margin-left: 5px;
}
.dxbl-theme-dark .wizard-footer-button .dxbl-btn::before,
.dxbl-theme-dark .wizard-footer-button .dxbl-btn::after {
	filter: var(--icon-filter-white);
}

.dxbl-modal-body:has(.wizard-step-wrapper) {
	padding: 0px 4px;
}
.wizard-step-wrapper dxbl-form-layout.dxbl-fl {
	overflow: visible;
	max-width: 480px;
	margin-left: auto;
	margin-right: auto;
	transition: max-width 0.2s ease-out;
}
/* A step whose layout has a two-column row (DevExpress renders those items/groups with
   a dxbl-col-md-6 grid class instead of the full-width dxbl-col-md-12) needs more room
   than the default single-column 480px cap — everything else keeps the narrower design. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-form-layout.dxbl-fl .dxbl-col-md-6) dxbl-form-layout.dxbl-fl {
	max-width: 850px;
}

/* A tab containing a nested grid (e.g. the New Order wizard's Schedules picker) needs the
   full step width to show its columns — the narrow single-column form cap otherwise
   compresses the grid down to an unreadable width. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid) dxbl-form-layout.dxbl-fl {
	max-width: 875px;
}
.wizard-step-wrapper:has(.wizard-welcome) {
	margin-top: 0px;
	height: 600px;
}
.wizard-step-number {
	margin-top: 0px;
  margin-right: 30px;
  font-size: 14px;
  border: 1px solid rgba(var(--midgrey), 0.5);
  padding: 5px 20px;
  border-radius: 30px;
}

.wizard-heading {
	min-height: 70px;
 margin-top: 0px; 
 margin-bottom: 0px !important;
	border-bottom:  1px solid rgba(var(--midgrey), 0.25);
	padding: 20px 20px; 
}

.wizard-icon {
	display: block;
	width: 110px;
	height: 110px;
	margin-bottom: 16px;
	filter: var(--icon-filter);
}

.wizard-success-icon {
	filter: var(--icon-filter-green);
}

.wizard-step-title {
	margin-top: 8px;
}

.wizard-summary-text {
	max-width: 520px;
	font-size: 1rem;
	line-height: 1.7;
}

.wizard-summary-text p {
	margin-top: 0;
	margin-bottom: -0.3rem;
}

.wizard-step-description {
	max-width: 480px;
	background-color: #d8eef8 !important;
	border-color: #d8eef8 !important;
	color: #2b6ca6 !important;
	border-radius: 10px !important;
	transition: max-width 0.2s ease-out;
}

/* Stretch the description alert to match the widened two-column form layout above. */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-form-layout.dxbl-fl .dxbl-col-md-6) .wizard-step-description {
	max-width: 900px;
}

/* Stretch the description alert to match the widened grid layout above (dxbl-grid steps, e.g. New Order's Schedules picker). */
.wizard-step-wrapper.wizard-step-detail:has(dxbl-grid) .wizard-step-description {
	max-width: 875px;
}

/* List-view steps (map/grid) run edge to edge, so the alert spans full width too. */
.wizard-step-wrapper.wizard-step-list .wizard-step-description {
	max-width: none !important;
	width: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The map/grid editor sizes to height:100%, so give its container a real height:
   make the list-view step a flex column and let the view area fill what's left
   under the title + alert. */
.wizard-step-wrapper.wizard-step-list {
	display: flex;
	flex-direction: column;
}
.wizard-step-wrapper.wizard-step-list .wizard-step-view {
	flex: 1 1 auto;
	min-height: 0;
}

.wizard-step-description strong {
	color: #1f6fb2;
}

.wizard-alert-icon {
	width: 25px;
	height: 25px;
	margin-right: 5px;
	margin-top: -3px;
	filter: var(--icon-filter);
}

.summary-card {
    background: var(--bs-body-bg);
    border-radius: 10px;
    padding: 16px 20px;
    border: 1px solid rgba(var(--midgrey),0.25);
}

.summary-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    padding: 10px 0;
    border-bottom: 1px solid rgba(var(--midgrey),0.25);
}

    .summary-row:last-child {
        border-bottom: none;
    }

.summary-label {
    font-weight: 600;
    color: currentColor;
    font-size: 13px;
}

.summary-value {
    color: currentColor;
    font-size: 14px;
}

.summary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 0;
}

.summary-badge {
    background: var(--bs-body-bg);
    color: currentColor;
    padding: 6px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
	border: 1px solid rgba(var(--midgrey),0.25);
}

.summary-empty {
    color: #888;
    font-style: italic;
}