form {
	accent-color: var(--color__select);
}

#join {
	margin-top: calc(var(--space__flow) * 2);
}


fieldset {
	border: 0;
}

	fieldset legend {
		font-weight: 600;
		font-size: 1.5em;
		line-height: 1.3;
		color: var(--color__indigo);
	}
	
	.form__fieldset.error {
		outline: 2px solid red;
		outline-offset: 6px;
	}

label {
	margin-bottom: calc(var(--space__flow) / 4);
		
	font-size: 1em;
	font-weight: 500;
}

.input__wrapper {
	display: flex;
	flex-direction: column;
}

input, 
textarea {
	padding: 0.7em 1em 0.7em 1.5em;
	
	border: 2px solid var(--color__indigo);
	border-radius: 2em;
}

	.form__group.error textarea, 
	.form__group.error input {
		border-color: red;
	}

.form__group--radio, 
.form__group--checkbox {
	display: flex;
	align-items: flex-start;
	gap: 1em;
}

.form__group--radioGroup {
	--space__flow: 0.5em;
}

.form__fieldset--inputs > * {
	margin-top: var(--space__flow, 1.5em);
}

.form__group--radioGroup .input__wrapper {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 1em;
}
	
	.form__group--radioGroup label {
		line-height: 2;
	}
	
	.form__group--checkbox.error {
		outline: 2px solid red;
		outline-offset: 6px;
	}

.form__group--checkbox.form__group--tos label {
	display: inline-block;
	font-weight: 400;
	line-height: 1.5;
}

.form__group--tos label a {
	color: var(--color__green);
}

.form__group--hidden {
	display: none;
}





.form__group--checkbox {
}

	.form__group--checkbox input[type="checkbox"] {
		width: 2em;
		flex: 0 0 auto;
				
		opacity: 0;
		cursor: pointer;
	}
		
	.form__group--checkbox label {
		display: block;
		position: relative;
		line-height: 1.2;
		font-weight: 400;
		text-transform: none;
	}

	.form__group--checkbox label:before {
		cursor: pointer;
		width: 1.3em;
		height: 1.3em;
		position: absolute;
		left: -2.5em;
		top: 0em;
		
		content: "";
		border: 2px solid var(--color__indigo);
		background-color: #fff;
		border-radius: 3px;
	}
			
	.form__group--checkbox label:after {
		position: absolute;
		top: 0.2em;
		left: -2.05em;
		width: 0.4em;
		height: 0.7em;

		border: 0 solid #fff;
		border-width: 0 3px 3px 0;

		transform: rotate(45deg);
	}
		
	.form__group--checkbox input[type="checkbox"]:checked + label::after {
		content: "";
	}
		
	.form__group--checkbox input[type="checkbox"]:checked + label::before {
		background-color: var(--color__indigo);
		border-color: var(--color__indigo);
	}
		
	.form__group--checkbox input[type="checkbox"]:focus + label::before {
		outline: 1px solid var(--color__select);
		outline-offset: 3px;
	}
		
	.form__group--checkbox.error label:before {
		border-color: red;	
	}


.form__group--radioGroup  {
}

	.form__group--radioGroup input[type="radio"] {
		width: 2em;
		flex: 0 0 auto;
				
		opacity: 0;
		cursor: pointer;
	}
		
	.form__group--radioGroup label {
		display: block;
		position: relative;
		line-height: 1.2;
		font-weight: 400;
		text-transform: none;
	}

	.form__group--radioGroup label:before {
		cursor: pointer;
		width: 1.3em;
		height: 1.3em;
		position: absolute;
		left: -2.5em;
		top: 0em;
		
		content: "";
		border: 2px solid var(--color__indigo);
		background-color: #fff;
		border-radius: 50%;
	}
			
	.form__group--radioGroup label:after {
		position: absolute;
		top: 0.2em;
		left: -2.05em;
		width: 0.4em;
		height: 0.7em;

		border: 0 solid #fff;
		border-width: 0 3px 3px 0;

		transform: rotate(45deg);
	}
		
	.form__group--radioGroup input[type="radio"]:checked + label::after {
		content: "";
	}
		
	.form__group--radioGroup input[type="radio"]:checked + label::before {
		background-color: var(--color__indigo);
		border-color: var(--color__indigo);
	}
		
	.form__group--radioGroup input[type="radio"]:focus + label::before {
		outline: 1px solid var(--color__select);
		outline-offset: 3px;
	}
		
	.form__group--radioGroup.error label:before {
		border-color: red;	
	}









.wOdziviScrollWrapper  {
	margin-top: var(--space__flowLarge);
}





.form__status {
	display: none;
}

	.form__status.error {
		display: block;
		color: red;
		font-size: 0.9em; 
		font-weight: 600;
	} 

	.form__status.success {
		display: block;
		color: var(--color__green);
		font-size: 0.9em; 
		font-weight: 600;
	} 

.type14or {
	display: none;
}

.footer {
	margin-top: var(--space__flowLarge);
}

@media (min-width: 65rem) {
	#join {
		grid-column: 3 / span 5;
	}
}