.leaflet-popup-content {
    margin: 2em 2em 1em 2em;
}

.coordinate-popup-info h2 {
    font-size: 1rem;
    margin: 0;
    font-weight: 400;
    color: #222;
}

.coordinate-popup-info h3 {
    font-size: 0.8rem;
    margin: 0;
    color: #666;
    font-weight: 400;
    margin-top: 0.5em;
}

.coordinate-popup-info .value {
    text-align: center;
    font-size: 2em;
    margin: 1em auto 0.5em auto !important;
}

.coordinate-popup-info .reference-value {
    text-align: center;
    font-size: 0.8em;
    font-weight: 300;
    font-style: italic;
    padding-bottom: 0;
    margin-bottom: 2.5em;
}

.coordinate-popup-info .coordinates {
    margin: 0;
    font-size: 0.65rem;
    text-align: right;
    font-family: 'IBMPlexMono' !important;
    font-weight: 400;
    color: #666
}

.coordinate-popup .leaflet-popup-close-button {
    top: -0.5em !important;
    right: -0.5em !important;
    background: white !important;
    border-radius: 999px;
    border: 1px solid #ddd !important;
    font-size: 2em !important;
    padding: 0.125em !important;
    box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2);
}

.coordinate-popup .leaflet-popup-close-button:hover {
    font-weight: 700 !important;
}

.coordinate-popup.point-left .leaflet-popup-tip-container {
    transform: unset;
    transform: rotate(90deg);
    left: -10px;
    top: 50%;
}

@media (max-width: 950px) {
    .leaflet-popup-content {
        margin: 1em;
        max-width: 220px;
    }

    .coordinate-popup-info .value {
        font-size: 1.25em;
        font-weight: 700;
    }

    .coordinate-popup-info .reference-value {
        margin-bottom: 1em;
    }
}

@media (max-width: 950px) and (orientation:landscape) {
    .leaflet-popup-content {
        max-width: 50vw;
        min-width: 40vw;
    }
}