.webform {
	// customize form here
	--input-text-color: #000;
	--input-border-color: #000;
	--input-border-width: 1px;
	--input-border-radius: 0;
	--input-padding: 0.4em 0.6em;
	--input-outline: #808080 solid;
	--input-background-color: transparent;
	--input-font-family: inherit;
	--input-font-size: 1.6rem;
	--input-placeholder-color: #808080;
	--input-placeholder-font-style: inherit;
	--input-height: 2.3em;
	--label-padding-bottom: 0.2em;
	// submit btn
	--submit-btn-background-color: #000;
	--submit-btn-text-color: #fff;
	--submit-btn-border-color: #000;
	--submit-btn-border-width: 1px;
	--submit-btn-border-radius: 0;
	--submit-btn-font-family: inherit;
	--submit-btn-min-width: 13.4rem; // must be defined for mobile devices
	--submit-btn-min-height: 4.8rem; // must be defined for mobile devices
	--submit-btn-hover-text-color: #000;
	--submit-btn-hover-background-color: #fff;
	--submit-btn-hover-border-color: #000;
	// radio-buttons & check-boxes
	--radio-check-padding-bottom: 0.5em;
	// help element
	--help-background-color: #000;
	--help-color: #fff;
	--help-border-color: #000;
	--help-background-color-active: #fff;
	--help-border-color-active: #000;
	--help-color-active: #000;
	// paddings
	--padding-bottom: 1.5em;

	box-sizing: border-box;
	* {
		box-sizing: border-box;
	}

	.form-item {
		select,
		textarea,
		input[type="time"],
		input[type="date"],
		input[type="number"],
		input[type="text"],
		input[type="email"],
		input[type="tel"] {
			background-color: var(--input-background-color);
			border-color: var(--input-border-color);
			border-width: var(--input-border-width);
			color: var(--input-text-color);
			font-family: var(--input-font-family);
			font-size: var(--input-font-size);
			padding: var(--input-padding);
			border-radius: var(--input-border-radius);
			appearance: none;
			width: 100%;
			box-shadow: none;
			border-style: solid;

			&::placeholder {
				color: var(--input-placeholder-color);
				font-style: var(--input-placeholder-font-style);
				transition: opacity 0.25s ease;
			}

			&:focus {
				outline: var(--input-outline);
				&::placeholder {
					opacity: 0.5;
				}
			}
		}

		select,
		input[type="time"],
		input[type="date"],
		input[type="number"],
		input[type="text"],
		input[type="email"],
		input[type="tel"] {
			height: var(--input-height);
			line-height: 1.1;
		}

		input[type="time"],
		input[type="date"] {
			display: block;
			min-width: 15rem;
			line-height: 1.5em;
		}

		label {
			padding-bottom: var(--label-padding-bottom);
			padding-right: 0.6em;
			display: inline-block;
		}

		select {
			cursor: pointer;
			padding-right: 1.8rem;
			min-width: 12rem;
			// background-image: url(../images/icons/chevron-down.svg);
			background-repeat: no-repeat;
			background-position: calc(100% - 0.6rem) center;
			background-size: 1em;
		}
	}

	.form-actions {
		input[type="submit"] {
			background-color: var(--submit-btn-background-color);
			color: var(--submit-btn-text-color);
			border-width: var(--submit-btn-border-width);
			border-color: var(--submit-btn-border-color);
			font-family: var(--submit-btn-font-family);
			cursor: pointer;
			appearance: none;
			min-width: var(--submit-btn-min-width);
			min-height: var(--submit-btn-min-height);
			width: auto;
			outline: none;
			border-radius: var(--submit-btn-border-radius);
			box-shadow: none;

			&:focus,
			&:active,
			&:hover {
				color: var(--submit-btn-hover-text-color);
				background-color: var(--submit-btn-hover-background-color);
				border-color: var(--submit-btn-hover-border-color);
			}
		}
	}

	.checkboxes--wrapper {
		.form-item--checkbox {
			padding-bottom: var(--radio-check-padding-bottom);
		}
	}

	.webform-element-help {
		background-color: var(--help-background-color);
		border-color: var(--help-border-color);
		color: var(--help-color);
		font-weight: 400;
		line-height: 1.2rem;
		font-size: 1rem;
		width: 15px;
		height: 15px;
		position: relative;
		top: -2px;

		&:hover {
			background: var(--help-background-color-active);
			border-color: var(--help-border-color-active);
			color: var(--help-color-active);
		}
	}

	.form-text,
	.form-textarea {
		width: 100%;
	}

	.form-textarea {
		resize: none;
	}

	.form-number::-webkit-inner-spin-button {
		appearance: none;
	}

	.webform-element-description {
		padding-top: 0.5em;
		font-style: italic;
		font-size: 1.4rem;
	}

	.form-required {
		&:after {
			content: "*";
		}
	}

	.fieldset-legend {
		font-weight: 700;
		padding-bottom: 1em;
		display: block;
	}

	.radios--wrapper,
	.checkboxes--wrapper,
	.form-item--webform-time,
	.form-item--webform-markup,
	.form-item--checkbox,
	.form-item--date,
	.form-item--number,
	.form-item--select,
	.form-item--email,
	.form-item--tel,
	.form-item--textarea,
	.form-item--textfield {
		padding-bottom: var(--padding-bottom);
	}

	.form-item--datetime {
		.form-item--date {
			// padding-bottom: 0;
			margin-right: 1rem;
		}
	}

	.fieldgroup {
		margin: 0 !important;
	}

	.form-actions,
	.webform-actions {
		padding-top: 2rem;
		text-align: center;
	}

	// flexbox paddings en margins
	.webform-flexbox {
		width: 100%;
		.webform-flexbox {
			margin: 0;
			padding-bottom: 0;
		}
		.webform-flex {
			margin: 0;
			.fieldgroup {
				padding-bottom: 0;
			}
			.fieldset-wrapper {
				margin: 0 -0.5em;
			}
		}
	}
}

@media (--bp-min-medium) {
	.webform {
		.webform-flexbox {
			margin: 0 -0.5em;
			width: auto;
		}
	}
}