styles.css

body {
  background-color: #1C1C1C;
  font-family: "Signika", sans-serif;
  user-select: none;
}

.center {
  text-align: center;
  margin: 5px 0px 20px 0px;
} 

#input-text.highlight {
  border: 2px dashed white;
  background-color: #3a3a3a;
}

#custom-filename-container {
  position: absolute;
  border-radius: 20px;
  padding: 4px;
  background-color: black;
  border: none;
  outline: none;
  }

#custom-filename {
  color: white;
  width: 250px;
  border-radius: 20px;
  padding: 6px;
  background-color: #3a3a3a;
  border: none;
  outline: none;
}

.Searchers {
  display: flex;
  margin-bottom: 1;
}

.Group-tags {
  flex: 50%;
  padding-left: 3px;
}


.autocomplete-container {
  position: relative;
  float: right;
}

#autocomplete-input {
  width: 250px;
  height: 33px;
  border-radius: 20px;
  padding-left: 5px;
  box-sizing: border-box;
  background-color: black;
  color: white;
  font-size: 15px;
  border: none;
  outline: none;
  }

#autocomplete-input:hover {
  background-color: #0f0f0f;
}

#autocomplete-input:focus {
  background-color: #2e2e2e;
}

.autocomplete-items {
  position: absolute;
  top: 100%; /* Coloca la lista justo debajo del campo de entrada */
  left: 0;
  right: 0;
  z-index: 1000; /* Asegura que la lista se superponga sobre otros elementos */
  border-radius: 20px;
  max-height: 500px;
  overflow-y: scroll; /* Add scroll */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.autocomplete-items div {
  color: white;
  padding: 6px;
  cursor: pointer;
  background-color: rgba(20,20,20,0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  margin-bottom: 2px;
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: 20px;
}

.autocomplete-items div:hover {
  background-color: rgba(255, 255, 255, 0.2)
}

/* Estilo para el contenedor desplegable de categorías */

.category-dropdown {
  background-color: rgba(20,20,20,0.75);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 20px;
  padding: 5px;
  position: absolute;
  max-height: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow-y: scroll; /* Add scroll */
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  border: 2px solid rgba(255,255,255,0.2);
}

.category-dropdown.hidden {
  display: none;
}

.category-item {
  color: white;
  cursor: pointer;
  padding: 5px;
  border-radius: 20px;
  padding-right: 20px;
  display: flex;
  align-items: center;
  justify-content: left;
 }

.category-emoji {
  margin-right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
}

.category-item:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.subcategory-item {
  color: lightgray;
  cursor: pointer;
  padding: 5px;
  border-radius: 20px;
  padding-left: 25px;
}

.subcategory-item:hover {
  background-color: rgba(0, 0, 0, 0.2);
}


.subcategory-container {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  margin-left: 25px;
  padding: 5px;
}

.item-container {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  margin-left: 25px;
  padding: 5px;
}

.word-item {
  color: white;
  padding: 5px;
  cursor: pointer;
  background-color: rgba(20,20,20,0.75);
  margin: 4px;
  padding-left: 25px;
  border-radius: 20px;
  transition: all 0.1s ease;
}


.word-item:hover {
  background-color: black;
  margin-left: 14px;
  padding-left: 15px;
}

.hidden {
  display: none;
}

.buttons {
  width: 50px;
  height: 33px;
  border-radius: 20px;
  border: none;
  font-size: 15px;
  font-family: "Arial", sans-serif;
  cursor: pointer;
  background: #0f0f0f;
  color: white;
  }

.buttons:hover {
  scale: 1.1;
  background-color: #3a3a3a;
  }


.confirm-button {
  padding: 0px 2px;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-family: "Arial", sans-serif;
  cursor: pointer;
  background: 0,0,0,0;
  }

.confirm-button:hover {
  scale: 1.2;
  }

.cancel-button {
  padding: 0px 2px;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-family: "Arial", sans-serif;
  cursor: pointer;
  background: 0,0,0,0;
  }

.cancel-button:hover {
  scale: 1.2;
  }

.random-word-button {
  padding: 0px 4px;
  float: right;
  border: none;
  border-radius: 20px;
  font-size: 15px;
  font-family: "Arial", sans-serif;
  cursor: pointer;
  background: 0,0,0,0;
  }

.random-word-button:hover {
  scale: 1.2;
  }
  
 .delete-mode-button {
  font-size: 25px;
  padding: 2px 10px;
  position: relative;
  top: 3px;
}

.container {
  width: calc(100% - 112px);
  float: right;
  margin-left: -200px;
  margin-top: 2px;
}

#input-text {
  width: 100%;
  height: 220px;
  color: white;
  font-size: 14px;
  box-sizing: border-box;
  resize: none;
}

.text-container {
  border-radius: 20px;
  padding: 10px 10px;
  border: none;
  outline: none;
  background-color: black;
}
.text-container:hover {
  background-color: #0f0f0f;
}
.text-container:focus {
  background-color: #3a3a3a;
}

.bubble {
  display: inline-block;
  padding: 8px 8px;
  border-radius: 20px;
  margin: 2px;
  cursor: grab;
}

.bubble:hover {
  padding: 11px 11px;
  border-radius: 24px;
  margin: -1px;
}

.bubble:active {
  cursor: grabbing !important;
}

.bubble-text {
  color: white;
  text-shadow: 0px 0px 8px black;
  user-select: none;
}

.bubble-container {
  display: flex;
  flex-wrap: wrap;
  user-select: none;
}

.ghost {
  opacity: 0;
}

.mitigate-mode {
  opacity: 0.66;
}

.bubble.mitigate-mode {
  cursor: crosshair;
}

.bubble.mitigate-mode:hover {
  opacity: 1;
  filter: saturate(0);
}

.delete-mode {
  opacity: 0.66;
}

.bubble.delete-mode {
  cursor: crosshair;
}

.bubble.delete-mode:hover {
  opacity: 0.33;
}

.emphasis-mode {
  opacity: 0.66;
}

.bubble.emphasis-mode {
  cursor: crosshair;
}

.bubble.emphasis-mode:hover {
  opacity: 1;
  filter: saturate(3);
}

#mitigate-mode-button.active {
  background-color: #4299e3;
}

#delete-mode-button.active {
  background-color: #e3a442;
  color: white;
}

#emphasis-mode-button.active {
  background-color: #e34242;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}