:root {
  --primary-color: #339DFF;
  --secondary-color: #DEE700;
  --accent-color: #3572EF;
  --background-color: #F0F0F0;
  --text-color-primary: #3E3E3E;
  --text-color-secondary: #777777;
}

.login{
  width: 100vw;
  height: 100vh;
  background-color: #F0F0F0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box{
  width: 1000px;
  height: 600px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0px 5px 10px rgb(195, 195, 195);
  display: flex;
}

.side-content, .side-login{
  width: 50%;
}

.side-content{
  background-color: #F0F0F0;
}

.side-login{
  padding: 2rem;
}

.logo-box{
  display: flex;
  justify-content: end;
  gap: 10px;
  margin-bottom: 20px;
}

.logo{
  width: 40px;
}

.logo img{
  width: 100%;
  object-fit: contain;
}

.header-login{
  margin-bottom: 30px;
}

.header-login h1{
  font-family: "Poppins", sans-serif;
  font-size: 35px;
  font-weight: 700;
  color: var(--accent-color);
}

.header-login p{
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-color-secondary);
}

.input-login{
  margin-bottom: 10px;
}

.input-login input{
  border-color: var(--text-color-primary);
}

.forget-password{
  display: flex;
  justify-content: end;
  margin-bottom: 20px;
}

.forget-password a{
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  text-decoration: none;
  color: var(--accent-color);
}

.button-login{
  background-color: var(--accent-color);
  width: 100%;
  border: none;
  padding: 8px;
  color: white;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  border-radius: 5px;
}

.error-login{
  background-color: rgba(241, 46, 46, 0.244);
  color: rgb(211, 14, 14);
  text-align: center;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px;
}