/* Default CSS Stylesheet for a new Web Application project */

html {
	font-size: 100%;
	line-height: 1.3;
	font-family: Arial, Helvetica, sans-serif !important;
	background-color: #FFFFFF !important;
	-webkit-text-size-adjust: 100%;
	color: #003366;
}

body {
	word-spacing: normal;
}

#PanelBG input[type=text] {
	width: 150px !important
}

DIV.SubTab table {
	width: 178px !important;
	background-color: #F3FAF5;
	border: 1px solid #ccc;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	background-color: #F3FAF5;
	border-radius: 8px;
	margin-top: 5px;
	margin-bottom: 5px;

	padding: 5px;

}

#PanelMeasure table {
	background-color: #F3FAF5;
	border: 1px solid #ccc;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	background-color: #F3FAF5;
	border-radius: 8px;
	margin-top: 5px;
	margin-bottom: 5px;

	padding: 5px;
	font-size: 1.25em !important;

}

td.Measure {
	font-weight: 600;
	font-size: 10pt;
}

#Timebar {
	background: red;
	height: 10px;
}

#LEGEND table,
#LAYOUT table,
#LAYERS table,
#RESULTS table {
	width: 178px !important;
}

div.MapBase {
	background-color: white;
}

div.Overview {
	border: 1px solid #ffffff;
	background-color: #003366;
}

div.OverviewExt {
	border: 2px solid red;
}

div.OverviewExtSmall {
	border-top: 4px solid red;
}

div.Panel {
	border: 1px solid #ffffff;
	background-color: #20B2AA !important;
	color: white;
}

div.ZoomBox {
	border: 1px solid red;
	background-color: white;
	opacity: 0.5;
	filter: alpha(opacity=45);
}

div.Status {
	font-size: 7pt;
}

div.LayoutTitle {
	color: #20B2AA !important;
	font-weight: 600;
	font-size: 10pt;
}

div.LayoutStatus {
	border-top: thin solid #003366;
	border-bottom: medium solid #003366;
	font-size: 7pt;
}

div.SubTabFloat {
	border: 2px solid #003366;
	background-color: #FFFFFF !important;
	background: #FFFFFF !important;
}

DIV.SubTab {
	background-color: #FFFFFF !important;
}

td.MainTab {
	font-size: 10pt;
}

td.Disclaimer {
	font-size: 7pt;
}

/* Report styles */
td.ReportTitle {
	font-weight: 600;
	font-size: 12pt;
	color: #20B2AA;
}

td.ReportField {
	font-weight: 600;
	font-size: 10pt;
	color: #20B2AA;
}

td.ReportValue {
	font-weight: 600;
	font-size: 10pt;
}

td.ReportDetail {
	font-weight: 600;
	font-size: 7pt;
}

.btn {
  color: white;
  font-weight: 600;
  font-size: .875rem;      /* ~14px */
  line-height: 1.3;
  padding: 0.375rem 0.75rem; /* ~6px 12px */
  box-sizing: border-box;
}

.btn.toolbar {
	width: 178px !important;
	margin-bottom: 2px !important;
	font-size: .875rem !important;
}

.toolbar.ui-state-active {
	border: 1px solid #003366;
	background: #4682B4;
	font-weight: bold;
	color: #ffffff;
}

.btn.navbtn {
	width: 178px !important;
	margin-bottom: 2px !important;
	font-size: .875rem !important;

}

.SubTab.btn.navbtn {
	width: 178px !important;
	margin-bottom: 2px !important;
	font-size: .875rem !important;

}

.btn.btnsmall {
	width: 85px !important;
	margin: 2px;
}

/* ensure the overlay sits just below the dialog */
.ui-widget-overlay {
	background: rgba(0, 0, 0, 1) !important;

}

/* bring the dialog itself to the front */
.ui-dialog {
	z-index: 10000 !important;
}

/* shrink the title bar padding/height */
.ui-dialog .ui-dialog-titlebar {
	padding: 0.2em 0.5em;
	/* less vertical padding */
	min-height: auto;
	/* let content dictate height */
	box-sizing: border-box;
}

/* tighten up the title text */
.ui-dialog .ui-dialog-titlebar .ui-dialog-title {
	margin: 0;
	padding: 0;
	font-size: 14px;
	/* a bit smaller if you like */
	line-height: 1.2em;
	/* control the height */
}

/* make all validation labels inline, not block */
label.error {
	display: inline;
	/* sit beside the input */
	margin-left: 8px;
	/* space from the field */
	vertical-align: middle;
	/* line up with the field text */
	color: #c00;
	/* your red */

	font-weight: normal;
	/* optional */

}

.ui-dialog-buttonpane {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.ui-tabs-active {
	background: #FFFEFC !important;
	background-color: #FFFEFC !important;
}

.ui-tabs .ui-tabs-nav {
	display: flex;
}

.ui-tabs .ui-tabs-nav li {
	flex: 1;
	display: flex;
	align-items: center;
	/* vertical centering */
	justify-content: center;
	/* horizontal centering */
}

.ui-tabs .ui-tabs-nav li a {
	display: block;
	width: 100%;
	text-align: center;
	font-size: .875rem;
}

/* Make modal background fully transparent */
.ui-widget-overlay {
	background: transparent !important;
}

input[type="text"]:focus,
input[type="date"]:focus,
select:focus,
textarea:focus {
	border: 2px solid blue;
	outline: none;
}

/**
  * Dots
  *
  * @author jh3y - jheytompkins.com
*/
:root {
	--primary: #20B2AA;
	/* Set your desired color */
}

.dots {
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%, -50%);

}

.dots:before {
	display: block;
	height: 5px;
	width: 5px;
	content: '';
	-webkit-animation: spin 1s infinite;
	animation: spin 1s infinite;
	border-radius: 100%;
	-webkit-box-shadow: 20px 0 0 5px var(--primary), -20px 0 0 5px var(--primary);
	box-shadow: 20px 0 0 5px var(--primary), -20px 0 0 5px var(--primary);
}

@-webkit-keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes spin {
	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

/* --- appended exactly as provided --- */

html,
body {
	margin: 0;
	height: 100%;
	width: 100%;
	overflow: auto;
	/* ← no page scrollbars anywhere */
}

body {
	display: grid;
	grid-template-columns: 1fr minmax(0, 1440px) 1fr;
	grid-template-rows: 80px 1fr;
	grid-template-areas:
		"sideleft header sideright"
		"sideleft content sideright";
	height: 100%;
}

#sideleft {
	grid-area: sideleft;
	overflow: hidden;
}

#sideright {
	grid-area: sideright;
	overflow: hidden;
}

#header {
	grid-area: header;
	display: flex;
	width: 100%;
	box-sizing: border-box;
}

#content {
	grid-area: content;
	position: relative;
	width: 100%;
	height: calc(100vh - 200px);
	box-sizing: border-box;
	min-width: 900px !important;
	visibility: hidden;

}

#MapWrapper {
	width: 100%;
	height: 100%;
	max-height: 950px;
	position: relative;
	box-sizing: border-box;
	margin: 0 auto;
}

.flex-container {
	display: flex;
	width: 100%;
	height: calc(100vh - 80px);
}

.left {
	width: 200px;
	height: calc(100vh - 80px);
	padding: 8px;
	box-sizing: border-box;
	flex-shrink: 0;
}

.center {
	display: block;
	width: 100%;
	height: 100%;
}

.right {
	width: 203px;
	height: 100%;
	padding: 8px;
	box-sizing: border-box;
	flex-shrink: 0;
	overflow-y: auto !important;
	/* only show scrollbar when needed */
	overflow-x: hidden !important;
	scrollbar-gutter: stable !important;
}

/* 1) PanelBG becomes a vertical flex container */
#PanelBG {
	display: flex;
	flex-direction: column;
	height: 100%;
	/* fills its parent */
	box-sizing: border-box;
	overflow: hidden;
	/* panel itself never scrolls */
}

/* 2) MainTab buttons stay at their natural size */
#PanelBG .MainTab {
	flex: 0 0 auto;
	margin-bottom: 4px;
}

/* 3) Make #RESULTS the one scrolling area */
#RESULTS {
	display: block !important;
	/* override any inline/table-row */
	visibility: visible !important;

	flex: 1 1 auto !important;
	/* fill remaining vertical space */
	min-height: 0 !important;
	/* allow it to shrink to fit */
	overflow-y: auto !important;
	/* only show scrollbar when needed */
	overflow-x: hidden !important;

	scrollbar-gutter: auto !important;
	/* only reserve gutter when scrolling */
}

/* 4) Remove default table padding and borders */
.ResultValue {
	padding: 0;
	border: none;
}

/* 5) Style each result as a full-width “card” */
.result-card {

	width: 178px !important;
	background-color: #F3FAF5;
	border: 1px solid #ccc;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
	background-color: #F3FAF5;
	border-radius: 8px;
	margin-top: 5px;
	margin-bottom: 5px;

	padding: 5px;

	box-sizing: border-box;

	display: flex;
	flex-direction: column;
	gap: 4px;

}

/* Parcel ID—bold and prominent */
.result-card .parcel-id {
	font-size: 0.875rem;
	/* ~14px */
	white-space: nowrap;

}

/* Owner name—nowrap with ellipsis */
.result-card .owner-name {
	font-size: 0.875rem;
	/* ~14px */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Address & building/unit—smaller, secondary text */
.result-card .owner-addr,
.result-card .bldg-unit {
	font-size: 0.75rem;
	/* ~12px */
	color: #444;
}

/* Action buttons row */
.result-card .actions {
	margin-top: 6px;
}

.result-card .actions .btnResults {
	font-size: 0.75rem !important;
	padding: 2px 5px 2px 5px !important;
	margin: 2px;
}

/* 6) Optional: force a consistent, thin scrollbar */

/* Firefox */
#RESULTS {
	scrollbar-width: thin;
	scrollbar-color: #888 #f0f0f0;
}

/* WebKit/Blink */
#RESULTS::-webkit-scrollbar {
	width: 12px;
}

#RESULTS::-webkit-scrollbar-track {
	background: #f0f0f0;
}

#RESULTS::-webkit-scrollbar-thumb {
	background-color: #888;
	border-radius: 6px;
	border: 3px solid #f0f0f0;
}

#RESULTS::-webkit-scrollbar-thumb:hover {
	background-color: #555;
}

/* Tabs container */
#search-tabs {
	margin: 0 auto;
}

.ui-tabs-panel {
	height: 225px;
}

#search-tabs .ui-tabs-panel {
	font-size: 75% !important;
	line-height: 1.25;
	/* keeps it readable at smaller size */
}

/* Ensure form controls and jQuery UI buttons inherit the reduced size */
#search-tabs .ui-tabs-panel input,
#search-tabs .ui-tabs-panel select,
#search-tabs .ui-tabs-panel textarea,
#search-tabs .ui-tabs-panel button,
#search-tabs .ui-tabs-panel .ui-button {
	font-size: inherit;
}

.ui-dialog .ui-dialog-buttonpane {
	border-top: none !important;
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* OPTIONAL: Hide side panels completely at narrow widths */
@media screen and (max-width: 768px) {
	body {
		grid-template-columns: 0 1fr 0;
	}

	#sideleft,
	#sideright {
		display: none;
	}
}

@supports (-webkit-touch-callout: none) {
    #MapWrapper {
        aspect-ratio: 5 / 4;
        height: auto !important;
        max-height: none !important;
    }
}