@font-face{
    font-family: "TitilliumWeb";
    src: url('../fonts/Titillium/TitilliumWeb-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style:normal;
}

*{
    font-family: 'TitilliumWeb';    /* CON ESTO USO EL MISMO TIPO DE LETRA PARA TODO */
}

.font-courier{
    font-family: Courier New,Courier,Lucida Sans Typewriter,Lucida Typewriter,monospace;
}


/*
    COLORES DE TEXTO  
*/
.text-gris{
    color: #c2c2c2 !important;
}

.text-red{
    color: #A94442 !important;
}

.text-azul{
    color: blue !important;
}

.text-negro{
    color: #000 !important;
}


/*
    COLORES DE FONDO
*/

.bg-primary-bt3{
    background-color: #337AB7 !important;
}

.bg-danger-bt3{
    background-color: #F2DEDE !important;
}

.bg-pronostico-heladas{
    background-color: #873D87 !important;
}

.bg-success-bt3{
    background-color: #DFF0D8 !important;
}

.bg-estaciones-atrazada{
  background-color:  #FFEFBF !important;
}

.bg-gris{
    background-color: #c2c2c2 !important;
}

.bg-cabezera{
  background-color: #144C52 !important;
  color: #fff;
}

.bg-rotulo-tabla{
    background-color: #d3e0ea !important;
}

.bg-olasCalor{
    background-color: #ff5050 !important;;
    color: #fff !important;
}

.bg-olasFrio{
    background-color:#0288D1 !important;;
    color: #fff !important;
}

.bg-menu{
  background-color: #276678 !important;;
  color: #fff !important;
}



.text-requerimiento{
    font-size: 12px;
    color: #878787;
}


.top {
  -webkit-animation-name: fade;
          animation-name: fade;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
  -webkit-animation-direction: alternate;
          animation-direction: alternate;
}

@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}  


.tabla_infoDMC th {
  padding: 10px;
  font-weight: bold;
  font-size: 22px; 
  text-align: left; 
  border-bottom: 2px solid white;

}

.tabla_infoDMC td {
  font-family: 'TitilliumWeb';  
  padding: 10px;
  font-size: 16px; 
  text-align: left; 
  vertical-align: top;
  line-height: 1.8em;
  border:none;
  width: 25%;
}
/* ajustar tamaño logo nav */
img{
  height: 150px;
  width: 150px;
}

/*Fijar cabecera Tabla*/
thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

#rowGrafico{
  display: none;
  max-width: var(--max-content-width);
  max-height: 400px;
}

#graficoTemperatura{
  /* height: 430px;
  width: 100%;
  /* position: absolute; */ 
  max-width: 100%;
  width: 100%;
  max-height: 400px;
}
#grafico{
  /* position: relative;
  margin: auto;
  height: 80vh;
  width: 80vw; */
  display: block;
  width: 80vw;
  height: 80vh;
}
#rowInfo{
  display: none;
}
#tabla-contenedor{
  display: none;
}
/* efecto cargando */
#contenedorcargando{
  display: none;
}
#td_0{
  text-align: left;
}
#td_00{
  text-align: left;
}
#td_1{
  text-align: center;
}
#td_2{
  text-align: center;
}
#td_3{
  text-align: center;
}
#td_4{
  text-align: center;
}


@media screen and (max-width: 500px) {
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    font-size: .8em;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
    text-transform: uppercase;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
  #td_1{
    text-align: right;
  }
  #td_2{
    text-align: right;
  }
  #td_3{
    text-align: right;
  }
  #td_4{
    text-align: right;
  }
  /* .text-center{
    align-items: end;
  } */
}