#hr-info {
    text-align: justify;
}

#title_navigation {
    text-align: center;
}

.more_litle{
	font-size: 10px;
}

#hideHFDescription {
  cursor: pointer;
}

.btn_filtro {
    margin-top: 13px !important;
}
  
.filtro {
  margin-bottom: 2%;
  margin-top: 1%;
}

.filterDate {
  text-align: center;
  padding-left: 13% !important;
  width: 100% !important;
}

.badgebox
{
    opacity: 0;
}

.badgebox + .badge
{
    /* Move the check mark away when unchecked */
    text-indent: -999999px;
    /* Makes the badge's width stay the same checked and unchecked */
	width: 27px;
}

td.day.disabled {
    background-color: lightgray !important;
}

.badgebox:focus + .badge
{
    /* Set something to make the badge looks focused */
    /* This really depends on the application, in my case it was: */
    
    /* Adding a light border */
    box-shadow: inset 0px 0px 5px;
    /* Taking the difference out of the padding */
}

.badgebox:checked + .badge
{
    /* Move the check mark back when checked */
	text-indent: 0;
}

#searchByName {
  font-size: 18px !important;
}

span.twitter-typeahead {
    width: 79% !important;
}

input.typeahead.on{
    width: 113% !important;
  }
  
  input#estaciones {
    left: 13%;
  }
  
  .typeahead,
  .tt-query,
  .tt-hint {
    width: 13% !important;
    height: 46px;
    
    float: right !important;
    padding: 8px 12px;
    line-height: 30px;
    border: 2px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    outline: none;
    margin-top: 2px;
    -webkit-transition: width 1s; /* For Safari 3.1 to 6.0 */
    transition: width 1s;
  
  }
  
  .typeahead {
    background-color: #fff;
  }
  
  .typeahead:focus {
    border: 2px solid #0097cf;
  }
  
  .tt-query {
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
       -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  }
  
  .tt-hint {
    color: #999
  }
  
  .tt-menu {
    width: 113% !important;
    margin: 12px 0;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
       -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
            box-shadow: 0 5px 10px rgba(0,0,0,.2);
  }
  
  .tt-suggestion {
    padding: 3px 20px;
    font-size: 14px;
    line-height: 24px;
  }
  
  .tt-suggestion:hover {
    cursor: pointer;
    color: #fff;
    background-color: #0097cf;
  }
  
  .tt-suggestion.tt-cursor {
    color: #fff;
    background-color: #0097cf;
  
  }
  
  .tt-suggestion p {
    margin: 0;
  }

  #navigation_estacion {
    margin-top: 2%;
  }

  .navEstacionItem > span {
    margin-bottom: 2%;
    margin-top: 2%;
  }

  .btn_filtro > button {
    background: lightblue;
  }

  .btn_filtro > button:hover {
    background: white;
  }

  button.btn.btn-block.btn-default.btn-lg.filtro_3.on {
    background: #36c6d3;
    color: white;
  }

  .graph_comp_type {
    background: lightblue;
  }

  .graph_comp_type:hover {
    background: white;
  }

  .graph_comp_type.on {
    background: #36c6d3;
    color: white;
  }

/* resoluciones menores */
  
@media screen and (max-width: 1366px) {
  input.typeahead{
    width: 23% !important;
  }
}

@media screen and (max-width: 991px) {
  input.typeahead{
    width: 8% !important;
  }
  .navEstacionItem > span {
    margin-bottom: 2%;
    margin-top: 2%;
    width: 58%;
  }
}

@media screen and (max-width: 640px) {
  input.typeahead{
    width: 25% !important;
  }
}