/* BLOCK TYPE 30 - form */
/* BLOCK TYPE 30 - form */
/* BLOCK TYPE 30 - form */

.block_type_30 {
	position: relative;
	background-color: lightgray;
	color: var(--txt-light);

	display: flex;
	align-items: center;
	padding: 5vw 0;
	column-gap: 5vw;
}
.block_type_30::before {
	content: '30';
	background-color: #84de02;
}

/* THEME */
.block_type_30.theme_licht {
	background-color: var(--bg-light);
	color: var(--txt-light);
}
.block_type_30.theme_donker {
	background-color: var(--bg-dark);
	color: var(--txt-dark);
}

.block_type_30 .map {
	position: relative;
	width: 50%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.block_type_30 .map > div {
	position: absolute;
	width: 100%;
	height: 140%;
	top: 0;
	left: 0;
}

.block_type_30 .map .mapbox-marker {
	width: 4vw;
	height: 4vw;
	cursor: pointer;
  }

  .block_type_30 .map .mapbox-marker::after {
	content: '';
	position: absolute;
	height: 100%;
	width:100%;
	bottom: 50%;
	background-image: url('/assets/img/location_marker.svg');
	background-size: cover;
}

.block_type_30 .content {
	width: 50%;
	padding-right: 5vw;
}
.block_type_30 .content .number {
	font-size: var(--txt-subheader);
	font-weight: 300;
}
.block_type_30 .content .heading {
	font-size: var(--txt-header-3);
	font-weight: 700;
	line-height: 1.3em;
}
.block_type_30 .content .form {
	font-family: Open Sans, Helvetica, Arial, sans serif;
}
.block_type_30 .content .form .form_row{
	position: relative;
	width: 100%;
	padding-top: 1.2vw;
}
.block_type_30 .content button {
	padding: 1em;
	font-size: var(--txt-standard);
	font-family: Gilroy, Open Sans, Helvetica, Arial, sans serif;
	margin-top: 1em;
	background-color: var(--clr-magenta-100);
	border: 1px solid var(--clr-magenta-100);
	color: white;
	cursor: pointer;
	transition: all 150ms linear;
}
.block_type_30 .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-magenta-100);
	color: var(--clr-magenta-100);
}
.block_type_30 .content label {
	position: absolute;
	top: 0;
	left: 0;
	font-size: var(--txt-small);
	font-family: Gilroy, Open Sans, Helvetica, Arial, sans serif;
	color: var(--txt-gray);
	padding-left: 1vw;
	pointer-events: none;

	transform: translateY(2vw);
	transition: 0.25s;
}
.block_type_30 .content input {
	width: 100%;
	padding: 0.5vw 1vw;
	font-size: var(--txt-standard);
	background-color: transparent;
	border: 0px;
	border-bottom: 1px solid var(--clr-border);
	margin-bottom: 1vw;
}
.block_type_30 .content textarea {
	width: 100%;
	height: 8em;
	padding: 1vw;
	font-size: var(--txt-standard);
	font-family: inherit;
	background-color: transparent;
	border: 0px;
	border-bottom: 1px solid var(--clr-border);
	margin-bottom: 1vw;
	resize: vertical;
}
/* Hide Recaptcha block */
.block_type_30 .content form div:has(+ .g-recaptcha) {
	display: none;
}

/* Input behaviour */
.block_type_30 .content label:has(+ input:focus),
.block_type_30 .content label:has(+ textarea:focus),
.block_type_30 .content label:has(+ input:not(:placeholder-shown)),
.block_type_30 .content label:has(+ textarea:not(:placeholder-shown)){
	transform: translateY(0);
}

.block_type_30 .content .invalid_submit input:invalid{
	border-bottom: 1px solid var(--clr-red-100);
	background-color: var(--clr-red-10);
}

/* COLOR */
.block_type_30.theme_donker .content input,
.block_type_30.theme_donker .content textarea {
	color: var(--txt-dark);
}
.block_type_30.theme_licht .content input,
.block_type_30.theme_licht .content textarea {
	color: var(--txt-light);
}
.block_type_30.color_magenta .content button {
	background-color: var(--clr-magenta-100);
	border: 1px solid var(--clr-magenta-100);
}
.block_type_30.color_magenta .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-magenta-100);
	color: var(--clr-magenta-100);
}
.block_type_30.color_blauw .content button {
	background-color: var(--clr-blue-100);
	border: 1px solid var(--clr-blue-100);
}
.block_type_30.color_blauw .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-blue-100);
	color: var(--clr-blue-100);
}
.block_type_30.color_groen .content button {
	background-color: var(--clr-green-100);
	border: 1px solid var(--clr-green-100);
}
.block_type_30.color_groen .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-green-100);
	color: var(--clr-green-100);
}
.block_type_30.color_oranje .content button {
	background-color: var(--clr-orange-100);
	border: 1px solid var(--clr-orange-100);
}
.block_type_30.color_oranje .content button:hover {
	background-color: transparent;
	border: 1px solid var(--clr-orange-100);
	color: var(--clr-orange-100);
}

@media (max-width: 1000px) {
	.block_type_30 {
		flex-wrap: wrap;
		gap: 10vw;
		padding: 10vw 5vw;
	}

	.block_type_30 .map {
		width: 100%;
		aspect-ratio: 3 / 2;
	}
	.block_type_30 .map > div {
		height: 150%;
	}
	.block_type_30 .content {
		width: 100%;
		padding: 0;
	}
	.block_type_30 .map .mapbox-marker {
		width: 12vw;
		height: 12vw;
	  }

	.block_type_30 .content .form .form_row{
		padding-top: 1.2em;
	}

	.block_type_30 .content input,
	.block_type_30 .content textarea{
		margin-bottom: 1em;
		padding: 0.4em 0.8em;
	}
	.block_type_30 .content label {	
		transform: translateY(2em);
		padding-left: 0.8em;
	}
}