/* Estilo para el contenedor de Select2 */

.select2-container {

    position: relative;

    padding: 0; /* Ajusta el relleno según tus necesidades */

    border-radius: 4px; /* Ajusta el radio de los bordes */

    box-sizing: border-box;

}

.select2.select2-container{
    width: 100% !important;
}


/* Estilo para el contenedor del elemento seleccionado */
.select2-container .select2-selection--single {
    height: auto; /* Altura automática para el contenedor */
    padding: 5px; /* Ajusta el relleno interno según sea necesario */
}

/* Estilo para los elementos de la lista desplegable */
.select2-dropdown .select2-results__option {
    padding: 5px 12px; /* Relleno interno de cada opción */
}

.select2-container--default .select2-selection--single {
    background-color: transparent;
    /* border: 3px solid var(--complementary-color);  */
    border-radius: 4px;
}

#index .select2-container--default .select2-selection--single {
    border: 3px solid var(--complementary-color); /* Borde de la lista desplegable */
}


#checkout .select2-container--default .select2-selection--single {
    border-bottom: 3px solid #DC7D27; /* Borde de la lista desplegable */
}


.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--complementary-color);
    color: white;
}


.input-group>.select2 {
    position: relative;
    flex: 1 1 auto;
    width: 1% !important;
    min-width: 0;
}









.table tr th,
.table tr td {
        flex-wrap: nowrap;
        white-space: nowrap; 
}

.table.border-bottom thead th, .table.border-bottom th {
    
border-bottom: solid 3px #e45414;
}

/* Estilo de la tabla con bordes */

/* Estilo para las filas impares y pares */
.table-bordered tr.odd {
    background-color: #ffebee; /* Color de fondo para las filas impares */
}

.table-bordered tr.even {
    background-color: #DCE0E0; /* Color de fondo para las filas pares */
}


/* Estilo para los botones de DataTables con color rojizo */
/* Estilo para los botones de DataTables con color rojizo */
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: #fff !important;
background-color: var(--primary-color)  !important;
border-color: var(--primary-color)  !important;
margin-top: 30px; /* Margen superior para la paginación */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
color: #fff !important;
background-color: var(--complementary-color)  !important; /* Color más oscuro para el hover */
background:  var(--complementary-color)  !important;
border-color: var(--primary-color)  !important;
}

/* Estilo para el botón deshabilitado */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
color: #ccc !important;
background-color: var(--color-1) !important; /* Color más claro para el botón deshabilitado */
border-color: var(--color-1)  !important;
cursor: not-allowed;
}


.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    color: var(--light-color) !important;

}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
border: 1px solid var(--primary-color)  !important;
color: var(--complementary-color) !important;

}

.dataTables_wrapper .dataTables_length {
    margin-left: 20px;
    padding-left: 20px;

}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
border-color: var(--primary-color)  !important;
box-shadow: 0 0 5px var(--primary-color)  !important;
}

@media (min-width: 757px) {
    .dataTables_length {
        width: 50%;
        float: left;
    }

    .dataTables_filter {
        width: 50%;
        float: right;
    }
}