:root {
  --building-flag-color: #FF8000;
  --water-color: #99CCFF;
  --bookmark-color: #669900;
  --flag-color: #FF3300;
  --road-color: #999999;
  --thumbtack-color: #FF661A;
  --mountain-color: #993300;
  --water-color: #0059B3;
  --tree-color: #009933;
  --location-pin-color: #FF9800;
}

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

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
  width: 100%;
  position: absolute;
}

/*
 * Input values
 */

#input-card {
  /*background-color: #fff;*/
  background-color: transparent;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  margin: 10px;
  padding: 5px;
  font-family: Roboto, sans-serif;
  /*font-size: large;
  font-weight: bold;*/
}

 
/*
 * city styles in unhighlighted state.
 */
.city {
  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;
}

.city::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;
}

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

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

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

.city .name {
  color: #9E9E9E;
  font-size: 16px;
  margin-bottom: 5px;
  margin-top: 5px;
  font-weight: bold; 
}

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

.city .desc {
  color: #9E9E9E;
  font-size: 12px;
  margin-bottom: 0px;
  margin-top: 0px;
}

.city .admin1 {
  color: #9E9E9E;
  font-size: 14px;
  margin-bottom: 5px;
  margin-top: 5px;
  font-weight: bold; 
}

.city .admin2 {
  color: #9E9E9E;
  font-size: 14px;
  margin-bottom: 0px;
  margin-top: 5px;
}
.city .features {
  align-items: flex-end;
  display: flex;
  flex-direction: row;
  gap: 10px;
}

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

/*
 * city styles in highlighted state.
 */
.city.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;
}

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

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

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

.city .bed {
  color: #FFA000;
}

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

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


/* A: building-flag
 * A icon colors.
 */
.city.highlight:has(.fa-building-flag) .icon {
  color: var(--building-flag-color);
}

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

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

/* H: water  U: water
 * H icon colors.
 */
.city.highlight:has(.fa-water) .icon {
  color: var(--water-color);
}

.city:not(.highlight):has(.fa-water) {
  background-color: var(--water-color);
}

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

/* L: bookmark
 * L icon colors.
 */
.city.highlight:has(.fa-bookmark) .icon {
  color: var(--bookmark-color);
}

.city:not(.highlight):has(.fa-bookmark) {
  background-color: var(--bookmark-color);
}

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

/* P: flag
 * flag icon colors.
 */
.city.highlight:has(.fa-flag) .icon {
  color: var(--flag-color);
}

.city:not(.highlight):has(.fa-flag) {
  background-color: var(--flag-color);
}

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

/*  R: road
 * road icon colors.
 */
.city.highlight:has(.fa-road) .icon {
  color: var(--road-color);
}

.city:not(.highlight):has(.fa-road) {
  background-color: var(--road-color);
}

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

/* S: thumbtack
 * thumbtack icon colors.
 */
.city.highlight:has(.fa-thumbtack) .icon {
  color: var(--thumbtack-color);
}

.city:not(.highlight):has(.fa-thumbtack) {
  background-color: var(--thumbtack-color);
}

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

/* T: mountain
 * mountain icon colors.
 */
.city.highlight:has(.fa-mountain) .icon {
  color: var(--mountain-color);
}

.city:not(.highlight):has(.fa-mountain) {
  background-color: var(--mountain-color);
}

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

/* V: tree
 * tree icon colors.
 */
.city.highlight:has(.fa-tree) .icon {
  color: var(--tree-color);
}

.city:not(.highlight):has(.fa-tree) {
  background-color: var(--tree-color);
}

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

/* default
 * location-pin icon colors.
 */
.city.highlight:has(.fa-location-pin) .icon {
  color: var(--location-pin-color);
}

.city:not(.highlight):has(.fa-location-pin) {
  background-color: var(--location-pin-color);
}

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