@media all {
/**************************************************************/
/* Common */
	HTML		{ box-sizing: border-box; }
	*, *:before,
	*:after		{ box-sizing: inherit; }
	IMG.x		{ display: none; }
	BODY		{ background-color: #10364C; margin: 0px; padding: 0px; }
	P, LI, LABEL{ font: 14pt 'PT Sans',sans-serif; }

/**************************************************************/
/* Home Page */
HTML, BODY	{ height: 100%; margin: 0px; }
HEADER,
.slider-container	{ width: 100%; height: 100%; position: relative; overflow: hidden; }
.slide				{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1;
					  transition: opacity 0.5s ease; background-size: cover; background-position: center; }

#slide1	{ background-image: url(/images/Home.jpg); }
SECTION	{ position: absolute; margin: 0px; top: 0px; left: 0px; width: 100%; }
#Logo	{ position: absolute; right: 20px; border: 0px solid red; width: fit-content;
			  transition: all 1.2s ease;
		}
H1		{ color: #F97A44; margin: 5px 0px 0px 0px; font: 30pt 'PT Serif',times; }
H1 B	{ color: white; font-weight: 400; }
#SearchFilter,
#Login	{ font: 16pt Monda, sans-serif; line-height: 24px; display: block; padding: 5px 15px 7px;
		border-radius: 5px; text-decoration: none; box-shadow: 3px 3px 2px #000000A0; margin: 5px auto;
		top: 0px; right: 20px; width: fit-content; position: relative; /* transition: opacity 1.2s ease; */
		background: linear-gradient(to bottom, #DDD, #888); color: #FFF; text-shadow: 1px 1px #000;	}
#SearchFilter	{ position: absolute; top: 10px; display: none; opacity: 0; transition: all 1.2s ease; }

FORM	{ display: block; position: relative; top: 120px; margin: 0px auto; background-color: #000000C0;
		  min-height: 120px; min-width: 360px; border: 1px solid #888; width: fit-content;
		  padding: 10px 20px; box-shadow: 8px 8px 8px #000000A0; transition: opacity 1s ease;
	}

FORM DIV.Col				{ display: inline-block; }
FORM DIV.Col:first-child	{ margin-right: 20px; }
FORM LABEL		{ display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 5px 0px; cursor: pointer; }
FORM LABEL B	{ border: 1px solid #F97A44; display: inline-block; padding: 0px; width: 18px;
				  font: 400 16px FontAwesome; color: #FFF; height: 18px;
				  background-color: #FFF; vertical-align: text-bottom; border-radius: 5px; }
FORM LABEL U	{ color: #FFF; text-decoration: none; display: inline-block; margin-left: 10px; text-shadow: 2px 2px 0px #000; }

FORM DIV.Row1	{ display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
FORM #Sel,
FORM #Clr		{ display: inline-flex; margin: 5px 10px; }
FORM #Sel B		{ background-color: green; }
FORM #Clr B		{ background-color: red; padding-left: 1.4px; }
FORM P			{ color: #FFF; margin: 5px 0px; max-width: 415px; }

FORM DIV.Row3	{ display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; }
FORM INPUT[type=text]	{ display: block; width: 100%; font: 15pt 'PT Sans',sans-serif;
		margin: 0px 10px 0px 0px; padding: 4px 2px; }

FORM INPUT[type=button]	{ display: block; margin: 10px 0px; box-shadow: 3px 3px 2px #000000A0;
		font: 16pt Monda, sans-serif; line-height: 24px; display: block; padding: 5px 15px 7px;border-radius: 5px;
		background: linear-gradient(to bottom, #DDD, #888); color: #FFF; text-shadow: 1px 1px #000; }

#popup-container	{ display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
					  background-color: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; opacity: 0;
					  transition: opacity 0.3s ease-in-out; z-index: 1000; }
popup-image			{ background-color: white; padding: 20px; border-radius: 8px; max-width: 90%; max-height: 90%;
					  overflow: auto; position: relative; }


}

/* From: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css */

:root {
  --building-color: #FF9800;
  --house-color: #0288D1;
  --shop-color: #7B1FA2;
  --warehouse-color: #558B2F;
}

/*
 * Optional: Makes the sample page fill the window.
 */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#map { height: 100%; width: 100%; opacity: 0; transition: opacity 1s ease; }

 /* Optional styling for the close button within the popup */
  #popup-image button {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 8px 12px;
    cursor: pointer;
    background-color: #f0f0f0;
    border: 1px solid #CCC;
    border-radius: 4px;
    font-size: 1em;
  }

  #popup-image button:hover {
    background-color: #e0e0e0;
  }

.price-tag {
	background-color: #10364C; /* #4285F4; */
	border-radius: 8px;
	color: #FFF;
	font: 14pt Monnda, sans-serif;
	text-shadow: 2px 2px 1px #000;
	padding: 10px 15px;
	position: relative;
}

.price-tag::after {
  content: "";
  position: absolute;
  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 #F97A44;	/* #4285F4; */
}


/*
 * Property styles in unhighlighted state.
 */
.property {
  align-items: center;
  background-color: #FFFFFF;
  border-radius: 50%;
  color: #263238;
  display: flex;
  font-size: 14px;
  gap: 15px;
  height: 30px;
  justify-content: center;
  padding: 4px;
  position: relative;
  position: relative;
  transition: all 0.3s ease-out;
  width: 30px;
}

.property::after {
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 9px solid #FFFFFF;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: 95%;
  transform: translate(-50%, 0);
  transition: all 0.3s ease-out;
  width: 0;
  z-index: 1;
}

.property .icon {
  align-items: center;
  display: flex;
  justify-content: center;
  color: #FFFFFF;
}

.property .icon svg {
  height: 20px;
  width: auto;
}

.property .details {
  display: none;
  flex-direction: column;
  flex: 1;
}

.property .address {
  color: #9E9E9E;
  font-size: 10px;
  margin-bottom: 10px;
  margin-top: 5px;
}

.property .features {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.property .features > div {
  align-items: center;
  background: #F5F5F5;
  border-radius: 5px;
  border: 1px solid #ccc;
  display: flex;
  font-size: 10px;
  gap: 5px;
  padding: 5px;
}

/*
 * Property styles in highlighted state.
 */
.property.highlight {
  background-color: #FFFFFF;
  border-radius: 8px;
  box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
  height: 80px;
  padding: 8px 15px;
  width: auto;
}

.property.highlight::after {
  border-top: 9px solid #FFFFFF;
}

.property.highlight .details {
  display: flex;
}

.property.highlight .icon svg {
  width: 50px;
  height: 50px;
}

.property .bed {
  color: #FFA000;
}

.property .bath {
  color: #03A9F4;
}

.property .size {
  color: #388E3C;
}

/*
 * House icon colors.
 */
.property.highlight:has(.fa-house) .icon {
  color: var(--house-color);
}

.property:not(.highlight):has(.fa-house) {
  background-color: var(--house-color);
}

.property:not(.highlight):has(.fa-house)::after {
  border-top: 9px solid var(--house-color);
}

/*
 * Building icon colors.
 */
.property.highlight:has(.fa-building) .icon {
  color: var(--building-color);
}

.property:not(.highlight):has(.fa-building) {
  background-color: var(--building-color);
}

.property:not(.highlight):has(.fa-building)::after {
  border-top: 9px solid var(--building-color);
}

/*
 * Warehouse icon colors.
 */
.property.highlight:has(.fa-warehouse) .icon {
  color: var(--warehouse-color);
}

.property:not(.highlight):has(.fa-warehouse) {
  background-color: var(--warehouse-color);
}

.property:not(.highlight):has(.fa-warehouse)::after {
  border-top: 9px solid var(--warehouse-color);
}

/*
 * Shop icon colors.
 */
.property.highlight:has(.fa-shop) .icon {
  color: var(--shop-color);
}

.property:not(.highlight):has(.fa-shop) {
  background-color: var(--shop-color);
}

.property:not(.highlight):has(.fa-shop)::after {
  border-top: 9px solid var(--shop-color);
}