_qti21.scss

ul.sessionControl {
	list-style: none;
	margin: 1em;
	text-align: center;
  
	li {
		display: inline;
		padding: 0.2em;
	}
}

/* Associations */
.association {
	margin: 20px 20px 20px 40px;
	background: transparent url('#{$o-images-path}association_bg.png') repeat-x center center;
}

.o_associate_item {
	padding: 5px;
	margin:0 15px 10px 0;
	border: 2px solid $o-qti-gap-border-color;
	
	&.oo-selected {
		border: 2px solid $o-qti-gap-selected-border-color;
	}
	
	&.oo-choosed {
		border: none !important;
	}
	
	&.oo-drag {
		border: 2px solid $o-qti-gap-drag-border-color !important;
	}
}

.association_box {
	border: 3px dotted $o-qti-gap-border-color;
	
	&.oo-filled {
		border: 3px solid $o-qti-gap-border-color;
	}
}

.association_box {
	background-color: white;
}

.prompt {
	font-weight: bold;
}

/* Drawing */
.sketch {
	position: relative;
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}

#tmp_canvas {
	position: absolute;
	left: 0px; right: 0;
	bottom: 0; top: 0;
	cursor: crosshair;
	user-drag: none; 
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
	
#colors {
	.black .o_icon:before { color:#000000;  }
	/* .white .o_icon:before { color:#FFFFFF; } */
	.blue .o_icon:before { color:#0000FF;  } 
	.green .o_icon:before { color:#008000;  } 
	.yellow .o_icon:before { color:#FFFF00;  }
	.red .o_icon:before { color:#FF0000;  } 
	.purple .o_icon:before { color:#800080; }
}

/* Graphic gap match */
.o_gap_item {
	padding:5px;
	margin: 5px;
	background-repeat:no-repeat;
	background-position: center center;
	
	&.oo-choosed {
		position: relative;
    	left: auto;
    	top: auto;
    	padding: 3px;
    	margin: 0;
	}
	
	&.oo-selected {
		border: 3px solid $o-qti-gap-selected-border-color;
	}
}

.o_item_container_help, .o_items_container_help {
	font-size: 90%;
	font-style: italic;
	color: $gray-light;
	padding: 5px;
}

/* Position object */
.items_container {
	padding: 15px;
	
	.o_item {
		float: left;
	}
}

/* Hotspot */
#o_qti_hotspots_edit {
	min-height: 100px;
	min-width: 400px;
	background-repeat:no-repeat;
	
	&.o_qti_hotspot-standard  {
		.o_draw_circle, .o_draw_rectangle {
			background-color: rgba(255, 255, 255, 0.5);
			border-color: #6E6E6E;
		}
		
		.o_qti_hotspot_correct.o_draw_circle, .o_qti_hotspot_correct.o_draw_rectangle {
			background-color: rgba(45, 0, 255, 0.5);
			border-color: #0000ff;
		}
	}
	
	&.o_qti_hotspot-light  {
		.o_draw_circle, .o_draw_rectangle {
			background-color: rgba(221, 221, 221, 0.0);
			border-color: #7E7E7E;
		}
		
		.o_qti_hotspot_correct.o_draw_circle, .o_qti_hotspot_correct.o_draw_rectangle {
			background-color: rgba(51, 122, 183, 0.05);
			border-color: #337ab7;
		}
	}
	
	&.o_qti_hotspot-inverted  {
		.o_draw_circle, .o_draw_rectangle {
			background-color: rgba(110, 110, 110, 0.5);
			border-color: #3E3E3E;
		}
		
		.o_qti_hotspot_correct.o_draw_circle, .o_qti_hotspot_correct.o_draw_rectangle {
			background-color: rgba(222, 222, 222, 0.2);
			border-color: #CECECE;
		}
	}
	
	&.o_qti_hotspot-green  {
		.o_draw_circle, .o_draw_rectangle {
			background-color: rgba(142, 142, 142, 0.25);
			border-color: #CECECE;
		}
		
		.o_qti_hotspot_correct.o_draw_circle, .o_qti_hotspot_correct.o_draw_rectangle {
			background-color: rgba(134, 195, 81, 0.5);
			border-color: #518b33;
		}
	}
	
	&.o_qti_hotspot-purple  {
		.o_draw_circle, .o_draw_rectangle {
			background-color: rgba(142, 142, 142, 0.33);
			border-color: #CECECE;
		}
		
		.o_qti_hotspot_correct.o_draw_circle, .o_qti_hotspot_correct.o_draw_rectangle {
			background-color: rgba(234, 168, 255, 0.5);
			border-color: #ab47cb;
		}
	}
}

div.hotspotInteraction {
	overflow-x: auto;
}

img.o_hotspot_responsive[usemap] {
	max-width: 100%;
	width: auto;
	height: auto;
}

/* Gap text / FIB */
.form-inline.o_qti_gaptext_add_first_alternative {
	padding: 9px 0 3px 0;
}

.form-inline.o_qti_gaptext_add_alternative {
	margin-bottom: 3px;
}

/* Essay extended text */
.o_qti_item_body .extendedTextInteraction {
	margin: 15px 0;

	textarea {
		/* fix missing resize handle in Safe Exam Browser */
		resize: vertical !important;
		font-family: $font-family-monospace;
	}
	
	pre {
		font-family: $font-family-monospace;
	}
	
	.o_qti_essay_last_save {
		padding: 2px 2px;
		font-style: italic;
		font-size: 90%;
		text-align:right;
	}
}

.extendedTextInteraction div.form-control.textarea_disabled {
	white-space: pre-wrap;
	height: auto;
	font-family: $font-family-monospace;
	color: $input-color !important;
}

#o_qti_run_title {
	 margin: 0 15px 0.5em 15px;
	 h3 {
	 	margin: 15px 0 0 0;
	 }
}
#o_qti_run_infos {
	border: 1px solid $o-qti-run-infos-border-color;
	border-radius: $o-qti-run-infos-border-radius;
	background: $o-qti-run-infos-bg;
	padding: $padding-large-vertical 0;
	margin: 0 15px 1em 15px;
	
	.progress {
		background-color: $o-qti-run-infos-progress-bg;
	}	
	#o_qti_scoreinfo .progress-bar {
		@include progress-bar-variant($o-qti-run-infos-score-progress-color);
	}
	
	#o_qti_questioninfo .progress-bar {
		@include progress-bar-variant($o-qti-run-infos-question-progress-color);
	}
	
	#o_qti_run_scoreinfo,
	#o_qti_run_scoreprogress {
		white-space: nowrap;
	}
}

#o_qti_results_infos {
	border: 1px solid $o-qti-run-infos-border-color;
	border-radius: $o-qti-run-infos-border-radius;
	background: $o-qti-run-infos-bg;
	padding: $padding-large-vertical 0;
	margin: 0 0 1em 0;
	
	.progress {
		background-color: $o-qti-run-infos-progress-bg;	
	}
	
	#o_qti_run_scoreinfo,
	#o_qti_run_scoreprogress {
		white-space: nowrap;
	}
}

#o_qti_assessment_test_timer {
	border: 1px solid $o-qti-run-infos-border-color;
	border-radius: $o-qti-run-infos-border-radius;
	padding: $padding-large-vertical;
	margin: 0 15px 1em 15px;
	
	.o_qti_timer {
		
	}
	
	&.o_10_minutes {
		background-color: $o-box-warning-bg;
	}
	&.o_5_minutes {
		background-color: $o-box-error-bg;
	}
	&.o_panic {
		background-color: darken($o-box-error-bg, 25%);
	}
	
	.o_qti_times_up {
		padding-left: 2em;
		font-weight: bold;
	}
	
	.o_qti_times_message {
		padding-left: 2em;
		font-weight: bold;
	}
}


/* Drawing */
.o_draw_circle.o_qti_hotspot_correct, .o_draw_rectangle.o_qti_hotspot_correct {
	background-color: rgba(229, 255, 204, 0.6);
}

#width_range_ui, #opacity_range_ui {
	width: 120px;
}

.o_slider_width_range, .o_slider_opacity_range {
	margin: 3px 10px 0 0;
}

.o_qti_hotspot_label {
	padding-left: 48%;
}

.o_qti_hotspot_delete {
	
}



.o_info.o_assessmentsection_rubrics {
	margin:0 0 0.5em 0;
	position: relative;
	
	&.o_hide {
		display: none;
	}
	&.o_show {
		display: block;
	}
	
	a.o_hide {
		position: absolute;
		bottom: 0.5em;
		right: 1em;
	}
}

.o_assessmentitem{
	h1 {
		margin-bottom: 0;
	}
	
	div.badResponse, span.badResponse {
		color: $o-qti-badResponse-color;
		font-weight: bold;
	}
	
	input.badResponse {
  		border: 1px solid $o-qti-badResponse-color;
	}
	
	.infoControl{
		input {
			margin-right: 0.5em;
		}

		.infoControlContent {
  			display: none;
		}
	}
	
	.sliderInteraction {
		margin: 1em;
		.sliderVertical .sliderValue {
			margin: 1em 0;
		}
		.sliderVertical .sliderWidget {
			height: 200px;
		}
		.sliderHorizontal .sliderValue {
			text-align: center;
		}
	}
	
	div.orderInteraction {
		div.highlight {
			border: 1px solid $o-qti-highlight-color;
		}
		
		div.box.vertical {
			width: 50%;
			float: left;
			position: relative;
			padding: 0;
			margin-top: 5px;
			
			ul {
				min-height: 200px;
			}
		}
		
		div.box.horizontal {
			ul {
				min-height: 50px;
				width: 100%;
			}
		}
		
		div.box.source {
			padding: 5px 10px;
			border: 1px solid $o-qti-order-sources-border-color;
			border-radius: $o-qti-order-border-radius;
			background: $o-qti-order-sources-bg;
		}
		
		div.box.source.horizontal {
			padding: 5px 10px 15px 10px;
		}
		
		div.box.target {
			ul {
				border: 2px solid $o-qti-order-target-border-color;
				border-radius: $o-qti-order-border-radius;
				background: $o-qti-order-target-bg;
				
				&.oo-accepted {
					border-color: $o-qti-order-drop-accept-border-color;
				}
			}	
		}
		
		div.box.target.vertical {
			padding: 6px 0 0 10px;
			
			ul {
				padding: 10px;
			}
		}
		
		div.box.target.horizontal {
			padding-top: 10px;
			
			ul {
				padding: 10px 10px 0 10px;
			}
		}
		
		div.box.horizontal ul li {
			float: left;
			width: auto;
			margin-right: 10px;
			min-width: 50px;
		}

		div.box span.info {
			color: $o-qti-box-color;
			font-style: italic;
			font-size: smaller;
		}

		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
	}

	.hottext {		
		position: relative;
		margin: -2px 0.15em -2px 0.15em;
		white-space: nowrap;

		input {
			margin: 0 3px 0 2px;
			position: absolute;
			top: 0.1em;
			left: 0.05em;
			+label {
				display: inline;
				padding: 0 0.1em 0 1.2em;
				background: $o-qti-hottext-bg;
				border: 1px solid $o-qti-hottext-border-color;
				border-radius: $o-qti-hottext-border-radius;
				
				color: $o-qti-hottext-color;
				font-weight: normal;
				white-space: normal;
			}
			&:checked+label {
				color: $o-qti-hottext-checked-color;
				background: $o-qti-hottext-checked-bg;
				border: 1px solid $o-qti-hottext-checked-border-color;
			}
		}
	}


	.gap {
		font-weight: bold;
		border: 1px dashed #000;
	}
	
	.textEntryInteraction {
		input {
			margin: -1px 2px;
			line-height: 90%;		
			vertical-align: middle;
			font-size: ($font-size-base * 0.98);
			line-height: 1.5; /* smaller than #itemBody */
			border: 1px solid $o-qti-textEntryInteraction-border-color;
			background: $o-qti-textEntryInteraction-bg;
			padding: 1px 1px;
			color: $o-qti-textEntryInteraction-color;
			max-width: 100%;
			/* format fields with values in it in separate style */
			&:valid,
			&:disabled {
				color: $o-qti-textEntryInteraction-filled-color;
				-webkit-text-fill-color: $o-qti-textEntryInteraction-filled-color;
				background: $o-qti-textEntryInteraction-filled-bg;				
				border: 1px solid $o-qti-textEntryInteraction-filled-border-color;
			}
		}
	}
}

li.o_assessmentitem_order_item {
	padding: 10px;
	margin-bottom: 10px;
	border: 2px $o-qti-order-source-border-style $o-qti-gap-border-color;
	border-radius: $o-qti-order-border-radius;
	background-color: #ffffff;
	background: $o-qti-order-source-bg;
	list-style-type: none;
	@include clearfix;
}

body>li.o_assessmentitem_order_item  {
	display:block;
}


/* item display wrapper to distinguish from the item tree */
.o_assessmentitem_wrapper {
	.itemTitle {
		background: $o-qti-item-title-bg;
		border: 1px solid $o-qti-item-title-border-color;
		border-radius: $o-qti-item-title-border-radius $o-qti-item-title-border-radius 0 0;
		margin-top: 0;
		margin-bottom: 0;
		padding: $padding-small-vertical $padding-small-horizontal;
		line-height: 1.5em;
		position: relative;
		
		.o_qti_item_max_score {
			position: absolute;
			left: 49%;
		}
	}
	.o_qti_item_body {
		min-height: $o-qti-item-min-height;
		margin: 0;
		padding: $padding-small-vertical $padding-small-horizontal;
		border-left: 1px solid $o-qti-item-border-color;
		border-right: 1px solid $o-qti-item-border-color;
		font-size: $font-size-base;
		line-height: 1.8; /* larger than .textEntryInteraction input */
	}
	.o_assessment_item_not_final.o_warning {
		margin: 0;
	}
	.modalFeedback {
		h4:first-of-type {
			padding-left: $padding-small-horizontal;
			margin-top: 0;
		}
		/* need to redeclare o_info since modalFeedback class is on same element */
		/* remove margins to stack into item box*/
		.o_info {
			@extend %o_info;
			margin-bottom: 0;
			margin-top: 0;
		}
		
		.o_info.o_correct_modal_feedback {
			@extend %o_success;
			margin-bottom: 0;
			margin-top: 0;
		}

		.o_info.o_incorrect_modal_feedback {
			@extend %o_error;
			margin-bottom: 0;
			margin-top: 0;
		}

		.o_info.o_empty_modal_feedback {
			@extend %o_note;
			margin-bottom: 0;
			margin-top: 0;
		}
		
		.o_togglebox_wrapper {
			margin-bottom: 0;
			margin-top: 0;	
			
			h4 {
				border-left: 1px solid $o-qti-item-border-color;
				border-right: 1px solid $o-qti-item-border-color;
				padding-bottom: 5px;
				margin-bottom: 0;
			}
		}
	}
}
	
	
.o_assessmentitem_wrapper, .o_qti_menu_buttonstyle {
	ul.o_testpartnavigation {
		list-style: none;
		padding: 0;
		margin: 0;
	}
	li.o_assessmentitem {
		margin-bottom: 2px;
	}	
	
	.o_assessmentitem_status {
		float: right;
		display: block;
		padding: 0.3em;
		margin-left: 1em;
		border-radius: 0.3em;
		border-width: 1px;
		font-size: 0.8em;
		line-height: 1.2em;
		color: #fff;
		
		&.ended {
		  background-color: $o-qti-status-ended-color;
		}
		&.invalid {
		  background-color: $o-qti-status-invalid-color;
		}
		&.answered {
		  background-color: $o-qti-status-answered-color;
		}
		&.notAnswered {
		  background-color: $o-qti-status-notAnswered-color;
		}
		&.notPresented {
			background-color: $o-qti-status-notPresented-color;
		}
		&.review {
			background-color: $o-qti-status-review-color;
		}
		&.reviewNotAllowed, 
		&.reviewInvalid, 
		&.reviewNotAnswered, 
		&.reviewNotSeen {
			background-color: $o-qti-status-review-color;
			opacity: 0.7;
		}
		
		i:before {
			color: #fff;
		}
	}
}

.o_assessmentitem_controls {
	background: $o-qti-item-controls-bg;
	border: 1px solid $o-qti-item-controls-border-color;
	border-radius: 0 0 $o-qti-item-controls-border-radius $o-qti-item-controls-border-radius;
	margin-top: 0;
	margin-bottom: $padding-large-horizontal;
	padding: $padding-small-vertical $padding-small-horizontal;
	
	button {
		margin-bottom: 0;
	}
	
	/* button icons */
	.o_sel_assessment_item_submit span:before { 
		@include o-make-icon(); 
		content: $fa-var-check; 
		padding-right: 0.5em
	}
	.o_sel_next_question span:after { 
		@include o-make-icon(); 
		content: $fa-var-chevron-right; 
		padding-left: 0.5em
	}
	.o_sel_question_menu span:before { 
		@include o-make-icon(); 
		content: $fa-var-bars; 
		padding-right: 0.5em
	}
	.o_sel_end_testpart span:before { 
		@include o-make-icon(); 
		content: $fa-var-check; 
		padding-right: 0.5em
	}
	.o_sel_back_test_feedback span:before { 
		@include o-make-icon(); 
		content: $fa-var-chevron-left; 
		padding-right: 0.5em
	}
	.o_sel_show_solution span:before { 
		@include o-make-icon(); 
		content: $fa-var-info; 
		padding-right: 0.5em
	}
	.o_sel_solution_hide span:before { 
		@include o-make-icon(); 
		content: $fa-var-info; 
		padding-right: 0.5em
	}
}

.o_assessmentitem_control_view_solution {
	background: $o-qti-item-controls-bg;
	border: 1px solid $o-qti-item-controls-border-color;
	margin: 0;
	padding: $padding-small-vertical $padding-small-horizontal;
}

/* manual correction workflow */
.o_assessmentitem_scoring {
	background: $o-qti-item-title-bg;
	border: 1px solid $o-qti-item-title-border-color;
	border-bottom: 0;
	border-radius: $o-qti-item-title-border-radius $o-qti-item-title-border-radius 0 0;
	margin-top: 0;
	margin-bottom: 0;
	padding: $padding-small-vertical $padding-small-horizontal;
}
.o_assessmentitem_scoring_buttons {
	background: $o-qti-item-controls-bg;
	border: 1px solid $o-qti-item-controls-border-color;
	border-top: 0;
	border-radius: 0 0 $o-qti-item-controls-border-radius $o-qti-item-controls-border-radius;
	margin-top: 0;
	margin-bottom: $padding-large-horizontal;
	padding: $padding-small-vertical $padding-small-horizontal;
}
.o_assessmentitem_scoring_override_window {
	width: 300px;
}


.itemPrompt {
	margin: 1.5em 0;
	font-style: italic;
	color: #666666;
}

.o_qti_item_body {
	margin: 1em 0;
}

.o_sel_assessment_item_hint {
	margin-top: 1em;
}

.o_assessment_test_results .o_sel_assessment_item_hint {
	display:none;
}

/* Choice interaction */
tr.choiceinteraction {
	td.control {
		padding: 0.5em;
	}
	
	td.choiceInteraction {
		padding: 0.5em;
	}
}

.choiceInteraction {
	label {
		font-weight: normal;
	}
}

.choiceInteraction div.o_qti_item_choice_option_flow  {
	display: inline-block;
	padding: .5em;
	border: 1px solid transparent;
	
	label span {
		font-weight: normal;
	
	}
	
	label span>p {
		display: inline-block;
	}
}

.choiceInteraction.choiceright table tr td.choiceInteraction {
	background-color: $o-qti-choice-tablelayout-bg;
	border-bottom: 3px solid white;
}

/* Match interaction */
.matchInteraction.choiceright table tr td.o_qti_item_kprim_text {
	background-color: $o-qti-choice-tablelayout-bg;
	border-bottom: 3px solid white;
}

table.o_qti_item_kprim {
	td.o_qti_item_kprim_input_correct {
		background-color: $o-qti-match-kprim-correct-bg;
	}
	
	td.o_qti_item_kprim_input_wrong {
		background-color: $o-qti-match-kprim-wrong-bg;
	}
}	

.matchInteraction {
	input[type='text'] {
		display:inline;
		width:auto;
	}
	
	div.bar_green { background-color: $o-qti-bar-green; }
	div.bar_red { background-color: $o-qti-bar-red; }
}

/* Match interaction drag & drop */
.source-left, .target-left, .source-right, .target-right {
	width: 50%;
	float: left;
	position: relative;
	padding: 0;
	margin-top: 5px;
}

.source-top, target-top, .source-bottom, .target-bottom {

}

.o_match_dnd_sources {
	padding: 10px 10px 0 10px;
	min-height: 60px;
	border: 1px solid $o-qti-match-sources-border-color;
	border-radius: $o-qti-match-border-radius;
	background: $o-qti-match-sources-bg;
	
	&.oo-accepted {
		border-color: $o-qti-match-drop-accept-border-color;
	}
}

.o_match_dnd_source {
	padding: 10px;
	margin-bottom: 10px;
	border: 2px $o-qti-match-source-border-style $o-qti-gap-border-color;
	border-radius: $o-qti-match-border-radius;
	background-color: #ffffff;
	background: $o-qti-match-source-bg;
	@include clearfix;
	
	&.oo-selected {
		border: 2px $o-qti-match-source-border-style $o-qti-match-selected-border-color;
		background: $o-qti-match-selected-bg;
	}
	
	&.oo-drag {
		border: 2px $o-qti-match-source-border-style $o-qti-match-drag-border-color !important;
	}
	
	cursor: move; /* fallback if grab cursor is unsupported */
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;	
}

.source-bottom .o_match_dnd_source, .source-top .o_match_dnd_source {
	margin: 0 0 10px 0;
}

.o_match_dnd_targets .oo-accepted {
	border: 2px solid $o-qti-match-drop-accept-border-color;
	border-radius: $o-qti-match-border-radius;
}

.o_match_dnd_target {
	padding: 10px 10px 0 10px;
	margin: 0 0 10px 10px;
	border: 2px solid $o-qti-match-target-border-color;
	border-radius: $o-qti-match-border-radius;
	background: $o-qti-match-target-bg;
	@include clearfix;

	.o_match_dnd_target_drop_zone {
		margin: 0;
		padding: 5px 0 0 15px;
		min-height: 30px;
		
		.o_match_dnd_source {
			border: 2px $o-qti-match-source-border-style $o-qti-match-choosed-border-color;
		}
	}
}

.target-bottom .o_match_dnd_target, .target-top .o_match_dnd_target {
	margin: 0 0 10px 0;
	
	.o_match_dnd_target_drop_zone {
		padding-left: 0px;
		
		.o_match_dnd_source {
			padding-left: 15px;
		}
	}
}

/* Match true/false */
.table.o_match_true_false_edit {
	th.o_sel_match_target_0, th.o_sel_match_target_1, th.o_sel_match_target_2 {
		width: 12%;
	}
}

.match_true_false {

	input[type="checkbox"] {
		-webkit-appearance: radio;
		-moz-appearance: radio;
		-ms-appearance: radio;
		appearance: radio;
	}

	.table>tbody>tr>td.o_match_true_false_unanswered,
	.table>tbody>tr>td.o_match_true_false_right,
	.table>tbody>tr>td.o_match_true_false_wrong {
		vertical-align: middle;
		width: 11%;
	}
	
	th.o_match_true_false_unanswered,
	th.o_match_true_false_right,
	th.o_match_true_false_wrong {
		width: 11%;
	}
	
	td.o_match_true_false_answer,
	th.o_match_true_false_answer {
		width: 67%;
	}
	
	td.o_match_true_false_unanswered {
		background-color: $o-qti-match-true-false-unanswered-bg;
	}
	
	td.o_match_true_false_right {
		background-color: $o-qti-match-true-false-right-bg;
	}
	
	td.o_match_true_false_wrong {
		background-color: $o-qti-match-true-false-wrong-bg;
	}
}

/* MathEntryInteraction styling for MathAssess */
.o_assessmentitem .mathEntryInteraction {
	border: 1px solid #ddedfc;
	background-color: #edf1f6;
	background: linear-gradient(to top, #edf1f6 0%, #f6f9fb 100%);
	border-radius: 0.4em;
	padding: 1em;
	margin: 0.5em 0;
	
	.inputPanel {
		line-height: 1em;
		text-align: left;
		
		input {
			margin: 0;
			padding: 0;
		}
	}
	
	.previewPanel {
		text-align: center;
	}
}