/* input */
.vdh-input {
	position: relative;
	width: 100%;
	height: 48px;
}

.vdh-input input {
	width: 100%;
	padding: 14px 10px 14px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: none;
	outline: none;
	box-sizing: border-box;
	
	font-family: var(--vdh-font-family);
	font-size: var(--vdh-input-font-size);	
	font-style: normal;
	letter-spacing: 0.5px;
}

.vdh-input label {
	position: absolute;
	left: 10px;
	top: 14px;
	color: #999;
	pointer-events: none;
	transition: all 0.2s ease-out;
	background-color: white;
	padding: 0 4px;
	
	font-family: var(--vdh-font-family);
	font-size: var(--vdh-input-font-size);	
	font-style: normal;
	letter-spacing: 0.5px;
}

/* Label omhoog bij focus of als input niet leeg is */
.vdh-input input:focus + label,
.vdh-input input:not(:placeholder-shown) + label {
	top: -8px;
	color: #00A9CA;
	
	font-family: var(--vdh-font-family);
	font-size: var(--vdh-input-label-font-size);	
	font-style: normal;
	letter-spacing: 0.5px;
}

.checkbox-wrapper {
	display: flex;
	align-items: flex-start; /* bovenkant label gelijk met checkbox */
	gap: 8px;                /* ruimte tussen checkbox en tekst */
	align-self: stretch;
	max-width: 100%;        /* demo: max breedte zodat tekst afbreekt */
}

.checkbox-wrapper label {
	line-height: 1.4;        /* prettiger leesbaar bij meerdere regels */

	font-family: var(--vdh-font-family);
	font-size: var(--vdh-body-font-size);
}

input[type="checkbox"] {
  accent-color: #28638A;
}