/*++++++++++++++++++++++++++++++++++++++++++++++ Form Input Box and Items +++++++++++++++++++++++++++++++++++++++++++ */
.uUserName {
  grid-area: uUserName;
}

.uPassword1 {
  grid-area: uPassword1;
}

.uPassword2 {
  grid-area: uPassword2;
}

.uEmail {
  grid-area: uEmail;
}

.uPhone {
  grid-area: uPhone;
}

.uFname {
  grid-area: uFname;
}

.uLname {
  grid-area: uLname;
}

.accountForm_box1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-areas:
    "uUserName"
    "uPassword1"
    "uPassword2";
}

@media (min-width: 62em) {
  .accountForm_box1 {
    display: grid;
    align-items: baseline;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    grid-template-areas: "uUserName  uPassword1  uPassword2";
  }
}

.businessTypeOtherInput {
  margin-top: 0.5rem;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++ Advance Row Elements ++++++++++++++++++++++++++++++++++++++++++++++*/

.accountForm_box2 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  margin-top: 1rem;
  padding-top: 1rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  grid-template-areas:
    "uEmail"
    "uPhone"
    "uFname"
    "uLname";
}

@media (min-width: 62em) {
  .accountForm_box2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: baseline;
    gap: 1rem;
    grid-template-areas:
      "uEmail    uEmail   uEmail"
      "uPhone    uFname   uLname";
  }
}