/* FYI Branding CSS for Syntaq Forms - Updated to Match Brand Guide */
:root {
  /* Hero Colours */
  --automation-blue: #214d74;
  --spreadsheet-green: #4ccf96;
  --collaboration-green: #0a5b4f;
  --cloud-white: #ffffff;

  /* Secondary Colours */
  --onboard-violet: #9897ff;
  --workflow-mint: #bff99d;

  /* Typography */
  --font-primary: "Segoe UI", "Montserrat", Arial, sans-serif;
  --font-secondary: "Segoe UI", "Pennypacker", sans-serif;

  /* Gradient */
  --gradient-primary: linear-gradient(
    45deg,
    var(--automation-blue),
    var(--spreadsheet-green)
  );
  --gradient-hover: linear-gradient(
    45deg,
    var(--spreadsheet-green),
    var(--automation-blue)
  );
}

body {
  font-size: 15px !important;
  font-family: var(--font-primary) !important;
  background-color: #ffffff !important;
  /* https://fyiapp.atlassian.net/browse/FD-46813 */
}

#syntaq-content {
  padding-left: 1px;
  /* https://fyiapp.atlassian.net/browse/FD-46813 */
  margin-top: 25px !important;
  margin-bottom: 25px !important;
  min-height: unset;
}

@media (max-width: 767.98px) {
  html,
  body {
    font-size: 15px !important;
    font-family: var(--font-primary) !important;
  }
}

.formio-dialog.formio-dialog-theme-default .formio-dialog-content {
  animation: formio-dialog-flyin 0.5s;
  background: #fff;
  border-radius: 5px;
  font-family: var(--font-primary) !important;
  font-size: 15px !important;
  line-height: 1.5em;
  margin: 0 auto;
  max-width: 100%;
  padding: 1em;
  position: relative;
  width: 65%;
}

.list-inline > li.list-inline-item {
  padding-right: 0;
}

#group-container-common .formcomponent,
#group-panel-sfalayout .formcomponent,
#group-sfafyidynamicfieldtypes .formcomponent,
#group-container-sfadvanced .formcomponent {
  float: none !important;
  width: 100% !important;
  padding: 0.375rem !important;
}

.formcomponent > i {
  margin-top: 0 !important;
}

/* Universal Syntaq Component Styling */
.syntaq-component {
  font-family: var(--font-primary);
  background-color: var(--cloud-white);
  color: var(--automation-blue);
}

.syntaq-component-heading {
  margin-top: 1rem;
}

/* https://fyiapp.atlassian.net/browse/FD-47176 */
.syntaq-component-heading h3 {
  color: #284664;
}

.component-btn-group {
  background-color: white;
}

h3 {
  font-family: var(--font-primary) !important;
}

label {
  font-family: var(--font-primary) !important;
  font-weight: 600 !important;
}

.row > * {
  flex-shrink: unset;
}

.row > .col-md-1 {
  flex: 1;
}

.row > .col-md-9 {
  flex: 9;
}

.row > .col-md-2 {
  flex: 2;
}

.fa.fa-remove {
  cursor: pointer;
}

.input-group-text:has(.fa.fa-search) {
  padding: 0.375rem 0.75rem;
}

/* https://fyiapp.atlassian.net/browse/FD-47319 */
.input-group-addon > .input-group-text {
  padding: 0.3rem 0.75rem;
}

/* Panel Styling */
.syntaq-component-sfapanel {
  background-color: var(--cloud-white);
  border: 1px solid var(--collaboration-green);
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}

/* https://fyiapp.atlassian.net/browse/FD-46813 */
div .syntaq-component-sfapanel:not(:first-child),
div .syntaq-component-summarytable:not(:first-child) {
  margin-top: 25px;
}

/* Section Header */
.syntaq-component-sfapanel > .panel-heading,
.card-header {
  background-color: var(--automation-blue) !important;
  color: #ffffff;
  border-color: var(--automation-blue);
}

#kt_toolbar {
  min-height: unset;
  padding: 0.45rem 1.25rem;
}

.syntaq-component-section > .card-header {
  background-color: var(--automation-blue) !important;
  color: #ffffff;
  border-color: var(--automation-blue);
}

.accordion.panel-group
  > .form-builder-panel
  > .card-header.panel-heading.form-builder-group-header {
  min-height: auto !important;
  padding: 0 !important;
}

.card-body.panel-body.drag-container
  > .syntaq-component-sfahtmlelement
  > .drag-and-drop-alert.alert.alert-info {
  background-color: #d1ecf1;
}

/* .card-title.panel-title {
  color: #575d62 !important;
} */

.card-title {
  color: #ffffff !important;
  font-weight: bold !important;
  margin: 0;
}

/* FYI Added */

.form-check.checkbox > .form-check-label {
  font-weight: 400 !important;
  font-size: 15px !important;
  display: flex;
  align-items: center !important;
}

.card-header.bg-undefined.panel-heading {
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.form-control {
  border-width: 1px !important;
  border-color: rgb(204, 204, 204) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #284664 !important;
}

.form-control:focus {
  box-shadow: 0 0 0 1px #2684ff !important;
  border-color: #2684ff !important;
}

.form-control:hover {
  border-color: #44bb87 !important;
}

.choices > .form-control {
  padding: 0.375rem 0.75rem;
}

.card-header .btn.btn-primary.dropdown-toggle:after {
  color: #ffffff88;
}

.card-header .btn.btn-primary i {
  color: #ffffff88;
}

.card-header .btn-primary {
  background-color: var(--automation-blue) !important;
  color: #ffffff88 !important;
  font-size: 15px !important;
}

.card-header .btn-primary:hover {
  background-color: var(--automation-blue) !important;
}

.card-header .btn.btn-primary:hover:not(.btn-active) {
  background-color: var(--automation-blue) !important;
}

main > .card > .card-header > .card-title:before {
  content: "" !important;
  display: inline-block !important;
  width: 40px !important;
  height: 40px !important;
  background-image: url("https://go.fyi.app/img/fyi_logo_white.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  margin-right: 20px !important;
  vertical-align: middle !important;
}

main > .card > .card-header > .card-title:after {
  content: "- Form Template Builder" !important;
  margin-left: 5px !important;
}

.bg-info {
  background-color: var(--automation-blue) !important;
  border-radius: 4px;
  color: white;
  text-align: center;
}

/* Buttons */

.card-header .btn-check:checked + .card-header .btn.btn-primary,
.card-header .btn-check:active + .card-header .btn.btn-primary,
.card-header .btn.btn-primary:focus:not(.btn-active),
.card-header .btn.btn-primary:hover:not(.btn-active),
.card-header .btn.btn-primary:active:not(.btn-active),
.card-header .btn.btn-primary.active,
.card-header .btn.btn-primary.show,
.card-header .show > .btn.btn-primary,
.card-header .dropdown-item.active,
.card-header .dropdown-item:active {
  background-color: var(--automation-blue) !important;
}

.btn-check:checked + .btn.btn-primary,
.btn-check:active + .btn.btn-primary,
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary.active,
.btn.btn-primary.show,
.show > .btn.btn-primary {
  background-color: #47be7d !important;
}

.btn.btn-success {
  background-color: #4ccf96 !important;
  border: none;
}

.btn.btn-outline-success {
  background-color: #4ccf96 !important;
}

body
  > div.formio-dialog.formio-dialog-theme-default.component-settings
  > div.formio-dialog-content
  > div
  > div
  > div:nth-child(2)
  > div:nth-child(2)
  > div:nth-child(2)
  > button.btn.btn-default {
  background-color: #4ccf96 !important;
  color: white !important;
}

.btn {
  padding: 0.575rem 1.2rem !important;
  font-weight: 400 !important;
  font-size: 15px !important;
}

.btn.btn-danger {
  background-color: #dc3545 !important;
}

.btn-primary {
  background: var(--spreadsheet-green) !important;
  background-color: var(--spreadsheet-green) !important;
  border: none;
  color: #ffffff !important;
  padding: 0.75rem 1.5rem;
  font-size: 15px !important;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

#btn-save-close,
#btn-save {
  font-weight: 600 !important;
}

.form-check-input:checked {
  background-color: var(--spreadsheet-green) !important;
  border-color: var(--spreadsheet-green) !important;
}

.form-check-input:checked[type="checkbox"][label="Check Box"][name="data[checkBox]"] {
  background-size: 60% 60%;
}

.fas.fa-sync {
  color: gray !important;
}

.form-check.radio,
.form-check.checkbox {
  margin-bottom: 0.5em;
  padding-left: 0;
}

/* https://fyiapp.atlassian.net/browse/FD-47245 */
.form-check.radio label {
  font-weight: 400 !important;
}

.form-check.radio > .form-check-label > input,
.form-check.checkbox > .form-check-label > input {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  position: static;
}

/* #formio .form-check.radio {
  margin-bottom: 0.5em;
}

.formarea .form-check.radio > .form-check-label > span {
  margin-left: 0.5rem;
}

#formio .form-check.radio > .form-check-label > span {
  margin-left: 0.5rem;
} */

.btn-secondary {
  border: none;
  color: #ffffff !important;
  background-color: #6c757d !important;
  border: none !important;
  padding: 0.75rem 1.5rem;
  font-size: 14px !important;
  border-radius: 4px;
  font-family: var(--font-primary);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-primary:hover {
  background: #47be7d !important;
  background-color: #47be7d !important;
  color: #ffffff !important;
}

.btn.btn-primary:hover:not(.btn-active) {
  background: #47be7d !important;
  background-color: #47be7d !important;
  color: #ffffff !important;
}

.btn-primary.disabled {
  background-color: #ffffff;
  border-color: #9a9a9a;
  cursor: not-allowed;
}

.breadcrumb span.wizard-page-label.label-primary {
  background-color: var(--automation-blue) !important;
}

.breadcrumb span.wizard-page-label.label-info {
  background-color: #ffffff !important;
  color: #808080 !important;
  border-radius: 0.375rem !important;
  border: 1px solid #dee2e6;
}

nav[aria-label="navigation"]
  > ul.pagination
  .page-item.active
  > span.page-link {
  background-color: var(--automation-blue) !important;
  border-radius: 0.375rem !important;
  padding: 1em !important;
  font-size: 1em;
  font-weight: 700;
  line-height: 1;
}

nav[aria-label="navigation"]
  > ul.pagination
  .page-item:not(.active)
  > .page-link {
  background-color: #ffffff !important;
  color: #808080 !important;
  border-radius: 0.375rem !important;
  padding: 1em !important;
  font-size: 1em;
  font-weight: 700;
  border: 1px solid #dee2e6;
  line-height: 1;
}

/* Labels */
.syntaq-component-label {
  color: #ffffff;
  font-weight: bold;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.control-label {
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #284664 !important;
  margin-bottom: 0.3rem !important;
}

/* Input Fields */
.syntaq-component-sfatextfield,
.syntaq-component-sfanumber,
.syntaq-component-sfaemail,
.syntaq-component-sfaselect,
.syntaq-component-sfadatetime,
.syntaq-component-person,
.syntaq-component-sfaemailfield,
.syntaq-component-sfafirstnamefield,
.syntaq-component-sfalastnamefield,
.syntaq-component-sfanamefield,
.syntaq-component-sfacheckbox,
.syntaq-component-radiogroup,
.syntaq-component-summarytable,
.syntaq-component-sfatextarea {
  font-size: 15px;
  font-family: var(--font-primary);
  border-radius: 4px;
  background-color: var(--cloud-white);
  color: var(--automation-blue);
  margin-bottom: 1rem;
  box-sizing: border-box;
}

.form-check-input {
  margin-top: 0 !important;
  width: 1.35rem;
  height: 1.35rem;
}

/* https://fyiapp.atlassian.net/browse/FD-47245 */
.syntaq-component-sfacheckbox > .form-check-label {
  display: flex;
  font-size: 15px !important;
  align-items: center !important;
}

/* Input Focus State */
.syntaq-component-sfatextfield:focus,
.syntaq-component-sfanumber:focus,
.syntaq-component-sfaemail:focus,
.syntaq-component-sfadatetime:focus,
.syntaq-component-sfaselect:focus,
.syntaq-component-person:focus,
.syntaq-component-sfaemailfield:focus,
.syntaq-component-sfafirstnamefield:focus,
.syntaq-component-sfalastnamefield:focus,
.syntaq-component-sfanamefield:focus,
.syntaq-component-sfatextarea:focus {
  box-shadow: 0px 0px 4px var(--spreadsheet-green);
  outline: none;
}

/* Notes and Helper Text */
.syntaq-component-helpnotes {
  font-size: 0.875rem;
  color: var(--collaboration-green);
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

/* Divider */
.syntaq-component-divider {
  border-top: 2px solid var(--automation-blue);
  margin: 1.5rem 0;
}

/* Adjusted Components for Branding */
.syntaq-component-summarytable th,
.syntaq-component-summarytable td {
  border: 1px solid var(--collaboration-green);
  padding: 0.75rem;
  text-align: left;
}

.syntaq-component-sfasignature {
  padding: 1rem;
  background-color: var(--cloud-white);
}

/* New hide logic: https://fyiapp.atlassian.net/browse/FD-46854 */
.formio-component-offsetslider,
.formio-component-important,
.formio-component-clearOnHide,
.formio-component-errorLabel,
.formio-component-customClass,
.formio-component-DoNotLoadFromRecord,
.formio-component-importantdisplay,
.formio-component-refreshOn,
.formio-component-validateOn,
.formio-component-validate\.customMessage,
.formio-component-fontcolour,
.formio-component-backcolour,
.formio-component-fontfamily,
.formio-component-reference,
.formio-component-editor,
.formio-component-webcam,
.formio-component-fileMinSize,
.formio-component-fileMaxSize {
  display: none !important;
}

.formio-component-defaultValue {
  width: 100%;
}

img.kt-header__brand-logo-default {
  display: none;
}

.p-4:has(> img.kt-header__brand-logo-default) {
  display: none;
}

.dropdown-language {
  display: none !important;
}

#header_notification_bar {
  display: none;
}

#kt_quick_user_toggle {
  display: none;
}

.choices__list--dropdown.is-active {
  z-index: 1000;
}

/* https://fyiapp.atlassian.net/browse/FD-47117 */
#formio {
  max-width: 800px;
  margin: 0 auto;
}

.form-check-label {
  font-weight: 400 !important;
  font-size: 15px !important;
}

/* https://fyiapp.atlassian.net/browse/FD-47321 */
.syntaq-component-sfadatetime .form-control.form-control.input {
  border-radius: 6px !important;
}