/* estilos.css */

    .modal-dialog {
        display: flex !important;
        align-items: center !important;
        min-height: calc(100% - 1rem) !important;
    }
    .modal-content {
        border-radius: 10px;
        box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
        padding: 20px;
    }

    .modal-header {
        align-items: center !important;
        background-color: #007bff;
        color: white;
        border-bottom: none;
        padding: 15px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
    }

    .modal-title {
        font-size: 20px;
        font-weight: bold;
    }
    .modal-header .close {
        color: white;
        }
        
    .modal-header .close {
        color: white;
        opacity: 1; /* Opacidad al 100% */
        margin: 0px !important;
        background-color:#007bff;
        border-radius: 50%;
        margin: 0rem !important;
        text-shadow:none !important;
    }
    .modal-header .close:hover{
    background-color: #007bff !important;
    opacity: 1 !important;
    }

    .modal-body {
        
        color: #333;
        line-height: 1.6;
        padding: 15px;
    }

    .modal-body p {
        margin-bottom: 10px;
    }

    .modal-body strong {
        font-weight: 600;
        color: #000000;
        /* background: #007bffd6; */
        border-radius: 3px;
        padding: 4px;
        font-size: 14px;
        text-transform: uppercase;
        text-decoration: revert;
    }
    #editOrdenTareaFiles {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .file-item {
        display: flex;
        align-items: center;
        border: 1px solid #ddd;
        padding: 10px;
        border-radius: 5px;
        max-width: 400px;
        margin-bottom: 10px;
        position: relative; /* Importante para que el botón de eliminar esté dentro del contenedor */
    }

    .file-item a {
        text-decoration: none;
        color: #000000 !important;
        font-size: 14px;
        margin-left: 10px;
    }

    .file-item img {
        width: 100px !important;
        height: 100px !important;
        object-fit: cover;
        border-radius: 5px;
    }

    .file-item .remove-file {
        padding: 0px !important;
        position: absolute !important;
        top: 5px !important; /* Asegura que esté visible cerca del borde superior */
        right: 5px !important; /* Espacio desde el borde derecho */
        color: white !important;
        border: none !important;
        border-radius: 50% !important;
        margin: 3px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        z-index: 9999 !important; /* Aumenta el z-index para asegurar que el botón esté sobre cualquier otro elemento */
        visibility: visible !important; /* Asegura que el botón esté visible */
        opacity: 1 !important; /* Asegura que el botón no esté oculto */
    }

    .file-item:hover .remove-file {
        opacity: 1 !important; /* Asegura que el botón esté visible cuando se hace hover sobre el archivo */
    }
    input#editOrdenTarea {
        align-content: center;
        margin-bottom: 30px;
    }


    .modal-footer {
        padding: 15px;
        text-align: right;
        background-color: #ffffff;
        border-top: none;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        color: black;
    }

    .modal-footer button {
        border-radius: 5px;
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        font-size: 16px;
        cursor: pointer;
    }

    .modal-footer button:hover {
        background-color: #0056b3;
    }

    div#viewModalBody {
        color: black;
    }
    .nav-tabs .nav-link.active {
        background-color: #007bff !important; /* Fondo azul */
        color: white !important; /* Letras blancas */
    }
    .nav-tabs .nav-link {
        color: #007bff !important; /* Color de texto normal */
    }
    .login-form {
        width: 100%;
        margin: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        height: 50vh !important;
        padding: 50px;
    }

    .login-form input {
        margin-bottom: 10px !important; /* Espacio entre campos */
    }
    .login-form button {
        margin-top: 10px !important; /* Margen superior para el botón */
    }
    .file-item {
        position: relative !important;
        display: inline-block !important;
        margin-right: 10px !important;
        margin-bottom: 10px !important;
    }
    .file-item img {
        width: 100px !important;
        height: 100px !important;
    }
    .file-item .remove-file {
        padding: 0px !important;
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        color: white !important;
        border: none !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        margin: 3px !important;
    }
    .file-container {
        display: flex !important;
        flex-wrap: wrap !important;
    }
    /* Estilos para el modal de detalles del colaborador */
    #detailsColaboradorModal .modal-body {
        width: 100% !important;
        margin: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    #detailsColaboradorModal .modal-footer form {
        width: 90% !important;
        margin: auto !important;
    }
    .logout-button {
        display: flex !important;
        justify-content: flex-end !important;
    }

    /* Assignments tab */
    #assignments-tab{
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
    }

    /* Button */
    .table tr .btn-info {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        background-color: #4caf50 !important;
        font-size: 14px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        color: white;
        border: none;
    }


    /* Button */
    .table tr .btn-warning {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        background-color: #ff9800 !important;
        transform: translatex(0px) translatey(0px) !important;
        color: #ffffff !important;
        font-size: 14px !important;
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        border: none;
    }

    /* Button */
    .table tr .btn-danger {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        font-size: 14px !important;
        padding-top: 4px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-bottom: 4px !important;
        color: white;
    }

    /* Button */
    #assignments .btn-success{
        font-size: 14px !important;
    }

    /* Button */
    .logout-button form .btn-danger {
        border-top-left-radius: 20px !important;
        border-top-right-radius: 20px !important;
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        font-size: 14px !important;
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        background-color: #be0113 !important;
        color: white;
        margin-bottom: 20px;
    }

    /* Button */
    #assignments .btn-success {
        border-top-left-radius: 330px !important;
        border-top-right-radius: 330px !important;
        border-bottom-left-radius: 330px !important;
        border-bottom-right-radius: 330px !important;
        margin-top: 10px !important;
        margin-bottom: 19px !important;
        background: #d10f0f;
        border: none;
        color: white;
        padding: 16px !important;
        font-size: 15px !important;
        font-weight: 600;
    }

    /* Th */
    #brx-content #brxe-qasydu #brxe-zpvtig #brxe-irkmsa .container #myTabContent #assignments .table thead tr th{
        width: 300px !important;
    }

    /* Table Row */
    .table thead tr{
        background-color: #007bff !important;
        color: #ffffff !important;
        text-transform: uppercase !important;
        text-align: center !important;
        border-top-right-radius: 8px !important;
        border-color: #007bff !important;
        border-top-left-radius: 8px !important;
    }

    /* Table Data */
    .table tr td{
        text-align: center !important;
    }

    /* Table Data */
    .table tr td{
        transform: translatex(0px) translatey(0px) !important;
    }

    /* Th */
    .table tr th:nth-child(1){
        border-top-left-radius: 8px !important;
    }

    /* Th */
    .table tr th:nth-child(7){
        border-top-right-radius: 8px !important;
    }

    /* Container */
    #brxe-irkmsa .container{
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
    }

    /* Estilos para los modales */
    .modal {
        z-index: 1050 !important; /* Asegúrate de que el z-index sea lo suficientemente alto */
        
    }

    .modal-backdrop {
        z-index: 1040 !important; /* Asegúrate de que el z-index del backdrop sea menor que el del modal */
    }

    /* Table Data */
    .table tr td{
        border-width: 1px !important;
        border-style: solid !important;
        border-right-color: rgba(0,0,0,0.16) !important;
        border-bottom-color: rgba(0,0,0,0.16) !important;
        border-bottom-width: 1px !important;
        border-color: rgba(0,0,0,0.16) !important;
    }

    /* Estilos para el fondo blanco del shortcode */
    .container {
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        margin-top: 90px;
    }

    /* Estilos para el botón de Cerrar Sesión */
    .btn-danger {
        background-color: #CC3366;
        border-color: #CC3366;
    }

    .btn-danger:hover {
        background-color: #b32d5a;
        border-color: #b32d5a;
    }

    /* Estilos para los botones personalizados */
    .custom-btn {
        width: 100%;
        background-color: #007BFF !important;
        color: white !important;
        text-align: center !important;
        border-radius: 20px !important;
        border: none !important;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .login-form input[type="text"],
    .login-form input[type="password"] {
        color: 808080; /* Color gris para el texto */
    }

    .login-form input::placeholder {
        color: #c0c0c0; /* Color gris más claro para el placeholder */
    }

    .input, input:not([type="submit"]), select, textarea {
        border-style: solid !important;
        border-width: 1px !important;
        box-shadow: none !important;
        color: #808080 !important;
        font-size: inherit !important;
        line-height: 30px !important;
        outline: none !important;
        margin-top: 5px !important;
        margin-top: 5px !important;
        height: 57px;
        margin-bottom: 30px;
    }
    #assignments {
        max-width: 100%; /* Asegura que no se salga del contenedor */
        overflow-x: auto; /* Permite el desplazamiento horizontal si es necesario */
    }

    @media only screen and (max-width: 768px) {
        #assignments {
            max-width: 100%; /* Asegura que el contenedor no se salga del ancho */
            overflow-x: auto; /* Permite desplazamiento horizontal en móviles si es necesario */
            
        }

        .table {
            width: 100%; /* Asegura que la tabla ocupe el ancho disponible */
            overflow-y: auto; /* Habilita el scroll vertical en móviles */
            display: block; /* Para que el scroll vertical funcione correctamente */
        }

        /* Ajustar el ancho de la columna de fecha */
        .table th:nth-child(4), /* Selector para la columna de la fecha */
        .table td:nth-child(4) {
            min-width: 120px; /* Ajusta el ancho mínimo de la columna de fecha */
        }

        /* Espaciado entre los botones (vertical) */
        .table td a {
            display: block; /* Hace que los botones sean bloques para que se alineen verticalmente */
            margin-top: 10px; /* Añade margen superior entre los botones */
        }

        /* Elimina el margen superior del primer botón */
        .table td a:first-child {
            margin-top: 0; /* Para que el primer botón no tenga margen superior */
        }
    }
    .fc-left h2 {
        color: black;
    }
    .fc-right button {
        background: #007bff !important;
        opacity: 1 !important;
        color: white !important;
    }
    td.fc-event-container SPAN {
        color: white ! IMPORTANT;
    }

    th.fc-day-header {
        color: black !important;
    }

    .fc .fc-row .fc-content-skeleton table, .fc .fc-row .fc-content-skeleton td, .fc .fc-row .fc-helper-skeleton td {
        background: 0 0;
        border-color: transparent;
        color: black;
    }

    @media (min-width: 576px) {
        .modal-dialog {
            max-width: 60%;
            margin: 1.75rem auto;
        }
    }

    @media (max-width: 768px) {
        .fc-list-item-time, .fc-list-item-title{
            background-color: #3A87AD !important;
            border-radius: 5px !important;
        }	
        .fc-ltr .fc-list-item-marker {
        padding-right: 14px !important;
    }
    .fc-list-heading{
        color: black !important;
    }
    }


    /* Style for input fields */
    #newTitulo,
    #newDestino,
    #newOrdenTarea,
    #newColaborador,
    #newFecha,
    #newHora,
    #employee_filter,
    #destination_filter,
    #from_date_filter,
    #status_filter,
    #to_date_filter,
    #newEstatus {
        width: 100%;
        height: 50px;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        transition: border-color 0.3s;
        background-color: #f7f6f6;
    }
  
    #observaciones{
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        transition: border-color 0.3s;
        background-color: #f7f6f6;
    }

    #newTitulo:focus,
    #employee_filter:focus,
    #newDestino:focus,
    #observaciones:focus,
    #destination_filter:focus,
    #newOrdenTarea:focus,
    #from_date_filter:focus,
    #to_date_filter:focus,
    #newColaborador:focus,
    #status_filter:focus,
    #newFecha:focus,
    #newHora:focus,
    #newEstatus:focus {
        border-color: #007bff;
        outline: none;
    }

    /* Style for input fields in the editAssignmentForm */
    #editTitulo,
    #editDestino,
    #editOrdenTarea,
    #editColaborador,
    #editFecha,
    #editHora,
    #imagenesCulminacion,
    #editEstatus {
    background-color: #f7f6f6;
        width: 100%;
        height: 50px; /* Adjust height for uniformity */
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        transition: border-color 0.3s;
    }
  
    #editobservaciones{
    background-color: #f7f6f6;
        width: 100%;
        border: 1px solid #ccc;
        border-radius: 5px;
        font-size: 16px;
        transition: border-color 0.3s;
    }

    #editTitulo:focus,
    #editDestino:focus,
    #editOrdenTarea:focus,
    #editobservaciones:focus,
    #editColaborador:focus,
    #editFecha:focus,
    #editHora:focus,
    #editEstatus:focus {
        border-color: #007bff; /* Highlight border color on focus */
        outline: none;
    }

    .apply-filter-button{
        border-radius: 20px !important;
        background-color: #4caf50 !important;
        color: white !important;
        border: none !important;
    }

    .apply-filter-button:hover{
        border-radius: 20px !important;
        background-color: #4caf50 !important;
        color: white !important;
    }
    .delete-filter-button{
        margin-top: 30px;
        height: 45px;
        border-radius: 20px !important;
        background-color: red !important;
        color: white !important;
        border: none !important;
    }
.delete-filter-button svg{
    margin-right: 7px !important;
}
.download-filter-button svg{
    margin-right: 7px !important;
}
    .delete-filter-button:hover{
        border-radius: 20px !important;
        background-color: red !important;
        color: white !important;
    }
    .download-filter-button{
        height: 45px;
        margin-top: 30px;
        border-radius: 20px !important;
        background-color: #0056b3 !important;
        color: white !important;
        border: none !important;
    }

    .reset-filter-button:hover{
        border-radius: 20px !important;
        background-color: #0056b3 !important;
        color: white !important;
    }
    .reset-filter-button{
        height: 45px;
        margin-top: 30px;
        border-radius: 20px !important;
        background-color: #0056b3 !important;
        color: white !important;
        border: none !important;
    }

    .download-filter-button:hover{
        border-radius: 20px !important;
        background-color: #0056b3 !important;
        color: white !important;
    }
    .page-item .page-link{
    color: #0056b3 !important;
        text-decoration: none !important;
        background-color: #e9ecef !important;
        border-color: #0056b3 !important;

    }
    .page-item.active .page-link{
    color: white !important;
        text-decoration: none !important;
        background-color: #0056b3 !important;
        border-color: #0056b3 !important;

    }

    .navigation {
        width: 100% !important;
        overflow: auto !important; /* Enable horizontal scrolling */
    }

    .pagination {
        display: flex;
        flex-wrap: nowrap; /* Keep all pagination items on one line */
    }
    .d-none{
        display:none;
    }
    @media (max-width: 768px) {
        .filters-card-body {
            display: none; /* Initially hide on mobile */
        }
        .download-filter-button{
            margin-top: 5px !important;
        }
        .delete-filter-button{
            margin-top: 5px !important;
        }
        .reset-filter-button{
            margin-top: 5px !important;
        }
        
    }
    .fc-button{
        border: 1px solid white !important;
    }
    .fc-scroller {
        overflow: hidden auto; /* Keep scroll functionality, height property is already commented out */
        height:  100% !important;
    }
    .fc-left h2{
        font-size: 25px !important;
    }
    .fc-list-table tbody tr {
        padding: 10px 0; /* Add vertical padding between rows */
    }

    .fc-list-table tbody tr.fc-list-item {
    border-top: 5px solid white !important;
    border-bottom: 5px solid white !important;
    }

    .fc-list-table tbody tr.fc-list-heading {
        border-bottom: 5px solid white !important;
        margin-top: 15px; /* Add space before heading rows */
    }

    .card-header:first-child {
        border-radius: 36px;
        padding-bottom: 15px !important;
        padding-left: 20px ! Important;
    }

    .form-group {
        margin-bottom: 0px;
    }

    button.btn.btn-primary.btn-sm.apply-filter-button {
        margin-top: 30px;
    padding: 10px;
    }

    table caption+thead tr:first-child td, table caption+thead tr:first-child th, table colgroup+thead tr:first-child td, table colgroup+thead tr:first-child th, table thead:first-child tr:first-child td, table thead:first-child tr:first-child th {
        /* contain-intrinsic-block-size: auto 100px; */
        border-block-start: 0px solid;
    }button.btn.btn-primary.custom-btn {
        margin-top: 20px;
    }
    button.btn.btn-primary.custom-btn {
        margin-top: 20px;
    }

    .fc-toolbar.fc-header-toolbar {
    
        margin-top: 20px;
    }


    .fc-list-table td {
        padding: 14px 14px;
    }

    /* Selecciona el label con el atributo `for="newFecha"` */
    label[for="newFecha"] {
        margin-top: 30px; /* Ajusta el valor según lo necesario */
    }
    @media (max-width: 768px) {
        label[for="destination_filter"] {
            margin-top: 30px; /* Ajusta el valor según lo necesario */
        }
        .assignment-filter-buttons{
            flex-direction: column;
        }
    }
    label[for="editFecha"] {
        margin-top: 30px;
    }
    .assignment-filter-buttons{
        display:flex;
        gap: 20px;
    }
    .close svg{
        background: red;
        padding: 2px; 
        border-radius: 50%;
        color: white;
        opacity: 1;
    }
    .remove-file svg{
        height: 30px !important;
        width: 30px !important;
    } 

    button.cancel-assignment-delete{
        background-color: #0056b3 !important;
        color: white !important;
    }
    button.cancel-assignment-delete:hover{
        background-color: #0056b3 !important;
        color: white !important;
    }
    button.confirm-assignment-delete{
        background-color: red !important;
        color: white !important;
    }
    button.confirm-assignment-delete:hover{
        background-color: red !important;
        color: white !important;
    }