* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  /* text-decoration: none; */
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  transition: all 0.4s ease-in-out;
}

/* Variavel com suas cores para cada modo */
body {
  --fundo: #96c3ec;
  --texto: #111111;
  --fundo-box: #f0f0f0;
  --text-submit: #ffffff;
  --submit: #005da6;
  --submit-hover: #204b73;
  --sombra: #aaaaaa;
  --link: #204b73;
  /* --fundo-logo: #ffffff; */
  /* --fundo-azul: #96c3ec; */
  /* --login-adm: #204b73; */
}

body.dark {
  --fundo: #1a1a1a;
  --texto: #b9b9b9;
  --fundo-box: #2e2e2e;
  --text-submit: #b9b9b9;
  --submit: #1a1a1a;
  --submit-hover: #004585;
  --sombra: #424242;
  --link: #7598b9;
  /* --fundo: #202020; */
  /* --fundo-logo: #b9b9b9; */
  /* --fundo-azul: #204b73; */
  /* --login-adm: #7598b9; */
  /* --fundo: #2e2e2e; */
  /* --fundo-box: #2e2e2e; */
  /* --submit: #202020; */
  /* --submit: #242424; */
  /* --submit: #2e2e2e; */
  /* --submit: #4d4d4d; */
  /* --sombra: #4d4d4d; */
}

body {
  background-color: var(--fundo);
}

.mensagem_erro {
  color: #ff0d0d;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
}

.mensagem_sucesso {
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: #28a745;
}

.caixa {
  position: relative;
  max-width: 80%;
  background-color: var(--fundo-box);
  /* background: linear-gradient(145deg, #f0f0f0, #e6e6e6); */
  box-shadow: 10px 10px 10px var(--sombra);
  padding: 2rem;
  border-radius: 5px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--texto);
}

a {
  color: var(--link);
}

h1,
p {
  margin: 1rem 0rem;
  cursor: default;
}

input[type="email"] {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--texto);
  padding: 0.5rem;
  background: none;
  color: var(--texto);
}

input[type="email"]:focus {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--texto);
  padding: 0.5rem;
  outline: 0;
}
input[type="submit"] {
  position: absolute;
  bottom: 0;
  right: 1.87em;
  bottom: 1em;
  background-color: var(--submit);
  /* color: var(--fundo-logo); */
  padding: 0.5rem;
  border: none;
  scale: 1.3;
  padding: 5px 20px;
  cursor: pointer;
  border-radius: 2px;
  color: var(--text-submit);
}
input[type="submit"]:hover {
  background-color: var(--submit-hover);
}

/* Estilo para a div de animação de carregamento */

#loader {
  position: absolute;
  z-index: 2;
  top: 42%;
  left: 46%;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: radial-gradient(farthest-side, #005da6 94%, #0000) top/16px 16px
      no-repeat,
    conic-gradient(#0000 30%, #005da6);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 16px), #000 0);
  animation: s3 0.5s infinite linear;
  display: none;
}

@keyframes s3 {
  100% {
    transform: rotate(1turn);
  }
}

#fundo {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: var(--fundo-box);
  /* opacity: 80%; */
  display: none;
}

@media (max-width: 720px) {
  .caixa {
    max-width: 98%;
    width: 100%;
  }
  #loader {
    position: absolute;
    z-index: 2;
    top: 45%;
    left: 40%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(farthest-side, #005da6 94%, #0000) top/16px 16px
        no-repeat,
      conic-gradient(#0000 30%, #005da6);
    -webkit-mask: radial-gradient(
      farthest-side,
      #0000 calc(100% - 16px),
      #000 0
    );
    animation: s3 0.5s infinite linear;
  }
}