.nav_button .threads_options {
  display: none;
}
.nav_button.active .threads_options {
  display: block;
  color: white;
  top: 7px;
  transition: ease-in-out 0.25s;
}
.nav_button:hover .threads_options {
  display: block;
  color: white;
  top: 7px;
}

.button_attach_icon {
  color: var(--color-accent);
  font-size: 30px;
  border-radius: 6px;
  padding: 3px 5px;
  cursor: pointer;
  margin-right: 6px;
  /* background-color: var(--color-extra-light); */
}

.button_attach_icon:hover {
  background-color: var(--color-light);
}

.tooltip {
    position: relative;
    display: flex;
    cursor: pointer;
  }
  
  .tooltip_mode_selected {
    color: var(--color-accent);
    font-size: 20px;
    border-radius: 6px;
    cursor: pointer;
  }

  .button_more_icon {
    color: var(--color-gray);
    font-size: 26px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
  }

  .button_more_icon:hover {
    color: var(--color-accent);
  }

.tooltip_mode {
  color: var(--color-gray);
  font-size: 20px;
  /* background-color: var(--color-extra-light); */
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.chat_upload_icon {
  margin-right: 6px;
}

.tooltip_mode:hover {
  color: var(--color-accent);
}

  .tooltip .tooltiptext {
    display: none;
    width: fit-content;
    min-width: 200px;
    margin-left: -90px;
    background-color: white;
    color: var(--color-medium);
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 100%;
    left: 120%;
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px var(--color-light);
  }
  
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: calc(50% - 16px);
    margin-left: 0px;
    border-style: solid;
    border-color: transparent;
    border-width: 16px;
  }


  .tooltip .tooltiptext_upload {
    display: none;
    width: fit-content;
    margin-left: -90px;
    background-color: white;
    color: var(--color-medium);
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 140%;
    left: 50%;
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px var(--color-light);
  }

  .tooltip .tooltiptext_upload::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 37%;
    margin-left: 0px;
    border-style: solid;
    border-color: transparent;
    border-width: 16px;
  }

  /* .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 45%;
    margin-left: -5px;
    border-width: 100px;
    border-style: solid;
    border-color: green;
  } */
  
  
  .tooltip:hover .tooltiptext {
    display: block;
  }

  
.tooltip.threads_options{
    border-bottom: none;
    position: absolute;
    right: 10px;
}
.tooltip.message_options{
  top: 11px;
}
.tooltip.threads_options:hover .tooltiptext {
  position: absolute;
  width: 80px;
  margin-left: -40px;
  z-index: 9999;
  bottom: 10%;
}

.thread_options_icon {
  font-size: 16px;
  transition: ease-in-out 0.25s;
}

.nav_button:hover .thread_options_icon {
  transition: ease-in-out 0.25s;
  color: var(--color-accent);
}


.nav_button.active .thread_options_icon {
  padding: 4px;
  color: var(--color-accent);
}

.nav_button.active .thread_options_icon {
  color: var(--color-accent);
  border-radius: 1px;
  transition: ease-in-out 0.25s;
}

.nav_button.active .thread_options_icon:hover {
  border-radius: 6px;
  background-color: white;
}

.nav_button .thread_options_icon {
  color: var(--color-accent);
  border-radius: 1px;
  transition: ease-in-out 0.25s;
}

.nav_button .thread_options_icon {
  padding: 4px;
  color: var(--color-accent);
}

.nav_button .thread_options_icon:hover {
  border-radius: 6px;
  background-color: white;
}

.message_options_icon {
  color: var(--color-medium);
}