body {
	font-family: "Montserrat", sans-serif;
	width: 100%;
	overflow-x: hidden;
	margin: 0;
	padding: 0;
}

.file-input-container {
	display: flex;
	height: 40px;
	width: 210px;
	align-items: center;
	justify-content: center;
	border-radius: 7px;
	letter-spacing: 1px;
	transition: all 0.2s linear;
	cursor: pointer;
	background-color: #ffffff;
	color: #000000;
	box-shadow: 5px 5px 0px 0px #000000;
	border: 1px solid #000000;

	& input {
		display: none;
	}

	& label {
		cursor: pointer;
	}

	& > svg {
		margin-left: 15px;
		max-width: 20px;
	}
	&:hover {
		transform: translate(5px, 5px);
		box-shadow: 0px 0px 0px 0px #000000;
	}
}

/* ACCORDION */
.upload-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	.accordion-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		/* border: 1px solid red; */
		padding-left: 20px;
		padding-right: 20px;
		min-width: 450px;
		background-color: rgb(250, 250, 250);
		border: 1px dashed rgb(225, 225, 225);
		border-radius: 10px;
		&.active {
			background-color: rgb(250, 250, 250);
			border-radius: 15px;
		}
		& .success-message {
			font-size: 14px;
			font-weight: 600;
			color: #000000;
		}

		> p {
			margin: 70px 0px;
		}
		& .accordion-title {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			gap: 20px;
			& svg {
				width: 20px;
			}
			& .arrow-down {
				width: 15px;
				margin-left: 0px;
				transition: transform 0.3s ease-in-out;
				&:hover {
					transform: rotate(180deg);
				}
				&.active {
					transform: rotate(180deg);
				}
			}
		}
	}
	.accordion-content {
		max-height: 0px;
		overflow: hidden;
		transition: max-height 0.1s ease-out;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100%;
		& p {
			max-width: 400px;
			text-align: center;
		}
	}
	.accordion-title.active + .accordion-content {
		max-height: 1000px;
		margin-top: 20px;
	}

	summary {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 20px;
		list-style: none;
	}
	details summary::-webkit-details-marker {
		display: none;
	}
}

.header {
	display: flex;
	flex-direction: column;
	text-align: center;
	align-items: center;
	justify-content: center;
	margin-top: 50px;
	margin-bottom: 40px;
	& img {
		width: 150px;
	}
	&:hover {
		cursor: pointer;
	}
}

.hr {
	width: 500px;
	border: 0.5px solid #dfdede;
	margin-top: 20px;
	margin-bottom: 20px;
}

.button1 {
	box-shadow: 5px 5px 0px 0px #000000;
	background-color: #ffffff;
	border-radius: 5px;
	border: 1px solid #000000;
	display: inline-block;
	cursor: pointer;
	color: #000000;
	font-size: 14px;
	padding: 10px 29px;
	text-decoration: none;
	margin-bottom: 20px;
	transition: all 0.2s linear;
	&:hover {
		transform: translate(5px, 5px);
		box-shadow: 0px 0px 0px 0px #000000;
	}
	&:active {
		position: relative;
		top: 1px;
	}
}

.img-container {
	position: relative;
	& img {
		max-height: 750px;
	}
}

.mask {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 60%;
	opacity: 0.7;
	pointer-events: none;
	z-index: 2;
}

.dropdown-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	& p {
		font-weight: 600;
		margin-top: 0px;
	}
	& select {
		width: 400px;
		height: 40px;
		border-radius: 10px;
		border: 1px solid #ccc;
		padding: 5px 30px 5px 5px;
		font-size: 16px;
		color: #333;
		background-color: #fff;
		cursor: pointer;
		transition: border-color 0.3s ease;
		&:hover {
			border-color: #414141;
			border: 2px solid #ccc;
		}
	}
}

.loader {
	width: fit-content;
	font-size: 30px;
	line-height: 1.5;
	font-family: system-ui, sans-serif;
	font-weight: bold;
	text-transform: uppercase;
	color: #0000;
	-webkit-text-stroke: 1px #000;
	background: radial-gradient(1.13em at 50% 1.6em, #000 99%, #0000 101%) calc(50% - 1.6em) 0/3.2em 100% text, radial-gradient(1.13em at 50% -0.8em, #0000 99%, #000 101%) 50% 0.8em/3.2em 100% repeat-x text;
	animation: l9 2s linear infinite;
}
.loader:before {
	content: "Cargando...";
}

.preview-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	& img {
		max-width: 250px;
	}
}
.actions-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

.ver-3d-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
}
#animation {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 900px;
	height: auto !important;
	/* width: 1200px !important;
	margin-bottom: 20px !important;
	*/
	> canvas {
		width: 100% !important;
		height: auto !important;
		/* width: 80% !important;
		height: auto !important; */
	}
}
@keyframes l9 {
	to {
		background-position: calc(50% + 1.6em) 0, calc(50% + 3.2em) 0.8em;
	}
}

@media screen and (max-width: 480px) {
	.header {
		margin-top: 30px;
		margin-bottom: 20px;
		& img {
			max-width: 70px;
		}
	}
	.dropdown-container {
		margin-bottom: 10px;

		& select {
			width: 300px;
		}
	}

	.hr {
		width: 350px;
		border: 0.5px solid #ececec;
		margin-top: 15px;
		margin-bottom: 15px;
		margin-left: 0px;
		margin-right: 0px;
	}

	.upload-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 10px;
		margin: 0px 15px;
		& .accordion-container {
			min-width: 250px;
			&.active {
				background-color: rgb(255, 255, 255);
				border-radius: 15px;
			}
			& .accordion-title {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				& svg {
					width: 20px;
				}
				& .arrow-down {
					width: 15px;
					margin-left: 70px;
					transition: transform 0.3s ease-in-out;
					&:hover {
						transform: rotate(180deg);
					}
					&.active {
						transform: rotate(180deg);
					}
				}
			}
			& .accordion-content {
				max-width: 310px;
				& p {
					max-width: 300px;
					text-align: center;
				}
			}
		}
	}
	.img-container {
		max-width: 550px;
		position: relative;
		& img {
			max-width: 550px;
			max-height: 550px;
		}
	}

	.actions-container {
		flex-direction: row;
		gap: 20px;
		justify-content: center;
		align-items: center;

		& #start-over-button {
			padding: 1px 1px;
		}
		& #approve-button {
			padding: 1px 1px;
		}
	}

	.button1 {
		padding: 10px 15px;
		font-size: 14px;
	}

	#animation {
		margin-left: 50px;
		margin-right: 50px;
		width: 75% !important;
		height: auto !important;
	}
}