[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

.dropdown-years, .selecct_estados{
  display:flex;
  align-items: center;
  justify-content: center;
}

.dropdown-years span, .selecct_estados span{
  margin-right:10px;
}


.visualizacion  h1.title{
  text-align:center;
  font-weight: bold;
  font-size:57px;
  color:#28414E;
  font-family: 'Roboto', serif;
  margin-bottom:60px !important; 
  width:60%;
  margin-left:auto;
  margin-right:auto;
}

.visualizacion  h5{
  color:#999999;
  font-size:20px;
  font-family: 'Roboto', serif;
}

/*Filtro Estados*/
.visualizacion .contenedor_estados{  
  margin-top:85px !important;
}

.visualizacion  #estados{
  width:80%;
  margin:0px auto !important;
}

.visualizacion  #estados ul.lista{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
}

.visualizacion  #estados ul li{
  font-size:20px;
  font-weight: bold;
  color:#999999;
  font-family: 'Roboto', serif; 
}

.visualizacion  #estados ul li .circle{
  width:8px;
  height:8px;
  margin:0px auto !important;
  background-color:white;
  border-radius: 50%;
}

.visualizacion  #estados ul li:hover{
  cursor:pointer;
  color:#CC0000;
}

.visualizacion  #estados ul li:hover .circle{
  background-color:#CC0000;
}

.visualizacion .tooltip{
  width:200px;
  display:none;
  position: absolute;
  background-color: white;      
  margin-left:-90px !important;
  border-left:1px #BBBBBB solid;
  border-right:1px #BBBBBB solid;
  border-bottom:1px #BBBBBB solid;
  z-index:9999;
}

.visualizacion .tooltip .state{
  font-family: 'Oxygen', sans-serif;
  font-size:18px;
  font-weight: normal;
  padding:5px 10px;
  color:#999999 !important;
}

.visualizacion .tooltip .state:hover{
  background-color:#CC0000;
  color:white !important;
}


.visualizacion  #slider, .visualizacion .noUi-horizontal .noUi-handle{
  background-color:#CC0000;
}

.visualizacion  #slider{
  width:90%;
  margin:0px auto !important;
}

.visualizacion .noUi-horizontal .noUi-handle{
  box-shadow: 0px 0px 10px 2px #CC0000;
}

.visualizacion .years{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:60px !important;
}
.visualizacion .years .year{
  margin-top:10px !important;
  font-family: 'Roboto', serif;
  font-weight: 300;
  font-size:37px;
  color:#999999;
  cursor:pointer;
}

.visualizacion .years .year.yActive{
  color:#28414E;
}

.visualizacion  div.footer{
  font-family: 'Oxygen', sans-serif;
  font-size:14px;
  border-top:1px #ccc solid;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 5px;
  font-size:14px;
  color:#999999;
  background:none;
}

.visualizacion  div.footer div span.r{ 
  font-size: 9px;
  margin: -6px 1px 0px 7px !important;
}

.visualizacion  div.footer div img.virk{
  height: 31px;
  margin-left: 25px !important;
}

path.estado{
  fill:#AAAAAA;
}

.visualizacion .q1{
  fill:#AAAAAA;
}
.visualizacion .q2{
  fill:#6E7A83;
}
.visualizacion .q3{
  fill:#40545E;
}
.visualizacion .q4{
  fill:#2C424D;
}
.visualizacion .q5{
  fill:#222C31;
}
.visualizacion .q6{
  fill:#666;
}

path.estado, .arc path{
  stroke:#fff;
  stroke-width:1px !important;
}

path.estado:hover, path.estado.active{
  fill:#CC0000;
}

.leyenda{
  position:absolute;
  margin-top:-450px !important;
  z-index: 1;
}

.leyenda p{
  font-family: 'Roboto', serif;
  font-weight: bold;
  font-size: 13px;
  color: #27404D;
  text-align: center;
  padding-top: 5px;
  line-height: 20px;
}

div#mapa-visualizacion{
  z-index:999 !important;
  padding-bottom:150px;
  min-height:400px;
	position: relative;
}

div#mapa-visualizacion .loading{
    background: rgba( 255, 255, 255, .8 ) 
    url('../../../images/loading.gif')
    50% 50% 
    no-repeat;
    width:100%;
    height:200px;
}

h3#state_name{
  color:#CC0000;
  font-family: 'Roboto', serif;
  font-weight: bold;
  font-size:33px;
  text-align:center;
  border-bottom:1px #BBBBBB solid;
  padding-bottom:5px;
}

div.datos{
  position:absolute;
  right:15%;
  width:300px;
  margin-top:-50px !important;
}

div.datos .charts{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

div.datos .charts #piechart_mujeres, div.datos .charts #piechart_hombres{
  width:50%;
  text-align:center;
}

div.datos .charts h4{
  font-family: 'Roboto', serif;
  font-weight: bold;
  font-size:16px;
  color:#27404D;
  text-align:center;
  padding-top:5px;
  line-height: 20px
}

div.datos .charts .chart{
  text-align:center;  
  padding-top:20px;
}

div.datos .charts .chart svg{
  border-radius: 50%;
  border:1px #DDD solid;
}

div.datos .charts .chart svg path{
  stroke-width:0px;
}

div.datos .charts .chart img{
  max-width:80%;
}

.tip-pieChart{
  background-color:white;
  border:2px #29424F solid;
  padding:5px;
  border-radius: 5px;
  width:167px;
  display:flex;
  align-items:flex-end;
	z-index: 10000000;
}

.tip-pieChart p{
  text-transform: capitalize;
  font-size:16px;
  text-align:left;
  margin:0px !important;
  color:#3E535F;
  font-family: 'Roboto', serif;
  font-weight: bold;
  line-height: 16px;
}

/*.tip-mapa{
  background-color:white;
  border:2px #29424F solid;
  padding:5px;
  border-radius: 5px;
  width:167px;  
}

.tip-mapa p{
  text-transform: capitalize;
  font-size:16px;
  text-align:center;
  margin:0px !important;
  color:#3E535F;
  font-family: 'Roboto', serif;
  font-weight: bold;
  line-height: 16px;
}*/

.visualizacion div.footer div{
  display:flex;
  align-items:center;
}

.filters_line{
  margin-top:20px !important;
  margin-bottom:15px !important;
}

.filters_line .selecct_estados{
  margin-right:15px; 
}

#line-chart{
  margin-bottom:20px !important;
}

/*Media queries*/
@media(min-width:993px){
 
}

/*Tablet*/
@media(max-width:992px){

  .selecct_estados .select-wrapper.initialized{
    /*border:1px gray solid;
    border-radius:15px;
    padding-left:15px;
    padding-right:15px;*/
  }

  .selecct_estados .select-wrapper span.caret{
    right:15px;
  }

  .selecct_estados ul.dropdown-content li span{
    color:#333 !important;
  }

  h5.filtrar-title{
    color:#E6747D;    
    font-size:19px;
    text-align:left;
    width:80%;
    margin:0px auto 10px auto !important;
  }

  .selecct_estados input:first-child{
    border:0px !important;
    display:none;
  }

  div#mapa-visualizacion{
    padding-bottom:0px !important;
  }

  .visualizacion .container-edos{
    margin-bottom:20px !important;
  }

  div.leyenda{
    width:40%;  
    margin-top:-320px !important;  
  }

  div.leyenda img{
    width:80% !important;
  }

  div.datos{
    position:relative;
    right:auto;
    width:50% !important;
    margin:40px auto !important;
    clear:both;
    float:none;
  }

  .visualizacion div.footer{
    font-size:12px;
  }

}

/*Mobile*/
@media(max-width:767px){
  .dropdown-years{
    padding-bottom:25px;
  }
  .visualizacion #estados ul{
    display:none;
    overflow-y:scroll !important;
  }

  .visualizacion h1.title{
    font-size:30px;
    width:90%;
  }
  .visualizacion .years .year{
    font-size:18px;
    padding-top:20px;
  }

  #estados .dropdown-button{    
    background:none;
    border:1px gray solid;
    display:flex;
    align-items:center;
    justify-content:space-between;    
    margin:25px auto;
    color:#333;
    box-shadow: none;
    border-radius: 10px;
    height:50px;    
    text-transform: none !important;
  }

  /*.visualizacion div.footer{
    align-items:flex-start;
  }*/
  
  .visualizacion div.footer div{
    flex-wrap:wrap;
    justify-content:flex-start;
  }

  .visualizacion div.footer div:last-child{
    justify-content:flex-end; 
  }

  div#mapa-visualizacion{
    min-height: 1px;
  }

  div.datos{
    position:relative;
    right:auto;
    width:100% !important;
    margin:40px auto !important;
    clear:both;
    float:none;
  }
  /*Zoom controles*/
  .visualizacion #mapa-visualizacion div#controles {
    position: absolute;
    right: 50px;
  }

  .visualizacion #mapa-visualizacion div#controles div{
    background-color:#3B3B3B;
    color:#fff;
    line-height: 20px;
    margin:5px;
    font-size:30px;
    text-align:center;
    padding:3px;
    width:26px;
    height:26px;
  }

  div.leyenda{
    width:100%;
    position:relative;
    margin:0px 0px 20px 0px !important;
    text-align:center;
  }

  .visualizacion .container-edos{
    border-bottom:0px;
  }

  .tip-pieChart{
    width:50% !important;
    left:25% !important;
  }
  h3#state_name{
    margin-bottom:40px;
    margin-left: -15px;
    margin-right: -15px;
  }

  .footer div:last-child span{
    text-align:right;
  }
}