@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
  font-family: 'Inter', sans-serif;
}

.screen-basic-data1 {
  margin: 5rem 16rem 3rem 0rem;
}

.form-data {
  padding: 2rem 2rem 4rem 2rem;
  margin: 4rem 0rem 5rem 14rem;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.199);
  border-radius: 0.5rem;
  color: white;
  gap: 1rem;
  box-shadow: 0.5rem 0.5rem 0.6rem rgba(0, 0, 0, 0.336);
}

.form-data input,
.form-data select {
  font-size: 1rem;
  border-radius: 0.5rem;
  border: 1.5px solid rgb(122, 123, 131);
  padding: 0.6rem 0.5rem 0.4rem 0.5rem;
}

.form-data label {
  font-size: 1.1rem;
  margin: 0rem 0rem 0.1rem 0.5rem;
}

.form-data span p {
  color: rgb(255, 0, 0);
  cursor: default;
  font-weight: bold;
  margin: 0.1rem 0rem 0rem 0rem;
  padding: 0;
}

#msg-data-nascimento p {
  margin-top: 0rem;
}

#msg-carteira-trabalho p {
  margin-top: 0rem;
}

#msg-nome-pai p {
  margin-top: 0rem;
}

#social,
#check-rg {
  display: flex;
  width: auto;
  margin-right: 1rem;
}

.obrigatorio {
  display: flex;
  justify-content: flex-end;
  font-size: 0.7rem;
  margin: 0 0.5rem 0 0;
  padding: 0;
}

.name,
#nome-social,
.cpf,
.cpf-pais,
.rg,
.orgao-expedidor,
.nome-mae,
.nome-pai,
.carteira-trabalho,
.naturalidade,
.nacionalidade,
.estado-civil,
.data-nascimento,
.sexo,
.uf-naturalidade,
.deficiencias {
  width: 100%;
}

.div-number-1,
.div-number-1-1,
.div-number-1-2,
.div-number-1-5,
.div-number-2,
.div-number-2-5,
.div-number-3,
.div-number-4,
.div-number-5 {
  display: flex;
  flex-direction: center;
  justify-content: space-between;
  width: 100%;
}

.div-number-1-2 {
  margin: 2rem 0 2rem 0;
}

.label-check-rg {
  display: flex;
  text-align: center;
}

.div-number-1 {
  flex-wrap: wrap;
}

.div-number-5 {
  margin-bottom: 2rem;
}

.div-name {
  width: 47%;
}

.div-cpf {
  width: 47%;

}

#div-nome-social {
  width: 100%;
}

.div-social,
.div-check-rg {
  width: 100%;
  display: flex;
  align-items: center;
  margin-right: 3rem;
}

.div-rg {
  width: 100%;
}


.show {
  display: block;
}

.hide {
  display: none;
}

.div-orgao-expedidor {
  width: 100%;
}

.div-nome-mae {
  width: 47%;
}

.div-nome-pai {
  width: 47%;
  margin-bottom: 1rem;
}

.div-carteira-trabalho {
  width: 100%;
  margin-right: 3rem;
  margin-bottom: 1rem;
}

.div-naturalidade {
  width: 100%;
  margin-right: 3rem;
}

.div-nacionalidade {
  width: 100%;
}

.div-estado-civil {
  width: 100%;
  margin-right: 3rem;
}

.div-data-nascimento {
  width: 100%;
  margin-right: 3rem;
}

.div-sexo {
  width: 100%;
}

.div-naturalidade {
  width: 100%;
}

.div-deficiencias {
  width: 100%;
}

#descricao {
  width: 100%;
}

.laudo-deficiencia {
  min-width: 50%;
  max-width: 50%;
}

#div-laudo-deficiencia p {
  min-width: 50%;
  max-width: 50%;
}

#div-laudo-deficiencia {
  margin-bottom: 2rem;
}


.div-buttons-data {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
}

.form-data button {
  background-color: #007bff;
  margin: 0rem 0rem 0rem 0rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  box-shadow: 0.413rem 0.413rem 0.6rem rgba(0, 0, 0, 0.336);
  border: solid #0075f3;
  font-size: 1rem;
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  width: 10rem;
}

.button-advanced-data-basic:hover {
  background-color: #0056b3;
  border: solid #0056b3;
}

.button-advanced-data-basic:focus {
  outline: none;
}

#msg-fracasso p {
  font-size: 1em;
  padding: 1rem 0.5rem 0rem 0.5rem;
  color: rgb(255, 0, 0);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  width: 100%;
  margin-bottom: 1rem;
}

@media screen and (min-width:2560px) {
  .div-number-1 {
    flex-wrap: none;
  }

  .div-number-5 {
    margin-bottom: 2rem;
  }
}

@media screen and (max-width:1824px) {
  .div-number-1 {
    display: flex;
    flex-direction: row;
    margin-bottom: 0;
    gap: 1rem;
  }

  .div-cpf {
    order: 0;
  }

  #div-nome-social {
    order: 2;
  }
}


/* inicio correção de mensagem erro, todas as alteraçoes realizadas aqui, são para style das mensagem erro. */
@media screen and (max-width:1260px) {
  #msg-naturalidade p {
    margin-top: 0rem;
  }

  #msg-nacionalidade p {
    margin-top: 0rem;
  }
}

@media screen and (max-width:1066px) {
  .descricao-deficiencia{
    margin-bottom: 1rem;
  }

  #laudo-deficiencia {
    width: 100%;
    max-width: 100%;

  }

  #div-laudo-deficiencia p {
    max-width: 100%;

  }

    #msg-naturalidade p {
      margin-top: -1.1rem;
    }

    #msg-nacionalidade p {
      margin-top: -1.1rem;
    }

    #msg-data-nascimento p {
      margin-top: -1.1rem;
    }

    .div-number-1-1,
    .div-number-1-2 {
      margin: 1rem 0 0 0;
    }

    .div-name {
      width: 46rem;
      margin-right: 2rem;
    }

    #div-nome-social {
      width: 100%;
    }

    .label-nome-social,
    .label-check-rg {
      margin-bottom: 0.5rem;
    }

    .label-check-rg {
      display: flex;
      text-align: center;
    }

    .div-social,
    .div-check-rg {
      margin: 0 0 1rem 0;
      /* width: 20%; */
    }

    .div-cpf {
      width: 46rem;
      order: 2;
    }

    .social,
    .check-rg {
      padding-left: 1rem;
    }
  }

  @media screen and (max-width:700px) {
    #msg-data-nascimento p {
      margin-top: 0rem;
    }
  }

  @media screen and (max-width:600px) {
    #msg-naturalidade p {
      margin-top: 0rem;
    }

    #msg-nacionalidade p {
      margin-top: 0rem;
    }
  }

  /* fim correção de mensagem erro */
  @media screen and (max-width:1066px) {

    .form-data label {
      font-size: 1rem;
      margin: 0;
      padding: 0;
    }

    .div-number-1,
    .div-number-1-1,
    .div-number-1-2,
    .div-number-1-5,
    .div-number-2,
    .div-number-2-5,
    .div-number-3,
    .div-number-4,
    .div-number-5 {
      display: flex;
      flex-direction: column;
      width: 100%;
      gap: 0rem;

    }

    .name,
    .social,
    .cpf,
    .cpf-pais,
    .rg,
    .orgao-expedidor,
    .nome-mae,
    .nome-pai,
    .carteira-trabalho,
    .naturalidade,
    .nacionalidade,
    .estado-civil,
    .data-nascimento,
    .sexo,
    .uf-naturalidade,
    .deficiencias {
      width: 100%;
    }

    .div-name,
    .div-social,
    .div-cpf,
    .div-rg,
    .div-orgao-expedidor,
    .div-nome-mae,
    .div-nome-pai,
    .div-carteira-trabalho,
    .div-naturalidade,
    .div-nacionalidade,
    .div-estado-civil,
    .div-data-nascimento,
    .div-sexo,
    .div-naturalidade,
    .div-naturalidade,
    .div-deficiencias {
      width: 100%;
      margin-top: 1.5rem;
    }

    #div-nome-social {
      margin-bottom: 1rem;
    }

    /* .cpf-pai {
    margin-bottom: 1rem;
  } */

  }

  @media screen and (max-width:920px) {
    .screen-basic-data1 {
      margin: 7rem 8rem 0rem 0rem;
    }

    .form-data {
      margin: -2rem 0rem 5rem 6rem;
      width: 100%;
    }

    .form-data label {
      font-size: 1.1rem;
      margin: 0;
      padding: 0;
    }
  }

  @media screen and (max-width:540px) {
    .screen-basic-data1 {
      margin: 5rem 8rem 0.5rem 0rem;
    }

    .form-data {
      margin: 4rem 0rem 5rem 6rem;
      width: 100%;
    }

    .form-data label {
      font-size: 1.1rem;
      margin: 0;
      padding: 0;
    }
  }

  @media screen and (max-width: 430px) {
    .screen-basic-data1 {
      margin: 1rem 6rem 0.5rem 0rem;
    }

    .form-data {
      margin: 4rem 0rem 5rem 5rem;
      width: 100%;
      padding: 1rem 1rem 1rem 1rem;
    }

    .form-data label {
      font-size: 1.1rem;
      margin: 0;
      padding: 0;
    }
  }

  @media screen and (max-width: 300px) {
    .screen-basic-data1 {
      margin: 3.5rem 5rem 0.5rem 0rem;
    }

    .form-data {
      margin: 3rem 0rem 5rem 4.5rem;
      width: 100%;
      padding: 1.5rem 0.5rem 4rem 0.5rem;
    }

    .form-data label {
      font-size: 1.1rem;
      margin: 0;
      padding: 0;
    }
  }