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

#map {
  height: 100vh;
}
/*.vessels{
  display: none;
}*/
/* Contenidor del formulari */

.right_td{
  text-align: right;  
  padding-right: 5px;;
}

.met{
background-color: rgb(233, 232, 232);

}
.tss{
  background-color: rgb(212, 212, 212);

}

.form-container {
  position: absolute;
  /*top: 50px;
  right: 10px;*/
  width: 300px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f7f7f7;
 /* box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
  z-index: 9998;

}

.rtp-container {
  position: absolute;
  /*top: 10%;
  left: 10px;*/
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  background-color: #f7f7f7;
  /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);*/
  z-index: 9998;
  display: inline-block;
}

/* Style for the form elements */
form {
  display: flex;
  flex-direction: column;
}

label {
  margin-bottom: 10px;
  font-weight: bold;
  font-family:  Helvetica Neue;
}

select,
input[type="date"] {
  margin-bottom: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 12px;
  font-family:  Helvetica Neue;
}
input[id="interval"] {
  margin-bottom: 5px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 12px;
  font-family:  Helvetica Neue;
}
button#searchTrack,
button#download,
button#clearTrack {
  padding: 5px;
  background-color: #5ebe88; 
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
  width: 100%;
  font-family:  Helvetica Neue;
}

button#clearTrack {
  background-color: #d36b6b;
}

button#searchTrack:hover{
  background-color:#3ad542;
}
button#clearTrack:hover {
  background-color: #ef6056;
}
button#download {
  background-color: #858383;
}
button#download:hover {
  background-color: #4d4d4d;
}


.tab {
/*  overflow: hidden;*/
  border: 1px solid #ccc;
  background-color: #f1f1f1; 
  position: absolute;
  top: 10px;
  left: 50px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background-color: #f7f7f7;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 9998;
  width: 290px;
  height: 570px;
 /* display: none;*/
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 12px;
  transition: 0.3s;
  font-size: 15px;
}

.tab button:hover {
  background-color: #ddd;
}

.tab button.active {
  background-color: #ccc;
}

.tabcontent {
  position: absolute;
  top: 50px;
  left: 10px;
  display:inline-block;
  width: 270px;
  height: 85%;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
  background-color: #f7f7f7;
  font-family:  Arial, sans-serif;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  z-index: 9998;
}

.flex-container {
  display: flex;
  align-items: center; /* Centra verticalmente los elementos */
}

.zoomToMarker{
  padding: 5px;

}

/*ESTILS PER IFRAME*/
  #lateral {
    position: fixed;
    top: 0;
    left: -500px;
    width: 500px;
    height: 100%;
    background-color: #f1f1f1;
    transition: left 0.3s ease;
    z-index: 9998;
  }

  #iframe {
    width: 100%;
    height: 100%;
  }


  #lateral iframe {
    width: 100%;
    height: 100%;
    border: none;
  }

  #cerrar {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    width: 20px;
    height: 20px;
  }

  #cerrar::before,
  #cerrar::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 2px;
    background-color: #000;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  #cerrar::after {
    transform: translate(-50%, -50%) rotate(-45deg);
  }

  #graf {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 250px; /* Establece la altura fija que desees */
    background-color: #ffffff;
    display: none; /* Ocultar por defecto */
    z-index: 10000; /* Ajusta el valor según sea necesario para que esté por encima de otros elementos */
    transition: bottom 0.3s ease; /* Puedes ajustar la duración y la función de la transición según tus preferencias */

  }


/*ESTILS PER A LA GALERIA DE GRAFICS*/


#contenedor-iframe {
  display: flex;
  transition: transform 0.5s ease;
}

.iframe {
  flex: 0 0 100%;
  height: 100vh;
  border: none;
}