#index {
    background-image: url(../media/bg.webp);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /*background: linear-gradient(135deg, rgba(233, 243, 250, 0.82) 0%, rgba(255, 255, 255, 0.92) 100%);*/
    backdrop-filter: blur(60px);
    width: 100%;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*padding-top: 16vh;*/
    justify-content: center;
}

#login-container {
    display: flex;
    align-items: center;
    /* background: #fff; */
    /* width: 400px; */
    /* padding: 40px; */
    background: #f9fafc;
    display: flex;
    gap: 12px;
    border-radius: var(--curva);
    box-shadow: 0px 0px 18px rgba(155, 155, 155, 0.15);
    align-items: center;
    transition: allow-discrete;
    flex-direction: row;
}

#caixa {
    display: flex;
    gap: 12px;
    border-radius: var(--curva);
    /*box-shadow: 0px 0px 18px rgba(155, 155, 155, 0.15);*/
    flex-direction: column;
    align-items: center;
    transition: allow-discrete;
    max-width: 400px;
    padding: 40px;
}

#animacao {
    width: 600px;
    margin: -40px 0px 40px 0px;
}

#login-titulo {
    font-size: 2.5em;
    font-weight: 600;
}

#logo {
    width: 220px;
    /*margin-bottom: 20px;*/
}

#login, #registro, #recuperacao {
    width: 100%;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

#login.ativo, #registro.ativo, #recuperacao.ativo {
    display: flex;
    animation: toggle 1s forwards;
}

@keyframes toggle {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#form-login, #form-registro, #form-recuperacao {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ver-senha {
    cursor: pointer;
}

.ver-senha:hover {
    opacity: 0.72;
}

#registrar {
    display: block;
    text-align: center;
    padding-top: 16px;
}

#recuperar {
    display: block;
    text-align: right;
    padding: 0px 12px 0px 0px;
}

#form-recuperacao {
    display: none;
}

#form-recuperacao.ativo {
    display: flex;
}

label:has(input) {
    background: #ffffff;
}

label[for='lembrar-login']{
    display: flex;
    flex-direction: row;
    background: unset !important;
    border-radius: unset !important;
    padding: 0px !important;
    transition: 0.5s !important;
    border: unset !important;
    width: unset !important;
    font-size: unset !important;
    font-weight: 400 !important;
    transition: 0.5s !important;
    border: unset !important;
    min-height: unset !important;
    align-items: center !important;
    gap: 2px !important;

}

#cadastro-por-convite {
    display: none;

    &.ativo {
        display: block;
    }
}

.lembrar-container {
    display: flex;
    justify-content: space-between;
}

/*.gradiente {
    background: linear-gradient(-45deg, 
        #00c12a,
      #ffffff,
      #1aafd0,
      #8cffe6,
      #3be8b0,
      #a4e3ff,
      #70f5d1,
      #ffffff,
      #1aafd0
    );
    background-size: 400% 400%;
    animation: gradient 40s ease infinite;
    backdrop-filter: blur(32px);
  }

  @keyframes gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }
*/

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