/* Fluent Forms Global Styling (Raj)
-------------------------------------------------------------- */
:root {
  --global-palette10: #75c7ce;

  --global-nos-form-default: #08385542;
  --global-nos-form-required: var(--global-palette6);
  --global-nos-form-invalid: #aa0000;
  --global-nos-form-valid: var(--global-palette2);
}

div.fluentform.ff-default .ff-t-container {
  margin-bottom: 0px;
}

.fluentform h5 {
  text-transform: uppercase;
}

form input {
  accent-color: var(--global-palette2);
}

form input.ff_numeric {
  text-align: right;
}

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;
  margin-bottom: 1.5rem;
}

.fluentform.ff-default .ff-el-group.add-background-colour {
  background: #e1e1e1;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.fluentform.ff-default .ff-t-container.add-column-colour .ff-t-cell {
  background: #e1e1e1;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.fluentform.ff-default .ff-el-form-control {
  padding: 1em;
}

.fluentform.ff-default .ff-el-input--label {
  margin-left: 10px;
  margin-bottom: 0;
  font-size: var(--global-kb-font-size-xsm);
}

.fluentform.ff-default .ff_list_inline .ff-el-input--label,
.fluentform.ff-default .ff-el-group .ff-el-input--label {
  margin-left: 0;
  margin-bottom: 10px;
  font-size: var(--global-kb-font-size-sm);
}

.fluentform.ff-default select.ff-el-form-control:not([size]):not([multiple]) {
  height: auto;
}

.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;
}

.fluentform.ff-default .ff-name-address-wrapper>.ff-el-input--label {
  margin-left: 0;
  margin-bottom: 5px;
}

.fluentform.ff-default .ff-name-address-wrapper>.ff-el-input--label label {
  font-size: var(--global-kb-font-size-sm);
  font-weight: 700;
  text-transform: uppercase;
}

/* 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-nos-form-required);
}

.fluentform.ff-default .ff-el-form-control:focus {
  border-color: var(--global-nos-form-default);
}

/* Non-Required Fields */
.fluentform.ff-default .ff-el-input--content input {
  border-left: 4px solid var(--global-nos-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-nos-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-nos-form-valid);
}

.fluentform.ff-default .ff-el-is-error .ff-el-form-control {
  border-color: var(--global-nos-form-invalid);
}

.fluentform.ff-default .text-danger {
  color: var(--global-nos-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;
}

/* Buttons */
div.fluentform.ff-default button.ff-btn {
  transition: all ease-in-out 0.25s;
  background-color: var(--global-palette1);
}

button.ff-btn:hover {
  background-color: var(--global-palette2) !important;
}

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

.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;
}

.fluentform ul.ff-step-titles li:before {
  width: auto;
}

.fluentform.ff-default .ff-step-titles {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
}

@media (min-width: 1025px) {
  .fluentform.ff-default .ff-step-titles {
    justify-content: center;
  }
}



/* 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);
  }
}

.fluentform.ff-default .ff-el-group.sh-group,
.fluentform.ff-default .ff-t-container.sh-group {
  background-color: #fff;
  padding: var(--global-xs-spacing);
  margin-bottom: 0;
}

.fluentform.ff-default .ff-el-group.sh-group.sh-group-end,
.fluentform.ff-default .ff-t-container.sh-group.sh-group-end {
  margin-bottom: var(--global-lg-spacing);
}

/* Containers */
.nos-ff-container-max-600 {
  max-width: 600px;
  margin: 0 auto;
}

/* STAR Additional Info field */
.star-additional-info-request {
  border: 2px solid var(--global-palette2);
  border-radius: 10px;
  padding: var(--global-sm-spacing);
}

.ff-default .star-additional-info-request .ff-el-input--label label {
  font-weight: 700;
}

.fluentform.ff-default .ff-repeater-container>div.ff-el-input--label {
  margin-left: 0;
  margin-bottom: 0.5rem;
}

.fluentform.ff-default .ff-repeater-container>div.ff-el-input--label label {
  font-weight: 700;
}

.fluentform.ff-default .star-choose-icon-radio .ff_el_checkable_photo_holders {
  display: flex;
  justify-content: space-evenly;
  gap: 1rem;
}

.fluentform.ff-default .star-choose-icon-radio .ff_el_checkable_photo_holders .ff-el-form-check-label span {
  font-size: 1.4rem;
  font-weight: 800;
}

.fluentform.ff-default .star-choose-icon-radio .ff_el_checkable_photo_holders .ff-el-image-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fluentform .ff-el-group.ff_list_buttons.star-choose-icon-radio .ff-el-form-check.ff-el-image-holder {
  border: none;
}

.fluentform .ff-el-group.ff_list_buttons.star-choose-icon-radio .ff-el-form-check.ff-el-image-holder:hover {
  border: 1px solid var(--global-palette2);
}

/* Fix width of postcode field for when Country is disabled */
@media (min-width: 768px) {
  .ff-default input.ff-el-form-control[id$="_address_1_zip_"] {
    width: clamp(300px, 100%, 581.5px);
  }
}

/* Enlarge checkbox on checkable grid */
.ff-checkable-grids input[type="checkbox"] {
  width: 1.4rem;
  height: 1.4rem;
}

/* Sucess message */
.fluentform .ff-message-success {
  border-left: 4px solid var(--global-palette11);
}