@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&display=swap');
:root {
    --primaryWhite:#fff;
    --primaryBlack:#000;
    --primaryAccent:#ce0023;
    --fontColor:#666666;
    --borderRadius: 3px;
    --opacityTransition: 0.8;
    --transition: all 0.2s;
    --fontWeight: 600;
    --box-shadow: rgba(0, 0, 12, 0.616);
    --bg-scroll: #f1f1f1;
    --bar-scroll: #7a7a7a;
    --hover-scroll:#555555;
    --padding-button: 6px 18px;
}

body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: var(--bg-scroll); }
body::-webkit-scrollbar-thumb { background: var(--bar-scroll); }
body::-webkit-scrollbar-thumb:hover { background: var(--hover-scroll); }
body { font-family: 'Outfit', sans-serif; background-color: var(--primaryWhite); color: var(--primaryBlack); padding: 15px; }
.nx-confirm-button-ok, .nx-confirm-button-cancel { text-decoration: none !important; transition: opacity 0.2s ease !important;  }
.nx-confirm-button-ok:hover, .nx-confirm-button-cancel:hover { opacity: var(--opacityTransition); }

/*HEAD FILTRO */
.container-fluid .div-filter { background-color: var(--primaryWhite);  box-shadow: 0px 0px 15px var(--box-shadow); display: flex; justify-content: space-between; align-items: center; padding: 10px; border-radius: var(--borderRadius); margin: 2% 0px;}
.container-fluid .div-filter .header-filter-left { display: flex; align-items: center; }
.container-fluid .div-filter .header-filter-left div a{ margin-left: 5px; background-color: var(--primaryBlack); color: var(--primaryWhite); border-radius: var(--borderRadius); transition: var(--transition); text-decoration: none; display: flex; align-items: center; justify-content: center; padding: var(--padding-button); }
.container-fluid .div-filter .header-filter-left div a:hover{ opacity: var(--opacityTransition); }
.container-fluid .div-filter .header-filter-left div .btn-accent{ background-color: var(--primaryAccent); font-weight: var(--font-weight); color: var(--primaryWhite); transition: var(--transition); border: 0px; border-radius: var(--borderRadius);}
.container-fluid .div-filter .header-filter-left div .btn-accent:hover{ opacity: var(--opacityTransition); }
.container-fluid .div-filter .header-filter-left div img { width: 30px; margin-right: 10px;}
.container-fluid .div-filter .upload { padding: 10px; display: flex; align-items: center; justify-content:50%;}
.container-fluid .div-filter .upload form { display: flex; align-items: center; }
.container-fluid .div-filter .upload form div { display: flex; align-items: center; margin-left: 15px; }
.container-fluid .div-filter .upload form div input[type ='file']{ display: none; }
.container-fluid .div-filter .upload label.upload-label { background-color: var(--primaryBlack); color: var(--primaryWhite); padding: var(--padding-button); border-radius: var(--borderRadius); cursor: pointer; font-weight: var(--font-weight); margin-right: 10px; transition: var(--transition); display: inline-block; font-weight: var(--fontWeight);}
.container-fluid .div-filter .upload label.upload-label:hover { opacity: var(--opacityTransition); background-color: var(--primaryBlack); }
.container-fluid .div-filter .upload form div button { background-color: var(--primaryAccent); color: var(--primaryWhite); border-radius: var(--borderRadius); }
.container-fluid .div-filter .upload form div a { background-color: var(--primaryBlack); color: var(--primaryWhite); border-radius: var(--borderRadius); margin-left: 5px; padding: var(--padding-button);}
.container-fluid .div-filter .upload form div .nome-arquivo { color: var(--primaryBlack); opacity: 0.6; font-size: 12px;}

/* FILTRO */
.offcanvas .offcanvas-header { filter: drop-shadow( 0px 0px 15px #0000008e);}
.offcanvas .offcanvas-header .offcanvas-title img { width: 50%;}
.offcanvas .offcanvas-header .btn-close { filter: invert(100%); outline: none !important; box-shadow: none !important;}
.offcanvas .offcanvas-body form .container-filter { display: flex; flex-direction: column; }
.offcanvas .offcanvas-body form .container-filter .input-group label { font-size: 12px; color: var(--primaryBlack); margin-bottom: 5px;}
.offcanvas .offcanvas-body::-webkit-scrollbar { width: 8px; height: 8px; }
.offcanvas .offcanvas-body::-webkit-scrollbar-track { background: var(--bg-scroll); }
.offcanvas .offcanvas-body::-webkit-scrollbar-thumb { background: var(--bar-scroll); border-radius: var(--borderRadius); }
.offcanvas .offcanvas-body::-webkit-scrollbar-thumb:hover { background: var(--hover-scroll); }
.offcanvas .offcanvas-header { background-color: var(--primaryBlack);}

.input-group { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin-bottom: 15px;  }
.input-group .input-and-img { display: flex;  border: #000000 1px solid; border-radius: 3px !important; height: 100%; width: 100%; display: flex; justify-content: flex-start; align-items: center; border-radius: 3px 0px 0px 3px;}
.input-group .input-and-img div:nth-child(1)  { width: 10%; height: 30px !important; display: flex; align-items: center; justify-content: center; margin: 0;  background-color: rgb(0, 0, 0);  }  
.input-group .input-and-img div:nth-child(2)  { width: 90%; margin: 0; display: flex; align-items: center; justify-content: flex-start;  } 
.input-group .input-and-img div input { border: none; outline: none; width: 100%; height: 29px; padding-left: 5px; border-radius: var(--borderRadius); font-size: 14px; }
.input-group .input-and-img div img { width: 18px; height: 100%; filter: invert(100%);}

.group-button { display: flex; flex-direction: column; margin-top: 15px;}
.group-button .btn-accent{ background-color: var(--primaryAccent); font-weight: var(--font-weight); color: var(--primaryWhite); transition: var(--transition); border: 0px; border-radius: var(--borderRadius); padding: 5px; margin-bottom: 5px;}
.group-button .btn-accent:hover{ opacity: var(--opacityTransition); }
.group-button .btn-clean { background-color: var(--primaryBlack); color: var(--primaryWhite); border-radius: var(--borderRadius); transition: var(--transition); text-decoration: none; display: flex; align-items: center; justify-content: center; padding: 5px; }
.group-button .btn-clean:hover { opacity: var(--opacityTransition); }

/* TÍTULO + NÚMERO DE LINHAS ENCONTRADAS */
.container-fluid .div-title { display: flex; align-items: center; justify-content: space-between; margin: 15px 0px; }
.container-fluid .div-title div:nth-child(1){ width: 50%; }
.container-fluid .div-title div:nth-child(2){ width: auto; display: flex; justify-content: flex-end; padding: 5px 10px;}
.container-fluid .div-title div h2 { font-size: 20px; font-weight: bold; color: var(--font-weight); margin: 0; }
.container-fluid .div-title div p { color: var(--fontColor); margin: 0;   }
.container-fluid .div-title div p span { color: var(--primaryBlack); font-weight: bold; }

/* TABELA */
.table-container .table-striped { --bs-table-striped-bg: #e6e6e6; --bs-table-striped-color: var(--primaryBlack); }
.table-container { max-width: 100%; max-height: 60vh; overflow-x: auto; overflow-y: auto; padding: 15px; box-shadow: 4px 4px 12px var(--box-shadow); border-radius: 3px; background: #fff; }
.table-container::-webkit-scrollbar { width: 8px; height: 8px; }
.table-container::-webkit-scrollbar-track { background-color: var(--bg-scroll); }
.table-container::-webkit-scrollbar-thumb { background-color: var(--bar-scroll); border-radius: 3px !important; }
.table-container::-webkit-scrollbar-thumb:hover { background-color: var(--hover-scroll); }
.table-container .table { width: 100%; border-collapse: collapse; font-size: 0.8rem; text-align: left; table-layout: auto; }
.table-container .table thead { position: sticky; top: 0; }
.table-container .table thead th { background-color: #111111; color: var(--primaryWhite); font-weight: bold; z-index: 2; font-size: 12px; padding: 6px 6px; vertical-align: middle; white-space: nowrap; }
.table-container .table thead th:nth-child(1) { border-radius: 3px 0px 0px 0px;}
.table-container .table thead th:nth-child(17) { border-radius: 0px 3px 0px 0px;}
.table-container .table td { border: 1px solid #d4d4d4; font-size: 12px;}

/* Setas não selecionadas */
.table-container table.dataTable thead th.sorting::after { color: #c9c9c9; opacity: 0.8; font-size: 0.6rem; }
.table-container table.dataTable thead th.sorting::before{ color: var(--primaryWhite); opacity: 0.8; font-size: 0.6rem; }

/* Seta selecionada */
.table-container table.dataTable thead tr th.sorting_asc::before { content: "▲"; color: var(--primaryAccent); } /* Destacado em cima */
.table-container table.dataTable thead tr th.sorting_asc::after { content: "▼"; color: var(--primaryWhite); }   /* neutro em baixo */
.table-container table.dataTable thead tr th.sorting_desc::after { content: "▼"; color: var(--primaryAccent); } /* destacado em baixo */