/***************************************
			Forms
****************************************/

.fluentform {
	--form-border-color: rgba(127 127 127 / 0.15);
	--form-border-color: oklch(from var(--wp--preset--color--text-body) l c h / 0.15);
	--form-gap: var(--space-s);
}
.fluentform form .ff-el-form-control {
	transition: all var(--global-duration);
	padding: var(--input-padding);
	background: transparent;
	border: solid 2px var(--form-border-color);
	border-radius: var(--input-radius);
    color: inherit;
    font-size: inherit;
    line-height: inherit;
}
.fluentform form .ff-el-input--label label {
    color: var(--wp--preset--color--text-body);
    text-transform: uppercase;
    font-size: var(--fontsize-xs);
    letter-spacing: 1px;
}
.fluentform form .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--primary);
    background-color: var(--wp--preset--color--bg-primary-low);
    color: inherit;
}
.fluentform form .ff-el-form-control::placeholder {
    color: inherit;
	opacity: 0.5;
}
.fluentform form .ff-el-group {
	margin-bottom: var(--form-gap);
}
.fluentform form .ff_submit_btn_wrapper {
    margin-top: var(--space-m);
	margin-bottom: 0;
}

.fluentform form .ff-t-container {
    gap: var(--form-gap);
}

.fluentform form select.ff-el-form-control:not([size]):not([multiple]) {
    height: unset !important;
}
.fluentform form select.ff-el-form-control:not([size]):not([multiple]) option {
    padding: 0.1rem;
    color: black;
}

.fluentform form .ff-el-group.ff_list_buttons .ff-el-form-check {
    margin: 0;
}
.fluentform form .ff-el-group.ff_list_buttons .ff-el-form-check label > span {
    font-size: 0.9em;
    line-height: 1.5;
    padding: var(--input-padding);
    color: var(--wp--preset--color--text-body);
    background-color: transparent;
    border-color: var(--form-border-color) !important;
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:first-child label>span {
    border-radius: var(--input-radius) 0 0 var(--input-radius);
}
.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check:last-child label>span {
    border-radius: 0 var(--input-radius) var(--input-radius) 0;
}
.fluentform form .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover {
    background-color: var(--wp--preset--color--primary);
    color: white;
}
.fluentform form .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span {
    background-color: var(--wp--preset--color--primary);
    color: var(--color-on-primary);
    border-color: var(--form-border-color);
    box-shadow: none;
}

.fluentform form .ff-btn.ff_upload_btn {
	background-color: var(--wp--preset--color--bg-primary-low);
	color: var(--wp--preset--color--text-body);
	border: solid 2px currentColor;
	display: block;
	text-align: center;
	width: 100%;
    font-size: var(--fontsize-s);
    border-radius: var(--input-radius);
}
.fluentform form .ff-btn.ff_upload_btn:hover {
	background-color: var(--color-bg-button-hover);
	color: var(--color-text-button-hover);
	border-color: transparent;
}
.fluentform form .ff-el-input--label.ff-el-is-required.asterisk-right label:after {
    color: var(--wp--preset--color--primary);
}