.loading-chart{
  width:100%;
  height:200px;
  background:url('../images/loading.svg') no-repeat center center / 64px;
}

.chart-title{
  font-size:30px !important;
  color:var(--purple-color) !important;
  border:none !important;
}

.chart-subtitle{
  color:var(--purple-light-color) !important;
}

/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:after {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  left: 12px;
  bottom: 12px;
  background-color: var(--purple-color);  
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--purple-color);
}

input:focus + .slider {
  box-shadow: 0 0 1px var(--purple-color);
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

input:checked + .slider:after{
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);  
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before, .slider.round:after {
  border-radius: 50%;
}

/* bubble chart*/
.bubble-chart, .bubble-categories{
  list-style: none;
  padding:0px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;  
}

.bubble-chart li{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height:85px;
  flex-shrink: 0;
  margin:5px;
  border-radius: 50%;  
  -webkit-transition:all linear 0.8s;
  transition:all linear 0.8s;
}

.bubble-chart li p{
  font-weight: bold !important;
  color:white;    
  line-height: 15px;
}

.bubble-chart li:not(.show){
  width: 0px;
  height:0px;
  opacity:0;
  visibility: hidden;
}

.bubble-chart li:hover{
  opacity: .7;
}

.bubble-chart li span{
  font-size:12px;  
  width: 100%;
  flex-shrink: 0;
  text-align: center;
  margin: 0px;
}

.bubble-categories li{
  display: flex;
  align-items: center;
  justify-content: center;  
  margin:5px;  
  font-weight: bold !important;
  color: #0E1011;    
  font-size: 15px;  
  cursor: pointer;
}

.bubble-categories li.opacity{
  opacity: .5;
}

.bubble-categories li .rec{
  display: inline-block;
  width:16px;
  height:16px;
  flex-shrink: 0;
  margin-right: 3px;
}

.d3-tip .tooltip-content{
  background:#FFF;
  padding:15px;
  border-radius:5px;  
  max-width:300px;
  border-radius:15px;
  box-shadow: 0px 0px 5px 0px #d7d7d7;
}

.d3-tip .tooltip-content h3{
  margin:0px 0px 5px 0px;
  font-size:20px;
  font-weight: bold;  
}

.d3-tip p{
  margin:0px; 
}

.fuente-viz{
  font-size: 12px;
  line-height: 15px;
}

.d3-tip .tooltip-content p:last-of-type{
  margin-top:5px;
}

.visualization .legend label{
  font-size:12px;
}

.visualization .legend ul li{
  list-style: none;
  width:64px;
  flex-shrink: 0;
  text-align:center;
  font-size:12px;
  color:#000;
}

.visualization .legend ul li .rec{
  display: inline-block;
  width:64px;
  height:15px;
}

.visualization path:hover{
  cursor: inherit;
  opacity:.7; 
}

.visualization .legend{
  position:absolute;
  bottom:0px;
  left:50px;
  max-width:300px;
}

.visualization .legend .circle{
  width:15px;
  height:15px;
  border-radius:15px;
  display:inline-block;
}

.chart-filters{  
  position: relative;  
}

.chart-filters select{  
  position: absolute;
  right:0px;
  font-weight: bold;
  font-size:16px;
  font-family: 'Barlow', sans-serif;
  padding:5px 15px;
  outline: none;
}

@media all and (max-width: 767px){
  .bubble-chart li{
    width:60px;
    height:50px;    
  }
  .bubble-chart li p{
    font-size: 10px !important;
    line-height: 10px;
  }
  .bubble-chart li p span{
    font-size: 8px;
  }
}

@media all and (max-width: 1024px){
  .visualization .legend{
    position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px auto;
      left:0px;
  }
}


@media all and (max-width:767px){
  .d3-tip .tooltip-content{
    text-align: left;
  }
  .visualization .legend{
    position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px auto;
      left:0px;
  }

  .visualization .legend h2{
    font-size:25px;
  }
}

@media all and (max-width: 480px){  
  .d3-tip.n {
      width: 300px;
      left: calc((100vw - 300px)/2) !important;
  }
  .d3-tip .tooltip-content{
    margin:0px auto;    
      display: table;
  }
}