/*
 * style-fluentforms.css
 */



/*
 * Normalize the Image Select Options for quizzes.
 */
.fluentform .ff_el_checkable_photo_holders {
	column-gap: 0.5em !important;
	display: flex !important;
	flex-wrap: wrap;
	margin-bottom: 2em !important;
	margin-top: 0.5em !important;
}
.fluentform .ff_el_checkable_photo_holders > div.ff-el-image-holder {
	background-color: var( --white );
	border: 0.25em solid transparent !important;
	box-sizing: content-box;
	flex-basis: 22%;
	height: auto;
}
.fluentform .ff_el_checkable_photo_holders > div.ff-el-image-holder:focus,
.fluentform .ff_el_checkable_photo_holders > div.ff-el-image-holder:hover {
	border: 0.25em solid var( --blue ) !important;
}
.fluentform .ff_el_checkable_photo_holders > div.ff-el-image-holder > label:first-of-type {
	background-size: contain;
	width: auto;
}
.fluentform .ff_el_checkable_photo_holders > div.ff-el-image-holder > label.ff-el-form-check-label > span {
	text-wrap: auto;
}
.fluentform .ff_el_checkable_photo_holders > div.ff-el-image-holder.ff_item_selected > label.ff-el-form-check-label > span {
	background: var( --blue-dark );
	color: var( --white );
}

/*
 * Fix the layout for the inline mailing list signup on mobile.
 */
.fluentform:has(> .maillist) {
	width: 100%;
}
.fluentform  .maillist-container {
	column-gap: 0.25em !important;
	row-gap: 0.25em !important;
	vertical-align: center;
}
.fluentform  .maillist-container > div.ff-t-cell > div.ff-el-group {
	margin: 0;
}
.fluentform  .maillist-container > div.ff-t-cell:has(> div.ff-el-group.maillist-email) {
	flex-basis: unset !important;
}
.fluentform  .maillist-container > div.ff-t-cell:has(> div.ff-el-group.maillist-submit) {
	justify-content: center !important;
}
.fluentform  .maillist-container > div.ff-t-cell > div.ff-el-group.maillist-submit > button {
	margin: 0;
	width: 100%;
}