/*CSS referente a lista do léxico*/



/*container/aba da lista do léxico*/
.concept{
  display: inline-block;  
  background-color: #e8e8e8;
  outline:1.5px solid black;
  position: fixed;  
  height: 100%;
  margin-left: 0;
  width: 0;
  z-index: 20;
  overflow-x: hidden;
  line-height: 1.4;
  letter-spacing: 0.5px;
  transition: 0.5s;
}

.concept.expanded {
  width: 33vw !important;  
  margin-left: 0%;
  padding: 0;
  margin-right: 0;
} 


/*configurações lista*/
.list {
  text-align: left;
  border-spacing: 0;
  margin:0%;
  height:50vh;
}

/*coluna da lista*/
ul {
  padding:0;  
  padding-bottom: 40px; /*evitar o close button de cobrir o útlimo item*/
}

/*itens lista*/
li {  
  outline: 1px solid #000000;
  background-color: #e8e8e8;
  padding-left:2%;
  padding-right:1%;
}

/*Conceito*/
.concept h2 {
  font-size: 1.8vw;
  font-family: "Vazirmatn Medium", Helvetica, sans-serif !important;
  font-weight: 400;
  padding: 10px 80px 0px 10px;  
  letter-spacing: 0.15vh;  
}

/*Autor*/
.concept h4 {  
  font-size: 0.9vw;
  width: 80%;
  margin-top: 10px;
  color:#000000;
  padding: 0px 100px 20px 10px;
  background-color: transparent;
  line-height: 1.4 !important;
  color: #09ef3f;
}


/*Definição*/
.concept h3 {
  font-weight: 100;
  font-family:"Vazirmatn Regular", Helvetica, sans-serif !important;
  padding: 50px 100px 30px 10px;
  width:95%;
  background-color: transparent;
  line-height: 1.3 !important;
  font-size: 1.2vw;
  
}



/*Botão de fechar*/

.closebtn {
  text-align: right;
  padding-top:0.7%;
  outline: 1.5px solid black;
  text-decoration: none;
  color: black;
  background-color: #e8e8e8;
  visibility: hidden;
  z-index: 50;
}

/*img botão*/
.closebtn img {
  width:1.5vw;
  margin-right:-1%;
}

/*botão hover state*/
.closebtn:hover {
    background-color: #09ef3f;
}

/*atrasar aparição do botão*/
.concept.expanded .closebtn {
  display: block;
  opacity: 1;
  transition-delay: 0.2s;
  bottom:0px;
  visibility: visible;
  position:fixed;
  width: inherit;
  
}

/*Mostrar conteúdo do termo só quando selecionado*/

li .extra {
  display: none;
}

li.active .extra {
  display: block;
}



/*--------------CONFIGURAÇÃO HIGHCHARTS-----------------*/

#data-panel div {
  display: none;
}

#data-panel div.active {
  display: inline-block;
    
}

.concept.expanded ~ .highcharts-figure{
  
  padding: 0;  
  z-index: 0;
  transition: 0.5s;
  position: absolute;
  opacity:0.4;  
  transition: ease-in-out 1s;
} 

.concept.expanded ~.highcharts-figure:hover{
  opacity: 1;
}

.concept.expanded {
  z-index: 100 !important;
}


/*.highcharts-data-table th {
font-family: "Alte",Helvetica, sans-serif;
font-weight: 600;
padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}*/

/*configurações responsivas*/
@media only screen and (max-width: 750px) {

  .concept.expanded {
    width: 85vw !important; 
  } 

  .concept h2 {
    font-size: 5.8vw;
  }

  .concept h4 {  
    font-size: 3.9vw;
  }

  .concept h3 {
    font-size: 5.2vw;
  }

  .concept.expanded {
    width: 85vw !important; 
  } 

  .concept h2 {
    font-size: 5.8vw;
  }

  .concept h4 {  
    font-size: 3.9vw;
  }

  .concept h3 {
    font-size: 5.2vw;
  }

  .closebtn img {
    width:2.5vw;

}