@charset "UTF-8";


/*===================================================================
	STYLE FOR THE BODY
===================================================================*/
html,body {
	/*font-family: Arial, Helvetica, Verdana, sans-serif;*/
	font-family: Verdana, sans-serif;
	font-size: 14px;
	margin:0;
	height:100%;
	box-sizing:border-box;
}

body#full {
	/* The following is to center the content horizontally for 
	 * browsers that ignore 'auto' value for the margins. */
	text-align: center;
	height:100%;
}
body#popup {
	margin:0 10px;
	height:auto;
}
#preparation,#evaluation {
	visibility:hidden;
}

body.form {
	padding-bottom:40px;
}

select {
	font-size: 14px;
	background-color: #fff;
}

/*===================================================================
	WAIT SYMBOL ANIMATION
===================================================================*/
@-webkit-keyframes spin
{
	from { -webkit-transform: rotate(0deg); opacity: 0.4; }
	50%  { -webkit-transform: rotate(180deg); opacity: 1; }
	to   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin
{
	from { -moz-transform: rotate(0deg); opacity: 0.4; }
	50%  { -moz-transform: rotate(180deg); opacity: 1; }
	to   { -moz-transform: rotate(360deg); opacity: 0.4; }
}

@-ms-keyframes spin
{
	from { -ms-transform: rotate(0deg); opacity: 0.4; }
	50%  { -ms-transform: rotate(180deg); opacity: 1; }
	to   { -ms-transform: rotate(360deg); opacity: 0.4; }
}

@-o-keyframes spin
{
	from { -o-transform: rotate(0deg); opacity: 0.4; }
	50%  { -o-transform: rotate(180deg); opacity: 1; }
	to   { -o-transform: rotate(360deg); opacity: 0.4; }
}

@keyframes spin
{
	from { transform: rotate(0deg); opacity: 0.2; }
	50%  { transform: rotate(180deg); opacity: 1; }
	to   { transform: rotate(360deg); opacity: 0.2; }
}
img[src*="waiting"] {
	-webkit-animation: spin 1s linear infinite;
	-moz-animation: spin 1s linear infinite;
	-ms-animation: spin 1s linear infinite;
	-o-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
}

@keyframes btnwait {
    from { transform: rotate(0turn); }
    to { transform: rotate(1turn); }
}



/*===================================================================
	STYLE FOR THE DIV CONTAINERS
===================================================================*/
div { 
	text-align: left;
	box-sizing: border-box;
}
div#clear {
	/* Please note that 'auto' value for the margins are not always honoured by some browsers. */
	margin: 0 auto;
	
	clear: both; 
	overflow:hidden; 
	
	width: 1000px;
	height: 1px;
}
div#banner {
	position: fixed;
	height: 34px;
	width: 100%;
	top: 0;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width:1600px;
	z-index:7910;
	box-shadow: 0px 0px 6px #000;
}
div.lti-prompt {
	position: fixed;
	width: 100%;
	top: 34px;
	left: 0;
	right: 0;
	margin: 0 auto;
	max-width:1600px;
	z-index:7905;
	box-shadow: 0px 0px 6px #000;
	text-align: center;
}
div.lti-prompt form {
	display: inline-block;
}
div#main {
	margin: 0px auto;
	width: 100%;
	height:100%;
	max-width:1600px;
	box-sizing:border-box;
	position:relative;
	overflow: auto;
	min-height: 500px;
}
div#main.with-banner {
	padding:34px 0px 30px 0px;
}
div#leftPanel {
	/*float: left;*/
	width: 340px;
	padding: 10px;
	vertical-align: top;
	position: fixed;
	overflow: auto;
	bottom: 0px;
	top: 34px;
}

div#rightPanel {
	width: auto;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 10px;
	margin-left: 340px;
	vertical-align: top;
}

div#sbj_list {
	height: 500px;
	overflow: auto;
}

hr.sectionHeader {
	height:5px;
	border:0
}
hr {
	clear:both;
	border: 0;
	height: 1px;
}

label {
	width: 9em;
	float: left;
	margin-right: 0.5em;
	display: block
}
label.normal {
	float:none;
	width:auto;
	display:inline;
}
.radio-label {
	width:100%;
}
p.first {
	margin-top: 2em;
}

table {
	font-size: 100%;
}

/*===================================================================
	STYLE FOR THE FORM TABLE
===================================================================*/
.form-row {
	clear: both;
	overflow: auto;
}
.form-label {
	float:left;
}
.form-field {
}
.form-btns {
	float:right;
}

table.form, th.form, td.form {
	text-align: left;
	vertical-align: top;
}

tr.cat-row {
}
tr.crit-row td {
	padding-left:10px;
}
input.cat-field,input.cat-weight {
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
}
.crit-field {
	width:100%;
	box-sizing: border-box;
	resize: vertical;
	padding: 2px;
	height:70px;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
}

input.caps-lock-on {
	background-image : url(img/caps.gif);
	background-position : right center;
	background-repeat : 'no-repeat';
}

/*===================================================================
	STYLE FOR THE LIST TABLE
===================================================================*/
.list thead {
position: sticky;
top: 0px;
z-index: 1;
}

table#subject-list-view-all {
	width: 100%;
}

table#subject-list-view-all tr {
	cursor: pointer;
}

table#subject-list-view-all th {
	text-align: left;
}
table.list {
	border-collapse:collapse;
}
a.sorted {
	background-repeat:no-repeat;
	background-position:0px 2px;
	padding-left:8px;
}
a.btn.sorted {
	background-repeat:no-repeat;
	background-position:4px 2px;
	padding-left:8px;
}
th.header {
	text-decoration: underline;
	cursor:pointer;
}
th.headerSortUp {
background:url(../img/down.gif) no-repeat 2px 7px;
text-indent:10px;
}
th.headerSortDown {
background:url(../img/up.gif) no-repeat 2px 7px;
text-indent:10px;
}

a.sortASC:link,a.sortASC:visited {
	background-image:url(../img/up.gif);
}
a.sortASC:hover,a.sortASC:active {
	background-image:url(../img/down.gif);
}
a.sortDESC:link,a.sortDESC:visited {
	background-image:url(../img/down.gif);
}
a.sortDESC:hover,a.sortDESC:active {
	background-image:url(../img/up.gif);
}
td.final_score {
	font-weight:bold;
}
#result-list td {
	vertical-align:top;	
}
/*===================================================================
	STYLE FOR THE MAINDIV TABLE
===================================================================*/
table#maindiv {
	margin: 0 auto;
	width: 1000px;
	height: 618px;
	text-align: left;
	font-size: 100%;
}

tr#assessment_banner{
	height: 100px;
}

/*===================================================================
	STYLE FOR SELECTABLE LISTS
===================================================================*/
ul.multiple-select {
	margin: 0;
	display: block;
	padding: 0 0 6px 0;
	list-style-type: none;
	max-height: 224px;
	overflow:auto;
}
ul.multiple-select li {
	white-space: nowrap;
	overflow: hidden;
	font-size: 14px;
	padding: 0 4px;
	height: 18px;
	display: block;
	line-height: 18px;
	cursor: pointer;
	box-sizing: border-box;
}
ul.multiple-select li span {
	box-sizing: border-box;
}
ul.multiple-select li.sorting span {
    line-height: 18px;
    position: relative;
    vertical-align: top;
}
ul.multiple-select li.sorting, span.sort-handle {
    position: relative;
}
ul.multiple-select li.sorting::before,ul.multiple-select li.sorting span.sort-handle::before {
    content:"";
    display:block;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    position:absolute;
    border: 2px dotted #063a58;
}
ul.multiple-select li.selected.sorting::before,ul.multiple-select li.selected.sorting span.sort-handle::before {
    border: 2px dotted white;
}
ul#task-list {
	min-height:54px;
}
ul#instructor-list {
	height:112px;
}
ul#task-list .lti-linked span.text {
	padding-left: 14px;
	background-size:12px 12px;
	background-repeat: no-repeat;
	background-position: left center;
}
ul#task-list .lti-linked span.text {
	background-image:url("../img/lti-linked-small-dark@2x.png");
}
ul#task-list .selected.lti-linked span.text {
	background-image:url("../img/lti-linked-small-light@2x.png");
}

/*===================================================================
	STYLE FOR THE ASSESSMENT CRITERIA TABLE
===================================================================*/
table#markingcriteria {
	width: 100%;
	font-size: 100%;
}

/*===================================================================
	STYLE FOR THE NAVIGATION TABLE
===================================================================*/
#task-nav {
	text-align: center;
	height:30px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	white-space: nowrap;
}
#task-nav a {
	display:inline-block;
	background-image:url(../img/task-nav-icons.png),url(../img/task-nav-icon-bg.png);
	background-size:36px 180px,36px 30px;
	background-repeat: no-repeat;
	background-position: -3px 0px,-1px 2px;
	box-sizing: border-box;
	width:auto;
	margin:0 1px;
	height:29px;
	line-height: 30px;
	padding-left:32px;
	padding-right:6px;
	text-decoration: none;
	text-align: left;
	border-radius: 15px 15px 0px 0px;
	border-left-width: 1px;
	border-left-style: solid;
	border-right-width: 1px;
	border-right-style: solid;
	border-top-width: 1px;
	border-top-style: solid;
	position:relative;
}
body.at2x #task-nav a {
	background-image:url(../img/task-nav-icons@2x.png),url(../img/task-nav-icon-bg@2x.png);
}
#task-nav a.setup {
	background-position: -3px 0px,-3px 0px;
}
#task-nav a.monitoring {
	background-position: -3px -30px,-3px 0px;
}
#task-nav a.results {
	background-position: -3px -60px,-3px 0px;
}
#task-nav a.setup:hover,#task-nav a.setup.current-task-nav {
	background-position: -3px -90px,-3px 0px;
}
#task-nav a.monitoring:hover,#task-nav a.monitoring.current-task-nav {
	background-position: -3px -120px,-3px 0px;
}
#task-nav a.results:hover,#task-nav a.results.current-task-nav {
	background-position: -3px -150px,-3px 0px;
}
#task-nav a.current-task-nav {
	height:30px;
}

.sub-nav {
	display: inline-block;
	line-height: 19px;
	margin: 0 4px;
	padding: 0 4px;
	text-decoration: none;
	border-left-width: 1px;
	border-left-style: solid;
	border-right-width: 1px;
	border-right-style: solid;
	border-top-width: 1px;
	border-top-style: solid;
	border-radius: 7px 7px 0px 0px;
	box-sizing: border-box;
}
.sub-nav-active {
    position: relative;
    top: 1px;
}

/*===================================================================
	STUDENT RESULTS - RADAR DIAGRAMS - screens with panels
===================================================================*/
#header-panel {
	position:fixed;
	height:auto;
	right:10px;
	left:10px;
}

#selector-panel {
	top:150px;
	position:fixed;
	width:180px;
	padding-right:5px;
	bottom:0px;
	overflow-x:hidden;
	overflow-y:auto;
	box-sizing:border-box;
}
#display-panel {
	position:fixed;
	top:150px;
	right:0px;
	left:195px;
	bottom:0px;
	padding-left:10px;
	overflow-y:auto;
	box-sizing:border-box;
}
#selector-panel span {
	width:100%;
	box-sizing:border-box;
	padding-right:4px;
}
/*===================================================================
	RADAR DIAGRAMS
===================================================================
#radar-diagram-selector {
	float:left;
	width:180px;
}
#radar-diagram {
	float:left;
	margin:0 0 10px 8px;
}*/

/*===================================================================
	STYLE FOR THE RESULTS TABLE ON RADAR DIAGRAMS PAGE
===================================================================*/
table.result-table {
	border-collapse:collapse;
	border-width:1px;
	border-style:solid;
	/*font-size:10px;*/
	clear:both;
	/*margin-left:190px;*/
	margin-top:10px;
	width:580px;
}
table.result-table td,table.result-table th {
	border-width:1px;
	border-style:solid;
}
td.number {
	text-align:center;
}
tr.category td {
}
table.result-table a.info {
	border-bottom:1px dotted;
}

/*===================================================================
	STYLE FILE UPLOAD PAGE
===================================================================*/
.tab-nav {
	text-decoration: none;
	display:inline-block;
	
	border-top-width: 1px;
	border-top-style: solid;

	border-bottom-width: 1px;
	border-bottom-style: solid;

	border-left-width: 1px;
	border-left-style: solid;

	padding: 0 6px;
	line-height: 24px;
	height:24px;
}
.tab-nav:first-child {
	border-bottom-left-radius: 12px;
	border-top-left-radius: 12px;
}
.tab-nav:last-child {
	border-bottom-right-radius: 12px;
	border-top-right-radius: 12px;

	border-right-width:1px;
	border-right-style:solid;
}
.required-fields b,.optional-fields b {
	display: inline;
}
/*===================================================================
	STYLE UPLOAD FROM OTHER TASK
===================================================================*/
table.list-selector {
	width: 100%;
}
table.list-selector tbody tr:hover {
	cursor: pointer;
}
table.list-selector {
	border-collapse: collapse;
}
table.list-selector tbody td {
	border-top-style: solid;
	border-top-width: 1px;
}

/*===================================================================
	STYLE COPY PASTE UPLOAD
===================================================================*/
textarea.text-upload {
	display:block;
	width:300px;
	height:100px;
}
table.spreadsheet {
	border-collapse: collapse;
	border-spacing:0;
	border-top-width: 1px ;
	border-top-style:solid ;
	border-right-width: 1px ;
	border-right-style:solid ;
	width: 100%;
}
table.spreadsheet td,table.spreadsheet th {
	padding:0;
	border-left-width: 1px ;
	border-left-style:solid ;
	border-bottom-width: 1px ;
	border-bottom-style:solid ;
	position: relative;
	vertical-align: top;
}
button {
	cursor: pointer;
}
table.spreadsheet th.sort-cell {
	text-align: left;
	padding-right:10px;
}
#spreadsheet-search {
	border-width: 1px;
	border-style:solid;
}
.btn-cell {
	width:27px;
	text-align: center;
}
.undo-delete-btn {
	border: none;
	padding: 0 4px 0 19px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	position: relative;
	line-height: 18px;
}
.undo-delete-btn::before {
	content: "⤺";/*"↺";*/
	font-size: 16px;
	display: block;
	position: absolute;
	left:4px;
	line-height: 18px;
}
.undo-delete-btn.no-undo {
	cursor: not-allowed;
}
.sort-btn {
	border: none;
	padding: 0;
	text-align: center;
	text-decoration: none;
	display: block;
	position:absolute;
	top:2px;
	right:0px;
	width:8px;
	height:18px;
}
.sort-btn::before {
	font-size: 8px;
	line-height: 18px;
	text-align: center;
	cursor:pointer;
}
th.spreadsheetSortUp .sort-btn::before {
	content: "▼";
}
.spreadsheetSortDown .sort-btn::before {
	content: "▲"
}
.row-num-cell {
	text-align: center;
	padding:0 2px
}
select.field-selector {
	width:100%;
}
.cell-input {
	margin:0;
	border:none;
	position:relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding:0 4px;
	white-space: nowrap;
}
.cr-allowed .cell-input {
	white-space:normal;
}
.cell-input:focus { 
	z-index: 2;
}
.text-cell {
	font-family:Helvetica, Arial, "sans-serif";
	font-size: 12px;
}
.row-count {
	float: right;
}
.spreadsheet-controls .control {
	margin-right: 8px
}


/*===================================================================
	MISC. CLASSES
===================================================================*/

.lti-unlink {
	position: relative;
}
.lti-unlink:hover:before, .lti-unlink:hover:after {
	position: absolute;
	top: -8px;
	left: 12px;
	content: ' ';
	height: 33px;
	width: 2px;
	background-color: red;
}
.lti-unlink:hover:before {
	transform: rotate(45deg);
}
.lti-unlink:hover:after {
	transform: rotate(-45deg);
}



.zoomable {
	cursor:url(../img/magnify.cur), -moz-zoom-in;
}
.zoomable.zoomed {
	cursor:url(../img/magnify-out.cur), -moz-zoom-out;
}
.print {
	display:none;
}
.moveRating {
	white-space:nowrap;
}
.sort-order {
	margin-right: 0.4em;
}
.sort-handle {
	display: inline-block;
	height: inherit;
	width: 12px;
	font-size: 12px;
	text-align: center;
	margin-left: -4px;
	margin-right: 2px;
}
.is-sortable .sort-handle {
	cursor: ns-resize;
}
.h-resizer {
	cursor:ew-resize;
	position:absolute;
	top:0px;
	bottom:0px;
	right:0px;
	width:4px;
	border-right-width:1px;
	border-right-style:solid;
	border-left-width:1px;
	border-left-style:solid;
	box-sizing:border-box;
	opacity:.8;
}
.print-only {
	display:none;
}
.fixed-footer {
	position:fixed;
	bottom:0px;
	left:0px;
	right:0px;
	margin:0 auto;
	z-index:2;
	padding:4px 10px;
	box-sizing:border-box;
	box-shadow:0px 0px 6px #000;
	text-align:right;
	max-width: 1600px;
}
body#popup .fixed-footer {
	max-width: 100%;
}
.fixed-footer input {
	display:inline;
	margin:0px 10px 0px 0px;
}

.list-filter:placeholder-shown {
	padding-right:2px;
}
.filter-clear {
	display: inline-block;
	width: 16px;
	background-image: url(../img/filter-clear.png);
	background-repeat: no-repeat;
	height: 16px;
	position:absolute;
	top:4px;
	right:2px;
}
.list-filter {
	background-image:url(../img/filter-symbol.png);
	background-repeat: no-repeat;
	background-position: 2px center;
	padding-left:16px;
	padding-right:16px;
	padding-top: 2px;
	padding-bottom: 2px;
	width:150px;
	box-sizing: border-box;
	border: 1px solid rgba(0,0,0,0.4);
}
.filter-colour {
	display:inline-block;
	width:1em;
	height:1em;
	vertical-align:middle;
	margin:0 0.2em;
}
.sectionHeader .list-filter {
	width:100%;
}
.text-filter-wrap {
	position: relative;
	flex-grow: 2;
}
.count-found-text {
	font-weight: normal;
	font-size: smaller;
}
.radio-btn-filter-container {
	font-weight: normal;
	font-size: smaller;
}
label.radio-btn-filter {
	display:inline;
	width:auto;
	float:none;
}
/*=================================================================== TO RESOLVE ===================================================================*/

#loading-msg {
margin-left:10px;
clear:both;
}

#wo-overlay-title {
	border-top-width:1px;
	border-top-style:solid;
	border-bottom-width:1px;
	border-bottom-style:solid;
	box-shadow:0px 0px 6px #000;
	z-index:8002;
}
#wo-overlay-title h1 {
	text-shadow: rgba(0,0,0,0.5) 0 1px;
}
#overlay-content {
	overflow:hidden;
}

#wo-overlay-title a {
	text-indent:2000px;
	overflow:hidden;
	width:17px!important;
	height:15px;
	border-radius: 3px;
}
.wo-dialog-btn {
	margin-left:6px;
	height:25px
}

table.ratingScaleView,table.ratingScaleView td {
	font-size:10px;
	border-collapse:collapse;
}
table.ratingScaleView td {
	padding:0 5px 0 5px;
}
a.info,.info {
	border-bottom-width: 1px;
	border-bottom-style: dotted;
	cursor:help;
}

.Yes,.No {
	padding-left:14px;
	/*text-indent:14px;*/
	display:block;
	box-sizing: border-box;
	width:100%;
}
.Yes {
	background:url(../img/setting-on.png) no-repeat 0 3px;
}
.No {
	background:url(../img/setting-off.png) no-repeat 0 3px;
}
.setting-on {
	background:url(../img/setting-on.png) no-repeat center;
}
span.subOption {
	text-indent:20px;
	background-position:20px 3px;
}
label.subOption {
	padding-left:32px;
	background-position:20px 3px;
}
.logout-small {
	display:none;
}
.logout-big {
	display:inline;
}
.logged-in-role {
	display:inline;
}
.client-name {
	font-size: 18px;
}
.peerName {
	padding-left:40px;
}
a.btn {
	-webkit-border-radius:3px;    /* for Safari */
	-moz-border-radius:3px;       /* for Firefox */
	border-radius:3px;
	display:inline-block;
	vertical-align: bottom;
	margin-bottom:2px;
	position:relative;
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
}
a.btn span {
	padding:0px 6px;
	white-space:nowrap;
}
a.btn:link,a.btn:visited {
	text-decoration:none;
}
.btn.waiting::after {
    content: "";
    position: absolute;
    width: 0.5em;
    height: 0.5em;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    border: 2px solid transparent;
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: btnwait 1s linear infinite;
}
a.btn.waiting span {
	visibility: hidden;
}
	#btn-toggle-full-screen {
		display: inline-block;
	}

/*a.toggle-status-btn {
	-webkit-border-radius:.6em;    /* for Safari */
	/*-moz-border-radius:.6em;       /* for Firefox */
	/*border-radius:.6em;
	white-space:nowrap;
	display:inline-block;
	margin-bottom:2px;
	padding:0px 6px;
	text-decoration: none;
}*/
.task-status-icon {
	display:inline;
}
.absleft20em {
	position: absolute;
	left: 20em;
}

.alert {
	font-weight: bold;
	text-align: center;
	margin-bottom: 50px;
}
.information,.note {
	background:url(../img/information.png) no-repeat top left;
	padding-left:36px;
	min-height:32px;
}
.prompt {
	background:url(../img/prompt.png) no-repeat top left;
	padding-left:36px;
	min-height:32px;
}
.success {
	background:url(../img/success.png) no-repeat top left;
	padding-left:36px;
	min-height:32px;
}
.warning {
	background:url(../img/exclamation.png) no-repeat top left;
	padding-left:36px;
	min-height:32px;
	list-style-type:none;
}
.help {
	display:inline-block;
	background:url(../img/help.png) no-repeat top left;
	padding-left:20px;
	min-height:16px;
	font-size:smaller;
	cursor:help;
}
.confirm {
	background:url(../img/confirm.png?v=2) no-repeat top left;
	padding-left:36px;
	min-height:32px;
}
.ui-datepicker-prev {
	background:url(../img/moveleft.gif) center no-repeat;
	cursor:pointer;
}
.ui-datepicker-next {
	background:url(../img/moveright.gif) center no-repeat;
	cursor:pointer;
}

#error-message {
	padding:8px;
}

.fieldWidthFull {
	width: 100%;
}

.float-right {
	float:right;
	width:auto;
	/*margin-top:-1.3em; removed to fix for summary in assessment screen */
	text-align:right;
}

.footnote {
	font-weight: 400;
	font-style: italic;
}

.left10px {
	position: relative;
	left: 10px;
}

.leftMargin1 {
	margin-left:0.5em
}

.leftMargin10px {
	padding-left: 10px;
}

.leftMargin50px {
	padding-left: 50px;
}

/* The style for the logout and spark_button buttons */
.logout {
	float:right;
	width:8em;
	margin-top:-2px;
}
.logout,.spark_button {
	border-width:1px;
	border-style:solid;
	font-weight: bold;
	cursor:pointer;
}
.notAuthorised {
	font-size: larger;
	font-weight: bold;
	position: relative;
	left: 50px;
	top: 30px;
}

.panelWidth {
	width: 100%;
}

.sectionHeader {
	font-weight: bold;
	padding-top: 5px;
	margin:0px 0px 4px 0px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	display: flex;
	justify-content: space-between;
	column-gap: 6px;
}
.actionBtns {
	margin:1px 0px 0px 0px;
}
.actionBtns a {
	margin:2px 0px 0px 0px;
}
.sub-panel {
	border-bottom-width: 3px;
	border-bottom-style: solid;
}
.sub-panel .sectionHeader {
	border: none;
	height:auto;
	font-size: 18px;
}
.selectionPanel {
	padding: 6px 0;
}
.subjectEnrolment {
	margin: 3px 0px 3px 0px;
}
.subSectionHead {
	font-weight:bold;
	margin-bottom:0px;
	font-size:150%;
}
.subSectionHead span {
	font-weight:normal;
}
.extraInfo {
	font-size:smaller;
}

table.subSection {
	width:100%;
}

/* popup window links */
td.links {
	text-align:right;
	white-space:nowrap;
}

.sub {
	font-size: smaller;
}

#progress-bar {
	position:relative;
	display:block;
	zoom: 1;
	width:300px;
	height:25px;
	border-width:1px;
	border-style:solid;
}
#progress-indicator {
	position:absolute;
	width:0%;
	zoom: 1;
	height:25px;
}
#ui-datepicker-div {
	z-index: 3!important;
}
/*===================================================================
	BORDERS
===================================================================*/
table.list tr.studrow td,.fixed-footer {
	border-top-width:1px;
	border-top-style:solid;
}
tr.group-end td {
	border-bottom-width:3px;/* sparkbglight */
	border-bottom-style:solid;
}
table.list th,table.ratingScaleView,table.ratingScaleView td {
	border-width:1px;
	border-style:solid;
}
div.sliderbg {
	border-width:1px;
	border-style:solid;
}
.current_cat_index {
	border-width:2px;
	border-style:solid;
}
.ui-state-active {
	border-width:1px;
	border-style:solid;
}
.ui-state-highlight {
	border-width:1px;
	border-style:solid;
}

/*===================================================================
	STYLE FOR SLIDER
===================================================================*/
td.questions>p {
	padding-left: 1.5em;
	text-indent: -1.5em;
	margin:6px 0 0.25em 0;
}

td.questions>p:first-of-type {
	padding-left: 0;
	text-indent: 0;
	margin-bottom:1em;
}

div.sliderbg {
	position:relative;
	width:200px;
	height:22px;
}
div.sliderbg div {
	position:absolute;
	height:16px;
	top:2px;
	padding-top:2px;
	font-family:Arial, Helvetica, sans-serif; /* check if this is needed here */
	font-size:12px;
	font-weight:bold;
	text-align:center;
	cursor:pointer;
	border-left-width:1px;
	border-left-style:solid;
}
div.sliderbg.unused {
	border-width:1px;
	border-style:solid;
}
div.sliderdiv1 {
	border-left:none !important;
}
div.sliderBlocker {
	position:relative;
	margin-top:-38px;
	width:202px;
	height:38px;
	font-size:10px;
	line-height:12px;
	text-indent:8px;
	overflow:hidden;
	letter-spacing: -0.4px;
}
#edit-rating-bg .sliderbg {
	display: inline-block;
	vertical-align: middle;
}
/*
	'self' => '3ec2ff',
	'avg' => 'f5964a',
	'slider' => 'f5964a'
*/
.avgslider,.maxminslider,.assessor {
	bottom:0px;
}
.legend {
	position:relative;
}
.slider,.selfslider,.avgslider,.origslider,.collaborativeslider,.maxminslider,.stddev,.assessor {
	position:absolute;
}
.legend img {
	position:static;
}
.origslider {
	/*display:none !important;*//* commented to trial having it visible 20140522 */
	opacity: 0.4;
	filter: alpha(opacity=40);
}
.stddev {
	height:22px;
}
.slider,.origslider,.collaborativeslider {
	width:4px;
	height:22px;
	cursor:pointer;
}

/*===================================================================
    RESULTS MATRIX
===================================================================*/

table.result-matrix td,.result-matrix th {
	vertical-align: top;
	padding:4px;
	border-right:solid 1px rgb(0,0,0,0.3);
	border-bottom:solid 1px rgb(0,0,0,0.3);
}
/* borders done like this to be compatible with position sticky */
table.result-matrix {
	width:100%;
	border-collapse: separate;
	border-spacing: 0px;
	border-top:solid 1px rgb(0,0,0,0.3);
	border-left:solid 1px rgb(0,0,0,0.3);
}
table.result-matrix table {
	border:none;
}
table.result-matrix table td {
	border:none;
	padding: 0;
}
table.result-matrix thead {
	position:sticky;
	top:0px;
	z-index: 1;
}
table.result-matrix th {
	text-align: center;
}
table.result-matrix .assessee-hd {
}
table.result-matrix .assessee {
	background-color: rgba(255,255,255,0.10);
}
table.result-matrix td.over {
	background-color: rgba(0,0,0,0.10);
}
table.result-matrix th.over {
	background-color: rgba(0,0,0,0.10);
}
td.is-self,table.result-matrix td.is-self.over {
	background-color: rgba(0,0,0,0.20);
}
table.result-matrix thead tr:first-child th,table.result-matrix thead tr:first-child td {
	vertical-align: middle;
}
table.result-matrix tr.assessee-row:hover {
	background-color: rgba(0,0,0,0.10);
}
table.result-matrix .assessor-cell, tr.assessee-row th {
}
table.result-matrix td, table.result-matrix th {
  position: relative;
}
#grouplist-container {
	white-space: nowrap;
	text-align: left;
	float:left;
}
table.result-matrix th.assessee-name, table.result-matrix th.assessor-name {
	white-space: nowrap;
}
table.result-matrix th.assessee-name, table.result-matrix th.assessee-account-id {
	text-align: left;
	vertical-align: middle;
}
table.result-matrix .action-btn {
	position: relative;
	cursor: pointer;
	display: inline-block;
	width:19px;
	height:19px;
	background-image: url(../img/non-contrib-excluded-withheld-icons.png);
	background-repeat: no-repeat;
	margin-right: 4px;
}

table.result-matrix .comment-approval-btn {
	background-position: 0px -38px;
	background-color:#EC135B;
}
table.result-matrix .comment-withheld {
	color: #EC135B;
}

table.result-matrix .exclusion-btn {
	background-position: 0px -19px;
	background-color: #FAC709;
}
table.result-matrix .is-excluded {
	color: #EC135B;
}

table.result-matrix .non-contributor-btn {
	background-position: 0px 0px;
	background-color:#EB5029;
}
.non-contributor {
	color: #EC135B;
}



.btn-inactive {
	background-color:#fff!important;
}
.btn-disabled, .btn.disabled {
	cursor: not-allowed;
}
.btn-disabled::after {
	width:100%;
	height:100%;
	content:" ";
	background: linear-gradient(to top right, transparent calc(50% - 2px), #f00, transparent calc(50% + 2px) );
	position: absolute;
}
.convert-scores-btn, #truncate-btn {
	float: right;
	margin-left:4px;
	/*clear: both;*/
}
#student-search-btn {
	margin-top: 6px;
}
#graph-container {
	width:126px;
}
#spa-sapa-graph {
	position: relative;
	float:left;
	width:100px;
	height:100px;
	background-color:#dae2e6;
	box-sizing: border-box;
	border: 1px solid #063a58;
}
#no-sapa-graph {
	position: relative;
	float:left;
	width:20px;
	height:100px;
	margin-left: 6px;
	background-color:#dae2e6;
	box-sizing: border-box;
	border: 1px solid #063a58;
}
#spa-sapa-graph div,#no-sapa-graph div {
	position: absolute;
}
.v-divider {
	top:0px;
	bottom:0px;
	width:2px;
	background-color:orange;
}
.h-divider {
	left:0px;
	right:0px;
	height:2px;
	background-color:orange;
}
.student-plot {
	width:6px;
	height:6px;
	background-color:green;
	box-sizing: border-box;
	border: 1px solid #fff;
}
.student-plot:hover {
	width:10px;
	height:10px;
}
input.editable {
	background-color: rgba(0,0,0,0.3);
	width: 40px;
	border: 1px solid rgba(0,0,0,0.7);
	text-align: center;
	color:rgba(0,0,0,0.6);;
}


input.editable:focus, input.editable.overridden:focus {
	border: 1px solid rgba(0,0,0,0.7);
	color:black;
}

input.editable.overridden {
	/*border: 1px solid #0ff;*/
	background-color:#09f;
	color:white;
}
input.editable.overridden:focus {
	background-color:#9cf;
}

/*
ASSESSMENT
*/
body.is-assessment #assessment-info-panel {
	width:240px;
	height:100%;
	position:fixed;
	padding:10px 10px 30px 10px;
	box-sizing: border-box;
	overflow: auto;
}
body.is-assessment #assessment-panel {
	margin-left:250px;
	width:auto;
	overflow: auto;
	padding-right:10px;
}
body.is-assessment #main {
	height:100%;
	margin: 0 auto;
	overflow: auto;
}
body.is-assessment #version {
	font-size: 9px;
}
body.is-assessment #sparkplus-info {
	margin-bottom: 10px;
}
body.is-assessment #sparkplus-logo {
	display:block;
	height:68px; width: 220px;
}
body.is-assessment #sparkplus-logo-small {
	display:none;
}
body.is-assessment a.btn.show-instructions {
	display:none;
}
#assessment-selection-panel table.selector-panel {
	width:100%;
	margin: 10px 0;
}
table.selector-panel td {
	vertical-align: top;
}
td.subject-select-wrap, td.task-select-wrap {
}

table.rubric {
	table-layout: fixed;
	border-spacing:1px;
	width:100%;
}

table.rubric td {
	vertical-align: top;
	word-wrap:break-word;
	hyphens:auto;
}
table.rubric td:before {
	font-weight: bold;
	color:#fff;
	background-color: #063a58;
	text-align: center;
}

.comment-wrap {
	display:block;
	margin-bottom:15px;
	overflow:hidden;
}
.charcount,.next-prev-wrap {
	white-space: nowrap;
}
textarea.categorycomment, textarea.team-member-comment {
	background-color:#ccc;
	width: 100%;
	height: 100px;
	outline: none;
	box-sizing: border-box;
	resize:vertical;
}
textarea.categorycomment:focus, textarea.team-member-comment:focus {
	background-color:#fff;
	border: 1px solid #ccc;
}
textarea.categorycomment.disabled, textarea.team-member-comment.disabled {
	background-color:#FCC;	
}
textarea.categorycomment.waiting {
	background-color:#999;	
}
table#logged-in-user-list {
	font-size:smaller;
	border-collapse:collapse;
}
#logged-in-user-list td,#logged-in-user-list th {
	border:1px solid #128993;
}
#logged-in-user-list th {
	/*background-color:#575781;*/
	font-weight:normal;
}
#logged-in-user-list td {
	/*background-color:#5f5f8c;*/
	font-weight:normal;
}
#logged-in-user-list td.tspace {
	background-color:transparent;
	border:none;
	font-size:3px;
}
.pre-collab-comments {
	background-color:#808080;
	padding:5px;
	box-sizing:border-box;
	width:664px;
}
.comment-display {
	width:95%;
	min-height: 100px;
	background-color:#fff;
	overflow-y:auto;
	color:#000;
	font-size:12px;
	font-weight:normal;
	padding:2px;
	border: 1px solid #ccc;
}
.category-comment-table select {
	max-width: 95%;
}
.category-comment-table input {
	max-width: 95%;
}
.student-greeting {
	display:inline;
}
	

#pa-time-display {
	text-align:center;
}

/*

*/
.panel-position:before {
	content:"on the left";
}
.panel-position-left:before {
	content:"on the right";
}



.user-menu, .action-menu-wrap {
	display: none;
}

.header-btns {
	margin:9px 10px 0px 180px;
	text-align:right;
	white-space:nowrap;
}
.fixed-footer.cbox-btns {
	text-align:left;
}

@media only screen and (min-width: 661px) {
	.assessment-instructions-box {
		display: block!important;
		padding-top: 10px;
	}
}
/* when screen is less than 800 px wide */
@media only screen and (max-width: 800px) {
	input[type="text"],input[type="password"],textarea {
		font-size: 16px;
	}
	table#subject-list-view-all tr th:nth-child(n+6),table#subject-list-view-all tr td:nth-child(n+6) {
		display:none;
	}
	#btn-toggle-full-screen {
		display: none;
	}
	table.selector-panel td {
		display:block;
	}
	.next-prev-wrap {
		width: 100%;
	}
	.group-select-wrap select {
		max-width: calc(100% - 100px);
	}
	td.links {
		white-space: normal;
	}
	table#markingcriteria.assess-one>tbody>tr>td {
		display:block;
	}
	tr.crit-assessment-row>td:nth-child(2),tr.critHeader>td:nth-child(2) {
		float: right;
	}

}
/* when screen is less than 660 px wide */
@media only screen and (max-width: 660px) {
	body.is-assessment #assessment-info-panel {
		position: fixed;
		height: 34px;
		width: 100%;
		top: 0;
		left: 0;
		right: 0;
		margin: 0 auto;
		padding:3px 10px;
		max-width: 1600px;
		z-index: 7910;
		box-shadow: 0px 0px 6px #000;
		overflow:visible;
	}
	body.is-assessment #assessment-panel {
		margin-left:0px;
		width:auto;
		overflow: auto;
		padding: 38px 5px 5px 5px;
	}
	body.is-assessment #sparkplus-logo {
		display:none;
	}
	body.is-assessment #sparkplus-logo-small {
		display:block;
		height:28px;
	}
	body.is-assessment #version {
		display:none;
	}

	.student-greeting {
		display:none;
	}
	.submission-status {
		display:none;
	}

	.header-btns {
		margin:4px 10px 0px 0px;
	}
	.user-menu, .action-menu-wrap {
		display: inline-block;
		position: relative;
		width: 26px;
		height: 26px;
		border-radius: 4px;
	}
	.user-menu {
		background: url(../img/user-icon.svg) no-repeat center/80% #fff;
	}
	.action-menu-wrap {
		background: url(../img/burger-menu.svg) no-repeat center/80% #fff;
	}
	body.is-assessment .user-menu {
		position:absolute;
		top:4px;
		right:10px;
	}
	.user-action-menu-trigger {
		text-indent: -1000px;
		display: block;
		width: 100%;
		height: 100%;
	}
	.user-menu > div, .action-menu-wrap > div {
		display:none;
		white-space: nowrap;
		position: absolute;
		background-color: #f1f1f1;
		min-width: 80px;
		overflow: auto;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}
	.user-menu div {
		right:3px;
	}
	.action-menu-wrap > div {
		left:3px;
	}
	.action-menu-wrap-bottom > div {
		bottom: 26px;
	}
	.action-menu a  {
		color: black;
		padding: 4px 8px;
		text-decoration: none;
		display: block;
	}
	.action-menu a:hover {
		background-color: #ddd;
	}
	.user-menu .show {
		display:block;
	}
	.action-btns {
		display:none;
	}
	body.is-assessment a.btn.show-instructions {
		display:inline-block;
		position: absolute;
		top:8px;
		left:156px;
	}
	.assessment-instructions-box {
		position: fixed;
		display:none;
		top: 34px;
		right: 0px;
		bottom: 40px;
		left: 0px;
		background-color: #fff;
		overflow: auto;
		padding: 10px;
	}
	body.is-assessment #logout_btn1 {
		display:none;
	}
	table.selector-panel {
		table-layout: fixed;
	}
	.logout-big {
		display:none;
	}
	.header-btns a.profile {
		display:none;
	}
	.client-name {
		font-size: 12px;
	}
	.wo-dialog-btn {
		margin-left:6px;
		height:35px
	}
	
	div#leftPanel {
		width: 100%;
		padding: 10px;
		vertical-align: top;
		box-sizing: border-box;
		float:none;
		position:static;
	}
	div#rightPanel {
		width: 100%;
		padding: 10px;
		vertical-align: top;
		margin:0;
	}
	.panel-position:before {
		content:"above";
	}
	.panel-position-left:before {
		content:"below";
	}
}
@media only screen and (max-width: 400px) {
	.header-btns a.profile {
		max-width: 110px;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	body.is-assessment a.btn.show-instructions {
		max-width: 33%;
		text-overflow: ellipsis;
		overflow: hidden;
	}
}