/*
  Media queries para tres diferentes tamaño de ventanas; largas, medianas, pequeñas (celular)
*/
.ct_escala{   
  background-color:black;
  z-index: 99;
  position: fixed;
  /*background: rgba(255, 255, 255, 0.5); */
  background: rgba(0, 0, 0, 0.5); 
  /*background: rgba(0,0,205,0.4);*/
  top: 0em;
  left: 5em;
}

.ct_mensaje_posicion{   
    top: 48em;
    left: 52em;
  }

/* Para celulares */
@media only screen and (max-width: 300px) {
  .ct_escala_posicion{   
    top: 0em;
    left: 5em;
  }
  .square_CT {
    height: 15px;
    width: 25px;
    display: block;
    margin: 0.2em;
    color: white;
  }
  
  .ct_mensaje_posicion{
    top: 48em;
    left: 52em;
  }

}

/* Para celulares */
@media only screen and (min-width: 300px) {
  .ct_escala_posicion{   
    top: 0em;
    left: 4em;
  }
  .square_CT {
    height: 15px;
    width: 35px;
    display: block;
    margin: 0.2em;
    color: white;
  }
  .ct_mensaje_posicion{
    top: 48em;
    left: 52em;
  }
}

/* Para tablets: */
@media only screen and (min-width: 600px) {
  .ct_escala_posicion{
      top: 1em;
      left: 20em;
    }

    .square_CT {
      height: 15px;
      width: 45px;
      display: block;
      margin: 0.3em;
      color: white;
  }
  .ct_mensaje_posicion{
     top: 48em;
    left: 52em;
  }
}

/* Para escritorio pantallas normales: */
@media only screen and (min-width: 1000px) {
  .ct_escala_posicion{
      top: 1em;
      left: 45em;
    }
    .ct_mensaje_posicion{
     top: 50em;
    left: 52em;
  }
}

/* Para escritorio pantallas largas: */
@media only screen and (min-width: 1400px) {
  .ct_escala_posicion{
      top: 2em;
      left: 80em;
    }
    .ct_mensaje_posicion{
     top: 48em;
    left: 52em;
  }
}

.hand{
  cursor: pointer;
}
.loading{
  cursor: progress;
}
.crosshair{
  cursor: crosshair;
}
.hand-cursor{
  cursor: pointer;
}
.square_DT {
  background-color:#00C0FF;
  
}

.square_TT {
  background-color:#47B417;
  
}

.square_HC1 {
  background-color:#ffff00;
  color:black;
}

.square_HC2 {
  background-color:#ff8000;
}

.square_HC3 {
  background-color:#ff0000;
}

.square_HC4 {
      margin: 0.3em;
      color: white;
  }
  .ct_mensaje_posicion{
     top: 48em;
    left: 52em;
  }
}

/* Para escritorio pantallas normales: */
@media only screen and (min-width: 1000px) {
  .ct_escala_posicion{
      top: 1em;
      left: 45em;
    }
    .ct_mensaje_posicion{
     top: 50em;
    left: 52em;
  }
}

/* Para escritorio pantallas largas: */
@media only screen and (min-width: 1400px) {
  .ct_escala_posicion{
      top: 2em;
      left: 80em;
    }
    .ct_mensaje_posicion{
     top: 48em;
    left: 52em;
  }
}

.hand{
  cursor: pointer;
}
.loading{
  cursor: progress;
}
.crosshair{
  cursor: crosshair;
}
.hand-cursor{
  cursor: pointer;
}

.square_DT {
  background-color:#00C0FF;
  
}

.square_TT {
  background-color:#47B417;
  
}

.square_HC1 {
  background-color:#ffff00;
  color:black;
}

.square_HC2 {
  background-color:#ff8000;
}

.square_HC3 {
  background-color:#ff0000;
}

.square_HC4 {
  background-color:#9900FF;
}

.square_HC5 {
  background-color:#f72bfc;
  
}