/* Fluent Forms Global Styling (Raj)
-------------------------------------------------------------- */

:root {
	--global-pfh-form-default: #08385542;
	--global-pfh-form-required: #c3116d75;
	--global-pfh-form-invalid: #ff0000;
	--global-pfh-form-valid: #005500;

}

.fluentform.ff-default {
    padding: 2rem;
    background-color: color-mix(in srgb, var(--global-palette7) 30%, var(--global-palette9) 70% );
    border-radius: 20px;
    box-shadow: 5px 5px 5px #ccc;
    margin-bottom: 3rem;
}
form input {
    accent-color: var(--global-palette6);
}
form.frm-fluent-form button {
	padding-left: 2rem;
	padding-right: 2rem;
}
body form.frm-fluent-form {
	margin-bottom: 0;
}
.fluentform.ff-default .ff-column-container.add-background-colour {
	background: #e1e1e1;
	padding: 1rem;
}
.fluentform.ff-default .ff-el-form-control {
	padding: 1em;
}
.fluentform.ff-default .ff-el-input--label {
	margin-bottom: 15px;
}
.fluentform.ff-default select.ff-el-form-control:not([size]):not([multiple]) {
	height: auto;
}
.fluentform.ff-default .ff-t-container {
	border-bottom: 1px solid #ccc;
}
.fluentform.ff-default .ff-name-address-wrapper .ff-t-container:not(:last-child) {
	border-bottom: none;
}
.fluentform.ff-default .ff-t-container,
.fluentform.ff-default .ff-el-group {
	margin-bottom: 30px;
}
.fluentform.ff-default .fluent-address .ff-t-container {
	margin-bottom: unset;
}
.fluentform.ff-default .ff-el-group.ff_submit_btn_wrapper {
	margin-bottom: 0;
}
.fluentform.ff-default .fluent-address .ff-t-container:last-child {
	margin-bottom: 30px;
}
/* Required Fields */
.fluentform.ff-default .ff-el-input--label.ff-el-is-required + .ff-el-input--content input,
.fluentform.ff-default .ff-el-input--label.ff-el-is-required + .ff-el-input--content textarea {
	border-left: 4px solid var(--global-pfh-form-required);
}
.fluentform.ff-default .ff-el-form-control:focus {
	border-color: var(--global-pfh-form-default);
}
/* Non-Required Fields */
.fluentform.ff-default .ff-el-input--content input {
	border-left: 4px solid var(--global-pfh-form-default);
}
/* Invalid Fields */
.fluentform.ff-default .ff-el-input--label.ff-el-is-required + .ff-el-input--content input:invalid,
.fluentform.ff-default .ff-el-input--content input:invalid {
	border-left: 4px solid var(--global-pfh-form-invalid);
}
/* Valid Fields */
.fluentform.ff-default .ff-el-input--label.ff-el-is-required + .ff-el-input--content input:valid:not(:placeholder-shown),
.fluentform.ff-default .ff-el-input--content input:valid:not(:placeholder-shown),
.fluentform.ff-default .ff-el-input--label.ff-el-is-required + .ff-el-input--content textarea:valid:not(:placeholder-shown),
.fluentform.ff-default .ff-el-input--content textarea:valid:not(:placeholder-shown) {
	border-left: 4px solid var(--global-pfh-form-valid);
}
.fluentform.ff-default .ff-el-is-error .ff-el-form-control {
	border-color: var(--global-pfh-form-invalid);
}
.fluentform.ff-default .text-danger {
	color: var(--global-pfh-form-invalid);
}

.fluentform.ff-default .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder span {
	margin-left: 0;
}
/* Selected items */
.fluentform.ff-default .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder.ff_item_selected {
	border-color: var(--global-palette1);
}
.fluentform.ff-default .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label>span {
	background:  var(--global-palette1);
}

/* Checkboxes */
.fluentform.ff-default span.ff_tc_checkbox {
	padding-right: 0.35rem;
}
@media only screen and (min-width: 641px) {
	.fluentform.ff-default .ff-el-group.ff_list_3col .ff-el-form-check {
		margin: 0 0 10px;
	}
}
.fluentform.ff-default .ff-el-form-check-label .ff-el-form-check-input {
	width: 1.4rem;
	height: 1.4rem;
}

/* Forms with Steps */
.fluentform.ff-default form button.ff-btn-save-progress {
	border: none;
	background: var(--global-palette6);
	margin-bottom: 2rem;
}

.fluentform.ff-default .ff-step-titles li.ff_active,
.fluentform.ff-default .ff-step-titles li.ff_completed {
	color: var(--global-palette1);
}
.fluentform.ff-default .ff-step-titles li.ff_active:before,
.fluentform.ff-default .ff-step-titles li.ff_completed:before {
	background: var(--global-palette1);
}
.fluentform.ff-default .ff-step-titles li.ff_active:after, 
.fluentform.ff-default .ff-step-titles li.ff_completed:after {
	background: var(--global-palette1);
}

.fluentform.ff-default .ff-step-titles li {
	font-size: 0.75rem;
	line-height: 1rem;
}

/* Checkable grids */
@media only screen and (min-width: 767px) {
	.fluentform.ff-default table.ff_flexible_table.ff-checkable-grids {
		border: 2px solid var(--global-palette9);
	}
}