/*
	Zealty Virtual Office Website (CSS)
	
	Copyright 2026 Zealty Online Search Inc.
	January 22, 2026
*/
:root {
	--zealty-color: #F155D3;
	--promotional-color: blue;
	--button-bg-color-vital: #FF5252;
	--map-button-text-color-vital: #FF5252;
	--zealty-color-print: black;
	--zealty-background-color: white;
	--zealty-highlight-color: lightyellow;
	--zealty-highlight-color-vital: yellow;
	--zealty-highlight-color-gallery: red;
	--zealty-highlight-color-gallery-off: white;
	--zealty-opacity: 0.90;
	--zealty-watermark-opacity: 0.75;
	--zealty-transition: background-color 0.3s linear 0s;
	--zealty-transition-color: color 0.3s linear 0s;
	--zealty-row-odd: white;
	--zealty-row-even: gainsboro;
	--photo-overlay-color: teal;
	--popularity-bg-color: black;
	--button-spin: rotate(360deg);
	--ribbon-new-color: lime;
	--ribbon-new-price-color: lime;
	--ribbon-featured-color: yellow;
	--ribbon-sold-color: dodgerblue;
	--ribbon-expired-color: #652BCC; /* purplish */
	--multipopup-z-index: 20002;
	--multipopup-width: 245px;
	--autocomplete-bg-color-input: #F1F1F1;
	--autocomplete-bg-color-hover: #E9E9E9;
	--autocomplete-bg-color: #008000; /* green */
	--autocomplete-border-color: #D4D4D4;
	--autocomplete-z-index: 10000;
    --square-icon-side: 20px;
	
	accent-color: var(--zealty-color);
	caret-color: var(--zealty-color);
	caret-shape: block;
}

@media (pointer: coarse) {
	:root {
		overscroll-behavior: none;
	}
}

::selection {
	color: white;
	background-color: var(--zealty-color);
}

@view-transition {
	navigation: auto;
}

@media print {

	.noprint {
		display: none !important;
	}

	A:link {
		text-decoration: none;
		color: inherit;
	}

	A:visited {
		text-decoration: none;
		color: inherit;
	}

	.scroll {
		overflow: visible;
	}
	
	.photo-height {	
		max-height: 49vh;
	}
}

	.module-button-display {
		display: inline-block;
	}

@media screen {

	.nodisplay {
		display: none !important;
	}

	.scroll {
		overflow: auto;
	}
}

@media screen and (max-width: 132ch) {

	.module-button-display {
		display: none;
	}
}

	*, *::before, *::after {
		box-sizing: border-box;
	}

	html {
		height: 100%;
	}

	body {
		font-size: 12pt;
		font-family: Arial, sans-serif;
		color: black;
		background-color: var(--zealty-background-color);
		padding: 0px;
		border: none;
		margin: 0px;
		height: 100%;
	}

	h1 {
		color: red;
		font-size: 16pt;
		text-align: left;
		margin: 10px 0px 2px 0px;
	}

	select {
		font-size: 10pt;
		color: black;
		margin: 1px 0;
		border: 1px solid black;
		border-radius: 5px;
		user-select: none;
	}
	
	select:enabled {
		cursor: pointer;
	}

	button {
		font-size: 10pt;
		margin: 1px 0;
		border: 1px solid black;
		border-radius: 5px;
		transition: var(--zealty-transition);
		user-select: none;
	}

	button:enabled {
		cursor: pointer;
	}

	button:hover:enabled {
		color: red;
	}

	button[type='submit']:enabled {
		color: white;
		background-color: red;
		font-weight: bold;
	}
	
	button[type='submit']:hover:enabled {
		background-color: black;
	}

	button:disabled {
		cursor: not-allowed;
	}

	button:focus {
		outline: none;
	}

	input {
		color: black;
		border: 1px solid black;
	}

	input[type='text'],
	input[type='password'] {
		height: 2rem;
		margin: 1px 0;
		padding: 0 0.5em;
		font-size: 0.9rem;
	}

	input[type='radio']:enabled,
	input[type='checkbox']:enabled {
		cursor: pointer;
	}

	textarea {
		font-size: 12pt;
		padding: 0 5px;
		border: 1px solid black;
	}

	label {
		user-select: none;
		cursor: pointer;
	}

	table {
		border-collapse: collapse;
		margin: 0px;
	}


	.module-button {
		color: white;
		background-color: var(--zealty-color);
		font-family: Arial, sans-serif;
		font-size: 1.0rem;
		font-weight: normal;
		text-align: center;
		padding: 0.5em;
		margin: 1px 0px 1px 0.5rem;
		border-radius: 0.5rem;
		text-decoration: none;
		transition: var(--zealty-transition);
		white-space: nowrap;
		cursor: pointer;
	}

	.module-button:hover {
		background-color: black;
	}
	
	#search-button {
		font-weight: bold;
		color: white;
		background-color: red;
		border: 1px solid black;
		transition: var(--zealty-transition);
	}
	
	#search-button:hover {
		background-color: black;
	}
	
	.tall {
		height: 2em;
	}

	.picture-detail {	
		position: relative;
		text-align: left;
	}

	/* General map labels.
	*/
	.mapLabel {
		color: black;
		font-family: Arial, sans-serif;
		font-size: 11px;
		font-weight: normal;
		text-align: left;
		width: 150px;
		margin-top: -11px;
		user-select: none;
	}
	
	/* Walk Score formatting.
	*/
	.walkscore-scoretext {
		font-weight: bold;
		font-size: 28px;
		font-family: monospace;
	}
	
	.summaryBox {
		color: black;
		background-color: rgb(255 255 255 / var(--zealty-opacity));
		font-family: Arial, sans-serif;
		font-size: 9pt;
		text-align: center;
		width: 340px; /* Must match kMapSummaryBoxWidth in map-common.js */
	}
	
	.summaryBoxContent {
		border: 2px solid black;
		padding: 2px;
	}
	
	.mapControlOn, .mapControlOff {
		display: inline-block;
		position: relative;
		height: 23px;
		line-height: 23px;
		color: black;
		background-color: white;
		padding: 8px 20px;
		margin: 10px 0px 0px 2px;
		font-family: Roboto, Arial, sans-serif;
		font-size: 15px;
		text-align: center;
		border-radius: 2px;
		box-shadow: rgb(0 0 0 / 0.3) 0 1px 4px -1px;
		transition: var(--zealty-transition);
		box-sizing: content-box;
		user-select: none;
		cursor: pointer;
	}
	
	.mapControlOn:hover, .mapControlOff:hover {
		background-color: #E8E8E8;
		font-weight: 550;
	}
				
	.mapControlOn {
		font-weight: bold;
	}
	
	.mapControlOff {
		font-weight: 400;
	}
	
	.termsOfUse {
		color: black;
		background-color: silver;
		font-size: 10pt;
		text-align: left;
		padding: 5px;
		border: 2px solid black;
	}

	.note {
		color: black;
		background-color: var(--zealty-highlight-color);
		font-style: italic;
		padding: 10px;
		border: 2px solid black;
		margin-top: 10px;
		break-inside: avoid;
	}

	.note-vital {
		color: black;
		background-color: var(--zealty-highlight-color-vital);
		font-size: 1.1rem;
		font-style: italic;
		padding: 10px;
		border: 1px solid black;
		margin: 0 auto;
		max-width: 600px;
		break-inside: avoid;
	}
	
	.biz-name {
		font-size: 1.0rem;
		font-weight: normal;
		font-style: italic;
	}

	/* The dialog box.
	*/
	#dialogBox {
		color: black;
		background-color: var(--zealty-highlight-color);
		font-family: Arial, sans-serif;
		font-size: 11pt;
		text-align: left;
		border: 1px solid black;
		z-index: 200;
	}
	
	/* The search status box.
	*/
	#searchBox {
		color: black;
		background-color: var(--zealty-highlight-color-vital);
		height: 34px;
		text-align: center;
		font-family: Arial, sans-serif;
		font-size: 14px;
		font-weight: normal;
		border: 1px solid black;
		border-radius: 5px;
		padding: 0px 5px;
		opacity: var(--zealty-opacity);
		user-select: none;
		cursor: pointer;
	}

	#activity {
		color: red;
		background-color: white;
		height: 30px;
		line-height: 27px;
		font-family: Arial, sans-serif;
		font-size: 14px;
		font-weight: bold;
		border: 1px solid black;
		border-radius: 2px;
		border-collapse: collapse;
		padding: 0 2px 0 2px;
		margin: 10px 10px 0 10px;
		opacity: var(--zealty-opacity);
		box-shadow: rgb(0 0 0 / 0.3) 0 1px 4px -1px;
		user-select: none;
	}

	/* The title bar of the information panel (detail).
	*/
	#panelTitleBar {
		background-color: #F0F0F0;
		border: 1px solid gray;
		height: 34px;
		padding: 1px 0 2px 1px;
		position: relative;
	}
	
	/* The heading of the information panel (detail).
	*/
	#panelHeading {
		color: black;
		background-color: gainsboro;
		font-family: Arial, sans-serif;
		font-size: 1.3rem;
		font-weight: bold;
		text-align: center;
		padding-bottom: 2px;
		border-bottom: 2px solid black;
	}
	
	/* The body of the information panel (detail).
	*/
	#panelBody {
		color: black;
		font-size: 1.1rem;
		font-family: Arial, sans-serif;
		overflow: auto;
	}
	
	#panel-action { /* Below the picture in the sidebar */
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
	}

	.panel-action-item-start {
		justify-self: start;
		align-self: end;
		font-size: 0.9rem;
		text-align: center;
		white-space: nowrap;
		padding-left: 0.5rem;
	}
	.panel-action-item-center {
		justify-self: center;
		align-self: center;
		font-size: 0.9rem;
		text-align: center;
		white-space: nowrap;
	}
	.panel-action-item-end {
		justify-self: end;
		align-self: end;
		font-size: 0.9rem;
		text-align: center;
		white-space: nowrap;
		padding-right: 0.5rem;
	}

	#moi-grid { /* For the months of inventory bar */
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
	}
	
	#moi-marker {
		position: absolute;
		top: -5px;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-top: 10px solid black;
		cursor: pointer;
	}
	
	.moi-cell {
		position: relative;
		color: white;
		font-size: 0.9rem;
		font-variant: small-caps;
		text-align: center;
		border: 1px solid black;
	}
	
	.moi-value {
		position: absolute;
		font-size: 0.8rem;
		top: 2px;
	}

	#disclaimer {
		font-size: 10pt;
		background-color: white;
		border: 1px solid black;
		padding: 0px 10px 10px 10px;
		margin: 0 1px;
	}

	#title {
		color: black;
		font-family: Arial, sans-serif;
		font-size: 1rem;
		font-weight: bold;
		text-align: center;
		background-color: white;
		padding-bottom: 1px;
		border-bottom: 1px solid var(--zealty-color);
	}

	/* The copyright notice.
	*/
	#copyright {
		color: black;
		background-color: rgb(245 245 245 / 0.70);
		height: 14px;
		line-height: 14px;
		font-family: Roboto, Arial, sans-serif;
		font-size: 10px;
		font-weight: 400;
		text-align: right;
		padding-left: 6px;
		padding-right: 6px;
		white-space: nowrap;
		direction: ltr;
		user-select: none;
		cursor: default;
	}
	
	/* Overlay for picture counter, open house info, and general label.
	*/
	.overlay-counter,
	.overlayOH,
	.overlay-label {
		position: absolute;
		top: 0px;
		left: 0px;
		font-size: 0.9rem;
		color: white;
		background-color: var(--photo-overlay-color);
		border: 1px solid black;
		text-align: center;
		font-family: Arial, sans-serif;
		white-space: nowrap;
		padding: 1px 5px;
		z-index: 10;
	}
	
	.overlayOH {
		top: 20px;
		font-size: 12px;
	}
	
	.overlay-label {
		left: 50%;
		transform: translate(-50%, 0);
	}

	.popularity-badge,
	.popularity-badge-list {
		position: absolute;
		font-size: 10px;
		color: white;
		background-color: var(--popularity-bg-color);
		text-align: center;
		border-radius: 50%;
		width: 20px;
		height: 20px;
		line-height: 20px;
		top: 0px;
		right: 0px;
		bottom: unset;
		left: unset;
		pointer-events: none;
	}

	.popularity-badge-list {
		width: 13px;
		height: 13px;
		line-height: 13px;
		top: unset;
		right: unset;
		bottom: 0px;
		left: 0px;
	}

	.ribbon-wrapper {
		position: absolute;
		width: 100px;
		height: 100px;
		top: 0px;
		right: 0px;
		overflow: hidden;
	}

	.ribbon {
		position: relative;
		font: bold 11px sans-serif;
		text-align: center;
		text-transform: uppercase;
		transform: rotate(45deg);
		padding: 2px 0;
		left: 0px;
		top: 20px;
		width: 140px;
		border: 2px solid black;
	}
	
	.ribbon-new {
		color: black;
		background-color: var(--ribbon-new-color);
	}
	
	.ribbon-new-price {
		color: black;
		background-color: var(--ribbon-new-price-color);
	}
	
	.ribbon-sold {
		color: white;
		background-color: var(--ribbon-sold-color);
	}
	
	.ribbon-expired {
		color: white;
		background-color: var(--ribbon-expired-color);
	}
	
	.ribbon-featured {
		color: black;
		background-color: var(--ribbon-featured-color);
	}
	
	.infoBanner {
		position: absolute;
		color: white;
		bottom: 0px;
		left: 0px;
		padding: 0 0 1px 3px;
		width: 100%;
		background-image: linear-gradient(rgb(0 0 0 / 0.1), rgb(0 0 0 / 1.0));
	}


	.stripedTable {
		width: 100%;
		border: 1px solid black;
	}
	
	.stripedTable tr {
		break-inside: avoid;
	}

	.stripedTable tr:nth-child(odd) {
		background-color: var(--zealty-row-odd);
	}

	.stripedTable tr:nth-child(even) {
		background-color: var(--zealty-row-even);
	}

	.stripedTable tr:hover {
		background-color: var(--zealty-highlight-color);
	}
	
	.stripedTable .header-cell { /* For List Search table */
		padding: 4px;
		border: 1px solid black;
	}

	.stripedTable .table-cell { /* For List Search table */
		padding: 0 4px;
		border: 1px solid black;
	}


	ul.striped-list {
		padding: 0 0 0 1.0rem;
		margin: 0.25rem;
	}
	
	ul.striped-list > li:nth-of-type(odd) {
		background-color: var(--zealty-row-odd);
	}

	ul.striped-list > li:nth-of-type(even) {
		background-color: var(--zealty-row-even);
	}

	ul.striped-list > li:hover {
		background-color: var(--zealty-highlight-color);
	}		


	.labels {
		color: black;
		background-color: white;
		font-family: Arial, sans-serif;
		font-size: 12px;
		font-weight: bold;
		text-align: center;
		width: auto;
		height: 16px;
		line-height: 15px;
		padding: 0 2px;
		border: 1px solid black;
		white-space: nowrap;
		user-select: none;
	}


	/* The header and footer of the information panel.
	*/
	#listHeader,
	#listFooter {
		color: black;
		font-family: Arial, sans-serif;
		font-size: 1.0rem;
		background-color: #F0F0F0;
	}
	
	/* The body of the information panel (list).
	*/
	#listBody {
		color: black;
		font-family: Arial, sans-serif;
		font-size: 1.0rem;
		border-bottom: 2px solid white;
		position: relative;
		overflow: auto;
	}
	

	.gallery-list {
		width: 100%;
		text-align: left;
		border: 4px solid var(--zealty-highlight-color-gallery-off);
		cursor: pointer;
	}

	.gallery-list-advertising {
		width: 100%;
		text-align: center;
		border: 4px solid white;
	}


	.table-list {
		width: 100%;
	}
	
	.table-header {
		font-size: 0.8rem;
		color: black;
		background-color: silver !important;
		white-space: nowrap;
		vertical-align: bottom;
		position: sticky;
		top: 0px;
		z-index: 1000;
	}

	.table-row-top {
		font-size: 0.8rem;	
		color: black;
		font-weight: normal;
		text-align: center;
		border-top: 1px solid black;	
		cursor: pointer;
	}
	
	  .table-row-top:nth-child(4n + 2)
	, .table-row-top:nth-child(4n + 2) + .table-row-btm {
		background-color: var(--zealty-row-odd);
	}
	
	  .table-row-top:nth-child(4n + 4)
	, .table-row-top:nth-child(4n + 4) + .table-row-btm {
		background-color: var(--zealty-row-even);
	}
	
	  .table-row-top:hover
	, .table-row-top:hover + .table-row-btm
	, .table-row-top:hover
	, .table-row-top:hover + .table-row-btm {		
		background-color: var(--zealty-highlight-color);
	}
	
	  .table-row-btm:hover
	, .table-row-top:has(+ .table-row-btm:hover) {
		background-color: var(--zealty-highlight-color) !important;
	}

	.table-row-btm {
		font-size: 0.8rem;
		color: black;
		font-weight: normal;
		text-align: center;
		vertical-align: text-top;
		border-bottom: 1px solid black;	
		cursor: pointer;
	}
	
	.table-data-address {
		font-size: 0.75rem;	
		color: black;
		font-weight: normal;
		text-align: left;
		white-space: normal;
	}

	.table-data-price {
		color: green;
		font-weight: bold;
		text-align: right;
		white-space: nowrap;
	}

	.table-data-status {
		color: black;
		font-size: 0.70rem;
		font-weight: bold;
		text-align: right;
		white-space: nowrap;
		vertical-align: bottom;
	}


	.property-info-container {
		border: 1px solid black;
	}
	
	.property-info-table {
		font-size: 11pt;
		width: 100%;
	}
	
	.property-info-table tr:nth-child(odd) {
		background-color: white;
	}

	.property-info-table tr:nth-child(even) {
		background-color: lightgray;
	}

	.property-info-table td {
		padding: 1px 3px 2px 3px;	
	}
	
	.property-info-table tr:hover {
		background-color: var(--zealty-highlight-color) !important;
	}

	
	/* The branding graphics.
	*/
	#branding {
		color: black;
		background-color: white;
		font-family: Arial, sans-serif;
		font-size: 9pt;
		font-weight: bold;
		margin: 5px 10px 0 10px;
		opacity: var(--zealty-opacity);
		user-select: none;
	}

	#geolocationButton {
		position: relative;
		overflow: hidden;
		width: 42px;
		height: 42px;
		border: 1px solid black;
		margin: 5px 10px 0 10px;
		user-select: none;
		cursor: pointer;
	}

	#alrButton {
		position: relative;
		overflow: hidden;
		width: 42px;
		height: 42px;
		border: 1px solid black;
		border-radius: 5px;
		margin: 5px 10px 0 10px;
		user-select: none;
		cursor: pointer;
	}

	#schoolsButton {
		position: relative;
		overflow: hidden;
		width: 42px;
		height: 42px;
		border: 1px solid black;
		border-radius: 5px;
		margin: 5px 10px 0 10px;
		user-select: none;
		cursor: pointer;
	}

	#hospitalsButton {
		position: relative;
		overflow: hidden;
		width: 42px;
		height: 42px;
		border: 1px solid black;
		border-radius: 5px;
		margin: 5px 10px 0 10px;
		user-select: none;
		cursor: pointer;
	}

	#subAreaBox {
		display: none;
		color: black;
		background-color: white;
		font-family: Arial, sans-serif;
		font-size: 10pt;
		padding: 0 5px 1px 5px;
		border: 1px solid black;
		margin: 5px 10px 0 10px;
		user-select: none;
	}
	
	
	#type-menu-frame {
		position: relative;
		display: inline-block;
		width: var(--multipopup-width);
	}
	
	.type-menu-value-button {
		display: inline-block;
		font-size: 10pt;
		color: red;
		background-color: #F6F6F6;
		margin: 1px 0;
		border: 1px solid black;
		border-radius: 5px;
		text-align: left;
		padding: 1px 4px 0px 4px;
		width: 100%;
		height: calc(1.5em - 1px);
		user-select: none;
		cursor: pointer;
	}

	#type-menu-panel {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		background-color: #E8E8E8;
		text-align: left;
		font-size: 0.85rem;
		font-weight: normal;
		white-space: nowrap;
		padding: 2px 4px;
		border: 1px solid black;
		border-radius: 5px;
		z-index: var(--multipopup-z-index);
		overflow: auto;
		overscroll-behavior: contain;
	}
	
	.type-menu-header {
		font-size: 1.0rem;
		font-weight: bold;
		font-variant: small-caps;
		text-align: center;
		text-transform: lowercase;
		padding-bottom: 3px;
		border-bottom: 1px solid black;
		margin-bottom: 2px;
	}

	.type-menu-item-label {
		cursor: pointer;
	}

	.type-menu-item {
		color: black;
		padding: 3px 2px 3px 0;
	}

	.type-menu-action-section {
		text-align: center;
		margin-top: 2px;
		border-top: 1px solid black;
		padding-top: 3px;
	}

	.type-menu-action-button {
		color: red;
		font-weight: bold;
		height: 2em;
		border: 2px solid black;
		border-radius: 5px;
	}

	.type-menu-modal {
		display: block;
		position: fixed;
		inset: 0;
		z-index: calc(var(--multipopup-z-index) - 1);
	}

	
	.circled {
		display: inline-block;
		background: #000000;
		border-radius: 0.8em;
		color: #ffffff;
		font-weight: bold;
		line-height: 1.6em;
		margin-right: 5px;
		text-align: center;
		width: 1.6em;
	}


	.zealty {
		color: var(--zealty-color);
	}

	.zealty-transition {
		transition: var(--zealty-transition);
	}

	.zealty-transition-color {
		transition: var(--zealty-transition-color);
	}

	.login-full-width {
		color: black;
		background-color: #EFEFEF;
		display: inline-block;
		width: 100%;
		max-width: 300px;
		height: 38px;
		font-size: 10pt;
		font-weight: bold;
		text-align: center;
		border-radius: 5px;
		border: 2px solid var(--zealty-color);
		transition: var(--zealty-transition);
		padding: 1px 5px 0px 5px;
		margin: 1px 0px;
		cursor: pointer;
	}
	.login-full-width:hover {
		color: red;
	}

	.login {
		color: black;
		background-color: #EFEFEF;
		display: inline-block;
		width: 60%;
		max-width: 300px;
		height: 38px;
		font-size: 10pt;
		font-weight: bold;
		text-align: center;
		border-radius: 5px;
		border: 2px solid var(--zealty-color);
		transition: var(--zealty-transition);
		padding: 1px 5px 0px 5px;
		margin: 1px 0px;
		cursor: pointer;
	}

	.login:hover {
		color: red;
	}

	.promotional-button {
		color: white;
		background-color: var(--promotional-color);
		display: inline-block;
		width: 35%;
		max-width: 300px;
		height: 38px;
		font-size: 10pt;
		font-weight: bold;
		text-align: center;
		border-radius: 5px;
		border: 2px solid var(--zealty-color);
		transition: var(--zealty-transition);
		padding: 1px 5px 0px 5px;
		margin: 1px 0px;
		cursor: pointer;
	}

	.promotional-button:hover {
		background-color: black;
	}

	/* See Kevin Powell https://www.youtube.com/watch?v=svhnI9sKUDI
	*/
	.check-bullets > ::marker {
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		content: "\f00c"; /* Check mark */
	}
	
	.check-bullets > li {
		padding-left: 0.5em;
	}


	.property-tile {
		width: 100%;
		max-width: 470px;
		display: inline-block;
		vertical-align: top;
		border: 1px solid black;
		break-inside: avoid;
	}

	.section-tile {
		width: 100%;
		max-width: 710px;
		display: inline-block;
		vertical-align: top;
		break-inside: avoid;
		margin-top: 0.5rem;
		padding-right: 0.2rem;
	}

	.section-heading {
		color: white;
		background-color: black;
		font-size: x-large;
		font-weight: bold;
		text-align: center;
		padding: .5em 1em;
	}


	/* For making Zealty logo into a watermark */	
	.watermark {
		position: absolute;
		top: 1px;
		right: 0px;
		width: 85px;
		opacity: var(--zealty-watermark-opacity);
		z-index: 1001;
	}


	.smart-input {
		color: black;
		background-color: var(--autocomplete-bg-color-input);
		font-weight: bold;
		width: 275px;
		border: 1px solid black;
		margin-left: 1px;
	}

	.smart-input-icon {
		display: inline-block;
		color: var(--zealty-color);
		font-size: 2.0rem;
		vertical-align: middle;
	}
	
	.smart-input-icon::before {
		content: "\f689";
		font: var(--fa-font-solid);
	}

	#smart-button {
		font-size: 0.9rem;
		padding: 0.25em 0.5em;
	}

	#smart-button:hover {
		color: red;
	}

	:placeholder-shown {
		color: gray;
	}
	
	.filter-subtitle {
		font-size: 0.9rem;
		font-weight: bold;
		text-transform: lowercase;
		font-variant: small-caps;
		text-box: trim-both cap text;
		grid-column: 1 / -1; /* full width of grid */
	}


	.header-row {
		font-size: 13pt;
		color: black !important;
		background-color: silver !important;
		white-space: nowrap;
		border: 1px solid black;
		position: sticky;
		top: 0px;
		z-index: 1000;
	}

	.header-sort {
		cursor: pointer;
	}

	.header-sort:hover {
		background-color: var(--zealty-highlight-color);
	}
	
	.table-row {
		text-align: center;
		cursor: pointer;
	}


	#modalBackgroundMoveMap,
	#modalBackgroundLicense,
	#modalBackgroundFilters,
	#modal-box,
	#email-modal-box {
		display: none; /* Hidden by default */
		position: fixed; /* Stay in place */
		z-index: 10000; /* Sit on top */
		padding-top: 0px; /* Location of the box */
		left: 0px;
		top: 0px;
		width: 100%; /* Full width */
		height: 100%; /* Full height */
		background-color: rgb(32 33 36 / 0.7);
		backdrop-filter: blur(3px);
		overflow: auto; /* Enable scroll if needed */
	}

	#modalContainerMoveMap,
	#modalContainerLicense,
	#modalContainerFilters,
	#modal-frame,
	#email-modal-frame {
		background-color: rgb(248 248 255 / var(--zealty-opacity));
		margin: auto;
		padding: 5px;
		width: 90ch;
		max-width: 100%;
		max-height: 100%;
		overflow: auto;
		border: 2px solid black;
	}

	#modalCloseBoxMoveMap,
	#modalCloseBoxLicense,
	#modalCloseBoxFilters,
	#modal-close-box,
	#email-modal-close-box {
		color: #AAAAAA;
		float: right;
		top: 0px;
		font-size: 44px;
		font-weight: bold;
		position: sticky;
		z-index: 20000;
		cursor: pointer;
	}

	#modalCloseBoxMoveMap:hover,
	#modalCloseBoxMoveMap:focus,
	#modalCloseBoxLicense:hover,
	#modalCloseBoxLicense:focus,
	#modalCloseBoxFilters:hover,
	#modalCloseBoxFilters:focus,
	#modal-close-box:hover,
	#modal-close-box:focus,
	#email-modal-close-box:hover,
	#email-modal-close-box:focus {
		color: red;
		text-decoration: none;
	}

	#modalContentMoveMap,
	#modalContentLicense,
	#modalContentFilters,
	#modal-content,
	#email-modal-content {
		font-size: 1rem;
		font-family: Arial, sans-serif;
	}
	
	.navigation-arrow {
		position: absolute;
		top: 25%;
		color: var(--zealty-color);
		z-index: 100;
		cursor: pointer;
	}


	.table-container {
		position: relative;
		margin: 0 auto;
		max-width: 100%;
	}

	.re-table {
		width: 940px;
	}

	.search-table {
		width: 100%;
		min-width: 1425px;
	}
	
	.map-button {	
		position: absolute;
		color: var(--map-button-text-color-vital);
		font: bold 18px Roboto, Arial, sans-serif;
		margin: 0;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		white-space: nowrap;
	}

	.url-copy-button {
		position: relative;
		display: inline;
		font-size: 1.5rem;
		vertical-align: middle;
		cursor: pointer;
	}
	
	.url-copy-message {
		position: absolute;
		top: 0px;
		right: 0px;
		font-size: small;
		font-weight: bold;
		color: black;
		background-color: yellow;
		padding: 4px;
		border: 1px solid black;
		white-space: nowrap;
	}

/*
	The following are for the Monthly and Daily stats pages.
 */
	.chart-container {
		position: relative;
		margin: 0 auto;
		max-width: 100%;
		overflow: auto;
	}

	.chart {
		width: max(100%, 940px);
	}

	.chart-overlay-text {
		position: absolute;
		bottom: 0px;
		left: 4px;
		opacity: 0.50;
	}
		
	.linkMLS::before {		
		content: "\f08e"; /* External link icon, arrow-up-right-from-square */
		font: var(--fa-font-solid);
		display: inline-block;
	}

	.telephone::before {		
		content: "\f095"; /* Telephone icon, fa-phone */
		font: var(--fa-font-solid);
		display: inline-block;
	}

	.card-icon::before {		
		content: "\f2bb"; /* Address card icon, fa-address-card */
		font: var(--fa-font-regular);
		display: inline-block;
	}


	.legend-grid-container {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
		background-color: moccasin;
		max-width: 500px;
		padding: 0.5rem 0;
		font-size: 1.5rem;
	}
	
	.legend-grid-container > div {
		text-align: center;
	}
	
	.legend-label {
		font-size: 0.95rem;
		font-style: italic;
	}
			
	.sprite-container {
		position: relative;
		display: inline-block;
		overflow: hidden;
		width: 77px;
		height: 27px;
	}
	
	.sprite-position {
		position: absolute;
		width: 936px;
	}


	.estimate-container {
		position: relative;
		background-color: #DAF7A6;
		text-align: left;
		padding-bottom: 2px;
		border: 1px solid black;
	}
	
	.estimate-graphic {
		height: 2.8rem;
		float: left;
		margin: 2px 0 2px 2px;
	}

	.estimate-info-icon {
		position: absolute;
		top: -0.5rem;
		right: -1.0rem;
		font-size: 0.9rem;
		cursor: pointer;
	}

	.estimate-title {
		position: relative;
		font-size: 1.1rem;
		font-weight: bold;
		text-align: center;
	}
	
	.estimate-subtitle {
		font-size: smaller;
		font-style: italic;
		text-align: center;
	}
	
	.estimate-info {
		display: inline-block;
		padding-top: 0.6rem;
		margin-left: 1.0rem;
		vertical-align: top;
	}
	
	.estimate-price {
		position: absolute;
		font-size: 1.0rem;
		font-weight: bold;
		top: 1.1rem;
		right: 2px;
	}
	
	.estimate-disclaimer {
		font-size: 0.8rem;
		font-style: italic;
		padding: 0 2px;
		clear: left;
	}

	.estimate-text-outline {
		-webkit-text-stroke: 1px black;
	}
	
	.fine-print {
		font-size: smaller;
		font-weight: bold;
		font-style: italic;
		text-align: center;
	}
	
	.marker-container,
	.marker-container-trend {
		position: relative;
		display: inline-block;
		color: black;
		border: 1px solid black;
		border-radius: 50%;
	}
	
	.marker-container {
		width: 21px;
		height: 21px;
		background-color: white;
	}

	.marker-container-trend {
		width: 16px;
		height: 16px;
		background-color: lime;
	}

	.marker-symbol {
		position: absolute;
		font-size: 12px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	
	.star-symbol {
		display: inline-block;
		font-size: 12px;
		color: black;
		background-color: yellow;
		vertical-align: top;
		border-radius: 50%;
	}

	a[href*="/region-hubs/"]::before {
		font: var(--fa-font-regular);
		font-size: 1.0rem;
		content: "\f1ad"; /* building icon */
	}
	
	.agent-fine-print {
		display: inline-block;
		font-size: 0.70rem;
		margin-left: 2px;
	}
	
	.panel-section-title {
		text-align: center;
		font-weight: bold;
		font-size: 1.25rem;
	}

	
	.chart-tooltip-container {
		font-size: 0.9rem;
		text-align: left;
		white-space: nowrap;
		padding: 5px;
	}

	.chart-tooltip-title {
		font-size: 1.0rem;
		font-weight: bold;
		margin-bottom: 4px;
	}

	.chart-tooltip-subtitle {
		font-size: 0.8rem;
		font-style: italic;
	}


	.autocomplete {
		position: relative;
		display: inline-block;
		text-align: left;
	}

	.autocomplete-list {
		position: absolute;
		text-align: left;
		top: 100%;
		left: 0;
		right: 0;
		z-index: var(--autocomplete-z-index);
		max-height: 50vh;
		overflow-y: scroll;
		white-space: normal;
	}
	
	.autocomplete-section {
		border-left: 5px solid  black;
		border-right: 5px solid black;
		border-bottom: 5px solid black;
	}

	.autocomplete-section-title {
		color: white;
		background-color: black;
		font-weight: bold;
		text-align: center;
		padding-bottom: 1px;
	}

	.autocomplete-item {
		font-size: 1.0rem;
		font-weight: normal;
		text-transform: none;
		text-align: left;
		background-color: white; 
		padding: 5px;
		border-top: 1px solid var(--autocomplete-border-color); 
		border-bottom: 1px solid var(--autocomplete-border-color); 
		cursor: pointer;
	}
	
	.autocomplete-item:nth-child(2) {
		border-top: none; 
	}
	.autocomplete-item:last-child {
		border-bottom: none; 
	}

	.autocomplete-item:hover {
		background-color: var(--autocomplete-bg-color-hover);  
	}

	.autocomplete-item-active {
		color: white;
		background-color: var(--autocomplete-bg-color) !important; 
	}


	.save-button,
	.contact-button,
	.regular-button {
		display: inline-block;
		color: white;
		background-color: var(--button-bg-color-vital);
		font-family: Arial, sans-serif;
		font-size: 10pt;
		font-weight: bold;
		text-align: center;
		padding: 0.3rem 0.4rem;
		margin: 1px 0px;
		border-radius: 5px;
		border: 1px solid black;
		transition: var(--zealty-transition);
		white-space: nowrap;
		cursor: pointer;
	}
	
	.regular-button {
		color: black;
		background-color: rgb(239, 239, 239);
		font-weight: normal;
	}

	.save-button:hover,
	.contact-button:hover {
		background-color: black;
	}

	.regular-button:hover {
		color: red;
	}
	
	
	.commission-note-title,
	.open-house-note-title {
		font-weight: bold;
		text-transform: uppercase;
	}

	.commission-note,
	.open-house-note {
		font-style: italic;
	}
	
	.commission-container,
	.oh-comments-container {
		font-size: 0.70rem;
		margin-top: 0.25rem;
		padding-top: 0.25rem;
		white-space: normal;
		max-width: 300px;
		border-top: 1px solid black;
	}


/* The following rules are for future use. */

	#group-container-stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
		gap: 0.5rem;
		justify-items: center;
	}

	.tile-container-stats {
		display: grid;
		grid-template-columns: repeat(3, auto);
		border: 4px solid black;
		border-radius: 8px;
		font-family: Arial, sans-serif;
		white-space: nowrap;
		width: 340px;
		break-inside: avoid;
	}

	.tile-container-stats > div:nth-child(6n+5),
	.tile-container-stats > div:nth-child(6n+6),
	.tile-container-stats > div:nth-child(6n+7) {
		background-color: var(--zealty-row-odd);
	}
	
	.tile-container-stats > div:nth-child(6n+8),
	.tile-container-stats > div:nth-child(6n+9),
	.tile-container-stats > div:nth-child(6n+10) {
		background-color: var(--zealty-row-even);
	}

	.title-stats,
	.subtitle-stats,
	.title-date-stats,
	.note-stats {
		grid-column: span 3;
		text-align: center;
		color: white;
		background-color: black;
	}
	
	.title-stats {
		font-size: 1.25rem;
		text-transform: uppercase;	
		font-family: copperplate, sans-serif;	
	}
	
	.subtitle-stats {
		font-size: 1.0rem;
		font-style: italic;
		padding-bottom: 3px;
	}
	
	.title-date-stats {
		font-size: 1.25rem;
		background-color: cornflowerblue;
	}
	
	.arrow-stats {
		font-size: 32px;
		margin: 0 2px;
		cursor: pointer;
	}

	.arrow-stats:hover {
		color: red;
	}

	.note-stats {
		font-size: 0.75rem;
		font-style: italic;
		padding: 2px 0 3px 0;
	}
	
	.label-column-stats {
		padding: 0 0 0 0.25rem;
	}

	.value-column-stats {
		padding: 0 0.25rem;
	}
	
	.label-column-stats,
	.value-column-stats,
	.trend-up-stats,
	.trend-down-stats,
	.trend-no-change-stats {
		font-size: 0.75rem;
		text-align: right;
		border-bottom: 1px solid black;
	}
	
	.trend-up-stats {
		color: green;
	}
	
	.trend-down-stats {
		color: red;
	}
	
	.trend-no-change-stats {
		color: black;
	}
	
	.trend-up-stats,
	.trend-down-stats,
	.trend-no-change-stats {
		padding-right: 0.25rem;
	}

	.trend-up-stats::before {		
		content: "\f30c";
		font: var(--fa-font-solid);
	}

	.trend-down-stats::before {		
		content: "\f309";
		font: var(--fa-font-solid);
	}

	.trend-no-change-stats::before {		
		content: "\f068";
		font: var(--fa-font-solid);
	}

	.trend-up-stats::after,
	.trend-down-stats::after {		
		content: "%";
	}

	.marker-stats {
		position: relative;
		background-color: #4285F4;
		border-radius: 8px;
		color: white;
		font-size: 0.8rem;
		padding: 5px 10px;
		white-space: nowrap;
	}

	.marker-stats::after {
		position: absolute;
		content: "";
		left: 50%;
		top: 100%;
		transform: translate(-50%, 0);
		width: 0;
		height: 0;
		border-left: 8px solid transparent;
		border-right: 8px solid transparent;
		border-top: 8px solid #4285F4;
	}
	
	#footer-stats {
		font-weight: bold;
		text-align: center;
		padding: 5px 0;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		margin: 5px 0;
	}

	/* For AdvancedMarkerElement labels */
	.marker-label-ame {
		color: white;
		font-family: Arial, sans-serif;
		font-size: 11px;
		font-weight: bold;
	}
	
	.marker-label-sold-dot {
		color: black;
		font-family: Arial, sans-serif;
		font-size: 10px;
		font-weight: normal;
	}
	
	.polygon-corners {
		width: 9px;
		height: 9px;
		background-color: white;
		border: 1px solid black;
		border-radius: 50%;
		transform: translateY(4px);
	}

	.boxed-status {
		font-family: Arial, sans-serif;
		font-size: 0.8rem;
		padding: 0.05rem 0.5rem;
		border: 1px dotted;
		border-radius: 0.25rem;
	}


	/* For Keyword Command Builder.
	*/
	.keyword-list-title {
		font-weight: bold;
	}

	.keyword-list-body {
		border: 1px solid black;
		height: 5rem;
		width: 14rem;
		margin: 5px 0;
		overflow: auto;
	}
	
	.keyword-list-item,
	.keyword-list-item-fields {
		padding-bottom: 3px;
		cursor: pointer;
	}

	.keyword-apply-button {
		font-size: 0.9rem;
		font-weight: bold;
		color: #549C30; /* traffic light green */
	}


	/* For photo gallery browser
	*/
	::view-transition-old(gallery-photo) {
		animation-duration: 0.5s;
		animation-name: slide-out;
	}
	
	::view-transition-new(gallery-photo) {
		animation-duration: 0.5s;
		animation-name: slide-in;
	}
	
	@keyframes slide-in {
		from {
			translate: var(--gallery-value-in, "100vw") 0;
		}
	}

	@keyframes slide-out {
		to {
			translate: var(--gallery-value-out, "-100vw") 0;
		}
	}
	
	
	/* Custom tooltips
	*/
	.tooltip {
		position: relative;
		display: inline-block;
		border-bottom: 1.5px dashed black;
		box-sizing: border-box;
		cursor: pointer;
	}

	.tooltip:hover > .tooltiptext {
		visibility: visible;
	}
	
	.tooltip > .tooltiptext {
		--tt-width: 200px;
		--tt-shift: 0px;
		position: absolute;
		visibility: hidden;
		box-sizing: border-box;
		opacity: 75%;
		font-style: normal;
		font-weight: normal;
		color: white;
		background-color: black;
		text-align: center;
		padding: 5px;
		border-radius: 6px;
		z-index: 10000;
		bottom: 125%;
		left: 50%;
		width: var(--tt-width);
		margin-left: calc(-1 * (var(--tt-shift) + var(--tt-width) / 2));
	}

	.tooltip > .tooltiptext::after { /* The tooltip arrow */
		position: absolute;
		content: "";
		top: 100%;
		left: 50%;
		margin-left: -5px;
		border-width: 5px;
		border-style: solid;
		border-color: black transparent transparent transparent;
	}	
	

	.caption {
		position: absolute;
		bottom: 15px;
		background-color: rgb(255 255 255 / 0.75);
		z-index: 1;
		padding: 0 0.5rem;
		width: 100%;
	}
	
	/* For use by photo gallery */	
	#photo-scroller-container {
		position: absolute;
		scroll-behavior: auto;
		inset: 0;
		overflow-x: auto;
		overflow-y: hidden;
		z-index: 100;
	}
	
	#photo-scroller-container:focus-visible {
		outline: none;
	}


	.estimate-block-value {
		font-size: 1.0rem;
		grid-column: 1;
		background-color: hsl(0 0% 93.1%);
		padding: 1.1rem;
		margin-left: 1.0rem;
	}

	.estimate-block-rent {
		font-size: 1.0rem;
		grid-column: 2;
		background-color: hsl(0 0% 93.1%);
		padding: 1.1rem;
		margin-right: 1.0rem;
	}

	@media screen and (max-width: 750px) {
		.estimate-block-value {
			grid-column: 1/-1;
			margin: 0 0.50rem 0 0.50rem;
		}

		.estimate-block-rent {
			grid-column: 1/-1;
			margin: 0.50rem 0.50rem 0 0.50rem;
		}
	}


    .circle-highlight::before {
        content: "";
        display: block;
        position: absolute;
        width: calc(2 * var(--square-icon-side));
        height: calc(2 * var(--square-icon-side));
        top: -11px;
        left: -14px;
        border-radius: 50%;
        background-color: lightgray;
        z-index: -1;
    }