@import url('https://fonts.googleapis.com/css?family=Raleway:400,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700');

body, table, #content {
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	line-height: 19px;
	background-color: #F4F4F4;
	color: #696969;
}

header {
	background-color: #fff;
}

/* general */
h1, h2, h3, h4, legend {
	font-family: 'Raleway', sans-serif;
	color: #004377;
	font-weight: bold;
}
h1 {
	font-size: 22px;
	line-height: 29px;
}
h2 {
	font-size: 26px;
	line-height: 34px;
}
h3 {
	font-size: 16px;
	line-height: 24px;
}

a { color: #696969; }
a:hover { color: #2a2a86; }

.alert a {
	text-decoration: underline;
}

.valign td,
.valign {
	vertical-align: middle !important;
}

.ui-datepicker table {
	background-color: #fff;
}

/* padding classes */
.space-10 { padding: 10px !important; }
.space-20 { padding: 20px !important; }
.space-30 { padding: 30px !important; }
.space-40 { padding: 40px !important; }
.space-50 { padding: 50px !important; }
.space-60 { padding: 60px !important; }
.space-70 { padding: 70px !important; }
.space-80 { padding: 80px !important; }
.space-90 { padding: 90px !important; }
.space-100 { padding: 100px !important; }

.top-space-10 { padding-top: 10px !important; }
.top-space-20 { padding-top: 20px !important; }
.top-space-30 { padding-top: 30px !important; }
.top-space-40 { padding-top: 40px !important; }
.top-space-50 { padding-top: 50px !important; }
.top-space-60 { padding-top: 60px !important; }
.top-space-70 { padding-top: 70px !important; }
.top-space-80 { padding-top: 80px !important; }
.top-space-90 { padding-top: 90px !important; }
.top-space-100 { padding-top: 100px !important; }

.right-space-10 { padding-right: 10px !important; }
.right-space-20 { padding-right: 20px !important; }
.right-space-30 { padding-right: 30px !important; }
.right-space-40 { padding-right: 40px !important; }
.right-space-50 { padding-right: 50px !important; }
.right-space-60 { padding-right: 60px !important; }
.right-space-70 { padding-right: 70px !important; }
.right-space-80 { padding-right: 80px !important; }
.right-space-90 { padding-right: 90px !important; }
.right-space-100 { padding-right: 100px !important; }

.bottom-space-10 { padding-bottom: 10px !important; }
.bottom-space-20 { padding-bottom: 20px !important; }
.bottom-space-30 { padding-bottom: 30px !important; }
.bottom-space-40 { padding-bottom: 40px !important; }
.bottom-space-50 { padding-bottom: 50px !important; }
.bottom-space-60 { padding-bottom: 60px !important; }
.bottom-space-70 { padding-bottom: 70px !important; }
.bottom-space-80 { padding-bottom: 80px !important; }
.bottom-space-90 { padding-bottom: 90px !important; }
.bottom-space-100 { padding-bottom: 100px !important; }

.left-space-10 { padding-left: 10px !important; }
.left-space-20 { padding-left: 20px !important; }
.left-space-30 { padding-left: 30px !important; }
.left-space-40 { padding-left: 40px !important; }
.left-space-50 { padding-left: 50px !important; }
.left-space-60 { padding-left: 60px !important; }
.left-space-70 { padding-left: 70px !important; }
.left-space-80 { padding-left: 80px !important; }
.left-space-90 { padding-left: 90px !important; }
.left-space-100 { padding-left: 100px !important; }

/* margin classes */
.margin-10 { margin: 10px !important; }
.margin-20 { margin: 20px !important; }
.margin-30 { margin: 30px !important; }
.margin-40 { margin: 40px !important; }
.margin-50 { margin: 50px !important; }
.margin-60 { margin: 60px !important; }
.margin-70 { margin: 70px !important; }
.margin-80 { margin: 80px !important; }
.margin-90 { margin: 90px !important; }
.margin-100 { margin: 100px !important; }

.top-margin-10 { margin-top: 10px !important; }
.top-margin-20 { margin-top: 20px !important; }
.top-margin-30 { margin-top: 30px !important; }
.top-margin-40 { margin-top: 40px !important; }
.top-margin-50 { margin-top: 50px !important; }
.top-margin-60 { margin-top: 60px !important; }
.top-margin-70 { margin-top: 70px !important; }
.top-margin-80 { margin-top: 80px !important; }
.top-margin-90 { margin-top: 90px !important; }
.top-margin-100 { margin-top: 100px !important; }

.right-margin-10 { margin-right: 10px !important; }
.right-margin-20 { margin-right: 20px !important; }
.right-margin-30 { margin-right: 30px !important; }
.right-margin-40 { margin-right: 40px !important; }
.right-margin-50 { margin-right: 50px !important; }
.right-margin-60 { margin-right: 60px !important; }
.right-margin-70 { margin-right: 70px !important; }
.right-margin-80 { margin-right: 80px !important; }
.right-margin-90 { margin-right: 90px !important; }
.right-margin-100 { margin-right: 100px !important; }

.bottom-margin-10 { margin-bottom: 10px !important; }
.bottom-margin-20 { margin-bottom: 20px !important; }
.bottom-margin-30 { margin-bottom: 30px !important; }
.bottom-margin-40 { margin-bottom: 40px !important; }
.bottom-margin-50 { margin-bottom: 50px !important; }
.bottom-margin-60 { margin-bottom: 60px !important; }
.bottom-margin-70 { margin-bottom: 70px !important; }
.bottom-margin-80 { margin-bottom: 80px !important; }
.bottom-margin-90 { margin-bottom: 90px !important; }
.bottom-margin-100 { margin-bottom: 100px !important; }

.left-margin-10 { margin-left: 10px !important; }
.left-margin-20 { margin-left: 20px !important; }
.left-margin-30 { margin-left: 30px !important; }
.left-margin-40 { margin-left: 40px !important; }
.left-margin-50 { margin-left: 50px !important; }
.left-margin-60 { margin-left: 60px !important; }
.left-margin-70 { margin-left: 70px !important; }
.left-margin-80 { margin-left: 80px !important; }
.left-margin-90 { margin-left: 90px !important; }
.left-margin-100 { margin-left: 100px !important; }

/* bootstrap override */

@media (min-width: 1200px) {

.container {
	width: 1280px;
}

}

.control-label {
	font-weight: normal;
}
.form-horizontal .control-label {
	text-align: left;
}

.btn {
	padding-left: 30px;
	padding-right: 30px;
}

.table tr.info th,
.table tr.info td {
	background-color: #7bbcd9 !important;
}
.table tr.info th {
	color: #2a2a86;	
}

/* navbar */

.top-header {
	padding-top: 5px;
	height: 85px;
}

.top-header a {
	color: #2a2a86;	
	line-height: 10px !important;
	margin-left: 0px !important;
}
.navbar-top .navbar-nav>li>* {
	border-left-color: #2a2a86;
}

.navbar-default {
	background: none;
	border: 0px none;
	margin-bottom: -20px;
	font-family: 'Raleway', sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-transform: uppercase;
}

.navbar-brand {
	margin-top: -85px;
}

.navbar-default .navbar-nav>li>a {
	width: 150px;
	padding-top: 20px;
	padding-bottom: 20px;
	font-weight: bold;
	margin-right: 3px;
	text-align: center;
	background-color: #7bbcd9;
	color: #ffffff;
}

.navbar-default .navbar-nav>li:hover>a, 
.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>li>a:focus, 
.navbar-default .navbar-nav>.active>a:focus, 
.navbar-default .navbar-nav>li>a:hover, 
.navbar-default .navbar-nav>.active>a:hover,
#usermenu .active>a, 
#usermenu .active>a:focus, 
#usermenu .active>a:hover {
	background-color: #2a2a86;
	color: #ffffff;
}
#usermenu li:hover>a, 
#usermenu li>a:focus, 
#usermenu li>a:hover {
	background-color: #7bbcd9;
	color: #ffffff;	
}

#content > .container-fluid {
    padding-top: 60px;
}

/* usermenu */
#usermenu ul {
	padding-left: 0px;
}
#usermenu ul li a {
	padding-top: 10px;
	padding-bottom: 10px;
}

/* footer */

.footer,
.footer a {
	color: #2a2a86;
	line-height: 24px;
}
.footer h3 {
	margin: 0px;
	font-weight: bold;
}

/* panels */

.panel {
	border-radius: 3px;
}
.panel-heading {
	border-radius: 0px;
}
.panel h1,
.panel h2,
.panel h3,
.panel h4 {
	font-size: 18px;
	font-weight: bold;
	margin: 0px;
	margin-bottom: 5px;
}
.panel h2 { font-size: 14px; }
.panel h3 { font-size: 14px; }
.panel h4 { font-size: 14px; }

.right-panels .panel h2 { font-size: 18px; }

.right-panels .panel h1 i,
.right-panels .panel h2 i,
.right-panels .panel h3 i,
.right-panels .panel h4 i {
	color: #7bbcd9;
	font-size: 22px;
	margin-right: 5px;
}

.panel-primary {
	border-color: #d0d0d0;
}
.panel-primary .panel-heading {
	background-color: transparent;
	border: 0px none;
	color: inherit;
}

.panel-primary {
    min-height: 500px
}
#login .panel-primary {
	min-height: 0px;
}
#totp_form .panel-primary {
	min-height: 0px;
}


/* buttons */
.btn-primary {
	background-color: #b9daeb;
	border-color: #b9daeb;
	color: #004377;
}

/* page specific */
#certificaten table tr td {
	background-color: #fff;
}
#certificaten .vervallen td {
	background-color: #F4F4F4;
	font-style: italic;
}

#accountgegevens-infopanel ul {
	list-style: none;
	padding: 0px;
}
#accountgegevens-infopanel ul li {
	padding-bottom: 5px;
}
.infopanel-label {
	font-weight: bold;
	padding-left: 0px;
}
.tablist {
	padding-bottom: 0px;
}