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