:root {

	--global-ff-form-default: #08385542;
	--global-ff-form-required: #c3116d75;
	--global-ff-form-invalid: var(--global-palette5);
	--global-ff-form-valid: var(--global-palette6);
    --ncs-field-border-width: 8px;

}

.fluentform.ff-default .ff-el-input--label {
	margin-bottom: 15px; /* Add space below labels */
}

.fluentform .ff-el-group.ff_submit_btn_wrapper {
    margin-bottom: 0;
}

/* 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: var(--ncs-field-border-width) solid var(--global-ff-form-required);
}
.fluentform.ff-default .ff-el-form-control:focus {
	border-color: var(--global-ff-form-default);
}
/* Non-Required Fields */
.fluentform.ff-default .ff-el-input--content input {
	border-left: var(--ncs-field-border-width) solid var(--global-ff-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: var(--ncs-field-border-width) solid var(--global-ff-form-invalid);
}

/* Check Buttons */
div.fluentform .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label>span {
    background-color: var(--global-palette1);
    border-color: var(--global-palette1);
}


/* GET IN TOUCH FORM ID 4 */
#fluentform_4 .ncs-ff-radio-with-icon.ff-el-group.ff_list_buttons .ff-el-form-check label>span {
    white-space: unset;
    background: transparent;
    font-size: var(--global-kb-font-size-sm);
    line-height: 1.3;
}
#fluentform_4 .ncs-ff-radio-with-icon .ff_el_checkable_photo_holders {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0;
    gap:20px;
}
/* Adjust grid layout for 960px and below */
@media (max-width: 960px) {
    #fluentform_4 .ncs-ff-radio-with-icon .ff_el_checkable_photo_holders {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 520px) {
    #fluentform_4 .ncs-ff-radio-with-icon .ff_el_checkable_photo_holders {
        grid-template-columns: 1fr;
    }
}

/* Image in option */
#fluentform_4 .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder {
    border: 2px solid var(--global-palette7);
    border-radius: 20px;
    background-color: var(--global-palette9);
    flex-basis: clamp(250px, 22%, 450%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 5px;
    margin: 15px;
}
#fluentform_4 .ncs-ff-radio-with-icon label.ff-el-image-input-src {
    width: 70px;
    height: 70px;
}

/* Label in option */
#fluentform_4 .ff-el-group.ff_list_buttons.ncs-ff-radio-with-icon .ff-el-form-check label>span {
    color: var(--global-palette3);
    font-size: var(--global-kb-font-size-xsm);
}
#fluentform_4 .ncs-ff-radio-with-icon label .ncs-option-title {
    display: block;
    font-weight: bold;
    font-size: var(--global-kb-font-size-sm);
}
#fluentform_4 .ff-el-group.ff_list_buttons.ncs-ff-radio-with-icon .ff-el-form-check label:focus-within span {
    background-color: transparent;
}
#fluentform_4 .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label>span {
    box-shadow: none;
}
/* Selected */
#fluentform_4 .ff-el-group.ff_list_buttons .ff-el-form-check.ff-el-image-holder.ff_item_selected {
    box-shadow: 0px 0px 9px 5px #e1e1e1;
    background-color: var(--global-palette8);
} 

/* Each form section */
#fluentform_4 .ncs-get-in-touch-panel {
    max-width: 960px;
    margin: 0 auto;
    background-color: var(--global-palette8);
    padding: var(--global-sm-spacing) var(--global-sm-spacing) 0;
}
@media (max-width: 768px) {
    #fluentform_4 .ncs-get-in-touch-panel {
        padding: var(--global-sm-spacing) var(--global-sm-spacing);
        margin-bottom: calc( var(--global-sm-spacing) * -1);
    }
}