.form {
	text-align: left;
	accent-color: var(--color__turkiz);
}

.form label {
	display: block;
	padding-left: 1.2rem;
}

.form input[type='number'] {
    -moz-appearance:textfield;
}

.form input::-webkit-outer-spin-button,
.form input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.form input:not([type="checkbox"]), 
.form input:not([type="radio"]),
.form textarea,
.form__selectWrapper {
	width: 100%;
	padding: 0.5em 1em; 
	flex: 0 0 auto;
	
	border-radius: 2em;
}


.form select {
	width: 100%;
	padding: 0.7em 1em;

	border-radius: 2em;	
}
	
	.theme--white .form input:not([type="checkbox"]), 
	.theme--white .form input:not([type="radio"]),
	.theme--white .form textarea,
	.theme--white .form select,
	.theme--white .form__selectWrapper {
		border: 1px solid var(--color__turkiz);
		color: var(--color__black);
	}


	.theme--turkiz .form input:not([type="checkbox"]), 
	.theme--turkiz .form input:not([type="radio"]),
	.theme--turkiz .form textarea,
	.theme--turkiz .form__selectWrapper {
		border: 1px solid var(--color__white);
		color: var(--color__black);
	}

.form__group--checkboxes .input__wrapper > div {
	display: flex;
	align-items: center;
	gap: 0.5em;
}

.form select { 
	background-color: #fff;
	width: 100%;
}

.form input[type="checkbox"], 
.form input[type="radio"] {
	width: 1.3em;
    height: 1.3em;
}

.form textarea {
	min-height: 6em;
	max-height: 20em;
}


.form fieldset {
	border: 0;
}

.form .input__size--small {
	width: 8em;
}

.form fieldset + fieldset {
	margin-top: 2em;
}

.form fieldset legend {
	font-size: var(--size1);
	font-weight: var(--fontBold);
}

.form fieldset.error legend {
	color: red;
}
	.theme--green form fieldset.error legend {
		color: var(--color__turkiz);
	}

.form__group--tos .input__wrapper {
	display: flex;
	gap: 0.5em;
}

.form__group--tos label {
	font-size: 0.8em;
}

.form__group--tos .input__wrapper input {
	margin-top: 0.3em;
}

.form__group--checkbox label {
	flex: 1 1 auto;
	
	text-transform: initial;
	font-size: 0.9em;
}

	.form__group--checkbox label a {
		text-decoration: underline;
	}
	
	.form__group--checkbox input {
		transform: scale(1.5);
		transform-origin: left center;
	}

.form__group--radio {
	display: flex;
	align-items: center;
}

.form__group--radio label {
	flex: 1 1 auto;
	
	text-transform: initial;
	font-size: 0.8em;
}

.form__group.error label {
	color: red;
}

	.theme--green .form__group.error label {
		color: var(--color__turkiz);
	}

.form__hint {
	font-size: 0.8em;
	padding-left: 1.2rem;
}

.form__hint--required {
	font-size: 0.8em;
	text-align: right;
	color: var(--color__gray);
}

.enterNumber {
    display: block;
    font-size: 0.7em;
    margin-bottom: 0.5em;
    margin-top: -0.5em;
}


.form__group--required .input__wrapper > label:after {
	content: "*";
	color: var(--color__gray);
}

.form__input--select {
	position: relative;
	display: inline-block;
}
	
	.form__input--select:focus-within select {
		outline-offset: 5px;
		outline: 2px solid var(--color__turkiz);
	}

	.form__input--select .icon {
		position: absolute;
		right: 1em;
		top: 50%;
		font-size: 0.7em;
		transform: translateY(-50%) rotate(90deg);
	}

.form__status {
	display: none;
	font-size: 0.9em;
}

	.form__status.error {
		display: block;
		color: red;
		font-weight: bold; 
	}
	
	.theme--green .form__status.error {
		color: red;
		
	}
	
	.form__status.success {
		display: block;
		padding: 0.5em 1em;
		
		background-color: var(--color__turkiz);
		color: #fff;
		font-weight: bold;
	}


@media (min-width: 65em) {
	#cmsEvent > .form__row > .form__column {
		flex: 1;
	}
	
	.form__row {
		display: flex;
		gap: 2em;
		align-items: flex-start;
	}
	
	.form__hint {
		min-width: 5em;
	}
}