.hwcr-schedule,
.hwcr-path,
.hwcr-enrolled-class {
	margin: 1.5rem 0;
	padding: 1.25rem;
	border: 1px solid #d9dee5;
	border-radius: 8px;
	background: #fff;
}

.hwcr-schedule h3,
.hwcr-path h2,
.hwcr-enrolled-class h3 {
	margin-top: 0;
}

.hwcr-schedule-note {
	font-weight: 600;
}

.hwcr-schedule ol,
.hwcr-path-classes {
	margin: 0;
	padding-left: 1.4rem;
}

.hwcr-option {
	margin: 1rem 0;
	padding: 1rem;
	border: 1px solid #e3e7ec;
	border-radius: 7px;
	background: #fafbfc;
}

.hwcr-option-title {
	display: block;
	margin-bottom: .5rem;
}

.hwcr-option-sessions {
	margin: 0;
	padding-left: 1.25rem;
}

.hwcr-session,
.hwcr-path-classes li {
	margin: .85rem 0;
	padding-left: .35rem;
}

.hwcr-format,
.hwcr-status {
	display: inline-block;
	margin-left: .45rem;
	padding: .18rem .55rem;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
}

.hwcr-format--virtual {
	background: #e7f2ff;
	color: #135ea8;
}

.hwcr-format--in_person {
	background: #e9f8ee;
	color: #176b35;
}

.hwcr-format--evening {
	background: #f2eafe;
	color: #61359b;
}

.hwcr-path-classes li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .7rem;
	border-bottom: 1px solid #eceff3;
}

.hwcr-status--complete {
	background: #dff5e6;
	color: #176b35;
}

.hwcr-status--in-progress {
	background: #fff1c7;
	color: #775500;
}

.hwcr-status--incomplete,
.hwcr-status--not-enrolled {
	background: #eef1f5;
	color: #4d5866;
}

.hwcr-progress {
	height: .7rem;
	margin: .5rem 0 1.25rem;
	overflow: hidden;
	border-radius: 999px;
	background: #e7ebf0;
}

.hwcr-progress span {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: #238636;
}

.hwcr-instructions p:last-child {
	margin-bottom: 0;
}

.hwcr-facilitator a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hwcr-date-selector {
	margin: 1rem 0 1.25rem;
	padding: 1rem;
	border: 1px solid #d9dee5;
	border-radius: 8px;
}

.hwcr-date-selector legend {
	padding: 0 .35rem;
	font-weight: 700;
}

.hwcr-date-selector label {
	display: flex;
	align-items: flex-start;
	gap: .6rem;
	margin: .65rem 0;
	cursor: pointer;
}

.hwcr-date-selector input {
	margin-top: .3rem;
}

@media (max-width: 600px) {
	.hwcr-path-classes li {
		align-items: flex-start;
		flex-direction: column;
	}

	.hwcr-status {
		margin-left: 0;
	}
}