﻿/*$background-color: #CAE3E0;
$footer-bg: #BFD8D5;
$brand-pink: #DE3251;
$brand-gold: #DA932B;
$dark-gold: #98671E;

$pink: #DE3251;
$dark-pink: #9B2339;*/
.hotel-map-block .google-map {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  height: 720px;
}
@media (max-width: 991px) {
  .hotel-map-block .google-map {
    height: 560px;
    /*overflow-x: scroll !important;
    width: 600px;*/
  }
}
.hotel-map-block .google-map-overlay {
  position: absolute;
  background-color: #fff;
  padding: 80px;
  top: 50%;
  width: 640px;
  transform: translateY(-50%);
  font-family: "CircularBook", sans-serif;
  font-size: 24px;
  z-index: 1;
}
@media (max-width: 991px) {
  .hotel-map-block .google-map-overlay {
    position: relative;
    padding: 20px;
    font-size: 18px;
    width: unset;
    background-color: unset;
    top: unset;
    transform: unset;
  }
}
.hotel-map-block .google-map-overlay--address {
  font-size: 28px;
  font-family: "CircularPro-bold";
  padding: 10px 0;
}
@media (max-width: 991px) {
  .hotel-map-block .google-map-overlay--address {
    font-size: 14px;
  }
}
.hotel-map-block .google-map-overlay--address br {
  content: " ";
}
.hotel-map-block .google-map-overlay--address br:after {
  content: " ";
}
.hotel-map-block .google-map-overlay--address a.google-map-link {
  font-size: 18px;
}
@media (max-width: 991px) {
  .hotel-map-block .google-map-overlay--address a.google-map-link {
    font-size: 16px;
  }
}
.hotel-map-block .google-map-overlay span.train-station-label, .hotel-map-block .google-map-overlay span.underground-station-label, .hotel-map-block .google-map-overlay a.train-station-label, .hotel-map-block .google-map-overlay a.underground-station-label {
  font-size: 14px;
  font-family: "CircularBook", sans-serif;
  display: flex;
  padding: 3px 0;
  color: inherit;
}
.hotel-map-block .google-map-overlay span.train-station-label:before, .hotel-map-block .google-map-overlay span.underground-station-label:before, .hotel-map-block .google-map-overlay a.train-station-label:before, .hotel-map-block .google-map-overlay a.underground-station-label:before {
  width: 16px;
  height: 14px;
  margin-right: 10px;
  content: "";
}
.hotel-map-block .google-map-overlay .train-station-label:before {
  background: url("/Assets/img/train-station-icon.svg") no-repeat;
}
.hotel-map-block .google-map-overlay .underground-station-label:before {
  background: url("/Assets/img/underground-station-icon.svg") no-repeat !important;
}
.hotel-map-block .google-map-overlay .tripadvisor-panel {
  margin-top: 30px;
  /*#CDSROWLOGO400 {
      img {
          width: 116px;
          height: 33px;

          @media (max-width: 380px) {
              width: 95px !important;
          }
      }
  }*/
}
@media (max-width: 991px) {
  .hotel-map-block .google-map-overlay .tripadvisor-panel {
    margin-top: 20px;
    margin-bottom: 10px;
  }
}
@media (max-width: 380px) {
  .hotel-map-block .google-map-overlay .tripadvisor-panel #CDSRATINGWIDGET400 {
    max-width: 320px !important;
  }
}
.hotel-map-block .google-map-overlay .tripadvisor-panel #CDSRATINGWIDGET524, .hotel-map-block .google-map-overlay .tripadvisor-panel .cdsROW.wide {
  /*@include breakpoint-down-lg {
      height: 100% !important
  }*/
}
@media (max-width: 380px) {
  .hotel-map-block .google-map-overlay .tripadvisor-panel #CDSRATINGWIDGET524, .hotel-map-block .google-map-overlay .tripadvisor-panel .cdsROW.wide {
    max-width: 320px !important;
  }
}
.hotel-map-block .google-map-overlay .tripadvisor-panel .logo img {
  width: 116px;
  height: 33px;
}
@media (max-width: 380px) {
  .hotel-map-block .google-map-overlay .tripadvisor-panel .logo img {
    width: 95px !important;
  }
}
.hotel-map-block .google-map-overlay .tripadvisor-panel .cdsRating {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.hotel-map-block .google-map-overlay .tripadvisor-panel .cdsRating .ui_bubble_rating {
  display: block;
  padding: 5px 0;
}
.hotel-map-block .google-map .infoBox {
  width: auto !important;
}
.hotel-map-block .google-map .map-label {
  background: #E83352;
  color: #fff;
  font-size: 16px;
  padding: 10px 15px;
  transform: translate(0px, calc(-100% - 40px));
}
.hotel-map-block .google-map .map-label.train-station {
  background: #C9E3E0;
  color: #000;
  transform: translate(0px, calc(-100% - 15px));
}
.hotel-map-block .google-map .map-label.train-station:after {
  content: "";
  border-width: 10px 0px 10px 10px;
  border-color: transparent transparent transparent #C9E3E0 !important;
  border-style: solid;
  width: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(50%);
}
.hotel-map-block .google-map .map-label.vertical-reverse {
  transform: translate(0px, 20px);
}
.hotel-map-block .google-map .map-label.vertical-reverse:after {
  content: "";
  border-width: 10px 0px 10px 10px;
  border-color: transparent transparent transparent inherit;
  border-style: solid;
  width: 0;
  position: absolute;
  top: 0;
  bottom: unset;
  left: 0;
  transform: translateY(-50%);
}
.hotel-map-block .google-map .map-label:after {
  content: "";
  border-width: 10px 0px 10px 10px;
  border-color: transparent transparent transparent #E83352;
  border-style: solid;
  width: 0;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateY(50%);
}
.hotel-map-block .google-map .map-label-popup {
  background-color: #fff;
  height: 100%;
  width: 100%;
  padding: 25px 30px 25px 20px;
  overflow-y: auto;
  transform: translate3d(0%, calc(-100% - 100px), 0px);
  max-height: 300px;
  box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.15);
  display: none;
  z-index: 100;
}
.hotel-map-block .google-map .map-label-popup.vertical-reverse {
  transform: translate3d(0%, -100%, 0px);
}
.hotel-map-block .google-map .map-label-popup .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: block;
  z-index: 100;
}
.hotel-map-block .google-map .map-label-popup .close-button:after {
  content: "";
  display: block;
  position: relative;
  background-image: url(/Assets/img/close-button-black.svg);
  background-size: 13px;
  width: 13px;
  height: 13px;
}
.hotel-map-block .google-map .map-label-popup p {
  font-size: 14px;
}
.hotel-map-block .google-map .map-label-popup p:last-of-type {
  margin-bottom: 0 !important;
}
.hotel-map-block .marker-label {
  text-align: center;
  width: max-content;
  padding: 5px 10px;
  background-color: #FCC41F;
  font-size: 16px;
  transform: translateX(-43%);
  position: absolute;
  bottom: -37px;
  left: 0;
  letter-spacing: 0.6px;
  border-radius: 30px;
}
.hotel-map-block .mapboxgl-popup {
  z-index: 9999;
}
.hotel-map-block .mapboxgl-popup-content {
  background-color: #fff;
  height: 100%;
  width: 100%;
  padding: 25px 30px 25px 20px;
  overflow-y: auto;
  max-height: 300px;
  box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0.15);
  z-index: 100;
}
.hotel-map-block .mapboxgl-popup-content.vertical-reverse {
  transform: translate3d(0%, -100%, 0px);
}
.hotel-map-block .mapboxgl-popup-content .close-button {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 15px;
  height: 15px;
  cursor: pointer;
  display: block;
  z-index: 100;
}
.hotel-map-block .mapboxgl-popup-content .close-button:after {
  content: "";
  display: block;
  position: relative;
  background-image: url(/Assets/img/close-button-black.svg);
  background-size: 13px;
  width: 13px;
  height: 13px;
}
.hotel-map-block .mapboxgl-popup-content p {
  font-size: 14px;
}
.hotel-map-block .mapboxgl-popup-content p:last-of-type {
  margin-bottom: 0 !important;
}
.hotel-map-block .mapboxgl-popup-content a:active, .hotel-map-block .mapboxgl-popup-content a:focus {
  outline: 0;
  border: none;
  -moz-outline-style: none;
}
