:root {
    --color-primary: #087021 !important;
    --color-primaryhover: #0B4C1A !important;
    --color-primaryactive: #087021 !important;
    --color-success: #28A745 !important;
    --color-warning: #FFC107 !important;
    --color-danger: #D4403A !important;
    --color-info: #17A2B8 !important;
    --color-grey-dark: #111111 !important;
    --color-grey-medium: #6C757D !important;
    --color-grey-light: #EDF5EF !important;
    --font-main: 'Source Sans Pro', sans-serif !important;
    --font-heading: 'Montserrat', sans-serif !important;
}

body {
    font-family: var(--font-main) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--color-grey-dark) !important;
    background-color: #F8F9FA !important;
    margin: 0 !important;
    padding: 0 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--color-primary) !important;
}

h1 {
    font-size: 28px !important;
    line-height: 1.5 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-weight: bold !important;
}

h2 {
    font-size: 26px !important;
    line-height: 1.5 !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: bold !important;
}

h3 {
    font-size: 22px !important;
    line-height: 1.5 !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: bold !important;
}

h4 {
    font-size: 20px !important;
    line-height: 1.5 !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 500 !important; /* Medium */
}

h5 {
    font-size: 17px !important;
    line-height: 1.5 !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: 500 !important; /* Medium */
}

label {
    font-weight: bold !important;
    color: var(--color-grey-dark) !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-weight: normal !important; /* Regular */
}

/* Header centrado con un máximo de 1200px */
#header {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto; /* Centra el header */
    padding-left: 40px; /* Espaciado interno opcional */
    padding-right: 40px;
    display: flex; /* Usa flexbox para alinear los elementos */
    align-items: center; /* Alineación vertical */
    justify-content: flex-start; /* Mantiene los elementos alineados a la izquierda */
}

#top {
    width: 100%;
    height: 100%;
    padding: 1rem;
    background-color: #fff;
}

/* Contenedor del enlace y la imagen */
    #homelink {
    max-width: 550px; /* Máximo 550px */
    width: 100%; /* Se adapta hasta 550px */
    display: flex; /* Para alinear el logo dentro */
    align-items: center; /* Alineación vertical */
}

/* Imagen del logo */
.imglogo {
    max-width: 100%; /* Se ajusta al ancho del contenedor */
    height: auto; /* Mantiene la proporción */
}

@media (max-width: 768px) {
    #header {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    font-weight: bold !important;
}

    .btn-primary:hover {
        background-color: var(--color-primaryhover) !important;
        border-color: var(--color-primaryhover) !important;
    }

    .btn-primary:active {
        background-color: var(--color-primaryactive) !important;
        border-color: var(--color-primaryactive) !important;
    }

.form-control {
    border: 1px solid var(--color-grey-medium) !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    padding: 8px 12px !important;
}

    .form-control:focus {
        border-color: var(--color-primary) !important;
        box-shadow: 0 0 5px rgba(8, 112, 33, 0.5) !important;
    }

.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border: 1px solid #087021 !important;
}

.text-danger {
    color: var(--color-danger) !important;
}

.text-success {
    color: var(--color-success) !important;
}

.text-warning {
    color: var(--color-warning) !important;
}

.container {
    max-width: 960px !important;
    margin: auto !important;
    padding: 20px !important;
}

@media (max-width: 768px) {
    .container {
        padding: 10px !important;
    }
}

#select2-selCade-results {
    max-height: 500px !important;
}

.btn-primary,
.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border: 1px solid #087021 !important;
    --bs-btn-border-color: var(--color-primary) !important;
    --bs-btn-hover-border-color: var(--color-primary) !important;
    --bs-btn-active-bg: var(--color-primary) !important;
    --bs-btn-active-border-color: var(--color-primary) !important;
}

.btn-primary1 {
    min-width: 100px;
}

.btn-primary:hover {
    background-color: var(--color-primaryhover) !important;
    border-color: var(--color-primaryhover) !important;
}

.btn-primary:active {
    background-color: var(--color-primaryactive) !important;
    border-color: var(--color-primaryactive) !important;
}

/* Estilo de la etiqueta */
.form-label {
    font-size: 15px !important;
    color: #495057 !important;
    font-weight: bold !important;
}

/* Contenedor principal de la sección solicitante */
#solicitanteSection {
    margin: 0 auto !important;
    padding: 20px !important;
    max-width: 960px !important;
    background-color: #FFFFFF !important;
    border-radius: 8px !important;
    border: 1px solid var(--color-grey-medium) !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
}

    /* Título de la sección */
    #solicitanteSection .h2 {
        font-family: var(--font-heading) !important;
        color: var(--color-primary) !important;
        font-size: 15px !important;
        margin-bottom: 25px !important;
    }

    /* Formulario - Espaciado entre los campos */
    #solicitanteSection .row {
        margin-bottom: 20px !important;
    }

    /* Estilos para los campos del formulario */
    #solicitanteSection .form-control {
        border: 1px solid var(--color-grey-medium) !important;
        border-radius: 4px !important;
        padding: 12px 15px !important;
        font-size: 15px !important;
        color: var(--color-grey-dark) !important;
        transition: border-color 0.3s, box-shadow 0.3s !important;
    }

        #solicitanteSection .form-control:focus {
            border-color: var(--color-primary) !important;
            box-shadow: 0 0 5px rgba(8, 112, 33, 0.5) !important;
            outline: none !important;
        }

    /* Mensajes de error */
    #solicitanteSection .text-danger {
        font-size: 15px !important;
        color: var(--color-danger) !important;
        margin-top: 5px !important;
    }

    /* Títulos y etiquetas */
    #solicitanteSection .form-label {
        font-size: 15px !important;
        font-weight: bold !important;
        color: var(--color-grey-dark) !important;
        margin-bottom: 10px !important;
    }

    /* Espaciado entre los campos */
    #solicitanteSection .mb-3 {
        margin-bottom: 25px !important;
    }

    /* Asegurar que todos los elementos de formulario tengan el mismo alineamiento */
    #solicitanteSection .col-md-4 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    #solicitanteSection .col-md-8 {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

/* Responsividad */
@media (max-width: 768px) {
    #solicitanteSection .col-md-4, #solicitanteSection .col-md-8 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* Estilo de los botones */
#solicitanteSection .btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    border-radius: 4px !important;
    width: 100% !important;
}

    #solicitanteSection .btn-primary:hover {
        background-color: var(--color-primaryhover) !important;
        border-color: var(--color-primaryhover) !important;
    }

    #solicitanteSection .btn-primary:active {
        background-color: var(--color-primaryactive) !important;
        border-color: var(--color-primaryactive) !important;
    }

/* Mensaje cuando no hay alojamientos */
#solicitanteSection #noAlojamientosMsg {
    background-color: var(--color-danger) !important;
    color: white !important;
    padding: 10px !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    margin-top: 20px !important;
    text-align: center !important;
}

/* Diseño general del formulario */
#solicitanteSection .form-check {
    padding-top: 5px !important;
}

/* Ajustes para el input de alojamiento y el botón */
.input-group {
    display: flex !important;
    flex-direction: column !important; /* Coloca los elementos uno debajo del otro */
    align-items: flex-start !important; /* Alinea a la izquierda */
    gap: 10px !important; /* Espacio entre el input y el botón */
}

    /* Estilo para el botón de agregar */
    .input-group button {
        margin-top: 5px !important; /* Agrega un pequeño margen arriba para separar el botón del input */
        width: auto !important; /* Ajusta el ancho automáticamente */
        align-self: flex-end !important; /* Alinea el botón a la izquierda */
        border-radius: 4px !important;
    }

/* Centrar el contenido de la fila */
#solicitanteSection .row {
    display: flex !important;
    justify-content: center !important; /* Centra horizontalmente */
    align-items: center !important; /* Centra verticalmente */
    height: 100% !important; /* Asegura que la altura sea suficiente para centrar */
    padding: 15px !important; /* Ajusta el padding si es necesario */
}

/* Si el contenedor principal no tiene una altura definida, añadir esto */
#solicitanteSection {
    min-height: 400px !important; /* Asegura que el contenedor tenga una altura suficiente */
}

/* Centrar el div con clase 'center-row' horizontalmente */
.center-row {
    display: flex !important;
    justify-content: center !important; /* Centra horizontalmente */
    padding-left: 0 !important; /* Elimina cualquier espacio extra en el lado izquierdo */
    padding-right: 0 !important; /* Elimina cualquier espacio extra en el lado derecho */
}

/* Para asegurarte que el contenedor principal de la sección tiene el suficiente espacio */
#solicitanteSection {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important; /* Alinea los elementos hacia el inicio de la sección */
    width: 100% !important;
}

/* Contenedor que envuelve el div row */
.container-center {
    display: flex !important; /* Usamos flexbox */
    justify-content: center !important; /* Centra el contenido horizontalmente */
    padding: 0 !important; /* Elimina el padding si existe */
    width: 100% !important; /* Asegura que ocupe el 100% del ancho disponible */
    margin-top: 40px !important;
    margin-bottom: 40px !important;
    max-width: 1200px !important; /* Ajusta el valor según sea necesario */
    margin: 0 auto !important; /* Asegura que el contenedor esté centrado */
    padding: 0 40px 40px 40px !important; /* Mantén el padding para que no quede pegado a los bordes */
}

    /* El div row se mantendrá centrado */
    .container-center .row {
        margin: 0 auto !important; /* Esto asegura que se centre el div row */
        width: 100%; /* Asegura que ocupe el 100% del ancho disponible */
    }

/* Haz que sea responsivo */
@media (max-width: 768px) {
    .container-center {
        max-width: 100% !important; /* En pantallas pequeñas ocupa todo el ancho */
        padding: 0 15px 15px 15px !important; /* Reduce el padding en móviles */
    }
}

/* Contenedor que envuelve el div row */
.container1-center {
    display: flex !important; /* Usamos flexbox */
    justify-content: center !important; /* Centra el contenido horizontalmente */
    padding: 0 !important; /* Elimina el padding si existe */
    width: 100% !important; /* Asegura que ocupe el 100% del ancho disponible */
    padding-top: 30px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    margin-bottom: 10px !important;
}

    /* El div row se mantendrá centrado */
    .container1-center .row {
        margin: 0 auto !important; /* Esto asegura que se centre el div row */
        width: 96.5%; /* Asegura que ocupe el 100% del ancho disponible */
        margin-bottom: 15px !important;
    }

/* Contenedor que envuelve el div row */
.container2-center {
    /*display: flex !important;  Usamos flexbox */
    justify-content: center !important; /* Centra el contenido horizontalmente */
    padding: 0 !important; /* Elimina el padding si existe */
    width: 100% !important; /* Asegura que ocupe el 100% del ancho disponible */
    padding-top: 30px !important;
    padding-bottom: 20px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

    /* El div row se mantendrá centrado */
    .container2-center .row {
        margin: 0 auto !important; /* Esto asegura que se centre el div row */
        width: 96.5%; /* Asegura que ocupe el 100% del ancho disponible */
    }

/* Alinea los checkboxes a la izquierda */
.form-check {
    display: inline-block !important; /* Cambio a inline-block para asegurar la alineación correcta */
    padding-left: 0 !important; /* Elimina cualquier espacio extra a la izquierda */
    padding-right: 0 !important; /* Elimina cualquier espacio extra a la derecha */
    margin: 0 !important; /* Elimina márgenes innecesarios */
    margin-bottom: 10px !important;
}

/* Alineación de los textos junto a los checkboxes */
.form-check-input {
    margin-right: 10px !important; /* Espacio entre el checkbox y el texto */
    border: 1px solid #00863A !important;
}

/* Alineación de los textos junto a los checkboxes */
.check2 {
    margin-right: 20px !important; /* Espacio entre el checkbox y el texto */
}

/* Alinea los checkboxes a la izquierda */
.form1-check {
    display: inline-block !important; /* Cambio a inline-block para asegurar la alineación correcta */
    padding-left: 0 !important; /* Elimina cualquier espacio extra a la izquierda */
    padding-right: 0 !important; /* Elimina cualquier espacio extra a la derecha */
    margin: 0 !important; /* Elimina márgenes innecesarios */
}

/* Alineación de los textos junto a los checkboxes */
.form1-check-input {
    margin-right: 10px !important; /* Espacio entre el checkbox y el texto */
}

/* Para ajustar la disposición de los checkboxes en la fila, cuando es necesario */
.col-md-6, .col-xl-4 {
    display: block !important; /* Cambiar el display a bloque para que no se desborde */
    width: 100% !important; /* Asegura que los checkboxes ocupen el 100% del ancho */
    padding: 0 !important; /* Elimina padding innecesario */
    padding-left: 10px !important; /* Elimina padding innecesario */
}

/* Alinea los checkboxes a la izquierda */
.form-check2 {
    display: inline-block !important; /* Cambio a inline-block para asegurar la alineación correcta */
    padding-left: 10px !important; /* Elimina cualquier espacio extra a la izquierda */
    padding-right: 22px !important; /* Elimina cualquier espacio extra a la derecha */
    margin: 0 !important; /* Elimina márgenes innecesarios */
    padding-bottom: 20px !important;
}

/* Alinea los checkboxes a la izquierda */
.form-check3 {
    display: inline-block !important; /* Cambio a inline-block para asegurar la alineación correcta */
    padding-left: 10px !important; /* Elimina cualquier espacio extra a la izquierda */

    margin: 0 !important; /* Elimina márgenes innecesarios */
    padding-bottom: 20px !important;
}

.observaciones {
    padding-bottom: 10px !important;
}

.terminos {
    padding-top: 25px !important;
}

    .terminos a {
        color: #087021 !important;
    }

/* General del modal */
.modal-content {
    border-radius: 8px !important; /* Bordes redondeados */
    border: 1px solid var(--color-grey-light) !important;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important;
    max-width: 960px !important; /* Igual al formulario */
    margin: 40px auto !important; /* Centrado horizontal */
    max-height: 90vh !important;
}

/* Header del modal */
.modal-header {
    background-color: #f5f5f5 !important;
    border-bottom: 1px solid var(--color-grey-light) !important;
    padding: 15px 20px !important;
    border-top-left-radius: 8px !important; /* Bordes superiores redondeados */
    border-top-right-radius: 8px !important;
}

    .modal-header .modal-title {
        font-family: var(--font-heading) !important;
        font-size: 20px !important;
        color: var(--color-primary) !important;
        font-weight: bold !important;
    }

    .modal-header .btn-close {
        background-color: transparent !important;
        border: none !important;
    }

/* Cuerpo del modal */
.modal-body {
    /*display: flex !important;*/ /* Usamos Flexbox */
    /*justify-content: space-between !important;*/ /* Espacio igual entre columnas */
    padding: 20px !important;
    /*gap: 0 !important;*/ /* Elimina espacio extra entre columnas */
    font-size: 15px !important;
    background-color: #fff !important;
}

    /* Diseño de las columnas internas */
    .modal-body .col-sm-12 {
        flex: 0 0 100%; /* Ocupa el 49% del ancho disponible */
        max-width: 100%; /* Asegura que no supere el 50% */
        box-sizing: border-box !important; /* Incluye padding y bordes en el cálculo del ancho */
    }

    /* Diseño de las columnas internas */
    .modal-body .row {
        width: 100%; /* Asegura que no supere el 50% */
    }

/* Tarjetas dentro de las columnas */
.card {
    border: 1px solid var(--color-grey-light) !important;
    border-radius: 8px !important;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1) !important;
    background-color: #fff !important;
    margin-bottom: 15px !important; /* Separación entre tarjetas */
    flex: 1 1 auto !important; /* Permite que se ajusten dinámicamente */
}

.card-body {
    padding: 15px !important;
    font-size: 14px !important;
}

.card-title {
    font-family: var(--font-heading) !important;
    font-size: 16px !important;
    font-weight: bold !important;
    color: var(--color-grey-dark) !important;
}

.card-text ul {
    padding-left: 20px !important; /* Espaciado para listas */
    list-style: disc !important;
}

/* Footer de las tarjetas */
.card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 10px 15px !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid var(--color-grey-light) !important;
}

    .card-footer .btn-group .btn {
        font-size: 14px !important;
    }

/* Footer del modal */
.modal-footer {
    background-color: #f8f9fa !important;
    border-top: 1px solid var(--color-grey-light) !important;
    padding: 15px 20px !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    border-bottom-left-radius: 8px !important; /* Bordes inferiores redondeados */
    border-bottom-right-radius: 8px !important;
}

    .modal-footer .btn-primary {
        background-color: var(--color-primary) !important;
        border-color: var(--color-primary) !important;
        color: #fff !important;
        font-size: 15px !important;
        padding: 10px 20px !important;
        border-radius: 4px !important; /* Bordes suaves */
    }

        .modal-footer .btn-primary:hover {
            background-color: var(--color-primaryhover) !important;
            border-color: var(--color-primaryhover) !important;
        }

        .modal-footer .btn-primary:active {
            background-color: var(--color-primaryactive) !important;
            border-color: var(--color-primaryactive) !important;
        }

/* Responsividad para pantallas pequeñas */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 10px !important;
    }

    .modal-body {
        flex-direction: column !important; /* Las columnas se apilan */
        justify-content: flex-start !important;
    }

        .modal-body .col-sm-12 {
            flex: 1 1 100% !important; /* Ocupa toda la fila */
            max-width: 100% !important;
        }
}

.modal1-body {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
}

/* Estilos para el select */
#solicitanteSection .form-select {
    border: 1px solid #087021 !important;
    border-radius: 4px !important;
    padding: 12px 15px !important;
    font-size: 15px !important;
    color: var(--color-grey-dark) !important;
}

    #solicitanteSection .form-select:focus {
        border-color: #00863A !important;
        box-shadow: 0 0 5px rgba(8, 112, 33, 0.5) !important;
    }

    /* Estilo de los mensajes de error en campos */
    #solicitanteSection .form-control:invalid, #solicitanteSection .form-select:invalid {
        border-color: var(--color-danger) !important;
    }

    #solicitanteSection .form-control:valid, #solicitanteSection .form-select:valid {
        border-color: #00863A !important;
    }

.select2-container--default .select2-results__option--highlighted {
    background-color: #087021 !important;
    color: white !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid #087021 !important;
    border-radius: 4px !important;
    padding: 5px 12px !important;
    transition: border-color 0.3s !important;
}

    .select2-container--default .select2-selection--single:focus {
        outline: none !important;
        box-shadow: 0 0 5px rgba(8, 112, 33, 0.5) !important;
        border: 1px solid #087021 !important;
    }

.select2-container--default .select2-results__option--highlighted,
.select2-results__option--highlighted .card {
    background-color: #087021 !important;
    color: white !important;
}

/* Asegura que el campo de texto tenga el tamaño, color y bordes de select2 */
.select2-like {
    display: inline-block !important;
    width: 100% !important;
    padding: 4px 12px !important;
    font-size: 15px !important;
    line-height: 1em !important;
    color: var(--color-grey-medium) !important;
    background-color: #fff !important;
    border: 1px solid #087021 !important;
    border-radius: 4px !important;
    transition: border-color 0.15s ease-in-out !important, box-shadow 0.15s ease-in-out;
}

    .select2-like:focus {
        border: 1px solid #087021 !important;
        outline: none !important;
        box-shadow: 0 0 5px rgba(8, 112, 33, 0.5) !important;
    }

    .select2-like:active {
        border: 1px solid #087021 !important;
        box-shadow: 0 0 5px rgba(8, 112, 33, 0.5) !important;
    }
/* Ajustes adicionales si es necesario */
.select2-like-container {
    width: 100% !important;
}

/* Ajuste para centrar el placeholder en el select */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    display: flex !important;
    align-items: center !important; /* Centra verticalmente el texto del placeholder */
    height: 100% !important;
}

/* Para que el texto no se mueva y se mantenga centrado incluso cuando no hay selección */
.select2-container--default .select2-selection--single {
    /*padding: 12px 15px !important;*/
    padding: 0px 3px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

    /* Asegura que el placeholder también esté centrado en el select2 */
    .select2-container--default .select2-selection--single .select2-selection__placeholder {
        line-height: 1 !important;
    }

.d-flex {
    display: flex;
    padding-right: 14px;
    padding-bottom: 20px;
}

.justify-content-end {
    justify-content: flex-end;
}

h1 {
    font-size: 28px !important;
    line-height: 1.5 !important;
    font-family: 'Montserrat', Arial, Verdana, sans-serif !important;
    font-weight: bold !important;
}

/* Paginación de tablas */
.dataTables_wrapper .dataTables_paginate {
    display: flex !important;
    justify-content: center !important;
    margin-top: 15px !important;
}

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        display: inline-block !important;
        padding: 8px 12px !important;
        font-family: 'Source Sans Pro', sans-serif !important;
        font-size: 15px !important;
        color: black !important;
        background-color: #ffffff !important;
        border: 1px solid #087021 !important;
        border-radius: 4px !important;
        margin: 0 5px !important;
        cursor: pointer !important;
        text-decoration: none !important;
        transition: background-color 0.3s, color 0.3s !important;
    }

        .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
            background-color: #0B4C1A !important;
            color: #ffffff !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.current {
            background-color: #087021 !important;
            color: #ffffff !important;
            border-color: #087021 !important;
            font-weight: bold !important;
            pointer-events: none !important;
        }

        .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
            background-color: #EEEEEE !important;
            color: #ffffff !important;
            border-color: #CCCCCC !important;
            cursor: not-allowed !important;
        }
/* Estado de carga personalizado */
.btn-loading {
    box-shadow: none !important; /* Eliminar sombra cuando está en carga */
}

.disabled-div {
    display: none;
    pointer-events: none;
}

/* Contenedor para el input y el error */
.input-container {
    display: flex;
    flex-direction: column; /* Coloca los elementos uno debajo del otro */
}

/* Aseguramos que el input ocupe todo el ancho disponible */
#verificationCode {
    width: 100%;
}

/* Estilo para el mensaje de error */
#errorCodigoVerificacion {
    color: #dc3545; /* Color rojo para el mensaje de error */
    font-size: 0.875rem; /* Tamaño pequeño */
    margin-top: 5px; /* Espacio entre el input y el mensaje de error */
}

/* Alinea los checkboxes a la izquierda */
.form-check3 {
    display: inline-block !important; /* Cambio a inline-block para asegurar la alineación correcta */
    padding-left: 30px !important; /* Elimina cualquier espacio extra a la izquierda */
    padding-right: 0px !important; /* Elimina cualquier espacio extra a la derecha */
    margin: 0 !important; /* Elimina márgenes innecesarios */
    padding-bottom: 20px !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #FFFFFF !important;
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: rgba(8, 112, 33, 0.1) !important;
}

.table tbody tr {
    padding: 0 !important; /* Ajustar paddings */
    margin: 0 !important; /* Ajustar márgenes */
}

    .table tbody tr:nth-child(even) {
        background-color: rgba(8, 112, 33, 0.5) !important;
    }

    .table tbody tr:nth-child(odd) {
        background-color: #FFFFFF !important;
        padding: 0 !important;
        margin: 0 !important;
        display: none !important;
    }

/* Estilo general para las tablas */
.table {
    width: 100% !important;
    margin: 0 auto !important;
    font-family: 'Source Sans Pro', sans-serif !important;
    font-size: 15px !important;
    border-collapse: collapse !important;
}

    .table thead {
        border-bottom: 2px solid #087021 !important;
        background-color: #FFFFFF !important;
    }

    .table th {
        text-align: left !important;
        color: var(--color-grey-dark) !important;
        font-weight: bold !important;
        padding: 10px !important;
        font-size: 17px !important;
        text-transform: uppercase !important;
    }

    .table td {
        text-align: left !important;
        padding: 8px !important;
        color: #111111 !important;
        font-size: 15px !important;
    }

    .table tbody tr:hover {
        background-color: #f5f5f5 !important;
    }

/* Mejorar la legibilidad y el contraste en tablas de dispositivos móviles */
@media (max-width: 576px) {
    .table {
        font-size: 12px !important; /* Reducir el tamaño de la fuente en pantallas pequeñas */
    }

        .table th, .table td {
            padding: 5px !important; /* Reducir el padding en pantallas pequeñas */
        }
}

.table tbody tr:empty {
    display: none !important;
}

.tr {
    margin-top: 0 !important;
}

.input2 {
    margin-top: 10px !important;
}

.span2 {
    padding-left: 16px !important;
}

.span3 {
    padding-left: 10px !important;
}

.span4 {
    padding-bottom: 0 !important;
    padding-top: 10px !important;
    padding-left: 16px !important;
}