/***********************************************
PROJECT CSS - quiz
************************************************/

.card {
	background: white;
	overflow: auto;
	-webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.05);
	-moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.05);
	box-shadow: 0 1px 6px 0 rgba(0,0,0,0.05);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.2), 0 1px 1px -1px rgba(0,0,0,.12); 
	border-radius: 10px;
	border: 1px solid #efefef;
	padding: 15px;
	display: block;
}
.card:hover {
	color: inherit;
	transform: scale(1.025);
}
.card:focus {border: 2px dotted #333;}

#quizzHomeForm .fa-check-circle,
#quizzResultForm .fa-check-circle {
	color: green;
}
#quizzHomeForm .fa-circle,
#quizzResultForm .fa-circle {
	color: #666;
}
#quizzHomeForm .pill-status,
#quizzResultForm .pill-status {
	padding:2px 10px; 
	width: fit-content; 
	border-radius: 10px; 
}
#quizzHomeForm .pill-status {
	margin-left: -15px;
}
#quizzHomeForm .pill-status-completed,
#quizzResultForm .pill-status-completed {
	background-color:#dff0d8; 
}
#quizzHomeForm .pill-status-incomplete,
#quizzResultForm .pill-status-incomplete {
	background-color:#f1f1f1; 
}
.card img {
	width: 100%;
}
@media (max-width: 767px) {
	.card img {
		margin-top: 0;
	}
}
.card h3 {
	letter-spacing: 0.01em;
	margin-top:10px;
}
.card button {
	display: block;
	text-align: center;
	font-size: 1em;
	text-decoration: none;
	padding: 15px 25px;
	border-radius: 10px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: #335075;
	background: #f1f1f1;
	margin: 10px 0;
	z-index: 10;
	height: auto;
	width: 100%;
	border: 1px solid #ddd;
	-webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.05);
	-moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.05);
	box-shadow: 0 1px 6px 0 rgba(0,0,0,0.05);
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.2), 0 1px 1px -1px rgba(0,0,0,.12);
}
.quiz-title {
	font-size: 40px;
	font-weight: 600;
	padding: 2px 10px;
}
.highlighted {
	background-color: #df4633;
	color:#fff;
}
.pb-30 { /* Based on Bootstrap 4 */
	padding-bottom: 30px;
}

.p-25 { /* Based on Bootstrap 4 */
	padding: 25px;
}
.question {
	font-size: 20px;
	color: #666;
}

.rankNumber {
	display:block;
	background: #e8f4fa;
	width:40px;
	height: 40px;
	border-radius: 50%;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	padding: 5px;
	font-size: 20px;
	font-weight: 700;
}
.ranks>button:hover {
	background: #e8f4fa;
}
.ranks .active {
	background: #f5f9fa;
}
.ranks .active .rankNumber {
	background: white;
}
.progress {
	border-radius: 15px;
	margin-top: 5px;
}
.progress .progress-bar {
	border-radius: 15px;
	font-weight:700;
	text-align: right;
	background-color: #f06b5a;
}
.progress .progress-bar span {
	margin: 0 10px;
}
.progress-minimal {
	overflow: hidden;
	margin-bottom: 23px;
}
.progress-minimal-txt {
	margin-right: 10px;
}
.progress-minimal-bar {
	margin-top: 6px;
	overflow: hidden;
	height: 10px;
	background-color: #f5f5f5;
	border-radius: 4px;
 	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.progress-minimal-bar .progress-bar {
	font-weight:700;
	text-align: right;
	background-color: #d5d9dd;
	height: 100%;
	-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}
.row-striped {
	overflow: auto;
	outline: 1px solid #ddd !important;
}
.row-striped:nth-child(odd) {
	background: #f9f9f9;
}
.row-striped:nth-child(even) {
	background: #fff;
}

.row-group {
	margin: 0 0 15px 0;	
}
.group-container .question,
.row-container .question {
	padding: 7px 25px 0 25px;
	border: 0;
	float: left;
}
.group-container {
	overflow: auto;
	outline: 1px solid #ddd;
	margin-bottom: 15px;
	padding: 15px 25px;
	background: #fff;
}

.quiz-toolbar {
	overflow: auto;
	outline: 1px solid #ddd;
	padding: 15px 25px;
	background: #fff;
}
.group-container h2 {
	color: #666;
	margin: 10px 0;
}

.options-flex label span.text {
	height: 1px;
	margin: 0;
	overflow: hidden;
	position: absolute;
	width: 1px;
}

@media (max-width: 767px) {

	div.radio  {
		width: 100%;
	}
	.options-flex label span.text {
		height: fit-content;
		margin: 0;
		overflow: auto;
		position: relative;
		width: fit-content;
		color: #555;
	}
}

.error {
	display: inline-block;
	position: relative;
	padding: 5px;
	color: #9f2c20;
	background-color: #f2dede !important;
}
.border-toolbar {
	color:#555;
	border-top:1px solid #eee; 
	border-bottom:1px solid #eee; 
	padding: 10px 0;
	overflow: auto;
}
.border-toolbar a {
	margin: 0 15px; 
	float: right;
}
fieldset {
	margin: 0;
}
.u-title,
.box-title {
	padding-bottom: 15px; 
	border-bottom-color: #f1f1f1; 
	border-bottom-width: 13px; 
	border-bottom-style: solid;
}
.font-size-20 {
	font-size: 20px;
}
.font-size-100 {
	font-size: 100px;
}
.mrgn-bttm-75 {
	margin-bottom: 75px;
}
.mrgn-tp-75 {
	margin-top: 75px;
}
.border-toolbar-button {
	float: right;
	color: #284162;
	background: #fff;
	border: none;
	text-decoration: underline;
}
.border-toolbar-button:hover {
	color: #0535d2;
}

.option label {
	font-weight: 400;
	padding-left: 40px !important;
	line-height: auto;
}
.caption.agree {
	color: #1C7C73;
}
.caption.disagree {
	color: #993333;
}
.caption.disagree {
	padding-right: 30px;
}

.caption {
	color: #555555;
	padding: 10px 0 0 0;
	font-weight: 400;
}
@media (min-width: 768px) {
	.options-flex .option input[type="radio"] + label {
		height: 36px;
		margin: 0px 5px;
		overflow: hidden;
		position: relative;
		width: 36px;
		padding: 0 0 0 36px !important;
	}
	.options-flex .option {
		/* float: left; */
		margin: 0 5px !important;
	}
	.options-flex.options {
		display:flex;
		justify-content: center;
	}
}
@media screen and (max-width: 500px) {
	.tableNocs tr td {
		display: block;
	}
}

.tag-edu {
	font-size: 15px;
	margin: 0 2px;
}

div.radio {
	display: inline-block;
}
.no-wrap {
	white-space: nowrap;
}