.floating-panel{position:absolute;font-size:small;top:10px;left:10px;z-index:10;background-color:#fff;padding:15px;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:45vw}}@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; padding: 8px; } .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); padding-bottom: 8px; margin-bottom: 8px; &:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } } .item-content { flex-grow: 1; } .item-content:hover a { text-decoration: underline; } .item-arrow { cursor: pointer; padding-left: 15px; padding-right: 0px; 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; margin-bottom: 8px; &:hover { color: #666; } } .back-arrow { cursor: pointer; padding-right: 10px; span { font-size: 24px; color: #666; } &:hover span { color: #000; } } .details-title { flex-grow: 1; } .details-content { padding: 8px 0; }}