.wrong-question-search {
	height: vw(540);
	padding: vw(6) 0;

	.search-reset {
		color: #333;
		font-weight: 500;
		font-size: vw(16);
	}

	.search-btn {
		color: #03c777;
		font-weight: 500;
		font-size: vw(16);
	}

	.search-sort {
		padding: 0 vw(16);

		&__title {
			color: #333;
			font-weight: 500;
			font-size: vw(16);
		}

		&__btns {
			display: flex;
			justify-content: space-between;
			margin-top: vw(12);

			.sort-btn {
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
				width: vw(104);
				height: vw(32);
				color: #666;
				font-size: vw(14);
				background: #f5f5f5;
				border: 1px solid #f5f5f5;
				border-radius: vw(16);
				transition: all 0.3s ease;

				&.active {
					color: #03c777;
					background: #ecfef4;
					border: 1px solid #03c777;
				}
			}
		}
	}

	.search-checked {
		display: flex;
		justify-content: space-around;
		margin-top: vw(16);
		padding-bottom: vw(26);

		&__item {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: vw(100);

			.checked-title {
				color: #333;
				font-weight: 500;
				font-size: vw(16);
			}

			.checked-result {
				margin-top: vw(8);
				color: #666;
				font-weight: 400;
				font-size: vw(12);
			}

			&.active::after {
				position: absolute;
				bottom: -10px;
				width: vw(68);
				height: vw(2);
				margin-top: vw(8);
				background: #03c777;
				border-radius: vw(1);
				content: "";
			}
		}
	}

	.search-select {
		border-top: 8px solid #f5f5f5;

		.search-select__toolbar {
			position: relative;
			height: vw(44);
			color: #666;
			font-weight: 400;
			font-size: vw(16);
			line-height: vw(44);
			text-align: center;

			.search-select__confirm {
				position: absolute;
				top: vw(10);
				right: vw(16);
				height: vw(24);
				color: #03c777;
				font-size: vw(16);
				line-height: vw(24);
			}
		}
	}
}

.exercise-search {
	box-sizing: border-box;
	padding: 0 vw(16);
	background: #fff;
	border-radius: 10px 0 0 10px;

	&__title {
		padding: vw(16) 0;
		color: #333;
		font-weight: 500;
		font-size: vw(16);
	}

	&__item {
		display: flex;
		justify-content: space-between;
		padding-bottom: 24px;
	}

	&__name {
		display: flex;
		align-items: center;
		max-width: vw(200);
		color: #333;
		font-weight: 400;
		font-size: vw(14);
		line-height: vw(20);
	}

	&__btn {
		color: #03c777;
		font-weight: 400;
		font-size: vw(14);
	}
}

.first-chapter__bar,
.second-chapter__bar,
.third-chapter__bar {
	position: relative;
	top: vw(1);
	display: inline-block;
	display: flex;
	align-items: center;
	justify-content: center;
	width: vw(19);
	height: vw(19);
	padding-right: 5px;

	.round-ball {
		display: flex;
		align-items: center;
		justify-content: center;

		span {
			position: relative;
			top: -1px;
		}
	}
}

.first-chapter__bar .round-ball {
	width: 16px;
	height: 16px;
	color: #fff;
	background-color: #03c777;
	border-radius: 50%;
}

.second-chapter__bar .round-ball {
	width: 15px;
	height: 15px;
	color: #fff;
	background-color: #03c777;
	border-radius: 50%;
}

.third-chapter__bar .round-ball {
	width: 10px;
	height: 10px;
	color: #fff;
	background-color: #03c777;
	border-radius: 50%;
}

.first-chapter {
	position: relative;

	&::before {
		position: absolute;
		top: 5px;
		left: 9px;
		width: 2px;
		height: calc(100% - 40px);
		background-color: #03c777;
		content: "";
	}
}

.hidden-chapter-children {
	height: 0;
	overflow: hidden;
}
