:root {
	--background-color: #ffffff;
	--button-background-color: #ffffff;
	--button-border-color-hover: #5679d1;
	--button-border-color: #203d84;
	--error-border-color: #ff4949;
	--error-background-color: #ff8989;
	--progress-background-color: #eeeeee;
	--progress-fill-background-color: #5679d1;
	--progress-text-color: #ffffff;
	--shadow: #32326415 0px 5px 4px 0px;
}

.form_builder {
	display: flex;
	justify-content: center;
	user-select: none;

	.element {
		padding: 30px;
		border-radius: 11px;
		background-color: var(--background-color);
		text-align: center;
		width: 400px;
		box-shadow: var(--shadow);
	}

	.choice_button {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 40%;
		aspect-ratio: 1 / 1;
		border: 4px solid var(--button-border-color);
		border-radius: 9px;
		background-color: var(--button-background-color);
		overflow: hidden;
		padding: 0;
		margin: 5px;
		cursor: pointer;
		transition: 200ms;
	}

	.choice_button:hover {
		border-color: var(--button-border-color-hover);
		transition: 200ms;
	}

	.button_container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
	}

	img,
	p {
		pointer-events: none;
	}

	img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.icon_title {
		font-size: 14px;
		margin: 10px 0 10px 0;
		font-weight: bold;
		padding: 0 10px 0 10px;
		color: #000;
	}

	.form_title {
		margin: 0 0 10px 0;
		font-size: 24px;
		text-align: center;
		font-weight: bold;
		color: #000;
	}

	.form_subtitle {
		margin: 0 10px 10px 10px;
		font-size: 20px;
		text-align: center;
		line-height: 30px;
		color: #000;
	}

	.form_title_subtitle {
		margin: 0px 10px 30px 10px;
		font-size: 19px;
		text-align: center;
		line-height: 20px;
		color: #000;
	}

	.form_error {
		border: solid 2px var(--error-border-color);
		border-radius: 9px;
		background-color: var(--error-background-color);
		text-align: center;
		margin-top: 6px;
		padding: 5px 10px 5px 10px;
		margin-top: 20px;
		font-size: 16px;
	}

	.form_info {
		flex-direction: column;
		gap: 20px;

		input {
			padding: 6px;
			border: 0;
			border-radius: 9px;
			font-size: 14px;
			border: solid 4px var(--button-border-color);
			transition: 200ms;
			color: #000;
		}

		input:hover {
			border-color: var(--button-border-color-hover);
			transition: 200ms;
		}
	}

	.submit_button,
	.map_button {
		border: 0;
		border-radius: 9px;
		background-color: var(--button-border-color);
		transition: 200ms;
		padding: 5px 0 5px 0;
		height: 40px;
		font-size: 16px;
		color: #fff;
		cursor: pointer;
	}

	.map_button {
		width: 100%;
		margin-top: 40px;
	}

	.map,
	.map_info {
		width: 100%;
		margin: 0 auto;

		path {
			stroke: #000000;
			stroke-width: 1px;
			stroke-linecap: round;
			stroke-linejoin: round;
			stroke-opacity: 50%;
			fill: #86aae0;
		}
	}

	.map {
		g path:hover {
			fill: #86eee0;
			cursor: pointer;
		}

		g:hover path {
			fill: #86cce0;
		}
	}

	.submit_button:hover {
		background-color: var(--button-border-color-hover);
		transition: 200ms;
	}

	.progress_bar {
		background-color: var(--progress-background-color);
		width: 100%;
		height: 20px;
		margin-bottom: 20px;
		border-radius: 7px;
	}

	.progress_fill {
		background-color: var(--progress-fill-background-color);
		height: 20px;
		border-radius: 7px;
		width: 0;
		transition: width 400ms ease-in-out;

		.progress_title {
			font-size: 14px;
			color: var(--progress-text-color);
			display: flex;
			align-items: center;
			justify-content: center;
			height: inherit;
		}
	}
}