/*  Resetar css*/
* {
    padding: 0px;
    margin: 0px;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}
/* Fim do reset css */

/* Aplicando algumas estilizações padrão em todas as páginas */
body {
    background-color: #121212;
    font-family:Arial, sans-serif;
}

hr {
    border-color: #333333;
}

/* Fim das estilizações */


/* ================================ */
/* --->Página inicial(index)<--- */
/* ================================ */



/* Ajustando a logo */
.logo {
    width: 1199px;
    /* height: 150px; */
    /* background-color: #121212; */
    /* border: solid 1px; */
    justify-self: center;
    text-align: center;
    margin: 50px 0px;
    color: #00E5FF;
    text-transform: uppercase;
    text-shadow: 0px 0px 3px #00E5FF;
}


/* Ajustando layout dos produtos */
.linha1, .linha2 {
    width: 1199px;
    display: flex;
    justify-self: center;
    justify-content: space-between;
}

.produto1, .produto2, .produto3, .produto4,
.produto5, .produto6, .produto7, .produto8 {
    width: 250px;
    height: 350px;
    /* border: solid 1px #13FF7D; */
    /* border-radius: 3px ; */
    margin-top: 30px;
}

.fila1, .fila2 {
    width: 250px;
    height: 200px;
    /* border: solid 1px #13FF7D; */
    /* border-color: red; */
}

/* Ajustando o texto dos produtos */

.texto {
    width: 250px;
    height: 150px;
    justify-self: center;
    /* border: solid 2px ; */
}

.link {
    justify-self: center;
    margin:20px 0px 10px 0px;
    font-size: 20px;
}

p {
    /* margin-top: 15px; */
    font-size: 25px;
    text-align: center;
    color:#FFFFFF;
}

a {
    color: #00E5FF;
    text-decoration: none;
}

a:hover {
    color: #13FF7D;
}

.imagem-produto-inicial {
    outline: solid 1px #00E5FF;
    box-shadow: 0px 0px 5px #00E5FF;
    /* border: solid 1px #13FF7D; */
    border-radius: 3px;
}

/* Fim dos ajustes da página inicial */


/* ============================== */
/* --->Página do produto <--- */
/* ============================== */


/* Demarcando a caixa maior */

.bloco {
    display: flex;
    width: 1199px;
    height: 440px;
    /* border: solid 2px red; */
    justify-self: center;
    justify-content: space-between;
}

/* Demarcando o tamanho das caixas que compõem as fotos e o texto */

.imagens, .textos {
    /* border: solid 2px; */
}

.imagens {
    width: 549px;
    height:440px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.textos {
    width: 600px;
    height:440px; 
}


/* Demarcando as caixas das fotos */

.fotog {
    width:549px;
    height:300px;
    /* border:solid 2px gray;  */
}

.fotona {
    width: 549px;
    height: 300px;
    /* border:solid 1px #32FF7E; */
    outline: 1px solid #13FF7D;
    border-radius: 3px;
    box-shadow: 0px 0px 5px #13FF7D;
}

.fotop {
    display: flex;
    width: 549px;
    height: 100px;
    /* border:solid 2px green; */
    justify-content: space-between;
}

.fotinha {
    width: 120px;
    height: 100px;
    border-radius: 3px;
    box-shadow: 0px 0px 5px #9D00FF;
    outline: 1px solid #9D00FF;
    /* border: solid 2px blue; */
}


/* Demarcando as caixas dos textos */

.titulo {
    width: 600px;
    margin: 20px 0px 10px 0px;
    /* border: solid 2px gray;  */
}

.avaliacao {
    width: 350px;
    height: 30px;
    margin: 0px 0px 30px;
    /* border:solid 2px black;  */
}

.valor {
    display:flex;
    width: 600px;
    height:60px;
    margin: 0px 0px 50px;
    justify-content: space-between;
    /* border:solid 2px black; */
}

.desc {
    width: 600px;
    height: 180px;
    /* border:solid 2px black; */
}

/* Estilizando cada caixa */

p {
    margin: 0px;
    padding: 0px;
}

/* Caixa do nome do produto */

.nome {
    font-size: 30px;
    text-align:left;
}

/* Caixa do código do produto e avaliação */

.avaliacao {
    display: flex;
    align-items: center;
}

.cod {
    height: 20px;
}

.codigo {
    color: #aaaaaa;
    height: 15px;
    font-size: 15px;
    margin: 0px  10px 0px 0px;
}

.estrelas-avaliacao {
    color: yellow;
}
.avaliacao {
    font-variation-settings: 'FILL' 1;
}

/* Caixa do preço e botão de compra */


.preco, .real, .parcelas {
    width: 320px;
}

.preco {
    height:60px;
}

.real {
    height: 40px;
}

.parcelas {
    height:20px;
    font-weight: bold; 
}

.valor1, .valor2 {
    text-align: right;
}

.valor1 {
    font-size: 35px;
    color: #13FF7D;
}

.valor2 {
    font-size: 18px;
    color: #aaaaaa;
}

.comprar {
    height: 60px;
    width: 240px;
    font-size: 20px;
}


/* Ajustando o tamanho da descrição */

.desc {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.paragrafo1, .paragrafo2 {
    width: 600px;
    height: 80px;
}

.espec1, .espec2 {
    color: #aaaaaa;
    font-size: 15px;
    text-align: left;
}



/* ================================== */
/* ----------->Cabeçalho<------------ */
/* ================================== */


/* Caixa principal */
#caixa-cabecalho {
    max-width: 100%;
    min-width: 1199px;
    height: 100px;
    margin-bottom: 40px; /* Margem para dar espaço ao conteúdo inferior */
    border-bottom: solid 2px #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #121212;
}

/* Aplicando borda nas caixas */
#logo-cabecalho, #imagem, #form-cabecalho, #botao-cabecalho {
    /* border: solid 1px white; */
}

/* Redimensionando as caixas  */
#logo-cabecalho {
    display: flex;
    /* width: 240px;
    height: 80px; */
    margin: 0px 0px 0px 30px; 
}

#form-cabecalho {
    width: 300px;
    height: 30px;
}


#botao-cabecalho {
    width: 320px;
    height: 40px;
    margin: 5px 20px 0px 0px;
}

/* mechendo na logotipo */
#logotipo-cabecalho {
    font-size: 24px;
    text-transform:uppercase;
    text-decoration: none;
    font-weight: bold;
    align-self: center;
    justify-content: center;
    color:#FF005D;
    text-shadow: 0px 0px 5px #00E5FFB3;
    text-shadow: 0px 0xp 10px #00E5FF80;
   
    /* width: 240px;
    height: 80px; */
}

#logotipo-cabecalho:hover {
    color: #00E5FF;
    text-shadow: 0xp 0px 15px #13FF7D;
    transition: 0.3s;
}

/* Mexendo no forms  */
#formulario-cabecalho {
    display: flex;
    justify-content: space-between;
    height: 30px;
}

.pesq-cabecalho {
    width: 220px;
}

#botao-forms-cabecalho {
    color: #ffffff;
    background: linear-gradient(to right, #32FF7E, #9D00FF);
    border:none;
    border-radius: 5px;
    padding: 5px;
}

#botao-forms-cabecalho:hover, #b1-cabecalho:hover, #b2-cabecalho:hover {
    cursor: pointer;
    transition:0.3s;
    transform: scale(1.02);
}

/* Maxendo nos botões da direita */
#botao-cabecalho {
    display: flex;
    justify-content: space-between;
}

#b1-cabecalho, #b2-cabecalho {
    display: flex;
    width: 150px;
    height: 40px;
    text-align: center;
    align-items: center;
    font-size: 20px;
    color: #FFFFFF;
    border-radius: 5px;
    border: none;
}

#b1-cabecalho {
    background:linear-gradient(to right, #a51b0b, #FF005D);
    box-shadow: 0px 0px 5px #d11507;
}

#b2-cabecalho {
    background: linear-gradient(to right, #00e5ff, #1E90FF);
    box-shadow: 0px 0px 5px #1E90FF;
}

#logo-conta-cabecalho, #carrinho-cabecalho {
    margin: 0px 5px;
}

/* Retirando o underline do link carrinho */
.linque-carrinho, .linque-conta {
    text-decoration: none;
}


/* ================================= */
/* --------->Rodapé<---------------- */
/* ================================= */

/* Mexendo na caixa maior */

#caixa-grande-rodape {
    display: flex;
    /* border: solid 1px; */
    background-color: #2a2a2a;
    max-width: 100%;
    min-width: 1199px;
    height: 180px;
    justify-content: space-between;
    margin: 40px 0px 0px 0px; /* Margem para dar espaço ao conteúdo superior */

}

/* Mexendo nos atributos menores */

#rodape1, #rodape2, #rodape3, #rodape4 {
    /* border: solid 1px; */
    margin: 40px 20px 0px 20px;
    /* height: 100%; */
}

.subrodape {
    font-weight: bold;
    font-size: 20px;
    text-align: left;
}

.lista-rodape {
    display: flex;
    list-style: none;
    flex-direction: column;
    justify-content: space-between;
    max-width: 100%;
    /* height: 100%; */
}

.linque {
    margin: 5px 0px;
}


/* Mexendo nos atributos das caixas de pagamento */

#caixa-grande2-rodape {
    display: flex;
    background-color: #2a2a2a;
    /* border: solid 1px; */
    justify-content: space-between;
    max-width: 100%;
    min-width: 1199px;
    height: 150px;
    /* margin: 20px 0px 20px 0px;*/ /* Margem para dar espaço ao conteúdo superior */
}

#caixa-rodape {
    /* border: solid 2px blue; */
    display: flex;
    flex-direction: column;
    margin:10px 0px 0px 10px;
}

/* Mexendo no texto formas de  pagamento*/
#texto-pgmnt {
    text-align: left;
    font-size: 25px;
}

.pgmnt-rodape {
    /* border: solid 2px; */
    height: 25px;
    margin: 0px 0px 10px 0px;
}


/* Maxendo nas bandeiras de pagamento */
.tipos-pgmnt-rodape {
   /*  border: solid 2px; */
    width: 410px;
    height: 70px;
}
.linha1-pgmnt{
    display: flex;
    align-items: start;
    justify-content: space-between;
    /* border: solid 2px;  */
    width: 410px;
    height: 35px;
}

.linha2-pgmnt {
    display: flex;
    align-items: end;
    justify-content: space-between;
    /* border: solid 2px; */
    width: 410px;
    height: 35px;
}

.tipos-pgmnt {
    /* border: solid 2px red; */
    width: 60px;
    height: 30px;
    /* margin: 0px 5px; */
}



/* Mexendo nos atributos dos certificados de segurança */

#caixa2-rodape {
    width: 305px;
    /* border: solid 2px red; */
    display: flex;
    flex-direction: column;
    margin:10px 10px 0px 0px;
}


/* Mexendo no texto de certificados */
.certificados {
    height: 25px;
    /* border: solid 2px blue; */
    margin: 0px 0px 10px 0px;
}

/* Mexendo nas fotos dos certificados */
.certificados-foto {
    /* border: solid 2px violet; */
    display: flex;
    width:305px;
    height:90px;
}

.fotos-certificados {
    /* border: solid 2px gray; */
    width: 95px;
    height: 90px;
    margin:0px 5px;
}

#foto1-certificado {
    margin:0px 5px 0px 0px;
}



/* Mexendo no último rodapé  */

#ultimo-rodape {
    /* border: solid 1px; */
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #2a2a2a;
    max-width: 100%;
    min-width: 1199px;
    height: 120px;
}


/* Mexendo na imagem do rodapé */

#logo-rodape {
   /*  border: solid 2px red; */
    width: 200px;
    height: 60px;
    margin: 0px 0px 0px 20px;
}

#linque-externo-rodape {
    display: flex;
    justify-content: space-between;
    /* border: solid 2px royalblue; */
    width:300px;
    height:60px;
    margin: 0px 20px 0px 0px;
}
 .social {
    border: solid 2px darkgrey;
    width: 60px;
    height: 58px;
    border-radius: 100%;
 }

 .social-loja {
    background: #2a2a2a;
 }



/* ================================== */
/* ---------->Dashboard<------------- */
/* ================================== */

/* Mexendo na caixa maior */
#caixa-admin {
    display: flex;
    /* border: solid 2px; */
    max-width: 100%;
    min-width: 1199px;
    justify-self: center;
    /* justify-content: space-around; */
}


/* Mexendo na caixa da esquerda */
#caixa-esquerda-admin {
    border: solid 2px;
    width: 150px;
    height: 250px;
    padding: 20px;
    margin-right: 50px;
}


/* Mexendo nos conteúdos da caixa da esquerda */

/* Mexendo nos subtitulos */
/* #subtitulo1-admin, #subtitulo2-admin {
   font-size: 25px;
}

#subtitulo2-admin {
    margin-top: 20px;
} */


/* Mexendo nas listas */
/* .lista-admin {
    list-style: none;
}

.linque-lista-admin {
    text-decoration: none;
}

#linque1-admin1, #linque2-admin1, #linque1-admin2, #linque2-admin2, #linque3-admin2 {
    margin: 5px 0px;
} 

#lista1-admin {
    margin-bottom: 20px;
} */

/* Mexendo na caixa da direita*/
#caixa-direita-admin {
    /* border: solid 2px blue; */
    width: 937px;
    /* margin-left: 40px; */
}
#espec-admin, #espec2-admin {
    display: flex;
}
.produto-admin {
    display: flex;
}


/* Mexendo no texto maior */
#titulo-produtos-cadastrados{
    color: #FF005D;
    text-transform: uppercase;
    /* margin:0px 0px 20px 0px; */
}


/* Mexendo nos demarcadores do produto */
#espec-admin {
    justify-content: space-between;
    margin: 20px 0px 10px 0px;
}

.texto-admin {
    text-transform: uppercase;
    font-size: 20px;
    color:#00E5FF;
}

#texto1 {
    width: 20%;
    text-align: left;
}

#texto2 {
    margin: 0px 20px 0px 0px;
}
#texto3 {
    margin: 0px 0px 0px 20px;
}

#texto4 {
    width: 30%;
    text-align: left;
}

.produto-admin {
    margin: 20px 0px;
}

.imagem-produto {
    width: 70px;
    height:50px;
    border: solid 1px;
    margin: 0px 20px 0px 20px;
}

.nome-produto-admin {
    width: 185px;
}

.produto-espec-admin, .nome-produto-espec-admin {
    text-align: left;
}

.nome-produto-espec-admin {
    font-size: 25px;
}

.produto-espec-admin {
    font-size: 15px;
}

.quantia-admin {
    width: 26px;
    text-align:center;
    align-self:center;
    margin-left: 25px;
}

.preco-admin {
    width: 104px;
    font-size: 24px;
    align-self: center;
    margin: 0px 100px 0px 95px; 
}

.editar, .deletar {
    width: 60px;
    height: 30px;
    align-self: center;
    border: solid 2px;
    font-weight: bold;
    font-size: 10px;
    text-transform: uppercase;
    /* font-family:; */
}

.editar {
    margin:0px 20px 0px 0px;
}

.editar:hover, .deletar:hover {
    background-color: lightgrey;
    cursor: pointer;
}

/* =========================== */
/* -------> Carrinho <----------*/
/* =========================== */

#caixona-carrinho {
    justify-self: center;
}

#caixa-carrinho {
    /* border: solid 1px; */
    display: flex;
    width: 1199px;
    justify-self: center;
}

#caixa-esquerda-carrinho {
    /* border: solid 1px; */
    width: 900px;
    margin-right:20px;
}

#espec-carrinho, #espec-divisao-carrinho {
    display: flex;
}

#texto-carrinho1 {
    width:300px;
    text-align: left;
}

#texto-carrinho1, #texto-carrinho2, #texto-carrinho3, #texto-carrinho4 {
    text-transform: uppercase;
    font-size: 20px;
}

#espec-divisao-carrinho {
    display: flex;
    width: 700px;
    justify-content: space-around;
}

.linha-carrinho {
    display: flex;
    margin: 20px 0px 20px ;
}
.img-carrinho {
    width: 70px;
    height: 50px;
    margin: 0px 10px 0px 0px;
}


#produto-carrinho {
    width:300px;
}

.nome-carrinho1, .nome-carrinho2 {
    margin: 0px;
    text-align: left;
}

.nome-carrinho1 {
    font-weight: bold;
    font-size: 20px;
}

.nome-carrinho2 {
    font-size: 15px;
    color:#aaaaaa;
}

.quantia-carrinho {
    width:50px;
    height: 30px;
    text-align: left;
    border: solid 2px;
}

.produto-carrinho2 {
    display: flex;
    justify-content: space-around;
    width: 566px;
}

.lixeira-carrinho {
    width: 48px;
    height: 48px;
    background-color:transparent;
    color: #FFFFFF;
    border: none;
    margin: 0px 0px 0px 180px;
}

.icone-lixeira-carrinho {
    color: #00E5FF;
}

.lixeira-carrinho:hover, .icone-lixeira-carrinho:hover {
    cursor: pointer;
    color: #FF005D;
}

.preco-carrinho {
    margin-left:110px;
}


/* Mexendo na caixa da direita */

#caixa-direita-carrinho {
    border: solid 2px #333333;
    width: 234px;
    padding: 20px;
}

/* Mexendo na parte superior da caixa da direita */

#subtotal-carrinho, #frete-carrinho {
    display: flex;
    justify-content: space-between;
}

#subtotal-carrinho {
    margin:10px 0px;
}

#frete-carrinho {
    margin-bottom:15px;
}

.final-carrinho {
    font-size: 15px;
}

#total-carrinho {
    display: flex;
    justify-content: space-between;
    margin: 15px 0px;
}

#total-final-carrinho {
    color: #32FF7E;
}

#continuar-carrinho {
    width: 234px;
    height: 30px;
    border: none;
    color: #FFFFFF;
    border-radius:5px;
    background: linear-gradient(to right, #008000, #13FF7D);
    text-transform: uppercase;
}

#continuar-carrinho:hover {
    cursor: pointer;
    transition: 0.3s;
    transform: scale(1.02);
}

#texto-pequeno-carrinho {
    width: 240px;
    margin-top: 10px;
    font-size: 15px;

}

/* Mexendo nos títulos e subtítulos */

#titulo-carrinho, .resumo-pedido-carrinho {
    color: #FF005D;
    text-transform: uppercase;
}

.final-carrinho {
    color: #FFFFFF;
}


/* ==================================== */
/* -------> Cadastrar Produto <-------- */
/* ==================================== */


#caixona-cadastro {
    display: flex;
    justify-self: center;
    /* border: solid 2px; */
    width: 1199px;
}

.relatorio-cadastro {
    border: solid 2px #333333;
    width: 150px;
    height: 250px;
    padding: 20px;
    margin-right: 40px;
}

#num-relatorios, #produtos {
    list-style: none;
}

.superior-cadastro {
    margin-bottom: 20px;
}

.produtos-cadastro {
    margin: 5px 0px;
}

.inferior-cadastro {
    margin-top: 20px;
}

.relatorios-cadastro {
    margin: 5px 0px;
}

.linque-cadastro {
    text-decoration: none;
}

.alteracao, .relatorios {
    font-size: 25px;
}

/* Alterando as propriedades os titulos e subtitulos do cadastro */
#titulo-cadastro, .alteracao, .relatorios {
    color:#FFFFFF;
}

/* Alterando o plano de fundo dos campos do forms */
#form-cadastro-produto, .texto-cadastro {
    background-color: #121212;
}


/* Mexendo no formulário de cadastro*/

#titulo-cadastro {
    margin-bottom: 10px;
}

.texto-cadastro {
    font-size: 15px;
    color: gray;
}

.form-cadastro {
    height: 25px;
    width: 500px;
    margin: 10px 0px;
    /* border: solid 2px #333333;
    border-radius: 3px;
    background: #2a2a2a; */
    /* color: #FFFFFF; */
}

#imagem::-webkit-file-upload-button {
    height: 30px;
    /* width: 45px; */
}



/* ============================================= */
/* -----------------> Login <-------------------- */
/* ============================================= */



#login-titulo {
    width: 750px;
    display: flex;
    justify-self: center;
    margin-bottom: 10px;
    color: #FFFFFF;
    text-shadow: 0px 0px 4px #00E5FF80;
    text-shadow: #00E5FF4D;
}

#caixona-login {
    display: flex;
    width: 750px;
    justify-self: center ;
    margin-bottom: 40px;
    /* border: solid 2px; */
}

/* Mexendo no fundo de todas as caixas do login */
#esquerda-login, #direita-login, label,  
#subtitulo-esquerda, .esqueceu-senha,#entrar-login, #linque-social-login, form, #subtitulo-direita {
    background-color: #1e1e1e;
}


/* Mexendo em todos os inputs */
input, select, textarea {
    background-color: #2a2a2a;
    border: 1px solid #333333;
    border-radius: 3px;
    color: #aaaaaa;
}

input:focus, select:focus, textarea:focus {
    outline:none;
    border-color: #00E5FF;
    box-shadow: 0px 0px 5px #00E5FF;
}

/* Mexendo na caixa da esquerda */

#esquerda-login {
    border: solid 1px;
    border-radius: 5px;
    width: 300px;
    padding: 20px;
    margin-right: 50px;
}

#subtitulo-esquerda {
    margin-bottom: 20px;
    color: #FF005D;
    text-shadow: 0px 0px 4px #00E5FF80;
    text-shadow: #00E5FF4D;
}

/* mexendo no form da esquerda */

.form-login {
    height: 30px;
    width: 300px;
    margin-bottom: 10px;
    /* color: #aaaaaa; */
}

/* mexendo no label */
label {
    color: #aaaaaa;
}


/* mexendo no texto esqueceu senha */
.esqueceu-senha {
    text-decoration: none;
}

/* mexendo no botão entrar */

#botao-entrar {
    height: 40px;
    width: 100px;
    margin: 20px 0px;
    /* text-transform: uppercase;
    font-weight: bold;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    background: linear-gradient(to right, #32FF7E, #9D00FF); */
}

/* Mexendo no texto de entrar com contas alternativas*/

#entrar-login {
    font-size: 15px;
    text-align: left;
    margin-top: 10px;
}

/* mexendo nos linques de ligin google e facebook */

#linque-social-login {
    /* border: solid 1px; */
    display: flex;
    width: 80px;
    justify-content: space-between;
    margin-top: 10px;
}

.linque-facebook, .linque-google {
    background-color: #1e1e1e;
}

.social-login {
    border: solid 2px gray;
    width: 30px;
    height: 30px;
    border-radius: 100%;
}

.social-login:hover {
    cursor: pointer;
}



/* Mexendo no form da direita */


/* mexendo na caixa da direita */

#direita-login {
    border: solid 1px;
    border-radius: 5px;
    padding: 20px;
}


/* mexendo no subtitulo da direita */
#subtitulo-direita {
    margin-bottom: 20px;
    color: #FF005D;
    text-shadow: 0px 0px 4px #00E5FF80;
    text-shadow: #00E5FF4D;
}


/* mexendo no sexo */
#homem {
    margin:5px 0px 20px 0px;
}
#masculino-login {
    margin:5px 10px 10px 0px;
}


/* mexendo no botao cadastrar */

#cadastrar-login {
    width:304px;
    height: 40px;
    /* text-transform: uppercase;
    font-weight: bold;
    color: #FFFFFF;*/
    margin-top: 10px;
    /* border:none;
    border-radius: 10px;
    background: linear-gradient(to right, #32FF7E, #9D00FF); */ 
}


/* Mexendo em ambos os botões */
#cadastrar-login:hover, #botao-entrar:hover, .comprar:hover {
    cursor: pointer;
    transition: 0.3s;
    transform: scale(1.02);
    box-shadow: 0px 0px 15px #32FF7E;
}

/* Estilização igual destes botões */

#cadastrar-login, #botao-entrar, .comprar {
    text-transform: uppercase;
    font-weight: bold;
    color: #FFFFFF;
    border:none;
    border-radius: 10px;
    background: linear-gradient(to right, #32FF7E, #9D00FF);
}