/* Kleuren PLUS MTO Portal
groen-vaag: rgba(129,187,39,0.25)
groen-fel: #81bb27 || rgb(129,187,39)
groen-helder: #73aa2d || rgb(115,170,45)
groen-gras: #618f2f || rgb(97,143,47)
groen-donker: #237748 || rgb(35,119,72)
paars: #544F9C || rgb(84,79,156)
teal-donker: #0c5460 ||	rgb(12,84,96)
wit-gebroken: #f5f0ed || rgb(245,240,237)
wit-vaag: rgba(255,255,255,0.7)
zwart-grijs: #3d3d3d || rgb(61,61,61) */
:root {
	--black-grey:rgb(61,61,61);
	--green-pale:rgba(129,187,39,0.25);
	--green-signal:rgb(129,187,39);
	--green-vibrant:rgb(115,170,45);
	--green-grass:rgb(97,143,47);
	--green-dark:rgb(35,119,72);
	--purple:rgb(84,79,156);
	--red:#f00;
	--teal-dark:rgb(12,84,96);
	--white:rgb(255,255,255);
	--white-flat:rgb(245,240,237);
	--white-pale:rgba(255,255,255,0.7);
}
/* structural elements */
	html,body { background-color:var(--green-pale); height:100%; }
	body {
		background-image:url('/assets/img/bg/bg1.jpg');
		background-repeat:no-repeat;
		background-size:cover;
		color:#333;
		display:-ms-flexbox;
		display:flex;
		flex-direction:column;
	}
	main { flex:1 0 auto; }
	main > .container { background-color:var(--white-pale); padding:60px 15px 0 15px; }
	footer { flex-shrink:0; position:static; }
	.footer { background-color:var(--black-grey); color:var(--white) ! important; min-height:60px; }
	.footer > .container { padding-right:15px; padding-left:15px; }
	.footer p { margin-bottom:0; padding-top:10px; padding-bottom:10px; }
	.footer a { color:var(--green-vibrant); }
	.footer .panteia-logo { margin-top:7px; width:80px; }
/* navigation elements */
	.navbar-dark { background-color:var(--green-vibrant) ! important; }
	.navbar-brand img { height:auto; width:150px; }
	.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:active { border-color:var(--white) !important; box-shadow:none; color:var(--white); outline:none; }
	.navbar-toggler:focus, .navbar-toggler:active { border-color:var(--green-dark) !important; }
	.navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") ! important; }
	.navbar-toggler:focus .navbar-toggler-icon, .navbar-toggler:active .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='var(--green-dark)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E") ! important; }
	.btn-outline-success, .btn-primary { background-color:var(--green-grass) ! important; border:none; border-bottom:2px solid var(--purple); color:var(--white); }
	.btn-outline-success:hover, .btn-primary:hover { background-color:var(--green-dark) ! important; border:none; border-bottom:2px solid var(--purple); color:var(--white); }
	.navbar-nav .nav-link { color:var(--white-flat) ! important; padding-right:8px ! important; padding-left:8px ! important; }
	.navbar-nav .nav-link:hover { background-color:var(--green-grass); }
	.nav-item.active { background-color:var(--green-dark); }
	.nav-tabs .nav-item .nav-link { background-color:var(--white-flat); border:1px solid var(--green-dark); color:var(--green-dark); }
	.nav-tabs .nav-item .nav-link:hover { background-color:var(--green-grass); color:var(--white-flat); }
	.nav-tabs .nav-item .nav-link.active { background-color:var(--green-dark); border:1px solid var(--green-dark); color:var(--white-flat); }
	.nav-tabs, .nav-tabs .nav-item .nav-link { border-bottom:1px solid var(--green-dark); }
	.nav-tabs > li > a, .nav-pills > li > a { margin-left:3px; margin-right:3px; }
/* page elements */
	h1 { margin-bottom:20px; }
	p { padding-right:5px; padding-left:5px; }
	.alert-info-vakcentrum { background-color:var(--green-vibrant); border-color:var(--green-grass); color:var(--white); }
	.alert-info-vakcentrum a { color:var(--white); text-decoration:underline; }
	.alert-info-vakcentrum a:hover { text-decoration:none; }
	.form-signin { margin:auto; max-width:330px; padding:15px; width:100%; }
	.form-signin .checkbox { font-weight:400; }
	.form-signin .form-control { box-sizing:border-box; font-size:16px; height:auto; padding:10px; position:relative; }
	.form-signin .form-control:focus { z-index:2; }
	.form-signin input[type="email"] { border-bottom-right-radius:0; border-bottom-left-radius:0; margin-bottom:-1px; }
	.form-signin input[type="password"] { border-top-left-radius:0; border-top-right-radius:0; margin-bottom:10px; }
	.form-group.required .control-label:after { color:var(--red); content:" *"; }
/* popover */
	.popover__wrapper { display:inline-block; position:relative; }
	.popover__title { padding:0; text-align:center; }
	.popover__content {
		border-color:var(--teal-dark);
		box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.26);
		left:-25px;
		margin:2.5rem 0 0 0 ! important;
		opacity:0;
		padding-bottom: 0 ! important;
		position:absolute;
		transform:translate(0, 10px);
		visibility:hidden;
		width:80%;
	}
	.popover__content:before {
		border-color:transparent transparent var(--teal-dark) transparent;
		border-style:solid;
		border-width:0 10px 10px 10px;
		content:"";
		position:absolute;
		right:calc(50% - 10px);
		top:-10px;
		transition-duration:0.3s;
		transition-property:transform;
		z-index:-1;
	}
	.popover__wrapper:hover .popover__content {
		opacity:1;
		transform:translate(0, -20px);
		transition:all 0.5s cubic-bezier(0.75, -0.02, 0.2, 0.97);
		visibility:visible;
		z-index:10;
	}
	.popover__message { text-align:center; }
/* terug naar boven knop */
	.back-to-top {
		background-color:var(--green-grass);
		border:1px solid var(--purple);
		border-radius:4px;
		bottom:5px;
		color:var(--white) ! important;
		display:none;
		font-size:1.4em;
		font-weight:500;
		opacity:0.95;
		padding:5px 15px;
		position:fixed;
		right:5px;
		text-decoration:none;
	}
	.back-to-top:hover,
	.back-to-top:active,
	.back-to-top:focus { background-color:var(--black-grey); color:var(--white); text-decoration:none; }
	.back-to-top i:before { color:#fff; }
	.back-to-top i { font-style:normal; }
/* media queries */
	@media print {
		header, footer { display:none; }
		#hcContainer { width:100% ! important; }
		.highcharts-container { width:98% ! important; }
		.highcharts-container svg { width:100% ! important; }
	}