.main-content:has(#map-container) {
	padding-right: 0px;
}
.map-routelist-view-content {
	width: 355px;
	min-width: 355px;
	position: relative;
	overflow: hidden;
	padding: 0 0 12px 12px;
}
#map-container{
	width: calc(100% - 347px);
	height: 100%;
	background-color: lightblue;
}

    .map-routelist-view-content .search-container {
        display: flex;
        gap: 5px;
        margin-bottom: 5px;
        margin-top: 3px;
		margin-right: 2px;
		margin-left: 40px;
    }

/* Occupies the row the search bar used to sit in (now hidden — search is driven by the
   shared dispatch-map toolbar box instead). Same left margin as .search-container so it
   clears the collapse-btn. Holds the compact toggle, right-aligned. */
.map-routelist-view-content .map-routelist-top-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 3px;
	margin-bottom: 5px;
	margin-right: 10px;
	margin-left: 40px;
}

    .map-routelist-view-content .search-box {
        flex: 1;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid rgba(var(--midgrey),0.25);
		margin-right: 10px;
		padding-right: 40px;
    }
.map-routelist-view-content .clear-button {
	border: none;
	cursor: pointer;
	font-size: 25px;
	color: #999;
	padding: 20px;
	width: 24px;
	height: 25px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: all 0.2s;
	position: absolute;
	right: 20px;
	top: 1px;
}

/*-----TABS-----*/
.map-routelist-tabs {
    width: 100%;
    font-family: var(--site-fontfamily);
}
/*.map-routelist-tabs:has(#map-routelist-panel1 .no-items-message) button[data-tab="map-routelist-panel1"] {
	display:none;
}
.map-routelist-tabs:has(#map-routelist-panel2 .no-items-message) button[data-tab="map-routelist-panel2"] {
	display:none;
}
.map-routelist-tabs:has(#map-routelist-panel3 .no-items-message) button[data-tab="map-routelist-panel3"] {
	display:none;
}
.map-routelist-tabs:has(#map-routelist-panel4 .no-items-message) button[data-tab="map-routelist-panel4"] {
	display:none;
}*/

.map-routelist-tab-buttons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    border-bottom: 1px solid rgba(var(--midgrey), 0.25);
	margin-right: 10px;
}

.map-routelist-view-content .map-routelist-top-row {
	min-width: 0;
}
.map-routelist-view-content .map-routelist-compact-toggle-btn {
	flex: 0 1 auto;
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 36px;
	width: auto !important;
	min-width: 0;
	max-width: 100%;
	overflow: hidden;
	padding: 0 8px !important;
	border: 0px;
	border-radius: 6px;
	background: transparent;
	opacity: .55;
	cursor: pointer;
	white-space: nowrap;
}
/* Icon lives in ::after so it follows the label in flow (label left, icon right) instead of
   being a background that can overlap the text. */
.map-routelist-compact-toggle-btn::after {
	content: "";
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	background: url('../../../../IImageService/align-justify') center center / 22px 22px no-repeat;
}
.map-routelist-compact-toggle-label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 13px;
	line-height: 1;
}
.map-routelist-compact-toggle-btn:hover {
	opacity: .85;
	box-shadow: none !important;
}
.map-routelist-compact-toggle-btn.active::after {
	background-image: url('../../../../IImageService/diagram-cells');
}
.dxbl-theme-dark .map-routelist-compact-toggle-btn {
filter: var(--icon-filter-white);
}

.map-route-name-label {
	display: inline-block;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 120px;
}

/* This stylesheet is linked globally (Pages/_Host.cshtml), but the dashed "card" look below is
   sized/bordered for the map's route-list panel specifically — scope it there so the same
   .no-items-message markup, reused by EmptyStateActionBanner inside the Route ListView's grid/tree-list
   empty area, doesn't inherit a border tuned for a different container and render broken/clipped. */
.map-routelist-view-content .no-items-message {
	text-align: center;
	padding: 0px 20px 20px;
	border: 6px dashed rgba(var(--midgrey), 0.5);
	/* border-radius: 10px;  */
	margin: 10px 12px;
	width: calc(100% - 24px);
}
.map-routelist-view-content .no-items-message img.no-records-icon {
	width: 50px;
	height: 50px;
	opacity: .25;
	margin: 30px auto;
	display: block;
}

.no-items-message {
	text-align: center;
	padding: 12px 20px;
}
.no-items-message img.no-records-icon {
	width: 40px;
	height: 40px;
	opacity: .25;
	margin: 12px auto;
	display: block;
}

.empty-state-btn-icon--assign {
	display: inline-block;
	width: 1em !important;
	height: 1em !important;
	background-color: currentColor;
	-webkit-mask: url(/IImageService/map-pin-alt) no-repeat center / contain;
	mask: url(/IImageService/map-pin-alt) no-repeat center / contain;
}
.empty-state-btn-icon--generate {
	display: inline-block;
	width: 1em !important;
	height: 1em !important;
	background-color: currentColor;
	-webkit-mask: url(/IImageService/ycon-Book) no-repeat center / contain;
	mask: url(/IImageService/ycon-Book) no-repeat center / contain;
}

/* Matches the toolbar's compact primary action buttons (e.g. "+ New") — DxButton outside a
   .dxbl-toolbar renders noticeably larger/looser by default, so the sizing below is reproduced
   explicitly rather than inherited. !important because DevExpress's own .dxbl-btn rules are more
   specific than a single custom class. */
.empty-state-action-btn.dxbl-btn {
	padding: 6px 16px !important;
	border-radius: 5px !important;
	font-size: 0.8125rem !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

/* Enabled="false" on the DxButton adds both the native `disabled` attribute and DevExpress's own
   .dxbl-disabled class, but the Primary render style's purple fill otherwise stays fully opaque here
   — this button sits outside a .dxbl-toolbar, so it doesn't inherit the theme's toolbar-scoped
   disabled treatment. Force the standard dimmed/no-pointer look explicitly. !important for the same
   specificity reason as above. */
.empty-state-action-btn.dxbl-btn:disabled,
.empty-state-action-btn.dxbl-btn.dxbl-disabled {
	opacity: 0.45 !important;
	cursor: not-allowed !important;
	pointer-events: none !important;
}

.map-routelist-tab-btn {
	padding: 10px 0px;
	cursor: pointer;
	border: none;
	background: transparent;
	opacity: 0.65;
	color: currentColor;
	flex: 1 1 auto;
	min-width: 0;
	white-space: nowrap; 
	overflow: hidden;
	text-overflow: ellipsis;
}
.map-routelist-tabs .map-routelist-tab-buttons .map-routelist-tab-btn:hover {
    box-shadow: 0 0 0 0 black !important;
}

.map-routelist-tab-btn.active {
    background: transparent;
    border-bottom: 2px solid var(--site-primary);
    font-weight: 700;
    opacity: 1;
}

.map-routelist-tab-panel {
    display: none;
    padding: 0px;
    border-top: none;
    width: 100%;
    box-sizing: border-box;
	padding-right: 10px;
}

.map-routelist-tab-panel.active {
    display: block;
}

/* DxGrid (paged) owns this scrollbar, so it — not the tab panel — is the one bounded-height
   scroll container here; giving both would nest two scrollbars. DxGrid's own docs call for
   a definite CSS height (not max-height) — its internal viewport needs a resolved, non-auto
   value to compute against, or it grows to fit all rows instead of scrolling. The height also
   acts as a safety net within a single page: card height here is highly variable (a driver
   card's height depends on its nested feeder-route count, compact vs. full cards differ,
   etc.), so an unusually tall page can still exceed the viewport and needs its own scrollbar
   rather than overflowing the panel.
   VirtualScrollingEnabled was tried here first, but its scroll-height estimate is an
   average-row-height projection that falls apart against these same variable-height cards —
   past a few dozen rows the estimated scrollable area ran out before the real list did, so
   scrolling could never reach the rest. Paging (DxGrid's PageSize, see RouteListPageSize in
   MapRouteListView.razor) sidesteps that estimate entirely by only ever rendering one bounded
   page of rows at a time.
   !important because DevExpress's own theme CSS is more specific than a single custom
   class and otherwise wins the cascade on height/overflow — a gotcha DevExpress's own
   docs call out explicitly for exactly this "one class selector" scenario. */
.map-routelist-grid {
    height: calc(100vh - 270px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--midgrey), 0.5) transparent;
	padding-left: 0px;
	padding-right: 0px;
}

/* This view's custom pager (.map-routelist-pager) renders as a sibling right after this element —
   the base height above already fills ~100vh - 270px on its own, so without shrinking it here the
   pager row is pushed past the panel's own visible area (clipped by .map-routelist-view-content's
   own overflow:hidden) and never actually seen, even though it's in the DOM. Declared after
   .map-routelist-grid, and !important for the same DevExpress-theme-specificity reason as that
   rule, so it wins on an element carrying both classes.
   56px (not the pager's own ~40px) — a tight budget left the pager's bottom edge clipped by a few
   px on real browsers (font metrics/theme padding push it past exactly 40px), so this reserves a
   deliberate few-px margin rather than an exact fit. */
.map-routelist-grid-with-pager {
	height: calc(100vh - 270px - 26px) !important;
}

.map-routelist-grid::-webkit-scrollbar {
    width: 6px;
	margin-right: -6px;
}

.map-routelist-grid::-webkit-scrollbar-track {
    background: transparent;
}

.map-routelist-grid::-webkit-scrollbar-thumb {
    background: rgba(var(--midgrey), 0.5);
    border-radius: 10px;
}

.map-routelist-grid::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--midgrey), 0.75);
}

/* The grid's own header row/chrome is meaningless for a card list — every row is
   the same single template column — so it's hidden outright rather than styled. */
.map-routelist-grid table thead {
    display: none;
}

.map-routelist-grid .dxbl-grid-table > tbody > tr > td {
    padding: 0;
    border: none;
}

.map-routelist-grid .dxbl-scroll-viewer-content {
	padding: 2px;
}

/*------STATUS ICON OVERRIDE-----------*/
.route-list-tab-icn {
	width: 18px;
	height: 18px;
}
.route-list-tab-icn.new  {
	filter:var(--icon-filter-orange) !important;
}
.route-list-tab-icn.done  {
	filter:var(--icon-filter-green) !important;
}
.route-list-tab-icn.active  {
	filter:var(--icon-filter) !important;
}
.route-list-tab-icn.void {
	filter:var(--icon-filter-red) !important;
}

.map-routelist-tab-btn:not(.active) .route-list-tab-text{
	display: none;
}
.map-routelist-tab-btn.active .route-list-tab-icn {
	display: none;
}


/*-----ROUTES-----*/
.row.route-cards {
    padding-top: 5px;
    padding-bottom: 5px;
    /* background-color: rgba(var(--midgrey), 0.2); */
    /* min-height: calc(100vh - 500px) !important; */
}

.route-card-container {
    width: 100%;
    margin: 0px;
}

.route-card {
    border: 2px solid rgba(var(--midgrey), 0.25);
    padding: 10px 0px 10px;
    background: var(--bs-body-bg);
    width: 100%;
    margin-top: -1px;
    padding: 10px;
    border-radius: 10px;
    background-color: var(--bs-body-bg);
    box-shadow: 0 2px 5px 0px rgba(0,0,0, 0.15) !important;
	cursor: pointer;
	/* transition: transform 0.3s ease; */
}
.route-card-container.active > .route-card{
    border: 1px solid rgba(var(--primary), 0.75) !important;
}
.route-card:hover { 
	border: 2px solid rgba(var(--primary), 0.75)!important;
	/* transform: translateY(-2px); */
}
.route-customer .routelist-dc-driver-img {
    display: flex;
}
.route-customer .route-label {
    display: flex;
}
.dxbl-grid.map-routelist-grid .dxbl-grid-table.dxbl-grid-table-no-scroll,
.dxbl-grid.map-routelist-grid table tr,
.dxbl-grid.map-routelist-grid table tr td {
	height: fit-content;
	
}
.dxbl-grid.map-routelist-grid table tr:not(:has(.route-card-container)) {
	display:none;
}

/* Route Type view's custom pager (MapRouteListView.RenderRouteTypePager) — replaces DxGrid's own
   pager, hidden for this view since its row-count pagination doesn't account for nested routes.
   Laid out to match DxGrid's own pager bar — the pager on the left, a "Page Size:" selector on the
   right — and the page-turning control itself is a <DxPager>, the same component DxGrid uses
   internally for its own pager, so it picks up the app's site-wide .dxbl-pager theme overrides
   (form-ui.css) exactly as DxGrid's built-in one does. */
.map-routelist-pager {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 10px;
	border-top: 1px solid rgba(var(--midgrey), 0.25);
	box-sizing: border-box;
}
.map-routelist-pager-size-group {
	display: flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: 12px;
}
.map-routelist-pager-size {
	border: 1px solid rgba(var(--midgrey), 0.5);
	border-radius: 4px;
	background: transparent;
	padding: 2px 4px;
}
.map-routelist-view-content .map-route-header {
    padding:0px;
    transition: background-color 0.2s ease;
}

.map-routelist-view-content .map-route-top-row {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	margin-bottom: 8px;
}
.map-routelist-view-content .dxbl-progress-bar .dxbl-progress-bar-label .dxbl-progress-bar-label-container > p {
	font-weight: 100
}

.map-routelist-view-content .dxbl-progress-bar.dxbl-progress-bar-success.dxbl-progress-bar-horizontal .dxbl-progress-bar-label-container::before {
	font-weight: 100;
}
/* Top-row progress bar — full card (.map-route-progress) and compact card (.route-compact-progress).
   DevExpress's own horizontal bar: percentage label on the left, thin track, set by LabelPosition /
   Size / Thickness on the DxProgressBar itself (MapRouteListView.razor). Nothing here restyles the
   bar — the wrapper only takes the row's free width beside the function and app-version badges. */
.map-routelist-view-content .map-route-progress,
.route-card-compact .route-compact-progress {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	align-items: center;
}
/* Every route-list bar (top-row, compact, feeder, nested route lists): the label keeps its natural
   width and the track takes all the rest of the row. Done here rather than with DxProgressBar's Size
   — the component measures itself once when it first becomes visible, so a percentage size could be
   frozen at a narrower, not-yet-laid-out width and leave an empty gap before the badges. */
.map-routelist-view-content .dxbl-progress-bar {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
}
.map-routelist-view-content .dxbl-progress-bar .dxbl-progress-bar-track-container {
	flex: 1 1 auto;
	min-width: 0;
	width: auto !important;
}
/* No stripes on any route-list bar (top-row, compact, feeder and nested route lists) — overrides the
   app-wide striped .dxbl-progress-bar-indicator in Base's form-ui.css, for this list only. */
.map-routelist-view-content .dxbl-progress-bar-indicator {
	background-image: none;
}
/* Thinner track — form-ui.css forces every bar's track and indicator to 8px (!important), which
   overrides DxProgressBar's own Thickness; restated here for the route list only. */
.map-routelist-view-content .dxbl-progress-bar .dxbl-progress-bar-track-container,
.map-routelist-view-content .dxbl-progress-bar .dxbl-progress-bar-track-container .dxbl-progress-bar-indicator {
	height: 4px !important;
}
/* Blue fill on a light grey track, no border — the DevExpress Fluent default look — instead of
   form-ui.css's app-wide green fill / tinted track / bordered dark track-container (all !important
   there, hence here). Literal colours on purpose: the app runs the classic Office White / Blazing
   Dark themes, which define no --dxbl-progress-bar-primary-color, and whose own track colour is the
   theme accent (orange / purple). The grey is translucent so it reads in light and dark mode. */
.map-routelist-view-content .dxbl-progress-bar .dxbl-progress-bar-track-container .dxbl-progress-bar-indicator {
	background-color: #0f6cbd !important;
}
.map-routelist-view-content .dxbl-progress-bar .dxbl-progress-bar-track-container .dxbl-progress-bar-track {
	background-color: rgba(128, 128, 128, 0.25) !important;
	opacity: 1;
}
.map-routelist-view-content .dxbl-progress-bar .dxbl-progress-bar-track-container {
	background-color: transparent !important;
	border: 0;
}

.map-routelist-view-content .dc-driver-icon {
    width: 48px;
    height: 48px;
    border-radius: 50px !important;
}

.route-label .route-kpi, .route-label .route-code {
    display: flex;
    flex-direction: row;
    text-align: left;
    margin-left: 0px;
    margin-top: 5px;
	margin-right: 24px;
	padding-top: 4px;
}
.route-label .route-checkbox-row {
	display: flex;
	justify-content: flex-end;
	margin-top: -20px;
	padding-bottom: 8px;
	border-bottom: 2px dotted rgba(var(--midgrey), 1);
}
.route-label .route-footer-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 8px;
}
.route-label .route-footer-row .route-code {
	margin: 0px;
	padding-top: 0px;
	flex: 1;
}
.route-label .map-route-addresses {
    display: flex;
    flex-direction: column;
	line-height: 1.8;
	margin-left: 0px;
  margin-top: -5px;
  padding-bottom: 4px;
  border-bottom: 2px dotted rgba(var(--midgrey), 1);

}
.route-label .map-route-addresses .start-label,
.route-label .map-route-addresses .end-label {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	height: 20px;
	margin-bottom: 2px;
}
.route-code .code-badge-container {
    min-height: 24px;
    text-align: left;
    vertical-align: middle;
    display: block;
    margin-left: 45px;
    margin-top: -5px;
}
.route-code span:not(span.label):not(span.sb-hint):not(span.code-hint):not(span.code-value):not(span.code-expand-btn) {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    width: calc(100% - 49px);
    max-width: 344px;
}

.route-code .sb-badge:hover {
    font-weight: 700 !important;
}

.route-code .code-icon,
.order-customer .sb-badge.code-icon {
	min-height: 24px;
    background: var(--bs-black-rgb) !important;
	padding: 1px 10px 2px 10px;
	width: fit-content !important;
	display: block;
	border-radius: 5px;
}
.order-customer .sb-badge.code-icon img {
	vertical-align: middle;
	margin: 0px;
}
.sb-badge.code-icon > span:not(.code-hint):not(.code-value):not(.code-expand-btn) {
	vertical-align: middle;
	margin: 0px;
	display: inline-block !important;
	width: fit-content !important;
	color: white !important;
	font-weight: 700;
}
.sb-badge.code-icon > span.code-hint { 
	font-weight: 700;
	color: white !important;
}

.route-code .sb-badge {
    min-height: 24px;
    width: fit-content !important;
    padding: 2px 10px 2px 10px;
    font-size: 14px;
    text-shadow: none;
    font-weight: 700 !important;
    border-radius: 5px;
    position: relative;
    z-index: 1;
    vertical-align: middle;
    color: white !important;
    box-shadow: inset 0 0 0 100px rgba(0, 0, 0, 0.25);
    border: 2px solid transparent;
    padding-top: 0px;
}
.route-code .sb-badge img {
    filter: var(--icon-filter-white);
    height: 16px;
    width: 16px;
    vertical-align: middle;
    margin-top: 0px;
    margin-right: 2px;
    margin-left: 0px;
    display: inline-block;
}
.route-code .sb-badge .code-hint {
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
    opacity: .7;
    transition: .3s;
}
.code-value {
	display: inline-block;
	max-width: 260px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}

.code-expand-btn {
	display: none;
	cursor: pointer;
	color: white;
	opacity: 0.75;
	vertical-align: middle;
	padding-left: 3px;
	line-height: 1;
	width:20px !important;
}
.code-expand-btn.visible {
	display: inline-block;
}
.code-expand-btn:hover {
	opacity: 1;
}
.code-expand-btn svg {
	vertical-align: middle;
}

.start-label .start-label-time, .end-label .end-label-time {
    margin-right: 6px;
	padding-right: 6px;
	opacity: 1;
	font-weight: 400;
	/* border-right: 2px dotted rgba(var(--midgrey), 1); */
	width: 68px;
	display: inline-block;
	height: 22px;
	vertical-align: top;
	padding: 0px;
}
.start-label .start-label-time::after, .end-label .end-label-time::after { 
	content:"";
	display: block;
	height: 18px;
	width: 4px;
	border-right: 2px dotted rgba(var(--midgrey), 1);
	position: relative;
	margin-top: -20px;
	margin-left: 64px;
}
.start-label .start, .end-label .end {
    font-weight: 400;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 182px;
  display: inline-block;
	height: 22px;
	vertical-align: top;
}
.kpi-stops, .kpi-items, .kpi-time, .kpi-mileage{
    font-weight:700;
}
.start-address, .end-address {
	display: none;
    padding-left: 28px;
	opacity: .65;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

.dc-route-label{
    display:block;
}

.map-route-header-top {
    display: block;
    margin-bottom: 0rem;
}



.map-routelist-view-content .map-driver-img {
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    padding: 1px;
    margin-right: 10px;
}

.map-routelist-view-content .map-route-header-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}
.map-routelist-view-content .map-route-driver {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Route name, driver name, and service area sit at equal, gap-driven spacing instead of the
   .map-driver-name -1px margin hack (which only nominally matched between rows and drifted
   visually once font sizes/line-heights differed). */
.map-routelist-view-content .map-route-driver .map-driver-name {
    margin-top: 0;
}

.map-route-title {
    font-weight: 700;
    font-size: 14px;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    vertical-align: middle;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	height: 20px;
	margin-bottom: 2px;
}
.map-driver-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 340px;
	height: 20px;
	margin-bottom: 2px;
}

.map-driver-service-area {
	height: 20px;
	margin-bottom: 2px;
}

.map-driver-service-area .service-area-link {
	text-decoration: underline;
	display: inline-block;
	max-width: 100%;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Route card: driver and service area on one line, split by the same dotted divider as the KPI row.
   Both sides shrink with an ellipsis, so a long name never pushes the other off the card. */
/* Both halves share one 20px line box so their text sits on the same line; the divider is a separate
   14px mark (::before) centred on that line, rather than the service-area half's own border — which
   needed a shorter 14px line-height and so pushed its text off the driver name's line. */
.map-driver-line {
	display: flex;
	align-items: center;
	min-width: 0;
	height: 20px;
	line-height: 20px;
}
.map-driver-line > .driver-link,
.map-driver-line > .map-route-name-label {
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	line-height: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.map-driver-line .map-driver-line-service-area {
	position: relative;
	display: block;
	flex: 0 1 auto;
	min-width: 0;
	margin-left: 6px;
	padding-left: 8px;
	line-height: 20px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.map-driver-line .map-driver-line-service-area::before {
	content: "";
	position: absolute;
	left: 0;
	top: 3px;
	height: 14px;
	border-left: 2px dotted rgba(var(--midgrey), 1);
}
.map-driver-line .service-area-link {
	text-decoration: underline;
	display: block;
	max-width: 100%;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*.map-driver-name a, .map-driver-name span {
	margin-top: 6px;
}*/

.route-kpi .kpi-val:not(.route-kpi .kpi-val:last-child) {
	border-right: 2px dotted rgba(var(--midgrey), 1);
}
.route-kpi .kpi-val {
	font-size: 13px;
	font-weight: 700;
	/* margin-right: 12px; */
	display: block;
	flex: 1;
	min-width: 0;
	text-align: center;
}
.route-kpi .kpi-val img {
	opacity: 70%;
	width: 15px;
	height: 15px;
	margin-right: 3px;
	display: inline-block;
	vertical-align: middle;
}
.route-kpi .kpi-val small.kpi-um {
    font-size: 9px;
	font-weight: 700;
	opacity: .85;
}
.route-kpi small.kpi-label {
	display: none;
}

.map-routelist-view-content .badge.latest {
    background: rgba(var(--green), 0.75);
    border: 1px solid rgba(var(--green), 0.75);
    color: white;
}
.map-routelist-view-content .badge.outdated {
    background: rgba(var(--red), 0.75);
    border: 1px solid rgba(var(--red), 0.75);
    color: white;
}

.map-routelist-view-content .badge.os-badge {
    padding: 1px 4px 2px 4px;
    font-size: 10px;
    display: inline-block;
    vertical-align: middle;
    width: fit-content;
    height: 20px;
    line-height: 1.2;
    border-radius: 20px;
    font-weight: bold;
}
.map-routelist-view-content .badge img {
    filter: var(--icon-filter-white);
}
.map-routelist-view-content .badge.function-badge {
	border-radius: 5px;
	position: relative;
	margin: 0px !important;
	display: inline-flex;
	vertical-align: middle;
	font-size: 14px;
	line-height: 1;
	height: 24px;
	padding: 0px;
	width: fit-content;
	float: none;
}
.map-routelist-view-content .routelist-driveros {
	display: inline-flex !important;
	vertical-align: middle;
	margin: 0px !important;
	margin-left: 6px !important;
	text-align: right;
}
/* Full route card's top row, and every route sublist (.feeder-routes-section — a Linehaul's
   Feeder Routes and the Driver / Route Type cards' route lists), and the compact route card's top
   row (.route-compact-top-row — icon-only, so no caption): the function and app-version "badges" drop their pill (background,
   border, padding) and keep just the colour-coded icon — the function icon keeps its per-function
   colour (.badge-<Function> .function-icn filters below), and the app-version icons are tinted green
   (latest) / red (outdated) instead of white on a green/red pill. The extra .map-route-header in each
   selector outranks the per-function .badge-<Function> rules, whose border is !important. */
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge,
.map-routelist-view-content .route-card-compact .route-compact-top-row .badge.function-badge {
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none;
}
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge .function-badge-value,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge .function-badge-value,
.map-routelist-view-content .route-card-compact .route-compact-top-row .badge.function-badge .function-badge-value {
	padding: 0;
}
/* Caption at the same size as the progress bar's percentage label beside it — the theme's
   --dxbl-progress-bar-label-font-size (0.875rem) — instead of the badges' usual 12px. Its margin-top
   nudge was for the smaller text inside a pill; centred by the flex row instead. Top row only — the
   route sublists keep their own caption size. */
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge .function-badge-value {
	align-items: center;
}
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge .function-badge-value .function-value-value {
	font-size: 0.875rem;
	margin-top: 0;
}
/* Route sublists: the same centring as the top row — icon, caption and app-version icons on one
   centre line — but at the sublist's own caption size (no font-size here). The caption's 2px
   margin-top nudge was for sitting inside the pill. */
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge {
	display: inline-flex;
	align-items: center;
}
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge .function-badge-value {
	align-items: center;
}
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge .function-badge-value .function-value-value {
	margin-top: 0;
}
/* Second grid row: the time/address line and the badges share one centre line. The time/address
   line was bottom-aligned (align-self: end, from the pill days) while the badges sat centred, so
   the two drifted apart once the pill no longer filled the row's height. */
.map-routelist-view-content .feeder-routes-section .feeder-route-item .feeder-route-driver,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .feeder-route-badges-row {
	align-self: center;
}
/* The caption takes its function's colour too — the same colour as its icon / the pill border it replaced. */
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge.badge-Feeder .function-value-value,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge.badge-Feeder .function-value-value { color: rgba(var(--blue), 1); }
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge.badge-Linehaul .function-value-value,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge.badge-Linehaul .function-value-value { color: #d3a609; }
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge.badge-Distribution .function-value-value,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge.badge-Distribution .function-value-value { color: rgba(var(--green), 1); }
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge.badge-Transfer .function-value-value,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge.badge-Transfer .function-value-value { color: rgba(var(--orange), 1); }
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge.badge-Shuttle .function-value-value,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge.badge-Shuttle .function-value-value { color: rgba(var(--cyan), 1); }
.map-routelist-view-content .map-route-header .map-route-top-row .badge.function-badge.badge-Return .function-value-value,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.function-badge.badge-Return .function-value-value { color: rgba(var(--red), 1); }
.map-routelist-view-content .map-route-header .map-route-top-row .badge.os-badge,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.os-badge,
.map-routelist-view-content .route-card-compact .route-compact-top-row .badge.os-badge {
	background: transparent !important;
	border: 0 !important;
	padding: 0;
	/* Centred in the row like the function icon and caption — the pill's fixed 20px height and
	   line-height (with the imgs' vertical-align) otherwise sat the icons off the row's centre line. */
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: auto;
	line-height: 1;
}
.map-routelist-view-content .map-route-header .map-route-top-row .routelist-driveros,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .routelist-driveros,
.map-routelist-view-content .route-card-compact .route-compact-top-row .routelist-driveros {
	align-items: center;
}
.map-routelist-view-content .map-route-header .map-route-top-row .badge.os-badge img,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.os-badge img,
.map-routelist-view-content .route-card-compact .route-compact-top-row .badge.os-badge img {
	display: block;
	margin: 0;
}
.map-routelist-view-content .map-route-header .map-route-top-row .badge.os-badge.latest img,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.os-badge.latest img,
.map-routelist-view-content .route-card-compact .route-compact-top-row .badge.os-badge.latest img {
	filter: var(--icon-filter-green);
}
.map-routelist-view-content .map-route-header .map-route-top-row .badge.os-badge.outdated img,
.map-routelist-view-content .feeder-routes-section .feeder-route-item .badge.os-badge.outdated img,
.map-routelist-view-content .route-card-compact .route-compact-top-row .badge.os-badge.outdated img {
	filter: var(--icon-filter-red);
}
.map-routelist-view-content .badge.function-badge .function-badge-value {
	display: flex;
	padding: 2px 10px;
}
.map-routelist-view-content .badge.function-badge.function-badge-icon-only {
	height: 20px;
}
.map-routelist-view-content .badge.function-badge.function-badge-icon-only .function-badge-value {
	padding: 1px;
	align-items: center;
}
.map-routelist-view-content .badge.function-badge.function-badge-icon-only .function-icn {
	margin-right: 0px;
	width: 18px;
	height: 18px;
}
.map-routelist-view-content .badge.function-badge .function-badge-value .function-value-value {
	font-size: 12px;
	margin-top: 3px;
	font-weight: 400;
}
.map-routelist-view-content .badge.function-badge .function-badge-value .function-icn {
	margin-right: 4px;
	margin-left: 4px;
	opacity: 1;
}
.map-routelist-view-content .badge.function-badge.badge-Feeder {
    border: 1px solid rgba(var(--blue), .75) !important;
	background-color: rgba(var(--blue), .25);
	color: currentColor;
	border-left: 0px;
}
.map-routelist-view-content .badge.function-badge.badge-Feeder .function-badge-value .function-icn {
	content:"";
	background: url('../../../../IImageService/diagram-next') center center no-repeat;
	width: 18px;
	height: 18px;
	display: inline-block;
	background-size: 14px 14px;
	filter: var(--icon-filter-blue);
}
.map-routelist-view-content .badge.function-badge.badge-Linehaul {
    border: 1px solid #d3a60975 !important;
	background-color: #d3a60925;
	color: currentColor;
	border-left: 0px;
}
.map-routelist-view-content .badge.function-badge.badge-Linehaul .function-badge-value .function-icn {
	content:"";
	background: url('../../../../IImageService/Truck-container') center center no-repeat;
	filter: var(--icon-filter-yellow);
	width: 18px;
	height: 18px;
	display: inline-block;
	background-size: 16px 16px;
}
.map-routelist-view-content .badge.function-badge.badge-Distribution {
    border: 1px solid rgba(var(--green), .75) !important;
	background-color: rgba(var(--green), .25);
	color: currentColor;
	border-left: 0px;
}
.map-routelist-view-content .badge.function-badge.badge-Distribution .function-badge-value .function-icn {
	content:"";
	background: url('../../../../IImageService/truck') center center no-repeat;
	filter: var(--icon-filter-green);
	width: 18px;
	height: 18px;
	display: inline-block;
	background-size: 16px 16px;
}
.map-routelist-view-content .badge.function-badge.badge-Transfer {
    border: 1px solid rgba(var(--orange), .75) !important;
	background-color: rgba(var(--orange), .25);
	color: currentColor;
	border-left: 0px;
}
.map-routelist-view-content .badge.function-badge.badge-Transfer .function-badge-value .function-icn {
	content:"";
	background: url('../../../../IImageService/arrow-up-small-big') center center no-repeat;
	filter: var(--icon-filter-orange);
	width: 18px;
	height: 18px;
	display: inline-block;
	background-size: 16px 16px;
}
.map-routelist-view-content .badge.function-badge.badge-Shuttle {
    border: 1px solid rgba(var(--cyan), .75) !important;
	background-color: rgba(var(--cyan), .25);
	color: currentColor;
}
.map-routelist-view-content .badge.function-badge.badge-Shuttle .function-badge-value .function-icn {
	content:"";
	background: url('../../../../IImageService/van') center center no-repeat;
	filter: var(--icon-filter-cyan);
	width: 18px;
	height: 18px;
	display: inline-block;
	background-size: 16px 16px;
}
.map-routelist-view-content .badge.function-badge.badge-Return {
    border: 1px solid rgba(var(--red), .75) !important;
	background-color: rgba(var(--red), .25);
	color: currentColor;
}
.map-routelist-view-content .badge.function-badge.badge-Return .function-badge-value .function-icn {
	content:"";
	background: url('../../../../IImageService/arrow-square-left') center center no-repeat;
	filter: var(--icon-filter-red);
	width: 18px;
	height: 18px;
	display: inline-block;
	background-size: 16px 16px;
}
.label.label-rf {
	border-radius: 5px;
	display: inline-flex;
	width: fit-content;
	font-size: 14px;
	line-height: 1;
	padding: 2px 10px;
	margin: 4px 0px;
	color: currentColor;
}
.label.label-rf .label-rf-value {
	display: inline-block;
	font-size: 12px;
	font-weight: 400;
	text-align: left;
}
.label.label-rf.label-Feeder {
    border: 1px solid rgba(var(--blue), .75) !important;
	background-color: rgba(var(--blue), .25);
	border-left: 0px;
}
.label.label-rf.label-Linehaul {
    border: 1px solid #d3a60975 !important;
	background-color: #d3a60925;
	border-left: 0px;
}
.label.label-rf.label-Distribution {
    border: 1px solid rgba(var(--green), .75) !important;
	background-color: rgba(var(--green), .25);
	border-left: 0px;
}
.label.label-rf.label-Transfer {
    border: 1px solid rgba(var(--orange), .75) !important;
	background-color: rgba(var(--orange), .25);
	border-left: 0px;
}
.label.label-rf.label-Shuttle {
    border: 1px solid rgba(var(--cyan), .75) !important;
	background-color: rgba(var(--cyan), .25);
}
.label.label-rf.label-Return {
    border: 1px solid rgba(var(--red), .75) !important;
	background-color: rgba(var(--red), .25);
}

.map-routelist-view-content .badge.os-badge img {
	width: 14px;
	height: 14px;
	margin-right: 0px;
	vertical-align: middle;
	display: inline-block;
}
.map-routelist-view-content .lbl-latest {
    vertical-align: middle;
	display: inline-block;
}

.map-route-no-driver-icon {
    width: 30px;
    height: 30px;
    margin: 10px;
    filter: var(--icon-filter-white);
    opacity: 0.75;
}
.dxbl-popup .dxbl-modal-content.flyout-loading {
    border: none !important;
    box-shadow: none !important;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview.mapview-flyout
.dxbl-modal-header button[aria-label="Close"] {
	width: 40px;
	height: 40px;
}
.dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview.mapview-flyout 
.dxbl-modal-header button[data-qa-selector="dx-popup-close-button"].dxbl-btn.dxbl-btn-text-secondary .dxbl-image {
	width: 24px;
	height: 24px;
	max-width: 24px !important;
	max-height: 24px !important;
}
.dxbl-modal > .dxbl-modal-root.route-summary > .dxbl-popup.quickview > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header .dxbl-popup-header-button:not(.dxbl-disabled):not(:disabled):hover, .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview > .dxbl-modal-content > .dxbl-modal-header .dxbl-popup-header-button:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-modal > .dxbl-modal-root.route-summary > .dxbl-popup.quickview .dxbl-modal-header .dxbl-btn-toolbar button:hover,
.dxbl-modal > .dxbl-modal-root.route-summary > .dxbl-popup.quickview .dxbl-modal-header .dxbl-btn-toolbar button:hover,
.dxbl-modal > .dxbl-modal-root.order-summary > .dxbl-popup.quickview > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header .dxbl-popup-header-button:not(.dxbl-disabled):not(:disabled):hover, .dxbl-modal > .dxbl-modal-root > .dxbl-popup.quickview > .dxbl-modal-content > .dxbl-modal-header .dxbl-popup-header-button:not(.dxbl-disabled):not(:disabled):hover,
.dxbl-modal > .dxbl-modal-root.order-summary > .dxbl-popup.quickview .dxbl-modal-header .dxbl-btn-toolbar button:hover,
.dxbl-modal > .dxbl-modal-root.order-summary > .dxbl-popup.quickview .dxbl-modal-header .dxbl-btn-toolbar button:hover {
	background-color: rgba(0,0,0,0.25) !important;
	box-shadow: 0 0 0px 4px rgba(0,0,0, 0.1) !important;
	border-color: rgba(0,0,0,0) !important;
}
.dxbl-modal > .dxbl-modal-root.route-summary > .dxbl-popup.quickview .dxbl-modal-header .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover::after,
.dxbl-modal > .dxbl-modal-root.order-summary > .dxbl-popup.quickview .dxbl-modal-header .dxbl-btn-group > .dxbl-toolbar-item > .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):not(:disabled):hover::after {
	opacity: 0;
}

.map-routelist-view-content .collapse-btn {
	width: 24px;
	height: 24px;
	border: 0px;
	opacity: .65;
	position: absolute;
	margin: 10px 0 0 0px;
	z-index: 1;
}
.map-routelist-view-content .collapse-btn.btn-collapse {
	background: url('../../../../IImageService/arrow-narrow-right-alignment') center center no-repeat;
}
.map-routelist-view-content .collapse-btn.btn-expand {
	background: url('../../../../IImageService/arrow-up-from-bracket') center center no-repeat; 
	rotate: -90deg;
}
.map-routelist-view-content .collapse-btn:hover {
	opacity: 1;
	box-shadow: none !important;
}
.map-view-div:has(.map-routelist-view-content.collapsed) #map-container {
	width: calc(100% - 40px) !important;
	transition: .3s ease;
}
.map-view-div #map-container, 
.map-view-div .map-routelist-view-content {
	transition: .3s ease;
}
.map-view-div .map-routelist-view-content.collapsed {
	width: 40px !important;
	min-width: 40px !important;
	transition: .3s ease;
}
.map-view-div .map-routelist-view-content .expanded-content {
	opacity: 1;
     transition-delay: .3s;
}
.map-view-div .map-routelist-view-content.collapsed .expanded-content {
	opacity: 0;
     transition-delay: 0s;
}
#main-view-content:has(.map-routelist-view-content.collapsed) .dxbl-modal-root.flyout-1 {
	/* right: 44px !important; */
	right: 39px !important;
	transition: .3s ease;
}


.route-card.active {
    border: 2px solid var(--selected-route-color, rgba(var(--primary), 0.75)) !important;
}

/* The Dispatch map no longer offers route ticking (the Actions menu that used the ticked routes is
   Routes-list only). Only the box is hidden: its row also draws the dotted divider under the card.
   The row's -20px top margin existed to cancel the 20px box's height; without the box it would pull the
   footer up over the KPI row, so it goes too. */
.route-checkbox-row .route-select-checkbox {
    display: none;
}

.route-label .route-checkbox-row {
    margin-top: 0;
}

.route-select-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
    position: relative;
    margin-left: 8px;
    background-color: transparent;
    transition: background-color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    z-index: 1;
}

    .route-select-checkbox:checked {
        background-color: var(--route-color);
        border-color: var(--route-color);
    }

        .route-select-checkbox:checked::after {
            content: '';
            position: absolute;
            left: 50%;
            top: 45%;
            width: 7px;
            height: 12px;
            border: 2px solid #fff;
            border-top: none;
            border-left: none;
            transform: translate(-50%, -55%) rotate(45deg);
        }

.feeder-routes-section {
	margin-top: 10px;
	padding-top: 8px;
	border-top: 1px solid rgba(var(--midgrey), 0.35);
}
.feeder-routes-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	opacity: .6;
	margin-bottom: 6px;
}
.feeder-routes-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
/* One grid governs the whole row instead of two independently-aligned flex
   columns (.feeder-route-info / .feeder-route-meta) — that nesting is why
   "top" (name/progress) and "bottom" (driver/badges) kept drifting out of
   sync across every alignment tweak. .feeder-route-info/-meta stay as plain
   grouping wrappers via display:contents; their children are the real grid
   items, placed explicitly into the grid's two columns × two rows. */
.feeder-route-item {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 10px;
	row-gap: 2px;
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(var(--midgrey), 0.08);
	border-left: 4px solid var(--feeder-route-color, rgba(var(--midgrey), .75));
	cursor: pointer;
	transition: background-color .2s ease;
}
.feeder-route-item:hover {
	background: rgba(var(--midgrey), 0.16);
}
.feeder-route-dot {
	width: 8px;
	height: 8px;
	min-width: 8px;
	border-radius: 50%;
	background: var(--feeder-route-color, rgba(var(--midgrey), .75));
}
.feeder-route-info,
.feeder-route-meta {
	display: contents;
}
.feeder-route-name {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.feeder-route-driver {
	grid-column: 1;
	grid-row: 2;
	align-self: end;
	min-width: 0;
	font-size: 11px;
	opacity: .65;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 6px;
}
/* DevExpress's own horizontal bar, same as the card's top-row bar (label left, thin track — set on
   the DxProgressBar itself); this only places it in the row's grid. */
.feeder-route-progress {
	grid-column: 2;
	grid-row: 1;
	width: 100%;
	min-width: 150px;
	display: flex;
	align-items: center;
}
.feeder-route-badges-row {
	grid-column: 2;
	grid-row: 2;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: flex-end;
	gap: 6px;
}
.feeder-route-item .badge.function-badge {
	margin: 0px;
	height: 20px;
	float: none;
}
.feeder-route-item .badge.function-badge .function-badge-value {
	padding: 1px 8px;
}
.feeder-route-item .badge.function-badge .function-badge-value .function-value-value {
	font-size: 11px;
	margin-top: 2px;
}
.feeder-route-item .badge.function-badge .function-badge-value .function-icn {
	width: 14px;
	height: 14px;
	background-size: 12px 12px !important;
}
/*-----COMPACT ROUTE CARDS-----*/
.route-card-compact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 10px;
	background-color: var(--bs-body-bg);
	border-left: 4px solid var(--route-color, rgba(var(--midgrey), .75));
	box-shadow: 0 2px 5px 0px rgba(0,0,0, 0.15) !important;
	cursor: pointer;
}
.route-card-compact:hover {
	box-shadow: 0 0 0 1px rgba(var(--primary), 0.75), 0 2px 5px 0px rgba(0,0,0, 0.15) !important;
}
.route-card-compact.active {
	box-shadow: 0 0 0 1px var(--route-color, rgba(var(--primary), 0.75)), 0 2px 5px 0px rgba(0,0,0, 0.15) !important;
}
.route-card-compact .route-compact-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}
.route-card-compact .route-footer-row {
	width: 100%;
}
.route-card-compact .route-compact-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	line-height: 1.3;
	gap: 2px;
}
/* Same equal-spacing fix as .map-route-driver above, for the compact card's stacked
   route name / driver name / service area lines. */
.route-card-compact .route-compact-info .map-driver-name {
	margin-top: 0;
}
.route-card-compact .route-compact-name {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.route-card-compact .route-compact-time {
	font-size: 12px;
	opacity: .65;
	white-space: nowrap;
}
.route-card-compact .route-compact-top-row {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
}
/* Sizing (height, padding, icon size) comes from the shared .function-badge-icon-only rules —
   the compact route-type badge is the same 20px-tall, icon-only badge as the full card's. */
.route-card-compact .badge.function-badge {
	margin: 0px;
	float: none;
}

/*-----COMPACT ORDER CARDS (Order View)-----*/
/* Keeps .order-card so the stage badge's per-status colours still apply (they are scoped to
   ".order-card-container .order-card .order-status.badge-*" in order-card-view.css) and replaces only
   the layout. The coloured left edge matches .route-card-compact, and stands in for the full card's
   .order-sequence-badge — which is a colour chip carrying no number, so nothing is lost with it. */
.order-card-container.route-card-container .order-card.order-card--compact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	border: 0px;
	border-left: 4px solid var(--route-color, rgba(var(--midgrey), .75));
	margin-bottom: 8px;
	cursor: pointer;
}
.order-card.order-card--compact:hover {
	box-shadow: 0 0 0 1px rgba(var(--primary), 0.75), 0 2px 5px 0px rgba(0,0,0, 0.15) !important;
}
.order-card.order-card--compact.active {
	box-shadow: 0 0 0 1px var(--route-color, rgba(var(--primary), 0.75)), 0 2px 5px 0px rgba(0,0,0, 0.15) !important;
}
.order-card.order-card--compact .order-compact-name {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.order-card.order-card--compact .order-compact-address {
	font-size: 12px;
	opacity: .65;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* .order-customer's own "width: 100%; display: inline-block" (order-card-view.css) already gives
   this its own full-width row below the name/address — the class is present on this div (with the
   .sb-badge-container inside) so the time and stage take the full card's plain-text treatment in
   order-card-view.css. */
.order-card.order-card--compact .order-compact-meta {
	display: flex;
	align-items: center;
}

/*-----COMPACT DRIVER CARDS (Driver View)-----*/
.driver-card-compact {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px 12px;
	border-radius: 10px;
	background-color: var(--bs-body-bg);
	border-left: 4px solid var(--route-color, rgba(var(--midgrey), .75));
	box-shadow: 0 2px 5px 0px rgba(0,0,0, 0.15) !important;
	margin-bottom: 8px;
}
.driver-card-compact .driver-compact-row {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
}
.driver-card-compact .driver-compact-info {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
	line-height: 1.3;
}
.driver-card-compact .driver-compact-name {
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
/* Driver cards (compact and full): the service area beside the (bold) driver name stays regular
   weight, as it reads on the route cards' driver line. */
.driver-card-compact .driver-compact-name .map-driver-line-service-area,
.map-route-title .map-driver-line .map-driver-line-service-area {
	font-weight: 400;
}
/* Route View compact mode's ServiceArea card — the header is the service-area link itself. */
.driver-card-compact .driver-compact-name .service-area-link {
	text-decoration: underline;
}
/* The driver's route count. Mirrors .feeder-routes-title's role on the full card, reduced to the
   number — the chips below it carry the detail. */
.driver-card-compact .driver-compact-count {
	flex-shrink: 0;
	min-width: 24px;
	height: 24px;
	padding: 0px 8px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	line-height: 24px;
	text-align: center;
	color: var(--bs-body-color);
	background-color: rgba(var(--midgrey), 0.25);
}
.driver-card-compact .driver-compact-routes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
/* One chip per route, in place of the full card's .feeder-route-item list (a progress bar and a badge
   row each) — same --feeder-route-color convention, same click target. */
.driver-card-compact .driver-compact-route-chip {
	max-width: 100%;
	padding: 1px 8px;
	border-radius: 6px;
	border-left: 3px solid var(--feeder-route-color, rgba(var(--midgrey), .75));
	background-color: rgba(var(--midgrey), 0.15);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}
.driver-card-compact .driver-compact-route-chip:hover {
	background-color: rgba(var(--primary), 0.15);
}

.feeder-route-expand-icn {
	width: 16px;
	height: 16px;
	min-width: 16px;
	opacity: .5;
	background: url('../../../../IImageService/chevron-right') center center no-repeat;
	background-size: 10px 10px;
	filter: var(--icon-filter-dark);
}

.feeder-route-driver .end-label-time::after {
	content: "";
	margin-left: 6px;
	margin-right: 4px;
	opacity: 1;
	border-right: 2px dotted rgba(var(--midgrey), 1);
	display: inline-block;
	height: 14px;
	position: relative;
	top: 3px;
}

@media screen and (max-width:450px) {

	.map-routelist-view-content {
		width: 100%;
		min-width: 100%;
		padding: 0px;
	}

	.map-routelist-tab-btn {
		padding: 10px 8px;
	}

	.start-address, .end-address {
		max-width: 280px;
	}

	.start-label .start-label-label, .end-label .end-label-label {
		display: none;
	}

	.start-label .start, .end-label .end {
		max-width: 210px;
	}
}

/* ===== "New Customer" picker mode — customer-detail side panel =====
   Replaces MapRouteListView in the map-view-div flex row while picker mode is active
   (GoogleMapView.razor). Reuses .map-routelist-view-content for identical sizing. */
.customer-detail-panel {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

.customer-detail-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid rgba(var(--midgrey), 0.25);
}

.customer-detail-title {
	font-size: 16px;
	font-weight: 700;
	color: var(--bs-body-color);
}

.customer-detail-address {
	font-size: 13px;
	color: var(--site-lighttext);
	margin-top: 2px;
}

.customer-detail-close-btn {
	border: none;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	color: #999;
	cursor: pointer;
	padding: 0 4px;
}

	.customer-detail-close-btn:hover {
		color: var(--bs-body-color);
	}

.customer-detail-body {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.customer-detail-suggested-routes {
	/* Icon spacing comes from .wizard-alert-icon (Base wizard.css) — no gap needed here. */
	display: flex;
	align-items: flex-start;
	font-size: 12px;
	padding: 8px 10px;
	border-radius: 8px;
	background: rgba(var(--primary), 0.08);
	color: var(--site-darktext);
}

.customer-detail-routes-selected {
	font-size: 12px;
	font-weight: 600;
	color: var(--site-darktext);
	margin-top: 4px;
}

.customer-detail-routes-list {
	max-height: 220px;
	overflow-y: auto;
	border: 1px solid rgba(var(--midgrey), 0.25);
	border-radius: 8px;
}

/* Only the data rows are inert — column headers (sorting) and the pager stay clickable. */
.customer-detail-routes-list .dxbl-grid-table > tbody > tr,
.customer-detail-routes-list .dxbl-grid-table > tbody > tr * {
	pointer-events: none;
}

.customer-detail-footer {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}

.customer-detail-save-btn,
.customer-detail-cancel-btn {
	flex: 1;
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
}

.customer-detail-save-btn {
	border: none;
	color: #fff;
	background: var(--site-secondary, #2c7be5);
}

	.customer-detail-save-btn:disabled {
		opacity: .5;
		cursor: not-allowed;
	}

.customer-detail-cancel-btn {
	border: 1px solid rgba(var(--midgrey), 0.25);
	background: transparent;
	color: var(--bs-body-color);
}

@media screen and (max-width:1400px) {
	.flyout-container .dxbl-modal-root:has(.mapview-flyout),
	.flyout-container .dxbl-modal-root.flyout-1:has(.mapview-flyout),
	.flyout-container .dxbl-modal-root.flyout-2:has(.mapview-flyout),
	.flyout-container .dxbl-modal-root.flyout-3:has(.mapview-flyout),
	#main-view-content:has(.map-routelist-view-content.collapsed) .dxbl-modal-root.flyout-1{
		right: 0px !important;
	}
	.flyout-container .dxbl-modal-root.flyout-2:has(.mapview-flyout) {
		height: calc(100% - 203px);
	}
	.flyout-container .dxbl-modal-root.flyout-2:has(.mapview-flyout) .dxbl-modal-header {
		top: 203px !important;
	}
	.flyout-container .dxbl-modal-root.flyout-3:has(.mapview-flyout) {
		height: calc(100% - 215px);
	}
	.dxbl-modal-root.flyout-1:has(.mapview-flyout){
		z-index: 1 !important;
	}
	.dxbl-modal-root.flyout-2:has(.mapview-flyout){
		z-index: 2 !important;
	}
}
@media screen and (max-width:500px) {
	.map-routelist-grid .dxbl-scroll-viewer-content {
	padding-left: 5px !important;
}
}

/* Route type badge (MapRouteListView.razor's RenderRouteTypeBadge): the route's RouteType as a
   pill on the route card, the compact route card and the Route Type view's group card header.
   Background/text colour are injected inline from the RouteType's own appearance, so this rule
   only carries shape and spacing — self-contained (padding/radius/font) rather than riding on a
   generic ".badge" rule, same reasoning as order-card-view.css's .order-type-badge. Sized to fit
   the 20px rows around it (.map-driver-name / .map-driver-service-area) so it doesn't push the
   card taller than a service-area line would. */
.route-type-badge-container {
	display: flex;
	min-width: 0;
	height: 20px;
	margin-bottom: 2px;
}

.badge.route-type-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	max-width: 100%;
	min-width: 0;
	padding: 2px 8px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	line-height: 16px;
}

.route-type-badge-text {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Masked rather than an <img>: the icon is painted in the badge's own foreground colour
   (--route-type-foreground), so it keeps whatever contrast the RouteType's text colour has instead
   of a fixed white filter that would vanish on a light background. */
.route-type-badge-icon {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	background-color: var(--route-type-foreground, currentColor);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Inside the Route Type card's title / compact name the badge is the whole heading, so it uses the
   heading's own size instead of the smaller route-card pill. */
.map-route-title .route-type-badge-container,
.driver-compact-name .route-type-badge-container {
	height: auto;
	margin-bottom: 0;
}

.map-route-title .badge.route-type-badge,
.driver-compact-name .badge.route-type-badge {
	font-size: 14px;
	line-height: 18px;
	padding: 3px 10px;
}

.map-route-title .route-type-badge-icon,
.driver-compact-name .route-type-badge-icon {
	width: 16px;
	height: 16px;
}

/* The same pill in a List View cell (RouteTypeBadgeEditor, e.g. Route_ListView's Route Type
   column), where XAF wraps it in its link to the Route Type record: drop the link underline and
   signal clickability on hover instead. */
.grid-cell-object-link .badge.route-type-badge {
	text-decoration: none;
	cursor: pointer;
	vertical-align: middle;
}

.grid-cell-object-link:hover .badge.route-type-badge {
	filter: brightness(1.15);
}