/* ! [[ Form Module ]] */

/* ! All Filter forms */
.filter-form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;

	padding: 1rem;

	background-color: var(--blue-sky);
}
	.filter-form [class^="input-"] {
		margin-bottom: 0;
		flex-grow: 1;
	}
	.filter-form [class^="input-"] > * {
		width: 100%;
	}
	.filter-form .input-daterange {
		display: flex;
		column-gap: .25rem;
		align-items: center;
	}
	.filter-form .button {
		margin-top: auto;
	}




.fm-form {
	max-width: none;

	container-type: inline-size;
	container-name: form-section;
}

/* Add required indicator to inputs in Salesforce forms */
.salesforce-form [class^="input-"]:has([required]) label::after {
	content: " *";
	color: dodgerblue;
}

.cke + .salesforce-form,
.cke + .fm-grid {
	/* separate Form from its Intro */
	margin-top: 4rem;
}
.gform_fields,
.fm-grid .fm-form {
	display: grid;
	grid-column-gap: 2%;
	grid-row-gap: 16px;
	grid-template-columns: repeat(12,1fr);
	grid-template-rows: repeat(auto-fill,auto);
	width: 100%;

}
	.fm-field,
	.fm-form > * {
		grid-column: 1/-1;
		/* min-width: 0; */
	}
	.fm-form .fm-field.gfield--width-full,
	.fm-grid .fm-form .width-full,
	.fm-grid .fm-form .fm-upload {
		grid-column: span 12;
	}
	.fm-form .fm-field.gfield--width-eleven-twelfths,
	.fm-grid .fm-form .width-eleven-twelfths {
		grid-column: span 11;
	}
	.fm-form .fm-field.gfield--width-five-sixths,
	.fm-grid .fm-form .width-five-sixths {
		grid-column: span 10;
	}
	.fm-form .fm-field.gfield--width-three-quarter,
	.fm-grid .fm-form .width-three-quarter  {
		grid-column: span 9;
	}
	.fm-form .fm-field.gfield--width-two-thirds,
	.fm-grid .fm-form .width-two-thirds {
		grid-column: span 8;
	}
	.fm-form .fm-field.gfield--width-seven-twelfths,
	.fm-grid .fm-form .width-seven-twelfths {
		grid-column: span 7;
	}
	.fm-form .fm-field.gfield--width-half,
	.fm-grid .fm-form .width-half {
		grid-column: span 6;
	}
	.fm-form .fm-field.gfield--width-five-twelfths,
	.fm-grid .fm-form .width-five-twelfths {
		grid-column: span 5;
	}
	.fm-form .fm-field.gfield--width-third,
	.fm-grid .fm-form .width-one-third {
		grid-column: span 4;
	}
	.fm-form .fm-field.gfield--width-quarter,
	.fm-grid .fm-form .width-quarter {
		grid-column: span 3;
	}
	.fm-form .fm-field.gfield--width-one-sixth,
	.fm-grid .fm-form .width-one-sixth {
		grid-column: span 2;
	}
	.fm-form .fm-field.gfield--width-one-twelfth,
	.fm-grid .fm-form .width-one-twelfth {
		grid-column: span 1;
	}

		.fm-grid .fm-form .fm-submit {
			grid-column: span 3;
		}


	.fm-form .fm-field textarea {
		width:100%
	}
	.fm-form .fm-field textarea.x-small {
		height: 2rem;
	}
	.fm-form .fm-field textarea.small {
		height: 4rem;
	}
	.fm-form .fm-field textarea.medium {
		height: 8rem;
	}
	.fm-form .fm-field textarea.large {
		height: 12rem;
	}

	.fm-form fieldset.fm-field {
		margin: 0;
		padding: 0;
		border: 0;
	}
		.fm-form fieldset.fm-field input {
			margin-right: .25rem;
		}
		.fm-form fieldset.fm-field label {
			display: inline-block;
			font-weight: 400;
		}


	.fm-form .gsection {
/* 		margin-top: 2rem;
		border-bottom: 2px solid var(--blue-light);
		padding: 0 1rem .25rem 0; */
	}
	.fm-form .gsection_title {
		margin-bottom: .5rem;
	}
	.fm-form h3 {
		margin-top: 2rem;
		border-bottom: 2px solid var(--blue-light);
		padding: 0 .25rem 1rem 0;
	}
	.fm-form h4 {
		margin-top: 1rem;
		margin-bottom: 0;
	}
	.fm-form h5 {
		margin-bottom: 0;
	}
	.fm-form h5:not(:first-child) {
		margin-top: 2rem;
	}



	/* .fm-checkbox-group & .fm-radio with columns: */
	.fm-checkbox-group[class*="columns-"],
	.fm-radio[class*="columns-"] {
		display: flex;
		flex-wrap: wrap;
		align-content: flex-start;
		--col-gap: 2rem;
		column-gap: var(--col-gap);
		row-gap: .5rem;
	}
	.fm-checkbox-group[class*="columns-"] > label,
	.fm-checkbox-group[class*="columns-"] > .input-info,
	.fm-checkbox-group[class*="columns-"] > .error-message,
	.fm-radio[class*="columns-"] > label,
	.fm-radio[class*="columns-"] > .input-info,
	.fm-radio[class*="columns-"] > .error-message {
		width: 100%;
	}
	.fm-checkbox-group[class*="columns-"] .input-check-option,
	.fm-radio[class*="columns-"] .input-radio-option {
		flex-grow: 1;
		width: 100%;
	}
	.fm-checkbox-group.columns-0 .input-check-option, .fm-radio.columns-0 .input-radio-option { max-width: 100%; }
	.fm-checkbox-group.columns-1 .input-check-option, .fm-radio.columns-1 .input-radio-option { max-width: calc((100% - var(--col-gap) * 0) / 1); }
	.fm-checkbox-group.columns-2 .input-check-option, .fm-radio.columns-2 .input-radio-option { max-width: calc((100% - var(--col-gap) * 1) / 2); }
	.fm-checkbox-group.columns-3 .input-check-option, .fm-radio.columns-3 .input-radio-option { max-width: calc((100% - var(--col-gap) * 2) / 3); }
	.fm-checkbox-group.columns-4 .input-check-option, .fm-radio.columns-4 .input-radio-option { max-width: calc((100% - var(--col-gap) * 3) / 4); }
	.fm-checkbox-group.columns-5 .input-check-option, .fm-radio.columns-5 .input-radio-option { max-width: calc((100% - var(--col-gap) * 4) / 5); }
	.fm-checkbox-group.columns-6 .input-check-option, .fm-radio.columns-6 .input-radio-option { max-width: calc((100% - var(--col-gap) * 5) / 6); min-width: 100px;}


	/* Plaintext input */
	.fm-plaintext .input-plaintext-label {
		margin-bottom: 0;
		font-weight: bold;
	}
	.fm-plaintext.fm-agreement .input-plaintext-value {
		max-width: var(--container-inner);
		font-size: 0.875rem;
		white-space: pre-wrap;
	}

	/*
		If .fm-interrupter control is displayed (visible), set all the controls after it invisible.
		Typically .fm-interrupter could be a message control that shows that form can't be submitted based on previous choices set.
	*/
	.fm-form .fm-interrupter[style*="display: block;"] ~ * {
		display: none !important;
	}

/* .forms-section {
	container-type: inline-size;
	container-name: form-controls;
}
	@container (width < 700px) {

	} */

	@container (width < 600px) {
		.fm-form .fm-field:not(.gfield--width-full),
		.fm-grid .fm-form [class^="input-"]:not(.gfield--width-full),
		.fm-grid .fm-form .fm-submit {
			grid-column: 1/-1;
		}
	}

