.map-routelist-view-content {
    width: 484px;
	min-width: 484px;
    position: relative;
    overflow: hidden;
    padding: 12px;
	padding-right: 0px;
	padding-top: 0px;
}
#map-container{
	width: calc(100% - 480px); 
	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;
    }

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

/*-----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-tab-buttons {
    display: flex;
    border-bottom: 1px solid rgba(var(--midgrey), 0.25);
}

.map-routelist-tab-btn {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    background: transparent;
    opacity: 0.65;
    color: currentColor;
}
.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;
    max-height: calc(100vh - 270px);
    overflow-y: auto;
    overflow-x: hidden; /* 🚫 disables left-right scroll */
    max-width: 100%;
    box-sizing: border-box;
}

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


/*-----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;
    padding: 5px 12px;
}

.route-card {
    border: 1px 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: 1px solid rgba(var(--primary), 0.75)!important;
	/* transform: translateY(-2px); */
}
.route-customer .routelist-dc-driver-img {
    display: flex;
}
.route-customer .route-label {
    display: flex;
}


.map-routelist-view-content .map-route-header {
    padding:0px;
    transition: background-color 0.2s ease;
}

.map-routelist-view-content .map-route-progress {
    display: inline-block;
	vertical-align: middle;
    width: 50px;
    height: 50px;
    border-radius: 50px;
    margin-left:auto;
}


.map-route-progress > .dxbl-progress-bar {
    visibility: inherit !important;
}

.map-route-progress .dxbl-progress-bar.dxbl-progress-bar-success.dxbl-progress-bar-horizontal .dxbl-progress-bar-label-container::before {
    color: white !important;
}

.map-routelist-view-content .dxbl-progress-bar {
    width: 46px !important;
    height: 46px !important;
}

.map-routelist-view-content .dxbl-progress-bar-track-container {
    margin-bottom: 0px;
    width: 46px !important;
    height: 46px !important;
    border-radius: 50px !important;
    transform: rotate(-90deg);
}

.map-routelist-view-content .dxbl-progress-bar-track {
    background-color: rgba(var(--midgrey), 0.25);
    border: 0px solid rgba(var(--midgrey), 0.75);
    width: 46px !important;
    height: 46px !important;
    border-radius: 50px !important;
}

.map-routelist-view-content .dxbl-progress-bar-indicator {
    background-color: rgba(var(--secondary), 1);
    height: 46px !important;
    background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
    background-size: 1rem 1rem;
}

.map-routelist-view-content .dxbl-progress-bar-label-container {
    text-align: center;
    z-index: 1;
    margin-top: -66px;
}

.map-routelist-view-content  .dxbl-progress-bar-label-container p {
    display: block;
    color: white !important;
}

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

.route-label .route-kpi 
{
    width: 60px;
    display: flex;
    flex-direction: column;
	text-align:center;
}
.route-label .map-route-addresses {
    display: flex;
    flex-direction: column;
	line-height: 1.8;
}

.start-label .start-label-time, .end-label .end-label-time {
    margin-right: 6px;
	padding-right: 6px;
	opacity: .75;
	border-right: 2px dotted currentColor;
}
.start-label .start, .end-label .end {
    font-weight: 700;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}
.start-label img, .end-label img {
    opacity: .35;
}

.kpi-stops, .kpi-items, .kpi-time, .kpi-mileage{
    font-weight:700;
}
.start-address, .end-address {
    padding-left: 28px;
	opacity: .65;
	white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 380px;
}

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

.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: block;
	margin-bottom: 10px;
}
.map-routelist-view-content .map-route-driver {
    display: inline-block;
    vertical-align: middle;
    margin-top: -5px;
	width: calc(100% - 115px);
}

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

.route-kpi .kpi-val {
    font-size: 14px;
	font-weight: 700;
}
.route-kpi .kpi-val small {
    font-size: 9px;
	font-weight: 700;
	opacity: .85;
}
.route-kpi small {
    margin-top: -3px;
    font-size: 9px;
	font-weight: 700;
	opacity: .5;
}

.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 {
    text-transform: uppercase;
	border-radius: 0 10px 10px 0;
	position: relative;
	margin-top: 0px;
	margin-bottom: -2px;
	margin-left: -10px;
	display: block;
	width: 20px;
	font-size: 11px;
	line-height: 1;
	height: 100px;
	padding: 0px;
	float: left;
}
.map-routelist-view-content .badge.function-badge .function-badge-value { 
	writing-mode: vertical-rl;
	text-orientation: mixed;
	height: 100px;
	margin-left: 4px;
	margin-top: -2px;
}
.map-routelist-view-content .badge.function-badge.badge-Feeder {
    background-color: var(--site-blue);
	border-left: 0px;
}
.map-routelist-view-content .badge.function-badge.badge-Linehaul {
    background-color: #d3a609;
	color: black;
	border-left: 0px;
}
.map-routelist-view-content .badge.function-badge.badge-Distribution {
    background-color: var(--site-green);
	border-left: 0px;
}
.map-routelist-view-content .badge.function-badge.badge-Transfer {
    background-color: var(--site-orange);
	border-left: 0px;
}
.map-routelist-view-content .badge.function-badge.badge-Shuttle {
    background-color: var(--site-yellow);
	border-left: 0px;
	color: black;
}
.map-routelist-view-content .badge.function-badge.badge-Return {
    background-color: var(--site-red);
	border-left: 0px;
}

.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-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: 50px !important;
	transition: .3s ease;
}


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

.map-routelist-view-content {
    width: 100%;
	min-width: 100%;
	padding: 0px;
}
.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;
}
}
@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% - 167px);
	}
	.flyout-container .dxbl-modal-root.flyout-3:has(.mapview-flyout) {
		height: calc(100% - 217px);
	}
	.dxbl-modal-root.flyout-1:has(.mapview-flyout){
		z-index: 1 !important;
	}
	.dxbl-modal-root.flyout-2:has(.mapview-flyout){
		z-index: 2 !important;
	}
}