/* ==========================================================================
   DESIGN SYSTEM TOKENS & MODERN OVERLAYS (Phase 2 Upgrade)
   ========================================================================== */

:root {
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--primary-brand: #0f4c81;
	--primary-accent: #0284c7;
	--primary-hover: #0369a1;
	--bg-app: #f8fafc;
	--bg-card: rgba(255, 255, 255, 0.95);
	--bg-glass: rgba(255, 255, 255, 0.88);
	--backdrop-blur: blur(12px);
	--border-color: #e2e8f0;
	--border-focus: #0284c7;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.05);
	--shadow-md: 0 4px 16px -2px rgba(15, 23, 42, 0.08);
	--shadow-lg: 0 12px 32px -4px rgba(15, 23, 42, 0.12);
	--text-primary: #1e293b;
	--text-muted: #64748b;
}

body {
	background: #f8fafc;
	font-family: var(--font-sans);
	font-size: 13px;
	color: var(--text-primary);
	min-width: 1024px;
	min-height: 768px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Custom Minimal Scrollbars */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background: #f1f5f9;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb {
	background: #cbd5e1;
	border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
	background: #94a3b8;
}


/* Tables */
table    { display: table; padding:0; margin:0; }
tr       { display: table-row; padding:0; margin:0; }
thead    { display: table-header-group; padding:0; margin:0; }
tbody    { display: table-row-group; padding:0; margin:0; }
tfoot    { display: table-footer-group; padding:0; margin:0; }
col      { display: table-column; padding:0; margin:0; }
colgroup { display: table-column-group; padding:0; margin:0; }
td, th   { display: table-cell; padding:0; margin:0; }
caption  { display: table-caption; padding:0; margin:0; }

.deskPanelArea {
	/* Layer List: Outside Container */
	color: var(--text-primary);
	padding: 8px;
	background-color: var(--bg-card);
	border: solid 1px var(--border-color) !important;
	border-radius: 0 0 var(--radius-md) var(--radius-md);
	box-shadow: var(--shadow-sm);
}

.deskPanelLegend {	
	padding:0px;
	border-bottom:1px dotted #cccccc !important;
	border-radius:0;
	padding:0px 0 5px 8px;
}

.deskPanelLegend span { font-size:0.9em; color:#737373; }
.deskPanelLegend .fa-angle-right { color:#737373; }

.deskPanelHeader {
	display:block;
	background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
	border:solid 1px var(--border-color);
	border-radius: var(--radius-md) var(--radius-md) 0 0;
	font-size:0.9em;
	font-weight:600;
	padding:8px 12px;
	text-decoration:none;
	color: var(--primary-brand);
	transition: all 0.2s ease-in-out;
}

.deskPanelHeaderMini {
	font-size:0.8em;
	padding:5px 7px;
}

.deskPanelHeader:hover { text-decoration:none; color: var(--primary-accent); background: #e2e8f0; cursor:pointer; }

.header_01 { color: var(--primary-brand); }

.initiallyHidden { display:none !important; }

#deskPanelLeft {
	float: left;			
	width: calc(100% - 350px );
}

#deskPanelMap {			
	height:calc(100vh - 225px);
	min-height: 550px;
}

#deskPanelLeft .inner_area { padding:15px 0 0 15px; height: 100%; }

#map {
	width: 100% !important;
	height: calc(100vh - 240px) !important;
	min-height: 520px !important;
	position: relative !important;
	border:solid 1px var(--border-color) !important;
	background-color: #fff;
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	overflow: hidden;
}

#map .esri-view,
#map .esri-view-root,
#map .esri-view-surface,
#map canvas {
	width: 100% !important;
	height: 100% !important;
}



#deskPanelRight { float: left; width: 335px;	}

#deskPanelRight .deskPanelRightItem { padding:15px 0 0 15px; }

#deskPanelRight .BasemapArea { max-height:calc(100vh - 350px); overflow-y: auto;  }

#deskPanelLegend { float:left; width:calc(100%); }		
#deskPanelLegend .inner_area { padding:15px 0 0 15px; }			
#deskPanelLegend .deskPanelArea { height:165px; max-height:165px; overflow-x: auto; }

#Toolbox {  }

#toolTypes { padding-top:3px; }

.select_1 { font-size:2em; }

.loading_01 { padding:2px 0 8px 0; font-size:2em; color:#bcdcbf; text-align:center; }

.hidden { display:none; }

.debug_border { border: solid 1px black !important; }

.deskPanelArea #previous { font-size:0.8em; font-weight:bold; }
.deskPanelArea #next { font-size:0.8em; font-weight:bold; }

.EmptySpace { height:calc(100vh - 350px); }

#toolResults .col-md-6 { border-left:1px solid #abd3af; border-bottom:2px solid #abd3af; padding: 6px; }

#featureCount { padding-bottom: 6px; }


#deskPanelMenu .deskPanelArea {				
	background-color: #f9eab7;
	border:solid 1px #f1e2b1 !important;
	border-bottom: 2px solid #e6d7a8 !important;
	border-radius: 5px;				
	padding:5px 10px;
}

#deskPanelMenu .logo {
	float:left;
	font-size: 0.7em;
	font-weight:bold;
	color: #0097f1;
	line-height:1.2em;
}

#deskPanelMenu .logo div { vertical-align:top; display:inline-block; }

#deskPanelMenu .menuItem {
	font-size:1.5em;
	padding-left:10px;
	padding-right:2px;
	color:#27b04d;
	vertical-align:top;
	cursor:pointer;
	border:solid 1px black;
}
		
#aboutMenu {
	width: 940px !important;
	max-width: 96vw !important;
	margin: 0 auto !important;
	box-sizing: border-box !important;
	border-radius: 20px !important;
	overflow: hidden !important;
	box-shadow: 0 25px 60px -12px rgba(15, 23, 42, 0.4) !important;
	border: 1px solid rgba(226, 232, 240, 0.8) !important;
	background: #ffffff !important;
}

#aboutMenu .areaHeader {				
	background: linear-gradient(135deg, var(--primary-brand, #0f4c81) 0%, #1e293b 100%) !important;
	border-radius: 0 !important;
	padding: 16px 20px 0 20px !important;
	min-height: 76px;
	height: auto !important;
	position: relative;
	width: 100% !important;
	box-sizing: border-box !important;
}

#aboutMenu .areaHeader .logo {
	float: left;
	font-size: 0.8em;
	font-weight: 700;
	color: #ffffff;
	line-height: 1.25em;
	padding-top: 2px;
	letter-spacing: 0.3px;
}

#aboutMenu .areaHeader .logo div { vertical-align: middle; display: inline-block; }

#aboutMenu .areaHeader .close {
	position: absolute !important;
	top: 14px !important;
	right: 18px !important;
	width: 32px !important;
	height: 32px !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.15) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	font-size: 1.1em !important;
	color: #ffffff !important;
	cursor: pointer !important;
	z-index: 10 !important;
	float: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: all 0.2s ease !important;
}

#aboutMenu .areaHeader .close:hover {
	background: rgba(255, 255, 255, 0.3) !important;
	transform: scale(1.08);
}

#aboutMenu .areaHeader .Tabs {
	display: flex !important;
	align-items: flex-end !important;
	clear: both;
	padding-top: 14px !important;
	margin-bottom: 0 !important;
	gap: 6px;
	width: 100% !important;
	box-sizing: border-box !important;
}

#aboutMenu .areaHeader .Tabs .menuItem {
	float: none !important;
	padding: 8px 18px 7px 18px !important;
	height: auto !important;
	border-radius: 10px 10px 0 0 !important;
	display: inline-block;
	cursor: pointer;
	text-decoration: none;
	color: rgba(255, 255, 255, 0.82) !important;
	font-weight: 500;
	font-size: 0.9em;
	transition: all 0.2s ease;
	margin-bottom: 0 !important;
	background: rgba(255, 255, 255, 0.08);
	box-sizing: border-box;
}

#aboutMenu .areaHeader .Tabs .menuItem:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.2);
}

#aboutMenu .areaHeader .Tabs .active,
#aboutMenu .areaHeader .Tabs .menuItem.active {
	color: var(--primary-brand, #0f4c81) !important;
	background: #ffffff !important;
	font-weight: 700;
	margin-bottom: 0 !important;
	box-shadow: 0 -3px 12px rgba(0, 0, 0, 0.15);
}

#aboutMenu .areaBody {
	background-color: #ffffff !important;
	border: none !important;
	width: 100% !important;
	height: 480px !important;
	overflow-y: auto;
	padding: 24px !important;
	font-size: 0.95em;
	box-sizing: border-box !important;
	color: #334155;
	line-height: 1.6;
}

#aboutMenu .areaBody .bodyItem.hidden,
#aboutMenu .areaBody .bodyWelcome.hidden {
	display: none !important;
}

#aboutMenu .areaBody .bodyWelcome:not(.hidden) {
	background: #ffffff url('/static/portal/images/mountains_bg.png') no-repeat center bottom;
	background-size: cover;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	height: 100% !important;
	min-height: 420px !important;
	text-align: center !important;
	border-radius: 16px;
	padding: 24px !important;
	box-sizing: border-box !important;
	overflow: hidden !important;
}


.welcome_hero_card {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.9) !important;
	border-radius: 20px !important;
	padding: 36px 44px !important;
	box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.2) !important;
	max-width: 840px !important;
	width: 100% !important;
	margin: auto !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	box-sizing: border-box !important;
}

.welcome_hero_content_row {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 40px !important;
	width: 100% !important;
	margin-bottom: 28px !important;
}

.welcome_logo_wrap {
	flex: 0 0 230px !important;
	width: 230px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
}

.welcome_logo_wrap img {
	width: 100% !important;
	max-width: 230px !important;
	height: auto !important;
	max-height: 140px !important;
	object-fit: contain !important;
	filter: drop-shadow(0 4px 8px rgba(15, 23, 42, 0.08)) !important;
}

.welcome_title_wrap {
	flex: 1 1 auto !important;
	text-align: left !important;
}

.welcome_title {
	font-size: 1.7rem !important;
	font-weight: 700 !important;
	color: #0f172a !important;
	line-height: 1.35 !important;
	text-align: left !important;
	margin: 0 !important;
}

.btn_welcome_action {
	background: linear-gradient(135deg, var(--primary-brand, #0f4c81) 0%, var(--primary-accent, #0284c7) 100%) !important;
	color: #ffffff !important;
	font-weight: 600 !important;
	font-size: 0.88rem !important;
	padding: 8px 26px !important;
	border-radius: 24px !important;
	border: none !important;
	box-shadow: 0 4px 14px -1px rgba(2, 132, 199, 0.4) !important;
	cursor: pointer !important;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn_welcome_action:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 18px -1px rgba(2, 132, 199, 0.5) !important;
}


#aboutMenu .areaBody .bodyItem h1,
#aboutMenu .areaBody .bodyItem h2,
#aboutMenu .areaBody .bodyItem b {
	color: var(--primary-brand, #0f4c81);
}

#aboutMenu .areaBody .bodyItem ul {
	padding-left: 24px;
	margin-top: 12px;
}

#aboutMenu .areaBody .bodyItem ul li {
	padding-bottom: 8px;
	color: #475569;
}

#aboutMenu .areaFooter {				
	background-color: #0f172a !important;
	border: none !important;
	height: 48px;
	text-align: center;
	padding-top: 13px;
	width: 100% !important;
	box-sizing: border-box !important;
}

#aboutMenu .areaFooter a {				
	display: inline-block;
	font-size: 0.88em;
	color: rgba(255, 255, 255, 0.75) !important;
	cursor: pointer;
	font-weight: 500;
	transition: color 0.2s ease;
}

#aboutMenu .areaFooter a:hover {
	color: #ffffff !important;
}

#aboutMenu .areaFooter div {
	color: rgba(255, 255, 255, 0.45) !important;
	font-size: 0.88em;
}



#aboutMenu .areaFooter a {				
	display:inline-block;
	font-size:0.9em;
	color:#0097f1;
	cursor:pointer;
}

#aboutMenu .areaFooter a:hover { color:#0097f1; }

#aboutMenu .areaFooter div {
	display:inline-block;
	color:#7a7259;
}

#deskPanelRight .layerListArea { max-height:calc(100vh - 350px); overflow-y: auto; font-size:0.9em; padding:5px 8px; }

#deskPanelRight .ToolsArea { max-height:calc(100vh - 350px); overflow-y: auto; font-size:0.9em; padding:5px 8px; }

.exportFormArea { display:none; }

.toolResults_NoResult {
	text-align:center;
}

.summaryResultsCount { text-align:center; padding-bottom:8px; margin-bottom:8px; border-bottom:dotted 1px grey; }

.toolResultsCount { text-align:center; padding-bottom:8px; }

.toolResults {
	border:0;			
	display:block; 
	margin:6px 0 20px 0;
	padding:0;
	border-radius:0px;			
	/* background:#f0f9f2; */ /* For browsers that do not support gradients */
    /* background:-webkit-linear-gradient(top,#f0f9f2,#f0f9f2,#d8ebda); */ /* For Safari 5.1 to 6.0 */
    /* background:-o-linear-gradient(top,#f0f9f2,#f0f9f2,#d8ebda); */ /* For Opera 11.1 to 12.0 */
    /* background:-moz-linear-gradient(top,#f0f9f2,#f0f9f2,#d8ebda); */ /* For Firefox 3.6 to 15 */
    /* background:linear-gradient(top,#f0f9f2,#f0f9f2,#d8ebda); */ /* Standard syntax */ 	
}

.toolResultsHeader {
	padding-bottom: 5px;
	font-weight: bold;
	text-align: center;
	font-size:1.2em;
}

.toolResults_nav {	
	font-weight:bold;
	font-size:1.1em;
	padding-bottom:7px;
	text-align: center;
	color:#000;
}

.toolResults_nav .guide {	
	display:inline-block;
	padding:0 15px;
	font-size:0.8em;
}

.toolResults_nav .navblock {	
	display:inline-block;
	background:#eaeaea;
	padding:5px;
	border-radius: 5px;
}

.toolResults_column {
	display:inline-block;
	overflow-x:hidden;
	margin-right:4px;
}

.summaryResultsHeader { width:100%; padding-left:28px; padding-right:5px; font-size:0.8em; font-weight:bold; }

#toolOptions { margin-top:3px; }

#ToolHelp {
	border-radius:5px;
	border:solid 1px #f9eab7;
	background:#f9eab7;
	padding:10px;
	text-align:center;
	margin:10px 0 5px 0;
	font-style: italic;
	font-size:0.9em;
}

.toolResults_BodyHeader{
	text-align:center;
	background:#77cc56;
	color:#fff;
	font-weight: bold;
	padding:5px 0;
}

.toolResultsBody {
	padding-bottom: 0px;
	padding-left: 0px;
	font-size: 0.9em;
}

.toolResultsItem{
	margin-bottom: 12px;
	border-bottom:0;
	border-top:0;
	border-radius:5px;
	border:solid 1px #bcdcbf;
	border-top:solid 2px #77cc56;
	background:#f0f9f2;
}

.toolResultsItem .toolResults_Item:last-child {
   	border-bottom:0;
}


#IdentifyResultsPanel table {
	border-left:0;
	border-radius:5px !important;
	border:solid 1px #bcdcbf;
	border-top:solid 2px #77cc56;
}

#IdentifyResultsPanel table tr td {
	border-left:solid 1px #bcdcbf;
}

#jumpto_main { padding:10px; }


/* RESULTS: Prev/Next */

	.toolResults_table {
		padding-bottom: 0px;
		padding-left: 0px;
		font-size: 0.9em;
	}
	
	.toolResults_tableItem{
		margin-bottom: 12px;
		border-bottom:0;
		border-top:0;
		border-radius:5px;
		border:solid 1px #bcdcbf;
		border-top:solid 2px #77cc56;
		background:#f0f9f2;
	}
	
	.toolResults_tableItem .toolResults_Item:last-child {
	   	border-bottom:0;
	}
	
	.toolResults_Item{
		border:0;
		border-bottom:0;
		padding:4px;
		border-bottom:dotted 1px #77cc56;
	}
	
	.toolResults_Item .title {
		color:#27b04d;
	}
	
	
/* RESULTS: Vertical */
	
	.toolResultsContentItem{
		margin-bottom: 5px;
		border-bottom:0;
		border-top:0;
		border-radius:5px;
		border:solid 1px #bcdcbf;
		border-bottom:solid 2px #77cc56;
		background:#f0f9f2;
	}
	
	.toolResultsContentItem .itemHeader { padding-bottom:3px; color:#404040; cursor:pointer;  }
	
	.toolResultsContentItem .itemHeader div { display:inline-block; vertical-align:top; }
	
	.toolResultsContentItem .itemHeader .itemIcon { font-size:1.4em; padding-left:5px; }
	
	.toolResultsContentItem .itemHeader .itemIcon .fa-plus-square { color: #0f172a; }
	
	.toolResultsContentItem .itemHeader .itemIcon .fa-minus-square { color: #0f172a; }

	
	.toolResultsContentItem .itemHeader .itemTitle { padding:5px 0 0 5px; width:90%; height:calc(1em + 15px); overflow-y: hidden !important; overflow-x: hidden !important; }
	
	.toolResultsContentItem .active { background:#77cc56; color:#fff; padding-bottom:3px; }
	
	.toolResultsContentItem .itemBody .toolResults_Item .title { color:#27b04d; }
	
	.toolResultsContentItem .itemBody .toolResults_Item:last-child { border-bottom:0; }
	
	/* Old Results */
	.toolResultsContentItemOld .itemHeader { color:#737373; }
	.toolResultsContentItemOld { border:solid 1px #8c8c8c; border-bottom:solid 2px #8c8c8c; background:#f5f5f5; }
	.toolResultsContentItemOld .itemHeader .itemIcon .fa-plus-square { color:#8c8c8c; }
	.toolResultsContentItemOld .active { background:#8c8c8c; color:#fff; }
	.toolResultsContentItemOld .itemBody .toolResults_Item .title { color:#737373; }
	
	
/* ---- */

.aggregation_parameter_label{
	display: block;
	font-weight:normal;
	clear: both;
}

.tools_header,
.options_header,
.route_header,
.results_header,
.toolResultsHeader {
	padding: 2px 0 5px 0 !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	color: var(--portal-brand, var(--primary-brand, #0284c7)) !important;
	border-top: none !important;
	border-bottom: 2px solid var(--portal-brand, var(--primary-brand, #0284c7)) !important;
	margin-top: 6px !important;
	margin-bottom: 8px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
}




#routing_totals {
	padding-left: 20px;
	padding-bottom: 20px;
}

#routing_stops {
	padding-left: 20px;
	margin-bottom: 35px;
}

.routing_stop_totals { margin-left:6px; padding:6px 0 6px 6px; border-left:dashed 1px blue; }

.routing_stop_totals .fa { color:blue; }

.routing_stop_marker { color:#408048; }


#labels_chk { vertical-align:top; font-weight:normal; padding:0px; margin:0px; padding-top:4px; margin-left:20px; color:#375e27; }
#labels_chk .check { display:inline-block; padding:0px; vertical-align:top; }
#labels_chk .title { display:inline-block; padding:0px; vertical-align:top; padding:2px 0 0 5px; }

span.esriButton {
/* This style is used to remove padding / large font size for the metadata button on the layer selector */
	padding: 0px !important;
	font-size: 14px !important;
}
.layerMetadataDescription{
	color:#000;
	padding:15px 20px;
	background-color: #fff;
	border:solid 1px #e5e5e5 !important;
	border-radius:0 0 5px 5px;
	border-bottom:2px solid #cccccc !important;
	border-top:0px !important;
	max-width: 75%;
	margin: auto;
}

.layerMetadataName{
	display:block;
	background-color: #f9eab7;
	border:solid 1px #e5e5e5;
	border-bottom: 2px solid #e5e5e5 !important;
	border-radius:5px 5px 0 0;
	font-size:0.9em;
	font-weight:bold;
	padding:7px 10px;
	text-decoration:none;
	max-width: 75%;
	margin: auto;
}

.interactiveLayerIcon { color:#0097f1; }

.metadatabutton { margin-left:3px; color:#27b04d; }


/* ALERTS */

	.deskPanelAlert { 
		position:absolute; 
		z-index:100;
	}
	
	.alertBotLeft {
		padding-left:25px; 
		padding-top:25px; 
		top:calc(100vh - 295px);
	}
	
	.alertTopCenter {
		top: 25px;
		left: 15px;
		width: calc(100% - 365px );
		min-width: 660px;
		text-align:center;
	}
	
	.alertLoadingArea { display:inline-block; margin-right:5px; }
	.alertLoadingArea .inner {
		background:#4286ae;
		boder:solid 1px black;
		font-size:0.9em;
		font-weight:bold;
		border-radius: 5px;
		border:solid 1px #316481;	
		padding:5px 12px;
	}		
	.alertLoadingArea .item { display:inline-block; }		
	.alertLoadingArea .title { padding:0 5px; color:#fff; }		
	.alertLoadingArea .arrow { color:#152b37; }		
	.alertLoadingArea .msg { color:#fff; }
	
	.alertErrorArea { display:inline-block; }
	.alertErrorArea .inner {
		background:#db5757;
		boder:solid 1px black;
		font-size:0.9em;
		font-weight:bold;
		border-radius: 5px;
		border:solid 1px #bd2828;
		padding:5px 8px 5px 12px;
		min-width:100px;
		font-weight:normal;
	}
	.alertErrorArea .item { display:inline-block; }	
	.alertErrorArea .icon { color:#fff; }	
	.alertErrorArea .msg { color:#fff; }	
	.alertErrorArea .close { margin:0px; margin-left:15px; font-size:1.3em; }
	
	.alertTipArea {	margin: auto; width: 75%; }	
	.alertTipArea .inner {
		background:#ffe0cc;
		boder:solid 1px black;
		font-size:0.9em;
		font-weight:bold;
		border-radius: 5px;
		border:solid 1px #e65c00;	
		padding:5px 8px 5px 12px;
		width:100%;
	}		
	.alertTipArea .icon { padding:5px; font-size:1.5em; color:#e65c00; }
	.alertTipArea .msg { margin-top:4px; padding:5px; max-width:85%; font-style: italic; }
	.alertTipArea .close a { color:#e65c00; }
	
	.layer_loading { padding-left:5px; }
	
	/* Warning popup */
	.ui-dialog-titlebar-close { display:none; }
	.ui-dialog-title { font-size:0.9em; }
	.ui-dialog-content { font-size:0.8em; }
	.ui-dialog-titlebar { background-color:#d8ebda !important; border:solid 1px #abd3af !important; }
	


/* LAYER LIST */

#layerList_root { padding: 3px 0px; }

/* .layerList_parent { padding:4px 5px; cursor: pointer; }

.ll_checkbox { display:inline-block; padding-right:5px; vertical-align:top; }
.ll_name { display:inline-block; width:200px; vertical-align:top; }
.layerList_child { padding-left:18px; } */

.layerList_parent { padding: 3px 0 3px 6px; cursor: pointer;}
.layerList_parent:hover { background:#d8ebda; }

.layerList_parent .ll_checkbox,
.layerList_parent .ll_parentCheckbox,
.layerList_parent .ll_arrow,
.layerList_parent .ll_name 
{ display:inline-block; border:solid 0px black; }

.layerList_parent .ll_arrow, 
.layerList_parent .ll_checkbox, 
.layerList_parent .ll_parentCheckbox 
{ width:16px; vertical-align:top; }

.layerList_parent .ll_arrow { text-align:center; }
.layerList_parent .ll_name { width:calc(100% - 70px); }
.layerList_parent .ll_name_ex {width:calc(100% - 20px); }
.layerList_child { margin-left:26px; }
.layerList_parent .ll_icon { float:right; padding:0 2px; }
.layerList_parent .ll_icon .fa-question-circle { font-size:1.1em; }
.layerList_parent .ll_clear { clear:both; }
.layerList_parent .ll_options { padding:4px 15px 4px 15px; }


/***********************
  CUSTON BTN VALUES
************************/

.btn {
    padding: 4px 12px;
    border: 0 none;
    font-weight: bold;
    letter-spacing: 1px;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
    outline: 0 none;
}

.btn-primary {
    background: #0099cc;
    color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
    background: #33a6cc;
}
.btn-primary:active, .btn-primary.active {
    background: #007299;
    box-shadow: none;
}

.btn-warning {
    background: #ffcc00;
    color: #000;
}
.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .open > .dropdown-toggle.btn-warning {
    background: #ffcc00;
    color: #000;
}


/***********************
  MODERN FLAT BUTTONS
************************/
.btn {
	border-radius: 6px !important;
	font-weight: 600 !important;
	letter-spacing: 0.2px !important;
	box-shadow: none !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	transition: all 0.15s ease-in-out !important;
	border: 1px solid transparent !important;
}

.btn-primary {
	background: #0284c7 !important;
	color: #ffffff !important;
	border-color: #0284c7 !important;
	box-shadow: 0 1px 2px rgba(2, 132, 199, 0.2) !important;
}

.btn-primary:hover, .btn-primary:focus {
	background: #0369a1 !important;
	border-color: #0369a1 !important;
	box-shadow: 0 2px 4px rgba(2, 132, 199, 0.3) !important;
}

.btn-secondary, .btn-default {
	background: #ffffff !important;
	color: #334155 !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.btn-secondary:hover, .btn-secondary:focus, .btn-default:hover, .btn-default:focus {
	background: #f8fafc !important;
	color: #0f172a !important;
	border-color: #94a3b8 !important;
}

.btn-primary:active, .btn-primary.active,
.btn-secondary:active, .btn-secondary.active,
.btn-warning:active, .btn-warning.active {
	box-shadow: none !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


.popup_content { min-width:600px; }

/* Login Form */
.input-group-addon { min-width:50px; }
.input-group { margin-bottom:4px; }
.loginWindow {
	margin-bottom:6px;
	border-radius: 6px;
	background:#ccecff;
	padding: 15px;
	padding-top: 10px;
	border: solid 1px #80d0ff;
}
#secureLogin { padding:10px; margin-bottom:3px; }
#secureLoginBtn { margin-top:5px; }
#secureLoginError { margin:5px 0px; background:#bd2828; color:#fff; padding:6px 10px; border-radius: 6px; }
.loginStandin { cursor:pointer; }

/* Floating Single-Line Tool Button Bar */
.mainTools {
	width: fit-content !important;
	max-width: 100% !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	padding: 4px 16px !important;
	border: 1px solid rgba(255, 255, 255, 0.8) !important;
	border-radius: 30px !important;
	box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(0, 0, 0, 0.05) !important;
	margin: 0 auto 10px auto !important;
	text-align: center !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

#mainToolsBtns {
	display: inline-flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 4px !important;
	white-space: nowrap !important;
}

.mainTools .toolMainBtn {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	margin: 0 1px !important;
	border-radius: 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	color: var(--portal-brand, var(--primary-brand, #0f4c81)) !important;
	cursor: pointer !important;
	transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

.mainTools .toolMainBtn i,
.mainTools .toolMainBtn .fas,
.mainTools .toolMainBtn .fa {
	font-size: 16px !important;
}

.mainTools .toolMainBtn:hover {
	background: rgba(37, 99, 235, 0.12) !important;
	color: var(--primary-accent, #2563eb) !important;
}

.mainTools .toolMainBtn.active {
	background: var(--portal-brand, var(--primary-brand, #0f4c81)) !important;
	color: #ffffff !important;
	box-shadow: 0 4px 12px rgba(15, 76, 129, 0.3) !important;
}

/* Map Overlay Zoom Buttons (Left Hand Side Bold White Icons Targetting ::before) */
.esri-ui-top-left .esri-zoom,
.esri-zoom,
.esri-ui-top-left .esri-component.esri-zoom {
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.3) !important;
	border-radius: 10px !important;
	overflow: hidden !important;
	border: 1.5px solid #ffffff !important;
}

.esri-zoom .esri-widget--button,
.esri-ui .esri-zoom .esri-widget--button,
.esri-widget--button.esri-zoom__button {
	background-color: var(--portal-brand, var(--primary-brand, #0f4c81)) !important;
	color: #ffffff !important;
	width: 40px !important;
	height: 40px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.esri-zoom .esri-widget--button *,
.esri-zoom .esri-widget--button *::before,
.esri-zoom .esri-widget--button ::before,
.esri-zoom .esri-widget--button span,
.esri-zoom .esri-widget--button [class*="esri-icon"],
.esri-zoom .esri-widget--button .esri-icon,
.esri-zoom .esri-icon-plus::before,
.esri-zoom .esri-icon-minus::before {
	color: #ffffff !important;
	fill: #ffffff !important;
	stroke: #ffffff !important;
	font-weight: 900 !important;
	-webkit-text-stroke: 1.5px #ffffff !important;
	font-size: 22px !important;
	line-height: 1 !important;
}

.esri-zoom .esri-widget--button:hover {
	background-color: var(--portal-brand-hover, var(--primary-brand-dark, #0369a1)) !important;
}

.esri-zoom .esri-widget--button:hover *,
.esri-zoom .esri-widget--button:hover *::before {
	color: #ffffff !important;
	fill: #ffffff !important;
	stroke: #ffffff !important;
}

.esri-zoom .esri-widget--button:focus,
.esri-zoom .esri-widget--button:focus-within,
.esri-zoom .esri-widget--button:focus-visible,
.esri-zoom .esri-widget--button:active,
.esri-zoom .esri-widget--button[aria-pressed="true"] {
	background-color: var(--portal-brand, var(--primary-brand, #0f4c81)) !important;
	outline: none !important;
	box-shadow: none !important;
}



.esri-zoom .esri-widget--button:first-child {
	border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
}





.mainTools .disabled {
	color: #94a3b8 !important;
	opacity: 0.5;
	pointer-events: none;
}

#mainToolsOptions {
	position: absolute !important;
	top: 52px !important;
	right: 15px !important;
	width: 320px !important;
	z-index: 1050 !important;
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.15), 0 8px 10px -6px rgba(15, 23, 42, 0.1) !important;
	padding: 0 !important;
	font-size: 13px !important;
	color: #0f172a !important;
}

#mainToolsOptions .inner_area {
	padding: 14px 16px !important;
}

.section-info-icon {
	color: #64748b !important;
	font-size: 13px !important;
	margin-left: 6px !important;
	cursor: pointer !important;
	transition: color 0.2s ease, transform 0.2s ease !important;
	vertical-align: middle !important;
}


.section-info-icon:hover {
	color: #2563eb !important;
	transform: scale(1.2) !important;
}


#mainToolsOptions input.form-control,
#mainToolsOptions select {
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	padding: 6px 10px !important;
	font-size: 12px !important;
	color: #0f172a !important;
	background-color: #f8fafc !important;
}

#mainToolsOptions input.form-control:focus,
#mainToolsOptions select:focus {
	border-color: #2563eb !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15) !important;
}

#mainToolsOptions .btn-secondary {
	background-color: #f1f5f9 !important;
	color: #334155 !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	padding: 6px 14px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

#mainToolsOptions .btn-secondary:hover {
	background-color: #e2e8f0 !important;
	color: #0f172a !important;
	border-color: #94a3b8 !important;
}


#identify_options .btn {
	padding: 4px 10px !important;
	font-size: 12px !important;
	border-radius: 6px !important;
	line-height: 1.2 !important;
}

#identify_options .btn i {
	font-size: 13px !important;
}


/* Modal Header Tabs */
#aboutMenu .areaHeader {
	background: linear-gradient(135deg, var(--portal-brand, #0f4c81) 0%, #1e293b 100%) !important;
	border-radius: 14px 14px 0 0 !important;
	padding: 12px 16px;
	color: #ffffff;
}

#aboutMenu .areaHeader .Tabs .menuItem {
	color: rgba(255, 255, 255, 0.85) !important;
	font-weight: 500;
	padding: 8px 16px;
	border-radius: 8px 8px 0 0;
	transition: all 0.2s ease;
	display: inline-block;
}

#aboutMenu .areaHeader .Tabs .menuItem:hover {
	color: #ffffff !important;
	background: rgba(255, 255, 255, 0.15);
}

#aboutMenu .areaHeader .Tabs .active,
#aboutMenu .areaHeader .Tabs .menuItem.active {
	color: var(--portal-brand, #0f4c81) !important;
	background: #ffffff !important;
	font-weight: 700;
	box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}

#aggregate_parameters { font-size: 0.9em; }

.dijitTooltipContainer { padding:0px 8px !important; margin:0px !important; width:auto !important; padding-bottom:2px !important; border:2px solid #fff !important; font-family: var(--font-sans); }
.dijitTooltipContents div { padding:0px !important; margin:0px !important; }
.dijitTooltipContents div p { display:block-inline !important; padding:0px !important; margin:0px !important; padding-top:2px !important; font-weight:bold; }

.dijitTooltipContainer { background: var(--primary-accent) !important; }
.dijitTooltipContents div p { color:#fff; }

.residencySearch_result{
	padding: 5px;
}

/* ==========================================================================
   CUSTOM DOM LEGEND MANAGER CARDS
   ========================================================================== */

#deskPanelLegend .deskPanelArea,
#legendDiv {
	height: auto !important;
	max-height: 220px !important;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	display: block !important;
	width: 100% !important;
	padding: 6px 10px !important;
	box-sizing: border-box !important;
}

.custom_legend_card {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	justify-content: center !important;
	float: left !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 10px 8px 0 !important;
	padding: 5px 12px !important;
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
	white-space: nowrap !important;
	box-sizing: border-box !important;
}

.custom_legend_title {
	font-weight: 700 !important;
	color: #0f4c81 !important;
	font-size: 12px !important;
	margin-right: 6px !important;
	white-space: nowrap !important;
}

.custom_legend_symbol {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
}


#legendDiv *,
#legendDiv .esri-legend__service,
#legendDiv .esri-legend__layer,
#legendDiv .esri-legend__layer-body,
#legendDiv .esri-legend__layer-table,
#legendDiv .esri-legend__layer-child-table,
#legendDiv .esri-legend__layer-cell,
#legendDiv tr,
#legendDiv td,
#legendDiv hr {
	border-bottom: none !important;
	border-top: none !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	box-sizing: border-box !important;
}

#legendDiv .esri-legend {
	display: block !important;
	width: 100% !important;
	background: transparent !important;
}

#legendDiv .esri-legend__service {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	float: left !important;
	width: auto !important;
	max-width: none !important;
	margin-right: 12px !important;
	margin-bottom: 8px !important;
	background: transparent !important;
	border-bottom: none !important;
}

#legendDiv .esri-legend__layer {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 4px 8px !important;
	width: auto !important;
	max-width: none !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 4px 10px !important;
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	white-space: nowrap !important;
}

#legendDiv .esri-legend__layer-body,
#legendDiv .esri-legend__layer-table,
#legendDiv .esri-legend__layer-child-table,
#legendDiv table.esri-legend__layer-table tbody {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 4px 8px !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border-bottom: none !important;
}

#legendDiv .esri-legend__layer-caption,
#legendDiv .esri-legend__layer-title,
#legendDiv .esri-legend__service-label {
	display: inline-block !important;
	font-weight: 700 !important;
	color: #0f4c81 !important;
	font-size: 12px !important;
	margin-right: 6px !important;
	white-space: nowrap !important;
	border-bottom: none !important;
}

#legendDiv .esri-legend__layer-table tr,
#legendDiv .esri-legend__layer-row {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 4px !important;
	margin-right: 6px !important;
	white-space: nowrap !important;
	border-bottom: none !important;
}

#legendDiv .esri-legend__layer-cell--symbol,
#legendDiv td.esri-legend__layer-cell--symbol {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 0 2px 0 0 !important;
	vertical-align: middle !important;
	border-bottom: none !important;
}

#legendDiv .esri-legend__layer-cell--label,
#legendDiv td.esri-legend__layer-cell--label {
	display: inline-flex !important;
	align-items: center !important;
	font-size: 11px !important;
	color: #1e293b !important;
	font-weight: 500 !important;
	white-space: nowrap !important;
	vertical-align: middle !important;
	border-bottom: none !important;
}

/* Ultra-Compact Results Panel & Cards */
.toolResults {
	margin-top: 6px !important;
	padding: 6px !important;
	background: #f8fafc !important;
	border-radius: 6px !important;
	border: 1px solid #cbd5e1 !important;
}

.toolResultsCount {
	font-size: 11px !important;
	font-weight: 600 !important;
	color: #475569 !important;
	text-align: center !important;
	margin-bottom: 6px !important;
}

.summaryResultsHeader {
	display: none !important;
}

.toolResultsContentItem {
	margin-bottom: 6px !important;
	background: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
	overflow: hidden !important;
}

.toolResultsContentItem:hover {
	border-color: #0284c7 !important;
}

.itemHeader {
	display: flex !important;
	align-items: center !important;
	padding: 6px 10px !important;
	background: #ffffff !important;
	color: #0f172a !important;
	cursor: pointer !important;
	user-select: none !important;
	border-bottom: 1px solid transparent !important;
}

.itemHeader:hover {
	background: #f1f5f9 !important;
}

.itemHeader.active {
	background: #f0f9ff !important;
	border-bottom-color: #e0f2fe !important;
}

.itemIcon,
.itemIcon i,
.itemIcon svg,
.itemIcon .fa-minus-square,
.itemIcon .fa-plus-square {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 16px !important;
	height: 16px !important;
	margin-right: 8px !important;
	color: #0f172a !important;
	font-size: 13px !important;
	flex-shrink: 0 !important;
}

.itemHeader.active .itemIcon,
.itemHeader.active .itemIcon i,
.itemHeader.active .itemIcon svg,
.itemHeader.active .itemIcon .fa-minus-square,
.itemHeader.active .itemIcon .fa-plus-square {
	color: #0f172a !important;
}


.itemIcon::before,
.itemIcon::after {
	content: none !important;
}


.itemTitleWrap {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	flex-grow: 1 !important;
	min-width: 0 !important;
}

.itemTitle {
	font-weight: 700 !important;
	font-size: 11.5px !important;
	color: #0f172a !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.itemSubtitle {
	font-weight: 500 !important;
	font-size: 10.5px !important;
	color: #64748b !important;
	line-height: 1.1 !important;
	margin-top: 1px !important;
	white-space: nowrap !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
}

.itemBody {
	padding: 2px 8px 6px 8px !important;
	background: #ffffff !important;
}

.toolResults_Row {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 3px 2px !important;
	border-bottom: 1px solid #f1f5f9 !important;
	font-size: 11px !important;
	line-height: 1.3 !important;
}

.toolResults_Row:last-child {
	border-bottom: none !important;
}

.toolResults_Row .attr_label {
	font-weight: 600 !important;
	color: #475569 !important;
	margin-right: 6px !important;
	white-space: nowrap !important;
	font-size: 11px !important;
}

.toolResults_Row .attr_value {
	font-weight: 500 !important;
	color: #0f172a !important;
	text-align: right !important;
	word-break: break-word !important;
	font-size: 11px !important;
}

#routing_btn_clear,
#identify_btn_clear,
#identify_btn_export,
#identify_btn_drawpoint,
#identify_btn_drawbox,
#buffer_btn_clear,
#buffer_btn_export,
#searvicearea_btn_facilities_add,
#searvicearea_btn_facilities_clear,
#searvicearea_btn_clear,
#searvicearea_btn_export,
#aggregate_btn_clear {
	padding: 3px 10px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	border-radius: 5px !important;
	color: #334155 !important;
	background-color: #f1f5f9 !important;
	border: 1px solid #cbd5e1 !important;
	transition: all 0.15s ease-in-out !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
}

#routing_btn_clear:hover,
#identify_btn_clear:hover,
#identify_btn_export:hover,
#identify_btn_drawpoint:hover,
#identify_btn_drawbox:hover,
#buffer_btn_clear:hover,
#buffer_btn_export:hover,
#searvicearea_btn_facilities_add:hover,
#searvicearea_btn_facilities_clear:hover,
#searvicearea_btn_clear:hover,
#searvicearea_btn_export:hover,
#aggregate_btn_clear:hover {
	color: #ffffff !important;
	background-color: #475569 !important;
	border-color: #475569 !important;
}

#searvicearea_btn_solve,
#aggregate_btn_calculate {
	padding: 3px 12px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	border-radius: 5px !important;
	transition: all 0.15s ease-in-out !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px !important;
}


#searvicearea_btn_facilities_add.btn-warning,
#searvicearea_btn_facilities_add.active {
	background-color: #0284c7 !important;
	color: #ffffff !important;
	border-color: #0284c7 !important;
}

#buffer_radius_ammount,
#searvicearea_measure_amount {
	width: 54px !important;
	height: 30px !important;
	padding: 2px 8px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: #0f172a !important;
	background-color: #ffffff !important;
	border: 1px solid #cbd5e1 !important;
	border-radius: 6px !important;
	text-align: center !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
	transition: all 0.15s ease-in-out !important;
	display: inline-block !important;
	vertical-align: middle !important;
}

#buffer_radius_ammount:focus,
#searvicearea_measure_amount:focus {
	border-color: #0284c7 !important;
	box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
	outline: none !important;
}