:root {
 --route1-color: #db0f11;
 --route2-color: #db2897;
 --route3-color: #ff8787;
 --route4-color: #c64444;
 --route5-color: #9a23c6;
 --route6-color: #581cba;
 --route7-color: #347bc3;
 --route8-color: #ff9c00;
 --route9-color: #ffc000;
 --route10-color: #17aa55;
 --route11-color: #c48ee0;
 --route12-color: #52b5e8;
 --route13-color: #68cfa2;
}
/*
 * 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: 40px;
	justify-content: center;
	padding: 4px;
	position: relative;
	transition: all 0.3s ease-out;
	width: 40px;
	transform: translateY(-9px);
}
.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 {
	display: flex;
	align-items: center;
	padding: 8px;
	border-radius: 8px;
	align-items: center;
	display: flex;
	justify-content: center;
	color: #FFFFFF;
}
.property .icon img {
	width: auto;
	height: 30px;
}
.property .details {
	display: none;
	flex-direction: column;
	flex: 1;
}
.property .routeArea {
	display: none;
	color: #9E9E9E;
	font-size: 12px;
	margin-top: 4px;
}
.property .route {
	margin-bottom: 4px;
}
.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: 12px;
	gap: 5px;
	padding: 5px;
}
/*
 * highlight
 */
.property.highlight {
	display: flex;
	align-items: stretch;
	background-color: #FFFFFF;
	border-radius: 8px;
	box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2);
	height: auto;
	padding: 8px 8px;
	width: auto;
}
.property.highlight::after {
	border-top: 9px solid #FFFFFF;
	top: 98%;
}
.property.highlight .details {
	display: flex;
}
.property.highlight .icon svg {
	width: 50px;
	height: 50px;
}
 @media only screen and (max-width :480px) {
.property .features {
	flex-direction: column;
	align-items: flex-start;
	gap: 5px;
}
.property.highlight {
	height: auto;
}
}

/*
 *route1
 */
.property.highlight:has(.route1) .icon {
 color: var(--route1-color);
 background: var(--route1-color);
}
 .property:not(.highlight):has(.route1) {
 background-color: var(--route1-color);
}
 .property:not(.highlight):has(.route1)::after {
 border-top: 9px solid var(--route1-color);
}

/*
 * route2
 */
.property.highlight:has(.route2) .icon {
 color: var(--route2-color);
 background: var(--route2-color);
}
 .property:not(.highlight):has(.route2) {
 background-color: var(--route2-color);
}
 .property:not(.highlight):has(.route2)::after {
 border-top: 9px solid var(--route2-color);
}

/*
 * route3.
 */
.property.highlight:has(.route3) .icon {
 color: var(--route3-color);
 background: var(--route3-color);
}
 .property:not(.highlight):has(.route3) {
 background-color: var(--route3-color);
}
 .property:not(.highlight):has(.route3)::after {
 border-top: 9px solid var(--route3-color);
}

/*
 * route4.
 */
.property.highlight:has(.route4) .icon {
 color: var(--route4-color);
 background: var(--route4-color);
}
 .property:not(.highlight):has(.route4) {
 background-color: var(--route4-color);
}
 .property:not(.highlight):has(.route4)::after {
 border-top: 9px solid var(--route4-color);
}

/*
 * route5.
 */
.property.highlight:has(.route5) .icon {
 color: var(--route5-color);
 background: var(--route5-color);
}
 .property:not(.highlight):has(.route5) {
 background-color: var(--route5-color);
}
 .property:not(.highlight):has(.route5)::after {
 border-top: 9px solid var(--route5-color);
}

/*
 * route6.
 */
.property.highlight:has(.route6) .icon {
 color: var(--route6-color);
 background: var(--route6-color);
}
 .property:not(.highlight):has(.route6) {
 background-color: var(--route6-color);
}
 .property:not(.highlight):has(.route6)::after {
 border-top: 9px solid var(--route6-color);
}

/*
 * route7.
 */
.property.highlight:has(.route7) .icon {
 color: var(--route7-color);
 background: var(--route7-color);
}
 .property:not(.highlight):has(.route7) {
 background-color: var(--route7-color);
}
 .property:not(.highlight):has(.route7)::after {
 border-top: 9px solid var(--route7-color);
}

/*
 * route8.
 */
.property.highlight:has(.route8) .icon {
 color: var(--route8-color);
 background: var(--route8-color);
}
 .property:not(.highlight):has(.route8) {
 background-color: var(--route8-color);
}
 .property:not(.highlight):has(.route8)::after {
 border-top: 9px solid var(--route8-color);
}

/*
 * route9.
 */
.property.highlight:has(.route9) .icon {
 color: var(--route9-color);
 background: var(--route9-color);
}
 .property:not(.highlight):has(.route9) {
 background-color: var(--route9-color);
}
 .property:not(.highlight):has(.route9)::after {
 border-top: 9px solid var(--route9-color);
}

/*
 * route10.
 */
.property.highlight:has(.route10) .icon {
 color: var(--route10-color);
 background: var(--route10-color);
}
 .property:not(.highlight):has(.route10) {
 background-color: var(--route10-color);
}
 .property:not(.highlight):has(.route10)::after {
 border-top: 9px solid var(--route10-color);
}

/*
 * route11.
 */
.property.highlight:has(.route11) .icon {
 color: var(--route11-color);
 background: var(--route11-color);
}
 .property:not(.highlight):has(.route11) {
 background-color: var(--route11-color);
}
 .property:not(.highlight):has(.route11)::after {
 border-top: 9px solid var(--route11-color);
}

/*
 * route12.
 */
.property.highlight:has(.route12) .icon {
 color: var(--route12-color);
 background: var(--route12-color);
}
 .property:not(.highlight):has(.route12) {
 background-color: var(--route12-color);
}
 .property:not(.highlight):has(.route12)::after {
 border-top: 9px solid var(--route12-color);
}

/*
 * route13.
 */
.property.highlight:has(.route13) .icon {
 color: var(--route13-color);
 background: var(--route13-color);
}
 .property:not(.highlight):has(.route13) {
 background-color: var(--route13-color);
}
 .property:not(.highlight):has(.route13)::after {
 border-top: 9px solid var(--route13-color);
}

/********************************/
.BR50per {
	border-radius: 50%;
	
}
/********************************/
gmp-advanced-marker {
	outline: none;
}