html {
   height: 100vh;
}

main{
   padding: 20px;
   font-size: 30px;
   margin-left: 30px;
   text-align: center;
   display: flex;
   margin:  auto;
   height:  auto;
}

#areaConteudo {
   margin: auto;
}

form{
   text-shadow: 0px 0px 5px black;
   font-size: 30px;
   background-color: rgb(113, 113, 113);
   color: white;
   border-radius: 16px;
   border: 2px solid;
   padding: 16px;
   display: flex;
   flex-direction: column;
   align-items: center;

}

input {
   font-size: 65px;
   border-radius: 1rem;
   padding: 16px;
   margin-bottom: 10px;
   background-color: rgb(113, 113, 113);
   box-shadow: inset 0px 0px 48px 1px black;
   cursor: text;  
}

/*Parte necessária para destacar o input das páginas de review
input:focus {
   color: white;
   background-color:#0425a6;
   transition:0.3s;
}
*/
@media screen and (max-width: 450px) and (max-height: 900px) {
   div {
      padding: 22px;
      
   }}

@media screen and (max-width: 500px) and (max-height: 950px) {
      main {
      padding: 15px;
      }
}

@media(max-width: 550px) {
   .acao {
   margin:4px 8px;
   }
}

input {
   color: white;
}
@media (max-width: 550px) {
   input {
      width: 275px;
      margin:4px 4px;
   }
}

@media (max-width: 410px) {
   input {
      width: 200px;
      margin:4px 4px;
   }
}

@media(max-width: 550px) {
   form {
   margin:4px 4px;
   }
}

button{
   display: block;
   margin: 16px 8px;
   font-size: 65px;
   border-radius: 2rem;
   padding: 16px;
   background-color: rgb(113, 113, 113);
   text-shadow: 0px 0px 0.1rem black;
   border-radius: 2rem;
   box-shadow: inset 0px 0px 48px 1px black;
   cursor: default;
   color: white;
}

button:hover{
   cursor: pointer;
}

button:active {
   scale: 0.95;
   background-color: rgb(113, 113, 113);
}

label{

   border-radius: 1rem;
   margin-bottom: 1px;
}

p{
   background-color: rgb(113, 113, 113);
   padding: 8px 8px 8px 8px;
   text-shadow: 0rem 0rem 0.1rem black;
   border-radius: 32px;
/*box-shadow: inset 0rem 0rem 3rem 0.1rem black;*/
   margin: 16px 8px;
}

@media screen and (max-width: 400px) and (max-height: 900px) {
   h1{
      font-size: 1rem;
   }
   form {
      font-size: 12px;
   }

input{
   width: min-content;
   background-color: rgb(113, 113, 113);
   padding: 0.3rem;
   font-size: small;
   border-radius: 1rem;
   box-shadow: inset 0rem 0rem 3rem 0.1rem black;
   cursor: default;
}

button{
   font-size: medium;
   padding-bottom: 0.4rem;
}

p{
   width: min-content;
   background-color: rgb(113, 113, 113);
   padding-top: 1rem;
   padding-bottom: 0.5rem;
   text-shadow: 0rem 0rem 0.1rem black;
   border-radius: 2rem;
   box-shadow: inset 0rem 0rem 3rem 0.1rem black;
   cursor: default;
   }}

@media screen and (max-width: 1000px) and (max-height: 2000px) {
   div{
      padding: 1rem;
   }

   h1{
      font-size: 3rem;
   }

   form {
      font-size: 1rem;
      padding: 2rem 1rem 2rem 1rem;
   }
}

input{
   background-color: rgb(113, 113, 113);
   padding: 1rem;
   font-size: 1rem;
   border-radius: 1rem;
   box-shadow: inset 0rem 0rem 3rem 0.1rem black;
   cursor: default;
   font-size: 2rem;
}

button{
   font-size: 2rem;
   padding: 1rem 6rem 1rem 6rem;
}

p{
   width: min-content;
   background-color: rgb(113, 113, 113);
   padding-top: 1rem;
   padding-bottom: 1rem;
   padding-left: 5.5rem;
   padding-right: 5.5rem;
   text-shadow: 0rem 0rem 0.1rem black;
   border-radius: 2rem;
   box-shadow: inset 0rem 0rem 3rem 0.1rem black;
   cursor: default;
   font-size: 2rem
}

label{
   font-size: 2rem;
}
p:active {
   scale: 0.95;
   background-color:#647ee6;
}
.helper-text {
   display: none;
   font-size: 1.2rem;
   color: white;
   margin-top: 12px;
 }
 
/* ---------- Estilos dinâmicos ---------- */
.required-popup::after {
   top: 0;
   right: 0;
   color: #DFDFDF;
   font-size: .65rem;
   padding: .2rem .3rem;
   display: block;
   background-color: #202020;
}
 input.error {
   background-color: #CCBBBB;
}
 
input.correct {
   background-color: #BBCCBB;
   color: white;
}
 
.visible {
   display: block;
}

.mensagem-erro-senha {
   color: #39ff14; 
   font-size: 20px; 
   border-color: firebrick;
   box-shadow: inset 0rem 0rem 3rem 0.1rem black;
   /*padding: 14px 100px 14px 100px;*/
   border-radius: 2rem 2rem 0 0;
}
.mensagem-erro-gmail {
   color: #39ff14;
   font-size: 20px; 
   border-color: firebrick;
   box-shadow: inset 0rem 0rem 3rem 0.1rem black;
   /*padding: 14px 100px 14px 100px;*/
   border-radius: 2rem 2rem 0 0; 
   margin-bottom: 30px;
}
@media screen and (max-width: 600px) and (max-height: 2000px) {
   div{
      padding: 1rem;
   }

   h1{
      font-size: 2rem;
   }

   form {
      font-size: 2rem;
      padding: 2rem 1rem 2rem 1rem;
   }
   button{
      font-size: 1.4rem;
      padding: 16px  40px  16px  40px
   }
   p{
      padding: 16px  32px  16px  32px;
      text-shadow: 0rem 0rem 0.1rem black;
      border-radius: 32px;
      margin: 16px auto;
      font-size: 1.4rem;
   }
   label{
      border-radius: 1rem;
      margin-bottom: 1px;
      font-size: 1.4rem;
   }
   
   input {
      font-size: 1.4rem;
      border-radius: 1rem;
      padding: 16px;
      margin-bottom: 10px;

   
   }
   .mensagem-erro-senha {
      font-size: 0.7rem; 
      /*padding: 14px 86px 14px 86px;*/
   }
}