.quiz-section {
	padding: 80px 0px 80px 0px;
	background: var(--color-gray-01);
}
.quiz-section__header.--offset-top {
	margin-top: calc((36px - 30px) * -1);
}
.quiz {
	background: var(--color-white);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: var(--quiz-shadow);
	position: relative;
}
.quiz__wrapper {
	min-height: 458px;
	display: flex;
	transition: opacity 0.5s ease, visibility 0.5s ease;
}
.quiz__main {
	flex: 1 0 auto;
	min-width: 0;
	padding: 30px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.quiz__aside-wrapper-desktop {
	flex: 0 0 339px;
	background: var(--color-gray-10);
	padding: 30px;
}
.quiz__main-header {
	border-bottom: 1px solid var(--color-gray-14);
	padding-bottom: 25px;
}
.quiz__main-header-title {
	font-size: 15px;
	line-height: 22px;
	color: var(--color-gray-11);
}
.quiz__main-body {
	padding: 30px 0 0;
	margin-bottom: 30px;
}
.quiz__main-body-items {
	position: relative;
}
.quiz__main-body-item {
	background: var(--color-white);
}
.quiz__main-body-item.--active {
	position: relative;
}
.quiz__animated-item {
	visibility: hidden;
	opacity: 0;
	transition: var(--transition);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.quiz__animated-item.--active {
	visibility: visible;
	opacity: 1;
	transform: translateX(0);
}
.quiz__animated-item.--fade-out {
	animation: fadeOut 0.5s ease forwards;
}
.quiz__animated-item.--slide-in-right {
	animation: slideInRight 0.4s ease-out forwards;
}
.quiz__animated-item.--slide-in-left {
	animation: slideInLeft 0.4s ease-out forwards;
}
@keyframes fadeOut {
	0% {
		opacity: 1;
		visibility: visible;
	}
	100% {
		opacity: 0;
		visibility: hidden;
	}
}
@keyframes slideInRight {
	0% {
		transform: translateX(100px);
		opacity: 0;
		visibility: hidden;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}
}
@keyframes slideInLeft {
	0% {
		transform: translateX(-100px);
		opacity: 0;
		visibility: hidden;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}
}
.quiz__main-body-item-title {
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	margin-top: calc((30px - 24px) * -1);
}
.quiz__main-body-item-options {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 30px;
	margin-top: 25px;
}
.quiz__main-body-item-option {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	border: 1px solid var(--color-gray-04);
	border-radius: 10px;
	padding: 20px;
	cursor: pointer;
	transition: var(--transition);
}
.quiz__main-body-item-option:hover {
	box-shadow: var(--quiz-label-shadow);
}
.quiz__main-body-item-option input {
	position: absolute;
	left: -9999px;
}
.quiz__main-body-item-option-input {
	display: block;
	flex: 0 0 27px;
	width: 27px;
	height: 27px;
	background: var(--color-gray-10);
	border: 1px solid var(--color-gray-04);
	border-radius: 50%;
	transition: var(--transition);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px 9px;
}
.quiz__main-body-item-option input:checked + .quiz__main-body-item-option-input {
	background: var(--color-red);
	border-color: var(--color-red);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13px' height='9px'%3E%3Cpath fill-rule='evenodd' fill='%23FFFFFF' d='M12.718,1.690 L5.758,8.651 C5.742,8.670 5.735,8.694 5.717,8.712 C5.519,8.910 5.259,9.006 4.1000,9.003 C4.740,9.006 4.480,8.910 4.282,8.712 C4.264,8.694 4.258,8.669 4.242,8.650 L0.282,4.690 C-0.108,4.299 -0.108,3.667 0.282,3.275 C0.673,2.886 1.306,2.886 1.697,3.275 L5.000,6.580 L11.303,0.275 C11.694,-0.112 12.327,-0.112 12.718,0.275 C13.108,0.665 13.108,1.301 12.718,1.690 Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 13px auto;
}
.quiz__main-body-item-option:has(input:checked) {
	border-color: var(--color-red);
}
.quiz__main-footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	margin-top: auto;
	align-items: flex-end;
}
.quiz__main-footer-counter {
	font-size: 16px;
	line-height: 16px;
}
.quiz__main-footer-counter-current {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-gray-10);
    margin-left: 2px;
    margin-right: 2px;
}
.quiz__main-footer-btns {
	display: flex;
	align-items: center;
	gap: 20px;
}
.btn.quiz__main-footer-btn-back {
	background: transparent;
	border: 1px solid var(--color-gray-05);
	height: 44px;
	width: 44px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn.quiz__main-footer-btn-back:hover, 
.btn.quiz__main-footer-btn-back:active {
	background: var(--color-gray-10);
	border: 1px solid var(--color-gray-04);
}
.btn.quiz__main-footer-btn-next {
	height: 44px;
	padding: 14px 24px 15px 24px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.btn.quiz__main-footer-btn-next svg {
	transform: scaleX(-1);
}
.btn.quiz__main-footer-btn-next:disabled {
	cursor: not-allowed !important;
}
.quiz__aside-header {
	display: flex;
	align-items: center;
	gap: 20px;
}
.quiz__aside-header-img {
	flex: 0 0 100px;
	width: 100px;
	height: 100px;
	position: relative;
}
.quiz__aside-header-img-wrapper {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
}
.quiz__aside-header-img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 10;
}
.quiz__aside-header-img::after {
	content: '';
	display: block;
	width: 19px;
	height: 19px;
	background: var(--color-green-3);
	border-radius: 50%;
	border: 3px solid var(--color-gray-10);
	position: absolute;
	right: 5px;
	bottom: 3px;
	z-index: 20;
}
.quiz__aside-header-title-strong {
	font-size: 18px;
	line-height: 22px;
	font-weight: 500;
}
.quiz__aside-header-title-normal {
	font-size: 15px;
	line-height: 22px;
	color: var(--color-gray-11);
	margin-top: 7px;
}
.quiz__aside-body {
	margin-top: 22px;
}
.quiz__aside-body-items-counter {
	display: block;
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
}
.quiz__aside-body-items {
	display: block;
	position: relative;
}
.quiz__aside-body-item.--active {
	display: block;
}
.quiz__submit {
	min-height: 458px;
	padding: 50px 30px 50px 30px;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.quiz__submit.--slide-in {
	animation: slideInRight 0.4s ease-out forwards;
}
.quiz__submit-title {
	font-size: 24px;
	line-height: 30px;
	font-weight: 500;
	margin-top: calc(((30px - 24px) / 2) * -1);
}
.quiz__submit-subtitle {
	font-size: 15px;
	line-height: 22px;
	margin-top: 15px;
}
.quiz__submit-form {
	margin-top: 30px;
	width: 100%;
	max-width: 270px;
}
.quiz__submit-form .form__fields-wrapper {
	gap: 20px;
}
.quiz__submit-form .form__submit-wrapper {
	margin-top: 20px;
}
.quiz__submit-form input {
	height: 60px;
}
@media (max-width: 1240px) {
	.quiz__main {
		flex: 1 1 auto;
	}
	.quiz__aside-wrapper-desktop {
		flex: 0 0 300px;
	}
	.quiz__main-body-item-options {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}
}
@media (max-width: 768px) {
	.quiz-section {
		padding: 50px 0px 50px 0px;
	}
	.quiz-section__header.--offset-top {
		margin-top: calc((30px - 24px) * -1);
	}
	.quiz__wrapper {
		min-height: 0px;
	}
	.quiz__main-body {
		padding-top: calc(25px + 7px);
	}
	.quiz__main-body-item-title {
		font-size: 20px;
		line-height: 26px;
		margin-top: calc((26px - 20px) * -1);
	}
	.quiz__main-body-item-options {
		gap: 20px;
		margin-top: calc(25px + 3px);
	}
	.quiz__main-body-item-option {
		padding: 15px;
		gap: 15px;
	}
	.quiz__main-body-item-option-input {
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
	}
	.quiz__main-body-item-option input:checked + .quiz__main-body-item-option-input {
		background-size: 10px auto;
	}
	.quiz__main-body-item-option-text {
		font-size: 15px;
		line-height: 22px;
	}
	.quiz__main-footer {
		flex-direction: column-reverse;
		align-items: flex-start;
		gap: 15px;
		color: var(--color-gray-11);
	}
	.quiz__main-footer-counter {
		display: none;
		font-size: 14px;
		line-height: 14px;
	}
	.quiz__main-footer-counter-current {
		width: 26px;
		height: 26px;
	}
	.quiz__main-footer-btns {
		width: 100%;
		gap: 20px;
	}
	.btn.quiz__main-footer-btn-back {
		height: 50px;
		width: 50px;
	}
	.btn.quiz__main-footer-btn-next {
		flex: 1 1 auto;
		min-width: 0;
		height: 50px;
	}
	.quiz__aside-wrapper-desktop {
		display: none;
	}
	.quiz__aside-wrapper-mobile {
		margin-top: 25px;
		background: var(--color-gray-10);
		border-radius: 10px;
		padding: 25px;
		position: relative;
	}
	.quiz__aside-body-item {
		display: none;
	}
	.quiz__aside-header-img {
		flex: 0 0 60px;
		width: 60px;
		height: 60px;
		position: relative;
	}
	.quiz__aside-header-img::after {
		width: 13px;
		height: 13px;
		border: 2px solid var(--color-gray-10);
		right: 2px;
		bottom: 1px;
	}
	.quiz__aside-header-title-strong {
		font-size: 16px;
		line-height: 22px;
		text-wrap: balance;
	}
	.quiz__aside-header-title-normal {
		font-size: 14px;
		line-height: 20px;
		margin-top: 4px;
		text-wrap: balance;
	}
	.quiz__aside-header-title-normal br {
		display: none;
	}
	.quiz__aside-body {
		margin-top: 15px;
	}
	.quiz__aside-body, 
	.quiz__aside-body-items-counter {
		font-size: 15px;
		line-height: 22px;
	}
	.quiz__aside-body-items {
		transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		max-height: 66px;
		overflow: hidden;
	}
	.quiz__aside-body-items.--expanded {
		height: auto !important;
		max-height: 500px; 
	}
	.quiz__aside-body-items::after {
		content: '';
		display: block;
		width: 100%;
		height: 66px;
		position: absolute;
		left: 0;
		bottom: 0;
		background: #F0F0F5;
		background: linear-gradient(180deg,rgba(240, 240, 245, 0) 0%, rgba(240, 240, 245, 1) 100%);
	}
	.quiz__aside-body-items.--expanded::after {
		display: none;
	}
	.quiz__aside-body-items.--expanded .quiz__aside-body-item {
		position: relative !important;
	}
	.quiz__expand-btn {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, 50%);
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background: var(--color-white);
		border: 1px solid #e0e0e5;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
		transition: var(--transition);
	}
	.quiz__expand-btn svg {
		color: var(--color-gray-15);
		transition: var(--transition);
	}
	.quiz__expand-btn.--rotated svg {
		transform: rotate(180deg);
	}
	.quiz__submit {
		min-height: 0px;
		padding: 35px 35px 35px 35px;
	}
	.quiz__submit-title {
		font-size: 20px;
		line-height: 26px;
		margin-top: calc(((26px - 20px) / 2) * -1);
	}
	.quiz__submit-title, 
	.quiz__submit-subtitle {
		text-wrap: balance;
	}
	.quiz__submit-form {
		margin-top: 25px;
	}
	.quiz__submit-form input {
		height: 46px;
	}
	.quiz__submit-form .form__agree {
		padding-bottom: 3px;
		text-wrap: balance;
	}
}
@media (max-width: 549px) {
	.quiz-section {
		padding: 40px 0px 40px 0px;
	}
	.quiz__main {
		padding: 25px;
	}
	.quiz__main-header {
		padding-bottom: 20px;
	}
	.quiz__main-header-title {
		margin-top: -5px;
	}
	.quiz__main-body {
		margin-bottom: 25px;
	}
    .quiz__main-body-item-title {
        font-size: 18px;
        line-height: 24px;
        margin-top: calc((24px - 18px) * -1);
    }
	.quiz__main-body-item-options {
		gap: 15px;
		margin-top: calc(15px + 3px);
	}
	.quiz__main-footer-btns {
		gap: 15px;
	}
    .quiz__aside-wrapper-mobile {
        padding: 20px;
    }
	.quiz__aside-header-title-strong {
		font-size: 15px;
		line-height: 20px;
	}
    .quiz__submit {
        padding: 30px;
    }
}