/* @font-face {
  font-family: 'avenirbook';
  src: url('/planta_iframe/css/webfont/avenir_45_book-webfont.woff2') format('woff2'),
       url('/planta_iframe/css/webfont/avenir_45_book-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

} */
/*  @font-face {
  font-family: 'avenirmedium';
  src: url('css/webfont/avenir_65_medium-webfont.woff2') format('woff2'),
       url('/planta_iframe/css/webfont/avenir_65_medium-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

} */
/*  @font-face {
  font-family: 'avenirheavy';
  src: url('/planta_iframe/css/webfont/avenir_85_heavy-webfont.woff2') format('woff2'),
       url('/planta_iframe/css/webfont/avenir_85_heavy-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;

} */
@font-face {
  font-family: 'avenirbook';
  src: url('/planta_iframe/css/webfont/Avenir-Book.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'avenirmedium';
  src: url('/planta_iframe/css/webfont/Avenir-Medium.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}

@font-face {
  font-family: 'avenirheavy';
  src: url('/planta_iframe/css/webfont/Avenir-Heavy.woff') format('woff');
  font-weight: normal;
  font-style: normal;

}


.f_reg {
  font-family: 'avenirbook';
}
.f_med {
  font-family: 'avenirmedium';
}
.f_bold {
  font-family: 'avenirheavy';
}
.f_reg_avenir {
  font-family: 'avenirbook';
}
.f_bold_avenir {
  font-family: 'avenirheavy';
}

html, body {
  margin: 0;
  padding: 0;
}

._transform(@x, @y, @z) {
  -moz-transform: translate(@x, @y);
  -webkit-transform: translate(@x, @y);
  transform: translate(@x, @y);
}


/*UTILS*/
@selectedColor: #00cd2f;
@grey: #F4F4F4;
@dark_grey: #1E1E1E;
@mobile: 600px;
@desktop: 1024px;
@ipadPortrait: 768px;

.boxsizing{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;  
}
._sprite(@left, @top){
    background-position:-@left -@top;
}
.rounded(@size){
    -moz-border-radius: @size;border-radius: @size;}

/*ICONS*/
.p_icon {
  width: 42px;
  height: 42px;
  cursor: pointer;
  .rounded(100%);
  &:hover,
  &.selected { }
}
.p_sprite {
  background-image:url('/planta_iframe/img/sprite.png');background-repeat:no-repeat;background-size:400px 400px;

  &.icon_escadas {
    width: 40px;
    height: 40px;
    ._sprite(0px, 0px);
  }
  &.icon_escadas_rolantes {
    width: 40px;
    height: 40px;
    ._sprite(40px, 0px);
  }
  &.icon_elevador {
    width: 40px;
    height: 40px;
    ._sprite(80px, 0px);
  }
  &.icon_arrow_up_ {
    width: 40px;
    height: 40px;
    ._sprite(120px, 0px);
  }
  &.icon_arrow_down_ {
    width: 40px;
    height: 40px;
    ._sprite(160px, 0px);
  }
  &.icon_plus {
    width: 40px;
    height: 40px;
    ._sprite(0px, 40px);
  }
  &.icon_minus {
    width: 40px;
    height: 40px;
    ._sprite(40px, 40px);
  }
  &.icon_arrow_left {
    width: 40px;
    height: 40px;
    ._sprite(80px, 40px);
  }
  &.icon_arrow_right {
    width: 40px;
    height: 40px;
    ._sprite(120px, 40px);
  }
  &.icon_close_ {
    width: 40px;
    height: 40px;
    ._sprite(160px, 40px);
  }
  &.icon_finder {
    width: 40px;
    height: 40px;
    ._sprite(200px, 40px);
  }
  &.icon_info {
    width: 40px;
    height: 40px;
    ._sprite(0px, 80px);
  }
  &.icon_wc {
    width: 40px;
    height: 40px;
    ._sprite(40px, 80px);
  }
  &.icon_wc_defic {
    width: 40px;
    height: 40px;
    ._sprite(80px, 80px);
  }
  &.icon_fraldario {
    width: 40px;
    height: 40px;
    ._sprite(120px, 80px);
  }
  &.icon_mb {
    width: 40px;
    height: 40px;
    ._sprite(160px, 80px);
  }
  &.icon_pagamento {
    width: 40px;
    height: 40px;
    ._sprite(200px, 80px);
  }
}

/*MAPA STYLES*/
.mapa {
  position: relative;
  width: ~'calc(100% - 336px)';
  border: 0.772px solid #6D6968;
  border-left: 0;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  .fLeft { float: left; }
  .fRight { float: right; }
}
.mapa__container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
  .boxsizing;
}
.mapa--full_screen {
  /*
  position: fixed;
  z-index: 100;
  width: 100%;
  height: ~"calc(100%)";
  left: 0;
  background-color: #fff;
  .mapa__container { height: ~"calc(100% - 80px)"}
  */
}
.mapa--web_mobile {

}
.mapa--ficha_loja {
  .mapa__container { height: 400px; }
  .map__controlls_path_bt { display: none; }
}
.mapa, 
.mapa img {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.mapa__viewport {
  position: absolute;
  width: 1024px;
  height: 768px;
  z-index: 9999;
  pointer-events: auto;
}
.mapa__pisos {
  display: none;
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.2s ease;
  transform-origin: 0 0;

  svg { 
    transition: transform 0.2s ease;
    transform-origin: 0 0;
  }
}
.mapa__controls {
  position: absolute;
  z-index: 10;
  top: 20px;
}
.mapa__controls-right { right: 20px; }
.mapa__controls-bottom { 
  top: auto;
  bottom: 20px; 
}
.mapa__display_piso {}
.mapa__loja {
  cursor: pointer;
}
.mapa__loja [id*='area'] {
  stroke: #fff;
}
.piso {
  position: absolute;
}
.mapa__overbox {
  width: 100%;
  max-width: 279px;
  display: flex;
  flex-direction: column;
  .boxsizing;
  gap: 18px;

  .icon_close_ {
    position: absolute;
    right: 10px;
    margin-top: 0px;
    cursor: pointer;
  }
}
.mapa__overbox--open {
  opacity: 1;
  visibility: visible;
}
.mapa__cbo_lojas {
  position: relative;

  select {
    display: block;
    float: left;
    width: 100%;
    height: 60px;
    margin-right: 1%;
    font-size: 16px;
    .f_reg_avenir;
    color: @dark_grey;
    opacity: 0.5;
    /* text-transform: uppercase; */
    background-color: @grey;
    border: 0;
    border-radius: 5px;
    padding: 20px;
    appearance: none; /* Disable the default arrow */
    -webkit-appearance: none; /* For WebKit-based browsers */
    -moz-appearance: none; /* For Firefox */
    background-image: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 9L12 15L18 9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px;
    cursor: pointer;

    &:first-of-type {
      margin-top: 25px; 
      margin-bottom: 18px; 
    }
    &:last-of-type { margin-bottom: 40px; }
  }
  .select {
    background-color: @grey;
    padding: 12px 20px;
    color: rgba(30, 30, 30, 0.5);
    font-size: 13px;
    .f_reg_avenir;
    border-radius: 5px;
    line-height: 24px;
    cursor: pointer;
    position: relative;
    height: 48px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;

    span {
      display: block;
      .f_bold_avenir;
      font-size: 16px;
      color: @dark_grey;
    }
  }
  ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 0;
    max-height: 270px;
    width: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 9;
    display: none;

    li,option {
      background-color: @grey;
      padding: 15px;
      cursor: pointer;
      .f_bold_avenir;
      font-size: 16px;
      color: #1e1e1e;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out;

      &:first-of-type { display: none; }
      &:hover {
        background-color: @dark_grey !important;
        color: #fff !important;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
      }
      &.highlight {
        background-color: @dark_grey !important;
        color: #fff !important;
      }
    }
    &.active { display: block; }
    /* scrollbar-color: @dark_grey @grey; */
  }
  /* #lojaDestino2 { top: 155px; } */
  button {
    margin-top: 12px;
    padding: 9px 20px;
    display: block;
    float: left;
    width: 100%;
    height: 43px;
    background-color: @dark_grey;
    opacity: 0.4;
    .f_reg;
    text-transform: uppercase;
    color: #fff;
    border: 0;
    max-width: 222px;
    text-align: left;
    position: relative;
    line-height: 28px;
    cursor: pointer;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;

    &:hover { 
      opacity: unset;
      -webkit-transition: all .2s ease-in-out;
      -moz-transition: all .2s ease-in-out;
      transition: all .2s ease-in-out; 
    }
    &::after,
    &::before {
      background-image: url(/planta_iframe/arrow.svg);
      background-repeat: no-repeat;
      background-size: contain;
      content: "";
      height: 15px;
      margin-top: -7px;
      position: absolute;
      right: 20px;
      top: 50%;
      width: 46px;
    }
  }
}
@media only screen and (max-width: @mobile){
  .mapa__cbo_lojas {
    select { margin-bottom: 10px; }
  }
}

.container_flex {
  display: flex;

  .percurso {
    position: relative;
    width: 273px;
    height: ~'calc(100vh - 122px)';
    padding: 60px 30px;
    border: 0.772px solid #6D6968;

    .tit {
      color: @dark_grey;
      font-size: 24px;
      line-height: 32px;
      .f_bold_avenir;
      margin-top: 20px;
      margin-bottom: 15px;
    }
    .direcoes {
      margin-top: 80px;

      span {
        color: @dark_grey;
        .f_reg_avenir;
        font-size: 13px;
        line-height: 24px;
        opacity: 0.5;
      }
    }
    .container_arrows {
      display: flex;
      gap: 8px;

      svg { 
        cursor: pointer;
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
        opacity: 0.4;

        &:hover {
          opacity: 1;
          -webkit-transition: all .2s ease-in-out;
          -moz-transition: all .2s ease-in-out;
          transition: all .2s ease-in-out;

          g { opacity: 1; }
        }
      }
      div:last-of-type { svg { transform: rotate(180deg) } }
    }
  }
}
@media only screen and (max-width: 1018px){
  .map__controlls_bottom { 
    height: 110px !important; 
    align-items: center;
  }
  .map__controlls_bottom--left.open {
    margin-right: 10px;
    gap: 8px 0;
  }
}
@media only screen and (max-width: @ipadPortrait){
  .container_flex {
    flex-direction: column-reverse;

    .percurso {
      height: 100%;
      padding: 0px 30px;
      border: 0;

      .tit { 
        margin-top: 25px;
        margin-bottom: 10px; 
      }
    }
    .mapa {
      height: ~'calc(100vh - 330px)';
      width: ~'calc(100vw - 1px)';
    }
    .direcoes { display: none; }
  }
  .map__controlls_bottom--right {
    .p_icon { display: none; }
  }
  .mapa__cbo_lojas select:first-of-type {
    margin-top: 0;
    margin-bottom: 18px;
  }
  .mapa__cbo_lojas select:last-of-type {
    margin-bottom: 18px;
  }
  .show_icon { margin-right: 0 !important; }
  .map__controlls_bottom--left .p_icon { margin-right: 8px !important; }
  .map__controlls_bottom--left .show_icon::after { right: 38px; }
  .select { display: none !important; }
  #lojaOrigem,
  #lojaDestino { display: block !important; }
  .mapa__overbox { gap: 0; }
}

.mapa__trip_display {
  margin-top: 60px;

  i { font-style: normal; }
  button {
    background-color: #000;
    border: 0;
  }
  span {
    &:first-of-type {
      color: #1e1e1e;
      .f_reg_avenir;
      font-size: 13px;
      line-height: 24px;
      opacity: 0.5;
    }
    &:last-of-type {
      color: #1e1e1e;
      font-size: 24px;
      line-height: 32px;
      .f_bold_avenir;
      margin-top: 20px;
      margin-bottom: 15px;
      display: block;
    }
  }
}
@media only screen and (max-width: @mobile){
  .mapa__overbox {
    .icon_close_ { display: none; }
  }
  .mapa__trip_display {
    width: 100%;
  }
  .mapa__cbo_lojas {
    select,
    button,
    .mapa__trip_display {
      width: 100%;
    }
  }
}
.map__controlls_topo {
  width: fit-content;
  height: 265px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.map__controlls_topo--left {
  margin-left: 20px;
  margin-top: 20px;
  float: left;
  .p_icon { 
    float: left; 
    margin-right: 5px;
  }
}
.map__controlls_topo--right {
  margin-top: 30px;
  margin-right: 30px;

  .piso__display {
    width: 70px;
    margin-top: 10px;
    font-size: 18px;
    .f_med;
    text-align: center;
  }
  .icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 15px;
    border-radius: 26.906px;
    background: #FFF;
    box-shadow: 0 5.906px 9.844px 0 rgba(0, 0, 0, 0.25);
    gap: 6.23px;
    color: @dark_grey;
    .f_bold_avenir;
    font-size: 24px;
    line-height: 32px;
    cursor: pointer;

    .sep {
      width: 23px;
      height: 0.656px;
      background: #CCC;
    }
    .selected { opacity: 1 !important; }
    .fLeft { opacity: 0.5; }
  }
}
.map__controlls_path_bt {
  position: absolute;
  left: 50%;
  height: 80px;
  margin-left: -120px;
  padding: 0 20px;
  line-height: 80px;
  vertical-align: middle;
  font-size: 18px;
  .f_med;
  text-transform: uppercase;
  cursor: pointer;

  .icon_finder {
    display: inline-block;
    position: relative;
    top: 10px;
    margin-left: 5px;
  }
}
@media only screen and (max-width: @mobile){
  .map__controlls_topo--left { display: none; }
  .map__controlls_path_bt {
    left: 0;
    margin-left: 0;
    span { display: none; }
  }
}
.map__controlls_bottom {
  display: flex;
  flex-direction: row-reverse;
  position: absolute;
  width: 100%;
  max-width: 710px;
  height: 80px;
  bottom: 20px;
  z-index: 999999;
  right: 0;
  overflow: hidden;
  pointer-events: none;

  .icons_mask { overflow: hidden; }
}
.map__controlls_bottom--left {
  float: right;
  margin-top: 20px;
  margin-right: 60px;
  display: flex;
  transform: translateX(115%);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  margin-right: 30px;
  flex-wrap: wrap;
  pointer-events: auto;

  .show_icon {
    width: 28px !important;
    height: 28px !important;
    padding: 10px 10.5px 10px 10px;
    background-color: #fff;
    box-shadow: 0 5.906px 9.844px 0 rgba(0, 0, 0, 0.25);

    &::after {
      content: '';
      display: none;
      position: absolute;
      right: 60px;
      background-color: #FF894E;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }
    &.show-after::after {
      display: inline-block;
    }
  }

  .p_icon {
    float: left;
    margin-right: 20px;

    &:last-of-type { margin-right: 0; }
    svg {
      width: 40px;
      height: 40px;

      path, polygon {
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
      }
      .white { 
        stroke-width: 0;
        fill: #1e1e1e; 
      }
      .black {
        stroke: #fff; 
        fill: #e6e6e6;
        stroke-width: 31.42px; 
      }
      .black_parque { fill: #fff; }
    }
    svg:hover {
      
      path, polygon { 
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;
      }
      .white { fill: #fff; }
      .black {
        fill: #000;
        stroke: #000;
      }
      .black_parque { fill: #000; }
    }
    &.selected {
      svg {
        -webkit-transition: all .2s ease-in-out;
        -moz-transition: all .2s ease-in-out;
        transition: all .2s ease-in-out;

        .white { fill: #fff; }
        .black {
          fill: #000;
          stroke: #000;
        }
        .black_parque { fill: #000; }
      }
    }
  }

  &.close_icon {
    margin-top: 12px;
    margin-right: 20px;
    transform: none;
    opacity: 1;

    .p_icon { 
      margin-right: 30px;
      
      svg {
        width: 28px !important;
        height: 28px !important;
      }
    }
  }

  &.open {
    transform: translateX(0);
    opacity: 1;
    margin-left: 15px;
  }
}
.mapa__loja_nome {
  position: absolute;
  color: #1e1e1e;
  top: 0;
  right: 105px;
  margin-top: 30px;
  width: 250px;
  font-size: 15px;
  .f_med;
  text-align: center;
  background-color: #fff;
  border-radius: 5px;
  z-index: 9999;
  box-shadow: 0 5.906px 9.844px 0 rgba(0, 0, 0, 0.25);
  padding: 10px;
  display: none;

  &.open { display: block; }
}
@media only screen and (max-width: @mobile){
  .mapa__loja_nome { display: none !important; }
  .map__controlls_bottom {
    margin-top: -80px; 
  }
  /* .map__controlls_bottom--left { display: none; } */
}
.map__controlls_bottom--right {
  margin-top: 30px;
  margin-right: 33px;
  display: flex;
  flex-direction: column;
  gap: 10px;

  .p_icon {
    float: left;
    margin-left: 5px;
  }
  .zoomin,
  .zoomout {
    padding: 10px;
    background-color: #fff;
    box-shadow: 0 5.906px 9.844px 0 rgba(0, 0, 0, 0.25);
    width: 21px;
    height: 21px;
  }
}
.map__controlls_path_bt.selected,
.map__controlls_path_bt:hover {
  color: #fff;
  background-color: @selectedColor;
  .p_icon { background-color: #000; }
}
/*END MAPA STYLES*/

/* TOOLTIP LOJAS*/
.loja-tip{
  display: none;
  position: absolute;
  align-items: center;
  z-index: 99999;
  width: 255px;
  border-radius: 10px;
  min-height: 100px;
  background-color: #fff;
  padding: 5px;
  font-family: Arial;
  font-size: 10pt;
  -webkit-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);
  -moz-box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);
  box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.6);

  .boxsizing;
}

.loja-tip--vermais{
  display: none;
  position: absolute;
  bottom: 5px;
  right: 5px;
  cursor: pointer;
}
.loja-tip--info{
  float: left;
  width: 118px;
  padding-left: 7px;
  margin-bottom: 5px;
}
.loja-tip--meta,
.loja-tip--nome{
  max-width: 100px;
  margin-top: 3px;
  .f_bold;
  font-size: 15px;
  color: #000;
  text-transform: uppercase;
  line-height: 1.2;
}
.loja-tip--meta {
  margin-top: 10px;
  font-size: 13px;
  color: #6D6968;
  text-transform: none;
  .f_reg;
}
.loja-tip--close{
  position: absolute;
  top: -12px;
  right: -12px;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  background-color: #000;
  border-radius: 50%;

  img { width: 100%; }
}
.loja-tip--desc{
  width: 115px;
  float: right;
  margin-top: 15px;
  margin-right: 10px;
}
.loja-tip--cod{}
.loja-tip--logo_container {
  position: relative;
  float: left;
  width: 120px;
  height: 100px;
  vertical-align: middle;
  line-height: 100px;
  font-size: 0;
  text-align: center;
  img {
    max-width: 100%;
    max-height: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    ._transform(-50%, -50%, 0);
  }
}
g[data-name="escadas"],
g[data-name="rolantes"],
g[data-name="sanitariosdefic"],
g[data-name="fraldario"],
g[data-name="elevadores"],
g[data-name="multibanco"],
g[data-name="parque"],
g[data-name="informacoes"],
g[data-name="sanitarios"] {
  filter: drop-shadow(0 6.952px 11.587px rgba(0, 0, 0, 0.25));
}
path[data-name="area"] {
  filter: drop-shadow(0px 2px 0px #cccccc)
}
.edificio {
  filter: drop-shadow(0px 5px 0px #cccccc)
}
.arvore {
  filter: drop-shadow(0px 5px 0px #cccccc)
}
#gradient {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.30) 100%);
  width: 100%;
  height: 125px;
  position: absolute;
  bottom: 0;
  z-index: 99999;
  pointer-events: none;
}

/* CORES DO HOVER DE CADA ZONA DO SVG */

@hover-verde-loja : #89dd44;
@hover-rosa-loja: #f1b2cd;
@hover-azul-loja: #74afcd;
@hover-amarelo-loja: #f1b21b;
@hover-cinza-loja: #b7cbe0;
@lojamiradouro: #a6a6a6;
@edificio: #e8ecef;
@arvore: #04b12c;
@border-arvore: #18c546;
@amoreiras: #c6c6c6;
@estrada: #dae0e6;
@border-estrada: #91a4be;

/*   <!-- MOUSEOVER DAS LOJAS  --> */
.amarelo {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  
  &:hover {
    fill: @hover-amarelo-loja !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  } 
}
.rosa {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  
  &:hover {
    fill: @hover-rosa-loja !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  } 
}
.verde {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  
  &:hover {
    fill: @hover-verde-loja !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  } 
}
.azul {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  
  &:hover {
    fill: @hover-azul-loja !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  } 
}
.cinza {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  
  &:hover {
    fill: @hover-cinza-loja !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  } 
}
.amoreiras {
  -webkit-transition: all .2s ease-in-out;
  -moz-transition: all .2s ease-in-out;
  transition: all .2s ease-in-out;
  
  &:hover {
    fill: @lojamiradouro !important;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
  } 
}

/* <!-- BORDER BRANCO DOS SVG  --> */
.stroke_color, .black_stroke_width, .edificio, .white_stroke_width {
  stroke: #fff;
}

/* <!-- TAMANHO DO BORDER DA ZONA BRANCA DOS SVG  --> */
.white_stroke_width {
  stroke-width: 1.86px;
}

/* <!-- TAMANHO DO BORDER DA ZONA PRETA DOS SVG  --> */
.black_stroke_width {
  stroke-width: 1.69px;
}

/* <!-- COR INSIDE DOS SVG  --> */
.inside_svg_color {
  fill: #fff;
}

/* <!-- COR DAS ARVORES  --> */
.arvore {
  fill: @arvore;
  stroke: @border-arvore;
}

/* <!-- COR AMOREIRAS  --> */
.amoreiras {
  fill: @amoreiras;
}

/* <!-- ESTRADA  --> */
.estrada {
  fill: @estrada;
  stroke: @border-estrada;
  stroke-width: 1.2px;
}

/* <!-- TAMANHO DO BORDER DOS EDIFICIOS  --> */
.edificio {
  stroke-width: 1.73px;
}

/*   <!-- COR DOS EDIFICIOS  --> */
.edificio {
  fill: @edificio;
}

/*   <!-- COR DAS LOJAS VAZIAS --> */
.empty {
  cursor: default;
  fill: #e9f0f7 !important;
}

/*   <!-- COR DA LINHA DO PERCURSO --> */
.mapLine {
  stroke: #ca0019;
  stroke-width: 3px;
  fill: none;
}

/*   <!-- COR DO PONTO A e B --> */
.cor_pin {
  fill: #ca0019;
}