@font-face {
  font-family: "harlow";
  src: url(harlow.ttf) format("truetype");
}

.fuente-harlow{
font-family: "harlow";
}

.bottom-left {
position: absolute;
bottom: 0px;
left: 16px;
}

p.bottom-left {
font-size: 20px}


.columna1{
width:10%;
height:470px;
}

.columna2{
width:90%;
height:470px;
overflow-x: auto; /* Permite el desplazamiento horizontal */
overflow-y: hidden; /* Evita el desplazamiento vertical */}


table{
color:#969595;
background-color: #969595}


table.leyenda{
text-align:right;
width:100%}

.rowtabla{
display: flex;
width: 99%;
margin: 0 auto;
}




th{
font-size:10px;
color: white;
padding: 3.5px 12px; /* Agrega espaciado dentro de las celdas */
text-align: right; /* Alinea el texto a la derecha */
}

td{
color: white;


}


th:nth-child(2){
text-align:center;}

table.tabla-datos{
border-collapse: collapse;
border-spacing: 0;
width: 90%;
text-align: center;

}


tr td{
font-size:12px;}

tr{
height:35px;
width:35px
}


.rectangle{
  margin-left:25%;
  width: 20px;
  height:20px;
  background:rgba(0,0,190,.4);;
}

td i {
color:blue}

tr td img{
width:30px;
height:30px;}




@media only screen and (min-width: 900px) and (max-width: 1200px){
.columna1{
width:15%;
}

.columna2{
width:84%;
}

}


@media only screen and (min-width: 600px) and (max-width: 900px){
.columna1{
width:18%;
}

.columna2{
width:84%;
}

}


@media only screen and (max-width: 600px){
.columna1{
width:25%;
height:470px;
}

.columna2{
width:74%;
height:470px;
}




th{
font-size:8px;
}

tr td{
font-size:10px;}


@media only screen and (max-width: 600px){
  .columna1{
  width:30%;
  height:470px;
  }
  
  .columna2{
  width:69%;
  height:470px;
  }
  
  }

  


}

.icono-nautico{
  width:25px;
  height:25px;}