body {
  padding: 1em;
}

#loginContainer {
  width: 25em;
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#loginContainer > h3 {
  text-align: center;
  margin: 0.5em 0;
  color: #6d6cae;
}

#loginContainer > p {
  text-align: center;
  margin: 1em 0;
}

#loginBtn {
  width: 12em;
  background: #6d6cae;
  color: #fff;
  /* margin: 0.8em auto; */
}

#createAccountContainer {
  display: flex;
  gap: 0.4em;
  align-items: center;
  justify-content: center;
}

#createAccountContainer #registerAccountBtn {
  color: #6d6cae;
  cursor: pointer;
}

#registrationContainer {
  width: 25em;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  /* height: 60vh; */
}

#registrationContainer > h3 {
  text-align: center;
  margin: 0.8en 0;
}

.wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

#loginDetailsContainer input {
  padding-left: 2.5em;
}

.left_side_inputIconContainer {
  /* border: 1px solid #6d6cae; */
  position: absolute;
  right: 5px;
  top: 80%;
  transform: translateY(-50%);
  font-size: 1.5em;
  cursor: pointer;
}

#loginDetailsContainer .left_side_IconContainer {
  position: absolute;
  right: 5px;
  top: 80%;
  transform: translateY(-50%);
  font-size: 1.5em;
  cursor: pointer;
}

#loginDetailsContainer .right_side_IconContainer {
  position: absolute;
  left: 5px;
  top: 80%;
  transform: translateY(-50%);
  font-size: 1.5em;
  cursor: pointer;
}

.left_side_IconContainer svg,
.right_side_IconContainer svg,
.left_side_inputIconContainer {
  color: #949393;
}

/* #registrationDetails {
  max-height: 90vh;
  overflow: auto;
} */

#loginDetailsContainer input:focus,
#registrationDetails input:focus,
#registrationDetails select:focus,
.focussedOn {
  border: 1px solid #6d6cae;
}

#loginDetailsContainer input:focus ~ .left_side_IconContainer svg,
#loginDetailsContainer input:focus ~ .right_side_IconContainer svg,
#registrationDetails input:focus ~ .left_side_inputIconContainer svg {
  color: #6d6cae;
}

.focussedOn ~ .left_side_IconContainer svg,
.focussedOn ~ .right_side_IconContainer svg,
.focussedOn ~ .left_side_inputIconContainer svg {
  color: #6d6cae;
}

#codeInputContainer {
  display: none;
}

#requestOtpBtn {
  background: #0a0854;
  color: #fff;
  width: 10em;
}

#buttons {
  display: flex;
  gap: 0.4em;
  justify-content: center;
}

#loginBtn,
#otherLoginDetails {
  display: none;
}