section.vergelijking {
	padding: 1rem;
	background-color: var(--gray-light);
}
	section.vergelijking .container {
		max-width: 1400px;
		display: flex;
		flex-direction: row;
		gap: 1rem;
	}
div.inputData {
	width: 30%;
}

	div.inputData a.back {
		background: transparent url(/images/navigatie/simple-back-blue.png) no-repeat left center;
		font-weight: bold;
		color: var(--primary-blue);
		padding: 4px 5px 5px 20px;
		font-size: 12pt;
		height: 45px;
		text-decoration: none;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	div.inputData div.data {
		border: 1px solid #CCC;
		background: #FFF;
		border-radius: var(--border-radius);
		padding: 1rem;
		display: flex;
		flex-direction: column;
	}
		div.inputData div.data h3 {
			font-weight: bold;
			font-size: 1.3rem;
			border-bottom: 1px solid var(--color-border);
			padding: 0 0 1rem 0;
		}

		div.inputData div.data h5 {
			font-weight: bold;
			font-size: 1rem;
			padding: 1rem 0 0 0;
		}
		div.inputData div.data div.dataFilterBlock {
			display: flex;
			flex-direction: column;
		}
			div.inputData div.data div.dataFilterBlock div.inputs {
				display: grid;
				grid-template-columns: 3fr 2fr;
				gap: 20px;
				height: 35px;
				align-items: center;
				justify-items: start;
				border-bottom: 1px dashed var(--color-border);
			}

			div.inputData div.data div.dataFilterBlock[data-edit=true] div.inputs {
				background: transparent url(/images/icons/edit.png) no-repeat center right;
				cursor: pointer;
			}

			div.inputData div.data div.dataFilterBlock span.change {
				color: var(--primary-blue);
				text-decoration: none;
				width: 25%;
				margin: 1rem 0;
				background-color: var(--color-white);
				text-align: center;
				border-radius: var(--border-radius);
				padding: 10px;
				font-size: 0.9rem;
				font-weight: bold;
				cursor: pointer;
				align-self: flex-end;
				border: 1px solid var(--color-border);
			}

/*body*/
div.resultBody {
	width: 70%;
	display: flex;
	flex-direction: column;
}

	div.resultBody div.resultHeader {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		height: 45px;
		align-items: center;
	}

	div.resultBody div.resultHeader h5 {
		font-weight: bold;
		font-size: 20pt;
	}
		div.resultBody div.resultHeader span.bttnSave {
			background: transparent url(/images/navigatie/bookmark.png) no-repeat 5px center;
			background-size: 25px;
			color: #1B75BA;
			padding: 8px 10px 10px 35px;
			border: 2px solid #1B75BA;
			font-size: 13pt;
			border-radius: 5px;
			cursor: pointer;
			width: 190px;
			font-weight: bold;
		}
			div.resultBody div.resultHeader span.bttnSave:hover {
				background: #DCE8F7 url(/images/navigatie/bookmark.png) no-repeat 5px center;
				background-size: 25px;
			}

	div.resultBody div.resultFilter {
		width: 100%;
		display: flex;
		gap:0.25rem;
		flex-direction: row;
		justify-content: space-between;
		height: 45px;
		align-items: center;
		border: 1px solid var(--color-gray, #e6e9ef);
		border-radius: var(--border-radius, 16px);
		margin-bottom: 1rem;
		background:var(--color-white);
		padding:0.25rem;
	}

		div.resultBody div.resultFilter span.filter {
			width: 100%;
			text-align: center;
			font-family: var(--font-bold);
			font-size:1.1rem;
			background: var(--light-blue);
			color: var(--primary-blue);
			height: 100%;
			display: flex;
			flex-wrap: nowrap;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}
			div.resultBody div.resultFilter span.filter:hover {
				background: var(--secundary-blue);
				color: var(--color-white);
			}

			div.resultBody div.resultFilter span.filter.active {
				background: var(--primary-blue);
				color: var(--color-white);
			}

	div.resultBody div.resultRow {
		width: 100%;
		background: var(--color-white, #fff);
		border: 1px solid var(--gray-medium);
		border-radius: var(--border-radius, 16px);
		box-shadow: var(--shadow, 0 8px 24px rgba(0, 0, 0, .06));
		padding: 0 clamp(16px, 3vw, 28px) clamp(16px, 3vw, 28px);
		transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
		overflow: hidden;
		margin-bottom: 1rem;
	}

		div.resultBody div.resultRow [data-info]{
			cursor:pointer;
			color:var(--color-link);
			text-decoration: underline;
			font-weight:normal;
		}

		div.resultBody div.resultRow span.position {
			font-weight: bold;
			color: var(--primary-blue);
			text-align: center;
			border-bottom-left-radius: 35%;
			height: 30px;
			font-size: 14pt;
			border-bottom-right-radius: 35%;
			border: 2px solid #CCC;
			background: var(--very-light-blue);
			padding: 2px 10px;
			border-top: 1px solid #CCC;
		}

		div.resultBody div.resultRow .body {
			display: grid;
			grid-template-columns: 2fr 4fr 2fr;
			gap: 12px; /* optioneel */
			width: 100%;
			box-sizing: border-box;
		}

			div.resultBody div.resultRow .body .section {
				display: flex;
				flex-direction: column;
			}

				div.resultBody div.resultRow .body .section.logo {
					align-items: center;
				}
				div.resultBody div.resultRow .body .section.logo img {
					width: 75%;
				}
					div.resultBody div.resultRow .body .section.logo h3 {
						font-family: var(--font-bold);
						color: var(--color-link);
					}
			div.resultBody div.resultRow .body .section.center {
				display: flex;
			}
				div.resultBody div.resultRow .body .section.center h2 {
					font-family: var(--font-bold);
				}
				div.resultBody div.resultRow .body .section.center p,
				div.resultBody div.resultRow .body .section.center span.point {
					font-size: 1rem;
					line-height: 1.75rem;
					color: var(--font-color);
				}

					div.resultBody div.resultRow .body .section.center p{
						margin-top: 1rem;
					}

					div.resultBody div.resultRow .body .section.cta {
						flex-direction: column;
						align-items: center;
					}

						div.resultBody div.resultRow .body .section.cta span.figure {
							text-align: center;
							font-size: 28pt;
							font-weight: bold;
							color: var(--color-link);
							font-family: var(--font-bold);
							display: flex;
							flex-direction: row;
							align-items: flex-start;
						}
							div.resultBody div.resultRow .body .section.cta span.figure mw-pct,
							div.resultBody div.resultRow .body .section.cta span.figure mw-eur {
								margin-top: 5px;
								text-align: center;
								display: flex;
								flex-direction: row;
								align-items: flex-start;
							}

							div.resultBody div.resultRow .body .section.cta span.figure em {
								font-size: 14pt;
								margin-top: 5px;
							}

								div.resultBody div.resultRow .body .section.cta span.figure em.info {
									font-size: 13pt;
									border-radius: 50%;
									border: 2px solid var(--primary-blue);
									cursor: pointer;
									margin: 10px;
									width: 25px;
									height: 25px;
								}
									div.resultBody div.resultRow .body .section.cta span.figure em.info:hover {
										background: var(--light-blue);
									}
						div.resultBody div.resultRow .body .section.cta div.infoDict {
							display: grid;
							grid-template-columns: 1fr 1fr; /* twee even brede kolommen */
							gap: 8px 16px; /* rij- en kolomafstand */
						}

						div.resultBody div.resultRow .body .section.cta div.infoDict span{
						}
						div.resultBody div.resultRow .body .section.cta .prodbttn {
							color: #FFF;
							text-decoration: none;
							width: 100%;
							margin: 1rem;
							background-color: var(--color-green);
							text-align: center;
							border-radius: var(--border-radius);
							padding: 10px;
							font-size: 1.1rem;
							font-weight: bold;
							cursor: pointer;
						}

							div.resultBody div.resultRow .body .section.cta .prodbttn:hover {
								background-color: var(--color-dark-green);
							}

							div.resultBody div.resultRow .body .section.cta .prodbttn.disabled {
								background-color: var(--gray-light);
								color: var(--primary-blue);
							}
								div.resultBody div.resultRow .body .section.cta .prodbttn.disabled:hover {
									background-color: var(--gray-light);
									color: var(--primary-blue);
								}

						div.resultBody div.resultRow .body .section.cta .attention {
							background: #FFF;
							color: #1B75BA;
							font-family: var(--font-bold);
							width: 100%;
							border: 1px solid #CCC;
							margin: 1rem;
							padding: 8px;
							-webkit-box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
							-moz-box-shadow: 0 0 0 0 rgba(0,0,0,0);
							box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
							border-radius: 25px;
							text-align: center;
							cursor: pointer;
						}
							div.resultBody div.resultRow .body .section.cta .attention:hover {
								background-color: var(--very-light-blue);
							}

						div.resultBody div.resultRow .body .section.cta .popover[hidden] {
							display: none
						}

						div.resultBody div.resultRow .body .section.cta .popover {
							position: absolute;
							inset: auto auto auto 0; /* of berekend naast de knop */
							min-width: 280px;
							max-width: 360px;
							border: 1px solid var(--color-border);
							border-radius: 10px;
							background: #fff;
							box-shadow: 0 10px 30px rgba(0,0,0,.08);
							padding: 12px;
						}

						div.resultBody div.resultRow .body .section.cta .popover-header {
							display: flex;
							justify-content: space-between;
							align-items: center;
							gap: 8px;
							margin-bottom: 8px
						}


		div.resultBody div.resultRow div.detailsWrap {
			border-top: 1px solid #CCC;
			display: flex;
			align-items: center;
			justify-content: center;
			padding-top: 1rem;
			flex-direction: column;
		}
		div.resultBody div.resultRow div.detailsWrap .details{
			width:100%;
		}
		
		div.resultBody div.resultRow div.detailsWrap span {
				cursor: pointer;
				width: 200px;
				border: 1px solid #CCC;
				padding: 0.5rem 0;
				border-radius: 5px;
				position: relative;
				text-align: center;
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				align-content: center;
				align-items: center;
				justify-content: flex-start;
				background: var(--color-white);

			}

				div.resultBody div.resultRow div.detailsWrap span:hover {
					background: var(--very-light-blue);
				}

				div.resultBody div.resultRow div.detailsWrap span em {
					margin: 0 1rem;
					font-size: 1.5rem;
				}

			div.resultBody div.resultRow div.detailsWrap .tabsWrap {
				width: 100%;
				display: flex;
				gap: 0.5rem;
				margin-top: 1rem;
				background: var(--color-white);
				padding: 0.25rem;
				border-bottom: 1px solid var(--color-border);
				height: 45px;
			}
				div.resultBody div.resultRow div.detailsWrap .tabsWrap span {
					padding: 0.5rem 1rem;
					border-bottom: 0;
					border-bottom-left-radius: 0px;
					border-bottom-right-radius: 0px;
					display: flex;
					flex-direction: row;
					justify-content: center;
					font-family: var(--font-bold);
					background: var(--color-gray-light);
					color: var(--primary-blue);
					height: 40px;
				}
					div.resultBody div.resultRow div.detailsWrap .tabsWrap span:hover {
						background: var(--color-white);
						color: var(--primary-blue);
						height: 40px;
					}
					div.resultBody div.resultRow div.detailsWrap .tabsWrap span.active {
						background: var(--color-white);
						color: var(--primary-blue);
						height: 41px;
					}

			div.resultBody div.resultRow div.detailsWrap .tabContent {
				display: flex;
				flex-direction: column;
			}
				

				div.resultBody div.resultRow div.detailsWrap p {
					width: 100%;
					margin: 1.5em 0;
					font-size: 1.05rem;
					padding: 0 0.5rem;
					color: var(--text-dark);
					line-height: 1.5rem;
				}

			div.resultBody div.resultRow div.detailsWrap table {
				border-collapse: collapse;
				width: 100%;
				margin: 1.5em 0;
				font-family: Arial, sans-serif;
				font-size: 1.25rem;
			}

				div.resultBody div.resultRow div.detailsWrap table caption {
					text-align: left;
					font-weight: bold;
					font-size: 1rem;
					margin-bottom: 0.5em;
					color: #004080;
					padding: 0 0.5rem;
				}

				div.resultBody div.resultRow div.detailsWrap table th, 
				div.resultBody div.resultRow div.detailsWrap table td {
					
					padding: 8px 10px;
					vertical-align: central;
				}

			div.resultBody div.resultRow div.detailsWrap table th {
				background-color: #f5f7fa;
				text-align: left;
				font-weight: 600;
			}

				div.resultBody div.resultRow div.detailsWrap table tr {
					border-bottom: 1px solid var(--gray-dark);
					font-size: 0.95rem;
					height: 45px;
				}

/*			div.resultBody div.resultRow div.detailsWrap table tr:nth-child(even) {
				background-color: #fafafa;
			}*/

				div.resultBody div.resultRow div.detailsWrap table td a{
					color:var(--color-link);
				}

				div.resultBody div.resultRow div.detailsWrap table em {
					color: #555;
				}

			div.resultBody div.resultRow div.detailsWrap table strong {
				color: #000;
			}

		div.resultBody div.resultRow.advert {
			background: var(--very-light-blue);
			border: 2px dashed var(--color-border);
		}

			div.resultBody div.resultRow.advert .body .section.center p {
				margin-top: 0rem;
			}
			div.resultBody div.resultRow.advert span.position {
				background: var(--primary-blue);
				color: #FFF;
			}

			div.resultBody div.resultRow.advert .body .section.cta .prodbttn {
				background-color: var(--primary-blue);
			}
				div.resultBody div.resultRow.advert .body .section.cta .prodbttn:hover {
					background-color: var(--secundary-blue);
				}


/* Basis styling */
.dialogVergelijking {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	padding: 1.5rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	z-index: 9999;
	width: 90%;
	max-width: 700px;
	border-radius: 8px;
	border: 1px solid #CCC;
	
}

.dialogVergelijking::backdrop {
	background: rgba(2,6,23,.6);
	backdrop-filter: blur(2px);
}

	.dialogVergelijking h2 {
		font-family: var(--font-bold);
	}

	.dialogVergelijking .body {
		display: grid;
		grid-template-columns: 2fr 3fr; /* verhouding 2:3 */
		gap: 1rem; /* optioneel: ruimte tussen kolommen */
	}
	.dialogVergelijking .body.email {
		display: flex;
		flex-direction: column;
	}
		.dialogVergelijking .body.tekst {
			display: flex;
			flex-direction: column;
		}
	
	.dialogVergelijking div.employee {
	display: flex;
	flex-direction: column;
}

	.dialogVergelijking div.mw-benefits {
		display: flex;
		flex-direction: row;
		gap: 1rem;
	}

	.dialogVergelijking div.mw-input-wrap {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin: 1rem 0;
	}

		.dialogVergelijking div.mw-input-wrap label {
			font-size: 11pt;
			margin: 0 0 -10px 0;
		}
	
	.dialogVergelijking div.employee img {
		width: 80%;
		margin: 0 10%;
	}

.dialogVergelijking .body div h2 {
	font-family: var(--font-bold);
	font-size: 1.55rem;
	line-height: 1.75rem;
	margin-bottom: 2rem;
}
	.dialogVergelijking div.body p {
		font-size: 1rem;
		line-height: 1.75rem;
		margin: 1rem 0 0 0;
	}

.dialogVergelijking div.body  .button {
	color: #FFF;
	text-decoration: none;
	width: 50%;
	margin: 1rem 0;
	background-color: var(--primary-blue);
	text-align: center;
	border-radius: var(--border-radius);
	padding: 10px;
	font-size: 1.1rem;
	font-weight: bold;
	cursor: pointer;
}
	.dialogVergelijking div.mw-trust{
		display:flex;
		gap: 1.5rem;
	}
		.dialogVergelijking div.mw-trust span {
			font-size: 11pt;

			color: var(--color-dark-green);
		}