html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100vh;
    z-index: 1;
}

body {
    padding: 0;
    margin: 0;
}

html, body, #map {
    height: 100%;
    width: 100%;
}

/* || Collectibles sidebar listing */

.collectibles_list {
    list-style: none;
    padding: 0%;
    display: grid;
}

@media (max-width: 1199px) {
    .collectibles_list {
        grid-template-columns: repeat(1, auto) !important;
    }
}

.collectibles_list li {
    display: flex;
    align-content: center;
    border-bottom: 1px solid #dddddd;
}

.collectibles_list li:last-child {
    border-bottom: 0;
}

.collectibles_list li input:checked + label {
    background: #dddddd;
    text-decoration: line-through;
}

.collectibles_list li input[type="checkbox"] {
    margin: 10px;
}

.collectibles_list li label {
    margin: 0;
    padding: 10px;
    transition: background 0.2s;
    flex: 1;
    /* font-family:'helvetica neue'; */
    font-size: 12px;
    font-weight: 200;
    border-left: 1px solid #dddddd;
}

.collectibles_list li button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.leaflet-container {
    background: #738aaf;
}

.is-fullwidth {
    display: flex;
    width: 100%;
}

.popup-checkbox {
    border-width: 1px;
    padding: calc(0.5em - 1px) 0;
    white-space: nowrap;
    justify-content: center;
    text-align: center;
    appearance: none;
    align-items: center;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid transparent;
    border-color: #b5b5b5;
    cursor: pointer;
}

.popup-title {
    text-align: center;
}

.popup-media {
    max-width: min(500px, 75vw);
    max-height: min(500px, 25vh);
}

.flex-grow-0 {
    flex-grow: 0;
}

.flex-grow-1 {
    flex-grow: 1;
}

.sidebar-image {
    width: 100%;
}

/* || Place icons in the middle of the marker */

.map-marker-foreground {
    width: 15px !important;
    display: table-cell;
    vertical-align: bottom;
    text-align: center;
}

.map-marker-foreground-wrapper {
    display: table;
    width: 15px;
    height: 15px;
    position: absolute;
    top: 3px;
    left: 5px;
}

/* || Firefox warning about will-change */

/* https://github.com/Leaflet/Leaflet/issues/4686#issuecomment-476738312 */
.leaflet-fade-anim .leaflet-tile,.leaflet-zoom-anim .leaflet-zoom-animated {
    will-change: auto !important;
}

/* || Allow scrolling through sidebar tabs */

.leaflet-sidebar-tabs {
    display: flex;
    overflow-y: scroll;
    flex-flow: column;
    scrollbar-width: none;
}

.leaflet-sidebar-tabs > ul {
    flex: 1 0 auto;
    position: unset;
}

.leaflet-sidebar-tabs > ul + ul {
    flex: 0 0 auto;
}

/* || Styling adjustments for sidebar content */

.leaflet-sidebar-header {
    position: sticky;
    top: 0px;
}

.leaflet-sidebar-content {
    scrollbar-width: none;
}

/* || Highlight marker
    https://cssdeck.com/labs/tedyvui4
*/

.map-marker-ping {
    background: #000000;
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 69%;
    top: 53%;
    margin: 11px 0px 0px -12px;
    transform: rotateX(55deg);
    z-index: -2;
    animation: pulsate_inner 2s ease-out;
    animation-iteration-count: infinite;
}

.map-marker-ping::before {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    animation: pulsate_outer 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0 0 1px 2px #ffffff;
}

.map-marker-ping::after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    animation: pulsate_outer 1s ease-out;
    animation-iteration-count: infinite;
    opacity: 0;
    box-shadow: 0 0 1px 2px #000000;
    animation-delay: 0.1s;
}

@keyframes pulsate_outer {
    0% {
        transform: scale(0.1, 0.1);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2, 1.2);
        opacity: 0;
    }
}

@keyframes pulsate_inner {
    50% {
        background-color: white;
    }

    100% {
        background-color: black;
    }
}

/* Fallback icons for Font Awesome */
.fa-hospital-alt:before,
.fa-hospital:before {
    content: "\f0f8"; /* Hospital icon unicode */
    display: inline-block !important;
}

.fa-building-shield:before,
.fa-shield-alt:before {
    content: "\f3ed"; /* Police icon unicode */
    display: inline-block !important;
}

.fa-briefcase:before {
    content: "\f0b1"; /* Briefcase icon unicode */
    display: inline-block !important;
}

/* Fix for icon visibility */
.map-marker .map-marker-foreground-wrapper i {
    color: white !important;
    font-size: 14px !important;
    text-shadow: 0 0 2px rgba(0,0,0,0.8) !important;
    display: inline-block !important;
    width: 100% !important;
    height: 100% !important;
    text-align: center !important;
}

/* Fix marker background display */
.map-marker-background {
    width: 25px !important;
    height: 41px !important;
    display: block !important;
    opacity: 0.5 !important; /* Semi-transparent marker */
}

/* Map marker general fixes */
.map-marker {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Modern marker styling */
.modern-marker {
    background: transparent !important;
    border: none !important;
}

.modern-marker svg {
    filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.3));
}

/* Position the icon properly in the marker */
.map-marker-foreground-wrapper {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 16px !important;
    height: 16px !important;
    position: absolute !important;
    top: 7px !important;
    left: 4.5px !important;
    z-index: 10 !important;
    border-radius: 50% !important; 
    background: transparent !important;
}

/* Make icons bold and clear */
.map-marker .map-marker-foreground-wrapper i {
    color: #333 !important; 
    font-size: 12px !important;
    font-weight: bold !important;
}

/* Layer control styling */
.leaflet-control-layers {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    padding: 6px 10px;
    max-height: 80vh;
    overflow-y: auto;
}

.leaflet-control-layers-expanded {
    padding: 6px 10px 6px 6px;
    color: #333;
    background-color: #fff;
}

.leaflet-control-layers-toggle {
    width: 36px;
    height: 36px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    display: block;
}

.leaflet-control-layers-selector {
    margin-right: 5px;
}

/* Ensure that marker icon container is transparent */
.leaflet-marker-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}