/* Contenedor principal del select customizado */
select {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: url(../../../ima/chevron-down-solid.svg) no-repeat right;
    background-size: auto 50%;
    padding-right: 20px;
    background-position: right 7px center;
    cursor: pointer;
    border-radius: 0.375rem !important;
    border: 1px solid #10b981;
}

.custom-select:not(.not-custom-select-styles) {
    width: 100%;
    padding: 0 35px 0 0;
    height: 35px; /* Ajustado al tamaño real */
    max-height: 35px;
    background-size: auto 50%, auto 50%;
    border-radius: 0.25rem;
    position: relative;
    border: 1px solid #059669;
    cursor: pointer;
    display: flex;
    align-items: center;
    background-image: url(../../../ima/chevron-down-solid.svg);
    background-position: right 10px center;
    background-repeat: no-repeat;
    background-size: 12px;
    padding-left: 15px;
    outline: none;
    font-weight: 700;
    font-size: 0.75rem;
    line-height: 1rem;
    color: #059669;
}

/* Trigger del select (lo que se ve antes de desplegar) */
.custom-select-trigger {
    width: 100%;
    overflow: hidden;    
    text-wrap: nowrap;
}

/* Lista de opciones */
.custom-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #d1d5dc;
    border-radius: 10px;
    max-height: 30vh;
    overflow-y: auto;
    display: none;
    z-index: 1000;
    list-style: none;
    margin: 5px 0 0;
    padding: 0;
    width: max-content;
}

/* Cada opción de la lista */
.custom-options li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 11px;
    color: #333;
    border-bottom: 1px solid #f6f3f4;
    width: 100%;
}

.custom-options li:hover, .custom-options li.selected {
    background-color: #fbf9fa;
}

/* .selectCountryPhonebook {
    background-image: url(../../../ima/World.svg), url(../../../ima/chevron-down-solid.svg);
    background-position: 7px center, right 10px center;
    background-repeat: no-repeat, no-repeat;
    background-size: 20px, 12px;
    padding-left: 40px;
} */

.presence-menu .dropdown-item i {
  width: 18px;
  text-align: center;
}

#presenceSelected i.fas.fa-chevron-down {
    font-size: 0.6em;
    margin-left: 10px;
}

div#confButton .custom-select {
    width: 85%;
}

div#audioControlsContainer .custom-select {
    max-width: 85%;
}

.presence-menu.dropdown-menu>li>a:hover, .presence-menu.dropdown-menu>li>a:focus {
    color: inherit;
    text-decoration: none;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: none;
}

/* .transcript-language-selected,
.translate-language-selected,
div#presenceSelected {
    cursor: pointer;
    height: 100%;
    border: 2px solid #10b981;
    display: inline-block;
    width: 60px;
    display: flex;
    align-items: center;
    padding: 5px;
    border-radius: 0.375rem;
} */

.new-select {
  padding: 0.375rem 0.75rem;          /* py-1.5 px-3 */
  border-radius: 0.375rem;            /* rounded */
  border-width: 1px;                   /* border */
  font-size: 0.75rem;                  /* text-xs */
  font-weight: 700;                     /* font-bold */
  display: flex;                        /* flex */
  align-items: center;                  /* items-center */
  justify-content: space-between;       /* justify-between */
  gap: 0.5rem;                          /* gap-2 */
  min-width: 50px;                       /* min-w-[50px] */
  box-shadow: 0 1px 2px rgba(0,0,0,0.05); /* shadow-sm */
  transition: all 0.2s ease-in-out;     /* transition-all */
  background-color: #ffffff;            /* bg-white */
  color: #059669;                        /* text-emerald-600 */
  border-color: #059669;                 /* border-emerald-600 */
}

.new-select:hover {
  background-color: rgba(220, 252, 231, 0.5); /* bg-emerald-50/50 */
}

div.transcript-list, div.translate-list {
    position: relative;
    /* height: 28px; */
    /* flex-grow: 2; */
    display: inline-block;
}

#translateVoiceListDialog div.translate-list,
#translatePstnVoiceListDialog div.translate-list {
    height: 28px;
}

#TranslateTranscriptList span.icon-img:empty,
span.tts-clon-language-icon.icon-img:empty {
    display: none;
}

#TranslateTranscriptList span.icon-img {
    flex-grow: 0;
    margin: 0 10px;
}

span.tts-clon-language-icon.icon-img {
    margin-left: 5px;
}

.translate-language-selected img,
.transcript-language-selected img,
div#presenceSelected img {
    height: 100%;
}

.translate-language-selected > img,
.transcript-language-selected > img {
    height: 75%;
    padding-right: 2px;
}

div#userPresence {
    width: 100%;
    height: 100%;
    margin-left: 15px;
}

div#presenceList {
    /* margin-left: 15px; */
    width: 100%;
    height: 100%;
}

ul.transcriptions-languages,
ul.translate-languages,
ul#presenceTypes {
    max-height: 300px;
    width: 200px;
    padding: 0;
    margin: 0;
    overflow: auto;
    position: absolute;
    border: 1px solid #979797;
    z-index: 150;
    background-color: #fff;
    display: none;
}

.chat-micro-languages ul.transcriptions-languages {
    top: 100%;
    right: 0;
    left: auto;
}

ul#presenceTypes.presence-menu {
    width: max-content;
    min-width: 190px;
}

ul.transcriptions-languages li,
ul.translate-languages li,
ul#presenceTypes li {
    display: flex;
    z-index: 150;
    align-items: center;
    height: 30px;
    padding-left: 5px;
    list-style: none;
    box-sizing: border-box;
    width: 93%;
}

ul.translate-languages li,
ul.transcriptions-languages li,
ul#presenceTypes li {
    width: 100%;
    border-bottom: 1px solid #f6f3f4;
    cursor: pointer;
}

ul#presenceTypes li {
    line-height: 30px;
    white-space: nowrap;
    padding: 0 10px;
    border-bottom: 1px solid #f6f3f4;
    height: 33px;
}

ul.translate-languages li,
ul.transcriptions-languages li,
ul#presenceTypes li * {
    color: #364153;
    text-transform: capitalize;
    font-size: 0.95em;
}

ul.transcriptions-languages li:hover,
ul.transcriptions-languages li.selected,
ul.translate-languages li:hover,
ul.translate-languages li.selected {
    background-color: #fbf9fa;
}

div>div#presenceSelected {
    height: 30px;
    width: 100%;
    max-width: 150px;
    justify-content: flex-end;
    border-radius: 2px;
}

.presence-button {
  /* background-color: #f8f9fa; */
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #28a745;
  font-weight: 500;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.presence-menu {
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  min-width: 180px;
}

.presence-menu .dropdown-item {
  font-weight: 500;
  color: #333;
  padding: 0;
  padding-left: 14px;
  border-radius: 6px;
}

ul#presenceTypes li:hover, ul#presenceTypes li.selected {
    background-color: #fbf9fa;
}

ul.transcriptions-languages,
ul.translate-languages,
ul#presenceTypes {
    /* overflow: hidden; */
    --tw-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8px 10px -6px;
    border-color: #d1d5dc;
    border-width: 2px;
    border-radius: 0.375rem;
    margin-top: 4px;
}

div.chat-transcript-container, div.tridentBot-1 .chat-micro-languages {
    position: absolute;
    height: 30px;
    z-index: 10;
    right: 2%;
    top: 107%;
    background: white;
    display: none;
}

.translate-list h3.transcrip-user {
    width: auto;
    margin-right: 5px;
}

ul.translate-transcriptions-languages, ul.translate-voice-languages, ul.translate-voice-pstn-languages {
    top: 100%;
    right: 0;
}

div.translate-voice-pstn-list h3 img {
    transform: scaleX(-1);
}

div.translate-list {
    margin-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-select.thot-assist-numbers-select {
    padding-left: 5px;
    display: flex;
    align-items: center;
    line-height: 25px;
    padding-right: 25px;
    z-index: 1000;
    background-color: white;
    cursor: pointer;
    justify-content: flex-end;
    width: 25%;
    align-self: flex-end;
    margin-right: -10px;
}

.ui-dialog-content .translate-list:not(.trident-hide), 
.ui-dialog-content .transcript-list:not(.trident-hide) {
    display: flex;
    justify-content: flex-start;
    margin-left: 0;
    margin-bottom: 10px;
}

.ui-dialog-content .volume-control img {
    width: 17px;
    height: 17px;
}

select.tts-clon-voices-select {
    padding: 2px 5px 2px 9px;
    width: 100%;
}
/* @media screen and (min-width: 1200px) {
    .outgoingAnisSelect .custom-select-trigger {
        font-size: 12px;
    }
}

@media screen and (min-width: 1500px) {
    .outgoingAnisSelect .custom-select-trigger {
        font-size: 14px;
    }
}

@media screen and (min-width: 1800px) {
    .outgoingAnisSelect .custom-select-trigger {
        font-size: 14px;
    }
} */