@width: 50%;

#course-content-view {
	.course-content-header {
		border-bottom: 1px solid #e5e5e5;
		padding: 10px 1%;

		.title {
			font-size: 20px;
		}		

		#course-content-select {
			width: 100%;
			height: 45px;
		}
	}

	#loading-container {
		width: 100%;
		margin: 120px 0;
		text-align: center;

	}

	#hide-course-content {
		width: 98%;
		margin: 1%;
	}

	#course-lessons-container {
		overflow-y: scroll; /* has to be scroll, not auto */
		-webkit-overflow-scrolling: touch;
		padding: 0 20px;
	}

	.lesson-container {
		margin: 5px 0;
	}

	.lesson-label {
		font-size: 19px;
		border-bottom: 1px solid #ddd;
		padding: 7px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;

		span {
			display: inline-block;
			width: 75%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			vertical-align: middle;			
		}

		&.lesson-completed {
			color: #27AE60;
		}

		&.active-chapter {
			
			.right-arrow {
				display: inline-block;
				vertical-align: middle;
				padding-right: 8px;				
			}

			span, .right-arrow {
				color: #c0392b;
			}
		}

		.right-arrow {
			display: none;
		}

		.chapter-nav {
			vertical-align: middle;
	
		}
	}

	.lesson-videos-list, .lesson-notes-list, .lesson-exercise-list {
		list-style: none;
		margin: 0;
		padding: 0;

		li {
			padding-left: 10px;
			padding-top: 5px;
			padding-bottom: 5px;			
			margin: 7px 0;
			font-size: 18px;
			min-height: 42px;

			&.completed {
				color: #27AE60;

				a {
					color:  #27AE60;
				}
			}

			i {
				margin-right: 5px;
			}

			a { 
				vertical-align: middle;
				color: #2980B9;

				&:hover {
					text-decoration: underline;
				}

			}
			

			&.active-exercise {
				background-color: rgba(233, 244, 251, 1);
			}

			.view-student-answers-link {
				margin-left: 4px;
			}
		}
	}
	.purchase-content-button {
		margin: 20px 0;
		width: 100%;
		line-height: 30px;

		font-weight: bold;
		font-size: 18px;
		
		i, span {
			
		}

		i {
			margin-lefT: 15px;
		}
	
	}

}