@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,300;0,400;0,500;0,600;0,700;1,100;1,300;1,400;1,500;1,700&display=swap');

html, body { height: 100%; margin: 0; }
body { position: relative; font-family: 'Montserrat', sans-serif; font-weight: 400; display: flex; flex-direction: column; min-height: 100vh;}
.container { flex: 1; }

#login { min-height: 100vh; } 
#login .logotipo img { width: 300px; max-width: 100%; height: auto; padding-bottom: 40px; } 
#login .dados { width: 400px; background-color: white; border: 1px solid #ccc; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2); padding: 20px; border-radius: 15px; } 
#login .dados .titulo { font-weight: bold; font-size: 24px; margin-bottom: 20px; } 
#login .dados .areaCampo { display: flex; align-items: center; border: 1px solid gray; border-radius: 10px; padding: 15px; margin-bottom: 20px; } 
#login .dados .areaCampo .icone { padding-right: 15px; } 
#login .dados .areaCampo .campo { flex-grow: 1; } 
#login .dados .areaCampo .campo input { width: 100%; border: none !important; }
#login .dados .btnLogin { margin-bottom: 20px; background-color: #a6ce39; color: black; font-weight: bold; font-size: 20px; border: none; border-radius: 10px; padding: 10px 30px; }
#login .dados .lnkLogin { font-weight: normal; font-size: 16px; text-decoration: none; color: black; }

.btnPrincipal { display: inline-block; margin-top: 20px; margin-bottom: 20px; background-color: #a6ce39; color: black; font-weight: bold; font-size: 20px; border: none; border-radius: 10px; padding: 10px 30px; cursor: pointer; text-decoration: none; }
.btnMais { display: inline-block; margin-top: 20px; margin-bottom: 20px; background-color: #a6ce39; color: black; font-weight: normal; font-size: 14px; border: none; border-radius: 10px; padding: 5px 20px; cursor: pointer; text-decoration: none; }
.btnRepetir { display: inline-block; background-color: #a6ce39; color: black; font-weight: normal; font-size: 14px; border: none; border-radius: 10px; padding: 5px 20px; cursor: pointer; text-decoration: none; }

#faixaTopoSemLogo img { width: 100%; height: auto; } 
#faixaTopoComLogo .col-sm-3 img { width: 80%; display: block; margin: 0 auto; height: auto; } 
#faixaTopoComLogo .col-sm-3 { display: flex; align-items: center; justify-content: center; } 
#faixaTopoComLogo .col-sm-9 img { width: 100%; height: auto; }

#menuPrincipal { display: flex; width: 100%; margin-top: 20px; } 
#menuPrincipal ul { list-style: none; display: flex; padding: 3px 0; border-top: 1px solid black; border-bottom: 1px solid black; width: 100%; margin: 0; justify-content: space-between; } 
#menuPrincipal ul li { display: flex; align-items: center; padding-left: 0; padding-right: 15px; border-right: 1px solid black; flex-grow: 1; justify-content: center; } 
#menuPrincipal ul li:not(:first-child) { padding-left: 15px; } 
#menuPrincipal ul li:last-child { border-right: none; } 
#menuPrincipal ul li a { display: flex; align-items: center; color: black; font-weight: bold; text-decoration: none; } 
#menuPrincipal ul li a img { height: 32px; margin-right: 5px; }

#tituloPagina { display: flex; align-items: center; border-bottom: 1px solid black; margin-top: 20px; } 
#tituloPagina img { padding-right: 10px; } 
#tituloPagina span { font-weight: bold; font-size: 24px; color: black; }

#menuGrupos { width: 100%; margin-top: 20px; } 
#menuGrupos ul { list-style: none; display: inline-flex; padding: 3px 0; border-top: 1px solid black; border-bottom: 1px solid black; width: 100%; margin: 0; } 
#menuGrupos ul li { display: inline-flex; align-items: center; padding: 8px 25px; border-right: 1px solid black; } 
#menuGrupos ul li:last-child { border-right: none; } 
#menuGrupos ul li a { color: black; font-weight: bold; text-decoration: none; }

.tituloGrupo { border-bottom: 1px solid black; margin-top: 20px; font-weight: bold; font-size: 20px; color: black; } 

#produtos { padding: 10px; }
#produtos .foto { width: 100%; height: 200px; border: 1px solid gray; margin-top: 20px; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; } 
#produtos .foto img { max-width: 100%; max-height: 100%; object-fit: contain; } 
#produtos .nome { text-transform: uppercase; font-size: 14px; font-weight: 500; } 
#produtos .resumo { font-size: 10px; color: gray; margin-bottom: 12px; } 
#produtos .valor { color: #0e7959; font-weight: bold; font-size: 16px; margin: 12px 0; } 
#produtos .comprar { background-color: #a6ce39; border: none; border-radius: 5px; padding: 5px 10px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-bottom: 30px; font-size: 12px; } 
#produtos .comprar img { margin-right: 5px; } 
#produtos .comprar a { color: black; text-decoration: none; font-weight: bold; }

#tblPadrao { font-size: 12px; margin: 20px 0 20px 0; width: 100%; border-collapse: collapse; } 
#tblPadrao thead th { border-bottom: 1px solid black; padding: 8px; } 
#tblPadrao tbody td { padding: 8px; border-bottom: 1px solid #ededed; } 
#tblPadrao tbody tr.prazo td { font-size: 1.25em; padding-top: 8px; } 
#tblPadrao tbody td input { border: 1px solid #a6ce39; text-align: center; background-color: #f0f7df; }
#tblPadrao .linhaLink { cursor: pointer; }
#tblPadrao tbody tr:hover { background-color: #f0f7df; }
#tblPadrao .tabelaDetalhes { width: 100% !important; padding: 20px; }
#tblPadrao.interno { font-size: 12px; margin: 0; width: 100% !important; border-collapse: collapse; } 
#tblPadrao.interno tr { background-color: white !important; } 

#dadosPedido { margin-top: 20px; }
#dadosPedido .totalPedidos { border-top: 1px solid #a6ce39; border-bottom: 1px solid #a6ce39; text-align: center; font-size: 16px; font-weight: bold; margin-bottom: 20px; background-color: #f0f7df; padding: 8px 0; }
.fdt-cor-chumbo { color: #333 !important; }

.filtros ul { list-style: none; padding: 0; margin: 10px 0 0 0; display: flex; }
.filtros ul li { border: 1px solid #a6ce39; text-align: center; font-size: 14px; margin-right: 20px; }
.filtros ul li:last-child { margin-right: 0; }
.filtros ul li a { display: block; padding: 5px 10px; text-decoration: none; color: inherit; }
.filtros ul li a:hover { background-color: #f0f7df; }
.filtros ul li a.active { background-color: #a6ce39; color: #fff; }

.texto { margin-top: 20px; }
.form-group { margin-bottom: 20px; font-size: 14px; }
.imagemSenha img { width: 100%; height: auto; }

#rodape { background-color: #a6ce39; margin-top: 50px; }
#rodape .frase { color: white; font-size: 14px; line-height: 30px; padding: 5px 20px; }
#rodape .logotipo img { height: 40px; padding: 5px 20px; }