.section.free-test {
	width: 100%;
	height: calc(100vh - 85px);
	background-color: #fff
}

.free-test__container {
	padding: 100px 30px
}

.free-test__container .logo {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 80px
}

.test__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 50px
}

.test__head-item {
	display: flex;
	flex-direction: column
}

.test__question-counter,
.time-left {
	font-size: 52px;
	font-weight: 700
}

.test__question-description {
	font-size: 32px;
	font-weight: 400;
	margin-bottom: 50px
}

.test__question-button {
	padding: 10px 32px;
	font-size: 20px;
	text-transform: none;
	font-weight: 300;
	border-radius: 6px;
	transition: .2s;
	border: 1px solid transparent
}

.test__question-buttons {
	display: flex;
	align-items: center;
	gap: 15px
}

.test__question-skip {
	color: #242833;
	border: 1px solid #242833;
	background-color: #fff
}

.test__question-skip:hover {
	color: #fff;
	border: 1px solid #242833;
	background-color: #242833
}

.test__question-answer {
	color: #fff;
	border: 1px solid #17234b;
	background-color: #17234b
}

.test__question-answer:hover:not([disabled]) {
	color: #fff;
	border: 1px solid #1b42c2;
	background-color: #1b42c2
}

.test__hint-title {
	font-size: 18px;
	color: #216b92;
	margin-bottom: 30px
}

.test__hint-description--blue {
	color: #216b92
}

.test__question--blue {
	color: #216b92;
	font-weight: 300 !important
}

.test__answers-wrapper {
	display: grid;
	grid-template-columns: repeat(5, auto);
	gap: 25px;
	margin-bottom: 60px
}

.test__answer {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer
}

.test__answer-input__text {
	border: 2px solid #000;
	border-radius: 6px;
	padding: 16px;
	min-width: 450px;
	font-size: 18px
}

.test__image--wrapper {
	display: flex;
	align-items: center
}

.test__answer img {
	cursor: pointer;
	width: 150px;
	height: 150px
}

.test__answer.correct label {
	border: 10px solid #96c168
}

.test__answer.incorrect label {
	border: 10px solid #ac192b
}

.test__answer input {
	position: absolute;
	z-index: -1;
	top: 50%;
	opacity: 0
}

.test__hint {
	font-size: 20px;
	font-weight: 300
}

.test__first-hint {
	margin-bottom: 44px;
	max-width: 900px
}

.test__second-hint {
	margin-bottom: 90px
}

button.test-button__answer {
	width: max-content;
	height: auto;
	padding: 0
}

button.test-button__answer label {
	display: block;
	padding: 18px 30px;
	border-radius: 5px;
	border: 1px solid #b8b8b8;
	background-color: #fff;
	color: #242833;
	transition: .2s
}

.test-button__answer input:checked+label {
	background-color: #17234b;
	border: 1px solid #17234b;
	color: #fff
}

button.test-button__answer.correct-answer label {
	background-color: #96c168;
	border: 1px solid #96c168;
	color: #fff
}

button.test-button__answer.incorrect-answer label {
	background-color: #ac192b;
	border: 1px solid #ac192b;
	color: #fff
}

.test-math-input__wrapper {
	max-width: 450px;
	width: 100%;
	padding: 17px 42px;
	border: 2px solid #000;
	border-radius: 6px
}

.test-math-input__wrapper input {
	width: 100%
}

.test-math-input__wrapper.correct-answer {
	border: 2px solid #118941;
	color: #118941
}

.button-math.button-math-answer {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #c4c4c4;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative
}

.test-input__wrapper-m {
	display: flex;
	align-items: flex-end;
	gap: 16px
}

.test-input__wrapper-m span {
	color: #216b92;
	font-size: 20px;
	line-height: 28px;
	font-weight: 300
}

.button-math.button-math-answer label {
	width: 100%;
	height: 100%
}

.button-math.button-math-answer input {
	position: absolute;
	top: 50%;
	opacity: 0;
	z-index: -1
}

.button-math.button-math-answer.active {
	color: #fff;
	background-color: #17234b;
	border: 1px solid #17234b
}

.section.free-test {
	width: 98%;
	height: 85vh;
	background-color: #fff
}

.free-test__container {
	padding: 100px 30px
}

.free-test__container .logo {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-bottom: 80px
}

.test__head {
	display: flex;
	justify-content: space-between;
	margin-bottom: 50px
}

.test__question-counter,
.time-left {
	font-size: 52px;
	font-weight: 700
}

.test__question-description {
	font-size: 32px;
	font-weight: 400;
	margin-bottom: 50px
}

.test__question-button {
	padding: 10px 32px;
	font-size: 20px;
	text-transform: none;
	font-weight: 300;
	border-radius: 6px;
	transition: .2s;
	border: 1px solid transparent
}

.test__question-buttons {
	display: flex;
	align-items: center;
	gap: 15px
}

.test__question-skip {
	color: #242833;
	border: 1px solid #242833;
	background-color: #fff
}

.test__question-skip:hover {
	color: #fff;
	border: 1px solid #242833;
	background-color: #242833
}

.test__question-answer {
	color: #fff;
	border: 1px solid #17234b;
	background-color: #17234b
}

.test__question-answer:hover:not([disabled]) {
	color: #fff;
	border: 1px solid #242833;
	background-color: #242833
}

.test__answers-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	margin-bottom: 60px;
	height: auto
}

.test__answer {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer
}

.test__answer label {
	padding: 10px;
	border: 10px solid transparent;
	cursor: pointer;
	transition: .3s
}

.test__answer input:checked~label {
	border: 10px solid #979797
}

.test__answer.correct label {
	border: 10px solid #96c168
}

.abort-test__button {
	font-size: 18px
}

.test__training-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px
}

.test__answer.incorrect label {
	border: 10px solid #ac192b
}

.test__answer-divider {
	margin-left: 15px;
	width: 1px;
	height: calc(100px);
	display: block;
	background-color: #989898
}

.test__answer input {
	position: absolute;
	z-index: -1;
	top: 50%;
	opacity: 0
}

button.test-button__answer {
	position: relative
}

button.test-button__answer input {
	position: absolute;
	top: 50%
}

button.test-button__answer label {
	cursor: pointer;
	padding: 18px 30px;
	border-radius: 5px;
	border: 1px solid #b8b8b8;
	background-color: #fff;
	color: #242833;
	transition: .2s
}

button.test-button__answer input:checked label {
	background-color: #17234b;
	border: 1px solid #17234b;
	color: #fff
}

button.test-button__answer.correct-answer label {
	background-color: #96c168;
	border: 1px solid #96c168;
	color: #fff
}

button.test-button__answer.incorrect-answer label {
	background-color: #ac192b;
	border: 1px solid #ac192b;
	color: #fff
}

.test__question-answers {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	width: 100%
}

.test__question-answers.math-buttons {
	display: flex;
	gap: 25px;
	font-size: 24px
}

.test__question-answers.image-buttons {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 15px
}

.test-math-input__wrapper {
	max-width: 450px;
	width: 100%;
	padding: 17px 42px;
	border: 2px solid #000;
	border-radius: 6px
}

.test-math-input__wrapper input {
	width: 100%;
	font-size: 24px
}

.test-math-input__wrapper.correct-answer {
	border: 2px solid #118941;
	color: #118941
}

.buttons-math__wrapper {
	display: flex;
	flex-direction: column;
	gap: 10px
}

.button-math.button-math-answer {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	border: 1px solid #c4c4c4;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	transition: .2s
}

.button-math.button-math-answer label {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer
}

.button-math.button-math-answer input {
	position: absolute;
	top: 50%;
	opacity: 0;
	z-index: -1
}

.button-math.button-math-answer input:checked~label {
	color: #fff;
	background-color: #17234b;
	border: 1px solid #17234b;
	border-radius: 50%
}

.button-math.button-math-answer.active,
.button-math.button-math-answer:hover {
	color: #fff;
	background-color: #17234b;
	border: 1px solid #17234b;
	border-radius: 50%
}

.button-math.button-math-answer.correct-answer {
	color: #fff;
	background-color: #118941;
	border: 1px solid #118941
}

.button-math.button-math-answer.incorrect-answer {
	color: #fff;
	background-color: #ac192b;
	border: 1px solid #ac192b
}

.test__question--img {
	max-width: 400px;
	height: auto;
	max-height: 300px;
	margin-bottom: 30px
}

@media (max-width:1024px) {
	.test__question-answers.math-buttons {
		gap: 15px;
		font-size: 18px
	}

	.button-math.button-math-answer {
		width: 30px;
		height: 30px
	}

	.test__answer-divider {
		height: 75px
	}

	.test__answer img {
		width: 100px;
		height: 100px
	}

	.free-test__container {
		padding: 80px 30px
	}

	.free-test__container .logo {
		margin-bottom: 60px
	}

	.test__question-counter,
	.time-left {
		font-size: 46px
	}

	.test__head {
		margin-bottom: 40px
	}

	.test__question-description {
		font-size: 24px
	}
}

@media (max-width:768px) {
	.test-input__wrapper-m {
		flex-direction: column;
		align-items: flex-start;
		width: 100%
	}

	.test__answer-input__text {
		max-width: 450px;
		min-width: unset;
		width: 100%
	}

	.test-input__wrapper-m span {
		font-size: 14px;
		line-height: 21px
	}

	.test__training-header {
		flex-direction: column-reverse
	}

	.free-test__container {
		padding: 30px 30px
	}

	.free-test__container .logo {
		margin-bottom: 30px
	}

	.test__question-counter,
	.time-left {
		font-size: 30px
	}

	.test__finish {
		font-size: 16px
	}

	.test__head {
		margin-bottom: 30px;
		gap: 15px
	}

	.test__question-description {
		font-size: 18px;
		margin-bottom: 40px
	}

	button.test-button__answer label {
		padding: 12px 20px
	}
}

@media (max-width:475px) {
	.test__head {
		display: flex;
		flex-direction: column-reverse;
		gap: 10px
	}

	.test__finish {
		margin-bottom: 20px
	}
}

button.test-button__answer {
    display: inline-block; 
    vertical-align: top;
    padding: 0;
    position: relative;
    white-space: normal; 
    overflow: hidden; 
    max-width: 100%; 
    box-sizing: border-box; 
}

button.test-button__answer label {
    display: block;
    padding: 18px 30px;
    border: 1px solid #b8b8b8;
    background-color: #fff;
    color: #242833;
    transition: .2s;
    word-break: break-word; 
    box-sizing: border-box; 
    max-width: 100%; 
}