.row.g-4>div {
            display: flex;
            flex-direction: column
        }

        .row.g-4>div>.card {
            flex-grow: 1
        }

        #peta-pju-publik {
            height: 100%;
            min-height: 65vh;
            width: 100%;
            border-radius: .25rem
        }

        .leaflet-popup-content-wrapper {
            border-radius: 8px
        }

        .leaflet-bottom.leaflet-right {
            right: 15px;
            bottom: 15px
        }

        .legend {
            padding: 8px 12px;
            font: 14px Arial, Helvetica, sans-serif;
            background: rgba(255, 255, 255, .9);
            box-shadow: 0 0 15px rgba(0, 0, 0, .2);
            border-radius: 5px;
            line-height: 24px;
            color: #555;
            max-width: 200px
        }

        .legend h4 {
            margin-top: 0;
            margin-bottom: 5px;
            font-size: 16px
        }

        .legend img {
            width: 15px;
            height: 25px;
            vertical-align: middle;
            margin-right: 8px
        }

        .riwayat-container {
            height: 65vh;
            overflow-y: auto;
            padding-right: 10px
        }

        .timeline {
            list-style: none;
            padding: 0;
            position: relative
        }

        .timeline:before {
            content: '';
            position: absolute;
            top: 5px;
            bottom: 5px;
            width: 2px;
            background: #e9ecef;
            left: 15px
        }

        .timeline-item {
            margin-bottom: 25px;
            position: relative;
            padding-left: 45px
        }

        .timeline-icon {
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            background-color: #fff;
            border: 2px solid;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 14px
        }

        .timeline-icon .text-success {
            border-color: #198754
        }

        .timeline-icon .text-info {
            border-color: #0dcaf0
        }

        .timeline-content {
            position: relative
        }

        .timeline-content h6 {
            font-weight: 600;
            margin-bottom: 5px;
            font-size: .95rem
        }

        .timeline-content p {
            font-size: .9rem;
            color: #6c757d;
            margin-bottom: 0
        }

        .leaflet-control-locate a {
            font-size: 1.4rem;
            line-height: 28px;
            width: 30px;
            height: 30px;
            text-align: center;
            background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-crosshair" viewBox="0 0 16 16"><path d="M8.5.5a.5.5 0 0 0-1 0v.518A7 7 0 0 0 1.018 7.5H.5a.5.5 0 0 0 0 1h.518A7 7 0 0 0 7.5 14.982v.518a.5.5 0 0 0 1 0v-.518A7 7 0 0 0 14.982 8.5h.518a.5.5 0 0 0 0-1h-.518A7 7 0 0 0 8.5 1.018zm-6.48 7A6 6 0 0 1 7.5 2.02v5.48a.5.5 0 0 0 1 0V2.02a6 6 0 0 1 5.48 5.48h-5.48a.5.5 0 0 0 0 1h5.48A6 6 0 0 1 8.5 13.98v-5.48a.5.5 0 0 0-1 0v5.48A6 6 0 0 1 2.02 8.5z"/></svg>');
            background-repeat: no-repeat;
            background-position: center
        }

        .leaflet-control-locate a.active {
            background-color: #2096F3
        }

        .leaflet-control-locate a.active .leaflet-control-locate-spinner {
            display: inline-block
        }

        /* Styling for photo gallery in offcanvas */
        .glightbox-container .gslide {
            max-width: 90vw;
            max-height: 90vh;
        }

        .glightbox-container .ginner-container {
            align-items: center;
        }