/*++++++++++++++++++++++++++++++++++++++++++++++ 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;
}

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

@media (min-width: 62em) {
  .brandForm-BusinessInfoBox {
    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 ++++++++++++++++++++++++++++++++++++++++++++++*/
.brandForm_BrandInfoBox {
  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:
    "arPrimaryFont"
    "arSecondaryFont"
    "arLogoURL"
    "arColors"
    "arImageAPI"
    "arModel"
    "arHashTags";
}

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

.arPrimaryFont {
  grid-area: arPrimaryFont;
}

.arSecondaryFont {
  grid-area: arSecondaryFont;
}

.arLogoURL {
  grid-area: arLogoURL;
}

.arLogoURL:hover p,
.arLogoURL:hover i,
.arLogoURL:hover span,
.arLogoURL:hover input::placeholder {
  color: var(--formInputLabelColor);
}

.arLogoURL input:hover,
.arLogoURL select:hover,
.arLogoURL textarea:hover {
  color: var(--formInputLabelColor);
}

.logoInputWrapper {
  position: relative;
  text-align: center;
}

.logo_upload_icon {
  position: absolute;
  width: 25px;
  cursor: pointer;
  margin-left: 3px;
  color: var(--formInputLabelColor);
}

.logo_upload_icon:hover span {
  color: var(--formHoverColor);
}

.arColors {
  grid-area: arColors;
}

.arHashTags {
  grid-area: arHashTags;
}

.arImageAPI {
  grid-area: arImageAPI;
}

.arImageAPI:hover p,
.arImageAPI:hover i,
.arImageAPI:hover span,
.arImageAPI:hover input::placeholder {
  color: var(--formInputLabelColor);
}

.arImageAPI input:hover,
.arImageAPI select:hover,
.arImageAPI textarea:hover {
  color: var(--formInputLabelColor);
}

.center {
  text-align: center;
}

.arModel {
  grid-area: arModel;
}
.modelImageContainer {
  display: flex;
  justify-content: center;
}

.modelImage {
  height: 100px;
  width: auto;
  margin-top: 1rem;
}

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

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

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

.radioButton {
  width: 20px !important;
}

.radioButtonLabel {
  width: fit-content;
  margin-right: 1rem;
}

.noRightMargin {
  margin-right: 0;
}

.imageAPItypes {
  text-align: center;
}

.rpModalAlert {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background: var(--formBkgColorGradient);
  color: white;
  margin: 15% auto;
  padding: 20px;
  /* border: 1px solid #888; */
  border-radius: 10px;
  width: 80%;
}

.modal-content p {
  text-align: center;
}

.smallText {
  font-size: 0.9rem;
}

@media (min-width: 62em) {
  .modal-content {
    width: 600px;
  }
}

.MJWarningQuestionMark {
  position: absolute;
  width: 30px;
  margin-left: 3px;
  margin-top: 3px;
  color: var(--formInputLabelColor);
  cursor: pointer;
}

.MJWarningQuestionMark:hover span {
  color: var(--formHoverColor);
}

.increase-left-margin {
  margin-left: 150px;
}
@media (min-width: 62em) {
  .increase-left-margin {
    margin-left: 40px;
  }
}