main{
    display: flex;
    
    width: 100%;
    gap: 100px;
    margin-top: 50px;
}
button{
    background-color: #fff;
    padding: 2px;
}
button:hover{
    cursor: pointer;
    filter: brightness(.9);
}

section{
    display: flex;
    flex-direction: column;
    font-size: 1.4rem;
}
h5{
    color: #fff;
    width: 80%;
    font-size: 1.4rem;

}
/*Barra lateral*/
#nav{
    display: flex;
    gap: 10px;
    background-color: #b1b1b1;
    position: relative;
    height: fit-content;
    padding-right: 15px;
}
.nav{
    display: flex;
    flex-direction: column;
    align-items: end;
    height: fit-content;
}
.nav ul{
    display: flex;
    flex-direction: column;
    align-items: end;
    position: relative;
    bottom: 10px;
    height: fit-content;
}
.nav li{
    list-style: none;
    background-color: #dbdfde;
    margin-top: 4%;
    padding: 4%;
    width: 95%;
    position: relative;
    left: 5px;
    bottom: 10px;
    border-radius: 5px;
    text-align: center;
}
.nav li:first-child{
    height: 40px;
    margin-bottom: 8%;
}
.nav li:hover{
    cursor: pointer;
    box-shadow: 2px 2px 2px #353635;
    filter: brightness(1.1);
}

/*secoes*/

#sectionInicial, #secaoPrincipal{
    background-color: #b1b1b1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5% 1%;
    gap: 10px;
}
#secaoPrincipal{
    margin-right: 5%;
    width: 60% !important;
}
#sectionInicial{
    zoom: .6;
}
.comentario{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
}
.comentario textarea{
    width: 100%;
    height: 250px;
    margin-top: 20px;
    font-size: 2rem;
}
.btnComentar{
    zoom: 2.5;
}




/*seção 2*/

#sectionPedidos{
    display: none;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}
#pedidos{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}




#cardProdutos{
    display: flex;
    flex-direction: column;
    background-color: #dbdfde;
}
.ultimosPedidos{
    height: fit-content;
    border: solid 2px #fff;
    padding-top: 1%;
}

.ultimosPedidos img{
    width: 90px;

}
.descricaoPedidos{
    text-transform: capitalize;
    width: 20%;
}

.botoes{
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 120%;
    padding-right: 20%;
    zoom: .8;
}
.botoes:last-child{
    font-size: .8rem;
}
.procurarPedido{
    width: fit-content;
}
#sectionFavoritos{
    display: none;
    align-items: start;
    width: 80%;
    gap: 20px;
}
.title{
    width: 100%;
    text-align: center;
    
}
.estrelasAvaliacao:hover{
   cursor: pointer;
}
.fecharModalSup{
    display: flex;
    width: 100%;
    text-align: end;
    justify-content: end;
    margin-top: -5%;
    margin-right: -5%;
}
.fecharModalSup button{
    border: none;
    background-color: #35363500;
    cursor: pointer;
    font-size: xx-large;
}
.tableAcompanhar thead{
    font-size: small;
}
.tableAcompanhar tbody{
    height: 60px;
    border: 1px solid black !important;
    border-collapse: collapse;
}
.imdTd{
    width: 25%;
}

/*Secao cadastro*/

#sectionCadastro{
    display: none;
    /* padding: 0 5%; */
    width: 60%;
    flex-direction: column;
    align-items: start;
}
#sectionCadastro form{
    display: flex;
    flex-direction: column;
    align-items: start;
    /* width: 100%; */
}
#sectionCadastro h4{
    width: 100%;
    text-align: center;
    font-size: 1.6rem;
}
.divRow{
    display: flex;
    align-items: center;
    gap: 1%;
}
.divRow .divRow{
    display: flex;
    align-items: center;
    gap: 4%;
}
.divColum{
    display: flex;
    flex-direction: column;
}

input[type=radio]{
    width: fit-content !important;
}
.lblGenero{
    margin-right: 2%;
}
.span{
    margin-left: 3%;
    font-size: .9rem;
    text-decoration: underline;
}
fieldset{
    border: 1px dotted #fff;
    width: 90%;
    display: flex;
    gap: 10px;
    font-size: 1.1rem;
}

/*Secao endereco*/
#sectionEndereco{
display: none;
width: fit-content;
zoom: .9;
}
.enderecosCadastrados{
    display: flex;
    flex-direction: column;
    align-items: center;

}
.enderecosCadastrados label{
    width: 120px;
    margin-left: 2%;
}
.enderecosCadastrados input{
    width: min-content !important;
}
.lblTituloEndereco{
    text-align: end;
}
.divEnd{
    display: flex;
    align-items: start;
    width: 100%;
}
.alterar{
    width: 100%;
    display: flex;
    justify-content: end;
}

/*Secao cartoes*/
#sectionCartoes{
    display: none;
    width: 100%;
    align-items: center;
    justify-content: center;
}
.cartoesCadastrados{
    width: 50%;
    border: 1px dotted #fff;
    padding: 5%;
    display: flex;
    flex-direction: column;
    gap: 11px;
    font-size: 1.1rem;
     /* zoom: 1.5; */ 
}
#cartao{
    width: 100%;
    display: contents;
}
.cartoesCadastrados label{
    display: inline-block;
    width: 80px;
    margin: 0 2%;
}
.btnCart, .cartoesCadastrados input[type=password]{
    margin: auto;
}

.divCart{
    margin-right: 200px;
    width: 100%;
}
.cartoesCadastrados .divColum {
    display: none;
    gap: 10px;
}
.inpVisualizar::placeholder{
    font-size: .7rem;
}
#btndados{
    width: fit-content;
    margin: auto;
}
.alterarDadosCartao{
    
    margin: auto;
}
/*Secao Perguntas Frequentes*/

#sectionPerguntas{
    display: none;
    flex-direction: column;
    font-size: 1rem;
    width: 92%;
}
#sectionPerguntas h4{
    font-size: 1.4rem;
    margin: 20px 0px 30px -10px;
}
#sectionPerguntas h6{
    font-size: 1.4rem;
    margin: 10px 0;
}
#pesquisaPergunta{
    width: 92%;
    margin: auto;
    padding: 0 2%;
    height: 30px;
    border-radius: 15px;
}
.spanDetalhesDuvidas{
    display: none;
}
.btnDetalhesPesq{
    border: none !important;
    background-color: #b1b1b1 !important;
    text-decoration: underline !important;
    border-radius: none;
    box-shadow: none;
}


/*Privacidade*/
#secionPrivacidade{
    display: none;
    width: 92%;
    gap: 3;
}
#secionPrivacidade button{
    width: 30%;
    margin: 20px auto;
}
input[type=range]{
    width: 40px;
    height: 25px;
    margin: 0 4%;
}
#secionPrivacidade h4{
    font-size: 1.6rem;
}
#secionPrivacidade h6{
    font-size: 1.2rem;
    margin: 3% 0;

}
.divRowPref{
    font-size: 2.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

}
.divAceitoPrivac{
    flex-wrap: nowrap;
    margin: 3%;
}


/*Preferencias*/
#sectionPreferencias{
    display: none;
    width: 92%;
    flex-direction: column;
    gap: 20px;
}

/*Parte fixa*/

.h5Fixo{
    margin: 3% 0;
}
.containerProducts{
    max-width: 500px;
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
}
.containerNovos {
    max-width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    zoom: .6;
  
}


.containerNovos>img {
    max-width: 150px;
}


#columns{
    display: none;
    justify-content: start;

}
#aparecer{
    background-color: #b1b1b1;
    position: absolute;
    width: 30px;
    padding: 5px 0;
    margin-top: 35px;
    left: 1px;
    height: 30px;
    display: none;
    align-items: center;
    transition: all 1s;
}
#aparecer img{
    
width: 30px;
    
/* height: 50%; */
    
margin-right: 32px;
}

#imgRigth{
    display: none;
}

/*modal*/
#listAtributs{
    position: fixed;
    top: 1px;
    left: 1px;
    width: 100%;
    display: flex;
    align-items: center;
    width: 100%;
    height: 700px;
    padding: 100px;
    background-color: #f0f0f054;
    
}
#avaliarModal{
    display: flex;
    position: absolute;
    width: 70%;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: space-around;
    gap: 20px;
    background-color: #d8d5d5;
    padding: 5%;
    border: #fff solid 5px;
}
.atributos img{
    width: 30%;
}
textarea{
    padding: 1%;
    width: 100%;
}
.estrelasAvaliacao{
    max-width: 20px;
}


@media screen and (max-width: 900px) {
#sectionEndereco{
    zoom: .6;
}

.containerProducts {
    zoom: .6;
}
.ultimosPedidos{
    font-size: .8rem;
    background-color: #fff;
    border: 1px solid;
    padding: 0 3%;

}
.ultimosPedidos{
    font-size: .5rem; 
}
.ultimosPedidos img{
    width: 60px;

}
.button{
    width: 110%;
    font-size: .6rem;
}
}


@media screen and (max-width: 630px) {
   
    #aparecer{
        left: 0px;
        bottom: 50px;
    }
    
    #secionPrivacidade{
        margin-top: 20px;
    }
    #aparecer{
        display: flex;
        position: relative;
        z-index: 10;
    }
    
    #imgRigth{
        display: flex;
    }
   
    #nav{
        position: absolute;
        z-index: 100;
        left: -550px;
        height: 580px;
        margin-top: -20px;
        padding-right: 4%;
    }
   
    
    .column img{
        width: 50px;
        height: 200%;
        justify-content: start;
    }
    #columns{
        display: flex;
    }
    #img{
        width: 30px !important;
        height: 30px;
        margin: 5px;
        margin-left: 10px;
        border: #000 solid 1px;
    }
    nav{
        transition: all 1s;
    }
    .ultimosPedidos td{
        width: none;
        zoom: 2.5;
    }
    .containerProducts {
        zoom: 1;
    }
    #formCadastro{
        margin-left: -30px;
    }

    #secaoPrincipal{
        position: relative;
        width: 90% !important;
        left: 100px;
        margin-left: -30%;
        zoom: .5;
        background-color: #ffffff00;
        margin-bottom: 2%;
    }
    #cardProdutos{
        background-color: #fff;
    }
    #sectionInicial{
        background-color: #fff;
    }
    #sectionInicial{
        zoom: .8;
    }
    #sectionPedidos{
        margin-left: 20%;
    }
    #sectionCadastro{
        margin-left: 51px;
        margin-top: -20px;
        justify-content: center;
        align-items: center;
    }
    fieldset, .divColum {
        border: 1px dotted #000;
        padding: 10px;
        margin: 3%;
        margin-left: -30px;
        zoom: 1.5;
        width: 400px;
    }
    .enderecosCadastrados{
        max-width: 500px;
        margin-left: -30px;
    }
    #novoEnd{
        zoom: 3;
    }
    .enderecosCadastrados div{
        display: flex;
        flex-direction: column;
        zoom: 2.1;
        width: 100%;
    }
    .comentario{
        margin-top: 20px;

    }
    .comentario textarea{
        margin-left: 5%;
    }
    .cartoesCadastrados .divColum {
        width: fit-content;
    }
    
    .lblPrivac{
        width: fit-content;
        zoom: .6;
        margin: auto;
    }
    textarea{
        width: 80%;
        height: 50px;
    }
    
    .ultimosPedidos{
        width: 90%;
        zoom: .3;
    }
    .ultimosPedidos td, .ultimosPedidos th{
        zoom: 4.3;
    }
    #avaliarModal{
        zoom: .6;
        margin: auto;
    }
}


@media screen and (max-width: 522px){
    nav{
       
        transition: all 1s;
    }
    .containerProducts picture{
        flex-wrap: wrap;
    }
    .containerProducts {
        zoom: 1;
    }
    .ultimosPed{
        zoom: .2 !important;
    }
    .comentario textarea{
        margin-left: 0;
        width: 90%;
    }
}
@media screen and (max-width: 522px){
    nav{
        /* transform: translateX(-100px); */
        transition: all 1s;
    }
    #cardProdutos{
        background-color: #fff;

    }
    #avaliarModal{
        /* scale: 1.2; */
    }
    #avaliarModal h2{
        font-size: 1.2rem;
    }
    .ultimosPedidos{
        /* width: 90%; */
        zoom: .3;
    }
    .ultimosPedidos td, .ultimosPedidos th{
        zoom: 8.1;
        margin: 3px;
    }
    .button{
        zoom: .8;
    }
    #secaoPrincipal{
        font-size: smaller;
        margin-top: 0px;
        margin-left: -35%;
    }
}

@media screen and (max-width: 401px){
    .fecharModalSup h2{
        font-size: .3rem;
    }
    .ultimosPedidos{
        font-size: .4;
    }
    .ultimosPedidos td{
        width: none;
    }
    .containerProducts{
        zoom: 1.3;
        
    }
    #secaoPrincipal{
        zoom: .4;
        margin-left: -40%;
    }
    .ultimosPed{
        zoom: .1 !important;
    }
}
@media screen and (max-width: 350px){
    #secaoPrincipal{
        margin-left: -50%;
    }
}