@charset "UTF-8";

.property > .inner {align-items: center; background-color: #FFFFFF; border-radius: 50%; color: #263238; display: flex; font-size: 1rem; gap: 15px; justify-content: center; padding: 4px; position: relative; transition: all 0.3s ease-out; width: 2rem; height: 2rem;}
.property > .inner::after {border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 9px solid; border-top-color: inherit; 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 i {font-family: "Font Awesome 5 Free"; font-display:swap; font-weight: 900; width:1rem; height:1rem; font-size: 1rem;}
.property .details {display: none; flex-direction: column; flex: 1;}

i.svg-plane-departure {background-color: #ffffff; -webkit-mask-image: url('../images/svg/plane-departure.svg'); mask-image: url('../images/svg/plane-departure.svg'); -webkit-mask-size: contain; mask-size: contain; width: 1.25rem; height: 1.25rem; display: inline-block; margin-bottom: -0.25rem;}
i.svg-bed {background-color: #ffffff; -webkit-mask-image: url('../images/svg/bed.svg'); mask-image: url('../images/svg/bed.svg'); -webkit-mask-size: contain; mask-size: contain; width: 1.25rem; height: 1.25rem; display: inline-block; margin-bottom: -0.25rem;}
i.svg-plane-arrival {background-color: #ffffff; -webkit-mask-image: url('../images/svg/plane-arrival.svg'); mask-image: url('../images/svg/plane-arrival.svg'); -webkit-mask-size: contain; mask-size: contain; width: 1.25rem; height: 1.25rem; display: inline-block; margin-bottom: -0.25rem;}
/*
 * Property styles in highlighted state.
 */
.property.highlight > .inner {gap: 0; background-color: #FFFFFF; border-radius: 1rem; height: fit-content; max-height:300px; max-width: 300px; padding: 0.5rem; width: auto;}
.property.highlight > .inner::after {border-top: 9px solid #FFFFFF;}
.property.highlight > .inner .details {display: grid; grid-gap:0.25rem; background: #FFFFFF; width:100%; height:100%; padding:0.5rem; margin: 0 auto; border-radius: 1rem;}
.property.highlight > .inner .details span {font-size: 0.9rem; display: block; text-align: center; font-weight:bold;}
.property.highlight > .inner .details p, .property.highlight > .inner .details a {font-size: 0.85rem;}
.property.highlight > .inner .details a {text-decoration: none;}
.property.highlight > .inner .icon i {display:none;}