.map-container { position: relative; width: 100%; overflow: hidden; border:1px solid #b1b4b6 }

.map-container section.mapcanvas-container { width: 100%; aspect-ratio: 16 / 9; min-height:650px; border: 0; }

#map_canvas {
    height: 100%;
}
/*fix for ios map*/
@supports (-webkit-touch-callout: none) {
    .mapcanvas-container {
        height: 60dvh;
    }
}

/*#map { height: 100%; width: 100%; background-color: #eee; display: flex; align-items: center; justify-content: center; color: #666; position: absolute; top: 0; left: 0; z-index:0; }*/
/*  start panel toggle menu */
.panel-wrapper { position: absolute; top: 0; left: 0; height: 85%; z-index: 1000; transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); transform: translateX(-100%); }
.panel-wrapper.open { transform: translateX(0) }
.panel-wrapper.open .toggle-btn { right:-40px }
.panel-wrapper .toggle-btn { position: absolute; top:20px; right: -37px; width: 40px; height: 60px;  cursor: pointer; border: none; outline: none; background: transparent; padding: 0; z-index: 1001 }
.panel-wrapper .toggle-btn img { display: block; width: 100%; height: 100%; border: none; outline: none; box-shadow: none; }
.panel-wrapper .toggle-btn:focus-visible { background-color: #0b0c0c; box-shadow: 0 0 0 2px #fd0, 0 0 0 -1px #0b0c0c; }

.panel-container {  width: 28rem; height: 100%; display: flex; flex-direction: row; align-items: stretch }
.panel-menu { height:100%; background-color:#F3F2F1; box-sizing:border-box;  box-shadow: 4px 4px 8px -2px rgba(0, 0, 0, 0.3); }  .panel-menu a { display:block; margin:10px 0; text-decoration:none; color:#BC0067; font-size:1rem; padding:10px; font-weight:bold; cursor:pointer; }
.panel-menu a:hover { color:#BC0067; outline:none; }
.panel-menu a.menu-active { color:#111; background-color:#fff; }
.panel-menu a.menu-active:focus { color:#111; background-color:#fff; box-shadow:none; outline:none; }
.panel-menu a.menu-active:focus-visible { background-color:#fd0;  box-shadow: 0 -2px #fd0,0 4px #0b0c0c; }
.panel-menu a.mapmenu-item { display:flex; flex-direction: column; align-items:center; justify-content:center; text-decoration: none; padding: 20px 10px; }

.map-lock-wrapper .lock-wrapper { position: relative; display: inline-block; }
.map-lock-wrapper .lock-count { position: absolute; top: -10px; right: -5px; background-color:#BC0067; color: #fff; font-size: 12px; font-weight: bold; border-radius: 50%; padding:1px; line-height: 1; text-align: center; min-width: 15px; height: 18px; display: flex; align-items: center; justify-content: center; pointer-events: none; }

.map-search-wrapper .search-wrapper { position: relative; display: inline-block; }
.map-search-wrapper .search-count { position: absolute; top: -10px; right: -5px; background-color:#BC0067; color: #fff; font-size: 12px; font-weight: bold; border-radius: 50%; padding:1px; line-height: 1; text-align: center; min-width: 15px; height: 18px; display: flex; align-items: center; justify-content: center; pointer-events: none; display:none; }

/*  end panel toggle menu */

/*  start panel content containers */
.panel-content-wrapper { display: flex; flex-direction: column; width:100%; background-color:#fff; padding:10px 0px 10px 10px; box-shadow: 4px 4px 8px -2px rgba(0, 0, 0, 0.3); }
.panel-content { flex: 1 1 auto; display: flex; flex-direction: column; padding: 15px 15px 5px 10px; min-height:0; }
.panel-content > div { display:none; }
.panel-content > div.menu-active { display: flex; flex-direction: column; flex: 1; min-height: 0; }
/*  end panel content containers */

.govuk-input__wrapper { display: flex; border: 1px solid #B1B4B6; }
.map-search-wrapper { width:auto; margin-bottom:15px }
.map-search-wrapper .govuk-input { flex: 1; border: none; color: #0b0c0c; font-size:16px; padding: 8px 12px; outline: none; width:85% }
.map-search-wrapper .govuk-input:focus { outline: 3px solid #fd0; outline-offset: 0; box-shadow: inset 0 0 0 2px }
.map-search-wrapper .redbridge-search__submit-wrapper { margin: 0; }
.map-search-wrapper .redbridge-search__submit { background:#fff; border: none; cursor: pointer; }
.map-search-wrapper .redbridge-search__submit:hover { background: #fff }
.map-search-wrapper .redbridge-search__submit:focus { box-shadow:inset 0 0 0 2px #0b0c0c }
.map-search-wrapper .redbridge-search__icon { color: #BC0067; }

.map-search-container, .map-categories-container, .map-locked-container, .map-favourites-container { display: flex; flex: 1; min-height: 0; flex-direction: column; overflow: hidden; max-height:100% }
.map-search-container { display: none; }
#mapSearchCategoriesMain { display:flex; flex-direction: column; min-height: 0; }
#mapSearchResults, #mapSearchSubCategories, #mapSearchSubCategoriesList, #mapSearchLocked, #mapSearchFavourites, #mapSearchDirectionsList { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: 100%;  }
ul.map-scrollPanel { flex:unset; overflow-y: auto; overflow-x: hidden;  padding-left:0px; max-height: 100%; box-sizing: border-box; min-height: 0; margin-top:0 }
ul.map-scrollPanel li  { list-style-type:none; padding:10px 0 4px 0; margin-right:5px; font-size: 1rem; border-bottom:1px solid #b1b4b6 }
ul.map-scrollPanel li a  { color:#0b0c0c; margin:0; padding:0; font-synthesis: weight; font-size:1rem; font-weight:400 }
ul.map-scrollPanel li a:focus .map-item-text, ul.map-scrollPanel li a:focus-visible .map-item-text  { font-weight:700; font-size:1rem; }
#mapSearchSubCategories ul.map-scrollPanel, #mapSearchSubCategoriesList ul.map-scrollPanel, #mapSearchDirectionsList ul.map-scrollPanel { margin-top:0px }
.map-list-item { display: flex; align-items: flex-start; padding: 10px; border-bottom: 1px solid #ddd;word-break:break-word; }
.map-item-row { display: flex; width: 100%; align-items: flex-start; }
.map-item-text { flex: 1; margin-top:5px; margin-right:1px; display: inline-block; word-wrap: break-word; }
.map-search-container .map-item-text, .map-favourites-container .map-item-text, #mapSearchSubCategoriesList .map-item-text { margin-top:2px;}
.map-item-distance { color:#505A5F; text-align:right; min-width:29%; line-height:1.2; word-wrap: break-word; font-size:14px; top:5px; right:0; position:relative }
.map-item-link { display: flex; align-items: flex-start; text-decoration: none; line-height:1.4; word-wrap: break-word; margin-right: 10px; flex:1 }
.pin-icon { margin-right: 8px;flex-shrink:0 }
.category-paginate-container { border-bottom:1px solid #B1B4B6; }
.category-paginate { display: flex; justify-content: space-between; gap:10px; padding:4px 0 10px 0; min-height:40px }
.layers-errormessage { padding:5px; background-color:#FFE3DF; margin:0 0 15px 0 }
.layers-errormessage p { font-size:.9em; margin:0; padding:10px; color:#942514 }
.scroll-categories-item { display: flex; align-items: flex-start; flex: 1 }
.scroll-categories-item a { display: flex; align-items: center; gap: 6px; flex: 1; text-decoration: none !important; font-weight: bold; font-size: 1.2em; color: #0B0C0C !important; }
.category-arrow { flex-shrink:0;  display: flex; align-items: center }
.category-text { flex: 1; word-wrap: break-word; line-height:1.3; color:#0B0C0C; font-size:1.1rem }
.scroll-categories-options { display: flex; justify-content: flex-end; align-items: flex-start; gap:5px }
.scroll-categories-options img { width: 24px; height: 24px; cursor: pointer }
.remove-listed-item { flex: 0 0 auto; }
.remove-listed-item img { position:relative; top:2px }

.navtab-icons { width: 24px; height: 24px; }
.redbridge-image-17x24 {width: 17px; height:24px }
.redbridge-image-17x17 { width: 17px; height: 17px; }
.redbridge-image-30x30 { width: 30px; height: 30px; }
.redbridge-image-32x32 { width: 32px; height: 32px; }

/* start: modal */
.modalMap-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:1000; }
.modal-map { position: absolute; top:50%; left:50%; transform: translate(-3%, -50%); background:#F3F2F1; padding:15px; border-radius:0; min-width:400px; max-width:80%; z-index:1001; box-shadow:0 5px 15px rgba(0,0,0,0.3); font-size:normal; display:none; }
.modal-map .modalMap-title {width:95%; padding:2px 0 0 10px; margin-bottom: 0px; }
.modal-map .modalcontent-scroll { max-height:300px; padding:10px; overflow-x:auto; word-wrap: break-word; max-width:400px; margin-top:30px}
.modal-map .modalcontent-scroll a { font-size:14px }
.modal-map .close-btn { position:absolute; top:10px; right:10px; text-decoration:none; font-size:36px; line-height:1em; border:none; cursor:pointer; color:#BC0067 }
.modal-map .close-btn:hover { color:#0B0C0C; text-decoration:none; }
.modal-map .close-btn:focus { color:#0B0C0C }
/* end: modal */

/* start: google map modal */
.google-map { position: absolute; top:50%; left:50%; transform: translate(-3%, -50%); background:#F3F2F1; padding:15px; border-radius:0; min-width:400px; max-width:80%; z-index:1001; box-shadow:0 5px 15px rgba(0,0,0,0.3); font-size:normal; display:contents; }
.google-map .google-caption { width:95%; padding:2px 0 0 0; margin-bottom: 0px; color:#505a5f; }
.google-map .google-title { width:95%; padding:2px 0 0 0; margin-bottom: 0px; }
.google-map .google-scroll { max-height:300px; padding:0 10px 0 0; margin:20px 0; overflow-x:auto }
.google-map .google-scroll a { font-size:14px }
.google-map .close-btn { position:absolute; top:6px; right:15px; text-decoration:none; font-size:36px; line-height:1em; border:none; cursor:pointer; color:#BC0067 }
.google-map .close-btn:hover { color:#0B0C0C; text-decoration:none; }
.google-map .close-btn:focus { color:#0B0C0C }
.popup-image-links { padding:10px 10px 10px 0 }
.popup-image-links a { display:inline-block; margin:5px 15px 5px 0 }
.copy-container { display:inline-block; margin:5px 0 0 0; padding:0; float:right }
.copied-link-text { display:none; margin:0; padding:0; vertical-align:top; }
.googledaddress-wrapper { padding:10px 0; margin-bottom:0px }
.googledaddress-wrapper label, .googledaddress-wrapper button, .googledaddress-wrapper input { display:inline-block }
.googledaddress-wrapper label { margin-right:5px }
.googledaddress-wrapper input { width:50% }
.googledaddress-wrapper input.govuk-input { border: 1px solid #B1B4B6; height:39px; }
.googledaddress-wrapper button { margin-left:-3px }
.googledaddress-wrapper .govuk-error-message {
    font-weight: 400;
    color: #ca3535;
    font-size: 1.1875rem;
    line-height: 1.3157894737;
    display: block;
}

.share-content, .copied-link-sharetext { display:none }
.copy-link-btn { color:#BC0067; text-decoration:none }
.copy-shared-link { float:right }
.sharing-link { color:#0B0C0C !important;word-break: break-word; }
.share-top { width:100% }
.share-back { display:inline-block; margin-right:10px; margin-top:5px; vertical-align:top }
.share-top-content { display:inline-block }
/* end: google map modal */

@media (max-width: 960px) {
  .panel-menu a.mapmenu-item { padding:15px 10px; }
  .modal-map { transform: translate(-20%, -50%) }
}

@media (max-width: 768px) {
  .panel-container { width:24rem }
  .panel-menu a.mapmenu-item { padding:7px 10px; }
  .modal-map { transform: translate(-50%, -50%) }
}

@media (max-width: 640px) {
  .panel-wrapper {height:75%;}
  .panel-container { width:19rem }
  .map-search-wrapper { width:auto; }
  .visually-hidden-mobile { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
  .panel-content { flex-wrap: wrap; word-wrap: break-word; padding:5px; }
  .panel-content a, .panel-content button { box-sizing: border-box }
  .map-lock-wrapper .lock-count { top:-2px; right:-2px; min-width:12px; height:12px }
  .map-search-wrapper .search-count { top:-2px; right:-2px; min-width:12px; height:12px }
  .map-container section.mapcanvas-container { min-height:400px }
  .map-item-link { display: flex; flex-direction: column; align-items: flex-start; }
  .map-item-text { display: block; word-wrap: break-word; }
  .map-item-distance { margin-top: 4px; width: 100%; text-align: right; position: static !important; }
  .category-paginate { min-height:unset }
  .modal-map { min-width: 300px; transform: translate(-50%, -50%)  }
}

@media (max-width: 480px) {
  .panel-container { width:15rem }
  .map-lock-wrapper .lock-count { min-width: 8px; height: 8px; font-size: 8px; }
  .map-search-wrapper .search-count { min-width: 8px; height: 8px; font-size: 8px; }
}

.fullscreen-map-button {

    background-color: #fff;
    border: 1px solid #717b87;
    box-shadow: 0 2px 4px rgba(0,0,0,.4);
    color: #000;
    direction: ltr;
    _display: none;
    font-family: Arial,sans-serif;
    font-size: 13px;
    font-weight: bold;
    overflow: hidden;
    margin-top: 5px;
    padding: 1px 6px;
    position: relative;
    text-align: left;
    cursor:default;
}

/**google directions */
table.adp-placemark {
    border-left: none;
    border-right: none
}

table.adp-directions td {
    border-left: none;
    font-family: GDS Transport, arial, sans-serif;
    color: #0b0c0c !important;
    border-right: none
}

.adp-placemark td {
    border: none;
    font-family: GDS Transport, arial, sans-serif;
    color: #0b0c0c !important;
    padding: 5px
}

.adp, .adp table, .adp button {
    font-family: GDS Transport, arial, sans-serif;
    color: #0b0c0c !important
}

.adp-summary {
    font-family: GDS Transport, arial, sans-serif;
    color: #0b0c0c !important
}

.adp-details, .adp-legal {
    color: #0b0c0c !important;
    font-family: GDS Transport, arial, sans-serif;
}

.directions-mode-button {
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 15px;
    margin:5px;
}

.directions-mode-button img {
    width: 32px;
    height: 32px;
}

.directions-mode-button.is-selected {
    background: #D2E2F1;
}

.directions-mode-button:focus {
    outline: 3px solid #ffdd00;
    outline-offset: 2px;
}

/**end google directions */
/**start info window popup */
.google-scroll {
    font-family: GDS Transport, arial, sans-serif;
    color: #0b0c0c;
    font-weight: 400;
    font-size: 14px
}

.google-scroll ul {
    font-family: GDS Transport, arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 400;
    line-height: 1.3157894737;
    margin-top: 0;
    margin-bottom: 15px;
    padding-left: 0;
    list-style-type: none;
    padding-left: 20px;
    list-style-type: disc;
}

.google-scroll ul li {
    font-family: GDS Transport, arial, sans-serif;
    font-size: 14px;
}

@media (min-width: 40.0625em) {
    .google-scroll ul {
        margin-bottom: 20px;
    }
}

.googledaddress-wrapper label, .googledaddress-wrapper button, .googledaddress-wrapper input {
    font-family: GDS Transport, arial, sans-serif;
    font-weight: 400;
    font-size: 16px;
    display: inline-block;
}

.google-map .google-caption {
    font-family: GDS Transport, arial, sans-serif;
    color: #484949;
}
.map-info-close {
    position: absolute;
    top: 8px;
    right: 8px;
    border: 0;
    background: transparent;
    font-size: 36px;
    line-height: 1em;
    cursor: pointer;
    color: #89004B;
}
.map-info-close:hover {
    color: #0B0C0C;
}
.map-info-close:focus,
.map-info-close:focus-visible {
    color: #0B0C0C;
    outline: 3px solid #ffd400;
    outline-offset: 2px;
}
/**end info window popup */
/**start street view */
.mapcanvas-container {
    position: relative;
}

.custom-360-btn {
    position: absolute;
    width: 80px;
    height: 60px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    z-index: 5;
}

.custom-360-btn img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.streetview-360-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    background: transparent;
    pointer-events: none;
}

@media (max-width: 768px) {
    .custom-360-btn {
        left: auto;
        right: 70px;
        bottom: 20px;
    }
}
/**end street view */
/* "View on Google Maps" */
#map_canvas .gm-iv-address-link > a {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
#map_canvas .gm-iv-address-link > a:hover {
    color: #ffffff !important;
    text-decoration-thickness: 2px;
}
#map_canvas .gm-iv-address-link > a:focus-visible {
    color: #0b0c0c !important;
    background-color: #ffdd00 !important;
    outline: 3px solid #ffdd00;
    outline-offset: 0;
}
/* end "View on Google Maps" */