/* This is just dummy CSS -- not intended to be used in production. */
.mylocation-getlocationform {
	margin-bottom: 40px;
}
table {
  margin: 40px 0;
  border-spacing: 0;
  border-collapse: collapse;
  width: 100%
}

/* Long-range map styles */
.longrange-map-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    margin: 0 auto;
}

.longrange-map-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.longrange-map-image {
    max-width: 100%;
    height: auto;
    display: block;
}

/* SVG overlay styles */
.longrange-map-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.longrange-svg-link {
    pointer-events: all;
    cursor: pointer;
}

.longrange-region-polygon {
    fill: rgba(255, 255, 255, 0.1);
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 2;
    transition: all 0.3s ease;
}

.longrange-svg-link:hover .longrange-region-polygon {
    fill: rgba(255, 255, 0, 0.3);
    stroke: rgba(255, 255, 0, 1);
    stroke-width: 3;
    filter: drop-shadow(0 0 8px rgba(255, 255, 0, 0.8));
}

.longrange-svg-link:focus {
    outline: none;
}

.longrange-svg-link:focus .longrange-region-polygon {
    fill: rgba(0, 124, 186, 0.3);
    stroke: #007cba;
    stroke-width: 4;
    outline: none;
}

/* Region number text styling */
.longrange-region-number {
    fill: white;
    font-family: Arial, sans-serif;
    font-weight: bold;
    font-size: 32px;
    stroke: #000;
    stroke-width: 2;
    paint-order: stroke fill;
    pointer-events: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .longrange-region-polygon {
        stroke-width: 3;
    }

    .longrange-svg-link:hover .longrange-region-polygon {
        stroke-width: 4;
    }

    .longrange-region-number {
        font-size: 28px;
        stroke-width: 1.5;
    }
}

@media (max-width: 480px) {
    .longrange-region-polygon {
        stroke-width: 4;
    }

    .longrange-svg-link:hover .longrange-region-polygon {
        stroke-width: 5;
    }

    .longrange-region-number {
        font-size: 24px;
        stroke-width: 1;
    }
}

@media (max-width: 31.25rem) {
td, th {
	padding: 4px !important;
}
	.longrange_graph_wrapper {
		width: 320px;
		overflow-y: scroll;
	}
	.longrange_graph {
		max-width: 600px !important;
	}
}

@media (min-width: 75rem) {
.weatherregionmap {
	float: right;
	width: 250px;
	margin-left: 40px;
}
}