html {
	position: relative;
    min-height: 100%;
    -ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", sans-serif;
	font-size: 14px;
	line-height: 1.8em;
	background: #fff url('../img/background.svg') repeat-y top right;
	/*background-attachment: fixed;*/
	background-size: 600px;
	color: #424242;
	margin: 0 0 100px; /* bottom = footer height */
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

img {
	width: 100%;
	height: auto;
}

	p img,
	.content img {
		width: auto;
		max-width: 100%;
		margin-bottom: 10px;
	}

p {
	margin-bottom: 10px;
}

a {
	text-decoration: none;
	color: #3E1D47;
}

a.link__block {
	display: block;
}

a.js-disable-click {
	cursor: default;
}

.content a {
	font-weight: bold;
}

.show-mobile {
	display: none;
}

small {
	font-size: 11px;
}

.pull-right {
	float: right !important;
}

.pull-left {
	float: left !important;
}

.hide,
.hidden {
	display: none !important;
}

.show {
	display: block;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

.text-center {
	text-align: center;
}

.text-uppercase {
	text-transform: uppercase;
}

.text-rotated {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
	white-space: nowrap;
}

.clear {
	clear: both;
}

.line {
	width: 100%;
	height: 1px;
	background-color: #231F20;
}

.container {
	width: 90% !important;
	max-width: 1200px !important;
}

.content {
	padding-top: 20px;
	padding-bottom: 20px;
}

h2 small a {
	text-transform: none;
	font-size: 10px;
	float: right;
	background: #9d89b4;
	padding: 0 10px;
	color: #fff;
	height: 20px;
	line-height: 20px;
}

h2 small a:hover {
	background: #b782a0;
}

/* ------------ COLORS -------------- */
.text-white {
	color: #FFFFFF !important;
}

	/* Use the defined text color in links */
	.text-white a {
		color: inherit;
	}

.background-white {
	background-color: #FFFFFF !important;
}

/* ------------ TYPOGRAPHY -------------- */
h1, h2, h3, h4, h5, h6 {
	color: #3E1D47;
}

h1 {
	font-weight: normal;
	font-size: 40px;
	line-height: 50px;
	margin-bottom: 20px;
	text-transform: uppercase;
}

h2 {
	font-size: 22px;
	line-height: 28px;
	margin-bottom: 20px;
	text-transform: uppercase;
}

h3 {
	font-size: 18px;
	line-height: 22px;
	margin-top: 25px;
	margin-bottom: 10px;
	text-transform: uppercase;
}

::-webkit-input-placeholder {
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", sans-serif;
}

:-ms-input-placeholder {
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", sans-serif;
}

:-moz-placeholder {
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", sans-serif;
}

::-moz-placeholder {
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", sans-serif;
}

/* ------------ SPACERS -------------- */
.spacer {
	display: block;
	width: 100%;
}

.spacer--6 {
	height: 6px;
}

.spacer--12 {
	height: 12px;
}

.spacer--18 {
	height: 18px;
}

.spacer--24 {
	height: 24px;
}

.spacer--40 {
	height: 40px;
}

/* ------------ BUTTONS -------------- */
.btn {
	font-size: 14px;
	display: inline-block;
	padding: 4px 12px 4px 10px;
	margin-bottom: 0;
	font-weight: normal;
	line-height: 20px;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-ms-touch-action: manipulation;
	    touch-action: manipulation;
	cursor: pointer;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	border-width: 0;
	border-style: hidden;

	-webkit-transition: all 200ms ease-in-out;
	        transition: all 200ms ease-in-out;
}

	.btn:focus,
	.btn:active:focus,
	.btn.active:focus,
	.btn.focus,
	.btn:active.focus,
	.btn.active.focus {
		outline: 5px auto -webkit-focus-ring-color;
		outline-offset: -2px;
	}

	.btn:hover,
	.btn:focus,
	.btn.focus {
		text-decoration: none;
	}

	.btn:active,
	.btn.active {
		background-image: none;
		outline: 0;
		-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
		        box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
	}

	.btn.disabled,
	.btn[disabled] {
		cursor: not-allowed;
		filter: alpha(opacity=65);
		-webkit-box-shadow: none;
		        box-shadow: none;
		opacity: .65;
	}

.btn--block {
	display: block;
	width: 100%;
}

a.btn {
	text-decoration: none;
}

.btn--big {
	text-align: left;
	display: inline-block;
	width: auto;
	background-color: #f4f4f4;
	color: #808080;
	height: 40px;
	line-height: 34px;
	position: relative;
	padding-left: 20px;
	padding-right: 20px;
}

	.btn--big:hover {
		background-color: #e3e4e5;
	}

	.btn--big:after {
	    content: " ";
		display: block;
		position: absolute;
		right: -11px;
		top: 0;
		width: 0;
		height: 0;

		border-top: 20px solid transparent;
		border-left: 11px solid #f4f4f4;
		border-bottom: 20px solid transparent;

		-webkit-transition: all 200ms ease-in-out;
	        transition: all 200ms ease-in-out;*/
	}

		.btn--big:hover:after {
			border-left: 11px solid #e3e4e5;
		}

/* ------------ NAVIGATION -------------- */
.navigation {
	padding-top: 23px;
	height: 80px;
}

	.navigation__logo {
		height: 40px;
		width: 194px;
	}

	.navigation__menu li {
		display: inline-block;
		margin-left: 15px;
	}

	.navigation__menu a:hover {
		opacity: 0.5;
	}

.breadcrumbs {
	background: #f4f4f4;
	height: 40px;
	line-height: 40px;
	width: calc(100% + 10px);
	position: relative;
}

	.breadcrumbs:after {
		content: " ";
		display: block;
		position: absolute;
		top: 0;
		right: -23px;
		width: 0;
		height: 0;
		border-bottom: 40px solid #f4f4f4;
		border-right: 23px solid transparent;
	}

	.breadcrumbs li {
		display: inline-block;
		margin-left: 5px;
	}

	.breadcrumbs a:hover {
		opacity: 0.5;
	}

.voortgang_marker {
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: #a3a3a3;
	position: relative;
	top: -3px;
	display: inline-block;
}

.voortgang_marker:after {
	content: '';
	position: absolute;
	left: -10px;
	top: 10px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: #a3a3a3;
}

	.thema_bloeddruk .voortgang_marker--done {
		border-bottom-color: #e54750;
	}

	.thema_bloeddruk .voortgang_marker--done:after {
		border-top-color: #e54750;
	}

	.thema_cholesterol .voortgang_marker--done {
		border-bottom-color: #f79b38;
	}

	.thema_cholesterol .voortgang_marker--done:after {
		border-top-color: #f79b38;
	}

	.thema_roken .voortgang_marker--done {
		border-bottom-color: #cc8387;
	}

	.thema_roken .voortgang_marker--done:after {
		border-top-color: #cc8387;
	}

	.thema_bloedglucose .voortgang_marker--done {
		border-bottom-color: #93b8d7;
	}

	.thema_bloedglucose .voortgang_marker--done:after {
		border-top-color: #93b8d7;
	}

	.thema_lichaamsbeweging .voortgang_marker--done {
		border-bottom-color: #81c169;
	}

	.thema_lichaamsbeweging .voortgang_marker--done:after {
		border-top-color: #81c169;
	}

	.thema_gewicht-en-middelomvang .voortgang_marker--done {
		border-bottom-color: #b782a0;
	}

	.thema_gewicht-en-middelomvang .voortgang_marker--done:after {
		border-top-color: #b782a0;
	}

	.thema_stemming .voortgang_marker--done {
		border-bottom-color: #9d89b4;
	}

	.thema_stemming .voortgang_marker--done:after {
		border-top-color: #9d89b4;
	}

/* ------------ FORMS -------------- */
.form-group {
	width: 100%;
	margin-bottom: 24px;
}

.form-control {
	font-family: "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", sans-serif;
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 6px 12px;
	font-size: 15px;
	background-color: #f4f4f4;
	background-image: none;
	border: none;
	/*-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;*/
}

.form-label {
	display: block;
	width: 100%;
	min-height: 40px;
	padding: 6px 12px;
	font-size: 15px;
}

.form-select {
	position: relative;
	height: 40px;
}

	.form-select select {
		padding-right: 20px;
	}

	.form-select:after {
		color: #000;
		content: '\e80c';
		position: absolute;
		font-size: 24px;
		height: 40px;
		line-height: 40px;
		top: 0;
		right: 10px;
		font-style: normal;
		font-weight: normal;
		speak: none;
		display: inline-block;
		text-decoration: inherit;
		text-align: center;
		font-variant: normal;
		text-transform: none;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

.input-group {
	position: relative;
	display: table;
	border-collapse: separate;
}

	.input-group .form-control,
	.input-group-addon,
	.input-group-btn {
		display: table-cell;
	}

	.input-group-addon,
	.input-group-btn {
		width: 1%;
		white-space: nowrap;
		vertical-align: middle;
	}

	.input-group-addon {
		padding: 6px 12px;
		font-size: 14px;
		font-weight: 400;
		line-height: 1;
		text-align: center;
	}

	.input-group .form-control:first-child,
	.input-group-addon:first-child,
	.input-group-btn:first-child>.btn,
	.input-group-btn:first-child>.btn-group>.btn,
	.input-group-btn:first-child>.dropdown-toggle,
	.input-group-btn:last-child>.btn-group:not(:last-child)>.btn,
	.input-group-btn:last-child>.btn:not(:last-child):not(.dropdown-toggle) {
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}

	.input-group .form-control:last-child,
	.input-group-addon:last-child,
	.input-group-btn:first-child>.btn-group:not(:first-child)>.btn,
	.input-group-btn:first-child>.btn:not(:first-child),
	.input-group-btn:last-child>.btn,
	.input-group-btn:last-child>.btn-group>.btn,
	.input-group-btn:last-child>.dropdown-toggle {
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	.input-group-addon:first-child {
		border-right: 0;
		border-right: 1px solid #fff;
	}

label {
	display: inline-block;
	margin-bottom: 6px;
	cursor: pointer;
}

textarea.form-control {
	height: auto;
	padding: 12px;
  resize: vertical;
}

.likertscale {
	background-color: #f4f4f4;
	padding: 4px 24px;
}

	.likertscale__heading {
		height: 26px;
	}

	.likertscale__heading--left {
		float: left;
	}

	.likertscale__heading--right {
		float: right;
	}

	.likertscale__numbers {
		margin: 0 -12px;
	}

	.likertscale__numbers:after {
		content: " ";
		display: block;
		clear: both;
	}

	.likertscale__number {
		display: inline-block;
		width: 10%;
		float: left;
		text-align: center;
	}

/* ------------ DASHBOARD -------------- */
.schild {
	display: inline-block;
	width: 100px;
	height: 158px;
	background-size: 100%;
	background-repeat: no-repeat;

	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 300ms ease-in-out;
	transition: all 300ms ease-in-out;
}

	.schild:hover {
		-webkit-transform: scale(1.1);
		transform: scale(1.1);
	}

.schild--bloeddruk {
	background-image: url(/_asr_20260822154129/static/img/schild_bloeddruk.png);
}

.schild--cholesterol {
	background-image: url(/_asr_20260822154129/static/img/schild_cholesterol.png);
}

.schild--roken {
	background-image: url(/_asr_20260822154129/static/img/schild_roken.png);
}

.schild--bloedglucose {
	background-image: url(/_asr_20260822154129/static/img/schild_bloedglucose.png);
}

.schild--lichaamsbeweging {
	background-image: url(/_asr_20260822154129/static/img/schild_lichaamsbeweging.png);
}

.schild--gewicht-en-middelomvang {
	background-image: url(/_asr_20260822154129/static/img/schild_gewicht-en-middelomvang.png);
}

.schild--stemming {
	background-image: url(/_asr_20260822154129/static/img/schild_stemming.png);
}

.schild--bloeddruk.item--progress {
	background-image: url(/_asr_20260822154129/static/img/schild_bloeddruk_progress.png);
}

.schild--cholesterol.item--progress {
	background-image: url(/_asr_20260822154129/static/img/schild_cholesterol_progress.png);
}

.schild--roken.item--progress {
	background-image: url(/_asr_20260822154129/static/img/schild_roken_progress.png);
}

.schild--bloedglucose.item--progress {
	background-image: url(/_asr_20260822154129/static/img/schild_bloedglucose_progress.png);
}

.schild--lichaamsbeweging.item--progress {
	background-image: url(/_asr_20260822154129/static/img/schild_lichaamsbeweging_progress.png);
}

.schild--gewicht-en-middelomvang.item--progress {
	background-image: url(/_asr_20260822154129/static/img/schild_gewicht-en-middelomvang_progress.png);
}

.schild--stemming.item--progress {
	background-image: url(/_asr_20260822154129/static/img/schild_stemming_progress.png);
}

.schild--bloeddruk.item--finished {
	background-image: url(/_asr_20260822154129/static/img/schild_bloeddruk_done.png);
}

.schild--cholesterol.item--finished {
	background-image: url(/_asr_20260822154129/static/img/schild_cholesterol_done.png);
}

.schild--roken.item--finished {
	background-image: url(/_asr_20260822154129/static/img/schild_roken_done.png);
}

.schild--bloedglucose.item--finished {
	background-image: url(/_asr_20260822154129/static/img/schild_bloedglucose_done.png);
}

.schild--lichaamsbeweging.item--finished {
	background-image: url(/_asr_20260822154129/static/img/schild_lichaamsbeweging_done.png);
}

.schild--gewicht-en-middelomvang.item--finished {
	background-image: url(/_asr_20260822154129/static/img/schild_gewicht-en-middelomvang_done.png);
}

.schild--stemming.item--finished {
	background-image: url(/_asr_20260822154129/static/img/schild_stemming_done.png);
}

/* ------------ BLOCK (GEZONHEIDSPROFIEL) -------------- */
.block {
	box-shadow: 2px 2px 4px 1px #d6d6d6;
	padding: 30px 20px;
	margin-bottom: 40px;
	background-color: #fff;
}

.block__meter {
	text-align: center;
	background-color: #fff;
}

.block__meter input,
.block__meter select {
	display: inline-block;
	text-align: center;
	background-color: #a3a3a3;
	color: #fff;
	width: 140px;
	padding-left: 25px;
}


/* ------------ QUESTION -------------- */
.question__box {
	background: #f4f4f4;
	background: -moz-linear-gradient(-45deg, #ececec 0%, #ffffff 40%);
	background: -webkit-linear-gradient(-45deg, #ececec 0%,#ffffff 40%);
	background: linear-gradient(155deg, #ececec 0%,#ffffff 40%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=1 );

	box-shadow: 2px 2px 4px 1px #d6d6d6;
	margin: 40px 0;
	padding: 1px 20px 40px 20px;
	position: relative;
}

	.question__box label {
		padding: 4px 10px 2px 0;
		color: #000;
	}

	.question__box input {
		margin-right: 5px;
	}

	.question__check {
		position: absolute;
		bottom: 20px;
		right: 20px;
	}

	.question__btn {
		cursor: pointer;
		background-color: transparent;
		padding: 6px 12px;
		border: none;
		font-size: 15px;
		color: #bfbfbf;
	}

	.question__feedback {
		width: 38px;
		height: 38px;
		position: relative;
		top: 15px;
		display: inline-block;
		background: transparent url(../img/question__feedback.png) no-repeat center center;
		background-size: cover;
	}

	.question__feedback--good {
		background-image: url(../img/question__feedback__goed.png);
	}

	.question__feedback--bad {
		background-image: url(../img/question__feedback__fout.png);
	}

	.question__feedback--neutral {
		background-image: url(../img/question__feedback__neutraal.png);
	}

	#answers__sortable {
		margin-bottom: 40px;
	}

	.answers__draggable {
		background: white url(../img/drag_handle.svg) no-repeat 17px 14px;
		background-size: 8px;
		padding: 6px 24px 6px 36px;
		margin-bottom: 8px;
		border: 1px dashed #a3a3a3;
		font-weight: bold;
		cursor: move;
	}

#question__content table {
	width: 100%;
}

#question__content table tr:first-child td {
	color: #3E1D47;
    font-weight: bold;
}

#question__bad, #question__good {
	background: #f0f0f0;
	padding: 10px;
	margin-bottom: 20px;
}

/* ------------ HOOFDSTUK -------------- */
.js-disable-click.hoofdstuk__item,
.hoofdstuk__item:hover {
	opacity: 0.5;
}

.hoofdstuk__item {
	position: relative;
}

.hoofdstuk__item:after {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	right: -25px;
	width: 20px;
	height: 20px;
}

	.item--finished.hoofdstuk__item:after {
		background: url(../img/vinkje.png) no-repeat center center;
		background-size: contain;
	}


/* ------------ ONDERWERP -------------- */
.onderwerp__list {

}

.onderwerp__item {
	position: relative;
}

	.onderwerp__list .item--finished:after {
		display: block;
		content: " ";
		position: absolute;
		top: 0;
		right: -25px;
		width: 20px;
		height: 20px;
		background: url(../img/vinkje.png) no-repeat center center;
		background-size: contain;
	}

	.onderwerp__item.js-disable-click,
	.onderwerp__item:hover {
		opacity: 0.5;
	}

/* ------------ MODAL -------------- */
.modal {
	position: absolute;
	background: rgba(255, 255, 255, 0.8);
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
}

	.modal--hide {
		display: none;
	}

.modal__content {
	position: absolute;
	top: 80px;
	left: calc( (100% - 760px) / 2 );
	width: 760px;
	height: auto;
	padding: 40px;
	background: #f4f4f4;
	background: -moz-linear-gradient(-45deg, #ececec 0%, #ffffff 40%);
	background: -webkit-linear-gradient(-45deg, #ececec 0%,#ffffff 40%);
	background: linear-gradient(155deg, #ececec 0%,#ffffff 40%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ececec', endColorstr='#ffffff',GradientType=1 );
	box-shadow: 2px 2px 4px 1px #d6d6d6;
}

.cookie__link {
	color: #3E1D47;
	cursor: pointer;
	padding: 4px 8px;
}

#confetti {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

/* ------------ FOOTER -------------- */
.footer {
	margin: 50px auto 20px auto;
	color: #a3a3a3;
	font-size: 12px;
}

/* ------------ GENERATE PDF -------------- */
.logo__actieplan {
	display: none;
}

	body.generatepdf .logo__actieplan {
		display: block;
	}

body.generatepdf .navigation,
body.generatepdf .breadcrumbs,
body.generatepdf .footer,
body.generatepdf .btn--maakactieplan {
	display: none;
}

body.generatepdf {
	background: #FFF;
}

/* ------------ RESPONSIVE -------------- */
@media (max-width: 767px) {
	body {
		background: #fff;
	}

	.hide-mobile {
		display: none;
	}

	.show-mobile {
		display: inline-block;
	}

	h1 {
		font-size: 26px;
		line-height: 34px;
	}

	h2 {
		font-size: 19px;
		line-height: 28px;
	}

	.container {
		width: 100% !important;
	}

	.navigation {
		height: auto;
		padding-top: 10px;
	}

		.navigation__logo {
			width: 100%;
			height: auto;
		}

		.navigation .text-right {
			text-align: left !important;
		}

		.navigation__menu {
			margin-left: -15px;
			margin-right: -15px;
			margin-bottom: 10px;
			margin-top: 10px;
		}

		.navigation__menu li {
			margin-left: 10px;
		}

		.breadcrumbs {
			display: none;
		}

	.schild {
		width: 85px;
		height: 136px;
	}

	.modal__content {
		top: 10px;
		left: 10px;
		right: 10px;
		width: calc(100% - 10px - 10px);
		height: auto;
		padding: 20px;
		background: #fff;
		box-shadow: 2px 2px 4px 1px #d6d6d6;
	}

	.stemming__table {
		/*width: 170%;*/
		background: #fff;
	}

	.actieplan .text-right {
		text-align: left;
	}

	.likertscale__number {
		width: 100%;
		text-align: left;
	}

	.modal__confetti__schild {
		margin: 0 0 20px 0;
	}

}