@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Comforter+Brush&family=Fruktur&family=Inter:wght@200;300;400&family=Roboto&family=Roboto+Mono&family=Sarala&family=Syne:wght@800&family=Urbanist:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
   padding: 0;
   margin: 0;
   border: 0;
   box-sizing: border-box
}

.principal {
   background-color: white;
   width: 100%;
   height: auto;
   background-image: linear-gradient(to left, #3B3BB8 70%, #3B3BB8 0, #f0f5ff 30%);
}

.icone-menu img {
   height: 10rem;
   padding: 3.3rem;
   margin-left: 15rem;

}

.menu-header {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   align-items: center;
   width: 100%;
   height: 4.5rem;
   padding: 2rem;
   gap: 2rem;
}

.menu-bar {
   justify-content: space-between;
   display: flex;
   flex-direction: row;
   gap: 7rem;
}

.menu-bar-item {
   text-decoration: none;
   color: #C7C7F5;
   font-family: "Inter", sans-serif;
   font-weight: 500;
   transition: 0.2s;

}

.menu-bar-item:hover,
.menu-bar-item:focus {
   color: #E7E7F5;
}


.log {
   width: 128px;
   height: 29px;
   transition: 0.25s;
   background: #FFFFFF;
   border: 0;
   border-radius: 6px;
   margin-right: 20rem;

}

.log:hover,
.log:focus {
   background-color: #3B3BB8;
   border: 2px solid #FFF;
}

.log:hover a,
.log:focus a {
   color: #FFF;
}

.log a {
   font-family: "Inter";
   font-style: normal;
   font-weight: 700;
   font-size: 16px;
   line-height: 19px;
   color: #3B3BB8;
   text-decoration: none;
}

.conteudo-principal {
   display: flex;
   flex-direction: row;
   width: 100%;

}

.first-section-login {
   display: flex;
   flex-direction: column;
   justify-content: center;
   color: #fff;
   order: 2;
   margin-right: 11rem;
}

.alinhando {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 2rem;
   margin-bottom: 10rem;
}

.texto-informativo {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 2rem;
   margin-bottom: 2rem;
}

.texto-informativo h1 {
   width: 100%;
   text-align: center;
   color: #fff;
   font-family: "Urbanist", sans-serif;
   font-size: 48px;
   font-weight: 800;
   margin-top: 100px;
   z-index: 2;

}

.texto-informativo p {
   font-family: 'Inter', sans-serif;
   text-align: center;
   font-size: 22px;
   font-weight: 500;
   width: 40rem;
   padding: 2rem 0;

}

.second-section-login {

   display: flex;
   flex-direction: column;
   width: 50%;
   justify-content: center;
   align-items: center;
   padding: 7rem;
}

.form-login {
   width: 30rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: #fff;
   padding: 3rem;
   border-radius: 1rem;
   border: 0.1px solid rgba(0, 0, 0, .2);
   box-shadow: 5px 3px 3px 5px rgba(0, 0, 0, .2);
   order: 1;
   margin: 5rem 10rem;
}

.form-header-login {
   margin-bottom: 2rem;
   color: #000;
   font-family: 'Urbanist', sans-serif;
   font-size: 48px;
   font-weight: 800;
   text-align: center;
   letter-spacing: 0.1rem;
   padding: 0.2rem 0;

}

.form-header-login h1::after {
   content: '';
   display: block;
   width: 12rem;
   height: 0.3rem;
   background-color: #3B3BB8;
   margin: 0 auto auto 6.5rem;
   position: absolute;
   border-radius: 10px;
}

.input-group-login {
   display: flex;
   flex-wrap: wrap;
   padding: 1rem 0;
   justify-content: center;
}

.input-box-login {
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
   margin-bottom: 1rem;
   width: 25rem;

}

.input-box-login input {
   height: 3.5rem;
   margin: 0.3rem 0;
   padding: 0.5rem 1rem;
   border: none;
   border-radius: 8px;
   box-shadow: 1px 1px 6px #0000001c;
}

.input-box-login input:hover {
   background-color: #eeeeee75;
}

.input-box-login label {
   font-family: 'Inter', sans-serif;
   font-size: 1rem;
   font-weight: 600;
   color: #000000c0;
}

.input-box-login input::placeholder {
   color: #000000be;

}

.lembretes {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   font-family: 'Inter', sans-serif;
   font-size: 1rem;
   font-weight: 100;
   gap: 9rem;
}

.lembretes a {
   text-decoration: none;
   font-size: bold 13px;
   color: #000;
}

.entrar button {
   width: 30rem;
   height: 3.5rem;
   border: 0;
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: 22px;
   background-color: #FFFFFF;
   margin-bottom: 5rem;
   border-radius: 5px;
   cursor: pointer;
   letter-spacing: 0.1rem;
   transition: 0.25s;

}

.entrar a {
   text-decoration: none;
   color: #3B3BB8;
   padding: 2rem;
}

.entrar:hover button,
.entrar:focus button {
   background-color: #3B3BB8;
   border: 2px solid #FFF;
}

.entrar:hover a,
.entrar:focus a {
   color: #FFF;
}

.entrar-login button {
   width: 100%;
   height: 3.5rem;
   font-family: 'Urbanist', sans-serif;
   font-weight: 800;
   font-size: 22px;
   color: #FFF;
   margin-top: 2rem;
   background-color: #3B3BB8;
   border: 0;
   border-radius: 5px;
   cursor: pointer;
   align-items: center;
   letter-spacing: 0.1rem;
   transition: 0.25s;

}

.entrar-login:hover button,
.entrar-login:focus {
   background-color: #FFF;
   border: 3px solid #3B3BB8;
   color: #3B3BB8;

}


/* ----------- Mensagem de erro ----------- */

/* .mensagem-erro {
   display: block;
   color: red;
   font-family: 'Inter', sans-serif;
   font-size: 0.8rem;
   font-weight: bold 100;
   margin-top: 0.5rem;
   padding-left: 0.5rem;
}

.erro input {
   border: 0.1rem solid red;

} */