/* colori versione light*/
:root[dataTheme="light"] {
  --tree-text: #040806;
  --luna-blue: #009bde;
  --tree-background: #f1f1f0;
  --container: #edecec;
  --footer: #e3e2e2;
}


/* colori versione dark*/
:root[dataTheme="dark"] {
  --tree-text: #f3f1f2;
  --luna-blue: #009bde;
  --tree-background: #343131;
  --container: #343131;
  --footer: #2a2828;
}

.treeSelect {
  position: absolute;
  display: block;
  overflow: hidden;
  height: auto;
  width: auto;
  margin: 0 !important;
}

.treeHeader {
  font-family: "Poppins", "Helvetica", "Arial", sans-serif;
  font-weight: 300;
  font-style: normal;
  font-size: 14px;
  border: 1px solid var(--luna-blue);
  border-radius: 50px;
  color: var(--tree-text);
  background: var(--tree-background);
  text-align: left;
  padding: 0 0.5em;
  height: auto;
  vertical-align: middle;
  width: max-content;
}

.down-ts {
  transform: scale(0.7) rotate(45deg) translateY(-0.2em);
  -webkit-transform: scale(0.7) rotate(45deg) translateY(-0.2em);
}

.up-ts {
  transform: scale(0.7) rotate(-135deg);
  -webkit-transform: scale(0.7) rotate(-135deg);
}

.treeDes {
  display: block;
  overflow: hidden;
  margin: 2px;
  width: max-content;
  cursor: default;
  padding: 0 0.2em;
}

.treeSearch input {
  position: relative;
  border: 1px solid var(--luna-blue);
  border-radius: 50px;
  font-family: "Poppins", "Helvetica", "Arial", sans-serif;
  font-weight: 300;
  font-size: 14px;
  left: -0.1em;
  margin: 0.1em;
  height: auto;
  width: 100%;
  outline: 0;
  background: url('search.png') no-repeat center right;
}

.treeSearch input:focus {
  box-sizing: border-box;
  border: 1px solid var(--tree-text) !important;
  outline: var(--tree-text);
}

.treeContainer {
  position: fixed;
  overflow: hidden;
  border-radius: 10px;
  margin: 0.2em;
  height: auto;
  width: max-content;
  display: none;
  background: var(--container);
}

.treeScroll {
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
}

.treeFooter {
  display: flex;
  justify-content: flex-start;
  background: var(--footer);
  width: 100%;
  height: auto;
  padding: 0.2em 0;
}

#treeOpenAll,
#treeCloseAll {
  border: none;
  height: 13px;
  width: 11px;
  margin: 0 0.4em 0.1em 0.2em;
  outline: 0;
  cursor: pointer;
  color: var(--primary-text);
}

.treeHide {
  display: flex;
  font-size: 12px;
  margin: auto 0.3em;
  color: var(--primary-text);
  gap: 0.3em;
}

/*
input[type="checkbox"] {
  cursor: default;
  appearance: auto;
  box-sizing: border-box;
  margin: 0.1em 0.1em 0 0;
}
*/
.treeMatches {
  font-size: 12px;
  font-weight: 500;
  margin: 0 0 0 0.7em;
  color: var(--primary-text);
}

.treeWait {
  background: url('zTreeStyle/img/wait.png') center center no-repeat;
  background-size: 16px 16px;
  background-color: var(--tree-background);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  display: none;
}


/* ----- MEDIA QUERY ----- */

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .treeSearch input {
    font-size: 12px;
  }

  .treeHide {
    font-size: 10px;
  }

  .treeMatches {
    font-size: 10px;
  }

  .treeHeader {
    font-size: 12px;
  }
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) and (max-width: 769px) {
  .treeSearch input {
    font-size: 14px;
  }

  .treeHide {
    font-size: 11px;
  }

  .treeMatches {
    font-size: 11px;
  }

  .treeHeader {
    font-size: 14px;
  }
}

/* Medium devices (landscape tablets, 769px and up) */
@media only screen and (min-width: 769px) and (max-width: 992px) {
  .treeSearch input {
    font-size: 15px;
  }

  .treeHide {
    font-size: 13px;
  }

  .treeMatches {
    font-size: 13px;
  }

  .treeHeader {
    font-size: 15px;
  }
}