/*********************/
.custom-select {
    position: relative;
    display: inline-block;
}

.selected-option {
    display: block;
    padding-left: 20px;
    padding-right: 30px;
    overflow: hidden; /* Oculta el texto que excede el ancho del contenedor */
    white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
    text-overflow: ellipsis; /* Agrega puntos suspensivos (...) al final del texto que excede el ancho */
}

.options {
    position: absolute;
    left: 0;
    right: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 10px;
    list-style-type: none;
    padding: 0;
    display: none;
    z-index: 100;
    margin-top: 10px;
}
.options.pax{
    height: 200px;
    padding: 10px 0;
    overflow-y: scroll;
}

/* Estilo básico del scrollbar */
.options.pax::-webkit-scrollbar {
    /* Ancho del scrollbar */
    width: 14px;
}
/* Estilo del track (la parte por donde se desliza el thumb) */
.options.pax::-webkit-scrollbar-track {
    /* Color de fondo del track */
    background: transparent;
}
.options.pax::-webkit-scrollbar-track:hover {
    background: #f1f1f1;
    border-radius: 10px;
}
/* Estilo del thumb (la parte que se mueve del scrollbar) */
.options.pax::-webkit-scrollbar-thumb {
    /* Color del thumb */
    /* background: #2ea3f84d; */
    background: #c1c1c1;
    border-radius: 10px;
}
/* Estilo del thumb al pasar el mouse */
.options.pax::-webkit-scrollbar-thumb:hover {
    /* Oscurece el thumb cuando se pasa el mouse */
    /* background: #2ea3f8bf; */
    background: #a8a8a8;
    border-radius: 10px;
}

.options li {
    padding: 2px 15px;
}

.options li:hover {
    background-color: var(--main-white-bone);
}

.select-none {
    -webkit-appearance: none; /* Safari y Chrome */
    -moz-appearance: none; /* Firefox */
    appearance: none; /* Otros navegadores */
}
.own-border-right{
    border-right: 1.5px solid #D9D9D9;
}
.select-wrapper {
    position: relative;
    align-content: center;
}

.select-wrapper .custom-select .options li{
    color: var(--main-gray-2);
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
}
.custom-select .select-currency .options li{
    font-weight: 700;
}


/* Estilo para la flecha personalizada */
.select-arrow {
    position: absolute;
    top: calc(50% - 5px); /* Centra verticalmente la flecha */
    right: 20px; /* Ajusta la distancia desde el borde derecho */
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 6px 0 6px; /* Forma una flecha apuntando hacia abajo */
    border-color: var(--main-black-3) transparent transparent transparent; /* Color de la flecha */
}


@media (min-width: 768px){
    .selected-option {
        padding-left: 0;
    }
}