.course-content-section {
	position: relative;
}

.course-content-area .student-type-switch {
	display: flex;
	position: relative;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, .2);
	margin-bottom: 0;
	padding: 0 20px;
	z-index: 1;
	height: 55px;
	align-items: center;
	justify-content: space-between;
	border: 2px solid #cdcdcd;
}

.course-content-area .domestic-students-tab,
.course-content-area .international-students-tab {
	color: #006c8b;
	font-family: "proxima-nova", Sans-serif;
	font-size: 16px;
	position: relative;
	z-index: 999;
	height: 100%;
	background: #fff;
	width: calc(50% - 25px);
	display: flex;
	align-items: center;
}

.course-content-area .international-students-tab {
	justify-content: right;
	text-align: right;
}

.domestic-active .domestic-students-tab,
.international-active .international-students-tab {
	font-weight: 700;
	pointer-events: none;
}

.international-active .domestic-students-tab,
.domestic-active .international-students-tab {
	cursor: pointer;
}

.not-available-international .switch,
.not-available-international .international-students-tab,
.not-available-domestic .switch,
.not-available-domestic .domestic-students-tab {
	filter: grayscale(100%);
	pointer-events: none;
}

.not-available-international .switch-back,
.not-available-domestic .switch-back {
	opacity: 0.3;
}

.not-available-international .international-students-tab,
.not-available-domestic .domestic-students-tab {
	color: rgba(0, 0, 0, 0.3);
}

.extended-course-info {
	/* text-align: center; */
	font-size: 15px;
	padding-top: 25px;
	padding-bottom: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 15px;

}

.extended-course-info span {
	color: var(--equals-color-blue);
	cursor: pointer;
}

.extended-course-info span:hover {
	color: var(--equals-color-orange);
}

.course-content-area .switch {
	position: absolute;
	left: 50%;
	width: 140px;
	margin-left: -70px;
	top: 50%;
	margin-top: -35px;
	height: 70px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #fff;
	box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, .2);
	border-radius: 50%;
	border: 2px solid #cdcdcd;
}


.course-content-area .switch-back {
	z-index: 1 !important;
	width: 50px !important;
	height: 25px !important;
	background-color: #3cd52e !important;
	border-radius: 50px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 3px;
	cursor: pointer;
	position: relative;
}

.course-content-area .switch-ball {
	border-radius: 50px;
	background: #fff;
	height: 19px;
	width: 19px;
	position: absolute;
	top: 50%;
	margin-top: -9.5px;
	left: 3px;
	transition: left 300ms ease-in-out;
}

.international-active .switch-ball {
	left: calc(100% - 19px - 3px);
}

.course-content-area .stats {
	background-color: #ececec;
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 0 0 10px 10px;
}

.course-content-area .stats>div {
	display: flex;
	justify-content: space-evenly;
}

.course-content-area .stats>div:last-child {
	border-top: 2px solid #cdcdcd;
}

.course-content-area .stats>div>div {
	display: flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 10px;
	width: 100%;
}

.course-content-area .stats>div>div:not(:last-child) {
	border-right: 2px solid #cdcdcd;
}

.course-info label,
.course-content-area .stats label {
	color: #006c8b;
	font-family: "proxima-nova", Sans-serif;
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.domestic-active .international-exclusive {
	display: none !important;
}

.international-active .domestic-exclusive {
	display: none !important;
}

.course-content p:not(:last-child) {
	margin-bottom: 15px;
}

.course-content>section:not(:first-child)>h4 {
	margin-top: 20px;
}

h4 {
	color: #006c8b;
	font-family: "proxima-nova", Sans-serif;
	font-size: 24px;
	font-weight: 600;
	margin-bottom: 20px;
}

#legend {
	color: #fff;
	background-color: #00c1de;
	padding: 35px;
	border-radius: 10px;
}

#legend h5 {
	color: #fff;
	font-family: "Bebas Neue" !important;
	font-weight: 500;
	font-size: 30px;
	line-height: 1;
	letter-spacing: 0px;
	word-spacing: 0px;
	margin-bottom: 20px;
}

#legend ul {
	padding: 0;
	margin: 0;
	list-style: none;
}

#legend li {
	list-style-type: none;
	border-left: 1px dotted #fff;
	margin-top: 5px;
	margin-left: 5px;
	margin-bottom: -10px !important;
	padding-bottom: 15px;
	line-height: 22px;
}

#legend li span {
	display: block;
	font-size: 16px;
	line-height: 22px;
}

#legend li a {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	display: block;
	/*width: 100%;*/
	font-weight: 600;
	color: #fff;
	font-size: 16px;
	line-height: 30px;
	top: -11px !important;
	left: -8px;
	padding-bottom: 10px !important;
	display: block;
	position: relative;
}

#legend li a:before {
	line-height: 0;
	padding-right: 10px;
	position: relative;
	content: "•";
	color: #fff;
	font-size: 40px !important;
	top: 5px !important;
}

#legend li.active a,
#legend li a:hover,
#legend li.active a:before,
#legend li a:hover:before {
	color: #006c8b;
}

#legend li:not(:last-child) {
	padding-bottom: 10px;
}

#legend li:last-child {
	border-left: 1px solid transparent;
}

#stuck-sidebar .button {
	width: 100%;
	text-align: center;
}

.course-section-anchor {
	height: 50px;
	display: block;
}

.col-md-9 {
	flex-shrink: 1;
	flex-basis: 0;
	width: 100%;
	flex-grow: 1;
}

.col-md-3 {
	min-width: 330px;
}

.modal {
	display: none;
	z-index: 99999999;
}

.modal .overlay {
	height: 100%;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.8);
	z-index: 99999999;
}

.modal header {
	background: var(--equals-color-blue);
	color: #fff;
	padding: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.modal h2 {
	font-family: var(--equals-heading-font);
	font-size: 45px;
	line-height: 1;
	font-weight: 500;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: 1px;
	margin-bottom: -6px;
}

.modal header .close-modal {
	height: 28px;
	cursor: pointer;
}

.modal header svg {
	height: 28px;
	fill: #fff;
	float: left;
	outline: 0;
	pointer-events: none;
}

.modal header .close-modal:hover svg {
	fill: var(--equals-color-orange);
}

.modal .wrapper {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 0 50px;
}

.modal .modal-content {
	background: #fff;
	border: none;
	border-radius: 0;
	max-width: 650px;
	max-height: 100%;
	overflow-y: auto;
}

.modal.is-open {
	display: block;
}

.modal .extended-course-table {
	padding: 20px;
}

.modal .extended-course-table table {
	margin: 0;
	padding: 0;
	width: 100%;
}

.modal .extended-course-table table th,
.modal .extended-course-table table td {
	padding: 10px 0;
	font-size: 16px;
	border-bottom: 1px solid #cdcdcd;
}

.domestic-active .modal .extended-course-table table tr.domestic-exclusive:nth-child(1 of .domestic-exclusive) td,
.domestic-active .modal .extended-course-table table tr.domestic-exclusive:nth-child(1 of .domestic-exclusive) th,
.international-active .modal .extended-course-table table tr.international-exclusive:nth-child(1 of .international-exclusive) td,
.international-active .modal .extended-course-table table tr.international-exclusive:nth-child(1 of .international-exclusive) th {
	padding-top: 0;
}

.domestic-active .modal .extended-course-table table tr.domestic-exclusive:nth-last-child(1 of .domestic-exclusive) td,
.domestic-active .modal .extended-course-table table tr.domestic-exclusive:nth-last-child(1 of .domestic-exclusive) th,
.international-active .modal .extended-course-table table tr.international-exclusive:nth-last-child(1 of .international-exclusive) td,
.international-active .modal .extended-course-table table tr.international-exclusive:nth-last-child(1 of .international-exclusive) th {
	border-bottom: none;
	padding-bottom: 0;
}


.modal .extended-course-table table th {
	color: var(--equals-color-blue);
	font-weight: 600;
}

.modal .extended-course-table table td {
	padding-left: 10px;
	text-align: right;
}

.course-info-row {
	position: relative;
}

.course-info {
	/* height: 100px; */
	display: flex;
	background: #ececec;
	/* border: 2px solid #cdcdcd; */
	position: absolute;
	top: calc((-90px / 2) - 65px);
	left: 65px;
	padding: 15px;
	border-radius: 10px;
	/* font-weight: bold; */
	font-size: 16px;
	width: auto;
}

.course-info label {
	text-transform: uppercase;
	line-height: 1;
	margin-bottom: 3px;
}


.course-info>div {
	display: flex;
	align-items: flex-start;
	column-gap: 15px;
}

.course-info>div>.icon .fa-circle,
.course-info>div>.icon>i {
	font-size: 40px;
	color: #006c8b;
}

.course-info>div>.icon .fa-dollar-sign {
	font-size: 17px;
	color: #006c8b;
	position: relative;
	bottom: -4px;
}

.course-info>div>div:not(.icon) {
	display: flex;
	flex-direction: column;
	font-size: 13px;
	line-height: 18px;
}

.course-info>div:not(:first-child) {
	border-left: 2px solid #cdcdcd;
	border-left: none;
	padding-left: 20px;
	margin-left: 20px;
}

.course-content-accordion-item .course-content-content {
	display: none;
	padding: 0 20px;
}

.course-content-accordion-item .course-content-content table tr:last-child th,
.course-content-accordion-item .course-content-content table tr:last-child td {
	border-bottom: 0;
}

.course-content-accordion-item h4 {
	cursor: pointer;
	color: #246A8A;
	background-color: #ececec;
	padding: 20px;
	font-size: 20px;
	border-radius: 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	transition: background-color 0.3s;
}

/* .course-content-accordion-item.active h4 {
	background-color: #246A8A;
} */

.course-content-accordion-item h4 .arrow {
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 22px;
	line-height: 1;
	height: 30px;
	width: 30px;
	background: #006c8b;
	color: #fff;
	display: flex;
	border-radius: 50%;
}

.course-content-accordion-item h4 .arrow:after {
	content: "\f107";
	font-family: "Font Awesome 6 Free";
	transition: transform 0.3s;
	transform: translateY(2px);
}

.course-content-accordion-item.active h4 .arrow:after {
	transform: rotate(180deg) translateY(1px);
}


.stats-new {
	display: block;
	background-color: #ececec;
	padding: 20px;
	margin-bottom: 30px;
	border-radius: 0 0 10px 10px;
}

.stats-new ul {
	columns: 3;
	column-gap: 20px;
	column-rule: 2px solid #cdcdcd;
	padding: 0;
	margin: 0 0 40px 0;
}

.stats-new ul li {
	margin-left: 30px;
}

.features {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding-bottom: 15px;
	row-gap: 50px;
	justify-content: center;
}

.features .icon {
	text-align: center;
	justify-content: center;
	position: relative;
	color: var(--equals-color-blue);
	width: calc(100%/3);
	display: flex;
	align-items: center;
	column-gap: 20px;
}

.features .icon .icon-side {
	position: relative;
}

.features .icon .label-side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.features .icon .icon-number {
	display: block;
	position: absolute;
	top: 23px;
	left: 0;
	right: 0;
	width: 100%;
	font-weight: 600;
	font-size: 16px;
}

.features .icon i {
	font-size: 70px;
}

.features .icon h4 {
	color: #333;
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 0;
}

@media screen and (max-width: 1000px) {
	.course-page .row {
		flex-direction: column-reverse;
	}

	.col-md-9,
	.col-md-3 {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.col-md-3 {
		margin-top: -50px;
		padding-bottom: 25px;
	}

	#legend {
		position: fixed;
		top: auto;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 15px 0;
		max-height: 50vh;
		z-index: 9999;
		border-radius: 10px 10px 0 0;
	}

	#legend h5 {
		margin-bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 15px;
	}

	#legend h5:after {
		content: "\f077";
		font-family: "Font Awesome 6 Free";
		font-weight: 900;
		transition: 300ms;
	}

	#legend ul {
		margin-top: 15px;
		padding: 15px;
		display: none;
		transition: 300ms;
		max-height: calc(50vh - 45px);
		overflow-y: auto;

		background:
			/* Shadow Cover TOP */
			linear-gradient(#00c1de 30%, rgba(255, 255, 255, 0)) center top,
			/* Shadow Cover BOTTOM */
			linear-gradient(rgba(255, 255, 255, 0), #00c1de 70%) center bottom 14px,
			/* Shadow TOP */
			radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)) center top,
			/* Shadow BOTTOM */
			radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)) center bottom 14px;
		background-repeat: no-repeat;
		background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
		background-attachment: local, local, scroll, scroll;
	}

	#legend.open h5:after {
		transform: rotate(180deg);
	}

	#legend.open ul {
		display: block;
	}

	.features {
		justify-content: center;
		flex-direction: column;
		align-items: center;
	}

	.features .icon {
		width: 100%;
		justify-content: flex-start;
		/* text-align: left; */
	}

	.features .icon .label-side {
		text-align: left;
	}
}

@media screen and (max-width: 870px) {
	.course-info {
		background: none;
		height: auto;
		position: static;
		border: none;
		padding: 25px;
		padding-top: 0;
		margin-bottom: 25px;
		/* margin-top: -25px; */
		width: 100%;
		top: 0;
		row-gap: 15px;
		/* left: 15px;
		display: block;
		columns: 4;
		gap: 15px;
        column-rule: 2px solid #cdcdcd; */
		display: flex;
		flex-wrap: wrap;
	}

	.course-info>div {
		width: 50%;
		break-inside: avoid;
	}

	.course-info div:not(:first-child) {
		/* border: none; */
		/*padding: 12.5px 0;*/
		margin: 0;
		/* padding: 0; */
	}

	.course-info div:nth-child(3) {
		padding-left: 0;
		border-left: 0;
	}

	.course-content-area .stats>div {
		flex-direction: column;
		border-top: none !important;
	}

	.course-content-area .stats>div>div {
		border-right: none !important;
		border-bottom: 2px solid #cdcdcd !important;
	}

	.course-content-area .stats>div:last-child>div:last-child {
		border-bottom: none !important;
	}

	.modal .wrapper,
	.body-content {
		padding-left: 25px;
		padding-right: 25px;
	}

	.modal h2 {
		font-size: 25px;
		margin-bottom: -3px;
	}

	.modal header .close-modal,
	.modal header svg {
		height: 20px;
	}

	.extended-course-table table {
		display: flex;
		flex-direction: column;
	}

	.extended-course-table tr {
		display: flex;
		flex-direction: column;
	}

	.domestic-active .modal .extended-course-table table tr.domestic-exclusive:nth-child(1 of .domestic-exclusive) td,
	.international-active .modal .extended-course-table table tr.international-exclusive:nth-child(1 of .international-exclusive) td {
		padding-top: 5px;
	}

	.extended-course-table table th {
		border-bottom: 0 !important;
		padding-bottom: 0 !important;
	}

	.extended-course-table table td {
		display: block;
	}

	.modal .extended-course-table table td {
		text-align: left;
		padding-left: 0;
		padding-top: 5px;
	}

	.modal .wrapper {
		padding-left: 0;
		padding-right: 0;
	}

	.modal .modal-content {
		height: 100%;
		max-width: none;
	}

	.stats-new ul {
		columns: 2;
	}
}

@media screen and (min-width: 768px) {
	#stuck-sidebar {
		position: sticky;
		top: 115px;
		z-index: 9999999;
	}
}

@media screen and (max-width: 600px) {
	.stats-new ul {
		columns: 1;
	}
}

@media screen and (max-width: 450px) {
	.features .icon {
		width: 100%;
	}
}

@media screen and (max-width: 440px) {
	.course-info {
		flex-direction: column;
		row-gap: 0;
	}

	.course-info>div {
		border: 0 !important;
		padding: 20px 0 !important;
		margin: 0 !important;
		width: 100%;
	}

	.course-info>div>.icon {
		width: 50px;
		flex-shrink: 0;
	}

	.course-info>div:not(:first-child) {
		border-top: 2px solid #cdcdcd !important;
		border-top: none !important;
	}
}
