.generation-content {
	display: flex;
	justify-content: center;
	align-items: center;
}

.generation-container {
	width: 100%;
	max-width: 1176px;
	background: black;
	padding: 2.65% 0;
}

.create-your-ai-image {
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 40px;
	letter-spacing: 0.5px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.create-your-ai-image-span {
	color: #ffffff;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 40px;
	letter-spacing: 0.5px;
	font-weight: 500;
}

.create-your-ai-image-span2 {
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 192, 125, 1) 50%, rgba(255, 53, 137, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 40px;
	letter-spacing: 0.5px;
	font-weight: 500;
}

.line {
	flex: 1;
	height: 1px;
	background: #4d4d4d;
	margin-top: 11px;
}

.step {
	display: none;
}

.step.active {
	display: block;
}

.progress {
	display: flex;
	justify-content: space-between;
	margin: 5.88% 0;
}

.progress-step {
	width: 24px;
	height: 24px;
	background: #1e1e1e;
	border-style: solid;
	border-color: #4d4d4d;
	border-width: 1px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.progress-step.active {
	background: #ffffff;
}

.progress-step:not(.filled) .check {
	display: none;
}

.progress-step.filled {
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	border-radius: 50%;
	width: 24px;
	height: 24px;
}

.check {
	width: 14px;
	height: 14px;
}

.field {
	width: 100%;
	max-width: 1176px;
	background: #1e1e1e;
	;
	border-radius: 16px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.next-prev-buttons {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 2.5% 2.5% 0 2.5%;
}

.next,
.previous {
	border: none;
	cursor: pointer;
	border-radius: 15px;
	padding: 2.015% 0;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.next {
	width: 100%;
	max-width: 428px;
	justify-self: flex-end;
	color: #ffffff;
	background: linear-gradient(73.97deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	margin: 2.5% 1.5% 5% 0;
}

.previous {
	color: #000000;
	background: #EFEFEF;
	width: 100%;
	max-width: 220px;
	justify-self: flex-start;
	margin: 2.5% 0 5% 1.5%;
}

#create-ai-image-button .mobile-text,
.next-prev-buttons .mobile-prev-text {
	display: none;
}

.next:disabled {
	background: #ccc;
	cursor: not-allowed;
}

.choose-style {
	color: #ffffff;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 32px;
	letter-spacing: 0.5px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4% 0;
}

.gen-input {
	display: none;
}

.style-options {
	display: flex;
	margin: 0 4%;
	justify-content: space-between;
	align-items: center;
	gap: 4%;
}

.style-option {
	text-align: center;
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	position: relative;
	display: inline-block;
}

.style-option.active {
	position: relative;
}

.style-option.active::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	padding: 5px;
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	mask: linear-gradient(#000 0%, #000 100%) content-box, linear-gradient(#000 0%, #000 100%);
	mask-composite: exclude;
}

.style-option img {
	width: 100%;
	max-width: 516px;
	aspect-ratio: 516 / 690;
	overflow: hidden;
	object-fit: cover;
	height: auto;
	display: block;
}

.label {
	position: absolute;
	background: #4d4d4d;
	border-radius: 25px;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	padding: 2.39% 0;
	margin-bottom: 4.5%;
	width: 100%;
	max-width: 240px;
}

.label.active {
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
}

.option-label-name {
	color: #ffffff;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	letter-spacing: 0.5px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ethnicity-options,
.body-type-container,
.breast-size-container,
.butt-size-container,
.personality-container,
.relationship-options {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(2, 1fr);
	align-items: center;
	justify-items: center;
	margin: 0 4%;
}

.personality-container {
	gap: 20px;
}

.style-ethnicity,
.style-body-type,
.style-breast-size,
.style-butt-size,
.relationship-type {
	cursor: pointer;
}

.style-ethnicity,
.style-body-type,
.style-breast-size,
.style-butt-size,
.relationship-type,
.summary-age-type,
.wrapper-icon-type {
	text-align: center;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	position: relative;
	display: inline-block;
}

.style-ethnicity {
	max-width: 197px;
}

.sm-size-label {
	font-size: 16px;
}

.style-ethnicity .label,
.style-hair .label,
.style-body-type .label,
.style-breast-size .label,
.style-butt-size .label,
.relationship-type .label,
.summary-age-type .label,
.summary-item-wrapper .label,
.wrapper-icon-type .label {
	padding: 4.11% 0;
	max-width: 149px;
	margin-bottom: 8.5%;
	margin-top: 10px;
}

.style-ethnicity img {
	width: 100%;
	max-width: 197px;
	aspect-ratio: 197 / 266;
	overflow: hidden;
	object-fit: cover;
	height: auto;
	display: block;
}

.style-body-type img,
.style-breast-size img,
.style-butt-size img {
	width: 100%;
	max-width: 197px;
	aspect-ratio: 197 / 182;
	overflow: hidden;
	object-fit: cover;
	height: auto;
	display: block;
}

.style-ethnicity.active,
.style-hair.active,
.style-body-type.active,
.style-breast-size.active,
.style-butt-size.active,
.relationship-type.active {
	position: relative;
}

.style-ethnicity.active::before,
.style-hair.active::before,
.style-body-type.active::before,
.style-breast-size.active::before,
.style-butt-size.active::before,
.relationship-type.active::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	padding: 3px;
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	mask: linear-gradient(#000 0%, #000 100%) content-box, linear-gradient(#000 0%, #000 100%);
	mask-composite: exclude;
}

.age-container,
.hair-container {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: center;
	justify-content: center;
	align-content: center;
	flex-wrap: wrap;
	margin: 0 4%;
}

.age-option-label {
	flex: 1 1 calc(25% - 16px);
}

.hair-color-label {
	flex: 1 1 calc(20% - 16px);
}

.age-option-label,
.hair-color-label {
	max-width: calc(20% - 16px);
	background: #4d4d4d;
	border-radius: 100px;
	padding: 12px 0;
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
}

.age-option-label.active,
.occupation-label.active,
.hobby-label.active,
.clothing-label.active {
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	border-radius: 100px;
}

.age-option-name,
.hair-color-name {
	color: #ffffff;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	letter-spacing: 0.5px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}

.gray-hair-color .hair-color-name,
.white-hair-color .hair-color-name {
	color: #000000;
}

.age-text,
.years-text {
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 24px;
	letter-spacing: 0.5px;
	font-weight: 500;
	width: 100%;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.age-range-text {
	font-family: "Rubik-Bold", sans-serif;
	font-size: 32px;
	line-height: 32px;
	font-weight: 700;
}

.years-text {
	font-size: 32px;
	line-height: 32px;
	font-weight: 500;
}

.age-summary-wrapper {
	width: 100%;
	height: 30px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	bottom: 10%;
}

.summary-age-type {
	text-align: center;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	position: relative;
	display: inline-block;
}

.hair-color-label.active {
	position: relative;
}

.hair-color-label.active::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 100px;
	padding: 2px;
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	mask: linear-gradient(#000 0%, #000 100%) content-box, linear-gradient(#000 0%, #000 100%);
	mask-composite: exclude;
}

.eye-options,
.hair-style-options {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: center;
	align-items: center;
	margin: 0 4%;
}

.summary-container {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: flex-start;
	align-items: center;
	margin: 0 4%;
	padding-bottom: 2.5%;
}

.eye-color {
	flex: 1 1 calc((100% - 40px) / 3);
	max-width: 197px;
	cursor: pointer;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.style-hair {
	cursor: pointer;
}

.style-hair,
.summary-item-wrapper {
	flex: 1 1 calc(20% - 20px);
	max-width: calc(20% - 16px);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
}

.eye-color img,
.style-hair img,
.summary-item-wrapper img,
.summary-item-wrapper .age-summary-wrapper {
	border-radius: 10px;
	overflow: hidden;
	object-fit: cover;
	width: 100%;
	height: auto;
	display: block;
}

.eye-color img {
	aspect-ratio: 197 / 132;
}

.style-hair img,
.summary-item-wrapper img,
.summary-item-wrapper .age-summary-wrapper {
	aspect-ratio: 197 / 182;
}

.eye-color.active {
	position: relative;
}

.eye-color.active::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	padding: 2px;
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	mask: linear-gradient(#000 0%, #000 100%) content-box, linear-gradient(#000 0%, #000 100%);
	mask-composite: exclude;
}

.eye-label {
	background: #4d4d4d;
	border-radius: 25px;
	max-width: 149px;
	width: 100%;
	padding: 4.1% 0;
	position: absolute;
	bottom: -10%;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	margin-bottom: 0;
}

.eye-label.active {
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
}

.eye-label-name {
	color: #ffffff;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 16px;
	letter-spacing: 0.5px;
	font-weight: 500;
	display: flex;
	align-items: center;
	justify-content: center;
}

.style-personality {
	background: #4d4d4d;
	text-align: center;
	cursor: pointer;
	border-radius: 10px;
	overflow: hidden;
	display: inline-block;
	width: 100%;
	max-width: 345px;
}

.style-personality.active {
	position: relative;
}

.style-personality.active::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	padding: 3px;
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	mask: linear-gradient(#000 0%, #000 100%) content-box, linear-gradient(#000 0%, #000 100%);
	mask-composite: exclude;
}

.personality-option {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	justify-content: flex-start;
	padding: 7.83% 6%;
}

.personality-icon-wrapper {
	flex-shrink: 0;
	width: 48px;
	height: 48px;
	position: relative;
	overflow: hidden;
}

.personality-icon {
	height: auto;
	position: absolute;
	left: 2px;
	top: 3px;
	overflow: visible;
}

.personality-label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	justify-content: flex-start;
	align-self: stretch;
	flex-shrink: 0;
	position: relative;
	cursor: pointer;
}

.personality-name {
	color: #ffffff;
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	align-self: stretch;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.personality-info {
	color: #ffffff;
	text-align: left;
	font-family: "Rubik-Regular", sans-serif;
	font-size: 16px;
	letter-spacing: 0.5px;
	font-weight: 400;
	position: relative;
	width: 100%;
	max-width: 275px;
	height: 38px;
}

.occupation-container,
.hobbies-container {
	display: flex;
	flex-direction: row;
	gap: 16px;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-content: flex-start;
	margin: 0 4%;
}

.summary-simples-container {
	display: flex;
	flex-direction: row;
	gap: 45px;
	align-items: flex-start;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-content: flex-start;
	margin: 0 4%;
}

.occupation-label,
.hobby-label,
.clothing-label {
	cursor: pointer;
}

.occupation-label,
.hobby-label,
.clothing-label,
.summary-simple-label {
	background: #4d4d4d;
	border-radius: 100px;
	padding: 12px 20px;
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
}

.occupation-name,
.hobby-name {
	color: #ffffff;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.max-3-variants {
	color: #4d4d4d;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: -3% 0 3% 0;
}

.warning-message-max-3-variants,
.success-create-message,
.success-name-update-message {
	display: none;
	position: fixed;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	top: 5%;
	left: 50%;
	transform: translateX(-50%);
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	color: white;
	padding: 20px;
	border-radius: 5px;
	z-index: 1000;
}

.relationship-type,
.summary-age-type,
.wrapper-icon-type {
	background: #4d4d4d;
	aspect-ratio: 197 / 182;
	display: flex;
	align-items: center;
	justify-content: center;
}

.relationship-type img,
.summary-age-type .age-text {
	max-width: 197px;
	overflow: hidden;
	object-fit: cover;
	height: auto;
	display: block;
}

.summary-age-type .age-text {
	position: absolute;
	top: 33%;
}

.years-text {
	position: absolute;
	top: 50%;
}

.relationship-label {
	background: #1e1e1e;
}

.relationship-name {
	font-size: 16px;
}

.relationship-icon-wrapper {
	width: 73px;
	height: 73px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	bottom: 10%;
}

.relationship-icon {
	height: 81.67%;
	overflow: visible;
	position: absolute;
}

.summary-option-label {
	color: #ffffff;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 4% 0;
}

.summary-simple-preference {
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
	justify-content: flex-start;
}

.summary-label {
	color: #ffffff;
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	align-self: stretch;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.summary-hobbies-container {
	display: flex;
	flex-direction: row;
	gap: 12px;
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	flex-shrink: 0;
	position: relative;
	flex-wrap: wrap;
}

#personality-summary-photo,
#relationship-summary-photo {
	width: auto;
	object-fit: none;
}

.blonde-hair-color {
	background: #c4a278;
}

.brunette-hair-color {
	background: #865333;
}

.black-hair-color {
	background: #000000;
}

.redhead-hair-color {
	background: #fe503c;
}

.pink-hair-color {
	background: #d152a2;
}

.brown-hair-color {
	background: #865333;
}

.ginger-hair-color {
	background: #fe503c;
}

.gray-hair-color {
	background: #dbdbdb;
}

.white-hair-color {
	background: #ffffff;
}

.summary-item-wrapper,
.summary-simple-preference {
	display: none;
}

.image-generation-wrapper {
	margin: 0 4%;
}

.Canvas-Workflow {
	display: flex;
	justify-content: center;
	padding: 5% 0 5% 0;
}

#RenderMinimizer {
	padding-left: 0;
}

.Output-Block {
	text-align: center;
}

.Context-Of-Menu {
	bottom: 7%;
}

#Holder {
	height: auto;
	padding: 0;
}

#generation-count-container {
	display: none;
}

.show-avatar-container {
	background: #101010;
	position: relative;
	width: 100%;
	max-width: 1176px;
	border-radius: 12px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

#avatar-render-container {
	display: none;
}

.background-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	max-height: 250px;
	background: linear-gradient(90deg, rgba(237, 57, 70, 0) 0%, rgba(237, 57, 70, 1) 100%);
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 10px;
	overflow: hidden;
}

.background-wrapper2 {
	background: linear-gradient(90deg, rgba(37, 39, 40, 0.8) 0%, rgba(37, 39, 40, 0.3) 100%);
	padding: 36px;
	width: 100%;
	max-width: 1176px;
	position: absolute;
	left: 0;
	bottom: 0;
	top: 0;
	overflow: hidden;
}

.btn-icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	position: relative;
	overflow: visible;
}

.hearts-row {
	display: flex;
	gap: 10px;
}

.hearts-row-1 {
	margin-top: 40px;
}

.hearts-row-2 {
	margin-top: 10px;
}

.hearts-row-3 {
	margin-top: 10px;
}

.heart img {
	width: 10%;
}

.summary-content {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	position: relative;
	z-index: 1;
}

.summary-content,
.btn-group-actions-tablet,
.private-remain-tablet {
	display: flex;
	flex-wrap: wrap;
}

.summary-content {
	padding: 3% 3% 0 3%;
}

.avatar-actions-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.private-avatar-section {
	flex: 0 0 40%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: 2%;
}

.profile-avatar {
	cursor: pointer;
}

.avatar-actions-section {
	margin-top: 3%;
}

.avatar-actions-section label {
	margin-bottom: 5px;
	color: #ffffff;
	text-align: left;
	font-family: 'Rubik-Medium', sans-serif;
	font-size: 20px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	align-self: stretch;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.input-container {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	background: #1e1e1e;
	border-radius: 10px;
	overflow: hidden;
	width: 100%;
	max-width: 579px;
	gap: 8px;
}

.input-container input {
	padding: 16.5px;
	background: #1e1e1e;
	border: none;
	color: #ffffff;
	outline: none;
	font-size: 20px;
	letter-spacing: 0.5px;
	font-family: "Rubik-Regular", sans-serif;
	font-weight: 400;
	width: 100%;
	min-width: 0;
}

.input-container .icon {
	padding: 12px 24px;
	background: #393939;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.icon img {
	margin-left: 10px;
	width: 32px;
	height: 32px;
}

.info-text {
	margin-top: 5px;
	color: #ffffff;
	text-align: left;
	font-family: "Rubik-Regular", sans-serif;
	font-size: 16px;
	letter-spacing: 0.5px;
	font-weight: 400;
	position: relative;
	align-self: stretch;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.error-message {
	font-size: 18px;
	color: #FF51F9;
}

#avatar-name-error-message {
	display: none;
}

.bio-content {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: auto;
}

.bio-section {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	max-width: 489px;
}

.bio-text {
	color: #ffffff;
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	line-height: 24px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	align-self: stretch;
}

.bio {
	color: #696969;
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	align-self: stretch;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.btn-group-actions {
	margin-top: 1%;
}

.btn-group-actions button {
	gap: 10px;
	width: 100%;
	padding: 18px;
	border: none;
	cursor: pointer;
	border-radius: 15px;
	font-size: 16px;
	max-width: 579px;
}

.button-text-with-image {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	justify-content: center;
}

.btn-start {
	background: linear-gradient(73.97deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	margin-bottom: 8px;
	color: #ffffff;
}

.btn-create {
	background: #1e1e1e;
	margin-bottom: 8px;
	color: #ffffff;
}

.btn-generate {
	background: #1e1e1e;
	color: #ffffff;
}

.btn-group-actions .border-light {
	position: relative;
}

.btn-group-actions .border-light::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	padding: 1px;
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	mask: linear-gradient(#000 0%, #000 100%) content-box, linear-gradient(#000 0%, #000 100%);
	mask-composite: exclude;
}

.button-text {
	color: #ffffff;
	text-align: center;
	font-family: 'Rubik-Medium', sans-serif;
	font-size: 18px;
	font-weight: 500;
}

.create-new-avatar,
.generate-image-from-this {
	background: linear-gradient(72.91deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	font-weight: 500;
	position: relative;
}

.btn-group-actions-tablet {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.private-remain {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 3%;
	margin-top: 3%;
	background: #393939;
	border-radius: 10px;
	width: 100%;
	text-align: center;
}

.private-remain-text {
	color: #ffffff;
	font-family: 'Rubik-Medium', sans-serif;
	font-size: 16px;
	font-weight: 500;
	white-space: normal;
	word-break: break-word;
}

.private-remain img {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	display: inline;
}

.profile-image {
	width: 100%;
	border-radius: 12px;
	object-fit: cover;
	max-height: 541px;
	max-width: 482px;
}

.attributes-container {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	justify-content: space-between;
	max-width: 1176px;
	margin: auto;
	padding: 20px;
}

.selection-block {
	display: flex;
	flex-direction: column;
}

.personality-selections {
	flex: 1.5;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.physical-selections {
	flex: 1;
	display: flex;
	flex-direction: column;
	margin-top: 2%;
}

.selected-items {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
}

.selected-physical-items {
	margin-top: 5%;
}

.selected-item {
	display: flex;
	align-items: center;
	padding: 0 10px 30px 10px;
	border-radius: 8px;
}

.selected-item img {
	width: 50px;
	height: 50px;
	margin-right: 10px;
	border-radius: 50%;
}

.selected-item {
	display: none;
}

.personality-attributes {
	color: #696969;
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 22px;
	letter-spacing: 0.5px;
	font-weight: 500;
	width: 100%;
	height: 22px;
	padding: 10% 0;
	margin-left: 4%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.physical-attributes {
	color: #696969;
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 22px;
	letter-spacing: 0.5px;
	font-weight: 500;
	width: 100%;
	height: 22px;
	padding: 10% 0;
	margin-left: 4%;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.user-selections {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
	justify-content: flex-start;
	flex-shrink: 0;
	width: 142px;
	position: relative;
}

.selectedOptionName {
	color: #696969;
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 20px;
	letter-spacing: 0.5px;
	font-weight: 500;
	text-transform: uppercase;
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.selectedOptionValue {
	color: #ffffff;
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 22px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

#becomePremiumPopup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	z-index: 999;
}

.pro-popup {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
	z-index: 9999;
}

.pro-content {
	background: #1e1e1e;
	border: 1px solid grey;
	width: 94%;
	max-width: 919px;
	padding: 20px;
	border-radius: 16px;
	display: flex;
	flex-direction: row;
	position: relative;
}

.pro-close-btn {
	position: absolute;
	right: 20px;
	font-size: 30px;
	border: none;
	cursor: pointer;
	top: 24px;
	overflow: visible;
	width: 30px;
	height: 30px;
	background: url('https://pornify.cc/img/generation/icons/pro/premium-close.svg') no-repeat center;
	background-size: cover;
	z-index: 1;
}

.gen-image-container {
	flex: 1.5;
	margin-right: 10px;
	position: relative;
	padding: 2% 4% 2% 2%;
}

.new-gen-image {
	width: 100%;
	max-width: 348px;
	height: auto;
	aspect-ratio: 348 / 483;
	border-radius: 10px;
	overflow: hidden;
	object-fit: cover;
}

.pro-text-block {
	flex: 2;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
	padding-top: 2%;
}

.pro-text {
	font-size: 28px;
	font-weight: bold;
	margin-bottom: 20px;
	width: 100%;
	max-width: 386px;
}

.pro-button-span {
	color: #ffffff;
	text-align: center;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 18px;
	font-weight: 500;
	position: relative;
	width: 100%;
	max-width: 154px;
	height: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.generate-more {
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 40px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.generate-more-span {
	color: #ffffff;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 40px;
	letter-spacing: 0.5px;
	font-weight: 500;
}

.generate-more-span2 {
	background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 192, 125, 1) 50%, rgba(255, 53, 137, 1) 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 40px;
	letter-spacing: 0.5px;
	font-weight: 500;
}

.generate-more-span3 {
	color: #d9d9d9;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 40px;
	letter-spacing: 0.5px;
	font-weight: 500;
}

.actions-info-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	justify-content: flex-start;
	flex-shrink: 0;
	width: 100%;
	max-width: 341px;
	position: relative;
}

.gen-actions-info-block {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
	gap: 10px;
}

.gen-actions-icon img {
	width: 32px;
	height: 32px;
	margin-right: 5px;
}

.gen-actions-desc {
	color: #ffffff;
	text-align: left;
	font-family: "Rubik-Medium", sans-serif;
	font-size: 22px;
	letter-spacing: 0.5px;
	font-weight: 500;
	position: relative;
	width: 100%;
	max-width: 262px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.pro-button-container {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	margin-top: 20px;
}

.pro-button {
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	border: none;
	cursor: pointer;
	width: 100%;
	max-width: 386px;
	background: linear-gradient(73.97deg, rgba(255, 81, 249, 1) 0%, rgba(255, 79, 79, 1) 50%, rgba(255, 211, 93, 1) 100%);
	border-radius: 15px;
	padding: 20px 0;
	margin-bottom: 4%;
}

.pro-icon {
	width: 20px;
	height: 20px;
	margin-right: 10px;
}

#isProUser {
	display: none;
}

#becomePremiumPopup,
.pro-overlay {
	display: none;
}

.pro-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
}

@media (max-width: 768px) {
	.create-your-ai-image {
		font-size: 28px;
		letter-spacing: 0.39px;
		width: 100%;
		justify-content: flex-start;
	}

	.create-your-ai-image-span,
	.create-your-ai-image-span2 {
		font-size: 28px;
		letter-spacing: 0.39px;
	}

	.next {
		padding: 3.33% 0;
		margin: 2.5% 0 2.5% 1.5%;
	}

	.previous {
		margin: 2.5% 1.5% 2.5% 0;
		padding: 3.33% 0;
	}

	#create-ai-image-button .default-text {
		display: none;
	}

	#create-ai-image-button .mobile-text {
		display: inline;
	}

	.choose-style {
		font-size: 26px;
	}

	.label {
		width: 87%;
	}

	.style-option.active::before {
		padding: 3px;
	}

	.style-options {
		margin: 0 4% 1.5% 4%;
	}

	.ethnicity-options,
	.body-type-container,
	.breast-size-container,
	.butt-size-container,
	.personality-container,
	.relationship-options,
	.eye-options {
		justify-content: flex-start;
	}

	.hair-style-options:has(:nth-last-child(n+4)) {
		justify-content: flex-start;
		gap: 16px;
	}

	.hair-style-options {
		justify-content: center;
		gap: 16px;
	}

	.style-ethnicity,
	.style-hair,
	.style-body-type,
	.style-breast-size,
	.style-butt-size,
	.relationship-type,
	.summary-age-type,
	.summary-item-wrapper {
		max-width: 225px;
	}

	.style-ethnicity img,
	.style-hair img,
	.style-body-type img,
	.style-breast-size img,
	.style-butt-size img,
	.relationship-type img,
	.summary-age-type .age-text,
	.summary-item-wrapper img,
	.summary-item-wrapper .age-summary-wrapper {
		max-width: 225px;
	}

	.eye-color {
		flex: 1 1 calc((100% - 40px) / 3);
		max-width: calc((100% - 40px) / 3);
	}

	.personality-container {
		gap: 16px;
	}

	.personality-option {
		padding: 12% 4%;
	}

	.personality-info {
		height: 54px;
	}

	.style-personality.active::before {
		padding: 2px;
	}

	.max-3-variants {
		font-size: 18px;
	}

	.relationship-type,
	.summary-age-type {
		aspect-ratio: 154 / 154;
	}

	.summary-container {
		padding-bottom: 4%;
		gap: 16px;
	}

	.style-hair,
	.summary-item-wrapper {
		flex: 1 1 calc(25% - 16px);
		max-width: calc(25% - 8px);
	}

	.age-text,
	.years-text {
		font-size: 24px;
	}

	.summary-content,
	.btn-group-actions-tablet,
	.private-remain-tablet {
		gap: 10px;
		padding: 2%;
	}

	.private-remain:empty {
		display: none;
	}

	.private-remain {
		margin-top: 0;
	}

	.btn-group-actions button {
		max-width: none;
	}

	.selected-items {
		grid-template-columns: 1fr;
	}

	.input-container .icon {
		padding: 12px 12px;
	}

	.attributes-container {
		gap: 0;
	}

	.btn-group-actions {
		margin-top: 0;
	}

	.pro-content {
		flex-direction: row;
		width: 90%;
	}

	.gen-image-container {
		flex: 1;
		max-width: 100%;
		padding: 0;
	}

	.pro-text-block {
		flex: 1;
	}

	.gen-actions-info-block {
		gap: 8px;
	}

	.gen-actions-icon img {
		width: 25px;
		height: 25px;
	}

	.pro-text {
		font-size: 24px;
		margin-bottom: 10px;
	}

	.pro-button-container {
		margin-top: 20px;
	}
}

@media (min-width: 390px) and (max-width: 576px) {
	.hair-style-options {
		justify-content: center;
	}

	.hair-style-options:has(:nth-last-child(n+3)) {
		justify-content: flex-start;
	}

	.age-container,
	.hair-container {
		gap: 9px;
		justify-content: flex-start;
	}

	.age-option-label,
	.hair-color-label {
		flex: 1 1 calc((100% - 18px) / 3);
		max-width: calc((100% - 18px) / 3);
	}

	.age-option-name,
	.hair-color-name {
		letter-spacing: 0.25px;
	}

	.eye-color,
	.style-hair,
	.summary-item-wrapper {
		flex: 1 1 calc(50% - 10px);
		max-width: calc(50% - 10px);
	}

	.personality-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 390px) {
	.summary-container {
		padding-bottom: 4%;
	}

	.generation-container {
		padding: 2.2% 0;
	}

	.progress {
		margin: 6.88% 0 4.88% 0;
	}

	.progress-step {
		width: 16px;
		height: 16px;
	}

	.progress-step.filled {
		width: 16px;
		height: 16px;
	}

	.check {
		width: 10px;
		height: 10px;
	}

	.line {
		margin-top: 7px;
	}

	.field {
		background: none;
	}

	.next-prev-buttons {
		flex-direction: column;
		margin: 2.5% 0 0 0;
	}

	.next,
	.previous {
		width: 100%;
		max-width: 100%;
		height: 44px;
		border-radius: 8px;
		font-size: 16px;
		margin: 2.5% 1.5% 2.5% 0;
	}

	.next {
		order: 1;
	}

	.previous {
		order: 2;
	}

	.next-prev-buttons .prev-default-text {
		display: none;
	}

	.next-prev-buttons .mobile-prev-text {
		display: inline;
	}

	.choose-style {
		font-size: 24px;
		padding: 4% 0 5% 0;
	}

	.style-options {
		margin: 0;
		gap: 2%;
	}

	.style-option.active::before {
		padding: 2px;
	}

	.label {
		width: 93%;
		max-width: 154px;
		padding: 7px 0;
	}

	.option-label-name {
		font-size: 16px;
	}

	.ethnicity-options,
	.body-type-container,
	.breast-size-container,
	.butt-size-container,
	.personality-container,
	.relationship-options {
		margin: 0;
		gap: 10px;
	}

	.hair-style-options {
		justify-content: center;
	}

	.hair-style-options:has(:nth-last-child(n+3)) {
		justify-content: flex-start;
	}

	.style-ethnicity,
	.style-hair,
	.style-body-type,
	.style-breast-size,
	.style-butt-size,
	.relationship-type,
	.summary-age-type,
	.summary-item-wrapper {
		max-width: 174px;
	}

	.style-ethnicity img,
	.style-hair img,
	.style-body-type img,
	.style-breast-size img,
	.style-butt-size img,
	.relationship-type img,
	.summary-age-type .age-text,
	.summary-item-wrapper img,
	.summary-item-wrapper .age-summary-wrapper {
		max-width: 174px;
	}

	.style-ethnicity.active::before,
	.style-hair.active::before,
	.style-body-type.active::before,
	.style-breast-size.active::before,
	.style-butt-size.active::before,
	.relationship-type.active::before {
		padding: 2px;
	}

	.age-container,
	.hair-container,
	.occupation-container,
	.hobbies-container,
	.eye-options,
	.hair-style-options,
	.summary-container {
		gap: 10px;
		margin: 0;
	}

	.age-container,
	.hair-container {
		justify-content: flex-start;
	}

	.age-option-label,
	.hair-color-label {
		flex: 1 1 calc(50% - 5px);
		max-width: calc(50% - 5px);
	}

	.occupation-name,
	.hobby-name {
		font-size: 16px;
	}

	.eye-options,
	.hair-style-options,
	.summary-container {
		gap: 10px;
		margin: 0 -8px 0 0;
	}

	.eye-color,
	.style-hair,
	.summary-item-wrapper {
		flex: 1 1 calc(50% - 10px);
		max-width: calc(50% - 10px);
	}

	.eye-label {
		max-width: 146px;
		bottom: 8%;
	}

	.personality-container {
		gap: 10px;
		grid-template-columns: repeat(2, 1fr);
	}

	.personality-name {
		font-size: 16px;
	}

	.personality-info {
		font-size: 14px;
	}

	.personality-option {
		padding: 6% 6.5% 10% 6.5%;
	}

	.max-3-variants {
		font-size: 16px;
	}

	.relationship-type,
	.summary-age-type {
		aspect-ratio: 174 / 154;
	}
}

@media screen and (min-width: 390px) and (max-width: 768px) {

	.previous,
	.next {
		margin: 5% 1.5%;
	}

	.step-1 .next {
		margin: 3% auto;
	}
}

@media (min-width: 576px) {

	.ethnicity-options,
	.relationship-options {
		grid-template-columns: repeat(3, 1fr);
	}

	.body-type-container,
	.breast-size-container,
	.butt-size-container {
		grid-template-columns: repeat(4, 1fr);
	}

	.personality-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media screen and (min-width: 576px) and (max-width: 768px) {

	.age-option-label,
	.hair-color-label {
		flex: 1 1 calc(25% - 12.5px);
		max-width: calc(25% - 12.5px);
	}
}

@media (min-width: 768px) {

	.previous,
	.next {
		max-width: 268px;
	}

	.step-1 {
		justify-content: flex-end;
	}

	.step-9 {
		justify-content: space-between;
	}

	.step-9 .next {
		max-width: 100%;
		margin: 0 1.5% 2.5% 0;
	}

	.previous {
		margin: 2.5% 2.5% 5% 1.5%;
	}

	.ethnicity-options,
	.body-type-container,
	.breast-size-container,
	.butt-size-container,
	.relationship-options {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 992px) {

	.ethnicity-options,
	.body-type-container,
	.breast-size-container,
	.butt-size-container,
	.relationship-options {
		grid-template-columns: repeat(5, 1fr);
	}

	.personality-container {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media only screen and (max-width: 1320px) {
	#RenderMinimizer {
		display: flex;
	}
}

@media (min-width: 480px) and (max-width: 992px) {
	.profile-image {
		aspect-ratio: 240 / 350;
	}

	.bio-section {
		gap: 0;
	}

	.bio-text {
		font-size: 16px;
	}

	.selected-physical-items {
		margin-top: 0;
	}
}

@media (min-width: 480px) and (max-width: 768px) {
	.background-wrapper {
		max-height: 190px;
	}

	.generate-more,
	.generate-more-span,
	.generate-more-span2,
	.generate-more-span3 {
		font-size: 25px;
	}

	.gen-actions-desc {
		font-size: 16px;
	}

	.actions-info-group {
		gap: 0;
	}
}

@media (max-width: 480px) {
	.avatar-actions-container:empty {
		display: none;
	}

	.private-avatar-section {
		flex: unset;
	}

	.private-avatar-section {
		padding-right: 0;
	}

	.private-remain {
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.pro-content {
		width: 100%;
		max-width: 85%;
		flex-direction: column;
		padding: 15px;
	}

	.pro-close-btn {
		background-image: url('https://pornify.cc/img/generation/icons/pro/mobile-premium-close.svg');
	}

	.pro-text {
		font-size: 20px;
		text-align: center;
	}

	.gen-actions-info-block {
		gap: 5px;
	}

	.new-gen-image {
		max-width: 444px;
	}

	.pro-text-block {
		padding-bottom: 10px;
	}

	.pro-button-container {
		position: relative;
		width: 100%;
	}

	.pro-button {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.pro-close-btn {
		top: 30px;
		right: 30px;
		color: #1e1e1e;
		z-index: 1;
	}

	.gen-image-container {
		margin-right: 0;
	}

	.gen-actions-desc {
		max-width: 426px;
	}

	.actions-info-group {
		width: 100%;
		max-width: 426px;
		gap: 20px;
	}
}