@charset "UTF-8";
/* CSS Document */


section h4 {
	font-weight: var(--font-black_heavy) !important;
	font-size: 125% !important;
}


.canvas-item {
	line-height: 52px;
	height: 60px;
	width: 90%;
	min-width: 320px;
	padding-left: 20px;
	border: 1px solid #C7CDD1;
	border-left: 5px solid #00AC18;
	margin-top: -1px;
}
.canvas-item p, .canvas-item img {
	line-height: 1.5;
	display: inline-block;
	top: 50%;
}
.canvas-item img { padding-right: 10px; height: 40px; width: auto; }



#cards_exam-canvas .card {
	border: solid 4px var(--cityu-metallic-oslogray-40);
	border-radius: 0;
}
#cards_exam-canvas .card-img-top {
	text-align: right;
	border-radius: 0;
}
#cards_exam-canvas .card-img-top img {
	max-height: 120px;
	width: auto !important;
	opacity: 75%;
}
#cards_exam-canvas .card-img-top_title {
	z-index: 20;
	position: relative;
	float: left;
	margin-top: -108px;
	margin-left: 12px;
	width: 80%;
	text-align: left !important;
	color: rgba(255,255,255,0.8);
	line-height: 120% !important;
	font-size: 120%;
}


#checklist .card {
	border: solid 4px var(--cityu-metallic-oslogray-70);
	background-color: var(--cityu-metallic-shadow-95);
	border-radius: 0;
	font-size: 110%;
}
#checklist .checklist-page { font-size: 90%; font-style: italic; }
#checklist .form-check { padding: 16px 0 16px 24px; }
#checklist .form-check-input { border: solid 2px var(--cityu-metallic-oslogray-40); }













/*


.byside-stepImage {
	width: 340px;
	float: left;
}

.byside-steps {
	width: 300px;
	float: left;
	margin-left: 10px;
}

.byside-clear { clear: both; }








table th, td {
	border: solid 1px #666666;
	padding: 5px;
}

table {
	border: solid 1px #666666;
	border-spacing: 0px;
}


.icon-printer {
	display: inline-block;
	float: right;
	width: 30px;
	height: 30px;
	border: solid 2px #DDDDBB;
	background-color: #FFFFEE;
	background-image: url('../images/_common/icon-print-50x50.png');
	background-repeat: no-repeat;
	background-size: 26px 26px;
	background-position: center;
	cursor: pointer;
	visibility: visible;
}

.stepImage img {
  max-width: 400px;
  width: 100%;
  height: auto;
}

.imageCenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.onExam-fontRed { color: #bf165e; }
.onExam-fontGrey { color: #595959; }
.onExam-fontPublished { color: #1d7c82; }

.onExam-tip {
	max-width: 600px;
	background-color: #FFEEAA;
	border: solid 2px #a77f2a;
	padding: 10px;
	padding-left: 20px;
	padding-right: 20px;
}

.onExam-blocksContainer {
	width: auto;
	margin: auto;
	line-height: 150%;
}

.onExam-block {
	float: left;
	width: 300px;
	height: 300px;
	border: solid 4px #CCCCCC;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: 8px;
	margin-right: 8px;
	cursor: pointer;
}
.onExam-block p { text-align: left; }

#onExam-title-checklist,
#onExam-title-quizsettings,
#onExam-title-assignmentsettings,
#onExam-title-quizdelivery,
#onExam-title-assignmentdelivery,
#onExam-title-lockdown {
	width: 280px;
	height: 140px;
	padding: 10px;
	font-size: 18px;
	color: #FFFFFF;
	background-position: right bottom;
	background-repeat: no-repeat;
	opacity: 0.75;
}

#onExam-title-checklist { background-image: url('../images/onlineexam/block-titlebackground_checklist.png'); }
#onExam-title-checklist-background { background-color: #AA3366; }
#onExam-title-quizsettings, #onExam-title-assignmentsettings { background-image: url('../images/onlineexam/block-titlebackground_settings.png'); }
#onExam-title-quizsettings-background, #onExam-title-assignmentsettings-background { background-color: #a77f2a; }
#onExam-title-quizdelivery { background-image: url('../images/onlineexam/block-titlebackground_delivery.png'); }
#onExam-title-assignmentdelivery { background-image: url('../images/onlineexam/block-titlebackground_delivery-assignment.png'); }
#onExam-title-quizdelivery-background, #onExam-title-assignmentdelivery-background { background-color: #008B8B; }
#onExam-title-lockdown { background-image: url('../images/onlineexam/block-titlebackground_lockdown.png'); }
#onExam-title-lockdown-background { background-color: #2b5f9d; }

.onExam-block-body {
	width: 280px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 0px;
	font-size: 14px;
}




*/






/* For different resolutions */

/* container width 420px
@media screen and (min-device-width:1024px) and (max-width:989px),
       screen and (max-device-width:480px),
	   screen and (max-device-width:640px) and (orientation:landscape),
       screen and (min-device-width:481px) and (max-device-width:1024px) and (orientation:portrait),
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-moz-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-o-min-device-pixel-ratio: 3/2) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (min-device-pixel-ratio: 1.5) and (orientation:portrait),
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-moz-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (min-device-width:481px) and (max-device-width:1024px) and (min-device-pixel-ratio: 2) and (orientation:portrait) {	


	   .onExam-block { width: 346px; }
	   #onExam-title-checklist,
	   #onExam-title-quizsettings,
	   #onExam-title-assignmentsettings,
	   #onExam-title-quizdelivery,
	   #onExam-title-assignmentdelivery,
	   #onExam-title-lockdown { width: 326px; }
	   .onExam-block-body { width: 326px; }


	   .icon-printer { visibility: hidden; }


	   .byside-stepImage, .byside-steps { width: 100%; }


}
*/

/* container width 300px
@media screen and (max-device-width:320px), 
       screen and (min-device-width:1024px) and (max-width:509px),
       screen and (max-device-width:480px) and (orientation:portrait),
	   only screen and (max-device-width:480px) and (-moz-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (-o-min-device-pixel-ratio: 3/2) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation:portrait),
	   only screen and (max-device-width:480px) and (min-device-pixel-ratio: 1.5) and (orientation:portrait),
	   only screen and (max-device-width:480px) and (-moz-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (max-device-width:480px) and (min-device-pixel-ratio: 2) and (orientation:portrait),
	   only screen and (max-width:720px) and (-moz-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-o-min-device-pixel-ratio: 3/2) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-webkit-min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (max-width:720px) and (min-device-pixel-ratio: 1.5) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-moz-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-o-min-device-pixel-ratio: 2/1) and (orientation:portrait), 
	   only screen and (max-width:720px) and (-webkit-min-device-pixel-ratio: 2) and (orientation:portrait), 
	   only screen and (max-width:720px) and (min-device-pixel-ratio: 2) and (orientation:portrait) {	




	   .onExam-block { width: 236px; }
	   #onExam-title-checklist,
	   #onExam-title-quizsettings,
	   #onExam-title-assignmentsettings
	   #onExam-title-quizdelivery,
	   #onExam-title-assignmentdelivery,
	   #onExam-title-lockdown { width: 216px; height: 120px; }
	   .onExam-block-body { width: 216px; }



}
 */