/* common */

img { max-width: 100%; }

iframe { max-width: 95% !important; }

a,
a:link,
a:visited { text-decoration: underline; color: #523167; }
a:focus,
a:hover { text-decoration: none; }


a.button,
a.button:link,
a.button:visited { text-decoration: none; color: #ffffff; margin: 0; }

a.button:focus,
a.button:hover {color: #0177ad; }

a.white-button,
a.white-button:link,
a.white-button:visited						{ background-color: #ffffff; color: #523167; transition: all 0.5s ease-in-out; border-color: #ffffff; display: inline-flex; align-items: center;	}
a.button-icon-end i							{ margin-left: 65px; border: 2px solid #523167; display: block; border-radius: 100%; }
a.white-button.button-icon-end:hover i		{ border: 2px solid transparent; }


a.purple-button,
a.purple-button:link,
a.purple-button:visited						{ background-color: #523167; color: #ffffff; transition: all 0.5s ease-in-out; border-color: #523167; display: inline-flex; align-items: center;	}
a.purple-icon-end i							{ margin-left: 65px; border: 2px solid #0177ad; display: block; border-radius: 100%; }
a.purple-button.button-icon-end:hover i		{ border: 2px solid transparent; }

a.extra-padding { padding: 20px 40px; margin: 20px 0; }

a.large-button		{ height: 100%; color: #ffffff; text-decoration: none; background-color: #0177ad; padding: 30px 55px; border-radius: 0; text-transform: none; font-size: 1.2em; transition: all 0.5s ease-in-out; font-family: Nunito,sans-serif; border-radius: 4px; margin: 30px 0; display: inline-block; font-weight: bold; }
a.large-button:focus,
a.large-button:hover { background-color: #07b1ff; }

.equal-size-button { min-width: 380px; text-align: center;  }

.no-wrap-button { white-space: nowrap; }



/* columns */

.columns	{ overflow: visible;}
.column-33	{ width: 32%; }
.column-30	{ width: 29%; }
.column-25	{ width: 24%; }
.column-20	{ width: 19%; }
.column-10	{ width: 9%; }

.full-width { width: 100%; }
.half-width { width: 50%; }


.center-form-block { width: 33%; min-width: 300px; margin: 0 auto 40px;  }
.center-form-block form { padding: 5% 0; width: 100%; }

.teacher { bottom: 0; right: 0; position: fixed;}


.alignRight { text-align: right; }

#sidebar li a { display: flex;     justify-content: space-between; }
.locked:after { content: '\f023'; font-family: 'Font Awesome 5 Pro'; font-weight: 700; display: block; right: 0; color: #523167; }
.completed:after { content: '\f058'; font-family: 'Font Awesome 5 Pro'; font-weight: 500; display: block; right: 0; color: #64da00; }
.incomplete:after { content: '\f09c'; font-family: 'Font Awesome 5 Pro'; font-weight: 700; display: block; right: 0; color: #0177ad; }


.bold { font-weight: bold; }

.course_icon { border-radius: 180px; float: left; max-width: 44px; margin: 0 15px 0 0; }

.no-bottom-padding	{ padding-bottom: 0; }
.no-top-padding		{ padding-top: 0; }

.no-bottom-margin	{ margin-bottom: 0; }
.no-top-margin		{ margin-top: 0; }
.no-margin			{ margin: 0; }

.header-spacer			{ padding-top: 80px; }
.header-spacer-small	{ padding-top: 40px; }


#header #control a:hover:before { display: none; }

.meta { color: #000000; }


/* Responses */

.alert  { padding: 0px 10px; border-radius: 3px; margin-bottom: 10px; }
.alert ul { list-style: none; margin: 0; padding: 0;}
.alert li { }
.alert-danger { color: #ffffff; background-color: #900909; border: 1px solid #900909; }
.alert-info { color: #ffffff; background-color: #099013; border: 1px solid #099013; }



/* Pages */
#page-login .logo { position: relative; text-align: center; left: auto; margin: 12px auto 20px; }
#page-login #content  { padding-top: 0; }
#page-login .fullpage { min-height: 100vh; }
.new-content-wrapper img { width: auto; }


/* dashboard */
#dashboard_overview { min-height: 500px; }
#dashboard_overview h1 {font-size: 140%; }

h2.course_title { font-size: 140%; }


/* courses */
#grade_progress  { position: relative; top: auto; }
#sidebar .tab-content a { text-decoration: none; }
#sidebar .tab-content a:hover { text-decoration: underline; }
#lesson img { width: auto;}

#lesson .course_meta h2 { font-size: 1em; }



/* view student or teacher */
#sidebar .users li a,
.users li a,
.users a	{ display: flex; justify-content: flex-start; flex-wrap: wrap; text-decoration: none; border-bottom-color: #cccccc; }
#student-list a { padding: 0;}
.users img { float: none; }
.users .group { position: relative; left: auto;  }
.users .profile { display: flex; padding: 14px 20px; width: calc(50% - 40px); word-break: break-word; }


#student-header			{ display: flex; }
#student-header img		{ max-height: 200px; width: auto; height: auto; }
#student-header	.meta-info	{ font-size: 0.8em; letter-spacing: 1px; color: #777; }

#student-info { position: relative; left: auto; top: auto; padding: 20px; min-height: 100px; }
#student-header .icon-menu { position: relative; left: auto; top: auto; margin-left: auto; padding: 20px; flex-shrink: 0; }

.block-line-list { display: flex;  }
.block-line-list span.item { padding-left: 5px; display: inline-block; }
.block-line-list .list-icon { position: relative; left: auto; top: auto; right: auto; display: inline-flex; text-decoration: none; margin-left: 10px; }
.block-line-list .list-icon i { font-size: 22px; color: #aaa; }
.block-line-list .list-icon:hover i { color: #523167; }


/* popup */

.white-popup  { padding: 0; max-width: 90%; }
.popup  { padding: 0; min-width: 90%; max-width: 500px;  }

/* table */
table { width: 100%; color: #000000; border-collapse: collapse;}
table th { font-weight: bold; border-bottom: 1px solid #888888; padding: 3px 10px; text-align: left; }
table td { border-bottom: 1px solid #888888; padding: 3px 10px; text-align: left; }



/* div tables */

.table-additional { display: block; }
.table-row-additional { display: flex; justify-content: space-between; border-bottom: 1px solid #f0f0f0; }
.table-row-additional span { float: none; flex: 1; text-align: center; text-align: center; align-self: center; }


.flex { display: flex;  justify-content: space-between; }
.flex > div { /*display: flex;*/ /*max-width: 50%;*/ }
.flex-start { display: flex;  justify-content: flex-start; }
.flex-wrap { flex-wrap: wrap; }

.vertical-align-center { align-items: center; }
.flex-center { display: flex; align-items: center; }
.mfp-content .flex-center > div { display: flex; align-items: center; max-width: 50%; }

.align-end { margin-left: auto; }

.menu-vertical .list-block { padding:14px 20px; border-bottom:1px solid #f0f0f0;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out; }
.menu-vertical .list-block:hover{background:#f1f1f1}


.mfp-content form { padding: 5% 0; width: 100%; }
.mfp-content form.no-top-padding { padding-top: 0; }
form .menu-vertical li {
    display: block;
    padding: 9px;
    border: 1px solid #DDD;
   /* margin-bottom: 30px;*/
    border-radius: 3px;
}


.loading-block { padding: 20px; text-align: center; font-weight: bold; text-transform: uppercase; }


.mobile-nav-show { display: none !important; }




/* Progress Bar */

.progress-bar { position: relative; color: #ffffff; border-radius: 3px; background-color: #cad2d6; overflow: hidden; }
.progress-bar-status { color: #ffffff; padding: 2px 0; height: 15px;  position: relative; z-index: 1;}
.progress-bar-value { width: 100%; text-align: center; height: 19px; font-size: 0.7em;position: absolute; top: 0; left: 0; z-index: 2; font-weight: bold; }
.progress-bar-progress { background-color: #0177ad; }
.progress-bar-complete { background-color: #19891a; }



input:checked ~ .tab-content { padding: 40px; /*max-height: 100vh;*/ max-height: 99999px; }



/*-------------------------
- Mobile Menu
-------------------------*/


#sidr{display:none;position:absolute;position:fixed;top:0;height:100%;z-index:999999;width:250px;overflow-x:none;overflow-y:auto;font-family: 'Ubuntu', serif;font-size:15px;background:#f8f8f8;color:#333;-webkit-box-shadow:inset 0 0 5px 5px #ebebeb;-moz-box-shadow:inset 0 0 5px 5px #ebebeb;box-shadow:inset 0 0 5px 5px #ebebeb}.sidr .sidr-inner{padding:0 0 15px}.sidr .sidr-inner>p{margin-left:15px;margin-right:15px}.sidr.right{left:auto;right:-260px}.sidr.left{left:-260px;right:auto}.sidr h1,.sidr h2,.sidr h3,.sidr h4,.sidr h5,.sidr h6{font-size:11px;font-weight:normal;padding:0 15px;margin:0 0 5px;color:#333;line-height:24px;background-image:-webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #dfdfdf));background-image:-webkit-linear-gradient(#ffffff,#dfdfdf);background-image:-moz-linear-gradient(#ffffff,#dfdfdf);background-image:-o-linear-gradient(#ffffff,#dfdfdf);background-image:linear-gradient(#ffffff,#dfdfdf);-webkit-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 3px rgba(0,0,0,0.2);box-shadow:0 5px 5px 3px rgba(0,0,0,0.2)}.sidr p{font-size:13px;margin:0 0 12px}.sidr p a{color:rgba(51,51,51,0.9)}.sidr>p{margin-left:15px;margin-right:15px}.sidr ul{display:block;margin:0 0 15px;padding:0;border-top:1px solid #dfdfdf;border-bottom:1px solid #fff}.sidr ul li{display:block;margin:0;line-height:48px;border-bottom:1px solid #dfdfdf}.sidr ul li:hover,.sidr ul li.active,.sidr ul li.sidr-class-active{border-top:none;}.sidr ul li:hover>a,.sidr ul li:hover>span,.sidr ul li.active>a,.sidr ul li.active>span,.sidr ul li.sidr-class-active>a,.sidr ul li.sidr-class-active>span{/*-webkit-box-shadow:inset 0 0 15px 3px #ebebeb;-moz-box-shadow:inset 0 0 15px 3px #ebebeb;box-shadow:inset 0 0 15px 3px #ebebeb*/}.sidr ul li a,.sidr ul li span{padding:0 15px;display:block;text-decoration:none;color:#333}.sidr ul li ul{border-bottom:none;margin:0}.sidr ul li ul li{line-height:40px;font-size:13px}.sidr ul li ul li:last-child{border-bottom:none}.sidr ul li ul li:hover,.sidr ul li ul li.active,.sidr ul li ul li.sidr-class-active{border-top:none;line-height:41px}.sidr ul li ul li:hover>a,.sidr ul li ul li:hover>span,.sidr ul li ul li.active>a,.sidr ul li ul li.active>span,.sidr ul li ul li.sidr-class-active>a,.sidr ul li ul li.sidr-class-active>span{-webkit-box-shadow:inset 0 0 15px 3px #ebebeb;-moz-box-shadow:inset 0 0 15px 3px #ebebeb;box-shadow:inset 0 0 15px 3px #ebebeb}.sidr ul li ul li a,.sidr ul li ul li span{color:rgba(51,51,51,0.8);padding-left:30px}.sidr form{margin:0 15px}.sidr label{font-size:13px}.sidr input[type="text"],.sidr input[type="password"],.sidr input[type="date"],.sidr input[type="datetime"],.sidr input[type="email"],.sidr input[type="number"],.sidr input[type="search"],.sidr input[type="tel"],.sidr input[type="time"],.sidr input[type="url"],.sidr textarea,.sidr select{width:100%;font-size:13px;padding:5px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0 0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;-ms-border-radius:2px;-o-border-radius:2px;border-radius:2px;border:none;background:rgba(0,0,0,0.1);color:rgba(51,51,51,0.6);display:block;clear:both}.sidr input[type=checkbox]{width:auto;display:inline;clear:none}.sidr input[type=button],.sidr input[type=submit]{color:#f8f8f8;background:#333}.sidr input[type=button]:hover,.sidr input[type=submit]:hover{background:rgba(51,51,51,0.9)}


.mobilenav_menu {
	font-family: Arial, Helvetica, sans-serif;
	display: none;
	float: right;
	text-decoration:none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background-color: #002f45;
	color: #002f45;
	font-weight: bold;
	margin: 10px 0 10px auto;
	border: 2px solid #002f45;
}

.mobilenav_menutxt		{ display: block; height: 20px; width: 20px; }
.mobilenav_menu a		{ text-decoration:none; color: #ffffff; display: block; text-align: center; padding: 7px 10px; }
.mobilenav_menu a:hover	{ text-decoration:none; }

.sidr ul li	{ padding-bottom: 0; }

.menu-closed { display: block; }
.menu-open { display: none; }

.sidr-open .menu-closed { display: none; }
.sidr-open .menu-open { display: block; }


/*-------------------------
- Dashboard
-------------------------*/

.courseBlock { color: #000000; padding: 40px 5%; background-color: #ffffff; display: flex; justify-content: space-between; flex-wrap: wrap;}

.course-overview { margin-bottom: 20px; }

.course-progress { min-width: 220px; }
.course-progress-status		{ margin-bottom: 20px; }
.course-progress-status p	{ margin-top: 0px; }

.course-continue { margin-bottom: 20px; }




/*-------------------------
- Course
-------------------------*/

#course-unit-selector-form	{ display: none; padding: 0; margin: 10px 0; width: 98%; background-color: transparent; }
#course-unit-selector		 { padding: 5px 10px; height: auto; }





/*-------------------------
- Billing
-------------------------*/

.payment-display { color: #000000; }

.payment-items					{ }
.payment-item					{ display: flex; justify-content: space-between; flex-wrap: wrap; background-color: #f1f1f1; }
.payment-item:nth-child(even)	{ background-color: #f9f9f9; }
.payment-item-title				{ width: calc(60% - 20px); padding: 5px 10px;  }
.payment-item-amount			{ width: cals(40% - 20px); padding: 5px 10px; text-align: right; }
.payment-totals					{ display: flex; justify-content: space-between; flex-wrap: wrap;  background-color: #d6d6d6; font-weight: bold; }
.payment-item-group				{ width: 100%; display: flex; justify-content: space-between; padding-left: 20px;  }







/*-------------------------
- Forms Layout
-------------------------*/


form select { padding-top: 0; padding-bottom: 0; }

form input[type="phone"] {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    width: 100%;
    display: block;
    outline: none;
    border: none;
    height: 25px;
    line-height: 25px;
    font-size: 16px;
    padding: 14px 5px;
}


.studentModifyMarks { padding-bottom: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; }
.studentMarkOptions { padding: 10px 30px 20px 0; }
.studentMarkOptions label { margin-right: 15px; }
.studentMarkOptions p { display: flex; align-items: center; }




/*-------------------------
- Classroom Students / Teachers
-------------------------*/

.average { min-width: 50px; text-align: center; }

.filter-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.filter-options { display: flex; align-items: center; flex-wrap: wrap;  }
.filter { padding: 15px 15px 15px 0px; }
.filter select { font-size: 110%;  padding: 4%; border-style: solid; border-color: #ffffff; border-width: 1px 0px 2px;}

.filter-options .filter .search { position: absolute;  right: 20px; top: 24px; }


.columns.list.card-list li a { padding: 0; text-decoration: none; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }

.card-list .profile { padding: 14px 20px; width: calc(100% - 40px); word-break: break-word; text-align: center; font-weight: bold; }
.card-list .subscriptions { width: 100%; background-color: #fbfbfb; padding: 0 20px; width: calc(100% - 40px);  -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
.card-list .subscriptions .icon { max-width: 30px; align-self: center; height: auto; flex-grow: 1;}
.card-list .subscriptions .icon img { width: 100%; height: auto; }
.card-list .subscriptions .course { display: flex; flex-wrap: wrap; justify-content: space-between; font-size: 0.8em; padding: 10px 0 10px; border-bottom: 1px solid #f0f0f0;  }
.card-list .subscriptions .course:last-child { border-bottom: none;  }
.card-list .course .course-progress { margin-top: 0; width: 100%; }
.card-list .course .meta { font-size: 0.7em; }
.card-list .course .average { align-self: flex-start; padding: 3px; margin: 0 0 0 10px; }

.card-list li a:hover { background-color: #f1f1f1;  }
.card-list li a:hover .subscriptions { background-color: #f1f1f1; }



/*-------------------------
- Subscription list
-------------------------*/

.subscription-popup { min-width: 75px; }
.subscription-list	{ display: flex; }
.subscription-info	{}

.subscription-edit { padding-left: 15px; width: 24px; height: 42px; display: flex; align-items: center; margin-top: 10px; }


/*-------------------------
- Checkout Layout
-------------------------*/

.add-subscription-row { padding-bottom: 15px; }

#add_subscription			{ background: #523167; text-align: center; border: none; padding: 8px 15px; border-radius: 3px; color: white; font-weight: bold; font-size: 14px; text-transform: uppercase; cursor: pointer; }
#add_subscription:hover    { background: #872A86; }

.remove_subscription { color: #c00404; display: none; }
.remove_subscription:hover { cursor: pointer; color: #ff0000; }


#checkout-page { display: flex; }
#checkout-info { flex-grow: 1; }
#checkout-sidebar { width: 320px; margin-left: 20px;  }
#cart-overview { padding: 20px; }
.checkout-block { margin-bottom: 30px;  }
.option-amount-total {  }
.option-terms { flex-grow: 1; padding-left: 20px; min-width: 250px; }

#cart-items { padding-bottom: 20px; border-bottom: 1px solid #222222; margin-bottom: 20px;}
#cart-items p { display: flex; justify-content: space-between; }
#cart-items .small { font-size: 0.6em; }
#cart-totals p { display: flex; justify-content: space-between; }

#cart-totals #cart-sibling-discount-wrapper { display: none; }

#checkout-coupon { margin: 20px 0 10px; display: flex; flex-wrap: wrap; justify-content: space-between; }
#coupon-response { width: 100%; font-size: 0.8em; padding-bottom: 5px; }
#checkout-coupon ul { width: calc(100% - 120px); }
#checkout-coupon li { margin: 0; padding: 0; }
#apply_coupon    { background: #523167; border: none; padding: 2px 5px; border-radius: 3px; color: white; font-weight: bold; font-size: 12px; text-transform: uppercase; cursor: pointer; }

#apply_coupon:hover    { background: #872A86; }

#checkout-agree-to-terms { display: flex; justify-content: space-between; align-items: top;}
#terms-checkbox			{ padding-right: 15px;}
#terms-checkbox	input	{ padding-right: 0px;}
#terms-description { flex-grow: 1; font-size: 0.8em;}

#cart_complete_order_button { width: 100%; margin-top: 20px; padding: 20px; }


/*-------------------------
- New Course Layout
-------------------------*/



.new-content-wrapper		{ display: flex; width: 100%; flex-wrap: wrap; align-items: flex-start; max-width: 1400px; margin: 0 auto; }

.pacing-guide { margin: 60px 0 30px; }

.new-sidebar					{ width: 220px; padding: 15px;}
.new-sidebar h2					{ font-size: 1.5em; }
.new-sidebar .tab-label			{ display: flex; overflow:hidden; padding: 14px 10px; font-size: 90%; background: #523167; border-bottom: 1px solid #392248; font-weight: bold; cursor: pointer; position:relative }
.new-sidebar .tab-label:hover	{ background: #392248; }
.new-sidebar .tab-label::after	{ content: "\276F"; width: 1em; height: 1em; text-align: center; transition: all .35s; position:absolute; right:10px; top:14px }
.new-sidebar .tab-content		{ max-height: 0; padding: 0 20px; color: #392248; background: white; transition: all .35s; }
.new-sidebar input:checked ~ .tab-content { padding: 10px 20px; /*max-height: 100vh;*/ max-height: 99999px; }
.new-sidebar li a				{ padding:14px 20px; border-bottom: 1px solid #f0f0f0; color:#523167; display: flex;  justify-content: space-between; align-items: center; text-decoration: none; }
.new-sidebar li a:focus	span,
.new-sidebar li a:hover	span	{ text-decoration: underline; }
.new-sidebar li a:after { display: block; width: 15px; }
.new-sidebar .tab-content a		{ font-size:80%; padding: 7px 0; /*overflow:hidden;*/ }
.new-sidebar .lesson_number		{ display: block; font-size: 80%; margin-right: 10px; }
.new-sidebar .lesson			{ position: relative; display: block; line-height: 1.4; text-align: left; padding-right: 5px; }

.new-course-header			{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: calc(100% - 250px); padding: 30px 0 0; }
.new-course-header h1		{ padding-right: 100px; }
.new-progress-information	{ flex-grow: 1; padding: 20px 20px 20px 0; }
.new-flex					{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.new-course-progress		{ padding-right: 20px; }
.new-grade-progress			{ /*padding-left: 20px;*/ }
.new-course-progressbar		{}

.new-progressbar						{ list-style: none; margin: 15px 0; padding: 0; justify-content: space-between; display: flex; }
.new-progressbar li						{ list-style: none; display: inline-block; flex-grow: 1; position: relative; text-align: center; color: #ffffff; margin:0; }
.new-progressbar li:last-child			{ flex-grow: 0; }
.new-progressbar li::before				{ content:""; width: 20px; height: 20px; line-height : 20px; border-radius: 100%; display: block; text-align: center; margin-right: auto; background-color: #ffffff; z-index: 998; position: relative; }
.new-progressbar li::after				{ content: ""; position: absolute; width: 100%; height: 3px; background-color: #ffffff; top: 15px; left: 0%; top: 50%; -webkit-transform: translateY(-50%);  transform: translateY(-50%); }
.new-progressbar li:last-child::after	{ display: none; content: none; }
.new-progressbar li.active::before		{ background-color: #0177ad; }
.new-progressbar li.active::after		{ background-color: #0177ad; }


.new-page-tabs							{ width: 100%; margin: 35px 0 0; /*margin: 75px 0 0;*/ }
.new-page-tabs ul						{ list-style: none; margin: 0; padding: 0;  display: flex; justify-content: flex-start; }
.new-page-tabs li						{ margin: 0 0 0 10px; }
.new-page-tabs li:first-child			{ margin-left: 0; }
.new-page-tabs a						{ display: block; padding: 10px 30px; text-align: center; color: #553469; background-color: #efefef; text-decoration: none; }
.new-page-tabs li.active a				{ font-weight: bold; background-color: #ffffff;  }
.new-page-tabs a:focus,
.new-page-tabs a:hover					{  background-color: #ffffff;  }

.new-next-course a			{ text-transform: uppercase; color: #ffffff; background-color: #0177ad; transition: all 0.5s ease-in-out; }
.new-next-course a:focus,
.new-next-course a:hover	{ background: #07b1ff; }

.new-course-content			{ width: calc(100% - 250px); margin-bottom: 30px;}
.new-course-overview		{ padding: 75px 30px 50px; }
.new-course-space			{ padding-top: 40px; padding-left: 100px; padding-right: 100px; }

.extra-top-padding			{ padding-top: 40px; }

.new-course-title-prefix	{ color: #0177ad; font-weight: bold; }
.new-course-title h2		{ margin-bottom: 0; }
.new-course-meta			{ max-width: 615px; width: 100%; flex-grow: 1; padding-right: 20px; margin-bottom: 20px; }

.new-course-steps								{ padding: 0 100px 60px 30px; }
.new-course-step								{ display: flex; align-items: center; }
.new-course-step-number							{ position: relative; width: 75px; display: flex; align-items: center; align-self: stretch; }
.new-course-step-number span					{ display: flex; align-items: center; justify-content: center; font-weight: bold; height: 45px; width: 45px; border-radius: 100%; color: #ffffff; background-color: #0177ad; z-index: 5;}
.new-course-step-number::before					{ z-index: 1; content:"";  width: 3px; height: 100%; background-color: #0177ad; position: absolute; bottom: 0; left: 22px;  }
.new-course-step-number.first-number::before	{ height: 50%;  }
.new-course-step-number.last-number::before		{ height: 50%; bottom: auto; top: 0; }
.new-course-step-number.spacer-number::before	{ display: none; }

.new-course-step-number::after					{ z-index: 1; content:"";  height: 0px; width: 100%; border-top: 3px dashed #0177ad; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%);  transform: translateY(-50%);  }
.new-course-step-number.spacer-number::after	{ display: none; }

.new-course-step-content					{ width: calc(100% - 75px); flex-grow: 1; padding: 30px 0; }
.new-course-step-content.no-bottom-padding	{ padding-bottom: 0; }
.new-course-step-content.no-top-padding		{ padding-top: 0; }
.new-course-step-content.margin-overlap		{ margin-top: -30px; margin-bottom: -30px; }
.new-course-step-content form				{ padding: 0; height: 100%; width: 100%; background-color: transparent; }

.new-course-step .new-course-launcher		{ align-self: stretch;  height: 100%; width: 100%; color: #ffffff; text-decoration: none; background-color: #0177ad; padding: 20px 20px; border-radius: 0; text-transform: none; font-size: 1em; transition: all 0.5s ease-in-out; font-family: Nunito,sans-serif; }
.new-course-step .new-course-launcher:focus,
.new-course-step .new-course-launcher:hover { background: #07b1ff; color: #ffffff; }
.new-course-step-meta { padding: 10px 20px; }

.new-course-step .new-course-launcher.large-button { padding: 60px 20px;     font-size: 1.2em; }


.new-course-warm-up								{ display: flex; align-items: center; flex-wrap: wrap; border: 1px solid #0177ad; border-radius: 15px; overflow: hidden; }
.new-course-warm-up-button						{ display: flex; align-items: center; align-self: stretch; flex-grow: 1; }
.new-course-warm-up-button form					{ height: 100%; }
.new-course-warm-up .new-course-launcher		{ height: 100%; width: 100%; color: #ffffff; text-decoration: none; background-color: #0177ad; padding: 30px 55px; border-radius: 0; text-transform: none; font-size: 1.2em; transition: all 0.5s ease-in-out; font-family: Nunito,sans-serif; }
.new-course-warm-up .new-course-launcher:focus,
.new-course-warm-up .new-course-launcher:hover	{ background: #07b1ff; color: #ffffff;  }
.new-course-warm-up	.new-course-step-meta		{ padding: 10px 20px; margin: 0 auto; }

.new-course-video	{}

.new-course-step-sub-steps	{ display: flex; align-items: center; }
.new-course-step-sub-step	{ flex-grow: 1; width: 50%; align-self: stretch; }

.new-course-rounded-content	{ height: calc(100% - 2px); border: 1px solid #0177ad; border-radius: 15px; overflow: hidden; display: flex; align-items: center; flex-wrap: wrap;  }

.new-course-step-status		{ margin-bottom: 20px; display: flex; align-items: center; font-weight: bold; }
.new-course-step-icon		{ display: flex; align-items: center; justify-content: space-between; margin-right: 12px; border-style: solid; border-width: 2px; border-radius: 100%; }
.new-course-step-icon i		{  }

.text-white							{ color: #ffffff; }
.text-white .new-course-step-icon	{ color: #ffffff; }
.text-green							{ color: #19891a; }
.text-green .new-course-step-icon	{ color: #19891a; }
.text-yellow						{ /*color: #ffb900;*/ color: #d44400; }
.text-yellow .new-course-step-icon	{ color: #d44400; }
.text-red							{ color: #d03636; }
.text-red .new-course-step-icon		{ color: #d03636; }
.text-blue							{ color: #0177ad; }
.text-blue .new-course-step-icon	{ border-color: #0177ad; }

.new-course-step-launcher	{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; align-self: stretch; flex-grow: 1; }


.new-course-step-title { /*padding-right: 20px;*/ align-self: stretch; flex-grow: 1;}
.new-course-step-title form  { height: 100%; }

.new-course-step-results	{ font-size: 0.8em; }

.new-course-step-sub-step-number			{ position: relative; display: flex; align-items: center; justify-content: center; width: 70px; padding: 0 20px; }
.new-course-step-sub-step-number span		{ display: flex; align-items: center; justify-content: center; font-weight: bold; height: 45px; width: 45px; border-radius: 100%; color: #ffffff; background-color: #0177ad; z-index: 5;}
.new-course-step-sub-step-number::before	{ display: none; z-index: 1; content:"";  width: 3px; height: 100%; background-color: #0177ad; position: absolute; bottom: 0; left: 22px;  }
.new-course-step-sub-step-number::after		{ z-index: 1; content:"";  height: 0px; width: 100%; border-top: 3px dashed #0177ad; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%);  transform: translateY(-50%);  }

.new-course-step-sub-step-number.spacer-number::after	{ display: none; }

/*.new-course-challenge-yourself			{ display: flex; align-items: center; justify-content: space-between; font-size: 1.2em; border-radius: 10px; color: #ffffff; }*/
.new-course-challenge-yourself-title	{ align-self: stretch; flex-grow: 1; font-size: 1.2em;  color: #ffffff; font-weight: bold; background-color: #0177ad;  padding: 60px 40px 60px 100px;  }

.new-course-challenge-yourself .new-course-step-meta { padding: 10px 60px;  margin: 0 auto;  min-width: 60px; }

.new-course-step button.new-course-launcher			{ background: transparent; background-color: #0177ad;   padding: 30px 40px; text-decoration: none; border: none;  color: #ffffff; font-weight: 500; font-size: 1em;}
.new-course-step button.new-course-launcher .new-course-step-launcher			{ align-self: stretch; flex-grow: 0; }
.new-course-step button.new-course-launcher .new-course-step-launcher-icon i		{ font-size: 1.6em; border: 2px solid #ffffff; border-radius: 100%; }
.new-course-step button.new-course-launcher:hover			{ color: #523167; background-color: #0177ad; cursor: pointer; }
.new-course-step button.new-course-launcher:hover i			{ border-color: #523167; }


.new-course-vertical-step-number			{ position: relative; display: flex; align-items: center; justify-content: center; width: calc(50% - 35px); padding: 20px 0; }
.new-course-vertical-step-number span		{ display: flex; align-items: center; justify-content: center; font-weight: bold; height: 45px; width: 45px; border-radius: 100%; color: #ffffff; background-color: #0177ad; z-index: 5;}
.new-course-vertical-step-number::after		{ z-index: 1; content:"";  width: 0px; height: 100%; border-left: 3px dashed #0177ad; position: absolute; left: 50%; top: 0; -webkit-transform: translateX(-50%);  transform: translateX(-50%);  }

.new-course-continue-meta { flex-grow: 1;  padding-right: 20px; margin-bottom: 30px; }



/* RESPONSIVE STYLES
---------------------------------------------------------------------------*/

@media screen and (max-width: 1640px) {
	.count-3 .users .profile,
	.count-3 .users .subscriptions { width: calc(100% - 40px); }
}

@media screen and (max-width: 1290px) {
	.teacher { display: none; }

	#outer { width: auto;}
	#outer .test { margin-left: 0; margin-right: 0; }
	#hero>.pad { padding-left: 2%; padding-right: 2%; }


	.new-course-header { width: 95%; margin: 0 auto; }

	.new-page-tabs a { padding-left: 10px; padding-right: 10px; font-size: 0.8em; }
}

@media screen and (max-width: 1150px) {
	.count-2 .users .profile,
	.count-2 .users .subscriptions { width: calc(100% - 40px); }
}


@media screen and (max-width: 1024px) {
	#checkout-page { flex-wrap: wrap; }
	#checkout-info { width: 100%; }
	#checkout-sidebar { width: 100%; margin-left: 0; }

	#add_subscription { width: 200px !important; }
}

@media screen and (max-width: 825px) {
	#header #control { padding-right: 10px; }
	#header #control a { padding: 0 0 0 5px; }
	#header #control .user { display: none; }
}

@media screen and (max-width: 765px) {
	.new-sidebar { display: none; }
	.new-course-content { width: 100%; }

	#course-groups-menu { display: none; }
	.new-page-tabs { margin-top: 0; }
	#course-unit-selector-form { display: block; }

	.new-course-space { padding-left: 20px; padding-right: 20px; }

	#navigation { display: none; }

	.mobile-nav-hide { display: none !important; }
	.mobile-nav-show { display: inline-block !important; }

	.count-2.gap .column { width: 98%; margin: 0 auto 40px; float: none; }
}


@media screen and (max-width: 675px) {
	.courseBlock { display: block; }

	.mobile-full-width { width: 100%; }
	.mobile-left { text-align: left; }

	.mobile-hide { display: none; }


	.new-course-steps { padding-left: 20px; padding-right: 20px;  }
	.new-course-step { display: block; }
	.new-course-step-number { margin: 0 auto; width: 45px; height: 75px;}

	.new-course-step-content { width: 100%; padding: 0; }

	.new-course-step-number.last-number::before { height: 100%; }

	.new-course-step-sub-steps { flex-wrap: wrap; }
	.new-course-step-sub-step { width: 100%; }

	.new-course-step-sub-step-number { width: 45px; height: 75px; margin: 0 auto; padding: 0; }
	.new-course-step-sub-step-number::before { display: block; }

	.new-course-vertical-step-number { width: auto; }
	.new-course-vertical-step-number::after { border-left-style: solid; }

	.new-course-step-content.margin-overlap { margin: 0; }
}

/* Devon's additions below this line */

/* Areas of Study */

.aos-course-list {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cccccc;
    padding: 14px 20px !important;
    transition: background-color 0.5s ease-in-out;
}

.aos-course-list:hover {
    cursor: pointer;
    background-color: #f0f0f0;
}

.aos-course-list img {
    max-width: 44px;
    max-height: 44px;
    object-fit: cover;
    object-position: top;
    border-radius: 0px;
}

.aos-course-list-title {
    font-weight: bold;
    color: #523167;
}

.button-delete {
    background-color: #d03636;
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
}

.button-delete-small {
    background-color: #d03636;
    border: none;
    border-radius: 3px;
    padding: 5px 10px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
}

.button-save {
    background-color: #19891a;
    border: none;
    border-radius: 3px;
    padding: 10px 20px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    color: white;
    cursor: pointer;
}

.button-log-out {
    background: #523167;
    text-align: center;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    font-family: Nunito;
    font-size: 16px;
}

.button-log-out:hover    { background: #872A86; }

.completed-no-block:after { content: '\f058'; font-family: 'Font Awesome 5 Pro'; font-weight: 500; right: 0; color: #64da00; }

.extra-practice-tooltip .extra-practice-tooltip-text {
    padding: 5px;
    visibility: hidden;
    width: 265px;
    text-align: center;
    position: absolute;
    z-index: 10;
    background-color: white;
    border-style: solid;
    border-width: thick;
    border-color: #523167;
    border-radius: 5px;
    color: black;
}

.extra-practice-tooltip:hover .extra-practice-tooltip-text {
    visibility: visible;
}



form.ignore-form-styles {
/* Override the generic form styles */
  width: auto !important;

  margin-top: 20px;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

form.ignore-form-styles input {
    border: 1px solid #e2e5ec;
    font-size: 1rem;
    height: calc(1.5em + 1.3rem + 2px);
    padding: 0.65rem 1rem;
}

.input-date {
    border: 2px solid black !important;
    border-radius: 5px;
    font-family: nunito;
}

.line-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 20px;
}

.line-separator::before,
.line-separator::after {
    content: '';
    flex: 1;
    border-bottom: 2px solid white;
    margin: 0 10px;
}

.new-course-extra-practice				{ display: flex; align-items: center; flex-wrap: wrap; border: 1px solid #0177ad; border-radius: 15px; overflow: hidden; }
.new-course-extra-practice-button						{ display: flex; align-items: center; align-self: stretch; flex-grow: 1; }
.new-course-extra-practice-button form					{ height: 100%; }


.new-course-step .new-course-launcher-practice		{ align-self: stretch;  height: 100%; width: 100%; color: #ffffff; text-decoration: none; background-color: #0177ad; padding: 20px 20px; border-radius: 0; text-transform: none; font-size: 1em; transition: all 0.5s ease-in-out; font-family: Nunito,sans-serif; }
.new-course-step .new-course-launcher-practice:focus,
.new-course-step .new-course-launcher-practice:hover { background: #07b1ff; color: #ffffff; }

.purple-button-white-text {
    background: #523167;
    text-align: center;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    cursor: pointer;
}

.purple-button-white-text:hover    { background: #872A86; }

.skipped-date-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    margin-left: 5px;
    background-color: #d03636;
    border: none;
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px;
    height: 20px;
    width: 20px;
    color: white;
    cursor: pointer;
    position: relative;
    top: -1px;
}

.skipped-date-delete:hover {
    background-color: #d26363;
}

.subscription-management-card {
    padding:4%;
    background:white;
    margin-top:20px;

    img {
        max-width:50px;
        float: left;
        margin-right:20px;
    }
}

.subscription-management-edit {
    i {
        font-size: 14px;
    }
}

.subscription-management-field {
    color: black;
    text-align: left;
}

.teacher-student-course-marks-button {
    width: 300px;
    margin-bottom: 0px;
}

#add-custom-class-header {
    margin-bottom: 20px;
}

#add-custom-class-form {
    padding: 20px 0px;
}

#add-skipped-date {
    border: none;
    background-color: #523167;
    color: white;
    border-radius: 25px;
    padding: 0px 15px;
}

#change-start-date {
    border: none;
    background-color: #523167;
    color: white;
    border-radius: 25px;
    padding: 0px 15px;
}

#custom-class-add-student {
    margin: 20px 0px;
    font-size: 110%;
    padding: 5px;
    border-style: solid;
    border-radius: 5px;
    border-color: rgb(118, 118, 118);
    border-width: 1px 1px 1px;
    height: 100%;
}

#custom-class-add-student-button {
    margin-bottom: 20px;
}

#custom-class-edit {
    margin-bottom: 20px;
}

#custom-class-remove-student {
    margin: 20px 0px;
    font-size: 110%;
    padding: 5px;
    border-style: solid;
    border-radius: 5px;
    border-color: rgb(118, 118, 118);
    border-width: 1px 1px 1px;
    height: 100%;
}

#custom-classes-done a,
#custom-classes-done a:visited {
    color: white;
    text-decoration: none;
}

#custom-classes-select {
    margin: 20px 0px;
    font-size: 110%;
    padding: 5px;
    border-style: solid;
    border-radius: 5px;
    border-color: rgb(118, 118, 118);
    border-width: 1px 1px 1px;
    height: 100%;
}

#edit-custom-class-form {
    padding: 0px;
}

#edit-custom-class-name {
    height: 25px;
}

#errorMessage {
    color: red;
}

#generate-grade-report-content input[type="radio"] {
    margin-top: 0.5rem;
}

#generate-grade-report-content label {
    font-size: 16px;
    text-transform: none;
}

#parent-schedule-button {
    width: 300px;
}

#practice-problems:focus, #practice-problems:hover {
    background: #07b1ff; color: #ffffff;
}

#practice-problems-no-hover:hover {
    color: #ffffff;
    cursor: default;
}

#purchase-subscriptions-button {
    background-color: #523167;
    border-color: #523167;
}

#purchase-subscriptions-button:hover {
    background-color: #aa35a8 !important;
    border-color: #aa35a8 !important;
}

#save-custom-class-button {
    margin-right: 10px;
}

#student-schedule-button {
    margin-top: 20px;
    margin-bottom: -40px;
}

#schedule-table {
    width: 100%;
    margin-top: 50px;
}

/* Global */

.background-white {
    background-color: white;
}

.text-purple-bold-large {
    color: #523167;
    font-weight: bold;
    font-size: 24px;
}

.rounded-light-select {
    margin-bottom: 30px;
    font-family: 'Nunito';
    border: 1px solid #DDD;
    border-radius: 3px;
}

.rounded-light-select option {
  background: #f7f7fa;
  color: #523167;
  font-family: 'Nunito', sans-serif;
}