#facebox, #opaque {top: 0; left: 0}
#opaque {position: fixed; width: 100%; height: 100%; z-index: 99; display: none; background-color: black; opacity: 0.4}

#facebox {position: absolute; /* was fixed */ z-index: 400}
#facebox:focus {outline: none}
#facebox .popup {position: relative; padding: 10px 0 5px; background: #fff; background: var(--bg-color); box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 10px}
#facebox .content {display: inline-block}

#facebox #ResourceLibraryFilterWrapper .content {display: block}
#facebox .add-existing-more {padding: 15px 0; text-align: center}

#facebox .loading {text-align: center; padding-bottom: 11px}

#facebox .image .facebox-content {text-align: center; max-width: 700px; max-height: 100%; padding: 15px 15px 5px}
#facebox .image img {max-width: 100%; box-sizing: border-box; vertical-align: bottom}

#facebox img {border: 0; margin: 0}
#facebox .materialStyle .img_left {margin: 0 20px 20px 0}/* repeat from editor-content.css to overwrite margin:0 above */
#facebox .materialStyle .img_right {margin: 0 0 20px 20px}
#facebox .materialStyle .img_center, #facebox .materialStyle .img_full_width {margin: 20px auto}

#facebox .header {width: 100%; min-height: 44px; position: relative; margin: -10px 0 0; padding: 10px 10px 3px; box-sizing: border-box; overflow: hidden; z-index: 10; border-radius: 8px 8px 0 0}
#facebox .header + p {clear: both; margin-bottom: 0 0 -10px}
#facebox .header h4, #facebox .header span {color: #fff}
#facebox .header h4 {padding: 0 0 7px 0; max-width: 268px}
#facebox .header h4 span {max-width: 470px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 100%; display: block; box-sizing: border-box}

#facebox .facebox-content {padding: 10px 10px 5px; overflow-y: auto; clear: both; -webkit-overflow-scrolling: touch}
#facebox p, #facebox fieldset {padding: 5px 0}
#facebox fieldset {color: #222; color: var(--main-text-color)}
#facebox .facebox-content p:first-child, #facebox .facebox-content script:first-child + p {margin-top: 0}
#facebox .facebox-content p img:not(.icon):not(.close_image):not(.avatar):not(.img_left):not(.img_right):not(.img_center), .logoWrapper img {float: left; margin: 0 15px 10px 3px; max-width: 100%; height: auto}
#facebox .facebox-content .materialStyle p[style*='text-align'] > img:not(.icon):not(.close_image):not(.img_left):not(.img_right):not(.img_center) {float: none; margin: inherit}
#facebox .facebox-content p img.avatar {height: 48px; width: 48px}

/* new inbox popup */
#facebox .messagePopup .facebox-content p.avatarHolder img.avatar {width: 32px; height: 32px; margin: 0 5px 0 0; display: inline-block}
#facebox .messagePopup .facebox-content p.avatarHolder .multiple img.avatar {width: 32px; height: 32px; margin: 0 -18px 0 0; display: inline-block}
#facebox .messagePopup .facebox-content p.avatarHolder .multiple img.avatar:last-child {margin: 0 -5px 0 0}
#facebox .messagePopup .message_more_users_link {cursor: pointer}

#facebox ul.tabnav {margin: 1px 0 10px}
#facebox .facebox-content .optionsRibbon {left: 0}
#facebox .facebox-content .optionsRibbon img {margin: 0}
#facebox .facebox-content .optionsRibbonTable_separate {padding-bottom: 1px}
#facebox .facebox-content .optionsRibbonTable_separate + table {margin: 0}
#facebox .facebox-content .optionsRibbon ul {margin-left: 0}
#facebox #user_trash_popup .optionsRibbon ul {margin-top: 0}

/* Android default browser sprite overflow fix */
#facebox .facebox-content i {position: relative; z-index: 2; overflow: hidden}
#facebox .facebox-content p i.inline,
#facebox .facebox-content p.inline_icon i {margin-top: -4px}
#facebox .facebox-content .mce-listbox .mce-caret {position: absolute}
#facebox .facebox-content i:after {overflow: auto}
#facebox .facebox-content #ip_addresses i:after {background: none}

.mobile-app .facebox-content * {overflow: hidden}

/* Definition Lists */
#facebox .facebox-content p + dl {margin-top: -10px}
#facebox .facebox-content dl {margin: 5px 10px; overflow: hidden}
#facebox .facebox-content dl dt {margin-top: 8px}

/* Error, Warning and Info Alerts */
#facebox .facebox-content.loginPopup .alert_block, .mobileLogin .frmLogin .alert_block {margin-bottom: 10px !important}
#facebox .alert_block {clear: both; margin: 0 10px; border-top: 10px solid transparent}
#facebox .alert_block p {padding: 0}

/* FORMS */
#facebox .facebox-content label, #facebox .facebox-content fieldset legend, #facebox .labelGap {display: inline-block; width: 110px}
#facebox .labelGap {margin-right: 14px}
#facebox .facebox-content input[type="checkbox"] + label,
#facebox .facebox-content input[type="radio"] + label {
	width: auto
}
#facebox .full_width {width: 100% !important; margin: 0}
#facebox .facebox-content input[type="text"], #facebox .facebox-content input[type="password"],
#facebox .facebox-content textarea, #facebox .facebox-content .optionsRibbon,
#facebox .facebox-content .select2-popup-input {
	width: 500px
}
#facebox .facebox-content input[type="text"].hasDatepicker {/* List separately for IE8 */
	width: 200px
}
#facebox .facebox-content hr {margin: 5px 0}

#facebox .footer {background: #f5f5f5; background: var(--highlight-bg-color); clear: both; margin: 2px 0 -10px; overflow: hidden; padding: 8px 10px; position: relative; width: 100%; text-align: right; box-sizing: border-box; border-radius: 0 0 8px 8px}
#facebox .footer table {box-shadow: none; margin: 0}
#facebox .footer table th, #facebox .footer table td {border: 0; padding: 0}

#facebox .footer input + label {margin: 1px 0 0 0}
#facebox .footer input, #facebox .footer label {padding: 0; line-height: 17px; float: left; margin: 7px 0 0 0}
#facebox .footer label {margin: 0 10px}
#facebox .footer span {margin: 6px 10px 0 0; display: inline-block}
#facebox button:not(.not-btn), #facebox .link_button {margin: 0 0 0 3px; padding: 0 6px; height: 28px; line-height: 28px}
#facebox .footer button.floatL, #facebox .footer a.floatL {margin-left: 0}
#facebox .footer .table-right input {float: right}
#facebox .footer .table-right label {float: right; margin-right: 0}
#facebox .footer table .button {float: none;  margin: 0 2px}

#facebox .tl, #facebox .tr, #facebox .bl, #facebox .br {
	height: 10px;
	width: 10px;
	overflow: hidden;
	padding: 0
}
#facebox_overlay_modal,
#facebox_overlay {
	position: fixed;
	top: 0px;
	left: 0px;
	height:100%;
	width:100%
}
.facebox_hide {
	z-index:-100
}
.facebox_overlayBG {
	background-color: #1a517c;
	z-index: 100
}
* html #facebox_overlay_modal,
* html #facebox_overlay {
	position: absolute;
	height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px')
}
#facebox .close {position: absolute; top: 5px; right: 5px; z-index: 15; border: 9px solid transparent}
#facebox .close, #fullscreen_msg_holder .header .close {width: 15px; height: 15px}
#fullscreen_msg_holder .header .close {margin: 0 3px}
#facebox .close, #fullscreen_msg_holder .header .close {background: url('../images/icons/icons.svg') no-repeat top right}

#facebox #coupon_form select {position: relative}
#facebox #coupon_form select#coupon_discount_type {width: auto !important; display: inline-block !important}

/* Log in as user */
#facebox .login_as_user, #facebox .login_as_user + .footer {display: flex; justify-content: space-between}
#facebox .login_as_user > *, #facebox .login_as_user + .footer > * {width: 48%}
#facebox .login_as_user > *:not(.vertical_separator) {padding: 10px 10px 0; text-align: center; display: flex; flex-direction: column}
#facebox .login_as_user > .vertical_separator {width: 1px; margin: 0 10px; background-color: var(--divider-border-color)}
#facebox .login_as_user > * svg {margin: auto auto 0; width: 70%; display: block}
#facebox .login_as_user + .footer {text-align: center}
#facebox .login_as_user + .footer > * {width: 48%}
@media screen and (max-width: 400px) {
	#facebox .login_as_user > *:not(.vertical_separator) {padding: 5px; font-size: 15px}
	#facebox .login_as_user > .vertical_separator {margin: 0 5px}
}

/* Onboarding popups */
#facebox .facebox-content.video.xxl_popup {max-height: 100% !important}
#facebox .facebox-content.video.xxl_popup .embed-max-size {margin: 0; max-width: 1110px; max-height: 619px}
#facebox .facebox-content.sl-demo p {text-align: center}
#facebox .facebox-content.sl-demo .embed-max-size {max-width: 700px !important; margin: auto !important}
#facebox .facebox-content.sl-demo .embed-container {padding-bottom:calc(62.50% + 25px); width:100%; transform:scale(1)}
#facebox .facebox-content.sl-demo .embed-container iframe {position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: none}

/* Catalog page access code */
#facebox .facebox-content.xsml_popup input[type="password"] {width:100%; margin: 0}

/* Email recipients */
#facebox .facebox-content table#receivers {margin-top: 0}

/* Main Site Sign Up Form */
#facebox form#signup_form .facebox-content input[type="text"], #facebox form#signup_form .facebox-content select {
	width: 100%;
	box-sizing: border-box;
	margin-right: 0
}
#facebox form#signup_form .facebox-content input#captcha {width: 65%}
#facebox form#signup_form .facebox-content input#captcha ~ img {vertical-align: middle}

/* Portal Sign Up Form */
#facebox form#join_form .facebox-content label, #facebox form#join_form .facebox-content input[type="text"] {
	width: auto
}

/* Add Resources Form */
#facebox div.facebox-resources-filter {clear: both; overflow: hidden; padding: 0 10px}
#facebox div.facebox-resources-filter > p > * {margin-bottom: 6px}
#facebox div.facebox-resources-filter > p + p {margin: -10px 0 5px 0}
#facebox div.facebox-resources-filter input#resource_name {display: inline-block; width: 150px; height: 28px; margin-top: 4px}
#facebox div.facebox-resources-filter label {width: 115px; line-height: 36px; float: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap}
#facebox div.facebox-resources-filter select {width: 50%; padding: 1px 4px; height: 28px}
#facebox form#resources_form .facebox-content label {display: inline; margin-left: -2px}
#facebox form#resources_form .facebox-content.no-mlol label {margin-left: 0px}
#facebox form#resources_form .search-item i {margin: -3px 5px 0 0}

/* Preview Resource popup */
#facebox .resource_popup {display: flex}
#facebox .resource_popup .resource_content {flex: 1; width: 100%; max-width: 575px; max-height: 500px; overflow: auto; overflow: auto; position: relative; vertical-align: middle}
/*#facebox .resource_popup .resource_content iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}#facebox .resource_popup .resource_content iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%}*/
#facebox .resource_popup .resource_content *[class*='resource-flowplayer-'] {position: relative; top: 50%; transform: translateY(-50%)}
#facebox .resource_popup .resource_content.resource_img {display: flex; justify-content: center; background-image: linear-gradient(45deg,#efefef 25%,transparent 0,transparent 75%,#efefef 0,#efefef),linear-gradient(45deg,#efefef 25%,transparent 0,transparent 75%,#efefef 0,#efefef); background-size: 21px 21px; background-position: 0 0,10px 10px}
#facebox .resource_popup .resource_content.resource_img {display: flex; justify-content: center; background-image: linear-gradient(45deg,#efefef 25%,transparent 0,transparent 75%,#efefef 0,#efefef),linear-gradient(45deg,#efefef 25%,transparent 0,transparent 75%,#efefef 0,#efefef); background-size: 21px 21px; background-position: 0 0,10px 10px}
[data-theme="dark"] #facebox .resource_popup .resource_content > img {background-image: linear-gradient(45deg,#000000 25%,transparent 0,transparent 75%,#000000 0,#000000),linear-gradient(45deg,#000000 25%,transparent 0,transparent 75%,#000000 0,#000000)}
#facebox .resource_popup .resource_content > img {max-width: 100%; object-fit: contain}
#facebox .resource_popup .tableFixed {table-layout: auto}
#facebox .resource_popup .gs-table .table-head {top: 0}
#facebox .resource_popup .gs-table.no-edit .table-content {margin-top: 34px}
#facebox .resource_popup aside {width: 249px}
#facebox .resource_popup aside ul li i {position: absolute}
#facebox .resource_popup aside ul li span:not(.ratingStatic) i {margin-top: 0}

/* Add Tool */
#facebox .tool_row {display: flex; align-items: center; margin: 10px 0; position: relative}
body:not(.portal):not(.edu2) #facebox .facebox-content .tool_row label {width: auto !important}
#facebox .tool_row .tool_img {border: 1px solid #e2e0e0; border-right: 1px solid var(--table-border-color); margin: 0 10px; width: 100px; display: flex; align-items: center; padding: 5px; flex-shrink: 0; border-radius: 3px}
#facebox .tool_row .tool_img img {width: 100%}
#facebox .tool_row strong {font-size: 15px}
#facebox .tool_row p {margin: 0; padding: 0; font-size: 13px}
@supports (-webkit-line-clamp: 2) {
  #facebox .tool_row p {
    display: -webkit-box !important; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden
  }
}

/* User Listing Table */
#facebox .facebox-content table.userListingTable {margin: -5px 0 0}
#facebox .facebox-content table.userListingTable td {border: 0}
#facebox .facebox-content table.userListingTable td img {float: none; margin: auto}

/* Add event */
#facebox form#event_form .facebox-content {min-height: 130px}
#facebox form#event_form .facebox-content input[type="checkbox"] + label {-webkit-user-select: none}

/* Share */
#facebox .facebox-content.facebox_share a {word-wrap: break-word}

/* Member Popup */
#facebox .name_search {
	background: url("../images/search-btn.gif") no-repeat 2px 1px #F4F4F4;
	border: 1px solid #d6d6d6;
	cursor: pointer;
	outline: none;
	width: 24px;
	height: 19px
}
#facebox .member_block_heading td {
	border: 1px solid #d6d6d6;
	border-collapse: collapse;
	vertical-align: middle;
	padding: 3px
}
#facebox .member_block_heading + .member_block_heading td {
	border-left: 0
}
#facebox .member_block_heading td a {
	line-height: 15px;
	display: inline-block;
	padding: 0 0 1px;
	margin: 0;
	width: 16px;
	float: left
}
#facebox table.member_table + table.member_table td {
	border-left: 0;
	padding-left: 6px
}
#facebox table.member_table td {
	border: 1px solid #d6d6d6;
	border-top: 0;
	border-collapse: collapse;
	padding: 5px;
	vertical-align: middle
}
#facebox .member_table tr td:nth-child(2) {
	border-right: 0;
	padding-right: 0
}
#facebox .member_table tr td:nth-child(3) {
	border-left: 0;
	padding-left: 0
}
#facebox table.member_table td a {
	display: block;
	width: 113px;
	word-wrap: break-word;
	float: right
}
#facebox table.member_table td img {
	float: left
}
#facebox table.member_table input[type="checkbox"] {
	width: 13px;
	height: 13px
}

/* School Portal Search Popup */
#facebox .schoolsFacebox.facebox-content {
	max-width: 400px
}
#facebox .schoolsFacebox.facebox-content .schoolsHolder {
	display: table;
	width: 100%
}
#facebox .schoolsFacebox.facebox-content a {
	display: table-row
}
#facebox .schoolsFacebox.facebox-content a > div {
	display: table-cell;
	vertical-align: middle;
	border-bottom: 1px solid #e2e0e0; border-bottom: 1px solid var(--divider-border-color);
	padding: 13px 13px 9px 3px
}
#facebox .schoolsFacebox.facebox-content a div.logoWrapper {
	max-width: 90px;
	height: 50px;
	text-align: center
}
#facebox .schoolsFacebox.facebox-content a div.logoWrapper img {
	margin: auto;
	box-shadow: none;
	float: none
}
#facebox .schoolsFacebox.facebox-content a div.logoWrapper + div {
	padding-right: 15px;
	padding-top: 9px;
	word-break: break-all;
	margin-top: -1px
}
#facebox .schoolsFacebox.facebox-content a:first-child > div {
	padding-top: 3px !important
}
#facebox .schoolsFacebox.facebox-content a:last-child > div {
	border-bottom: 0;
	padding-bottom: 2px
}
#facebox .schoolsFacebox.facebox-content + .footer span {
	font-size: 15px;
	margin: 2px 12px 3px
}

/* All multiselect dropdowns */
body:not(.portal):not(.edu2) #facebox .facebox-content .multiSelectOptions label {width: auto !important; display: inline-block; margin: 0; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; font-size: 15px}

/* Add report */
#report_form .multiSelectOptions {min-width: 198px; max-width: 500px; width: auto !important}
@media screen and (max-width: 650px) {
	#report_form .multiSelectOptions {max-width: calc(100% - 20px)}
}

/* Add report widget */
.select_report_popup {margin-bottom: 5px; line-height: 1.7}

/* Toggle Expand / Contract */
a.toggleForm {
	display: inline-block;
	width: 100%;
	text-align: center;
	position: relative
}
a.toggleForm:before {
	border-top: 1px solid #C6C5C5;
	content: "";
	left: 0; top: 50%;
	position: absolute;
	width: 99%
}
a.toggleForm span {
	display: inline-block;
	background: #fff;
	position: relative;
	padding: 0 20px
}
a.toggleForm i {
	margin-top: -4px
}
#remaining_toggleForm {
	display: none
}

/* Help Centre */
#facebox .facebox-content.help_centre {overflow: hidden}
#facebox .help_centre .help_center_flex {display: flex; flex-flow: row wrap; justify-content: space-between}
#facebox .help_centre .contentBlock {width: 48.7%; margin-bottom: 20px; float: none; display: flex; align-items: center; border: 1px solid #e2e0e0; border: 1px solid var(--table-border-color); border-radius: 5px; transition: all .4s ease-in-out}
#facebox .help_centre .contentBlock:hover {box-shadow: 0 0 10px rgba(0,0,0,.06); border-color: #dfdfdf; border-color: var(--main-border-color)}
#facebox .help_centre .contentBlock:nth-child(1), #facebox .help_centre .contentBlock:nth-child(2) {margin-top: 10px}
#facebox .help_centre .contentBlock .sideImg img {vertical-align: bottom}
#facebox .help_centre .contentBlock .sideText *:first-child {line-height: 1.1; margin-bottom: 5px}

#facebox .facebox-content.help_centre form {text-align: right; padding-bottom: 12px}
#facebox .facebox-content.help_centre form.search-form input[type="text"] {width: 261px; height: 29px; margin: 0; padding: 3px 5px 2px; border-radius: 3px 0 0 3px}
#facebox .facebox-content.help_centre form.search-form button:not(.not-btn) {margin: 0 0 0 -4px; border-radius: 0 3px 3px 0; height: 29px; vertical-align: top; position: relative}
#facebox .facebox-content.help_centre form.search-form button i {margin-top: -3px}
#facebox .facebox-content.help_centre img.screenshot {float: none !important; border: 1px solid #cccccc; display: block; margin: 0 auto !important; box-shadow: none}

#facebox .facebox-content.help_centre .optionsRibbon {width: auto; left: 3px; top: 0}
#facebox .facebox-content.help_centre .optionsRibbon.mr0 {margin: 0}
#facebox .facebox-content.help_centre .optionsRibbon + .clearfix.mobile_only {display: none}

#facebox .facebox-content.help_centre .help_centre_content {overflow-y: auto; margin: 13px 0}
#facebox:not(.portal):not(.edu2) .facebox-content.help_centre .help_centre_content p {padding-right: 8px; width: 100%; box-sizing: border-box}
#facebox .facebox-content.help_centre .help_centre_content h2,
#facebox .facebox-content.help_centre .help_centre_content h2 span[style*="color"] {color: var(--link-hover-text-color) !important; font-size: 22px !important}/*overwrite inline colour for now*/
#facebox .facebox-content.help_centre .help_centre_content p:last-child {margin-bottom: 0}
#facebox .facebox-content.help_centre .help_centre_content code {font-family: inherit}

#facebox .facebox-content.help_centre .search-item {margin-top: 0}
#facebox .facebox-content.help_centre .search-description {margin-bottom: 20px}
#facebox .hc-topic-icon-title {width: 100%; overflow: hidden}

/* --------- Fix for the Add Class for existing scroll click bug -------- */
.facebox-content .search-item {position: relative}
.facebox-content h2 + .search-item {margin-top: 10px}

.preview-game-badge div {display: inline-block; margin-top: 8px; margin-bottom: 8px; padding: 5px; border: 1px solid #C6C5C5}

/* --------- Wizard -------- */
#facebox .facebox-content.wizard_wrapper {padding: 0; margin-bottom: -5px; border-radius: 0 0 8px 8px; overflow: hidden}
.wizard_wrapper {display: flex}
.wizard_nav {padding: 10px; width: 150px; background-color: #f5f5f5; flex-shrink: 0}
.wizard_nav button {font-size: 15px}
.wizard_nav button:focus:enabled, .wizard_nav button:hover:enabled {box-shadow: none; opacity: 1}
.wizard_nav button i {margin: 0 5px 0 0}
.wizard_nav button.selected, .wizard_nav button:hover:enabled {color: #fff}
.wizard_nav button.selected i:after, .wizard_nav button:hover:enabled i:after {left: -40px}
.wizard_content {flex: 1; padding: 20px 17px 17px; box-sizing: border-box}
.wizard_content .flex_container {display: flex; flex-direction: column; height: 100%}
.wizard_content[aria-hidden="true"] {display: none}
.wizard_content h3 {font-size: 18px; margin-bottom: 15px}
.wizard_content form .wizard_row {margin-bottom: 20px; width: 100%}
.wizard_content form select, .wizard_content form textarea, .wizard_content form label, .wizard_content form input {margin: 0}
.wizard_content form label {clear: both; margin-bottom: 4px; width: 100% !important}
.wizard_content form label + p {margin-top: 0}
.wizard_content form select {width: 100% !important}
.wizard_content form p, .wizard_content form fieldset label {font-size: 15px}
.wizard_content form input {width: 100% !important}
.wizard_content form a.link_button i {margin-top: -2px}
.wizard_content form .required {font-size: 14px}
.wizard_content form .required i {width: auto; height: auto; overflow: visible !important}
.wizard_content form .required i:after {display: none}
@media screen and (max-width: 600px) {
	.wizard_wrapper {flex-direction: column}
	.wizard_nav {width: 100%}
	.wizard_nav a {display: inline-block}
}

.get_started_wizard {width: 900px; max-width: 100%; height: 490px; overflow: auto}
.get_started_wizard .wizard_nav {box-sizing: border-box; position: relative; display: flex}
.get_started_wizard .wizard_nav:before {position: absolute; content: ''; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(rgba(0,0,0,0.2) 20%, rgba(0,0,0,0) 90%)}
.get_started_wizard .wizard_nav button {background-color: #3d464e; position: relative; border-radius: 6px; margin: 3px 0 7px; padding: 0 11px; transition: all .3s ease; min-height: 34px}
.get_started_wizard .wizard_nav button span {display: flex; align-items: center; justify-content: space-between}
.get_started_wizard .wizard_nav button .wizard-menu-number {display: none}
.get_started_wizard .wizard_nav button .wizard-menu-text {white-space: nowrap; overflow: hidden;}
.get_started_wizard .wizard_nav button:not(.selected):not(.completed) span {color: #fff}
.get_started_wizard .wizard_nav button:not(.selected):not(.completed):hover:enabled span,
.get_started_wizard .wizard_nav button:not(.selected):not(.completed):focus:enabled span {color: #222}
.get_started_wizard .wizard_nav button i {display: none; margin: 0 -3px 0 5px}
.get_started_wizard .wizard_nav button.selected + button i {display: none}
.get_started_wizard .wizard_nav button.selected i.forward,
.get_started_wizard .wizard_nav button.completed:not(.selected) i.tickCircle {display: block}
.get_started_wizard .wizard_nav button.selected i.forward:after,
.get_started_wizard .wizard_nav button.completed:not(.selected) i.tickCircle:after {left: 0}
.get_started_wizard .wizard_nav button.selected,
.get_started_wizard .wizard_nav button.completed,
.get_started_wizard .wizard_nav button:hover:enabled,
.get_started_wizard .wizard_nav button:focus:enabled {background-color: #fff; background-image: none; color: #222}

.get_started_wizard form {display: flex; flex-direction: column; height: 100%; overflow: auto}
.get_started_wizard .scroll {display: flex; flex-wrap: wrap; overflow: auto; width: 100%; padding: 0 3px; box-sizing: border-box}
.no-touch .get_started_wizard .scroll::-webkit-scrollbar {-webkit-appearance: none; width: 7px; height: 7px}
.no-touch .get_started_wizard .scroll::-webkit-scrollbar-thumb {border-radius: 4px; background-color: rgba(0, 0, 0, .5); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5)}
.get_started_wizard .setup_language > * > div {width: 100%; height: 31px; position: relative}
.get_started_wizard .setup_language img {margin: 7px 0 0 23px !important; position: absolute; width: 16px}
.get_started_wizard .setup_language input[type="radio"] + label:before {margin-right: 28px}
.get_started_wizard .setup_language label {font-size: 15px}
.get_started_wizard input[type='radio'] + label {position: relative; z-index: 1}
.get_started_wizard .theme_list > div {height: 34px; position: relative}
.get_started_wizard .theme_list > div div {width: 80px; height: 20px; border-radius: 20px; margin: 1px 0 0 23px !important; position: absolute; border: 1px solid #e2e0e0; border: 1px solid var(--table-border-color)}
.get_started_wizard .theme_neo div {background: linear-gradient(90deg, #B54376, #B54376 25%, #5E656B 25%, #5E656B 50%, #378A98 50%, #378A98 75%, #5FB4B7 75%)}
.get_started_wizard .theme_matrix div {background: linear-gradient(90deg, #02bfae, #02bfae 25%, #3a5268 25%, #3a5268 50%, #4394d0 50%, #4394d0 75%, #2e75a9 75%)}
.get_started_wizard .theme_indie div {background: linear-gradient(90deg, #519286, #519286 25%, #58ad9d 25%, #58ad9d 50%, #6161A0 50%, #6161A0 75%, #293546 75%)}
.get_started_wizard .theme_1 div {background: linear-gradient(90deg, #fca538, #fca538 25%, #d96436 25%, #d96436 50%, #3d577d 50%, #3d577d 75%, #666679 75%)}
.get_started_wizard .theme_2 div {background: linear-gradient(90deg, #fca538, #fca538 25%, #d96436 25%, #d96436 50%, #3d577d 50%, #3d577d 75%, #fff 75%)}
.get_started_wizard .theme_3 div {background: linear-gradient(90deg, #569a96, #569a96 25%, #64cac2 25%, #64cac2 50%, #CA6760 50%, #CA6760 75%, #515a63 75%)}
.get_started_wizard .theme_4 div {background: linear-gradient(90deg, #2a7fd4, #2a7fd4 25%, #2d89e6 25%, #2d89e6 50%, #579125 50%, #579125 75%, #fff 75%)}
.get_started_wizard .theme_5 div {background: linear-gradient(90deg, #12a8d9, #12a8d9 25%, #f78e1e 25%, #f78e1e 50%, #a9bd29 50%, #a9bd29 75%, #e20177 75%)}
.get_started_wizard .theme_6 div {background: linear-gradient(90deg, #2ac09e, #2ac09e 25%, #ef6268 25%, #ef6268 50%, #45617d 50%, #45617d 75%, #517494 75%)}
.get_started_wizard .theme_7 div {background: linear-gradient(90deg, #2ac09e, #2ac09e 25%, #ef6268 25%, #ef6268 50%, #45617d 50%, #45617d 75%, #fff 75%)}
.get_started_wizard .theme_8 div {background: linear-gradient(90deg, #5b87a4, #5b87a4 25%, #a3d5f6 25%, #a3d5f6 50%, #3b996c 50%, #3b996c 75%, #505861 75%)}
.get_started_wizard .theme_9 div {background: linear-gradient(90deg, #5b636b, #5b636b 25%, #3e464e 25%, #3e464e 50%, #3a919e 50%, #3a919e 75%, #57b3bb 75%)}
.get_started_wizard .theme_10 div {background: linear-gradient(90deg, #428769, #428769 25%, #505050 25%, #505050 50%, #327d86 50%, #327d86 75%, #408e94 75%)}
.get_started_wizard .theme_11 div {background: linear-gradient(90deg, #5eb34c, #5eb34c 25%, #545253 25%, #545253 50%, #3E95C1 50%, #3E95C1 75%, #fff 75%)}
.get_started_wizard .theme_12 div {background: linear-gradient(90deg, #6161a0, #6161a0 25%, #3b3b46 25%, #3b3b46 50%, #519286 50%, #519286 75%, #58ad9d 75%)}
.get_started_wizard .theme_13 div {background: linear-gradient(90deg, #6161a0, #6161a0 25%, #3b3b46 25%, #3b3b46 50%, #519286 50%, #519286 75%, #fff 75%)}
.get_started_wizard .theme_14 div {background: linear-gradient(90deg, #1d8c7a, #1d8c7a 25%, #55b9a5 25%, #55b9a5 50%, #fba231 50%, #fba231 75%, #f18a2f 75%)}
.get_started_wizard .theme_15 div {background: linear-gradient(90deg, #02bfae, #02bfae 25%, #3a5268 25%, #3a5268 50%, #4394d0 50%, #4394d0 75%, #2e75a9 75%)}
.get_started_wizard .theme_16 div {background: linear-gradient(90deg, #02bfae, #02bfae 25%, #3a5268 25%, #3a5268 50%, #4394d0 50%, #4394d0 75%, #fff 75%)}
.get_started_wizard .theme_list > div input[type="radio"] + label:before {margin-right: 100px}
.get_started_wizard .theme_list > div .btn_tooltip i {margin-top: -4px}
.get_started_wizard .theme_list > div .btn_tooltip .tooltip_content {left: 0}
.get_started_wizard fieldset div {position: relative; margin: 4px 8px}
.get_started_wizard fieldset label {padding-left: 25px; width: auto !important}
.get_started_wizard fieldset input[type="checkbox"] + label:before {position: absolute; top: 1px; left: 0}
.get_started_wizard .info_indent {display: flex; margin: 20px 0}
.get_started_wizard .info_indent i {flex-shrink: 0}
.get_started_wizard .info_indent div {font-size: 14px; color: #707070; color: var(--dark-grey-text-color)}
.get_started_wizard .wizard_image_demo {overflow: hidden; width: 100%}
.get_started_wizard #UploaderWrapper {width: calc(100% - 11px)}
.get_started_wizard .wizard_complete {position: relative; max-width: 460px; margin: auto}
.get_started_wizard .wizard_complete div {position: absolute; top: 30%; width: 100%; height: 16%; display: flex; align-items: center; justify-content: center}
.get_started_wizard .wizard_complete div h3 {color: #fff; margin: 0; font-size: 33px}
.get_started_wizard .wizard_complete ~ strong {font-size: 19px}
.get_started_wizard .wizard_footer {display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding: 15px 3px 3px}
.get_started_wizard .wizard_footer > *[excalibur-click] {margin: 0}
.get_started_wizard .wizard_footer > *[excalibur-click] i {margin: -3px -6px 0 0}
.get_started_wizard .wizard_footer > *[excalibur-click] i.arrowLeft {margin: -3px 0 0 -6px}
.get_started_wizard .wizard_footer > *:only-child {margin-left: auto}
@media screen and (min-width: 980px) {
	.get_started_wizard .setup_language > * > div {width: 33%}
	.get_started_wizard .theme_list {columns: 2; width: 100%}
}
@media screen and (max-width: 900px) {
	.get_started_wizard .wizard_complete div h3 {font-size: 28px}
}
@media screen and (max-width: 750px) {
	.get_started_wizard .wizard_complete div h3 {font-size: 4vw}
}
@media screen and (min-width: 601px) {
	.get_started_wizard .wizard_nav {padding: 20px; width: 250px; background: no-repeat 50% bottom/cover #02BFAE url('/images/wizard/left-menu-shapes.svg'); background-color: var(--header-bg-color); flex-direction: column}
	.get_started_wizard .wizard_nav_img {width: 100%; height: 100%; max-height: 170px; background: no-repeat center/contain; margin: 20px 0}
	.get_started_wizard #panel1.selected ~ .wizard_nav_img {background-image: url('/images/wizard/select-your-language.svg')}
	.get_started_wizard #panel2.selected ~ .wizard_nav_img {background-image: url('/images/wizard/about-yourself.svg')}
	.get_started_wizard #panel3.selected ~ .wizard_nav_img {background-image: url('/images/wizard/about-organization.svg')}
	.get_started_wizard #panel4.selected ~ .wizard_nav_img {background-image: url('/images/wizard/select-theme.svg')}
	.get_started_wizard #panel5.selected ~ .wizard_nav_img {background-image: url('/images/wizard/upload-logo.svg')}

	.wizard_content form .wizard_row.wizard_row_2_col {display: flex; justify-content: space-between}
	.wizard_content form .wizard_row.wizard_row_2_col > div {width: calc(50% - 10px)}
	.get_started_wizard .setup_language > * > div {width: 50%}
}
@media screen and (max-width: 600px) {
	.get_started_wizard .wizard_nav {width: 100%; justify-content: space-between; padding: 10px 15px; background: #02BFAE; background: var(--header-bg-color)}
	.get_started_wizard .wizard_nav:after {content: ''; top: 50%; left: 20px; right: 20px; height: 1px; background: rgba(255,255,255,.4); position: absolute; z-index: 0; margin-top: -1px}
	.get_started_wizard .wizard_nav button {width: 34px; box-sizing: border-box; border-radius: 50%; flex-shrink: 0; z-index: 1; margin: 3px 0}
	.get_started_wizard .wizard_nav button:disabled {opacity: 1}
	.get_started_wizard .wizard_nav button:disabled span {opacity: .5}
	.get_started_wizard .wizard_nav button span:first-child {display: flex; height: 100%; justify-content: center}
	.get_started_wizard .wizard_nav button span:last-child, 
	.get_started_wizard .wizard_nav_img {display: none}

	.get_started_wizard .wizard_content {max-height: calc(100% - 60px)}
	.wizard_content form .wizard_row.wizard_row_2_col div:not(:last-child) {margin-bottom: 20px}
	.get_started_wizard .wizard_complete div h3 {font-size: 6vw}
}

/* ------------------------ Badge creator ------------------------- */
#facebox #badge_form > div {position: relative}
#facebox #badge_form .tabnav li a {margin: 0 6px 1px}
#facebox #badge_form .tabnav li:first-child a {margin-left: 0}
#facebox .badgeWrapper {min-height: 270px; margin-top: 20px}
#facebox .badgeWrapper > p {
	height: 22px;
	text-align: center;
	padding: 0 0 10px 0 !important;
	margin-bottom: 0;
	border-bottom: 1px solid #e2e0e0; border-bottom: 1px solid var(--table-border-color)
}
.badgeHolder {width: 220px; height: 240px; position: relative; padding: 10px 0 0 0; margin: auto}
.badgeHolder .finalMessage {margin: 220px 0 0 0}
.badgeHolder > div:not(.finalMessage), .badgeHolder .finalBanner p, .badgeHolder .finalBanner img, .badgeHolder .finalBanner div {
	position: absolute;
	width: 220px
}
.badgeHolder .finalBanner p {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
	text-align: center;
	top: 170px;
	font-size: 15px;
	z-index: 3;
	padding: 5px 0 !important
}
.badgeHolder .finalBanner img {z-index: 2; width: auto}
.badgeHolder .finalBanner div {z-index: 1}
#facebox .badgeHolder .finalMessage p {
	height: 155px;
	padding: 0 15px;
	margin: 15px 0 0;
	overflow: auto
}
.badgeOptions:not(.badgeOverview) {display: none}
.badgeOptions .owl-item {text-align: center}
.badgeOptions .owl-item a {display: inline-block; width: 90px; height: 90px; border-radius: 6px; overflow: hidden}
.badgeOptions .owl-item a img {width: 100%}
#facebox .badgeImages .owl-item a img {width: 126px; height: 126px; margin: -16px 0 0 -19px}
#facebox .badgeImages .badgeImages_btn_holder {display: flex; justify-content: center; align-items: center; padding: 5px 15px 0; text-align: center}
#facebox .badgeImages .badgeImages_btn_holder input {margin-top: 0; width: auto !important}
#facebox .badgeGallery .owl-item a img {width: 70px; height: 70px; margin: 10px 0 0 -3px}
#facebox .badgeGallery .owl-buttons {margin-top: 5px}
.badgeOptions .owl-theme .owl-controls .owl-buttons div {border-radius: 3px; border: 1px solid #c8c8c8; background-color: transparent; padding: 5px 9px 5px 10px; opacity: 1}
.badgeOptions .owl-theme .owl-controls .owl-buttons div:hover i:after {left: -20px}
.badgeColors input {width: 200px; padding: 4px 5px 5px}
#facebox .facebox-content .badgeText textarea {height: 123px; resize: none}
#facebox .facebox-content .badgeLibraryCheckboxes p {line-height: 2}
#facebox .facebox-content .badgeColors label {width: 130px}
#facebox .facebox-content .badgeColors .color_recommendations input {color: #fff; width: 46.5% !important; margin-bottom: 5px}
@media screen and (min-width: 980px) {
	#facebox .facebox-content .badgeColors .color_recommendations > *:first-child {width: 148px}
}

/* ------------------------ Assignment popup form------------------------- */
#facebox .assignment_pop .toggleForm {display: block; margin-top: -5px; margin-bottom: 3px}
#facebox .assignment_pop label, #facebox .facebox-content.assignment_pop legend {width: auto}
#facebox .assignment_pop .title_container label,
#facebox .assignment_pop label.min-w-80,
#facebox .assignment_pop legend.min-w-80 {min-width: 80px}
#facebox .assignment_pop label.min-w-76,
#facebox .assignment_pop legend.min-w-76 {min-width: 76px}
#facebox .assignment_pop #assignment_name {width: 688px; margin-right: 0}
#facebox .assignment_pop span.max-info {margin-right: 21px}
#facebox .assignment_pop #timer input {padding: 0px 5px}
#facebox .assignment_pop .modal-textarea p {padding: 0; margin: 0 0 5px}
#facebox .class_pop hr, #facebox .assignment_pop hr {display: block; height: 1px; border: 0; border-top: 1px dashed #C6C5C5; padding: 0; margin-bottom: 0}
#facebox .class_pop hr {margin-bottom: 8px}
input#randomize + label {min-width: 20px !important}
#facebox .assignment_pop #assignment_width, #facebox .assignment_pop #assignment_height {width: 100px}
#facebox .assignment_pop label[for*="items_to_sync_"] {width: 200px !important}
#facebox .assignment_pop input#assignment_gateway {width: 20px}
#facebox .facebox-content.assignment_pop .col-2 > * {vertical-align: top; margin: 0; user-select: none}
#facebox .facebox-content.assignment_pop .col-2 > * > *:first-child {margin-bottom: 5px}
#facebox .facebox-content.assignment_pop .col-2 > * > label:not(:first-child) {margin: 0 14px 5px 0}

#facebox table.attendance span {display: none}

#facebox .oneLine {clear: both; margin-top: 15px}
#facebox .oneLine p {display: inline-block; margin-top: 0}

/* ----------------- Minor tweak for the Import Qty/Ccf popup ----------------- */
#UploadCCF {
	min-width: 0 !important
}
#UploadCCF .optionsRibbon, #UploadQTI .optionsRibbon {
	width: 99%!important;
	margin: 0 auto;
	display: block;
	height: auto
}

/* ----------------- Language Selection Form ----------------- */
#facebox form.langForm .facebox-content {padding-left: 15px; padding-right: 15px}
#facebox form.langForm .facebox-content div {padding: 4px 0; height: 24px; position: relative}
#facebox form.langForm .facebox-content img {margin: 7px 0 0 22px; position: absolute; width: 16px}
#facebox form.langForm .facebox-content input[type="radio"] + label:before {margin-right: 28px}

/* ----------------- New Tool Provider select overwrite default 180px width ----------------- */
.tp-select-facebox {width: auto}

/* ----------------- People Picker ----------------- */
#facebox .section-intro {padding: 0 10px; overflow: hidden}
#facebox .section-intro .contentBlock {margin-bottom: 10px}
#facebox .section-intro .contentBlock .sideText p {width: auto}
#facebox .section-intro .contentBlock .sideText p.number {line-height: 1.3; width: 30px; margin-top: -15px !important}
#facebox .section-intro .contentBlock .sideText p:not(.number) {padding-left: 50px}
#facebox .section-intro .contentBlock .sideImg {margin-bottom: 4px}
#facebox .section-intro .contentBlock .sideImg img {border: 1px solid #c7c7c7}

#facebox #PeoplePicker {min-width: 980px; height: auto; max-height: none}
#facebox #PeoplePicker .pp_filter {display: flex}
#facebox #PeoplePicker .pp_filter input, #facebox #PeoplePicker .pp_filter select {width: calc(100% - 5px) !important; margin-right: 5px}
#facebox #PeoplePicker .pp_filter .pp_name {margin-bottom: 10px}
#facebox #PeoplePicker .pp_filter select {padding-top: 3px}
#facebox #PeoplePicker .select2-container {flex: 1; margin: 0 5px 10px 0; align-self: flex-start}
#facebox #PeoplePicker .select2-container:last-of-type {margin-right: 0}
#facebox #PeoplePicker .select2-container .select2-choices {border-radius: 3px}
#facebox #PeoplePicker .tabnav {display: none}
#facebox #PeoplePicker .tab-content {width: 50%; float: left}
#facebox #PeoplePicker .tab-content .half {width: 100%; position: relative; min-height: 430px}
#facebox #PeoplePicker .half.left {float: left}
#facebox #PeoplePicker .half.right {float: right}
#facebox #PeoplePicker .half#people_selected {overflow: hidden}
#facebox #PeoplePicker .people_scroller {overflow: auto}
#facebox #PeoplePicker .half.right .search-navigation {padding: 5px}
#facebox #PeoplePicker .search-navigation {margin-top: 5px; margin-bottom: 0}
#facebox #PeoplePicker table {width: 100%; margin: 0}
#facebox #PeoplePicker table td {border-width: 0 0 1px 0}
#facebox #PeoplePicker table th.title_column {width: 409px}
#facebox #PeoplePicker .table-header table {width: 100%; border-bottom: 1px solid #e2e0e0; border-bottom: 1px solid var(--table-border-color)}

@media screen and (max-width: 996px) {
	#facebox #PeoplePicker {min-width: 740px}
	#facebox #PeoplePicker .select2-container input {margin: 1px 0}
}
@media screen and (min-width: 769px) {
	#facebox #PeoplePicker .tab-content.first {border-right: 1px solid #e2e0e0; border-right: 1px solid var(--table-border-color); box-sizing: border-box}
}
@media screen and (max-width: 768px) {
	#facebox #PeoplePicker {min-width: 0px}
	#facebox #PeoplePicker .pp_filter {display: block}
	#facebox #PeoplePicker .pp_filter span {float: left; width: 50%; margin-bottom: 10px}
	#facebox #PeoplePicker .tabnav {display: block}
	#facebox #PeoplePicker .half {min-height: 0}
	#facebox #PeoplePicker:not(.transfer_seats) table th:last-child {padding: 0}
	#facebox #PeoplePicker table th.title_column {width: auto}
	#facebox #PeoplePicker .tab-content {width: 100%; float: left}
	#facebox #PeoplePicker .tab-content.first {border-right: 0 none}
	#facebox #PeoplePicker .tab-content.second {display: none}
	#facebox #PeoplePicker .search-navigation {margin-top: 10px}
	#facebox #PeoplePicker .search-navigation a {margin: 0 5px}
}

/* Transfer seats */
#facebox #PeoplePicker.transfer_seats .transfer_quantity select {width: 50px !important; margin-right: 0}
@media screen and (min-width: 768px) {
	#facebox #PeoplePicker.transfer_seats .tabs-extra-class span {margin-bottom: 10px}
}
@media screen and (min-width: 980px) {
	#facebox #PeoplePicker.transfer_seats {min-width: 796px}
}

/* Proficiency Picker */
#facebox #ProficiencyPicker {min-width: 980px; height: auto; max-height: none}
#facebox #ProficiencyPicker .pp_filter {display: flex}
#facebox #ProficiencyPicker .pp_filter input, #facebox #ProficiencyPicker .pp_filter select {width: calc(100% - 5px) !important; margin-right: 5px}
#facebox #ProficiencyPicker .pp_filter select {padding-top: 3px}
#facebox #ProficiencyPicker .select2-container {flex: 1; margin: 0 5px 10px 0}
#facebox #ProficiencyPicker .select2-container:last-of-type {margin-right: 0}
#facebox #ProficiencyPicker .select2-container .select2-choices {border-radius: 3px}
#facebox #ProficiencyPicker .tabnav {display: none}
#facebox #ProficiencyPicker .tab-content {width: 50%; float: left}
#facebox #ProficiencyPicker .tab-content .half {width: 100%; position: relative; min-height: 430px}
#facebox #ProficiencyPicker .half.left {float: left}
#facebox #ProficiencyPicker .half.right {float: right}
#facebox #ProficiencyPicker .half#proficiency_selected {overflow: hidden}
#facebox #ProficiencyPicker .proficiency_scroller {overflow: auto}
#facebox #ProficiencyPicker .half.right .search-navigation {padding: 5px}
#facebox #ProficiencyPicker .search-navigation {margin-top: 5px; margin-bottom: 0}
#facebox #ProficiencyPicker table {width: 100%; margin: 0}
#facebox #ProficiencyPicker table td {border-width: 0 0 1px 0}
#facebox #ProficiencyPicker table th.title_column {width: 409px}
#facebox #ProficiencyPicker .table-header table {width: 100%; border-bottom: 1px solid #e2e0e0; border-bottom: 1px solid var(--table-border-color)}

@media screen and (max-width: 996px) {
	#facebox #ProficiencyPicker {min-width: 740px}
	#facebox #ProficiencyPicker .select2-container input {margin: 1px 0}
}
@media screen and (min-width: 769px) {
	#facebox #ProficiencyPicker .tab-content.first {border-right: 1px solid #e2e0e0; border-right: 1px solid var(--table-border-color); box-sizing: border-box}
}
@media screen and (max-width: 768px) {
	#facebox #ProficiencyPicker {min-width: 0px}
	#facebox #ProficiencyPicker .pp_filter {display: block}
	#facebox #ProficiencyPicker .pp_filter span {float: left; width: 50%; margin-bottom: 10px}
	#facebox #ProficiencyPicker .tabnav {display: block}
	#facebox #ProficiencyPicker .half {min-height: 0}
	#facebox #ProficiencyPicker:not(.transfer_seats) table th:last-child {padding: 0}
	#facebox #ProficiencyPicker table th.title_column {width: auto}
	#facebox #ProficiencyPicker .tab-content {width: 100%; float: left}
	#facebox #ProficiencyPicker .tab-content.first {border-right: 0 none}
	#facebox #ProficiencyPicker .tab-content.second {display: none}
	#facebox #ProficiencyPicker .search-navigation {margin-top: 10px}
	#facebox #ProficiencyPicker .search-navigation a {margin: 0 5px}
}

/* ----------------- Assignment three columns ----------------- */
#facebox .columns-display {clear: both}
#facebox .columns-display:before, #facebox .columns-display:after {content: " "; display: table}
#facebox .columns-display:after {clear: both}
#facebox .columns-display br {display: none}
#facebox .columns-display label, #facebox .columns-display legend {width: 100%; margin: 0 0 2px; font-size: 14px}
#facebox .columns-display select,
#facebox .columns-display input,
#facebox .columns-display textarea {width: 100%; margin-right: 0}
#facebox .columns-display .title_container input {width: 100% !important; margin-right: 0}

#facebox .columns-display .column {height: 135px; float: left; border-right: 1px solid #e2e0e0; border-right: 1px solid var(--table-border-color)}
#facebox .columns-display .column.auto-height {height: auto}
#facebox .columns-display .column > div {margin-bottom: 10px; height: 55px}
#facebox .columns-display .column > div#duration {margin-bottom: 0; height: auto}
#facebox .columns-display .column > div#duration > div {margin-bottom: 10px; height: 55px}
#facebox .columns-display .column p {margin: 0; padding: 0}
#facebox .columns-display .column div.half {width: 45%; margin-right: 5%; float: left}
#facebox .class_pop .columns-display .column div.half:nth-child(2) {width: 45%; margin-right: 0%; margin-left: 4%; float: left}
#facebox .columns-display .column div.half.max-submissions {width: 53%; margin-right: 4%; float: left}
#facebox .columns-display .column div.half.max-submissions + div.half {width: 42%; margin-right: 0; float: left}

#facebox .columns-display .column input + label {margin-top: 5px}
#facebox .columns-display .column #threshold input {height: 27px}

#facebox .columns-display .column div .half label {display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis}

#facebox .columns-display .column.one input {width: 80px; margin-right: 0}
#facebox .columns-display .column.one div:nth-child(2) p label {display: block; width: 100%}
#facebox .columns-display .column.three input#assignment_begin_at,
#facebox .columns-display .column.three input#assignment_end_at {width: 100%}
#facebox .columns-display .column.four div p {margin: 0; padding: 0}

#facebox .columns-display .column.one {width: 23%; padding-right: 1.5%}
#facebox .columns-display .column.two {width: 21%; padding-left: 1.5%; padding-right: 1.5%}
#facebox .columns-display .column.three {width: 23%; padding-left: 1.5%; padding-right: 1.5%}
#facebox .columns-display .column.four {width: 23%; padding-left: 1.5%; border-right: 0 none}

#facebox .columns-display .column.indie {height: auto}
#facebox .columns-display .column.one.cols1 {width: 100%; border: 0}

#facebox .columns-display .column.one.cols2 {width: 46%; padding-right: 3.8%}
#facebox .columns-display .column.two.cols2 {width: 46%; padding-left: 3.8%; padding-right: 0; border-right: 0 none}

#facebox .columns-display .column.one.cols3 {width: 30%; padding-right: 3%}
#facebox .columns-display .column.two.cols3 {width: 27%; padding-left: 3%; padding-right: 3%}
#facebox .columns-display .column.two.cols2 input[type="text"].hasDatepicker,
#facebox .columns-display .column.two.cols3 input[type="text"].hasDatepicker {width: 100%}
#facebox .columns-display .column.three.cols3,
#facebox .columns-display .column.four.cols3 {width: 30%; padding-left: 3%; padding-right: 0; border-right: 0 none}

#facebox .columns-display + .modal-textarea p {font-size: 14px}

#facebox .columns-display .group-name p,
#facebox .columns-display .group-description p {padding-top: 0}
#facebox .columns-display .group-description p {margin-bottom: 5px}
#facebox .columns-display .group-name input,
#facebox .columns-display .group-description textarea {width: 100%}

/* Feeds select */
#facebox #multipost td {position: relative}
#facebox #multipost td input[type="checkbox"] + label:before {position: absolute; top: 13px; left: 8px}

/* Gradebook popup */
#facebox .gradebook_column_width input {width: auto !important}

#facebox .grading-thread-comment-list {margin: 0 0 10px !important}
#facebox .grading-thread-comment-list .comment .content {display: block}
#facebox .grading-thread-comment-textarea {margin: 0 0 3px}
#facebox .avatarHolder img.avatar {border-radius: 50%; border: 1px solid #e2e2e2}
#facebox table.rubric tr td {font-size: 13px}

/* Google Fonts popup */
.fonts_holder .fonts_loading {text-align: center}
.fonts_holder .fonts_loading img {width: 100px}
.fonts_holder li {margin-bottom: 10px; border-top: 1px solid #e2e0e0; border-top: 1px solid var(--table-border-color); padding-top: 7px; position: relative}
.fonts_holder li span {display: block; margin: 5px 0 0 28px; font-size: 17px}
.fonts_holder li span.no-results {text-align: center}
#facebox .fonts_holder li input[type="checkbox"] + label:before {top: 13px; position: absolute}
.google_fonts_top {position: relative}
.google_fonts_top span {position: absolute; top: 0; right: 0; z-index: 9}
#facebox .facebox-content .google_fonts_top input[type="text"] {width: 200px}

#facebox .facebox-content .people_picker_top {margin-bottom: 0}
#facebox .facebox-content .people_picker_top #s2id_proficiency_picker_search {width: 100%}

@media only screen and (max-width: 459px) {
	#facebox, #facebox.popup, #faceboxContent {width: 100%}

	.loginOptions {margin-bottom: 15px}
	.difSignIn {margin-left: -10px; margin-right: -10px; padding-left: 15px; padding-right: 15px}
	#facebox .facebox-content.loginPopup {padding-bottom: 0}

	.badgeOptions {padding: 10px 0}
	.badgeOptions .owl-item a {width: 50px; height: 50px}
	#facebox .badgeImages .owl-item a img {width: 70px; height: 70px; margin: -8px 0 0 -10px}
	#facebox .badgeGallery .owl-item a img {width: 40px; height: 40px; margin: 5px 0 0 0}
	#facebox div.facebox-resources-filter > p > * {width: 100% !important}
}
@media only screen and (min-width: 460px) {
	
	#facebox .facebox-content.help_centre .help_centre_content.help_overview {padding-right: 8px}

	/* Main Site */
	#facebox form#signup_form .facebox-content, #facebox .header.signup_form ~ #alerts, #facebox .header.signup_form ~ div.error {width: 400px}
	#facebox form#signup_form .facebox-content input#captcha {width: 310px}

	.owl-carousel .owl-wrapper-outer {padding-top: 10px}
	.badgeHolder {padding: 10px 15px 0}
	.badgeHolder .finalMessage {margin: 30px 0 0 250px}
	#facebox .facebox-content .badgeOptions input:not([type*='radio']), #facebox .facebox-content .badgeOptions textarea {width: 290px; margin-right: 0}

	#facebox .row.col-2:not(.hide) {display: flex; flex-flow: nowrap; justify-content: space-between}
	#facebox .row.col-2 > * {width: 48%}
	#facebox .facebox-content.assignment_pop .row.col-2 > * {width: 48% !important}
}
@media only screen and (max-width: 479px) {
	/* People Picker */
	#facebox .section-intro .contentBlock .sideText {margin-top: -123px}
	#facebox .section-intro .contentBlock .sideText p.number {margin: 42px 0 60px 210px !important}
	#facebox .section-intro .contentBlock .sideText p:not(.number) {padding: 0}
	/* Add Tool */
	#facebox .tool_row .tool_img {width: 60px; padding: 2px; margin-top: -3px}
}
@media screen and (min-width: 560px) {
	/* Global */
	#facebox .loginPopup #alerts{width: auto}
	#facebox .header h4 {font-size: 19px; max-width: 468px}
	#facebox form.langForm .facebox-content div {width: 50%; float: left}
	#facebox ul.tabnav li .dropDown {right: 5px}
	/* Logged In */
	#facebox form#enroll_form .facebox-content, #facebox form#group_join_form .facebox-content,
	#facebox .header.access_code ~ #alerts, #facebox .header.access_code ~ div.error {width: 342px}
	#facebox .header.access_code h4 {width: 310px}
	#facebox .facebox-content.facebox_share, #facebox div.facebox-resources-filter {width: 500px}
}
@media screen and (min-width: 769px) {
	/* Global */
	#facebox .facebox-content, #facebox #alerts, #facebox div.error, #facebox div.facebox-resources-filter {width: 700px}
	#facebox .loginPopup #alerts{width: auto}
	#facebox .header h4 {max-width: 668px}
	#facebox form.langForm .facebox-content div {width: 33%}
	#facebox .facebox-content.sml_popup {width:500px}
	#facebox .facebox-content.xsml_popup {width:400px !important}
	#facebox .facebox-content.xl_popup, #facebox .facebox-content.xxl_popup {width:700px}
	#facebox .header.sml_popup h4 {width: 468px}
	#facebox .header.xsml_popup h4 {width: 368px}
	/* Portal */
	#facebox form#join_form .facebox-content, #facebox .header.join_form ~ #alerts, #facebox .header.join_form ~ div.error {width: 615px}
	/* Logged In */
	#facebox form#class_list .facebox-content, #facebox .header.class_list ~ #alerts, #facebox .facebox-content select.fullWidth {width: 500px}
	#facebox .header.class_list h4 {width: 468px}
	#facebox form#class_form .facebox-content, #facebox .header.class_form ~ #alerts, #facebox .header.class_form ~ div.error {width: 730px}
	#facebox .header.class_form h4 {width: 638px}
	#facebox .facebox-content.assignment_list, #facebox form#enroll_form .facebox-content, #facebox form#group_join_form .facebox-content {width:600px}

	#facebox #badge_form ul.tabnav {padding-right: 240px}
	.badgeWrapper {position: absolute; top: 10px; right: 0}
	body:not(.portal):not(.edu2) #facebox .facebox-content .badgeWrapper > p {padding: 4px 15px 13px !important; width: auto !important; border-bottom: 0}
	.badgeWrapper .badgeHolder {height: 400px; border-left: 1px solid #e2e0e0; border-left: 1px solid var(--table-border-color)}
	.badgeWrapper .badgeHolder .finalMessage {margin: 225px 0 0 0}
	.badgeOptions {height: 394px; margin-right: 230px; padding: 0 15px 0 0}
	#facebox .badgeWrapper {margin-top: 0}
}
@media screen and (max-width: 600px) {
	#facebox .assignment_pop .columns-display .column.one,
	#facebox .assignment_pop .columns-display .column.two,
	#facebox .assignment_pop .columns-display .column.three,
	#facebox .assignment_pop .columns-display .column.four {width: 100%; padding: 0; border: 0}

	#facebox .assignment_pop .columns-display .column.one,
	#facebox .assignment_pop .columns-display .column.three,
	#facebox .assignment_pop .columns-display .column.two,
	#facebox .assignment_pop .columns-display .column.four {padding-right: 0}
}
@media screen and (max-width: 979px) {
	/* Resets for tags in logged-in view */
	body:not(.portal):not(.edu2) #facebox .facebox-content label, #facebox .labelGap,
	body:not(.portal):not(.edu2) #facebox .facebox-content legend {display: block; width: 100% !important}
	body:not(.portal):not(.edu2) #facebox .facebox-content input[type="checkbox"]:not(.emptyLabel) + label,
	body:not(.portal):not(.edu2) #facebox .facebox-content input[type="radio"]:not(.emptyLabel, [name="language"]) + label {line-height: 30px}
	body:not(.portal):not(.edu2) #facebox .facebox-content .search-item input[type="radio"]:not(.emptyLabel) + label {line-height: 21px}
	#facebox #faceboxContent span.max-info + label,
	body:not(.portal):not(.edu2) #facebox .facebox-content select + label,
	body:not(.portal):not(.edu2) #facebox .facebox-content [type="checkbox"] + label + label,
	body:not(.portal):not(.edu2) #facebox .facebox-content input[type="hidden"] + label {margin-top: 10px}/* type=hidden for Lesson and Quiz assignment popups */

	body:not(.portal):not(.edu2) #facebox .facebox-content input[type="password"],
	body:not(.portal):not(.edu2) #facebox .facebox-content input[type="text"],
	body:not(.portal):not(.edu2) #facebox .facebox-content input[type="file"],
	body:not(.portal):not(.edu2) #facebox .facebox-content textarea,
	body:not(.portal):not(.edu2) #facebox .facebox-content legend,
	body:not(.portal):not(.edu2) #facebox .facebox-content .select2-popup-input,
	#facebox .facebox-content:not(.help_centre) .optionsRibbon {max-width: 100%; box-sizing: border-box; margin: 0}
	body:not(.portal):not(.edu2) #facebox .facebox-content select,
	#facebox .facebox-content input[type="text"].hasDatepicker,
	#facebox form#action_form .select2-container {width: 100% !important; display: block}
	body:not(.portal):not(.edu2) #facebox .facebox-content p {width: 100% !important; padding: 0}

	#facebox form label br{display:none}

	#facebox .facebox-content p.mb0 + p.mt0,
	#facebox .facebox-content #assignmentScore + label,
	#facebox form#resources_form .facebox-content .search-item {margin-top: 10px}
	/*#facebox .facebox-content .optionsRibbon {margin-left: 3px; width: auto}*/

	body:not(.portal):not(.edu2) #facebox .facebox-content .badgeLibraryCheckboxes label:not(:first-child) {display: inline-block; width: auto !important}

	/* Attendance Table */
	#facebox table.attendance, #facebox table.attendance tr, #facebox table.attendance td, #facebox table.attendance span {display: block; text-align: left}
	#facebox table.attendance th, #facebox table.attendance td.highlight {display: none}
	#facebox table.attendance td {line-height: 20px; height: auto; border-width: 0; padding: 5px 0}

	#facebox .help_centre .contentBlock {padding: 10px 15px; width: 100%}
	#facebox .help_centre .contentBlock:nth-child(1), #facebox .help_centre .contentBlock:nth-child(2) {margin-top: 0}
	#facebox .help_centre .contentBlock, #facebox .help_centre .contentBlock:nth-child(2n+2), #facebox .help_centre .contentBlock:nth-last-child(2) {margin-bottom: 10px}
	#facebox .help_centre .contentBlock:last-child {margin-bottom: 0}
	#facebox .help_centre .help_centre_content img {height: auto !important}

	/* People Picker */
	#facebox .section-intro .contentBlock .sideText p.number {width: 30px !important; line-height: 30px; display: block}
	#facebox .section-intro .contentBlock .sideText p:not(.number) {width: auto !important}

	/* Action form */
	#facebox form#action_form select#rule_action_execute_when {margin-bottom: 10px}
}
@media screen and (min-width: 980px) {
	/* Global */
	#facebox .facebox-content {overflow-y: auto; -webkit-overflow-scrolling: touch; max-height: 585px}
	#facebox .facebox-content.no_max_height {max-height: 100%}
	#facebox #faceboxContent, #facebox #alerts {min-width: 100%}
	#facebox div.error {width: auto}
	#facebox .header h4 {max-width: 100%}
	#facebox form.langForm .facebox-content {width: 820px}
	#facebox form.langForm .facebox-content div {width: 205px}
	#facebox ul.tabnav {margin: 1px 0 10px; padding: 0 0 7px}
	#facebox .facebox-content.xl_popup {width: 840px}
	#facebox .facebox-content.xxl_popup {width: 950px}

	/* Logged In */
	#facebox form#assignment_form .facebox-content {width: 850px}
	#facebox .facebox-content.help_centre {width: 940px}
	#facebox .facebox-content.help_centre .hc-topic-icon-title {margin-bottom: 0}
	#facebox .facebox-content.help_centre .hc-topic-icon-title i {margin-top: -4px}
	#facebox .facebox-content.help_centre .hc-topic-icon-title a {font-size: 18px}
	#facebox .facebox-content.help_centre .hc-topic-description {padding-left: 24px; height: 42px; overflow: hidden}
	#facebox .facebox-content.help_centre form.search-form {margin: 0 17px 0 0; float: right}
	#facebox .facebox-content.help_centre form.search-form input[type="text"] {width: 145px}
	#facebox .facebox-content.help_centre .help_centre_heading {padding: 13px 17px}
	#facebox .facebox-content.help_centre .help_centre_content {margin: 13px 17px}
	#facebox .facebox-content.help_centre .help_centre_content.help_overview {margin: 13px 0; padding: 0 17px 5px}
	#facebox .facebox-content.help_centre .help_centre_content .optionsRibbon {margin-left: -2px; display: inline-block}
	#facebox .facebox-content.help_centre .help_centre_content .hc-edit {text-align: left !important; width: 99.5%}

	#facebox .facebox-content.sml_popup input[type='text']:not([style*='width']) {margin: 0}
	#facebox .facebox-content.sml_popup input[type='text'].sml_popup_inline_input {width: calc(100% - 130px); margin: 0}

	#facebox div.facebox-resources-filter, #facebox form#resources_form .facebox-content {width: 775px}
	#facebox div.facebox-resources-filter label {width: auto; margin: 0 3px 0 0}
	#facebox div.facebox-resources-filter select {width: 140px; margin-right: 5px; margin-left: 5px; display: inline-block}

	#facebox .facebox-content .row.col-2 input[type="text"],
	#facebox .facebox-content .row.col-2 label,
	#facebox .facebox-content .row.col-2 legend {width: 100%; margin-right: 0}
	#facebox .facebox-content .row.col-2 .emptyLabel + label,
	#facebox .facebox-content .row.col-2 input[type="checkbox"] + label,
	#facebox .facebox-content .row.col-2 input[type="radio"] + label {width: auto}

	#facebox .facebox-content .inline_form_elements,
	#facebox .facebox-content .badgeLibraryCheckboxes p {display: table}
	#facebox .facebox-content .inline_form_elements > *:first-child,
	#facebox .facebox-content .badgeLibraryCheckboxes p label:first-child {display: table-cell; width: 128px}
	#facebox .facebox-content .inline_form_elements > p {display: inline-block; margin: 0}
	#facebox .facebox-content .badgeColors .color_recommendations {margin-top: 10px}

	#facebox .halfColumnForm {width: 323px; float: left; margin-top: 0}
	#facebox .halfColumnForm input[type="text"],
	#facebox form#action_form .select2-container {width: 180px}

	#facebox #ResourceLibraryFilterWrapper .facebox-content {max-height: 435px; width: auto; max-width: 775px}

	#facebox p.inline_form_elements {margin-bottom: 0}
	#facebox .inline_form_elements select#rule_action_execute_when,
	#facebox .inline_form_elements select#rule_action_execute_when ~ * select {margin-bottom: 10px}
	#facebox .inline_form_elements select#rule_action_execute_when ~ .after .time_wrap {display: inline-block}
}
@media screen and (min-width: 1280px) {
	#facebox .facebox-content.help_centre {width: 1033px}
	#facebox .facebox-content.xxl_popup {width: 1100px}
}