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

.optionalDetailsTitle {
  margin: 0 !important;
  grid-area: optionalDetailsTitle;
}

.wTone {
  grid-area: wTone;
}

.wStyle {
  grid-area: wStyle;
}

.bAddKeywords {
  grid-area: bAddKeywords;
}

.wAudience {
  grid-area: wAudience;
}

.wTitleIdea {
  grid-area: wTitleIdea;
}

.bPostQty {
  grid-area: bPostQty;
}

.bPostImageModel {
  grid-area: bPostImageModel;
}

.bPostQty select {
  text-align: center;
  width: 75px !important;
}

.formHome-InputBox {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-areas:
    "bPostType"
    "bPostQty"
    "bPostImageModel";
}

@media (min-width: 62em) {
  .formHome-InputBox {
    display: grid;
    align-items: center;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    grid-template-areas: "bPostType  bPostQty bPostImageModel";
    /* border: 1px solid lightgreen; */
  }
}

.optionalDetailsRow {
  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:
    "optionalDetailsTitle"
    "wTone"
    "wStyle"
    "bAddKeywords"
    "wAudience"
    "wTitleIdea";
}

@media (min-width: 62em) {
  .optionalDetailsRow {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: baseline;
    gap: 1rem;
    grid-template-areas:
      "optionalDetailsTitle optionalDetailsTitle optionalDetailsTitle optionalDetailsTitle"
      "wTone wStyle bAddKeywords wAudience"
      "wTitleIdea wTitleIdea wTitleIdea wTitleIdea";
  }
}

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

.formHome-MessageRow {
  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: "arPromptDisplay";
}

@media (min-width: 62em) {
  .formHome-MessageRow {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    align-items: baseline;
    gap: 1rem;
    grid-template-areas: "arPromptDisplay arPromptDisplay arPromptDisplay";
  }
}

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

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

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