body {
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  color: #111111;
  /* min-height: 100vh; */
}

h1,
h2,
h3,
h4,
ul,
p,
blockquote,
dd {
  margin: 0px;
}

ul {
  padding: 0px;
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}
body {
  background-color: #006a55;
  font-family: "Space Mono", monospace;
}
/* HEADER */

.header-img {
  max-width: 100px;
  height: auto;
  margin-left: 30px;
  margin-top: 30px;
  /* background-color: #ebebeb; */
  padding: 10px;
  border-radius: 10px;
}

.p-clique-aqui{
  background-color: #dfdfdf;
  width: fit-content;
  margin: 0 auto;
  padding: 1px 4px;
  border-radius: 3px;
  margin-top: 5px;
}

#main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 90px;
  margin: 0 auto;
  max-width: 1000px;
  padding: 0 20px;
  margin-top: 20px;
}

.formularios-sections {
  margin: 0 auto;
}

.img-principal {
  max-width: 400px;
  height: auto;
}

.botao-troca {
  background-color: #efefef;
  margin: 0 auto;
  display: flex;
  /* gap: 10px; */
  font-size: 16px;
  color: #005645;
  border-radius: 20px 20px 0 0;
  width: fit-content;
  height: min-content;
  padding-top: 10px;
  padding-bottom: 5px;
}

.login {
  align-items: center;
  justify-content: center;
  display: flex;
  flex-direction: column;
}

#login-section,
#registro-section {
  background-color: var(--cor-branco);
  padding: 40px 30px;
  padding-bottom: 20px;
  border-radius: 20px;
  width: fit-content;
  /* margin-bottom: 50px; */
}

.registro-section-div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.formulario-dados {
  /* background-color: red; */
  width: fit-content;
}

.formulario label {
  color: #005645;
  font-size: 14px;
  width: 100%;
}

form input {
  background-color: #fff;
  margin-bottom: 10px;
  border: #31cfb0 solid 2px;
  padding: 8px;
  text-align: left;
  width: fit-content;
  border-radius: 0 20px 20px 0px;
}

.botao-meio {
  display: flex;
  justify-content: center;
  align-items: center;
}

.botao-enviar {
  padding: 10px 20px;
  font-size: 20px;
  border: none;
  background-color: #59c2ad;
  border-radius: 20px;
  margin-top: 20px;
  color: #fff;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.25);
}
.botao-enviar:hover {
  cursor: pointer;
  background-color: #42a994;
}

/* ######################################################################## */

.div-registro {
  display: grid;
  /* gap: 40px; */
  grid-template-columns: 1fr;
  /* gap: 10px; */
}

.hidden {
  display: none;
}

.dialog-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}


.dialog-modal {
  background-color: #006a55;
  border-radius: 15px 0 15px 15px;
  position: relative;
  padding: 45px;
  border: 1px solid #fff;
  box-shadow: 0px 0px 25px black;
  overflow: visible;
  /* position: absolute; */
  /* top: 35%; */
}


.div-esqueci-a-senha {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
}

.div-esqueci-a-senha label {
  display: block;
  color: #fff;
  font-size: 18px;
}

.div-esqueci-a-senha input {
  display: block;
}

#botao-fechar-modal,
#botao-fechar-modal2,
#botao-fechar-modal3 {
  position: absolute;
  right: -15px;
  padding: 8px 12px;
  border-radius: 50%;
  top: -15px;
  border: none;
  box-shadow: 0px 0px 15px black;
  text-align: center;
  cursor: pointer;
}

.botao-recuperar {
  padding: 10px 14px;
  border-radius: 15px;
  border: none;
  background-color: #59c2ad;
  color: #fff;
  font-size: 17px;
  cursor: pointer;

  /* font-weight: bold; */
}

.check-wpp-div label,
.check-wpp-div input,
.check-trans-div label, 
.check-trans-div input,
.check-politica-div label, 
.check-politica-div input {
cursor: pointer;
font-size: 14px;
font-family: arial;
/* background-color: red; */
padding: 4px 0 4px 4px;
}

/* .check-wpp-div input,
.check-trans-div input,
.check-politica-div input{
margin-top: 4px;
} */


.required-vermelho {
  color: red;
  font-size: 10px;
}

.divs-checkbox{
  /* background-color: red; */
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: top;
  gap: 8px;
}

.check-politica-div a{
  color: rgb(0, 0, 177);
  text-decoration: underline;

}

.check-wpp-div, .check-trans-div, .check-politica-div {
  /* background-color: blue; */
  max-width: 240px;
  /* text-align: center; */
  display: flex;
  justify-content: left;
  align-items:center;
  gap: 3px;
}

#botao-esqueci-senha {
  padding: 7px 0;
  background: #e7e7e7;
  border: none;
  margin: 5px 0 0 0 0;
  cursor: pointer;
  /* margin-left: auto; */
  /* margin-right: auto; */
  border-radius: 10px;
  display: inline-block;
}

#botao-enviar {
  padding: 50px 20px;
  /* background-color: blue; */
}

.botao-troca a {
  padding: 10px 10px;
  padding-bottom: 0px;
  background-color: #efefef;
  /* border-radius: 20px 0 0 0; */
  padding-bottom: 5px;
}

#botao-entrar-a {
  border-radius: 20px 0 0 0;
}

#botao-entrar-a {
  background-color: #fff;
}

.div-modal-verificacao{
  text-align: center;
  color: #fff;
}

#botao-esqueci-senha:hover {
  background: #d1d1d1;
}

.p-clique-aqui:hover {
  background-color: #d1d1d1;
}
.verde{
  color: #23eb09
}

.vermelho{
  color: rgb(255, 36, 36);
}

#botao-fechar-modal4,
#botao-fechar-modal5{
  margin-top: 20px;
  padding: 8px 14px;
  border-radius: 12px;
  border: none;
  box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.4);
  font-weight: bold;
  color: #004235;
  cursor: pointer;
  font-size: 16px;
}

#botao-fechar-modal4:hover,
#botao-fechar-modal5:hover{
  background-color: #e6e6e6;
}

#botao-registro-a {
  border-radius: 0 20px 0 0;
}

#botao-nao-tem-registro {
  margin-top: 10px;
  text-align: center;
}
#botao-nao-tem-registro a {
  color: rgb(0, 0, 83);
  font-size: 12px;
}
.divisao-formulario {
  /* background-color: red; */
  display: grid;
  justify-content: center;
  align-items: center;
}
@media (max-width: 768px) {
  .img-principal {
    display: none;
  }
  .botao-troca {
    font-size: 16px;
  }
  .formulario label {
    font-size: 18px;
  }

  #login-section,
  #registro-section {
    padding: 18px 35px;
  }
  #main {
    min-height: 70vh;
    /* margin-left: 5px; */
    /* margin-top: 50px; */
  }
}

@media (max-width: 542px) {
  #login-section,
  #registro-section {
    padding: 20px 30px;
  }
  .div-registro {
    display: block;
  }
}