input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="website	"],
select,
textarea{
	min-height: 24px;
	border: 1px solid #00008366;
	border-radius: 6px;
	margin-bottom: 0;
	font-weight: 700;
	font-size: 14px;
	line-height: 30px;
	padding: 12px 20px 4px 20px;

	background: none;
	background-color: #FFFFFF;
	color: #000083 !important;
	width: 100%;
	box-sizing: border-box;

	&:active,
	&:focus {
		border: 1px solid #00008366;
		padding-left: 20px;
	}
}

select {
	min-height: 46px;
	padding: 12px 16px 4px 16px;
}

textarea {
	padding-top: 20px;
}

input[type='file'] {
	margin-top: 0 !important;
	background-color: #FFFFFF;
	color: #000083;
	width: fit-content;

	&:hover {
		background-color: #FFFFFF;
		color: #000083;
	}
}

::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
	color: rgba(23, 28, 38, 0.6);
	opacity: 1; /* Firefox */
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;

}

:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color: rgba(23, 28, 38, 0.6);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

::-ms-input-placeholder { /* Microsoft Edge */
	color: rgba(23, 28, 38, 0.6);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

textarea{
	min-height: 128px;
	height: 128px;
}

input[type="checkbox"],
input[type="radio"] {
	opacity: 1;
	accent-color: #05A302;
	width: 32px;
	margin: 0;
	height: 32px;
}

.form-holder {
	padding: 28px 20px;

	@media (min-width: 768px){
		padding: 48px 40px;
	}

	border-radius: 6px;

	.grid-block {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px;
		margin-top: 30px;

		&.with-columns {
			.columns {
				.holder {
					display: flex;
					flex-direction: column;
					gap: 24px;

					&.equal {
						display: block;
						height: 100%;

						input,
						textarea,
						label,
						.column {
							height: 100%;
						}
					}
				}
			}

			.column {
				.options {
					display: flex;
					flex-direction: column;
					gap: 5px;

					.option {
						display: flex;
						flex-direction: row;
						gap: 16px;
						align-items: center;
					}
				}
			}

			&.columns-1 {
				.columns {
					flex: 1 0 100%;
					width: 100%;
					max-width: 100%;
					min-width: 100%;
				}
			}

			&.columns-2 {
				.columns {
					flex: 1 0 calc((100% - 24px) / 2);
					width: calc((100% - 24px) / 2);
					max-width: calc((100% - 24px) / 2);
					min-width: calc((100% - 24px) / 2);
				}
			}

			&.columns-3 {
				.columns {
					flex: 1 0 calc((100% - 48px) / 3);
					width: calc((100% - 48px) / 3);
					max-width: calc((100% - 48px) / 3);
					min-width: calc((100% - 48px) / 3);
				}
			}
		}
	}

	.column {
		flex: 1 0 100%;
		width: 100%;
		max-width: 100%;
		min-width: 100%;

		@media (min-width: 768px){
			&.large {
				flex: 1 0 100%;
				width: 100%;
				max-width: 100%;
				min-width: 100%;
			}

			&.medium {
				flex: 1 0 calc((100% - 24px) / 2);
				width: calc((100% - 24px) / 2);
				max-width: calc((100% - 24px) / 2);
				min-width: calc((100% - 24px) / 2);
			}

			&.small {
				flex: 1 0 calc((100% - 48px) / 3);
				width: calc((100% - 48px) / 3);
				max-width: calc((100% - 48px) / 3);
				min-width: calc((100% - 48px) / 3);
			}
		}

		label {
			position: relative;

			.placeholder {
				position: absolute;
				font-size: 14px;
				line-height: 48px;
				color: #00008366;
				left: 21px;
				transition: top 0.1s, font-size 0.1s, line-height 0.1s;
				z-index: 10;

				&.focus {
					font-size: 10px;
					line-height: 24px;
					transition: font-size 0.1s, line-height 0.1s;
					color: #000083;
				}

				em {
					color: #bfbfc0;
				}
			}

			&.consent {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: wrap;
				gap: 10px;
			}

			.validation-container {
				flex: 1 0 100%;

				.message {
					font-size: 12px;
					font-weight: 400;
					line-height: 16px;
					color: #fe3a21;
					padding: 10px;
				}
			}

			&.success {
				&::after {
					position: absolute;
					content: ' ';
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 16px 16px;
					top: 0;
					right: 20px;
					width: 16px;
					height: 60px;
				}

				&.consent {
					&::after {
						display: none;
					}
				}
			}

			&.error {
				input,
				select,
				textarea {
					border-color: #fe3a21;
				}

				&::after {
					position: absolute;
					content: ' ';
					background-repeat: no-repeat;
					background-position: center center;
					background-size: 16px 16px;
					top: 0;
					right: 20px;
					width: 16px;
					height: 60px;
				}

				&.consent {
					&::after {
						display: none;
					}
				}
			}
		}
	}

	.message-container {
		background-color: #05A302;
		padding: 10px;
		margin-top: 20px;
		border-radius: 6px;

		* {
			color: #FFFFFF;
			font-size: 12px;
			font-weight: 400;
			line-height: 16px;
		}

		strong {
			font-weight: 600;
		}

		&.error {
			background-color: #fe3a21;
		}
	}

	.thankyou {
		text-align: center;
		padding: 100px 0;
		display: none;

		&.show {
			display: block;
		}

		.icon-container {
			width: 100%;
			height: 42px;
			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='16' width='14' viewBox='0 0 448 512'%3E%3Cpath fill='%2305A302' d='M441 103c9.4 9.4 9.4 24.6 0 33.9L177 401c-9.4 9.4-24.6 9.4-33.9 0L7 265c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l119 119L407 103c9.4-9.4 24.6-9.4 33.9 0z'/%3E%3C/svg%3E");
			background-size: 42px 42px;
			background-position: center center;
			background-repeat: no-repeat;
		}

		.title-container {
			margin-top: 18px;

			h1,
			h2,
			h3,
			h4,
			h5,
			h6 {
				font-size: 36px;
				font-weight: 600;
				line-height: 50px;
				text-align: left;
			}
		}

		.content-container {
			margin-top: 18px;

			font-size: 21px;
			font-weight: 400;
			line-height: 32px;

			* {
				font-size: 21px;
				font-weight: 400;
				line-height: 32px;
			}
		}
	}

	&.done {
		.progress {
			.bar {
				width: 100% !important;
			}
		}
	}
}

.vseeform {
	&.form_short {
		input[type="text"],
		input[type="email"],
		input[type="tel"],
		input[type="number"],
		input[type="date"],
		input[type="time"],
		select,
		textarea {
			border: 0;

			&:active,
			&:focus {
				border: 0;
			}
		}

		.grid-block {
			margin-top: 0;

			@media (max-width: 425px) {
				gap: 10px;
			}

			.column {
				flex: 1 0 100%;
				width: 100%;
				max-width: 100%;
				min-width: 100%;

				@media (min-width: 768px) {
					flex: 1 0 calc(((100% - 48px) / 10) * 4);
					width: calc(((100% - 48px) / 10) * 4);
					max-width: calc(((100% - 48px) / 10) * 4);
					min-width: calc(((100% - 48px) / 10) * 4);
				}
			}

			.row-button {
				flex: 1 0 100%;
				width: 100%;
				max-width: 100%;
				min-width: 100%;

				@media (min-width: 768px) {
					flex: 1 0 calc(((100% - 48px) / 10) * 2);
					width: calc(((100% - 48px) / 10) * 2);
					max-width: calc(((100% - 48px) / 10) * 2);
					min-width: calc(((100% - 48px) / 10) * 2);
				}

				.button {
					width: 100%;
					padding: 14px 15px 14px 15px;

					@media (max-width: 425px) {
						text-align: center;
					}
				}
			}
		}
	}

	&.with-pagination {
		.progress {
			height: 18px;
			border-radius: 9px;
			border: 1px solid #00008366;
			width: 100%;
			margin-top: 24px;
			padding: 1px;

			.bar {
				background-color:#3284F9;
				height: 14px;
				border-radius: 8px;
				width: 0;
			}
		}

		.grid-block {
			margin-top: 64px;

			.page {
				> .html {
					font-size: 21px;
					font-weight: 700;
					line-height: 27px;
					text-align: left;
					color: #000083;
				}
			}

			.fields-container {
				background-color: #E4EEFD;
				border-radius: 8px;
				padding: 16px;
				display: flex;
				flex-direction: column;
				gap: 16px;
				margin-top: 24px;
				margin-bottom: 32px;

				.column {
					&.options-images {
						&.options-moving-size {
							.options {
								display: flex;
								flex-direction: row;
								gap: 16px;

								@media (max-width: 425px) {
									flex-wrap: wrap;
								}

								.option {
									flex: 1;

									@media (max-width: 425px) {
										flex: 1 0 calc((100% - 16px) / 2);
										width: calc((100% - 16px) / 2);
										min-width: calc((100% - 16px) / 2);
										max-width: calc((100% - 16px) / 2);
									}

									input {
										display: none;
									}

									label {
										background-color: #FFFFFF;
										text-align: center;
										padding: 16px;
										border-radius: 4px;
										width: 100%;
										margin: 0;
										font-size: 12px;
										font-weight: 400;
										line-height: 15px;
										border: 2px solid #FFFFFF;

										@media (max-width: 425px) {
											min-width: 100%;
										}

										&::before {
											content: '';
											display: block;
											background-image: url("data:image/svg+xml,%3Csvg width='47' height='41' viewBox='0 0 47 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.6719 1.46875L45.2969 18.9688C46.0781 19.6719 46.1562 20.8438 45.5312 21.625C44.8281 22.4062 43.6562 22.4844 42.875 21.8594L41 20.2188V34.75C41 38.2656 38.1875 41 34.75 41H12.25C8.73438 41 6 38.2656 6 34.75V20.2188L4.04688 21.8594C3.26562 22.4844 2.09375 22.4062 1.39062 21.625C0.765625 20.8438 0.84375 19.6719 1.625 18.9688L22.25 1.46875C22.9531 0.921875 23.9688 0.921875 24.6719 1.46875ZM9.75 34.75C9.75 36.1562 10.8438 37.25 12.25 37.25H16V25.375C16 23.6562 17.3281 22.25 19.125 22.25H27.875C29.5938 22.25 31 23.6562 31 25.375V37.25H34.75C36.0781 37.25 37.25 36.1562 37.25 34.75V17.0156L23.5 5.375L9.75 17.0156V34.75ZM19.75 37.25H27.25V26H19.75V37.25Z' fill='%233284F9'/%3E%3C/svg%3E%0A");
											background-size: 42px 42px;
											background-position: center center;
											background-repeat: no-repeat;
											width: 100%;
											height: 42px;
											margin-bottom: 16px;
										}

										&.option-1-slaapkamer {
											&::before {
												background-image: url("data:image/svg+xml,%3Csvg width='40' height='29' viewBox='0 0 40 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 1.5V19H18V9.5C18 7.625 19.5625 6 21.5 6H32.5C36.625 6 40 9.375 40 13.5V20.5V27C40 27.875 39.3125 28.5 38.5 28.5C37.625 28.5 37 27.875 37 27V22H19.5H3V26.5C3 27.375 2.3125 28 1.5 28C0.625 28 0 27.375 0 26.5V20.5V1.5C0 0.6875 0.625 0 1.5 0C2.3125 0 3 0.6875 3 1.5ZM37 13.5C37 11.0625 34.9375 9 32.5 9H21.5C21.1875 9 21 9.25 21 9.5V19H37V13.5ZM8 11.5C8 12.4375 8.4375 13.25 9.25 13.6875C10 14.125 10.9375 14.125 11.75 13.6875C12.5 13.25 13 12.4375 13 11.5C13 10.625 12.5 9.8125 11.75 9.375C10.9375 8.9375 10 8.9375 9.25 9.375C8.4375 9.8125 8 10.625 8 11.5ZM16 11.5C16 13.5 14.9375 15.3125 13.25 16.3125C11.5 17.25 9.4375 17.25 7.75 16.3125C6 15.3125 5 13.5 5 11.5C5 9.5625 6 7.75 7.75 6.75C9.4375 5.8125 11.5 5.8125 13.25 6.75C14.9375 7.75 16 9.5625 16 11.5Z' fill='%233284F9'/%3E%3C/svg%3E%0A");
											}
										}

										&.option-2-slaapkamers {
											&::before {
												background-image: url("data:image/svg+xml,%3Csvg width='40' height='36' viewBox='0 0 40 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.25C2.5 2.21875 4.14062 0.5 6.25 0.5H33.75C35.7812 0.5 37.5 2.21875 37.5 4.25V14.0938C36.3281 13.5469 35.0781 13.1562 33.75 13.0781V13V10.5C33.75 9.17188 32.5781 8 31.25 8H23.75C22.3438 8 21.25 9.17188 21.25 10.5V13H18.75V10.5C18.75 9.17188 17.5781 8 16.25 8H8.75C7.34375 8 6.25 9.17188 6.25 10.5V13V13.0781C4.84375 13.1562 3.59375 13.5469 2.5 14.0938V4.25ZM6.875 15.5H33.125C36.875 15.5 40 18.625 40 22.375V28.625V33.625C40 34.7188 39.1406 35.5 38.125 35.5C37.0312 35.5 36.25 34.7188 36.25 33.625V30.5H3.75V33.625C3.75 34.7188 2.89062 35.5 1.875 35.5C0.78125 35.5 0 34.7188 0 33.625V28.625V22.375C0 18.625 3.04688 15.5 6.875 15.5ZM36.25 26.75V22.375C36.25 20.6562 34.8438 19.25 33.125 19.25H6.875C5.07812 19.25 3.75 20.6562 3.75 22.375V26.75H36.25Z' fill='%233284F9'/%3E%3C/svg%3E%0A");
											}
										}

										&.option option-3+-slaapkamers {
											&::before {
												background-image: url("data:image/svg+xml,%3Csvg width='47' height='41' viewBox='0 0 47 41' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M24.6719 1.46875L45.2969 18.9688C46.0781 19.6719 46.1562 20.8438 45.5312 21.625C44.8281 22.4062 43.6562 22.4844 42.875 21.8594L41 20.2188V34.75C41 38.2656 38.1875 41 34.75 41H12.25C8.73438 41 6 38.2656 6 34.75V20.2188L4.04688 21.8594C3.26562 22.4844 2.09375 22.4062 1.39062 21.625C0.765625 20.8438 0.84375 19.6719 1.625 18.9688L22.25 1.46875C22.9531 0.921875 23.9688 0.921875 24.6719 1.46875ZM9.75 34.75C9.75 36.1562 10.8438 37.25 12.25 37.25H16V25.375C16 23.6562 17.3281 22.25 19.125 22.25H27.875C29.5938 22.25 31 23.6562 31 25.375V37.25H34.75C36.0781 37.25 37.25 36.1562 37.25 34.75V17.0156L23.5 5.375L9.75 17.0156V34.75ZM19.75 37.25H27.25V26H19.75V37.25Z' fill='%233284F9'/%3E%3C/svg%3E%0A");
											}
										}

										&.option-minder-dan-10-dozen {
											&::before {
												background-image: url("data:image/svg+xml,%3Csvg width='35' height='36' viewBox='0 0 35 36' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26.7188 4.25H19.375V10.5H30.3125L27.8906 5.03125C27.6562 4.5625 27.1875 4.25 26.7188 4.25ZM31.25 14.25H3.75V30.5C3.75 31.2031 4.29688 31.75 5 31.75H30C30.625 31.75 31.25 31.2031 31.25 30.5V14.25ZM4.60938 10.5H15.625V4.25H8.20312C7.73438 4.25 7.26562 4.5625 7.10938 5.03125L4.60938 10.5ZM26.7188 0.5C28.6719 0.5 30.4688 1.67188 31.25 3.46875L34.5312 10.8125C34.8438 11.4375 35 12.1406 35 12.8438V30.5C35 33.3125 32.7344 35.5 30 35.5H5C2.1875 35.5 0 33.3125 0 30.5V12.8438C0 12.1406 0.078125 11.4375 0.390625 10.8125L3.67188 3.46875C4.45312 1.67188 6.25 0.5 8.20312 0.5H26.7188Z' fill='%233284F9'/%3E%3C/svg%3E%0A");
											}
										}
									}

									input + label {
										border: 2px solid #FFFFFF;
									}

									input:checked + label {
										border: 2px solid #000083;
									}
								}
							}
						}
					}
				}
			}


			.row-button {
				float: right;
			}

			.row-button-previous {
				float: left;
			}

			.page {
				width: 100%;
			}
		}
	}
}