/*
 * The prev/next lesson buttons in the course popup footer
 * (#popup-footer .course-item-nav .prev/.next) render their triangle icon
 * as a ::before on the OUTER div, not inside the <a> - so only the text is
 * actually clickable, not the icon next to it. Move the icon into the <a>
 * itself so the whole visible button (icon + text) is one clickable area.
 */
#popup-footer .course-item-nav .prev,
#popup-footer .course-item-nav .next {
	cursor: pointer;
}

#popup-footer .course-item-nav .prev::before,
#popup-footer .course-item-nav .next::before {
	content: none !important;
}

#popup-footer .course-item-nav .prev a::before {
	content: "\f0d9";
	font-family: "lp-icon";
	color: #999;
	margin-right: 10px;
}

#popup-footer .course-item-nav .next a::after {
	content: "\f0da";
	font-family: "lp-icon";
	color: #999;
	margin-left: 10px;
}

#popup-footer .course-item-nav .prev:hover a::before,
#popup-footer .course-item-nav .next:hover a::after {
	color: var(--lp-primary-color);
}