body {
      font-family: Times, Times New Roman, serif;
      margin: 0px;
    }

    h3 {
      font-size: min(2vw, 120%);
      text-align: center; 
    }
    .text-right {
      text-align: right;      
      border: 1px solid rgb(180, 179, 179);
    }
    .highlight {
      font-weight: bold;
      text-align: right;      
    }
   .cabec {
     display: grid;
   }

 .nav {                           /*  SERVIÇO AUTÔNOMO DE ÁGUA E ESGOTOS */
   grid-area: nav;
   margin-left: -1px;
   padding-top: 10px;   
   width: 325px;  
 }  
.content {                          /*  Rua Bernardino de Campos, 799 - Centro  */
  grid-area: content;          
  margin-left: -1px;  
  padding-top: 1px;     
  width: 325px;  
}

.sidenav {                        /*  logo_saae_small */ 
  grid-area: sidenav;
}

.advert {                         /*  Retornar  Imprimir   */
  grid-area: advert;
  width: 70;
}

.footer {                         /*  0800 77 22 195 www.saae.sp.gov.br Indaiatuba-SP  */
  grid-area: footer;
  margin-left: -1px;
  width: 325px;  
}

.grid-template-areas-1 {
  grid-template-areas:
    "sidenav nav advert"
    "sidenav content advert"
    "sidenav footer footer"
    ;
}
.grid{
      display: grid;
      max-width: 663px;
      margin: 0 auto;
      border: 1px solid rgb(180, 179, 179); 
}

#bloco1 {
  border: 1px solid rgb(207, 205, 205);
  /*background-color: aquamarine; */
}
.gridL1 {
  display: grid;
  margin-top: -5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 20px);
  height: 40px;
  max-width: 660px;   
} 
.L1item-1 {
  grid-column: span 1;  
  font-weight: bold;
}
.L1item-2,  .L1item-3{
   font-weight: bold;
}
.L1item-4{   
   padding-left: 10px;
}
.L2item-1, .L2item-2, 
.L3item-1, .L3item-2 {
  font-weight: bold;
}

.gridL1, .L1item-2, .L1item-5 {
  grid-column: span 4;
}

#bloco2 {
  border: 1px solid rgb(192, 190, 190);  
  /*background-color: rgb(127, 225, 255); */
}
.gridL2 {
  display: grid;
  margin-top: -5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(3, 20px);
  height: 40px;
  max-width: 660px; 
} 
.gridL2, .L2item-1, .L2item-2, .L2item-3, .L2item-4{
  grid-column: span 3;  
}
.gridL3 {
  display: grid;
  margin-top: -5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 1fr;
  height: 40px;
  max-width: 660px;   
} 
.gridL3, .L3item-1, .L3item-3 {
  grid-column: span 4;  
}

.gridL4 {
  display: grid;
  margin-top: -5px;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: 1fr;
  height: 20px;
  padding-top: 10px;
  max-width: 660px; 
  font-weight: bold;  
} 
.L4item-2 {
  grid-column: span 6;  
}
.L4item-3 {
  grid-column: span 2; 
  justify-self: right; 
}
.L4item-4 {
  grid-column: span 2; 
  justify-self: right; 
}
.L4item-5 {
  grid-column: span 2; 
  justify-self: right; 
}

.gridL5 {
  display: grid;
  margin-top: -5px;
  grid-template-columns: repeat(13, 1fr);
  height: 10px;  
  padding-bottom: 5px;
  max-width: 660px; 
  border-bottom: 1px solid rgb(163, 162, 162);
} 

.L5item-1 {
  grid-column: span 1;
  justify-self: center;    
  font-size: min(2vw, 90%);
}
.L5item-2 {
  grid-column: span 6;    
  justify-self: left;
  font-size: min(2vw, 90%);
}
.L5item-3 {
  grid-column: span 2; 
  justify-self: right; 
  font-size: min(2vw, 90%);
}
.L5item-4 {
  grid-column: span 2;  
  justify-self: right;
  font-size: min(2vw, 90%);
}
.L5item-5 {
  grid-column: span 2;
  justify-self: right;
  font-size: min(2vw, 90%);
}
  


.item {
  margin: 1px;  
  text-align: left;
  font-size: min(2vw, 90%);      
}

td {
  padding: 6px;  
  font-size: min(2vw, 90%);
}

#loginho { 
  width: 100px;
  background-size: 100% 100%;
}

button {
  width: 68px;
  height: 20px;
  row-gap: 5px;
  background-color: lightskyblue;
  color: #darkblue;
  border:none;
  margin-top: 5px;
}

#compet {
  font-size: 1em;
  color: darkblue;
}