:root {
    --tamanho-navbarinfo: 1rem;
    --bs-breadcrumb-divider: '>';
    --bs-breadcrumb-divider-color: #FAFFFD;
}

body {
    /* --navbarInfoBgColor: #0B245B;
    --navbarInfoColor: #FAFFFD; */
    --navbarInfoBgColor: #FAFFFD;
    --navbarInfoColor: #002642;
    --navbarTopColorHover: #002642;
    --btnTogglerMenuBgColor: #FAFFFD;
    --textoMenuHoverColor: #002642;
    --navbarBottomBgColor: #0B245B;
    --navbarBottomColor: #FFFFFF;
    --listagemBgColor: #FFFFFF;
    --listagemColor: #01121f;
    --blocosBgColor: #FFFFFF;
    --carrosselBgColor: #FFFFFF;
    --carrosselColor: #01121f;
    --modal-bodyBgColor: #FAFFFD;
    --modal-bodyColor: #01121f;
    --modal-footerBgColor: #FAFFFD;
    --modal-footerColor: #01121f;
    --tbody-BgColor: #FAFFFD;
    --tbody-Color: #01121f;
    --cor-texto: #1c1c1f;

    .logoNB{
        content: url('/img/Icons/LogoNB.png');
        max-height: 3rem;
    }
}

body.dark-mode{
    --navbarInfoBgColor: #1c1c1f;
    --navbarInfoColor: #d0d8e0;
    --navbarBottomBgColor: #1c1c1f;
    --listagemBgColor: #2c2d2e;
    --listagemColor: #FAFFFD;
    --blocosBgColor: #1c1c1f;
    --blocosColor: #FAFFFD;
    --carrosselBgColor: #1c1c1f;
    --carrosselColor: #FAFFFD;
    --btnTogglerMenuBgColor: #FAFFFD;
    --textoMenuHoverColor: #FAFFFD;
    --modal-bodyBgColor: #1c1c1f;
    --modal-bodyColor: #FAFFFD;
    --modal-footerBgColor: #1c1c1f;
    --modal-footerColor: #FAFFFD;
    --tbody-BgColor: #FAFFFD;
    --tbody-Color: #01121f;
    --cor-texto: #FAFFFD;

    table input{
        color: var(--cor-texto);
    }

    .logoNB{
        content: url('/img/Icons/LogoNBWhite.png');
        background-color: #ffffff00;
        max-height: 3rem;
    }
}

div.form-floating label{
    color: #1c1c1f;
}

.carrossel{
    background-color: var(--carrosselBgColor);
    color: var(--carrosselColor);
    box-shadow: 0px 0px 4px 1px #00000040;

    svg{
        color: var(--cor-texto);
    }

    .carousel-indicators button{
        color: var(--cor-texto);
        background-color: var(--cor-texto);
    }
}

.imagemCard{
    width: 100%;
}

.modal-body{
    background-color: var(--modal-bodyBgColor);
    color: var(--modal-bodyColor);
}

.modal-footer{
    background-color: var(--modal-footerBgColor);
    color: var(--modal-footerColor);
}

.bloco{
    background-color: var(--blocosBgColor);
    color: var(--blocosColor);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#navbarInfos{
    background-color: var(--navbarInfoBgColor);
    color: var(--navbarInfoColor);
}

#navbarMenu{
    background-color: var(--navbarInfoBgColor);
    color: var(--navbarInfoColor);
}

.btnTogglerMenu{
    background-color: var(--btnTogglerMenuBgColor);
}

.nav-item a{
    color: var(--navbarInfoColor);
}

.nav-item button{
    background-color: var(--navbarInfoBgColor);
    color: var(--navbarInfoColor);
}

.nav-item .dropdown-menu{
    background-color: var(--navbarInfoBgColor);
    color: var(--navbarInfoColor);
    border-color: var(--navbarInfoColor);
}

.nav-item .dropdown-menu a{
    background-color: var(--navbarInfoBgColor);
    color: var(--navbarInfoColor);
}

.dropdown-menu{
    background-color: var(--navbarInfoBgColor);
    color: var(--navbarInfoColor);
    border-color: var(--navbarInfoColor);;
}

.listagem{
    background-color: var(--listagemBgColor);
    color: var(--listagemColor);
}

.logoNB{
    background-color: #FAFFFD;
    /* background-color: #0B245B; */
    padding: 2px;
    height: 4rem;
    /* width: 50px; */
}

.imagensCertificacoes{
    background-color: #FAFFFD;
}

.imagemCalculoDrc{
    background-color: #FAFFFD;
}

.navbarinfo {
    height: var(--tamanho-navbarinfo);
    color: var(--navbarInfoColor);
    text-decoration: none;
}

@media (min-width: 768px) {
    .imagensEmpresa{
        height: 50svh;
    }

    .imgCarousel {
        height: 50vh;
    }

    .iframe-video-institucional {
        height: 50vh;
        box-shadow: 0px 0px 4px 1px #00000040;
    }

    .fotosCarrosselProdutos {
        height: 50svh;
    }

    .formulario{
        width: 75%;
    }
    
    table {
        tbody {
            tr {
                td label{
                display: none;
                }
            }
        }
    }

    #inputFiltro{
        width: 30%;
    }
}

@media (max-width: 768px) {
    .imagensEmpresa{
        max-width: 100%;
        width: auto;
    }

    .navbarinfo {
        height: 15px;
        font-size: smaller;
    }

    .imgCarousel {
        height: 25vh;
    }

    .iframe-video-institucional {
        height: 20vh;
    }

    .fotosCarrosselProdutos{
        height: 30vh;
    }

    .formulario{
        width: 75%;
    }

    .bloco-footer{
        border-bottom: 1px solid var(--navbarBottomColor);
    }

    table {

        input{
            color: black!important;
        }

        thead {
            display: none;
        }

        tbody {
            tr {
                display: block;
                background: #f8faff;
                border-radius: 15px;
                margin-bottom: 1rem;
                padding: 0.5rem;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
                border: 1px solid #d0e3ff;
                transition: all 0.2s ease-in-out;

                &:hover {
                    transform: translateY(-3px);
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
                }

                td {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    padding: 0.4rem 0.2rem;
                    border-bottom: 1px solid #e3ecff;
                    list-style-type: none;

                    &:last-child {
                        border-bottom: none;
                    }

                    label {
                        font-weight: 600;
                        color: #0a58ca;
                        font-size: 0.9rem;
                        margin-right: 0.5rem;
                        white-space: nowrap;
                    }

                    input {
                        flex: 1;
                        border: none;
                        background: transparent;
                        text-align: right;
                        color: #212529;
                        font-size: 0.9rem;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }

    #inputFiltro{
        width: 60%;
    }
}

@media (max-width: 600px) {
    .navbarinfo {
        height: 15px;
        font-size: smaller;
    }

    .carrossel {
        width: 100%;
    }

    .iconsRedesSociais {
        width: 20vw;
    }

    .fotosCarrosselProdutos{
        height: 30vh;
    }

    .formulario{
        width: 100%;
    }

}

@media (max-width: 100px) {
    .home-servico {
        grid-template-columns: 1fr 1fr 1fr;
        grid-auto-rows: 300px;
        margin-top: -110px;
    }
}

.sombra {
    box-shadow: 1px 1px 5px 1px #000000;
}

li.nav-item:hover {
    color: #ffffff;
    border-bottom: 2px solid #3276B6;
}

li.nav-item a:hover {
    color: var(--textoMenuHoverColor);
}

.nav-link {
    color: #000000;
}

.navbar {
    align-items: center;
}

.navbar-bottom{
    background-color: var(--navbarBottomBgColor);
    color: #ffffff;
}

.navbar-bottom-links {
    text-decoration: none;
    color: #ffffff;
}

.iframe-contato {
    width: 100%;
    height: 100vh;
}

.navbar-nav .nav-item.active {
    color: #3276B6;
    border-bottom: 2px solid #3276B6;
}

.home-servico {
    margin-top: 20px;
    margin-bottom: 20px;
    display: flex;
    grid-gap: 10px;
    justify-content: center;
}

.home-servico-item {
    background-color: #292A58;
    text-align: center;
    padding: 3rem 0;
    box-sizing: border-box;
    position: relative;
}

.home-servico-titulo {
    color: #fff;
    padding-top: 10px;
    font-weight: 300;
    text-transform: initial;
    position: relative;
}

.home-servico-link {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.cards {
    width: 75%;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* overflow: hidden; */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cards:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

h1 {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}

h2 {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}

h3 {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}

h5 {
    text-shadow: 2px 2px 2px rgba(0, 0, 0, .2);
}

.azulEscuro {
    color: #002642;
}

.bgAzulEscuro {
    background-color: #002642;
    color: #FAFFFD;
}

.btnAzul {
    background-color: #034d81;
    color: #ffffff;
}

.btnAzul:hover{
    background-color: #04365a;
    color: #ffffff;
}

a {
    cursor: pointer;
}

#toggleDarkMode:checked{
    background-color: #1c1c1f;
    border-color: white;
}

#toggleDarkMode:hover{
    cursor: pointer;
}

.form-floating::before{
    display: none;
}

#btnLogout:hover{
    color: #ffffff;
    border-bottom: 2px solid;
}

.banner{
    background-blend-mode: darken;
}

.text-color-por-tema{
    color: var(--cor-texto);
}