@charset "UTF-8";

@import url('https://fonts.googleapis.com/css?family=Montserrat:700|Work+Sans:400,700&display=swap');

.leaflet-touch .leaflet-bar {
    border: none;
    background-color: transparent;
}

.leaflet-touch .leaflet-bar.leaflet-control:not(.leaflet-control-geocoder) a {
    width: 44px;
    height: 44px;
    line-height: 44px;
}

.leaflet-control a,
.leaflet-control-layers-toggle {
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--primary-colour);
    color: var(--white);
    font-family: 'Montserrat', sans-serif;
    transition: var(--transition);
}

.leaflet-control a.leaflet-disabled {
    border: 1px solid #bbb;
    pointer-events: none;
}

.leaflet-touch .leaflet-control-zoom-in, 
.leaflet-touch .leaflet-control-zoom-out {
    font-size: 30px;
}

.leaflet-touch .leaflet-control-zoom-out {
    margin-top: 5px;
}

.leaflet-touch .leaflet-bar.leaflet-control-zoom a:first-child {
    border-top-left-radius:  var(--border-radius);
    border-top-right-radius: var(--border-radius);
}

.leaflet-touch .leaflet-bar.leaflet-control-zoom a:last-child {
    border-bottom-left-radius:  var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
    background-color: var(--primary-colour-dark);
    border-color: var(--primary-colour-dark);
    border-bottom: none;
    color: var(--white);
}


.leaflet-touch .leaflet-control-layers {
    border: none;
    border-color: var(--primary-colour);
    background: transparent;
    margin: 10px;
}

.leaflet-control-layers-toggle,
.leaflet-control-layers-expanded .leaflet-control-layers-toggle {
    display: block;
    float: right;
}

.leaflet-control-layers-toggle {
    background: var(--primary-colour);
    border-radius: var(--border-radius);
    transition: var(--transition);
}

.leaflet-control-layers-toggle,
.leaflet-retina .leaflet-control-layers-toggle {
    background-image: url('../images/layer.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
}

.leaflet-control-layers-toggle:hover,
.leaflet-retina .leaflet-control-layers-toggle:hover,
.leaflet-control-layers-toggle:focus,
.leaflet-retina .leaflet-control-layers-toggle:focus {
    background-color: var(--primary-colour-dark);
}

.leaflet-control-layers-list {
    background: var(--white);
    border: 5px solid var(--primary-colour);
    border-radius: var(--border-radius);
    clear: both;
    display: inline-block;
    float: right;
    position: relative;
    margin-top: 0.3125em;
    min-width: 280px;
    max-width: 350px;
    max-height: 400px;
    overflow: hidden;
    overflow-y: scroll;
}

.leaflet-control-layers-heading {
    background: var(--primary-colour);
    color: var(--white);
    font-size: 1em;
    width: 100%;
}

.leaflet-control-layers-list > div:not(.hidden):not(.leaflet-control-layers-separator) {
    padding: 1em;
}

.leaflet-control-layers-list .leaflet-control-layers-heading span {
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
}

.leaflet-control-container label {
    color: var(--footer-colour);
    font-family: 'Work Sans', sans-serif;
}

.leaflet-control-container label:not(:last-of-type) {
    margin-bottom: 1em;
}

.leaflet-container {
    font-family: 'Work Sans', sans-serif;
    font-size: 1.6em;
}

.leaflet-control-layers-expanded {
    padding: 0;
}

.leaflet-control-layers-separator {
    display: none;
}

.leaflet-control-layers-base label div {
    display: grid;
    grid-template-columns: 1em auto;
    gap: 0.5em;
}

.leaflet-control-layers label:hover {
    cursor: pointer;
}

.leaflet-control-layers-base label div,
.leaflet-control-layers-overlays label div {
    position: relative;
}

.leaflet-control-layers-base label div span {
    line-height: 30px;
}

.leaflet-control-layers-base label div span,
.leaflet-control-layers-overlays label div span {
    display: block;
    min-height: 35px;
    padding: 0 0 0 45px;
}

.leaflet-control-layers-base label input,
.leaflet-control-layers-overlays label input {
    height: 24px;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    width: 24px;
}

.leaflet-control-layers-overlays label span::before {
    border: 5px solid var(--grey-light);
    content: "";
    height: 24px;
    left: 0;
    position: absolute;
    top: 0;
    width: 24px;
}

.leaflet-control-layers-overlays label span::after {
    content: "";
    border: 5px solid var(--secondary-colour);
    border-left: 0;
    border-top: 0;
    height: 14px;
    left: 11px;
    opacity: 0;
    position: absolute;
    top: 5px;
    transform: rotate(45deg);
    transition: opacity 0.2s ease-in-out;
    width: 6px;
}

.leaflet-control-layers-base input:checked + span::after,
.leaflet-control-layers-overlays input:checked + span::after {
    opacity: 1;
}

.leaflet-control-layers-base label span::before {
    border: 5px solid var(--grey-light);
    content: "";
    height: 24px;
    left: 0;
    position: absolute;
    top: 0;
    width: 24px;
    border-radius: 50%;
}

.leaflet-control-layers-base label span::after {
    content: "";
    opacity: 0;
    background: var(--secondary-colour);
    border: 10px solid var(--secondary-colour);
    border-radius: 50%;
    position: absolute;
    left: 7px;
    top: 7px;
    transition: opacity 0.2s ease-in-out;
}

.leaflet-control-layers input:focus + span {
    font-weight: 700;
}

.leaflet-control-layers input:focus + span::before {
    box-shadow: 0 0 5px var(--secondary-colour-dark);
    outline: 3px solid transparent;
}

.leaflet-control-layers-scrollbar {
    padding-right: 5px;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    text-align: center;
    border-radius: var(--border-radius);
}

/* BRANDING */

.os-api-branding {
    color: #333;
}

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

/* GEOCODER */

.leaflet-touch .leaflet-bar.leaflet-control-geocoder {
    color: var(--black);
    width: calc(100% - 20px);
    margin: 10px 10px 0 10px;
}

@media screen and (min-width: 767px) {
    .leaflet-touch .leaflet-bar.leaflet-control-geocoder {
        width: 350px;
    }
}

.leaflet-control-geocoder-icon,
.leaflet-touch .leaflet-control-geocoder-icon {
    background-color: var(--primary-colour);
    background-image: url('../images/search.svg');
    border-radius: var(--border-radius);
    float: right;
    height: 44px;
    outline: 0;
    transition: background-color 0.2s ease-in-out;
    width: 44px;
}

.leaflet-touch .leaflet-control-geocoder-icon:hover,
.leaflet-touch .leaflet-control-geocoder-icon:focus {
    background-color: var(--primary-colour-dark);
}

.leaflet-touch .leaflet-bar.leaflet-control-geocoder-expanded .leaflet-control-geocoder-icon {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.leaflet-touch .leaflet-control-geocoder-form {
    border: 5px solid var(--primary-colour);
    border-radius: var(--border-radius);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    float: right;
    height: 44px;
    max-width: 306px;
    transition: border-color 0.2s ease-in-out;
    width: calc(100% - 98px);
}

@media screen and (min-width: 768px) {
    .leaflet-touch .leaflet-control-geocoder-form {
        width: 100%;
    }
}

.leaflet-bar.leaflet-control-geocoder-expanded .leaflet-control-geocoder-icon:hover + .leaflet-control-geocoder-form,
.leaflet-bar.leaflet-control-geocoder-expanded .leaflet-control-geocoder-icon:focus + .leaflet-control-geocoder-form {
    border-color: var(--primary-colour-dark);
}

.leaflet-control-geocoder-form input {
    background: var(--white);
    font-family: 'Work Sans', sans-serif;
    line-height: 1.25em;
    padding-left: 0.5em;
    padding: 0.25em 0.5em;
    width: 100%;
}

/*
.leaflet-control-geocoder-form input:active,
.leaflet-control-geocoder-form input:focus {
    /** styles needed **/
    /* outline: 2px solid red; 
}
*/

.leaflet-control-geocoder-alternatives {
    background: var(--white);
    border: 5px solid var(--primary-colour);
    border-radius: var(--border-radius);
    clear: both;
    color: var(--black);
    float: right;
    font-size: 1em;
    margin-top: 0.3125em;
    max-height: 300px; 
    max-width: 350px;
    overflow: hidden; 
    overflow-y: scroll;
    padding: 0;
    width: auto;
}

.leaflet-control-geocoder-alternatives li {
    padding: 1em;
    white-space: normal;
}

.leaflet-control-geocoder-alternatives li:hover,
.leaflet-control-geocoder-alternatives li:focus {
    background: var(--footer-background-colour);
}

.leaflet-control-geocoder-alternatives a {
    color: inherit;
    font-family: 'Work Sans', sans-serif;
    font-weight: 400;
}

.leaflet-control-geocoder-alternatives a:hover,
.leaflet-control-geocoder-alternatives a:focus {
    color: var(--black);
    text-decoration: underline;
}

.leaflet-control-geocoder-error {
    background: var(--white);
    border: 5px solid var(--primary-colour);
    border-radius: var(--border-radius);
    color: var(--red);
    margin: 54px 0 0 0;
    padding: 1em;
}