.custom-navbar { height: var(--navbar-height); padding-top: 0rem; padding-bottom: 0rem; z-index: 1000; border: none; background-color: white !important; } .nav-link { color: inherit; padding-left: 1rem !important; padding-right: 1rem !important; padding-top: 12px; background-color: var(--bs-light); margin-right: 1px; } .nav-link:hover { color: white !important;; background-color: var(--bs-primary); } .nav-link.active { color: white !important; background-color: var(--bs-primary); } .nav-full-height { display: flex; align-items: center; height: 100%; } .white-bg { background-color: #fff !important; } .navbar-brand { margin-right: 1em; } .navbar { z-index: 1001; } .card { transition: all 0.3s ease; } .card-header { cursor: pointer; } :root { --navbar-height: 44px; } .map-container { position: relative; width: 100%; height: calc(100vh - var(--navbar-height)); top: var(--navbar-height); } .coordinates-display { position: absolute; top: 10px; right: 10px; background: #fff; padding: 3px 8px; font-family: Arial, sans-serif; font-size: 14px; z-index: 1000; box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); border: 1px solid #ccc; width: auto; white-space: nowrap; } .panel-container { position: absolute; bottom: 20px; right: 20px; z-index: 1000; }