:root{
  --atlas-ctrl-bg: #ffffffd0;
  --atlas-ctrl-gap: 6px;
  --atlas-ctrl-pad: 6px;
  --atlas-ctrl-radius: 6px;
  --atlas-btn-bg: #e9ecef;
  --atlas-btn-fg: #000;
  --atlas-btn-active-bg: #000;
  --atlas-btn-active-fg: #fff;
  --atlas-btn-font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --atlas-btn-pad: 6px 10px;
}

/* Container do controle 2D/3D */
.mapboxgl-ctrl.atlas-dim-ctrl{
  display: flex;
  gap: var(--atlas-ctrl-gap);
  background: var(--atlas-ctrl-bg);
  padding: var(--atlas-ctrl-pad);
  border-radius: var(--atlas-ctrl-radius);
  align-items: center;
}

/* Botões 2D/3D */
.atlas-dim-btn{
  border: 0;
  margin: 0;
  padding: var(--atlas-btn-pad);
  background: var(--atlas-btn-bg);
  color: var(--atlas-btn-fg);
  font: var(--atlas-btn-font);
  border-radius: 4px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.atlas-dim-btn:hover,
.atlas-dim-btn:focus-visible{ opacity: 1; background:#fff; transform: scale(1.06); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.atlas-dim-btn.is-active{
  background: var(--atlas-btn-active-bg);
  color: var(--atlas-btn-active-fg);
  opacity: 1;
}

/* Toast (mensagem discreta) */
#map-cage-toast{
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.75);
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1;
  display: none;
  z-index: 9999;
  pointer-events: none;
}

/* Grupo de ferramentas (hambúrguer + giro + régua) */
.mapboxgl-ctrl.atlas-tool-ctrl{
  display:flex;
  align-items:center;
  background: var(--atlas-ctrl-bg);
  padding: var(--atlas-ctrl-pad);
  border-radius: var(--atlas-ctrl-radius);
  gap: var(--atlas-ctrl-gap);
}
.atlas-burger-btn,
.atlas-icon-btn{
  border: 0;
  margin: 0;
  padding: var(--atlas-btn-pad);
  background: var(--atlas-btn-bg);
  color: var(--atlas-btn-fg);
  font: var(--atlas-btn-font);
  border-radius: 4px;
  cursor: pointer;
  opacity: .9;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.atlas-icon-btn:hover,
.atlas-icon-btn:focus-visible{ opacity: 1; background:#fff; transform: scale(1.06); box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.atlas-icon-btn.is-active{ background: var(--atlas-btn-active-bg); color: var(--atlas-btn-active-fg); opacity: 1; }

.atlas-tools-group{ display:flex; gap: var(--atlas-ctrl-gap); }

/* Botões do grupo inferior (2D, 3D e Régua) */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls{ display:flex; align-items:center; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode-group{
  display:inline-flex;
  border:0px solid;
  border-radius:4px;
  overflow:hidden; /* junta sem fenda */
  margin-right: 0; /* espaçamento controlado pelo gap do container */
  background:transparent; /* cor base do grupo */
  gap: 0px; /* espaçamento entre 2D e 3D */
}
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls{ gap:16px; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
/* Quando a ferramenta (ex.: régua) estiver ativa, permitir largura maior para o label */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool.is-active{
  width: auto;
  min-width: 86px;
  height: 40px;
  padding-left: 12px;
  padding-right: 8px;
  gap: 8px;
}
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool.is-active .measure-val{ white-space: nowrap; }

/* Hamburger: 56px fechado (collapsed), 48px aberto */
#hamburger-btn{ width:56px; height:56px; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls:not(.collapsed) #hamburger-btn{ width:48px; height:48px; }

/* Aproximar régua do menu (reduz apenas o espaço antes do hambúrguer) */
#hamburger-btn{ margin-left: -12px; }

/* Cores do botão de menu: fechado branco, aberto preto */
#hamburger-btn{ background:#fff; color:#000; border:1px solid #d0d5db; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls:not(.collapsed) #hamburger-btn{ background:#000; color:#fff; border-color:#000; margin-right: -3px;}
#hamburger-btn svg path{ stroke: currentColor; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool{
  border: 0;
  margin: 0;
  padding: var(--atlas-btn-pad);
  background: #fff; /* inativo: branco */
  color: var(--atlas-btn-fg);
  font: var(--atlas-btn-font);
  border-radius: 4px;
  cursor: pointer;
  opacity: .9;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
/* Agrupamento 2D/3D: borda e união entre os dois botões */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode{ border:0; border-radius:0; position:relative; }
/* Separador interno apenas quando nenhum dos vizinhos está ativo */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode-group .mode + .mode{ border-left:1px solid #d0d5db; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode-group .mode.active + .mode{ border-left:0; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode-group .mode + .mode.active{ border-left:0; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode:focus{ outline: none; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode.active{
  background: var(--atlas-btn-active-bg);
  color: var(--atlas-btn-active-fg);
  border-color: var(--atlas-btn-active-bg);
  opacity: 1;
  position: relative; z-index: 1; /* cobre qualquer junção */
}
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode:hover,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode:focus-visible,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool:hover,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool:focus-visible{
  opacity: 1;
  background: #fff;
  transform: scale(1.06);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Grupo régua + X */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .measure-group{
  display:inline-flex;
  align-items:center;
  border:0; /* sem borda para evitar halo branco */
  border-radius:4px;
  overflow:visible;
  margin-right: 12px;
  background:transparent; /* cor vem do próprio botão .tool */
}
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .measure-group > .tool,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .measure-group > .atlas-clear-btn{
  border-radius:1;
  border:0;
  margin:0;
}
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .measure-group > .atlas-clear-btn{ border-left:none; margin-left: 10px; }
/* afastar a string (ex.: "0 m") do X com precisão */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool.is-active .measure-val{ margin-right: 10px; }

/* Botão limpar (X) da régua */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-clear-btn{
  border: 0;
  padding: var(--atlas-btn-pad);
  background: #fff;
  color: var(--atlas-btn-fg);
  font: var(--atlas-btn-font);
  border-radius: 4px;
  cursor: pointer;
  opacity: .9;
  transition: opacity .15s ease, background-color .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-clear-btn:hover,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-clear-btn:focus-visible{
  opacity: 1; background:#fff; transform: scale(1.06); box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Colapso pelo hambúrguer: esconder tudo exceto o próprio hambúrguer (inclui rotação no desktop) */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls.collapsed > *:not(#hamburger-btn){
  display: none !important;
}
/* Quando menu fechado: encostar menu embaixo e elevar zoom/bússola para abrir vão preciso */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls.collapsed{ bottom: 8px !important; }
/* Margin inferior do bloco lateral (bússola/zoom) controlada pelo estado do menu */
#atlas-side-controls.map-controls{ margin-bottom: 0px; }
.mapboxgl-ctrl-bottom-right:has(.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls.collapsed) #atlas-side-controls.map-controls{ margin-bottom: 20px; }
/* Elevar bloco lateral somente quando menu estiver fechado */
.mapboxgl-ctrl-bottom-right:has(.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls.collapsed) #atlas-side-controls.map-controls{ bottom: 104px !important; }

/* Desktop (>=641px): menu recolhido — ocultar girar na coluna lateral (ex.: páginas que movem o botão para #atlas-side-controls) */
@media (min-width: 641px){
  .mapboxgl-ctrl-bottom-right:has(.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls.collapsed) #atlas-side-controls > button.atlas-rotate-btn{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Margem do botão de menu conforme estado */
#hamburger-btn{ margin-bottom: 0px; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls.collapsed #hamburger-btn{ margin-bottom: 20px; margin-right: -5px;}

/* Espaçamento à direita da Régua também */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool{ margin-right: 0px; border-radius: 5px;}

/* Ativo: 2D/3D e Régua do controle inferior */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode.active{
  background: var(--atlas-btn-active-bg);
  color: var(--atlas-btn-active-fg);
  opacity: 1;
}
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool.is-active{
  background: #fff; /* régua ativa permanece branca no desktop */
  color: var(--atlas-btn-fg);
  opacity: 1;
}

/* Botão de rotação no grupo inferior: circular como a bússola */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-rotate-btn{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #000000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-rotate-btn:hover,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-rotate-btn:focus-visible{
  transform: scale(1.06);
  box-shadow: 0 4px 10px rgba(0,0,0,.25);
}
/* Forçar o fundo preto em todos os estados para não virar branco no hover das regras genéricas */
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-rotate-btn,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-rotate-btn:hover,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-rotate-btn:focus,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-rotate-btn:focus-visible,
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .atlas-rotate-btn:active{
  background:#000 !important;
}

/* Touch/mobile: manter a régua branca mesmo quando ativa */
@media (hover: none), (pointer: coarse){
  .mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool.is-active{
    background: #fff;
    color: var(--atlas-btn-fg);
  }
}

/* Estado recolhido pelo hambúrguer */
.atlas-tool-ctrl.is-collapsed .atlas-tools-group{ display:none; }

/* HUD da régua (total) */
.atlas-measure-hud{
  position:absolute;
  left:50%;
  bottom: 54px; /* acima do toast */
  transform: translateX(-50%);
  background: rgba(255,255,255,.95);
  color:#b81a1a;
  padding:6px 10px;
  border-radius:6px;
  font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  z-index: 9998;
}

/* Cursor durante a medição */
.mapboxgl-canvas.atlas-measure-cursor{ cursor: crosshair !important; }

/* Offsets globais para alinhar a coluna com o menu (ajuste fino) */
:root{
  --atlas-side-top-offset: 6px;   /* ajuste vertical fino (+ desce / - sobe) */
  --atlas-side-right-offset: 12px;/* recuo da borda direita */
}

/* Compass arrows overlay: mostrar no hover/focus e quando expandida */
#atlas-side-controls .atlas-compass-btn{ position:relative; z-index:3; }
#atlas-side-controls .atlas-compass-btn .atlas-compass-arrows{ position:absolute; inset:0; display:none !important; pointer-events:auto; z-index:5; }
#atlas-side-controls .atlas-compass-btn .atlas-compass-arrow{ position:absolute; top:50%; transform:translateY(-50%); background:transparent; border:none; width:24px; height:24px; display:flex; align-items:center; justify-content:center; pointer-events:auto; cursor:pointer; }
#atlas-side-controls .atlas-compass-btn .atlas-compass-arrow.left{ left: -4px; }
#atlas-side-controls .atlas-compass-btn .atlas-compass-arrow.right{ right: -4px; }
#atlas-side-controls .atlas-compass-btn .atlas-compass-arrow .arrow{ width:22px; height:22px; fill:#111; stroke:none; opacity:.9; transform: scale(0.85); transform-origin:center; }
.atlas-compass-btn .compass-icon{ position:relative; z-index:4; pointer-events:none; }
.atlas-compass-btn .compass-icon{
  display:block;
  margin: 1px auto 0 auto; /* leve ajuste vertical */
  width:18px;  /* trava tamanho em px */
  height:18px; /* trava tamanho em px */
  transform: rotate(var(--atlas-rot, 0deg)) !important; /* só rota, não escala */
  transform-origin: center;
}
/* Travar tamanho nos estados de interação (mesma rotação aplicada via var) */
#atlas-side-controls .atlas-compass-btn:hover .compass-icon,
#atlas-side-controls .atlas-compass-btn:active .compass-icon,
#atlas-side-controls .atlas-compass-btn:focus-visible .compass-icon{
  width:18px;
  height:18px;
  transform: rotate(var(--atlas-rot, 0deg)) !important;
}
.atlas-compass-btn:hover .atlas-compass-arrows,
.atlas-compass-btn.is-expanded .atlas-compass-arrows{ display:flex !important; }

/* Expandir visualmente via transform (não desloca os vizinhos) */
#atlas-side-controls .atlas-compass-btn{
  width:40px; height:40px; /* tamanho fixo no fluxo */
  overflow: visible;
  transform-origin: center;
  transition: transform .15s ease;
  will-change: transform;
}
#atlas-side-controls .atlas-compass-btn:hover,
#atlas-side-controls .atlas-compass-btn:active{
  transform: scale(1.4); /* ~56px visual sem empurrar os demais */
  margin-bottom: 8px; /* afasta do botão de zoom abaixo */
}

/* Empurrar coluna um pouco para dentro da tela e alinhar verticalmente */
#atlas-side-controls.map-controls{
  margin-right: var(--atlas-side-right-offset);
  margin-top: var(--atlas-side-top-offset);
}

/* ===================== MOBILE (<=640px) ===================== */
@media (max-width: 640px){
  /* Margem superior/lad. de referência do botão VOLTAR no mobile.
     Altere este valor para ajustar o alinhamento de TODOS os elementos do topo. */
  :root{ --atlas-mobile-top-margin: 16px; }
  /* Permitir overflow visível dos overlays (setas) ao redor da bússola */
  #atlas-side-controls.map-controls{ overflow: visible; }

  /* Barra superior (rotação, 2D/3D, régua, menu) */
  .mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls{
    position: absolute;
    top: var(--atlas-mobile-top-margin) !important;
    right: var(--atlas-mobile-top-margin) !important;
    bottom: auto !important;
    gap: 20px; /* Distância entre o menu e os botões */
    margin-top: -14px;
  }

  /* Tamanhos padrão dos botões do topo (demais botões): 36x36 */
  .mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode,
  .mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .tool{
    width: 36px;
    height: 36px;
  }
  /* Grupo 2D/3D (cada um com 36) */
  .mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls .mode-group .mode{
    width: 36px;
    height: 36px;
  }

  /* Menu: 48px fechado, 40px aberto */
  #hamburger-btn{ width: 48px; height: 48px; }
  .mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls:not(.collapsed) #hamburger-btn{ width: 40px; height: 40px; }

  /* Rotação (circular) e Bússola: 40x40 */
  /* Rotação na barra (desktop) já foi tratada; no mobile a rotação está no controle lateral */
  .atlas-rotate-btn{ width:40px !important; height:40px !important; border-radius:50%; background:#000 !important; color:#111; }
  .atlas-rotate-btn:hover{ width:40px; height:40px; border-radius:50%; background:#000 !important; color:#111; }
  .atlas-rotate-btn:focus{ width:40px; height:40px; border-radius:50%; background:#000 !important; color:#111; }
  .atlas-rotate-btn:active{ background:#000 !important; }
  /* Quando o menu estiver ABERTO no mobile, garantir exibição do botão de rotação */
  .mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls:not(.collapsed) .atlas-rotate-btn{ display:inline-flex !important; }
  .atlas-compass-btn{ width: 40px; height: 40px; border-radius: 50%; }

  /* Zoom: 32x64 (dois botões 32x32 empilhados) */
  .zoom-group button{ width: 32px!important; height: 36px!important; }

  /* Alinhar a coluna lateral à mesma margem superior/direita do topo */
  #atlas-side-controls.map-controls{
    /* Menu FECHADO (48px): posiciona a coluna logo abaixo com gap de 8px */
    top: calc(var(--atlas-mobile-top-margin) + 48px + 5px);
    right: var(--atlas-mobile-top-margin); /* usa mesma margem direita do topo/btn menu */
    bottom: auto;
  }
  /* Quando o menu estiver ABERTO (40px), aproximar ainda mais */
  .mapboxgl-ctrl-bottom-right:has(.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls:not(.collapsed)) #atlas-side-controls.map-controls{
    top: calc(var(--atlas-mobile-top-margin) + 40px + 5px);
  }

  /* Ajuste horizontal da coluna alinhado ao menu (considera margens aplicadas no hamburger) */
  .mapboxgl-ctrl-bottom-right:has(.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls.collapsed) #atlas-side-controls.map-controls{
    right: calc(var(--atlas-mobile-top-margin) - 5px);
  }
  .mapboxgl-ctrl-bottom-right:has(.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls:not(.collapsed)) #atlas-side-controls.map-controls{
    right: calc(var(--atlas-mobile-top-margin) - 13px);
  }

  /* Espaçamento vertical padrão entre componentes da coluna: 20px
     (Zoom, Bússola, Rotação etc.) */
  .atlas-compass-btn{ margin-bottom: 20px; margin-top: 10px; margin-right: -20px;}
  /* #atlas-side-controls .zoom-group, */
  .atlas-rotate-btn{ margin-bottom: 20px; margin-top: -10px; margin-right: -20px;}
  /* remover margem do último item */
  .atlas-rotate-btn:last-child{ margin-bottom: 0; margin-top: 0px; margin-right: -25px;}
  .zoom-group:last-child{ margin-bottom: 0; margin-top: 0px; margin-right: -25px;}
  .atlas-compass-btn:last-child{ margin-bottom: 0;; margin-top: 0px; margin-right: -25px;}

  /* No mobile, manter o mesmo espaçamento mesmo em hover da bússola */
  .atlas-compass-btn:hover,
  .atlas-compass-btn:active{
    margin-bottom: 20px;
    margin-top: 10px;
  }

  .zoom-group{
    margin-bottom: 20px;
    margin-top: 20px;
  }
  

  /* Remover qualquer efeito de hover da rotação no mobile */
  #atlas-side-controls .atlas-rotate-btn:hover,
  #atlas-side-controls .atlas-rotate-btn:focus,
  #atlas-side-controls .atlas-rotate-btn:active{
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* MOBILE: rotação sempre preta (ícone branco) - alta especificidade e todos os estados */
  .mapboxgl-ctrl.map-controls#atlas-side-controls > button.atlas-rotate-btn,
  .mapboxgl-ctrl.map-controls#atlas-side-controls > button.atlas-rotate-btn:hover,
  .mapboxgl-ctrl.map-controls#atlas-side-controls > button.atlas-rotate-btn:focus,
  .mapboxgl-ctrl.map-controls#atlas-side-controls > button.atlas-rotate-btn:focus-visible,
  .mapboxgl-ctrl.map-controls#atlas-side-controls > button.atlas-rotate-btn:active{
    background:#000 !important;
    color:#fff !important;
    border-color:#000 !important;
    background-image: none !important;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none !important;
    outline: none !important;
  }
  .mapboxgl-ctrl.map-controls#atlas-side-controls > button.atlas-rotate-btn svg,
  .mapboxgl-ctrl.map-controls#atlas-side-controls > button.atlas-rotate-btn svg *,
  .mapboxgl-ctrl.map-controls#atlas-side-controls > button.atlas-rotate-btn .icon{
    color:#fff !important;
    stroke:#fff !important;
    fill:#fff !important;
  }

  /* MOBILE: desativar hover/expansão da bússola e ocultar setas */
  #atlas-side-controls .atlas-compass-btn{ transition: none !important; }
  #atlas-side-controls .atlas-compass-btn:hover,
  #atlas-side-controls .atlas-compass-btn:active{
    transform: none !important;
    margin-bottom: 20px;
  }
  #atlas-side-controls .atlas-compass-btn .atlas-compass-arrows,
  #atlas-side-controls .atlas-compass-btn:hover .atlas-compass-arrows,
  #atlas-side-controls .atlas-compass-btn.is-expanded .atlas-compass-arrows{
    display: none !important;
    pointer-events: none !important;
  }
}
@media (max-width: 640px){
#hamburger-btn{ margin-bottom: 0px; }
.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls.collapsed #hamburger-btn{ margin-bottom: -25px; margin-right: -19px;}

.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls:not(.collapsed) #hamburger-btn{
  margin-right: -20x;
}

.mapboxgl-ctrl.atlas-bottom-ctrl .bottom-controls:not(.collapsed) #hamburger-btn{ background:#000; color:#fff; border-color:#000; margin-right: -20px;}
}


.mapboxgl-ctrl-attrib.mapboxgl-compact{
  background-color: transparent !important;
}

@media (min-width: 870px) {
.mapboxgl-ctrl-attrib.mapboxgl-compact{
  background-color: transparent !important;
}
}