
.obrwrap {
	margin: 50px 0 50px;
	min-height: 400px;
}
.obrwrap h2 {
	margin: 0 0 25px;
}
.obrwrap #message {
	padding: 10px;
	border: 1px solid #bbb;
	margin: 25px 0;
}
.obrwrap #message.updated {
	border-left: 3px solid #0c0;
}
.obrwrap #message.error {
	border-left: 3px solid #c00;
}

.obrwrap .obrtesthistory,
.obrwrap .obrreviewtable,
.obrwrap .obrreviewtable .obrreviewtableanswertable,
.obrwrap .obrtaketesttable {
	width: 100%;
	display: grid;
	grid-template-rows: auto;
}
.obrwrap .obrtesthistory {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
@media screen and ( max-width: 1023px ) {
	.obrwrap .obrtesthistory {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}
@media screen and ( max-width: 767px ) {
	.obrwrap .obrtesthistory {
		grid-template-columns: 1fr 1fr;
	}
}
.obrwrap .obrreviewtable {
	grid-template-columns: 1fr 3fr 3fr;
}
.obrwrap .obrreviewtable .obrreviewtableanswertable {
	background: #fff;
	grid-template-columns: 1fr 4fr;
	border: 1px solid #ddd;
	padding: 0;
}
.obrwrap .obrtaketesttable {
	grid-template-columns: 1fr 3fr 3fr;
}
.obrwrap .obrtaketesttable .span2 {
	grid-column: span 2;
}
@media screen and ( max-width: 767px ) {
	.obrwrap .obrtaketesttable .buttonsdiv {
		display: flex;
		flex-flow: column;
	}
}
.obrwrap .obrtaketesttable .span3 {
	grid-column: span 3;
}
.obrwrap .obrtaketesttable .highlightquestion {
	background-color: var( --e-global-color-a115014 ); /* light blue */
	padding: 40px 10px;
}

.obrwrap .obrtesthistory > div:nth-child( 16n+1 ),
.obrwrap .obrtesthistory > div:nth-child( 16n+2 ),
.obrwrap .obrtesthistory > div:nth-child( 16n+3 ),
.obrwrap .obrtesthistory > div:nth-child( 16n+4 ),
.obrwrap .obrtesthistory > div:nth-child( 16n+5 ),
.obrwrap .obrtesthistory > div:nth-child( 16n+6 ),
.obrwrap .obrtesthistory > div:nth-child( 16n+7 ),
.obrwrap .obrtesthistory > div:nth-child( 16n+8 ),
.obrwrap .obrreviewtable > div:nth-child( 6n+1 ),
.obrwrap .obrreviewtable > div:nth-child( 6n+2 ),
.obrwrap .obrreviewtable > div:nth-child( 6n+3 ),
.obrwrap .obrreviewtable .obrreviewtableanswertable > div:nth-child( 4n+1 ),
.obrwrap .obrreviewtable .obrreviewtableanswertable > div:nth-child( 4n+2 ),
.obrwrap .obrtaketesttable > div.stripedbackground {
	background: #eee;
}
.obrwrap .obrtesthistory div,
.obrwrap .obrreviewtable div,
.obrwrap .obrtaketesttable div {
	display: flex;
}
.obrwrap .obrtesthistory div,
.obrwrap .obrreviewtable div,
.obrwrap .obrreviewtable .obrreviewtableanswertable div,
.obrwrap .obrtaketesttable div {
	align-items: center;
	justify-content: center;
	padding: 5px;
}
.obrwrap .obrreviewtable .obrreviewtableanswertable div.incorrect {
	background-color: #c00;
}
.obrwrap .obrreviewtable .obrreviewtableanswertable div.correct {
	background-color: #0c0;
}
.obrcomplianceofficerarea {
	background-color: #fff;
	border: 1px solid var( --e-global-color-secondary );
	border-radius: 10px;
	padding: 10px;
}
.obrcofilter {
	display: inline-flex;
	flex-flow: row;
	align-items: center;
	width: 100%;
	margin: 0 0 50px 0;
}
.obrcofilter1,
.obrcofilter2,
.obrcofilter3 {
	padding: 0 30px 0 0;
}

