/* screen - dashboard */

.dashboard {
  align-items: center;
  background-color: var(--ebony);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 100vh;
  height: auto;
  padding: 32px 0 80px;
  width: 100%;
  max-width: 1440px;
  box-sizing: border-box;
}

.dashboard .flex-col {
  flex-direction: column;
  min-height: 364px;
  width: 100%;
  max-width: 1440px;
}

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

.dashboard .line-1 {
  height: 1px;
  margin-top: 31px;
  object-fit: cover;
  width: 100%;
  max-width: 1440px;
}

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

.dashboard .create-amazing-ai-co {
  letter-spacing: 0;
  line-height: 24px;
  margin-left: 80px;
  margin-top: 8px;
  min-width: 367px;
  opacity: 0.8;
  text-align: center;
  white-space: nowrap;
}

.dashboard .frame-container {
  align-items: flex-start;
  align-self: center;
  display: flex;
  gap: 24px;
  height: 115px;
  margin-top: 33px;
  min-width: 1280px;
}

.dashboard .frame-4 {
  align-items: center;
  background-color: var(--port-gore);
  border-radius: 16px;
  display: flex;
  gap: 16px;
  padding: 16px;
  position: relative;
  width: 302px;
}

.dashboard .frame-24 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 8px;
  position: relative;
}

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

.dashboard .price {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
}

.dashboard .never-expires {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.5;
  position: relative;
}

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

.dashboard .x3-this-week {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.5;
  position: relative;
}

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

.dashboard .x12-today {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.5;
  position: relative;
}

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

.dashboard .x5-scheduled {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.5;
  position: relative;
}

.dashboard .flex-row {
  gap: 24px;
  height: 647px;
  min-width: 1280px;
}

.dashboard .frame-container-1 {
  min-height: 647px;
  width: 845px;
}

.dashboard .frame-4-1 {
  align-items: flex-start;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  position: relative;
  width: 845px;
}

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

.dashboard .frame-42-2 {
  align-items: center;
  background: linear-gradient(90deg, rgba(196, 74, 244, 1) 0%, rgba(111, 74, 244, 1) 100%);
  border-radius: 16px;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 16px;
  height: 91px;
  padding: 16px;
  position: relative;
}

.dashboard .frame-41 {
  align-items: center;
  background-color: var(--white);
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 59px;
  justify-content: center;
  position: relative;
  width: 59px;
}

.dashboard .vector {
  height: 24px;
  position: relative;
  width: 17px;
}

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

.dashboard .start-from-scratch {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
}

.dashboard .frame-4-2::before {
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  background: linear-gradient(90deg, rgba(196, 74, 244, 1) 0%, rgba(111, 74, 244, 1) 100%);
  border-radius: 16px;
  content: '';
  inset: 0;
  mask-composite: exclude;
  padding: 1px;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.dashboard .frame-4-2 {
  align-items: center;
  background: linear-gradient(0deg, rgba(16, 8, 33, 1) 0%, rgba(16, 8, 33, 1) 100%);
  border: none;
  border-radius: 16px;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 16px;
  height: 91px;
  padding: 16px;
  position: relative;
}

.dashboard .frame-42-3 {
  height: 59px;
  position: relative;
  width: 59px;
}

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

.dashboard .popular-workflows {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
}

.dashboard .frame-42 {
  align-items: center;
  background-color: var(--white-2);
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 59px;
  justify-content: center;
  position: relative;
  width: 59px;
}

.dashboard .vector-1 {
  height: 20px;
  position: relative;
  width: 22px;
}

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

.dashboard .quick-ai-image {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
}

.dashboard .i {
  border: 0px none;
  height: 20px;
  position: relative;
  width: 22.5px;
}

.dashboard .svg {
  align-items: center;
  display: flex;
  height: 20px;
  justify-content: center;
  position: relative;
  width: 22px;
}

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

.dashboard .vector-5 {
  height: 15px;
  left: 0;
  position: absolute;
  top: 2px;
  width: 22px;
}

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

.dashboard .text-to-video {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
}

.dashboard .frame-43 {
  align-items: center;
  background: linear-gradient(0deg, rgba(16, 8, 33, 1) 0%, rgba(16, 8, 33, 1) 100%);
  border: 1px solid;
  border-color: var(--mulled-wine);
  border-radius: 16px;
  display: flex;
  flex: 1;
  flex-grow: 1;
  gap: 16px;
  height: 91px;
  padding: 16px;
  position: relative;
}

.dashboard .vector-2 {
  height: 20px;
  position: relative;
  width: 20px;
}

.dashboard .frame-24-1 {
  align-items: center;
  display: flex;
  flex: 1;
  flex-grow: 1;
  justify-content: space-between;
  position: relative;
}

.dashboard .asmr-cooking-video {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.dashboard .modified-2-hours-ago {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.dashboard .podcast-highlights {
  width: 180px;
}

.dashboard .frame-container-2 {
  min-height: 536px;
  width: 411px;
}

.dashboard .frame-4-3 {
  align-items: flex-start;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  justify-content: center;
  position: relative;
  width: 411px;
}

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

.dashboard .frame-61 {
  align-items: flex-start;
  align-self: stretch;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
  width: 100%;
}

.dashboard .frame-43-1 {
  align-items: center;
  align-self: stretch;
  background: linear-gradient(0deg, rgba(16, 8, 33, 1) 0%, rgba(16, 8, 33, 1) 100%);
  border: 1px solid;
  border-color: var(--mulled-wine);
  border-radius: 16px 16px 0px 0px;
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  padding: 16px;
  position: relative;
  width: 100%;
}

.dashboard .frame-42-1 {
  align-items: center;
  border-radius: 100px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 32px;
  justify-content: center;
  position: relative;
  width: 32px;
}

.dashboard .vector-6 {
  height: 20px;
  position: relative;
  width: 17px;
}

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

.dashboard .x12k-uses {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.dashboard .frame-4-4 {
  align-items: center;
  align-self: stretch;
  background: linear-gradient(0deg, rgba(16, 8, 33, 1) 0%, rgba(16, 8, 33, 1) 100%);
  border: 1px solid;
  border-color: var(--mulled-wine);
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  margin-top: -1px;
  padding: 16px;
  position: relative;
  width: 100%;
}

.dashboard .podcast-clips {
  width: fit-content;
}

.dashboard .frame-46 {
  align-items: center;
  align-self: stretch;
  background: linear-gradient(0deg, rgba(16, 8, 33, 1) 0%, rgba(16, 8, 33, 1) 100%);
  border: 1px solid;
  border-color: var(--mulled-wine);
  border-radius: 0px 0px 16px 16px;
  display: flex;
  flex: 0 0 auto;
  gap: 16px;
  margin-top: -1px;
  padding: 16px;
  position: relative;
  width: 100%;
}

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

.dashboard .video-generated-successfully {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

.dashboard .posted-to-instagram {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
  width: fit-content;
}

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

.dashboard .address-6 {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

.dashboard .frame-container-3 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.dashboard .modified-2-hours-ago-3 {
  letter-spacing: 0;
  line-height: normal;
  opacity: 0.8;
  position: relative;
  width: fit-content;
}

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

.dashboard .number-3 {
  align-self: stretch;
  letter-spacing: 0;
  line-height: normal;
  position: relative;
}

.dashboard .podcast {
  letter-spacing: 0;
  line-height: normal;
  margin-top: -1.00px;
  position: relative;
}

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