/* Kleuren Vakcentrum KTO / MTO Portal
paars: #512178 || rgb(81,33,120)
licht-paars: rgba(81,33,120,0.25)
wijn-rood: #970b35 || rgb(151,11,53)
helder-rood: #C4043F || rgb(196,4,63)
teal: #00888a || rgb(0,136,138)
donker-teal: #0c5460 ||	rgb(12,84,96)
gebroken wit: #f5f0ed || rgb(245,240,237)
grijs-zwart: #3d3d3d || rgb(61,61,61)
wit vaag:rgba(255,255,255,0.7) */
:root {
	--black-grey:rgb(61,61,61);
	--purple:rgb(81,33,120);
	--purple-light:rgba(81,33,120,0.25);
	--red-wine:rgb(151,11,53);
	--red-bright:rgb(196,4,63);
	--red:#f00;
	--teal-dark:rgb(12,84,96);
	--teal:rgb(0,136,138);
	--teal-pale:rgba(0,136,138,0.8);
	--white:rgb(255,255,255);
	--white-flat:rgb(245,240,237);
	--white-pale:rgba(255,255,255,0.7);
}
/* structural elements */
	html, body { height:100%; }
	body { color:#333; display:-ms-flexbox; display:flex; flex-direction:column; }
	main { background-color:var(--purple-light); 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(--teal); color:#fff ! 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(--white); text-decoration:underline; }
	.footer a:hover { text-decoration:none; }
	.footer .panteia-logo { margin-top:7px; width:80px; }
/* navigation elements */
	.navbar-dark { background-color:var(--purple) ! important; }
	.navbar-brand { background-color:#fff; padding-left:5px; padding-right:5px; }
	.navbar-brand img { height:auto; width:100px; }
	.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:active { border-color:#fff !important; box-shadow:none; color:#fff; outline:none; }
	.navbar-toggler:focus, .navbar-toggler:active { border-color:var(--red-bright) !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='rgb(196,4,63)' 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(--red-bright) ! important; border:1px solid var(--red-bright); color:#fff; }
	.btn-outline-success:hover, .btn-primary:hover { background-color:var(--red-wine) ! important; border:1px solid var(--red-bright); color:#fff; }
	.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(--red-bright); }
	.nav-item.active { background-color:var(--red-wine); }
	.nav-tabs .nav-item .nav-link { background-color:var(--white-flat); border:1px solid var(--red-wine); color:var(--red-wine); }
	.nav-tabs .nav-item .nav-link:hover { background-color:var(--red-bright); color:var(--white-flat); }
	.nav-tabs .nav-item .nav-link.active { background-color:var(--red-wine); border:1px solid var(--red-wine); color:var(--white-flat); }
	.nav-tabs, .nav-tabs .nav-item .nav-link { border-bottom:1px solid var(--red-wine); }
	.nav-tabs > li > a, .nav-pills > li > a { margin-left:3px; margin-right:3px; }
/* page elements */
	h1 { margin-bottom:20px; }
	h2 { font-size:1.75rem; }
	h3 { font-size:1.5rem; }
	p { padding-right:5px; padding-left:5px; }
	.alert-info-vakcentrum { background-color:var(--teal); border-color:var(--teal-pale); color:#fff; }
	.alert-info-vakcentrum a { color:#fff; 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; }
	}