.legacy-content--checklist .checklist-table {
	max-width: 100%;
	width: 100%;
	display: table;
	table-layout: auto;
	border-collapse: collapse;
	margin: 2rem 0;
	border: 1px solid #d4d4d8;
	border-radius: 16px;
	overflow: visible;
}

.legacy-content--checklist .checklist-table thead {
	position: sticky;
	top: 5.25rem;
	z-index: 20;
	th {
		border-bottom: none;
		padding: 0;
		background: #fafafa;
	}
	tr:last-child th {
		padding: 0 8px 8px 8px;
	}
}

.legacy-content--checklist .checklist-table th,
.legacy-content--checklist .checklist-table td {
	padding: 12px;
	text-align: left;
	border-bottom: 1px solid #ccc;
}

.legacy-content--checklist .checklist-table th:first-child,
.legacy-content--checklist .checklist-table td:first-child {
	width: 76px;
	text-align: center;
}

.legacy-content--checklist .checklist-table th:nth-child(3),
.legacy-content--checklist .checklist-table td:nth-child(3),
.legacy-content--checklist .checklist-table th:nth-child(4),
.legacy-content--checklist .checklist-table td:nth-child(4) {
	width: 112px;
}

.legacy-content--checklist .checklist-table td:nth-child(2) {
	display: flex;
	gap: 16px;
	align-items: baseline;

	label {
		font-weight: 500;
		font-size: 16px;
	}
	a {
		text-decoration: underline;
		&:hover {
			text-decoration: none;
		}
		&:before {
			display: none !important;
		}
	}
}

@media (max-width: 800px) {
	.legacy-content--checklist .checklist-table {
		display: block;
		border: 0;
		border-radius: 0;
	}

	.legacy-content--checklist .checklist-table thead {
		position: static;
		display: block;
	}

	.legacy-content--checklist .checklist-table thead tr:first-child,
	.legacy-content--checklist .checklist-table thead th,
	.legacy-content--checklist .checklist-table tbody {
		display: block;
		width: 100%;
	}

	.legacy-content--checklist .checklist-table thead tr:last-child {
		display: none;
	}

	.legacy-content--checklist .checklist-table tbody {
		display: grid;
		gap: .75rem;
		margin-top: .75rem;
	}

	.legacy-content--checklist .checklist-table tbody tr {
		display: grid;
		grid-template-columns: 38px minmax(0, 1fr) auto auto;
		gap: .65rem;
		align-items: start;
		padding: .9rem;
		border: 1px solid #e4e4e7;
		border-radius: 14px;
		background: #fff;
	}

	.legacy-content--checklist .checklist-table th,
	.legacy-content--checklist .checklist-table td {
		display: block;
		width: auto !important;
		padding: 8px;
		font-size: 14px;
		border: 0;
	}

	.legacy-content--checklist .checklist-table td:first-child {
		grid-column: 1;
		grid-row: 1 / span 2;
		padding: .2rem 0;
	}

	.legacy-content--checklist .checklist-table td:nth-child(2) {
		grid-column: 2 / -1;
		display: flex;
		flex-direction: column;
		gap: .35rem;
		padding: 0;
	}

	.legacy-content--checklist .checklist-table td:nth-child(2) label {
		font-size: 15px;
		line-height: 1.35;
	}

	.legacy-content--checklist .checklist-table td:nth-child(3),
	.legacy-content--checklist .checklist-table td:nth-child(4) {
		padding: 0;
	}

	.legacy-content--checklist .checklist-table td:nth-child(3) {
		grid-column: 2;
	}

	.legacy-content--checklist .checklist-table td:nth-child(4) {
		grid-column: 3;
	}
}

.legacy-content--checklist .checklist-table th {
	background-color: #f5f5f5;
}

.tag,
.tag {
	font-size: 12px;
}

/* Priority levels */
.tag.high {
	background: #d32f2f;
	color: #ffffff;
}

.tag.medium {
	background: #2e7d32;
	color: #ffffff;
}

.tag.low {
	background: #2e7d32;
	color: #ffffff;
}

/* Difficulty levels */
.tag.hard {
	background: #d32f2f;
	color: #ffffff;
}

.tag.medium {
	background: #2e7d32;
	color: #ffffff;
}

.tag.easy {
	background: #2e7d32;
	color: #ffffff;
}

.legacy-content--checklist .checklist-table .tag {
	padding: 4px 8px;
	border-radius: 4px;
	color: #ffffff;
	font-weight: 300;
}

@media (max-width: 800px) {
	.tag {
		padding: 2px 6px;
		font-size: 12px;
	}
}

.progress-wrapper {
	width: 100%;
	padding: .75rem;
}

.progress-container {
	width: 100%;
	height: 16px;
	background: #000;
	overflow: clip;
	@media screen and (max-width: 800px) {
		height: 8px;
	}
}

.progress-indicator {
	height: 100%;
	width: 0;
	background: #7eb01e;
	transition: width 0.3s ease-in-out;
}

.progress-status {
	text-align: center;
	margin-top: 5px;
	font-weight: 600;
	color: #333333;
}
@media (max-width: 800px) {
	.progress-status {
		font-size: 14px;
		margin-top: 3px;
	}
}

.custom-checkbox {
	position: relative;
	width: 1.5em;
	height: 1.5em;
	cursor: pointer;
	appearance: none;
	border: 1px solid #333;
	border-radius: 4px;
	outline: none;
	transition: all 0.2s;
	font-size: 16px;
	margin-bottom: -0.4em;
}

@media (max-width: 800px) {
	.custom-checkbox {
		font-size: 12px;
	}
}

.custom-checkbox:checked {
	background: #333333;
	border-color: #333333;
}

.custom-checkbox:checked:after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 0.25em;
	height: 0.625em;
	border: solid #ffffff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}