.course-card {
	border: 1px solid #e5e5e5;
	border-radius: 8px;

	padding: 1rem 1.5rem;

	margin-top: 1rem;

	overflow: hidden;
	position: relative;

	.course-card-description {
		padding-left: 1.5rem;
	}

	&::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		width: 6px;
		background: var(--card-color);
	}

	section > * {
		margin-bottom: 2px;
	}

	section.course-card--disabled {
		opacity: 0.5;
	}

	section + section {
		margin-top: 1rem;
	}

	h4 {
		font-size: 1rem;
		font-weight: 700;
		color: $bt-base-text;
		line-height: 1.5;

		> .custom-checkbox {
			display: flex;
			flex-direction: row;
			align-items: center;

			label {
				flex: 1;
			}
		}
	}

	p {
		font-size: 14px;
		color: $bt-light-text;
	}

	.course-card-scroll {
		padding-left: 4px;
		margin: 0.5rem 0;
	}

	.section-label {
		color: $bt-light-text;
		font-size: 14px;
		font-weight: 400;
		margin-left: 4px;

		.section-label-box {
			display: inline-block;
			height: 1em;
			width: 1em;
			border-radius: 4px;
			margin-right: 0.5em;
			margin-bottom: -1.5px;
		}
	}
}

.scheduler-course {
	+ .scheduler-course {
		margin-top: 1rem;
		border-top: 1px solid $bt-light-border-grey;
		padding-top: 1rem;
	}

	.scheduler-status {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 1.5rem;
		font-size: 18px;
		text-align: center;
		color: $bt-light-text;
	}

	.scheduler-course-header {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0;
		margin-top: 2px;

		position: relative;
		padding-left: 16px + 8px;

		.scheduler-course-square {
			position: absolute;
			left: 0;
			width: 16px;
			height: 16px;
			border-radius: 3px;
			margin-right: 8px;
		}

		.scheduler-course-title {
			margin-right: auto !important;
			font-weight: bold;
			color: $bt-base-text;
			font-size: 1rem;
			line-height: 1rem;
		}

		.scheduler-course-name {
			margin-right: auto !important;
			color: $bt-light-text;
			font-size: 0.85rem;
			line-height: 1.8;
		}

		.scheduler-course-icon {
			width: 24px;
			height: 24px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;

			opacity: 0.5;
			transition: 0.5s;

			&:hover {
				opacity: 1;
			}
		}

		.scheduler-course-expand {
			svg {
				transition: 0.2s ease all;
			}
		}

		.scheduler-course-remove {
			color: $bt-indicator-red;
			padding: 2px;
			border-radius: 4px;

			&:hover {
				opacity: 1;
				background: rgba(224, 185, 185, 0.4);
			}
		}
	}
}
