html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

html {
    position: relative;
    min-height: 100%;
}

body {
}

.formx2 {
    width: 45%;
    float: left;
}

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

.highlight {
    background-color: #E35C2B !important; /* O el color que prefieras */
    color: #fff !important;
}

.btn-danger {
    background-color: #00B08D;
    border-color: #00B08D;
}

.btn-warning {
    background-color: #00B08D;
    border-color: #00B08D;
    color: #fff;
}

.btn-success {
    background-color: #00B08D;
    border-color: #00B08D;
}

.btn-info {
    background-color: #00B08D;
    border-color: #00B08D;
}

.btn-primary {
    background-color: #00B08D; /* Un verde ejemplo */
    border-color: #00B08D; /* Un borde ligeramente más oscuro */
}

    .btn-primary:hover {
        background-color: #2BE3BE; /* Un tono más oscuro para el hover */
        border-color: #2BE3BE; /* Un borde que combine con el fondo en hover */
    }

    .btn-primary.focus, .btn-primary:focus {
        background-color: #2cd9a7 !important;
        border-color: #2cd9a7 !important;
    }

.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active { /*Para el Side menu*/
    background-color: #4A7D73;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #00B08D;
    border-color: #00B08D;
}

.nav-treeview > .nav-item > .nav-link.active {
    background-color: #00B08D !important;
    color: #fff !important;
}
/* Colorea la primera fila con un tono más claro de #23ae8e */
.table.dataTable thead tr {
    background-color: #4A7D73; /* Un tono más claro de #23ae8e para la fila del encabezado */
    color: #ffffff; /* Un color de texto que sea legible con este fondo */
}
/* Colorea las filas intercaladas con un color de fondo distinto */
.dataTables_wrapper .dataTable tbody tr:nth-child(odd) {
    background-color: #f2f2f2; /* Un color neutro para las filas intercaladas */
}

/* Asegura un color de texto legible para las filas intercaladas si es necesario */
.dataTables_wrapper .dataTable tbody tr:nth-child(odd) {
    color: #333; /* Puedes cambiarlo si tu color de fondo es más oscuro */
}

.toast.bg-success .toast-header {
    background-color: #4A7D73 !important;
}

.toast.bg-success {
    background-color: #00B08D !important;
}

.footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
}
/*.button-table {*/
@media (max-width: 1269px) { /* Ajusta este valor a tu punto de quiebre deseado */
    .custom-col {
        flex: 0 0 100%;
        max-width: 100%;
        font-size: 14px;
    }
}

/* Centrar el switch en la celda */
.custom-control {
    text-align: center;
}

/* Personalizar el color del switch */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: #00B08D;
    border-color: #00B08D;
}
/*Configuracion de los datatables*/
/* Reducir el padding para todas las celdas de DataTables */
.dataTables_wrapper td, .dataTables_wrapper th {
    padding: 4px; /* O el valor que prefieras */
}

/* Reducir el tamaño de fuente para todas las DataTables */
.dataTables_wrapper {
    font-size: 0.85em; /* O el tamaño que prefieras */
}

    /* Ajustar el padding y el tamaño de fuente para los botones pequeños en todas las DataTables */
    .dataTables_wrapper .btn-sm {
        padding: 0.25rem 0.5rem; /* Ajustar el padding para hacerlos más pequeños */
        font-size: 0.75rem; /* Reducir el tamaño de la fuente */
        line-height: 1.1; /* Ajustar la altura de la línea si es necesario */
    }

        /* Ajustar el tamaño de los íconos en los botones pequeños para todas las DataTables */
        .dataTables_wrapper .btn-sm i {
            font-size: 0.75rem; /* Ajustar el tamaño del icono */
        }

            .dataTables_wrapper .btn-sm i.fa {
                font-size: 12px; /* O el tamaño que prefieras */
            }
.select2-container--bootstrap4 .select2-selection {
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    padding: .375rem .75rem;
    height: calc(2.25rem + 2px) !important;
}
.nav-treeview > .nav-item > .nav-link {
    padding-left: 35px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #4A7D73 !important;
}
.select2-results__option {
    background-color: whitesmoke; /* Cambia el color de fondo a tu preferencia */
}
.select2-selection__choice {
    background-color: red !important; /* Cambia el color de fondo de las opciones seleccionadas */
    color: black; /* Cambia el color del texto de las opciones seleccionadas */
}

table td {
    white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
    overflow: hidden; /* Oculta el texto que se desborda del contenedor */
    text-overflow: ellipsis;
}
table tr {
    white-space: nowrap; /* Evita que el texto se divida en múltiples líneas */
    overflow: hidden; /* Oculta el texto que se desborda del contenedor */
    text-overflow: ellipsis;
}
/* Limita la altura del listado en el dropdown */
.select2-container .select2-results__options {
    max-height: 100px; /* Ajusta según el alto que quieras */
    overflow-y: auto; /* Permite scroll cuando supera esa altura */
}
.modal-body {
    position: relative;
    overflow-y: auto;
    max-height: calc(100vh - 210px);
}

.EstadoVerde {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: green;
    border-radius: 50%;
    margin-right: 5px;
}
.EstadoRojo {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: red;
    border-radius: 50%;
    margin-right: 5px;
}
.EstadoAmarillo {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: yellow;
    border-radius: 50%;
    margin-right: 5px;
}
.EstadoBlanco {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: white;
    border-radius: 50%;
    margin-right: 5px;
}
/* Estilo del tooltip */
.tooltip-custom {
    position: relative;
}

    .tooltip-custom::after {
        content: attr(title); /* Usamos el atributo title para mostrar el texto */
        position: absolute;
        left: 50%;
        bottom: 125%; /* Se posiciona justo encima del botón */
        transform: translateX(-50%);
        background-color: black; /* Fondo negro */
        color: white; /* Texto blanco */
        padding: 5px 10px;
        border-radius: 5px;
        white-space: nowrap;
        font-size: 12px;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1000;
    }

    /* Mostrar el tooltip cuando se pasa el ratón */
    .tooltip-custom:hover::after {
        opacity: 1;
    }
.dataTables_wrapper td {
    white-space: normal; /* Permite el ajuste de línea */
    word-wrap: break-word; /* Divide las palabras largas si es necesario */
}