@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=latin-ext');

body {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin-bottom: 1em;
}

h1 { font-size: 3em; }
h2 { font-size: 2.5em; }
h3 { font-size: 2em; }
h4 { font-size: 1.5em; }
h5 { font-size: 1em; }
h6 { font-size: 0.75em; }

p { margin: 0 0 1em 0; }

ul { padding-left: 2em; }

li:before {
	content: '•';
	left: -1em;
}

input[type="radio"] {
	-webkit-appearance: none;
	border: solid 1px #151573;
	width: 24px;
	height: 24px;
	border-radius: 3px;
	cursor: pointer;
	background-position: center;
	background-repeat: no-repeat;
	vertical-align: middle;
}

input[type="radio"]:checked { background-image: url(img/checked.png); }

input[type="text"],
input[type="password"] {
	width: 100%;
	padding: 10px;
	border: solid 1px #ccc;
}

header {
	background-image: url(img/header-bg.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center top;
	height: 120px;
}

header .logo { margin-top: 10px; }

footer {
	text-align-last: center;
	background-color: #5e5e95;
	color: #fff;
	padding: 10px 0;
}

footer .seperator { margin: 0 10px; }

div.page { padding: 30px 0 120px 0; }

.time-left {
	font-size: 16px;
	color: #3f3f3f;
}

.time-left #time {
	font-weight: 700;
	font-size: 24px;
	vertical-align: middle;
	margin: 0 0 0 15px;
}

.btn {
	display: inline-block;
	color: #fff;
	background-color: #27276c;
	font-weight: 700;
	padding: 12px 24px;
	border-radius: 3px;
	text-transform: uppercase;
}

.btn.btn-small {
	padding: 6px 12px;
	font-size: 12px;
}

a.btn:hover { text-decoration: none; }

ul.q-list {
	padding: 0;
	font-size: 0;
	margin: 30px 0 60px 0;
}

ul.q-list li:before { content: none; }

ul.q-list li {
	display: inline-block;
	padding: 0 1px 1px 0;
}

ul.q-list li a {
	display: inline-block;
	width: 25px;
	height: 20px;
	line-height: 20px;
	color: #fff;
	background-color: #cf4b4c;
	text-align: center;
	font-size: 14px;
}

ul.q-list li a:hover { text-decoration: none; }

ul.q-list li.completed a { background-color: #14aa00; }

ul.q-list li.current a { background-color: #151573; }

.q-content-list .arrow {
	display: inline-block;
	width: 20px;
	height: 32px;
	cursor: pointer;
}
.q-content-list .arrow.a-left { background-image: url(img/arrow-left.png); }
.q-content-list .arrow.a-right { background-image: url(img/arrow-right.png); }

.q-content { display: none; }

.q-content h1 {
	color: #151573;
	font-size: 24px;
	font-style: italic;
	font-weight: 500;
}

.q-content .answers {
	margin: 30px 0;
	color: #5e5e95;
}

.q-content .answers > div { padding: 10px 0; }

.q-content .answers .a-letter {
	font-weight: 800;
	font-size: 18px;
}

.q-content .answers input[type="radio"] { margin: -6px 10px 0 0; }

.q-content .applied {
	display: none;
	color: #14aa00;
	font-weight: 700;
	padding: 12px 24px;
	border-radius: 3px;
	text-transform: uppercase;
}

.q-content #edit { display: none; }

.q-content.is-applied #edit { display: inline-block; }

.q-content.is-applied .applied { display: inline-block; }

.q-content.is-applied #apply { display: none; }

.q-content.is-applied [type="radio"] { pointer-events: none; }

.q-content #apply.red { background-color: #f00; }

.login-form {
	width: 200px;
	height: 320px;
	margin: auto;
}

.login-form input { margin-bottom: 15px; }

.login-form button { width: 100%; }

.login-form .loader { display: none; }

.login-form .error-msg {
	display: none;
	color: #f00;
	text-align: center;
	padding: 10px 0;
}

.login-form.loading .loader { display: inline-block; }

.login-form.loading button { display: none; }

.login-form.incorrect input { border-color: #f00; }

.login-form.incorrect .error-msg { display: block; }

.login-form .completed-msg {
	display: none;
	text-align: center;
	padding: 10px 0;
}

.login-form.completed .completed-msg { display: block; }

.pre-exam {
	text-align: center;
	color: #27276c;
}

.entry-table {
	border-collapse: collapse;
	width: 100%;
	font-size: 10px;
}

.entry-table th {
	border: solid 1px #ccc;
	padding: 5px;
	font-weight: 500;
}

.entry-table td {
	border: solid 1px #ccc;
	padding: 5px;
	width: 33%;
	text-align: center;
}

.entry-table tr.is-incorrect td:not(:last-child) {
	font-weight: 900;
	color: #F00;
}

.entry-table tr.is-incorrect td:first-child:before {
	content: 'X';
	display: inline-block;
	position: absolute;
	top: 4px;
	left: 4px;
	font-size: 14px;
}

.btn#end-exam { margin: 0 0 0 25px; }

.entry-panel {
	background-color: #eee;
	border-radius: 10px;
	padding: 15px;
}

.print-container { padding: 50px 0 0 0; }

.print-container.with-answers { display: none; }

.signature .col { padding-top: 50px; }

.signature .border-bottom {
	padding-top: 65px;
	border-bottom: solid 1px #ccc;
}