.bellatrix-datatables-container {
    min-height: 12em;
}

.bellatrix-datatables-container #selected-columns,
.bellatrix-datatables-container #hidden-columns,
.bellatrix-datatables-container #available-columns {
    min-height: 200px;
}

.bellatrix-datatables-container .field {
    font-size: 1.2em;
}

.bellatrix-datatables-container #selected-columns .field {
    background-color: #dff0d8; /* Verde claro */
}

.bellatrix-datatables-container #hidden-columns .field {
    background-color: #fcf8e3; /* Amarelo claro */
}

.bellatrix-datatables-container #available-columns .field {
    background-color: #f2dede; /* Vermelho claro */
}

.bellatrix-datatables-container .field.ui-sortable-helper {
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
    transition: transform 0.2s ease-in-out;
}

.bellatrix-datatables-floating-btn {
    position: fixed;
    bottom: 10%; /* 10% da parte inferior */
    left: 50%; /* Centralizar horizontalmente */
    padding: 10px;
    border-radius: 10px 20px;
    transform: translateX(-50%); /* Ajustar para a largura do botão */
    background: linear-gradient(180deg, #D236DF 0%, #AF36D9 50%, #7A38CD 100%);
    color: #FFFFFF;
    border: none;
    font-size: 20px; /* Tamanho da fonte com base no viewport para responsividade */
    text-align: center; /* Centralizar o texto */
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
    cursor: pointer;
    display: none; /* Inicialmente escondido */
    transition: transform 0.3s, box-shadow 0.3s;
    z-index: 9999;
}

.bellatrix-datatables-floating-btn:hover {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.3);
}

.bellatrix-datatables-checkbox-control {
    display: flex;
    align-items: center;
}

.bellatrix-datatables-universal-selector {
    margin-right: 5px;
    transform: scale(0.8);  /* Reduz o tamanho do checkbox para 80% do tamanho original */
}

.bellatrix-datatables-toggle-selection-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.bellatrix-datatables-toggle-select {
    padding: 8px 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.bellatrix-datatables-toggle-select[data-state="unselected"] {
    background: linear-gradient(90deg, rgba(52, 144, 220, 1) 0%, rgba(87, 196, 247, 1) 100%);
}

.bellatrix-datatables-toggle-select[data-state="selected"] {
    background: linear-gradient(90deg, rgba(235, 77, 75, 1) 0%, rgba(237, 149, 100, 1) 100%);
}

.bellatrix-datatables-toggle-select:hover,
.bellatrix-datatables-remove-filters:hover,
.bellatrix-datatables-generate-protocol:hover {
    opacity: 0.9;
}

.bellatrix-datatables-action-buttons {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
}

.bellatrix-datatables-toggle-select,
.bellatrix-datatables-generate-protocol,
.bellatrix-datatables-generate-nf,
.bellatrix-datatables-print-protocol,
.bellatrix-datatables-print-romaneio,
.bellatrix-datatables-send-nf {
    padding: 8px 12px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.bellatrix-datatables-generate-protocol {
    display: none;  /* Inicia oculto */
    background-color: #D236DF;  /* Diferente cor para destacar */
    background: linear-gradient(180deg, #D236DF 0%, #AF36D9 50%, #7A38CD 100%);  /* Gradiente conforme solicitado anteriormente */
}

.bellatrix-datatables-generate-nf {
    background-color: #366edf;  /* Diferente cor para destacar */
    background: linear-gradient(180deg, #366edf 0%, #456bb7 50%, #6488d1 100%);  /* Gradiente conforme solicitado anteriormente */
}

.bellatrix-datatables-send-nf {
    background-color: #366edf;  /* Diferente cor para destacar */
    background: linear-gradient(90deg, #366edf 0%, #456bb7 50%, #6488d1 100%);  /* Gradiente conforme solicitado anteriormente */
}

.bellatrix-datatables-print-protocol {
    background-color: #46649f;  /* Diferente cor para destacar */
    background: linear-gradient(180deg, #4400ff 0%, #94b8ff 50%, #598aeb 100%);  /* Gradiente conforme solicitado anteriormente */
}

.bellatrix-datatables-print-romaneio {
    background-color: #46649f;  /* Diferente cor para destacar */
    background: linear-gradient(90deg, #4400ff 0%, #94b8ff 50%, #598aeb 100%);  /* Gradiente conforme solicitado anteriormente */
}

.bellatrix-datatables-remove-filters {
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(11, 232, 129, 1) 0%, rgba(59, 183, 143, 1) 100%);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}
.bellatrix-datatables-remove-filters-entrega, .bellatrix-datatables-remove-filters-protocolo {
    display: none; /* Inicia oculto */
}

.bellatrix-datatables-change-volume-status, .bellatrix-datatables-change-protocol-status {
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(0, 255, 255, 1) 0%, rgba(0, 191, 255, 1) 100%); /* Gradiente de Cyan para Cyan mais escuro */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
    display: none;  /* Inicia oculto */
}

.bellatrix-datatables-change-volume-status:hover,
.bellatrix-datatables-change-protocol-status:hover,
.bellatrix-datatables-generate-nf:hover,
.bellatrix-datatables-print-protocol:hover,
.bellatrix-datatables-print-protocol:hover {
    background: linear-gradient(90deg, rgba(0, 191, 255, 1) 0%, rgba(0, 127, 255, 1) 100%); /* Gradiente de Cyan mais escuro para azul */
    opacity: 0.9;
}

/* Estilo geral da tabela */
#datatable-protocolo, #datatable-entrega {
    font-size: 0.8em;  /* Reduz o tamanho da fonte */
}


.dt-button-collection > div[role="menu"] {
    display: flex;
    flex-wrap: wrap;
    max-width: calc(100% * 3 / 3);
}
div.dt-button-collection {
    width: auto !important;
    max-width: 400px !important;
}
/* Estilo para cada botão dentro do menu suspenso */
.dt-button-collection .dt-button {
    flex: 0 0 calc(100% / 3);
}

button.dt-button {
    font-size: 0.7em !important;
}

/* Estilo para botões ativos */
.dt-button-collection .dt-button.active {
    background: linear-gradient(to bottom, #f0f0f0 0%, #999 100%) !important;
}

.dataTables_wrapper::after {
    padding-bottom: 10px;
}

.btn-smaller {
    padding: 5px 10px !important;  /* Ajusta o padding para diminuir o tamanho */
    font-size: 0.79em;             /* Reduz o tamanho da fonte */
}

/* Estilização dos campos dentro do modal */
#protocolGenerationModal .form-control {
    border: 1px solid #ddd; 
    color: #333; 
    padding: 10px;
    font-size: 0.9rem;
}

#protocolGenerationModal .modal-body h3 {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 15px;
}

#protocolGenerationModal table {
    width: 100%;
    border-collapse: collapse;
}

#protocolGenerationModal table th, #protocolGenerationModal table td {
    border: 1px solid #ddd;
    padding: 8px;
    font-size: 0.9rem;
    text-align: left;
}

#protocolGenerationModal table th {
    background-color: #f5f5f5;
    color: #444;
}

#protocolGenerationModal input[type="datetime-local"] {
    max-width: 100%;
    width: auto;
}

/* Estilo do modal - centralizar */
#protocolGenerationModal .modal-dialog {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.bellatrix-datatables-change-status {
    padding: 8px 12px;
    background: linear-gradient(90deg, rgba(236, 112, 99, 1) 0%, rgba(243, 121, 50, 1) 100%); /* Gradiente laranja-vermelho */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.bellatrix-datatables-change-status:hover {
    opacity: 0.9;
}

/* Estilização dos campos dentro do modal de Mudança de Status */
/* Estilização dos campos dentro do modal statusChangeModal */
#statusChangeModal .form-control {
    border: 1px solid #ddd; 
    color: #333; 
    padding: 10px;
    font-size: 0.9rem;
    width: 100%;
    margin-bottom: 10px;
}

#statusChangeModal .modal-body h5 {
    font-size: 1.2rem;
    color: #444;
    margin-bottom: 15px;
}

#statusChangeModal input[type="datetime-local"] {
    max-width: 100%;
    width: auto;
}

/* Estilo do modal - centralizar */
#statusChangeModal .modal-dialog {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#statusChangeModal table {
    width: 100%;
    border-collapse: collapse;
}

#statusChangeModal table th,
#statusChangeModal table td {
    border: 1px solid #ddd;
    padding: 8px;
    font-size: 0.9rem;
    text-align: left;
}

#statusChangeModal table th {
    background-color: #f5f5f5;
    color: #444;
}

#statusChangeModal .modal-dialog {
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

#modalTable {
    font-size: 0.8em; /* Adjust this value as needed */
}
#modalTable, #modalTable th, #modalTable td {
    border: 1px solid #ddd;
    border-collapse: collapse;
}

#modalTable th, #modalTable td {
    padding: 8px;
    text-align: left; /* Default text alignment */
}

/* Adjusting the size of the Font Awesome icon in the table */
#modalTable a i.fas.fa-file-alt {
    font-size: 2em; /* Adjust this value as needed */
    display: block;
    text-align: center;
    margin: 0 auto;
}

.dataTables_empty {
    text-align: center !important;
}

/* New CSS to limit modal height and add overflow */
.modal .modal-body {
    max-height: 500px;
    overflow-y: auto;
}

#transportadoresSelectDiv .select2 {
    min-width: 400px;
}