@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:7%;
height:700px;
}

.columna2{
width:92%;
height:780px;
overflow-x:auto;}


table{
color:white;
background-color: #686868}


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

th{
font-size:10px;
}

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


.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:15%;
}

.columna2{
width:84%;
}

}


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

.columna2{
width:79%;
}

}


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

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


th{
font-size:8px;
}

tr td{
font-size:10px;}

tr{
height:20px;}


}