﻿.custom-select {
    position: relative;
    display: inline-block;
    width: 100%;
    cursor: pointer;
}

.custom-select-active {
    z-index: 100 !important;
    outline: 0;
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(218, 131, 28, 0.6);
}

.custom-select.disabled {
    pointer-events: none; /* Desactiva la interacción del mouse */
    opacity: 0.6; /* Reduce la opacidad para indicar que está deshabilitado */
}

.novo-dropdownlist-container.disabled {
    cursor: not-allowed;
}

.select-selected {
    background-color: #1e1e1e;
    overflow-x: hidden;
    white-space: nowrap;
    margin-right: 20px;
}

    .select-selected::after {
        color: #fff;
        content: "";
        position: absolute;
        top: 50%;
        right: 10px;
        width: 0;
        height: 0;
        border-left: .4em solid transparent;
        border-right: .4em solid transparent;
        border-top: .5em solid;
        transform: translateY(-50%);
    }

.select-items {
    position: absolute;
    background-color: #1e1e1e;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(218, 131, 28, 0.6);
    z-index: 99;
    max-height: 280px;
    overflow-y: auto;
    border-radius: 0 0 0.375rem 0.375rem;
    width: auto;
    min-width: calc(100% + 2px);
    overflow-x: auto;
    white-space: nowrap;
    margin: 7px 0 0 -13px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
}

.table-responsive .select-items {
    min-width: 100px
}

    /* Personalización de la barra de desplazamiento para navegadores basados en WebKit */
    .select-items::-webkit-scrollbar {
        width: 12px; /* Ancho de la barra de desplazamiento */
    }

    .select-items::-webkit-scrollbar-track {
        background: #1e1e1e; /* Color de fondo de la pista de la barra de desplazamiento */
        border-radius: 0 0.375rem 0.375rem 0.375rem; /* Radio de borde para la pista */
    }

    .select-items::-webkit-scrollbar-thumb {
        background-color: rgba(218, 131, 28, 0.6); /* Color del pulgar de la barra de desplazamiento */
        border-radius: 10px; /* Radio de borde para el pulgar */
        border: 3px solid #1e1e1e; /* Borde alrededor del pulgar */
    }

/* Personalización de la barra de desplazamiento para Firefox */
.select-items {
    scrollbar-width: thin; /* Ancho de la barra de desplazamiento */
    scrollbar-color: rgba(218, 131, 28, 0.6) #1e1e1e; /* Color del pulgar y de la pista */
}

/* Personalización de la barra de desplazamiento para Internet Explorer y Edge */
.select-items {
    -ms-overflow-style: -ms-autohiding-scrollbar; /* Estilo de la barra de desplazamiento */
}

    .select-items.show {
        opacity: 1;
        visibility: visible;
    }

    .select-items div {
        color: #fff;
        cursor: pointer;
        user-select: none;
        padding: 3px 10px;
    }

        .select-items div:hover, .selected-item {
            background-color: rgba(218, 131, 28);
            font-weight: bold;
        }

.select-arrow-active::after {
    transform: translateY(-50%) rotate(180deg);
}

.select-search {
    color: #fff;
    background-color: #1e1e1e;
    width: 100%;
    padding: 8px 10px;
    border: none;
    border-bottom: 1px solid rgba(218, 131, 28);
}

    .select-search:focus, .select-search:focus-visible {
        outline: none;
        box-shadow: none;
    }
