* {
  /* box-shadow: inset 0px 0px 2px rgb(249, 76, 76); */
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

html {
  font-size: 62.5%;
  scroll-behavior: smooth;
}

:root {
  --SideColor: #727986;
  --AzulClaro: #d4eaff;
  --AzulClaro-1: #3c92e9;
  --AzulEscuro: #2e82d5;
  --VerdeClaro: #c2f8d5;
  --VerdeDescarregado: #96c0ac;
  --VerdeEscuro-1: #50a447;
  --VerdeEscuro: #479a4c;
  --AmareloClaro: #fef3cb;
  --AmareloEscuro: #f8c647;
  --AmareloEscuro-1: #eac436;
  --VermelhoClaro: #fdd2d8;
  --VermelhoEscuro: #d83f3e;
  --VermelhoEscuro-1: #ec5050;
  --Lilas: #5c5d99;
  --LilasClaro: #a0a1e0;
  --VerdeCinza: #96c0ac;
  --AmareloEscuro: #e59534;
  --BrancoCinza: #f8f8fa;
  --BrancoCinza-1: #dcdce0;
  --BrancoClaro: #ffffff;
  --LetraCinza: #b9bdc5;
  --LetraCinza-1: #959595;
  --LetraCinza-2: #5c5c5c;
  --preto: #000000;
  --preto-1: #504f4f;
  --fadeBack: #00000047;
  --bordaBtn: #dedee2;
  --Interup: #cccccc6c;
  /* defificao de fontsize */

  /* 0-6 */

  --size-0-6: clamp(0.6rem, calc(0.1vw + 0.1rem), 1rem);

  /* 0-7 */

  --size-0-7: clamp(0.7rem, calc(0.2vw + 0.1rem), 1rem);

  /* 0-8 */

  --size-0-8: clamp(0.8rem, calc(0.3vw + 0.1rem), 1rem);

  /* v 0-9 */

  --size-0-9: clamp(0.9rem, calc(0.4vw + 0.1rem), 1rem);

  /* v 1 */

  --size-1: clamp(1rem, calc(0.5vw + 0.5rem), 1.5rem);

  /* v 1-1 */

  --size-1-1: clamp(1.1rem, calc(0.6vw + 0.1rem), 1.8rem);

  /* v 1-2 */
  --size-1-2: clamp(1.2rem, calc(0.7vw + 0.1rem), 2rem);

  /* V 1-3 */
  --size-1-3: clamp(1.3rem, calc(0.8vw + 0.1rem), 2rem);

  /* v 1-4 */

  --size-1-4: clamp(1.4rem, calc(0.9vw + 0.1rem), 2.2rem);

  /* v 1-5 */

  --size-1-5: clamp(1.5rem, calc(1vw + 0.1rem), 2rem);

  /* V 1-6 */
  --size-1-6: clamp(1.6rem, calc(1.1vw + 0.1rem), 3rem);

  /* v 1-7 */

  --size-1-7: clamp(1.7rem, calc(1.2vw + 0.1rem), 3rem);

  /* V 1-8 */

  --size-1-8: clamp(1.8rem, calc(1.3vw + 0.1rem), 3rem);

  /* v 1-9 */
  --size-1-9: clamp(1.9rem, calc(1.4vw + 0.1rem), 3.6rem);

  /* v 2 */
  --size-2: clamp(2rem, calc(1.9vw + 0.1rem), 3.5rem);

  /* v 2-1 */
  --font-2-1: clamp(2.1rem, calc(2vw + 0.1rem), 3rem);

  /* v 2-2 */
  --size-2-2: clamp(2.2rem, calc(2.05vw + 0.1rem), 3rem);

  /*  v 2-3 */
  --size-2-3: clamp(2.3rem, calc(2.06vw + 0.1rem), 3.9rem);

  /* v 2-4 */

  --size-2-4: clamp(2.4rem, calc(2.07vw + 0.1rem), 3rem);

  --size-2-5: clamp(2.5rem, calc(2.08vw + 0.1rem), 3rem);

  /* v 2-4 */

  --size-2-6: clamp(2.6rem, calc(2.09vw + 0.1rem), 3rem);

  /* v 2-7 */

  --size-2-7: clamp(2.7rem, calc(2.1vw + 0.1rem), 3rem);

  /* 2-8 */

  --size-2-8: clamp(2.8rem, calc(2.2vw + 0.1rem), 3rem);

  --size-2-9: clamp(1.5rem, calc(2.2vw + 0.1rem), 3rem);

  /* V 3 */
  --size-3: clamp(3rem, calc(2.3vw + 0.1rem), 5rem);

  /* V 3-1*/
  --size-3-1: clamp(3rem, calc(2.4vw + 0.1rem), 5rem);

  /* V 3-2 */
  --size-3-2: clamp(3rem, calc(2.5vw + 0.1rem), 5rem);

  /* V 3-3 */
  --size-3-3: clamp(3rem, calc(2.6vw + 0.1rem), 5rem);

  /* V 3-4 */
  --size-3-4: clamp(3rem, calc(2.7vw + 0.1rem), 5rem);

  /* V 3-5 */
  --size-3-5: clamp(3rem, calc(2.8vw + 0.1rem), 5rem);

  /* V 3-6 */
  --size-3-6: clamp(3rem, calc(2.9vw + 0.1rem), 5rem);

  /* V 3-7 */
  --size-3-7: clamp(3rem, calc(3vw + 0.1rem), 5rem);

  /* V 3-8 */
  --size-3-8: clamp(3rem, calc(3.1vw + 0.1rem), 5rem);

  /* V 3-8 */
  --size-3-9: clamp(3rem, calc(3.2vw + 0.1rem), 5rem);

  /* V 3-9 */
  --size-3-9: clamp(3rem, calc(3.3vw + 0.1rem), 5rem);

  /* V 4 */
  --size-4: clamp(3rem, calc(3.4vw + 0.1rem), 5rem);
}

body {
  min-height: 100vh;
  font-size: var(--size-1-6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.error_sm {
  position: absolute;
  bottom: -0.5rem;
  font-size: var(--size-1-2);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  color: rgb(216, 100, 100);
  text-align: center;
}


/* Spiner */

.MeuSpiner {
  height: 4.5rem;
  width: 4.5rem;
  background: transparent;
  border: solid 0.6rem var(--BrancoCinza-1);
  border-top-color: var(--AmareloEscuro);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: rodar 0.7s linear forwards infinite;
  /* display: none; */
  z-index: 20;
}

@keyframes rodar {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}


.logoLetter {
  margin-top: 4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  left: 0;
  background: transparent;
  z-index: 10;
  padding-block: 2rem;
}

.logoLetter .lines {
  cursor: pointer;
}

.logoLetter .lines span {
  display: inline-block;
  height: 4rem;
  width: 0.5rem;
  border-radius: 0.02rem;
  background: var(--AmareloEscuro);
  margin-inline: 0.01rem;
}

.logoLetter .lines span.line1 {
  height: 3rem;
  transform: translateY(-2rem);
}

.logoLetter .lines span.line4 {
  height: 3rem;
  transform: translateY(-0.96rem);
}

.letters h3 {
  font-weight: 400;
  font-size: var(--size-1-4);
  color: var(--preto-1);
}

.letters p {
  font-size: var(--size-1-1);
  color: var(--AmareloEscuro);
}

.welcomePrinc {
  letter-spacing: 0.1rem;
  font-family: Poppins, sans-serif;
  font-weight: bold;
}

.putDataInfo {
  margin-top: 0.6rem;
  font-family: Poppins, sans-serif;
  font-size: var(--size-1-1);
  color: var(--preto-1);
}

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

.mt-2 {
  margin-top: 2rem;
}

form .InputLabelContainer {
  width: 100%;
  display: flex;
  align-items: start;
  justify-content: start;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  padding-bottom: 1rem;
}

form .InputLabelContainer label {
  font-size: var(--size-1-1);
  font-weight: 600;
}

form .InputLabelContainer input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 0.5rem;
  border: solid 0.1rem var(--bordaBtn);
  outline: none;
}

form .forgotSenha {
  width: 100%;
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 1rem;
  color: var(--VermelhoEscuro);
  font-size: var(--size-1-1);
  font-weight: 500;
}

form .forgotSenha span {
  cursor: pointer;
}

form .forgotSenha span:hover {
  text-decoration: underline;
}

form .forgotSenha .InputContainer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

form .forgotSenha .InputContainer input {
  appearance: none;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 0.5rem;
  background: var(--BrancoCinza);
  border: solid 0.1rem var(--AmareloEscuro);
  outline: none;
  position: relative;
}
form .forgotSenha .InputContainer input::after {
  content: "";
  position: absolute;
  left: 0;
  width: 85%;
  height: 0.2rem;
  background: var(--VermelhoEscuro);
  transform: translateX(0.1rem) translateY(0.6rem) rotate(45deg);
  display: none;
}

form .forgotSenha .InputContainer input::before {
  content: "";
  position: absolute;
  left: 0;
  width: 85%;
  height: 0.2rem;
  background: var(--VermelhoEscuro);
  transform: translateX(0.1rem) translateY(0.6rem) rotate(-45deg);
  display: none;
}
form .forgotSenha .InputContainer input:checked::after {
  display: block;
}

form .forgotSenha .InputContainer input:checked::before {
  display: block;
}

form button {
  margin-top: 3rem;
  width: 100%;
  padding: 1rem;
  border-radius: 0.5rem;
  background: var(--VermelhoEscuro);
  color: var(--BrancoClaro);
  border: 0;
  cursor: pointer;
  transition: 0.1s ease-in-out;
}

form button:hover {
  background: var(--VermelhoEscuro-1);
}

form hr {
  margin-top: 0.5rem;
  width: 100%;
  height: 0.1rem;
  background: #e7e7e7;
  border: 0;
}

/* Elemento interrupe */

.InterrupeElement {
  position: fixed;
  width: 100%;
  height: 100%;
  background: var(--Interup);
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease-in-out;
}

.InterrupeElement.show {
  opacity: 1;
  pointer-events: all;
}

/* ModalErroValidateBase */

.ModalErroValidateBase {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--Interup);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s ease-in-out;
}

.ModalErroValidateBase.show {
  opacity: 1;
  pointer-events: all;
}

.ModalErroValidateBase .ModalErroValidateBaseChild {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(35%, 35rem);
  transform: translate(-50%, -50%) scale(0.8);
  padding: 1rem 2rem;
  border-radius: 1rem;
  background: var(--BrancoCinza);
  transition: 0.4s ease-in-out;
}

.ModalErroValidateBase .ModalErroValidateBaseChild .SairContainer {
  display: flex;
  align-items: center;
  justify-content: end;
}

.ModalErroValidateBase .ModalErroValidateBaseChild .SairContainer i {
  position: absolute;
  right: 2rem;
  top: 1rem;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--LetraCinza-1);
}

.ModalErroValidateBase .ModalErroValidateBaseChild .bodyPlace {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  margin-top: 3rem;
  animation: growconst 0.8s ease-in-out alternate infinite;
}

@keyframes growconst {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}

.ModalErroValidateBase .ModalErroValidateBaseChild .bodyPlace i {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  background: var(--VermelhoEscuro);
  display: flex;
  align-items: center;
  justify-content: center;
  /* font-size: var(--size-1-8); */
  color: var(--BrancoClaro);
}

.ModalErroValidateBase.show .ModalErroValidateBaseChild {
  transform: translate(-50%, -50%) scale(1);
}

/* Codigo recuperar senha */

.ModalRecoverSenhaFade {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--fadeBack);
  transition: 0.2s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

.ModalRecoverSenhaFade.show {
  opacity: 1;
  pointer-events: all;
}

.ModalRecoverSenhaFade .ModalRecoverChild {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: var(--BrancoCinza);
  border-radius: 1rem;
  padding: 1rem 2rem;
  width: max(45%, 35rem);
  transition: 0.2s ease-in-out;
}

.ModalRecoverSenhaFade.show .ModalRecoverChild {
  transform: translate(-50%, -50%) scale(1);
}

.ModalRecoverSenhaFade .ModalRecoverChild .TitleIcon {
  flex-wrap: wrap;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
}

.ModalRecoverSenhaFade .ModalRecoverChild .TitleIcon h3 {
  font-size: var(--size-1-5);
  color: var(--LetraCinza-2);
}

.ModalRecoverSenhaFade .ModalRecoverChild .TitleIcon i {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 50%;
  background: var(--BrancoClaro);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  color: var(--LetraCinza);
}

.ModalRecoverSenhaFade .ModalRecoverChild .TitleIcon i:hover {
  transform: scale(1.05);
}

.ModalRecoverSenhaFade .ModalRecoverChild form {
  margin-top: 1rem;
  width: 100%;
}

.ModalRecoverSenhaFade .ModalRecoverChild form .InputDiv {
  width: 100%;
  position: relative;
  padding-bottom: 1rem;
}

.ModalRecoverSenhaFade .ModalRecoverChild form .InputDiv label {
  font-size: var(--size-1-4);
  color: var(--LetraCinza);
  display: inline-block;
  margin-left: 1rem;
  margin-bottom: 0.8rem;
}

.ModalRecoverSenhaFade .ModalRecoverChild form .InputDiv .InputIconContainer {
  height: 4rem;
  border-radius: 1rem;
  padding-left: 1rem;
  padding-right: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--BrancoClaro);
}

.ModalRecoverSenhaFade
  .ModalRecoverChild
  form
  .InputDiv
  .InputIconContainer
  input {
  flex-grow: 1;
  height: 100%;
  outline: none;
  border: 0;
  background: transparent;
}

.ModalRecoverSenhaFade
  .ModalRecoverChild
  form
  .InputDiv
  .InputIconContainer
  input::placeholder {
  color: var(--LetraCinza);
}

.ModalRecoverSenhaFade .ModalRecoverChild form .InputDiv .InputIconContainer i {
  color: var(--LetraCinza);
}

/* Modal resposta geral */

.FadeResponseGeral {
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: var(--fadeBack);
  transition: 0.2s ease-in-out;
  opacity: 0;
  pointer-events: none;
}

.FadeResponseGeral.show {
  opacity: 1;
  pointer-events: all;
}

.ModalResponseGeralChild {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: var(--BrancoCinza);
  border-radius: 1rem;
  padding: 1rem 2rem;
  width: max(45%, 35rem);
  transition: 0.2s ease-in-out;
}

.FadeResponseGeral.show .ModalResponseGeralChild {
  transform: translate(-50%, -50%) scale(1);
}

.ModalResponseGeralChild .SairModalGeral {
  display: flex;
  align-items: center;
  justify-content: end;
}

.ModalResponseGeralChild .SairModalGeral i {
  height: 3.5rem;
  width: 3.5rem;
  border-radius: 50%;
  background: var(--BrancoClaro);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.3s ease-in-out;
  cursor: pointer;
  color: var(--LetraCinza);
  border: solid 0.1rem transparent;
}

.ModalResponseGeralChild .SairModalGeral i:hover {
  transform: scale(1.05);
  border-color: var(--VermelhoEscuro);
}

.ModalResponseGeralChild .Info-place {
  margin-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  gap: 1rem;
  padding-bottom: 1rem;
}

.ModalResponseGeralChild .Info-place i {
  height: 4rem;
  width: 4rem;
  border-radius: 50%;
  color: var(--BrancoClaro);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: growEase 0.7s ease-in-out alternate infinite;
}

.ModalResponseGeralChild .Info-place i.green {
  background: var(--VerdeEscuro);
}

.ModalResponseGeralChild .Info-place i.red {
  background: var(--VermelhoEscuro);
}

.ModalResponseGeralChild .Info-place span {
  font-size: var(--size-1-5);
}

@media (max-width: 366px) {
  .ModalResponseGeralChild {
    width: 90%;
  }

  .ModalRecoverChild {
    width: 90% !important;
  }
}

@keyframes growEase {
  from {
    transform: scale(0.8);
  }

  to {
    transform: scale(1);
  }
}