:root {
  --building-color: #FF9800;
  --car-color: #00a0f5;
  --house-color: #00a0f5;
  --shop-color: #7B1FA2;
  --user-color: #00a0f5;
  --warehouse-color: #558B2F;
  
  --staff1-color: #00a6ff;
  --staff2-color: #8c00ff;
  --staff3-color: #ff7200;
  --staff4-color: #482f76;
  --staff5-color: #b8e598;
  --staff6-color: #49c289;
  --staff7-color: #d0b250;
  --staff8-color: #765f88;
  --staff9-color: #a0a047;
  --staff10-color: #8b5a33;
}


/*
 * Property styles in unhighlighted state.
 */
.property {
  align-items: center;
  background-color: #ffd400;
  border-radius: 50%;
  color: #111;
  display: flex;
  font-size: 11px;
  font-weight: 300;
  gap: 15px;
  height: 25px;
  justify-content: center;
  padding: 4px;
  position: relative;
  transition: all 0.3s ease-out;
  width: 25px;
  outline:none;
}
.property-lg {
  border-radius: 50%;
  display: flex;
  font-size: 12px;
  font-weight: 300;
  gap: 15px;
  height: 32px;
  padding: 4px;
  width: 32px;
  outline:none;
}

.property::after {
  display: block;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #ffd400;
  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 {
  font-size: 11px;
  align-items: center;
  display: flex;
  justify-content: center;
  color: #ffffff;
  outline:none;
}

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

.property .details {
  display: none;
  flex-direction: column;
  flex: 1;
  outline:none;
}
.property .price,
.property .title {
  font-size: 16px;
}

.property .title {
  margin-top: 8px;
}

.property .close-highlight {
  margin-top: 8px;
  margin-bottom: -24px;
}

.property .address {
  color: #000;
  font-size: 13px;
  margin-bottom: 2px;
  margin-top: 5px;
}

.property .phone {
  color: #008dea;
  font-size: 14px;
  margin-bottom: 10px;
  margin-top: 2px;
}

.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: auto;
  padding: 8px 15px;
  width: auto;
}

.property.highlight::after {
  border-top: 9px solid #FFFFFF;
  left: 50%;
  position: absolute;
  top: 100%;
  transform: translate(-50%, 0);
}

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

.property.highlight .icon svg {
  width: 50px;
  height: 50px;
}
.property.highlight .icon {
  display:none;
}
.property .bed {
  color: #FFA000;
}

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

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



.property.highlight a {
  color: #006d00;
}






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

.property:not(.highlight):has(.fa-user) {
  background-color: var(--user-color);
  border: 2.5px solid var(--user-color);
}

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



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

.property:not(.highlight):has(.fa-car) {
  background-color: var(--car-color);
  border: 2.5px solid var(--car-color);
}

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




/*
 * 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: 8px 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: 8px 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: 8px 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);
}





/*
 * Thumbs Up icon colors.
 */
.property.highlight:has(.fa-thumbs-up) .icon {
  color: green;
}

.property:not(.highlight):has(.fa-thumbs-up) {
  background-color: green;
  border: 2.5px solid #fff;
}

.property:not(.highlight):has(.fa-thumbs-up)::after {
  border-top: 8px solid green;
}



/*
 * Warning icon colors.
 */
.property.highlight:has(.fa-triangle-exclamation) .icon {
  color: red;
}

.property:not(.highlight):has(.fa-triangle-exclamation) {
  background-color: red;
  border: 2.5px solid #fff;
}

.property:not(.highlight):has(.fa-triangle-exclamation)::after {
  border-top: 8px solid red;
}




/*
 * Green icon colors.
 */
.property.highlight:has(.icon-green) .icon {
  color: green;
}

.property:not(.highlight):has(.icon-green) {
  background-color: green;
  border: 2.5px solid #fff;
}
.property:not(.highlight):has(.icon-green) .icon {
  color: #fff;
}

.property:not(.highlight):has(.icon-green)::after {
  border-top: 9px solid green;
}
.icon-green,
.text-green {
    color: green;
}
.div-green {
    background-color: green;
    color: #fff;
}


/*
 * Red icon colors.
 */
.property.highlight:has(.icon-red) .icon {
  color: red;
}

.property:not(.highlight):has(.icon-red) {
  background-color: red;
  border: 2.6px solid #fff;
}
.property:not(.highlight):has(.icon-red) .icon {
  color: #fff;
}

.property:not(.highlight):has(.icon-red)::after {
  border-top: 9px solid red;
}
.icon-red,
.text-red {
    color: red;
}
.div-red {
    background-color: red;
    color: #fff;
}



/*
 * Yellow icon colors.
 */
.property.highlight:has(.icon-yellow) .icon {
  color: gold;
}

.property:not(.highlight):has(.icon-yellow) {
  background-color: gold;
  border: 2.5px solid #fff;
}
.property:not(.highlight):has(.icon-yellow) .icon {
  color: #fff;
}

.property:not(.highlight):has(.icon-yellow)::after {
  border-top: 9px solid gold;
}
.icon-yellow {
    color: gold;
}
.text-yellow {
    color: #ffc400;
}
.div-yellow {
    background-color: #ffc400;
    color: #fff;
}



/*
 * Addon icon colors.
 */
.property.highlight:has(.icon-addon) .icon {
  color: var(--car-color);
}

.property:not(.highlight):has(.icon-addon) {
  background-color: var(--car-color);
  border: 2.5px solid #fff;
}
.property:not(.highlight):has(.icon-addon) .icon {
  color: #fff;
}

.property:not(.highlight):has(.icon-addon)::after {
  border-top: 9px solid var(--car-color);
}
.icon-addon,
.text-addon {
    color: var(--car-color);
}
.div-addon {
    background-color: var(--car-color);
    color: #fff;
}



/*
 * Dark Blue icon colors.
 */
.property.highlight:has(.icon-darkblue) .icon {
  color: darkblue;
}

.property:not(.highlight):has(.icon-darkblue) {
  background-color: darkblue;
  border: 2.6px solid #fff;
}
.property:not(.highlight):has(.icon-darkblue) .icon {
  color: #fff;
}

.property:not(.highlight):has(.icon-darkblue)::after {
  border-top: 9px solid darkblue;
}
.icon-darkblue,
.text-darkblue {
    color: darkblue;
}
.div-darkblue {
    background-color: darkblue;
    color: #fff;
}




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

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

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

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

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

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

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

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

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

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





.text-blue {
  color: #42a2ff;
}

.text-purple {
  color: #c700e1;
}

.text-orange {
  color: #ff8400;
}