#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; box-shadow: 0 0 10px rgba(0,0,0,.2); border-radius: 8px}
#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}

#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 .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 .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), .logoWrapper img {float: left; margin: 0 15px 10px 3px; max-width: 100%; height: auto}
#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 #user_trash_popup .optionsRibbon {margin: 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 #fff}
#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 .facebox-content input[type="text"], #facebox .facebox-content input[type="password"],
#facebox .facebox-content textarea, #facebox .facebox-content .optionsRibbon {
	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: #F4F4F4; 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; display: inline; 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; width: 15px; height: 15px; z-index: 15; border: 9px solid transparent}
#facebox .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}

/* Main site portal search form */
#facebox .searchPortalForm {overflow: hidden; padding: 3px}
#facebox .searchPortalForm input[type="text"] {width: 100%}
#facebox .searchPortalForm input[type="button"] {float: right; margin-right: 0}

/* Main site regions grid */
#facebox .regions_grid {display: flex; flex-wrap: wrap; justify-content: space-between}
#facebox .regions_grid a {width: calc(33% - 10px); padding: 5px}

/* Main site reseller Hubspot form */
#facebox .facebox-content .hbspt-form form {padding: 20px}
#facebox .facebox-content .hbspt-form input[type="text"],
#facebox .facebox-content .hbspt-form textarea,
#facebox .facebox-content .hbspt-form label {width: 100%}

/* 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}

/* 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 #e0e2e2; margin: 0 10px; width: 100px; display: flex; align-items: center; padding: 5px; flex-shrink: 0}
#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;
	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 #efefef; border-radius: 5px; transition: all .4s ease-in-out}
#facebox .help_centre .contentBlock:hover {background-color: transparent; box-shadow: 0 0 10px rgba(0,0,0,.06); border-color: #dfdfdf}
#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 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}

/* ------------------------ 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
}
.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 #PeoplePicker .people_scroller {overflow: auto}
#facebox #PeoplePicker .half#people_selected {overflow: hidden}
#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}

/* ----------------- Proficiency Picker ----------------- */
#facebox #ProficiencyPicker .proficiency_scroller {overflow: auto}
#facebox #ProficiencyPicker .half#proficiency_selected {overflow: hidden}

/* ----------------- 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}
#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 li {margin-bottom: 10px; border-top: 1px solid #e2e0e0; 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}

@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, #facebox div.error {width: 420px}
	#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 .facebox-content, #facebox #alerts, #facebox div.error {width: 500px}
	#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}
	.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: 45%; padding: 0; border: 0}

	#facebox .assignment_pop .columns-display .column.one,
	#facebox .assignment_pop .columns-display .column.three {padding-right: 4% }

	#facebox .assignment_pop .columns-display .column.two,
	#facebox .assignment_pop .columns-display .column.four {padding-right: 4% }
}
@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,
	#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: -8px}
	#facebox .facebox-content.help_centre .hc-topic-icon-title a {font-size: 20px}
	#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}
	#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 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}
}
@media screen and (min-width: 1280px) {
	#facebox .facebox-content.help_centre {width: 1033px}
	#facebox .facebox-content.xxl_popup {width: 1100px}
}