#toast {

visibility: hidden;

min-width: 250px;

margin-left: -125px;

background-color: #333;

color: #fff;

text-align: center;

border-radius: 2px;

padding: 16px;

position: fixed;

/** 1000 to be above map */

z-index: 1000;

left: 50%;

bottom: 30px;

font-size: 17px;

}

#toast.show {

visibility: visible;

-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;

animation: fadein 0.5s, fadeout 0.5s 2.5s;

}

@ -webkit-keyframes fadein {

from {bottom: 0; opacity: 0;}

to {bottom: 30px; opacity: 1;}

}

@ keyframes fadein {

from {bottom: 0; opacity: 0;}

to {bottom: 30px; opacity: 1;}

}

@ -webkit-keyframes fadeout {

from {bottom: 30px; opacity: 1;}

to {bottom: 0; opacity: 0;}

}

@ keyframes fadeout {

from {bottom: 30px; opacity: 1;}

to {bottom: 0; opacity: 0;}

}

body {

font-family: sans-serif;

margin: 0;

}

#map {

height: 100vh;

width: 100%;

}

#zoom-message, #usrn-zoom-message, #legend {

position: absolute;

z-index: 999;

}

#zoom-message, #usrn-zoom-message {

top: 10px;

left: 50%;

transform: translateX(-50%);

background-color: white;

padding: 10px;

border: 1px solid #ccc;

border-radius: 5px;

display: none;

}

#usrn-zoom-message {

top: 60px;

}


#legend {

position: absolute;

z-index: 999;

top: 0;

right: 0;

background-color: #444 !important;

padding: 0;

border: none !important;

border-radius: 0;

font-weight: 500 !important;

letter-spacing: 0.02em !important;

color: #fff !important;

}

#legend-toggle {

background-color: #444 !important;

color: #fff !important;

border: none !important;

border-radius: 0 !important;

margin: 0 !important;

padding: 10px 16px 10px 40px !important;

display: flex !important;

align-items: center !important;

transition: background-color 0.3s ease-in-out !important;

box-shadow: none !important;

font-weight: 500 !important;

position: relative !important;

letter-spacing: 0.02em !important;

cursor: pointer !important;

width: 100%;

box-sizing: border-box;

}

#legend-toggle:hover {

background-color: #888 !important;

}

#legend-content {

background-color: #444;

max-height: 200px;

overflow: hidden;

transition: all 0.3s ease-in-out;

opacity: 1;

}

#legend-content.hidden {

max-height: 0;

opacity: 0;

padding: 0;

}

#legend-content p {

margin: 0;

padding: 10px 16px 10px 40px;

position: relative;

transition: background-color 0.3s ease-in-out;

}

#legend-content p:hover {

background-color: #888;

}

#legend-content span {

position: absolute;

left: 12px;

top: 50%;

transform: translateY(-50%);

font-size: 1.3em;

}

button {

background-color: #007BFF;

color: white;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

margin: 5px 0;

}

button:hover {

background-color: #0056b3;

}

button:disabled {

background-color: #6c757d;

cursor: not-allowed;

opacity: 0.5;

}

#button-container {

position: absolute;

z-index: 999;

left: 0;

bottom: 0;

display: flex;

flex-direction: column;

}

#update-progress-container {
max-height: min(50vh, 480px);
overflow-y: auto;
}

#update-progress-list {
display: flex;
flex-direction: column;
max-height: min(50vh, 480px);
overflow-y: auto;
}

.update-progress {
position: relative;
box-sizing: border-box;
width: 100%;
min-width: 0;
contain: inline-size;
padding: 12px 16px;
background: #222;
color: #fff;
font-family: Arial, sans-serif;
user-select: none;
cursor: pointer;
}

.update-progress-link {
position: absolute;
inset: 0;
z-index: 1;
color: inherit;
text-decoration: none;
}

.update-progress-link:focus-visible {
outline: 2px solid #fff;
outline-offset: -3px;
}

.update-progress-heading {
display: block;
color: inherit;
font-weight: 700;
margin-bottom: 8px;
overflow-wrap: anywhere;
text-decoration: none;
padding-right: 24px;
}

#button-container .update-progress-close {
position: absolute;
top: 6px;
right: 8px;
display: block;
opacity: 1;
padding: 2px 7px;
border: 0;
background: transparent;
color: #fff;
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
transition: color 0.2s ease-in-out;
z-index: 2;
}

#button-container .update-progress-close:hover,
#button-container .update-progress-close:focus-visible {
background: transparent;
color: #ff5b5b;
}

.update-progress.finished .update-progress-heading {
padding-right: 24px;
}

.update-progress.finished {
padding-top: 8px;
padding-bottom: 8px;
}

.update-progress.finished .update-progress-heading {
margin-bottom: 4px;
}

.update-progress.finished .update-progress-track {
height: 5px;
}

.update-progress.finished .update-progress-numbers,
.update-progress.finished .update-progress-message {
margin-top: 3px;
font-size: 0.75rem;
}

.update-progress.failed .update-progress-bar {
background: #dc3545;
}

.update-progress.failed .update-progress-message {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

#close-all-updates {
box-sizing: border-box;
width: 100%;
margin: 0;
padding: 10px 16px;
display: flex;
gap: 8px;
align-items: center;
justify-content: center;
border-radius: 0;
background: #222;
font-size: 1rem;
}

#button-container #close-all-updates:not(.hidden) {
display: flex;
opacity: 1;
}

#close-all-updates:hover,
#close-all-updates:focus-visible {
background: #888;
}

.close-all-icon {
color: #ff5b5b;
font-size: 1.4rem;
font-weight: 700;
line-height: 0.7;
}

#button-container.menu-collapsed .update-progress {
width: 170px;
padding: 8px 10px;
}

#button-container.menu-collapsed .update-progress-track,
#button-container.menu-collapsed .update-progress-message {
display: none;
}

#button-container.menu-collapsed .update-progress-heading {
margin-bottom: 2px;
font-size: 0.85rem;
}

#button-container.menu-collapsed .update-progress-numbers {
margin-top: 0;
font-size: 0.7rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.update-progress-track {
height: 10px;
overflow: hidden;
border-radius: 5px;
background: #666;
}

.update-progress-bar {
width: 0;
height: 100%;
background: #28a745;
transition: width 0.25s ease;
}

.update-progress-numbers {
margin-top: 7px;
font-weight: 700;
}

.update-progress-message {
margin-top: 3px;
font-size: 0.85rem;
color: #ddd;
}

#toggle-heatmap {

background-color: #FF5733;

}

#toggle-property-extents {

background-color: #28a745;

}

#download-geojson-button {

background-color: #17a2b8;

}

#toggle-usrns-button {

background-color: #8e44ad;

}

.usrn-link-line {
color: #e00000;
}

#toggle-uprns-button {

background-color: #6c757d;

}

#open-osm-button {

background-color: #ffc107;

}

#load-heatmap-josm-button {

background-color: #17a2b8;

}

#show-status-button {

background-color: #17a2b8;

}

.hidden {

display: none !important;

}

.matched-uprn {

color: #40FF40;

}

.unmatched-uprn {

color: #4040FF;

}


.mixed-uprn {

color: #20B2AA; /* Teal for a mixture */

}

.line-connecting {
    color: black;
}

.usrn-line {
    color: #B000B5;
}

.consecutive-line-solid {
    color: #FF8C00;
}

.alternate-uprn-line {
    color: #32CD32;
}

.consecutive-line-dotted {
    color: #FF8C00;
}


.copy-uprns-button, .copy-tag-button, .copy-usrn-button, .copy-usrn-tag-button {
background-color: #007BFF;

color: white;

padding: 5px 10px;

border: none;

border-radius: 5px;

cursor: pointer;

}

.copy-uprns-button:hover, .copy-tag-button:hover, .copy-usrn-button:hover, .copy-usrn-tag-button:hover {

background-color: #0056b3;

}


.hamburger-menu {
background-color: #007BFF;

color: white;

padding: 10px;

border: none;

border-radius: 5px;

cursor: pointer;

font-size: 20px;

display: flex;

align-items: center;

justify-content: space-between;

min-width: 50px;

}

.menu-state-indicator {
margin-left: 5px;

transition: transform 0.3s ease;

display: inline-block;

}

/* Rotated arrow for open menu */
.hamburger-menu.open .menu-state-indicator {
transform: rotate(180deg);

}

.hamburger-menu {
width: auto;

}

#menu-items {
display: flex;

flex-direction: column;

transition: all 0.3s ease-in-out !important;

}

#menu-items :is(button, a):not(.hamburger-menu) {
display: none;

opacity: 0;

transition: opacity 0.3s ease-in-out !important;

}

#menu-items:not(.hidden) :is(button, a) {
display: flex;

flex-direction: column;

}

#menu-items :is(button, a):not(.hidden) {
background-color: #444 !important;

color: #fff !important;

border: none !important;

border-radius: 0 !important;

margin: 0 !important;

padding: 10px 16px 10px 40px !important;

display: flex !important;

align-items: center !important;

font-size: 1.1em !important;

transition: all 0.3s ease-in-out !important;

box-shadow: none !important;

font-weight: 500 !important;

position: relative !important;

letter-spacing: 0.02em !important;

opacity: 1;

transform: translateX(0);

cursor: pointer;

text-decoration: none;

}

#menu-items :is(button, a).hidden {
opacity: 0;

transform: translateX(-20px);

transition: all 0.3s ease-in-out !important;

}

#menu-items :is(button, a) .menu-icon {
color: #bbb !important;

font-size: 1.3em !important;

margin-right: 12px !important;

position: absolute !important;

left: 12px !important;

top: 50% !important;

transform: translateY(-50%) !important;

display: inline-block !important;

vertical-align: middle !important;

transition: color 0.3s ease-in-out !important;

}

#menu-items :is(button, a):hover {
background-color: #888 !important;

}

#menu-items :is(button, a):hover .menu-icon {
color: #fff !important;

}

.menu-state-indicator {
margin-left: 5px;

transition: transform 0.3s ease-in-out !important;

display: inline-block;

}

.hamburger-menu.open .menu-state-indicator {
transform: rotate(180deg);

}

/* Update legend transition to match */
#legend-content {
transition: all 0.3s ease-in-out !important;

opacity: 1;

transform: translateY(0);

}

#legend-content.hidden {
opacity: 0;

transform: translateY(-10px);

display: block !important;

pointer-events: none;

}

/* Keep existing copyright styles */
.leaflet-control-attribution {
background-color: #444 !important;

color: #fff !important;

border: none !important;

border-radius: 0 !important;

margin: 0 !important;

padding: 10px 16px !important;

cursor: pointer;

font-size: 1.1em !important;

transition: all 0.3s ease !important;

box-shadow: none !important;

font-weight: 500 !important;

letter-spacing: 0.02em !important;

max-width: 50px;

overflow: hidden;

white-space: nowrap;

user-select: none;

-webkit-user-select: none;

font-size: 0 !important;

}

.leaflet-control-attribution.expanded {
max-width: min(1000px, calc(100vw - 32px));

white-space: normal;

}

.leaflet-control-attribution,
.leaflet-control-attribution a {
color: #fff !important;

}

.leaflet-control-attribution a:hover {
text-decoration: underline;

}

.leaflet-control-attribution .collapse-text {
display: inline-block;

font-size: 1.1rem;

}

.leaflet-control-attribution .attribution-line {
display: none;

font-size: 1.1rem;

}

.leaflet-control-attribution.expanded .attribution-line {
display: block;

}

/* Zoom control styling to match menu */
.leaflet-control-zoom {
border: none !important;

margin: 0 !important;

}

.leaflet-control-zoom a {
background-color: #444 !important;

color: #fff !important;

border: none !important;

width: 44px !important;

height: 44px !important;

line-height: 44px !important;

padding: 0 !important;

font-size: 22px !important;

font-weight: bold !important;

box-shadow: none !important;

border-radius: 0 !important;

letter-spacing: 0.02em !important;

display: flex !important;

align-items: center !important;

justify-content: center !important;

position: relative !important;

transition: background-color 0.3s ease-in-out !important;

text-indent: 0 !important;

text-align: center !important;

user-select: none;

-webkit-user-select: none;

}

#legend,
.leaflet-control-zoom {
user-select: none;

-webkit-user-select: none;

}

.leaflet-control-zoom a:hover {
background-color: #888 !important;

}

.leaflet-control-zoom-in {
white-space: nowrap;

}

.leaflet-control-zoom-out {
white-space: nowrap;

border-top: 1px solid #666 !important;

}

.leaflet-touch .leaflet-control-zoom a {
width: 44px !important;

height: 44px !important;

}

/* Remove default border and shadow */
.leaflet-bar {
box-shadow: none !important;

border: none !important;

}

.leaflet-touch .leaflet-bar {
border: none !important;

background-clip: unset !important;

}

.leaflet-top .leaflet-control {
margin: 0 !important;

}

.leaflet-left .leaflet-control {
margin: 0 !important;

}