.quiz {
	--padding: 20px;
}

.quiz .form__input input {
	background-color: #fff;
}

.quiz .form__input input::placeholder {
	color: #c2c2c2;
}

.quiz__body {
	background-color: #f3f3f3;
	padding: 40px 50px;
}

@media (max-width: 1340px) {
	.quiz__body {}
}

.quiz.quiz--last .quiz__nav {
	display: none;
}

.quiz__title {
	font-weight: 700;
	line-height: 120%;
	letter-spacing: -0.04em;
	color: var(--white);
	padding: 0 var(--padding);
}

.quiz__text-field input {
	height: 56px;
	width: 100%;
	padding: 0 1rem;
	border-radius: .25rem;
	outline: none;
}

@supports (font-size: clamp(26px, 23.3552px + 0.826446281vw, 36px)) {
	.quiz__title {
		font-size: clamp(26px, 23.3552px + 0.826446281vw, 36px);
	}
}

@supports not (font-size: clamp(26px, 23.3552px + 0.826446281vw, 36px)) {
	.quiz__title {
		font-size: calc(26px + 0.625 * (100vw - 320px) / 75.625);
	}
}

.quiz__desc {
	font-weight: 500;
	line-height: 120%;
	letter-spacing: -0.02em;
	color: var(--white);
	opacity: 0.5;
	pointer-events: none;
	margin-top: 15px;
	padding: 0 var(--padding);
}

@supports (font-size: clamp(12px, 11.4704px + 0.1652892562vw, 14px)) {
	.quiz__desc {
		font-size: clamp(12px, 11.4704px + 0.1652892562vw, 14px);
	}
}

@supports not (font-size: clamp(12px, 11.4704px + 0.1652892562vw, 14px)) {
	.quiz__desc {
		font-size: calc(12px + 0.125 * (100vw - 320px) / 75.625);
	}
}

.quiz__checkbox-fields {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

@supports (margin-top: clamp(20px, 17.3552px + 0.826446281vw, 30px)) {

	.quiz__checkbox-fields,
	.quiz__text-field {
		margin-top: clamp(20px, 17.3552px + 0.826446281vw, 30px);
	}
}

@supports not (margin-top: clamp(20px, 17.3552px + 0.826446281vw, 30px)) {

	.quiz__checkbox-fields,
	.quiz__text-field {
		margin-top: calc(20px + 0.625 * (100vw - 320px) / 75.625);
	}
}

.quiz__checkbox-fields input {
	display: none;
}

.quiz__checkbox-fields input:checked+.quiz__checkbox-field {
	border: 1px solid var(--accent)
}

.quiz__checkbox-fields input:checked+.quiz__checkbox-field .quiz__checkbox-title {
	color: var(--main);
}

.quiz__checkbox-fields input:checked+.quiz__checkbox-field::after {
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z' fill='%23177EDD' stroke='%23177EDD' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M7.75 11.9999L10.58 14.8299L16.25 9.16992' stroke='white' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.quiz__checkbox-field {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	border: 1px solid var(--accent);
	padding: 8px var(--padding);
	min-height: 54px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

@supports (border-radius: clamp(10px, 7.3552px + 0.826446281vw, 20px)) {
	.quiz__checkbox-field {
		border-radius: clamp(10px, 7.3552px + 0.826446281vw, 20px);
	}
}

@supports not (border-radius: clamp(10px, 7.3552px + 0.826446281vw, 20px)) {
	.quiz__checkbox-field {
		border-radius: calc(10px + 0.625 * (100vw - 320px) / 75.625);
	}
}

@media (max-width: 47.99875em) {
	.quiz__checkbox-field {
		min-height: 54px;
		padding: 6px var(--padding);
	}
}

.quiz__checkbox-field::after {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 24px;
	aspect-ratio: 1;
	background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z' stroke='%23177EDD' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
	background-repeat: no-repeat;
	background-position: 50%;

}

.quiz__checkbox-title {
	font-weight: 600;
	color: var(--white);
}

@supports (font-size: clamp(14px, 12.9424px + 0.3305785124vw, 18px)) {
	.quiz__checkbox-title {
		font-size: clamp(14px, 12.9424px + 0.3305785124vw, 18px);
	}
}

@supports not (font-size: clamp(14px, 12.9424px + 0.3305785124vw, 18px)) {
	.quiz__checkbox-title {
		font-size: calc(14px + 0.25 * (100vw - 320px) / 75.625);
	}
}

.quiz__nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 0 var(--padding);
}

@supports (margin-top: clamp(20px, 16.0336px + 1.2396694215vw, 35px)) {
	.quiz__nav {
		margin-top: clamp(20px, 16.0336px + 1.2396694215vw, 35px);
	}
}

@supports not (margin-top: clamp(20px, 16.0336px + 1.2396694215vw, 35px)) {
	.quiz__nav {
		margin-top: calc(20px + 0.9375 * (100vw - 320px) / 75.625);
	}
}

@media (max-width: 47.99875em) {
	.quiz__nav {
		flex-direction: column;
	}
}

.quiz__progress {
	width: 320px;
	display: flex;
	gap: 10px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

@media (max-width: 47.99875em) {
	.quiz__progress {
		width: 100%;
	}
}

.quiz__progress-title {
	font-family: var(--font-family);
	font-weight: 500;
	font-size: 14px;
	line-height: 120%;
	letter-spacing: -0.02em;
	text-align: center;
	color: var(--white);
}

.quiz__progress-bar {
	height: 16px;
	border-radius: 20px;
	border: 1px solid var(--accent);
	padding: 4px;
	width: 100%;
}

.quiz__progress-bar span {
	border-radius: 20px;
	background: var(--accent);
	display: block;
	height: 100%;
	transition: width 0.4s ease;
}

.quiz__button-wrap {
	min-height: 80px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.quiz__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 60px;
	background: var(--accent);
	border-radius: 8px;
	padding: 8px 20px 8px 25px;
	font-family: var(--font-family);
	font-weight: 600;
	line-height: 120%;
	color: #fff;
	transition-duration: 0.15s;
}

@supports (font-size: clamp(14px, 12.9424px + 0.3305785124vw, 18px)) {
	.quiz__btn {
		font-size: clamp(14px, 12.9424px + 0.3305785124vw, 18px);
	}
}

@supports not (font-size: clamp(14px, 12.9424px + 0.3305785124vw, 18px)) {
	.quiz__btn {
		font-size: calc(14px + 0.25 * (100vw - 320px) / 75.625);
	}
}

@media (max-width: 47.99875em) {
	.quiz__btn {
		height: 60px;
		gap: 10px;
	}
}

@media (max-width: 400px) {
	.quiz__btn {
		padding: 5px 15px;
	}
}

.quiz__btn:disabled {
	opacity: 0.2;
}

.quiz__btn:not(:disabled):hover {
	box-shadow: 3px 3px 10px rgba(0, 0, 0, .25);
}

.quiz__btn::after,
.quiz__btn::before {
	width: 24px;
	aspect-ratio: 1;
	display: block;
	flex-shrink: 0;
	filter: brightness(0) invert(1);
	background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 12H18M18 12L13 7M18 12L13 17' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: 50%;
}

.quiz__btn--back::before {
	content: "";
	transform: scale(-1, 1);
}

.quiz__btn--next::after {
	content: "";
}

.quiz__message {
	line-height: 140%;
	letter-spacing: -0.02em;
	color: var(--white);
	padding: 0 var(--padding);
}

@supports (font-size: clamp(16px, 15.4704px + 0.1652892562vw, 18px)) {
	.quiz__message {
		font-size: clamp(16px, 15.4704px + 0.1652892562vw, 18px);
	}
}

@supports not (font-size: clamp(16px, 15.4704px + 0.1652892562vw, 18px)) {
	.quiz__message {
		font-size: calc(16px + 0.125 * (100vw - 320px) / 75.625);
	}
}

@supports (margin-top: clamp(20px, 14.7104px + 1.652892562vw, 40px)) {
	.quiz__message {
		margin-top: clamp(20px, 14.7104px + 1.652892562vw, 30px);
	}
}

@supports not (margin-top: clamp(20px, 14.7104px + 1.652892562vw, 30px)) {
	.quiz__message {
		margin-top: calc(15px + 1.25 * (100vw - 320px) / 75.625);
	}
}

.quiz__form {
	padding: 0 var(--padding);
	margin-top: 30px;
}

.btn-quiz {
	display: inline-flex;
	border: .09375rem solid var(--accent);
	color: var(--text);
	align-items: center;
	justify-content: center;
	padding: .625rem;
	border-radius: .875rem;
	height: 2.75rem;
	font-weight: 600;
	font-size: .75rem;
	text-align: center;
	transition-duration: .15s;
}

.modal-quiz {
	padding: 0 !important;
	border-radius: 1.125rem !important;
}

.modal-quiz__wrapper {
	width: 1000px;
}

@media(max-width: 1100px) {
	.modal-quiz {
		width: 100%;
	}

	.modal-quiz__wrapper {
		width: 100%;
	}

}

@media(max-width: 768px) {
	.quiz__body--modal {
		padding: 20px;
	}
	.quiz__checkbox-fields {
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	}
}

.quiz__body--modal {
	border-radius: 20px;
}