body { font-family: sans-serif; color: black; margin: 0; padding: 0; }

.listing-app .listing-content { display: grid; grid-template-columns: 1fr 2fr 5fr 2fr 1fr; grid-template-rows: 1fr 2fr 5fr 2fr 1fr; max-height: 100vh; }

@media (max-width: 600px) { .listing-app .listing-content { grid-template-rows: 1fr 2fr 6fr 1fr 1fr; } .listing-app .listing-content .toggle-map { grid-row: 5 / span 1; grid-column: 4 / span 2; } .listing-app .listing-content .toggle-filters { grid-row: 5 / span 1; grid-column: 1 / span 2; } .listing-app .listing-content .filters { grid-row: 3 / span 2; grid-column: 1 / span 4; z-index: 101; } .listing-app .listing-content .postcode-lookup-form { grid-row: 1 / span 1; grid-column: 1 / span 5; } .listing-app .listing-content .postcode-lookup-form input { font-size: 16px; } .listing-app .listing-content .directory-container.sidebar { display: none; } }

@media (min-width: 600px) { .listing-app .listing-content .toggle-filters { grid-row: 1 / span 1; grid-column: 1 / span 1; z-index: 100; } .listing-app .listing-content .filters { grid-row: 2 / span 1; grid-column: 1 / span 2; z-index: 101; } .listing-app .listing-content .postcode-lookup-form { grid-row: 1 / span 1; grid-column: 2 / span 3; } .listing-app .listing-content .toggle-map { grid-row: 1 / span 1; grid-column: 5 / span 1; } .listing-app .listing-content .toggle-map.mapView { grid-row: 5 / span 1; grid-column: 1 / span 1; } }

.listing-app .listing-content .directory-container { grid-row: 2 / span 4; grid-column: 1 / span 5; overflow-y: scroll; z-index: 2; }

.listing-app .listing-content .directory-container.sidebar { grid-column: 4 / span 2; grid-row: 1 / span 5; }

.listing-app .listing-content .map-section { grid-column: 1 / span 5; grid-row: 1 / span 5; z-index: 1; }

.listing-app .listing-content .map-section.hide { z-index: -1; visibility: hidden; }

.listing-app .filters { margin: 8px; padding: 10px; border-radius: 5px; box-shadow: 0 0 5px rgba(128, 128, 128, 0.5); background-color: white; }

.listing-app .filters.show { display: block; }

.listing-app .filters:not(.show) { display: none; }

.listing-app .filters .filter { display: flex; flex-direction: column; padding: 10px 0; }

.listing-app .toggle { display: flex; justify-content: center; align-items: center; z-index: 3; }

.listing-app .toggle input { display: none; }

.listing-app .toggle label { max-width: 50px; width: 100%; }

.listing-app .map { height: 100vh; }

.listing-app .map path.leaflet-interactive:hover { fill-opacity: 0.5; }

.directory { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; padding: 10px; }

.directory .group-link { text-decoration: none; color: black; }

.directory .group { background-color: white; border-radius: 5px; box-shadow: 0 0 5px 0 rgba(128, 128, 128, 0.5); overflow-x: hidden; transition: 300ms; height: 100%; }

.directory .group:hover { box-shadow: 0 0 9px 0 rgba(128, 128, 128, 0.5); }

.directory .group .image { height: 120px; width: 100%; background: rgba(255, 255, 255, 0) no-repeat center center; background-size: cover; }

.directory .group .info { padding: 10px; }

.postcode-directory h1 { text-align: center; }

.postcode-lookup-form { display: flex; justify-content: center; margin: 20px 0; }

.postcode-lookup-form input { font-size: 24px; padding: 15px; font-family: monospace; text-transform: uppercase; border: 1px solid black; border-radius: 0; text-align: center; }

.postcode-lookup-form input:focus { box-shadow: 0 0 5px rgba(128, 128, 128, 0.8); outline: none; }

/*# sourceMappingURL=style.css.map */