body{background-color:#f8f9fa; font-family:'Poppins', sans-serif;}

.box{background-color:#ffffff; border:1px solid #dee2e6; box-shadow:2px 2px 10px rgba(0, 0, 0, 0.1); padding:20px; text-align:center; font-size:1.2rem; font-weight:bold; border-radius:15px;}

.caixa-dagua{width:130px; height:200px; border:2px solid #000; border-radius:5px; position:relative; overflow:hidden; background:linear-gradient(to bottom, #f3f3f3, #a3a3a3); margin:0 auto;}

.agua{position:absolute; bottom:0; width:100%; height:0%; background:rgba(30, 144, 255, 0.8); transition:height 0.5s ease;}

.porcentagem{color:#fff; font-weight:bold; font-size:1.2rem; margin-bottom:5px; text-shadow:1px 1px 2px rgba(0, 0, 0, 0.7); position:relative; top: 45%;}

.informacoes{font-size:1.2rem; font-weight:bold; margin-bottom:10px;}

.atualizacao{font-size:13px; font-weight:normal;}
.atualizacao span{font-weight:700}
@keyframes piscar{0%, 100%{opacity:1;} 50%{opacity:0;}}
.atualizacao.atencao{font-weight:500; background-color:#df0909; padding:2px 3px; color:#fff; border-radius:5px; animation:piscar 1s infinite;}

/* .loading{margin-top:30%} */
.loading .circle{width:80px; height:80px; border:8px solid #dee2e6; border-top:8px solid #3498db; border-radius:50%; animation:spin 2s linear infinite; margin:50px auto; position:relative;}
.loading i{margin-top:-88px; position:absolute; font-size:30px; color:#3498db; transform:translate(-50%, -50%); animation:pulse 1.5s ease-in-out infinite, move 2s ease-in-out infinite;}
@keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}
@keyframes move{0%{transform:translate(-50%, -50%) translateY(0);} 50%{transform:translate(-50%, -50%) translateY(-5px);} 100%{transform:translate(-50%, -50%) translateY(0);}}
@keyframes pulse{0%, 100%{opacity:1;} 50%{opacity:0.6;}}

h2{font-weight:700; letter-spacing:-1px;}


.bloco170 > label{width:170px; font-weight:600; font-size:15px; text-align:right; display:grid; align-items:center; margin-bottom:0;margin-left:auto;}
.bloco170 .campo{width:calc(100% - 170px); max-width:350px; padding:0 0 0 5px; margin-right:auto;}
@media (max-width:1200px){
  .bloco170 > label{width:100%; padding:0 15px; text-align:left;}
  .bloco170 .campo{width:100%; max-width:100%; padding:0 15px;}
}