/* Definizione del font ESRI_Geology */
@font-face {
  font-family: 'ESRI_Geology';
  src: url('./fonts/Esri_geology.ttf') format('truetype');
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

#toolbar {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  padding: 10px;
  display: flex;
  gap: 10px;
}

.toolbar-btn {
  background: none;
  border: none;
  cursor: pointer;
  margin: 5px;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease;
}

.toolbar-btn i {
  color: #333;
}

.toolbar-btn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

/* Stile per la WebApp 
@media screen and (orientation: landscape) {
  body {
    font-size: 1.2em;
  }

  .map {
    height: 100vh; /* riempi tutto lo schermo in orizzontale 
    width: 100vw;
  }

  #menu-container {
    top: 20px;
    right: 20px;
  }

  .sidenav {
    top: 0;
    height: 100vh;
  }
} */

/*originale
.map {
  position: absolute;
  top: 50;
  left: 50;
  transform: translate(10%);
  width: 80vw;
  height: 80vh;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  z-index: 0;
}*/

.map {
  position: absolute;
  top: 50px;
  left: 50px;
  transform: none;
  width: 80vw;
  height: 80vh;
  margin: 0;
  padding: 0;
  border: none;
  box-shadow: none;
  border-radius: 0;
  z-index: 0;
}


.scale-line {
  position: absolute;
  bottom: 0;
  right: 200px; /* Aggiungi spazio dal bordo destro */
  background: white;
  padding: 5px;
  color: black; /* Cambia il colore del testo se necessario */
  font-size: 12px; /* Opzionale: modifica la dimensione del testo se necessario */
}

#layer-panel {
  position: absolute;
  top: 60px;
  left: 10px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  padding: 10px;
  width: 200px;
  display: none;
  z-index: 1;
}

#layer-panel h3 {
  margin-top: 0;
  font-size: 18px;
  text-align: center;
}

#layer-panel label {
  cursor: pointer;
}

#layer-panel input {
  margin-right: 5px;
}

a.skiplink {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

a.skiplink:focus {
  clip: auto;
  height: auto;
  width: auto;
  background-color: #fff;
  padding: 0.3em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#map:focus {
  outline: #4A74A8 solid 0.15em;
  border-radius: 8px;
}
/*
#map-title {
  position: fixed;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(18px, 2.5vw, 28px); /* adattivo 
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  color: #333;
  white-space: nowrap;
  z-index: 3;
}*/



/* ORIGINALE
#map-title {
  font-size: 24px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: bold;
  color: #333;
  font-family: 'Arial', sans-serif;
}

.map, a.skiplink:focus, #map:focus {
  transition: all 0.3s ease-in-out;
}*/

/* Stile base del pop-up */
.ol-popup {
  position: absolute;
  background-color: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #cccccc;
  min-width: 400px;
  max-width: 350px; /* Adatta la larghezza per contenere immagini */
  white-space: normal;
  z-index: 1000;
  /* Assicura che il pop-up sia visibile sopra altri elementi */
}

/* Triangolo per il pop-up */
.ol-popup:after, .ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: "";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.ol-popup:after {
  border-top-color: white;
  border-width: 10px;
  left: 50%;
  margin-left: -10px;
}

.ol-popup:before {
  border-top-color: #cccccc;
  border-width: 11px;
  left: 50%;
  margin-left: -11px;
}

/* Pulsante di chiusura del pop-up */
.ol-popup-close {
  position: absolute;
  top: 5px;
  right: 5px;
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
}

/* Contenuto del pop-up */
.ol-popup-content {
  max-width: 100%; /* Permette al contenuto di usare tutta la larghezza disponibile */
  word-wrap: break-word; /* Assicura che il testo lungo vada a capo */
}

/* Immagini nel pop-up */
.ol-popup img {
  width: 50px; /* Dimensioni per le immagini in miniatura */
  height: auto;
  margin: 5px; /* Spazio tra le immagini */
  cursor: pointer; /* Mostra un cursore a forma di mano per indicare cliccabilità */
  border: 1px solid #ccc; /* Piccolo bordo per le immagini */
  border-radius: 4px; /* Angoli leggermente arrotondati */
}

.ol-popup img:hover {
  border-color: #000; /* Cambia colore bordo al passaggio del mouse */
}

.ol-popup-closer:hover {
  background: #ccc;
}

#map-title {
  position: fixed;
  top: 5px; /* lascia 5px di spazio sotto al menu */
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(15px, 2.5vw, 25px);
  font-weight: bold;
  font-family: 'Arial', sans-serif;
  color: #333;
  white-space: nowrap;
  z-index: 5;
  padding-left: 120px; /* evita sovrapposizione col menu */
  pointer-events: none; /* per evitare che interferisca con click */
}

#menu-container {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10;
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
}

/* Container per il logo e il testo 
#menu-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  position: fixed;
  top: 10px;
  left: 10px;
  background-color: #fff;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 2;
}*/

img#menu-button {
  width: 30px; /* Ridimensiona il logo */
  height: auto;
  margin-right: 10px; /* Spazio tra il logo e il testo */
}

span#menu-text {
  font-size: 18px; /* Dimensione del testo */
  color: #111; /* Colore del testo */
}

/* Sidebar navigation */
.sidenav {
  height: 100%;
  width: 250px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #fff;
  overflow-x: hidden;
  transition: transform 0.5s ease;
  padding-top: 60px;
  transform: translateX(-250px);
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #111;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #000;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
  color: #111;
}



#zoom-out, #zoom-in {
  display: none;
}