.gm-style, .leaflet-container {
  font-family: $safe-font-family-sans-serif !important;
  .fonts-loaded & {
    font-family: $font-family-base !important;
  }
  html[lang|="ar"].fonts-loaded & {
    font-family: $arabic_text_font, $safe-font-family-sans-serif !important;
  }
  html[lang|="fa"].fonts-loaded & {
    font-family: $farsi_text_font, $safe-font-family-sans-serif !important;
  }
  html[lang|="he"].fonts-loaded & {
    font-family: $hebrew_text_font, $safe-font-family-sans-serif !important;
  }
  html[lang|="ja"].fonts-loaded & {
    font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", $safe-font-family-sans-serif !important;
  }
}



/* Pin mapa dispo de hoteles sin foto */

.markerIcon {
  font-size: $font-size-base;
  border: 1px solid $interactive-color;
  background: #FFFFFF;
  border-radius: $border-radius-large;
  height: 40px;
  &__price {
    color: $interactive-color;
    margin: 10px;
    white-space: nowrap;
    line-height: 18px;
    .markerIcon.active &,
    &:hover {
      color: #FFFFFF;
    }
  }
  &:before, &:after {
    content: "";
    position: absolute;
    top: 97%;
    left: 50%;
    border-style: solid;
  }
  &:before {
    margin-left: -7px;
    border-width: 7px;
    border-color: #FFFFFF transparent transparent transparent;
    z-index: 1;
  }
  &:after {
    margin-left: -8px;
    border-width: 8px;
    border-color: $interactive-color transparent transparent transparent;
  }
  &.active,
  &:hover {
    border: 1px solid #FFFFFF;
    background: $interactive-color;
    .markerIcon__price {
      color: #FFFFFF;
    }
  }
  &.active:before,
  &:hover::before {
    content: " ";
    border-color: $interactive-color transparent transparent transparent;
  }
  &.active:after,
  &:hover::after {
    content: " ";
    border-color: #FFFFFF transparent transparent transparent;
  }
}

.markerCluster {
  border-radius: 50%;
  text-align: center !important;
  &:before, &:after {
    content: "";
    display: none !important;
  }
}

.markerIcon.markerCluster {
  box-shadow: 0 0 0 5px rgba(188, 87, 21, 0.3);
  background-color: #bc5715;
  width: 30px;
  height: 30px;
  border: 0;
  .markerIcon__price {
    color: #FFFFFF;
    line-height: 30px;
    margin: 0;
  }
}



/* estilos bocadillo hoteles en mapa*/
.bubbleLink {
  text-decoration: none;
  &:hover {
    text-decoration: none;
  }
}

.windowBubble {
  display: flex;
  border: 1px solid $colorBordes;
  box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12);
  border-radius: 6px;
  &__info {
    flex: 1;
    padding: 10px;
  }
  &__title {
    @include medium-weight;
    font-size: 18px;
    line-height: 20px;
    color: $brand-grey-dark;
    margin: 0;
    padding-right: 4px;
  }
  &__reviews {
    color: $brand-copy-light;
    margin: 5px 0;
    min-height: 18px;
    .rating {
      vertical-align: text-bottom;
    }
  }
  &__img {
    width: 105px;
    border-radius: 6px 0 0 6px;
    object-fit: fill;
  }
}

.windowBubblePrice {
  text-align: right;
  line-height: 20px;
  color: $brand-grey-dark;
  &__oldPrice {
    font-size: 14px;
    color: $brand-copy-light;
    &--red {
      color: $brand-red;
    }
  }
  &__currentPrice {
    @include medium-weight;
    font-size: 20px;
  }
}

/*MODAL MAPA DISPO DE HOTELES */

/*rtl:ignore*/
[dir='rtl'] .map-container .leaflet-top.leaflet-left {
  right: 20px;
  left: auto;
}
/*rtl:ignore*/
[dir='rtl'] .map-container .leaflet-bottom.leaflet-left {
  right: 20px;
  left: auto;
}
/*rtl:ignore*/
[dir='rtl'] .map-container .leaflet-bottom {
  right: auto;
  left: 0;
}

.dst_mainmap_container {
  .modal-body {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    overflow: hidden !important;
    text-align: left;
  }
  .button-map-close {
    position: absolute;
    z-index: 2001;
    right: 35px;
    top: 15px;
    padding: 9px 12px;
    border: solid 1px $brand-brown-medium;
    background-color: $brand-white;
    @media (max-width: $screen-md-max) {
      left: 15px;
      right: auto;
    }

    .icon {
      margin-right: 0;
      width: 16px;
      height: 19px;
      vertical-align: middle;
    }
  }
  .map-container {
    padding: 0;
    flex: 1 0 auto;
    position: relative;
    overflow-y: auto;
    z-index: 2000;
  }
  &.modal .map-list-container {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .bubble-wrapper {
    bottom: 30px;
  }
  .filtersButton {
    position: fixed;
    z-index: 1000;
    right: 15px;
    top: 15px;
    @media (min-width: $screen-lg-min) {
      display: none;
    }
    .icon {
      width: 16px;
      height: 16px;
      &, & * {
        fill: $brand-white;
      }
    }
    span {
      color: $brand-white;
    }
  }
  .zonesearchbutton-container {
    position: absolute;
    width: 100%;
    z-index: 1000;
    bottom: 40px;
    text-align: center;
    /* temporal hasta que se programe la funcionalidad */
    display: none;
    @media (min-width: $grid-float-breakpoint) {
      display: none;
    }
    @media (max-width: $grid-float-breakpoint) and (orientation: landscape) {
      bottom: 30px;
    }
  }
  .switch-container {
    position: absolute;
    display: inline-block;
    background-color: $brand-white;
    z-index: 1000;
    left: 25px;
    bottom: 45px;
    padding: 9px 15px;
    border-radius: 4px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12);
    /* temporal hasta que se programe la funcionalidad */
    display: none;
    @media (max-width: $screen-md-max) {
      display: none;
    }
    .switch-text {
      margin-left: 5px;
    }
  }
  .filtros-layer {
    z-index: 2001;
  }
  .filters-container {
    position: relative;
    z-index: 2002;
    @media (max-width: $screen-md-max)  {
      position: absolute;
    }
    @media (min-width: $screen-lg-min)  {
      width: 320px;
    }
  }
  .dst-wgt-filters {
    overflow: hidden;
    height: 100%;
    z-index: 101;
    position: relative;
  }
  .filters--full {
    border: 0;
    overflow-y:auto;
    margin-top: 0;
    height: 100%;
    @media (min-width: $screen-lg-min)  {
      margin-top: 50px;
      height: calc(100% - 50px);
      &::-webkit-scrollbar {
        -webkit-appearance: none;
        width: 7px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 4px;
        background-color: rgba(0,0,0,.5);
        -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
      }
    }
  }
  .filtersHeader {
    margin: 0;
    padding: 15px;
    height: 50px;
    box-shadow: 0 2px 7px 0 rgba(0, 0, 0, 0.12);
    background-color: $brand-white;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 30;
  }
  .leaflet-control-attribution {
    margin-right: 25px;
    @media (max-width: $grid-float-breakpoint) {
      width: 190px;
    }
    @media (min-width: 1024px) {
      margin-right: 40px;
    }
    @media (max-width: 1024px) {
      margin-right: 35px;
    }
  }
  .leaflet-top.leaflet-left {
    @media (max-width: 1200px) {
      display: none;
    }
  }
  .map-legal-info {
    right: 310px;
    position: absolute;
    z-index: 1000;
    bottom: 0;
    cursor: pointer;
    @media (max-width: $grid-float-breakpoint) {
      right: 10px;
    }
    .icon {
      width: 16px;
      height: 16px;
      vertical-align: middle;
      &, & * {
        fill: $brand-copy-light;
      }
    }
  }
}

/* map skeleton */

// brillo
$brillo-image: linear-gradient( 90deg, rgba($brand-grey-light, 0), rgba($brand-grey-light, 0.5) 50%, rgba($brand-grey-light, 0) 100% );
$brillo-size: 50% 400%;
$brillo-position-start: -150% 0;
$brillo-position-end: 150% 0;

$marker-image: url(/headers/ilusion/sunrise/dist/svg/map-availability-marker.svg);
$marker-size: 55px 45px;

// MARKER 1
$marker1-position-desktop: 100px 100px;
$marker1-position-mobile: 48px 44px;

// MARKER 2
$marker2-position-desktop: 373px 72px;
$marker2-position-mobile: 192px 204px;

// MARKER 3
$marker3-position-desktop: 654px 110px;
$marker3-position-mobile: 66px 206px;

// MARKER 4
$marker4-position-desktop: 208px 309px;
$marker4-position-mobile: 151px 303px;

// MARKER 5
$marker5-position-desktop: 500px 285px;
$marker5-position-mobile: 252px 385px;

// MARKER 6
$marker6-position-desktop: 656px 380px;
$marker6-position-mobile: 53px 456px;

// MARKER 7
$marker7-position-desktop: 388px 424px;
$marker7-position-mobile: 288px 524px;


// BACKGROUND
$mapbg-image: url(/headers/ilusion/sunrise/dist/svg/map-availability-bg.svg);
$mapbg-size: cover;
$mapbg-position-desktop: 0 0;

$background-image-map: $brillo-image, $marker-image, $marker-image, $marker-image, $marker-image, $marker-image, $marker-image, $marker-image, $mapbg-image;
$background-size-map: $brillo-size, $marker-size, $marker-size, $marker-size, $marker-size, $marker-size, $marker-size, $marker-size, $mapbg-size;
$background-position-map-desktop: /*falta la variable de posicion del brillo*/ $marker1-position-desktop, $marker2-position-desktop, $marker3-position-desktop, $marker4-position-desktop, $marker5-position-desktop, $marker6-position-desktop, $marker7-position-desktop, $mapbg-position-desktop;
$background-position-map-mobile: /*falta la variable de posicion del brillo*/ $marker1-position-mobile, $marker2-position-mobile, $marker3-position-mobile, $marker4-position-mobile, $marker5-position-mobile, $marker6-position-mobile, $marker7-position-mobile, $mapbg-position-desktop;


#map-list-container {
  &:empty {
    display: block;
    opacity: 1;
    margin: auto;
    max-width: 100%;
  }
  background-image: $background-image-map;
  background-size: $background-size-map;
  background-repeat: no-repeat;
  @media (max-width: $grid-float-breakpoint-max) {
    background-position: $brillo-position-start, $background-position-map-mobile;
    animation: shinemapmobile 2s infinite;
  }
  @media (min-width: $grid-float-breakpoint) {
    background-position: $brillo-position-start, $background-position-map-desktop;
    animation: shinemapdesktop 2s infinite;
  }
}
@keyframes shinemapdesktop {
  to {
    /*rtl:ignore*/
    background-position: $brillo-position-end, $background-position-map-desktop;
  }
}
@keyframes shinemapmobile {
  to {
    /*rtl:ignore*/
    background-position: $brillo-position-end, $background-position-map-mobile;
  }
}