/* BUSCA */
#searchBox {
  position: absolute;
  display: none;
  border: 1px solid #ccc;
  padding: 8px;
  background-color: white;
}



/* Estilo para .search-container quando qualquer elemento dentro dela está focado */
.search-container:focus-within {
  border: 1px solid #377260; /* Adicionar uma borda cinza */
  outline: none; /* Remover a borda de foco */
  border: 1px solid #377260; /* Adicionar uma borda cinza */
}

.search-container {
  align-items: center;
  display: flex;
  position: relative;

  background: #ffffff;
  margin-left: 20px;
  border-radius: 8px;
  border: 1px solid #ccc;
  justify-content: flex-end;
}

#searchInput {
  padding: 12px;
  font-size: 16px;
  background: #ffffff;
  outline: none;
  word-break: break-all;
  border-radius: 8px;
  width: 265px;
  text-align: left; /* Garante que o texto comece do lado esquerdo */
  padding-left: 4px; /* Remove qualquer padding extra */
}


#searchInput {

  display: block;
  width: 100%; /* Ajusta o campo para preencher a largura completa */
  box-sizing: border-box; /* Inclui padding e border na largura total */
}



.search-container div[contenteditable="true"]:empty:before {
  content: attr(data-placeholder);
  color: grey;
  pointer-events: none;
  display: block; /* For Firefox */
}

.clearSearch {
  display: block;
  cursor: pointer;
  position: relative;
  margin-left: auto;
  width: fit-content;
  margin-right: 10px;
  font-size: 8px;
}


#imagemNaoEncontrado {
  position: relative;
  top: 250px;
  left: 170px;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  text-align: center;
  height: 170px;
}

#imagemNaoEncontrado img {
  max-width: 60%;
  height: auto;
  margin-left: -50px;
  margin-top: -150px;
}

/* CATEGORIAS DE VARIÁVEIS */
.h2-lista-variaveis {
  cursor: pointer;
  font: 12px 'SF Pro Display', sans-serif;
  height: 17px;
  margin-bottom: 8px;
  width: 130px;
  margin-left: 20px;
}

.h2-lista-variaveis span {
  padding: 2.7px;
  border-radius: 5px;
  background-color: #44766b;
  color: #fff;
  transition: background-color 0.3s ease;
  z-index: 1;
}

.h2-lista-variaveis:hover span {
  background-color: rgb(218, 146, 44);
}



.tabela .nome-variavel {
  border: 1px solid #d2d3d3;
  font-family: auto;
  padding-top: 0;
}



#lista-variaveis {
margin-top: 15px;
padding-top: 5px;
}


/* Estilos para a lista */
.ul-lista-variaveis {
  display: none;
  list-style-type: none;
  padding: 0;
  margin: 3px 0 8px 0;
  overflow-y: auto;
  max-height: 400px;
  font-family: 'Open Sans', sans-serif;
  min-width: 150px;
  overflow-x: hidden; /* Oculta a barra de rolagem horizontal */
}

.ul-lista-variaveis li.preview .nome-variavel  {
  text-decoration: underline;
  text-decoration-color: rgba(0, 0, 0, 0.1); /* Cor preta com 50% de opacidade */
  cursor: default;
}


/* Estilos para a barra de rolagem */
.ul-lista-variaveis::-webkit-scrollbar {
  width: 25px; /* Largura da barra de rolagem */
}

.ul-lista-variaveis::-webkit-scrollbar-track {
  background: #f1f1f1; /* Cor de fundo da barra de rolagem */
  border-radius: 10px; /* Cantos arredondados */
}

.ul-lista-variaveis::-webkit-scrollbar-thumb {
  background: #888; /* Cor da alça da barra de rolagem */
  border-radius: 10px; /* Cantos arredondados */
}

.ul-lista-variaveis::-webkit-scrollbar-thumb:hover {
  background: #555; /* Cor da alça da barra de rolagem quando estiver sendo arrastada */
}

.hover-content {
  display: none;
  position: fixed;
  background-color: rgb(242, 247, 200);
  padding: 10px;
  border: 1px solid #ccc;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 9999 !important;
  border-radius: 10px; /* ajuste o valor conforme necessário */
  height: auto !important;
}

.hover-content p {
  text-align: justify;
  font-size: 12px;
  max-width: 700px;
  margin-bottom: 1px;
}



.ul-lista-variaveis li .info-icon-container i::before {
  opacity: 0; /* Por padrão, o ícone está oculto */
  padding: 0;
}

.ul-lista-variaveis li:hover .info-icon-container i::before {
  opacity: 1; /* Torna o ícone visível quando o mouse está sobre o <li> */
}




.ul-lista-variaveis li {
  font-size: 10px;
  font-weight: bold;
  color: #333;
  margin: 1px 8px 8px 20px;
  position: relative;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  margin-top: 2.5px;
}


.summary-subcategoria {
  background-color: #f0f0f0; /* Altere a cor de fundo conforme necessário */
  color: #333; /* Altere a cor do texto conforme necessário */
  width: fit-content;
  /* Adicione outros estilos conforme necessário */
  cursor: pointer;
  margin-bottom: 6px;
  font-family: 'SF Pro Text', sans-serif;
  font-weight: bold;
  font-size: 13px;
  margin-left: 20px;
}

.ul-lista-subcategoria {
  list-style-type: none;
  padding-left: 0;
}

/* RESIZE */
.grip {
  cursor: ew-resize;
  user-select: none;
  margin-left: -25px;
  height: 20px;
}

.grip i {
  font-size: 24px; /* Tamanho do ícone */
  color: #44766b;
  padding-top: 0;
}

.grip i:hover {
  color: #da922c;
}

/* ajuste para hover com janela menor */
.hover-content img {
  max-width: 100%;
  max-height: 100%;
  background-repeat: no-repeat !important;
  z-index: 4 !important;
}



.info-icon-container i::before {
  opacity: 0; /* Por padrão, o ícone está oculto */
  padding: 0;
}

.ul-lista-variaveis li:hover .info-icon-container i::before {
  opacity: 1; /* Torna o ícone visível quando o mouse está sobre o <li> */
}

.info-div {
  position: absolute; /* Define a posição absoluta para o ícone container */
  left: -25px; 
  right: 40%;

}

.info-icon {
  font-size: 24px; /* Tamanho desejado para o ícone */
  width: 25px;
}




/* CHECKBOX PESQUISA */
.checkbox-label {
  position: relative;
  display: flex !important;
  align-items: center;
  margin-bottom: 1px;
  margin-right: 5px;
}


.custom-checkbox {
  display: none;
}

.checkbox-image {
  width: 21px; /* Ajuste o tamanho conforme necessário */
  height: 21px;
  background-image: url('img/var.png'); /* Substitua pelo caminho da sua imagem desmarcada */
  background-size: cover;
  cursor: pointer;
  margin-bottom: 0;

}

.custom-checkbox:checked + .checkbox-image {
  background-image: url('img/all.png'); /* Substitua pelo caminho da sua imagem marcada */
}



.checkbox-label {
  margin-left: 8px; /* Espaço entre o campo de pesquisa e o checkbox */
}



/* limpar pesquisa invisivel */
.invisível {
  visibility: hidden !important;
}

/* Estilos para a barra de rolagem */
.dv-lista-variaveis::-webkit-scrollbar {
  width: 20px; /* Largura da barra de rolagem */
}

.dv-lista-variaveis::-webkit-scrollbar-track {
  background: #f1f1f1; /* Cor de fundo da barra de rolagem */
  border-radius: 10px; /* Cantos arredondados */
}

.dv-lista-variaveis::-webkit-scrollbar-thumb {
  background: #888; /* Cor da alça da barra de rolagem */
  border-radius: 10px; /* Cantos arredondados */
}

.dv-lista-variaveis::-webkit-scrollbar-thumb:hover {
  background: #555; /* Cor da alça da barra de rolagem quando estiver sendo arrastada */
}


/* CHECKBOX contrair e expandir */
/* CHECKBOX PESQUISA */
.checkbox-label {
  position: relative;
  display: flex !important;
  align-items: center;
  margin-bottom: 1px;
  margin-right: 5px;
}

.custom-checkbox {
  display: none;
}

.checkbox-image {
  width: 21px; /* Ajuste o tamanho conforme necessário */
  height: 21px;
  background-size: cover;
  cursor: pointer;
  margin-bottom: 0;
}

/* Estilos específicos para o segundo checkbox */
.checkbox-image2 {
  width: 21px; /* Ajuste o tamanho conforme necessário */
  height: 21px;
  background-image: url('img/contrair.png'); /* Substitua pelo caminho da sua imagem desmarcada */
  background-size: cover;
  cursor: pointer;
  margin-bottom: 0;
}

.custom-checkbox:checked + .checkbox-image2 {
  background-image: url('img/expandir.png'); /* Substitua pelo caminho da sua imagem marcada */
}

/* Espaço entre o campo de pesquisa e o checkbox */
.checkbox-label {
  margin-left: 8px;
}


.nome-variavel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: grid !important;
}

.nome-variavel1, 
.nome-variavel2 {
  color: #000000;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis !important;
  white-space: nowrap;
}



/* hover cópia de variáveis */
/* hover cópia de variáveis */
.nome-variavel1:hover,
.nome-variavel2:hover {
    background-color:#fcdcb3; /* Cor de fundo ao passar o mouse diretamente nos spans */
    border-radius: 10px; /* Arredondamento */
}

/* Efeito quando um texto é copiado */
.copied-text {
  color: #000000; /* Cor do texto copiado */
  background-color: #fcdcb3; /* Cor de fundo ao copiar */
  animation: moveSideToSide 0.5s infinite alternate;
  border-radius: 10px; /* Arredondamento */
}




.highlight-n {
  background-color: rgba(255, 99, 71, 0.3) !important; /* Tom vermelho suave com transparência */
  border-radius: 13px;
  color: #000000; /* Cor de texto levemente escura para contraste */
  font-weight: bold;
  margin-top: 2px;
  padding: 0.3px 5px;
}

/* Estilo para o padrão [I] */
.highlight-i {
  background-color: rgba(70, 130, 180, 0.3) !important; /* Tom azul suave com transparência */
  border-radius: 13px;
  padding: 0.3px 5px;
  color: #000000; /* Cor de texto levemente escura para contraste */
  font-weight: bold;
}

/* Estilo para o padrão [O] */
.highlight-o {
  background-color: rgba(255, 165, 0, 0.3) !important; /* Tom laranja suave com transparência */
  border-radius: 13px;
  padding: 0.3px 5px;
  color: #000000; /* Cor de texto levemente escura para contraste */
  font-weight: bold;
}

/* Estilo para o padrão [G] */
.highlight-g {
  background-color: rgba(34, 139, 34, 0.3) !important; /* Tom verde suave com transparência */
  border-radius: 13px;
  padding: 0.3px 5px;
  color: #000000; /* Cor de texto levemente escura para contraste */
  font-weight: bold;
}

/* Estilo para o padrão [P] */
.highlight-p {
  background-color: rgba(128, 51, 0, 0.3) !important;/* Tom roxo suave com transparência */
  border-radius: 13px;
  padding: 0.3px 5px;
  color: #000000; /* Cor de texto levemente escura para contraste */
  font-weight: bold;
}

/* Estilo para o padrão [M] */
.highlight-m {
  background-color: rgba(255, 105, 180, 0.3) !important;/* Tom dourado suave com transparência */
  border-radius: 13px;
  padding: 0.3px 5px;
  color: #000000; /* Cor de texto levemente escura para contraste */
  font-weight: bold;
}




  /* Estilo para os blocos de série */
  [class^="serie-block-"] {
    padding: 10px;
    margin: 5px 0;
    border-radius: 5px;
  }
  
  /* Cores alternadas para cada bloco */
  .serie-block-1 { background-color: #e6f7ff; border-left: 4px solid #1890ff; }
  .serie-block-2 { background-color: #f6ffed; border-left: 4px solid #52c41a; }
  .serie-block-3 { background-color: #fff2e8; border-left: 4px solid #fa8c16; }
  .serie-block-4 { background-color: #fff0f6; border-left: 4px solid #eb2f96; }
  .serie-block-5 { background-color: #f9f0ff; border-left: 4px solid #722ed1; }
  
  /* Você pode adicionar mais classes se precisar de mais blocos */


  /* Você pode adicionar mais c */
  .ul-lista-variaveis {
  user-select: none;       /* Impede seleção de texto */
  -webkit-user-drag: none; /* Impede arrastar em navegadores WebKit */
  pointer-events: auto;    /* Garante que os eventos de clique ainda funcionem */
}