td, th{
    vertical-align: middle;
}

.box-shadow{
    box-shadow: 0px 0px 28px -8px rgba(78, 78, 78, 0.664);
}

.paginacao{
    display: flex;
    width: fit-content;
    margin-left: auto;
    background: #212529;
    padding-left: 15px;
    clip-path: polygon(8% 0%, 100% 0%, 100% 100%, 0% 100%);
    border-top-right-radius: 5px;
    margin-bottom: -2px;
}

.paginacao *{
    flex: 1;
}

.paginacao span{
    display: flex;
    justify-content: center;
    align-items: end;
    padding: 2px;
}

.btn-paginacao{
    background-color: #f1a469;
    margin: 5px;
    border-radius: 5px;
    padding: 5px 10px;
    text-decoration: none;
    color: white;
    cursor: pointer;
    text-align: center;
    font-size: 12px;
}

.btn-paginacaoActive{
    background-color: #f58634;
}

.btn-paginacao:hover{
    background-color: #f58634;
}

.controlerPage{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px auto;
    width: fit-content;
}

.btn-page{
    flex: 1;
    text-align: center;
    margin: 5px;
}

.pageLink{
    width: 50px;
    text-align: center;
}

.pageLink i{
    font-size: 25px;
    color: #f58634;
    transition: 0.5s;
}

.pageLink i:hover{
    color: #f58434d0;
}

input.pageLink{
    border: none;
    background-color: transparent;
    color: #f58634;
}

.color-orange{color: #f58634;}

.buttonPesquisa{
    background-color: white;
    padding: 0px 10px;
    border-radius: 30px;
    border: 4px;
    border-style: double;
    border-color: #f58634;
    text-align: center;
    width: fit-content;
    margin: auto;
    font-size: 14px;
    cursor: pointer; 
    z-index: 1;
    position: relative;           
}

.contentPesquisa{
    border: 1px solid rgb(165 165 165 / 30%);
    margin: auto;
    width: 0px;
    transition: .8s;
    margin-top: -15px;
    margin-bottom: 10px;
    overflow: hidden;
    max-width: 100%;
    height: 0px;
    border-radius: 5px;
}

.contentPesquisa>form{
    padding: 20px;
}

.limparPesquisa{
    width: fit-content;
    margin: 0 0 0 auto;
    padding: 0;
    font-size: small;
    margin-top: -10px;
    font-weight: 600;
    cursor: pointer;
}

.btnPesquisa{
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.btn-outline-orange{
    border: 2px solid #f58634;
    color: #f58634;
    transition: 1s;
}

.btn-outline-orange:hover{
    background-color: #f58634;
    color: white;
}

.btn-zoom {
    transition: transform 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55), background-position 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55), box-shadow 500ms linear;
    background-position: -250px center;
    background-repeat: no-repeat;
}

.btn-zoom:hover {
    transform: scale(1.1);
    background-position: -60px;
}

/* DATE PICKER */
.datepicker th {
    /* back do topo*/
    background: #292d3c;
    color: white;
    padding: 10px;
}

.datepicker td {
    padding: 10px 15px;
}

.datepicker table tr td.today {
    color: #fff;
    background-color: #009;
    border-color: blue;
}

.datepicker .datepicker-switch, 
.datepicker .next, 
.datepicker .prev, 
.datepicker tfoot tr th,
.datepicker .dow {
    background: white;
    color: black;
}

/* data selecionada efeito */
.datepicker table tr td.active, 
.datepicker table tr td.active.disabled, 
.datepicker table tr td.active.disabled:hover, 
.datepicker table tr td.active:hover {
    background-image: linear-gradient(to bottom, #f58634, #ffaa67)!important;
    border-radius: 50px;    
}

.datepicker table tr td span.active.active, .datepicker table tr td span.active.disabled, .datepicker table tr td span.active.disabled.active, .datepicker table tr td span.active.disabled.disabled, .datepicker table tr td span.active.disabled:active, .datepicker table tr td span.active.disabled:hover, .datepicker table tr td span.active.disabled:hover.active, .datepicker table tr td span.active.disabled:hover.disabled, .datepicker table tr td span.active.disabled:hover:active, .datepicker table tr td span.active.disabled:hover:hover, .datepicker table tr td span.active.disabled:hover[disabled], .datepicker table tr td span.active.disabled[disabled], .datepicker table tr td span.active:active, .datepicker table tr td span.active:hover, .datepicker table tr td span.active:hover.active, .datepicker table tr td span.active:hover.disabled, .datepicker table tr td span.active:hover:active, .datepicker table tr td span.active:hover:hover, .datepicker table tr td span.active:hover[disabled], .datepicker table tr td span.active[disabled] {
    /* background-color: #04c; */
    background: #f58634 !important;
}

.dow {
    color: #f58634 !important; /* Cor dos nomes dos dias da semana */
}

/* Efeito hover */
.datepicker .datepicker-switch:hover, 
.datepicker .next:hover, 
.datepicker .prev:hover, 
.datepicker tfoot tr th:hover {
    background: #ffaa67 !important; /* Uma tonalidade mais clara para o efeito hover */
}

/* Estilo para o input do datepicker */
#datepicker {
    width: 150px; /* ajusta a largura */
    font-size: 12px; /* ajusta o tamanho da fonte */
    padding: 5px; /* ajusta o espaçamento interno */
    margin-top: -10px !important;
}

/* Estilo para o calendário do datepicker */
.datepicker {
    font-size: 12px; /* ajusta o tamanho da fonte */
}

.datepicker table {
    width: 100%; /* ajusta a largura do calendário */
}

.datepicker td,
.datepicker th {
    padding: 2px; /* ajusta o espaçamento das células */
}

.ui-datepicker td.selected, .ui-datepicker td.in-range {
    background: red !important;
}

.highlighted {
    background-color: red !important;
}