details details {
  margin-left: 10pt;
}

.left_treeview {
  background-color: whitesmoke;
  margin: 0.3vw;
  width: 320px ;
  max-height: 77vh;
  font: 10pt Roboto;
  display:inline-block; 
  overflow-x: auto;
  border-radius: 6px;
}

#ed_pesquisa {
  width: 220px;
  border-radius: 0.3em;
}
div#city_panel {
  
  width: 100%;
  background-color: whitesmoke;
  font: 10pt Roboto;
   display:inline-block; 
  overflow-x: auto;

}

#search_itens {
  display: grid;
  grid-template-columns: 100px 230px;
  font: 10pt Roboto;
  padding-left: 8px;

}

#pesqop {
  width: 208px;
}

div#panel_pesquisa {
  height: 52px;
  flex-grow: 1;
  margin: 0.3vw;
  color: #222222;
  border: 1px solid #555555;
  line-height: normal;
  width: 330px;
  padding: 6px 0px;
  font-size: 0.95em;
  font-weight: 0;
  border-radius: 5px;
  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
  border: none;
}


div#campo_pesquisa {
  display: grid;
  height: 20px;
  grid-template-columns: 230px 95px;
  flex-grow: 1;
  margin: 0.3vw;
  color: #222222;
  width: 330px;
  padding: 6px 0px;
}


#btn_search{
  display: flex;
  cursor:pointer;  
  border-radius: 0.3em;
  margin: 0.1em;
  line-height: normal;
  font-size: 0.95em;
  height: auto;
  width: 80px;
}


div#result_pesquisa:hover {
  box-shadow: 2px 2px 5px rgba(0,0,0,.2);  
  }
  
div#result_pesquisa {
  height: 84vh;
  background-color: #818182;  
  text-align: left;
  margin: 0.3vw;
  width: 320px ;
  height: 84vh;    
  font: 10pt Roboto;
  color: whitesmoke;
  padding: 3px;
  display: inline-block;
  line-height: normal;  
  vertical-align: middle;  
  border-radius: 6px;
}

div#top_results {
  float:inline-end;  
  background-color: whitesmoke;
  text-align: center;
  height: 98% !important;  
  width: 100%;
  font: 10pt Roboto;
  display: flex;
  line-height: normal;  
  overflow-x: auto;
  border-radius: 1px;
}

.result_treeview {
  text-align: left;
  background-color: whitesmoke;
  color: black;
  padding-left: 4pt;
  width: 314px !important;  
  height: 80vh !important;  
  font: 10pt Roboto;
   display:inline-block; 
  overflow-x: auto;
}

.result_panel {
  display: flex;
  justify-content: center;
  /* background-color: rgb(149, 39, 39);   */
  height: 100% !important;  
  width: 320px ;
  font: 10pt Roboto;
  color: silver;
  line-height: normal;  
  vertical-align: middle;  
}

div#gif_panel_result {
  display: flex;
  /* background-color: rgb(9, 4, 104);   */
  justify-content: center;
  height: 100%;
  width: 100% ;
  max-height: 60vh;
  font: 10pt Roboto;
  color: silver;
  line-height: normal;  
  vertical-align: middle;  
  overflow-y: auto;
}

div#gif_panel_treeview {
  display: flex;
  background-color: whitesmoke;
  justify-content: center;
  height: 100%;
  width: 100% ;
  max-height: 60vh;
  font: 10pt Roboto;
  color: silver;
  line-height: normal;  
  vertical-align: middle;  
  overflow-y: auto;
}

#load_gif_results{
  margin: auto;
  height: 64px;
  width: 64px ;
}

#load_gif_treeview{
  margin: auto;
  height: 64px;
  width: 64px ;
}

#pesquisa {
  display: flex;
  margin: 0.1em;
  line-height: normal;
  font-size: 0.95em;
  height: auto;
  width: 230px;
  border-radius: 0.3em;
}


.left_treeview:hover {
  box-shadow: 4px 4px 8px rgba(0,0,0,.2);  
  }

summary[selected="true"] {
  background-color: #c0e0ff;
}


summary {
  cursor: pointer;
}

.tree-nav__item.is-expandable::before {
  border-left: 1px solid #333;
  content: "";
  height: 100%;
  left: 0.8rem;
  position: absolute;
  top: 2.4rem;
  height: calc(100% - 2.4rem);
}

.tree-nav__item.is-expandable > .tree-nav__item-title::before {
  position: absolute;
  will-change: transform;
  transition: transform 300ms ease;
  font-family: "ionicons";
  color: #fff;
  font-size: 1.1rem;
  content: "\f125";
  left: 0;
  display: inline-block;
  width: 1.6rem;
  text-align: center;
}
summary:hover {
  background-color: rgb(191, 191, 186);
}
summary .icon {
  width: 14px;
  height: 14px;
}

summary::-webkit-details-marker {
  display: none;
}

summary:only-child::-webkit-details-marker {
  color: transparent;
}
details details {
  margin-left: 10pt;
  display: block;
}

#display {
  display: inline-block;
  vertical-align: center;
}

#display {
  font-family: Roboto;
}
.label {
  font-size: 14pt;
  font-weight: bold;
}
.descr {
  font-size: 10pt;
}