html,body{height:100%;margin:0}body{flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex}h1{text-align:center;font-size:large}#app{width:100%;height:100%}.map-container{width:100%;height:100%;position:absolute}.controls{position:absolute;top:40px;right:40px}.search-button{color:#fff;background-color:#4b4b4b;border:1px solid #000;border-radius:10px;width:80px;height:40px;box-shadow:0 4px 8px #00000059}.query-input{border:1px solid #ccc;border-radius:10px;width:315px;height:40px;box-shadow:0 4px 8px #00000059}.place-list-wrapper{z-index:10;width:400px;max-height:500px;position:absolute;top:100px;right:40px;overflow-y:auto}gmp-place-search{border:none;border-radius:10px;width:100%;margin:0;display:block}gmp-place-details-compact{border:none;width:350px;max-height:800px;display:none;transform:translateY(-40%)}gmp-place-details-compact:after{content:"";z-index:1;clip-path:polygon(0% 0%,100% 0%,50% 100%);transform-origin:50%;background-color:#fff;width:20px;height:20px;position:absolute;bottom:-18px;left:50%;transform:translate(-50%);box-shadow:2px 2px 5px #0003}@media (width<=768px){.place-list-wrapper{z-index:10;width:100%;max-height:40vh;position:absolute;top:0;right:0}.controls{box-sizing:border-box;z-index:10;width:100%;padding:10px;position:absolute;top:auto;bottom:10px;right:0}.query-input,.search-button{width:100%;margin-bottom:10px}}@media (prefers-color-scheme:dark){gmp-place-details-compact:after{background-color:#131314}}