/* ### DEFINICOES GLOBAIS */
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 900;
    src: url('/assets/fonts/Poppins-Black.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 900;
    src: url('/assets/fonts/Poppins-BlackItalic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    src: url('/assets/fonts/Poppins-Bold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 700;
    src: url('/assets/fonts/Poppins-BoldItalic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 800;
    src: url('/assets/fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 800;
    src: url('/assets/fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 200;
    src: url('/assets/fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 200;
    src: url('/assets/fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: normal;
    src: url('/assets/fonts/Poppins-Italic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    src: url('/assets/fonts/Poppins-Light.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 300;
    src: url('/assets/fonts/Poppins-LightItalic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    src: url('/assets/fonts/Poppins-Medium.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 500;
    src: url('/assets/fonts/Poppins-MediumItalic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    src: url('/assets/fonts/Poppins-Regular.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    src: url('/assets/fonts/Poppins-SemiBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 600;
    src: url('/assets/fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 100;
    src: url('/assets/fonts/Poppins-Thin.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    font-style: italic;
    font-weight: 100;
    src: url('/assets/fonts/Poppins-ThinItalic.ttf') format('truetype');
    font-display: swap;
}

:root {
    --verde-principal: #02D569;
    --verde-principal-hover: #00B256;
    --verde-escuro: #01572A;
    --verde-escuro-hover: #00361A;
    --verde-claro: #69F0AA;
    --amarelo: #F1BC00;
    --amarelo-hover: #D6A400;
    --abobora: #F18200;
    --abobora-hover: #C16700;

    
    --cor-principal: #02D569;
    --cor-secundaria: #F1BC00;
    --cor-texto: #000000;
    --cor-texto-cabecalho: #ffffff;
    --cor-cabecalho: #000000;
}

/* *{
    font-family: Arial, sans-serif;
} */

body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

.loading-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    animation: loading-dot 1s ease-in-out infinite;
}

.zoomImg{
    background-color: #fff;
}

.icone_toast{
    border: none!important;
}

html{
    overflow-x: hidden;
}

@keyframes loading-dot {
    0% {
        transform: scale(0);
    }
    50% {
            transform: scale(1);
    }
    100% {
            transform: scale(0);
    }
}

#loading {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5)!important;
    z-index: 9999;
}

#loading img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#main{
    min-height: 100vh;
    padding: 0;
}

div#main,
div#header,
div#footer{
    display: none;
}


.dropdown:not(.dropdown-hover) .dropdown-menu.show{
    margin-top: 0!important;
}

.dropdown:not(.dropdown-hover) .dropdown-menu{
    margin-top: 0!important;
}

.filepond--item {
    width: calc(50% - 0.5em);
}

/* #### HEADER, SUBHEADER AND FOOTER #### */

footer {
    background-color: #000;
    padding: 20px;
    text-align: center;
    margin-top: 50px;
}

footer p {
    font-size: 14px;
    color: #999;
    margin: 0;
}  

#footer .footer .container{
    margin: 0 auto;
}

#footer .footer .container div{
    padding: 10px 0px;
}

#footer .footer #direitosReservados{
    display: flex;
    align-items: center;
    justify-content: center;
}

#footer .footer #formasDePagamento{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#footer .footer #formasDePagamento img{
    width: 150px;
}

#footer #redesSociais{
    display: flex;
    align-items: center;
    justify-content: center;
}

#footer #redesSociais i{
    color: var(--cor-principal);
    font-size: 30px;
    padding-left: 10px;
    padding-right: 10px;
    transition: 0.2s;
}

#footer #redesSociais i:hover{
    filter: brightness(0.8);
}

/* ### BOTÃO FLUTUANTE WHATSAPP */
#iconWhatsAppFlutuante{
    display: block;
    position: fixed;
    right: -100px; /* Inicialmente posicionado fora da tela */
    bottom: 70px;
    animation-name: slideIn;
    animation-duration: 1s;
    animation-delay: 1s; /* Atraso de 1 segundo antes da animação iniciar */
    animation-fill-mode: forwards; /* Mantém o estado final da animação */
    z-index: 20;
}

#iconWhatsAppFlutuante i{
    color: #fff;
    background-color: #25D366;
    padding: 10px;
    text-align: center;
    font-size: 30px;
    border-radius: 100px;
}

@keyframes slideIn {
    0% {
        right: -100px; /* Posição inicial fora da tela */
    }
    100% {
        right: 10px; /* Posição final na tela */
    }
}

#header #divAgindoComo{
    display: block;
    position: absolute;
    top: 90px;
    right: 0;
    width: 200px;
}

#header #divAgindoComo label{
    font-size: .875rem;
    font-weight: 400;
    color: #737373;
    margin-left: .25rem;
    margin-bottom: 0;
}

/* HOME */
#home .swiper {
    width: 100%;
    margin: 20px auto;
    height: 150px;    
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#home .swiper #categoria{
    height: 100%;
    aspect-ratio: 1 / 1;
    background-color: #ddd;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    background-size: 100% 100%;
    transition: 0.2s;
}

#home .swiper #loja{
    height: 90%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    background-size: cover;
    background-position: center;
    transition: 0.2s;
}


#home .swiper #categoria:hover,
#home .swiper #loja:hover{
    transform: scale(1.05);
    cursor: pointer;
}

#home .swiper-slide {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#home #sessaoProdutos,
#home #sessaoProdutosReservaveis,
#home #sessaoProdutosNovos{
    width: 90%;
    margin: 40px auto;
}

#home #sessaoLojas{
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--cor-principal);
}

#home #sessaoProdutos,
#home #sessaoProdutosReservaveis,
#home #sessaoLojas,
#home #sessaoProdutosNovos{
    margin-top: 60px;
    margin-bottom: 60px;
}

#home #sessaoLojas h1{
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
}

#home #sessaoProdutos h1,
#home #sessaoProdutosReservaveis h1,
#home #sessaoProdutosNovos h1{
    text-align: center;
    font-weight: 800;
    color: #000;
    font-size: 20px;
}

#home #sessaoProdutos #produtosEmDestaque a,
#home #sessaoProdutosReservaveis #produtosReservaveisEmDestaque a,
#home #sessaoProdutosNovos #novidadesNaLoja a{
    text-decoration: none;
}

#home #sessaoProdutos #produtosEmDestaque #itemProduto,
#home #sessaoProdutosReservaveis #produtosReservaveisEmDestaque #itemProduto,
#home #sessaoProdutosNovos #novidadesNaLoja #itemProduto{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px;
    transition: transform 0.3s ease;
}

#home #sessaoProdutos #produtosEmDestaque #itemProduto:hover,
#home #sessaoProdutosReservaveis #produtosReservaveisEmDestaque #itemProduto:hover,
#home #sessaoProdutosNovos #novidadesNaLoja #itemProduto:hover{
    transform: scale(1.1);
    cursor: pointer;
}

#itemProduto #img-wrapper{
    width: 100%;
    aspect-ratio: 9 / 12;
    border-radius: 0.375em;
    overflow: hidden;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

#faixaOff{
    position: absolute!important;
    top: 15px;
    left: -40px;
    width: 160px;
    background-color: #e63946; /* vermelho vibrante */
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    transform: rotate(-45deg);
    padding: 6px 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#itemProduto #img-wrapper #imgProduto{
    object-fit: cover!important;
}

#home #sessaoProdutos #produtosEmDestaque #itemProduto #imgProduto,
#home #sessaoProdutosReservaveis #produtosReservaveisEmDestaque #itemProduto #imgProduto,
#home #sessaoProdutosNovos #novidadesNaLoja #itemProduto #imgProduto{
    width: 100%;
    aspect-ratio: 9 / 12;
    object-fit: cover;
    border-radius: 0.375em;

}

#home #sessaoProdutos #produtosEmDestaque #itemProduto #nomeProduto,
#home #sessaoProdutosReservaveis #produtosReservaveisEmDestaque #itemProduto #nomeProduto,
#home #sessaoProdutosNovos #novidadesNaLoja #itemProduto #nomeProduto{
    color: #000;
    font-size: 20px;
    font-weight: bold;
    margin-top: 5px;
}

#home #sessaoProdutos #produtosEmDestaque #itemProduto #precoProduto,
#home #sessaoProdutosReservaveis #produtosReservaveisEmDestaque #itemProduto #precoProduto,
#home #sessaoProdutosNovos #novidadesNaLoja #itemProduto #precoProduto{
    color: var(--cor-principal);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#home #divBtnAnunciar{
    display: flex;
    justify-content: center;
    margin: 15px auto;
}

@media (min-width: 830px) {
    #home #divBtnAnunciar{
        display: flex;
        justify-content: flex-start;
        margin-top: -37px;
    }
}

#home #divBtnVerTodos{
    display: flex;
    justify-content: center;
}

#home #divBtnVerTodos a{
    color: #fff;
    text-decoration: none;
}

#home #divBtnVerTodos button{
    background-color: var(--cor-principal);
    color: #fff;
    transition: 0.2s;
}

#home #divBtnVerTodos button:hover{
    filter: brightness(0.8);
}


/* PAGINAS DE REGISTRO, LOGIN e RECUPERACAO DE SENHA */
#divLogin,
#divRegistro,
#divEsqueciMinhaSenha{
    text-align: center;
    padding-top: 50px;
    margin: 0;
}

#divLogin #divLeft,
#divRegistro #divLeft{
    padding: 0 25px;
}

#divEsqueciMinhaSenha #divLeft,
#divEsqueciMinhaSenha #divRight{
    text-align: center;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#divLogin #divLeft h1,
#divRegistro #divLeft h1,
#divEsqueciMinhaSenha #divLeft h1{
    font-size: 30px;
    font-weight: 900;
    color: #000;
}

#divLogin #divLeft #imgLogin,
#divEsqueciMinhaSenha #divLeft #imgEsqueciMinhaSenha{
    margin: 0 auto;
    width: 60%;
}

#divRegistro #divLeft #imgRegistro{
    margin: 0 auto;
    width: 80%;
}

#divLogin #divRight,
#divRegistro #divLeft,
#divRegistro #divRight{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#divLogin #divRight #formLogin,
#divLogin #divRight #formValidacao,
#divRegistro #divRight #formRegistro,
#divRegistro #divRight #formValidacao
#divRegistro #divRight #divFormRegistroProvider{
    border: 5px solid var(--cor-secundaria);
    padding: 20px 20px;
    border-radius: 0.375em;
    width: 90%;
}

#divRegistro #formRegistro a,
#divLogin #formLogin a{
    color: #000;
}

#divFormEsqueciMinhaSenha #box{
    max-width: 700px;
    padding: 30px;
    border-radius: 0.375em;
    margin: 0 auto;
    border: 5px solid var(--cor-secundaria);
    text-align: center;
    align-items: center;
}

#divFormEsqueciMinhaSenha #box h1{
    color: var(--cor-principal);
    font-weight: bold;
}

#divFormEsqueciMinhaSenha #tabCodigo,
#divFormEsqueciMinhaSenha #tabAlterar{
    display: none;
}

#formLogin input,
#formValidacao input,
#formRegistro input,
#formRegistro select,
#divFormEsqueciMinhaSenha input,
#formCodigo input,
#formNovaSenha input,
#formRegistroProvider input,
#formRegistroProvider select{
    border: 1px solid #000;
}

#divLogin #divRight #formLogin label,
#divLogin #divRight #formValidacao label,
#divRegistro #divRight #formRegistro label,
#divRegistro #divRight #formValidacao label,
#divEsqueciMinhaSenha #divRight #formEsqueciMinhaSenha label,
#divEsqueciMinhaSenha #divRight #formCodigo label,
#divEsqueciMinhaSenha #divRight #formNovaSenha label,
#divRegistro #divRight #divFormRegistroProvider label{
    float: left;
    margin-top: 15px;
}

#divLogin #divRight #formLogin h1,
#divLogin #divRight #formValidacao h1,
#divRegistro #divRight #formRegistro h1,
#divRegistro #divRight #formValidacao h1,
#divRegistro #divRight #divFormRegistroProvider h1{
    color: var(--cor-principal);
    font-weight: bold;
}

#divLogin #divRight #formLogin #btnLogin,
#divLogin #divRight #formValidacao #btnValidar,
#divRegistro #divRight #formValidacao #btnValidar,
#divFormEsqueciMinhaSenha #box #btnRecuperarSenha,
#divFormEsqueciMinhaSenha #box #btnAvancarSenha,
#divFormEsqueciMinhaSenha #box #btnEsqueciMinhaSenha,
#divLogin #divRight #btnLoginProvider,
#divRegistro #divRight #btnRegistroProvider{
    display: block;
    margin: 0 auto;
    margin-top: 40px;
    background-color: var(--cor-principal);
    color: #fff;
    padding: 5px 40px;
    font-weight: 600;
    transition: 0.2s;
}


#divRegistro #divRight #formRegistro #btnRegistro{
    display: block;
    margin-top: 40px;
    background-color: var(--cor-principal);
    color: #fff;
    padding: 5px 40px;
    font-weight: 600;
}

/* #divFormEsqueciMinhaSenha #box #btnEsqueciMinhaSenha{
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: var(--cor-principal);
    font-weight: 500;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
} */

#divLogin #divRight #formLogin #btnLogin:hover,
#divLogin #divRight #formValidacao #btnValidar:hover,
#divRegistro #divRight #formRegistro #btnRegistro:hover,
#divRegistro #divRight #formValidacao #btnValidar:hover,
#divFormEsqueciMinhaSenha #box #btnRecuperarSenha:hover,
#divFormEsqueciMinhaSenha #box #btnAvancarSenha:hover,
#divFormEsqueciMinhaSenha #box #btnEsqueciMinhaSenha:hover,
#divLogin #divRight #btnLoginProvider:hover,
#divRegistro #divRight #btnRegistroProvider:hover{
    filter: brightness(0.8);
}

#divRegistro #divRight #box a,
#divLogin #divRight #box a,
#divFormEsqueciMinhaSenha #box a{
    color: #000;
    margin-top: 10px;
    transition: 0.2s;
}

#divRegistro #divRight #box a:hover,
#divLogin #divRight #box a:hover,
#divRegistroSOU #divRight #box a:hover,
#divFormEsqueciMinhaSenha #box a:hover{
    color: #444;
}

#divLogin #divRight #formLogin .input-group-text,
#divRegistro #divRight #formRegistro .input-group-text,
#divEsqueciMinhaSenha #tabAlterar .input-group-text{
    background-color: transparent;
    border: none;
}

#divLogin #divRight #formLogin #input-group-append,
#divRegistro #divRight #formRegistro #input-group-append,
#divEsqueciMinhaSenha #tabAlterar #input-group-append{
    background-color: #fff;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: 0.375rem;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    border: 1px solid #000;
}

#divLogin #divRight #formLogin #input-group-append span,
#divRegistro #divRight #formRegistro #input-group-append span,
#divEsqueciMinhaSenha #tabAlterar #input-group-append span{
    height: 100%;
}

#divEsqueciMinhaSenha #iconDicaSenha{
    padding: 0;
}

#divEsqueciMinhaSenha #dicaSenha{
    text-align: left;
}

#divEsqueciMinhaSenha #dicaSenha label{
    margin-right: 10px;
}

#divLogin #divRight #formLogin #senhaLogin,
#divRegistro #divRight #formRegistro #senhaRegistro,
#divEsqueciMinhaSenha #divRight #formNovaSenha #senhaNova,
#divEsqueciMinhaSenha #divRight #formNovaSenha #senhaNova2{
    border-right: none;
}

#divRegistro #divRight #divTermosDeUso,
#divRegistro #divRight #divTermosDeUsoProvider{
    display: flex;
    text-align: left;
    justify-content: center;
    margin-top: 15px;
}

#divRegistro #checkTermosDeUso:checked,
#divRegistro #checkTermosDeUsoProvider:checked {
    background-color: var(--cor-principal)!important;
    border-color: var(--cor-principal)!important;
}

#divRegistro #divRight #divTermosDeUso span,
#divRegistro #divRight #divTermosDeUsoProvider span{
    margin-left: 5px;
}

#divRegistro #divRight #divTermosDeUso input,
#divRegistro #divRight #divTermosDeUsoProvider input{
    aspect-ratio: 1/1;
}

#divRegistro #divRight input.invalid,
#divRegistro #divRight textarea.invalid,
#divRegistro #divRight select.invalid,
#divEsqueciMinhaSenha #divRight input.invalid{
    background-color: #ffa0a0;
}

#divLogin #divRight #formValidacao #numeros,
#divRegistro #divRight #formValidacao #numeros,
#divFormEsqueciMinhaSenha #numeros{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#divLogin #divRight #formValidacao #numeros .codigo-input,
#divRegistro #divRight #formValidacao #numeros .codigo-input,
#divFormEsqueciMinhaSenha #numeros .codigo-input{
    margin: 5px;
    aspect-ratio: 1/1;
    max-width: 60px;
    text-align: center;
    font-weight: bold;
    font-size: 1.2em;
}

#divRegistro #divRight #registroInterno {
    display: flex;
    justify-content: center;
    width: 90%;
}

#divRegistro #divRight #registroProvider{
    display: none;
    justify-content: center;
}

#divLogin #naoRecebiCodigo,
#divRegistro #naoRecebiCodigo,
#divEsqueciMinhaSenha #naoRecebiCodigo{
    margin-top: 20px;
}

#divLogin p#naoRecebiCodigo.inativo,
#divRegistro p#naoRecebiCodigo.inativo,
#divEsqueciMinhaSenha p#naoRecebiCodigo.inativo{
    color: #777;
}

#divLogin p#naoRecebiCodigo.ativo,
#divRegistro p#naoRecebiCodigo.ativo,
#divEsqueciMinhaSenha p#naoRecebiCodigo.ativo{
    color: #333;
}

#divLogin p#naoRecebiCodigo.inativo a,
#divRegistro p#naoRecebiCodigo.inativo a,
#divEsqueciMinhaSenha p#naoRecebiCodigo.inativo a{
    text-decoration: none;
}

#divLogin p#naoRecebiCodigo.ativo a,
#divRegistro p#naoRecebiCodigo.ativo a,
#divEsqueciMinhaSenha p#naoRecebiCodigo.ativo a{
    text-decoration: underline;
}

#divLogin p#naoRecebiCodigo.ativo a:hover,
#divRegistro p#naoRecebiCodigo.ativo a:hover,
#divEsqueciMinhaSenha p#naoRecebiCodigo.ativo a:hover{
    cursor: pointer;
}

#divLogin #buttonsLogin,
#divRegistro #buttonsRegistro{
    display: flex;
    flex-direction: column;
    align-content: center;
    flex-wrap: wrap;
}

#divLogin #buttonsLogin button,
#divRegistro #buttonsRegistro button{
    margin-top: 5px;
    margin-bottom: 5px;
}

#divLogin #buttonsLogin #btnLoginGoogle,
#divLogin #buttonsLogin #btnLoginLinkedIn,
#divRegistro #buttonsRegistro #btnRegistroGoogle,
#divRegistro #buttonsRegistro #btnRegistroLinkedIn{
    background-color: #fff;
    border: 1px #000 solid;
}

#divLogin #buttonsLogin #btnLoginGoogle:hover,
#divLogin #buttonsLogin #btnLoginLinkedIn:hover,
#divRegistro #buttonsRegistro #btnRegistroGoogle:hover,
#divRegistro #buttonsRegistro #btnRegistroLinkedIn:hover{
    background-color: #eee;
}


#divLogin #buttonsLogin #btnLoginGoogle img,
#divLogin #buttonsLogin #btnLoginLinkedIn img,
#divRegistro #buttonsRegistro #btnRegistroGoogle img,
#divRegistro #buttonsRegistro #btnRegistroLinkedIn img{
    width: 25px;
}

#buttonsRegistro .hr-container,
#buttonsLogin .hr-container{
    display: flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}

#buttonsRegistro .hr-container hr,
#buttonsLogin .hr-container hr{
    flex: 1;
    border: none;
    border-top: 2px solid black;
    margin: 0;
}

#buttonsRegistro .hr-container span,
#buttonsLogin .hr-container span{
    padding: 0 10px;
}

#divRegistro #formRegistroProvider input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#divRegistro #formRegistroProvider #iconDicaLabel{
    text-align: left;
    margin-top: 15px;
}

#divRegistro #formRegistroProvider #iconDicaLabel{
    text-align: left;
    margin-top: 15px;
}

#divRegistro #formRegistroProvider #iconDicaLabel #icon{
    padding: 0;
}

#divRegistro #formRegistroProvider #iconDicaLabel label{
    margin-top: 0!important;
    margin-right: 5px;
}

#divLogin #linkEsqueciSenha button{
    color: #000;
    transition: 0.2s;
}

#divLogin #linkEsqueciSenha:hover button{
    color: #444;
}

#divRegistro #indicadorSenha,
#alterarSenha #indicadorSenha,
#divEsqueciMinhaSenha #indicadorSenha{
    display: none;
    align-items: center;
    justify-content: center;
}

#divRegistro #forcaSenha,
#alterarSenha #forcaSenha,
#divEsqueciMinhaSenha #forcaSenha{
    margin-bottom: 10px;
    width: 80%;
}

/*VERIFICAR SOMENTE O NECESSÁRIO A PARTIR DAQUI*/

#meusPedidos{
    width: 90%;
    margin: 0 auto;
}

#meusPedidos .card{
    padding: 0px;
}

#meusPedidos .card-footer{
    padding: 0px;
}

#meusPedidos .card-footer .accordion-button:not(.collapsed) {
    color: #000;
    background-color: var(--cor-secundaria);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

#meusPedidos .card-footer .accordion-button:not(.collapsed)::after{
    filter: brightness(0)!important;
}

#meusPedidos .card-header{
    color: var(--cor-principal);
    font-weight: 600;
    text-align: center;
}

#meusPedidos .card-header small{
    color: #000;
}

#meusPedidos #imgCartao{
    height: 25px!important;
}

#paginacaoPedidos{
    display: flex;
    justify-content: center;   
}

#paginacaoPedidos button{
    margin: 5px;
    background-color: var(--cor-principal);
    color: #fff;
}

#meusPedidos #botoesPedido {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    flex-direction: column;
}

#meusPedidos #botoesPedido button{
    background-color: var(--cor-principal);
    color: #fff;
    margin-top: 10px;
    transition: 0.2s;
}

#meusPedidos #botoesPedido button:hover{
    filter: brightness(0.8);
}


#meusPedidos #botoesPedido .btn-pagto,
#meusPedidos #botoesPedido .btn-confirmar-recebimento{
    margin-top: 10px;
    background-color: var(--cor-secundaria);
    color: #fff;
}

#meusPedidos #botoesPedido .btn-pagto:hover,
#meusPedidos #botoesPedido .btn-confirmar-recebimento:hover{
    filter: brightness(0.8);
}

#divRegistro #labelDica{
    margin-top: 15px;
}

#divRegistro #labelDica label{
    margin-top: 0!important;
    margin-right: 5px;
}

#divRegistro #labelDica button{
    float: left;
    padding: 0;
}

/* PÁGINA MINHA CONTA - DASHBOARD PREMIUM */
.minhaConta {
    background-color: #f8f9fa;
    padding-bottom: 50px;
    position: relative;
}

#headerMinhaConta {
    width: 100%;
    height: 150px;
    margin: 0;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--cor-principal) 0%, var(--cor-secundaria) 100%);
    position: relative;
    overflow: hidden;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

#headerMinhaConta::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 200px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
}

/* LISTA DE DESEJOS - MODERN CARDS */
#wishlistGrid {
    padding: 20px 0;
}

.wishlist-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0,0,0,0.05);
}

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

.wishlist-img-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* 1:1 Aspect Ratio */
    overflow: hidden;
}

.wishlist-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.wishlist-card:hover .wishlist-img {
    transform: scale(1.1);
}

.btn-remove-wishlist {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff4757;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    z-index: 2;
}

.btn-remove-wishlist:hover {
    background: #ff4757;
    color: #fff;
    transform: rotate(90deg);
}

.wishlist-body {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.wishlist-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2f3542;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8rem;
}

.wishlist-date {
    font-size: 0.85rem;
    color: #a4b0be;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.wishlist-actions {
    margin-top: auto;
}

.btn-wishlist-view {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--cor-principal);
    color: #fff !important;
    text-decoration: none !important;
    padding: 12px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-wishlist-view:hover {
    filter: brightness(1.1);
    gap: 12px;
}

#headerMinhaConta #content {
    z-index: 1;
    text-align: left;
    padding: 0 5%;
    display: flex;
    margin: 0 auto;
    margin-top: 60px;
}

#headerMinhaConta h1 {
    color: #fff;
    font-weight: 700;
    margin: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.minhaConta #headerMinhaConta #userIcon {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.minhaConta #optionsUser {
    padding: 30px 15px;
    position: relative;
    top: -30px;
    z-index: 2;
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
}

.minhaConta #optionsUser div.col {
    display: flex;
    padding: 12px !important;
}

.minhaConta #optionsUser #option {
    width: 100%;
    background: #fff;
    border-radius: 20px;
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: none;
    box-shadow: 0 8px 30px rgba(0,0,0,0.05);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    height: 100%;
}

.minhaConta #optionsUser #option:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.minhaConta #optionsUser #option::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--cor-principal);
    opacity: 0;
    transition: 0.3s;
}

.minhaConta #optionsUser #option:hover::after {
    opacity: 1;
}

.minhaConta #optionsUser a {
    width: 100%;
    text-decoration: none;
}

.minhaConta #optionsUser #option #icone {
    background: rgba(0, 0, 0, 0.04);
    color: var(--cor-principal);
    font-size: 2.5rem;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    margin-bottom: 15px;
    border: none;
    transition: all 0.3s ease;
}

.minhaConta #optionsUser #option:hover #icone {
    background: var(--cor-principal);
    color: #fff;
    transform: scale(1.1);
}

.minhaConta #optionsUser #option p {
    font-weight: 600;
    color: #333;
    font-size: 1rem;
    line-height: 1.2;
    margin: 5px 0 0 0;
    text-align: center;
    transition: 0.3s;
}

.minhaConta #optionsUser #option:hover p {
    color: var(--cor-principal);
}

/* Sidebar e botões auxiliares */
#buttonsMinhaConta {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 5%;
    z-index: 10;
}

#btnSidebarMinhaConta {
    font-size: 15px;
    padding: 0;
    cursor: pointer;
    color: #fff;
    z-index: 2;
    display: flex;
    align-items: center;
    background: transparent;
    border: none;
}

#btnSidebarMinhaConta i {
    font-size: 30px;
}

#buttonsMinhaConta #sair {
    z-index: 5;
    position: relative;
}

#buttonsMinhaConta #sair a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.2em;
}

#buttonsMinhaConta #sair a:hover {
    opacity: 0.8;
}

.minhaConta .optionOwner {
    display: none;
}

#offcanvas {
    width: auto !important;
}

#offcanvas .nav-link {
    color: var(--cor-principal);
    font-weight: bold;
}

#offcanvas .nav-link:hover {
    filter: brightness(0.8);
}

#offcanvas #linkDashboard,
#offcanvas #linkAlterarSenha {
    display: none;
}

/* VENDOR DASHBOARD */
#titleDashboard{
    text-align: center;
    color: var(--cor-principal);
    font-weight: 900;
    margin-bottom: 30px;
    font-size: 30px;
}

#mainStoreManager{
    padding-top: 100px!important;
}

.toggle-sidebar-btn {
    font-size: 14px;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.1;
    font-family: inherit;
    color: var(--cor-principal);
    cursor: pointer;
    z-index: 996;
    position: fixed !important;
    top: 105px;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    padding: 8px 16px 8px 12px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    font-weight: 500;
}

.toggle-sidebar-btn .arrow-icon {
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    display: inline-block;
    transition: all 0.3s ease;
}

.toggle-sidebar-btn .toggle-text::before {
    white-space: pre-line;
}

/* Base logic for Desktop (Default is OPEN) */
@media (min-width: 1200px) {
    .toggle-sidebar-btn {
        left: 310px;
    }
    
    .toggle-sidebar .toggle-sidebar-btn {
        left: 20px;
    }

    .toggle-sidebar-btn .arrow-icon {
        border-right: 14px solid var(--cor-principal);
        border-left: none;
    }
    .toggle-sidebar-btn .toggle-text::before {
        content: "recolher\A menu";
    }

    .toggle-sidebar .toggle-sidebar-btn .arrow-icon {
        border-right: none;
        border-left: 14px solid var(--cor-principal);
    }
    .toggle-sidebar .toggle-sidebar-btn .toggle-text::before {
        content: "abrir\A menu";
    }
}

/* Base logic for Mobile (Default is CLOSED) */
@media (max-width: 1199px) {
    .toggle-sidebar-btn {
        left: 10px;
    }

    .toggle-sidebar-btn .arrow-icon {
        border-right: none;
        border-left: 14px solid var(--cor-principal);
    }
    .toggle-sidebar-btn .toggle-text::before {
        content: "abrir\A menu";
    }

    .toggle-sidebar .toggle-sidebar-btn .arrow-icon {
        border-left: none;
        border-right: 14px solid var(--cor-principal);
    }
    .toggle-sidebar .toggle-sidebar-btn {
        color: var(--cor-principal);
    }
    .toggle-sidebar .toggle-sidebar-btn .arrow-icon {
        border-right-color: var(--cor-principal);
    }
    .toggle-sidebar .toggle-sidebar-btn .toggle-text::before {
        content: "recolher\A menu";
    }
}


/* Sidebar vendor */
#sidebar {
    position: fixed;
    top: 90px;
    left: 20px;
    bottom: 20px;
    width: 280px;
    z-index: 996;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 24px 15px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
    background-color: #1a1c23; /* Dark floating */
    border-radius: 20px;
    margin-top: 15px;
}
  
@media (max-width: 1199px) {
    #sidebar {
        left: -320px;
    }
}
  
#sidebar::-webkit-scrollbar {
    width: 6px;
    height: 8px;
    background-color: transparent;
}
  
#sidebar::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
}
#sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.3);
}
  
@media (min-width: 1200px) {
    #mainStoreManager,
    #footerStoreManager {
        margin-left: 310px;
        width: calc(100vw - 310px);
    }
} 

@media (max-width: 1199px) {
    .toggle-sidebar #sidebar {
        left: 20px;
        z-index: 996;
        margin-top: 15px;
    }
}

@media (min-width: 1200px) {
    .toggle-sidebar #mainStoreManager,
    .toggle-sidebar #footerStoreManager {
        width: 100vw;
        margin-left: 0;
    }
  
    .toggle-sidebar #sidebar {
        left: -320px;
        margin-top: 15px;
    }
}
  
#sidebar-nav {
    padding: 0;
    margin: 0;
    list-style: none;
}
  
#sidebar-nav li {
    padding: 0;
    margin: 0;
    list-style: none;
}

#sidebar span {
    font-size: 11pt;
    letter-spacing: 0.3px;
}

#sidebar i {
    font-size: 13pt !important;
}
  
#sidebar-nav .nav-item {
    margin-bottom: 8px;
}

#sidebar-nav .nav-item li a {
    text-decoration: none;
}
  
#sidebar-nav .nav-heading {
    font-size: 11px;
    text-transform: uppercase;
    color: #6b7280;
    font-weight: 700;
    margin: 20px 0 10px 15px;
    letter-spacing: 1px;
}
  
#sidebar-nav .nav-link {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff !important;
    transition: all 0.3s ease;
    background: linear-gradient(90deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
    padding: 12px 16px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.03);
}
  
#sidebar-nav .nav-link i,
#sidebar-nav .nav-item i {
    font-size: 16px;
    margin-right: 14px;
    color: var(--verde-claro);
    transition: all 0.3s ease;
}
  
#sidebar-nav .nav-link.collapsed {
    color: #9ca3af !important;
    background: transparent;
    border: 1px solid transparent;
} 
  
#sidebar-nav .nav-link.collapsed i {
    color: #6b7280;
}
  
#sidebar-nav .nav-link:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.06);
    transform: translateX(6px);
}
  
#sidebar-nav .nav-link:hover i {
    color: var(--verde-claro);
    transform: scale(1.1);
}

#sidebar-nav .nav-link .bi-chevron-down {
    margin-right: 0;
    transition: transform 0.3s ease-in-out;
}
  
#sidebar-nav .nav-link:not(.collapsed) .bi-chevron-down {
    transform: rotate(180deg);
}

#sidebar-nav .nav-content {
    padding: 6px 0;
    margin: 0;
    list-style: none;
    background: rgba(0,0,0,0.15);
    border-radius: 10px;
    margin-top: 4px;
}
  
#sidebar-nav .nav-content a {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 500;
    color: #9ca3af;
    transition: all 0.3s ease;
    padding: 10px 0 10px 48px;
    border-radius: 8px;
}

#sidebar-nav .nav-content #subMenuLoja {
    padding: 10px 0 10px 65px;
}
  
#sidebar-nav .nav-content a i {
    font-size: 6px;
    margin-right: 12px;
    line-height: 0;
    border-radius: 50%;
    color: #4b5563;
}
  
#sidebar-nav .nav-content a:hover,
#sidebar-nav .nav-content a.active {
    color: var(--verde-claro);
    transform: translateX(4px);
}

#sidebar-nav #usuariosMenu,
#sidebar-nav #npsMenu{
    display: none;
}

/* Configuração Loja */
#minhaLoja{
    width: 90%;
    margin: 0 auto;
}

#minhaLoja label{
    margin-top: 20px;
}

#minhaLoja #divEnderecoLoja,
#minhaLoja #divCabecalhoLoja,
#minhaLoja #divRedesSociais,
#minhaLoja #divPlano,
#minhaLoja #metaPixelTagManager{
    margin-top: 50px;
}

#minhaLoja #divDadosBasicos a{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

#minhaLoja #divDadosBasicos #iconeLoja,
#previewImageAlterarImagem{
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 100px;
    padding: 0;
    border: 1px solid #ccc;
}

#previewImageAlterarImagem{
    margin-bottom: 10px;
}

#minhaLoja #divDadosBasicos #btnRemoverIcone{
    margin-top: 10px;
}

#minhaLoja #divDadosBasicos #btnAlterarIcone{
    background-color: var(--cor-secundaria);
    color: #000;
    margin-top: 10px;
}

#minhaLoja #divDadosBasicos #btnAlterarIcone:hover{
    filter: brightness(0.8);
}

#minhaLoja #divDadosBasicos #imgLoja {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#minhaLoja #divDadosBasicos label{
    margin-top: 20px;
    margin-bottom: 5px;
}

#minhaLoja #divPlano p{
    font-weight: bold;
}

#minhaLoja #divPlano #subCancelada{
    display: none;
}

#minhaLoja h2{
    color: #000;
}

#minhaLoja #divPlano p span{
    font-weight: normal;
}

#minhaLoja #divEnderecoLoja input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#minhaLoja #btnSalvarAlteracoes{
    float: right;
    background-color: var(--cor-secundaria);
    color: #000;
    margin-top: 30px;
}

#minhaLoja #btnSalvarAlteracoes:hover{
    filter: brightness(0.8);
}

#minhaLoja #iconErroSlug, 
#minhaLoja p.slugInvalid{
    color: red;
}

#minhaLoja #iconOkSlug, p.slugValid{
    color: var(--verde-escuro);
}

#minhaLoja p#pLinkLoja{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#minhaLoja #divCorLoja{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#minhaLoja #demoCabecalho{
    width: 80%;
    height: 70px;
    background-color: #000;
    color: #fff;    
    margin: 0 auto;    
    margin-top: 20px;
    display: flex;
    align-items: center;
}

#minhaLoja #demoCabecalho #imgCabecalhoPreview{
    width: 125px;
    max-height: 65px;
    object-fit: contain;
    margin-right: 50px;
}

#minhaLoja #colButtonsCabecalho{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Cadastro de produto - Cadastro de Loja */
#divCadastroProduto,
#divCadastroLoja{
    text-align: center;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
}

#divCadastroProduto .step,
#divCadastroLoja .step{
    display: none;
}

#divCadastroProduto #formCadastroProd,
#divCadastroLoja #formCadastroLoja{
    width: 90%;
    border: 4px var(--verde-claro) solid;
    padding: 35px;
    border-radius: 0.375em;
}

#divCadastroProduto #formCadastroProd .step,
#divCadastroLoja #formCadastroLoja .step{ 
    text-align: left;
    width: 100%;
}

#divCadastroProduto #formCadastroProd #indicadorObrigatorio,
#divCadastroLoja #formCadastroLoja #indicadorObrigatorio{
    color: red;
    font-weight: bold;
}

#divCadastroProduto #formCadastroProd #buttonsForm,
#divCadastroLoja #formCadastroLoja #buttonsForm{
    display: flex;
    justify-content: space-between;
}

#divCadastroProduto #formCadastroProd #stepTitle,
#divCadastroLoja #formCadastroLoja #stepTitle{
    font-size: 20px;
    color: #000;
    font-weight: bolder;
}

#divCadastroProduto #formCadastroProd #buttonsForm #nextBtn,
#divCadastroProduto #formCadastroProd #buttonsForm #previewBtn,
#divCadastroLoja #formCadastroLoja #buttonsForm #nextBtn{
    background-color: var(--cor-principal);
    color: #fff;
}

#divCadastroProduto #formCadastroProd #buttonsForm #submitBtn,
#divCadastroLoja #formCadastroLoja #buttonsForm #submitBtn{
    background-color: var(--cor-principal);
    color: #fff;
    display: none;
}

#divCadastroLoja.subloja #formCadastroLoja #buttonsForm #nextBtn,
#divCadastroLoja.subloja #formCadastroLoja #buttonsForm #submitBtn{
    background-color: var(--cor-principal);
    color: #fff;
}

#divCadastroProduto #formCadastroProd #buttonsForm #buttonsFinalizar{
    display: flex;
    justify-content: center;
}

@media (max-width: 464px) {
    #divCadastroProduto #formCadastroProd #buttonsForm #buttonsFinalizar{
        flex-direction: column;
    }

    #divCadastroProduto #formCadastroProd #buttonsForm{
        flex-direction: column;
    }

    #divCadastroProduto #formCadastroProd #buttonsForm #buttonsFinalizar button,
    #divCadastroProduto #formCadastroProd #buttonsForm button{
        margin: 5px auto;
        width: 100%;
    }
}

#divCadastroProduto #formCadastroProd #buttonsForm #previewBtn{
    margin-right: 10px;
}

#divCadastroProduto #codigoInternoProduto{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

#divCadastroProduto #divCodigoInterno{
    display: flex;
}

#divCadastroProduto #btnGerarCodigoInterno{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: var(--cor-secundaria);
    color: #000;
}

#passosCadastro{
    text-align: center;
}

#divCadastroProduto #stepIndicators,
#divCadastroLoja #stepIndicators,
#passosCadastro #stepIndicators{
    display: flex;
}

@media (max-width: 800px) {
    #divCadastroProduto #stepIndicators,
    #divCadastroLoja #stepIndicators{
        display: none;
    }

    #passosCadastro #stepIndicators{
        font-size: 11px;
    }
}

#divCadastroProduto .form-header .stepIndicator,
#divCadastroLoja .form-header .stepIndicator,
#passosCadastro .stepIndicator {
    position: relative;
    flex: 1;
    padding-bottom: 30px;
    transition: 0.2s;
}

.stepIndicator.clicavel:hover{
    cursor: pointer;
}

#divCadastroProduto .form-header .stepIndicator.active,
#divCadastroLoja .form-header .stepIndicator.active,
#passosCadastro .stepIndicator.active {
    font-weight: 600;
}

#divCadastroProduto .form-header .stepIndicator.finish,
#divCadastroLoja .form-header .stepIndicator.finish,
#passosCadastro .stepIndicator.finish {
    font-weight: 600;
    color: #009688;
}

#divCadastroProduto .form-header .stepIndicator::before,
#divCadastroLoja .form-header .stepIndicator::before,
#passosCadastro .stepIndicator::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9;
    width: 20px;
    height: 20px;
    background-color: #d5efed;
    border-radius: 50%;
    border: 3px solid #ecf5f4;
    transition: 0.2s;
}

.stepIndicator.clicavel:hover::before{
    filter: brightness(0.8);
}

#divCadastroProduto .form-header .stepIndicator.active::before,
#divCadastroLoja .form-header .stepIndicator.active::before,
#passosCadastro .stepIndicator.active::before {
    background-color: #a7ede8;
    border: 3px solid #d5f9f6;
}

#divCadastroProduto .form-header .stepIndicator.finish::before,
#divCadastroLoja .form-header .stepIndicator.finish::before,
#passosCadastro .stepIndicator.finish::before{
    background-color: #009688;
    border: 3px solid #b7e1dd;
}

#divCadastroProduto .form-header .stepIndicator::after,
#divCadastroLoja .form-header .stepIndicator::after,
#passosCadastro .stepIndicator::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 100%;
    height: 3px;
    background-color: #f3f3f3;
}

#divCadastroProduto .form-header .stepIndicator.active::after,
#divCadastroLoja .form-header .stepIndicator.active::after,
#passosCadastro .stepIndicator.active::after {
    background-color: #a7ede8;
}

#divCadastroProduto .form-header .stepIndicator.finish::after,
#divCadastroLoja .form-header .stepIndicator.finish::after,
#passosCadastro .stepIndicator.finish::after{
    background-color: #009688;
}

#divCadastroProduto .form-header .stepIndicator:last-child:after,
#divCadastroLoja .form-header .stepIndicator:last-child:after {
    display: none;
}

#divCadastroProduto .file-input{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#divCadastroProduto .btn-file{
    order: 1;
}

#divCadastroProduto .file-preview{
    order: 2;
}

#divCadastroProduto .input-group.file-caption-main{
    display: none;
}
#divCadastroProduto .close.fileinput-remove{
    display: none;
}


#divCadastroProduto .file-input-ajax-new{
    display: inline-block;
}
#divCadastroProduto .file-input.theme-fas{
    display: inline-block;
    width: 100%;
}
#divCadastroProduto .file-preview{
    padding: 0px;
    border: none;
    display: inline;

}
#divCadastroProduto .file-footer-caption{
    display: none !important;
}

#divCadastroProduto .file-upload-indicator{
    display: none;
}

#divCadastroProduto .file-thumbnail-footer{
    display: block;
    position: absolute;
    top: -10px;
    right: -10px;
    margin-top: 0;
}

#divCadastroProduto .kv-file-content{
    height: auto;
}

#divCadastroProduto .kv-file-remove{
    border-radius: 50%;
    z-index: 1;
    text-align: center;
    color: #fff;
    background-color: #ed3237;
    border: 1px solid #ed3237;
    padding: 2px 6px;
    font-size: 11px;
    transition: 0.5s;
}

#divCadastroProduto .kv-preview-thumb img{
    width: 150px!important;
    height: 150px!important;
    display: flex;
    object-fit: contain;
    text-align: center;
    align-items: center;
}

#divCadastroProduto .krajee-default.file-preview-frame .kv-file-content{
    width: auto;
    height: auto;
}

#divCadastroProduto #localizacaoProduto{
    display: none;
    padding: 0;
    margin: 0 auto;
}

@media (max-width: 767px){
    #divCadastroProduto #localizacaoProduto > div{
        padding: 0;
    }
}

#divCadastroProduto #localizacaoProduto input{
    margin-top: 10px;
    border-radius: 0.375em;
}

#divCadastroLoja #dadosPessoaJuridica label,
#divCadastroLoja #localizacaoLoja label{
    margin-top: 10px;
}

#divCadastroProduto input[readonly],
#divCadastroLoja input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#divCadastroProduto form select.invalid + .select2-container .select2-selection--single,
#divCadastroProduto form input.invalid,
#divCadastroProduto form select.invalid,
#divCadastroLoja form select.invalid + .select2-container .select2-selection--single,
#divCadastroLoja form input.invalid  {
    border: 1px red solid;
}

#divCadastroProduto #buttonsForm,
#divCadastroLoja #buttonsForm{
    margin-top: 20px;
}

#divCadastroProduto #avisoMelhorEnvio,
#divCadastroProduto #avisoMelhorEnvio a{
    text-align: center;
    color: var(--verde-escuro) !important;
}

#divCadastroProduto #precoVendaSugerido{
    margin: 0 auto;
    display: none;
    justify-content: center;
    color: #000;
}

#divCadastroProduto #divMarca,
#divCadastroProdReservave #divMarca{
    display: flex;
}

#divCadastroProduto #divMarca #btnAddMarca,
#divCadastroProdReservave #divMarca #btnAddMarca{
    background-color: var(--cor-secundaria);
    margin-left: 5px;
}

#divCadastroProduto #divMarca #btnAddMarca:hover,
#divCadastroProdReservave #divMarca #btnAddMarca:hover{
    filter: brightness(0.8);
}

#divCadastroProduto #divBtnIA{
    display: flex;
    justify-content: flex-end;
    text-align: right;
}

#divCadastroProduto #divBtnIA button{
    background: linear-gradient(90deg, rgba(115, 0, 105, 1) 0%, rgba(217, 98, 207, 1) 100%);
    color: #fff;
    width: auto;
    border: none;
}

#divCadastroProduto #divBtnIA #pUsosIA{
    margin: 0;
    padding: 0;
    color: #333;
}

#divCadastroLoja h1{
    margin-top: 20px;
    font-weight: bold;
    color: var(--cor-principal);
}

#divCadastroLoja #titleCadastroSubLoja{
    color: var(--cor-principal);
}

#divCadastroProduto #btnPrecoSimilares{
    margin: 0 auto;
    display: flex;
    margin-bottom: 25px;
    background-color: var(--cor-principal);
    color: #fff;
}

#divCadastroProduto #btnPrecoSimilares:hover{
    filter: brightness(0.8);
}

#divCadastroLoja h1{
    margin-top: 20px;
    font-weight: bold;
    color: var(--cor-principal);
}

#divCadastroLoja #divCorLoja{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 30px!important;
}

#divCadastroLoja #divLogoLoja{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30px;
}

#divCadastroLoja #imgLogoLoja{
    width: 200px;
    height: 200px;
    object-fit: cover;
    border: 1px solid #000;
    border-radius: 100%;
    margin-bottom: 10px;
}

#divCadastroLoja #imgLogoLoja:hover{
    cursor: pointer;
}

#divCadastroLoja #iconErroSlug, 
#divCadastroLoja p.slugInvalid{
    color: red;
}

#divCadastroLoja #iconOkSlug, p.slugValid{
    color: var(--verde-escuro);
}

#divCadastroLoja #linkLoja{
    text-align: center;
}

/* LAYOUT LOJA */
#layoutLoja{
    margin: 0;
    padding: 0;
}

/* ### PLANOS DE ASSINATURA */
#divSwitchButton{
    display: flex;
}

#divSwitchButton .form-check-input:checked {
    background-color: var(--cor-principal);
    border-color: var(--cor-principal);
}

#divPlanosDeAssinatura{
    padding-top: 20px;
    text-align: center;
}

#divPlanosDeAssinatura h1{
    font-weight: 900;
    color: #000;
}

#divPlanosDeAssinatura{
    width: 90%;
    margin: 20px auto;
}

#divPlanosDeAssinatura #plano{
    margin-top: 20px;
}

#divPlanosDeAssinatura #plano .card-header{
    color: #fff;
    font-weight: 900;
}


#divPlanosDeAssinatura #plano .list-group .col-9{
    display: flex;
    align-items: center;
    justify-content: center;
}

#divPlanosDeAssinatura #plano .list-group .col-4,
#divPlanosDeAssinatura #plano .list-group .col-3{
    display: flex;
    vertical-align: middle;
    align-items: center;
    justify-content: center;
}


#divPlanosDeAssinatura #plano .list-group .col-4.possui,
#divPlanosDeAssinatura #plano .list-group .col-4.possui svg,
#divPlanosDeAssinatura #plano .list-group .col-3.possui,
#divPlanosDeAssinatura #plano .list-group .col-3.possui svg{
    color: var(--cor-principal);
}


#divPlanosDeAssinatura #plano .list-group .col-4.naoPossui,
#divPlanosDeAssinatura #plano .list-group .col-4.naoPossui svg,
#divPlanosDeAssinatura #plano .list-group .col-3.naoPossui,
#divPlanosDeAssinatura #plano .list-group .col-3.naoPossui svg{
    color: red;
}

#divPlanosDeAssinatura #plano .card-title small{
    color: #666;
    font-weight: 400;
    margin-top: 10px;
    font-size: 14px;
}

#divPlanosDeAssinatura #plano #btnExplicacao{
    padding: 0;
}

#divPlanosDeAssinatura #planoStarter,
#divPlanosDeAssinatura #planoEssential,
#divPlanosDeAssinatura #planoGrowth,
#divPlanosDeAssinatura #planoScale,
#divPlanosDeAssinatura #planoExecutive{
    background-color: var(--cor-principal);
}

#divPlanosDeAssinatura #robo img{
    width: 200px;
}

#divPlanosDeAssinatura #btnPlanoStarter,
#divPlanosDeAssinatura #btnPlanoEssential,
#divPlanosDeAssinatura #btnPlanoScale,
#divPlanosDeAssinatura #btnPlanoExecutive{
    background-color: var(--cor-principal);
    color: #fff;
    border: none;
    margin-bottom: 10px;
    transition: 0.2s;
}

#divPlanosDeAssinatura #btnPlanoStarter:hover,
#divPlanosDeAssinatura #btnPlanoEssential:hover,
#divPlanosDeAssinatura #btnPlanoScale:hover,
#divPlanosDeAssinatura #btnPlanoExecutive:hover{
    filter: brightness(0.8);
    color: #fff;
}

#divPlanosDeAssinatura #divPlanos .list-group-item{
    display: flex;
}

#divPlanosDeAssinatura #divPlanos .itensOcultos{
    display: none;
}

#divPlanosDeAssinatura #btnPlanoGrowth{
    background-color: #fff;
    color: #000;
    border: none;
    margin-bottom: 10px;
}


#divPlanosDeAssinatura #btnPlanoGrowth:hover{
    background-color: #ccc;
}

#divPlanos section.pricing {
    /* background: #007bff; */
    /* background: linear-gradient(to right, #0062E6, #33AEFF); */
}

#divPlanos .pricing .card {
    border: none;
    border-radius: 1rem;
    transition: all 0.2s;
    box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}

#divPlanos .pricing .recomendado .card{
    background-color: var(--cor-principal);
}

#divPlanos .pricing .recomendado .card ul,
#divPlanos .pricing .recomendado .card ul li{
    background-color: var(--cor-principal);
}

#divPlanos .pricing .recomendado .list-group .col-3.possui,
#divPlanos .pricing .recomendado .list-group .col-3.possui svg{
    color: #fff!important;
}


#divPlanos .pricing hr {
    margin: 1.5rem 0;
}
  
#divPlanos .pricing .card-title {
    margin: 0.5rem 0;
    font-size: 0.9rem;
    letter-spacing: .1rem;
    font-weight: bold;
}
  
#divPlanos .pricing .card-price {
    font-size: 1.5rem;
    margin: 0;
    line-height: 0.7;
    font-weight: bold;
}
  
#divPlanos .pricing .card-price .period {
    font-size: 0.8rem;
    font-weight: normal;
}
  
#divPlanos .pricing ul li {
    margin-bottom: 1rem;
}
  
#divPlanos .pricing .text-muted {
    opacity: 0.7;
}

#divPlanos .pricing .recomendado .text-muted{
    color: #fff!important;
    opacity: 1;
}
  
#divPlanos .list-group-item{
    border: none;
    border-bottom: var(--bs-list-group-border-width) solid var(--bs-list-group-border-color);
}

#divPlanos .pricing .recomendado .card ul .list-group-item{
    border-bottom: var(--bs-list-group-border-width) solid #fff;
}

#divPlanos .pricing .btn {
    font-size: 80%;
    border-radius: 5rem;
    letter-spacing: .1rem;
    font-weight: bold;
    padding: 1rem;
    /* opacity: 0.7; */
    transition: all 0.2s;
}
  
/* Hover Effects on Card */
@media (min-width: 992px) {
    #divPlanos .pricing .card:hover {
      margin-top: -.25rem;
      margin-bottom: .25rem;
      box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.3);
    }

    #divPlanos .pricing .recomendado:hover::before {
        top: -25px; /* Move um pouco mais para cima */
        background: #e68900; /* Cor ligeiramente mais escura para destaque */
        /* box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4); Sombra mais forte */
        transition: all 0.3s ease-in-out;
    }
}

#divPlanos .recomendado {
    position: relative;
}

#divPlanos .recomendado::before {
    content: "Recomendado";
    position: absolute;
    top: -21px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff9800;
    color: white;
    font-weight: bold;
    padding: 5px 15px;
    border-radius: 5px;
    font-size: 14px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

#modalMudarPlano #divPlanos .recomendado::before{
    display: none;
}

#modalMudarPlano #divPlanos .pricing .btn{
    border-radius: 0.375em;
    letter-spacing: 0;
    padding: 5px;
}

#modalMudarPlano #divPlanos #explicacaoPlano{
    font-size: 0.9rem;
}

#modalMudarPlano #divPlanos #precoDe{
    font-size: 12px;
}

#modalMudarPlano #divPlanos .pricing .card-price{
    font-size: 1rem;
}

#modalMudarPlano .fa-ul{
    font-size: 13px;
}

#modalMudarPlano #divPlanos .pricing ul li{
    margin-bottom: 0;
}

#modalMudarPlano #divPlanos .pricing hr{
    margin: 0;
}

#divPlanos #explicacaoPlano{
    font-weight: bold;
    color: var(--cor-principal);
    margin-bottom: 20px;
}

#divPlanos .recomendado #explicacaoPlano{
    color: #fff;
}

@media (max-width: 1108px) {
    #divPlanos.mobile{
        display: block;
    }

    #divPlanos.desktop{
        display: none;
    }
}

@media (min-width: 1109px) {
    #divPlanos.mobile{
        display: none;
    }

    #divPlanos.desktop{
        display: block;
    }
}

#divPlanos.desktop tr{
    text-align: center;
    vertical-align: middle;
}

#divPlanos.desktop th{
    width: 16.66%;
}

#divPlanos.desktop th #headPlan{
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-radius: 10px;
    flex-direction: column;
    height: 300px;
}

#divPlanos.desktop td{
    padding: 10px;
}

#divPlanos.desktop td span{
    background-color: #fff;
    display: flex;
    justify-content: center;
    padding: 10px;
    border-radius: 10px;
}

#divPlanos.desktop .growth #headPlan,
#divPlanos.desktop  td.growth span{
    background-color: var(--cor-principal);
}

#divPlanos.desktop .growth #explicacaoPlano{
    color: #fff!important;
}

#divPlanos.desktop #headPlan .card-price {
    font-size: 1.5rem;
    margin: 0;
    line-height: 0.7;
    font-weight: bold;
}

#divPlanos.desktop #headPlan .card-price .period{
    font-size: 0.8rem;
    font-weight: normal;
}

#divPlanos.desktop td.possui span{
    color: green;
}

#divPlanos.desktop td.naoPossui span{
    color: red;
}

#divPlanos.desktop .growth.possui span{
    color: #fff;
}

#divPlanos.desktop #headPlan #precoDe{
    font-weight: 400;
    font-size: 12px;
    margin-bottom: 0;
    color: lightcoral
}

#divPlanos.desktop .growth #headPlan #precoDe{
    color: coral;
}

#divPlanos.desktop tr.categoria th{
    color: #000;
    font-size: 20px;
    text-align: left;
    padding-top: 30px;
    font-weight: bold;
}

#divPlanos.desktop tbody th{
    font-weight: 400;
}


/* ### PAGINA 404 ### */
#pagina404{
    width: 90%;
    margin: 20px auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

#pagina404 #conteudo{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#pagina404 h1{
    text-align: center;
    color: var(--cor-principal);
    font-weight: bold;
}

#pagina404 img{
    width: 100%;
    max-width: 900px;
}

/* ### CONFIG MELHOR ENVIO ### */
#melhorEnvioNaoConectado,
#melhorEnvioConectado{
    text-align: center;
    margin-top: 0;
    padding: 20px;
    display: none;
}

#melhorEnvioNaoConectado i,
#melhorEnvioNaoConectado svg{
    font-size: 40pt;
    color: #ff0000!important;
}

#melhorEnvioNaoConectado p#melhorEnvioNaoConectado{
    color: #ff0000!important;
    font-weight: bold;
    font-size: 15pt;
    display: block;
    margin: 0;
    padding: 10px;
}

#melhorEnvioConectado i,
#melhorEnvioConectado svg{
    font-size: 70pt;
    color: #17c43a!important;
    margin: 20px;
}

#melhorEnvioConectado p#melhorEnvioConectado{
    color: #17c43a!important;
    font-weight: bold;
    font-size: 15pt;
    display: block;
    margin: 0;
}

#linkMelhorEnvioConnect button{
    background-color: var(--cor-secundaria);
    margin-top: 10px;
    margin-bottom: 10px;
}

#linkMelhorEnvioConnect:hover button{
    filter: brightness(0.8);
}

#linkMelhorEnvioConnect button,
#linkMelhorEnvioConnect button:hover,
#linkMelhorEnvioConnect,
#linkMelhorEnvioConnect:hover{
    color: #000!important;
    text-decoration: none;
}

#linkMelhorEnvioConnect button img {
    height: 30px;
    margin-left: -5px;
    filter: invert(100%);
}


/* PAGINA DE BUSCA */
#paginaBusca{
    width: 90%;
    margin: 30px auto;
}

#paginaBusca h1{
    font-size: 25px;
    color: var(--cor-principal);
    font-weight: bold;
    text-align: center;
}

#paginaBusca #resultadosBusca #noResults{
    text-align: center;
    font-weight: bold;
    font-size: 20px;
    color: var(--cor-principal);
}

#paginaBusca #buscaProdutos #buscaProd{
    width: 85%;
    margin: 0 auto;
}

#paginaBusca #buscaProdutos #formBuscaProd{
    display: flex;
}

#paginaBusca #buscaProdutos #buscaCategorias,
#paginaBusca #buscaProdutos #buscaCategorias + .select2-container .select2-selection--single,
#paginaBusca #buscaProdutos #buscaSubcategorias,
#paginaBusca #buscaProdutos #buscaSubcategorias + .select2-container .select2-selection--single{
    margin-bottom: 10px;
    border: 1px solid #000;
}

#paginaBusca #buscaProdutos #buscaProd #inputBusca{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: 1px solid #000;
    border-right-color: var(--cor-secundaria);
}

#paginaBusca #buscaProdutos #buscaProd #btnBusca{
    background-color: var(--cor-secundaria);
    border-left-color: var(--cor-secundaria);
    border: 1px solid #000;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    transition: 0.2s;
}

#paginaBusca #buscaProdutos #buscaProd #btnBusca:hover{
    filter: brightness(0.8);
}

#paginaBusca #resultadosBusca{
    /* width: 95%; */
    margin: 0 auto;
}

#produtosRelacionados #itemProduto a,
#listaSimilares #itemProduto a,
#paginaBuscaReserva #resultadoBusca a,
#paginaBuscaReserva #resultadosPlataforma a,
#modalMarker #produtosModal a,
#paginaBusca #resultadosBusca #produtos a{
    text-decoration: none;
}

#produtosRelacionados,
#paginaBuscaReserva #resultadoBusca,
#modalMarker #produtosModal,
#paginaBusca #resultadosBusca #produtos{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

#paginaBuscaReserva #resultadoBusca h1,
#paginaBuscaReserva #resultadosPlataforma h1,
#modalMarker #produtosModal h1,
#paginaBusca #resultadosBusca #produtos h1{
    text-align: center;
    font-weight: 800;
    color: #000;
    font-size: 20px;
}

#listaSimilares #itemProduto,
#produtosRelacionados #itemProduto,
#paginaBuscaReserva #resultadoBusca #itemProduto,
#paginaBuscaReserva #resultadosPlataforma #itemProduto,
#modalMarker #produtosModal #itemProduto,
#paginaBusca #resultadosBusca #produtos #itemProduto{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px;
    transition: transform 0.3s ease;
}

#listaSimilares #itemProduto:hover,
#produtosRelacionados #itemProduto:hover,
#paginaBuscaReserva #resultadoBusca #itemProduto:hover,
#paginaBuscaReserva #resultadosPlataforma #itemProduto:hover,
#modalMarker #produtosModal #itemProduto:hover,
#paginaBusca #resultadosBusca #produtos #itemProduto:hover{
    transform: scale(1.1);
    cursor: pointer;
}

#listaSimilares #itemProduto #imgProduto,
#produtosRelacionados #itemProduto #imgProduto,
#paginaBuscaReserva #resultadoBusca #itemProduto #imgProduto,
#paginaBuscaReserva #resultadosPlataforma #itemProduto #imgProduto,
#modalMarker #produtosModal #itemProduto #imgProduto,
#paginaBusca #resultadosBusca #produtos #itemProduto #imgProduto{
    width: 100%;
    aspect-ratio: 9 / 12;
    object-fit: cover;
    border-radius: 0.375em;

}

#listaSimilares #itemProduto #nomeProduto,
#produtosRelacionados #itemProduto #nomeProduto,
#paginaBuscaReserva #resultadoBusca #itemProduto #nomeProduto,
#paginaBuscaReserva #resultadosPlataforma #itemProduto #nomeProduto,
#modalMarker #produtosModal #itemProduto #nomeProduto,
#paginaBusca #resultadosBusca #produtos #itemProduto #nomeProduto{
    color: #000;
    font-size: 20px;
    font-weight: bold;
    margin-top: 5px;
}

#listaSimilares #itemProduto #precoProduto,
#produtosRelacionados #itemProduto #precoProduto,
#paginaBuscaReserva #resultadoBusca #itemProduto #precoProduto,
#paginaBuscaReserva #resultadosPlataforma #itemProduto #precoProduto,
#modalMarker #produtosModal #itemProduto #precoProduto,
#paginaBusca #resultadosBusca #produtos #itemProduto #precoProduto{
    color: var(--cor-principal);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#paginaBusca #limparBusca{
    display: flex;
    justify-content: flex-end;
}

#paginaBusca #paginacaoControls{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

#paginaBusca #paginacaoControls button {
    margin: 5px;
    background-color: var(--cor-principal);
    padding: 10px;
    border-radius: 0.375em;
    color: #fff;
    font-weight: bold;
}

#paginaBusca #paginacaoControls button.active{
    filter: brightness(0.8);
}

#paginaBusca #nomeLojaBusca a{
    color: var(--cor-principal)!important;
    transition: 0.2s;
}

#paginaBusca #nomeLojaBusca a:hover{
    filter: brightness(0.8);
}

/* DATATABLES */

#dataTableProdutos,
#dataTableMercados,
#dataTableUsuarios, 
#dataTablePedidos,
#dataTableCupons,
#dataTableNPS,
#dataTableDisputas,
#dataTablePosts,
#dataTableCategorias,
#dataTablePDV,
#dataTableInventarios,
#minhaLista,
#dataTableSacolinha,
#dataTablePainelLojas,
#dataTableAgendamentos,
#dataTableServicos,
#dataTableConsignado{
    width: 95%;
    margin: 0 auto;
}

#dataTableProdutos #tableProdutos_wrapper,
#dataTableMercados #tableMercados_wrapper,
#dataTableUsuarios #tableUsuarios_wrapper,
#dataTablePedidos #tablePedidos_wrapper,
#dataTableCupons #tableCupons_wrapper,
#dataTableNPS #tableNPS_wrapper,
#dataTableDisputas #tableDisputas_wrapper,
#dataTablePosts #tablePosts_wrapper,
#dataTableCategorias #tableCategorias_wrapper,
#dataTablePDV #tablePDV_wrapper,
#dataTableInventarios #tableInventarios_wrapper,
#minhaLista #listaDesejos_wrapper,
#dataTableSacolinha #tableSacolinha_wrapper,
#dataTablePainelLojas #tablePainelLojas_wrapper,
#dataTableAgendamentos #tableAgendamentos_wrapper,
#dataTableServicos #tableAgendamentos_wrapper,
#dataTableConsignado #tableConsignado_wrapper{
    overflow-x: auto;
}

#dataTableProdutos table,
#dataTableProdutos table th,
#dataTableMercados table,
#dataTableMercados table th,
#dataTableUsuarios table,
#dataTableUsuarios table th,
#dataTablePedidos table,
#dataTablePedidos table th,
#dataTableCupons table,
#dataTableCupons table th,
#dataTableNPS table,
#dataTableNPS table th,
#dataTableDisputas table,
#dataTableDisputas table th,
#dataTablePosts table,
#dataTablePosts table th,
#dataTableCategorias table,
#dataTableCategorias table th,
#dataTablePDV table,
#dataTablePDV table th,
#dataTableInventarios table,
#dataTableInventarios table th,
#minhaLista table,
#minhaLista table th,
#dataTableSacolinha table,
#dataTableSacolinha table th,
#dataTablePainelLojas table,
#dataTablePainelLojas table th,
#dataTableAgendamentos table,
#dataTableAgendamentos table th,
#dataTableServicos table,
#dataTableServicos table th,
#dataTableConsignado table,
#dataTableConsignado table th{
    text-align: center;
}

#dataTableNPS #npsMedio{
    font-size: 20px;
    font-weight: bold;
    color: #000;
    padding: 20px;
}

#dataTableProdutos a,
#dataTablePedidos a{
    color: var(--cor-principal);
    transition: 0.2s;
}

#dataTablePedidos a:hover{
    filter: brightness(0.8);
}

#dataTableProdutos #btnAddProduto,
#dataTableProdutos #btnAddProdutoAssistente,
#dataTableProdutos #btnImprimirEtiqueta,
#dataTableProdutos #importarCSV,
#dataTablePedidos #btnVerPedidos,
#dataTableProdutos #btnVerPedidos,
#dataTableCupons #btnAddCupom,
#dataTablePosts #btnAddPost,
#dataTableInventarios #btnAddInventario,
#dataTableCategorias #btnAddCategoria,
#dataTableSacolinha #btnAddSacolinha,
#dataTablePainelLojas #btnVerDetalhes,
#dataTableAgendamentos #btnVerModoAgenda,
#dataTableAgendamentos #btnVerModoTabela,
#dataTableServicos #btnAddServico,
#dataTablePDV #btnNovoPdv{
    border-radius: 0.375em;
    float: right;
    background-color: var(--cor-principal);
    margin-bottom: 30px;
    color: #fff;
    transition: 0.2s;
}

#dataTableProdutos #exportarCsv{
    border-radius: 0.375em;
    background-color: var(--cor-principal);
    margin-bottom: 30px;
    color: #fff;
}

#dataTableProdutos #buttons{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
}

#dataTableProdutos #btnAddProduto:hover,
#dataTableProdutos #btnAddProdutoAssistente:hover,
#dataTableProdutos #btnImprimirEtiqueta:hover,
#dataTableProdutos #importarCSV:hover,
#dataTablePedidos #btnVerPedidos:hover,
#dataTableCupons #btnAddCupom:hover,
#dataTablePosts #btnAddPost:hover,
#dataTableInventarios #btnAddInventario:hover,
#dataTableCategorias #btnAddCategoria:hover,
#dataTableSacolinha #btnAddSacolinha:hover,
#dataTablePainelLojas #btnVerDetalhes:hover,
#dataTableAgendamentos #btnVerModoAgenda:hover,
#dataTableAgendamentos #btnVerModoTabela:hover,
#dataTableServicos #btnAddServico:hover,
#dataTablePDV #btnNovoPdv:hover{
    filter: brightness(0.8);
}

#modalAlterarEstoque #formEstoque label{
    margin-top: 10px;
}

#modalAlterarEstoque #modalAlterarEstoqueLabel,
#modalVerLogEstoque #modalVerLogEstoqueLabel {
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

#modalAlterarEstoque #btnAlterarEstoque{
    background-color: var(--cor-principal);
    color: #fff;
    transition: 0.2s;
}

#modalAlterarEstoque #btnAlterarEstoque:hover{
    filter: brightness(0.8);
}

#modalAlterarEstoque .modal-footer{
    display: flex;
    justify-content: space-between;
}

#modalAlterarEstoque #descEstoque{
    text-align: center;
    margin-top: 20px;
}

#modalAlterarEstoque #descEstoque span{
    color: var(--cor-principal);
}

#modalAlterarEstoque input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#modalVerLogEstoque table,
#modalVerLogEstoque table th{
    text-align: center;
}

#modalVerLogEstoque table td{
    vertical-align: middle;
}

#modalVerLogEstoque table #movimentacao.negative{
    color: red;
}

#modalVerLogEstoque table #movimentacao.positive{
    color: var(--cor-principal);
}

#filtrosTabela{
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

#filtrosTabela #button{
    text-align: right;
}

#dataTablePosts #fotoCapa{
    max-width: 100px;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center center;
}

/* Cadastro Pedido e Cupom */
#modalCadastrarPedido label,
#modalCadastrarCupom label,  
#modalEditarCupom label{
    margin-top: 10px;
}

#modalCadastrarPedido .select2-selection--single,
#modalCadastrarCupom .select2-selection--single,
#modalCadastrarCupom .select2-selection--multiple,
#modalEditarCupom .select2-selection--multiple{
    height: 38px;
    border-radius: 0.375em;
    padding-left: 5px;
    padding-bottom: 10px;
    padding-top: 5px;
    border: var(--bs-border-width) solid var(--bs-border-color);
}

#modalCadastrarPedido .select2-selection__arrow,
#modalCadastrarCupom .select2-selection__arrow,
#modalEditarCupom .select2-selection__arrow{
    margin-top: 5px;    
}

#modalCadastrarPedido #btnAddProdutoPedido{
    float: right;
    margin: 20px 0px;
    background-color: var(--cor-principal);
    color: #fff;
}

#modalCadastrarPedido #buttonsProdutoPedido{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

#modalCadastrarPedido table{
    text-align: center;
    vertical-align: middle;
}

#modalCadastrarPedido .modal-footer,
#modalCadastrarCupom .modal-footer,
#modalEditarCupom .modal-footer{
    display: flex;
    justify-content: space-between;
}

#modalCadastrarPedido #btnSalvarProdutoPedido,
#modalCadastrarPedido #btnSalvarPedido,
#modalCadastrarCupom #btnSalvarCupom,
#modalEditarCupom #btnSalvarEditarCupom{
    color: #fff;
    background-color: var(--cor-principal);
    transition: 0.2s;
}

#modalCadastrarPedido #btnSalvarProdutoPedido:hover,
#modalCadastrarPedido #btnSalvarPedido:hover,
#modalCadastrarCupom #btnSalvarCupom:hover,
#modalEditarCupom #btnSalvarEditarCupom:hover{
    filter: brightness(0.8);
}

#modalCadastrarPedido #cadastroLojaProd{
    margin-bottom: 20px;
}

#modalCadastrarCupom input.invalid,
#modalCadastrarCupom select.invalid,
#modalCadastrarCupom select.invalid + .select2-container .select2-selection--single,
#modalEditarCupom input.invalid,
#modalEditarCupom select.invalid,
#modalEditarCupom select.invalid + .select2-container .select2-selection--single{
    border: 1px solid red;
}

#modalEditarCupom input[readonly],
#modalEditarCupom select[readonly]{
    background-color: #ddd;
    color: #707070;
}


/* Estilizando o dia selecionado */
.drp-calendar .table-condensed tbody tr td.active, 
.drp-calendar .table-condensed tbody tr td.active:hover,
.drp-calendar .table-condensed tbody tr td.active.start-date,
.drp-calendar .table-condensed tbody tr td.active.end-date,
.daterangepicker .ranges li.active {
  background-color: #02d569; /* Cor de fundo do dia selecionado e do range de seleção */
  color: #fff; /* Cor do texto no dia selecionado */
}


.drp-calendar .table-condensed tbody tr td.in-range{
    background-color: rgba(2, 213, 105, 0.4);
}

/* Estilizando o botão 'Aplicar' */
.daterangepicker .applyBtn {
  background-color: #02d569; /* Cor de fundo do botão 'Aplicar' */
  border-color: #02d569; /* Cor da borda do botão 'Aplicar' */
  color: #fff; /* Cor do texto do botão 'Aplicar' */
}

/* ### PÁGINA DA LOJA ### */
#headerLoja{
    padding: 20px;
}

#headerLoja h1{
    color: var(--cor-principal);
    text-align: center;
    font-weight: bold;
    margin-bottom: 15px;
}

#headerLoja #buttons{
    display: flex;
    justify-content: space-around;
}

#headerLoja #buttons button{
    background-color: var(--cor-principal);
    color: #fff;
    font-weight: 500;
    font-size: 15px;
}


#headerLoja #buttons button:hover{
    filter: brightness(0.8);
}

#loja #btnBottom button{
    border-radius: 100px;
    background-color: var(--cor-principal);
    color: #fff;
    font-weight: 500;
    box-shadow: 2px 2px 50px #000;
    border: none;
}

#loja #btnBottom button:hover{
    filter: brightness(0.8);
}


#loja #btnBottom{
    display: none;
    position: fixed;
    bottom: 70px;
    width: 100%;
    text-align: center;
}

@media only screen and (max-width: 768px) {
    #loja #btnBottom{
        display: block;
    }
}

.swal2-container #tituloProduto{
    font-size: 20px;
}

#imgProdAddCart{
    width: 200px;
    aspect-ratio: 1/1;
    object-fit: contain;
}

#inputGroupAddCart{
    margin: 0 auto;
}

#inputGroupAddCart input{
    text-align: center;
}

#valorTotalAddCart{
    font-size: 25px;
    font-weight: bold;
    color: #000;
}

#iconCarrinhoFlutuante{
    display: block;
    position: fixed;
    right: -100px; /* Inicialmente posicionado fora da tela */
    bottom: 140px;
    animation-name: slideInCart;
    animation-duration: 1s;
    animation-delay: 1s; /* Atraso de 1 segundo antes da animação iniciar */
    animation-fill-mode: forwards; /* Mantém o estado final da animação */
}

#iconCarrinhoFlutuante i{
    color: #fff;
    background-color: #25D366;
    padding: 10px;
    text-align: center;
    font-size: 30px;
    border-radius: 100px;
}

@keyframes slideInCart {
    0% {
        right: -100px; /* Posição inicial fora da tela */
    }
    100% {
        right: 10px; /* Posição final na tela */
    }
}

#iconCarrinhoFlutuante #numeroCart{
    position: absolute;
    top: 3px;
    right: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    font-size: 12px;
    background-color: var(--cor-secundaria);
    color: white;
    border-radius: 50%;
    color: #000;
}

.barra-timer{
    background-color: var(--cor-principal)!important;
}

/* ### CARRINHO DA LOJA ### */
#offcanvasCart #cartItems{
    width: 90%;
    overflow-x: auto;
    margin: 0 auto;
}

/* CART MOBILE */
#offcanvasCart{
    max-width: 70%;
}

#offcanvasCart #cartItems #item{
    padding: 10px;
    margin-bottom: 20px;
    border: 1px #000 solid;
    border-radius: 0.375em;
}

#offcanvasCart #cartItems #prod{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}

#offcanvasCart #cartItems #fotoItem #fotoProduto{
    width: 100px; 
    height: 100px; 
    object-fit: cover;
}

#offcanvasCart #cartItems #details h2{
    font-size: 15px;
}

#offcanvasCart #cartItems #divQtdProd{
    width: 150px; 
    display: flex; 
    align-items: center;
}

#offcanvasCart #cartItems #divQtdProd input{
    width: 30%; 
    text-align: center;
}

#offcanvasCart #cartItems #divQtdProd button{
    border-radius: 0.375em;
}

#offcanvasCart #cartItems #divQtdProd #btnMenosQtd{
    border-right-radius: none;
    margin-left: 5px;
}

#offcanvasCart #cartItems #divQtdProd #btnMaisQtd{
    border-left-radius: none;
}

#offcanvasCart #cartItems #details{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#offcanvasCart #cartItems #divPreco{
    text-align: center;
    margin-top: 20px;
}

#offcanvasCart #cartItems #divBtnRemover{
    text-align: right;
    margin-top: -20px;
}

#offcanvasCart #cartItems #listaItemsMobile{
    display: block;
}

#offcanvasCart #empty{
    text-align: center;
    color: #666;
}

#offcanvasCart #notEmpty #buttonsCart{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
}

#offcanvasCart #notEmpty #buttonsCart #btnIrCarrinho{
    color: var(--cor-principal);
    font-weight: bold;
}

/* ### CARRINHO E FINALIZAR PEDIDO ### */
#finalizarPedido{
    padding: 20px;
}

#cart{
    padding-top: 20px;
}

#cart #cartItems,
#finalizarPedido #pedidoItems{
    width: 95%;
    overflow-x: auto;
    margin: 0 auto;
}

#finalizarPedido #logisticaPedido,
#finalizarPedido #conteudoFinalizar{
    width: 95%;
    margin: 0 auto;
}

#finalizarPedido #pedidoItems h2,
#finalizarPedido #logisticaPedido h2,
#finalizarPedido #conteudoFinalizar h2{
    font-size: 20px;
    padding: 0;
}

#finalizarPedido #pedidoItems,
#finalizarPedido #logisticaPedido, 
#finalizarPedido #conteudoFinalizar{
    background-color: #fff;
    padding: 30px 20px;
    border-radius: 0.375em;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

#finalizarPedido input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#cart #cartItems table th,
#finalizarPedido #pedidoItems table th{
    background-color: var(--cor-principal);
    color: #fff;
}

#cart #cartItems table,
#cart #cartItems table tr,
#cart #cartItems table td,
#cart #cartItems table th,
#finalizarPedido #pedidoItems table,
#finalizarPedido #pedidoItems table tr,
#finalizarPedido #pedidoItems table td,
#finalizarPedido #pedidoItems table th{
    border: 1px solid #333;
}

#cart h1,
#finalizarPedido h1{
    text-align: center;
    font-weight: bold;
    color: var(--cor-principal);
    margin-bottom: 20px;
}

#cart #cartItems table,
#finalizarPedido #pedidoItems table{
    vertical-align: middle; 
    text-align: center;
}

#cart #divTotalCupom,
#finalizarPedido #divTotalCupom{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

#cart #divTotalCupom .col,
#finalizarPedido #divTotalCupom .col{
    padding: 20px;
}

#cart #divTotalCupom #tabelaTotais{
    margin: 40px auto;
}

#finalizarPedido #divTotalCupom #tabelaTotais{
    width: 90%;
    margin: 0px auto;
}

#cart #divTotalCupom #tabelaTotais .col-sm-12,
#cart #divTotalCupom #tabelaTotais .col-md-6,
#cart #divTotalCupom #tabelaTotais .row>*,
#finalizarPedido #divTotalCupom #tabelaTotais .col-sm-12,
#finalizarPedido #divTotalCupom #tabelaTotais .col-md-6,
#finalizarPedido #divTotalCupom #tabelaTotais .row>*{
    padding: 0px!important;
}

#cart #divTotalCupom #tabelaTotais th,
#finalizarPedido #divTotalCupom #tabelaTotais th{
    background-color: var(--cor-principal);
    color: #fff;
}

#cart #divTotalCupom #tabelaTotais th,
#cart #divTotalCupom #tabelaTotais tr,
#cart #divTotalCupom #tabelaTotais td,
#finalizarPedido #divTotalCupom #tabelaTotais th,
#finalizarPedido #divTotalCupom #tabelaTotais tr,
#finalizarPedido #divTotalCupom #tabelaTotais td{
    border: 1px solid #333;
}

#cart #divTotalCupom #tabelaTotais td#vlrTotal,
#cart #divTotalCupom #tabelaTotais th#thVlrTotal,
#finalizarPedido #divTotalCupom #tabelaTotais td#vlrTotal,
#finalizarPedido #divTotalCupom #tabelaTotais th#thVlrTotal{
    color: #000;
    font-weight: bold;
}

#finalizarPedido #divCupom{
    text-align: left;
    padding: 10px;
}

#finalizarPedido #divCupom label{
    color: var(--cor-principal);
}

#finalizarPedido #divCupom #btnAplicarCupom{
    background-color: var(--cor-secundaria);
    color: #000;
    border-radius: 0.375em;
}

#finalizarPedido #divCupom #btnAplicarCupom:hover{
    filter: brightness(0.8);
}


@media (max-width: 1199px) {
    #finalizarPedido #divCupom #btnAplicarCupom{
        float: right;
    }
}

#finalizarPedido #divCupom #inputCupom{
    margin: 0 auto;
    /* margin-bottom: 20px; */
}

#cart #options{
    width: 90%;
    margin: 30px auto;
}

#cart #options #btnFinalizarPedido{
    background-color: var(--cor-principal);
    color: #fff;
    border-radius: 0.375em;
}

#cart #options #btnFinalizarPedido:hover{
    filter: brightness(0.8);
}

#cart #options #btnContinuarComprando{
    color: #000;
    text-decoration: underline;
}

@media (min-width: 1200px) {
    #cart #options #btnFinalizarPedido{
        float: right;
    }
    
    #cart #options #btnContinuarComprando{
        float: left;
    }
}

@media (max-width: 1199px) {
    #cart #options{
        text-align: center;
    }

    #cart #options #btnContinuarComprando{
        display: block;
        text-align: center;
        margin: 0 auto;
    }

    #finalizarPedido #divTotalCupom #tabelaTotais{
        margin: 40px auto;
    }
}

#cart #empty{
    display: none;
    text-align: center;
}

#cart #empty h2{
    margin-top: 80px;
}

#cart #empty #btnAdicionarItensCarrinho{
    background-color: var(--cor-secundaria);
    border-radius: 0.375em;
    color: #000;
}

#cart #empty #btnAdicionarItensCarrinho:hover{
    filter: brightness(0.8);
}

#finalizarPedido #divBtnPagamento{
    width: 90%;
    text-align: right;
    margin: 70px auto;
}

#finalizarPedido #btnUtilizarCredito{
    margin-top: 20px;
    display: none;
    justify-content: center;
}

#finalizarPedido #btnUtilizarCredito .form-check-input{
    background-color: #ddd;
}

#finalizarPedido #btnUtilizarCredito .form-check-input:checked {
    background-color: var(--cor-principal)!important;
    border-color: var(--verde-principal-hover)!important;
}

#finalizarPedido #btnVoltarCarrinho{
    display: flex;
    justify-content: center;
}

#cart #inputGroupCartQtd{
    width: 150px;
    margin: 0 auto;
}

#cart #inputGroupCartQtd input{
    width: 50%;
    text-align: center;
}

#finalizarPedido #formPagto #numCartao{
    border-right: none;
}

#finalizarPedido #formPagto .bandeira-cartao{
    height: 100%;
    border: 1px #000 solid;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-left: none;
    background-color: #fff;
}

#finalizarPedido #formPagto #numeroInvalido{
    display: none;
    color: red;
    text-align: center;
    width: 100%;
}

#finalizarPedido #formPagto input.invalid{
    border: 1px red solid;
}

#finalizarPedido #formPagto .bandeira-cartao.invalid{
    border-top: 1px red solid;
    border-bottom: 1px red solid;
    border-right: 1px red solid;
} 

#finalizarPedido #payment-form.formPix{
    display: none;
}

#finalizarPedido #payment-form h2{
    margin-bottom: 10px;
    text-align: center;
    color: var(--cor-principal);
    font-weight: bold;
}

#finalizarPedido #payment-form h2{
    margin-top: 30px;
    text-align: center;
    color: #000;
    font-size: 22px;
    font-weight: bold;
}

#finalizarPedido #divSalvarCartao{
    display: flex;
    justify-content: center;
}

#finalizarPedido #divSalvarCartao input{
    aspect-ratio: 1/1;
    margin-right: 5px;
}

#finalizarPedido #divSalvarCartao input:checked {
    background-color: var(--cor-principal)!important;
    border-color: var(--verde-principal-hover)!important;
}

#finalizarPedido #selectsFormPagto{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#formPagto{
    box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07);
    border-radius: 0.375em;
    padding: 40px;
}

#finalizarPedido #payment-form{
    width: 95%;
    align-self: center;
    /* box-shadow: 0px 0px 0px 0.5px rgba(50, 50, 93, 0.1), 0px 2px 5px 0px rgba(50, 50, 93, 0.1), 0px 1px 1.5px 0px rgba(0, 0, 0, 0.07); */
    /* border-radius: 0.375em; */
    /* padding: 40px; */
    margin: 0 auto;
}

#finalizarPedido #payment-form input,
#finalizarPedido #payment-form select,
#finalizarPedido .dropdown.bootstrap-select button{
    border: 1px #000 solid;
    background-color: #fff;
}

#finalizarPedido .dropdown.bootstrap-select button{
    height: 37.6px;
}

#finalizarPedido .dropdown.bootstrap-select button img{
    height: 25px!important;
}

#finalizarPedido #formPagto #btnConfirmarPagamento,
#finalizarPedido #formPagto #btnConfirmarPedidoPix,
#finalizarPedido #formPagto #btnConfirmarPedidoEupago,
#finalizarPedido #btnConfirmarPagamentoSavedCard,
#finalizarPedido #btnPagto{
    background-color: var(--cor-principal);
    color: #fff;
    width: 100%;
    text-align: center;
}

#finalizarPedido #formPagto #btnConfirmarPagamento:hover,
#finalizarPedido #formPagto #btnConfirmarPedidoPix:hover,
#finalizarPedido #formPagto #btnConfirmarPedidoEupago:hover,
#finalizarPedido #btnConfirmarPagamentoSavedCard:hover,
#finalizarPedido #btnPagto:hover{
    filter: brightness(0.8);
}

#finalizarPedido #formPagto small#cvvCartao{
    display: block;
    text-align: center;
}

#finalizarPedido #divLeft{
    display: flex;
    align-items: center;
}

#finalizarPedido #formPagto #tipoPagto{
    width: 95%;
    margin: 10px auto;
    border: 1px #000 solid;
}

div#inputCPF {
    margin-bottom: 20px;
}

#finalizarPedido #divUsarCreditos{
    margin-top: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

#finalizarPedido #divUsarCreditos .form-check-input{
    background-color: #ddd;
}

#finalizarPedido #divUsarCreditos .form-check-input:checked {
    background-color: var(--cor-principal)!important;
    border-color: var(--verde-principal-hover)!important;
}

.finalizarPedidoReserva #formPagto #btnConfirmarPagamento,
.finalizarPedidoReserva #formPagto #divBtnPagamento #btnPagto {
    background: var(--amarelo);
    color: #000;
    font-family: Arial, sans-serif;
    border-radius: 0 0 4px 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
}

.finalizarPedidoReserva #formPagto #btnConfirmarPagamento:hover,
.finalizarPedidoReserva #formPagto #divBtnPagamento #btnPagto:hover{
    filter: contrast(115%);
}
    
.finalizarPedidoReserva #formPagto button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* CARD MOBILE */
#cart #cartItems #item{
    padding: 10px;
    margin-bottom: 20px;
    border: 1px #000 solid;
    border-radius: 0.375em;
}

#cart #cartItems #prod{
    display: flex; 
    align-items: center; 
    justify-content: space-between;
}

#cart #cartItems #fotoItem #fotoProduto{
    width: 100px; 
    height: 100px; 
    object-fit: cover;
}

#cart #cartItems #details h2{
    font-size: 15px;
}

#cart #cartItems #divQtdProd{
    width: 150px; 
    display: flex; 
    align-items: center;
}

#cart #cartItems #divQtdProd input{
    width: 30%; 
    text-align: center;
}

#cart #cartItems #divQtdProd button{
    border-radius: 0.375em;
}

#cart #cartItems #divQtdProd #btnMenosQtd{
    border-right-radius: none;
    margin-left: 5px;
}

#cart #cartItems #divQtdProd #btnMaisQtd{
    border-left-radius: none;
}

#cart #cartItems #details{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#cart #cartItems #divPreco{
    text-align: center;
    margin-top: 20px;
}

#cart #cartItems #divBtnRemover{
    text-align: right;
    margin-top: -20px;
}
@media (max-width: 500px) {
    #cart #cartItems #listaItemsMobile{
        display: block;
    }

    #cart #cartItems #tabelaCarrinho{
        display: none;
    }
}
@media (min-width: 501px) {
    #cart #cartItems #listaItemsMobile{
        display: none;
    }

    #cart #cartItems #tabelaCarrinho{
        display: table;
    }
}

#cart.reserva #cartItems #tabelaCarrinho{
    display: table;
}

/* ### HOME DASHBOARD ### */
#dashboard{
    text-align: center;
    font-size: 20px;
    font-weight: bold;
}

/* Card */
#mainStoreManager .card {
    margin-bottom: 30px;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0,0,0, 0.3);
}

#mainStoreManager .card-header,
#mainStoreManager .card-footer {
    border-color: #ebeef4;
    background-color: #fff;
    color: #798eb3;
    padding: 15px;
}
  
#mainStoreManager .card-title {
    padding: 20px 0 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: var(--cor-principal);
}
  
#mainStoreManager .card-title span {
    color: #899bbd;
    font-size: 14px;
    font-weight: 400;
}
  
#mainStoreManager .card-body {
    padding: 0 20px 20px 20px;
}
  
#mainStoreManager .card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

#dashboard .info-card,
#relatorio .info-card {
    padding-bottom: 10px;
}

#dashboard .info-card h6{
    font-size: 32px;
    color: var(--cor-principal);
    font-weight: 700;
    margin: 0;
    padding: 0;
    width: 100%;
}

#relatorio .info-card h6{
    font-size: 23px;
    color: var(--cor-principal);
    font-weight: 700;
    margin: 0;
    padding: 0;
    width: 100%;
}

#dashboard .info-card .ps-3,
#relatorio .info-card .ps-3{
    width: 100%;
}

#dashboard .card-icon i{
    display: block;
    font-size: 40px;
    line-height: 0;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 15px;
    border-radius: 50px;
}

#dashboard .sales-card .card-icon i{
    color: #000;
    background: #fff;
}

#dashboard #cardsDashboard,
#relatorio #cardsDashboard{
    padding: 20px;
}

#dashboard #cardsDashboard.row,
#relatorio #cardsDashboard.row{
    margin: 0!important;
}

#dashboard #graficos,
#relatorio #graficos{
    width: 90%;
    margin: 0 auto;
}

#dashboard #graficos #titleChart,
#dashboard #graficos #titleTop3{
    font-size: 16px;
    color: #333;
}

#dashboard #graficos #coluna{
    height: 100%;
}

@media (max-width: 767px) {
    #dashboard #graficos #titleTop3{
        margin-top: 40px;
    }
}

#dashboard #filtroLoja{
    width: 70%;
    margin: 0 auto;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    padding-bottom: 20px;
}

#relatorio{
    margin-top: 10px;
    padding: 20px;
}

#relatorio #cardsDashboard{
    text-align: center;
}

#relatorio #cardsDashboard h6{
    color: #000;
}

#dadosRelatorio{
    padding: 20px;
}

#dadosRelatorio label{
    margin-top: 5px;
}

#relatorio #graficoDiasSemana,
#relatorio #graficoHorasDia,
#relatorio #graficoProdutos{
    margin-top: 30px;
    padding: 10px;
}

#relatorio #graficoPedidos #chartPedidos,
#relatorio #graficoProdutos #chartProdutosVendidos{
    min-height: 300px;
}

/* ### PÁGINA DE CONEXÃO GATEWAY ### */
#conexaoPagseguro{
    text-align: center;
    margin-top: -35px;
    padding: 20px;
}

#conexaoPagseguro div#conectado{
    display: none;
}

#conexaoPagseguro #logoPagseguro{
    width: 120px;
    margin: 5px;
}

#conexaoPagseguro div#naoConectado i{
    font-size: 40pt;
    color: var(--amarelo)!important;
}

#conexaoPagseguro div#naoConectado p{
    color: var(--amarelo)!important;
    font-weight: bold;
    font-size: 12pt;
    margin-bottom: 5px;
}

#conexaoPagseguro div#conectado i{
    font-size: 55pt;
    color: var(--cor-principal)!important;
    margin: 20px;
}

#conexaoPagseguro div#conectado p{
    color: var(--cor-principal)!important;
    font-weight: bold;
    font-size: 15pt;
}

#conexaoPagseguro #naoConectado #linkConnect button,
#conexaoPagseguro #naoConectado #btnConnect,
#modalConexaoPS #linkConnect button{
    background-color: var(--cor-secundaria);
    margin-top: 30px;
}

#conexaoPagseguro #naoConectado #btnConnect{
    margin-top: 5px;
}

#conexaoPagseguro #naoConectado #linkConnect:hover button,
#conexaoPagseguro #naoConectado #btnConnect:hover,
#modalConexaoPS #linkConnect button:hover{
    filter: brightness(0.8);
}

#conexaoPagseguro #naoConectado #linkConnect button,
#conexaoPagseguro #naoConectado #linkConnect button:hover,
#conexaoPagseguro #naoConectado #linkConnect,
#conexaoPagseguro #naoConectado #linkConnect:hover,
#modalConexaoPS #linkConnect button,
#modalConexaoPS #linkConnect,
#modalConexaoPS #linkConnect button:hover,
#modalConexaoPS #linkConnect:hover{
    color: #000!important;
    text-decoration: none;
}

#conexaoPagseguro #naoConectado #linkConnect button i,
#conexaoPagseguro #naoConectado #btnConnect i,
#modalConexaoPS #linkConnect button i{
    font-size: 20px;
    color: #000!important;
    margin-right: 5px;
    padding: 0;
    vertical-align: middle;
}

/* ### PÁGINA DE PAGAMENTO PIX ### */
#divPix{
    padding: 10px;
    border: 5px solid var(--cor-secundaria);
    margin: 10px;
    border-radius: 0.375em;
    text-align: center;
}

#divPix h1{
    color: var(--cor-principal);
    font-weight: bold;
}

#divPix p span {
    color: var(--cor-principal);
    font-weight: 500;
}

#divPix #imgPix{
    width: 95%;
    padding: 10px;
    max-width: 300px;
    margin: 0 auto;
}

#divPix textarea{
    overflow: hidden;
    font-size: 15px;
    resize: none;
    border: 1px #555 dashed;
}

#divPix #btnCopiarPix{
    background-color: var(--cor-principal);
    color: #fff;
    margin-top: 10px;
}

#divPix #btnCopiarPix:hover{
    filter: brightness(0.8);
}

#divPix #dataExpira{
    color: var(--cor-principal);
    margin: 0;
}

/* ### PÁGINA NOVO PEDIDO ### */
#novoPedido{
    padding: 10px;
    margin: 20px auto;
    max-width: 90%;
    border: 5px solid var(--cor-secundaria);
    border-radius: 0.375em;
    text-align: center;
}

#novoPedido h1{
    color: var(--cor-principal);
    font-size: 18pt;
    font-weight: 700;   
}

#novoPedido #numeroPedido{
    color: #000;
    font-size: 20px;
    font-weight: bold;
}

#novoPedido #pedidoConfirmado #box .alert{
    background-color: #000;
    color: #fff;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
}

#novoPedido #pedidoPendente #box .alert{
    background-color: var(--cor-secundaria);
    color: #000;
    text-align: center;
    max-width: 300px;
    margin: 0 auto;
}

#novoPedido #informacoesDoPedido,
#divPix #informacoesDoPedido{
    text-align: left;
}

#novoPedido p#informacoes,
#divPix p#informacoes{
    margin: 0 auto;
    margin-top: 40px;
    font-size: 20px;
    font-weight: bold;
}

#novoPedido #informacoesDoPedido,
#divPix #informacoesDoPedido{
    border: 1px dashed #555;
    border-radius: 10px;
    margin: 0 auto;
    font-size: 16px;
    text-align: left;
    padding: 10px;
}

#novoPedido #informacoesDoPedido p,
#divPix #informacoesDoPedido p{
    font-weight: bold;
}

#novoPedido #informacoesDoPedido span,
#novoPedido #informacoesDoPedido #divItens p,
#divPix #informacoesDoPedido span,
#divPix #informacoesDoPedido #divItens p{
    font-weight: normal;
}

/* PAGINA DOWNLOAD APP */
#paginaApp{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 90vh;
}

#paginaApp h1{
    margin: 10px auto;
    color: var(--cor-principal);
    font-weight: bold;
}

#paginaApp p{
    width: 80%;
    text-align: center;
}

#paginaApp img#logo{
    width: 50%;
    margin: 20px auto;
}

#paginaApp img#imageApp{
    width: 90%;
    max-width: 400px;
}

#paginaApp button{
    background-color: var(--cor-principal);
    color: #fff;
}

#paginaApp button:hover{
    filter: brightness(0.8);
}


#modalNPS .slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    padding-left: -1px;
    padding-right: -1px;
}

#modalNPS .slider-labels span {
    font-size: 18px;
}

#modalNPS .slider-labels span:hover{
    cursor: pointer;
}

/* #modalNPS .slider-labels span.numero{
    width: 15px;
} */

#modalNPS .selected-emoji {
    font-size: 36px!important;
    transition: font-size 0.3s;
}

#modalNPS .selected-number {
    transition: font-size 0.3s;
    color: #02d569;
    font-weight: bold;
}

@media (max-width: 700px){
    #modalNPS .selected-emoji {
        font-size: 20px!important;
        transition: font-size 0.3s;
        border: 2px solid var(--cor-principal);
        border-radius: 100px;
    }
}

#modalNPS #spanComentarioNPS{
    display: flex;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    color: var(--cor-principal);
    text-align: center;
}

#modalNPS #labelNPS{
    font-size: 18px;
    font-weight: bold;
    color: var(--cor-principal);
    text-align: center;
}

#modalNaoCompra .modal-footer,
#modalNPS .modal-footer{
    display: flex;
    justify-content: space-between;
}

#modalNaoCompra #btnEnviar,
#modalNPS #btnEnviar,
#modalNPS #btnAvancar{
    color: #fff;
    background-color: var(--cor-principal);
}

#modalNPS #btnEnviar:hover,
#modalNPS #btnAvancar:hover{
    filter: brightness(0.8);
}

#modalNPS .tab {
    display: block;
}

/* ### INVENTÁRIO ### */
/*#inventarioProdutos #produtosInventario #title{
    text-align: center;
    margin-top: 20px;
    color: #000;
    font-weight: bold;
}

#inventarioProdutos #explicacao p{
    padding: 20px;
    text-align: center;
}

#inventarioProdutos #topoInventario {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#inventarioProdutos #divMercadoInventario{
    width: 100%;
    margin-bottom: 10px;
}

#inventarioProdutos #btnIniciarInventario{
    background-color: var(--cor-principal);
    color: #fff;
    margin: 0 10px;
}

#inventarioProdutos #btnIniciarInventario:hover{
    filter: brightness(0.8);
}

#inventarioProdutos #buttons{
    display: flex;
    justify-content: space-between;
}

#inventarioProdutos #btnSalvarInventario,
#inventarioProdutos #btnConfirmarAlteracoes{
    background-color: var(--cor-principal);
    color: #fff;
}

#inventarioProdutos #btnSalvarInventario:hover,
#inventarioProdutos #btnConfirmarAlteracoes:hover{
    filter: brightness(0.8);
}*/

/* ### BOTTOM MENU ### */
.bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    padding: 5px;
    display: none; /* Inicialmente oculto */
    z-index: 3;
}

.bottom-menu a {
    color: var(--cor-principal);
    text-decoration: none;
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bottom-menu i{
    font-size: 20px;
}

.bottom-menu #item span{
    font-size: 12px;
}

/* Estilo para dispositivos móveis */
@media only screen and (max-width: 768px) {
    .bottom-menu {
        display: flex;
        justify-content: space-around;
        box-shadow: -5px -5px 20px rgba(0,0,0,0.3);
    }
}

.bottom-menu a:hover{
    filter: brightness(0.8);
}

/* .bottom-menu #carrinho-bottom .numero {
    display: inline-block;
    text-align: center;
    width: 16px;
    height: 16px;
    font-size: 12px;
    background-color: var(--cor-secundaria);
    color: white;
    border-radius: 50%;
    color: #000;
} */


/* ### RELATORIO IMPRESSO #### */
#relatorioImpressao{
    width: 90%;
    margin: 0 auto;
}

#relatorioImpressao #cabecalho{
    text-align: center;
    display: flex;
    justify-content: space-between;
}

#relatorioImpressao #cabecalho #texto{
    text-align: justify;
}

#relatorioImpressao #cabecalho p{
    margin-bottom: 0;
}

#relatorioImpressao #cabecalho img{
    height: 120px;
}

#relatorioImpressao #corpo{
    width: 90%;
    margin: 30px auto;
}

#relatorioImpressao #corpo #tabela1,
#relatorioImpressao #corpo #tabela2,
#relatorioImpressao #corpo #tabela3,
#relatorioImpressao #corpo #tabelaClientes,
#relatorioImpressao #corpo #tabelaProdutos,
#relatorioImpressao #corpo #tabelaCategoriaProdutos,
#relatorioImpressao #corpo #tabelaPedidosDia,
#relatorioImpressao #corpo #tabelaPedidosHora{
    border: 1px solid #000;
    margin: 0 auto;
    text-align: center;
}

#relatorioImpressao #corpo #tabela1 .col,
#relatorioImpressao #corpo #tabela2 .col,
#relatorioImpressao #corpo #tabela3 .col,
#relatorioImpressao #corpo #tabelaClientes .col,
#relatorioImpressao #corpo #tabelaProdutos .col,
#relatorioImpressao #corpo #tabelaCategoriaProdutos .col,
#relatorioImpressao #corpo #tabelaPedidosDia .col,
#relatorioImpressao #corpo #tabelaPedidosHora .col{
    color: #000;
    background-color: var(--verde-claro);
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#relatorioImpressao #corpo #tabela1 .col.header,
#relatorioImpressao #corpo #tabela2 .col.header,
#relatorioImpressao #corpo #tabela3 .col.header,
#relatorioImpressao #corpo #tabelaClientes .col.header,
#relatorioImpressao #corpo #tabelaProdutos .col.header,
#relatorioImpressao #corpo #tabelaCategoriaProdutos .col.header,
#relatorioImpressao #corpo #tabelaPedidosDia .col.header,
#relatorioImpressao #corpo #tabelaPedidosHora .col.header{
    color: #fff;
    font-weight: bold;
    background-color: #000;
    border: 1px solid #000;
}


#relatorioImpressao #corpo #graficoPedidosDia,
#relatorioImpressao #corpo #divTabelaProdutos,
#relatorioImpressao #corpo #divTabelaClientes,
#relatorioImpressao #corpo #divTabelaPedidosDia,
#relatorioImpressao #corpo #divTabelaPedidosHora,
#relatorioImpressao #corpo #divTabela3{
    margin: 30px auto;
}

#relatorioImpressao #corpo #chartPedidos{
    min-height: 300px;
    margin: 0 auto;
}

#relatorioImpressao #corpo #chartFormasPagto{
    margin: 0 auto;
}

#relatorioImpressao #corpo #tabelaClientes .col.header2,
#relatorioImpressao #corpo #tabelaProdutos .col.header2,
#relatorioImpressao #corpo #tabelaCategoriaProdutos .col.header2,
#relatorioImpressao #corpo #tabelaPedidosDia .col.header2,
#relatorioImpressao #corpo #tabelaPedidosHora .col.header2{
    color: #fff;
    font-weight: bold;
    background-color: #029448;
    border: 1px solid #000;
}

/* ### PAINEL DE ESTOQUE DO PRODUTO ### */
/*#painelEstoque{
    padding: 20px;
}

#painelEstoque #tabelaZerados,
#painelEstoque #tabelaZerados th{
    text-align: center;
    vertical-align: middle;
}

#painelEstoque #tabelaZerados td#menos2dias{
    color: var(--cor-principal);
}

#painelEstoque #tabelaZerados td#de2a7dias{
    color: #000;
}

#painelEstoque #tabelaZerados td#de7a14dias{
    color: var(--cor-principal);
}

#painelEstoque #tabelaZerados td#mais14dias{
    color: red;
}

#modalLista #tabelaLista,
#modalLista #tabelaLista th{
    text-align: center;
}

#modalLista #tabelaLista_wrapper{
    overflow: auto;
}

#modalLista #pTotalEstimado{
    color: var(--cor-principal);
    font-weight: bold;
}

#modalLista #baixarLista{
    background-color: var(--cor-principal);
    color: #fff;
}

#modalLista #baixarLista:hover{
    filter: brightness(0.8);
}

#dataTablePiclist #btnAddPiclist{ 
    float: right;
    background-color: var(--cor-principal);
    color: #fff;
}

#painelEstoque #verPiclists,
#painelEstoque #verEstoqueDia,
#painelEstoqueDiaADia #verPiclists,
#painelEstoqueDiaADia #verEstoquePeriodo{
    background-color: var(--cor-principal);
    color: #fff;
}

#dataTablePiclist #btnAddPiclist:hover,
#painelEstoque #verPiclists:hover,
#painelEstoque #verEstoqueDia:hover,
#painelEstoqueDiaADia #verPiclists:hover,
#painelEstoqueDiaADia #verEstoquePeriodo:hover{
    filter: brightness(0.8);
}

#painelEstoque #buttonsTopo,
#painelEstoqueDiaADia #buttonsTopo{
    display: flex;
    justify-content: space-between;
    margin: 10px auto;
}

#painelEstoque #filtros label,
#painelEstoqueDiaADia #filtros label{
    margin-top: 15px;
}

#tabelaZerados .btn{
    background-color: var(--cor-principal);
    color: #fff;
}

#tabelaZerados .btn:hover{
    filter: brightness(0.8);
}*/

/* ### PAINEL DE ESTOQUE DO PRODUTO DIA A DIA ### */
/*#painelEstoqueDiaADia{
    padding: 20px;
}

#painelEstoqueDiaADia #tabela{
    text-align: center;
    vertical-align: middle;
}

#painelEstoqueDiaADia #tabela tr,
#painelEstoqueDiaADia #tabela td,
#painelEstoqueDiaADia #tabela th{
    border: 1px solid #000;
    text-align: center;
    vertical-align: middle;
}

#painelEstoqueDiaADia #tabela td#nomeProduto{
    font-size: 12px;
}

#painelEstoqueDiaADia #tabela td.red{
    background-color: red;
    color: #fff;
}

#painelEstoqueDiaADia #tabela td.yellow{
    background-color: yellow;
    color: #000;
}

#painelEstoqueDiaADia #tabela td.green{
    background-color: var(--cor-principal);
    color: #000;
}

#painelEstoqueDiaADia #tabela td.grey{
    background-color: #ccc;
    color: #000;
}

#painelEstoqueDiaADia #tabela td a{
    color: var(--cor-principal);
}


#painelEstoqueDiaADia .dt-layout-table{
    overflow: scroll;
}*/

/* #### RELATORIO NAO CONFORMIDADE #### */
/*#modalVerRelatorio .card {
    margin-bottom: 0;
    border: none;
    box-shadow: none;
    border: 1px #000 solid;
    border-radius: 0.375em;
    margin-top: 10px;
}

#modalVerRelatorio .card-header,
#modalVerRelatorio .card-footer {
    border-color: #ebeef4;
    background-color: #fff;
    color: #798eb3;
    padding: 15px;
}
  
#modalVerRelatorio .card-body {
    padding: 0;
}

#modalVerRelatorio .card-body #conteudo{
    padding: 10px;
}

#modalVerRelatorio .card-body #conteudo p{
    margin-bottom: 0;
}

#modalVerRelatorio .accordion-button:not(.collapsed) {
    color: #000;
    background-color: var(--verde-claro);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 #000;
}

#modalVerRelatorio .accordion-button:not(.collapsed)::after{
    filter: brightness(0)!important;
}

#modalVerRelatorio .accordion-item > .accordion-collapse.collapse.show {
    background-color: var(--verde-claro);
}

#modalVerRelatorio #pedidosRealizados{
    margin-bottom: 30px;
}

#modalVerRelatorio h2{
    text-align: center;
    margin-bottom: 10px;
    color: var(--cor-principal);
    font-weight: bold;
}

#modalVerRelatorio .accordion-header{
    margin-bottom: 0!important;
}

#modalVerRelatorio .accordion-body {
    padding: 5px;
}

#modalVerRelatorio #resumoRelatorio > div{
    display: flex;
}

#modalVerRelatorio #resumoRelatorio .card {
    margin-bottom: 30px;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 15px rgba(0,0,0, 0.3);
    width: 100%;
}

#modalVerRelatorio #resumoRelatorio .card-header,
#modalVerRelatorio #resumoRelatorio .card-footer {
    border-color: #ebeef4;
    background-color: #fff;
    color: #798eb3;
    padding: 15px;
}
  
#modalVerRelatorio #resumoRelatorio .card-title {
    padding: 20px 0 15px 0;
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-align: center;
}
  
#modalVerRelatorio #resumoRelatorio .card-title span {
    color: #899bbd;
    font-size: 14px;
    font-weight: 400;
}
  
#modalVerRelatorio #resumoRelatorio .card-body {
    padding: 0 20px 20px 20px;
}
  
#modalVerRelatorio #resumoRelatorio .card-img-overlay {
    background-color: rgba(255, 255, 255, 0.6);
}

#modalVerRelatorio #resumoRelatorio .info-card {
    padding-bottom: 10px;
}

#modalVerRelatorio #resumoRelatorio .info-card h6 {
    text-align: center;
    font-size: 32px;
    color: #000;
    font-weight: 700;
    margin: 0;
    padding: 0;
    width: 100%;
}

#modalVerRelatorio #resumoRelatorio .info-card .ps-3{
    width: 100%;
}

#modalVerRelatorio #resumoRelatorio .card-icon i{
    display: block;
    font-size: 40px;
    line-height: 0;
    flex-shrink: 0;
    flex-grow: 0;
    padding: 15px;
    border-radius: 50px;
}

#modalVerRelatorio #resumoRelatorio .sales-card .card-icon i#ok{
    color: #000;
}

#modalVerRelatorio #resumoRelatorio .sales-card .card-icon i#pendente{
    color: red;
}

#modalVerRelatorio #resumoRelatorio .sales-card .card-icon i#naoConferido{
    color: blue;
}

#modalVerRelatorio #pedidosRealizados #pedido,
#modalVerRelatorio #entradasSemCompra #entrada{
    margin-bottom: 20px;
}

#modalVerRelatorio #btnAtualizarEvento{
    margin-top: 20px;
    background-color: var(--cor-principal);
    color: #fff;
}

#modalVerRelatorio #btnAtualizarEvento:hover{
    filter: brightness(0.8);
}

#modalVerRelatorio .modal-fullscreen{
    width: 99vw;
    max-width: none;
    height: 100%;
    margin: 0 auto;
}*/


/* ### REGISTRO LICENCIADO ### */
/*#divRegistro #divPlano{
    margin: 0 auto;
}

#divRegistro #divPlano #plano {
    padding: 20px;
}

#divRegistro #divPlano #plano #conteudo {
    background: #eee;
    padding: 20px;
    border-radius: 0.375em;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

#divRegistro #divPlano #plano #conteudo i {
    font-size: 60px;
    color: var(--cor-principal);
    padding: 30px;
}

#divRegistro #divPlano #plano #conteudo ul {
    padding: 0;
    text-align: left;
}

#divRegistro #divPlano #plano #conteudo ul li {
    list-style: none;
    margin-top: 5px;
    color: #000;
}

#divRegistro #btnLicenciado{
    color: #fff;
    background-color: var(--cor-principal);
}

#divRegistro #btnLicenciado:hover{
    filter: brightness(0.8);
}

#divRegistro #divPlano h1{
    color: #000;
    font-weight: bold;
}

#divRegistro #divPlano #subtitlePlanos{
    font-size: 20px;
}

#divRegistro #divPlanos{
    margin: 0 auto;
}

#divRegistro #divPlanos #plano{
    margin: 0 auto;
}

#divRegistro #divPlanos #plano ul{
    display: flex;
    align-items: stretch;
}

#divRegistro #divPlanos #plano ul li{
    display: flex!important;
    justify-content: center;
    flex-direction: row;
    align-items: center;
}

#divRegistro #divPlanos #plano ul li #icon{
    color: var(--cor-principal);
    margin-right: 10px;
}

#divRegistro #divPlanos #plano ul li #iconeInterrogacao{
    padding: 0;
    margin-left: 10px;
}

#divRegistro #divPlanos #plano #assinarPlano{
    margin-top: 10px;
    margin-bottom: 10px;
    background-color: var(--cor-principal);
    color: #fff;    
    width: 80%;
}

#divRegistro #divPlanos #plano #assinarPlano:hover{
    filter: brightness(0.8);
}

#divRegistro #divPlanos #plano .card-header{
    color: #fff;
    font-weight: 900;
    background-color: var(--cor-principal);
}*/

/* TELA MEU PERFIL */
#meuPerfil #alterarEmail,
#meuPerfil #alterarSenha,
#meuPerfil #alterarEndereco,
#meuPerfil #alterarCondominio{
    margin-top: 30px;
}

#meuPerfil #alterarEmail h2,
#meuPerfil #alterarSenha h2,
#meuPerfil #alterarEndereco h2,
#meuPerfil #alterarCondominio h2{
    color: #000;
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
}


#meuPerfil #alterarEndereco label,
#meuPerfil #alterarEmail label,
#meuPerfil #alterarSenha label,
#meuPerfil #alterarCondominio label{
    margin-top: 20px;
}


#meuPerfil #alterarEndereco input,
#meuPerfil #alterarEmail input,
#meuPerfil #alterarSenha input,
#meuPerfil #alterarCondominio input{
    border: 1px solid #000;
}


#meuPerfil #alterarEndereco #buttonDiv,
#meuPerfil #alterarEmail #buttonDiv,
#meuPerfil #alterarSenha #buttonDiv,
#meuPerfil #alterarCondominio #buttonDiv{
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

#meuPerfil #alterarEndereco #btnAlterarEndereco,
#meuPerfil #alterarEmail #btnAlterarEmail,
#meuPerfil #alterarSenha #btnAlterarSenha,
#meuPerfil #alterarCondominio #btnAlterarCondominio{
    color: #fff;
    margin-top: 20px;
    background-color: var(--cor-principal);
    font-weight: 500;
    border: none;
    padding-left: 50px;
    padding-right: 50px;
    border-radius: 0.375em;
}

#meuPerfil #alterarEmail #btnAlterarEmail:hover,
#meuPerfil #alterarSenha #btnAlterarSenha:hover,
#meuPerfil #alterarCondominio #btnAlterarCondominio:hover{
    filter: brightness(0.8);
}

#meuPerfil #imgUsuario{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#meuPerfil #imgUsuario button{
    margin-top: 10px;
}

#meuPerfil #imgUsuario #btnAlterarFoto{
    background-color: var(--cor-secundaria);
    color: #000;
    margin-top: 10px;
}

#meuPerfil #imgUsuario #btnAlterarFoto:hover{
    filter: brightness(0.8);
}

#meuPerfil #imgUsuario #imagemUsuario{
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 100px;
    padding: 0;
    border: 1px solid #ccc;
}

#meuPerfil #dadosBasicos{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 30px;
}

#meuPerfil #dadosBasicos #informacoes{
    display: flex;
    flex-direction: column;
    padding-left: 10px;
    padding-right: 10px;
    margin: 0 auto;
}

#meuPerfil #dadosBasicos #informacoes label{
    margin-top: 10px;
}

#meuPerfil #dadosBasicos #informacoes input{
    border: 1px #000 solid;
}

#meuPerfil #dadosBasicos #informacoes input[readonly],
#meuPerfil #alterarEndereco input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#meuPerfil #menuTabsMeusDados ul{
    border-bottom: 0.5px solid #000;
}

#meuPerfil #menuTabsMeusDados .nav-link{
    color: #000;
    border: none;
    font-weight: 700;
    font-size: 1.2em;
}

#meuPerfil #menuTabsMeusDados .nav-link.active{
    border-bottom: 5px solid #000;
}

#meuPerfil #menuTabsMeusDados{
    display: flex;
    justify-content: center;
}

#alterarFotoMeuPerfil #previewImageAlterarImagem{
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 100px;
    padding: 0;
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

#meuPerfil #exclusaoDosDados{
    text-align: center;
    margin-top: 100px;
}

#meuPerfil #exclusaoDosDados h2{
    font-weight: bold;
    color: #000;
    font-size: 25px;
}

/* NOTIFICAÇÕES */
#notificacoes.dropdown {
    display:inline-block;
    margin-right: 10px;
    padding: 10px;
}

#notificacoes a#dLabel{
}

#notificacoes a#dLabel{
    color: #fff;
}

#notificacoes .glyphicon-bell {
    font-size:1.5rem;
}

#notificacoes .notifications {
    min-width: 250px;
    width: 100vw;    
}

#notificacoes .notifications-wrapper {
    overflow:auto;
    max-height:250px;
}

#notificacoes .menu-title {
    color:#02d569;
    font-size:1.2rem;
    display:inline-block;
}

#notificacoes .glyphicon-circle-arrow-right {
    margin-left:10px;     
}

#notificacoes .notification-heading, .notification-footer  {
    padding:2px 10px;
}
  
    
#notificacoes .dropdown-menu.divider {
    margin:5px 0;          
}

#notificacoes #titulo{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

#notificacoes .item-title {
    font-size:1.1rem;
    color:#000;
    display: inline-block;
    max-width: 80%;
    white-space: normal;
    word-wrap: break-word;
}

#notificacoes .notifications a.content {
    text-decoration:none;
    background:#ccc;
}
    
#notificacoes .notification-item {
    padding:10px;
    margin:5px;
    background:#ccc;
    border-radius:4px;
}

#notificacoes .dropdown-menu {
    margin-top: 0;
    max-width: 250px; /* Definir uma largura máxima para o dropdown-menu */
    overflow: auto; /* Adicionar rolagem caso o conteúdo exceda a largura máxima */
}

#notificacoes .dropdown-menu {
    right: 0; /* Alinhar o dropdown-menu à direita */
    left: auto; /* Reiniciar a posição do lado esquerdo */
}

#notificacoes .notification-wrapper {
    padding: 10px; /* Adicionar algum preenchimento interno */
}

#notificacoes .dropdown-item:hover,
#notificacoes .dropdown-item:focus,
#notificacoes .dropdown-item:active {
    background-color: transparent!important;
}

#notificacoes .notification-item:hover{
    filter: brightness(90%);
    transition: 0.5s;
}

#notificacoes .dropdown-item:active p{
    color: #000;
}

#notificacoes .listaNotificacoes #noNotifications{
    padding: 20px;
    margin-bottom: 0;
}

#notificacoes .numeroNotificacoes{
    position: absolute;
    top: 3px;
    right: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 16px;
    height: 16px;
    font-size: 12px;
    background-color: var(--cor-secundaria);
    color: white;
    border-radius: 50%;
    color: #000;
}

#notificacoes #dLabel:hover svg{
    color: #ccc;
    transition: 1s;
}

#notificacoes .listaNotificacoes small{
    font-size: 12px;
    font-weight: 400;
}

#notificacoes #linkTodasNotificacoes h4{
    color: var(--cor-principal);
}

#notificacoes #linkTodasNotificacoes:hover h4{
    color: var(--verde-principal-hover)!important;
    transition: 1s;
}

#notificacoes .notification-item .item-info{
    max-width: 100%;
    white-space: normal;
    word-wrap: break-word;
}

#notificacoes #marcarComoLida{
    color: #000;
    display: flex;
    justify-content: center;
    padding: 0;
}

#notificacoes #marcarComoLida:hover{
    color: var(--cor-principal);
    transition: 0.5s;
}

#dataTableNotificacoes{
    width: 95%;
    margin: 0 auto;
}

#dataTableNotificacoes #tableNotificacoes_wrapper{
    overflow-x: auto;
}

#dataTableNotificacoes table,
#dataTableNotificacoes table th{
    text-align: center;
}

#dataTableNotificacoes #tituloNotificacao.active{
    font-size: 20px; 
    color: var(--cor-principal); 
    font-weight: bold
}

#dataTableNotificacoes #tituloNotificacao.inactive{
    font-size: 20px; 
    color: #444;
    font-weight: bold
}

#dataTableNotificacoes #textoNotificacao.inactive{
    color: #444;
}

#dataTableNotificacoes #notificacao{
    text-align: left;
}

#dataTableNotificacoes #notificacao:hover{
    cursor: pointer;
    filter: brightness(90%);
}

/* ### TERMOS DE USO ### */
#divTermosDeUso{
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
    padding-left: 5%;
    ppadding-right: 5%;
}

#divTermosDeUso a{
    color: var(--cor-principal);
}

#divTermosDeUso h1{
    color: #000;
    font-weight: bold;
    text-align: center;
    font-size: 20pt;
}

#divTermosDeUso #top{
    text-align: center;
    margin: 30px auto;
}

#divTermosDeUso #top h2{
    font-size: 18pt;
    color: var(--cor-principal);
    font-weight: bold;
}

#divTermosDeUso #top p{
    font-size: 12pt;
    color: #333;
    font-weight: 300;
}

#divTermosDeUso #session{
    width: 90%;
    margin: 20px auto;
    text-align: justify;
}

#divTermosDeUso #session h1{
    font-size: 18pt;
    color: var(--cor-principal);
    font-weight: bold;
    text-align: justify;
    margin: 20px 0;
}

#divTermosDeUso #session p{
    font-size: 16px;
    color: #000;
    font-weight: 400;
    text-align: justify;
    margin-left: 20px;
}

#divTermosDeUso #session ul{
    margin-left: 40px;
}

#divTermosDeUso #session li{
    margin-top: 10px;
    margin-bottom: 10px;
}

#divTermosDeUso #tabela{
    overflow-x: auto;
}

/* AVALIACAO PRODUTO */
#avaliacaoProdutoModal .rating {
    display: flex;
    width: 100%;
    justify-content: center;
    overflow: hidden;
    flex-direction: row-reverse;
    height: 150px;
    position: relative;
}

#avaliacaoProdutoModal .rating-0 {
    filter: grayscale(100%);
}

#avaliacaoProdutoModal .rating > input {
    display: none;
}

#avaliacaoProdutoModal .rating > label {
    cursor: pointer;
    width: 40px;
    height: 40px;
    margin-top: auto;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23e3e3e3' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 76%;
    transition: .3s;
}

#avaliacaoProdutoModal .rating > input:checked ~ label,
#avaliacaoProdutoModal .rating > input:checked ~ label ~ label {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23fcd93a' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}


#avaliacaoProdutoModal .rating > input:not(:checked) ~ label:hover,
#avaliacaoProdutoModal .rating > input:not(:checked) ~ label:hover ~ label {
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='126.729' height='126.73'%3e%3cpath fill='%23d8b11e' d='M121.215 44.212l-34.899-3.3c-2.2-.2-4.101-1.6-5-3.7l-12.5-30.3c-2-5-9.101-5-11.101 0l-12.4 30.3c-.8 2.1-2.8 3.5-5 3.7l-34.9 3.3c-5.2.5-7.3 7-3.4 10.5l26.3 23.1c1.7 1.5 2.4 3.7 1.9 5.9l-7.9 32.399c-1.2 5.101 4.3 9.3 8.9 6.601l29.1-17.101c1.9-1.1 4.2-1.1 6.1 0l29.101 17.101c4.6 2.699 10.1-1.4 8.899-6.601l-7.8-32.399c-.5-2.2.2-4.4 1.9-5.9l26.3-23.1c3.8-3.5 1.6-10-3.6-10.5z'/%3e%3c/svg%3e");
}

#avaliacaoProdutoModal .emoji-wrapper {
    width: 100%;
    text-align: center;
    height: 100px;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

#avaliacaoProdutoModal .emoji-wrapper:before,
#avaliacaoProdutoModal .emoji-wrapper:after{
    content: "";
    height: 15px;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: 1;
}

#avaliacaoProdutoModal .emoji-wrapper:before {
    top: 0;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
}

#avaliacaoProdutoModal .emoji-wrapper:after{
    bottom: 0;
    background: linear-gradient(to top, rgba(255,255,255,1) 0%,rgba(255,255,255,1) 35%,rgba(255,255,255,0) 100%);
}

#avaliacaoProdutoModal .emoji {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: .3s;
}

#avaliacaoProdutoModal .emoji > svg {
    margin: 15px 0; 
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}

#avaliacaoProdutoModal #rating-1:checked ~ .emoji-wrapper > .emoji { transform: translateY(-100px); }
#avaliacaoProdutoModal #rating-2:checked ~ .emoji-wrapper > .emoji { transform: translateY(-200px); }
#avaliacaoProdutoModal #rating-3:checked ~ .emoji-wrapper > .emoji { transform: translateY(-300px); }
#avaliacaoProdutoModal #rating-4:checked ~ .emoji-wrapper > .emoji { transform: translateY(-400px); }
#avaliacaoProdutoModal #rating-5:checked ~ .emoji-wrapper > .emoji { transform: translateY(-500px); }

#avaliacaoProdutoModal .feedback {
    max-width: 360px;
    background-color: #fff;
    width: 100%;
    padding: 30px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    box-shadow: 0 4px 30px rgba(0,0,0,.05);    
    margin: 0 auto;
}

#avaliacaoProdutoModal #divComentario{
    width: 100%;
    margin-top: 20px;
}

#avaliacaoLojaModal .bloco-avaliacao {
    margin-bottom: 20px;
    text-align: left;
}

#avaliacaoLojaModal .bloco-avaliacao label {
    display: block;
    font-weight: bold;
    margin-bottom: 5px;
}

#avaliacaoLojaModal .estrelas {
    unicode-bidi: bidi-override;
    direction: rtl;
    display: inline-flex;
}

#avaliacaoLojaModal .estrelas span {
    font-size: 26px;
    color: #ccc;
    cursor: pointer;
}

#avaliacaoLojaModal .estrelas span.selecionada,
#avaliacaoLojaModal .estrelas span.hover {
    color: #FFD700;
}


/* ### MEUS CHATS ### */
#meusChats #chatMessages{
    padding: 30px;
}

#meusChats #divMyMsg,
#viewChat #divMyMsg {
    text-align: right;
    margin-top: 10px;
}

#meusChats #divOtherMsg,
#viewChat #divOtherMsg{
    margin-top: 10px;
}

#meusChats #myMsg ,
#viewChat #myMsg {
    min-width: 100px;
    max-width: 50%;
    display: inline-block;
    background: #02d568;
    padding: 10px;
    text-align: left;
    border-radius: 0.375em;
}

#meusChats #otherMsg,
#viewChat #otherMsg {
    min-width: 100px;
    max-width: 50%;
    display: inline-block;
    background: #69F0AA;
    padding: 10px;
    text-align: left;
    border-radius: 0.375em;
}

#meusChats #hora ,
#viewChat #hora {
    color: #555;
    margin-top: 4px;
    font-size: 12px;
}

#meusChats #formChat{
    display: flex;
    justify-content: space-between;
    padding: 0px 10px;
}

#meusChats #formChat textarea{
    width: 100%;
}

#meusChats #btnEnviar {
    background-color: #000;
    color: #fff;
    aspect-ratio: 1/1;
    height: 100%;
}

#previewImage{
    display: none;
    width: 300px;
    height: 400px;
    object-fit: contain;
}

#meusChats #myMsg img,
#meusChats #otherMsg img,
#viewChat #myMsg img,
#viewChat #otherMsg img{
    width: 100%;
    max-width: 300px;
    object-fit: contain;
    aspect-ratio: 1/1;
    background-color: #fff;
}

#meusChats #pdfFile,
#viewChat #pdfFile{
    color: #000;
    font-size: 18px;
    text-decoration: none;
    background-color: #fff;
    padding: 5px;
    border-radius: 0.375em;
}

#meusChats #pdfFile i,
#viewChat #pdfFile i{
    color: red;
    font-size: 20px;
}

#meusChats{
    min-height: 500px;
    width: 100%;
    margin: 0 auto;
}

#meusChats #viewChat,
#viewChat{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 2px #555 solid;
    padding: 0;
    /* max-height: 70vh; */
}

#meusChats #noMessages,
#viewChat #noMessages{
    text-align: center;
    margin-top: 200px;
}

#meusChats #listaChats {
    border-right: 2px #555 solid;
    border-bottom: 2px #555 solid;
}

#meusChats #chat {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    background-color: var(--verde-claro);
    align-items: center;
    border-radius: 0.375em;
    margin: 10px;
}

#meusChats #chat:hover{
    cursor: pointer;
    box-shadow: 0.2rem 0.2rem 1px #555;
    translate: -0.2rem -0.2rem;
}

#meusChats #iconChat {
    background-color: #fff;
    border-radius: 100px;
    width: 30px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#meusChats #tituloChat {
    margin: 0;
    margin-left: 5px;
}

#meusChats #pSelecioneChat {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#meusChats #bodyChat{
    height: 500px;
    overflow-y: scroll;
}

#meusChats #topChat{
    padding: 20px;
    font-size: 18px;
    font-weight: 500;
    color: #000;
    text-align: center;
    box-shadow: 0px 4px 4px -2px rgba(0, 0, 0, 0.5);
    z-index: 10;
}
#meusChats #topChat #buttonVoltar button{
    padding: 0;
}

#meusChats #naoLidas{
    margin-left: 5px;
    background-color: #000;
    color: #fff;
    border-radius: 100px;
    width: 28px;
    aspect-ratio: 1/1;
    display: flex;
    justify-content: center;
    align-items: center;
}

#meusChats #naoLidas.hidden{
    visibility: hidden;
}

#dataTableDisputas a{
    text-decoration: none;
}

#dataTableDisputas #btnChatDisputa,
#dataTableDisputas #btnCriarChat{
    background-color: var(--cor-principal);
    color: #fff;
}

#dataTableDisputas #btnChatDisputa:hover,
#dataTableDisputas #btnCriarChat:hover{
    filter: brightness(0.8);
}

#modalDisputa #btnEnviar{
    background-color: var(--cor-principal);
    color: #fff;
}

#modalDisputa #btnEnviar:hover{
    filter: brightness(0.8);
}

#modalDisputa label{
    margin-top: 5px;
}


/* BLOG */
#divCadastroPost{
    width: 90%;
    margin: 0 auto;
    border: 5px var(--verde-claro) solid;
    border-radius: 0.375em;
    padding: 20px;
}

#divCadastroPost .tab{
    display: none;
}

#divCadastroPost h1{
    color: #000;
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
}


#divCadastroPost #formCadastroPost label,
#divCadastroPost #formEdicaoPost label{
    margin-top: 10px;
}

#divCadastroPost .select2-container{
    z-index: 1;
}
#divCadastroPost #buscaCategorias .select2-search__field,
#divCadastroPost #cadastroTags .select2-search__field{
    min-height: 22px;
}

#divCadastroPost #buscaCategorias .select2-selection--multiple{
    min-height: 38px;
    border-radius: 0.375em;
    padding-left: 12px;
    padding-bottom: 10px;
}

#divCadastroPost #cadastroTags .select2-selection--multiple{
    min-height: 38px;
    border-radius: 0.375em;
    padding-left: 12px;
    padding-bottom: 10px;
}

#divCadastroPost #imgCapaPost{
    width: 200px;
    aspect-ratio: 1/1;
    object-fit: cover;
}

#divCadastroPost #divFotoCapaPost{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#divCadastroPost #buttonsTabs{
    display: flex;
    justify-content: space-between;
}


#divCadastroPost #buttonsTabs #nextBtn, 
#divCadastroPost #buttonsTabs #prevBtn,
#divCadastroPost #buttonsTabs #btnCadastrar,
#divCadastroPost #buttonsTabs #btnAtualizar{
    color: #fff;
    background-color: var(--cor-principal);
    margin-left: 10px;
}

#divCadastroPost #buttonsTabs #nextBtn:hover, 
#divCadastroPost #buttonsTabs #prevBtn:hover,
#divCadastroPost #buttonsTabs #btnCadastrar:hover,
#divCadastroPost #buttonsTabs #btnAtualizar:hover{
    filter: brightness(0.8);
}

/* PAGINA BLOG */
#paginaBlog #postsBlog,
#paginaPost #ultimosPosts{
    padding: 20px;
}

#paginaBlog #postsBlog .card,
#paginaPost #ultimosPosts .card,
#paginaPost #sessaoComentarios .card{
    box-shadow: none;
}

#paginaBlog #postsBlog .card-body,
#paginaPost #ultimosPosts .card-body{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#paginaPost #sessaoComentarios .card{
    border: 1px solid #000;
    border-radius: 0.375em;
    margin-top: 20px;
}

#paginaBlog #postsBlog .card-title,
#paginaPost #ultimosPosts .card-title{
    color: #000;
}

#paginaPost #ultimosPosts .card-title{
    font-size: 15px;
    display: flex;
    justify-content: center;
    text-align: justify;
}

#paginaBlog #postsBlog #post #conteudo{
    box-shadow: 0px 0px 15px rgba(0,0,0, 0.3);
    border-radius: 0.375em;
    max-width: 300px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#paginaPost #ultimosPosts #post #conteudo{
    border: 3px var(--verde-claro) solid;
    border-radius: 0.375em;
    max-width: 300px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#paginaBlog #postsBlog #post,
#paginaPost #ultimosPosts #post{
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    border: none
}

#paginaBlog #postsBlog #post #imgPost,
#paginaPost #ultimosPosts #post #imgPost{
    max-width: 300px;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: center center;
}

#paginaPost #conteudoPost{
    overflow-x: auto;
    padding: 30px;
}

#paginaPost #conteudoPost img{
    object-fit: contain;
    max-width: 100%;
}

#paginaPost #titulo{
    max-width: 90%;
    color: var(--cor-principal);
    font-weight: bold;
    text-align: center;
    margin: 20px auto;
    font-size: 1.5rem;
}

#paginaPost #postInfo{
    display: flex;
    justify-content: center;
    color: #666;
    font-weight: 300;
    text-align: center;
}

#paginaPost #postInfo p{
    margin: 20px;
}

#paginaBlog #btnLerPost,
#paginaPost #btnLerPost{
    background-color: var(--cor-principal);
    color: #fff;
}

#paginaBlog #btnLerPost:hover,
#paginaPost #btnLerPost:hover{
    filter: brightness(0.8);
}

#paginaPost #tituloUltimosPosts,
#paginaPost #tituloComentarios{
    color: #000;
    text-align: center;
    font-weight: bold;
    font-size: 20px;
}

#paginaPost #sessaoComentarios{
    width: 90%;
    margin: 0 auto;
}

#paginaPost #sessaoComentarios #formNovoComentario{
    display: flex;
}

#paginaPost #sessaoComentarios #btnEnviarComentario{
    background-color: var(--cor-principal);
    color: #fff;
}

#paginaPost #sessaoComentarios #btnEnviarComentario:hover{
    filter: brightness(0.8);
}

#paginaPost #sessaoComentarios #listaComentarios{
    padding: 20px;
}

#paginaPost #sessaoComentarios #semComentarios{
    text-align: center;
    margin-top: 40px;
}

#paginaBlog #post #categoria,
#paginaPost #categoriasPost #categoria{
    padding: 5px;
    background-color: var(--cor-secundaria);
    margin: 5px;
    border-radius: 0.375em;
}

#paginaBlog #post #categoria:hover,
#paginaPost #categoriasPost #categoria:hover{
    color: #666;
    transition: 0.2s;
}

#paginaBlog #categoriasPost a{
    margin-bottom: 10px;
}

#paginaBlog #categoriasPost{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#paginaBlog #post a,
#paginaPost #categoriasPost a,
#paginaBlog #linkBlog{
    color: #000;
    text-decoration: none;
}

#paginaBlog #linkBlog{
    color: var(--cor-principal);
}

#paginaPost #categoriasPost{
    text-align: center;
}

#paginaBlog h1{
    text-align: center;
    margin: 20px auto;
    font-weight: bold;
    color: var(--cor-principal);
}

#paginaBlog #dataAutor{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    color: #666!important;
    margin-top: 10px;
}

#paginaBlog #buscaPosts{
    width: 90%;
    margin: 0 auto;
}

#paginaBlog #buscaPosts #formBusca{
    display: flex;
}

#paginaBlog #buscaPosts #formBusca button{
    background-color: var(--cor-principal);
    color: #000;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#paginaBlog #buscaPosts #formBusca input{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#paginaBlog #noResultsPost{
    text-align: center;
    color: var(--cor-principal);
    font-weight: bold;
    font-size: 25px;
}

#paginaBlog #pagination{
    margin: 0 auto;
    text-align: center;
}

#paginaBlog #labelPagination{
    margin-left: 10px;
}

#paginaBlog #pagination #btnPagination{
    margin: 5px;
    background-color: var(--cor-principal);
    color: #fff;
}

#paginaBlog #pagination #btnPagination:hover{
    background-color: #000;
}

/* #### NOTIFICACOES #### */
#listaNotificacoes{
    width: 90%;
    margin: 0 auto;
}

#listaNotificacoes #notificacoes #notificacao .card-header{
    display: flex;
    justify-content: space-between;
}

#listaNotificacoes #notificacoes #notificacao .card-header h5,
#listaNotificacoes #notificacoes #notificacao .card-header p{
    margin-bottom: 0;
}

#listaNotificacoes #notificacoes #notificacao .card-header #tagNova{
    margin-left: 15px;
    color: var(--cor-principal);
    font-weight: bold;
}

#listaNotificacoes #notificacoes #notificacao .card-header #tagLida{
    margin-left: 15px;
    color: #777;
}


/* ALTERAÇÕES NO CABEÇALHO E RODAPÉ PARA PERMITIR A PERSONALIZAÇÃO PARA LOJAS */
#header:not(.builder-active),
.footer:not(.builder-active),
#bottomMenu,
#subHeader{
    background-color: var(--cor-cabecalho)!important;
    color: var(--cor-texto-cabecalho)
}

#header:not(.builder-active) .nav-link,
#header:not(.builder-active) i,
#header:not(.builder-active) a,
.footer:not(.builder-active) a,
.footer:not(.builder-active) p{
    color: var(--cor-texto-cabecalho);
}

#header #carrinho .numero,
#header #notificacoes .numeroNotificacoes,
#header #mensagens .numero{
    background-color: var(--cor-principal);
    transition: 0.2s;
    color: var(--cor-texto-cabecalho);
}

#header #carrinho:hover .numero,
#header #notificacoes:hover .numeroNotificacoes,
#header #mensagens:hover .numero{
    background-color: var(--cor-principal);
    filter: brightness(0.8);
}


#subHeader #btnBusca{
    background-color: var(--cor-principal)!important;
    transition: 0.2s;
}

#subHeader #btnBusca:hover{
    filter: brightness(0.8);
}

#header .dropdown-menu a{
    color: #000!important;
}


/* ####### PDV ####### */
#mainPDV{
    width: 100%;
    height: calc(100vh - 88.5px);
    margin-top: 88.5px;
}

/* PDV FECHADO */
#divAbrirPDV{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
}

#divAbrirPDV #boxAbrirPDV{
    background-color: #fff;
    padding: 30px;
    width: 50%;
    max-width: 400px;
    min-height: 300px;
    border-radius: 0.375em;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

#divAbrirPDV #boxAbrirPDV #topoBox{
    text-align: center;
}

#divAbrirPDV #boxAbrirPDV #topoBox h1,
#divPDVAberto #topoTela h1{
    font-weight: 800;
    font-size: 40px;
    color: var(--cor-principal);
    margin-bottom: 0;
}

#divAbrirPDV #boxAbrirPDV #topoBox p,
#divPDVAberto #topoTela p{
    color: #666666
}

#divAbrirPDV #boxAbrirPDV i{
    font-size: 122px;
}

#divAbrirPDV #boxAbrirPDV #btnAbrirPDV{
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    transition: 0.2s;
    padding-left: 20px;
    padding-right: 20px;
}

#divAbrirPDV #boxAbrirPDV #btnAbrirPDV:hover{
    filter: brightness(0.8);
}

#divPDVAberto{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px;
}

#divPDVAberto #botoesPDV{
    display: flex;
    justify-content: space-between;
    height: 80%;
}

#divPDVAberto #botoesPDV #botoesLeft,
#divPDVAberto #botoesPDV #botoesRight{
    width: 100%;
    padding: 20px;
}

#divPDVAberto #botoesPDV #botoesLeft .row,
#divPDVAberto #botoesPDV #botoesRight .row{
    height: 100%;
}

#divPDVAberto #botoesPDV #botoesLeft button,
#divPDVAberto #botoesPDV #botoesRight button{
    margin: 10px;
    transition: 0.2s;
}

#divPDVAberto #botoesPDV #botoesLeft button:hover,
#divPDVAberto #botoesPDV #botoesRight button:hover{
    filter: brightness(0.8);
}


#divPDVAberto #botoesPDV #botoesLeft #btnIniciarVenda{
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    margin: 0 10px;
}

#divPDVAberto #botoesPDV #botoesRight button{
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

#divPDVAberto #botoesPDV #botoesLeft button .badge,
#divPDVAberto #botoesPDV #botoesRight button .badge{
    font-weight: 400;
    font-size: 15px;
}

#novaVendaPDV,
#finalizarVendaPDV{
    padding: 30px 20px 10px 20px;
    height: 100%;
}

#novaVendaPDV #linhaPrincipal{
    height: 60%;
}

#novaVendaPDV #linhaPrincipal #informacoesProduto{
    height: 100%;
}

#novaVendaPDV #linhaProduto{
    height: 80%;
}

#novaVendaPDV #inputNovoProduto{
    display: flex;
}

#novaVendaPDV #divListaProdutos h2{
    font-weight: 800;
    font-size: 20px;
    text-align: center;
}

#novaVendaPDV #divListaProdutos #listaProdutos{
    background-color: #EEEEEE;
    padding: 20px;
    border-radius: 0.375em;
    font-weight: 500;
    height: 90%;
    overflow-y: auto;
}

#novaVendaPDV #inputNovoProduto #btnAdicionar{
    background-color: var(--cor-principal);
    color: #fff;
    font-weight: bold;
    transition: 0.2s;
}

#novaVendaPDV #inputNovoProduto #btnAdicionar:hover{
    filter: brightness(0.8);
}

#novaVendaPDV #divFotoProduto{
    height: 100%;
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
}

#novaVendaPDV #divFotoProduto #fotoProduto{
    width: 100%;
    max-height: 80%;
    object-fit: contain;
}

#novaVendaPDV #divPrecoProduto{
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

#novaVendaPDV #divPrecoProduto #divSubtotalProduto,
#novaVendaPDV #divPrecoProduto #divDescontoProduto,
#novaVendaPDV #divPrecoProduto #divTotalProduto{
    margin-top: 30px;
}

#novaVendaPDV #bottomPDV{
    height: 40%;
}

#novaVendaPDV #bottomPDV #resumoPedido{
    height: 40%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

#novaVendaPDV #bottomPDV #resumoPedido div{
    padding-left: 10px;
    padding-right: 10px;
}

#novaVendaPDV #bottomPDV #botoesPedido{
    height: 30%;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
}

#finalizarVendaPDV #botoesPedido{
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
}

#novaVendaPDV #bottomPDV #botoesPedido button,
#finalizarVendaPDV #botoesPedido button{
    background-color: var(--cor-principal);
    color: #fff;
    font-weight: bold;
    transition: 0.2s;
}

#novaVendaPDV #bottomPDV #botoesPedido button.red,
#finalizarVendaPDV #botoesPedido button.red{
    background-color: red;
}

#novaVendaPDV #bottomPDV #botoesPedido button:hover,
#finalizarVendaPDV #botoesPedido button:hover{
    filter: brightness(0.8);
}

#novaVendaPDV #bottomPDV #botoesPedido button .badge,
#finalizarVendaPDV #botoesPedido button .badge{
    font-weight: 400;
    font-size: 13px;
}

#novaVendaPDV #bottomPDV #footerPDV{
    height: 30%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
}

#finalizarVendaPDV{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#finalizarVendaPDV #footerPDV{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 12px;
}

#finalizarVendaPDV h1{
    color: var(--cor-principal);
    font-weight: bold;
    text-align: center;
}

#finalizarVendaPDV #botoesPagamento{
    display: flex;
    justify-content: center;
}

#finalizarVendaPDV #botoesPagamento button{
    background-color: var(--cor-principal);
    color: #fff;
    font-weight: bold;
    margin: 10px;
    min-width: 100px;
    aspect-ratio: 1/1;
    transition: 0.2s;
}

#finalizarVendaPDV #botoesPagamento button:hover{
    filter: brightness(0.8);
}

#finalizarVendaPDV #resumoPedido{
    display: flex;
    justify-content: center;
}

#finalizarVendaPDV #resumoPedido div{
    padding-left: 10px;
    padding-right: 10px;
}



#mainPDV2{
    width: 100%;
    height: 100vh;
    background-color:#ccc;
}

#segundaTelaPDV{
    padding: 30px 20px 10px 20px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#segundaTelaPDV #pedidoAtivo{
    height: 100%;
}

#segundaTelaPDV #resumoPedido{
    height: 20%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#segundaTelaPDV #resumoPedido div{
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}

#segundaTelaPDV #divListaProdutos{
    height: 60%;
}

#segundaTelaPDV #divListaProdutos h2{
    font-weight: 800;
    font-size: 20px;
}

#segundaTelaPDV #divListaProdutos #listaProdutos{
    background-color: #EEEEEE;
    padding: 20px;
    border-radius: 0.375em;
    font-weight: 500;
    height: 90%;
    overflow-y: auto;
}

#segundaTelaPDV #divLogoPDV {
    height: 20%;
    display: flex;
    align-items: center;
}

#segundaTelaPDV #divLogoPDV #logoPDV {
    max-width: 300px;
    max-height: 100px;
    margin: 0px auto;
    display: flex;
    justify-content: center;
    border-radius: 100%;
}

#segundaTelaPDV #caixaFechado,
#segundaTelaPDV #caixaAberto{
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    padding: 30px;
    width: 50%;
    max-width: 400px;
    min-height: 300px;
    border-radius: 0.375em;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: flex;
}

#segundaTelaPDV #caixaFechado h1,
#segundaTelaPDV #caixaAberto h1{
    font-size: 60px;
    font-weight: 800;
}

#segundaTelaPDV #caixaFechado h1{
    color: red;
}

#segundaTelaPDV #caixaAberto h1{
    color: green
}

#segundaTelaPDV #caixaFechado p,
#segundaTelaPDV #caixaAberto p{
    font-size: 25px;
    color: #666;
}

/* PDV MOBILE */
#divPDVAberto.mobile .row{
    margin: 0;
}

#divAbrirPDV.mobile{
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #ccc;
}

#divAbrirPDV.mobile #boxAbrirPDV{
    background-color: #fff;
    padding: 30px;
    width: 90%;
    max-width: 300px;
    min-height: 300px;
    border-radius: 0.375em;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

#divAbrirPDV.mobile #boxAbrirPDV #topoBox{
    text-align: center;
}

#divAbrirPDV.mobile #boxAbrirPDV #topoBox h1,
#divPDVAberto.mobile #topoTela h1{
    font-weight: 800;
    font-size: 40px;
    color: var(--cor-principal);
    margin-bottom: 0;
}

#divAbrirPDV.mobile #boxAbrirPDV #topoBox p,
#divPDVAberto.mobile #topoTela p{
    color: #666666
}

#divAbrirPDV.mobile #boxAbrirPDV i{
    font-size: 122px;
}

#divAbrirPDV.mobile #boxAbrirPDV #btnAbrirPDV{
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    transition: 0.2s;
    padding-left: 20px;
    padding-right: 20px;
}

#divAbrirPDV.mobile #boxAbrirPDV #btnAbrirPDV:hover{
    filter: brightness(0.8);
}

#divPDVAberto.mobile{
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px;
}

#divPDVAberto.mobile #botoesPDV{
    display: flex;
    justify-content: space-between;
    height: 80%;
}

#divPDVAberto.mobile #botoesPDV{
    width: 100%;
    padding: 20px;
}

#divPDVAberto.mobile #botoesPDV .row{
    height: 100%;    
    display: flex;
    justify-content: center;
}

#divPDVAberto.mobile #botoesPDV button{
    margin: 10px;
    transition: 0.2s;
    width: 90%;
}

#divPDVAberto.mobile #botoesPDV button:hover{
    filter: brightness(0.8);
}


#divPDVAberto.mobile #botoesPDV #btnIniciarVenda{
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 20px;
    font-weight: bold;    
}

#divPDVAberto.mobile #botoesPDV button.others{
    background-color: var(--cor-principal);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    opacity: 0.7;
}

#divPDVAberto.mobile #botoesPDV button .badge{
    font-weight: 400;
    font-size: 15px;
}

#novaVendaPDV.mobile,
#finalizarVendaPDV.mobile{
    padding: 10px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#novaVendaPDV.mobile h1,
#finalizarVendaPDV.mobile h1{
    text-align: center;
    color: var(--cor-principal);
    font-weight: bold;
    font-size: 20px;
}

#novaVendaPDV.mobile #linhaPrincipal{
    height: auto;
}

#novaVendaPDV.mobile #linhaPrincipal #informacoesProduto{
    height: auto;
}

#novaVendaPDV.mobile #linhaPrincipal #divBtnCodigoDeBarras{
    display: flex;
    justify-content: center;
    padding: 10px;
}

#novaVendaPDV.mobile #linhaPrincipal #divBtnCodigoDeBarras button{
    background-color: var(--cor-principal);
    color: #fff;
}

#novaVendaPDV.mobile #linhaPrincipal #divBtnCodigoDeBarras button:hover{
    filter: brightness(0.8);
}

#novaVendaPDV.mobile #linhaProduto{
    height: 80%;
}

#novaVendaPDV.mobile #inputNovoProduto{
    display: flex;
}

#novaVendaPDV.mobile #divListaProdutos{
    margin-top: 15px;
}

#novaVendaPDV.mobile #divListaProdutos h2{
    font-weight: 800;
    font-size: 20px;
    text-align: center;
}

#novaVendaPDV.mobile #divListaProdutos #listaProdutos{
    background-color: #EEEEEE;
    padding: 20px;
    border-radius: 0.375em;
    font-weight: 500;
    height: 90%;
    overflow-y: auto;
    max-height: 200px;
}

#novaVendaPDV.mobile #inputNovoProduto #btnAdicionar{
    background-color: var(--cor-principal);
    color: #fff;
    font-weight: bold;
    transition: 0.2s;
}

#novaVendaPDV.mobile #inputNovoProduto #btnAdicionar:hover{
    filter: brightness(0.8);
}

#novaVendaPDV.mobile #divFotoProduto{
    height: auto !important;
    display: flex;
    align-items: center;
    margin-top: 15px;
    margin-bottom: 15px;
    justify-content: space-around;
}

#novaVendaPDV.mobile #divFotoProduto #fotoProduto{
    width: 100%;
    max-width: 250px;
    max-height: 100px;
    object-fit: contain;
}

#novaVendaPDV.mobile #divPrecoProduto {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#novaVendaPDV.mobile #divPrecoProduto #divTotalProduto{
    margin-top: 0px;
    width: 90%;
}

#novaVendaPDV.mobile #bottomPDV{
    height: auto;
}

#novaVendaPDV.mobile #bottomPDV #resumoPedido{
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
}

#novaVendaPDV.mobile #bottomPDV #resumoPedido div{
    padding: 5px 15px;
}

#novaVendaPDV.mobile #bottomPDV #botoesPedido,
#finalizarVendaPDV.mobile #botoesPedido{
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: flex-end;
    flex-wrap: wrap;
}

#novaVendaPDV.mobile #bottomPDV #botoesPedido button,
#finalizarVendaPDV.mobile #botoesPedido button{
    background-color: var(--cor-principal);
    color: #fff;
    font-weight: bold;
    transition: 0.2s;
    width: 45%;
    margin-top: 10px;
    font-size: 15px;
}

#novaVendaPDV.mobile #bottomPDV #botoesPedido button.red,
#finalizarVendaPDV.mobile #botoesPedido button.red{
    background-color: red;
}

#novaVendaPDV.mobile #bottomPDV #botoesPedido button:hover,
#finalizarVendaPDV.mobile #botoesPedido button:hover{
    filter: brightness(0.8);
}

#novaVendaPDV.mobile #bottomPDV #botoesPedido button .badge,
#finalizarVendaPDV.mobile #botoesPedido button .badge{
    font-weight: 400;
    font-size: 13px;
}

#novaVendaPDV.mobile #bottomPDV #footerPDV,
#finalizarVendaPDV.mobile #footerPDV{
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    margin-top: 20px;
    
    text-align: center;
}

#finalizarVendaPDV.mobile{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#finalizarVendaPDV.mobile #botoesPagamento{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

#finalizarVendaPDV.mobile #botoesPagamento button{
    background-color: var(--cor-principal);
    color: #fff;
    font-weight: bold;
    margin: 5px;
    width: 100%;
    transition: 0.2s;
    aspect-ratio: 0;
}

#finalizarVendaPDV.mobile #botoesPagamento button:hover{
    filter: brightness(0.8);
}

#finalizarVendaPDV.mobile #resumoPedido{
    display: flex;
    justify-content: center;
}

#finalizarVendaPDV.mobile #resumoPedido div{
    padding: 10px 15px;
}

/* TELA VENDAS CONSIGNADOS */
#valoresVendas{
    display: flex;
    justify-content: center;
}

#valoresVendas .card-title{
    color: #000;
    font-weight: bold;
}

#valoresVendas .card-body{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#valoresVendas .card-body h6{
    font-size: 20px;
    font-weight: bold;
    color: #000;
}

#valoresVendas .card-body h6 small{
    font-size: 16px;
    font-weight: 600;
    color: #666;
}

#valoresVendas .info-card{
    height: 100%;
}

#valoresVendas .info-card h6{
    font-size: 23px;
    color: var(--cor-principal);
    font-weight: 700;
    margin: 0;
    padding: 0;
    width: 100%;
}

#divTabelaVendas{
    margin-top: 20px;
    padding: 10px;
    text-align: center;
}

#divTabelaVendas table tr{
    vertical-align: middle;
}

#divTabelaVendas #btnPagamento{
    color: #fff;
    background-color: var(--cor-principal);   
}

#divTabelaVendas #btnPagamento:hover{
    filter: brightness(0.8);
}

#divTabelaProutos #btnVerVendas{
    color: #fff;
    background-color: var(--cor-principal);
    float: right;
    margin-top: 10px;
    margin-bottom: 30px;
}

#divTabelaProutos #btnVerVendas:hover{
    filter: brightness(0.8);
}

#divTabelaProutos #tabelaProutos #imgLista{
    object-fit: contain;
    width: 100px;
    height: 100px;
}

#divTabelaProutos #tabelaProutos tr{
    vertical-align: middle;
}

#divTabelaProutos #tabelaProutos button{
    color: #fff;
    background-color: var(--cor-principal);
}

#divTabelaProutos #tabelaProutos button:hover{
    filter: brightness(0.8);
}

/* INDICADORES NA HOME */
#sessaoImpacto{
    margin-bottom: 30px;
}

#sessaoImpacto #indicador{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    vertical-align: baseline;
}

#sessaoImpacto #indicador .conteudo {
    border-radius: 0.375em;
    background-color: #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

#sessaoImpacto #indicador .conteudo #iconIndicador {
    display: flex;
    padding: 5px;
    border-radius: 100px;
    background-color: #fff;
    margin-bottom: 10px;
    width: 60px;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#sessaoImpacto h1{
    text-transform: uppercase;
    font-size: 20pt;
    font-weight: 400;
    text-align: center;
    margin-top: 50px;
}

#sessaoImpacto #indicador .conteudo #iconIndicador i {
    font-size: 30px;
}

#sessaoImpacto #indicador .conteudo #numeroIndicador {
    font-size: 1.3em;
    font-weight: bold;
}

#sessaoImpacto #indicador #residuosEvitados i{
    color: var(--abobora);
}

#sessaoImpacto #indicador #recursosNaoExtraidos i{
    color: var(--verde-escuro);
}

#sessaoImpacto #indicador #aguaEconomizada i{
    color: aqua;
}

/* PAGINA DE CADASTRO DE PRODUTO RESERVÁVEL */
#divCadastroProdReservavel h1{
    font-size: 20pt;
    font-weight: 900;
    color: #000;
}

#divCadastroProdReservavel #maxCaracteres,
#divCadastroProdVenda #maxCaracteres{
    color: #888;
    font-size: 14px;
}

#divEsqueciMinhaSenha{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
    align-content: center;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px;
}

#divCadastroProdReservavel{
    display: flex;
    justify-content: center;
    align-items: center;    
    align-content: flex-start;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 20px;
}

@media (max-width: 1199px) {
    #divCadastroProdReservavel {
        height: auto;
    }
}

#formCadastroProdutoReserva{
    width: 100%;
    text-align: center;
}

#divCadastroProdReservavel .select2-container{
    z-index: 1;
}

#divCadastroProdReservavel #box{
    width: 90%;
    padding: 30px;
    border-radius: 0.375em;
    margin: 0 auto;
    /* background-color: var(--cor-secundaria); */
    border: 5px solid var(--cor-secundaria);
    text-align: center;
}

#divCadastroProdReservavel #box.popup{
    width: 90%;
    padding: 30px;
    border-radius: 0.375em;
    margin: 0 auto;
    background-color: #fff;
    border: 5px solid var(--cor-secundaria);
    text-align: center;
}


#divCadastroProdReservavel #box h1{
    color: #000;
    text-align: center;
}

#divCadastroProdReservavel input,
#divCadastroProdReservavel select,
#divCadastroProdReservavel select + .select2-container .select2-selection--single,
#divCadastroProdReservavel select + .select2-container .select2-selection--multiple{
    border: 1px #000 solid;
}

#divCadastroProdReservavel .select2-container,
#divCadastroProdVenda .select2-container{
    z-index: 1;
}

#divCadastroProdReservavel #box #tabs{
    height: 85%;
}

#divCadastroProdReservavel #box #buttonsTabs{
    height: 15%;
    overflow: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
}

#divCadastroProdReservavel #box form{
    text-align: left;
    height: 100%;
}

#divCadastroProdReservavel #box form input,
#divCadastroProdReservavel #box form select,
#divCadastroProdReservavel #box form textarea{
    border-radius: 0.375em;
}

#divCadastroProdReservavel #box form label{
    margin-top: 30px;
}

#divCadastroProdReservavel #box form #linha{
    margin: 0;
    padding: 0;
}

#divCadastroProdReservavel #box img.prodImage{
    border-radius: 20px;
    width: 170px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#divCadastroProdReservavel #box #images{
    text-align: center;
}

#divCadastroProdReservavel #box #images p{
    margin-bottom: 0px;
    margin-top: 15px;
}

#divCadastroProdReservavel #box #images #image{
    padding-top: 20px;
    padding-bottom: 20px;
}

#divCadastroProdReservavel #box #dropdownSelectCategorias button,
#divCadastroProdReservavel #box #dropdownSelectCategorias .dropdown-menu, 
#divCadastroProdReservavel #box #selectCategoria{
    width: 100%;
}

#divCadastroProdReservavel #box #dropdownSelectCategorias button{
    text-align: left;
    background-color: #fff;
    color: #000;
    border: none;
    border-radius: 0.375em;
}

#divCadastroProdReservavel #box #dropdownSelectCategorias input[type=checkbox]{
    border: none;
}

#divCadastroProdReservavel #box #descricaoCurtaCadastroProd,
#divCadastroProdReservavel #box #descricaoCadastroProd{
    min-height: 200px;
}

#divCadastroProdReservavel #box #btnCadastrar,
#divCadastroProdReservavel #box #btnSalvarEditar{
    margin-top: 10px;
    background-color: var(--cor-principal);
    font-weight: 500;
    border: none;
    padding-left: 50px;
    padding-right: 50px
}

#divCadastroProdReservavel #box #politicaRigorosa p, 
#divCadastroProdReservavel #box #politicaFlexivel p,
#divCadastroProdReservavel #box #politicaModerada p{
    font-size: 1.25em;
    width: 70%;
    text-align: center;
    margin: 30px auto;
}

#divCadastroProdReservavel #box #politicaRigorosa, 
#divCadastroProdReservavel #box #politicaFlexivel{
    display: none;
}

#divCadastroProdReservavel #box #localizacaoProduto{
    display: none;
}

#divCadastroProdReservavel #box #localizacaoProduto input{
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 0.375em;
}

#divCadastroProdReservavel #box #opcoesLogisticas input{
    margin-bottom: 25px;
    border-radius: 0.375em;
}

#divCadastroProdReservavel #box #opcoesLogisticas{
    text-align: center;
}

#divCadastroProdReservavel #box #opcoesLogisticas label{
    text-align: left;
    margin-top: 0;
}

#divCadastroProdReservavel #btnDicaPrecoExibicao,
#divCadastroProdReservavel #btnDicaCaucao{
    margin: 0;
    padding: 0;
    font-size: 13px;
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    #divCadastroProdReservavel #box #opcoesLogisticas #entrega{
        border-left: 2px solid #000;
        padding-left: 20px;
    }
    
    #divCadastroProdReservavel #box #opcoesLogisticas #retirada{
        padding-right: 20px;
    }
}

#divCadastroProdReservavel #box #opcoesLogisticas #entrega #opcoes{
    display: none;
}

#divCadastroProdReservavel #box #localizacaoProduto input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#divCadastroProdReservavel #box .row{
    padding-left: 0px;
    padding-right: 0px;
}

#divCadastroProdReservavel #box #buscaCategoria .select2-selection--multiple:before,
#divCadastroProdReservavel #box #produtosComplementares .select2-selection--multiple:before{
    content: "";
    position: absolute;
    right: 7px;
    top: 42%;
    border-top: 5px solid #888;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

#divCadastroProdReservavel #box #buscaCategoria textarea,
#divCadastroProdReservavel #box #cadastroTags textarea,
#divCadastroProdReservavel #box #produtosComplementares textarea {
    border-radius: 0px;
}

#divCadastroProdReservavel #box #buscaCategoria .select2-search__field,
#divCadastroProdReservavel #box #cadastroTags .select2-search__field{
    height: 100%;
}

#divCadastroProdReservavel #box #buscaCategoria .select2-selection--multiple,
#divCadastroProdReservavel #box #produtosComplementares .select2-selection--multiple,
#divCadastroProdReservavel #box #buscaMarca .select2-selection--single{
    height: 38px;
    border-radius: 0.375em;
    padding-left: 12px;
    padding-bottom: 10px;
}

#divCadastroProdReservavel #box #cadastroTags .select2-selection--multiple{
    min-height: 38px;
    border-radius: 0.375em;
    padding-left: 12px;
    padding-bottom: 10px;
}

#divCadastroProdReservavel #box #cadastroLojaProd .select2-selection--single{
    height: 38px;
    border-radius: 0.375em;
    padding-left: 12px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#divCadastroProdReservavel #box #buscaMarca #select2-selectMarca-container{
    padding-top: 5px;
} 

#divCadastroProdReservavel #box #buscaMarca .select2-selection__arrow,
#divCadastroProdReservavel #box #cadastroLojaProd .select2-selection__arrow{
    margin-top: 5px;    
}

#divCadastroProdReservavel #box p{
    text-align: center;
}

#divCadastroProdReservavel #valorPago{
    display: none;
}

#divCadastroProdReservavel #tabSharehub .select2-container {
    width: 100%;
}

#divCadastroProdReservavel #items .item #coluna{
    display: flex;
    flex-direction: column;
}

#divCadastroProdReservavel #items #divBtnRemover{
    display: flex;
    justify-content: flex-end;
}

.tab {
    display: none;
}

#pageProductTop{
    padding: 20px;
    margin: 0;
}

#pageProductTop #imagens{
    display: flex;
    align-items: center;
    flex-direction: column;
}

#pageProductTop #btnIndicarProduto{
    margin: 20px auto;
    background-color: var(--cor-principal);
    color: #fff;
}

#pageProductTop #btnIndicarProduto:hover{
    filter: brightness(0.8);
}

#pageProductTop #imagens #carrosselProdutos{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

#pageProductTop #imagens #carrosselProdutos img{
    width: 90%;
    height: 300px!important;
    /* aspect-ratio : 1 / 0.8; */
    object-fit: contain;
}

#pageProductTop #info{
    text-align: center;
}

#pageProductTop #info #precoProduto{
    color: #000;
    font-weight: bold;
    font-size: 1.75em;
    margin-bottom: 30px;
}

#pageProductTop #info #aPartirDe{
    color: #000!important;
    font-weight: 500!important;
    font-size: 0.8em!important;
}

#pageProductTop #info #precoExibicaoProduto{
    color: red;
    text-decoration: line-through;
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 18px;
}

#pageProductTop #info #labelInicioFim{
    text-align: left;
    width: 100%;
    margin-top: 20px;
}

#pageProductTop #info #addListaDesejos{
    color: var(--cor-principal);
    margin-bottom: 30px;
}

#pageProductTop #info #addListaDesejos:hover{
    filter: brightness(0.8);
}

#pageProductTop #info #explicacaoGarantia{
    display: none;
    font-size: 13px;
    color: grey;
}

#ui-datepicker-div .ui-datepicker-header{
    background-color: var(--cor-principal);
    color: #fff;
}

#ui-datepicker-div .ui-state-default{
    background-color: #02d569!important;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    border: none;
}

#ui-datepicker-div .ui-state-disabled .ui-state-default{
    background-color: #f6f6f6!important;
    border: 1px solid #c5c5c5;
}

#ui-datepicker-div .date-blocked .ui-state-default{
    background-color: #dc3545 !important;
    color: #fff !important;
}

#ui-datepicker-div .ui-state-active, 
#ui-datepicker-div .select-range a{
    background-color: #01572A !important;
    color: #fff!important;
}

#ui-datepicker-div .ui-state-highlight{
    color: red!important;
}

#ui-datepicker-div .ui-datepicker td a,
#ui-datepicker-div .ui-datepicker td span{
    text-align: center;
    padding: 0.75em 0!important;
    border-radius: 5px;
}

#modalFormReserva #dadosReserva,
#modalFormReserva #logisticaProduto,
#modalFormVenda #dadosVenda,
#modalFormVenda #logisticaProduto{
    padding: 5px;
    border-radius: 20px;
}

#modalFormReserva #formReserva label,
#modalFormVenda #formVenda label{
    margin-top: 10px;
}

#modalFormReserva #formReserva #labelPeriodoReserva{
    text-align: left;
    color: var(--cor-principal);
    font-weight: bold;
}

#modalFormReserva #formReserva #numBlocos{
    margin-bottom: 20px;
}

#modalFormReserva #btnFinalizarReserva,
#modalFormVenda #btnFinalizarCompra{
    color: #fff;
    background-color: var(--cor-principal);
}

#modalFormReserva .modal-footer{
    justify-content: space-between;
}

#modalFormReserva #btnFinalizarReserva:hover,
#modalFormVenda #btnFinalizarCompra:hover{
    filter: brightness(0.8);
}

#modalFormReserva #formReserva #divDataInicio,
#modalFormReserva #formReserva #divDataHoraInicio,
#modalFormReserva #formReserva #divDataFim,
#modalFormReserva #formReserva #divDataHoraFim{
    display: none;
}


#pageProductTop #info #reservarAgora,
#pageProductTop #info #comprarAgora,
#pageProductTop #info #alugarProd,
#pageProductTop #info #comprarProd,
#pageProductTop #info #assinarAgora{
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: var(--cor-principal);
    color: #fff;
    border-radius: 0.375em;
    font-weight: bold;
}

#pageProductTop #info #reservarAgora:hover,
#pageProductTop #info #comprarAgora:hover,
#pageProductTop #info #assinarAgora:hover{
    filter: brightness(0.8);
    color: #fff;
}

#pageProductTop #info p#produtoRestrito{
    color: var(--cor-principal);
    font-weight: bold;
    text-align: center;
    font-size: 15pt;
}

#pageProductTop #info #localProduto #labelLocalProduto,
#pageProductTop #info #labelCategoriasProduto,
#pageProductTop #info #labelTagsProduto,
#pageProductTop #info #labelGarantiaProduto{
    color: #000;
    font-weight: bold;
}

#pageProductTop #localProduto a,
#pageProductTop #lojaProduto a{
    color: #000;
}

#pageProductTop #localProduto a:hover,
#pageProductTop #lojaProduto a:hover{
    color: var(--verde-escuro-hover);
}

#modalFormReserva #logisticaProduto label,
#modalFormAssinatura #logisticaProduto label{
    margin-top: 20px;
}

#pageProductTop #info #categoriasProduto,
#pageProductTop #info #tagsProduto{
    text-align: center;
    margin-top: 25px;
}

#pageProductTop #info #categoriasProduto #categoria{
    padding: 0px 8px 0px 8px;
    margin-right: 10px;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: var(--cor-secundaria);
}

#modalFormReserva #localRetirada,
#modalFormReserva #localDevolucao,
#modalFormReserva  #localEntrega,
#modalFormVenda #localRetirada,
#modalFormVenda  #localEntrega,
#modalFormAssinatura #localRetirada,
#modalFormAssinatura #localDevolucao,
#modalFormAssinatura #localEntrega{
    display: none;
}

#modalFormVenda #totalVenda{
    text-align: center;
    font-weight: 800;
    color: #000;
    font-size: 1.5em;
}


#modalFormAssinatura #totalAssinatura{
    text-align: center;
    color: #000;
    font-size: 1.2em;
    padding: 20px;
}

#modalFormAssinatura #totalAssinatura > div {
    display: flex;
    align-content: space-between;
    flex-direction: row;
    justify-content: space-between;
    border: 1px #000 solid;
    padding: 5px;
}

#modalFormAssinatura #formReserva #logisticaProduto{
    padding: 10px;
}

#modalFormAssinatura #btnFinalizarAssinatura{
    background-color: var(--cor-principal);
    color: #fff;
}

#modalFormAssinatura #btnFinalizarAssinatura:hover{
    filter: brightness(0.8);
}


#modalFormReserva #totalReserva{
    text-align: center;
    color: #000;
    font-size: 1.2em;
    padding: 20px;
}

#modalFormReserva #totalReserva > div {
    display: flex;
    align-content: space-between;
    flex-direction: row;
    justify-content: space-between;
    border: 1px #000 solid;
    padding: 5px;
}

#modalFormReserva #totalReserva #desconto,
#modalFormReserva #totalReserva #logistica,
#modalFormReserva #totalReserva #subtotal{
    display: none;
}

#modalFormReserva #totalReserva #total{
    font-weight: 800;
}

#productTabs #tabProduct{
    padding: 30px;
}

#productTabs #tabProduct #mapaProduto{
    height: 500px;
    margin: 0 auto;
    text-align: center;
}

#productTabs #tabProduct #descricaoProduto{
    overflow-x: auto;
}

#productTabs ul.nav-tabs{
    border-bottom: 0.5px solid #000;
}

#productTabs .nav-link{
    color: var(--cor-principal);
    border: none;
    font-weight: 700;
    font-size: 1.2em;
}

#productTabs .nav-link.active{
    border-bottom: 5px solid var(--cor-principal);
}

#productTabs #sessaoAvaliacoes  .stars-container {
    display: inline-block;
    cursor: pointer;
}
  
#productTabs #sessaoAvaliacoes .star {
    font-size: 24px;
    color: grey;
    transition: color 0.2s;
}

#productTabs #sessaoAvaliacoes .star:hover,
    #productTabs #sessaoAvaliacoes .star.active {
    color: var(--amarelo);
}

#productTabs #sessaoAvaliacoes #btnEnviarAvaliacao{
    background-color: var(--cor-secundaria);
    color: #fff;
    border-radius: 0.375em;
    float: right;
}

#productTabs #sessaoAvaliacoes #btnEnviarAvaliacao:hover{
    filter: brightness(0.8);
}

#productTabs #sessaoAvaliacoes #divFormAvaliacao{
    margin: 20px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    font-size: 18px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    text-align: left;
}

#productTabs #sessaoAvaliacoes #divFormAvaliacao h1{
    color: #fff;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-weight: bold;
    font-size: 15pt;
}
#productTabs #sessaoAvaliacoes #divFormAvaliacoes #form{
    display: flex;
}

#productTabs #sessaoAvaliacoes #avaliacaoProd{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

#productTabs #sessaoAvaliacoes #avaliacaoProd p{
    margin: 0;
}

#productTabs #sessaoAvaliacoes #avaliacaoProd p#usuarioAvaliacao{
    color: #555;
}

#productTabs #sessaoAvaliacoes #avaliacaoProd p #estrelaAvaliacao{
    color: var(--amarelo);
    font-size: 25px;
}

#productTabs #sessaoAvaliacoes #avaliacaoProd p #estrelaAvaliacaoVazia{
    color: #ccc;
    font-size: 25px;
}

#productTabs #sessaoAvaliacoes #titleAvaliacoes{
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
}

#productTabs #sessaoAvaliacoes p#pSemAvaliacoes{
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
}

#produtosRelacionados{
    margin: 0;
}

#produtosRelacionados h1{
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #000;
}


#produtosRelacionados #produtos{
    margin: 0 auto;
    text-align: center;
}

#produtosRelacionados #divProd{
    padding: 20px;
}

#produtosRelacionados #prod{
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    border-radius: 0.375em;
    height: 100%;
}

#produtosRelacionados #prod p{
    margin: 10px;
}

#produtosRelacionados #prod #imgProd{
    margin: 0 auto;
    aspect-ratio : 9 / 12;
    width: 90%;
    border-radius: 0.375em;
    object-fit: cover;
}

#produtosRelacionados #prod #prodName{
    font-weight: bold;
    font-size: 0.85em;
    min-height: 40px;
    color: #212529;
}

#produtosRelacionados #prod #prodPrice{
    color: #000;
    font-weight: bold;
}

#produtosRelacionados #prod #aPartirDe{
    color: #000!important;
    font-weight: 500!important;
    font-size: 0.8em!important;
}

#produtosRelacionados #prod #prodLocation{
    color: var(--cor-principal);
}

#produtosRelacionados #prod #btnReservar{
    background-color: var(--cor-principal);
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0.375em;
    font-weight: bold;
    border: none;
}


#produtosRelacionados #prod #btnReservar:hover{
    filter: brightness(0.8);
}

#produtosRelacionados #prod a{
    color: #000;
}

#produtosRelacionados #prod a:hover{
    color: var(--verde-escuro-hover);
}

/* ### CONFIG PAGAMENTO RESERVA ### */
#pagamentoStripeNaoConectado,
#pagamentoStripeConectado{
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    display: none;
}

#pagamentoStripeNaoConectado i,
#pagamentoStripeNaoConectado svg{
    font-size: 70pt;
    color: #ff0000!important;
}

#pagamentoStripeNaoConectado p#stripeNaoConectado{
    color: #ff0000!important;
    font-weight: bold;
    font-size: 15pt;
}

#pagamentoStripeConectado i,
#pagamentoStripeConectado svg{
    font-size: 70pt;
    color: #17c43a!important;
    margin: 20px;
}

#pagamentoStripeConectado p#stripeConectado{
    color: #17c43a!important;
    font-weight: bold;
    font-size: 15pt;
}

#linkStripeConnect button{
    background-color: var(--cor-secundaria);
    margin-top: 30px;
}

#linkStripeConnect:hover button{
    filter: brightness(0.8);
}

#linkStripeConnect button,
#linkStripeConnect button:hover,
#linkStripeConnect,
#linkStripeConnect:hover{
    color: #000!important;
    text-decoration: none;
}

#linkStripeConnect button img {
    height: 30px;
    margin-left: -5px;
    filter: invert(100%);
}

#popupProblemaComPedido{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 997;
    overflow-y: scroll;
}

#divProblemaComPedido #box .select2-search__field{
    height: 100%;
}

#divProblemaComPedido #box .select2-selection--single{
    height: 38px;
    border-radius: 0.375em;
    padding-left: 12px;
    padding-bottom: 10px;
}

#divProblemaComPedido #box .select2-selection__rendered{
    padding-top: 5px;
    overflow: none!important;
} 

#divProblemaComPedido #box .select2-selection__arrow{
    margin-top: 5px;    
}

#divProblemaComPedido #box{
    width: 80%;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
    background-color: #fff;
}

#divProblemaComPedido #box h1{
    color: #fff;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-weight: 900;
}

#divProblemaComPedido #box form input{
    border-radius: 0.375em;
}

#divProblemaComPedido #box form label{
    margin-top: 10px;
}

#divProblemaComPedido #btnEnviar{
    margin-top: 10px;
    background-color: var(--cor-principal);
    font-weight: 500;
    border: none;
    padding-left: 50px;
    padding-right: 50px;
    color: #fff;
}

#divProblemaComPedido #btnEnviar:hover{
    background-color: var(--abobora-hover)
}


/* ### MINHAS RESERVAS E MINHAS ASSINATURAS ### */
#bodyMinhaConta{
    margin-top: 20px;
}

#headerMinhaContaOther{
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
    min-height: 140px;
    justify-content: space-between;
}

#headerMinhaContaOther h1{
    color: var(--cor-principal);
    font-weight: 700;
    width: 100%;
}

#headerMinhaContaOther #sair{
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
}

#headerMinhaContaOther #sair a{
    text-decoration: none;
    color: #000;
    font-size: 1.2em;
}

#minhasReservas,
#minhasAssinaturas{
    width: 90%;
    margin: 0 auto;
}

#minhasReservas #cardReserva,
#minhasAssinaturas #cardAssinatura{
    margin-bottom: 30px;
}

#minhasReservas .card,
#minhasAssinaturas .card{
    padding: 0px;
    margin-bottom: 0px!important;
    height: 100%;
}

#minhasReservas .card-header,
#minhasAssinaturas .card-header{
    color: var(--cor-principal);
    font-weight: 600;
    text-align: center;
}

#minhasReservas #imgCartao,
#minhasAssinaturas #imgCartao{
    height: 25px!important;
}

#minhasAssinaturas #cardAssinatura #fotoProdutoAssinatura,
#minhasReservas #cardReserva #fotoProdutoReserva{
    width: 90%;
    max-width: 200px;
    aspect-ratio: 9/12;
    object-fit: cover;
    display: flex;
    margin: 0 auto;
}

#paginacaoPedidos{
    display: flex;
    justify-content: center;   
}

#paginacaoPedidos button{
    margin: 5px;
    background-color: var(--cor-principal);
    color: #fff;
}

#minhasReservas #botoesPedido,
#minhasAssinaturas #botoesPedido {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    flex-direction: column;
    flex-wrap: wrap;
}

#minhasReservas #botoesPedido .btn-ver,
#minhasReservas #botoesPedido .btn-agenda,
#minhasReservas #botoesPedido .btn-avaliar,
#minhasReservas #botoesPedido .btn-checkin,
#minhasReservas #botoesPedido .btn-checkout,
#minhasReservas #botoesPedido .btn-pagto,
#minhasReservas #botoesPedido .btn-chat,
#minhasReservas #botoesPedido .btn-problema,
#minhasAssinaturas #botoesPedido .btn-ver,
#minhasAssinaturas #botoesPedido .btn-pagto,
#minhasAssinaturas #botoesPedido .btn-chat,
#minhasAssinaturas #botoesPedido .btn-problema,
#minhasAssinaturas #botoesPedido .btn-checkin,
#minhasAssinaturas #botoesPedido .btn-checkout{
    background-color: var(--cor-principal);
    color: #fff;
    margin: 5px;
}

#minhasAssinaturas #botoesPedido .btn-cancelar{
    margin: 5px;
}

#minhasReservas #botoesPedido .btn-ver:hover,
#minhasReservas #botoesPedido .btn-agenda:hover,
#minhasReservas #botoesPedido .btn-checkin:hover,
#minhasReservas #botoesPedido .btn-checkout:hover,
#minhasReservas #botoesPedido .btn-pagto:hover,
#minhasReservas #botoesPedido .btn-chat:hover,
#minhasReservas #botoesPedido .btn-problema:hover,
#minhasReservas #botoesPedido .btn-comprar:hover,
#minhasAssinaturas #botoesPedido .btn-ver:hover,
#minhasAssinaturas #botoesPedido .btn-pagto:hover,
#minhasAssinaturas #botoesPedido .btn-chat:hover,
#minhasAssinaturas #botoesPedido .btn-problema:hover,
#minhasAssinaturas #botoesPedido .btn-checkin:hover,
#minhasAssinaturas #botoesPedido .btn-checkout:hover{
    filter: brightness(0.8);
}

/* #minhasReservas #botoesPedido .btn-comprar{
    background-color: var(--cor-principal);
    color: #fff;
    margin-bottom: 5px;
    margin-top: 5px;
}

#minhasReservas #produtoComprado{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    text-align: center;
} */


/* ### CHECKIN E CHECKOUT */
#divCheckinCheckout h1{
    font-size: 20pt;
    font-weight: 900;
    color: #000;
}

#divCheckinCheckout{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh;
}

#divCheckinCheckout{
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 1199px) {
    #divCheckinCheckout {
        height: auto;
    }
    #divCheckinCheckout #box {
        margin-top: 30px!important;
    }

    #divCheckinCheckout #checkin p {
        font-size: 16px;
        text-align: justify;
    }
}

#divCheckinCheckout #box{
    width: 80%;
    padding: 30px;
    border-radius: 10px;
    margin: 20px auto;
    border: 4px solid var(--cor-secundaria);
    text-align: center;
    display: none;
}

#divCheckinCheckout #box h1{
    color: var(--cor-principal);
    text-align: center;
    margin-bottom: 20px;
}

#divCheckinCheckout #box h2{
    font-size: 18px;
    font-weight: bold;
    color: #000;
    text-shadow: 2px 2px 4px rgba(0,0,0,1);
}

#divCheckinCheckout #checkin p
#divCheckinCheckout #checkout p{
    font-size: 18px;
    margin-top: 10px;
}

#divCheckinCheckout #box #buttonsTabs{
    text-align: center;
}

#divCheckinCheckout #box #buttonsTabs #nextBtn{
    float: right;
}


#divCheckinCheckout #box #buttonsTabs #btnEnviar{
    margin-top: 10px;
    background-color: var(--cor-principal);
    font-weight: 500;
    border: none;
    padding-left: 50px;
    padding-right: 50px;
    float: right;
}

@media (max-width: 768px) {
    #divCheckinCheckout #box #buttonsTabs #prevBtn,
    #divCheckinCheckout #box #buttonsTabs #nextBtn,
    #divCheckinCheckout #box #buttonsTabs #btnEnviar{
        float: none;
        text-align: center;
        margin: 0 auto;
        margin-top: 20px;
        display: block;
    }
}

#divCheckinCheckout .tab label,
#divCheckinCheckout .tab span{
    font-size: 18px;
}

#divCheckinCheckout .tab#checklist #divEscolha{
    display: inline-block; 
    margin: 0px 20px;
}

#divCheckinCheckout .tab#checklist label{
    margin-top: 20px
}

#divCheckinCheckout .tab#checklist #divEscolha label{
    margin: 0px;
}

#divCheckinCheckout .tab .op-foto{
    border-radius: 20px;
    width: 170px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

#divCheckinCheckout .tab .video-preview{
    width: 170px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

#divCheckinCheckout #ShowCheckinCheckout #imgCiCo{
    width: 90%;
    max-width: 500px;
    object-fit: contain;
    margin: 20px;    
}

#divCheckinCheckout #ShowCheckinCheckout #videoCiCo{
    width: 90%;
    max-width: 500px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 20px;  
}



/* #### MAPA BUSCA ### */
#paginaBuscaReserva #mapaBusca #mapid{
    width: 80vw;
    height: 400px;
    margin: 0 auto;
    border-radius: 20px;
}

#paginaBuscaReserva #produtosBusca{
    /* width: 80vw; */
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
} 

#paginaBuscaReserva #produtosBusca #pagination{
    margin: 0 auto;
    text-align: center;
}

#paginaBuscaReserva #produtosBusca #pagination #btnPagination{
    margin: 5px;
    background-color: var(--cor-principal);
    color: #fff;
}

#paginaBuscaReserva #produtosBusca #pagination #btnPagination:hover{
    background-color: #000;
}

#paginaBuscaReserva div#filtrosBusca{
    /* width: 80vw; */
    margin: 20px auto;
    text-align: right;
    border: 5px solid var(--cor-secundaria);
    /* background-color: var(--cor-secundaria); */
    padding: 20px;
    padding-top: 10px;
    border-radius: 20px;
}

#paginaBuscaReserva div#filtrosBusca input[type="text"],
#paginaBuscaReserva div#filtrosBusca select{
    border: 1px #000 solid;
}

#paginaBuscaReserva div#inputBusca{
    text-align: left;
}

#paginaBuscaReserva div#inputBusca label{
    margin-top: 20px;
}

#paginaBuscaReserva div#filtrosBusca #btnFiltrar{
    margin-top: 20px;
    background-color: var(--cor-principal);
    border: none;
    border-radius: 0.375em;
}

#paginaBuscaReserva div#filtrosBusca #btnFiltrar:hover{
    filter: brightness(0.8);
}

#paginaBuscaReserva input.form-range::-webkit-slider-thumb {
    background-color: var(--cor-principal);
}

#paginaBuscaReserva input.form-range::-webkit-slider-runnable-track {
    background-color: #aaa;
}

#paginaBuscaReserva #produtosBusca #resultadoBusca #noProducts{
    margin-top: 20px;
    font-size: 1.2em;
    font-weight: 500;
    text-align: center;
}

#paginaBuscaReserva #produtosBusca #resultadoBusca #noProducts svg{
    color: var(--cor-principal);
    font-size: 1.3em;
}

#paginaBuscaReserva #produtosBusca #resultadoBusca #sugestao{
    font-size: 1.1em;
    font-weight: 500;
    text-align: center;
}

#paginaBuscaReserva #produtosBusca #resultadoBusca #sugestao span{
    color: var(--cor-principal);
}

#paginaBuscaReserva #divInputBusca{
    text-align: left;
}

#paginaBuscaReserva #produtosBusca #tituloOutrasRegioes,
#paginaBuscaReserva #produtosBusca #tituloResultados{
    color: var(--cor-principal);
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    margin-top: 30px;
}

#paginaBuscaReserva div#filtrosBusca #buttonsMapa{
    display: flex;
    justify-content: flex-end;
}

#paginaBuscaReserva div#filtrosBusca #btnMostrarMapa,
#paginaBuscaReserva div#filtrosBusca #btnEsconderMapa{
    background-color: #ccc;
    border: none;
    border-radius: 0.375em;
}

#paginaBuscaReserva div#filtrosBusca #btnEsconderMapa{
    display: none;
}

#paginaBuscaReserva div#filtrosBusca #buttonsPersonalizaBusca{
    display: flex;
    justify-content: space-around;
    flex-direction: row;
    align-content: center;
    margin-top: 20px;
    margin-bottom: 20px;
}

#paginaBuscaReserva div#filtrosBusca #buttonsFiltro button{
    background-color: #ccc;
    border: none;
    border-radius: 0.375em;
}

@media (min-width: 768px) {
    #paginaBuscaReserva div#filtrosBusca #btnMostrarMapa,
    #paginaBuscaReserva div#filtrosBusca #btnEsconderMapa{
        display: none;
    }

    #paginaBuscaReserva div#filtrosBusca #divFiltrosMobile{
        display: block!important;
    }
    #paginaBuscaReserva div#filtrosBusca #buttonsFiltro{
        display: none;
    }
}

#paginaBuscaReserva div#filtrosBusca #buttonsFiltro #btnEsconderFiltros{
    display: none;
}

@media (max-width: 767px){
    #paginaBuscaReserva div#filtrosBusca #divFiltrosMobile{
        display: none;
    }
    #paginaBuscaReserva div#filtrosBusca #buttonsFiltro{
        display: flex;
        justify-content: flex-end;
    }
}

#paginaBuscaReserva{
    padding: 20px;
    display: flex;
    align-items: flex-start;
    margin: 0;
}

#modalCarrinho #item{
    text-align: center;
    transition: 0.2s;
}
#modalCarrinho a{
    text-decoration: none;
}

#modalCarrinho #item:hover{
    transform: scale(1.1);
}

#modalCarrinho #item .bi{
    font-size: 60px;
    color: var(--cor-principal);
}

#modalCarrinho #item h2{
    font-size: 20px;
    font-weight: bold;
    color: var(--cor-principal);
}

#modalCarrinho .modal-body .row{
    display: flex;
    justify-content: center;
}

@media (max-width: 710px) {
    #modalCarrinho #item{
        margin-top: 30px;
    }
}

/* IMPRESSAO DE ETIQUETAS */
/* Estilização da lista de produtos */
#lista-produtos {
    list-style: none;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
}

#lista-produtos li {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#lista-produtos li:hover {
    background-color: #e7e7e7;
}

#lista-produtos input[type="checkbox"] {
    margin-right: 15px;
}

#lista-produtos li span {
    flex-grow: 1;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

#lista-produtos li .preco {
    font-size: 14px;
    color: #28a745;
    margin-left: 10px;
}

#lista-produtos li .codigo-barra {
    font-size: 12px;
    color: #888;
    margin-left: 10px;
    text-align: right;
}

#modalImprimirEtiqueta .modal-body label {
    display: block;
    margin-bottom: 10px;
}

#modalImprimirEtiqueta .modal-body input {
    padding: 8px;
    width: 60px;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#modalImprimirEtiqueta .modal-body select {
    padding: 8px;
    width: 100%;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}


#divBtnListaEtiquetas{
    display: flex;
    justify-content: flex-end;
    padding: 15px;
}

@media (max-width: 750px) {
    #lista-produtos li {
        display: flex;
        background-color: #ddd;
        margin: 10px 0;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        align-items: flex-start;
    }

    #lista-produtos li span,
    #lista-produtos li label{
        margin: 0!important;
        padding: 5px;
    }

    #lista-produtos input[type="checkbox"]{
        margin: 5px!important;
    }
}

#divInputBuscarProdutosEtiqueta{
    max-width: 90%;
    margin: 0 auto;
}

#divBtnLimpar{
    display: flex;
    justify-content: flex-end;
}

#divBotoesLista{
    padding: 10px;
    margin-bottom: -20px;
    display: flex;
    justify-content: center
}

#divBotoesLista button{
    margin: 0 10px;
}
/* 
#divBotoesLista #btnAbrirModalEtiquetas{
    border-radius: 0.375em;
    background-color: var(--cor-principal);
    color: #fff;
}

#divBotoesLista #btnAbrirModalEtiquetas:hover{
    filter: brightness(0.8);
} */

#dashboard p {
    margin: 0 !important;
}

#dashboard .titulo {
    margin-bottom: 20px;
}

#dashboard .titulo h1 {
    color: #02D56A;
}
#dashboard .titulo p {
    color: black;
}

#dashboard .grafico {
    width: 100%;
    min-height: 200px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#dashboard .graficoP {
    width: 100%;
    min-height: 200px;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#dashboard .bg-custom.active {
    background-color: #01572a !important; 
    color: white !important;
}

#dashboard .iconCard {
    background-color: #01572a;
    display: flex;
    justify-content: center;
}

#dashboard .card-body{
    padding: 20px;
}

#dashboard .card{
    box-shadow: none;
}

#dashboard .card h4{
    text-align: left;
}

.dropdown-toggle::after {
    display: inline-block!important;
    margin-left: .255em!important;
    vertical-align: .255em!important;
    content: ""!important;
    border-top: .3em solid!important;
    border-right: .3em solid transparent!important;
    border-bottom: 0!important;
    border-left: .3em solid transparent!important;
}

.navbar .nav-link{
    color: var(--cor-texto-cabecalho)!important;
}



/* ### MODAL MARKETING AFILIADOS ### */
#modalMktAfiliado #texto{
    text-align: center;
    color: #02d569;
}

#divRegistroAfiliado #formRegistro label{
    float: left;
    margin-top: 10px;
}

#divRegistroAfiliado #btnSalvarAfiliado{
    color: #fff;
}

#dataTableUsuarios #btnIndicarUsuario{
    float: right;
    background-color: var(--cor-principal);
    color: #fff;
    margin-bottom: 10px;
}

#dataTableUsuarios #tag{
    padding: 5px;
    background-color: var(--cor-secundaria);
    margin: 2px;
    border-radius: 0.375em;
}

#dashboard #buttonsDashboard{
    display: flex;
    justify-content: flex-end;
}

#dashboard #buttonsDashboard #btnIndicarUsuario{
    background-color: var(--cor-principal);
    color: #fff;
    margin-bottom: 10px;
    margin-top: 20px;
    margin-right: 30px;
}

#dashboard #buttonsDashboard #btnIndicarUsuario:hover,
#dataTableUsuarsios #btnIndicarUsuario:hover{
    filter: brightness(0.8);
}

#divRegistroAfiliado h1{
    font-weight: 900;
    color: var(--cor-principal);
}

#divRegistroAfiliado h2{
    font-weight: bold;
}

#divRegistroAfiliado #divLeft,
#divRegistroAfiliado #divRight{
    text-align: center;
    padding-top: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#divRegistroAfiliado{
    padding-top: 30px;
    text-align: center;
    width: 100%;
    margin: 0 auto;
}

@media (max-width: 992px) {
    #divRegistroAfiliado #divLeft img#imgRegistroAfiliado{
        max-height: 150px;
    }
}

#divRegistroAfiliado #divLeft img#imgRegistroAfiliado{
    margin: 0 auto;
    width: 60%;
    object-fit: contain;
}

#divRegistroAfiliado #divRight h1{
    display: block;
    width: 100%;
}

#divRegistroAfiliado #divRight #box h1{
    color: var(--cor-principal);
}

#divRegistroAfiliado #divRight #box #btnSalvarAfiliado{
    margin-top: 10px;
    background-color: var(--cor-principal);
    font-weight: 500;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
}
    
/* ### HOME LOCACAO STYLE ### */
.homeLocacao div#slider{
    z-index: 1;
}

.homeLocacao div#slider #carousel img{
    width: 100%;
    height: 70vh;
    object-fit: cover;
}

.homeLocacao div#slider #carousel-mobile .imgSliderMobile{
    width: 100%;
    height: 55vh;
    object-fit: cover;
    object-position: center center;
}

.homeLocacao div#cards,
.homeLocacao div#cards-mobile{
    width: 80%;
    margin: 0 auto;
}

.homeLocacao div#cards div{
    margin-top: -10%;
    z-index: 2;
    text-align: center;
    margin-bottom: 120px
}


.homeLocacao div#cards-mobile div{
    z-index: 2;
    text-align: center;
    margin-bottom: 30px;
}

.homeLocacao div#cards img,
.homeLocacao div#cards-mobile img{
    width: 100%;
    margin: 0 auto;
    border-radius: 0.375em;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

@media (max-width: 991px) {
    .homeLocacao div#cards-mobile{
        display: flex;
    }

    .homeLocacao div#cards{
        display: none;
    }
}

@media (min-width: 992px) {
    .homeLocacao div#cards-mobile{
        display: none;
    }

    .homeLocacao div#cards{
        display: flex;
        margin-bottom: -10%;
    }
}

#produtos{
    margin: 0 auto;
    text-align: center;
}

#divProd{
    padding: 20px;
}

#prod{
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    border-radius: 0.375em;
    height: 100%;
}

#prod p{
    margin: 10px;
}

#prod #imgProd{
    margin: 0 auto;
    aspect-ratio : 9 / 12;
    width: 90%;
    border-radius: 0.375em;
    object-fit: cover;
}

#prod #prodName{
    font-weight: bold;
    font-size: 0.85em;
    min-height: 40px;
    color: #212529;
}

#prod #prodPrice{
    color: #000;
    font-weight: bold;
}

#prod #aPartirDe{
    color: #000!important;
    font-weight: 500!important;
    font-size: 0.8em!important;
}

#prod #prodLocation{
    color: var(--cor-principal);
}

#prod #btnReservar,
#prod #btnComprar{
    background-color: var(--cor-principal);
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0.375em;
    font-weight: bold;
    border: none;
}


#prod #btnReservar:hover,
#prod #btnComprar:hover{
    filter: brightness(0.8);
}

#prod a{
    color: #000;
}

#prod a:hover{
    color: var(--verde-escuro-hover);
}

.homeLocacao h1#produtosPopulares{
    text-transform: uppercase;
    font-size: 20pt;
    font-weight: 400;
    text-align: center;
    margin-top: 50px;
}

.homeLocacao button#verMaisProdutos{
    text-align: center;
    margin: 20px auto;
    padding: 10px 20px;
    background-color: var(--cor-secundaria);
    color: #fff;
}

.homeLocacao #buttonVerMais{
    text-align: center;
}

.homeLocacao #buttonVerMais button#verMaisProdutos:hover{
    filter: brightness(0.8);
}

.homeLocacao #sessaoPassoAPassoSU{
    text-align: center;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, #fff 0%, var(--cor-principal) 100%);
}

.homeLocacao #sessaoPassoAPassoSOU{
    text-align: center;
    background: rgb(255,255,255);
    background: linear-gradient(180deg, #fff 0%, var(--abobora) 100%);
    margin-top: 50px;
}

.homeLocacao #sessaoPassoAPassoSU h2#passoApasso,
.homeLocacao #sessaoPassoAPassoSOU h2#passoApasso{
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
}

.homeLocacao #sessaoPassoAPassoSU,
.homeLocacao #sessaoPassoAPassoSOU{
    padding: 25px;
    width: 100%;
    margin: 0;
}

.homeLocacao #sessaoPassoAPassoSU #col,
.homeLocacao #sessaoPassoAPassoSOU #col{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.homeLocacao #sessaoPassoAPassoSU #iconPassos,
.homeLocacao #sessaoPassoAPassoSOU #iconPassos{
    height: 80px;
    margin-top: 20px;
}

.homeLocacao #sessaoPassoAPassoSU p,
.homeLocacao #sessaoPassoAPassoSOU p{
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

.homeLocacao #sessaoPassoAPassoSU p#num,
.homeLocacao #sessaoPassoAPassoSOU p#num{
    color: #000000;
    font-size: 36px;
    margin: 20px 0px 0px 0px;
    font-weight: 900;
}

.homeLocacao #sessaoAcredite{
    min-height: 300px;
    text-align: center;
    padding: 20px;
    width: 100%
}

.homeLocacao #sessaoAcredite #col{
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px;
    font-size: 16pt;
}

.homeLocacao #sessaoAcredite #acrediteOuNao span{
    background-color: var(--cor-principal); 
    padding: 5px; 
    border-radius: 2px;
}

.homeLocacao #sessaoAcredite #faturamento span{
    background-color: var(--cor-principal); 
    padding: 5px; 
    border-radius: 2px;
}

.homeLocacao #exemploItens{
    width: 100%;
}

.homeLocacao #exemploItens img{
    width: 100%;
}

.homeLocacao #sessaoDepoimentos{
    margin-top: 30px;
}

.homeLocacao #sessaoDepoimentos .depoimentos{
    width: 80%;
    margin: 0 auto;
}

.homeLocacao #sessaoDepoimentos .depoimentos .slick-prev:before,
.homeLocacao #sessaoDepoimentos .depoimentos .slick-next:before{
    color: #000;
}

.homeLocacao #sessaoDepoimentos .depoimentos .slick-slide{
    text-align: center;
    padding: 20px;
    margin: 5px;
    background-color: var(--cor-secundaria);
    border-radius: 10px;
    min-height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.homeLocacao #sessaoDepoimentos .depoimentos #imgDepoimento{
    text-align: center;
    margin: 0 auto;
    border-radius: 100px;
    width: 130px;
}

.homeLocacao #sessaoDepoimentos .depoimentos #nomeDepoimento{
    margin-top: 1em;
    margin-bottom: 0;
    color: #fff;
    font-weight: bold;
}

.homeLocacao #sessaoDepoimentos .depoimentos #estrelasDepoimento #estrelaDepoimento{
    color: var(--amarelo);
}

.homeLocacao #sessaoDepoimentos .depoimentos #textoDepoimento{
    text-align: justify;
    margin-top: 10px;
}

.homeLocacao #sessaoDepoimentos h1{
    text-align: center;
    color: var(--cor-principal);
    font-weight: bold;
}

.homeLocacao #sessaoImpacto{
    margin-bottom: 30px;
}

.homeLocacao #sessaoImpacto #indicador{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    vertical-align: baseline;
}

.homeLocacao #sessaoImpacto #indicador .conteudo {
    border-radius: 0.375em;
    background-color: #ddd;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

.homeLocacao #sessaoImpacto #indicador .conteudo #iconIndicador {
    display: flex;
    padding: 5px;
    border-radius: 100px;
    background-color: #fff;
    margin-bottom: 10px;
    width: 60px;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.homeLocacao #sessaoImpacto h1{
    text-transform: uppercase;
    font-size: 20pt;
    font-weight: 400;
    text-align: center;
    margin-top: 50px;
}

.homeLocacao #sessaoImpacto #indicador .conteudo #iconIndicador svg {
    font-size: 30px;
}

.homeLocacao #sessaoImpacto #indicador .conteudo #numeroIndicador {
    font-size: 1.3em;
    font-weight: bold;
}

.homeLocacao #sessaoImpacto #indicador #residuosEvitados svg{
    color: var(--cor-principal);
}

.homeLocacao #sessaoImpacto #indicador #recursosNaoExtraidos svg{
    color: var(--verde-escuro);
}

.homeLocacao #sessaoImpacto #indicador #aguaEconomizada svg{
    color: aqua;
}

.homeLocacao #sessaoImpacto #indicador #arvoresPlantadas svg{
    color: var(--cor-principal);
}

.homeLocacao #sessaoImpacto #indicador #produtosDisponibilizados svg{
    color: var(--cor-principal);
}

.homeLocacao #sessaoImpacto #indicador #energiaEconomizada svg{
    color: var(--amarelo);
}

.homeLocacao #sessaoImpacto #indicador #valorEconomizado svg{
    color: var(--amarelo);
}

.homeLocacao #sessaoImpacto #indicador #receitaGerada svg{
    color: var(--cor-principal);
}

.homeLocacao #sessaoImpacto #indicador #adotantesCompartilhamento svg{
    color: var(--cor-secundaria);
}

.homeLocacao #sessaoImpacto #indicador #comunidadesSharehub svg{
    color: var(--abobora-hover);
}

.homeLocacao #sessaoImpacto #linhaImpacto{
    display: flex;
    justify-content: center;
}

.homeLocacao #sessaoMapaOndeEstamos{
    margin-bottom: 30px;
    text-align: center;
}

.homeLocacao #sessaoMapaOndeEstamos h1{
    text-transform: uppercase;
    font-size: 20pt;
    font-weight: 400;
    text-align: center;
    margin-top: 50px;
}

.homeLocacao #sessaoMapaOndeEstamos #mapid{
    margin: 0 auto;
    width: 80%;
    height: 400px;
    border-radius: 0.375em;
    border: 5px var(--verde-claro) solid;
    box-shadow: 5px 5px 10px rgba(0,0,0,0.2);
}

#divShareHubs{
    width: 90%;
    margin: 30px auto;
    text-align: center;
    padding: 20px;
}

#divShareHubs h1{
    color: var(--cor-principal);
    font-weight: bold;
}

#divShareHubs h2{
    text-align: center;
    color: var(--cor-principal);
    font-size: 18pt;
    font-weight: bold;
    margin-top: 50px;
}

#divShareHubs .sharehub{
    min-height: 200px;
    margin-top: 20px;
    background-size: 90% 90%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 5%;
    border-radius: 70px;
}

#divShareHubs .sharehub h2{
    font-size: 20px;
    color: #fff;
    text-shadow: 1px 3px 2px #000000;
    font-weight: bold;
}

#divShareHubs .sharehub p{
    font-size: 16x;
    color: #000;
    text-shadow: 1px 3px 2px #000000;
    font-weight: bold;
}

#divShareHubs .sharehub button{
    background-color: #fff;
    color: #000;
}

#divShareHubs .sharehub button:hover{
    background-color: #ccc;
    color: #000;
}

#divShareHubs #onovolab{
    background-image: url("/assets/sharehubs/onovolab.webp");
}

#divShareHubs #acacias{
    background-image: url("/assets/sharehubs/acacias.webp");
}

#divShareHubs #jacarandas{
    background-image: url("/assets/sharehubs/jacarandas.webp");
}

#divShareHubs #jequitibas{
    background-image: url("/assets/sharehubs/jequitibas.webp");
}

#divShareHubs #vilaDasFlores{
    background-image: url("/assets/sharehubs/viladasflores.webp");
}

#divShareHubs #beneficios{
    margin-top: 50px
}

#divShareHubs #beneficios svg{
    font-size: 50px;
    color: #000;
    margin-top: 20px;
}

#divShareHubs #beneficios p{
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    color: #000;
}

#divShareHubs #divBtn{
    margin-top: 20px;
}

#divShareHubs #divBtn button{
    color: #fff;
    background-color: var(--cor-principal);
    font-size: 19px;
}

#divShareHubs #divBtn button:hover{
    filter: brightness(0.8);
}


/* PÁGINA DA LOJA LOCACAO */
#headerLoja{
    width: 100%;
    margin: 0;
    background-color: var(--cor-principal);
    display: flex;
    align-items: center;
    padding: 20px;
}

#headerLoja #infoLoja #nomeLoja{
    text-align: center;
    font-size: 2em;
    font-weight: bold;
    color: var(--cor-principal);
    margin: 0;
}

#headerLoja #imageLoja{
    text-align: center;
}

#headerLoja #imgLoja{
    width: 150px;
    height: 150px;
    object-fit: cover;
    border-radius: 100px;
}

#headerLoja #infoLoja,
#headerLoja #acoesLoja{
    display: inline-block;
    text-align: center;
}

#headerLoja #acoesLoja button{
    background-color: var(--cor-principal);
    color: #fff;
}

#headerLoja #acoesLoja button:hover{
    filter: brightness(0.8);
}

#headerLoja #infoLoja #localProduto{
    margin: 0;
    text-align: center;
}

#bodyLoja #formBusca input,
#bodyLoja #formBuscaVenda input,
#bodyLoja #formBusca select,
#bodyLoja #formBuscaVenda select{
    display: inline-block;
    width: 80%;
    border-radius: 35px;
}

#bodyLoja #formBusca #selectCategorias,
#bodyLoja #formBuscaVenda #selectCategoriasVenda{
    width: 100%;
    text-align: center;
    margin: 0 auto;
    margin-bottom: 10px;
}

#bodyLoja #formBusca,
#bodyLoja #formBuscaVenda{
    text-align: center;
}

#bodyLoja #btnBuscaLoja,
#bodyLoja #btnBuscaLojaVenda{
    border-radius: 100px;
    background-color: var(--cor-principal);
}

#bodyLoja #btnBuscaLoja:hover,
#bodyLoja #btnBuscaLojaVenda:hover{
    filter: brightness(0.8);
}

#bodyLoja #pagination,
#bodyLoja #paginationVenda{
    margin: 0 auto;
    text-align: center;
}

#bodyLoja #pagination #labelPagination,
#bodyLoja #pagination #labelPaginationVenda{
    margin-left: 10px;
}

#bodyLoja #pagination #btnPagination,
#bodyLoja #paginationVenda #btnPaginationVenda{
    margin: 5px;
    background-color: var(--cor-principal);
    color: #fff;
}

#bodyLoja #pagination #btnPagination:hover,
#bodyLoja #paginationVenda #btnPaginationVenda:hover{
    background-color: #000;
}

#bodyLoja #produtos #noProducts,
#bodyLoja #produtosVenda #noProducts{
    margin-top: 20px;
    font-size: 1.25em;
    font-weight: 500;
    text-align: center;
}

#bodyLoja #produtos #noProducts svg,
#bodyLoja #produtosVenda #noProducts svg{
    color: var(--cor-principal);
    font-size: 1.5em;
}

#bodyLoja #produtos #btnLimparBusca,
#bodyLoja #produtosVenda #btnLimparBusca{
    background-color: var(--cor-secundaria);
    color: #000;
    text-align: center;
    margin: 20px auto;
    width: 30%;
}

#nextBtn,
#prevBtn{
    margin-top: 10px;
    background-color: var(--cor-principal);
    font-weight: 500;
    border: none;
    padding-left: 20px;
    padding-right: 20px;
}

/* INVENTARIO */

#divNovoInventario #divBotao{
    display: flex;
    justify-content: flex-end;
    margin: 20px 10px;
}

#divNovoInventario #divBotao #btnLerCodigoDeBarras{
    background-color: var(--cor-principal);
    color: #fff;
    transition: 0.2s;
}

#divNovoInventario #divBotao #btnLerCodigoDeBarras:hover{
    filter: brightness(0.8);
}

#divNovoInventario #divInputInventario{
    display: flex;
}

#divNovoInventario #divInputInventario button{
    color: #000;
    background: var(--amarelo);
    display: flex;
    transition: 0.2s;
}

#divNovoInventario #divInputInventario button:hover{
    filter: brightness(0.8);
}

#divNovoInventario #divInputInventario button i{
    margin-right: 5px;
}

#divNovoInventario #btnFinalizar{
    color: #fff;
    background-color: var(--cor-principal);
    margin: 10px auto;
    display: flex;
    transition: 0.2s;
}

#divNovoInventario #btnFinalizar:hover{
    filter: brightness(0.8);
}


#divNovoInventario #pFinalizar{
    font-weight: bold;
    text-align: center;
    color: var(--cor-principal);
    margin-top: 50px;
}

#divNovoInventario #btnFinalizarSemSalvar,
#divNovoInventario #btnFinalizarEAtualizar{
    background-color: var(--cor-principal);
    color: #fff;
    transition: 0.2s;
    margin-bottom:15px;
}

#divNovoInventario #btnFinalizarSemSalvar:hover,
#divNovoInventario #btnFinalizarEAtualizar:hover{
    filter: brightness(0.8);
}

#divNovoInventario #botoesFinalizar{
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

#divNovoInventario table td,
#divNovoInventario table th{
    align-content: center;
}

/* FECHAMENTO PDV */
#relatorioFechamentoPDV h1{
    font-weight: bold;
    display: flex;
    margin: 20px auto;
    margin-bottom: 0;
    justify-content: center;
}

#relatorioFechamentoPDV #entradas,
#relatorioFechamentoPDV #saidas{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background-color: #fff;
    max-width: 500px;
    border-radius: 20px;
    margin: 10px auto;
    margin-top: 0;
    padding: 15px;
}

#relatorioFechamentoPDV #entradas p,
#relatorioFechamentoPDV #saidas p{
    margin-bottom: 5px;
}

#relatorioFechamentoPDV #entradas h2,
#relatorioFechamentoPDV #saidas h2{
    font-weight: bold;
    font-size: 20px;
    margin: 0 auto;
}

#relatorioFechamentoPDV #entradas h2{
    color: green;
}

#relatorioFechamentoPDV #saidas h2{
    color: red;
}

#relatorioFechamentoPDV #resultado{
    display: flex;
    justify-content: center;
}

#relatorioFechamentoPDV #resultado p{
    padding: 20px;
}

#relatorioFechamentoPDV #info{
    display: flex;
    justify-content: center;
}

#relatorioFechamentoPDV #info p{
    margin: 0;
    padding: 10px;
    font-size: 13px;
    color: #666;
    text-align: center;
}

/* PAINEL BUSCA */
#painelBuscaProdutos{
    padding: 20px;
}

#painelBuscaProdutos #filtros label{
    margin-top: 20px;
}

#painelBuscaProdutos #filtros #formBuscaProd{
    display: flex;
}

#painelBuscaProdutos #filtros #formBuscaProd button{
    background-color: var(--cor-secundaria);
    color: #000;
}

#painelBuscaProdutos #filtros #limparBusca{
    display: flex;
    justify-content: flex-end;
}

#painelBuscaProdutos #listaProdutos #produtos a{
    text-decoration: none;
}

#painelBuscaProdutos #listaProdutos #produtos{
    margin-top: 20px;
    display: flex;
    justify-content: center;
}

#painelBuscaProdutos #listaProdutos #produtos h1{
    text-align: center;
    font-weight: 800;
    color: #000;
    font-size: 20px;
}

#painelBuscaProdutos #listaProdutos #produtos #itemProduto{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px;
    transition: transform 0.3s ease;
}

#painelBuscaProdutos #listaProdutos #produtos #itemProduto:hover{
    transform: scale(1.1);
    cursor: pointer;
}

#painelBuscaProdutos #listaProdutos #produtos #itemProduto #imgProduto{
    width: 100%;
    aspect-ratio: 9 / 12;
    object-fit: cover;
    border-radius: 0.375em;

}

#painelBuscaProdutos #listaProdutos #produtos #itemProduto #nomeProduto{
    color: #000;
    font-size: 15px;
    font-weight: bold;
    margin-top: 5px;
}

#painelBuscaProdutos #listaProdutos #produtos #itemProduto #precoProduto{
    color: var(--cor-principal);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#painelBuscaProdutos #limparBusca{
    display: flex;
    justify-content: flex-end;
}

#painelBuscaProdutos #paginacaoControls{
    display: flex;
    justify-content: center;
}

#painelBuscaProdutos #paginacaoControls button {
    margin: 5px;
    background-color: var(--cor-principal);
    padding: 10px;
    border-radius: 0.375em;
    color: #fff;
    font-weight: bold;
}

#painelBuscaProdutos #paginacaoControls button.active{
    filter: brightness(0.8);
}

#painelBuscaProdutos #listaProdutos #produtos #itemProduto #disponibilidade{
    margin-top: 5px;
    margin-bottom: 5px;
}

#painelBuscaProdutos #listaProdutos #produtos #itemProduto #disponibilidade span{
    padding: 5px;
    margin: 0 5px;
    background-color: var(--cor-secundaria);
    color: #000;
    border-radius: 10px;
}

/* PAINEL DO VENDEDOR */
#pdvsVendedor{
    display: flex;
    justify-content: center;
    width: 90%;
    margin: 20px auto;
}

#pdvsVendedor .card-header h2{
    font-weight: bold;
    font-color: #000;
    font-size: 20px;
    margin: 0;
}

#pdvsVendedor #botoesPDV button{
    color: #fff;
    background-color: var(--cor-principal);
    transition: 0.2s;
}

#pdvsVendedor #botoesPDV button:hover{
    filter: brightness(0.8);
}

#pdvsVendedor #status #aberto{
    color: green;
}

#pdvsVendedor #status #fechado{
    color: red;
}

/* ### COMO FUNCIONA ### */
#divComoFunciona{
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
}

#divComoFunciona #sessao1,
#divComoFunciona #sessao2,
#divComoFunciona #sessao3,
#divComoFunciona #sessao4,
#divComoFunciona #sessao5,
#divComoFunciona #sessao6,
#divComoFunciona #sessao7,
#divComoFunciona #sessao8{
    padding-left: 5%;
    padding-right: 5%;
}

#divComoFunciona #sessao1 #imgSessao1{
    width: 80%;
    margin: 0 auto;
    object-fit: contain;
}

#divComoFunciona h1{
    color: #000;
    font-weight: bold;
    text-align: center;
    font-size: 20pt;
}

#divComoFunciona h2{
    text-align: center; 
    color: #000; 
    font-size: 15pt;
    font-weight: bold;
    margin-top: 50px;
}

#divComoFunciona #sessao1
#divComoFunciona #sessao2,
#divComoFunciona #sessao3{
    padding: 20px;
}

#divComoFunciona #sessao1 p{
    font-size: 19px;
    text-align: justify;
}

#divComoFunciona #sessao1 #col{
    display: flex;
}


#divComoFunciona #sessao1 #conteudo{
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#divComoFunciona #sessao1 #conteudo button{
    background-color: var(--cor-principal);
    color: #fff;
    border-radius: 0.375em;
    font-size: 20px;
    margin-top: 20px;
}

#divComoFunciona #sessao1 #conteudo button:hover{
    filter: brightness(0.8);
}

#divComoFunciona #sessao2 h3{
    color: var(--cor-principal);
    text-align: center;
    font-size: 16pt;
    font-weight: bold;
    margin-top: 30px;
}


#divComoFunciona #sessao2 #col{
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#divComoFunciona #sessao2 #imgUsers{
    width: 50%;
    margin: 0 auto;
    text-align: center;
}

#divComoFunciona #sessao2 p{
    width: 50%;
    font-size: 19px;
    text-align: justify;
}

#divComoFunciona #sessao2 button{
    color: #fff;
    background-color: var(--cor-principal);
    font-size: 19px;
    margin-top: 20px;
}

#divComoFunciona #sessao2 button:hover{
    filter: brightness(0.8);
}

#divComoFunciona #sessao3 #col{
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}


#divComoFunciona #sessao3 p{
    text-align: center;
    font-size: 19px;
    font-weight: 500;
    color: #000;
}

#divComoFunciona #sessao3 svg{
    font-size: 50px;
    color: #000;
    margin-top: 20px;
}

#divComoFunciona #sessao3 #divBtn,
#divComoFunciona #sessao4 #divBtn,
#divComoFunciona #sessao6 #divBtn{
    margin: 0 auto;
    text-align: center;
    margin-top: 30px;
}

#divComoFunciona #sessao3 button,
#divComoFunciona #sessao4 button,
#divComoFunciona #sessao6 button{
    color: #fff;
    background-color: var(--cor-principal);
    font-size: 19px;
}

#divComoFunciona #sessao3 button:hover,
#divComoFunciona #sessao4 button:hover,
#divComoFunciona #sessao6 button:hover{
    filter: brightness(0.8);
}

#divComoFunciona #sessao4{
    width: 60%;
    margin: 0 auto;
}

#divComoFunciona #sessao4 p{
    font-size: 19px;
    text-align: justify;
}

#divComoFunciona #sessao5 #col{
    vertical-align: middle;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}

#divComoFunciona #sessao5 p{
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    color: var(--cor-principal);
}

#divComoFunciona #sessao5 svg{
    font-size: 50px;
    color: var(--cor-principal);
    margin-top: 20px;
}

#sessao6 #imgAssistente{
    width: 80%;
    margin: 0 auto;
}

#sessao6 #imgPassos{
    width: 60%;
    margin: 0 auto;
}

#divComoFunciona #sessao6 p{
    text-align: center;
    font-size: 19px;
    text-align: justify;
}

#divComoFunciona #sessao6 #col{
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#divComoFunciona h2#passoApasso{
    font-size: 20px;
    text-transform: uppercase;
    font-weight: 400;
}

#divComoFunciona #sessao7,
#divComoFunciona #sessao8{
    padding-top: 25px;
    padding-bottom: 25px;
}

#divComoFunciona #sessao7 #col,
#divComoFunciona #sessao8 #col{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#divComoFunciona #sessao7 #iconPassos,
#divComoFunciona #sessao8 #iconPassos{
    height: 80px;
    margin-top: 20px;
}

#divComoFunciona #sessao7 p,
#divComoFunciona #sessao8 p{
    font-size: 16px;
    font-weight: 500;
    color: #000;
}

#divComoFunciona #sessao7 p#num,
#divComoFunciona #sessao8 p#num{
    color: #000000;
    font-size: 36px;
    margin: 20px 0px 0px 0px;
    font-weight: 900;
}

#divComoFunciona #sessao7{
    text-align: center;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, #fff 0%, var(--cor-principal) 20%, var(--cor-principal) 80%, #fff 100%);
}

#divComoFunciona #sessao8{
    text-align: center;
    background: rgb(255,255,255);
    background: linear-gradient(0deg, #fff 0%, var(--abobora) 20%, var(--abobora) 80%, #fff 100%);
}

#divComoFunciona #sessao7 iframe,
#divComoFunciona #sessao8 iframe{
    width: 50%;
    aspect-ratio: 16 / 9;
}

@media (max-width: 767px) {
    #divComoFunciona #sessao7 iframe,
    #divComoFunciona #sessao8 iframe{
        width: 80%;
        aspect-ratio: 16 / 9;
    }

    #divComoFunciona #sessao1 p,
    #divComoFunciona #sessao2 p,
    #divComoFunciona #sessao4{
        width: 90%;
        margin: 0 auto; 
    }

    #divComoFunciona #sessao2,
    #divComoFunciona #sessao6 p,
    #divComoFunciona #sessao6 #imgPassos{
        width: 80%;
        margin: 0 auto; 
    }

    #divComoFunciona h2{
        width: 70%;
        margin: 0 auto;
        margin-top: 50px;
    }
}

/* ### SOBRE NOS ### */
#divSobreNos{
    width: 100%;
    margin: 0 auto;
    padding-top: 20px;
}

#divSobreNos #sessao1,
#divSobreNos #sessao2,
#divSobreNos #sessao3,
#divSobreNos #sessao4,
#divSobreNos #sessao5{
    padding-left: 5%;
    padding-right: 5%;
}

#divSobreNos h1{
    color: #000;
    font-weight: bold;
    text-align: center;
    font-size: 20pt;
}

#divSobreNos h2{
    color: var(--cor-principal);
    font-weight: bold;
    text-align: center;
    font-size: 20pt;
    width: 80%;
    margin: 30px auto;
}

#divSobreNos #imgSessao1,
#divSobreNos #imgPlaneta{
    width: 80%;
    margin: 0 auto;
}

#divSobreNos #sessao1 #col,
#divSobreNos #sessao3 #col{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
}

#divSobreNos #sessao1 #col h3{
    font-size: 20px;
    text-align: center;
    color: #000;
    font-weight: bold;
    margin: 20px auto;
}

#divSobreNos #sessao1 p,
#divSobreNos #sessao3 p{
    font-size: 19px;
    text-align: justify;
    color: #000;
    font-weight: 300;
    margin: 20px auto;
}

#divSobreNos #divBtn{
    text-align: center;
} 

#divSobreNos #divBtn button{
    text-align: center;
    color: #000;
    background-color: var(--cor-secundaria);
    font-size: 18px;
    font-weight: 600;
    padding: 10px 20px; 
}

#divSobreNos #divBtn button:hover{
    filter: brightness(0.8);
}

#divSobreNos #sessao2{
    margin-top: 50px;
    text-align: center;
}

#divSobreNos #sessao2 iframe{
    width: 50%;
    aspect-ratio: 16 / 9;
}

@media (max-width: 767px) {
    #divSobreNos #sessao2 iframe{
        width: 80%;
        aspect-ratio: 16 / 9;
    }
}    

#divSobreNos #sessao3,
#divSobreNos #sessao5{
    background-color: var(--cor-principal);
    margin-top: 50px;
    padding-top: 30px;
    padding-bottom: 30px;
}

#divSobreNos #sessao3 h1,
#divSobreNos #sessao5 h1{
    color: #fff;
    font-size: 20pt;
}

#divSobreNos #sessao4 #col{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
}

#divSobreNos #sessao4 h2{
    text-align: center; 
    color: #000; 
    font-size: 15pt;
    font-weight: bold;
    margin-top: 50px;
}

#divSobreNos #sessao4 #imgVisaoMissaoValores{
    width: 70%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    margin: 0 auto;
    margin-top: 20px;
}

#divSobreNos #sessao4 p{
    font-size: 19px;
    text-align: justify;
    color: #000;
    font-weight: 300;
    margin: 20px auto;
    width: 70%;
}

#divSobreNos #sessao5 #col{
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: flex-start;
    text-align: center;
}

#divSobreNos #sessao5 #imgEquipe{
    width: 70%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
}

#divSobreNos #sessao5 p#nome{
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

#divSobreNos #sessao5 p#nomeAdvisor{
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

#divSobreNos #sessao5 p#cargo{
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

#divSobreNos #sessao5 h2{
    font-size: 16px;
    font-weight: 400;
    color: #fff;
}

#divSobreNos #sessao5 #advisors{
    margin-top: 40px;
}

#divSobreNos #sessao5 #imgAdvisor{
    width: 70%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    margin: 0 auto;
    border-radius: 10px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
}

#divSobreNos #sessao6 h1{
    text-align: center; 
    color: #000; 
    font-size: 15pt;
    font-weight: bold;
    margin-top: 50px;
}

/* PACOTES DE LOJA */
#divPacotesLoja{
    padding-top: 20px;
    text-align: center;
}

#divPacotesLoja h1{
    font-weight: 900;
    color: #000;
}

#divPacotesLoja #pacote{
    margin-top: 20px;
}

#divPacotesLoja #pacote .card-header{
    background-color: var(--cor-principal);
}

#divPacotesLoja #pacote .card-header h5{
    margin: 5px auto;
    color: #fff;
    font-weight: 900;
}

#divPacotesLoja #pacote .card-price{
    color: #000;
    font-size: 30px;
    font-weight: bold;
}

#divPacotesLoja #pacote #btnComprarPacote{
    background-color: var(--cor-principal);
    color: #fff;
    transition: 0.2s;
}

#divPacotesLoja #pacote #btnComprarPacote:hover{
    filter: brightness(0.8);
}

#divPacotesLoja #linhaPacotes {
    display: flex;
    justify-content: center;
}

#finalizarPedido.pacote #btnConfirmarPagamento{
    background: var(--amarelo);
    color: #000;
    font-family: Arial, sans-serif;
    border-radius: 0 0 4px 4px;
    border: 0;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: block;
    transition: all 0.2s ease;
    box-shadow: 0px 4px 5.5px 0px rgba(0, 0, 0, 0.07);
    width: 100%;
}

#finalizarPedido.pacote #btnConfirmarPagamento:hover{
    filter: contrast(115%);
}

#meusPacotes{
    width: 90%;
    margin: 0 auto;
}

/* SACOLINHA */
#finalizarSacolinha .divItem{
    display: flex;
    align-items: center;
}

#finalizarSacolinha .divItem select{
    width: 30%;
    margin-right: 10px;
}

#lista-produtos {
    list-style: none;
    padding: 10px;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0;
}

#lista-produtos li {
    display: flex;
    align-items: center;
    background-color: #f9f9f9;
    margin: 10px 0;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#lista-produtos li:hover {
    background-color: #e7e7e7;
}

#lista-produtos input[type="checkbox"] {
    margin-right: 15px;
}

#lista-produtos li span {
    flex-grow: 1;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

#lista-produtos li .preco {
    font-size: 14px;
    color: #28a745;
    margin-left: 10px;
}

#lista-produtos li .codigo-barra {
    font-size: 12px;
    color: #888;
    margin-left: 10px;
    text-align: right;
}

#modalProdutosSacolinha .modal-body label {
    display: block;
    margin-top: 10px;
}

#modalProdutosSacolinha .modal-body input.quantidade {
    padding: 8px;
    width: 60px;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#modalProdutosSacolinha .modal-body select {
    padding: 8px;
    width: 100%;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

@media (max-width: 750px) {
    #lista-produtos li {
        display: flex;
        background-color: #ddd;
        margin: 10px 0;
        padding: 10px;
        border-radius: 5px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        align-items: flex-start;
    }

    #lista-produtos li span,
    #lista-produtos li label{
        margin: 0!important;
        padding: 5px;
    }

    #lista-produtos input[type="checkbox"]{
        margin: 5px!important;
    }
}

#divInputBuscarProdutosSacolinha{
    max-width: 90%;
    margin: 0 auto;
}

#divBtnLimpar{
    display: flex;
    justify-content: flex-end;
}

#divBotoesLista{
    padding: 10px;
    margin-bottom: -20px;
    display: flex;
    justify-content: center
}

#divBotoesLista button{
    margin: 0 10px;
}

#modalProdutosSacolinha #indicadorObrigatorio{
    color: red;
    font-weight: bold;
}

#dataTableSacolinha table button{
    background-color: var(--cor-principal);
    color: #fff;
    width: 100%;
    margin: 5px auto;
    transition: 0.2s;
}

#dataTableSacolinha table button:hover{
    filter: brightness(0.8);
}

#corpoTabelaProdutos{
    text-align: center;
    vertical-align: middle;
}


/* PAGINA MEU IMPACTO */

#meuImpacto,
#painelIndicadoresLoja{
    background-color: #fff;
}

#meuImpacto h1,
#painelIndicadoresLoja h1{
    text-transform: uppercase;
    font-size: 20pt;
    font-weight: 400;
    text-align: center;
    margin-top: 50px;
}

#meuImpacto #indicador,
#painelIndicadoresLoja #indicador{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    vertical-align: baseline;
    padding: 10px;
}

#meuImpacto #indicador .conteudo,
#painelIndicadoresLoja #indicador .conteudo {
    border-radius: 0.375em;
    /* background-color: #ddd; */
    /* background-color: #000; */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    /* box-shadow: 5px 5px 10px rgba(0,0,0,0.2); */
    color: #000;
}

#meuImpacto #indicador .conteudo #iconIndicador,
#painelIndicadoresLoja #indicador .conteudo #iconIndicador {
    display: flex;
    padding: 5px;
    border-radius: 100px;
    background-color: #000;
    color: #fff;
    margin-bottom: 10px;
    width: 60px;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#meuImpacto #indicador .conteudo #iconIndicador i,
#painelIndicadoresLoja #indicador .conteudo #iconIndicador i {
    font-size: 30px;
    color: var(--cor-principal);
}

#meuImpacto #indicador .conteudo #numeroIndicador,
#painelIndicadoresLoja #indicador .conteudo #numeroIndicador {
    font-size: 1.3em;
    font-weight: bold;
}

#meuImpacto #linhaImpacto,
#painelIndicadoresLoja #linhaImpacto{
    display: flex;
    justify-content: center;
    max-width: 90%;
    margin: 0 auto!important;
}

#meuImpacto #legenda,
#painelIndicadoresLoja #legenda{
    display: flex;
    flex-direction: column;
}

/* ### MAQUINAS PDV ### */

#maquinasPDV{
    display: flex;
    flex-direction: column;
}

#maquinasPDV input{
    margin: 10px auto;
}

#btnSalvarMaquinas{
    float: right;
    background-color: var(--cor-principal);
    color: #fff;
    transition: 0.2s;
}

#btnSalvarMaquinas:hover{
    filter: brightness(0.8);
}


/* ### NOVO PEDIDO ### */
#novoPedidoReserva{
    display: none;
    text-align: center;
    padding: 20px;
    width: 95%;
    max-width: 500px;
    margin: 0 auto;
}

#novoPedidoReserva h1{
    color: var(--cor-principal);
    font-size: 25pt;
    font-weight: 900;   
}

#novoPedidoReserva #numeroPedido{
    font-weight: bold;
    color: #fff;
    font-size: 20px;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    text-align: center;
}

#novoPedidoReserva #pedidoConfirmado #box{
    margin: 40px auto;
    background-color: var(--cor-secundaria);
    padding: 30px;
    border-radius: 10px;
    font-size: 18px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    text-align: left;
}

#novoPedidoReserva #pedidoConfirmado #box .alert{
    background-color: #000;
    color: #fff;
    text-align: center;
}

#novoPedidoReserva #pedidoConfirmado #box #email{
    font-weight: bold;
}

#novoPedidoReserva #pedidoPendente #box{
    margin: 40px auto;
    background-color: var(--cor-secundaria);
    padding: 30px;
    border-radius: 10px;
    font-size: 18px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    text-align: left;
}

#novoPedidoReserva #pedidoPendente #box .alert{
    background-color: var(--cor-secundaria);
    color: #000;
    text-align: center;
}

#novoPedidoReserva #pedidoPendente #box #email{
    font-weight: bold;
}

#novoPedidoReserva #informacoesDoPedido{
    border: 1px solid #000;
    border-radius: 10px;
    margin: 0 auto;
    font-size: 16px;
    text-align: left;
    padding: 10px;
}

#novoPedidoReserva #informacoesDoPedido p{
    font-weight: bold;
}

#novoPednovoPedidoReservaido p#informacoes{
    margin: 0 auto;
    margin-top: 40px;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
}

#novoPedidoReserva #informacoesDoPedido span,
#novoPedidoReserva #informacoesDoPedido #divItens p{
    font-weight: normal;
}

#novoPedidoReserva #pedidoPendente #realizarPagamento{
    width: 100%;
    text-align: right;
}

#novoPedidoReserva #pedidoPendente #realizarPagamento button{
    background-color: var(--cor-principal);
    border-radius: 0.375em;
    color: #fff;
    font-size: 18px;
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
}

#novoPedidoReserva #pedidoPendente #realizarPagamento button:hover{
    filter: brightness(0.8);
}

#novoPedidoReserva #pedidoPendente #realizarPagamento #logoStripe{
    filter: invert(100%);
    width: 50px;
}

/* NOVA HOME */
#novaHome #sessaoTopo{
    width: 90%;
    margin: 0 auto;
    margin-top: 10px;
}

#novaHome #sessaoTopo #divTexto,
#novaHome #sessaoTopo #divImagem{
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#novaHome #sessaoTopo #divTexto #tituloSessaoTopo{
    font-weight: 800;
    font-size: 1.9em;
}

#novaHome #sessaoTopo #divTexto #texto{
    color: #000;
    font-size: 18px;
}

#novaHome #sessaoTopo #divTexto #tituloSessaoTopo span{
    color: var(--cor-principal);
}

#novaHome #sessaoTopo #divImagem img{
    width: 90%;
    border-radius: 0.375em;
    margin: 0 auto;
}

#novaHome #sessaoTopo #divTexto #aPartirDe{
    margin-top: 20px;
    color: var(--cor-principal);
}

#novaHome #sessaoTopo #divTexto #aPartirDe i{
    color: #fff;
    padding: 2px;
    background-color: var(--cor-principal);
    border-radius: 100px;
}

#novaHome #sessaoTopo #divTexto #btnComecarAgora{
    width: 100%;
    background-color: var(--cor-principal);
    color: #fff;
    font-weight: bold;
    border-radius: 100px;
    padding-top: 10px;
    padding-bottom: 10px;
    transition: 0.2s;
}

#novaHome #sessaoTopo #divTexto #btnComecarAgora:hover{
    filter: brightness(0.8);
}

#novaHome #sessaoTopo #divTexto #divFalaAlternada{
    display: flex;
    justify-content: center;
}

#novaHome #sessaoTopo #divTexto #falaAlternada{
    text-align: center;
    font-weight: bold;
    min-height: 24px;
}

#novaHome #sessaoCards .card{
    aspect-ratio: 1 / 1;
    text-align: center;
    background: linear-gradient(180deg, #02D569 25.07%, #016F37 100%);
    color: #fff;
    border: none;
}

#novaHome #sessaoCards .card .card-body{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

#novaHome #sessaoCards .card .card-body .card-title{
    font-weight: bold;
    font-size: 1.1em;
}

#novaHome #sessaoCards .card .card-body .card-text{
    font-size: 1em;
}


#novaHome #sessaoCards .swiper {
    width: 100%;
    margin: 20px auto;  
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#novaHome #sessaoCards .swiper .swiper-pagination{
    text-align: left;
    margin-top: 20px;
    margin-left: 20px;
}

#novaHome #sessaoCards .swiper .swiper-pagination-bullet {
    width: 15px;
    height: 15px;
    text-align: center;
    line-height: 15px;
    font-size: 12px;
    color: #000;
    opacity: 1;
    background: var(--cor-secundaria);
    transition: 0.2s;
}

#novaHome #sessaoCards .swiper .swiper-pagination-bullet-active {
    color: #fff;
    width: 40px;
    background: var(--cor-principal);
    border-radius: 100px;
    transition: 0.2s;
}

#novaHome #sessaoCards .swiper .pagination{
    width: auto;
}

#novaHome #sessaoCards #paginacaoNavegacao{
    margin-top: 20px;
    display: flex;
    align-items: center;
}

#novaHome #sessaoCrescimento{
    position: relative; 
    text-align: center;
    width: 100%;
    min-height: 300px;
    background-image: url('/assets/pessoa-com-tablet.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px;
    margin: 20px auto;
}

#novaHome #sessaoCrescimento .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(1, 87, 42, 0.8);
    z-index: 0;
}

#novaHome #sessaoCrescimento #titulo1,
#novaHome #sessaoCrescimento #titulo2,
#novaHome #sessaoCrescimento #subtitulo{
    z-index: 1;
}

#novaHome #sessaoCrescimento #titulo2{
    font-weight: bold;
    color: #fff;
    font-size: 1.4em;
}

#novaHome #sessaoCrescimento #subtitulo{
    color: #fff;
    font-size: 1.2em;
    font-weight: 500;
}


#novaHome #sessaoCrescimento #titulo1{
    font-weight: 800;
    color: #fff;
    font-size: 1.4em;
    max-width: 500px;
    margin: 10px auto;
}

#novaHome #sessaoCrescimento #titulo1 span{
    color: var(--cor-principal);
}

#novaHome #sessaoPlataformaN1{
    width: 90%;
    margin: 40px auto;
    
}

#novaHome #sessaoPlataformaN1 #divImagem,
#novaHome #sessaoPlataformaN1 #divTexto{
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#novaHome #sessaoPlataformaN1 #divImagem #imgMapa{
    /* width: 90%; */
    margin: 0 auto;
    border-radius: 10px;
    max-height: 400px;
    max-width: 100%;
    object-fit: cover;
}

#novaHome #sessaoPlataformaN1 #divTexto #tituloSessaoPlataforma{
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
    color: #000;
}

#novaHome #sessaoPlataformaN1 #divTexto #conteudo{
    font-size: 1.1em;
    color: #000;
    text-align: justify;
    margin-top: 10px;
}

#novaHome #sessaoBeneficios{
    width: 90%;
    margin: 20px auto;
}

#novaHome #sessaoBeneficios #tituloBeneficios{
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
    color: #000;
}

#novaHome #sessaoBeneficios #conteudo{
    font-size: 1.1em;
    color: #000;
    text-align: center;
    margin-top: 10px;
}

#novaHome #sessaoBeneficios #beneficios{
    display: flex;
    justify-content: center;
    flex-direction: row;
    align-items: flex-start;
}

#novaHome #sessaoBeneficios #beneficios #beneficio{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#novaHome #sessaoBeneficios #beneficios #beneficio i{
    font-size: 70px;
    color: var(--cor-principal);
}

#novaHome #sessaoBeneficios #beneficios #beneficio p{
    color: var(--cor-principal);
    max-width: 80%;
    font-weight: bold;
}

#novaHome  #sessaoProdutos{
    width: 90%;
    margin: 0 auto;
}

#novaHome #sessaoLojas{
    width: 100%;
    margin: 40px auto;
    padding: 20px;
    background-color: var(--cor-principal);
}

#home #sessaoProdutos,
#home #sessaoLojas{
    margin-top: 60px;
    margin-bottom: 60px;
}

#novaHome #sessaoLojas h1{
    color: #fff;
    text-align: center;
    font-weight: 800;
    font-size: 20px;
}

#novaHome #sessaoProdutos h1{
    text-align: center;
    font-weight: 800;
    color: #000;
    font-size: 20px;
}

#novaHome #sessaoProdutos #produtosEmDestaque a{
    text-decoration: none;
}

#novaHome #sessaoProdutos #produtosEmDestaque #itemProduto{
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 5px;
    transition: transform 0.3s ease;
}

#novaHome #sessaoProdutos #produtosEmDestaque #itemProduto:hover{
    transform: scale(1.1);
    cursor: pointer;
}

#novaHome #sessaoProdutos #produtosEmDestaque #itemProduto #imgProduto{
    width: 100%;
    aspect-ratio: 9 / 12;
    object-fit: cover;
    border-radius: 0.375em;

}

#novaHome #sessaoProdutos #produtosEmDestaque #itemProduto #nomeProduto{
    color: #000;
    font-size: 18px;
    font-weight: bold;
    margin-top: 5px;
}

#novaHome #sessaoProdutos #produtosEmDestaque #itemProduto #precoProduto{
    color: var(--cor-principal);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

#novaHome .swiperLojas {
    width: 100%;
    margin: 20px auto;
    height: 150px;    
    padding-right: 20px;
    padding-left: 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

#novaHome .swiperLojas #loja{
    height: 90%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    background-color: #fff;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5px;
    background-size: cover;
    background-position: center;
    transition: 0.2s;
}

#novaHome .swiperLojas #loja:hover{
    transform: scale(1.05);
    cursor: pointer;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    display: block;
	position: fixed;
	inset: 0;
	z-index: 999999;
	overflow: hidden;
	background: #fff;
	transition: all 0.6s ease-out;
}

#preloader:before {
	content: "";
	position: fixed;
	top: calc(50% - 30px);
	left: calc(50% - 30px);
	border: 6px solid #ffffff;
	border-color: #666 transparent #666 transparent;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

#novaHome #sessaoImpactoHome{
    background-color: #fff;
}

#novaHome #sessaoImpactoHome h1{
    font-weight: 800;
    text-align: center;
    font-size: 1.5em;
    color: #000;
}

#novaHome #sessaoImpactoHome p{
    font-size: 1.1em;
    color: #000;
    text-align: center;
    margin-top: 10px;
    font-weight: bold;
}

#novaHome #sessaoImpactoHome #indicador{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    vertical-align: baseline;
}

#novaHome #sessaoImpactoHome #indicador .conteudo {
    border-radius: 0.375em;
    /* background-color: #ddd; */
    /* background-color: #000; */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
    /* box-shadow: 5px 5px 10px rgba(0,0,0,0.2); */
    color: #000;
}

#novaHome #sessaoImpactoHome #indicador .conteudo #iconIndicador {
    display: flex;
    padding: 5px;
    border-radius: 100px;
    background-color: #000;
    color: #fff;
    margin-bottom: 10px;
    width: 60px;
    aspect-ratio: 1 / 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#novaHome #sessaoImpactoHome #indicador .conteudo #iconIndicador svg {
    font-size: 30px;
    color: var(--cor-principal);
}

#novaHome #sessaoImpactoHome #indicador .conteudo #numeroIndicador {
    font-size: 1.3em;
    font-weight: bold;
}

#novaHome #sessaoImpactoHome #linhaImpacto{
    display: flex;
    justify-content: center;
}

#novaHome #sessaoImpactoHome #legenda{
    display: flex;
    flex-direction: column;
}

#novaHome #sessaoSobreNos{
    width: 90%; 
    margin: 20px auto;
}

#novaHome #sessaoSobreNos #tituloSobreNos{
    font-weight: bold;
    text-align: center;
    font-size: 1.5em;
    color: #000;
}

#novaHome #sessaoSobreNos #imgSobreNos{
    width: 90%;
    border-radius: 20px;
    max-height: 350px;
    object-fit: cover;
}


#novaHome #sessaoSobreNos #divTexto,
#novaHome #sessaoSobreNos #divImagem{
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#novaHome #sessaoSobreNos #divTexto p{
    text-align: justify;
}

#novaHome #sessaoSobreNos #divTexto #btnSobreNos{
    background-color: var(--cor-principal);
    color: #fff;
}   

#novaHome #sessaoSobreNos #divTexto #linkSobreNos{
    text-align: center;
}

#novaHome #divBtnVerTodos{
    display: flex;
    justify-content: center;
}

#novaHome #divBtnVerTodos a{
    color: #fff;
    text-decoration: none;
}

#novaHome #divBtnVerTodos button{
    background-color: var(--cor-principal);
    color: #fff;
    transition: 0.2s;
}

#novaHome #divBtnVerTodos button:hover{
    filter: brightness(0.8);
}

/* ### PÁGINA DE CONEXÃO INSTAGRAM ### */
#conexaoInstagram{
    text-align: center;
    margin-top: 30px;
    padding: 20px;
}

#conexaoInstagram div#conectado{
    display: none;
}

#conexaoInstagram #logoInstagram{
    width: 150px;
    margin: 20px;
}

#conexaoInstagram div#naoConectado i{
    font-size: 70pt;
    color: var(--amarelo)!important;
}

#conexaoInstagram div#naoConectado p#naoConectado{
    color: var(--amarelo)!important;
    font-weight: bold;
    font-size: 15pt;
}

#conexaoInstagram div#conectado i{
    font-size: 70pt;
    color: var(--cor-principal)!important;
    margin: 20px;
}

#conexaoInstagram div#conectado p#conectado{
    color: var(--cor-principal)!important;
    font-weight: bold;
    font-size: 15pt;
}

#conexaoInstagram #naoConectado #linkConnect button{
    background-color: #000;
    margin-top: 30px;
}

#conexaoInstagram #naoConectado #linkConnect:hover button{
    background-color: #222;
}

#conexaoInstagram #naoConectado #linkConnect button,
#conexaoInstagram #naoConectado #linkConnect button:hover,
#conexaoInstagram #naoConectado #linkConnect,
#conexaoInstagram #naoConectado #linkConnect:hover{
    color: #fff!important;
    text-decoration: none;
}

#conexaoInstagram #naoConectado #linkConnect button i{
    font-size: 20px;
    color: #fff!important;
    margin-right: 5px;
    padding: 0;
    vertical-align: middle;
}


#dataTablePDV #buttonsVendedor{
    margin: 20px auto;
    display: flex;
    justify-content: space-evenly;
}

#dataTablePDV #buttonsVendedor button{
    background-color: var(--cor-principal);
    color: #fff;
    transition: 0.2s;
}

#dataTablePDV #buttonsVendedor button:hover{
    filter: brightness(0.8);
}

#divButtonsConsignado{
    margin: 20px auto;
    display: flex;
    justify-content: space-evenly;
}

#divButtonsConsignado button{
    background-color: var(--cor-principal);
    color: #fff;
    transition: 0.2s;
}

#divButtonsConsignado button:hover{
    filter: brightness(0.8);
}


/* #### CHAT CADASTRO PRODUTO #### */

#mensagemLOJA,
#mensagemGPT{
    margin: 10px;
}

#mensagemLOJA p,
#mensagemGPT p{
    margin: 0;
}

#mensagemLOJA p#nome,
#mensagemGPT p#nome{
    font-weight: bold;
    margin-bottom: 5px;
    margin-top: 10px;
}

#mensagemLOJA p#nome{
    text-align: right;
}

#mensagemLOJA p#textoMensagem,
#mensagemGPT p#textoMensagem{
    border-radius: 0.375em;
    padding: 10px;
}

#mensagemLOJA p#textoMensagem{
    background-color: var(--verde-principal);
}

#mensagemGPT p#textoMensagem{
    background-color: var(--verde-claro);
}

#mensagemLOJA{
    display: flex;
    justify-content: flex-end;
}

#mensagemLOJA #conteudo,
#mensagemGPT #conteudo{
    max-width: 300px;
}

#recordContainer #recordBtn{
    background-color: #000;
    color: #fff;
    height: 100%;
    aspect-ratio: 1/1;
}

#recordContainer #recordBtn:hover{
    background-color: var(--verde-escuro-hover);
}

/* Cadastro de Serviços */
#divCadastroServico{
    text-align: center;
    width: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
}

#divCadastroServico .step{
    display: none;
}

#divCadastroServico #formCadastroServico{
    width: 90%;
    border: 4px var(--verde-claro) solid;
    padding: 35px;
    border-radius: 0.375em;
}

#divCadastroServico #formCadastroServico .step{ 
    text-align: left;
    width: 100%;
}

#divCadastroServico #formCadastroServico #indicadorObrigatorio{
    color: red;
    font-weight: bold;
}

#divCadastroServico #formCadastroServico #buttonsForm{
    display: flex;
    justify-content: space-between;
}

#divCadastroServico #formCadastroServico #stepTitle{
    font-size: 20px;
    color: #000;
    font-weight: bolder;
}

#divCadastroServico #formCadastroServico #buttonsForm #nextBtn,
#divCadastroServico #formCadastroServico #buttonsForm #previewBtn{
    background-color: var(--cor-principal);
    color: #fff;
}

#divCadastroServico #formCadastroServico #buttonsForm #submitBtn{
    background-color: var(--cor-principal);
    color: #fff;
    display: none;
}

#divCadastroServico #formCadastroServico #buttonsForm #buttonsFinalizar{
    display: flex;
    justify-content: center;
}

#divCadastroServico #formCadastroServico #buttonsForm #previewBtn{
    margin-right: 10px;
}

#divCadastroServico #stepIndicators{
    display: flex;
}

@media (max-width: 800px) {
    #divCadastroServico #stepIndicators{
        display: none;
    }
}

#divCadastroServico .form-header .stepIndicator {
    position: relative;
    flex: 1;
    padding-bottom: 30px;
}

#divCadastroServico .form-header .stepIndicator.active {
    font-weight: 600;
}

#divCadastroServico .form-header .stepIndicator.finish {
    font-weight: 600;
    color: #009688;
}

#divCadastroServico .form-header .stepIndicator::before{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 9;
    width: 20px;
    height: 20px;
    background-color: #d5efed;
    border-radius: 50%;
    border: 3px solid #ecf5f4;
}

#divCadastroServico .form-header .stepIndicator.active::before {
    background-color: #a7ede8;
    border: 3px solid #d5f9f6;
}

#divCadastroServico .form-header .stepIndicator.finish::before{
    background-color: #009688;
    border: 3px solid #b7e1dd;
}

#divCadastroServico .form-header .stepIndicator::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 100%;
    height: 3px;
    background-color: #f3f3f3;
}

#divCadastroServico .form-header .stepIndicator.active::after {
    background-color: #a7ede8;
}

#divCadastroServico .form-header .stepIndicator.finish::after{
    background-color: #009688;
}

#divCadastroServico .form-header .stepIndicator:last-child:after {
    display: none;
}

#divCadastroServico .file-input{
    display: flex;
    flex-direction: column;
    align-items: center;
}

#divCadastroServico .btn-file{
    order: 1;
}

#divCadastroServico .file-preview{
    order: 2;
}

#divCadastroServico .input-group.file-caption-main{
    display: none;
}

#divCadastroServico .close.fileinput-remove{
    display: none;
}

#divCadastroServico .file-input-ajax-new{
    display: inline-block;
}

#divCadastroServico .file-input.theme-fas{
    display: inline-block;
    width: 100%;
}

#divCadastroServico .file-preview{
    padding: 0px;
    border: none;
    display: inline;
}

#divCadastroServico .file-footer-caption{
    display: none !important;
}

#divCadastroServico .file-upload-indicator{
    display: none;
}

#divCadastroServico .file-thumbnail-footer{
    display: block;
    position: absolute;
    top: -10px;
    right: -10px;
    margin-top: 0;
}

#divCadastroServico .kv-file-content{
    height: auto;
}

#divCadastroServico .kv-file-remove{
    border-radius: 50%;
    z-index: 1;
    text-align: center;
    color: #fff;
    background-color: #ed3237;
    border: 1px solid #ed3237;
    padding: 2px 6px;
    font-size: 11px;
    transition: 0.5s;
}

#divCadastroServico .kv-preview-thumb img{
    width: 150px!important;
    height: 150px!important;
    display: flex;
    object-fit: contain;
    text-align: center;
    align-items: center;
}

#divCadastroServico .krajee-default.file-preview-frame .kv-file-content{
    width: auto;
    height: auto;
}

#divCadastroServico #localizacaoServico{
    display: none;
    padding: 0;
    margin: 0 auto;
}

@media (max-width: 767px){
    #divCadastroServico #localizacaoServico > div{
        padding: 0;
    }
}

#divCadastroServico #localizacaoServico input{
    margin-top: 10px;
    border-radius: 0.375em;
}

#divCadastroServico input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#divCadastroServico form select.invalid + .select2-container .select2-selection--single,
#divCadastroServico form input.invalid,
#divCadastroServico form select.invalid{
    border: 1px red solid;
}

#divCadastroServico #buttonsForm{
    margin-top: 20px;
}

#divCadastroServico #horarioAtendimento #horarios label{
    margin-top: 5px;
}

#divCadastroServico #horarioAtendimento #horarios input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#divCadastroServico #horarioAtendimento #horarios #tituloDia{
    display: flex;
    align-items: center;
    margin-top: 20px;
}

#divCadastroServico #horarioAtendimento #horarios #checkbox24h{
    display: flex;
    align-items: center;
    margin-left: 10px;
}

#divCadastroServico #horarioAtendimento #horarios #checkbox24h label{
    margin-left: 5px;
}

#divCadastroServico #horarioAtendimento #horarios .invalid{
    background-color: #ffa0a0;
}

/* Estilo Pagina Servico */
#pageServiceTop{
    padding: 20px;
    margin: 0;
}

#pageServiceTop #imagens{
    display: flex;
    align-items: center;
    flex-direction: column;
}

#pageServiceTop #btnIndicarServico{
    margin: 20px auto;
    background-color: var(--cor-principal);
    color: #fff;
}

#pageServiceTop #btnIndicarServico:hover{
    filter: brightness(0.8);
}

#pageServiceTop #imagens #carrosselServicos{
    width: 90%;
    margin: 0 auto;
    text-align: center;
}

#pageServiceTop #imagens #carrosselServicos img{
    width: 90%;
    height: 300px!important;
    /* aspect-ratio : 1 / 0.8; */
    object-fit: contain;
}

#pageServiceTop #info{
    text-align: center;
}

#pageServiceTop #info #precoServico{
    color: #000;
    font-weight: bold;
    font-size: 1.75em;
    margin-bottom: 0px;
}

/* #pageServiceTop #info #precoExibicaoServico{
    color: red;
    text-decoration: line-through;
    margin-top: 30px;
    margin-bottom: 0;
    font-size: 18px;
} */

#pageServiceTop #info #labelInicioFim{
    text-align: left;
    width: 100%;
    margin-top: 20px;
}

/* #pageServiceTop #info #addListaDesejos{
    color: var(--cor-principal);
    margin-bottom: 30px;
}

#pageServiceTop #info #addListaDesejos:hover{
    color: var(--verde-principal-hover);
} */

#ui-datepicker-div .ui-datepicker-header{
    background-color: var(--cor-principal);
    color: #fff;
}

#ui-datepicker-div .ui-state-default{
    background-color: #02d569!important;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
    border: none;
}

#ui-datepicker-div .ui-state-disabled .ui-state-default{
    background-color: #f6f6f6!important;
    border: 1px solid #c5c5c5;
}

#ui-datepicker-div .date-blocked .ui-state-default{
    background-color: #dc3545 !important;
    color: #fff !important;
}

#ui-datepicker-div .ui-state-active, 
#ui-datepicker-div .select-range a{
    background-color: #01572A !important;
    color: #fff!important;
}

#ui-datepicker-div .ui-state-highlight{
    color: red!important;
}

#ui-datepicker-div .ui-datepicker td a,
#ui-datepicker-div .ui-datepicker td span{
    text-align: center;
    padding: 0.75em 0!important;
    border-radius: 5px;
}

#modalFormAgendamento #dadosAgendamento{
    padding: 5px;
    border-radius: 20px;
}

#modalFormAgendamento #formAgendamento label{
    margin-top: 10px;
}

#modalFormAgendamento #formAgendamento #labelPeriodoAgendamento{
    text-align: left;
    color: var(--cor-principal);
    font-weight: bold;
}

#modalFormAgendamento #btnFinalizarAgendamento{
    color: #fff;
    background-color: var(--cor-principal);
}

#modalFormAgendamento .modal-footer{
    justify-content: space-between;
}

#modalFormAgendamento #btnFinalizarAgendamento{
    filter: brightness(0.8);
}

#modalFormAgendamento #formAgendamento #divDataInicio,
#modalFormAgendamento #formAgendamento #divDataHoraInicio,
#modalFormAgendamento #formAgendamento #divDataFim,
#modalFormAgendamento #formAgendamento #divDataHoraFim{
    display: none;
}

#pageServiceTop #info #agendarAgora{
    margin-top: 20px;
    margin-bottom: 20px;
    background-color: var(--cor-principal);
    color: #fff;
    border-radius: 0.375em;
    font-weight: bold;
}

#pageServiceTop #info #agendarAgora:hover{
    filter: brightness(0.8);
    color: #fff;
}

#pageServiceTop .rating{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -5px;
}

#pageServiceTop .rating #numAvaliacoes{
    margin-left: 5px;
    color: #555;
}
  
#pageServiceTop .star{
    font-size: 24px;
    color: #ddd;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

#pageServiceTop .filled{
    color: var(--cor-secundaria);
}

#pageServiceTop .partialFiled .bi-star-fill{
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent!important;
}

#pageServiceTop .bi-star-fill{
    display: flex;
}

/* #pageServiceTop #info #localServico #labelLocalServico,
#pageServiceTop #info #labelCategoriasServico,
#pageServiceTop #info #labelTagsServico,
#pageServiceTop #info #labelGarantiaServico{
    color: #000;
    font-weight: bold;
}

#pageServiceTop #localServico a,
#pageServiceTop #lojaServico a{
    color: #000;
}

#pageServiceTop #localServico a:hover,
#pageServiceTop #lojaServico a:hover{
    color: var(--verde-escuro-hover);
}

#modalFormAgendamento #logisticaServico label,
#modalFormAssinatura #logisticaServico label{
    margin-top: 20px;
}

#pageServiceTop #info #categoriasServico,
#pageServiceTop #info #tagsServico{
    text-align: center;
    margin-top: 25px;
}

#pageServiceTop #info #categoriasServico #categoria{
    padding: 0px 8px 0px 8px;
    margin-right: 10px;
    border: 1px solid #000;
    border-radius: 10px;
    background-color: var(--verde-claro);
}

#modalFormAgendamento #localRetirada,
#modalFormAgendamento #localDevolucao,
#modalFormAgendamento  #localEntrega{
    display: none;
} */

#modalFormAgendamento #totalAgendamento{
    text-align: center;
    color: #000;
    font-size: 1.2em;
    padding: 20px;
}

#modalFormAgendamento #totalAgendamento > div {
    display: flex;
    align-content: space-between;
    flex-direction: row;
    justify-content: space-between;
    border: 1px #000 solid;
    padding: 5px;
}

#modalFormAgendamento #totalAgendamento #total{
    font-weight: 800;
}

#serviceTabs #tabService{
    padding: 30px;
}

#serviceTabs #tabService #mapaServico{
    height: 500px;
    margin: 0 auto;
    text-align: center;
}

#serviceTabs #tabService #descricaoServico{
    overflow-x: auto;
}

#serviceTabs ul.nav-tabs{
    border-bottom: 0.5px solid #000;
}

#serviceTabs .nav-link{
    color: var(--cor-principal);
    border: none;
    font-weight: 700;
    font-size: 1.2em;
}

#serviceTabs .nav-link.active{
    border-bottom: 5px solid var(--cor-principal);
}

#serviceTabs #sessaoAvaliacoes  .stars-container {
    display: inline-block;
    cursor: pointer;
}
  
#serviceTabs #sessaoAvaliacoes .star {
    font-size: 24px;
    color: grey;
    transition: color 0.2s;
}

#serviceTabs #sessaoAvaliacoes .star:hover,
    #serviceTabs #sessaoAvaliacoes .star.active {
    color: var(--amarelo);
}

#serviceTabs #sessaoAvaliacoes #btnEnviarAvaliacao{
    background-color: var(--cor-secundaria);
    color: #fff;
    border-radius: 0.375em;
    float: right;
}

#serviceTabs #sessaoAvaliacoes #btnEnviarAvaliacao:hover{
    filter: brightness(0.8);
}

#serviceTabs #sessaoAvaliacoes #divFormAvaliacao{
    margin: 20px auto;
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    font-size: 18px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.5);
    text-align: left;
}

#serviceTabs #sessaoAvaliacoes #divFormAvaliacao h1{
    color: #fff;
    text-shadow: 4px 4px 4px rgba(0, 0, 0, 0.5);
    text-align: center;
    font-weight: bold;
    font-size: 15pt;
}
#serviceTabs #sessaoAvaliacoes #divFormAvaliacoes #form{
    display: flex;
}

#serviceTabs #sessaoAvaliacoes #avaliacaoServico{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}

#serviceTabs #sessaoAvaliacoes #avaliacaoServico p{
    margin: 0;
}

#serviceTabs #sessaoAvaliacoes #avaliacaoServico p#usuarioAvaliacao{
    color: #555;
}

#serviceTabs #sessaoAvaliacoes #avaliacaoServico p #estrelaAvaliacao{
    color: var(--amarelo);
    font-size: 25px;
}

#serviceTabs #sessaoAvaliacoes #avaliacaoServico p #estrelaAvaliacaoVazia{
    color: #ccc;
    font-size: 25px;
}

#serviceTabs #sessaoAvaliacoes #titleAvaliacoes{
    text-align: center;
    font-weight: bold;
    font-size: 20pt;
}

#serviceTabs #sessaoAvaliacoes p#pSemAvaliacoes{
    text-align: center;
    margin-top: 20px;
    font-size: 18px;
}

/*
#servicosRelacionados{
    margin: 0;
}

#servicosRelacionados h1{
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: var(--amarelo);
}


#servicosRelacionados #servicos{
    margin: 0 auto;
    text-align: center;
}

#servicosRelacionados #divProd{
    padding: 20px;
}

#servicosRelacionados #prod{
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
    border-radius: 0.375em;
    height: 100%;
}

#servicosRelacionados #prod p{
    margin: 10px;
}

#servicosRelacionados #prod #imgProd{
    margin: 0 auto;
    aspect-ratio : 1 / 1;
    width: 90%;
    border-radius: 0.375em;
    object-fit: contain;
}

#servicosRelacionados #prod #prodName{
    font-weight: bold;
    font-size: 0.85em;
    min-height: 40px;
    color: #212529;
}

#servicosRelacionados #prod #prodPrice{
    color: #000;
    font-weight: bold;
}

#servicosRelacionados #prod #aPartirDe{
    color: #000!important;
    font-weight: 500!important;
    font-size: 0.8em!important;
}

#servicosRelacionados #prod #prodLocation{
    color: var(--cor-principal);
}

#servicosRelacionados #prod #btnReservar{
    background-color: var(--cor-principal);
    color: #fff;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 0.375em;
    font-weight: bold;
    border: none;
}


#servicosRelacionados #prod #btnReservar:hover{
    filter: brightness(0.8);
}

#servicosRelacionados #prod a{
    color: #000;
}

#servicosRelacionados #prod a:hover{
    color: var(--verde-escuro-hover);
}*/



.ui-timepicker-am::before, .ui-timepicker-pm::before{
    display: flex;
    flex-direction: row;
    align-items: center;
}

.ui-timepicker-am::before, .ui-timepicker-pm::before {
    content: "\f26b";
    font-family: "bootstrap-icons";
    display: inline-block;
    color: green;
    margin-right: 8px;
}

.ui-timepicker-disabled {
    color: red !important;
    opacity: 0.5;
}

.ui-timepicker-disabled::after {
    content: "[INDISPONÍVEL]";
    margin-left: 5px;
}

.ui-timepicker-disabled::before {
    content: "\f6b6";
    font-family: "bootstrap-icons";
    display: inline-block;
    color: red;
    margin-right: 8px;
}

#meusAgendamentos{
    width: 90%;
    margin: 0 auto;
}

#meusAgendamentos .card{
    padding: 0px;
}

#meusAgendamentos .card-footer{
    padding: 0px;
}

#meusAgendamentos .card-footer .accordion-button:not(.collapsed) {
    color: #000;
    background-color: var(--verde-claro);
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

#meusAgendamentos .card-footer .accordion-button:not(.collapsed)::after{
    filter: brightness(0)!important;
}

#meusAgendamentos .card-header{
    color: var(--cor-principal);
    font-weight: 600;
    text-align: center;
}

#meusAgendamentos .card-header small{
    color: #000;
}

#meusAgendamentos #imgCartao{
    height: 25px!important;
}

#paginacaoAgendamentos{
    display: flex;
    justify-content: center;   
}

#paginacaoAgendamentos button{
    margin: 5px;
    background-color: var(--cor-principal);
    color: #fff;
}

#meusAgendamentos #botoesAgendamento {
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
    flex-direction: column;
}

#meusAgendamentos #botoesAgendamento .btn-avaliar{
    background-color: var(--cor-principal);
    color: #fff;
    margin-top: 10px;
}

#meusAgendamentos #botoesAgendamento .btn-avaliar:hover{
    filter: brightness(0.8);
}

/* ### HORARIOS DE FUNCIONAMENTO ### */
#horarioDeFuncionamento{
    width: 90%;
    margin: 0 auto;
}

#horarioDeFuncionamento #horarios{
    margin-top: 20px;
}

#horarioDeFuncionamento #horarios h2{
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin: 0;
}

#horarioDeFuncionamento #horarios label{
    color: var(--cor-principal);
    margin-top: 5px;
}

#horarioDeFuncionamento #horarios input[readonly]{
    background-color: #ddd;
    color: #707070;
}

#horarioDeFuncionamento #horarios #tituloDia{
    display: flex;
    align-items: center;
    margin-top: 50px;
}

#horarioDeFuncionamento #horarios #checkbox24h{
    display: flex;
    align-items: center;
    margin-left: 10px;
}

#horarioDeFuncionamento #horarios #checkbox24h label{
    margin-left: 5px;
}

#horarioDeFuncionamento #horarios .invalid{
    background-color: #ffa0a0;
}

#horarioDeFuncionamento #btnSalvarHorarios{
    color: #fff;
    background-color: var(--cor-principal);
    float: right;
    margin-top: 20px;
}

#horarioDeFuncionamento #btnSalvarHorarios:hover{
    filter: brightness(0.8);
}

/* PAGINA DOWNLOAD APP */
#paginaApp{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    min-height: 90vh;
}

#paginaApp h1{
    margin: 10px auto;
    color: var(--cor-principal);
    font-weight: bold;
}

#paginaApp p{
    width: 80%;
    text-align: center;
}

#paginaApp img#logo{
    width: 50%;
    margin: 20px auto;
}

#paginaApp img#imageApp{
    width: 90%;
    max-width: 400px;
}

#paginaApp button{
    background-color: var(--cor-principal);
    color: #fff;
}

#paginaApp button:hover{
    filter: brightness(0.8);
}

.iti--inline-dropdown{
    width: 100%;
}

/* Avaliacao Produto - Pagina Produto */
#avaliacaoProd .painel-container {
    max-width: 900px;
    margin: auto;
}

#avaliacaoProd .avaliacao-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

#avaliacaoProd .card-body {
    padding: 24px;
}

#avaliacaoProd .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

#avaliacaoProd .estrelas .estrela-preenchida {
    color: #ffc107;
}

#avaliacaoProd .estrelas .estrela-vazia {
    color: #e0e0e0;
}

#avaliacaoProd .card-comentario {
    font-style: italic;
    color: #495057;
    border-left: 3px solid #e9ecef;
    padding-left: 16px;
    margin: 16px 0;
}

#avaliacaoProd .fotos-container {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

#avaliacaoProd .fotos-container img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #ddd;
}

#avaliacaoProd .card-footer {
    padding: 16px 24px;
    background-color: #f8f9fa;
    text-align: right;
}

#avaliacaoProd .btn-responder {
    background-color: #02d569;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
}

#avaliacaoProd .btn-responder:hover {
    background-color: #01ad54;
}

#avaliacaoProd .resposta-admin {
    margin-top: 24px;
    padding: 16px;
    background-color: #e1ffef;
    border-left: 5px solid #02d569;
    border-radius: 4px;
    font-size: 15.2px;
}

#avaliacaoProd .resposta-admin h6 {
    margin-top: 0;
    margin-bottom: 8px;
    color: #02d569;
    font-weight: bold;
}

#avaliacaoProd .resposta-admin p {
    margin-bottom: 8px;
    color: #343a40;
}

#avaliacaoProd .resposta-admin small {
    display: block;
    text-align: right;
    color: #6c757d;
    font-size: 12.8px;
}

#avaliacaoProd #userAvaliacao img{
    width: 30px !important;
    aspect-ratio: 1 / 1;
    border-radius: 100px;
}

#estrelasAvaliacaoProd .star {
    font-size: 1.1em;
    line-height: 1;
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

#estrelasAvaliacaoProd .star-fraction {
    width: 1.1em;
    height: 1.1em;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}

#estrelasAvaliacaoProd .star-fraction i {
    position: absolute;
    left: 0;
    top: 0;
    line-height: 1;
}

.infoPecaUnica{
    margin: 5px auto;
}

.infoPecaUnica div{
    padding: 2px;
    text-align: center;
}

/* CALCULADORA DE FRETE PRODUTO */
.calculadora-frete-container {
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 20px;
    border-radius: 12px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.calculadora-frete-container:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.12);
}

.calculadora-frete-titulo {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.calculadora-frete-titulo i {
    color: var(--cor-principal);
    font-size: 18px;
}

.calculadora-frete-input-wrapper {
    display: flex;
    gap: 10px;
}

.calculadora-frete-input {
    border-radius: 8px !important;
    border: 1px solid #ced4da;
    padding: 10px 15px;
    font-size: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.calculadora-frete-input:focus {
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 0.2rem rgba(2, 213, 105, 0.15);
    outline: none;
}

.calculadora-frete-btn {
    background-color: var(--cor-principal) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 600;
    padding: 10px 20px !important;
    transition: filter 0.2s ease, transform 0.1s ease;
    white-space: nowrap;
}

.calculadora-frete-btn:hover {
    filter: brightness(0.9);
}

.calculadora-frete-btn:active {
    transform: scale(0.98);
}

.calculadora-frete-resultados {
    margin-top: 15px;
    border-top: 1px solid #f1f1f1;
    padding-top: 15px;
}

.frete-opcao-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px;
    border-radius: 8px;
    background: #fdfdfd;
    border: 1px solid #f1f1f1;
    margin-bottom: 10px;
    transition: all 0.2s ease;
    animation: fadeInUp 0.3s ease forwards;
}

.frete-opcao-card:hover {
    background: #f7f9f8;
    border-color: rgba(2, 213, 105, 0.2);
    transform: translateY(-1px);
}

.frete-opcao-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.frete-opcao-icone {
    font-size: 20px;
    color: #555555;
    background: #f3f3f3;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; /* Garante que o ícone nunca seja deformado pelo flexbox no mobile */
}

.frete-opcao-card:hover .frete-opcao-icone {
    color: var(--cor-principal);
    background: rgba(2, 213, 105, 0.08);
}

.frete-opcao-detalhes {
    display: flex;
    flex-direction: column;
}

.frete-opcao-nome {
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}

.frete-opcao-prazo {
    font-size: 12px;
    color: #777777;
    margin-top: 2px;
}

.frete-opcao-valor {
    font-size: 15px;
    font-weight: 700;
    color: var(--cor-principal);
    white-space: nowrap; /* Evita que o R$ quebre da linha do valor numérico */
}

.frete-opcao-valor.gratis {
    color: #2e7d32;
    background-color: #e8f5e9;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    text-transform: uppercase;
}

.calculadora-frete-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;
    color: #666666;
    font-size: 14px;
}

.calculadora-frete-loader .spinner-border {
    color: var(--cor-principal);
    width: 20px;
    height: 20px;
}

.calculadora-frete-erro {
    font-size: 13px;
    color: #d32f2f;
    background-color: #ffebee;
    padding: 10px 15px;
    border-radius: 8px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CHECKOUT DE FRETE INTERATIVO */
.checkout-frete-opcao {
    position: relative;
    display: block;
    margin-bottom: 12px;
    cursor: pointer;
}

.checkout-frete-opcao input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkout-frete-opcao-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    border-radius: 10px;
    background: #ffffff;
    border: 2px solid #e9ecef;
    transition: all 0.2s ease;
}

.checkout-frete-opcao:hover .checkout-frete-opcao-card {
    border-color: #ced4da;
    background-color: #f8f9fa;
}

.checkout-frete-opcao input[type="radio"]:checked + .checkout-frete-opcao-card {
    border-color: var(--cor-principal);
    background-color: rgba(2, 213, 105, 0.03);
}

.checkout-frete-opcao-info {
    display: flex;
    align-items: center;
    gap: 15px;
    min-width: 0; /* Permite encolhimento de textos sem quebrar flexbox */
}

.checkout-frete-opcao-icone {
    font-size: 22px;
    color: #495057;
    background: #f1f3f5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0; /* Garante que a bolinha NUNCA seja espremida no mobile */
}

.checkout-frete-opcao input[type="radio"]:checked + .checkout-frete-opcao-card .checkout-frete-opcao-icone {
    color: #ffffff;
    background: var(--cor-principal);
}

.checkout-frete-opcao-detalhes {
    display: flex;
    flex-direction: column;
    min-width: 0; /* Evita que o texto quebre o alinhamento flex */
}

.checkout-frete-opcao-nome {
    font-size: 15px;
    font-weight: 700;
    color: #212529;
    line-height: 1.2;
}

.checkout-frete-opcao-prazo {
    font-size: 12px;
    color: #6c757d;
    margin-top: 2px;
}

.checkout-frete-opcao-valor {
    font-size: 16px;
    font-weight: 800;
    color: var(--cor-principal);
    white-space: nowrap; /* Evita quebrar o 'R$' do preço */
    flex-shrink: 0; /* Evita que o preço seja espremido */
    margin-left: 10px;
}

.checkout-frete-opcao-valor.gratis {
    color: #157347;
    background-color: #d1e7dd;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    white-space: nowrap; /* Evita quebrar o texto do badge */
    flex-shrink: 0; /* Evita encolhimento */
    margin-left: 10px;
}

/* ESTILIZAÇÃO DO CHECKOUT MODERNIZADO (finalizar-pedido.html) */

.checkout-title {
    font-size: 24px;
    font-weight: 800;
    color: #1a1a1a;
    letter-spacing: -0.5px;
}

.checkout-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.checkout-card:hover {
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.checkout-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #f1f1f1;
    padding-bottom: 12px;
}

.checkout-section-title i {
    color: var(--cor-principal);
}

.checkout-payment-subtitle {
    font-size: 15px;
    font-weight: 700;
    color: #333333;
    border-bottom: 1px dashed #e9ecef;
    padding-bottom: 8px;
}

/* TABELA DE ITENS NO RESUMO DO PEDIDO */
.checkout-cart-table {
    margin-bottom: 0;
}

.checkout-cart-table tr {
    border-bottom: 1px solid #f8f9fa;
}

.checkout-cart-table tr:last-child {
    border-bottom: none;
}

.checkout-cart-table td {
    padding: 12px 8px;
    font-size: 14px;
    color: #333333;
}

.checkout-cart-table td img {
    border-radius: 10px;
    object-fit: cover;
    width: 70px !important;
    height: 70px !important;
    border: 1px solid #f1f1f1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

/* Timer flutuante sobre imagem */
.checkout-cart-table td div.alert-warning {
    margin-top: 6px;
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-radius: 4px;
    border: none;
    background-color: #fff3cd;
    color: #856404;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.checkout-cart-table tr td:first-child {
    width: 90px;
}

.checkout-cart-table tr td:nth-child(2) {
    font-weight: 600;
    line-height: 1.3;
}

.checkout-cart-table tr td:nth-child(3) {
    text-align: center;
    font-weight: 700;
    color: #666;
    white-space: nowrap;
}

.checkout-cart-table tr td:last-child {
    text-align: right;
    font-weight: 700;
    color: #1a1a1a;
}

/* TABELA DE TOTAIS */
.checkout-totals-table th {
    font-weight: 500;
    color: #666666;
    padding: 8px 0;
    font-size: 14px;
}

.checkout-totals-table td {
    padding: 8px 0;
    font-size: 14px;
    font-weight: 600;
    color: #333333;
}

.checkout-totals-table tr.checkout-total-row th {
    font-weight: 700;
    font-size: 16px;
    color: #1a1a1a;
}

.checkout-totals-table tr.checkout-total-row td {
    font-weight: 800;
    font-size: 18px;
    color: var(--cor-principal);
}

/* ESTILIZAÇÃO DOS INPUTS E SELETORES DO PAGAMENTO */
.form-select, .form-control {
    border-radius: 8px !important;
    border: 1px solid #ced4da;
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.form-select:focus, .form-control:focus {
    border-color: var(--cor-principal);
    box-shadow: 0 0 0 3px rgba(2, 213, 105, 0.12);
    outline: none;
}

.form-label.font-semibold {
    font-weight: 600;
    font-size: 13px;
    color: #495057;
    margin-bottom: 6px;
}

/* BOTÕES DE AÇÃO DE PAGAMENTO */
.btn-checkout-action {
    background-color: var(--cor-principal) !important;
    border-color: var(--cor-principal) !important;
    color: #ffffff !important;
    font-weight: 700;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 15px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(2, 213, 105, 0.2);
}

.btn-checkout-action:hover {
    filter: brightness(0.92);
    box-shadow: 0 6px 16px rgba(2, 213, 105, 0.3);
    transform: translateY(-1px);
}

.btn-checkout-action:active {
    transform: translateY(0);
}

.btn-checkout-action:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

/* RESPONSIVIDADE */
@media (max-width: 991.98px) {
    .checkout-title {
        font-size: 20px;
        text-align: center;
    }
    
    .checkout-card {
        padding: 18px;
        border-radius: 12px;
    }
    
    .checkout-section-title {
        font-size: 16px;
        margin-bottom: 15px;
        padding-bottom: 10px;
    }
    
    /* No celular, o resumo do pedido aparece primeiro, acima das opções de preenchimento */
    .checkout-sidebar-col {
        order: -1;
        margin-bottom: 15px;
    }
}

/* BARRA DE RESUMO MOBILE (GATILHO - SHOPIFY STYLE) */
.checkout-mobile-summary-trigger {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.checkout-mobile-summary-trigger:hover {
    background-color: #f8f9fa;
    border-color: rgba(0, 0, 0, 0.15);
}

.checkout-mobile-summary-trigger .summary-arrow-icon {
    font-size: 12px;
    transition: transform 0.2s ease;
}

/* Garante que o resumo fique sempre visível em telas grandes, mesmo usando collapse no Bootstrap */
@media (min-width: 992px) {
    #checkoutSummaryCollapse.collapse:not(.show) {
        display: block !important;
    }
}

/* ANULAÇÃO DE REGRAS LEGADAS CONFLITANTES NO CHECKOUT */
#finalizarPedido #pedidoItems,
#finalizarPedido #logisticaPedido {
    width: 100% !important;
    margin: 0 0 24px 0 !important; /* Afasta verticalmente o bloco de baixo */
    padding: 24px !important; /* Estilo do card modernizado */
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    overflow-x: visible !important;
}

/* Evita que #conteudoFinalizar crie um card duplicado em volta da seção de pagamento */
#finalizarPedido #conteudoFinalizar {
    width: 100% !important;
    margin: 0 !important;
    background-color: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}

#finalizarPedido #pedidoItems h2,
#finalizarPedido #logisticaPedido h2,
#finalizarPedido #conteudoFinalizar h2 {
    font-size: 18px !important;
    padding: 0 !important;
    margin-bottom: 20px !important;
}

#finalizarPedido #pedidoItems table,
#finalizarPedido #pedidoItems table tr,
#finalizarPedido #pedidoItems table td,
#finalizarPedido #pedidoItems table th {
    border: none !important;
    background-color: transparent !important;
    text-align: left !important;
}

#finalizarPedido #divTotalCupom {
    width: 100% !important;
    margin: 0 0 24px 0 !important; /* Mantém o espaçamento inferior no mobile e desktop */
}

#finalizarPedido #divTotalCupom #tabelaTotais {
    width: 100% !important;
    margin: 0 !important;
}

#finalizarPedido #divTotalCupom #tabelaTotais th,
#finalizarPedido #divTotalCupom #tabelaTotais tr,
#finalizarPedido #divTotalCupom #tabelaTotais td {
    border: none !important;
    background-color: transparent !important;
    color: inherit !important;
}

#finalizarPedido #divCupom {
    padding: 0 !important;
    text-align: left !important;
}

#finalizarPedido #divCupom label {
    color: inherit !important;
}

/* PADRONIZAÇÃO DE BOTÕES E ALINHAMENTO DE INPUTS NO CHECKOUT */
#finalizarPedido .btn-primary {
    background-color: var(--cor-principal) !important;
    border-color: var(--cor-principal) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

#finalizarPedido .btn-primary:hover {
    filter: brightness(0.9) !important;
}

/* Força alinhamento e mesma altura em todos os grupos de inputs (CEP e Cupom) */
#finalizarPedido .input-group {
    align-items: stretch !important;
}

#finalizarPedido .input-group .form-control,
#finalizarPedido .input-group .btn {
    height: 44px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    float: none !important;
}

#finalizarPedido .input-group .btn {
    border-radius: 0 8px 8px 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#finalizarPedido .input-group .form-control {
    border-radius: 8px 0 0 8px !important;
}

/* Anulações específicas de margens e floats antigos do Cupom */
#finalizarPedido #divCupom #inputCupom {
    margin: 0 !important;
    border-radius: 8px 0 0 8px !important;
}

#finalizarPedido #divCupom #btnAplicarCupom {
    margin: 0 !important;
    float: none !important;
    border-radius: 0 8px 8px 0 !important;
}

/* ==========================================================================
   ESTILOS MODERNOS DO CARRINHO DE COMPRAS (/carrinho)
   ========================================================================== */

#cart {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

#cart #cartItems {
    width: 100% !important;
    margin: 0 !important;
}

/* CARDS DO CARRINHO */
.cart-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 24px !important;
}

.cart-title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #1a1a1a !important;
}

.cart-section-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    border-bottom: 1px solid #f1f3f5;
    padding-bottom: 12px;
}

/* TABELA DE ITENS NO DESKTOP */
.cart-items-table {
    margin-bottom: 0 !important;
}

.cart-items-table th {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #888888 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border: none !important;
    background-color: transparent !important;
}

.cart-items-table td {
    padding: 20px 16px !important;
    border: none !important;
    background-color: transparent !important;
    border-bottom: 1px solid #f8f9fa !important;
}

.cart-items-table tr:last-child td {
    border-bottom: none !important;
}

/* Foto dos itens */
.cart-items-table td img {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 10px !important;
    border: 1px solid #f1f1f1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

/* Quantidade no Desktop */
.cart-items-table .input-group#inputGroupCartQtd {
    width: 105px !important;
    align-items: center !important;
}

.cart-items-table .input-group#inputGroupCartQtd .btn {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    border: 1px solid #dee2e6 !important;
    background-color: #f8f9fa !important;
    color: #495057 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
}

.cart-items-table .input-group#inputGroupCartQtd .btn:hover {
    background-color: #e9ecef !important;
    border-color: #ced4da !important;
}

.cart-items-table .input-group#inputGroupCartQtd input#inputQtd {
    width: 45px !important;
    height: 30px !important;
    text-align: center !important;
    border: 1px solid #dee2e6 !important;
    border-left: none !important;
    border-right: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Alertas de timer no carrinho */
.cart-items-table .alert-warning {
    font-size: 11px !important;
    padding: 4px 8px !important;
    margin-bottom: 8px !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    background-color: #fff3cd !important;
    color: #856404 !important;
    width: auto !important;
}

/* BOTÕES DE EXCLUSÃO E SALVAMENTO */
.btn-excluir, .btn-salvar {
    width: 34px !important;
    height: 34px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
    border: 1px solid transparent !important;
    margin: 3px !important;
}

.btn-excluir {
    background-color: rgba(220, 53, 69, 0.08) !important;
    color: #dc3545 !important;
}

.btn-excluir:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(220, 53, 69, 0.2) !important;
}

.btn-salvar {
    background-color: rgba(0, 123, 255, 0.08) !important;
    color: #007bff !important;
}

.btn-salvar:hover {
    background-color: #007bff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2) !important;
}

/* LISTA DE ITENS MOBILE */
#listaItemsMobile #item {
    background-color: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.01) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

#listaItemsMobile #item #prod {
    display: flex !important;
    gap: 16px !important;
    align-items: flex-start !important;
}

#listaItemsMobile #item #fotoItem {
    flex-shrink: 0 !important;
}

#listaItemsMobile #item #fotoProduto {
    width: 80px !important;
    height: 80px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    border: 1px solid #f1f1f1 !important;
}

#listaItemsMobile #item #details {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

#listaItemsMobile #item #details h2 {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    line-height: 1.4 !important;
}

/* Alertas de timer no mobile */
#listaItemsMobile #item #details h2 .alert-warning {
    margin-bottom: 6px !important;
    font-size: 11px !important;
    padding: 2px 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: none !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
}

/* Ajustes de quantidade no mobile */
#listaItemsMobile #item #details #divQtdProd.input-group {
    width: 100px !important;
    align-items: center !important;
}

#listaItemsMobile #item #details #divQtdProd.input-group .btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    font-size: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 4px !important;
    border: 1px solid #dee2e6 !important;
    background-color: #f8f9fa !important;
    color: #495057 !important;
    transition: all 0.2s ease !important;
}

#listaItemsMobile #item #details #divQtdProd.input-group input#inputQtd {
    height: 28px !important;
    font-size: 13px !important;
    text-align: center !important;
    padding: 0 !important;
    border: 1px solid #dee2e6 !important;
    border-left: none !important;
    border-right: none !important;
    background-color: #ffffff !important;
    font-weight: 600 !important;
}

/* Subtotais no mobile */
#listaItemsMobile #item #divPreco {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #495057 !important;
    border-top: 1px dashed #e9ecef !important;
    padding-top: 12px !important;
    margin-top: 4px !important;
}

#listaItemsMobile #item #divPreco span {
    color: #1a1a1a !important;
}

/* Ações no mobile */
#listaItemsMobile #item #divBtnRemover {
    display: flex !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin-top: 4px !important;
}

#listaItemsMobile #item #divBtnRemover .btn-excluir,
#listaItemsMobile #item #divBtnRemover .btn-salvar {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    font-size: 14px !important;
}

/* TABELA DE TOTAIS NO RESUMO */
.cart-totals-table {
    width: 100% !important;
    margin-bottom: 0 !important;
}

.cart-totals-table th {
    font-weight: 500 !important;
    color: #666666 !important;
    padding: 10px 0 !important;
    font-size: 14px !important;
    border: none !important;
    background-color: transparent !important;
}

.cart-totals-table td {
    padding: 10px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333333 !important;
    border: none !important;
    background-color: transparent !important;
}

.cart-totals-table tr.cart-total-row th {
    font-weight: 700 !important;
    font-size: 16px !important;
    color: #1a1a1a !important;
    padding-top: 16px !important;
}

.cart-totals-table tr.cart-total-row td {
    font-weight: 800 !important;
    font-size: 20px !important;
    color: var(--cor-principal) !important;
    padding-top: 16px !important;
}

/* BOTÕES DE AÇÃO DO CARRINHO (SIDEBAR) */
.btn-cart-action {
    background-color: var(--cor-principal) !important;
    border-color: var(--cor-principal) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(2, 213, 105, 0.15) !important;
}

.btn-cart-action:hover {
    filter: brightness(0.92) !important;
    box-shadow: 0 6px 16px rgba(2, 213, 105, 0.25) !important;
    transform: translateY(-1px) !important;
}

.btn-cart-action:active {
    transform: translateY(0) !important;
}

#btnContinuarComprando {
    border-radius: 10px !important;
    padding: 12px 24px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    background-color: transparent !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    text-decoration: none !important;
}

#btnContinuarComprando:hover {
    background-color: #f8f9fa !important;
    border-color: #ced4da !important;
    color: #212529 !important;
    text-decoration: none !important;
}

#btnFinalizarPedido {
    text-decoration: none !important;
}

#btnFinalizarPedido:hover {
    text-decoration: none !important;
}

#btnLimparCarrinho {
    border: 1px solid rgba(220, 53, 69, 0.2) !important;
    color: #dc3545 !important;
    background-color: transparent !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

#btnLimparCarrinho:hover {
    background-color: #dc3545 !important;
    color: #ffffff !important;
    border-color: #dc3545 !important;
    text-decoration: none !important;
}

/* ANULAÇÃO DOS ESTILOS E BORDAS LEGADAS DA TABELA DE TOTAIS DO CARRINHO */
#cart #divTotalCupom #tabelaTotais {
    border: none !important;
    margin: 20px auto 0 auto !important;
    width: 100% !important;
}

#cart #divTotalCupom #tabelaTotais th,
#cart #divTotalCupom #tabelaTotais tr,
#cart #divTotalCupom #tabelaTotais td {
    border: none !important;
    background-color: transparent !important;
    color: inherit !important;
    padding: 10px 0 !important;
}

/* ANULAÇÃO DOS FLOATS E REGRAS DE POSICIONAMENTO DO RESUMO (SIDEBAR) */
#cart #options {
    width: 100% !important;
    margin: 24px 0 0 0 !important;
    float: none !important;
    display: block !important;
}

#cart #options #btnFinalizarPedido,
#cart #options #btnContinuarComprando {
    float: none !important;
    display: block !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
}

#cart #options #btnContinuarComprando {
    margin-bottom: 0 !important;
}

/* CARRINHO VAZIO */
.cart-empty-card {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    padding: 48px 32px !important;
}

.empty-cart-icon {
    width: 80px;
    height: 80px;
    line-height: 80px;
    background-color: #f8f9fa;
    color: #6c757d;
    border-radius: 50%;
    margin: 0 auto 24px auto;
    font-size: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-empty-card h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
}

.cart-empty-card p {
    font-size: 14px !important;
}

/* AJUSTES RESPONSIVOS */
@media (max-width: 991.98px) {
    .cart-title {
        font-size: 22px !important;
        text-align: center;
    }
}

@media (max-width: 767.98px) {
    .cart-card {
        padding: 16px !important;
    }
    #cart #divTotalCupom #tabelaTotais {
        margin: 10px auto 0 auto !important;
    }
}

/* ==========================================================================
   BARRA DE ANÚNCIOS NO TOPO DA LOJA
   ========================================================================== */
.barra-anuncio {
    overflow: hidden;
    position: relative;
    width: 100%;
    padding: 10px 0;
    font-size: 0.9rem;
    font-weight: 600;
    z-index: 9999;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.barra-anuncio-wrapper {
    display: flex;
    width: max-content;
}
.barra-anuncio-track {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    min-width: 100vw;
    justify-content: space-around;
}
.barra-anuncio-item {
    padding: 0 40px;
    white-space: nowrap;
}
.barra-anuncio-animada .barra-anuncio-wrapper {
    animation: marquee var(--velocidade-marquee, 15s) linear infinite;
}
.barra-anuncio-animada:hover .barra-anuncio-wrapper {
    animation-play-state: paused;
}
.barra-anuncio-estatica {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.barra-anuncio-estatica .barra-anuncio-wrapper {
    width: 100%;
    justify-content: center;
}
.barra-anuncio-estatica .barra-anuncio-track {
    min-width: auto;
    justify-content: center;
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
/* Offcanvas Sidebar Minha Conta - Ajustes de Legibilidade */
#offcanvas {
    background-color: #ffffff !important;
    color: #212529 !important;
    box-shadow: 4px 0 20px rgba(0,0,0,0.15);
    z-index: 99999 !important;
}
#offcanvas .offcanvas-header {
    border-bottom: 1px solid #e9ecef;
    padding: 20px;
}
#offcanvas .offcanvas-title {
    color: #212529 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}
#offcanvas .nav-link {
    color: #334155 !important;
    font-weight: 600 !important;
    font-size: 0.95rem;
    padding: 10px 20px !important;
    width: 100%;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
#offcanvas .nav-link:hover {
    color: var(--cor-principal, #9933FF) !important;
    background-color: #f1f5f9 !important;
}
#offcanvas .nav-link i {
    color: var(--cor-principal, #9933FF) !important;
}


/* CORREÇÃO DO SELETOR DE PAÍS (INTL-TEL-INPUT) NO REGISTRO / CADASTRO */
.iti {
    width: 100% !important;
    display: block !important;
}
.iti input[type="tel"],
.iti input#celularRegistro,
.iti input#celularRegistroProvider,
#celularRegistro,
#celularRegistroProvider {
    padding-left: 58px !important;
}
.iti__country-container,
.iti__flag-container {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    z-index: 5 !important;
}
.iti__selected-country,
.iti__selected-flag {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 8px 0 12px !important;
}

/* INDICADOR DE FORÇA DE SENHA ELEGANTE */
#indicadorSenha { width: 100% !important; margin-bottom: 1rem !important; }
#forcaSenha { height: 22px !important; border-radius: 99px !important; background-color: #f1f5f9 !important; overflow: hidden !important; width: 100% !important; border: 1px solid #e2e8f0 !important; }
#forcaSenha #barra { height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 0.74rem !important; font-weight: 700 !important; color: #ffffff !important; line-height: 22px !important; transition: width 0.3s ease, background-color 0.3s ease !important; }
#forcaSenha #barra.bg-warning { color: #1e293b !important; }