@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');


.mainRow {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: auto;
  height: 100vh;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.loginForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: stretch;
  gap: 20px;
  width: 400px;
}

#email {
  display: flex;
  padding: 13px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  border-radius: 6px;
border: 1px solid#D2D3E0;
background:#FFF;
}


form button{

    display: flex;
padding: 13px;
justify-content: center;
align-items: center;
border-radius: 4px;
background:#000 ;
border: 1px solid #000 ;
color: white;
font-family: "Inter", sans-serif;
font-size: 16px;
cursor: pointer;


}

.statusMessage{

    display: flex;
    font-family: "Inter", sans-serif;
    font-size: 16px;
    color: rgb(179, 1, 1);
}


.formTitle{
    
    display: flex;
    flex-direction: column;
    height: 100px;
    


}

.formTitleInner{

    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: "Inter", sans-serif;
     font-size: 48px;
     font-weight: bold;
     width: 400px;
     height: 50px;
     margin-top: 5px;
}

.innerTitle{


    font-family: "Inter", sans-serif;
    font-size: 18px;
    color: #7a7a7a;

}


.error{

    color: red;
}

#otp-fields{

  display: flex ;
  flex-direction: row;
  width: 400px;
  justify-content: space-between;
}

#otp1 , #otp2 , #otp3 , #otp4 , #otp5 , #otp6{

  width: 40px;
  height: 45px;
  border-radius: 6px;
border: 1px solid #D2D3E0;
background: #FFF;
text-align: center;
}

.success{

  font-family: "Inter", sans-serif;
    font-size: 16px;
}

.error{

  font-family: "Inter", sans-serif;
  font-size: 16px;
}