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

.bType {
  grid-area: bType;
}

.bName {
  grid-area: bName;
}

.bLocation {
  grid-area: bLocation;
}

.wTone {
  grid-area: wTone;
}

.wStyle {
  grid-area: wStyle;
}

.bAddKeywords {
  grid-area: bAddKeywords;
}

.formNormalInputBox {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-areas:
    "bPostType"
    "bType"
    "bName"
    "bLocation"
    "wTone"
    "wStyle"
    "bAddKeywords";
}

@media (min-width: 62em) {
  .formNormalInputBox {
    display: grid;
    align-items: baseline;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    grid-template-areas:
      "bPostType  bPostType  bPostType"
      "bType  bName  bLocation"
      "wTone wStyle bAddKeywords";
  }
}

.businessTypeOtherInput {
  margin-top: 0.5rem;
}

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

.formAdvancedBox {
  display: none;
  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:
    "arPrimaryFont"
    "arSecondaryFont"
    "arLogoURL"
    "arPostQty"
    "arColors"
    "arEndpoint"
    "arPromptDisplay";
}

@media (min-width: 62em) {
  .formAdvancedBox {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    align-items: baseline;
    gap: 1rem;
    grid-template-areas:
      "arPrimaryFont     arSecondaryFont      arLogoURL"
      "arPostQty         arColors            arEndpoint"
      "arPromptDisplay arPromptDisplay arPromptDisplay";
  }
}

.arPrimaryFont {
  grid-area: arPrimaryFont;
}

.arSecondaryFont {
  grid-area: arSecondaryFont;
}

.arLogoURL {
  grid-area: arLogoURL;
}

.arPostQty {
  grid-area: arPostQty;
}

.arPostQty select {
  text-align: center;
}

.arColors {
  grid-area: arColors;
}

.arEndpoint {
  grid-area: arEndpoint;
  visibility: hidden;
}

.arPromptDisplay {
  display: none;
  grid-area: arPromptDisplay;
}

.arPromptDisplay .taPrompt {
  border-radius: 0.5rem;
  width: 300px;
}

@media (min-width: 62em) {
  .arPromptDisplay .taPrompt {
    width: 1200px;
  }
}