html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

html, body {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
}

/* Make the list easy to scroll on mobile */
#nearbyPanel {
    max-height: 35vh; /* mobile-friendly height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable; /* keeps layout from shifting (supported browsers) */
    overscroll-behavior: contain; /* prevents whole-page bounce while scrolling list */
    padding-right: 6px; /* space so scrollbar doesn’t overlap text */
}

/* Firefox */
#nearbyPanel {
    scrollbar-width: auto;
    scrollbar-color: rgba(120,120,120,.85) rgba(0,0,0,.08);
}

    /* Chrome/Edge/Safari (WebKit) */
    #nearbyPanel::-webkit-scrollbar {
        width: 14px; /* thicker = easier on mobile */
    }

    #nearbyPanel::-webkit-scrollbar-track {
        background: rgba(0,0,0,.06);
        border-radius: 999px;
    }

    #nearbyPanel::-webkit-scrollbar-thumb {
        background: rgba(120,120,120,.85);
        border-radius: 999px;
        border: 3px solid rgba(0,0,0,.06); /* makes thumb thicker + nicer */
    }

#nearbyPanel {
    position: relative;
}

    #nearbyPanel::before,
    #nearbyPanel::after {
        content: "";
        position: sticky;
        left: 0;
        right: 0;
        height: 14px;
        display: block;
        pointer-events: none;
        z-index: 2;
    }

    #nearbyPanel::before {
        top: 0;
        background: linear-gradient(to bottom, rgba(255,255,255,.95), rgba(255,255,255,0));
    }

    #nearbyPanel::after {
        bottom: 0;
        background: linear-gradient(to top, rgba(255,255,255,.95), rgba(255,255,255,0));
    }