@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:650px;
}

.columna2{
width:90%;
height:650px;
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: 1px 1px; /* Agrega espaciado dentro de las celdas */
text-align: right; /* Alinea el texto a la derecha */
}

td{
color: white;
padding: 2px 2px; /* Agrega espaciado dentro de las celdas */

}

tr{
    color: black;
    padding: 2px 2px; /* Agrega espaciado dentro de las celdas */
    
}


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

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

}


tr td{
font-size:12px;}

tr{
height:20px;
}


.rectangle{
    margin-left:25%;
    width: 15px;
    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:20%;
height:650px;
}

.columna2{
width:79%;
height:650px;
}

}


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

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



}


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

.columna2{
width:69%;
height:650px;
}


th{
font-size:8px;
}

tr td{
font-size:10px;}

tr{
height:20px;}




}