:root {
  --textbold:bold;
  --largblocoimg: 350px;
}
* {
    margin: 0;
    padding: 0;
    /* Incluir box-sizing ajuda a gerenciar melhor as larguras */
    box-sizing: border-box; 
}

body {  
  font-family: 'Open Sans', sans-serif;
  overflow-x: scroll; 
  background-attachment: fixed;
  background-image: url("../img/b3.jpg");
  background-position: center;              /* Centraliza a imagem */
  background-size: auto;  
  
}

h1, h2, h3, h4, h5, h6 {font-family: 'Lato', sans-serif;}

.cabecalho-mae {height: 80px;border: 2px solid #fff;}

#primeiralinha{ display: flex;align-items: flex-end;height: 50px;margin-top:10px;}

#titulo {height: 40px;display: flex;flex-basis: 20%; justify-content: center;align-items: flex-end;}

#titulo h1 {color:#fff;line-height: 1;font-size:40px;align-items: flex-end;}

#menusuperior{flex-basis: 80%;height: 40px;}

#menusuperior ul {float: right;list-style: none;/* Remove marcadores da lista*/padding: 0;/* Remove preenchimento */}

#menusuperior ul li {float: left; /* Coloca cada item lado a lado */margin-right: 15px; /* Espaçamento entre os itens */}

#menusuperior ul li a { display:block;/* Permite aplicar padding/margin em todos os lados */color: #fff;}

#introducao h2 {display:flex;justify-content: center;color:#fff;}

#corpo{position: relative;margin-top:10px;color:#fff;}
#corpo h2 {display:flex;justify-content: center;color:#fff;}  


.texto-colunas{font-size:14px;color:#fff;}

.texto-colunas p {margin-bottom:15px;}

.titulo-colunas{color:yellow;text-decoration: underline;}

.colunas { margin-left:10px;display: flex; flex-wrap: wrap;flex-grow: 1; width: 100vw;}
.formacolunas { margin-left:10px;}

#coluna1 {flex-basis: 33%;}
#coluna1 label {color:yellow;}

#coluna2 {flex-basis: 33%;}
#coluna2 label {color:yellow;}

#coluna3 {flex-basis: 34%;}
#coluna3 label {color:yellow;} 

/*Colunas da pagina cadpedidos*/
/*
#corpopedido { margin: 0; padding: 0;height: 100vh;display:flex; justify-content:center;align-items:center;}
.colunaspedidos {display: flex; width: 90%;height: 80vh;}

#colunaa {flex:1; text-align: center; }


#colunab {flex:1; text-align: center;}


#colunac {flex:1; text-align: center;}


#sub-a {    display: flex;    height: 100%;    gap: 10px;  }
#sub-b {   flex-basis: 25%; display: flex;  flex-direction: column;   }

.linhapedidos {
  flex: 1; 
  background-color: lightgray;
  padding: 10px;
}
*/
/*
body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}
*/

#corpopedido h2{color:#fff;text-align: center;}

.container-principal {
    display: flex;
    width: 99%;
    height: 100%;
    /*border: 2px solid black;*/
}
.container-principal2 {
    display: flex;
    width: 99%;
    height: 100%;
    /*border: 2px solid black;*/
}
.container-principal2 h4{color:#fff;text-align: center;}

.coluna {
    flex: 1; /* Distribui as 3 colunas principais igualmente e ajuda linhar ao centro*/
    padding: 3px;
    /*border: 1px solid gray;*/
    text-align: center;
    height: 100%;
}
.principal-3 h4 {
text-align: left;
}
/* Container interno da primeira coluna para suas duas colunas filhas (lado a lado) */
.container-interno-col1 {
    display: flex;
    height: 100%;
    gap: 10px; /* Espaçamento entre as colunas internas */
}
container-interno-col2 {
    display: flex;
    height: 100%;
    gap: 10px; /* Espaçamento entre as colunas internas */
}
.coluna-interna {
    flex: 1;
    /*border: 1px solid blue;*/
    padding: 5px;
    /* Para a coluna interna 1a, mudamos a direção para empilhar as linhas */
}

.interna-1a {
    display: flex;
    flex-direction: column; /* Define o fluxo como coluna para as 3 linhas */
    gap: 5px;
}
.interna-1b {gap: 5px;}
.interna-2a {gap: 5px;}

.linha-interna {
    flex: 1; /* Distribui as 3 linhas igualmente */
   /* border: 1px solid red;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Cores de fundo apenas para visualização */
.principal-1 { color: #fff; }
.principal-2 { color: #fff;}
.principal-3 {color: #fff; }
.interna-1b { background-color: #ffefd5; }
.linha-interna { background-color: #ffe4e1; }



/*FIM TESTE*/


.foto img{ width: 300px; max-width: 350px;}

.titulomedida label{font-weight: bold; color:#fff;}
 
.celulapreenchimento input{font-weight: bold;}

.formlogin {color:#fff;}


/*.formacolunas { margin-left:10px;display: flex; flex-wrap: wrap;flex-grow: 1; width: 100vw;}*/
.formacolunas { margin-left:10px; flex:1; flex-wrap: wrap;flex-grow: 1; width: 100vw;}

    .linhacadastro{display: flex;flex:1}
        
        .titulomedida{flex-basis: 18%; margin-top:10px;}
        .celulapreenchimento{flex-basis: 15%;margin-top:10px;}

.figuraexplicativa{flex-basis: 30%;}

#exemplo1 {position: absolute;z-index: 30;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo2 {position: absolute;z-index: 29;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo3 {position: absolute;z-index: 28;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo4 {position: absolute;z-index: 27;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo5 {position: absolute;z-index: 26;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo6 {position: absolute;z-index: 25;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo7 {position: absolute;z-index: 24;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo8 {position: absolute;z-index: 23;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo9 {position: absolute;z-index: 22;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo10{position: absolute;z-index: 21;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo11{position: absolute;z-index: 20;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo12{position: absolute;z-index: 19;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo13{position: absolute;z-index: 18;width:var(--largblocoimg);font-weight: var(--textbold);}
#exemplo14{position: absolute;z-index: 17;width:var(--largblocoimg);font-weight: var(--textbold);}


.infocliente{flex-basis:25%;}

#rodape{margin-left: 15px;color:#fff;}

@media (max-width: 600px) {
    .container-flex {
        flex-direction: column; /* Empilha as colunas verticalmente em telas menores */
    }
    .coluna-a, .coluna-b {
        flex-basis: 100%; /* Ocupam 100% da largura */
    }
}