/* ####################################
   Google Maps

   - Critical Rendering Path: Optional
   - Currently the Locations Map module and Google Maps are the same thing, but in the future some of the CSS layout in this file will move when the Locations Map module supports other maps frameworks.
   ################################## */

.googleMap {
    /* Don't fool with width or height, they are calculated by the module. */
    position: relative; /* Important for some of the UI behavior to work. */
    overflow: hidden; /* Important for some of the UI behavior to work. */
}

    /* 
        Google Map - Map Marker Label 
        Class name is "markerLabel MapId MarkerTitle" where MarkerTitle has everything but lettes, numbers, underscores, dashes removed
        E.g. target a specific marker label with .googleMap .markeLabel.MapId.LocationName {}
    */

    .googleMap .markerLabel {
        font-family: Arial, Helvetica, sans-serif !important;
        font-size: 9px !important;
        font-weight: bold !important;
        color: #fff !important;
    }

    /*
        Google Map UI Bits
    */

    .gm-style > div > .gmnoprint {
        /* All controls. */
        margin: 17px 10px 10px !important;
    }

    .gm-style-mtc:first-child {
        /* Map Type Control, first one. Assuming the controls are top, left. */
        border: #484038 2px solid !important;
        border-right: 0 !important;
        border-top-left-radius: 4px !important;
        border-bottom-left-radius: 4px !important;
    }

    .gm-style-mtc:last-child {
        /* Map Type Control, last one. Assuming the controls are top, left. */
        border: #484038 2px solid !important;
        border-left: 0 !important;
        border-top-right-radius: 4px !important;
        border-bottom-right-radius: 4px !important;
    }

    .gm-fullscreen-control {
        /* Fullscreen control. */
        margin-top: 17px !important;
    }

    .gm-bundled-control > .gmnoprint > div {
        /* All controls? There's a background between the zoom buttons that this addresses. */
        background: transparent !important;
    }

        .gm-bundled-control > .gmnoprint > div button + div {
            /* Seems to get to the div between the zoom buttons. */
            background: transparent !important;
        }

    .gm-control-active {
        /* Zeems to get to the zoom buttons and fullscreen control. */
        background: #fff !important;
        border: #484038 2px solid !important;
        border-radius: 0px !important;
    }

    /* Google Map - Info Window - Content Layout (all window types) */

    .googleMap .infoWindowContent h1,
    .googleMap .infoWindowContent h2,
    .googleMap .infoWindowContent h3,
    .googleMap .infoWindowContent h4,
    .googleMap .infoWindowContent h5,
    .googleMap .infoWindowContent h6,
    .googleMap .infoWindowContent p,
    .googleMap .infoWindowContent ul,
    .googleMap .infoWindowContent ol {
        margin-top: 0px;
        margin-bottom: 10px;
    }

        .googleMap .infoWindowContent .infoWindowContentField {
        }

            .googleMap .infoWindowContent .infoWindowContentField + .locationFields {
                margin-bottom: 10px;
            }

        .googleMap .infoWindowContent .locationFields {
        }

        .googleMap .infoWindowContent .title {
        }

        .googleMap .infoWindowContent figure.image {
            float: right;
            max-width: 35%;
            margin: 0 0 15px 15px;
            border-radius: 0px;
            overflow: hidden;
        }

            .googleMap .infoWindowContent figure.image figcaption {
                padding: 5px;
                text-align: center;
                font-size: 88.89%;
            }

        .googleMap .infoWindowContent .summary {
        }

        .googleMap .infoWindowContent .locationFields .businessField,
        .googleMap .infoWindowContent .locationFields .contactField {
            display: flex;
            align-items: flex-start;
            margin-bottom: 5px;
        }

            .googleMap .infoWindowContent .locationFields .contactField:last-of-type {
                margin-bottom: 0;
            }

            .googleMap .infoWindowContent .locationFields .businessField .label,
            .googleMap .infoWindowContent .locationFields .contactField .label {
                width: 110px;
                font-weight: bold;
            }

            .googleMap .infoWindowContent .locationFields .businessField .value,
            .googleMap .infoWindowContent .locationFields .contactField .value {
            }

            .googleMap .infoWindowContent .locationFields .businessField.organizationName {
            }

            .googleMap .infoWindowContent .locationFields .businessField.businessInfo {
            }

            .googleMap .infoWindowContent .locationFields .contactField.contactPerson {
            }

            .googleMap .infoWindowContent .locationFields .contactField.contactPersonPosition {
            }

            .googleMap .infoWindowContent .locationFields .contactField.phone {
            }

            .googleMap .infoWindowContent .locationFields .contactField.email {
            }

            .googleMap .infoWindowContent .locationFields .contactField.website {
            }

            .googleMap .infoWindowContent .locationFields .contactField.location {
            }

                .googleMap .infoWindowContent .locationFields .contactField.location .address {
                    display: block;
                }

                .googleMap .infoWindowContent .locationFields .contactField.location .city {
                }

                .googleMap .infoWindowContent .locationFields .contactField.location .state {
                }

                    .googleMap .infoWindowContent .locationFields .contactField.location .state::after {
                        content: "";
                        clear: both;
                        display: table;
                    }

                .googleMap .infoWindowContent .locationFields .contactField.location .country {
                    display: inline-block;
                }

                .googleMap .infoWindowContent .locationFields .contactField.location .postcode {
                    display: inline-block;
                }

                    .googleMap .infoWindowContent .locationFields .contactField.location .address + .postcode,
                    .googleMap .infoWindowContent .locationFields .contactField.location .postcode:first-child:::before {
                        /* When the postcode is not preceded by a city, state or country, it's just a number unless we give it a label. */
                        content: "Postcode: ";
                        display: inline-block;
                    }

                .googleMap .infoWindowContent .locationFields .contactField.location .county {
                }

                .googleMap .infoWindowContent .locationFields .contactField.location .statisticalArea {
                }

                .googleMap .infoWindowContent .locationFields .contactField.location .airport {
                }

        .googleMap .infoWindowContent .locationFields .customField {
        }

            .googleMap .infoWindowContent .locationFields .customField.customInfo1 {
            }

            .googleMap .infoWindowContent .locationFields .customField.customInfo2 {
            }

            .googleMap .infoWindowContent .locationFields .customField.customInfo3 {
            }

            .googleMap .infoWindowContent .locationFields .customField.customInfo4 {
            }

        .googleMap .infoWindowContent .moreInfoLink {
        }

            .googleMap .infoWindowContent .moreInfoLink a {
            }

        .googleMap .infoWindowContent .zoomHere {
            margin-top: 3px;
        }

            .googleMap .infoWindowContent .zoomHere a.zoomHereLink {
                font-weight: 700;
            }

                .googleMap .infoWindowContent .zoomHere a.zoomHereLink::before {
                    content: "\f689";
                    margin: 0 5px 0 2px;
                    font-family: "Font Awesome 6 Free";
                    font-weight: 700;
                    text-rendering: auto;
                    -webkit-font-smoothing: antialiased;
                    -moz-osx-font-smoothing: grayscale;
                }

    /* Google Map - Inline Info Window */

    .googleMap .uiContainer .gm-style .gm-style-iw-c {
        overflow: visible; /* So that we can make the close button move outside the box boundaries. */
        border-radius: 0px;
        box-shadow: 10px 10px 15px -7px rgba(0,0,0,0.3);
    }

        .googleMap .gm-style .infoWindowContent {
        }

            .googleMap .gm-style .infoWindowContent > :first-child {
                margin-top: 0 !important;
            }

            .googleMap .gm-style .infoWindowContent > :last-child {
                margin-bottom: 0 !important;
            }

        .googleMap button[title=Close] {
            top: -10px !important;
            right: -10px !important;
            width: 24px !important;
            height: 24px !important;
            background-color: #484038 !important;
            background-image: url("/images/cms/icons/white/cross_white_16.png") !important;
            background-position: center center !important;
            background-repeat: no-repeat !important;
            border-radius: 100% !important;
        }

        .googleMap button[title=Close] img {
            display: none !important;
        }

    /* Google Map - External Info Window */

    .googleMap .uiContainer .infoWindowExternal {
        display: none; /* It will be turned on by map interactions. */
        position: absolute;
        width: auto;
        max-width: 55%;
        min-height: 10px;
        box-sizing: border-box;
        padding: var(--site-padding-thin);
        bottom: 10px;
        left: 60px;
        background: #fff;
        border-bottom: #484038 4px solid;
        border-radius: 0px;
        box-shadow: 0px 0px 15px rgba(0,0,0,0.25);
    }

        .googleMap .uiContainer .infoWindowExternal .closeButton {
            position: absolute;
            top: -7px;
            right: -7px;
            width: 18px;
            height: 18px;
            padding-left: 18px;
            box-sizing: border-box;
            overflow: hidden;
            background-color: #484038;
            background-image: url("/images/cms/icons/white/cross_white_16.png");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 12px 12px;
            border-radius: 100%;
            opacity: 0.75;
            transition: 100ms all ease-in-out;
        }

            .googleMap .uiContainer .infoWindowExternal .closeButton:hover {
                opacity: 1;
                cursor: pointer;
            }

        .googleMap .uiContainer .infoWindowExternal .infoWindowContent {
        }

            .googleMap .uiContainer .infoWindowExternal .infoWindowContent > :first-child {
                margin-top: 0 !important;
            }

            .googleMap .uiContainer .infoWindowExternal .infoWindowContent > :last-child {
                margin-bottom: 0 !important;
            }

    /* Google Map - Lightbox Info Window */

    .googleMapInfoWindowLightbox {
        /* This is the lightbox window itself, probably don't mess with this. */
    }

        .googleMapInfoWindowLightbox .infoWindowContent {
            padding: var(--site-padding);
        }

            .googleMapInfoWindowLightbox .infoWindowContent > :first-child {
                margin-top: 0 !important;
            }

            .googleMapInfoWindowLightbox .infoWindowContent > :last-child {
                margin-bottom: 0 !important;
            }

    /* Google Map - Sidebar Info Window */

    .googleMap .uiContainer.sidebar .navContainer .infoWindowSidebar {
        display: none; /* It will be turned on by map interactions. */
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
        border-right-color: var(--site-color-1-light);
        border-right-width: 1px;
        border-style: solid;
    }

        .googleMap .uiContainer.sidebar .navContainer .infoWindowSidebar .closeButton {
            position: absolute;
            top: -10px;
            right: -10px;
            width: 24px;
            height: 24px;
            padding-left: 24px;
            box-sizing: border-box;
            overflow: hidden;
            background-color: #484038 !important;
            background-image: url("/images/cms/icons/white/cross_white_16.png");
            background-position: center center;
            background-repeat: no-repeat;
            border-radius: 100%;
            opacity: 0.6;
        }

            .googleMap .uiContainer.sidebar .navContainer .infoWindowSidebar .closeButton:hover {
                opacity: 1;
                cursor: pointer;
            }

        .googleMap .uiContainer.sidebar .navContainer .infoWindowSidebar .infoWindowContent {
        }

            .googleMap .uiContainer.sidebar .navContainer .infoWindowSidebar .infoWindowContent > :first-child {
                margin-top: 0 !important;
            }

            .googleMap .uiContainer.sidebar .navContainer .infoWindowSidebar .infoWindowContent > :last-child {
                margin-bottom: 0 !important;
            }

    /* Google Map - Sidebar UI */

    .googleMap .uiContainer.sidebar {
        /* Don't mess with position & layout behavior, you will break the map UI. */
        position: relative;
        clear: both;
        display: flex;
        flex-flow: row nowrap;
        align-items: stretch;
        overflow: hidden;
        box-sizing: border-box;
        width: 100%;
        border-color: var(--site-color-1-light);
        border-width: 2px;
        border-style: solid;
        border-radius: var(--site-box-border-radius);
    }

        .googleMap .uiContainer.sidebar .navContainer {
            position: relative;
            box-sizing: border-box;
            padding: var(--site-padding-thin);
            background: var(--site-color-1-lighter);
        }

        .googleMap .uiContainer.sidebar .navContainer {
        }

            .googleMap .uiContainer.sidebar .navContainer .areaSelector {
                position: relative;
                -webkit-appearance: none; /* Stop IOS taking over when it's a form control. */
                box-sizing: border-box;
                max-width: 220px;
                padding: 10px 25px 10px 6px;
                color: #fff;
                font-weight: bold;
                background-color: #484038;
                background-image: url("/images/cms/icons/white/arrow_down_white_16.png");
                background-position: 98% 7px;
                background-repeat: no-repeat;
                border: 0;
                border-radius: 0;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
                outline: 0 !important; /* Naughty! Bad for accessibility! But otherwise it looks weird. Fix this. */
                outline-style: inset;
            }

                .googleMap .uiContainer.sidebar .navContainer .areaSelector option {
                    padding: 40px;
                    transition: ease-in 0.5s;
                }

            .googleMap .uiContainer.sidebar .navContainer .locationsList {
                margin: 0;
                max-height: calc(100% - 50px);
                overflow: auto;
            }

                .googleMap .uiContainer.sidebar .navContainer .locationsList ul {
                    display: none;
                    margin-top: 1px;
                    list-style: none;
                    padding: 0px;
                }

                    .googleMap .uiContainer.sidebar .navContainer .locationsList ul.selected {
                        display: block;
                        color: #fff;
                        background-color: #484038;
                        border-bottom-left-radius: 4px;
                        border-bottom-right-radius: 4px;
                    }

                    .googleMap .uiContainer.sidebar .navContainer .locationsList ul li {
                        position: relative;
                        box-sizing: border-box;
                        padding: 10px 25px 10px 10px;
                        margin: 0;
                        width: 100%;
                        cursor: pointer;
                        transition: 0.1s ease-in;
                    }

                        .googleMap .uiContainer.sidebar .navContainer .locationsList ul li:hover {
                            background: #fff;
                            color: #484038;
                        }

                            .googleMap .uiContainer.sidebar .navContainer .locationsList ul li:hover::after {
                                content: "\f054";
                                position: absolute;
                                top: 30%;
                                right: 10px;
                                font-family: "Font Awesome 6 Free";
                                font-size: 88.89%;
                                font-weight: 700;
                                text-rendering: auto;
                                -webkit-font-smoothing: antialiased;
                                -moz-osx-font-smoothing: grayscale;
                            }

                        .googleMap .uiContainer.sidebar .navContainer .locationsList ul li.selectedLocation {
                            color: #642c8d;
                            font-weight: 500;
                            background: #fff;
                        }

                            .googleMap .uiContainer.sidebar .navContainer .locationsList ul li.selectedLocation::after {
                                content: "\f054";
                                position: absolute;
                                right: 10px;
                                top: 30%;
                                font-family: "Font Awesome 6 Free";
                                font-size: 88.89%;
                                font-weight: 700;
                                text-rendering: auto;
                                -webkit-font-smoothing: antialiased;
                                -moz-osx-font-smoothing: grayscale;
                            }

                            .locationList ul.hideLocationList {
                                display: none !important;
                            }

                            .locationList ul.showLocationList {
                                display: block;
                            }

                            .locationList ul.hideLocationList {
                                display: none !important;
                            }

                            .locationList ul.showLocationList {
                                display: block;
                            }

    .googleMap .uiContainer.sidebar .mapContainer {
        width: 100%;
    }

        .googleMap .uiContainer.sidebar .mapContainer #map-canvas {
            width: 100% !important;
            height: 100% !important;
        }

@media screen and (max-width: 900px) {

    .googleMap {
        /* Fill the screen - outside the page padding - with a small space around. */
        margin: 0 -15px 30px;
        width: calc(100% + 30px) !important;
    }

    #PreviewContainer .googleMap {
        /* When it's seen in the CMS widget window. */
        margin: 0 0 30px;
        width: 100% !important;
    }

    /* Google Map - Sidebar UI */

    .googleMap .uiContainer.sidebar {
        display: block;
        border-top: 0;
    }

        .googleMap .uiContainer.sidebar .navContainer {
            position: absolute;
            width: 100%;
            padding: 0;
            background: transparent;
            border-right: 0;
            height: auto !important; /* Do NOT mess with this. */
            z-index: 1; /* The map canvas won't have a z-index, this will make sure the nav is above it. */
        }

            .googleMap .uiContainer.sidebar .navContainer .areaSelector {
                width: 100%;
                max-width: 100%;
                margin-top: -1px; /* The select form control behaves a little strangely in mobile views - is it because we override the native appearance? */
                /* margin-bottom: -1px; */ /* The select form control behaves a little strangely in mobile views - is it because we override the native appearance? */
            }

            .googleMap .uiContainer.sidebar .navContainer .locationsList {
                height: auto;
                overflow: visible;
            }

                .googleMap .uiContainer.sidebar .navContainer .locationsList ul {
                    columns: 4;
                    column-gap: 0;
                    margin: 0px;
                    width: 100%;
                    border-radius: 0 !important;
                }

                    .googleMap .uiContainer.sidebar .navContainer .locationsList ul li {
                        display: inline-block;
                        padding: 10px 30px 10px 10px;
                    }

                        .googleMap .uiContainer.sidebar .navContainer .locationsList ul li:first-child:last-child {
                            display: inline-block;
                        }

                        .googleMap .uiContainer.sidebar .navContainer .locationsList ul li:hover::after {
                            content: "\f078";
                            top: 20%;
                        }

                    .googleMap .uiContainer.sidebar .navContainer .locationsList ul.selected {
                        color: #484038;
                        background-color: rgba(255,255,255,0.85);
                        border-radius: 0 !important;
                        box-shadow: 0px 0px 10px rgba(0,0,0,0.25);
                    }

                        .googleMap .uiContainer.sidebar .navContainer .locationsList ul.selected li.selectedLocation {
                            color: #fff;
                            background: #484038;
                        }

                    .googleMap .uiContainer.sidebar .navContainer .locationsList ul li.selectedLocation::after {
                        content: "\f078";
                        top: 20%;
                        right: 5px;
                    }

        .googleMap .uiContainer.sidebar .mapContainer {
        }

    .googleMap .uiContainer .infoWindowExternal {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        max-width: 100%;
        padding: 10px;
        background: rgba(255,255,255,0.9);
        border: 0;
        border-radius: 0;
    }

        .googleMap .uiContainer .infoWindowExternal .closeButton {
            position: absolute;
            top: 7px;
            right: 7px;
        }

        .googleMap .uiContainer .infoWindowExternal .infoWindowContent h1,
        .googleMap .uiContainer .infoWindowExternal .infoWindowContent h2,
        .googleMap .uiContainer .infoWindowExternal .infoWindowContent h3,
        .googleMap .uiContainer .infoWindowExternal .infoWindowContent h4,
        .googleMap .uiContainer .infoWindowExternal .infoWindowContent h5,
        .googleMap .uiContainer .infoWindowExternal .infoWindowContent h6,
        .googleMap .uiContainer .infoWindowExternal .infoWindowContent p,
        .googleMap .uiContainer .infoWindowExternal .infoWindowContent ul,
        .googleMap .uiContainer .infoWindowExternal .infoWindowContent ol {
            margin-top: 0px;
            margin-bottom: 5px;
        }

        .googleMap .uiContainer .infoWindowExternal .infoWindowContent .title {
            font-size: 175%;
        }

    .googleMap .infoWindowContent .locationFields .businessField .label,
    .googleMap .infoWindowContent .locationFields .contactField .label {
        width: 95px;
    }

    .googleMap .uiContainer.sidebar .mapContainer {
    }

}

@media screen and (max-width: 600px) {

    .googleMap {
        min-height: 0;
    }

        /* Google Map - Sidebar UI */

        .googleMap .uiContainer {
            /* Height settings are a bit too bold. This would be better calculated dynamically depending on the device's height. Also need to set min-height on .googleMapCanvas below. */
            min-height: 565px !important;
            max-height: 565px !important;
        }

            .googleMap .uiContainer.sidebar .navContainer {
                margin-right: 0;
            }

                .googleMap .uiContainer.sidebar .navContainer .areaSelector {
                    width: 100%;
                    padding: 7px;
                }

                .googleMap .uiContainer.sidebar .navContainer .locationsList ul {
                    columns: 3;
                }

                    .googleMap .uiContainer.sidebar .navContainer .locationsList ul li {
                        padding: 4px 7px;
                        margin-bottom: -4px;
                        font-size: 70%;
                    }

                        .googleMap .uiContainer.sidebar .navContainer .locationsList ul li:last-child {
                            padding-bottom: 6px;
                        }

                        .googleMap .uiContainer.sidebar .navContainer .locationsList ul li.selectedLocation {
                            padding-right: 15px;
                        }

            .googleMap .uiContainer.sidebar .mapContainer {
            }

                .googleMap .uiContainer.sidebar .mapContainer .googleMapCanvas {
                    position: absolute;
                    bottom: 0;
                    /* Height settings are a bit too bold. This would be better calculated dynamically depending on the device's height. Also needs to be recalculated based on the height of the area selector sub menu. Also need to set min-height and max-height on .googleMap .uiContainer above. */
                    min-height: 565px !important;
                    height: 100% !important;
                    max-height: 100% !important;
                }

            .googleMap .uiContainer .infoWindowExternal {
                padding: 7px 10px;
            }

                .googleMap .uiContainer .infoWindowExternal .infoWindowContent .title {
                }

}