.loading-spinner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	border: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	z-index: 9999;
	justify-content: center;
	background: rgba(45, 59, 69, 0.75);
	border-top: 1px solid #c7cdd1;
	flex-direction: column;
}

.loading-spinner .spinner-grow {
	width: 70px;
	height: 70px;
	color: white;
	margin-bottom: 10px;
}

.loading-spinner .loading-text {
	color: white;
}

.loading-spinner .loading-text:after {
	content: '.';
	animation: dots 1s steps(5, end) infinite;
}

.header-cell-dropdown.dropdown {
	position: absolute;
	bottom: 13px;
	right: 8px;
}

.header-cell-dropdown.dropdown .btn-secondary {
	border-color: #eeeeee;
	background-color: #fbfbfb;
	color: #2D3B45;
}

.header-cell-dropdown .dropdown-toggle {
	padding: 5px 7px;
	line-height: 0;
}

.header-cell-dropdown .dropdown-toggle::after {
	margin-left: 0;
}

@keyframes dots {

	0%,
	20% {
		color: rgba(0, 0, 0, 0);
		text-shadow:
			.25em 0 0 rgba(0, 0, 0, 0),
			.5em 0 0 rgba(0, 0, 0, 0);
	}

	40% {
		color: white;
		text-shadow:
			.25em 0 0 rgba(0, 0, 0, 0),
			.5em 0 0 rgba(0, 0, 0, 0);
	}

	60% {
		text-shadow:
			.25em 0 0 white,
			.5em 0 0 rgba(0, 0, 0, 0);
	}

	80%,
	100% {
		text-shadow:
			.25em 0 0 white,
			.5em 0 0 white;
	}
}

.alert {
	margin-top: 16px !important;
}

.col-icon {
	margin-right: 8px;
	min-width: 16px;
}

/* Use Bootstrap exclamation-square-fill icon for omitted status */
.col-icon.fas.fa-exclamation-circle,
.qtip-info-icon.fas.fa-exclamation-circle {
	width: 16px;
	height: 16px;
	display: inline-flex;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23121212' class='bi bi-exclamation-square-fill' viewBox='0 0 16 16'%3e%3cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm6 4c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995A.905.905 0 0 1 8 4m.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	font-size: 0;
	color: transparent;
}

.instructorTable {
	font-size: 12px;
}

.table-container {
	overflow: hidden;
	width: 100%;
	margin-top: 24px;
}

/* Make qTip dark theme match Bootstrap dark tooltip appearance for final grade popovers */
.qtip.qtip-dark {
	border: none !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}

.qtip.qtip-dark .qtip-content,
.qtip.qtip-dark .qtip-inner {
	background: #111 !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 10px !important;
	box-shadow: none !important;
	border: 1px solid rgba(0, 0, 0, 0.3) !important;
	max-width: 320px;
	outline: none !important;
	background-clip: padding-box;
}

.qtip.qtip-dark .qtip-tip {
	border-top-color: #111 !important;
	box-shadow: none !important;
}

.qtip.qtip-dark .qtip-title,
.qtip.qtip-dark .qtip-text,
.qtip.qtip-dark .qtip-content p,
.qtip.qtip-dark .qtip-content td,
.qtip.qtip-dark .qtip-content th,
.qtip.qtip-dark .qtip-content table {
	color: #f1f1f1 !important;
}

.qtip.qtip-dark .qtip-content .qtip-info-icon,
.qtip.qtip-dark .qtip-info {
	color: #fff !important;
}

.qtip-content td {
	padding: 0.3rem 0 !important;
}

#tableContainer .studentTable .handsontable thead th {
	background-color: #F9F9F9;
	border-bottom: 1px solid #bbbbbb;
	height: 64px;
}

#tableContainer .studentTable .handsontable thead th.ht__active_highlight {
	background-color: #8eb0e7;
}

#tableContainer .studentTable .handsontable tbody tr:nth-child(even) td {
	background-color: #F9F9F9;
}

#tableContainer .studentTable .handsontable tbody tr:nth-child(odd) td {
	background-color: #FFFFFF;
}

#tableContainer .studentTable .handsontable td,
#tableContainer .studentTable .handsontable th {
	border-color: #eeeeee;
	overflow: initial;
	position: relative;
}

#tableContainer .studentTable .handsontable td .spinner::before {
	content: " ";
	position: absolute;
	top: calc(50% - 10px);
	left: calc(50% - 10px);
	border: 0;
	width: 20px;
	height: 20px;
	vertical-align: text-bottom;
	border: .20em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: spinner-border .75s linear infinite;
	animation: spinner-border .75s linear infinite;
	color: #a2a2a2;
	z-index: 2;
}

#tableContainer .studentTable .handsontable td .spinner::after {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #e0e0e0;
}

#tableContainer .studentTable .ht_clone_left.handsontable td:nth-child(2),
#tableContainer .studentTable .ht_clone_top_left_corner.handsontable th:nth-child(2) {
	border-right-color: #cccccc;
}

#tableContainer .studentTable .handsontable span.colHeader {
	font-weight: 500;
	padding: 2px 25px 2px 7px;
	width: 100%;
	text-decoration: none;
}

#tableContainer .studentTable .handsontable thead th .relative {
	padding: 0;
	width: 100%;
	height: inherit;
}

#tableContainer .studentTable .handsontable span.colHeader.columnSorting::before {
	display: none;
}

#tableContainer .studentTable .handsontable span.colHeader.columnSorting {
	position: relative;
	display: inline-flex;
	flex-direction: row;
	height: inherit;
}

#tableContainer .studentTable .handsontable span.colHeader.columnSorting::after {
	position: absolute;
	right: 8px;
	font-size: 1rem;
	top: 3px;
}

#tableContainer .studentTable .handsontable span.colHeader.columnSorting.sortAction.descending::after {
	content: '\f0de';
	font-family: FontAwesome;
}

#tableContainer .studentTable .handsontable span.colHeader.columnSorting.sortAction.ascending::after {
	content: '\f0dd';
	font-family: FontAwesome;
}

#tableContainer .studentTable .handsontable th:nth-child(3) {
	border-left: none;
}

#tableContainer .studentTable .handsontable th,
#tableContainer .studentTable .handsontable td {
	min-width: 75px;
}

#tableContainer .studentTable .handsontable th>div>span>span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#tableContainer .studentTable .handsontable td {
	padding: 0;
}

#tableContainer .studentTable .handsontable td>div {
	width: calc(100% - 14px);
	height: 32px;
	line-height: 32px;
	padding: 2px 7px;
	position: relative;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#tableContainer .studentTable .handsontable td .gb-save-success {
	background-color: #DFF0D8;
	position: relative;
}

#tableContainer .studentTable .handsontable td .gb-save-success::before {
	content: '\f05d';
	color: green;
	position: absolute;
	left: 8px;
	font-family: 'FontAwesome';
	opacity: 1;
	background-color: transparent;
	right: initial;
}

#tableContainer .studentTable .handsontable td .gb-save-error {
	background-color: #FFBBBB;
	position: relative;
}

#tableContainer .studentTable .handsontable td .gb-save-error::before {
	content: '\f06a';
	color: #cc0000;
	position: absolute;
	left: 8px;
	font-family: 'FontAwesome';
	opacity: 1;
	background-color: transparent;
	right: initial;
}

#tableContainer .studentTable .handsontable td .gb-save-info {
	background-color: #DFF0D8;
	position: relative;
}

#tableContainer .studentTable .handsontable td .gb-save-info::before {
	content: '\f0fe';
	color: green;
	position: absolute;
	left: 8px;
	font-family: 'FontAwesome';
	opacity: 1;
	background-color: transparent;
	right: initial;
}

#tableContainer .studentTable .handsontable td .gb-not-supported {
	background-color: #FCF8E3;
	position: relative;
}

#tableContainer .studentTable .handsontable td .gb-not-supported::before {
	content: '\f06a';
	color: #c89000;
	position: absolute;
	left: 8px;
	font-family: 'FontAwesome';
	opacity: 1;
	background-color: transparent;
	right: initial;
}

#tableContainer .studentTable .handsontable td .gb-cell-disabled {
	background: #e0e0e0;
	position: relative;
}

#tableContainer .studentTable .handsontable td .gb-cell-disabled::before {
	content: '\f05e';
	color: #888888;
	position: absolute;
	left: 8px;
	font-family: 'FontAwesome';
	opacity: 1;
	background-color: transparent;
	right: initial;
}

#tableContainer .studentTable table tr th {
	text-align: left;
}

#tableContainer .studentTable .handsontable th,
#tableContainer .studentTable .handsontable td {
	height: 32px;
	line-height: 32px;
	color: #2D3B45;
}

#tableContainer .studentTable .ht_master.handsontable th:last-of-type,
#tableContainer .studentTable .ht_master.handsontable td:last-of-type {
	border-right: 0;
}

#tableContainer .studentTable .handsontable .htDimmed {
	color: initial;
}

#tableContainer .studentTable .handsontable .wtBorder.corner {
	display: none !important;
}

#tableContainer .studentTable table tr>td .align-left {
	text-align: left;
}

.handsontable textarea {
	text-align: center;
	height: 37px !important;
	line-height: 36px !important;
}

.wtHolder::-webkit-scrollbar {
	width: 17px;
	height: 17px;
}

.wtHolder::-webkit-scrollbar-track {
	background-color: #EEE;
}

.wtHolder::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background-color: rgba(170, 170, 170, 0.5);
	border: 3px solid rgba(238, 238, 238, 1);
}

.wtHolder::-webkit-scrollbar-thumb:hover {
	background-color: #AAA;
}

.send-to-banner-container {
	position: relative;
}

.send-to-banner-container::before {
	content: " ";
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	width: 100%;
	height: 1px;
	background-color: #c7cdd1;
	z-index: 2;
}

table.table tr.error td {
	background-color: #FCF8E3;
	position: relative;
}

table.table tr.success td {
	background-color: #DFF0D8;
	position: relative;
}

.admin-container {
	overflow: hidden;
	width: 100%;
	margin-top: 24px;
	margin-bottom: 24px;
}

.admin-container::before {
	content: " ";
	position: fixed;
	top: 0px;
	left: 0;
	right: 0;
	width: 100%;
	height: 1px;
	background-color: #c7cdd1;
	z-index: 2;
}

.cursor-pointer {
	cursor: pointer;
}

.w-content {
	min-width: 16px;
	max-width: 16px;
}

#tableContainer .studentTable .handsontable td>div .speed-grader {
	position: absolute;
	right: 7px;
	top: 9px;
	display: none;
}

#tableContainer .studentTable .handsontable td>div:hover .speed-grader,
#tableContainer .studentTable .handsontable td>div:active .speed-grader {
	display: block;
}

.qtip.qtip-content-info {
	font-size: 12.5px;
	line-height: 16.5px;
	max-width: 228px;
	background: white;
	border-radius: 4px;
	box-shadow: #0000001f 0px 2px 2px 1px;
	margin-top: -9px;
	margin-left: -1px;
}

.qtip.qtip-content-info .qtip-content {
	padding: 9px 11px;
}

span.qtip-info-icon {
	width: 16px;
	height: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav-tabs.canvas-nav-tabs {
	margin-bottom: 14px;
}

.nav-tabs.canvas-nav-tabs .nav-link {
	font-size: .875rem;
}

h2.canvas-h2 {
	font-size: 25.4px;
	line-height: 1.5;
	font-weight: normal;
	margin: 6px 0 15px 0;
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.canvas-input {
	transition: all 0.2s ease-out;
	outline-color: transparent;
	outline-offset: -12px;
	background: #fff;
	padding: 8px 12px;
	-webkit-appearance: none;
	border-color: #d8e0e6;
	outline-style: solid;
	outline-width: 12px;
	border: 1px solid #ccc;
	font-size: .875rem;
	line-height: 20px;
	border-radius: 3px;
}

.canvas-input:focus {
	outline-width: 2px;
	outline-offset: -2px;
	border-color: #3d7edb;
	outline-color: #5a91e0;
}

.btn-banner::before {
	font-family: 'FontAwesome';
	content: '\f064';
}

.btn-admin::before {
	font-family: 'FontAwesome';
	content: '\f013';
}

#assignmentTable .group {
	background-color: #eee !important;
}

.top-bar {
	padding: 5px;
}

.top-bar .top-bar-left .canvas-input {
	width: 100%;
}

@media (max-width: 767px) {
	.top-bar .top-bar-right {
		margin-top: 5px;
	}
}

.canvas-btn-group {
	margin-right: 6px;
	display: flex;
}

.canvas-btn-group:first-of-type {
	margin-left: auto;
}

.canvas-btn-group:last-of-type {
	margin-right: 0;
}

.canvas-btn-group .canvas-btn {
	border-right-width: 0;
}

.canvas-btn-group .canvas-btn:last-of-type {
	margin-right: 0;
	border-right-width: 1px;
}

.canvas-btn {
	background: #f5f5f5;
	color: #2D3B45;
	border: 1px solid;
	border-color: #C7CDD1;
	transition: background-color 0.2s ease-in-out;
	display: inline-block;
	position: relative;
	padding: 8px 14px;
	margin-bottom: 0;
	font-size: 0.875rem;
	line-height: 20px;
	text-align: center;
	vertical-align: middle;
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
	text-shadow: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;
	font-weight: normal;
}

a.canvas-btn:hover {
	text-decoration: none;
}

.canvas-btn:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px #3d7edb;
}

.canvas-btn:hover {
	background: #e8e8e8;
	color: #2D3B45;
}

.canvas-btn:active {
	background: #e1e1e1;
}

.canvas-btn[disabled] {
	cursor: not-allowed;
	pointer-events: none;
	opacity: 0.5;
}

.btn-primary .spinner-border {
	display: none;
}

.btn-primary .spinner-border-active {
	display: inline-block;
}

.btn-primary.spinner .spinner-border {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	width: 20px;
	height: 20px;
	border-width: 3px;
	display: block;
}

.canvas-btn.primary-btn {
	background-color: #3a78d1;
	border-color: #346cbb;
	color: #ffffff;
}

.canvas-btn.primary-btn:hover,
.canvas-btn.primary-btn:active {
	background: #3a78d1;
}

.spinner-border.student-spinner {
	width: 20px;
	height: 20px;
	border-width: 3px;
	color: darkgrey;
}

body .modal-backdrop {
	background: rgba(45, 59, 69, 0.75);
}

body .modal-backdrop.show {
	opacity: 1;
}

.modal .modal-footer {
	background-color: #f2f2f2;
}

body .dropzone {
	border: 2px dashed #aaaaaa;
	border-radius: 5px;
	background: white;
}

body .dropzone.dz-drag-hover {
	border-style: dashed;
	border-color: #cccccc;
}

.header-status {
	position: absolute;
	bottom: 14px;
}

.studentAssignmentGroup {
	visibility: hidden;
}

.studentAssignmentRow:hover .studentAssignmentGroup {
	visibility: visible;
}

.sendBannerGradesSpinner {
	visibility: hidden;
}

.table-fixed tbody {
	height: 400px;
	overflow-y: auto;
	width: 100%;
}

.table-fixed thead,
.table-fixed tbody,
.table-fixed tr,
.table-fixed td,
.table-fixed th {
	display: block;
}

.table-fixed thead>tr>th {
	float: left;
	position: relative;
}

.table-fixed tbody td::after,
.table-fixed tbody th::after,
.table-fixed thead>tr>th::after {
	content: '';
	clear: both;
	display: block;
}

.table-fixed thead {
	padding-right: 17px;
}

.table-fixed tbody>tr {
	display: flex;
	flex-direction: row;
}

/* ========================================================================
   CANVAS-STYLE NOTES VIEW — Light Theme (Mobile-First)
   ======================================================================== */

/* App-level wrapper (standalone student view only) */
.notes-app {
	max-width: 600px;
	margin: 0 auto;
}

/* Header */
.notes-header {
	text-align: center;
	padding: 18px 16px 10px;
	background: #ffffff;
	border-bottom: 1px solid #e9ecef;
}

.notes-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: #212529;
	margin: 0;
}

.notes-subtitle {
	display: block;
	font-size: 0.8rem;
	color: #6c757d;
	margin-top: 2px;
}

/* Restriction banner */
.notes-banner {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px;
	margin: 0;
	background: #fff9e6;
	border-bottom: 1px solid #f0e6c0;
	color: #5a5000;
	font-size: 0.875rem;
}

.notes-banner-icon {
	font-size: 1rem;
	color: #9a8700;
}

/* Main content container */
.notes-content {
	max-width: 600px;
	margin: 0 auto;
	background: #ffffff;
}

/* Filter bar */
.notes-filter-bar {
	padding: 12px 16px;
	background: #f8f9fa;
	border-bottom: 1px solid #e9ecef;
}

.notes-filter-label {
	display: block;
	font-size: 0.75rem;
	font-weight: 600;
	color: #6c757d;
	margin-bottom: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.notes-filter-select {
	font-size: 0.875rem;
	border-radius: 6px;
	border: 1px solid #dee2e6;
	padding: 6px 10px;
	height: auto !important;
}

/* Student name */
.notes-student-name {
	padding: 12px 16px 4px;
	font-size: 1rem;
	font-weight: 600;
	color: #212529;
	margin: 0;
}

/* Section (assignment group) */
.notes-section {
	border-bottom: 1px solid #e9ecef;
}

.notes-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: #f8f9fa;
	cursor: pointer;
	user-select: none;
}

.notes-section-title {
	font-size: 0.8rem;
	font-weight: 700;
	color: #495057;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.notes-section-chevron {
	font-size: 0.7rem;
	color: #adb5bd;
	transition: transform 0.2s ease;
}

/* Activity row */
.notes-activity-row {
	display: flex;
	align-items: flex-start;
	padding: 14px 16px;
	border-bottom: 1px solid #f1f3f5;
	gap: 12px;
	background: #ffffff;
	transition: background-color 0.15s;
	overflow: visible;
}

.notes-activity-row:last-child {
	border-bottom: none;
}

.notes-activity-row:hover {
	background-color: #f8f9fa;
}

/* Activity icon */
.notes-activity-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: #e9ecef;
	color: #495057;
	font-size: 1rem;
	margin-top: 2px;
}

/* Activity info block */
.notes-activity-info {
	flex: 1;
	min-width: 0;
	overflow: visible;
}

.notes-activity-title {
	display: block;
	font-size: 0.9rem;
	font-weight: 500;
	color: #212529;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.notes-activity-title:hover {
	color: #3a78d1;
	text-decoration: underline;
}

/* Due date */
.notes-activity-due {
	display: block;
	font-size: 0.78rem;
	color: #868e96;
	margin-top: 2px;
}

/* Bottom line: score | status */
.notes-activity-bottom {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 5px;
	flex-wrap: wrap;
	overflow: visible;
}

.notes-activity-score {
	font-size: 0.82rem;
	font-weight: 500;
	color: #495057;
}

/* Smaller square status icons inside activity rows */
.status-icon-square {
	width: 12px !important;
	height: 12px !important;
	margin-right: 6px;
	vertical-align: middle;
}

.notes-score-separator {
	margin: 0 2px;
	color: #adb5bd;
}

.notes-activity-divider {
	color: #dee2e6;
	font-size: 0.8rem;
}

/* Status badges */
.notes-status {
	font-size: 0.75rem;
	display: inline-flex;
	align-items: center;
}

.notes-status-not-submitted {
	color: #868e96;
}

.notes-status-submitted {
	color: #2b8a3e;
}

.notes-status-missing {
	color: #e03131;
}

.notes-status-late {
	color: #e67700;
}

.notes-status-excused {
	color: #3a78d1;
}

/* Info icons (comments, stats, etc.) */
.notes-info-icon {
	font-size: 0.78rem;
	color: #adb5bd;
	margin-left: 4px;
	cursor: default;
}

.notes-info-icon:hover {
	color: #495057;
}

/* Grade Summary */
.notes-grade-summary {
	margin-top: 8px;
	border-top: 2px solid #e9ecef;
	background: #f8f9fa;
}

.notes-grade-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 16px;
	border-bottom: 1px solid #e9ecef;
}

.notes-grade-label {
	font-size: 0.85rem;
	color: #495057;
}

.notes-grade-value {
	font-size: 0.85rem;
	font-weight: 600;
	color: #212529;
}

.notes-grade-highlight {
	background: #ffffff;
}

.notes-grade-highlight .notes-grade-label {
	font-weight: 600;
	color: #212529;
}

.notes-grade-final {
	border-bottom: none;
	background: #e7f5ff;
}

.notes-grade-final .notes-grade-label,
.notes-grade-final .notes-grade-value {
	font-size: 0.95rem;
	font-weight: 700;
	color: #1864ab;
}

/* Responsive adjustments */
@media (min-width: 768px) {

	/* Use the full available width on desktop while keeping the
	   mobile-centered max-width behaviour for small screens. */
	.notes-app,
	.notes-content {
		max-width: none;
		width: 100%;
		margin: 0;
		border-left: none;
		border-right: none;
	}

	.notes-activity-title {
		white-space: normal;
	}
}

@media (max-width: 480px) {
	.notes-activity-row {
		padding: 12px 12px;
		gap: 10px;
	}

	.notes-activity-icon {
		width: 32px;
		height: 32px;
		font-size: 0.9rem;
	}

	.notes-activity-title {
		font-size: 0.85rem;
	}

	.notes-grade-row {
		padding: 10px 12px;
	}
}