/*
    CSS BY Márcio H.
*/

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: small;
    background-color: #144138;
    color: #fff;
}

/* unvisited link */
a:link {
    color: black;
    text-decoration: none;
}
/* visited link */
a:visited {
    color: black;
    text-decoration: none;
}
/* mouse over link */
a:hover {
    color: black;
    text-decoration: none;
}
/* selected link */
a:active {
    color: black;
    text-decoration: none;
}

.logo-container {
    margin-top: 3px;  /* Reduz a margem superior */
    margin-bottom: 3px; /* Reduz a margem inferior */
}
.titulo-container {
    margin-top: 3px;
    margin-bottom: 3px;
}
.loading-overlay {
    display: flex; /* Adiciona flexbox */
    align-items: center; /* Centraliza verticalmente */
    justify-content: center; /* Centraliza horizontalmente */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.836);
    z-index: 1050;
}

.loading-gif {
    width: 300px;  /* Aumente o valor conforme necessário */
    height: auto;  /* Mantém a proporção da imagem */
}

#search-btn {
    display: none;
}

#result_list {
    list-style-type: none;
    padding: 0;
    margin: 10px 0;
}

#result_list li {
    padding: 8px;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    border-radius: 4px;
}

.title_uf {
    background-color: #fa6404;
    text-align: center;
    font-size: medium;
    color: #000;
}
.button_uf {
    background-color: #fffb00c5;
}

table.tabela-estilizada {
    border-collapse: collapse; /* Remove os espaçamentos entre células */
    width: 100%; /* Ajusta a largura da tabela para ocupar todo o espaço */
}
table.tabela-estilizada th, 
table.tabela-estilizada td {
    border: none; /* Remove as bordas */
    padding: 0; /* Remove o padding interno das células */
}
table.tabela-estilizada button.btn {
    display: block; /* Faz o botão ocupar o bloco inteiro */
    width: 100%; /* Ocupa 100% da largura da célula */
    height: 100%; /* Opcional: permite que o botão ocupe a altura da célula */
    border: none; /* Remove a borda padrão do botão */
}
table.tabela-estilizada tbody tr {
    border: none; /* Remove as bordas entre as linhas */
}

/* Tela Inicial e formatações pros 3 sistemas*/
.links-home {
    font-size: 1.5em;
    text-align: center;
    margin-top: 0.5em;
}
.cor_link1 {
    background-color: cyan;
}
.cor_link2 {
    background-color: rgb(248, 170, 0);
    margin-top: 0.3em;
}
.cor_link3 {
    background-color: rgb(25, 236, 53);
    margin-top: 0.3em;
}
.cor_link4 {
    background-color: #cdc9c9;
    margin-top: 0.3em;
}
.cor_link5 {
    background-color: #ff6347;
    margin-top: 0.3em;
}
.titulos {
    margin-top: 1em;
}

/* CSS Inventário */
.btns_prod {
    margin-top: 5%;
}
.btn_salvar_qt {
    font-size: medium;
    height: 100%;
    width: 100%;
    margin-bottom: 0.5em;
}
.btn_excluir {
    font-size: medium;
    height: 100%;
    width: 100%;
    padding: 0.3em;
}
.btn_addPro {
    margin-top: 5px;
}

/* Pedidos SIAI */
.hidden {
    /*display: none;*/
    visibility: hidden;
}

.visible {
    display: block;
}

/* Media Queries (Responsividade) */

/* Dispositivos extra small (telefones em modo retrato, com menos de 576px) */
@media (max-width: 575.98px) {
    body {
        font-size: small;
    }

    /* Inventário */
    .btn_add_pro {
        display: grid;
    }
    .input_qt {
        height: 2.5em;
        font-size: medium;
        width: 3.8em;
    }
    .btn_salvar_invent {
        display: grid;
    }
    .btn_excluir_invent {
        display: grid;
    }
}

/* Dispositivos small (telefones em modo paisagem ou tablet vertical, com menos de 768px)*/
@media (max-width: 767.98px) {
    body {
        font-size: medium;
    }

    /* Inventário */
    .btn_salvar_qt {
        font-size: medium;
        display: grid;
        height: 100%;
        width: 100%;
        margin-bottom: 0.4em;
    }
    .adicionar_pro {
        height: 3em;
    }
    .voltar {
        height: 3em;
    }
    .botao_loja {
        height: 3em;
    }
}

/* Dispositivos médios (tablets horizontal com menos de 992px) */
@media (max-width: 991.98px) {
}

/* Dispositivos large (desktops com menos de 1200px) */
@media (max-width: 1199.98px) {
}

/* Efeitos links */
.cor_link1:hover {
    -webkit-animation-name: bounce;
    animation-name: bounce;
    -webkit-transform-origin: center bottom;
    -ms-transform-origin: center bottom;
    transform-origin: center bottom;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-transition-timing-function: cubic-bezier(
            0.755,
            0.05,
            0.855,
            0.06
        );
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(
            0.755,
            0.05,
            0.855,
            0.06
        );
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes bounce {
    0%,
    20%,
    53%,
    80%,
    100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
    40%,
    43% {
        -webkit-transition-timing-function: cubic-bezier(
            0.755,
            0.05,
            0.855,
            0.06
        );
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -30px, 0);
        transform: translate3d(0, -30px, 0);
    }
    70% {
        -webkit-transition-timing-function: cubic-bezier(
            0.755,
            0.05,
            0.855,
            0.06
        );
        transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        -webkit-transform: translate3d(0, -15px, 0);
        transform: translate3d(0, -15px, 0);
    }
    90% {
        -webkit-transform: translate3d(0, -4px, 0);
        transform: translate3d(0, -4px, 0);
    }
}

/* Efeitos links */
.pulse:hover {
    -webkit-animation-name: pulse;
    animation-name: pulse;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    }
    @-webkit-keyframes pulse {
    0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    }
    @keyframes pulse {
    0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    50% {
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
    transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
    }
    }