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

.visualizacion .img-semaforo {
  text-align:center;
}

.visualizacion  h1.title{
  text-align:center;
  font-weight: bold;
  font-size:57px;
  color:#1E1E1E;
  font-family: 'Roboto Slab', serif;
  margin-bottom:60px !important; 
}

.visualizacion  h1.title span{
  color:#999999;
  font-size:44px;
  font-weight: 300;
}



.visualizacion .chart-container{
  min-height:600px;
  text-align:center;
  width:90%;
  margin:0px auto;
}   

.visualizacion .chart-container .chart{
  width:90%;
}

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

.visualizacion .main text {
    font: 10px sans-serif;  
}

.visualizacion .axis line, .visualizacion .axis path {
    shape-rendering: crispEdges;
    stroke: #CECECE;
    fill: none;
}

.visualizacion .axis .tick{
  stroke: #333;
    opacity: 0.7;
}

.visualizacion .axis .tick text{
  fill: #999999;
  stroke: #999999;
  font-size:17px;
}

.visualizacion .axis path {
      stroke-width: 0;
}   

.visualizacion .xAxis .tick{
  display:none;
}
.visualizacion  circle{
  fill-opacity:.7;
  stroke:#fafafa;
  cursor:pointer;
}

.visualizacion  circle:hover{
  stroke:#333 !important; 
  cirsor:pointer;
}

.visualizacion .chart-container, .visualizacion .chart-container .datos .cal, .visualizacion .filters .filter, .visualizacion  div.footer div{
  display:flex;
  align-items:center;
}

.visualizacion .chart-container .datos{
  min-width:25%;
  padding:10px 20px;
}

.visualizacion .chart-container .datos h2{
  font-family: 'Roboto Slab', serif;
  font-weight: bold;
  font-size:25px;  
  text-align:left; 
  color:#1E1E1E;   
}

.visualizacion .chart-container .datos .cal{
  justify-content:space-between;      
}

.visualizacion .chart-container .datos hr{
  margin:35px 0px !important;
}    

.visualizacion .chart-container .datos .cal h3{
  font-size:70px;
  font-family: 'Oxygen', sans-serif;
  margin:0px;
  font-weight: bold;
  margin-right:15px !important;
}

.visualizacion .chart-container .datos .cal label{
  font-family: 'Roboto Slab', serif;
  font-size:25px;
  color:#999999;
  text-align:left;
}

.visualizacion .filters{
  margin-bottom:50px !important;
  display:block;
}

.visualizacion .filters .filter{
  justify-content:space-between;
  padding:10px 0px;
}

.visualizacion .filters .filter .switch label input[type=checkbox]:checked+.lever{ 
  background-color:#A64DFF;
}

.visualizacion .filters .filter .switch label input[type=checkbox]:checked+.lever:after{
  background-color:#F2F2F2;  
}


.visualizacion .filters .filter .switch label .lever{
  height:20px;
}

.visualizacion .filters .filter .switch label .lever:after{
  width:15px;
  height:15px;
  top:2px;
  left:2px;
}
.switch label input[type=checkbox]:checked+.lever:after{
  left:22px !important; 
}

.visualizacion .leyenda{
  text-align:center;
  margin-top:80px !important;
}

.d3-tip{
  background-color:rgba(254,254,254,.9);
  border:1px #999999 solid;
  width:214px;  
  padding:10px;    
  margin-left:-70px;
}
.d3-tip h3{
  font-size:30px;
  color:#A3D801;
  margin:0px;
}

.d3-tip h4{
  font-size:14px;      
  margin:5px 0px !important;
  color:#000;
  font-weight: bold;      
}

.d3-tip p{
  font-size:14px;
  color:#999999;
  margin:0px;
  font-weight: bold;
}
.visualizacion  h5{
  color:#999999;
  font-size:20px;
  font-family: 'Roboto Slab', serif;
}

/*Filtro Estados*/
.visualizacion .container-edos{
  margin:0px auto !important;
  padding:0px;
}

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

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

.visualizacion  #estados ul li{
  font-size:20px;
  font-weight: bold;
  color:#999999;
  font-family: 'Roboto Slab', 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:#A84DFF;
}

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

.visualizacion .tooltip{
  width:200px;
  display:none;
  position: absolute;
  background-color: white;      
  margin-left:-90px !important;
}

.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:#EFE2FC;
}

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

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

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

.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 Slab', serif;
  font-weight: 300;
  font-size:37px;
  color:#999999;
  cursor:pointer;
}

.visualizacion .years .year.yActive{
  color:#A64DFF;
}

.visualizacion .angular-google-map-container { 
  height: 280px; 
  z-index:-1 !important;
}

.visualizacion .detail .info{
  background-color:#FFF;
  width:70%;
  margin:-120px 15% 0px 15% !important;  
  z-index:999;
  -webkit-border-radius: 15px;   
  -moz-border-radius: 15px;   
  border-radius: 15px;
  padding-top:30px; 
}

.visualizacion .detail .info .foto{
  width:197px;
  height:198px;    
  -webkit-border-radius: 50%;   
  -moz-border-radius: 50%;   
  border-radius: 50%; 
  margin:0px auto 30px auto !important;
}

.visualizacion .detail .info h1{
  font-family: 'Oxygen', sans-serif;
  font-size:70px;
  font-weight: bold;
  margin-top: 30px !important;
  margin-bottom: 25px !important;
  line-height: 60px;
  text-align:center;
}

.visualizacion .detail .info h2{
  font-family: 'Roboto Slab', serif;
  font-size:25px;
  color:#111;
  text-align:center;
  width:60%;
  margin:0px auto 15px auto !important;
}

.visualizacion .detail .info p{
  font-family: 'Oxygen', sans-serif;
  font-weight: bold;
  text-align:center;
  font-size:16px;
  color:#000000;
  margin:0px;
}

.visualizacion .detail .info hr{
  width:62px;
  margin:20px auto !important;
}

.visualizacion .detail .info p.pTitle{
  margin:10px 0px 40px 0px !important;
}

.visualizacion .detail .info p span{
  font-weight: normal;
  color:#666666;
}

.visualizacion .calificaciones{
  display:flex;
  justify-content:space-around;  
  width:60%;
  margin:0px auto !important;
}


.visualizacion .calificaciones .calificacion{
  width:18%;
}

.visualizacion .calificaciones .circle{
  width:73px;
  height:73px;
  -webkit-border-radius: 50%;   
  -moz-border-radius: 50%;   
  border-radius: 50%; 
  text-align:center;
  color:#FFFFFF;
  font-size:30px;
  font-family: 'Oxygen', sans-serif;
  font-weight: bold;
  line-height: 70px;
  margin:0px auto !important;
}

.visualizacion .calificaciones .calificacion label{
  font-family: 'Oxygen', sans-serif;
  color:#666666;
  font-size:16px;  
  display:block;
  text-align:center;
}

.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;
}

.visualizacion .items{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width:50%;
    margin:50px auto 0px auto !important;
}

.visualizacion .items .item{
  width:45%;
  padding-left:30px;
  background:url("../images/task1.png") no-repeat top left;
  height:50px;
  margin:0px 2% !important;
}

.visualizacion .items .item.ok{
  background:url("../images/task2.png") no-repeat top left; 
}

.visualizacion .items .item.nv{
  background:url("../images/qmark.svg") no-repeat top left;  
}

.visualizacion .btn-inicio{
  display:flex;
  align-items:center;
  justify-content:flex-end;

}

.visualizacion .btn.inicio{
  box-shadow: none !important;
  background:none;
  font-family: 'Oxygen', sans-serif;
  font-size:12px;
  color:#AAAAAA;
  border:1px #AAAAAA solid;  
  margin:20px !important;
  border-radius: 10px;
  display: flex;
  align-items:center;
  justify-content:space-around;
  width:219px;
  padding:5px;
}

.visualizacion .btn.inicio i{
  margin-left:5px !important;
}

div.instruccion{
  text-align:center;
  color:#9e9e9e;
}

text.chart-label{
  font-family: 'Oxygen', sans-serif !important;
  fill:#ababab;
  font-size:16px !important;
}

.tooltipped{
  cursor:pointer;
}

.material-tooltip{
  z-index:9999999;
}

text.chart-label.msg-chart{  
  font-size:32px !important;
}

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

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

/*Media queries*/
@media(min-width:993px){
  .material-tooltip{
    width:50%;
  }
}

/*Tablet*/
@media(max-width:1024px){
  .visualizacion div.footer{
    font-size:12px;
  }
}
@media(max-width:992px){
  .chart-container, .chart-container .datos .cal{
    flex-direction:column;
  }

  .chart-container .datos{
    margin-top:60px !important;    
    width:100%;
    padding:0px !important;
  }

  .chart-container .datos h2{
    text-align:center !important;
  }

  .chart-container .datos .filters{
    display:flex;
    flex-wrap:wrap;
    width:80%;
    margin:0px auto;
  }

  .chart-container .datos .filters .filter{
    width:30%;
    margin:0px 10%;
  }

  .chart-container .datos .filters .filter label{
    text-align:left !important;
  }

  .visualizacion .detail .info{
    width:80%;
    margin: -120px 10% 0px 10% !important;
  }

  .visualizacion .calificaciones{
    width:90%;
  }

  .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;
  }

  .selecct_estados input{
    border:0px !important;
  }

}

/*Mobile*/
@media(max-width:767px){
  .dropdown-years{
    padding-bottom:25px;
  }
  .visualizacion .chart-container .chart{
    width:100%;
  }
  .visualizacion #estados ul{
    display:none;
    overflow-y:scroll !important;
  }
  .img-semaforo img{
    max-width:100%;
  }
  .visualizacion h1.title span{
    font-size:23px;
  }

  .visualizacion h1.title{
    font-size:35px;
  }
  .visualizacion .years .year{
    font-size:18px;
    padding-top:20px;
  }

  #dropdown1{
    flex-direction:column;   
  }

  #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;
  }
  .chart-container .datos .filters .filter{
    width:80%;
  }
  .visualizacion div.footer, .visualizacion div.footer div{
    flex-wrap:wrap;
    justify-content:center;
  }
  .visualizacion div.footer div:first-child span{
    margin-bottom:20px !important;
  } 

  .visualizacion .calificaciones{
    flex-wrap:wrap;
  } 

  .visualizacion .calificaciones .calificacion{
    width:40%;
    margin-top:25px !important;
    margin-bottom:25px !important;
  }

  .visualizacion .items{
    width:70%;
    flex-wrap:wrap;
  }

  .visualizacion .items li{
    width:100% !important;
  }
  .visualizacion .detail .info h2{
    width:100%;
  }

  .visualizacion .detail .info {
    border-top:1px gray solid;
    border-radius:0px;
    padding-top:10px;
    width: 100%;
    margin: 40px 0px 0px 0px !important;
  }

  .visualizacion .detail .info h2{
    padding:0px 15px;

  }

  .visualizacion .detail .info .foto{
    width:118px;
    height:118px;
    background-size: cover !important;
  }

  .visualizacion .angular-google-map-container{
    height:170px;
    width:80%;
    margin:25px 10% !important;
    z-index:1 !important;
  }
  div.instruccion{
    padding:15px;
  }

  .tip-chart{
    width:50% !important;
    left:25% !important;
  }
  text.chart-label.msg-chart {  
    font-size: 20px !important;
  }
}