/* screen - generator */

.generator {
  align-items: center;
  background-color: var(--ebony);
  display: flex;
  flex-direction: column;
  gap: 33px;
  height: 1921px;
  padding: 32px 0;
  width: 1440px;
}

.generator .flex-col {
  flex-direction: column;
  min-height: 216px;
  width: 1440px;
}

.generator .overlap-group {
  align-self: center;
  height: 45px;
  position: relative;
  width: 1280px;
}

.generator .div {
  border: 0px none;
  height: 28px;
  position: relative;
  width: 175.03px;
}

.generator .frame-5 {
  align-items: center;
  display: flex;
  height: 20px;
  justify-content: center;
  left: 0;
  position: absolute;
  top: 4px;
  width: 22px;
}

.generator .frame-6 {
  border: 0px none;
  height: 20px;
  position: relative;
  width: 22.5px;
}

.generator .vector-1 {
  height: 20px;
  left: 0;
  position: absolute;
  top: 0;
  width: 21px;
}

.generator .ulta-imagesnet {
  left: 30px;
  letter-spacing: 0;
  line-height: 28px;
  position: absolute;
  top: -2px;
  white-space: nowrap;
  width: 143px;
}

.generator .frame-4-3 {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 24px;
}

.generator .frame-3-1 {
  align-items: center;
  border: none;
  border-radius: 1000px;
  display: flex;
  justify-content: space-between;
  opacity: 0;
  padding: 12px 24px;
  position: relative;
  width: 194px;
}

.generator .frame-8 {
  align-items: center;
  display: flex;
  height: 14px;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 14px;
}

.generator .frame-9 {
  background-image: url(../img/vector-134@2x.png);
  background-size: 100% 100%;
  border: 0px none;
  height: 14px;
  margin-left: -7841.00px;
  margin-top: -47.50px;
  position: relative;
  width: 14px;
}

.generator .vector-2 {
  height: 14px;
  margin-left: -15490px;
  margin-top: -28.50px;
  position: relative;
  width: 14px;
}

.generator .line-1 {
  height: 1px;
  margin-top: 31px;
  object-fit: cover;
  width: 1440px;
}

.generator .title {
  letter-spacing: 0;
  line-height: normal;
  margin-left: 80px;
  margin-top: 55px;
  min-height: 52px;
}

.generator .create-any-content-that-you-imagine {
  letter-spacing: 0;
  line-height: 24px;
  margin-left: 80px;
  margin-top: 8px;
  opacity: 0.8;
  white-space: nowrap;
}

.generator .flex-row {
  gap: 24px;
  height: 1219px;
  min-width: 1280px;
}

.generator .flex-col-1 {
  align-items: flex-start;
  width: 845px;
}

.generator .overlap-group2 {
  border-radius: 16px 16px 0px 0px;
  height: 77px;
  position: relative;
  width: 845px;
}

.generator .frame-79 {
  align-items: flex-start;
  background-color: var(--port-gore);
  border-radius: 16px 16px 0px 0px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  left: 0;
  padding: 16px;
  position: absolute;
  top: 0;
  width: 845px;
}

.generator .frame-75 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 32px;
  position: relative;
  width: 100%;
}

.generator .images {
  line-height: 20px;
  white-space: nowrap;
}

.generator .frame-75-item {
  letter-spacing: 0;
  line-height: 20px;
  opacity: 0.5;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.generator .frame-2 {
  align-items: center;
  background-color: var(--white);
  border-radius: 1000px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 8px;
  justify-content: center;
  opacity: 0;
  padding: 12px 24px;
  position: relative;
}

.generator .frame-10 {
  background-image: url(../img/vector-134@2x.png);
  background-size: 100% 100%;
  border: 0px none;
  height: 17.81px;
  margin-left: -7129.00px;
  margin-top: -308.81px;
  position: relative;
  width: 17.81px;
}

.generator .line-5 {
  height: 2px;
  left: 16px;
  position: absolute;
  top: 75px;
  width: 70px;
}

.generator .frame-44 {
  align-items: flex-start;
  background-color: var(--port-gore);
  border-radius: 0px 0px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  justify-content: center;
  padding: 16px;
  position: relative;
  width: 845px;
}

.generator .frame-71 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  position: relative;
  width: 100%;
}

.generator .prompt {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
}

.generator .frame-45-1 {
  align-self: stretch;
  background-color: var(--white-2);
  border-radius: 8px;
  gap: 8px;
  height: 120px;
  padding: 12px;
  width: 100%;
}

.generator .describe-what-you-want-to-create {
  flex: 1;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
  position: relative;
}

.generator .frame-7 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  gap: 24px;
  position: relative;
  width: 100%;
}

.generator .frame {
  align-items: flex-start;
  display: flex;
  flex: 1;
  flex-direction: column;
  flex-grow: 1;
  gap: 8px;
  position: relative;
}

.generator .model {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
}

.generator .frame-45 {
  align-items: center;
  align-self: stretch;
  background-color: var(--white-2);
  border-radius: 8px;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  padding: 12px;
  position: relative;
  width: 100%;
}

.generator .flux1-dev {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .vector {
  height: 7px;
  position: relative;
  width: 12px;
}

.generator .aspect-ratio {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
}

.generator .x11-square {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .place {
  align-self: stretch;
}

.generator .place-1 {
  opacity: 0.8;
  width: fit-content;
}

.generator .style {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
}

.generator .realistic {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .count {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
}

.generator .address {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .negative-prompt-optional {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
}

.generator .what-to-avoid-in-the-image {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .vector-3 {
  height: 7px;
  margin-left: -12272px;
  margin-top: -772.50px;
  position: relative;
  width: 12px;
}

.generator .frame-1 {
  align-items: center;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  justify-content: space-between;
  position: relative;
  width: 100%;
}

.generator .estimated-cost-5-credits {
  letter-spacing: 0;
  line-height: 24px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.generator .span1 {
  color: var(--white);
  font-family: var(--font-family-lufga-semibold);
  font-size: var(--font-size-m);
  font-weight: 600;
}

.generator .frame-2-1 {
  align-items: center;
  background: linear-gradient(90deg, rgba(196, 74, 244, 1) 0%, rgba(111, 74, 244, 1) 100%);
  border-radius: 1000px;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 12px;
  justify-content: center;
  padding: 12px 24px;
  position: relative;
}

.generator .vector-4 {
  height: 20px;
  position: relative;
  width: 21px;
}

.generator .generate {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .recent-generations {
  letter-spacing: 0;
  line-height: 20px;
  margin-top: 567px;
  white-space: nowrap;
}

.generator .flex-col-2 {
  align-items: flex-end;
  width: 411px;
}

.generator .frame-container {
  border-radius: 16px;
  height: 505px;
  position: relative;
  width: 411px;
}

.generator .frame-3 {
  align-items: flex-start;
  background-color: var(--port-gore);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  left: 0;
  padding: 16px;
  position: absolute;
  top: 0;
  width: 411px;
}

.generator .quick-templates {
  letter-spacing: 0;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.generator .frame-4 {
  background-image: url(../img/vector-134@2x.png);
  background-size: 100% 100%;
  border: 0px none;
  height: 17.81px;
  margin-left: -7931.00px;
  margin-top: -308.81px;
  position: relative;
  width: 17.81px;
}

.generator .frame-62 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 16px;
  position: relative;
  width: 100%;
}

.generator .frame-4-1 {
  align-self: stretch;
  background: linear-gradient(0deg, rgba(47, 33, 76, 1) 0%, rgba(47, 33, 76, 1) 100%);
  border: 1px solid;
  border-color: var(--mulled-wine);
  border-radius: 16px;
  display: flex;
  gap: 16px;
  height: 91px;
  padding: 16px;
  width: 100%;
}

.generator .product-photography {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .professional-product-shots {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .social-media-post {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .instagram-ready-content {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .digital-art {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .creative-illustrations {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .logo-design {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .brand-identity-assets {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .quick-templates-1 {
  letter-spacing: 0;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.generator .product-photography-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .professional-product-shots-1 {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .social-media-post-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .instagram-ready-content-1 {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .digital-art-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .creative-illustrations-1 {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .logo-design-1 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .brand-identity-assets-1 {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .frame-78 {
  align-items: flex-start;
  background-color: var(--port-gore);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
  padding: 16px;
  position: relative;
  width: 411px;
}

.generator .generation-queue {
  letter-spacing: 0;
  line-height: 20px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.generator .frame-11 {
  background-image: url(../img/vector-134@2x.png);
  background-size: 100% 100%;
  border: 0px none;
  height: 17.81px;
  margin-left: -7931.00px;
  margin-top: -837.81px;
  position: relative;
  width: 17.81px;
}

.generator .frame-4-2 {
  align-self: stretch;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.08) 100%);
  border-radius: 16px;
  display: flex;
  gap: 16px;
  height: 91px;
  padding: 16px;
  width: 100%;
}

.generator .sunset-landscape {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .processing {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .abstract-art-piece {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .completed {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .frame-45-2 {
  background-color: var(--port-gore);
  border-radius: 16px;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  margin-top: 24px;
  padding: 16px;
  width: 411px;
}

.generator .usage-statistics {
  letter-spacing: 0;
  line-height: 20px;
  margin-top: -2.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.generator .images-generated {
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
}

.generator .videos-created {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .audio-files {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .line-4 {
  align-self: stretch;
  height: 1px;
  object-fit: cover;
  position: relative;
  width: 100%;
}

.generator .credits-used {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.generator .text-10 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .view-all {
  letter-spacing: 0;
  line-height: 20px;
  margin-top: 111px;
  min-width: 95px;
  text-decoration: underline;
  white-space: nowrap;
}

.generator .flex-row-1 {
  align-items: flex-start;
  display: flex;
  gap: 24px;
  min-width: 1280px;
}

.generator .rectangle {
  height: 302px;
  object-fit: cover;
  width: 302px;
}

.generator .edit-profile-4 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .flex-col-3 {
  display: flex;
  flex-direction: column;
  min-height: 1219px;
}

.generator .frame-4-4 {
  align-items: center;
  position: relative;
}

.generator .frame-45-3 {
  align-items: flex-start;
  display: flex;
  position: relative;
}

.generator .images-1 {
  letter-spacing: 0;
  position: relative;
  width: fit-content;
}

.generator .navbar-link {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
  z-index:1;
}

.generator .number-3 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.generator .place-2 {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
}