.aPopup,
.aPopup .componentPopup {overflow: unset;}

.websites-generatorPopup {
	width: min(1240px, 90vw); position: relative; border: 0 !important;
	border-radius: 20px; background: none; box-shadow: 0 4px 6px rgb(40 40 100 / 30%);
}
.websites-generatorPopup:before {
	content: ''; position: absolute; inset: 0; border-radius: 20px; padding: 1px;
	background: linear-gradient(170deg, #032bf4, #ffffff 100%);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude; pointer-events: none;
}
.websites-generatorPopup > .header {
	border-bottom: 0 !important; border-radius: 21px 21px 0 0; background-color: white !important;
}
.websites-generatorPopup > .body {
	display: flex; min-height: unset !important; border-radius: 0 0 21px 21px; background-color: white;
}

.websites-generatorPopup .side-bar {
	display: flex; flex-direction: column; gap: 1rem; transform: translateX(47%); padding-top: 4rem;
}
.websites-generatorPopup .side-bar div {
	display: flex; align-items: center; justify-content: center;
	width: 75px; height: 75px; border-radius: 50%; background-color: white; cursor: default;
	box-shadow: 0 4px 6px rgba(0, 0, 255, 0.3); font-size: 36px; font-weight: bold; color: #a3abfa;
}
.websites-generatorPopup .side-bar div.active {background-color: #f3c2a9; color: #032bf4;}
.websites-generatorPopup .side-bar div.done {color: #f3c2a9; cursor: pointer;}
.websites-generatorPopup .side-bar div.done:hover {text-decoration: underline;}

.websites-generatorPopup .tabs-wrapper {flex-grow: 1;}
.websites-generatorPopup .tabs-header {display: flex; justify-content: space-between; padding: 0 2rem 0 4rem;}
.websites-generatorPopup .tabs-header div {
	padding: 12px 1rem; border-radius: 3px; cursor: default;
	text-align: center; font-size: 23px; color: #aeb8ec;
}
.websites-generatorPopup .tabs-header div span {padding: 8px 2px;}
.websites-generatorPopup .tabs-header div.active {font-weight: bold; color: #032bf4;}
.websites-generatorPopup .tabs-header div.active span {border-bottom: 1px solid #032bf4;}
.websites-generatorPopup .tabs-header div.done {font-weight: bold; color: #f3c2a9; cursor: pointer;}
.websites-generatorPopup .tabs-header div.done:hover span {border-bottom: 1px solid #f3c2a9;}

.websites-generatorPopup .tabs-body {
	height: 600px; margin: 2rem 0 2.5rem; padding: 0 3rem 0 5rem;
	overflow-y: auto; line-height: 1.2; font-size: 1rem; color: #6f6f6f;
}
.websites-generatorPopup .tabs-body::-webkit-scrollbar-thumb {background-color: var(--blue-light);}
.websites-generatorPopup .tabs-body::-webkit-scrollbar-thumb,
.websites-generatorPopup .tabs-body::-webkit-scrollbar-track {border-radius: 0 10px 10px 0;}
.websites-generatorPopup .tabs-body::-webkit-scrollbar-track {background-color: var(--blue-lightest);}
.websites-generatorPopup .tabs-body > div {display: none;}
.websites-generatorPopup .tabs-body > div.active {display: block;}
.websites-generatorPopup .tabs-body h4 {margin-bottom: 0; font-size: 22px; font-weight: bold;}
.websites-generatorPopup .tabs-body h4 + p {font-size: 18px; line-height: 1;}
.websites-generatorPopup .tabs-body h5 {font-weight: bold;}
.websites-generatorPopup .tabs-body h4,
.websites-generatorPopup .tabs-body h5,
.websites-generatorPopup .tabs-body label {color: #0c2833;}
.websites-generatorPopup .tabs-body p {margin-bottom: 0;}
.websites-generatorPopup .tabs-body hr {margin: 1.5rem auto; border-bottom-color: #adb9c2}
.websites-generatorPopup .tabs-body .line {display: flex; gap: 1rem;}
.websites-generatorPopup .tabs-body i.fal {vertical-align: middle; font-size: 19px; color: #6f6f6f;}
.websites-generatorPopup .tabs-body input,
.websites-generatorPopup .tabs-body select {
	height: 60px !important; padding: 0 1rem; font-size: 1.2rem;
	border-radius: .5rem; border-color: #032bf4 !important;
}
.websites-generatorPopup .tabs-body select {
	padding-left: 2.5rem; background-position: left -1.5rem center; background-size: 12px 8px;
}
.websites-generatorPopup .tabs-body .moreInfo {margin-left: 5px; cursor: pointer;}
.websites-generatorPopup .tabs-body .moreInfo:hover,
.websites-generatorPopup .tabs-body .moreInfo.active {font-weight: bold; color: #032bf4;}
.websites-generatorPopup .tabs-body .moreInfoContent {display: none;}

.websites-generatorPopup .tabs-body .submit {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	position: absolute; bottom: 0; right: 50%; width: 350px; height: 80px;
	margin-bottom: -40px; padding: 0 9rem 0 3rem; transform: translateX(50%); border-radius: 40px;
	background-color: #f3c2a9; font-size: 1.5rem; color: #231f22; user-select: none;
}
.websites-generatorPopup .tabs-body .submit:active {margin-bottom: -41px;}
.websites-generatorPopup .tabs-body .submit b {margin-bottom: 6px;}
.websites-generatorPopup .tabs-body .submit i {font-weight: normal;}

/* Step 4 */
.websites-generatorPopup .tabs-body .step_4 .logo {position: relative; width: fit-content;}
.websites-generatorPopup .tabs-body .step_4 .logo .upload_icon {
	position: absolute; top: 1rem; right: 1rem; z-index: 1; object-fit: none;
	width: 50px; height: 50px; border-radius: 50%; background-color: #c5cdf9; cursor: pointer;
}
.websites-generatorPopup .tabs-body .step_4 .content_field_image {
	width: 600px; border: 0; border-radius: .5rem;
	background-color: #e7eafa; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.13);
}
.websites-generatorPopup .tabs-body .step_4 .content_field_image > img {object-fit: unset; aspect-ratio: unset;}
.websites-generatorPopup .tabs-body .step_4 .content_field_image .aBrowse > span {background: none;}
.websites-generatorPopup .tabs-body .step_4 .content_field_image .remove {background: none;}
.websites-generatorPopup .tabs-body .step_4 .content_field_image .remove:hover {color: #c00;}
.websites-generatorPopup .tabs-body .step_4 .logo:hover .content_field_image {background-color: #e0e5ff;}
.websites-generatorPopup .tabs-body .step_4 .logo:hover .upload_icon {background-color: #b0b9f0;}

/* More info */
.moreInfoPopup {
	padding: 1rem; border: 1px solid var(--green-dark); border-radius: 3px;
	background-color: #ffe; box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);
}
.moreInfoPopup p {margin-bottom: .5rem;}
.moreInfoPopup p:last-child {margin-bottom: 0;}