.floating-panel{position:absolute;font-size:small;top:10px;left:10px;z-index:10;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px rgba(0,0,0,.2);width:30vw;max-height:85%;overflow:auto;display:none}.floating-panel.address-only{width:100%;max-width:300px}.floating-panel-item:last-child{border-bottom:none!important;margin-bottom:0!important}@media(max-width:768px){.floating-panel:not(.address-only){width:calc(50vw + 60px)}}@media(max-width:476px){.maplibregl-ctrl-bottom-left{margin-bottom:20px}}#address-box{.address-box-container { position: relative; overflow: hidden; width: 100%; font-size: 14px; } .address-box-main, .address-box-details { width: 100%; transition: transform 0.3s ease-in-out; background: var(--body-background); } .address-box-details { position: absolute; top: 0; left: 100%; height: 100%; overflow-y: auto; } .address-box-container.show-details .address-box-main { transform: translateX(-100%); } .address-box-container.show-details .address-box-details { transform: translateX(-100%); } .floating-panel-item { display: flex; justify-content: space-between; align-items: center; line-height: 1.1; border-bottom: 1px solid var(--gray-200, #eee); text-decoration: none; &:hover strong { text-decoration: underline; } &:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } } .item-thumbnail { flex-shrink: 0; width: 60px; height: 60px; overflow: hidden; aspect-ratio: 1 / 1; } .item-thumbnail img, .item-thumbnail picture { display: block; width: 100%; height: 100%; object-fit: cover; max-height: 100% !important; } .item-content { margin-left: 8px; flex-grow: 1; min-width: 0; word-break: break-all; } #address-box .item-content em { color: black; } .item-arrow { cursor: pointer; padding-left: 15px; padding-right: 15px; span { font-size: 24px; color: #666; } &:hover span { color: #000; } } .details-header { cursor: pointer; display: flex; align-items: center; border-bottom: 1px solid var(--gray-200, #eee); padding-bottom: 8px; padding-top: 8px; &:hover { color: #666; } } .back-arrow { cursor: pointer; padding-right: 10px; padding-left: 8px; span { font-size: 24px; color: #666; } &:hover span { color: #000; } } .details-title { flex-grow: 1; }}