html { height: 100%; font-size: 100%; /*16px*/ }

@media (max-width: 1080px) { html { font-size: 93.75%; /*15px*/ } }

@media (max-width: 900px) { html { font-size: 90.625%; /*14.5px*/ } }

@media (max-width: 720px) { html { font-size: 87.5%; /*14px*/ } }

@media (max-width: 590px) { html { font-size: 75%; /*12px*/ } }

body { min-height: 100%; background-repeat: no-repeat; background-size: cover; background-position: center center;  padding: 0; margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; position: relative; }

.form { width: 29rem; margin: auto; position: absolute; top: 50%; left: 50%; margin-right: -50%; 
    transform: translate(-50%, -50%); }
.card { box-shadow: 1px 1px 0.6rem #000; background-color: #fff; padding: 0 2rem 0.1rem 2rem; border-radius: 0.6rem; }
.sucesso { background-color: #28a745 !important; /* Verde */ color: white !important; border: 1px solid #218838 !important; }
.card-top { text-align: center; padding-top: 1rem; }
.card-top img { max-width: 100%; }
.card-top.com3D img { margin-top: 2em; float: left; }
.card-top.com3D model-viewer { width: 8em; height: 7em; float: left; }
.card-group { margin-bottom: 1.5rem; position: relative; clear: both; }
.card-group.msg { display: none;}
.card-group > label { width: 100%; color: rgb(49, 49, 49); display: block; }
.card-group > input { width: 100%; border-radius: 0.6rem; outline: 0; height: 2rem; font-size: 1.2rem; padding: 0.3rem;  box-sizing: border-box; border-width: 1px; border-color: rgb(196, 196, 196);  }
.card-group > input::placeholder { color: #bbb; }
.card-group > input:disabled { background-color: #bed8ff; color: #217fc2; }
.card-group > input.vazio { background-color: #ff9999; color: #fff; }
.card-group > input.vazio::placeholder { color: #fff; }
.card-group > span.aviso { position: absolute; top: 0.3em; right: 0; width: 8em; text-align: center; 
    font-weight: bold; font-size: 0.8em; color: white; background-color: red; border: 1px solid #555; 
    border-bottom: 0; border-radius: 5px 5px 0 0; }
.card-group > span.aviso.naoEnviado { width: auto; padding: 0 1%; }
.card-group > button { margin-top: 1.2rem; background-color: #005a8c; width: 100%; border-radius: 2rem;
     font-size: 1.2rem; padding: 0.7rem; color: #fff; border: 0px; outline: 0; cursor: pointer; position: relative; }   
.card-group > button:hover { background-color: #0789cf; } 
.card-group > button:disabled { cursor: default;  background-color: #CCC; }
.card-group > button:disabled:hover { background-color: #CCC; }
.card-group > button.desab { cursor: default;  background-color: red; }
.card-group > button.aguarde { cursor: default;  background-color:#ffc107;  color: rgb(68, 68, 68); 
    border: 1px solid #e0a800 }
.card-group > button.sucesso { background-color: #28a745;  color: white; border: 1px solid #218838; }
.card-group > button.invalid { font-weight: bold;  padding-left: 1.7rem;  background: url(img/exclama3.png) no-repeat 1rem center red;
    background-size: auto 80%; }
.card-group > button.invalid:hover { background-color: red; }
.card-group > button.entra { height: 2.8rem; background: url(interno/img/ico_aguarde3.gif) no-repeat center center #0789cf;  
    background-size: auto 80%; }
.card-group > button.msg { min-height: 2.8rem;  background-color: #005a8c; }
p.recuperar-senha { margin-top: 0; text-align: right; }
p.voltar-login { margin-top: 0; text-align: right; }
p.recuperar-senha a, p.voltar-login a { color: #005A8C; }

.contaTempo { position: absolute; bottom: -0.2rem; left: 5%; width: 90%; height: 0.3rem; background-color: #630101; }
.titulo { color: #005a8c; }
.com3D .titulo { float: left; margin: 0 0 1em 0; }
.site { text-align: center; }
.acessar-site > a { color: #005a8c; text-decoration: none; text-align: center; }
div#topo { overflow: hidden; }
.msg-aviso { background-color: #ffcccc; color: #900; border: 1px solid #900; padding: 10px; 
    border-radius: 5px; text-align: center; font-weight: bold; margin-bottom: 10px; display: none; }

a#olhoSenha {  position: absolute; top: 1.9em; right: 2%; width: 1em; height: 1em; cursor: pointer; 
    background-repeat: no-repeat ; background-size: auto 90%; }
a#olhoSenha.fechado { background-image: url('img/olho-fechado.svg'); }
a#olhoSenha.aberto { background-image: url('img/olho-aberto.svg'); }