/*!*************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/globals.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************/
@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "B Yekan";
  src: url("/fonts/B-Yekan.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "NASKHD SHX";
  src: url("/fonts/NASKHD.ttf?v=2") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --green: #06763b;
  --ink: #172c21;
  --muted-ink: #53675b;
  --line: #b9cec0;
  --soft: #eaf3ed;
  --theme-primary: #06763b;
  --theme-primary-hover: #066b37;
  --theme-sidebar: #183a2a;
  --theme-background: #edf2ef;
  --theme-surface: #fff;
  --theme-font-family: Tahoma, Arial, sans-serif;
  --theme-radius: 8px;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  font-family: var(--theme-font-family);
  color: var(--ink);
  background: var(--theme-background);
}
button,
input,
select,
textarea {
  font: inherit;
}
.feature-field { display: grid; gap: 8px; }
.feature-field-control { display: grid; grid-template-columns: 1fr 44px; direction: ltr; }
.feature-field-control > input { min-width: 0; border-radius: 8px 0 0 8px !important; direction: ltr; text-align: left; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.feature-field-control > button { border: 1px solid #b9d2c2; border-left: 0; border-radius: 0 8px 8px 0; background: #eef7f1; color: var(--green); font-size: 24px; cursor: pointer; }
.feature-map-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 20px; background: #173b2b99; backdrop-filter: blur(3px); }
.feature-map-modal { width: min(1050px, 96vw); height: min(760px, 92vh); display: grid; grid-template-rows: auto auto 1fr auto; overflow: hidden; border-radius: 16px; background: #fff; box-shadow: 0 28px 90px #102b1e66; direction: rtl; }
.feature-map-modal > header, .feature-map-modal > footer, .feature-map-toolbar { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-color: #dce7e0; }
.feature-map-modal > header { justify-content: space-between; border-bottom: 1px solid #dce7e0; }
.feature-map-modal > header > div { display: grid; gap: 3px; }
.feature-map-modal > header small, .feature-map-modal > footer small { color: #718078; }
.feature-map-modal > header > button { width: 34px; height: 34px; border: 0; border-radius: 7px; background: #eef3ef; font-size: 22px; cursor: pointer; }
.feature-map-toolbar { flex-wrap: wrap; background: #f5f8f6; }
.feature-map-toolbar label { display: flex; align-items: center; gap: 7px; }
.feature-map-toolbar button, .feature-map-toolbar select, .feature-map-modal > footer button, .feature-map-transfer-actions .feature-file-import, .feature-map-transfer-actions select { min-height: 36px; padding: 7px 13px; border: 1px solid #bdd2c4; border-radius: 7px; background: #fff; color: #315342; cursor: pointer; }
.feature-map-toolbar .feature-file-import { display: inline-flex; justify-content: center; }
.feature-file-import > input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.feature-file-export > select { min-width: 145px; }
.feature-map-workspace { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 290px); direction: ltr; }
.feature-openlayers-map { width: 100%; min-height: 360px; direction: ltr; }
.feature-map-workspace > aside { min-width: 0; display: grid; grid-template-rows: auto auto 1fr auto; padding: 12px; border-left: 1px solid #dce7e0; background: #f8faf8; color: #24362d; direction: rtl; }
.feature-map-side-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 8px; padding: 3px; border-radius: 8px; background: #e6eee9; }
.feature-map-side-tabs button { min-height: 32px; border: 0; border-radius: 6px; background: transparent; color: #52665b; cursor: pointer; }
.feature-map-side-tabs button.active { background: #fff; color: #08783e; box-shadow: 0 1px 4px #173b2b1f; }
.feature-map-layer-list { min-height: 0; overflow: auto; }
.feature-map-layer-list > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 2px 10px; border-bottom: 1px solid #dce7e0; }
.feature-map-layer-list > label { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 9px; padding: 10px 3px; border-bottom: 1px solid #e4ece7; cursor: pointer; }
.feature-map-layer-list > label > span:last-child { display: flex; justify-content: space-between; align-items: baseline; gap: 5px; }
.feature-map-layer-list > label small { color: #718078; font-size: 10px; }
.feature-map-layer-list > label small.feature-layer-error { color: #b42318; }
.feature-layer-swatch { width: 20px; height: 13px; border: 2px solid #475569; border-radius: 3px; background: #cbd5e1; }
.feature-layer-swatch.boundary { border-color: #dc2626; border-style: dashed; background: #dc262614; }
.feature-layer-swatch.drawing { border-color: #08783e; background: #19a35b33; }
.feature-map-workspace > aside > header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 9px; }
.feature-map-workspace > aside > header b { color: #24362d !important; }
.feature-map-workspace > aside small { color: #5f7468 !important; font-size: 11px; }
.feature-map-workspace > aside textarea { width: 100%; min-height: 0; resize: none; border: 1px solid #cad9cf; border-radius: 8px; padding: 10px; background: #fff; color: #173b2b !important; caret-color: #08783e; -webkit-text-fill-color: #173b2b; opacity: 1; direction: ltr; font: 12px/1.65 monospace; white-space: pre; }
.feature-map-workspace > aside textarea::placeholder { color: #87988e; -webkit-text-fill-color: #87988e; }
.feature-map-workspace > aside .feature-coordinate-error { padding-top: 6px; color: #b42318 !important; text-align: start; unicode-bidi: plaintext; }
.feature-map-modal > footer { justify-content: flex-start; border-top: 1px solid #dce7e0; }
.feature-map-modal > footer small { flex: 1 1 auto; margin: 0; }
.feature-map-transfer-actions, .feature-map-footer-actions { display: flex; align-items: center; gap: 8px; }
.feature-map-transfer-actions .feature-file-import { display: inline-flex; align-items: center; justify-content: center; }
.feature-map-transfer-actions .feature-file-export { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.feature-map-modal > footer .feature-file-error { color: #b42318; }
.feature-map-modal > footer .primary { border-color: var(--green); background: var(--green); color: #fff; }
@media (max-width: 900px) {
  .feature-map-backdrop { padding: 12px; }
  .feature-map-modal { width: 100%; height: calc(100dvh - 24px); max-height: none; }
  .feature-map-workspace { overflow-y: auto; grid-template-columns: 1fr; grid-template-rows: minmax(320px, 52vh) minmax(220px, auto); }
  .feature-map-workspace > aside { min-height: 220px; border-top: 1px solid #dce7e0; border-left: 0; }
  .feature-map-workspace > aside textarea { min-height: 150px; }
  .feature-map-modal > footer { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto; }
  .feature-map-modal > footer small { min-width: 0; }
}
@media (max-width: 600px) {
  .feature-map-backdrop { padding: 0; }
  .feature-map-modal { width: 100vw; height: 100dvh; border-radius: 0; }
  .feature-map-modal > header { padding: 10px 12px; }
  .feature-map-modal > header > button { width: 32px; height: 32px; }
  .feature-map-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px 12px; }
  .feature-map-toolbar label { min-width: 0; display: grid; grid-template-columns: 1fr; gap: 4px; }
  .feature-map-toolbar label:first-child { grid-column: 1 / -1; }
  .feature-map-toolbar select, .feature-map-toolbar button { width: 100%; min-width: 0; padding-inline: 8px; }
  .feature-map-workspace { grid-template-rows: minmax(260px, 46vh) minmax(230px, auto); }
  .feature-map-workspace > aside { padding: 10px; }
  .feature-map-modal > footer { grid-template-columns: 1fr; gap: 9px; padding: 10px 12px; }
  .feature-map-modal > footer small { grid-row: 1; }
  .feature-map-transfer-actions, .feature-map-footer-actions { width: 100%; }
  .feature-map-transfer-actions > *, .feature-map-footer-actions > * { flex: 1 1 0; min-width: 0; }
  .feature-map-transfer-actions .feature-file-export { min-width: 0; }
  .feature-map-transfer-actions .feature-file-export span { display: none; }
  .feature-map-transfer-actions select { width: 100%; min-width: 0; }
}
.runtime {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template: 64px 1fr/260px 1fr;
  direction: rtl;
}
.runtime.collapsed {
  grid-template-columns: 1fr;
}
.topbar {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 22px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.topbar > div {
  display: flex;
  flex-direction: column;
}
.topbar small {
  color: #829087;
}
.hamburger {
  border: 0;
  background: transparent;
  font-size: 22px;
  cursor: pointer;
}
.user {
  margin-right: auto;
}
.brand-gem {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: var(--green);
  color: white;
  font-size: 24px;
}
.brand-gem.small {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  font-size: 17px;
}
aside {
  background: var(--theme-sidebar);
  color: #fff;
  padding: 24px 14px;
  overflow: auto;
}
aside h2 {
  font-size: 14px;
  padding: 0 12px 15px;
}
nav button {
  width: 100%;
  border: 0;
  background: transparent;
  color: #d7e7dd;
  padding: 11px 13px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  text-align: right;
}
nav button:hover,
nav button.active {
  background: #2b5a42;
  color: #fff;
}
.children {
  padding-right: 14px;
}
.content {
  padding: 28px;
  overflow: auto;
}
.form-card,
.list-card {
  max-width: 1200px;
  margin: auto;
  background: var(--theme-surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--theme-radius) + 6px);
  box-shadow: 0 14px 38px #173b2824;
  overflow: hidden;
}
.form-card {
  overflow: visible;
}
.form-card > header,
.list-card > header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 22px 26px;
  border-bottom: 1px solid var(--line);
}
h1,
h2,
p {
  margin: 0;
}
.form-card header small,
.list-card header small {
  color: var(--green);
  font-weight: bold;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(1000, minmax(0, 1fr));
  gap: 0;
  padding: 18px;
}
.form-grid > div {
  min-width: 0;
  margin: 7px;
  grid-column: span var(--form-field-span, 1000);
}
@media (min-width: 801px) {
  .form-grid > div {
    grid-column: span var(--form-field-span, 1000) !important;
  }
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
  color: var(--muted-ink);
}
.required-mark {
  display: inline;
  margin-inline-start: 4px;
  color: #c62828;
  font-style: normal;
  font-weight: 800;
}
.runtime-alert-overlay {
  position: fixed;
  z-index: 20000;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  background: #092d1e73;
  backdrop-filter: blur(5px);
  font-family: inherit;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.runtime-alert-overlay.visible {
  opacity: 1;
}
.runtime-alert-dialog {
  width: min(420px, 100%);
  padding: 28px;
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  border: 1px solid #c9dfd1;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff 0%, #f4faf6 100%);
  box-shadow: 0 28px 80px #082a1c52;
  color: #183c2a;
  font-family: inherit;
  transform: translateY(12px) scale(0.97);
  transition: transform 0.18s ease;
}
.runtime-alert-overlay.visible .runtime-alert-dialog {
  transform: translateY(0) scale(1);
}
.runtime-alert-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #07904b, #056b39);
  box-shadow: 0 10px 25px #08783e38;
  color: #fff;
  font-size: 25px;
  font-weight: 900;
}
.runtime-alert-copy {
  min-width: 0;
}
.runtime-alert-copy h2 {
  margin: 2px 0 8px;
  color: #0b6c3a;
  font-size: 17px;
}
.runtime-alert-copy p {
  margin: 0;
  color: #52685b;
  font-size: 13px;
  line-height: 1.9;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.runtime-alert-dialog > button {
  grid-column: 1 / -1;
  min-height: 42px;
  border: 0;
  border-radius: 10px;
  background: var(--theme-primary);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 20px #08783e2b;
}
.runtime-alert-dialog > button:hover {
  background: var(--theme-primary-hover);
}
.runtime-alert-dialog > button:focus-visible {
  outline: 3px solid #78bd9566;
  outline-offset: 3px;
}
.runtime-alert-error .runtime-alert-dialog {
  border-color: #efc2c2;
  background: linear-gradient(145deg, #fff 0%, #fff5f5 100%);
}
.runtime-alert-error .runtime-alert-icon {
  background: linear-gradient(145deg, #d64242, #a92323);
  box-shadow: 0 10px 25px #b4231838;
}
.runtime-alert-error .runtime-alert-copy h2 { color: #a92323; }
.runtime-alert-error .runtime-alert-dialog > button { background: #b42318; }
.runtime-alert-error .runtime-alert-dialog > button:hover { background: #941d14; }
.form-grid input,
.form-grid select,
.form-grid textarea {
  min-height: 36px;
  border: 1px solid #adc9b7;
  border-radius: 8px;
  padding: 6px 9px;
  background: #fff;
  color: var(--ink);
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-grid [data-element-id][dir="rtl"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  direction: rtl;
  text-align: right;
}
.form-grid [data-element-id][dir="ltr"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  direction: ltr;
  text-align: left;
}
.form-grid [data-element-id][dir="rtl"] :is(input, textarea)::placeholder {
  direction: rtl;
  text-align: right;
}
.form-grid [data-element-id][dir="ltr"] :is(input, textarea)::placeholder {
  direction: ltr;
  text-align: left;
}
.form-grid input::placeholder,
.form-grid textarea::placeholder {
  color: #718279;
  opacity: 1;
}
.form-grid input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}
.form-grid input[type="number"]::-webkit-inner-spin-button,
.form-grid input[type="number"]::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
.form-grid input:hover,
.form-grid select:hover,
.form-grid textarea:hover {
  border-color: #82ad91;
}
.form-grid input:focus,
.form-grid select:focus,
.form-grid textarea:focus {
  border-color: var(--green);
  outline: 0;
  box-shadow: 0 0 0 3px #06763b24;
}
.form-view-excel .form-grid {
  gap: 0 !important;
  align-items: stretch;
}
.form-view-excel .form-grid > .form-data-element {
  min-height: 66px;
  margin: 0;
  padding: 0 !important;
  outline: 1px solid var(--line);
  outline-offset: -0.5px;
  background: var(--theme-surface);
}
.form-view-excel .form-grid > .form-data-element > label,
.form-view-excel .form-grid > .form-data-element > .lookup-field {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0 !important;
}
.form-view-excel .form-grid > .form-data-element > label > span:first-child:not(.runtime-input-wrap):not(.runtime-password-wrap),
.form-view-excel .form-grid > .form-data-element > .lookup-field > .lookup-label {
  min-height: 29px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 5px 7px !important;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
  color: var(--ink);
  line-height: 1.2;
}
.form-view-excel .form-grid > .form-data-element :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea, .lookup-combobox, .jalali-date-trigger) {
  width: 100%;
  min-height: 36px;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.form-view-excel .form-grid > .form-data-element textarea { resize: vertical; }
.form-view-excel .form-grid > .form-structural-element { margin: 12px 0 !important; }
.form-view-excel .form-grid > .form-structural-element[data-element-type="divider"] {
  min-height: 36px;
  margin: 0 !important;
  padding: 0 !important;
  outline: 1px solid var(--line);
  outline-offset: -0.5px;
  background: var(--soft);
}
.form-view-excel .form-grid > .form-structural-element[data-element-type="divider"] > .divider {
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  justify-content: center;
}
.form-view-excel .form-grid > .form-structural-element[data-element-type="divider"] > .divider::before,
.form-view-excel .form-grid > .form-structural-element[data-element-type="divider"] > .divider::after {
  display: none;
}
.form-grid .required-mark {
  display: none;
}
.form-grid input:required,
.form-grid select:required,
.form-grid textarea:required,
.boolean-choice[data-required="true"] > div,
.jalali-date-trigger[data-required="true"],
.files-tiny[data-required="true"][data-has-files="false"] .files-tiny-upload {
  border-color: #d9a36f;
  background: #fff9f2;
}
.form-grid .lookup-field:has(input:required) .lookup-combobox {
  border-color: #d9a36f;
  background: #fff9f2;
}
.form-grid .lookup-field:has(input:required) .lookup-input-row input {
  background: transparent;
}
.form-grid textarea {
  min-height: 100px;
}
.runtime-input-wrap { display: contents; }
.runtime-password-wrap {
  position: relative;
  display: block;
}
.form-grid .runtime-password-wrap input {
  width: 100%;
  padding-left: 44px;
}
.runtime-password-visibility {
  position: absolute;
  inset: 0 auto 0 4px;
  width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #66796e;
  cursor: pointer;
}
.runtime-password-visibility svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.lookup-field {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  font-weight: bold;
}
.lookup-combobox {
  position: relative;
  min-width: 0;
  border: 1px solid #adc9b7;
  border-radius: 8px;
  background: #fff;
}
.lookup-combobox:focus-within,
.lookup-combobox.open {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #08783e1a;
}
.lookup-input-row {
  display: flex;
  align-items: center;
  height: 34px;
  min-height: 34px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.lookup-input-row::-webkit-scrollbar {
  display: none;
}
.form-grid .lookup-input-row input {
  height: 34px;
  min-height: 34px;
  min-width: 0;
  flex: 1;
  border: 0;
  outline: 0;
  box-shadow: none;
}
.lookup-input-row > button {
  flex: 0 0 22px;
  width: 22px;
  min-width: 22px;
  align-self: stretch;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #597067;
  line-height: 1;
  cursor: pointer;
}
.lookup-chips {
  padding-inline-start: 7px;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 6px;
}
.lookup-chip {
  white-space: nowrap;
  max-width: 100%;
  padding: 4px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #e1f3e8;
  color: #08783e;
  font-size: 11px;
  font-weight: 700;
}
.lookup-chip > button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.lookup-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  max-height: 220px;
  padding: 5px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid #cad9d0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 12px 30px #173b2826;
}
.lookup-options.lookup-options-portal {
  position: fixed;
  z-index: 10000;
  right: auto;
}
.lookup-options.lookup-options-portal.compact {
  max-height: 160px;
  padding: 3px;
  gap: 1px;
  border-radius: 5px;
  direction: rtl;
  font-size: 10px;
  text-align: right;
}
.lookup-options.lookup-options-portal.compact > button,
.lookup-options.lookup-options-portal.compact > span {
  min-height: 24px;
  padding: 4px 6px;
  border-radius: 4px;
  line-height: 1.2;
  text-align: right;
}
.lookup-options > button,
.lookup-options > span {
  padding: 9px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #263a2f;
  font: inherit;
  text-align: start;
}
.lookup-options > button {
  cursor: pointer;
}
.lookup-options > button:hover,
.lookup-options > button:focus-visible {
  background: #edf7f1;
  color: var(--green);
  outline: 0;
}
.embedded-runtime-page {
  min-width: 0;
}
.embedded-runtime-page > .form-card,
.embedded-runtime-page > .list-card,
.embedded-runtime-page > .runtime-tabs {
  margin: 0;
  box-shadow: none;
}
.form-card footer {
  display: flex;
  align-items: center;
  padding: 18px 26px;
  border-top: 1px solid var(--line);
}
.form-card footer button,
.list-card header button,
.login-shell form > button {
  border: 0;
  border-radius: 8px;
  background: var(--green);
  color: #fff;
  padding: 11px 24px;
  font-weight: bold;
}
.form-card footer span {
  margin-right: auto;
  color: #87958c;
  font-size: 11px;
}
.form-card footer button.danger {
  background: #b42318;
}
.divider {
  grid-column: 1/-1;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
  color: var(--green);
  font-weight: bold;
}
.table-array {
  grid-column: 1/-1;
}
.elements-table {
  grid-column: 1 / -1;
  min-width: 0;
}
.elements-table .table-array-heading {
  min-height: 28px;
}
.elements-table-grid {
  display: grid;
  grid-template-columns: repeat(var(--elements-table-columns), minmax(130px, 1fr));
  min-width: calc(var(--elements-table-columns) * 130px);
}
.elements-table-responsive-cell {
  min-width: 0;
  border-inline-end: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.elements-table-cell-title {
  min-height: 34px;
  padding: 7px;
  display: grid;
  place-items: center;
  background: var(--soft);
  color: #41584b;
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}
.elements-table-cell-input {
  padding: 7px;
}
.elements-table-cell-control {
  min-width: 0;
}
.elements-table-cell-control > label > span:first-child:not(.runtime-input-wrap):not(.runtime-password-wrap),
.elements-table-cell-control > .lookup-field > .lookup-label {
  display: none;
}
.elements-table-cell-control input,
.elements-table-cell-control select,
.elements-table-cell-control textarea,
.elements-table-cell-control .lookup-combobox {
  width: 100%;
  min-width: 0;
}
@media (max-width: 1024px) {
  .elements-table {
    --compact-table-control-height: 28px;
    padding: 4px;
  }
  .elements-table > .table-array-heading {
    min-height: 0;
    margin-bottom: 3px;
  }
  .elements-table > .table-scroll {
    overflow: visible;
  }
  .elements-table-grid {
    margin-top: 4px;
    padding: 4px;
    grid-template-columns: repeat(var(--elements-table-tablet-columns), minmax(0, 1fr));
    gap: 3px 5px;
    min-width: 0;
    border: 1px solid #cbded1;
    border-radius: 5px;
    background: #fff;
  }
  .elements-table-responsive-cell {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0;
    border: 0;
  }
  .elements-table-cell-title {
    min-height: 0;
    margin: 0 0 2px;
    padding: 0 2px;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    background: transparent;
    color: #53685a;
    font-size: 8px;
    font-weight: 750;
    line-height: 1;
    text-align: right;
  }
  .elements-table-cell-input {
    width: 100%;
    min-width: 0;
    padding: 0;
  }
  .elements-table-cell-control,
  .elements-table-cell-control > label,
  .elements-table-cell-control > .lookup-field {
    width: 100%;
    min-width: 0;
  }
  .elements-table-cell-control > label,
  .elements-table-cell-control > .lookup-field {
    gap: 0;
  }
  .elements-table-cell-input input,
  .elements-table-cell-input select,
  .elements-table-cell-input textarea,
  .elements-table-cell-input .lookup-combobox {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--compact-table-control-height);
    min-height: var(--compact-table-control-height);
    padding: 2px 5px;
    border-radius: 4px !important;
    font-size: 9px;
  }
  .elements-table-cell-input .lookup-combobox {
    padding: 0;
  }
  .elements-table-cell-input .lookup-input-row {
    height: calc(var(--compact-table-control-height) - 2px);
    min-height: calc(var(--compact-table-control-height) - 2px);
  }
  .elements-table-cell-input .lookup-input-row input {
    height: calc(var(--compact-table-control-height) - 2px);
    min-height: 0;
  }
}
@media (max-width: 700px) {
  .elements-table-grid {
    grid-template-columns: repeat(var(--elements-table-mobile-columns), minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .elements-table-grid {
    grid-template-columns: 1fr;
  }
}
.table-array > label {
  margin-bottom: 8px;
}
.list-card.compact {
  box-shadow: none;
  border-radius: 9px;
}
.list-card.compact > header {
  display: none;
}
.list-card > header {
  justify-content: space-between;
}
.table-scroll {
  overflow: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
th,
td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
th {
  background: var(--soft);
  color: #41584b;
  font-weight: 800;
}
.empty,
.splash {
  min-height: 240px;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 12px;
  color: #75857b;
}
.gateway-request-overlay {
  position: fixed;
  z-index: 10000;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .5);
  cursor: wait;
}
.gateway-loading-icon {
  position: relative;
  width: 84px;
  height: 84px;
  margin-inline: auto;
  display: grid;
  place-items: center;
  padding: 10px;
}
.gateway-loading-icon::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 3px solid #cfe3d5;
  border-top-color: #08783e;
  border-right-color: #08783e;
  border-radius: 50%;
  animation: gateway-loading-spin .85s linear infinite;
}
.gateway-loading-icon img {
  width: 58px;
  height: 58px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(8, 120, 62, .16));
}
@keyframes gateway-loading-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .gateway-loading-icon::before { animation-duration: 1.8s; }
}
.error {
  color: #a82d2d;
}
.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top, #d8e7de, #eff4f1 55%);
}
.login-shell form {
  width: min(420px, 100%);
  background: #fff;
  padding: 36px;
  border-radius: 18px;
  box-shadow: 0 24px 70px #173b2822;
  display: flex;
  flex-direction: column;
  gap: 16px;
  text-align: right;
}
.login-shell form > .brand-gem {
  margin: auto;
}
.login-shell label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
}
.login-shell input {
  height: 44px;
  border: 1px solid #cbdad1;
  border-radius: 8px;
  padding: 8px;
}
.login-shell .password-input-wrap {
  position: relative;
  display: block;
}
.login-shell .password-input-wrap input {
  width: 100%;
  padding-left: 44px;
}
.login-shell .password-visibility {
  position: absolute;
  inset: 0 auto 0 4px;
  width: 40px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #66796e;
  cursor: pointer;
}
.login-shell .password-visibility svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}
.login-shell .reset-help {
  margin: 0;
  color: #66796e;
  font-size: 12px;
  line-height: 1.8;
}
.login-shell .reset-success {
  margin: 0;
  color: var(--green);
  font-size: 12px;
  line-height: 1.8;
}
.login-shell form > .reset-mode-button {
  padding: 4px;
  background: transparent;
  color: var(--green);
  cursor: pointer;
}
.navid-login-shell {
  --navid-navy: #1a2433;
  --navid-navy-deep: #141c27;
  --navid-panel: #1c2735;
  --navid-panel-edge: #243244;
  --navid-fg: #f4f7fb;
  --navid-muted: #8ea0b5;
  --navid-label: #c5d2e0;
  --navid-accent: #ee8a2d;
  --navid-accent-hover: #f59b42;
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  height: 100dvh;
  min-height: 100dvh;
  overflow: hidden;
  padding: 0;
  background-color: var(--navid-navy-deep);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--navid-fg);
  font-family: "Vazirmatn", Tahoma, sans-serif;
}
.navid-login-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(26, 36, 51, .45);
}
.navid-login-shell form {
  position: relative;
  z-index: 3;
  flex: 0 0 420px;
  width: 420px;
  height: 100dvh;
  padding: 32px 36px;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--navid-panel), var(--navid-navy-deep));
  box-shadow: none;
  color: var(--navid-fg);
  gap: 16px;
  justify-content: center;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--navid-panel-edge) transparent;
}
.navid-login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 4px;
  text-align: center;
}
.navid-login-header .program-logo {
  width: 92px;
  height: 72px;
  margin-bottom: 12px;
  object-fit: contain;
}
.navid-login-header h1 {
  margin: 0;
  color: var(--navid-fg);
  font-size: 1.4rem;
  font-weight: 700;
}
.navid-login-header p {
  margin: 8px 0 0;
  color: var(--navid-muted);
  font-size: .9rem;
}
.navid-login-shell label {
  gap: 8px;
  color: var(--navid-label);
  font-weight: 500;
  font-size: .9rem;
}
.navid-login-shell input {
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 0 16px;
  background: rgba(255, 255, 255, .06);
  color: var(--navid-fg);
  font-size: 1rem;
  caret-color: var(--navid-accent);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.navid-login-shell input::placeholder {
  color: #6a7a8a;
  opacity: 1;
}
.navid-login-shell input:focus {
  border-color: var(--navid-accent);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(238, 138, 45, .18);
}
.navid-login-shell .password-visibility {
  color: var(--navid-muted);
}
.navid-login-shell .captcha-field > div {
  grid-template-columns: 1fr 44px !important;
  gap: 8px !important;
}
.navid-login-shell .captcha-field > div > span {
  height: 48px !important;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px !important;
  background: var(--navid-panel-edge) !important;
}
.navid-login-shell .captcha-field > div > span img {
  height: 48px !important;
  opacity: .9;
}
.navid-login-shell .captcha-field > div > button {
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 12px !important;
  background: var(--navid-panel-edge) !important;
  color: var(--navid-accent) !important;
}
.navid-login-shell form > button:not(.reset-mode-button) {
  border: 0;
  min-height: 48px;
  border-radius: 12px;
  background: linear-gradient(270deg, #d9741b, var(--navid-accent));
  box-shadow: 0 8px 20px rgba(238, 138, 45, .35);
  color: var(--navid-fg);
  padding: 10px 16px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
}
.navid-login-shell form > button:not(.reset-mode-button):hover {
  background: linear-gradient(270deg, var(--navid-accent), var(--navid-accent-hover));
}
.navid-login-shell form > .reset-mode-button {
  border: 0;
  background: none;
  color: var(--navid-muted);
  font-size: .9rem;
}
.navid-login-shell .signup-actions {
  display: none;
}
.navid-brand-stage {
  position: relative;
  z-index: 2;
  flex: 1;
  height: 100dvh;
  min-width: 0;
  color: #fff;
  direction: ltr;
  pointer-events: none;
}
.navid-brand-copy {
  position: absolute;
  inset: 0;
  text-align: center;
}
.navid-brand-copy b {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font: 800 clamp(4.5rem, 9vw, 9rem)/1 Arial, sans-serif;
  letter-spacing: .14em;
  text-shadow: 0 4px 10px #000;
}
.navid-brand-slogan {
  position: absolute;
  bottom: 20px;
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(48%, 620px);
  transform: translateX(-50%);
}
.navid-brand-slogan strong {
  color: var(--navid-accent);
  font: 500 clamp(1.25rem, 2vw, 2rem)/1.4 "Vazirmatn", sans-serif;
  text-shadow: 0 4px 10px #000;
}
.navid-brand-slogan > i {
  width: 80px;
  height: 3px;
  margin-top: 16px;
  border-radius: 99px;
  background: var(--navid-accent);
}
.navid-brand-slogan span {
  margin-top: 4px;
  padding: 10px 0;
  color: var(--navid-label);
  direction: rtl;
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  text-shadow: 0 4px 10px #000;
}
.navid-brand-features {
  position: absolute;
  right: 0;
  bottom: 0;
  left: auto;
  display: flex;
  justify-content: flex-start;
  gap: 48px;
  padding: 20px;
  direction: rtl;
}
.navid-brand-features > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}
.navid-brand-features i {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  font: normal 22px/1 Arial, sans-serif;
}
.navid-brand-features b { font-size: .9rem; }
.navid-brand-features span { color: var(--navid-muted); font-size: .75rem; }
@media (max-width: 1279px) {
  .navid-login-shell {
    display: grid;
    place-items: center;
    padding: 24px;
    background-color: var(--navid-navy-deep);
    background-image: linear-gradient(180deg, var(--navid-panel), var(--navid-navy-deep)) !important;
  }
  .navid-login-shell::before { display: none; }
  .navid-login-shell form {
    width: min(380px, 100%);
    height: auto;
    max-height: calc(100dvh - 48px);
    flex-basis: auto;
    padding: 24px 0;
    background: transparent;
  }
  .navid-brand-stage { display: none; }
}
@media (max-height: 760px) and (min-width: 1280px) {
  .navid-login-shell form { padding-block: 20px; gap: 10px; }
  .navid-login-header .program-logo { width: 72px; height: 54px; margin-bottom: 6px; }
  .navid-login-header p { margin-top: 4px; }
  .navid-brand-slogan { bottom: 12px; }
}
.signup-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.signup-actions span {
  grid-column: 1/-1;
  color: #75857b;
  font-size: 11px;
  text-align: center;
}
.signup-actions button {
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid #a8c8b4;
  border-radius: 8px;
  background: #edf7f0;
  color: var(--green);
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}
.signup-actions button:hover {
  border-color: var(--green);
  background: #e2f2e7;
}
.public-signup-shell {
  min-height: 100vh;
  direction: rtl;
  background: #edf2ef;
}
.public-signup-shell > header {
  min-height: 68px;
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.public-signup-shell > header button {
  padding: 9px 14px;
  border: 1px solid #b8cec0;
  border-radius: 7px;
  background: #f4f8f5;
  color: var(--green);
  cursor: pointer;
}
.public-signup-shell > header div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.public-signup-shell > header small {
  color: #829087;
}
.public-signup-content {
  padding: 28px;
}
.public-signup-content > .runtime-tabs {
  max-width: 1200px;
  margin: auto;
}
@media (max-width: 800px) {
  .runtime {
    grid-template: 58px 1fr/1fr;
  }
  .runtime aside {
    position: fixed;
    top: 58px;
    right: 0;
    bottom: 0;
    width: 260px;
    z-index: 5;
  }
  .content,
  .public-signup-content {
    padding: 14px;
  }
  .form-grid {
    padding: 16px;
  }
  .form-grid > div {
    grid-column: 1/-1 !important;
  }
  .user {
    display: none;
  }
  .signup-actions {
    grid-template-columns: 1fr;
  }
}

.files-tiny {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.files-tiny-label {
  color: #34433a;
  font-size: 11px;
  font-weight: 700;
}
.files-tiny-label em {
  margin-right: 3px;
  color: #bd3535;
  font-style: normal;
}
.files-tiny-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.files-tiny article,
.files-tiny-upload {
  width: 82px;
  min-height: 108px;
  overflow: hidden;
  border: 1px solid #cfdbd3;
  border-radius: 7px;
  background: #fff;
}
.files-tiny article {
  display: flex;
  flex-direction: column;
}
.files-tiny-thumb {
  position: relative;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #edf2ef;
  color: #fff;
  text-decoration: none;
}
.files-tiny-thumb i {
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.files-tiny-thumb .mime-file-icon {
  position: relative;
  width: 34px;
  height: 42px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5px;
  border-radius: 3px;
  background: #6b7c72;
  box-shadow: 0 3px 8px #173b2833;
  color: #fff;
}
.files-tiny-thumb .mime-file-icon > i {
  position: absolute;
  top: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: linear-gradient(225deg, #edf2ef 50%, #ffffff66 51%);
}
.files-tiny-thumb .mime-file-icon > b {
  font-size: 7px;
  letter-spacing: 0.4px;
}
.files-tiny-thumb .mime-pdf {
  background: #c44a4a;
}
.files-tiny-thumb .mime-img {
  background: #397e5a;
}
.files-tiny-thumb .mime-vid {
  background: #7052a3;
}
.files-tiny-thumb .mime-aud {
  background: #397aa0;
}
.files-tiny-thumb .mime-zip {
  background: #a57932;
}
.files-tiny-thumb .mime-doc {
  background: #386fa9;
}
.files-tiny-thumb .mime-xls {
  background: #288258;
}
.files-tiny-thumb .mime-txt {
  background: #65747c;
}
.files-tiny-thumb span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #173b28b8;
  opacity: 0;
  font-size: 9px;
  transition: 0.15s;
}
.files-tiny-thumb:hover span {
  opacity: 1;
}
.files-tiny article > b {
  padding: 4px 5px;
  overflow: hidden;
  color: #46554b;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.files-tiny article > div {
  margin-top: auto;
  display: flex;
  border-top: 1px solid #e2e9e4;
}
.files-tiny article > div > * {
  flex: 1;
  padding: 4px 2px;
  border: 0;
  background: #f6f9f7;
  color: #176b3a;
  font-size: 7px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.files-tiny article > div > button {
  color: #a33c3c;
}
.files-tiny-upload {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-style: dashed;
  color: #176b3a;
  cursor: pointer;
}
.files-tiny-upload input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.files-tiny-upload span {
  font-size: 28px;
  line-height: 1;
}
.files-tiny-upload b {
  font-size: 8px;
}
.files-tiny-error {
  color: #a82d2d;
  font-size: 8px;
}
.radio-group-element {
  margin: 0;
  padding: 0;
  border: 0;
}
.radio-group-element legend {
  margin-bottom: 6px;
  color: #34433a;
  font-size: 12px;
  font-weight: 700;
}
.radio-group-element legend em {
  margin-right: 3px;
  color: #bd3535;
  font-style: normal;
}
.radio-group-element > div {
  min-height: 36px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, max-content));
  align-items: center;
  justify-content: start;
  gap: 8px 18px;
}
.radio-group-option {
  display: inline-flex;
  width: auto;
  min-height: 32px;
  align-items: center;
  justify-content: flex-start;
  gap: 7px;
}
.radio-group-option label {
  display: inline;
  width: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-weight: 500;
  cursor: pointer;
}
.radio-group-element input[type="radio"] {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  accent-color: #08783e;
}
.radio-group-option label {
  color: #46554b;
  font-size: 12px;
}
.table-array-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.table-array-heading > label {
  margin: 0;
}
.table-array-heading > button {
  padding: 8px 14px;
  border: 0;
  border-radius: 7px;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}
.table-array-input {
  overflow: hidden;
  padding: 12px;
  border: 1px solid #adc5b5;
  border-radius: 9px;
  background: #fbfdfb;
}
.table-array-input[dir="ltr"] :is(th, td) { text-align: left; }
.table-array-input[dir="rtl"] :is(th, td) { text-align: right; }
.table-array-input > .table-scroll > table[dir="ltr"] {
  direction: ltr;
}
.table-array-input > .table-scroll > table[dir="rtl"] {
  direction: rtl;
}
.table-array-input > .table-scroll > table[dir="ltr"] :is(th, td) {
  text-align: left;
}
.table-array-input.table-array-excel {
  padding: 0;
  border-radius: 0;
  background: #fff;
}
.table-array-input.table-array-excel > .table-array-heading {
  min-height: 38px;
  margin: 0;
  padding: 5px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.table-array-input.table-array-excel > .table-scroll > table {
  border-collapse: collapse;
}
.table-array-input.table-array-excel > .table-scroll > table :is(th, td) {
  padding: 0;
  border: 1px solid var(--line);
}
.table-array-input.table-array-excel > .table-scroll > table th {
  min-height: 29px;
  padding: 5px 7px;
}
.table-array-input.table-array-excel > .table-scroll > table td:not(.table-array-actions) {
  height: 36px;
  padding: 0 !important;
}
.table-array-input.table-array-excel > .table-scroll > table td :is(input, select, .lookup-combobox, .jalali-date-trigger) {
  width: 100%;
  height: 100%;
  min-height: 35px;
  margin: 0;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.table-array-input input,
.table-array-input select {
  box-sizing: border-box;
  width: 100%;
  min-width: 64px;
  height: 28px;
  min-height: 28px;
  padding: 2px 5px;
  border: 1px solid #adc9b7;
  border-radius: 5px;
  background: #fff;
  font-size: 10px;
}
.table-array-input td {
  padding: 4px;
}
.table-array-input th {
  padding: 6px 5px;
  font-size: 10px;
  line-height: 1.35;
}
.table-array-input td .lookup-field { gap: 0; font-weight: normal; }
.table-array-input td .lookup-label { display: none; }
.table-array-input td input:required,
.table-array-input td select:required {
  border-color: #d9a36f;
  background: #fff9f2;
}
.table-array-input td .lookup-field:has(input:required) .lookup-combobox {
  border-color: #d9a36f;
  background: #fff9f2;
}
.table-array-input td .lookup-field:has(input:required) .lookup-input-row input {
  background: transparent;
}
.table-array-input td .lookup-combobox {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  height: 28px;
  min-height: 28px;
  overflow: hidden;
  border-radius: 5px;
}
.table-array-input td .lookup-input-row {
  position: relative;
  height: 26px;
  min-height: 26px;
  padding-left: 18px;
  overflow: hidden;
}
.table-array-input td .lookup-input-row input {
  box-sizing: border-box;
  height: 26px;
  min-height: 0;
  padding: 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 9px;
}
.table-array-input td .lookup-input-row > button {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
  min-width: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  font-size: 9px;
}
.list-card.table-array-view,
.table-card.table-array-view {
  padding: 12px;
  border-color: #adc5b5;
  border-radius: 9px;
  background: #fbfdfb;
}
.list-card.table-array-view > .table-scroll,
.table-card.table-array-view > .table-scroll {
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}
.table-array-actions {
  width: 66px;
  text-align: center !important;
  white-space: nowrap;
}
.table-array-actions button {
  width: 26px;
  height: 26px;
  margin: 0 2px;
  padding: 5px;
  border: 1px solid #d7aaaa;
  border-radius: 6px;
  background: #fff5f5;
  color: #a82d2d;
  cursor: pointer;
}
.table-array-actions button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.table-array-actions .table-array-edit-button {
  border-color: #a9ccb5;
  background: #f1faf4;
  color: #176f3d;
}
.workflow-previous-notes,
.workflow-task-notes {
  margin-top: 10px;
  display: grid;
  gap: 7px;
}
.workflow-previous-notes article {
  padding: 8px 10px;
  border: 1px solid #dce8e0;
  border-radius: 7px;
  background: #f7faf8;
}
.workflow-previous-notes article span {
  color: #617268;
  font-size: 10px;
  font-weight: 800;
}
.workflow-note-header {
  display: flex;
  direction: rtl;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.workflow-previous-notes .workflow-note-author {
  display: block;
  margin-inline-start: auto;
  text-align: left;
  color: #718078;
  font-size: 11px;
}
.workflow-previous-notes article p {
  margin: 4px 0 0;
  white-space: pre-wrap;
}
.workflow-note-phrases {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(180px, 2fr) auto;
  gap: 6px;
}
.workflow-note-phrases select,
.workflow-note-phrases input,
.workflow-note-phrases button {
  min-height: 34px;
  padding: 5px 8px;
  border: 1px solid #b8cec0;
  border-radius: 6px;
  background: #fff;
  font: inherit;
}
.workflow-note-phrases button {
  background: var(--green);
  color: #fff;
  cursor: pointer;
}
.workflow-note-phrases button:disabled { opacity: .5; cursor: default; }
@media (max-width: 700px) {
  .workflow-note-phrases { grid-template-columns: 1fr; }
}
@media (max-width: 1024px) {
  .responsive-table-array {
    --compact-table-control-height: 28px;
    padding: 4px;
  }
  .table-array-view .filter-row {
    display: none;
  }
  .responsive-table-array > .table-array-heading {
    margin-bottom: 3px;
  }
  .responsive-table-array > .table-array-heading > button {
    padding: 4px 7px;
    font-size: 9px;
  }
  .responsive-table-array > .table-scroll {
    overflow: visible;
  }
  .responsive-table-array > .table-scroll > table,
  .responsive-table-array > .table-scroll > table > tbody {
    display: block;
  }
  .responsive-table-array > .table-scroll > table > thead {
    display: none;
  }
  .responsive-table-array > .table-scroll > table > tbody > tr {
    margin-top: 4px;
    padding: 4px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px 5px;
    border: 1px solid #cbded1;
    border-radius: 5px;
    background: #fff;
  }
  .responsive-table-array > .table-scroll > table > tbody > tr::before {
    content: attr(data-row-label);
    grid-column: 1 / -1;
    padding: 1px 2px 3px;
    border-bottom: 1px solid var(--line);
    color: #41604d;
    font-size: 9px;
    font-weight: 800;
  }
  .responsive-table-array > .table-scroll > table > tbody > tr > td {
    min-width: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 0;
  }
  .responsive-table-array > .table-scroll > table > tbody > tr > td::before {
    content: attr(data-label);
    min-height: 0;
    display: flex;
    align-items: flex-end;
    color: #53685a;
    font-size: 8px;
    font-weight: 750;
    line-height: 1.25;
  }
  .responsive-table-array input,
  .responsive-table-array select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: var(--compact-table-control-height);
    min-height: var(--compact-table-control-height);
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 9px;
  }
  .responsive-table-array > .table-scroll > table > tbody > tr > .table-array-actions {
    width: auto;
    grid-column: 1 / -1;
    align-items: flex-start;
  }
  .responsive-table-array > .table-scroll > table > tbody > tr > .table-array-actions::before {
    display: none;
  }
  .responsive-table-array .table-array-actions button {
    padding: 3px 7px;
    font-size: 9px;
  }
  .responsive-table-array > .table-scroll > table > tbody > .table-array-empty-row {
    display: block;
  }
  .responsive-table-array > .table-scroll > table > tbody > .table-array-empty-row::before,
  .responsive-table-array > .table-scroll > table > tbody > .table-array-empty-row > td::before {
    display: none;
  }
  .responsive-table-array > .table-scroll > table > tbody > .table-array-empty-row > td {
    padding: 3px;
    color: #7d8a82;
    font-size: 9px;
    text-align: center;
  }
}
@media (max-width: 700px) {
  .responsive-table-array > .table-scroll > table > tbody > tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .responsive-table-array > .table-scroll > table > tbody > tr {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 1024px) {
  .form-grid {
    gap: 0;
  }
  .form-grid > div {
    margin: 4px;
  }
  .form-grid > div:not(.table-array) > label,
  .form-grid > div:not(.table-array) > .lookup-field {
    gap: 2px;
    font-size: 8px;
    line-height: 1;
  }
  .form-grid > div:not(.table-array) > label > span:first-child,
  .form-grid > div:not(.table-array) > .lookup-field > .lookup-label {
    padding-inline: 2px;
  }
  .form-grid > div:not(.table-array) > label input,
  .form-grid > div:not(.table-array) > label select,
  .form-grid > div:not(.table-array) > .lookup-field .lookup-combobox,
  .form-grid > div:not(.table-array) .jalali-date-trigger {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    min-height: 28px;
    padding: 2px 5px;
    border-radius: 4px !important;
    font-size: 9px;
  }
  .form-grid > div:not(.table-array) > .lookup-field .lookup-combobox {
    padding: 0;
  }
  .form-grid > div:not(.table-array) > .lookup-field .lookup-input-row {
    height: 26px;
    min-height: 26px;
  }
  .form-grid > div:not(.table-array) > .lookup-field .lookup-input-row input {
    height: 26px;
    min-height: 0;
  }
}
.jalali-date-picker {
  position: relative;
  position: relative;
  width: 100%;
  font-weight: normal;
}
.jalali-date-required-control {
  position: absolute;
  inset: auto 0 0 auto;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  opacity: 0;
  pointer-events: none;
}
.program-logo {
  object-fit: cover;
  border-radius: 10px;
}
.jalali-date-trigger {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #cad9d0;
  border-radius: 8px;
  background: #fff;
  color: #52645a;
  cursor: pointer;
}
.jalali-date-trigger[data-invalid="true"] {
  border-color: #b42318;
  box-shadow: 0 0 0 2px #b4231820;
}
.jalali-date-error {
  display: block;
  margin-top: 5px;
  color: #b42318;
  font-size: 11px;
}
.jalali-calendar {
  position: absolute;
  z-index: 30;
  top: calc(100% + 5px);
  right: 0;
  width: 286px;
  padding: 12px;
  border: 1px solid #bdd3c4;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 32px #173b2830;
  direction: rtl;
}
.jalali-calendar-overlay {
  position: fixed;
  z-index: 10000;
}
.jalali-calendar header {
  display: grid;
  grid-template-columns: 34px 1fr 34px;
  align-items: center;
  margin-bottom: 9px;
}
.jalali-month-year-selectors {
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 82px;
  gap: 5px;
}
.jalali-month-year-selectors select {
  min-width: 0;
  height: 30px;
  padding: 3px 5px;
  border: 1px solid #c8dbcf;
  border-radius: 6px;
  background: #fff;
  color: #27563c;
  font-size: 11px;
}
.jalali-calendar header button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: #edf6f0;
  color: var(--green);
  cursor: pointer;
}
.jalali-weekdays,
.jalali-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.jalali-weekdays b {
  padding: 5px 0;
  color: #7b8b82;
  font-size: 10px;
  text-align: center;
}
.jalali-days button,
.jalali-days span {
  min-width: 0;
  width: 100%;
  height: 31px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #405248;
  font-size: 10px;
}
.jalali-days button {
  cursor: pointer;
}
.jalali-days button:hover {
  background: #e6f3e9;
}
.jalali-days button.selected {
  background: var(--green);
  color: #fff;
  font-weight: bold;
}
.jalali-time {
  margin-top: 6px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 6px;
  color: #718078;
  font-size: 10px;
}
.jalali-time input {
  min-width: 0 !important;
  min-height: 34px !important;
  height: 34px;
}
.jalali-time button {
  padding: 6px 8px;
  border: 1px solid #d9b3b3;
  border-radius: 6px;
  background: #fff8f8;
  color: #a82d2d;
  font-size: 9px;
  cursor: pointer;
}
.applicant-summary {
  width: 100%;
  overflow: hidden;
  border: 1px solid #c9dfd1;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 34px rgba(17, 92, 52, .08);
  color: #244334;
}
.applicant-summary > header {
  min-height: 76px;
  padding: 15px 18px !important;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid #d9e7de;
  background: linear-gradient(110deg, #e8f6ed 0%, #f7fbf8 65%, #fff 100%);
}
.applicant-summary-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: linear-gradient(145deg, #07944c, #08703c);
  box-shadow: 0 7px 18px rgba(8, 120, 62, .24);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
}
.applicant-summary > header > div { min-width: 0; }
.applicant-summary h3 {
  margin: 0;
  color: #075f33;
  font-size: 15px;
}
.applicant-summary header p {
  margin: 4px 0 0;
  color: #75867c;
  font-size: 10px;
}
.applicant-summary header i {
  margin-right: auto;
  padding: 6px 10px !important;
  border: 1px solid #a9d5b7;
  border-radius: 999px;
  background: #fff;
  color: #08783e;
  font-size: 9px;
  font-style: normal;
  font-weight: 750;
}
.applicant-summary header i span {
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-left: 4px;
  border-radius: 50%;
  background: #0a9c51;
  box-shadow: 0 0 0 3px #e0f3e7;
}
.applicant-table-wrap {
  padding: 16px 18px !important;
  overflow-x: auto;
}
.applicant-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #d9eee0, #edf7f0);
  box-shadow: inset 0 0 0 1px #bfddc9;
  color: #08783e;
  font-size: 18px;
  font-weight: 800;
}
.applicant-info-table {
  width: 100%;
  min-width: 680px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #dbe7df;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  background: #fff;
}
.applicant-info-table caption {
  padding: 0 !important;
  caption-side: top;
  border: 1px solid #dbe7df;
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, #f2f9f4, #fbfdfc);
  text-align: right;
}
.applicant-caption-content {
  padding: 12px 14px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}
.applicant-caption-name {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
}
.applicant-caption-name small {
  color: #7a8980;
  font-size: 8px;
}
.applicant-caption-name strong {
  overflow-wrap: anywhere;
  color: #173f29;
  font-size: 12px;
  font-weight: 750;
}
.applicant-info-table th,
.applicant-info-table td {
  width: 25%;
  padding: 12px 14px !important;
  border-left: 1px solid #e3ece6;
  text-align: right;
}
.applicant-info-table th:last-child,
.applicant-info-table td:last-child { border-left: 0; }
.applicant-info-table th {
  border-top: 1px solid #dbe7df;
  border-bottom: 1px solid #dbe7df;
  background: #edf7f0;
  color: #65776c;
  font-size: 9px;
  font-weight: 700;
}
.applicant-info-table td {
  color: #183d29;
  font-size: 12px;
  font-weight: 750;
}
.applicant-type-badge,
.applicant-status-badge {
  display: inline-block;
  padding: 4px 8px !important;
  border-radius: 999px;
  background: #e5f4ea;
  color: #08783e;
  font-size: 8px;
}
.applicant-status-badge {
  background: #eaf6ee;
  box-shadow: inset 0 0 0 1px #b9dbc4;
}
.applicant-summary > footer {
  padding: 9px 18px !important;
  display: flex;
  align-items: center;
  gap: 5px;
  border-top: 1px solid #e1ebe4;
  background: #fbfdfc;
  color: #819087;
  font-size: 8px;
}
.applicant-summary > footer b {
  color: #5f7267;
  font-weight: 650;
}
@media (max-width: 700px) {
  .applicant-summary > header { padding: 11px !important; }
  .applicant-summary header i { display: none; }
  .applicant-table-wrap {
    padding: 10px !important;
  }
  .applicant-summary > footer {
    padding: 9px 11px !important;
    align-items: flex-start;
    flex-direction: column;
  }
}
.final-review {
  padding: 18px;
  border: 1px solid #d7e5dc;
  border-radius: 11px;
  background: #f8fbf9;
}
.final-review h2 {
  margin: 0 0 7px;
  color: var(--green);
  font-size: 18px;
}
.final-review > p {
  margin: 0 0 16px;
  color: #718078;
  font-size: 11px;
}
.html-values-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.html-values-summary > div {
  min-width: 0;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid #e0e9e3;
  border-radius: 8px;
  background: #fff;
}
.html-values-summary b {
  color: #5f7067;
  font-size: 10px;
}
.html-values-summary span {
  overflow-wrap: anywhere;
  color: #263a2f;
  font-size: 12px;
}
.identity-panel {
  --identity-rows: 2;
  position: relative;
  width: 100%;
  padding: 6px;
  display: grid;
  grid-template-rows: repeat(var(--identity-rows), minmax(34px, auto));
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 4px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--green) 24%, #dce8e0);
  border-radius: 10px;
  background: linear-gradient(135deg, #f7fcf9 0%, #edf7f1 100%);
  box-shadow: 0 4px 12px rgba(20, 83, 49, 0.06);
}
.identity-panel::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: var(--green);
}
.identity-panel-rows-3 { --identity-rows: 3; }
.identity-panel-field {
  min-width: 0;
  padding: 5px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(23, 107, 58, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.78);
}
.identity-panel-field b {
  color: #718078;
  font-size: 9px;
  font-weight: 700;
  white-space: nowrap;
}
.identity-panel-field span {
  overflow-wrap: anywhere;
  color: #213a2c;
  min-width: 0;
  font-size: 11px;
  font-weight: 650;
}
.identity-panel-primary {
  border-color: rgba(23, 107, 58, 0.22);
  background: rgba(232, 246, 237, 0.92);
}
.identity-panel-primary span {
  color: var(--green);
  font-size: 12px;
}
.runtime-html {
  min-width: 0;
  container-type: inline-size;
}
.review-values-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border: 1px solid #d5e4da;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 9px;
  background: #fff;
}
.final-review:has(.review-values-table) {
  overflow-x: auto;
}
.review-values-table th,
.review-values-table td {
  padding: 9px 10px !important;
  border-inline-start: 1px solid #e2ebe5;
  border-bottom: 1px solid #e2ebe5;
  text-align: right;
  vertical-align: top;
}
.review-values-table th {
  width: 10%;
  color: #617168;
  background: #f3f8f5;
  font-size: 9px;
  font-weight: 700;
}
.review-values-table td {
  width: 15%;
  overflow-wrap: anywhere;
  color: #263a2f;
  font-size: 10px;
}
.review-values-table .review-section-title th {
  padding: 10px 12px !important;
  border-inline-start: 0;
  background: #e5f3e9;
  color: #08783e;
  font-size: 11px;
}
.review-values-table tr:last-child > * { border-bottom: 0; }
@container (max-width: 640px) {
  .review-values-table,
  .review-values-table > tbody,
  .review-values-table > thead,
  .review-values-table > tfoot {
    display: block;
    width: 100%;
  }
  .review-values-table > :is(tbody, thead, tfoot) > tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .review-values-table > :is(tbody, thead, tfoot) > tr > :is(th, td) {
    width: auto;
    min-width: 0;
    border-inline-start: 0;
    overflow-wrap: anywhere;
  }
  .review-values-table > :is(tbody, thead, tfoot) > tr > th {
    border-bottom: 0;
  }
  .review-values-table > :is(tbody, thead, tfoot) > tr > td {
    border-bottom: 1px solid #e2ebe5;
  }
  .review-values-table > :is(tbody, thead, tfoot) > tr > :is(th, td):empty {
    display: none;
  }
  .review-values-table .html-feature-summary > span {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.html-image-thumbnails {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.html-image-thumbnails button {
  width: 46px;
  height: 46px;
  padding: 0;
  overflow: hidden;
  border: 1px solid #cbdcd1;
  border-radius: 6px;
  background: #eef5f0;
  cursor: zoom-in;
}
.html-image-thumbnails img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.html-feature-summary {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}
.html-feature-summary > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}
.html-feature-summary button {
  flex: none;
  width: 25px;
  height: 25px;
  padding: 0;
  border: 1px solid #9ec2aa;
  border-radius: 5px;
  background: #edf7f0;
  color: #176b3a;
  font-weight: 800;
  cursor: pointer;
}
.html-table-array-wrap {
  width: 100%;
  overflow-x: auto;
}
.html-table-array {
  width: 100%;
  min-width: 520px;
  border: 1px solid #d6e4db;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 7px;
  background: #fff;
}
.html-table-array th,
.html-table-array td {
  padding: 7px 9px !important;
  border-inline-start: 1px solid #e1eae4;
  border-bottom: 1px solid #e1eae4;
  text-align: right;
  vertical-align: middle;
  font-size: 8px;
}
.html-table-array th {
  background: #eaf5ed;
  color: #486556;
  font-weight: 750;
}
.html-table-array td { color: #263d31; }
.html-table-array tr:last-child td { border-bottom: 0; }
.html-table-array tr > *:last-child { border-inline-start: 0; }
.html-value-viewer-backdrop {
  position: fixed;
  z-index: 1200;
  inset: 0;
  padding: 22px;
  display: grid;
  place-items: center;
  background: #0d2118b8;
  backdrop-filter: blur(4px);
}
.html-image-viewer,
.html-feature-viewer,
.html-map-viewer {
  width: min(920px, 100%);
  max-height: 92vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  border: 1px solid #587565;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 28px 90px #0008;
}
.html-image-viewer > header,
.html-feature-viewer > header,
.html-map-viewer > header {
  min-height: 48px;
  padding: 8px 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dce6df;
}
.html-image-viewer > header button,
.html-feature-viewer > header button,
.html-map-viewer > header button {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #53645a;
  font-size: 22px;
  cursor: pointer;
}
.html-image-viewer > div {
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: 14px;
  background: #17231c;
}
.html-image-viewer > div img {
  max-width: 100%;
  max-height: calc(92vh - 76px);
  object-fit: contain;
}
.html-feature-viewer {
  width: min(720px, 100%);
  padding-bottom: 14px;
  overflow: auto;
  grid-template-rows: auto auto auto;
}
.html-feature-viewer header small { display: block; color: #7f8d84; font-size: 8px; }
.html-feature-viewer > label,
.html-feature-viewer > details { margin: 12px 14px 0; }
.html-feature-viewer textarea {
  width: 100%;
  min-height: 110px;
  margin-top: 5px;
  padding: 10px;
  resize: vertical;
  direction: ltr;
  text-align: left;
  font: 11px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.html-feature-viewer pre {
  max-height: 260px;
  overflow: auto;
  padding: 10px;
  border-radius: 7px;
  background: #17231c;
  color: #d9e9de;
  direction: ltr;
  text-align: left;
  font-size: 10px;
}
.html-map-viewer {
  width: min(1050px, 100%);
  height: min(760px, 92vh);
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.html-map-viewer header small { display: block; margin-top: 2px; color: #7c8b82; font-size: 8px; }
.html-map-viewer-toolbar {
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #dce6df;
  background: #f5f9f6;
}
.html-map-viewer-toolbar label { display: flex; align-items: center; gap: 7px; color: #566a5e; font-size: 9px; }
.html-map-viewer-toolbar select {
  min-width: 180px;
  height: 31px;
  border: 1px solid #bdd1c3;
  border-radius: 6px;
  background: #fff;
  color: #284334;
  font-size: 9px;
}
.html-map-viewer-toolbar > span {
  padding: 5px 9px;
  border-radius: 999px;
  background: #e5f3e9;
  color: #08783e;
  font-size: 9px;
  font-weight: 750;
}
.html-feature-map { width: 100%; height: 100%; min-height: 360px; }
.html-map-viewer > footer {
  min-height: 46px;
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid #dce6df;
  background: #fff;
}
.html-map-viewer > footer span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
  color: #5b6d62;
  font: 9px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.html-map-viewer > footer button {
  flex: none;
  margin-right: auto;
  min-height: 30px;
  padding: 5px 10px;
  border: 1px solid #9fc5ab;
  border-radius: 6px;
  background: #edf7f0;
  color: #08783e;
  font-size: 8px;
  cursor: pointer;
}
.payment-confirmation {
  margin-top: 16px;
  padding: 12px;
  border: 1px solid #cfdfd5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: #334b3d;
  font-size: 11px;
  cursor: pointer;
}
.payment-confirmation input {
  width: 17px !important;
  min-width: 17px;
  height: 17px !important;
  margin: 0;
  accent-color: var(--green);
}
.payment-fee-row {
  margin-top: 9px;
  padding: 12px 14px;
  border: 1px solid #b9d8c4;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #edf8f0;
}
.final-review:has(.payment-confirmation input:checked) .payment-fee-row {
  display: flex;
}
.form-card:has(.payment-confirmation input:not(:checked)) > footer {
  display: none;
}
.payment-fee-row b {
  color: #52665a;
  font-size: 11px;
}
.payment-fee-row strong {
  color: var(--green);
  font-size: 14px;
}
@media (max-width: 700px) {
  .html-values-summary {
    grid-template-columns: 1fr;
  }
  .identity-panel {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    padding: 6px;
    border-radius: 10px;
  }
}
.form-grid label.checkbox {
  position: relative;
  min-height: 52px;
  padding: 10px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 11px;
  border: 1px solid #cfe0d5;
  border-radius: 10px;
  background: #f8fbf9;
  color: #52645a;
  cursor: pointer;
  transition:
    border-color 0.16s,
    background 0.16s,
    box-shadow 0.16s;
}
.form-grid label.checkbox:hover {
  border-color: #83b797;
  background: #f2f8f4;
}
.form-grid label.checkbox:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px #08783e1a;
}
.form-grid label.checkbox input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
  pointer-events: none;
}
.form-grid label.checkbox span {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 12px;
  font-weight: 700;
}
.form-grid label.checkbox span::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border: 1.5px solid #9eb9a9;
  border-radius: 6px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #fff;
  transition:
    background 0.16s,
    border-color 0.16s,
    transform 0.12s;
}
.form-grid label.checkbox input:checked + span::before {
  content: "✓";
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}
.form-grid label.checkbox:active span::before {
  transform: scale(0.94);
}
.boolean-choice {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.boolean-choice legend {
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  color: #52645a;
  font-size: 12px;
  font-weight: 700;
}
.boolean-choice > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  padding: 4px;
  border: 1px solid #cfe0d5;
  border-radius: 10px;
  background: #f3f7f4;
}
.boolean-choice button {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6e7e75;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.16s,
    color 0.16s,
    box-shadow 0.16s;
}
.boolean-choice button i {
  width: 8px;
  height: 8px;
  border: 1.5px solid #9dafa3;
  border-radius: 50%;
  background: #fff;
}
.boolean-choice button:hover {
  background: #fff;
  color: #34483d;
}
.boolean-choice button.active.true {
  background: var(--theme-primary);
  color: #fff;
  box-shadow: 0 3px 9px #08783e2d;
}
.boolean-choice button.active.false {
  background: #fff;
  color: #44554b;
  box-shadow: 0 2px 7px #263d3020;
}
.boolean-choice button.active i {
  border-color: currentColor;
  box-shadow: inset 0 0 0 2px currentColor;
}
.boolean-choice > small {
  display: block;
  min-height: 14px;
  margin-top: 5px;
  color: #89978f;
  font-size: 9px;
}

.runtime-host .runtime-folder-page { --folder-line: color-mix(in srgb, var(--line, #cfdad3) 38%, #dce3df); width: 100%; height: 100%; min-height: 420px; padding: 16px !important; display: grid; grid-template-rows: auto minmax(0, 1fr); color: var(--ink, #172c21); text-align: start; overflow: hidden; }
.runtime-host .runtime-folder-page > header { min-height: 64px; padding: 4px 8px 15px !important; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--folder-line); }
.runtime-folder-page h2, .runtime-folder-page h3, .runtime-folder-page p { margin: 0; }
.runtime-folder-page > header div { min-width: 0; display: grid; gap: 3px; }
.runtime-folder-page > header h2 { color: var(--ink, #172c21); font-size: 18px; font-weight: 800; }
.runtime-folder-page > header small { color: var(--muted-ink, #6b7e73); font-size: 11px; direction: ltr; text-align: start; }
.runtime-host .runtime-folder-explorer { min-height: 0; margin-top: 14px !important; display: grid; grid-template-columns: minmax(240px, 28%) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--folder-line); border-radius: var(--theme-radius, 8px); background: var(--theme-surface, #fff); box-shadow: 0 8px 24px #20372a12; }
.runtime-folder-explorer > aside { min-width: 0; overflow: auto; border-inline-end: 1px solid var(--folder-line); background: color-mix(in srgb, var(--theme-surface, #fff) 95%, var(--soft, #eaf3ed)); }
.runtime-host .runtime-folder-location, .runtime-host .runtime-folder-path { min-height: 45px; padding: 8px 12px !important; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--folder-line); background: var(--theme-surface, #fff); }
.runtime-folder-location b { min-width: 0; overflow: hidden; color: var(--ink, #172c21); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.runtime-host .runtime-folder-explorer nav { padding: 8px 6px !important; }
.runtime-host .runtime-folder-row { min-height: 38px; padding-inline-start: var(--folder-indent, 7px) !important; display: flex; align-items: center; gap: 3px; border: 1px solid transparent; border-radius: 5px; }
.runtime-folder-row:hover { background: color-mix(in srgb, var(--theme-primary, #16834a) 7%, var(--theme-surface, #fff)); }
.runtime-folder-row.selected { border-color: color-mix(in srgb, var(--theme-primary, #16834a) 28%, var(--line, #cfdad3)); background: var(--soft, #eaf3ed); }
.runtime-host .runtime-folder-name { width: auto; min-width: 0; flex: 1; padding: 6px 7px !important; display: flex; align-items: center; justify-content: flex-start; gap: 9px; border: 0; background: transparent; color: var(--ink, #172c21) !important; font: inherit; font-size: 12px; font-weight: 650; text-align: start; cursor: pointer; }
.runtime-folder-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.runtime-host .runtime-folder-chevron { width: 18px; height: 24px; flex: none; padding: 0 !important; border: 0; background: transparent; color: var(--muted-ink, #687a70) !important; font-size: 17px; text-align: center; cursor: pointer; transition: transform .14s; }
.runtime-folder-chevron.open { transform: rotate(90deg); }
.runtime-folder-chevron.leaf { min-height: 0; display: inline-block; visibility: hidden; }
.runtime-folder-icon { position: relative; width: 20px; height: 14px; flex: none; display: inline-block; border-radius: 2px; background: #f2bd31; box-shadow: inset 0 -2px #d99a17; }
.runtime-folder-icon::before { content: ""; position: absolute; top: -4px; left: 1px; width: 9px; height: 5px; border-radius: 2px 2px 0 0; background: #e3a820; }
.runtime-folder-icon.large { width: 30px; height: 21px; }
.runtime-folder-icon.large::before { top: -6px; width: 13px; height: 7px; }
.runtime-folder-icon.hero { width: 68px; height: 46px; }
.runtime-folder-icon.hero::before { top: -11px; width: 30px; height: 13px; }
.runtime-folder-icon.item { width: 46px; height: 31px; }
.runtime-folder-icon.item::before { top: -8px; width: 20px; height: 10px; }
.runtime-folder-explorer > main { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
.runtime-folder-path { overflow-x: auto; white-space: nowrap; }
.runtime-folder-path > span { display: inline-flex; align-items: center; gap: 7px; }
.runtime-host .runtime-folder-path button { padding: 5px 7px !important; border: 0; background: transparent; color: var(--ink, #172c21) !important; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.runtime-folder-path button:hover { color: var(--theme-primary, #16834a) !important; background: var(--soft, #eaf3ed); }
.runtime-folder-path i { color: var(--muted-ink, #6b7e73); font-size: 17px; font-style: normal; }
.runtime-folder-main-body { min-width: 0; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 36%); overflow: hidden; }
.runtime-folder-content { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
.runtime-host .runtime-folder-upload-bar { min-height: 54px; padding: 8px 12px !important; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--folder-line); background: color-mix(in srgb, var(--theme-surface, #fff) 96%, var(--soft, #eaf3ed)); }
.runtime-folder-upload-bar > label:first-child { display: flex; align-items: center; gap: 7px; color: var(--muted-ink, #6b7e73); font-size: 10px; white-space: nowrap; }
.runtime-host .runtime-folder-upload-bar select { min-width: 145px; height: 34px; padding: 4px 9px !important; border: 1px solid var(--folder-line); background: var(--theme-surface, #fff); color: var(--ink, #172c21); font: inherit; font-size: 11px; }
.runtime-folder-upload-bar > small { min-width: 0; flex: 1; overflow: hidden; color: var(--muted-ink, #6b7e73); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.runtime-host .runtime-folder-upload { position: relative; min-height: 34px; padding: 7px 12px !important; display: inline-flex; align-items: center; gap: 6px; overflow: hidden; border: 1px solid var(--theme-primary, #16834a); border-radius: var(--theme-radius, 7px); background: var(--theme-primary, #16834a); color: #fff; font-size: 11px; font-weight: 750; white-space: nowrap; cursor: pointer; }
.runtime-folder-upload.uploading { cursor: wait; opacity: .65; }
.runtime-folder-upload input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: inherit; }
.runtime-folder-upload > span { padding: 0 !important; font-size: 16px; line-height: 1; }
.runtime-host .runtime-folder-file-error { padding: 7px 12px !important; border-bottom: 1px solid #e9c5c5; background: #fff5f5; color: #a83333; font-size: 10px; }
.runtime-host .runtime-folder-items { min-width: 0; min-height: 0; padding: 18px !important; display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-auto-rows: 124px; align-content: start; gap: 12px; overflow: auto; }
.runtime-host .runtime-folder-item { min-width: 0; padding: 14px 10px !important; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; background: transparent; color: var(--ink, #172c21) !important; font: inherit; cursor: pointer; }
.runtime-folder-item:hover, .runtime-folder-item:focus-visible { border-color: color-mix(in srgb, var(--theme-primary, #16834a) 30%, var(--line, #cfdad3)); background: var(--soft, #eaf3ed); outline: none; }
.runtime-folder-item b { width: 100%; min-height: 24px; flex: none; overflow: hidden; font-size: 12px; line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
.runtime-folder-item small { min-height: 21px; flex: none; color: var(--muted-ink, #6b7e73); font-size: 10px; line-height: 15px; }
.runtime-folder-file { min-width: 0; height: 124px; display: grid; grid-template-rows: 76px 24px 20px; overflow: hidden; border: 1px solid var(--folder-line); border-radius: calc(var(--theme-radius, 7px) + 1px); background: var(--theme-surface, #fff); box-shadow: 0 3px 10px #1933240d; }
.runtime-folder-file:hover { border-color: color-mix(in srgb, var(--theme-primary, #16834a) 45%, var(--folder-line)); box-shadow: 0 6px 16px #1933241c; }
.runtime-folder-file.selected { border-color: var(--theme-primary, #16834a); box-shadow: 0 0 0 1px var(--theme-primary, #16834a), 0 6px 16px #1933241c; }
.runtime-host .runtime-folder-file-thumb { position: relative; width: 100%; min-width: 0; padding: 0 !important; overflow: hidden; display: grid; place-items: center; border: 0; border-radius: 0; background: #eef2ef; text-decoration: none; cursor: pointer; }
.runtime-folder-file-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.runtime-folder-file-thumb > span { width: 42px; height: 52px; padding: 0 !important; display: grid; place-items: end center; padding-bottom: 7px !important; border-radius: 4px; background: #62776a; color: #fff; font: 800 8px/1 ui-monospace, monospace; clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%); }
.runtime-folder-file-thumb > i { position: absolute; inset: 0; padding: 0 !important; display: grid; place-items: center; background: #173b28b8; color: #fff; opacity: 0; font-size: 10px; font-style: normal; transition: opacity .15s; }
.runtime-folder-file-thumb:hover > i, .runtime-folder-file-thumb:focus-visible > i { opacity: 1; }
.runtime-folder-file > b { min-width: 0; padding: 4px 7px !important; overflow: hidden; color: var(--ink, #172c21); font-size: 10px; line-height: 16px; text-align: start; text-overflow: ellipsis; white-space: nowrap; }
.runtime-folder-file > div { min-width: 0; padding: 2px 7px 5px !important; display: flex; justify-content: space-between; gap: 5px; color: var(--muted-ink, #6b7e73); }
.runtime-folder-file > div small { min-width: 0; overflow: hidden; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.runtime-folder-loading { grid-column: 1 / -1; padding: 14px !important; color: var(--muted-ink, #6b7e73); font-size: 10px; text-align: center; }
.runtime-folder-preview-pane { min-width: 0; min-height: 0; padding: 0 !important; display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-inline-start: 1px solid var(--folder-line); background: color-mix(in srgb, var(--theme-surface, #fff) 97%, var(--soft, #eaf3ed)) !important; color: var(--ink, #172c21) !important; }
.runtime-host .runtime-folder-preview-pane > header { min-height: 46px; padding: 7px 9px !important; display: flex; align-items: center; justify-content: space-between; gap: 7px; border-bottom: 1px solid var(--folder-line); background: var(--theme-surface, #fff); }
.runtime-folder-preview-pane > header b { min-width: 0; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.runtime-folder-preview-pane > header > span { flex: none; display: flex; gap: 5px; }
.runtime-host .runtime-folder-preview-pane > header a { padding: 5px 7px !important; border: 1px solid var(--folder-line); border-radius: 5px; background: #f8faf9; color: var(--theme-primary, #16834a); font-size: 8px; font-weight: 700; text-decoration: none; }
.runtime-folder-preview-pane > div { min-width: 0; min-height: 0; overflow: hidden; background: #e9eeeb; }
.runtime-folder-preview-pane iframe { width: 100%; height: 100%; min-height: 0; display: block; border: 0; background: #fff; }
.runtime-folder-preview-empty { width: 100%; height: 100%; min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted-ink, #6b7e73); text-align: center; }
.runtime-folder-preview-empty > span { padding: 0 !important; font-size: 42px; opacity: .55; }
.runtime-folder-preview-empty p { max-width: 180px; font-size: 10px; line-height: 1.8; }
.runtime-folder-empty, .runtime-folder-empty-state { min-height: 220px; display: grid; place-content: center; justify-items: center; gap: 17px; color: var(--muted-ink, #6b7e73); font-size: 12px; }
.runtime-folder-empty-state { grid-column: 1 / -1; }
@media (max-width: 800px) {
  .runtime-host .runtime-folder-page { min-height: 0; padding: 9px !important; overflow: auto; }
  .runtime-folder-explorer { grid-template-columns: 1fr; grid-template-rows: minmax(150px, 34vh) minmax(340px, 1fr); overflow: visible; }
  .runtime-folder-explorer > aside { border-inline-end: 0; border-bottom: 1px solid var(--folder-line); }
  .runtime-folder-main-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(260px, 1fr) 320px; }
  .runtime-folder-preview-pane { border-inline-start: 0; border-top: 1px solid var(--folder-line); }
  .runtime-folder-upload-bar { flex-wrap: wrap; }
  .runtime-folder-upload-bar > small { order: 3; width: 100%; flex-basis: 100%; }
}

/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!../app/globals.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .visible {
    visibility: visible;
  }
  .fixed {
    position: fixed;
  }
  .relative {
    position: relative;
  }
  .sticky {
    position: sticky;
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .block {
    display: block;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .italic {
    font-style: italic;
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
}
:root, :host {
  --ol-background-color: white;
  --ol-accent-background-color: #F5F5F5;
  --ol-subtle-background-color: rgba(128, 128, 128, 0.25);
  --ol-partial-background-color: rgba(255, 255, 255, 0.75);
  --ol-foreground-color: #333333;
  --ol-subtle-foreground-color: #666666;
  --ol-brand-color: #00AAFF;
}
.ol-box {
  box-sizing: border-box;
  border-radius: 2px;
  border: 1.5px solid var(--ol-background-color);
  background-color: var(--ol-partial-background-color);
}
.ol-mouse-position {
  top: 8px;
  right: 8px;
  position: absolute;
}
.ol-scale-line {
  background: var(--ol-partial-background-color);
  border-radius: 4px;
  bottom: 8px;
  left: 8px;
  padding: 2px;
  position: absolute;
}
.ol-scale-line-inner {
  border: 1px solid var(--ol-subtle-foreground-color);
  border-top: none;
  color: var(--ol-foreground-color);
  font-size: 10px;
  text-align: center;
  margin: 1px;
  will-change: contents, width;
  transition: all 0.25s;
}
.ol-scale-bar {
  position: absolute;
  bottom: 8px;
  left: 8px;
}
.ol-scale-bar-inner {
  display: flex;
}
.ol-scale-step-marker {
  width: 1px;
  height: 15px;
  background-color: var(--ol-foreground-color);
  float: right;
  z-index: 10;
}
.ol-scale-step-text {
  position: absolute;
  bottom: -5px;
  font-size: 10px;
  z-index: 11;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}
.ol-scale-text {
  position: absolute;
  font-size: 12px;
  text-align: center;
  bottom: 25px;
  color: var(--ol-foreground-color);
  text-shadow: -1.5px 0 var(--ol-partial-background-color), 0 1.5px var(--ol-partial-background-color), 1.5px 0 var(--ol-partial-background-color), 0 -1.5px var(--ol-partial-background-color);
}
.ol-scale-singlebar {
  position: relative;
  height: 10px;
  z-index: 9;
  box-sizing: border-box;
  border: 1px solid var(--ol-foreground-color);
}
.ol-scale-singlebar-even {
  background-color: var(--ol-subtle-foreground-color);
}
.ol-scale-singlebar-odd {
  background-color: var(--ol-background-color);
}
.ol-unsupported {
  display: none;
}
.ol-viewport, .ol-unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.ol-viewport canvas {
  all: unset;
  overflow: hidden;
}
.ol-viewport {
  touch-action: pan-x pan-y;
}
.ol-selectable {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  -moz-user-select: text;
  user-select: text;
}
.ol-grabbing {
  cursor: -webkit-grabbing;
  cursor: -moz-grabbing;
  cursor: grabbing;
}
.ol-grab {
  cursor: move;
  cursor: -webkit-grab;
  cursor: -moz-grab;
  cursor: grab;
}
.ol-control {
  position: absolute;
  background-color: var(--ol-subtle-background-color);
  border-radius: 4px;
}
.ol-zoom {
  top: .5em;
  left: .5em;
}
.ol-rotate {
  top: .5em;
  right: .5em;
  transition: opacity .25s linear, visibility 0s linear;
}
.ol-rotate.ol-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s linear, visibility 0s linear .25s;
}
.ol-zoom-extent {
  top: 4.643em;
  left: .5em;
}
.ol-full-screen {
  right: .5em;
  top: .5em;
}
.ol-control button {
  display: block;
  margin: 1px;
  padding: 0;
  color: var(--ol-subtle-foreground-color);
  font-weight: bold;
  text-decoration: none;
  font-size: inherit;
  text-align: center;
  height: 1.375em;
  width: 1.375em;
  line-height: .4em;
  background-color: var(--ol-background-color);
  border: none;
  border-radius: 2px;
}
.ol-control button::-moz-focus-inner {
  border: none;
  padding: 0;
}
.ol-zoom-extent button {
  line-height: 1.4em;
}
.ol-compass {
  display: block;
  font-weight: normal;
  will-change: transform;
}
.ol-touch .ol-control button {
  font-size: 1.5em;
}
.ol-touch .ol-zoom-extent {
  top: 5.5em;
}
.ol-control button:hover, .ol-control button:focus {
  text-decoration: none;
  outline: 1px solid var(--ol-subtle-foreground-color);
  color: var(--ol-foreground-color);
}
.ol-zoom .ol-zoom-in {
  border-radius: 2px 2px 0 0;
}
.ol-zoom .ol-zoom-out {
  border-radius: 0 0 2px 2px;
}
.ol-attribution {
  text-align: right;
  bottom: .5em;
  right: .5em;
  max-width: calc(100% - 1.3em);
  display: flex;
  flex-flow: row-reverse;
  align-items: center;
}
.ol-attribution a {
  color: var(--ol-subtle-foreground-color);
  text-decoration: none;
}
.ol-attribution ul {
  margin: 0;
  padding: 1px .5em;
  color: var(--ol-foreground-color);
  text-shadow: 0 0 2px var(--ol-background-color);
  font-size: 12px;
}
.ol-attribution li {
  display: inline;
  list-style: none;
}
.ol-attribution li:not(:last-child):after {
  content: " ";
}
.ol-attribution img {
  max-height: 2em;
  max-width: inherit;
  vertical-align: middle;
}
.ol-attribution button {
  flex-shrink: 0;
}
.ol-attribution.ol-collapsed ul {
  display: none;
}
.ol-attribution:not(.ol-collapsed) {
  background: var(--ol-partial-background-color);
}
.ol-attribution.ol-uncollapsible {
  bottom: 0;
  right: 0;
  border-radius: 4px 0 0;
}
.ol-attribution.ol-uncollapsible img {
  margin-top: -.2em;
  max-height: 1.6em;
}
.ol-attribution.ol-uncollapsible button {
  display: none;
}
.ol-zoomslider {
  top: 4.5em;
  left: .5em;
  height: 200px;
}
.ol-zoomslider button {
  position: relative;
  height: 10px;
}
.ol-touch .ol-zoomslider {
  top: 5.5em;
}
.ol-overviewmap {
  left: 0.5em;
  bottom: 0.5em;
}
.ol-overviewmap.ol-uncollapsible {
  bottom: 0;
  left: 0;
  border-radius: 0 4px 0 0;
}
.ol-overviewmap .ol-overviewmap-map, .ol-overviewmap button {
  display: block;
}
.ol-overviewmap .ol-overviewmap-map {
  border: 1px solid var(--ol-subtle-foreground-color);
  height: 150px;
  width: 150px;
}
.ol-overviewmap:not(.ol-collapsed) button {
  bottom: 0;
  left: 0;
  position: absolute;
}
.ol-overviewmap.ol-collapsed .ol-overviewmap-map, .ol-overviewmap.ol-uncollapsible button {
  display: none;
}
.ol-overviewmap:not(.ol-collapsed) {
  background: var(--ol-subtle-background-color);
}
.ol-overviewmap-box {
  border: 1.5px dotted var(--ol-subtle-foreground-color);
}
.ol-overviewmap .ol-overviewmap-box:hover {
  cursor: move;
}
.ol-overviewmap .ol-viewport:hover {
  cursor: pointer;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("/fonts/Vazirmatn.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "B Yekan";
  src: url("/fonts/B-Yekan.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --ink: #18201c;
  --muted: #6c756f;
  --line: #e4e8e5;
  --green: #166534;
  --green-2: #19713c;
  --pale: #f3f8f4;
  --panel: #fbfcfb;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: #eef1ee;
  color: var(--ink);
}
body {
  font-family: Arial, Helvetica, sans-serif;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.builder-shell {
  height: 100vh;
  min-height: 720px;
  display: flex;
  flex-direction: column;
  background: #f0f2f0;
  overflow: hidden;
}
.topbar {
  height: 66px;
  flex: none;
  padding: 0 18px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  background: white;
  border-bottom: 1px solid var(--line);
  z-index: 5;
}
.brand,
.top-actions,
.document-name {
  display: flex;
  align-items: center;
}
.brand {
  gap: 9px;
  font-weight: 750;
  font-size: 20.7px;
  letter-spacing: -0.4px;
  min-width: 0;
}
.brand-project {
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.15;
}
.brand-project > span {
  font-size: 16.1px;
  white-space: nowrap;
}
.brand-project > .brand-project-separator {
  color: #9aa29d;
}
.brand-project > strong {
  max-width: 220px;
  overflow: hidden;
  color: var(--green-2);
  font-size: 13.8px;
  font-weight: 700;
  letter-spacing: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sinic-brand-logo {
  width: 76px;
  height: 34px;
  object-fit: contain;
}
.project-brand-logo,
.builder-auth-project-icon {
  flex: none;
  object-fit: contain;
  border-radius: 7px;
}
.project-brand-logo {
  width: 34px;
  height: 34px;
}
.brand-mark,
.tiny-logo {
  display: grid;
  place-items: center;
  border-radius: 9px;
  color: white;
  background: linear-gradient(145deg, #1d7b43, #0d522b);
}
.brand-mark {
  width: 34px;
  height: 34px;
}
.badge {
  font-size: 11.5px;
  font-weight: 700;
  color: #3f6f50;
  background: #eaf5ed;
  border: 1px solid #d6e9da;
  border-radius: 5px;
  padding: 3px 6px;
  letter-spacing: 0.3px;
}
.document-name {
  flex-direction: column;
  line-height: 1.3;
}
.document-name[data-save-state="error"] {
  padding: 6px 10px;
  border: 1px solid #dc2626;
  border-radius: 6px;
  background: #fee2e2;
  animation: studio-save-error-blink 1.2s ease-in-out infinite;
}
.document-name[data-save-state="error"] small {
  color: #991b1b;
  font-weight: 700;
}
@keyframes studio-save-error-blink {
  0%, 100% {
    background-color: #fee2e2;
    box-shadow: 0 0 0 0 #dc262600;
  }
  50% {
    background-color: #fecaca;
    box-shadow: 0 0 0 3px #dc262640;
  }
}
@media (prefers-reduced-motion: reduce) {
  .document-name[data-save-state="error"] {
    animation: none;
  }
}
.document-name span {
  font-size: 16.1px;
  font-weight: 650;
}
.document-name small {
  max-width: min(520px, 42vw);
  overflow: hidden;
  font-size: 12.65px;
  color: #8b938e;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top-actions {
  justify-content: flex-end;
  gap: 8px;
}
.top-actions button,
.secondary,
.preview-button,
.publish {
  border-radius: 7px;
  height: 36px;
  padding: 0 12px;
  border: 1px solid #dce2de;
  background: white;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 13.8px;
  font-weight: 650;
  color: #344039;
}
.top-actions .icon-button {
  width: 34px;
  padding: 0;
  justify-content: center;
  border-color: transparent;
  color: #59635d;
}
.top-actions .muted {
  color: #b7bdb9;
}
.separator {
  width: 1px;
  height: 24px;
  background: #e3e7e4;
  margin: 0 2px;
}
.top-actions .preview-button {
  border-color: #cbd5ce;
}
.top-actions .publish,
.publish {
  color: white;
  background: var(--green-2);
  border-color: var(--green-2);
}
.user-profile-menu,
.tools-menu {
  position: relative;
}
.tools-menu > summary,
.user-profile-menu > summary {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid #dce2de;
  border-radius: 50%;
  color: #405048;
  background: #f7faf8;
  cursor: pointer;
  list-style: none;
}
.tools-menu > summary {
  width: auto;
  padding: 0 10px;
  display: flex;
  gap: 6px;
  border-radius: 8px;
  font-size: 13.8px;
  font-weight: 700;
}
.tools-menu > summary svg:last-child {
  transition: transform 0.15s ease;
}
.tools-menu[open] > summary svg:last-child {
  transform: rotate(90deg);
}
.tools-menu > summary::-webkit-details-marker,
.user-profile-menu > summary::-webkit-details-marker {
  display: none;
}
.tools-menu[open] > summary,
.user-profile-menu[open] > summary {
  border-color: #9fc5aa;
  color: var(--green-2);
  background: #edf7f0;
}
.tools-dropdown,
.user-profile-dropdown {
  position: absolute;
  z-index: 40;
  top: calc(100% + 10px);
  right: 0;
  left: auto;
  width: 220px;
  padding: 10px;
  border: 1px solid #dce5df;
  border-radius: 12px;
  background: white;
  box-shadow: 0 18px 44px rgb(23 59 40 / 16%);
}
.tools-dropdown {
  width: 230px;
  display: grid;
  gap: 4px;
}
.tools-project-select {
  display: grid;
  gap: 6px;
  margin-bottom: 5px;
  padding: 2px 4px 10px;
  border-bottom: 1px solid var(--line);
  color: #59635d;
  font-size: 12.65px;
  font-weight: 700;
}
.tools-project-select select {
  width: 100%;
  min-width: 0;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #ccd8d0;
  border-radius: 7px;
  background: white;
  color: var(--ink);
  font-size: 13.8px;
  font-weight: 600;
}
.tools-project-select select:focus-visible {
  outline: 2px solid #9fc5aa;
  outline-offset: 1px;
}
.top-actions .tools-dropdown > button {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  justify-content: flex-start;
  border-color: transparent;
  background: transparent;
  font-weight: 600;
}
.top-actions .tools-dropdown > button:hover {
  color: var(--green-2);
  background: #f1f7f3;
}
.top-actions .tools-dropdown > button:disabled {
  color: #b7bdb9;
  cursor: not-allowed;
}
.tools-dropdown kbd {
  margin-inline-start: auto;
  color: #8a948e;
  font-size: 10.35px;
  font-family: inherit;
}
.top-actions .tools-dropdown > .tools-publish {
  margin-top: 4px;
  color: white;
  background: var(--green-2);
}
.top-actions .tools-dropdown > .tools-publish:hover {
  color: white;
  background: var(--green);
}
.database-tuneup-modal {
  width: min(1040px, 96vw);
  max-height: 90vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  border: 1px solid #cfddd4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 90px #102f2260;
}
.database-tuneup-modal > header,
.database-tuneup-modal > footer {
  padding: 15px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-color: #dce6df;
  background: #f8fbf9;
}
.database-tuneup-modal > header {
  border-bottom: 1px solid #dce6df;
}
.database-tuneup-modal > footer {
  border-top: 1px solid #dce6df;
}
.database-tuneup-modal > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.database-tuneup-modal > header b,
.database-tuneup-modal > header small {
  display: block;
}
.database-tuneup-modal > header b {
  color: #263e30;
  font-size: 16.1px;
}
.database-tuneup-modal > header small {
  margin-top: 2px;
  color: #718077;
  font-size: 10.35px;
}
.database-tuneup-modal > header > button {
  border: 0;
  background: transparent;
  color: #718077;
  font-size: 26.45px;
  cursor: pointer;
}
.database-tuneup-summary {
  padding: 12px 18px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #e1e9e4;
}
.database-tuneup-summary > div {
  min-width: 90px;
  padding: 8px 12px;
  border-radius: 9px;
  background: #e8f5ec;
  color: #176b3a;
  text-align: center;
}
.database-tuneup-summary b,
.database-tuneup-summary span {
  display: block;
}
.database-tuneup-summary b {
  font-size: 23px;
}
.database-tuneup-summary span {
  font-size: 9.2px;
}
.database-tuneup-summary p {
  margin: 0;
  color: #66756c;
  font-size: 11.5px;
  line-height: 1.55;
}
.database-tuneup-summary button,
.database-tuneup-modal > footer button {
  min-height: 35px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #9fc5aa;
  border-radius: 8px;
  background: #edf7f0;
  color: #176b3a;
  font-weight: 750;
  cursor: pointer;
}
.database-tuneup-summary button:disabled {
  opacity: .45;
  cursor: default;
}
.database-tuneup-list {
  padding: 14px 18px;
  overflow: auto;
  display: grid;
  gap: 10px;
  background: #f5f8f6;
}
.database-tuneup-list article {
  overflow: hidden;
  border: 1px solid #d4e0d8;
  border-radius: 10px;
  background: #fff;
}
.database-tuneup-list article > header {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #e1e9e4;
}
.database-tuneup-list article > header b,
.database-tuneup-list article > header small {
  display: block;
}
.database-tuneup-list article > header b {
  color: #254a33;
  font-size: 13.8px;
}
.database-tuneup-list article > header small {
  margin-top: 2px;
  color: #7a8980;
  font-size: 9.2px;
}
.database-tuneup-list article > header button {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #d2dfd6;
  border-radius: 7px;
  background: #f6faf7;
  color: #32714a;
  cursor: pointer;
}
.database-tuneup-list article > div {
  padding: 9px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.database-tuneup-list article > div span {
  padding: 4px 7px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  background: #e9f3ec;
  color: #2d6340;
  font-size: 10.35px;
}
.database-tuneup-list article > div i {
  width: 15px;
  height: 15px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  font-style: normal;
  font-size: 8.05px;
}
.database-tuneup-list pre {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  border-top: 1px solid #e6ece8;
  background: #102a1d;
  color: #d7f6e2;
  direction: ltr;
  text-align: left;
  font-size: 11.5px;
}
.database-tuneup-empty {
  min-height: 220px;
  display: grid;
  place-content: center;
  gap: 5px;
  color: #7a8980;
  text-align: center;
}
.database-tuneup-empty b {
  color: #45584d;
}
.database-tuneup-modal > footer span {
  color: #77857c;
  font-size: 10.35px;
}
@media (max-width: 700px) {
  .database-tuneup-summary {
    grid-template-columns: 1fr;
  }
  .database-tuneup-summary > div {
    text-align: start;
  }
}
@media (max-width: 680px) {
  .tools-dropdown,
  .user-profile-dropdown {
    position: fixed;
    top: 58px;
    right: 10px;
    left: 10px;
    width: auto;
  }
  .tools-menu > summary span,
  .tools-menu > summary svg:last-child {
    display: none;
  }
  .tools-menu > summary {
    width: 36px;
    padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
}
.user-profile-dropdown header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px;
  border-bottom: 1px solid var(--line);
}
.user-profile-dropdown header > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: white;
  background: var(--green-2);
}
.user-profile-dropdown header div {
  min-width: 0;
  display: grid;
  gap: 2px;
}
.user-profile-dropdown header b {
  overflow: hidden;
  font-size: 13.8px;
  text-overflow: ellipsis;
}
.user-profile-dropdown header small {
  color: var(--muted);
  font-size: 11.5px;
}
.top-actions .user-profile-dropdown > button {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
  color: #a33434;
  background: #fff8f8;
  border-color: #efdada;
}
.workspace {
  display: grid;
  grid-template-columns: 248px minmax(480px, 1fr) 270px;
  min-height: 0;
  flex: 1;
}
.workspace.preview-mode {
  display: block;
  overflow: auto;
}
.left-panel,
.right-panel {
  background: white;
  min-height: 0;
  overflow: auto;
}
.left-panel {
  border-right: 1px solid var(--line);
}
.right-panel {
  border-left: 1px solid var(--line);
}
.panel-tabs {
  height: 53px;
  display: flex;
  border-bottom: 1px solid var(--line);
  padding: 0 10px;
}
.panel-tabs button {
  flex: 1;
  border: 0;
  background: none;
  color: #838b86;
  font-size: 13.8px;
  font-weight: 650;
  display: flex;
  gap: 7px;
  align-items: center;
  justify-content: center;
  position: relative;
}
.panel-tabs button.active {
  color: #1a6b3a;
}
.panel-tabs button.active:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 12px;
  right: 12px;
  height: 2px;
  background: #1a6b3a;
  border-radius: 2px;
}
.panel-content {
  padding: 17px 14px;
}
.eyebrow {
  color: #89918c;
  font-size: 10.35px;
  font-weight: 750;
  letter-spacing: 1px;
  margin: 0 0 11px;
}
.element-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.element-tile {
  height: 72px;
  border: 1px solid #e2e7e3;
  border-radius: 8px;
  background: #fff;
  text-align: left;
  padding: 10px;
  color: #465049;
  font-size: 12.65px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: 0.15s;
}
.element-tile:hover {
  border-color: #66a27b;
  box-shadow: 0 3px 10px #183b2520;
  transform: translateY(-1px);
}
.element-tile span {
  color: #427154;
}
.page-heading {
  margin-top: 25px;
}
.layout-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.layout-list button {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px;
  border: 1px solid #e5e8e6;
  border-radius: 8px;
  background: white;
  text-align: left;
}
.layout-list .layout-icon {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #f1f6f2;
  color: #35704c;
  display: grid;
  place-items: center;
}
.layout-list span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.layout-list b {
  font-size: 12.65px;
}
.layout-list small {
  font-size: 10.35px;
  color: #8b938d;
}
.canvas-wrap {
  min-width: 0;
  overflow: auto;
  position: relative;
  background-color: #eff2ef;
  background-image: radial-gradient(#cfd5d0 0.7px, transparent 0.7px);
  background-size: 15px 15px;
}
.preview-mode .canvas-wrap {
  min-height: 100%;
}
.canvas-sticky-tools {
  position: sticky;
  top: 0;
  z-index: 3;
}
.canvas-toolbar {
  position: relative;
  height: 47px;
  background: #f8faf8e8;
  backdrop-filter: blur(5px);
  border-bottom: 1px solid #e0e5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  z-index: 2;
  font-size: 11.5px;
  color: #818984;
}
.canvas-toolbar > span:first-child {
  margin-right: 6px;
}
.canvas-toolbar button {
  width: 28px;
  height: 27px;
  border: 0;
  background: transparent;
  border-radius: 5px;
  color: #8b938e;
}
.canvas-toolbar button.active {
  background: #e5ece6;
  color: #296342;
}
.canvas-toolbar .zoom {
  margin-left: 10px;
  padding-left: 12px;
  border-left: 1px solid #dce1dd;
}
.canvas {
  min-height: calc(100% - 47px);
  padding: 34px 42px 80px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.preview-mode .canvas {
  padding: 70px 20px;
}
.form-card {
  width: min(620px, 100%);
  background: white;
  border: 1px solid #e1e5e2;
  border-radius: 12px;
  box-shadow: 0 10px 32px #23312810;
  overflow: hidden;
}
.form-heading {
  padding: 31px 39px 24px;
  border-bottom: 1px solid #edf0ee;
}
.tiny-logo {
  width: 31px;
  height: 31px;
  margin-bottom: 17px;
  border-radius: 8px;
}
.form-heading h1 {
  font-family: Georgia, serif;
  font-size: 31.05px;
  letter-spacing: -0.6px;
  margin: 0 0 7px;
  font-weight: 600;
}
.form-heading p {
  margin: 0;
  color: #778078;
  font-size: 13.8px;
}
.form-elements {
  padding: 25px 38px 17px;
  display: grid;
  grid-template-columns: repeat(1000, minmax(0, 1fr));
  gap: 0;
}
.form-elements > .field-block {
  margin: 7px;
}
.field-block {
  min-width: 0;
  padding: 9px 11px 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  position: relative;
}
.field-block.selected {
  border-color: #3c8b5a;
  background: #fbfefc;
  box-shadow: 0 0 0 2px #dcede2;
}
.field-block label {
  display: block;
  font-size: 12.65px;
  font-weight: 650;
  margin-bottom: 7px;
  color: #38433c;
}
.field-block label em {
  color: #cb4444;
  font-style: normal;
  margin-left: 3px;
}
.input-shell {
  height: 38px;
  border: 1px solid #dfe4e0;
  border-radius: 6px;
  background: white;
  display: flex;
  align-items: center;
  padding-right: 11px;
  color: #89918b;
}
.input-shell input {
  border: 0;
  outline: 0;
  background: transparent;
  flex: 1;
  min-width: 0;
  padding: 0 11px;
  font-size: 12.65px;
  color: #38413b;
}
.input-shell input::placeholder,
textarea::placeholder {
  color: #a0a7a2;
}
.field-block textarea {
  width: 100%;
  height: 68px;
  resize: none;
  border: 1px solid #dfe4e0;
  border-radius: 6px;
  padding: 10px 11px;
  outline: 0;
  font-size: 12.65px;
}
.form-card.form-view-excel .form-elements,
.embedded-form.form-view-excel .imported-form-elements {
  gap: 0;
  align-items: stretch;
}
.form-card.form-view-excel .form-elements > .form-data-element,
.embedded-form.form-view-excel .imported-form-elements > .form-data-element {
  min-height: 66px;
  margin: 0;
  padding: 0;
  outline: 1px solid #c8d6cc;
  outline-offset: -0.5px;
  border-color: transparent;
  border-radius: 0;
  background: white;
}
.form-card.form-view-excel .form-elements > .form-data-element > label,
.embedded-form.form-view-excel .imported-form-elements > .form-data-element > label {
  min-height: 29px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 5px 7px;
  border-bottom: 1px solid #c8d6cc;
  background: #edf4ef;
}
.form-card.form-view-excel .form-elements > .form-data-element :is(.input-shell, input, select, textarea),
.embedded-form.form-view-excel .imported-form-elements > .form-data-element :is(.input-shell, input, select, textarea) {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.form-card.form-view-excel .form-elements > .form-structural-element,
.embedded-form.form-view-excel .imported-form-elements > .form-structural-element {
  margin: 12px 0;
}
.drag-handle {
  position: absolute;
  left: -25px;
  top: 21px;
  border: 0;
  background: white;
  color: #8a928d;
  padding: 2px;
  border-radius: 4px;
}
.field-tools {
  position: absolute;
  right: 5px;
  top: -28px;
  background: #216d3f;
  border-radius: 5px;
  display: flex;
  box-shadow: 0 3px 8px #173c2628;
  overflow: hidden;
}
.field-tools button {
  width: 26px;
  height: 25px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-right: 1px solid #ffffff25;
  color: white;
  background: transparent;
  font-size: 13.8px;
}
.field-index {
  position: absolute;
  right: -25px;
  top: 29px;
  color: #b2b8b4;
  font-size: 10.35px;
}
.check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.65px;
  color: #59635c;
  height: 30px;
}
.switch-control,
.toggle {
  width: 34px;
  height: 19px;
  border-radius: 15px;
  background: #dce2de;
  position: relative;
  border: 0;
  display: block;
}
.switch-control:after,
.toggle i {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  left: 2px;
  top: 2px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px #0002;
  transition: 0.2s;
}
.upload-box {
  height: 55px;
  border: 1px dashed #cfd7d1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: #667168;
  font-size: 12.65px;
}
.form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 21px 38px 26px;
  border-top: 1px solid #edf0ee;
}
.form-submit {
  border: 0;
  background: #176b3a;
  color: white;
  border-radius: 6px;
  height: 38px;
  padding: 0 18px;
  font-size: 12.65px;
  font-weight: 650;
}
.form-footer span {
  font-size: 10.35px;
  color: #a1a8a3;
}
.form-footer b {
  color: #6a746d;
}
.right-title {
  height: 53px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  font-size: 13.8px;
  font-weight: 700;
}
.properties {
  padding: 18px;
}
.selection-type {
  padding: 10px;
  background: #f4f8f5;
  border: 1px solid #e2eae4;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.selection-type > span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid #e0e6e1;
  border-radius: 6px;
  color: #3e7552;
}
.selection-type div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.selection-type b {
  font-size: 12.65px;
}
.selection-type small {
  font-size: 10.35px;
  color: #89918c;
}
.properties > label {
  display: block;
  font-size: 11.5px;
  font-weight: 650;
  margin: 0 0 15px;
  color: #4b554e;
}
.properties input,
.properties select {
  margin-top: 7px;
  width: 100%;
  height: 35px;
  border: 1px solid #dfe4e0;
  border-radius: 6px;
  background: white;
  padding: 0 9px;
  font-size: 11.5px;
  color: #4c554f;
  outline: none;
}
.properties input:focus {
  border-color: #4f9669;
  box-shadow: 0 0 0 2px #e0f0e5;
}
.process-copy-fields {
  margin: 0 0 15px;
  color: #4b554e;
  font-size: 11.5px;
  font-weight: 650;
}
.process-default-field {
  margin-bottom: 15px;
}
.process-default-field > label {
  display: block;
  color: #4b554e;
  font-size: 11.5px;
  font-weight: 650;
  margin-bottom: 7px;
}
.process-default-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.process-default-picker {
  flex: 1;
  min-width: 0;
}
.process-default-picker input {
  margin-top: 0;
}
.process-default-control > button {
  flex-shrink: 0;
  min-height: 35px;
  padding: 0 12px;
  border: 1px solid #c6ddce;
  border-radius: 6px;
  background: #f0f7f2;
  color: #176b3a;
  font-size: 11.5px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
}
.process-default-control > button:hover {
  background: #e0f0e5;
}
.process-default-control > button:focus-visible {
  outline: 2px solid #4f9669;
  outline-offset: 2px;
}
.process-default-help {
  display: block;
  margin: -3px 0 15px;
  color: #89918c;
  font-size: 10.35px;
  line-height: 1.6;
}
.process-copy-fields > .field-multi-combo {
  margin-top: 7px;
}
.process-copy-fields .field-multi-combo-values input {
  height: 24px;
  margin-top: 0;
}
.property-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 22px 0;
}
.property-row span {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.property-row b {
  font-size: 11.5px;
}
.property-row small {
  font-size: 10.35px;
  color: #929994;
}
.field-state-switches {
  margin: 16px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.field-state-switches > label {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  color: #4b554e;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 650;
  line-height: 1;
}
.field-state-switches > label > span {
  font: inherit;
}
.field-state-switches .toggle {
  flex: 0 0 auto;
  transform: scale(.82);
}
.toggle.on {
  background: #287a46;
}
.toggle.on i {
  left: 17px;
}
.properties hr {
  border: 0;
  border-top: 1px solid #edf0ee;
  margin: 20px 0;
}
.delete-field {
  color: #b53d3d;
  background: #fff;
  border: 1px solid #efdddd;
  border-radius: 6px;
  width: 100%;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 11.5px;
}
.empty-properties {
  color: #89928c;
  text-align: center;
  padding: 70px 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.empty-properties b {
  font-size: 13.8px;
  color: #4d5750;
}
.empty-properties p {
  font-size: 11.5px;
  line-height: 1.5;
  margin: 0;
}
.properties-toggle,
.properties-close {
  display: none;
}
.form-properties textarea {
  width: 100%;
  min-height: 90px;
  margin-top: 7px;
  padding: 9px;
  resize: vertical;
  border: 1px solid #dfe4e0;
  border-radius: 6px;
  background: white;
  color: #4c554f;
  outline: none;
  font-size: 11.5px;
  line-height: 1.5;
}
.form-properties textarea:focus {
  border-color: #4f9669;
  box-shadow: 0 0 0 2px #e0f0e5;
}
.properties > .object-options-json {
  display: block;
  padding: 12px;
  border: 1px solid #30483a;
  border-radius: 8px;
  background: #15221a;
  color: #d8eadc;
}
.properties > .object-options-json textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 112px;
  margin-top: 8px;
  padding: 10px;
  resize: vertical;
  border: 1px solid #3d5c49;
  border-radius: 6px;
  outline: 0;
  background: #0f1913;
  color: #d8eadc;
  caret-color: #77ca8d;
  font: 11px/1.6 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  direction: ltr;
  text-align: left;
  tab-size: 2;
}
.properties > .object-options-json textarea::placeholder {
  color: #6f8a78;
}
.properties > .object-options-json textarea:focus {
  border-color: #77ca8d;
  box-shadow: 0 0 0 2px #77ca8d26;
}
.properties > .object-options-json small {
  display: block;
  margin-top: 8px;
  color: #93aa9b;
  font-weight: 400;
  line-height: 1.6;
}
.properties > .object-options-json code {
  padding: 1px 4px;
  border: 1px solid #3b5746;
  border-radius: 4px;
  background: #0d1711;
  color: #9ddcaf;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.property-summary {
  min-height: 38px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e1e7e3;
  border-radius: 6px;
  background: #f7faf8;
  color: #667169;
  font-size: 11.5px;
}
.property-summary b {
  color: #176b3a;
}
.object-field-actions {
  margin: -6px 0 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
.add-object-fields {
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #8eb79b;
  border-radius: 6px;
  background: #eaf4ec;
  color: #176b3a;
  font-size: 10.35px;
  font-weight: 750;
}
.add-object-fields:disabled {
  cursor: not-allowed;
  border-color: #dce3de;
  background: #f3f5f3;
  color: #a2aaa4;
}
.clear-form-fields {
  height: 34px;
  padding: 0 11px;
  border: 1px solid #e5caca;
  border-radius: 6px;
  background: #fff4f4;
  color: #a33c3c;
  font-size: 10.35px;
  font-weight: 750;
}
.clear-form-fields:disabled {
  cursor: not-allowed;
  border-color: #e1e5e2;
  background: #f4f5f4;
  color: #a7aea9;
}
.form-bottom-buttons {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.empty-bottom-button {
  height: 34px;
  padding: 0 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px dashed #8eb19a;
  border-radius: 6px;
  background: #f2f8f3;
  color: #246b3e;
  font-size: 10.35px;
  font-weight: 700;
}
.form-buttons-heading {
  margin: 20px 0 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form-buttons-heading .eyebrow {
  margin: 0;
}
.form-buttons-heading > button {
  height: 28px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #bdd3c4;
  border-radius: 5px;
  background: #edf6ef;
  color: #176b3a;
  font-size: 9.2px;
  font-weight: 700;
}
.action-helper-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}
.action-helper-bar small {
  margin-right: 3px;
  color: #718096;
  font-size: 9.2px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.action-helper-bar button {
  padding: 3px 7px;
  border: 1px solid #c9d9ce;
  border-radius: 10px;
  background: #f1f8f3;
  color: #176b3a;
  font-size: 9.2px;
  cursor: pointer;
}
.action-helper-bar button:hover {
  background: #dff0e4;
}
.field-block:has(> button.form-submit) {
  padding-top: 0;
  padding-bottom: 0;
}
.field-block:has(> button.form-submit) > label {
  display: none;
}
.field-block > button.form-submit {
  width: 100%;
}
.form-button-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-button-config {
  padding: 8px;
  border: 1px solid #dfe6e1;
  border-radius: 7px;
  background: #f8faf8;
}
.form-button-config > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 5px;
}
.form-button-config > div input {
  margin: 0;
}
.form-button-config > div button {
  border: 0;
  border-radius: 5px;
  background: #f6eaea;
  color: #a13b3b;
  display: grid;
  place-items: center;
}
.form-button-config label {
  display: block;
  margin-top: 7px;
  color: #667169;
  font-size: 9.2px;
  font-weight: 700;
}
.form-button-config textarea {
  width: 100%;
  height: 68px;
  margin-top: 5px;
  padding: 7px;
  resize: vertical;
  border: 1px solid #26382d;
  border-radius: 5px;
  outline: none;
  background: #15221a;
  color: #d8eadc;
  font: 8px/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.object-key-control {
  margin-top: 7px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
}
.object-key-control select,
.object-key-control .searchable-combobox input {
  margin: 0;
}
.object-key-control > button {
  height: 35px;
  padding: 0 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #bdd3c4;
  border-radius: 6px;
  background: #edf6ef;
  color: #176b3a;
  font-size: 9.2px;
  font-weight: 750;
}
.object-key-control > button:disabled {
  cursor: not-allowed;
  border-color: #dce3de;
  background: #f3f5f3;
  color: #a2aaa4;
}
.object-key-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 18px;
  display: grid;
  place-items: center;
  background: #17251d80;
  backdrop-filter: blur(2px);
}
.object-key-modal {
  width: min(430px, 100%);
  overflow: hidden;
  border-radius: 10px;
  background: white;
  box-shadow: 0 24px 70px #10221860;
}
.object-key-modal > header {
  min-height: 58px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e1e7e3;
}
.object-key-modal > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #176b3a;
}
.object-key-modal > header > div > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.object-key-modal header b {
  color: #354139;
  font-size: 14.95px;
}
.object-key-modal header small {
  color: #849087;
  font-size: 9.2px;
}
.object-key-modal header > button {
  border: 0;
  background: transparent;
  color: #78847b;
  font-size: 26.45px;
}
.object-key-modal > div {
  padding: 16px;
}
.object-key-modal label {
  display: block;
  margin-bottom: 12px;
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.object-key-modal input:not([type="checkbox"]):not([type="radio"]),
.object-key-modal select,
.object-key-modal textarea {
  width: 100%;
  margin-top: 5px;
  padding: 0 9px;
  border: 1px solid #d9e2db;
  border-radius: 6px;
  background: white;
  color: #354139;
  font-size: 10.35px;
  outline: 0;
}
.object-key-modal input:not([type="checkbox"]):not([type="radio"]),
.object-key-modal select {
  height: 35px;
}
.object-key-modal input[type="checkbox"],
.object-key-modal input[type="radio"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  padding: 0;
  flex: 0 0 16px;
  accent-color: #176b3a;
}
.object-key-modal textarea {
  height: 100px;
  padding-top: 8px;
  resize: vertical;
}
.object-key-modal label small {
  display: block;
  margin-top: 5px;
  color: #929b95;
  font-size: 9.2px;
  font-weight: 400;
}
.object-key-modal > footer {
  padding: 10px 14px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e1e7e3;
}
.object-key-modal > footer button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: #176b3a;
  color: white;
  font-size: 10.35px;
  font-weight: 700;
}
.object-options-modal {
  width: min(720px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.object-options-modal > div {
  overflow: auto;
}
.object-options-modal h4 {
  margin: 5px 0 10px;
  color: #637068;
  font-size: 11.5px;
  letter-spacing: 0.5px;
}
.object-basic-properties {
  display: grid;
  grid-template-columns: 1fr 1fr 120px;
  gap: 9px;
}
.object-options-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}
.object-options-fields > label:last-child {
  grid-column: 1/-1;
}
.object-options-fields > label:has(> input[type="checkbox"]) {
  display: flex;
  align-items: center;
  align-self: end;
  gap: 8px;
  min-height: 35px;
  cursor: pointer;
}
.object-options-fields select[multiple] {
  height: 86px;
  padding: 5px;
}
.options-json-label {
  margin-top: 13px;
}
.options-json-label textarea {
  height: 190px;
  padding: 10px;
  background: #15221a;
  color: #d8eadc;
  caret-color: #77ca8d;
  font: 9px/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}
.object-key-modal .json-error {
  color: #b43d3d;
  font-weight: 700;
}
.lookup-source-editor {
  margin: 0 0 13px;
  overflow-x: auto;
  border: 1px solid #dfe7e1;
  border-radius: 7px;
  background: #fafcfb;
}
.lookup-source-table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  table-layout: fixed;
}
.lookup-source-table th {
  padding: 8px 9px;
  border-bottom: 1px solid #dfe7e1;
  background: #f1f6f2;
  color: #647168;
  font-size: 9.2px;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.35px;
}
.lookup-source-table th:last-child {
  width: 38px;
}
.lookup-source-table td {
  padding: 5px;
  border-bottom: 1px solid #e7ece8;
}
.lookup-source-table input {
  height: 31px;
  margin: 0;
}
.lookup-source-table td > button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 5px;
  background: #f8eaea;
  color: #a13b3b;
  font-size: 19.55px;
  line-height: 1;
}
.lookup-source-table .lookup-source-empty td {
  padding: 16px;
  color: #8b968e;
  font-size: 10.35px;
  text-align: center;
}
.lookup-source-add {
  height: 30px;
  margin: 8px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #bdd3c4;
  border-radius: 5px;
  background: #edf6ef;
  color: #176b3a;
  font-size: 9.2px;
  font-weight: 700;
}
@media (max-width: 600px) {
  .object-basic-properties,
  .object-options-fields {
    grid-template-columns: 1fr;
  }
  .object-options-fields > label:last-child {
    grid-column: auto;
  }
}
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: #17251d90;
  display: grid;
  place-items: center;
  z-index: 20;
  padding: 20px;
  backdrop-filter: blur(3px);
}
.code-modal {
  width: min(640px, 100%);
  max-height: 85vh;
  background: white;
  border-radius: 12px;
  padding: 22px;
  box-shadow: 0 25px 70px #0b181060;
}
.code-modal > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.code-modal h2 {
  margin: 0;
  font-family: Georgia, serif;
}
.code-modal > div button {
  border: 0;
  background: transparent;
  font-size: 28.75px;
  color: #727b75;
}
.code-modal p {
  color: #738078;
  font-size: 13.8px;
}
.code-modal pre {
  background: #15221a;
  color: #d7eadc;
  border-radius: 8px;
  padding: 17px;
  overflow: auto;
  max-height: 52vh;
  font-size: 12.65px;
  line-height: 1.5;
}
.code-modal > .publish {
  float: right;
  padding: 0 16px;
}
.embedded-page-element {
  min-width: 0;
  overflow: auto;
  border: 1px solid #dce5df;
  border-radius: 8px;
  background: #f8faf8;
}
.embedded-page-element > .tabs-preview,
.embedded-page-element > .layout-preview,
.embedded-page-element > .table-card {
  width: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.embedded-page-element > .embedded-form {
  width: min(420px, 100%);
  margin: 0 auto;
  border: 0;
  box-shadow: none;
}
.embedded-page-element .preview-tab-content {
  min-height: 260px;
  padding: 14px;
}
.embedded-page-element .layout-preview-body {
  min-height: 300px;
}
@media (max-width: 950px) {
  .workspace {
    grid-template-columns: 220px minmax(420px, 1fr);
  }
  .right-panel {
    display: none;
  }
  .document-name {
    display: none;
  }
  .topbar {
    grid-template-columns: 1fr 1fr;
  }
  .element-grid {
    grid-template-columns: 1fr;
  }
  .element-tile {
    height: 55px;
  }
  .canvas {
    padding-inline: 25px;
  }
}
@media (max-width: 680px) {
  .builder-shell {
    min-height: 650px;
  }
  .left-panel {
    display: none;
  }
  .workspace {
    display: block;
  }
  .canvas-wrap {
    height: calc(100vh - 66px);
  }
  .top-actions .icon-button,
  .top-actions .secondary,
  .separator {
    display: none;
  }
  .brand .badge {
    display: none;
  }
  .top-actions {
    gap: 5px;
  }
  .topbar {
    padding: 0 10px;
  }
  .form-heading,
  .form-elements,
  .form-footer {
    padding-left: 22px;
    padding-right: 22px;
  }
  .canvas {
    padding: 20px 10px 60px;
  }
  .canvas-toolbar {
    display: none;
  }
  .form-heading h1 {
    font-size: 26.45px;
  }
}
body {
  font-family: Tahoma, Arial, sans-serif;
  direction: rtl;
}
.left-panel {
  border-right: 0;
  border-left: 1px solid var(--line);
}
.right-panel {
  border-left: 0;
  border-right: 1px solid var(--line);
}
.element-tile,
.layout-list button {
  text-align: right;
}
.drag-handle {
  left: auto;
  right: -25px;
}
.field-tools {
  right: auto;
  left: 5px;
}
.field-index {
  right: auto;
  left: -25px;
}
.switch-control:after,
.toggle i {
  left: auto;
  right: 2px;
}
.toggle.on i {
  left: auto;
  right: 17px;
}
.field-block label em {
  margin-left: 0;
  margin-right: 3px;
}
.input-shell {
  padding-right: 0;
  padding-left: 11px;
}
.form-heading h1,
.code-modal h2 {
  font-family: Tahoma, Arial, sans-serif;
}
.code-modal pre {
  text-align: left;
  direction: ltr;
}
.top-actions .publish svg {
  transform: scaleX(-1);
}
.workspace {
  grid-template-columns: 340px minmax(480px, 1fr) var(--properties-width, 360px);
}
.workspace.forms-workspace {
  grid-template-columns: var(--forms-panel-width, 260px) minmax(480px, 1fr) var(
      --properties-width,
      360px
    );
}
.workspace.single-menu-view {
  grid-template-columns: 340px minmax(480px, 1fr) var(--properties-width, 360px);
}
.left-panel,
.right-panel {
  position: relative;
}
.forms-panel-splitter {
  position: absolute;
  z-index: 8;
  top: 0;
  right: -5px;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}
.forms-panel-splitter span {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 4px;
  height: 48px;
  border-radius: 4px;
  background: #c7d4ca;
  transform: translateY(-50%);
  transition: 0.15s;
}
.forms-panel-splitter:hover span,
.forms-panel-splitter:active span {
  background: #2b8150;
  box-shadow: 0 0 0 3px #ddefe2;
}
.properties-splitter {
  position: absolute;
  z-index: 8;
  top: 0;
  bottom: 0;
  left: -5px;
  width: 10px;
  cursor: col-resize;
  touch-action: none;
}
.properties-splitter span {
  position: absolute;
  top: 50%;
  left: 3px;
  width: 4px;
  height: 48px;
  border-radius: 4px;
  background: #c7d4ca;
  transform: translateY(-50%);
  transition: 0.15s;
}
.properties-splitter:hover span,
.properties-splitter:active span {
  background: #2b8150;
  box-shadow: 0 0 0 3px #ddefe2;
}
body.resizing-properties {
  cursor: col-resize;
  user-select: none;
}
body.resizing-properties * {
  cursor: col-resize !important;
}
body.resizing-forms-panel {
  cursor: col-resize;
  user-select: none;
}
body.resizing-forms-panel * {
  cursor: col-resize !important;
}
.workspace.web-services-workspace {
  grid-template-columns: 340px minmax(520px, 1fr);
}
.web-services-workspace .right-panel,
.web-services-workspace .canvas {
  display: none;
}
.workspace.prefs-workspace {
  grid-template-columns: 340px minmax(520px, 1fr);
}
.workspace.schedule-workspace {
  grid-template-columns: 76px minmax(760px, 1fr);
}
.schedule-workspace .left-panel {
  overflow-x: hidden;
}
.schedule-workspace .canvas {
  padding: 0;
  background: #edf2ee;
}
.schedule-workspace .device-viewport {
  width: 100%;
  max-width: none;
  min-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.schedule-designer {
  width: 100%;
  min-height: 100%;
  padding: 22px;
  color: #314139;
}
.schedule-designer > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.schedule-designer > header div {
  display: grid;
  gap: 3px;
}
.schedule-designer > header b {
  font-size: 20.7px;
}
.schedule-designer > header small {
  color: #78857d;
  font-size: 11.5px;
}
.schedule-designer > header button,
.schedule-job-list .no-forms button {
  padding: 9px 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  border-radius: 7px;
  background: #17723e;
  color: white;
  cursor: pointer;
}
.schedule-helper-strip {
  margin-bottom: 14px;
  padding: 10px 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border: 1px solid #cfe0d4;
  border-radius: 8px;
  background: #f8fbf9;
  font-size: 10.35px;
}
.schedule-helper-strip code {
  padding: 3px 6px;
  border-radius: 10px;
  background: #e6f2e9;
  color: #176b3a;
}
.schedule-job-list {
  display: grid;
  gap: 12px;
}
.schedule-job-card {
  padding: 14px;
  border: 1px solid #c8ddd0;
  border-radius: 10px;
  background: white;
  box-shadow: 0 3px 12px #294e3710;
}
.schedule-job-heading,
.schedule-timing-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  align-items: end;
  gap: 10px;
}
.schedule-timing-grid {
  grid-template-columns: minmax(150px, .7fr) 100px minmax(240px, 1fr);
  margin-top: 12px;
}
.schedule-job-card label {
  display: grid;
  gap: 5px;
  color: #526158;
  font-size: 10.35px;
  font-weight: 700;
}
.schedule-job-card input,
.schedule-job-card select {
  width: 100%;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #cfddd3;
  border-radius: 6px;
  background: white;
  color: #34443a;
}
.schedule-job-card .schedule-enabled {
  grid-template-columns: auto auto;
  align-items: center;
  padding-bottom: 9px;
}
.schedule-job-card .schedule-enabled input {
  width: 17px;
  height: 17px;
}
.schedule-delete {
  width: 35px;
  height: 35px;
  border: 1px solid #e5baba;
  border-radius: 6px;
  background: #fff4f4;
  color: #ae3434;
}
.schedule-run {
  height: 35px;
  padding: 0 12px;
  border: 1px solid #83b797;
  border-radius: 6px;
  background: #edf8f0;
  color: #176b3a;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.schedule-run:disabled {
  cursor: wait;
  opacity: .65;
}
.schedule-run-result {
  display: block;
  margin-top: 7px;
  font-size: 11.5px;
}
.schedule-run-result.success {
  color: #17723e;
}
.schedule-run-result.error {
  color: #b52e2e;
}
.schedule-script {
  width: 100%;
  margin-top: 12px;
}
.schedule-script .expandable-code-editor,
.schedule-script .javascript-editor {
  width: 100%;
}
.schedule-script .javascript-editor {
  display: block;
  min-height: 240px;
  padding: 14px 44px 14px 14px;
  resize: vertical;
  border: 1px solid #26382d;
  border-radius: 8px;
  outline: 0;
  background: #101b14;
  color: #d8eadc;
  caret-color: #77ca8d;
  font: 12px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  direction: ltr;
  text-align: left;
  tab-size: 2;
}
.schedule-script .javascript-editor:focus {
  border-color: #5ca573;
  box-shadow: 0 0 0 3px #5ca57326;
}
@media (max-width: 850px) {
  .workspace.schedule-workspace {
    grid-template-columns: 64px minmax(0, 1fr);
  }
  .schedule-job-heading,
  .schedule-timing-grid {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}
.prefs-workspace .right-panel,
.prefs-workspace .canvas,
.prefs-workspace .canvas-toolbar,
.theme-workspace .right-panel,
.theme-workspace .canvas,
.theme-workspace .canvas-toolbar {
  display: none;
}
.standalone-pref {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 24px;
  background: #f3f6f3;
}
.standalone-theme {
  min-height: 0;
  flex: 1;
  padding: 28px;
  overflow: auto;
  background: #f6f8f7;
}
.standalone-theme > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.standalone-theme > header h2 {
  margin: 0 0 6px;
}
.standalone-theme > header p {
  margin: 0;
  color: #64726a;
}
.standalone-theme > header button {
  padding: 8px 13px;
  border: 1px solid #c7d3cb;
  border-radius: 7px;
  background: white;
  cursor: pointer;
}
.theme-maker {
  margin-bottom: 20px;
  overflow: hidden;
  border: 1px solid #d6e2da;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px #21382a0c;
}
.theme-maker > header {
  min-height: 68px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid #e4ebe6;
  background: #fafcfb;
}
.theme-maker > header > div {
  display: grid;
  gap: 3px;
}
.theme-maker > header b {
  font-size: 16.1px;
}
.theme-maker > header small {
  color: #718078;
  font-size: 11.5px;
}
.theme-maker > header button {
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  background: #176b3a;
  color: #fff;
  font-weight: 750;
  cursor: pointer;
}
.theme-maker-body {
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr)) minmax(240px, 1.25fr);
  gap: 16px;
}
.theme-maker-color {
  min-width: 0;
  margin: 0;
  padding: 12px;
  border: 1px solid #dce5df;
  border-radius: 10px;
}
.theme-maker-color legend {
  padding: 0 5px;
  color: #394a40;
  font-size: 12.65px;
  font-weight: 800;
}
.theme-maker-current {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 10px;
}
.theme-maker-current input {
  width: 38px;
  height: 32px;
  padding: 2px;
  border: 1px solid #cbd7cf;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}
.theme-maker-current code {
  color: #526158;
  font-size: 11.5px;
  text-transform: uppercase;
}
.theme-maker-palette {
  display: grid;
  grid-template-columns: repeat(6, 26px);
  gap: 7px;
}
.theme-maker-palette button {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 7px;
  box-shadow: 0 0 0 1px #cbd7cf;
  cursor: pointer;
}
.theme-maker-palette button.selected {
  box-shadow: 0 0 0 2px #172c21, inset 0 0 0 2px #fff;
  transform: scale(1.05);
}
.theme-maker-result {
  min-height: 132px;
  padding: 10px;
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  border: 1px solid #dce5df;
  border-radius: 10px;
}
.theme-maker-result > aside {
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 23px;
  font-weight: 900;
}
.theme-maker-result > div {
  min-width: 0;
  padding: 13px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 10px;
  border: 1px solid;
  border-radius: 8px;
}
.theme-maker-result span {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 800;
}
.theme-maker-result button {
  padding: 7px 11px;
  border: 0;
  border-radius: 6px;
  color: #fff;
  font-size: 11.5px;
}
@media (max-width: 1000px) {
  .theme-maker-body {
    grid-template-columns: 1fr 1fr;
  }
  .theme-maker-result {
    grid-column: 1 / -1;
  }
}
@media (max-width: 680px) {
  .theme-maker > header {
    align-items: stretch;
    flex-direction: column;
  }
  .theme-maker-body {
    grid-template-columns: 1fr;
  }
  .theme-maker-result {
    grid-column: auto;
  }
}
.theme-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  padding: 22px;
  border: 1px solid #dce4df;
  border-radius: 12px;
  background: white;
}
.theme-editor-grid > label {
  display: grid;
  gap: 7px;
  color: #34443b;
  font-size: 13.8px;
  font-weight: 700;
}
.theme-editor-grid input:not([type="color"]), .theme-editor-grid select {
  min-width: 0;
  height: 38px;
  padding: 7px 10px;
  border: 1px solid #c6d3cb;
  border-radius: 7px;
  background: white;
}
.theme-color-field > div {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 7px;
}
.theme-color-field input[type="color"] {
  width: 42px;
  height: 38px;
  padding: 2px;
  border: 1px solid #c6d3cb;
  border-radius: 7px;
  background: white;
  cursor: pointer;
}
.theme-range-field {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.theme-range-field input {
  flex: 1;
}
.theme-range-field output {
  min-width: 38px;
  color: #526158;
}
.theme-preview {
  min-height: 190px;
  margin-top: 20px;
  padding: 18px;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  border: 1px solid #dce4df;
  border-radius: 12px;
  overflow: hidden;
}
.theme-preview > aside {
  padding: 18px;
  color: white;
  border-radius: 8px;
}
.theme-preview > article {
  padding: 22px;
  display: grid;
  place-content: center start;
  gap: 10px;
  border: 1px solid;
}
.theme-preview > article small {
  display: block;
}
.theme-preview > article button {
  width: max-content;
  padding: 9px 14px;
  border: 0;
  color: white;
}
.themed-application-preview {
  font-family: var(--theme-font-family);
}
.themed-application-preview .application-preview-window,
.themed-application-preview .application-preview-body,
.themed-application-preview .menu-preview-card,
.themed-application-preview .program-topbar {
  color: var(--ink);
  background: var(--theme-surface);
}
.themed-application-preview .application-preview-body {
  background: var(--theme-background);
}
.themed-application-preview .menu-preview-card > aside {
  background: var(--theme-sidebar);
}
.themed-application-preview .brand-mark,
.themed-application-preview .application-preview-topbar button,
.themed-application-preview .menu-preview-item.active {
  background: var(--theme-primary);
}
.themed-application-preview .menu-preview-card,
.themed-application-preview button,
.themed-application-preview input,
.themed-application-preview select,
.themed-application-preview textarea {
  border-radius: var(--theme-radius);
}
.themed-application-preview[dir="ltr"] .application-preview-window,
.themed-application-preview[dir="ltr"] .application-preview-body,
.themed-application-preview[dir="ltr"] .menu-preview-card,
.themed-application-preview[dir="ltr"] .program-topbar,
.themed-application-preview[dir="ltr"] .program-identity,
.themed-application-preview[dir="ltr"] .program-top-actions,
.themed-application-preview[dir="ltr"] .menu-preview-brand,
.themed-application-preview[dir="ltr"] .menu-preview-user {
  direction: ltr;
  text-align: left;
}
.pref-editor {
  width: min(980px, 100%);
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #dce5de;
  border-radius: 12px;
  background: white;
  box-shadow: 0 12px 36px #21382a10;
}
.pref-editor > header {
  min-height: 72px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e4eae6;
}
.pref-editor > header > div {
  display: flex;
  align-items: center;
  gap: 11px;
}
.pref-editor > header > div > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8f3eb;
  color: #176b3a;
}
.pref-editor h2 {
  margin: 2px 0 0;
  font-size: 18.4px;
}
.pref-editor header small {
  color: #839087;
  font-size: 9.2px;
  letter-spacing: 0.6px;
}
.pref-editor > header > button {
  height: 31px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #efcece;
  border-radius: 6px;
  background: #fff7f7;
  color: #a23e3e;
  font-size: 10.35px;
}
.pref-editor-body {
  padding: 20px;
}
.pref-basic-fields {
  display: grid;
  grid-template-columns: 1fr 190px;
  gap: 12px;
}
.pref-editor label {
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.pref-editor input,
.pref-editor select,
.pref-editor textarea {
  width: 100%;
  margin-top: 6px;
  border: 1px solid #d5dfd8;
  border-radius: 6px;
  background: white;
  color: #354139;
  font-size: 11.5px;
  outline: 0;
}
.pref-editor input,
.pref-editor select {
  height: 36px;
  padding: 0 9px;
}
.pref-editor textarea {
  min-height: 100px;
  padding: 10px;
  resize: vertical;
}
.pref-scalar {
  display: block;
  margin-top: 18px;
}
.pref-array-editor {
  margin-top: 20px;
}
.pref-idnames-head,
.pref-idnames-row {
  display: grid;
  grid-template-columns: 160px minmax(180px, 1fr) 32px;
  gap: 7px;
  align-items: center;
}
.pref-idnames-head {
  padding: 0 5px;
  color: #89938c;
  font-size: 9.2px;
}
.pref-idnames-row input {
  margin-top: 0;
}
.pref-idnames-row > button,
.pref-table-scroll button {
  border: 0;
  background: transparent;
  color: #b34a4a;
}
.pref-column-adder {
  margin: 10px 0;
  display: flex;
  gap: 7px;
}
.pref-column-adder input {
  max-width: 240px;
  margin: 0;
}
.pref-column-adder button {
  padding: 0 12px;
  border: 1px solid #b9d0c0;
  border-radius: 6px;
  background: #edf6f0;
  color: #176b3a;
}
.pref-table-columns {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.pref-table-column {
  border: 1px solid #dfe8e2;
  border-radius: 7px;
  background: #f9fbfa;
}
.pref-table-column summary {
  display: flex;
  justify-content: space-between;
  padding: 9px 11px;
  cursor: pointer;
  color: #435249;
}
.pref-table-column summary code {
  color: #18804a;
  font-size: 10.35px;
}
.pref-table-column-basic,
.pref-table-column-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  padding: 0 11px 11px;
}
.pref-table-column-options select[multiple] {
  min-height: 90px;
  height: auto;
  padding: 5px;
}
.pref-column-options-json {
  display: block;
  padding: 0 11px 11px;
}
.pref-column-options-json textarea {
  min-height: 92px;
  font-family: monospace;
}
.pref-table-scroll {
  overflow: auto;
}
.pref-table-scroll table {
  width: 100%;
  border-collapse: collapse;
}
.pref-table-scroll th,
.pref-table-scroll td {
  padding: 6px;
  border: 1px solid #e1e7e3;
  font-size: 10.35px;
}
.pref-table-scroll th {
  background: #f6f9f7;
  text-align: left;
}
.pref-table-scroll th button {
  float: right;
}
.pref-table-scroll input,
.pref-table-scroll select {
  min-width: 110px;
  margin: 0;
}
.standalone-pref-empty {
  min-height: 320px;
  display: grid;
  place-content: center;
  gap: 7px;
  text-align: center;
  color: #839087;
}
.standalone-pref-empty b {
  color: #3e4942;
}
.standalone-web-service {
  min-height: 0;
  flex: 1;
  overflow: auto;
  padding: 24px;
  background-color: #eff2ef;
  background-image: radial-gradient(#cfd5d0 0.7px, transparent 0.7px);
  background-size: 15px 15px;
}
.web-service-editor {
  width: min(1140px, 100%);
  margin: 0 auto;
  color: #38433c;
}
.web-service-title {
  margin-bottom: 14px;
  padding: 14px 16px;
  border: 1px solid #dfe4e0;
  border-radius: 8px;
  background: white;
  box-shadow: 0 5px 18px #2331280a;
}
.web-service-title label {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: #4b554e;
  font-size: 13.8px;
  font-weight: 700;
}
.web-service-title input,
.web-service-request input,
.web-service-request select,
.web-service-request textarea,
.web-service-headers input,
.web-service-auth input,
.web-service-auth select {
  width: 100%;
  border: 1px solid #dfe4e0;
  border-radius: 6px;
  outline: 0;
  background: white;
  color: #38413b;
  font: 12px Arial,
    sans-serif;
  transition: border-color 0.15s,
    box-shadow 0.15s;
}
.web-service-title input:focus,
.web-service-request input:focus,
.web-service-request select:focus,
.web-service-request textarea:focus,
.web-service-headers input:focus,
.web-service-auth input:focus,
.web-service-auth select:focus {
  border-color: #4f9669;
  box-shadow: 0 0 0 2px #e0f0e5;
}
.web-service-title input,
.web-service-request input,
.web-service-request select,
.web-service-headers input,
.web-service-auth input,
.web-service-auth select {
  height: 38px;
  padding: 0 11px;
}
.web-service-section {
  margin-bottom: 18px;
  border: 1px solid #19713c;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0 5px 18px #2331280a;
}
.web-service-section summary {
  height: 42px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  background: linear-gradient(135deg, #19713c, #166534);
  color: white;
  font-size: 14.95px;
  font-weight: 700;
}
.web-service-section summary::-webkit-details-marker {
  display: none;
}
.web-service-section summary b {
  font-size: 19.55px;
  transition: transform 0.15s;
}
.web-service-section:not([open]) {
  border-color: #19713c;
}
.web-service-section[open] summary b {
  transform: rotate(180deg);
}
.web-service-request {
  padding: 13px 20px 20px;
}
.web-service-request label {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr) 110px;
  align-items: start;
  margin-bottom: 14px;
  color: #4b554e;
  font-size: 12.65px;
  font-weight: 700;
}
.web-service-request label > span {
  padding-top: 12px;
}
.web-service-request .web-service-payload {
  grid-template-columns: 90px minmax(0, 1fr);
}
.web-service-request textarea {
  min-height: 215px;
  padding: 12px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.web-service-url input {
  border-radius: 6px 0 0 6px;
}
.web-service-url select {
  border-left: 0;
  border-radius: 0 6px 6px 0;
  background: #17251d;
  color: white;
}
.web-service-headers,
.web-service-auth {
  padding: 16px 20px;
}
.web-service-header-labels,
.web-service-header-row {
  display: grid;
  grid-template-columns: 1fr 1.4fr 34px;
  gap: 8px;
  align-items: center;
}
.web-service-header-labels {
  margin-bottom: 5px;
  color: #6c756f;
  font-size: 11.5px;
  font-weight: 700;
}
.web-service-header-row {
  margin-bottom: 7px;
}
.web-service-header-row button {
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 4px;
  background: #f5e6e6;
  color: #a43939;
  font-size: 19.55px;
}
.web-service-add-header {
  height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #b9cfbe;
  border-radius: 6px;
  background: #edf7ef;
  color: #19713c;
  font-size: 11.5px;
  font-weight: 700;
}
.web-service-add-header:hover {
  border-color: #8eb79b;
  background: #e4f2e8;
}
.web-service-auth {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.web-service-auth label {
  color: #4b554e;
  font-size: 11.5px;
  font-weight: 700;
}
.web-service-auth label > * {
  display: block;
  margin-top: 6px;
}
.web-service-send {
  display: flex;
  justify-content: flex-end;
}
.web-service-send button {
  height: 38px;
  padding: 0 18px;
  border: 1px solid var(--green-2);
  border-radius: 6px;
  background: var(--green-2);
  color: white;
  font-size: 13.8px;
  font-weight: 650;
  box-shadow: 0 3px 9px #176b3a24;
}
.web-service-send button:not(:disabled):hover {
  background: var(--green);
  border-color: var(--green);
}
.web-service-send button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.web-service-editor > pre {
  max-height: 280px;
  margin-top: 15px;
  padding: 14px;
  overflow: auto;
  border: 1px solid #cfd8d1;
  border-radius: 5px;
  background: #17251d;
  color: #d9eadf;
  font: 10px/1.55 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  white-space: pre-wrap;
}
.web-service-editor > pre.error {
  border-color: #c25757;
  color: #ffd8d8;
}
.web-service-empty {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #89928c;
  text-align: center;
}
.web-service-empty span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e8f3eb;
  color: #34714a;
  font-size: 34.5px;
}
.web-service-empty b {
  margin-top: 12px;
  color: #3f4942;
  font-size: 19.55px;
}
.web-service-empty p {
  font-size: 12.65px;
}
.web-service-categories {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.web-service-category {
  overflow: hidden;
  border: 1px solid #dce5df;
  border-radius: 7px;
  background: #fafcfb;
}
.web-service-category > header {
  min-height: 39px;
  padding: 5px;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 22px 25px 25px;
  gap: 3px;
  align-items: center;
  background: #f0f6f2;
}
.web-service-category > header input {
  min-width: 0;
  width: 100%;
  height: 28px;
  padding: 0 5px;
  border: 1px solid transparent;
  border-radius: 4px;
  outline: 0;
  background: transparent;
  color: #3e5145;
  font-size: 10.35px;
  font-weight: 750;
}
.web-service-category > header input:focus {
  border-color: #b8d2bf;
  background: white;
}
.web-service-category > header small {
  color: #829087;
  font-size: 9.2px;
  text-align: center;
}
.web-service-category > header button {
  width: 24px;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #39704d;
}
.web-service-category > header button:hover {
  background: #dfeee3;
  color: #176b3a;
}
.web-service-category > header .web-service-category-toggle {
  font-size: 19.55px;
}
.web-service-category > header .delete-category {
  color: #9a5555;
}
.web-service-category > header .delete-category:hover {
  background: #f5e5e5;
  color: #ad3030;
}
.web-service-category > .form-list {
  padding: 5px;
  border-top: 1px solid #e2e9e4;
}
@media (max-width: 850px) {
  .web-service-request label,
  .web-service-request .web-service-payload,
  .web-service-title label {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .web-service-request label > span {
    padding-top: 0;
  }
  .web-service-url select {
    border-left: 1px solid #dfe4e0;
    border-radius: 6px;
  }
  .web-service-auth {
    grid-template-columns: 1fr;
  }
}
.left-panel {
  display: flex;
  overflow: hidden;
}
.side-menu {
  width: 88px;
  flex: none;
  padding: 12px 8px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #f7f9f7;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.side-menu-group {
  display: grid;
  gap: 4px;
  padding-bottom: 5px;
  border-bottom: 1px solid #e3e9e5;
}
.side-menu-group:last-child {
  border-bottom: 0;
}
.side-menu-group-items {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.side-menu .side-menu-group-toggle {
  min-height: 30px;
  padding: 0 3px;
  flex-direction: row;
  justify-content: space-between;
  gap: 3px;
  border-radius: 6px;
  color: #4f5d54;
  font-size: 10.35px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.side-menu .side-menu-group-toggle b {
  font-size: 12.65px;
  line-height: 1;
}
.side-menu .side-menu-group-toggle:hover {
  background: #e9efeb;
}
.forms-workspace .side-menu .side-menu-group-toggle {
  min-height: 30px;
}
.side-menu button {
  min-height: 61px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #77817a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 650;
  transition: 0.15s;
}
.side-menu button:hover {
  background: #edf3ee;
  color: #336a47;
}
.side-menu button.active {
  background: #e4f1e7;
  color: #176b3a;
  box-shadow: inset -2px 0 #257745;
}
.menu-symbol {
  font-size: 24.15px;
  line-height: 18px;
}
.side-library {
  position: relative;
  min-width: 0;
  flex: 1;
  overflow: auto;
  padding: 18px 14px 35px;
  background: white;
}
.library-filter {
  height: 34px;
  margin-bottom: 11px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d7e2da;
  border-radius: 7px;
  background: #f8fbf9;
  color: #5c7565;
}
.library-filter:focus-within {
  border-color: #78a989;
  background: white;
  box-shadow: 0 0 0 2px #dceee2;
}
.library-filter > span {
  flex: none;
  font-size: 18.4px;
  line-height: 1;
}
.library-filter > input {
  min-width: 0;
  width: 100%;
  height: 30px;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: #34483b;
  font-size: 11.5px;
}
.library-filter > input::-webkit-search-cancel-button {
  display: none;
}
.library-filter > button {
  width: 21px;
  height: 21px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #e4eee7;
  color: #557160;
  font-size: 16.1px;
  line-height: 1;
}
.library-filter > button:hover {
  background: #d5e7da;
  color: #176b3a;
}
.library-copy-button {
  position: absolute;
  z-index: 2;
  top: 63px;
  right: 50px;
  width: 30px;
  height: 30px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #bdd2c3;
  border-radius: 7px;
  background: #edf6ef;
  color: #176b3a;
}
.library-copy-button:hover {
  border-color: #7cab8a;
  background: #dfefe3;
}
.forms-workspace .library-copy-button {
  top: 58px;
  right: 46px;
}
.copy-item-modal-backdrop {
  position: fixed;
  z-index: 120;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  background: #17251d52;
  backdrop-filter: blur(2px);
}
.copy-item-modal {
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  border: 1px solid #cbd9cf;
  border-radius: 11px;
  background: white;
  box-shadow: 0 22px 65px #14251a42;
}
.copy-item-modal > header {
  height: 52px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e8e2;
}
.copy-item-modal > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #294b36;
}
.copy-item-modal > header button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #637269;
  font-size: 23px;
}
.copy-item-modal > label {
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #526158;
  font-size: 11.5px;
  font-weight: 700;
}
.copy-item-modal > label input {
  height: 38px;
  padding: 0 10px;
  border: 1px solid #bdd0c2;
  border-radius: 7px;
  outline: 0;
  color: #273d2f;
}
.copy-item-modal > label input:focus {
  border-color: #4f9365;
  box-shadow: 0 0 0 2px #dceee2;
}
.copy-item-modal > footer {
  padding: 11px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  border-top: 1px solid #e4eae6;
  background: #fafcfb;
}
.copy-item-modal > footer button {
  height: 34px;
  padding: 0 14px;
  border: 1px solid #c9d6cd;
  border-radius: 6px;
  background: white;
  color: #526158;
}
.copy-item-modal > footer button.primary {
  border-color: #19713c;
  background: #19713c;
  color: white;
}
.copy-item-modal > footer button:disabled {
  opacity: 0.5;
}
.project-backup-modal {
  width: min(620px, calc(100vw - 32px));
  max-height: min(720px, calc(100vh - 40px));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #cbd9cf;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 22px 65px #14251a42;
}
.project-backup-modal > header {
  min-height: 52px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e8e2;
}
.project-backup-modal > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #294b36;
}
.project-backup-modal > header button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #637269;
  font-size: 23px;
}
.project-backup-list {
  min-height: 160px;
  padding: 10px;
  overflow-y: auto;
}
.project-backup-list > p {
  padding: 24px;
  color: #66746b;
  text-align: center;
}
.project-backup-list article {
  min-height: 62px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-bottom: 1px solid #edf1ee;
}
.project-backup-list article > div {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.project-backup-list article b {
  color: #294b36;
  font-size: 13.8px;
}
.project-backup-list article small {
  color: #78877e;
  font-size: 11.5px;
}
.project-backup-list article button {
  min-width: 72px;
  height: 32px;
  border: 1px solid #a9c4b1;
  border-radius: 6px;
  background: #edf7f0;
  color: #176b3a;
  font-weight: 700;
}
.project-backup-list article button:disabled {
  opacity: 0.55;
}
.project-backup-modal > footer {
  padding: 10px 15px;
  border-top: 1px solid #e4eae6;
  background: #fafcfb;
  color: #78877e;
}
.forms-workspace .side-menu {
  width: 70px;
  padding-inline: 6px;
}
.forms-workspace .side-menu button {
  min-height: 55px;
}
.forms-workspace .side-library {
  padding: 14px 10px 28px;
}
.forms-workspace .library-heading {
  margin-bottom: 9px;
}
.forms-workspace .form-list-item {
  min-height: 36px;
  padding: 3px 5px;
}
.forms-workspace .form-file-icon {
  width: 23px;
  height: 23px;
}
.forms-workspace .library-divider {
  margin: 13px 0 12px;
}
.forms-workspace .element-grid {
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}
.forms-workspace .element-tile {
  height: 48px;
  padding: 6px;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  font-size: 10.35px;
  line-height: 1.15;
}
.forms-workspace .element-tile span {
  display: grid;
  place-items: center;
  flex: none;
}
.forms-workspace .element-tile svg {
  width: 15px;
  height: 15px;
}
.horizontal-palette {
  position: relative;
  min-width: 0;
  height: 62px;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #dde4df;
  background: #fff;
  box-shadow: 0 2px 5px #22352a0d;
}
.horizontal-palette > span {
  flex: none;
  color: #7b867e;
  font-size: 9.2px;
  font-weight: 750;
  letter-spacing: 0.7px;
}
.horizontal-palette > div {
  min-width: 0;
  flex: 1;
  display: flex;
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 2px;
}
.horizontal-palette .element-tile {
  width: auto;
  min-width: max-content;
  height: 43px;
  padding: 0 9px;
  flex: none;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 6px;
  font-size: 10.35px;
}
.horizontal-palette .element-tile > span {
  color: inherit;
}
.forms-workspace .canvas {
  min-height: calc(100% - 109px);
}
.library-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.library-heading > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.library-heading b {
  font-size: 14.95px;
}
.library-heading small {
  color: #939b96;
  font-size: 10.35px;
}
.library-heading > button {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 7px;
  display: grid;
  place-items: center;
  color: white;
  background: #19713c;
}
.form-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-list-item {
  min-height: 42px;
  padding: 5px 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  color: #576159;
}
.form-list-item:hover {
  background: #f6f8f6;
}
.form-list-item.active {
  border-color: #cde0d2;
  background: #edf6ef;
  color: #185f36;
}
.form-file-icon {
  width: 25px;
  height: 25px;
  flex: none;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #407452;
  background: white;
  border: 1px solid #dce6df;
}
.form-list-name {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 650;
}
.form-list-item input {
  min-width: 0;
  width: 100%;
  height: 27px;
  padding: 0 6px;
  border: 1px solid #5b9b70;
  border-radius: 5px;
  outline: 0;
  background: white;
  font-size: 11.5px;
}
.form-row-actions {
  display: flex;
  opacity: 0;
  transition: 0.15s;
}
.form-list-item:hover .form-row-actions,
.form-list-item.active .form-row-actions {
  opacity: 1;
}
.form-row-actions button {
  width: 23px;
  height: 25px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6e7871;
  display: grid;
  place-items: center;
  border-radius: 4px;
  font-size: 17.25px;
}
.form-row-actions button:hover {
  color: #a53232;
  background: #f7eaea;
}
.form-row-actions button:first-child:not(:last-child):hover {
  color: #176b3a;
  background: #dfeee3;
}
.library-divider {
  height: 1px;
  background: #eaeeeb;
  margin: 19px 0 17px;
}
.no-forms {
  padding: 20px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  color: #8b948e;
  font-size: 11.5px;
}
.no-forms button,
.section-placeholder button {
  height: 31px;
  padding: 0 10px;
  border: 1px solid #cdded2;
  border-radius: 6px;
  color: #226d3f;
  background: #f1f8f3;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.section-placeholder {
  padding: 45px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #7c867f;
}
.section-placeholder .layout-icon {
  width: 43px;
  height: 43px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #e9f3eb;
  color: #287247;
  font-size: 25.3px;
}
.section-placeholder b {
  color: #3f4942;
  font-size: 14.95px;
}
.section-placeholder p {
  margin: 0 0 5px;
  font-size: 11.5px;
  line-height: 1.7;
}
@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: 300px minmax(440px, 1fr);
  }
  .right-panel {
    display: none;
  }
  .side-menu {
    width: 76px;
  }
}
@media (max-width: 1100px) {
  .workspace.single-menu-view {
    grid-template-columns: 76px minmax(440px, 1fr);
  }
}
@media (max-width: 680px) {
  .left-panel {
    display: none;
  }
  .workspace {
    display: block;
  }
}
body {
  font-family: Arial, Helvetica, sans-serif;
  direction: ltr;
}
.left-panel {
  border-left: 0;
  border-right: 1px solid var(--line);
}
.right-panel {
  border-right: 0;
  border-left: 1px solid var(--line);
}
.element-tile,
.layout-list button {
  text-align: left;
}
.drag-handle {
  right: auto;
  left: -25px;
}
.field-tools {
  left: auto;
  right: 5px;
}
.field-index {
  left: auto;
  right: -25px;
}
.switch-control:after,
.toggle i {
  right: auto;
  left: 2px;
}
.toggle.on i {
  right: auto;
  left: 17px;
}
.field-block label em {
  margin-right: 0;
  margin-left: 3px;
}
.input-shell {
  padding-left: 0;
  padding-right: 11px;
}
.top-actions .publish svg {
  transform: none;
}
.import-collections {
  cursor: pointer;
  white-space: nowrap;
}
.import-collections input {
  display: none;
}
.import-project {
  cursor: pointer;
  white-space: nowrap;
}
.import-project input {
  display: none;
}
.side-menu {
  border-left: 0;
  border-right: 1px solid var(--line);
}
.side-menu button.active {
  box-shadow: inset 2px 0 #257745;
}
.schema-tabs {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.schema-tab-row {
  width: 100%;
  min-height: 38px;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  display: flex;
  align-items: center;
  color: #59635c;
}
.schema-tab-select {
  min-width: 0;
  min-height: 36px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  display: flex;
  flex: 1;
  align-items: center;
  gap: 7px;
  color: inherit;
  text-align: left;
}
.schema-tab-row:hover {
  background: #f5f8f5;
}
.schema-tab-row.active {
  color: #176b3a;
  border-color: #cfe1d4;
  background: #edf6ef;
}
.schema-tab-select > span:not(.menu-symbol) {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11.5px;
  font-weight: 650;
}
.schema-tab-select > small {
  min-width: 20px;
  height: 19px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #718078;
  background: #e4ebe6;
  font-size: 10.35px;
}
.schema-tab-delete {
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: 4px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #78817b;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: 0.15s;
}
.schema-tab-row:hover .schema-tab-delete,
.schema-tab-row.active .schema-tab-delete {
  opacity: 1;
}
.schema-tab-delete:hover {
  color: #a53232;
  background: #f7eaea;
}
.schema-name {
  display: block;
  color: #8a938d;
  font-size: 10.35px;
  font-weight: 750;
  letter-spacing: 0.8px;
}
.schema-name input {
  width: 100%;
  height: 35px;
  margin-top: 7px;
  padding: 0 9px;
  border: 1px solid #dce3de;
  border-radius: 6px;
  outline: 0;
  color: #39443d;
  font-size: 12.65px;
  font-weight: 650;
}
.schema-name.object-title {
  margin-top: 12px;
}
.schema-name input:focus,
.schema-field input:focus,
.schema-field select:focus {
  border-color: #5c9a70;
  box-shadow: 0 0 0 2px #e2f0e6;
}
.schema-fields-heading {
  margin: 20px 0 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #8a938d;
  font-size: 10.35px;
  font-weight: 750;
  letter-spacing: 0.8px;
}
.schema-fields-heading button {
  height: 26px;
  padding: 0 7px;
  border: 1px solid #d4e2d8;
  border-radius: 5px;
  background: #f1f8f3;
  color: #216b3e;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.35px;
  letter-spacing: 0;
}
.object-heading-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}
.object-tools-menu {
  position: relative;
}
.object-tools-menu summary {
  height: 26px;
  padding: 0 8px;
  border: 1px solid #d4e2d8;
  border-radius: 5px;
  background: #fff;
  color: #216b3e;
  display: flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
  font-size: 10.35px;
  letter-spacing: 0;
}
.object-tools-menu summary::-webkit-details-marker {
  display: none;
}
.object-tools-menu > div {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  right: 0;
  width: 120px;
  padding: 5px;
  border: 1px solid #d4e2d8;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 28px #183d2726;
  display: grid;
  gap: 3px;
}
.schema-fields-heading .object-tools-menu > div > button,
.schema-fields-heading .object-tools-menu > div > label {
  width: 100%;
  min-height: 26px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-color: transparent;
  border-radius: 5px;
  background: transparent;
  color: #216b3e;
  font-size: 10.35px;
  font-weight: 400;
  cursor: pointer;
}
.schema-fields-heading .object-tools-menu > div > button:hover,
.schema-fields-heading .object-tools-menu > div > label:hover {
  background: #eef7f1;
}
.object-json-import-message {
  margin: 0 0 9px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #cce1d2;
  border-radius: 6px;
  background: #eff8f2;
  color: #216b3e;
  font-size: 10.35px;
}
.object-json-import-message.error {
  border-color: #efcaca;
  background: #fff4f4;
  color: #a73333;
}
.object-json-import-message button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
.schema-fields-heading .object-authorization-button {
  border-color: #cad9e7;
  background: #eaf1f8;
  color: #3f5f82;
}
.schema-fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.schema-field-search {
  margin: 0 0 8px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: #637069;
  font-size: 9.2px;
}
.schema-field-search input {
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #d6e1da;
  border-radius: 6px;
  background: #fff;
  color: #3f4d44;
  font-size: 10.35px;
}
.schema-field-search small {
  color: #89938d;
  white-space: nowrap;
}
.schema-field,
.schema-field-header {
  display: grid;
  grid-template-columns: 18px 18px minmax(0, 1fr) minmax(0, 1fr) minmax(76px, 0.72fr) 115px;
  gap: 6px;
  align-items: center;
}
.schema-field-header {
  margin-bottom: 5px;
  padding: 0 6px;
  color: #8a938d;
  font-size: 9.2px;
  font-weight: 750;
  letter-spacing: 0.45px;
  text-transform: uppercase;
}
.schema-field-header input,
.schema-field .schema-field-select {
  width: 14px;
  min-width: 14px;
  height: 14px;
  margin: 0;
  padding: 0;
  accent-color: #176b3a;
}
.schema-field input,
.schema-field select {
  min-width: 0;
  height: 31px;
  padding: 0 6px;
  border: 1px solid #dfe5e1;
  border-radius: 5px;
  outline: 0;
  background: white;
  color: #4b554e;
  font-size: 10.35px;
}
.schema-field .schema-field-select {
  height: 14px;
  padding: 0;
  border: 0;
  border-radius: 3px;
}
.schema-field button {
  width: 25px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #9b6666;
  display: grid;
  place-items: center;
}
.schema-field button:hover {
  background: #f8eaea;
  color: #b12f2f;
}
.schema-field .schema-field-drag {
  width: 18px;
  height: 28px;
  color: #8a968d;
  cursor: grab;
  font-size: 12.65px;
  letter-spacing: -3px;
  touch-action: none;
}
.schema-field .schema-field-drag:hover {
  background: #edf4ef;
  color: #176b3a;
}
.schema-field .schema-field-drag:active {
  cursor: grabbing;
}
.schema-field .schema-field-properties {
  color: #39704d;
  background: #edf6ef;
}
.schema-field .schema-field-authorization {
  color: #3f5f82;
  background: #e8f0f8;
  font-size: 12.65px;
}
.schema-field .schema-field-properties:hover {
  color: #176b3a;
  background: #dfeee3;
}
.schema-field .schema-field-insert {
  color: #176b3a;
  background: #edf6ef;
}
.schema-field .schema-field-insert:hover {
  color: #0c7134;
  background: #dcefe2;
}
.schema-field-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.schema-field-with-insert {
  position: relative;
}
.schema-field-with-insert.drop-field-before:before,
.schema-field-with-insert.drop-field-after:after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  height: 2px;
  border-radius: 2px;
  background: #159447;
  box-shadow: 0 0 0 2px #d9f0e1;
}
.schema-field-with-insert.drop-field-before:before {
  top: -4px;
}
.schema-field-with-insert.drop-field-after:after {
  bottom: -4px;
}
.copy-schema-fields {
  padding: 7px;
  display: grid;
  grid-template-columns: auto minmax(90px, 1fr) auto;
  gap: 6px;
  align-items: center;
  border: 1px solid #cfe1d4;
  border-radius: 6px;
  background: #f1f8f3;
}
.copy-schema-field-actions {
  display: grid;
  gap: 6px;
  margin: 0 0 8px;
}
.copy-schema-fields-with-prefix {
  grid-template-columns: auto minmax(70px, 0.7fr) minmax(90px, 1fr) auto;
}
.copy-schema-fields b {
  color: #39704d;
  font-size: 9.2px;
  white-space: nowrap;
}
.copy-schema-fields select,
.copy-schema-fields input {
  min-width: 0;
  height: 29px;
  padding: 0 6px;
  border: 1px solid #d2ded5;
  border-radius: 5px;
  background: white;
  color: #465149;
  font-size: 9.2px;
}
.copy-schema-fields input::placeholder {
  color: #969e99;
}
.copy-schema-fields button {
  height: 29px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: #176b3a;
  color: white;
  font-size: 9.2px;
  font-weight: 750;
}
.copy-schema-fields button:disabled {
  background: #bdc8c0;
  cursor: not-allowed;
}
.migrate-v8-modal {
  width: min(620px, calc(100vw - 32px));
  border: 1px solid #dbe6de;
  border-radius: 12px;
  background: white;
  box-shadow: 0 18px 45px #173d2914;
  overflow: hidden;
}
.migrate-v8-modal header, .migrate-v8-modal footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 17px;
  border-bottom: 1px solid #e3ebe5;
}
.migrate-v8-modal header > div {
  display: flex;
  gap: 9px;
  align-items: center;
}
.migrate-v8-modal header > button {
  border: 0;
  background: transparent;
  font-size: 23px;
}
.migrate-v8-modal footer {
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #e3ebe5;
  border-bottom: 0;
}
.migrate-v8-modal footer button {
  min-width: 80px;
  height: 34px;
  border: 1px solid #d5dfd8;
  border-radius: 6px;
  background: white;
}
.migrate-v8-modal footer .primary {
  border-color: #087c40;
  background: #087c40;
  color: white;
}
.migrate-v8-modal-body {
  padding: 18px;
}
.migrate-v8-modal-body > p {
  margin: 0 0 18px;
  color: #68756d;
  line-height: 1.6;
}
.migrate-v8-modal-body > label:not(.migrate-v8-empty-option) {
  display: grid;
  gap: 7px;
  color: #516158;
  font-size: 12.65px;
  font-weight: 750;
}
.migrate-v8-modal-body > label > input[type="password"] {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #cfdcd3;
  border-radius: 7px;
  font: 11px monospace;
  direction: ltr;
}
.migrate-v8-empty-option {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 12px;
  border-radius: 7px;
  background: #f4f8f5;
}
.migrate-v8-empty-option input {
  margin-top: 2px;
}
.migrate-v8-empty-option span {
  display: grid;
  gap: 3px;
}
.migrate-v8-empty-option small {
  color: #7a877f;
  font-weight: 400;
}
.migrate-v8-counts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 8px;
  margin-top: 22px;
}
.migrate-v8-counts span {
  display: flex;
  justify-content: space-between;
  padding: 9px;
  border-radius: 7px;
  background: #f2f8f4;
  color: #526158;
}
.migrate-v8-counts b {
  color: #087c40;
}
.empty-fields {
  margin: 13px 0;
  padding: 13px 5px;
  border: 1px dashed #dce3de;
  border-radius: 6px;
  color: #969e99;
  text-align: center;
  font-size: 10.35px;
}
.delete-schema {
  width: 100%;
  height: 32px;
  margin-top: 20px;
  border: 1px solid #ecdada;
  border-radius: 6px;
  background: #fffafa;
  color: #ae3e3e;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 10.35px;
}
.section-library-only .schema-editor,
.section-library-only .list-designer,
.section-library-only .tab-designer,
.section-library-only .layout-designer,
.section-library-only .menu-designer {
  display: none;
}
.section-properties-only {
  padding: 0 14px 28px;
}
.section-properties-only > .library-heading,
.section-properties-only > .schema-tabs {
  display: none;
}
.section-properties-only .schema-editor > .library-divider,
.section-properties-only .list-designer > .library-divider,
.section-properties-only .tab-designer > .library-divider,
.section-properties-only .layout-designer > .library-divider,
.section-properties-only .menu-designer > .library-divider {
  display: none;
}
.section-properties-only .schema-editor,
.section-properties-only .list-designer,
.section-properties-only .tab-designer,
.section-properties-only .layout-designer,
.section-properties-only .menu-designer {
  padding-top: 16px;
}
.list-properties-only {
  padding: 0 14px 28px;
}
.list-properties-only > .library-heading,
.list-properties-only > .schema-tabs {
  display: none;
}
.list-properties-only .list-designer > .library-divider {
  display: none;
}
.list-properties-only .list-designer {
  padding-top: 16px;
}
.object-select {
  margin-top: 14px;
}
.object-select select {
  width: 100%;
  height: 35px;
  margin-top: 7px;
  padding: 0 8px;
  border: 1px solid #dce3de;
  border-radius: 6px;
  background: white;
  color: #39443d;
  font-size: 11.5px;
  outline: 0;
}
.list-page-settings {
  margin-top: 18px;
  padding: 10px;
  border: 1px solid #e1e7e3;
  border-radius: 7px;
  background: #f8faf8;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  gap: 7px;
}
.list-page-settings p {
  grid-column: 1/-1;
  margin: 3px 0 0;
  color: #7e8981;
  font-size: 9.2px;
  font-weight: 750;
  letter-spacing: 0.7px;
}
.list-settings-heading {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.list-page-settings .list-settings-heading p {
  grid-column: auto;
  flex: 1;
}
.list-page-settings .list-settings-heading .authorization-button {
  width: 29px;
  min-width: 29px;
  height: 29px;
  margin: 0;
  padding: 0;
  border: 1px solid #cddbe7;
  border-radius: 6px;
  background: #e8f0f8;
  color: #3f5f82;
  cursor: pointer;
}
.list-page-settings label {
  color: #717c74;
  font-size: 9.2px;
}
.list-page-settings input,
.list-page-settings select {
  width: 100%;
  min-width: 0;
  height: 29px;
  margin-top: 3px;
  padding: 0 6px;
  border: 1px solid #dce4de;
  border-radius: 5px;
  background: white;
  color: #414d45;
  font-size: 9.2px;
}
.list-page-settings .list-option-checkbox {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}
.list-page-settings .list-option-checkbox input[type="checkbox"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin: 0;
  padding: 0;
  accent-color: #19713c;
}
.list-export-settings-note {
  grid-column: 1/-1;
  color: #7e8981;
  font-size: 9.2px;
}
.list-action-panel {
  min-height: 48px;
  padding: 8px 14px;
  border-top: 1px solid #e7ece8;
  border-bottom: 1px solid #e1e7e3;
  background: #f8faf8;
  display: flex;
  align-items: center;
  gap: 7px;
}
.list-action-panel > button {
  height: 31px;
  padding: 0 10px;
  border: 1px solid #d7e1da;
  border-radius: 6px;
  background: white;
  color: #4f5e54;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.35px;
}
.list-action-panel > button.primary {
  border-color: #176b3a;
  color: white;
  background: #176b3a;
}
.list-action-panel > .list-export-button {
  width: 31px;
  padding: 0;
  justify-content: center;
}
.list-export-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  padding: 20px;
  display: grid;
  place-items: center;
  background: #17251d80;
  backdrop-filter: blur(2px);
}
.list-export-modal {
  width: min(500px, 100%);
  max-height: min(720px, 90vh);
  overflow: hidden;
  border-radius: 12px;
  background: white;
  box-shadow: 0 24px 70px #0d1d1360;
  display: flex;
  flex-direction: column;
}
.list-export-modal > header {
  min-height: 64px;
  padding: 12px 16px;
  border-bottom: 1px solid #e5eae6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-export-modal > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #176b3a;
}
.list-export-modal h2 {
  margin: 0;
  color: #26352c;
  font-size: 17.25px;
}
.list-export-modal header small {
  display: block;
  margin-top: 3px;
  color: #849087;
  font-size: 10.35px;
}
.list-export-modal > header > button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #69766e;
  font-size: 23px;
}
.list-export-body {
  min-height: 0;
  padding: 16px;
  overflow: auto;
}
.list-export-body > label {
  display: grid;
  gap: 6px;
  color: #5f6d64;
  font-size: 11.5px;
  font-weight: 700;
}
.list-export-body > label select {
  height: 36px;
  padding: 0 9px;
  border: 1px solid #d7e1da;
  border-radius: 6px;
  background: white;
  color: #35443a;
}
.list-export-body > section {
  margin-top: 18px;
}
.list-export-columns-heading {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.list-export-columns-heading b {
  font-size: 12.65px;
}
.list-export-columns-heading small {
  color: #8b958f;
  font-size: 10.35px;
}
.list-export-columns {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.list-export-columns > div {
  min-height: 39px;
  padding: 0 10px;
  border: 1px solid #e0e7e2;
  border-radius: 7px;
  background: #fafcfa;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #78847c;
  cursor: grab;
}
.list-export-columns > div.dragging {
  opacity: .45;
}
.list-export-columns label {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #3f4c44;
  font-size: 11.5px;
  cursor: pointer;
}
.list-export-columns label span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list-export-modal > footer {
  padding: 11px 16px;
  border-top: 1px solid #e5eae6;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.list-export-modal > footer button {
  min-width: 80px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid #d5dfd8;
  border-radius: 6px;
  background: white;
  color: #4d5b52;
}
.list-export-modal > footer button.primary {
  border-color: #176b3a;
  background: #176b3a;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.list-export-modal > footer button:disabled {
  opacity: .45;
  cursor: default;
}
.list-sort-select {
  min-width: 145px;
  height: 31px;
  padding: 0 8px;
  border: 1px solid #d7e1da;
  border-radius: 6px;
  background: white;
  color: #4f5e54;
  font-size: 10.35px;
}
.list-pagination {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #657168;
  font-size: 9.2px;
}
.list-pagination button {
  width: 27px;
  height: 27px;
  border: 1px solid #d7e1da;
  border-radius: 5px;
  background: white;
  color: #42604d;
}
.list-pagination button:disabled {
  opacity: 0.4;
  cursor: default;
}
.rows-per-page {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #647068;
  font-size: 9.2px;
  font-weight: 650;
  white-space: nowrap;
}
.rows-per-page select {
  width: 58px;
  height: 29px;
  padding: 0 6px;
  border: 1px solid #d7e1da;
  border-radius: 5px;
  color: #405047;
  background: white;
  font-size: 10.35px;
  outline: 0;
}
.query-builder {
  padding: 10px 15px;
  border-bottom: 1px solid #e4e9e5;
  background: #f3f7f4;
  display: flex;
  align-items: end;
  gap: 10px;
}
.query-builder label {
  flex: 1;
  color: #637068;
  font-size: 9.2px;
  font-weight: 700;
}
.query-builder input {
  width: 100%;
  height: 31px;
  margin-top: 4px;
  padding: 0 8px;
  border: 1px solid #d7e1da;
  border-radius: 5px;
  background: white;
  font-size: 10.35px;
}
.query-builder small {
  padding-bottom: 7px;
  color: #8c9690;
  font-size: 9.2px;
}
.clickable-row {
  cursor: pointer;
}
.clickable-row:hover {
  background: #edf6ef !important;
}
.list-page-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  padding: 22px;
  display: grid;
  place-items: center;
  background: #17251d80;
  backdrop-filter: blur(2px);
}
.list-page-modal {
  width: min(600px, 100%);
  max-height: 86vh;
  overflow: auto;
  border-radius: 12px;
  background: white;
  box-shadow: 0 24px 70px #0d1d1360;
}
.list-page-modal > header {
  min-height: 65px;
  padding: 12px 18px;
  border-bottom: 1px solid #e5eae6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list-page-modal h2 {
  margin: 4px 0 0;
  font-size: 19.55px;
}
.list-page-modal header small {
  color: #76837a;
  font-size: 9.2px;
  text-transform: uppercase;
}
.list-page-modal header button {
  border: 0;
  background: transparent;
  color: #7b867f;
  font-size: 27.6px;
}
.opened-page {
  padding: 25px;
}
.opened-page h3 {
  margin: 13px 0 5px;
}
.opened-page p {
  margin: 0 0 20px;
  color: #7e8982;
  font-size: 10.35px;
}
.opened-page label {
  display: block;
  margin: 10px 0;
  color: #47534b;
  font-size: 10.35px;
  font-weight: 700;
}
.opened-page input {
  width: 100%;
  height: 36px;
  margin-top: 5px;
  padding: 0 9px;
  border: 1px solid #dce4de;
  border-radius: 6px;
}
.opened-page > button {
  height: 35px;
  padding: 0 15px;
  border: 0;
  border-radius: 6px;
  color: white;
  background: #176b3a;
  font-size: 10.35px;
}
.mini-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 3px;
}
.schema-fields-heading .mini-actions button:disabled {
  opacity: .45;
  cursor: default;
}
.schema-fields-heading .mini-actions .clear-columns {
  border-color: #ecd1d1;
  background: #fff7f7;
  color: #a73c3c;
}
.column-editor {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.column-row {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 76px 105px 24px;
  gap: 4px;
  align-items: center;
}
.column-row.dragging {
  opacity: 0.45;
}
.column-row input,
.column-row select {
  min-width: 0;
  height: 30px;
  padding: 0 6px;
  border: 1px solid #dfe5e1;
  border-radius: 5px;
  background: white;
  outline: 0;
  color: #4b554e;
  font-size: 10.35px;
}
.column-row > span {
  overflow: hidden;
  color: #89928c;
  font-size: 9.2px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.column-row > button {
  width: 24px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #a26969;
  display: grid;
  place-items: center;
}
.column-row > button:hover {
  background: #f8eaea;
  color: #b12f2f;
}
.column-row > .list-column-drag {
  width: 20px;
  color: #87938b;
  cursor: grab;
}
.column-row > .list-column-drag:hover {
  background: #edf5ef;
  color: #176b3a;
}
.column-row > .list-column-drag:active {
  cursor: grabbing;
}
.button-heading {
  margin-top: 22px;
}
.button-editor {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.button-config {
  border: 1px solid #e1e6e2;
  border-radius: 7px;
  overflow: hidden;
}
.button-config.open {
  border-color: #bad4c2;
  box-shadow: 0 0 0 2px #edf5ef;
}
.button-summary {
  width: 100%;
  min-height: 38px;
  padding: 5px 7px;
  border: 0;
  background: white;
  display: grid;
  grid-template-columns: 9px minmax(0, 1fr) auto 10px;
  align-items: center;
  gap: 6px;
  text-align: left;
}
.button-summary i {
  width: 8px;
  height: 22px;
  border-radius: 3px;
}
.button-summary span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #465049;
  font-size: 11.5px;
  font-weight: 650;
}
.button-summary small {
  color: #929a95;
  font-size: 8.05px;
}
.button-summary b {
  color: #89928c;
  font-size: 11.5px;
}
.object-select .object-key-control select {
  margin-top: 0;
}
.button-details {
  padding: 10px;
  border-top: 1px solid #e7ebe8;
  background: #fafcfb;
}
.button-details label {
  display: block;
  margin-bottom: 9px;
  color: #6f7972;
  font-size: 9.2px;
  font-weight: 650;
}
.button-details input,
.button-details select,
.button-details textarea {
  width: 100%;
  margin-top: 4px;
  border: 1px solid #dce3de;
  border-radius: 5px;
  background: white;
  color: #354039;
  font-size: 10.35px;
  outline: 0;
}
.button-details input,
.button-details select {
  height: 29px;
  padding: 0 6px;
}
.button-details input[type="color"] {
  padding: 3px;
}
.button-details textarea {
  height: 76px;
  padding: 7px;
  resize: vertical;
  direction: ltr;
  font-family: monospace;
  line-height: 1.45;
}
.button-detail-grid {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 6px;
}
.remove-button {
  height: 27px;
  padding: 0 7px;
  border: 0;
  border-radius: 5px;
  background: #f8eaea;
  color: #a63c3c;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.2px;
}
.table-card {
  width: min(900px, 100%);
  background: white;
  border: 1px solid #e0e5e1;
  border-radius: 12px;
  box-shadow: 0 10px 32px #23312810;
  overflow: hidden;
}
.table-title {
  padding: 28px 30px 22px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  border-bottom: 1px solid #e9edea;
}
.table-title .tiny-logo {
  margin: 0 0 12px;
}
.table-title h1 {
  margin: 0 0 5px;
  font-size: 26.45px;
  letter-spacing: -0.4px;
}
.table-title p {
  margin: 0;
  color: #7e8781;
  font-size: 11.5px;
}
.preview-buttons {
  display: flex;
  align-items: center;
  gap: 6px;
}
.preview-buttons button {
  height: 31px;
  padding: 0 11px;
  border: 0;
  border-radius: 6px;
  color: white;
  font-size: 10.35px;
  font-weight: 650;
}
.preview-buttons.row button {
  height: 26px;
  padding: 0 8px;
  font-size: 9.2px;
}
.table-scroll {
  overflow: auto;
}
.table-card table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.table-card th {
  position: relative;
  padding: 12px 18px;
  color: #727c75;
  background: #f7f9f7;
  text-align: left;
  font-size: 10.35px;
  font-weight: 700;
  letter-spacing: 0.3px;
}
.builder-list-column-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.builder-list-column-sort {
  width: 24px;
  height: 24px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #8a988f;
  cursor: pointer;
}
.builder-list-column-sort:hover, .builder-list-column-sort.ascending, .builder-list-column-sort.descending {
  background: #e8f3ec;
  color: #176b3a;
}
.builder-list-column-sort svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.builder-list-column-sort:not(.ascending):not(.descending) svg path {
  opacity: .5;
}
.builder-list-column-sort.ascending svg path:last-child, .builder-list-column-sort.descending svg path:first-child {
  opacity: .25;
}
.list-column-resizer {
  position: absolute;
  z-index: 2;
  inset-block: 0;
  inset-inline-end: -8px;
  width: 16px;
  padding: 0;
  border: 0;
  background: #edf5ef;
  color: #277247;
  font-size: 16.1px;
  font-weight: 900;
  line-height: 1;
  cursor: col-resize;
  touch-action: none;
}
.list-column-resizer::after {
  content: "";
  position: absolute;
  inset-block: 7px;
  inset-inline-start: 7px;
  width: 2px;
  border-radius: 2px;
  background: #a9b9ae;
  opacity: .8;
}
.list-column-resizer span {
  position: relative;
  z-index: 1;
  display: block;
  transform: translateX(1px);
}
.list-column-resizer:hover::after,
body.resizing-list-column .list-column-resizer::after {
  background: #08783e;
  opacity: 1;
}
body.resizing-list-column,
body.resizing-list-column * {
  cursor: col-resize !important;
  user-select: none !important;
}
.table-card td {
  height: 49px;
  padding: 8px 18px;
  border-top: 1px solid #edf0ee;
  color: #465049;
}
.table-card tbody tr:hover {
  background: #fbfdfb;
}
.table-card.table-array-view {
  padding: 12px;
  border-color: #adc5b5;
  border-radius: 9px;
  background: #fbfdfb;
}
.table-card.table-array-view > .table-scroll {
  border: 1px solid #d9e5dc;
  border-radius: 7px;
  background: #fff;
}
.table-card.table-array-view > .table-scroll > table[dir="ltr"] {
  direction: ltr;
}
.table-card.table-array-view > .table-scroll > table[dir="rtl"] {
  direction: rtl;
}
.table-card.table-array-excel {
  padding: 0;
  border-radius: 0;
  background: #fff;
}
.table-card.table-array-excel > .table-scroll {
  border: 0;
  border-radius: 0;
}
.table-card.table-array-excel table {
  border-collapse: collapse;
}
.table-card.table-array-excel :is(th, td) {
  border: 1px solid #c8d6cc;
  border-radius: 0;
}
.table-card.table-array-excel[dir="ltr"] :is(th, td) {
  text-align: left;
}
.table-card.table-array-excel[dir="rtl"] :is(th, td) {
  text-align: right;
}
.table-card.table-array-excel table[dir="ltr"] :is(th, td) {
  text-align: left;
}
@media (max-width: 1024px) {
  .table-card.table-array-view > .table-scroll {
    overflow: visible;
  }
  .table-card.table-array-view > .table-scroll > table,
  .table-card.table-array-view > .table-scroll > table > tbody {
    display: block;
  }
  .table-card.table-array-view > .table-scroll > table > thead,
  .table-card.table-array-view .table-filter-row {
    display: none;
  }
  .table-card.table-array-view > .table-scroll > table > tbody > tr:not(.table-status-row) {
    margin-top: 4px;
    padding: 6px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    border: 1px solid #cbded1;
    border-radius: 5px;
    background: #fff;
  }
  .table-card.table-array-view > .table-scroll > table > tbody > tr:not(.table-status-row)::before {
    content: attr(data-row-label);
    grid-column: 1 / -1;
    padding-bottom: 4px;
    border-bottom: 1px solid #e0e8e2;
    color: #41604d;
    font-size: 10.35px;
    font-weight: 800;
  }
  .table-card.table-array-view > .table-scroll > table > tbody > tr:not(.table-status-row) > td {
    min-width: 0;
    padding: 2px;
    display: flex;
    flex-direction: column;
    border: 0;
  }
  .table-card.table-array-view > .table-scroll > table > tbody > tr:not(.table-status-row) > td::before {
    content: attr(data-label);
    color: #53685a;
    font-size: 9.2px;
    font-weight: 750;
  }
}
@media (max-width: 700px) {
  .table-card.table-array-view > .table-scroll > table > tbody > tr:not(.table-status-row) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 480px) {
  .table-card.table-array-view > .table-scroll > table > tbody > tr:not(.table-status-row) {
    grid-template-columns: 1fr;
  }
}
.table-filter-row {
  background: #f8faf8;
}
.table-filter-row:hover {
  background: #f8faf8 !important;
}
.table-filter-row td {
  height: 45px;
  padding: 7px 12px;
  border-top: 1px solid #dfe5e1;
  border-bottom: 1px solid #dfe5e1;
}
.table-filter-row input,
.table-filter-row select {
  width: 100%;
  min-width: 85px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #d8e0da;
  border-radius: 5px;
  background: white;
  color: #465049;
  font-size: 10.35px;
  outline: 0;
}
.table-filter-row input:focus,
.table-filter-row select:focus {
  border-color: #57946b;
  box-shadow: 0 0 0 2px #e2f0e6;
}
.table-filter-row input::placeholder {
  color: #9ca49e;
}
.table-filter-row .lookup-list-filter {
  min-width: 110px;
}
.table-status-row:hover {
  background: transparent !important;
}
.table-status-row td {
  height: 92px;
  text-align: center;
  color: #7c867f;
}
.table-status-row td svg {
  display: inline-block;
  margin-right: 7px;
  vertical-align: middle;
}
.table-status-row td b {
  color: #3f4942;
  vertical-align: middle;
}
.table-status-row td span {
  display: block;
  margin-top: 7px;
  font-size: 10.35px;
}
.table-status-row.error td,
.table-status-row.error td b {
  color: #a34343;
}
.clear-filters {
  height: 28px;
  padding: 0 8px;
  border: 1px solid #d8e0da;
  border-radius: 5px;
  background: white;
  color: #657069;
  font-size: 9.2px;
}
.clear-filters:hover {
  color: #176b3a;
  border-color: #85af93;
  background: #f0f7f2;
}
.sample-value {
  color: #a0a8a2;
  font-style: italic;
}
.table-bottom {
  min-height: 55px;
  padding: 10px 18px;
  border-top: 1px solid #e8ece9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8b948e;
  font-size: 10.35px;
}
.preview-empty {
  margin: auto;
  padding: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  color: #7c867f;
}
.preview-empty b {
  color: #3f4942;
}
.preview-empty span {
  font-size: 11.5px;
}
.tab-page-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tab-page-config {
  padding: 8px;
  border: 1px solid #dfe5e1;
  border-radius: 7px;
  background: #fbfcfb;
  cursor: pointer;
}
.tab-page-config:focus-within,
.tab-page-config:hover {
  border-color: #b9d2c0;
}
.tab-page-entry {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab-page-config {
  width: 100%;
}
.tab-page-config.dragging {
  opacity: 0.48;
  border-style: dashed;
}
.tab-page-top {
  display: grid;
  grid-template-columns: 18px 25px minmax(0, 1fr) 24px;
  gap: 5px;
  align-items: center;
}
.page-drag-handle {
  color: #8c9990;
  cursor: grab;
  user-select: none;
  text-align: center;
  font-size: 16.1px;
  letter-spacing: -3px;
}
.page-drag-handle:active {
  cursor: grabbing;
}
.insert-page-after {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 37px;
  width: 24px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #277447;
  display: grid;
  place-items: center;
  font-size: 0;
  cursor: pointer;
}
.insert-page-after:hover {
  background: #e4f3e8;
  color: #08783e;
}
.page-kind {
  width: 25px;
  height: 27px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #37714c;
  background: #e9f3eb;
}
.tab-page-top input {
  min-width: 0;
  height: 29px;
  padding: 0 6px;
  border: 1px solid #dce3de;
  border-radius: 5px;
  background: white;
  color: #3f4942;
  font-size: 11.5px;
  font-weight: 650;
  outline: 0;
}
.tab-page-top button {
  width: 24px;
  height: 27px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #a36b6b;
  display: grid;
  place-items: center;
}
.tab-page-top button:hover {
  background: #f7e7e7;
  color: #ae3030;
}
.tab-page-source {
  margin-top: 7px;
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px;
}
.tab-page-source label {
  color: #838c86;
  font-size: 9.2px;
}
.tab-page-source select,
.tab-page-source input {
  width: 100%;
  min-width: 0;
  height: 27px;
  margin-top: 3px;
  padding: 0 5px;
  border: 1px solid #dfe5e1;
  border-radius: 5px;
  background: white;
  color: #4b554e;
  font-size: 10.35px;
  outline: 0;
}
.searchable-combobox {
  position: relative;
  min-width: 0;
}
.tab-page-source .searchable-combobox input {
  padding-right: 23px;
}
.searchable-combobox > button {
  position: absolute;
  top: 6px;
  right: 3px;
  width: 20px;
  height: 21px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #829087;
  font-size: 16.1px;
  line-height: 1;
}
.searchable-combobox > button:hover {
  background: #e7f1ea;
  color: #176b3a;
}
.searchable-combobox input:focus {
  border-color: #82aa8f;
  box-shadow: 0 0 0 2px #dceee2;
}
.page-select-with-design {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 35px;
  gap: 6px;
  align-items: stretch;
}
.page-select-with-design > select,
.page-select-with-design .searchable-combobox input {
  margin: 0;
}
.page-designer-launch-button {
  width: 35px;
  min-width: 35px;
  height: 35px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #b9d3c1;
  border-radius: 6px;
  background: #eef7f0;
  color: #176f3d;
  cursor: pointer;
}
.page-designer-launch-button:hover:not(:disabled) {
  background: #dff0e4;
}
.page-designer-launch-button:disabled {
  border-color: #dce4df;
  background: #f4f6f4;
  color: #a5aea8;
  cursor: not-allowed;
}
.referenced-page-designer-dialog {
  z-index: 1;
}
.referenced-page-designer-body {
  min-height: 0;
  height: calc(100% - 96px);
  overflow: auto;
  background: #f7faf8;
}
.default-filter-editors {
  display: grid;
  gap: 4px;
  margin: 4px 0;
}
.default-filter-editor {
  padding: 4px;
  border: 1px solid #dfe5e1;
  border-radius: 6px;
  background: #fbfcfb;
}
.default-filter-editor > b {
  display: block;
  margin-bottom: 3px;
  color: #66736b;
  font-size: 10.35px;
}
.default-filter-editor .element-json-label {
  margin: 0;
}
.default-filter-editor textarea {
  min-height: 58px;
}
.default-filter-query {
  grid-column: 1/-1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px;
  align-items: end;
  margin-top: 4px;
}
.default-filter-query > label {
  min-width: 0;
  color: #838c86;
  font-size: 9.2px;
}
.default-filter-query > label > input {
  width: 100%;
  height: 27px;
  margin-top: 3px;
  padding: 0 6px;
  border: 1px solid #dfe5e1;
  border-radius: 5px;
  background: #fff;
  color: #4b554e;
  font: 8px/1.2 monospace;
}
.default-filter-query > button {
  height: 27px;
  padding: 0 7px;
  display: flex;
  align-items: center;
  gap: 3px;
  border: 1px solid #c9ded0;
  border-radius: 5px;
  background: #edf7f0;
  color: #16743d;
  font-size: 9.2px;
}
.default-filter-query > button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.filter-wizard-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 12px;
  background: #12241b66;
}
.filter-wizard {
  width: min(460px, 100%);
  padding: 10px;
  display: grid;
  gap: 7px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 50px #10221935;
  color: #344239;
}
.filter-wizard header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dce7df;
  padding-bottom: 6px;
}
.filter-wizard header button {
  width: 25px;
  height: 25px;
  border: 0;
  background: transparent;
  font-size: 20.7px;
}
.filter-wizard p {
  margin: 0;
  color: #718078;
  font-size: 10.35px;
}
.filter-wizard label {
  display: grid;
  gap: 3px;
  color: #66736b;
  font-size: 10.35px;
}
.filter-wizard input,
.filter-wizard select {
  width: 100%;
  height: 32px;
  padding: 0 7px;
  border: 1px solid #cfded4;
  border-radius: 6px;
  background: #fff;
  color: #35433a;
}
.filter-wizard-date-value {
  display: grid;
  grid-template-columns: minmax(120px, 0.7fr) minmax(150px, 1fr);
  gap: 6px;
}
@media (max-width: 520px) {
  .filter-wizard-date-value {
    grid-template-columns: 1fr;
  }
}
.filter-wizard .filter-wizard-json {
  width: 100%;
  min-height: 70px;
  height: 70px;
  max-height: 150px;
  resize: vertical;
  overflow: auto;
  margin: 0;
  padding: 7px;
  border: 1px solid #28533d;
  border-radius: 6px;
  background: #102d20;
  color: #d9f3e3;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 10.35px;
  line-height: 1.5;
  direction: ltr;
  text-align: left;
}
.filter-wizard footer {
  display: flex;
  justify-content: flex-end;
  gap: 5px;
}
.filter-wizard footer button {
  min-height: 29px;
  padding: 0 10px;
  border: 1px solid #cfded4;
  border-radius: 5px;
  background: #fff;
  color: #476052;
}
.filter-wizard footer .primary {
  border-color: #08783d;
  background: #08783d;
  color: #fff;
}
.tabs-preview {
  width: min(920px, 100%);
}
.preview-tab-bar {
  padding: 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  overflow-x: visible;
  border-bottom: 1px solid #dbe2dd;
}
.tab-header-html-editor {
  display: grid;
  gap: 6px;
}
.tab-header-html-editor > small {
  color: #7b8b82;
  font-size: 11.5px;
}
.preview-tab-html-header {
  padding: 14px 16px;
  border-bottom: 1px solid #dfe8e2;
  background: #fff;
}
.preview-tab-html-header > :first-child {
  margin-top: 0;
}
.preview-tab-html-header > :last-child {
  margin-bottom: 0;
}
.runtime-html-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--runtime-table-border, #b9cec0);
  border-radius: var(--runtime-table-radius, 7px);
  background: var(--runtime-table-body-bg, #fff);
}
.runtime-html-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--runtime-table-body-text, #172c21);
  font-size: 12.65px;
}
.runtime-html-table th,
.runtime-html-table td {
  padding: var(--runtime-table-cell-padding, 8px) 10px;
  border-inline-start: 1px solid var(--runtime-table-border, #b9cec0);
  border-bottom: 1px solid var(--runtime-table-border, #b9cec0);
  text-align: start;
}
.runtime-html-table th:first-child,
.runtime-html-table td:first-child {
  border-inline-start: 0;
}
.runtime-html-table th {
  background: var(--runtime-table-header-bg, #eaf3ed);
  color: var(--runtime-table-header-text, #176b3a);
  font-weight: 750;
}
.runtime-html-table tbody tr:last-child td {
  border-bottom: 0;
}
.runtime-html-table-striped tbody tr:nth-child(even),
.runtime-html-table tbody tr:hover {
  background: var(--runtime-table-stripe-bg, #f3f8f5);
}
.table-config-backdrop {
  position: fixed;
  z-index: 1300;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: #07160fbb;
  backdrop-filter: blur(3px);
}
.table-config-modal {
  width: min(820px, 96vw);
  max-height: 92vh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid #345441;
  border-radius: 12px;
  background: #10251a;
  color: #d7e6dc;
  box-shadow: 0 25px 80px #0008;
}
.table-config-modal > header, .table-config-modal > footer {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-color: #31503d;
}
.table-config-modal > header {
  border-bottom: 1px solid #31503d;
}
.table-config-modal > header div {
  display: grid;
  gap: 3px;
}
.table-config-modal > header span {
  color: #5dcc81;
  font-size: 9.2px;
  font-weight: 800;
  letter-spacing: .12em;
}
.table-config-modal > header button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #b7c9bd;
  font-size: 24.15px;
  cursor: pointer;
}
.table-config-body {
  padding: 16px;
  display: grid;
  gap: 15px;
  overflow: auto;
}
.table-config-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 10px;
}
.table-config-grid label, .table-config-fields label {
  display: grid;
  gap: 5px;
  color: #a9bcb0;
  font-size: 10.35px;
}
.table-config-grid input, .table-config-fields input {
  width: 100%;
  height: 34px;
  padding: 0 9px;
  border: 1px solid #496052;
  border-radius: 5px;
  outline: 0;
  background: #0a1b12;
  color: #e2eee6;
}
.table-config-toggles {
  display: flex;
  gap: 18px;
}
.table-config-toggles label {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #c4d4ca;
  font-size: 11.5px;
}
.table-config-colors {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 8px;
}
.table-config-colors label {
  min-height: 42px;
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 1fr 30px auto;
  align-items: center;
  gap: 7px;
  border: 1px solid #31503d;
  border-radius: 6px;
  font-size: 10.35px;
}
.table-config-colors input {
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  background: transparent;
}
.table-config-colors code {
  color: #82aa90;
  font-size: 9.2px;
}
.table-config-fields {
  display: grid;
  gap: 8px;
}
.table-config-fields > b {
  font-size: 11.5px;
}
.table-config-fields > div {
  display: grid;
  grid-template-columns: 24px 1fr 1fr;
  align-items: end;
  gap: 8px;
}
.table-config-fields > div > span {
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 5px;
  background: #234431;
  color: #85c99a;
  font-size: 10.35px;
}
.table-config-fields > small {
  color: #89a092;
  font-size: 9.2px;
}
.table-config-preview {
  padding: 10px;
  overflow: auto;
  border: 1px dashed #486653;
  border-radius: 8px;
  background: #e8eeea;
}
.table-config-modal > footer {
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #31503d;
}
.table-config-modal > footer button {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid #476251;
  border-radius: 6px;
  background: #1b3425;
  color: #c7d7cd;
  cursor: pointer;
}
.table-config-modal > footer button.primary {
  border-color: #07874a;
  background: #07874a;
  color: #fff;
  font-weight: 750;
}
@media (max-width: 700px) {
  .table-config-grid, .table-config-colors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .table-config-fields > div {
    grid-template-columns: 24px 1fr;
  }
  .table-config-fields > div label:last-child {
    grid-column: 2;
  }
}
.preview-tab-bar button {
  height: 39px;
  padding: 0 17px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: #e8ece9;
  color: #68726b;
  font-size: 11.5px;
  font-weight: 650;
}
.preview-tab-bar button.active {
  position: relative;
  bottom: -1px;
  background: white;
  color: #176b3a;
  border-color: #dbe2dd;
}
.stepper-preview .preview-tab-bar {
  padding: 18px;
  flex-wrap: nowrap;
  justify-content: safe center;
  overflow-x: auto;
  overflow-y: hidden;
  border: 0;
  background: #f8faf8;
  scrollbar-gutter: stable;
}
.stepper-preview .preview-tab-bar > div {
  position: relative;
  min-width: 90px;
  padding: 0 12px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 5px;
  color: #8a938d;
  font-size: 9.2px;
  font-weight: 500;
  white-space: nowrap;
}
.stepper-preview .preview-tab-bar > div:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 12px;
  left: calc(50% + 16px);
  width: calc(100% - 32px);
  height: 1px;
  background: #d8ded9;
}
.stepper-preview .preview-tab-bar i {
  position: relative;
  z-index: 1;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 2px solid #bdcbc1;
  border-radius: 50%;
  background: white;
  color: #758078;
  font-style: normal;
}
.stepper-preview .preview-tab-bar > div.active i,
.stepper-preview .preview-tab-bar > div.complete i {
  border-color: #176b3a;
  background: #176b3a;
  color: white;
}
.stepper-preview .preview-tab-bar > div.active {
  color: #176b3a;
  font-weight: 600;
}
.stepper-action-editor {
  margin-top: 14px;
  padding-top: 4px;
  border-top: 1px solid #e4e9e5;
}
.stepper-action-editor > label {
  display: block;
  margin-top: 10px;
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.stepper-actions {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #e0e6e2;
  background: white;
}
.stepper-actions button {
  min-width: 76px;
  height: 32px;
  border: 1px solid #9bb4a3;
  border-radius: 6px;
  background: #edf5ef;
  color: #176b3a;
}
.stepper-actions button:disabled {
  opacity: 0.45;
}
.stepper-actions span {
  color: #6d7871;
  font-size: 10.35px;
}
.preview-tab-content {
  min-height: 430px;
  padding: 20px;
  background: white;
  border: 1px solid #dbe2dd;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 32px #23312810;
}
.preview-tab-content .table-card {
  width: 100%;
  box-shadow: none;
}
.embedded-form {
  width: min(520px, 100%);
  margin: 20px auto;
}
.embedded-form .tiny-logo {
  margin-bottom: 13px;
}
.embedded-form h2 {
  margin: 0 0 5px;
  font-size: 25.3px;
}
.embedded-form > p {
  margin: 0 0 25px;
  color: #8a938d;
  font-size: 11.5px;
}
.embedded-form label {
  display: block;
  margin-bottom: 14px;
  color: #424c45;
  font-size: 11.5px;
  font-weight: 650;
}
.embedded-form input {
  width: 100%;
  height: 38px;
  margin-top: 6px;
  padding: 0 10px;
  border: 1px solid #dce3de;
  border-radius: 6px;
  outline: 0;
}
.embedded-form > button {
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  background: #19713c;
  color: white;
  font-size: 11.5px;
  font-weight: 650;
}
.menu-symbol.small {
  font-size: 17.25px;
}
.layout-tree {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.layout-tree-split {
  padding: 6px 0 0 7px;
  border-left: 2px solid #d9e5dc;
}
.split-label {
  margin: 0 0 5px;
  color: #779080;
  font-size: 9.2px;
  font-weight: 700;
  text-transform: capitalize;
}
.split-label span {
  display: inline-block;
  width: 17px;
  color: #267446;
  font-size: 13.8px;
}
.layout-page-config {
  margin-bottom: 7px;
  padding: 8px;
  border: 1px solid #dfe5e1;
  border-radius: 7px;
  background: #fbfcfb;
}
.layout-page-title {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 23px;
  gap: 5px;
  align-items: center;
}
.layout-page-title > span {
  width: 24px;
  height: 27px;
  border-radius: 5px;
  display: grid;
  place-items: center;
  color: #337149;
  background: #e8f3eb;
}
.layout-page-title input {
  min-width: 0;
  height: 28px;
  padding: 0 6px;
  border: 1px solid #dce3de;
  border-radius: 5px;
  background: white;
  outline: 0;
  color: #3f4942;
  font-size: 10.35px;
  font-weight: 650;
}
.layout-page-title button {
  width: 23px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  display: grid;
  place-items: center;
  background: transparent;
  color: #a46969;
}
.layout-page-title button:hover {
  color: #af3030;
  background: #f7e7e7;
}
.layout-page-selects {
  display: grid;
  grid-template-columns: 65px minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  margin-top: 6px;
}
.layout-page-selects select,
.layout-page-selects input {
  min-width: 0;
  width: 100%;
  height: 27px;
  padding: 0 5px;
  border: 1px solid #dfe5e1;
  border-radius: 5px;
  background: white;
  color: #4b554e;
  font-size: 9.2px;
  outline: 0;
}
.split-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 6px;
}
.split-actions button {
  min-width: 0;
  height: 27px;
  padding: 0 4px;
  border: 1px solid #d5e3d9;
  border-radius: 5px;
  background: #f2f8f3;
  color: #35704b;
  font-size: 8.05px;
  white-space: nowrap;
}
.split-actions button span {
  margin-right: 3px;
  font-size: 12.65px;
}
.layout-preview {
  width: min(980px, 100%);
  height: 600px;
  min-height: 450px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #dce2de;
  border-radius: 12px;
  background: white;
  box-shadow: 0 10px 32px #23312810;
}
.layout-preview-title {
  height: 48px;
  flex: none;
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid #e3e8e4;
  color: #3d4840;
  font-size: 13.8px;
}
.layout-preview-body {
  min-height: 0;
  flex: 1;
  padding: 10px;
  background: #f5f7f5;
}
.layout-preview-split {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
}
.layout-preview-split.vertical {
  flex-direction: row;
}
.layout-preview-split.horizontal {
  flex-direction: column;
}
.layout-preview-split > .layout-preview-pane,
.layout-preview-split > .layout-preview-split {
  flex: 1 1 0;
}
.layout-splitter {
  flex: none;
  display: grid;
  place-items: center;
  background: #e4e9e5;
}
.layout-preview-split.vertical > .layout-splitter {
  width: 7px;
  cursor: col-resize;
}
.layout-preview-split.horizontal > .layout-splitter {
  height: 7px;
  cursor: row-resize;
}
.layout-preview-split.vertical > .layout-splitter i {
  width: 1px;
  height: 22px;
  border-left: 1px dotted #8d9890;
}
.layout-preview-split.horizontal > .layout-splitter i {
  width: 22px;
  height: 1px;
  border-top: 1px dotted #8d9890;
}
.layout-preview-pane {
  min-width: 0;
  min-height: 0;
  margin: 5px;
  overflow: auto;
  border: 1px solid #e0e5e1;
  border-radius: 7px;
  background: white;
}
.pane-heading {
  height: 34px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #e8ece9;
  color: #435047;
  font-size: 10.35px;
  font-weight: 700;
}
.pane-heading span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pane-heading small {
  color: #919a94;
  font-size: 8.05px;
  text-transform: uppercase;
}
.pane-form,
.pane-table {
  padding: 14px;
}
.pane-form > b,
.pane-table > b {
  display: block;
  margin-bottom: 13px;
  color: #354139;
  font-size: 12.65px;
}
.pane-form label {
  display: block;
  margin-bottom: 9px;
  color: #647068;
  font-size: 9.2px;
}
.pane-form input {
  width: 100%;
  height: 29px;
  margin-top: 4px;
  padding: 0 7px;
  border: 1px solid #dfe4e0;
  border-radius: 5px;
  font-size: 9.2px;
}
.pane-form button {
  height: 28px;
  padding: 0 9px;
  border: 0;
  border-radius: 5px;
  background: #19713c;
  color: white;
  font-size: 9.2px;
}
.pane-table > div {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 8px;
  border-bottom: 1px solid #edf0ee;
  color: #59645c;
  font-size: 9.2px;
}
.pane-table > div:first-of-type {
  background: #f4f7f5;
  color: #758078;
  font-weight: 700;
}
@media (max-width: 800px) {
  .layout-preview {
    height: 520px;
  }
  .layout-preview-split.vertical {
    flex-direction: column;
  }
  .layout-preview-split.vertical > .layout-splitter {
    width: auto;
    height: 7px;
  }
}
.width-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin: -7px 0 16px;
}
.width-presets button {
  height: 27px;
  border: 1px solid #dfe5e1;
  border-radius: 5px;
  background: white;
  color: #68736b;
  font-size: 10.35px;
}
.width-presets button:hover {
  border-color: #8db39a;
  color: #176b3a;
}
.width-presets button.active {
  border-color: #4e9366;
  background: #eaf5ed;
  color: #176b3a;
  font-weight: 700;
  box-shadow: 0 0 0 1px #cce2d2;
}
@media (max-width: 680px) {
  .form-elements > .field-block {
    grid-column: 1 / -1 !important;
  }
}
.device-viewport {
  position: relative;
  min-width: 0;
  min-height: 560px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  transition: width 0.22s ease,
    max-width 0.22s ease;
}
.device-viewport > .page-owned-properties,
.standalone-process > .page-owned-properties {
  top: 10px;
  right: 10px;
}
.device-viewport.desktop {
  width: 100%;
  max-width: none;
}
.device-viewport.desktop .form-card {
  width: min(900px, 100%);
}
.device-viewport.desktop .table-card,
.device-viewport.desktop .tabs-preview,
.device-viewport.desktop .layout-preview {
  width: min(1100px, 100%);
}
.device-viewport.tablet {
  width: 768px;
  max-width: 100%;
  padding: 20px;
  border: 1px solid #d7ddd8;
  border-radius: 16px;
  background: #f8faf8;
  box-shadow: 0 8px 28px #27342c18;
}
.device-viewport.mobile {
  width: 390px;
  max-width: 100%;
  min-height: 680px;
  padding: 12px;
  border: 5px solid #34413a;
  border-radius: 24px;
  background: #f8faf8;
  box-shadow: 0 12px 35px #1b292050;
}
.device-viewport.mobile .form-card {
  border-radius: 13px;
}
.device-viewport.mobile .form-heading {
  padding: 24px 20px 19px;
}
.device-viewport.mobile .form-heading h1 {
  font-size: 24.15px;
}
.device-viewport.mobile .form-elements {
  padding: 22px 18px 14px;
  gap: 0;
}
.device-viewport.mobile .form-elements > .field-block {
  grid-column: 1 / -1 !important;
}
.device-viewport.mobile .form-footer {
  padding: 18px 20px 22px;
}
.device-viewport.mobile .field-tools {
  top: -25px;
}
.device-viewport.mobile .drag-handle,
.device-viewport.mobile .field-index {
  display: none;
}
.device-viewport.mobile .table-title {
  padding: 20px 17px 16px;
  align-items: flex-start;
  gap: 14px;
}
.device-viewport.mobile .table-title h1 {
  font-size: 21.85px;
}
.device-viewport.mobile .table-title > .preview-buttons {
  flex-direction: column;
  align-items: stretch;
}
.device-viewport.mobile .table-card table {
  min-width: 560px;
}
.device-viewport.mobile .table-bottom {
  align-items: flex-start;
  gap: 10px;
  flex-direction: column;
}
.device-viewport.mobile .preview-tab-bar {
  padding: 0 8px;
  flex-wrap: wrap;
  overflow-x: visible;
}
.device-viewport.mobile .preview-tab-bar button {
  padding: 0 10px;
}
.device-viewport.mobile .preview-tab-content {
  padding: 10px;
}
.device-viewport.mobile .tabs-preview {
  min-width: 0;
}
.device-viewport.mobile .layout-preview {
  min-width: 0;
  height: 640px;
  min-height: 640px;
}
.device-viewport.tablet .table-card,
.device-viewport.tablet .tabs-preview,
.device-viewport.tablet .layout-preview {
  max-width: 100%;
}
.canvas-toolbar .tablet-device {
  font-size: 19.55px;
  transform: scaleX(1.18);
}
.canvas-toolbar .mobile-device {
  font-size: 17.25px;
  transform: scaleX(0.72);
}
@media (max-width: 520px) {
  .canvas {
    padding-left: 8px;
    padding-right: 8px;
  }
  .device-viewport.mobile {
    border-width: 3px;
    border-radius: 18px;
  }
}
.menu-item-tree {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.menu-item-editor {
  padding: 7px;
  border: 1px solid #dfe5e1;
  border-radius: 7px;
  background: #fbfcfb;
}
.menu-item-line {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) 23px 23px;
  gap: 4px;
  align-items: center;
}
.menu-drag {
  color: #9aa29d;
  display: grid;
  place-items: center;
}
.menu-item-line input,
.menu-link-input {
  min-width: 0;
  width: 100%;
  height: 27px;
  padding: 0 6px;
  border: 1px solid #dce3de;
  border-radius: 5px;
  background: white;
  color: #3f4942;
  font-size: 10.35px;
  outline: 0;
}
.menu-item-line input {
  font-weight: 650;
}
.menu-item-line input:focus,
.menu-link-input:focus {
  border-color: #5d9870;
  box-shadow: 0 0 0 2px #e5f1e8;
}
.menu-item-line button {
  width: 23px;
  height: 25px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  display: grid;
  place-items: center;
  color: #39744e;
  background: #eaf4ec;
}
.menu-item-line button:last-child {
  color: #a25a5a;
  background: #f8ecec;
}
.menu-link-input {
  margin-top: 5px;
  color: #7b857e;
  font-family: monospace;
  font-size: 9.2px;
}
.menu-item-editor > small {
  display: block;
  margin-top: 5px;
  color: #8b948e;
  font-size: 8.05px;
}
.menu-preview-card {
  width: min(1050px, 100%);
  min-height: 600px;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dce2de;
  border-radius: 12px;
  background: white;
  box-shadow: 0 10px 32px #23312810;
}
.menu-preview-card > aside {
  min-height: 600px;
  display: flex;
  flex-direction: column;
  background: #17251d;
  color: white;
}
.menu-preview-brand {
  height: 64px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #ffffff14;
  font-size: 13.8px;
}
.menu-preview-filter {
  margin: 10px 10px 6px;
  height: 32px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #ffffff24;
  border-radius: 7px;
  background: #ffffff12;
  color: #b9ccc0;
}
.menu-preview-filter input {
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: white;
  font-size: 10.35px;
}
.menu-preview-filter input::placeholder {
  color: #a9bdb1;
}
.menu-preview-brand .brand-mark {
  width: 31px;
  height: 31px;
}
.menu-preview-card nav {
  flex: 1;
  padding: 12px 8px;
}
.menu-preview-item {
  width: 100%;
  min-height: 39px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #cbd7ce;
  display: flex;
  align-items: center;
  gap: 7px;
  text-align: left;
  font-size: 12.65px;
}
.menu-preview-item:hover {
  color: white;
  background: #ffffff12;
}
.menu-preview-item span {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-preview-item b {
  padding-right: 10px;
  color: #8fa297;
  font-size: 12.65px;
}
.menu-preview-children {
  position: relative;
}
.menu-preview-children:before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 3px;
  border-left: 1px solid #ffffff18;
}
.menu-preview-user {
  min-height: 62px;
  padding: 10px 14px;
  border-top: 1px solid #ffffff14;
  display: flex;
  align-items: center;
  gap: 9px;
}
.menu-preview-user > span {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #d8e7dc;
  background: #ffffff17;
  font-size: 10.35px;
}
.menu-preview-user > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.menu-preview-user b {
  font-size: 10.35px;
}
.menu-preview-user small {
  color: #8da096;
  font-size: 8.05px;
}
.menu-preview-card > section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #89928c;
}
.menu-preview-card > section h2 {
  margin: 10px 0 5px;
  color: #3f4942;
  font-size: 20.7px;
}
.menu-preview-card > section p {
  margin: 0;
  font-size: 10.35px;
}
.preview-placeholder-icon {
  width: 49px;
  height: 49px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #34714a;
  background: #e8f3eb;
}
.device-viewport.mobile .menu-preview-card {
  min-height: 640px;
  grid-template-columns: 125px minmax(0, 1fr);
}
.device-viewport.mobile .menu-preview-card > aside {
  min-height: 640px;
}
.device-viewport.mobile .menu-preview-brand {
  padding: 0 8px;
}
.device-viewport.mobile .menu-preview-brand b {
  display: none;
}
.device-viewport.mobile .menu-preview-card > section {
  padding: 12px;
  text-align: center;
}
.device-viewport.mobile .menu-preview-user > div {
  display: none;
}
.eyebrow small {
  float: right;
  color: #9ca59f;
  font-size: 8.05px;
  letter-spacing: 0.4px;
  font-weight: 600;
}
.element-tile[draggable="true"] {
  cursor: grab;
  user-select: none;
}
.element-tile[draggable="true"]:active {
  cursor: grabbing;
}
.drag-handle[draggable="true"] {
  cursor: grab;
  touch-action: none;
}
.drag-handle[draggable="true"]:active {
  cursor: grabbing;
}
.field-block.drop-before:before {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  top: -8px;
  height: 3px;
  border-radius: 3px;
  background: #26804a;
  box-shadow: 0 0 0 2px #dff0e4;
}
.drop-end-marker {
  grid-column: 1 / -1;
  height: 3px;
  margin-top: -5px;
  border-radius: 3px;
  background: #26804a;
  box-shadow: 0 0 0 2px #dff0e4;
}
.form-elements.empty-drop-zone {
  min-height: 180px;
  align-content: center;
  border: 2px dashed #cbd9cf;
  margin: 20px 38px;
  padding: 20px;
  border-radius: 10px;
  background: #f9fcfa;
}
.empty-drop-message {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  color: #839087;
  pointer-events: none;
}
.empty-drop-message b {
  color: #526057;
  font-size: 12.65px;
}
.empty-drop-message span {
  font-size: 10.35px;
}
.menu-item-line {
  display: flex;
  flex-wrap: nowrap;
  grid-template-columns: none;
}
.menu-item-line .menu-drag {
  width: 20px;
  flex: 0 0 20px;
}
.menu-item-line > input {
  min-width: 0;
  flex: 1 1 auto;
}
.menu-item-line > button {
  flex: 0 0 23px;
}
.menu-drag {
  cursor: grab;
}
.menu-item-editor:active .menu-drag {
  cursor: grabbing;
}
.menu-item-editor.menu-drop-after {
  border-bottom: 3px solid #2c8a4d;
  box-shadow: 0 3px 0 #d9eddf;
}
.files-tiny-preview {
  min-height: 86px;
  padding: 6px;
  display: flex;
  align-items: stretch;
  gap: 6px;
  border: 1px solid #dfe5e1;
  border-radius: 7px;
  background: #f9fbfa;
}
.files-tiny-preview span {
  width: 70px;
  display: grid;
  place-items: center;
  border: 1px dashed #9db6a5;
  border-radius: 6px;
  background: #edf6ef;
  color: #176b3a;
}
.files-tiny-preview small {
  align-self: center;
  color: #708078;
  font-size: 10.35px;
}
.radio-group-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  min-height: 42px;
  align-items: center;
}
.radio-group-preview label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-weight: 500;
}
.radio-group-preview input {
  width: 15px;
  height: 15px;
  accent-color: #176b3a;
}
.menu-item-line .insert-after-button {
  color: #466b8b;
  background: #eaf1f7;
}
.menu-item-editor.hidden-item {
  opacity: 0.58;
  border-style: dashed;
  background: #f2f4f2;
}
.menu-item-editor.hidden-item .menu-item-line > input,
.menu-item-editor.hidden-item .menu-link-input {
  text-decoration: line-through;
  color: #818983;
}
.menu-item-line .visibility-button {
  color: #3d704f;
  background: #e8f2ea;
}
.menu-item-line .authorization-button {
  color: #3f5f82;
  background: #e8f0f8;
  font-size: 12.65px;
}
.menu-item-editor.hidden-item .visibility-button {
  color: #875f35;
  background: #f4eadf;
}
.menu-auth-backdrop {
  position: fixed;
  z-index: 80;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  background: #14251c80;
  backdrop-filter: blur(3px);
}
.menu-auth-modal {
  width: min(560px, 100%);
  max-height: 85vh;
  overflow: hidden;
  border: 1px solid #d5e1d8;
  border-radius: 12px;
  background: white;
  box-shadow: 0 24px 70px #10271a55;
  display: flex;
  flex-direction: column;
}
.menu-auth-modal > header {
  min-height: 62px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e7e2;
}
.menu-auth-modal > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.menu-auth-modal > header > div > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8f0f8;
}
.menu-auth-modal > header b,
.menu-auth-modal > header small {
  display: block;
}
.menu-auth-modal > header b {
  color: #33423a;
  font-size: 14.95px;
}
.menu-auth-modal > header small {
  margin-top: 2px;
  color: #7b8980;
  font-size: 10.35px;
}
.menu-auth-modal > header > button {
  border: 0;
  background: transparent;
  color: #77847c;
  font-size: 26.45px;
}
.menu-auth-body {
  min-height: 120px;
  padding: 14px 16px;
  overflow: auto;
}
.menu-auth-body > p {
  margin: 0 0 10px;
  color: #758178;
  font-size: 10.35px;
}
.menu-auth-body > section {
  min-height: 50px;
  padding: 8px;
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 72px 72px 72px;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #e8ede9;
}
.menu-auth-body > section > div b,
.menu-auth-body > section > div small {
  display: block;
}
.menu-auth-body > section > div b {
  color: #3e4c43;
  font-size: 11.5px;
}
.menu-auth-body > section > div small {
  margin-top: 2px;
  color: #98a29b;
  font-size: 8.05px;
}
.menu-auth-body label {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #dce4de;
  border-radius: 6px;
  color: #66736b;
  font-size: 10.35px;
  cursor: pointer;
}
.menu-auth-body label.allow.selected {
  border-color: #7eb591;
  background: #eaf5ed;
  color: #176b3a;
}
.menu-auth-body label.deny.selected {
  border-color: #d7a3a3;
  background: #faeeee;
  color: #9a3434;
}
.menu-auth-body label.none.selected {
  border-color: #aeb9b2;
  background: #f0f3f1;
  color: #59655d;
}
.menu-auth-empty {
  padding: 28px;
  color: #87938b;
  text-align: center;
  font-size: 11.5px;
}
.menu-auth-modal > footer {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  border-top: 1px solid #e0e7e2;
}
.menu-auth-modal > footer button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #d3ddd6;
  border-radius: 6px;
  background: white;
  color: #56645b;
}
.menu-auth-modal > footer .primary {
  border-color: #176b3a;
  background: #176b3a;
  color: white;
}
.field-auth-backdrop {
  position: fixed;
  z-index: 85;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  background: #14251c80;
  backdrop-filter: blur(3px);
}
.field-auth-modal {
  width: min(760px, 100%);
  max-height: 88vh;
  overflow: hidden;
  border: 1px solid #d5e1d8;
  border-radius: 12px;
  background: white;
  box-shadow: 0 24px 70px #10271a55;
  display: flex;
  flex-direction: column;
}
.field-auth-modal > header {
  min-height: 62px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e7e2;
}
.field-auth-modal > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.field-auth-modal > header > div > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8f0f8;
}
.field-auth-modal > header b,
.field-auth-modal > header small {
  display: block;
}
.field-auth-modal > header b {
  color: #33423a;
  font-size: 14.95px;
}
.field-auth-modal > header small {
  margin-top: 2px;
  color: #7b8980;
  font-size: 10.35px;
}
.field-auth-modal > header > button {
  border: 0;
  background: transparent;
  color: #77847c;
  font-size: 26.45px;
}
.field-auth-body {
  padding: 12px 16px;
  overflow: auto;
}
.field-auth-heading,
.field-auth-body > section {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) minmax(230px, 1fr) minmax(230px, 1fr);
  gap: 10px;
  align-items: center;
}
.field-auth-heading {
  padding: 0 8px 7px;
  color: #7b8780;
  font-size: 9.2px;
  font-weight: 750;
  text-transform: uppercase;
}
.field-auth-body > section {
  min-height: 62px;
  padding: 9px 8px;
  border-top: 1px solid #e8ede9;
}
.field-auth-group b,
.field-auth-group small {
  display: block;
}
.field-auth-group b {
  color: #3e4c43;
  font-size: 11.5px;
}
.field-auth-group small {
  margin-top: 2px;
  color: #98a29b;
  font-size: 8.05px;
}
.field-auth-choice {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}
.field-auth-choice label {
  height: 31px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #dce4de;
  border-radius: 6px;
  color: #66736b;
  font-size: 9.2px;
  cursor: pointer;
}
.field-auth-choice label.allow.selected {
  border-color: #7eb591;
  background: #eaf5ed;
  color: #176b3a;
}
.field-auth-choice label.deny.selected {
  border-color: #d7a3a3;
  background: #faeeee;
  color: #9a3434;
}
.field-auth-choice label.none.selected {
  border-color: #aeb9b2;
  background: #f0f3f1;
  color: #59655d;
}
.field-auth-modal > footer {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  border-top: 1px solid #e0e7e2;
}
.field-auth-modal > footer button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #d3ddd6;
  border-radius: 6px;
  background: white;
  color: #56645b;
}
.field-auth-modal > footer .primary {
  border-color: #176b3a;
  background: #176b3a;
  color: white;
}
.object-auth-modal {
  width: min(980px, 100%);
}
.object-auth-body .field-auth-heading,
.object-auth-body > section {
  grid-template-columns: minmax(130px, 1fr) repeat(3, minmax(220px, 1fr));
}
.policy-list-heading {
  padding: 4px 6px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.policy-list-heading b,
.policy-list-heading small {
  display: block;
}
.policy-list-heading b {
  color: #33423a;
  font-size: 13.8px;
}
.policy-list-heading small {
  margin-top: 3px;
  color: #849087;
  font-size: 10.35px;
}
.policy-list-heading > button {
  min-height: 32px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #176b3a;
  border-radius: 7px;
  background: #176b3a;
  color: #fff;
  cursor: pointer;
}
.policy-list {
  display: grid;
  gap: 8px;
}
.policy-row {
  min-height: 64px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #dfe8e2;
  border-radius: 9px;
  background: #fbfdfc;
}
.policy-row-title b,
.policy-row-title small {
  display: block;
}
.policy-row-title b {
  color: #34463c;
  font-size: 12.65px;
}
.policy-row-title small {
  margin-top: 3px;
  color: #8a978f;
  font-size: 9.2px;
}
.policy-groups {
  min-width: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.policy-groups > span {
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  background: #e3f3e9;
  color: #176b3a;
  font-size: 10.35px;
  font-weight: 750;
}
.policy-groups > span button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 16.1px;
  line-height: 1;
  cursor: pointer;
}
.policy-groups select {
  min-height: 30px;
  padding: 0 8px;
  border: 1px dashed #9ebcac;
  border-radius: 7px;
  background: #fff;
  color: #4e6659;
  font-size: 10.35px;
}
.policy-row-actions {
  display: flex;
  gap: 6px;
}
.policy-row-actions button {
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #cfdcd4;
  border-radius: 6px;
  background: #fff;
  color: #3f5d4d;
  font-size: 10.35px;
  cursor: pointer;
}
.policy-row-actions button.danger {
  color: #a33f3f;
}
@media (max-width: 760px) {
  .policy-row {
    grid-template-columns: 1fr;
  }
}
.front-policy-backdrop {
  z-index: 96;
}
.front-policy-modal {
  width: min(1120px, 100%);
}
.front-policy-table-wrap {
  padding: 16px;
  overflow: auto;
}
.front-policy-table {
  width: 100%;
  min-width: 850px;
  border-collapse: separate;
  border-spacing: 0;
  color: #3d4d44;
  font-size: 11.5px;
}
.front-policy-table th,
.front-policy-table td {
  padding: 9px;
  border-right: 1px solid #e0e8e2;
  border-bottom: 1px solid #e0e8e2;
  background: #fff;
  text-align: center;
}
.front-policy-table tr:first-child th {
  border-top: 1px solid #e0e8e2;
}
.front-policy-table th:first-child,
.front-policy-table td:first-child {
  border-left: 1px solid #e0e8e2;
}
.front-policy-table thead th {
  background: #f1f6f3;
  color: #4e6256;
  font-size: 10.35px;
  text-transform: uppercase;
}
.front-policy-table tbody th {
  min-width: 150px;
  background: #f8fbf9;
  text-align: start;
}
.front-policy-table input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #176b3a;
}
.field-multi-combo {
  position: relative;
  min-width: 145px;
  border: 1px solid #ccd9d1;
  border-radius: 7px;
  background: #fff;
}
.field-multi-combo:focus-within {
  border-color: #478663;
  box-shadow: 0 0 0 2px #176b3a14;
}
.field-multi-combo.disabled {
  background: #f0f3f1;
  opacity: 0.65;
}
.field-multi-combo-values {
  min-height: 68px;
  padding: 5px;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  gap: 4px;
}
.field-multi-combo-values > span {
  max-width: 100%;
  padding: 3px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: #e3f3e9;
  color: #176b3a;
  white-space: nowrap;
}
.field-multi-combo-values > span button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  line-height: 1;
}
.field-multi-combo-values input {
  width: 90px;
  min-width: 70px;
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  color: #3f5047;
  font-size: 10.35px;
}
.field-multi-combo-options {
  position: absolute;
  z-index: 110;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  max-height: 180px;
  padding: 4px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #cad8cf;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 10px 25px #173b2826;
}
.field-multi-combo-options > button,
.field-multi-combo-options > span {
  padding: 7px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #3f5047;
  text-align: start;
}
.field-multi-combo-options > button:hover {
  background: #edf7f1;
}
.field-multi-combo-options b,
.field-multi-combo-options small {
  display: block;
}
.field-multi-combo-options small {
  color: #89968e;
  font-size: 8.05px;
}
.front-policy-table .access-fields-row > th,
.front-policy-table .access-fields-row > td {
  background: #f2f7ff;
}
.front-policy-table .access-fields-row > th {
  color: #285f9d;
}
.access-fields-row .field-multi-combo {
  border-color: #a9c8ec;
}
.access-fields-row .field-multi-combo:focus-within {
  border-color: #3979bd;
  box-shadow: 0 0 0 2px #3979bd1f;
}
.access-fields-row .field-multi-combo-values > span {
  background: #dcecff;
  color: #285f9d;
}
.front-policy-table .deny-fields-row > th,
.front-policy-table .deny-fields-row > td {
  background: #fff4f4;
}
.front-policy-table .deny-fields-row > th {
  color: #a13c3c;
}
.deny-fields-row .field-multi-combo {
  border-color: #e8b3b3;
}
.deny-fields-row .field-multi-combo:focus-within {
  border-color: #bd5151;
  box-shadow: 0 0 0 2px #bd51511f;
}
.deny-fields-row .field-multi-combo-values > span {
  background: #f9dddd;
  color: #9c3434;
}
.field-auth-group .abac-button {
  width: auto;
  min-height: 25px;
  margin-top: 5px;
  padding: 0 9px;
  border: 1px solid #a9c2da;
  border-radius: 5px;
  background: #eaf1f8;
  color: #315d86;
  font-size: 9.2px;
  font-weight: 800;
  letter-spacing: 0.05em;
}
.abac-backdrop {
  position: fixed;
  z-index: 95;
  inset: 0;
  padding: 20px;
  display: grid;
  place-items: center;
  background: #0f1f1788;
  backdrop-filter: blur(4px);
}
.abac-modal {
  width: min(780px, 100%);
  max-height: 90vh;
  overflow: hidden;
  border: 1px solid #cbdad0;
  border-radius: 12px;
  background: white;
  box-shadow: 0 28px 80px #0b1d125c;
  display: flex;
  flex-direction: column;
}
.abac-modal > header {
  min-height: 62px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dce5df;
}
.abac-modal > header > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.abac-modal > header > div > span {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e8f0f8;
  color: #315d86;
  font-size: 20.7px;
}
.abac-modal > header b,
.abac-modal > header small {
  display: block;
}
.abac-modal > header b {
  color: #33423a;
  font-size: 14.95px;
}
.abac-modal > header small {
  margin-top: 2px;
  color: #7b8980;
  font-size: 10.35px;
}
.abac-modal > header > button {
  border: 0;
  background: transparent;
  color: #77847c;
  font-size: 26.45px;
}
.abac-body {
  min-height: 220px;
  padding: 14px 16px;
  overflow: auto;
}
.abac-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
}
.abac-toolbar label {
  display: grid;
  gap: 4px;
  color: #67756c;
  font-size: 10.35px;
}
.abac-toolbar select {
  height: 32px;
  padding: 0 8px;
  border: 1px solid #cfdbd3;
  border-radius: 6px;
  background: white;
}
.abac-toolbar button {
  height: 32px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid #a8c9b3;
  border-radius: 6px;
  background: #edf7f0;
  color: #176b3a;
  font-size: 10.35px;
}
.abac-rules {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.abac-rules > section {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 30px;
  gap: 6px;
}
.abac-rules select,
.abac-rules input {
  min-width: 0;
  height: 34px;
  padding: 0 7px;
  border: 1px solid #d7e1da;
  border-radius: 6px;
  background: white;
  color: #3f4e45;
  font-size: 10.35px;
}
.abac-rules button {
  border: 0;
  border-radius: 6px;
  background: #faeeee;
  color: #a33c3c;
}
.abac-toolbar > span {
  display: flex;
  gap: 6px;
}
.abac-tree {
  padding: 8px;
  border-left: 2px solid #b9d3c1;
  border-radius: 6px;
  background: #f8fbf9;
}
.abac-root-drop-zone {
  min-height: 48px;
}
.abac-tree-rule[draggable="true"],
.abac-tree-unrestricted[draggable="true"],
.abac-tree-group[draggable="true"] {
  cursor: grab;
}
.abac-tree-rule.dragging,
.abac-tree-unrestricted.dragging,
.abac-tree-group.dragging {
  opacity: 0.42;
}
.abac-tree-rule:hover,
.abac-tree-unrestricted:hover,
.abac-tree-group > header:hover {
  outline: 1px dashed #79a98a;
  outline-offset: 2px;
}
.abac-tree-rule {
  margin-left: calc(var(--abac-depth) * 18px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) 30px;
  gap: 6px;
}
.abac-tree-unrestricted {
  margin-left: calc(var(--abac-depth) * 18px);
  min-height: 36px;
  padding: 6px 7px 6px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #b9d7c3;
  border-radius: 7px;
  background: #edf8f0;
  color: #176b3a;
  font-size: 11.5px;
  font-weight: 750;
}
.abac-tree-unrestricted button {
  width: 30px;
  align-self: stretch;
}
.abac-tree-group {
  margin-left: calc(var(--abac-depth) * 18px);
  border: 1px solid #cdded2;
  border-radius: 8px;
  background: white;
  overflow: visible;
}
.abac-tree-group > header {
  min-height: 38px;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  background: #edf5ef;
  border-bottom: 1px solid #d8e5dc;
}
.abac-tree-group > header select {
  width: 110px;
  height: 29px;
  border-color: #aac9b3;
  color: #176b3a;
  font-weight: 750;
}
.abac-tree-group > header span {
  display: flex;
  gap: 5px;
}
.abac-tree-group > header button {
  min-height: 27px;
  padding: 0 7px;
  border: 1px solid #bad2c1;
  background: white;
  color: #276a40;
  font-size: 9.2px;
}
.abac-tree-group > header button.remove {
  width: 27px;
  padding: 0;
  border-color: #e2bcbc;
  background: #faeeee;
  color: #a33c3c;
  font-size: 17.25px;
}
.abac-tree-group > div {
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.abac-tree-group > .abac-group-drop-zone {
  min-height: 42px;
}
.abac-tree-group > .abac-group-drop-zone:empty,
.abac-tree-group > .abac-group-drop-zone:has(> small:only-child) {
  background: #f8fcf9;
}
.abac-value-combobox {
  position: relative;
  min-width: 0;
}
.abac-value-combobox-input {
  min-height: 34px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  border: 1px solid #d7e1da;
  border-radius: 6px;
  background: #fff;
}
.abac-value-combobox-input > span {
  min-width: 0;
  padding: 3px 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  border-radius: 5px;
  background: #e3f3e9;
  color: #176b3a;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9.2px;
}
.abac-value-combobox-input > span button,
.abac-value-combobox-input .abac-value-clear {
  width: auto;
  height: auto;
  padding: 0;
  background: transparent;
  color: inherit;
  line-height: 1;
}
.abac-value-combobox-input input {
  height: 26px;
  min-width: 65px;
  padding: 0 3px;
  flex: 1;
  border: 0;
  outline: 0;
}
.abac-value-options {
  position: absolute;
  z-index: 20;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  max-height: 180px;
  padding: 4px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border: 1px solid #cad8cf;
  border-radius: 7px;
  background: #fff;
  box-shadow: 0 12px 28px #173b2830;
}
.abac-value-options > button,
.abac-value-options > span {
  min-height: 34px;
  padding: 6px 7px;
  border: 0;
  background: transparent;
  color: #3f5047;
  text-align: start;
}
.abac-value-options > button:hover {
  background: #edf7f1;
}
.abac-value-options b,
.abac-value-options small {
  display: block;
}
.abac-value-options small {
  color: #859087;
  font-size: 8.05px;
}
.abac-tree-group > div > small {
  padding: 10px;
  color: #93a098;
  text-align: center;
  font-size: 9.2px;
}
.abac-empty {
  margin-top: 12px;
  padding: 28px;
  border: 1px dashed #cfdad3;
  border-radius: 7px;
  color: #859087;
  text-align: center;
  font-size: 10.35px;
}
.abac-preview {
  margin-top: 14px;
  display: grid;
  gap: 5px;
  color: #65726a;
  font-size: 10.35px;
}
.abac-preview pre {
  max-height: 180px;
  overflow: auto;
  margin: 0;
  padding: 11px;
  border-radius: 7px;
  background: #14251b;
  color: #d8eadc;
  font: 9px/1.5 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  direction: ltr;
  text-align: left;
}
.abac-modal > footer {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  border-top: 1px solid #dce5df;
}
.abac-modal > footer button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid #d3ddd6;
  border-radius: 6px;
  background: white;
  color: #56645b;
}
.abac-modal > footer .primary {
  border-color: #176b3a;
  background: #176b3a;
  color: white;
}
.top-actions .publish.published {
  background: #12552f;
  border-color: #12552f;
}
.publish-toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 30;
  width: min(360px, calc(100vw - 32px));
  min-height: 66px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #d9e2dc;
  border-radius: 10px;
  background: white;
  box-shadow: 0 14px 40px #1b292030;
  animation: publish-in 0.2s ease-out;
}
.publish-toast > span {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.publish-toast > span.success {
  color: #176b3a;
  background: #e4f3e8;
}
.publish-toast > span.error {
  color: #ac3d3d;
  background: #f8e7e7;
}
.publish-toast > div {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.publish-toast b {
  color: #354139;
  font-size: 12.65px;
}
.publish-toast small {
  color: #7e8881;
  font-size: 9.2px;
  line-height: 1.4;
}
.publish-toast > button {
  width: 25px;
  height: 25px;
  border: 0;
  background: transparent;
  color: #89928c;
  font-size: 20.7px;
}
@keyframes publish-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.right-panel .list-properties-only .list-page-settings {
  margin: 18px 0 4px !important;
  padding: 11px !important;
  border: 1px solid #dfe7e1 !important;
  border-radius: 8px !important;
  background: #f7faf8 !important;
  display: grid !important;
  grid-template-columns: 88px minmax(0, 1fr) !important;
  gap: 8px !important;
}
.right-panel .list-properties-only .list-page-settings p {
  grid-column: 1/-1 !important;
  margin: 5px 0 0 !important;
  color: #79857d !important;
  font-size: 10.35px !important;
  line-height: 1.2 !important;
  font-weight: 750 !important;
  letter-spacing: 0.7px !important;
}
.right-panel .list-properties-only .list-page-settings label {
  display: block !important;
  margin: 0 !important;
  color: #657269 !important;
  font-size: 10.35px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}
.right-panel .list-properties-only .list-page-settings input,
.right-panel .list-properties-only .list-page-settings select {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 32px !important;
  margin: 5px 0 0 !important;
  padding: 0 7px !important;
  border: 1px solid #d8e2db !important;
  border-radius: 6px !important;
  background: white !important;
  color: #3e4b42 !important;
  font-size: 10.35px !important;
  line-height: normal !important;
}
.right-panel .list-properties-only .list-page-settings .list-option-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.right-panel .list-properties-only .list-page-settings .list-option-checkbox input[type="checkbox"] {
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
}
.table-card > .list-action-panel {
  min-height: 50px !important;
  padding: 8px 14px !important;
  border-top: 1px solid #e6ebe7 !important;
  border-bottom: 1px solid #dfe6e1 !important;
  background: #f7faf8 !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 7px !important;
}
.table-card > .list-action-panel > button {
  width: auto !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 11px !important;
  border: 1px solid #d6e0d9 !important;
  border-radius: 6px !important;
  background: white !important;
  color: #4b5a50 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 10.35px !important;
  line-height: 1 !important;
  font-weight: 650 !important;
  white-space: nowrap !important;
}
.table-card > .list-action-panel > button.primary {
  border-color: #176b3a !important;
  color: white !important;
  background: #176b3a !important;
}
.table-card > .list-action-panel > .list-pagination {
  margin: 0 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  color: #5f6d63 !important;
  font-size: 10.35px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}
.table-card > .list-action-panel > .list-pagination button {
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #d6e0d9 !important;
  border-radius: 5px !important;
  background: white !important;
  color: #356047 !important;
  font-size: 17.25px !important;
  line-height: 1 !important;
}
@media (max-width: 700px) {
  .table-card > .list-action-panel > .list-pagination {
    width: 100%;
    margin-left: 0 !important;
    justify-content: flex-end;
  }
}
.opened-page.opened-tab-page {
  padding: 0;
  background: #f7f9f7;
}
.opened-tab-page > .tabs-preview {
  min-height: 420px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.opened-tab-page .preview-tab-content {
  min-height: 365px;
}
.rendered-menu-page,
.list-page-modal {
  position: relative;
}
.inline-page-properties-button {
  position: absolute;
  z-index: 6;
  top: 14px;
  right: 14px;
  width: auto;
  height: 31px;
  padding: 0 10px;
  border: 1px solid #bdd3c4;
  border-radius: 6px;
  color: #176b3a;
  background: #edf6ef;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.35px;
  font-weight: 700;
  box-shadow: 0 2px 7px #173c2615;
}
.list-page-modal > .inline-page-properties-button {
  right: 52px;
}
.inline-page-properties-button:hover {
  border-color: #78a989;
  background: #e2f0e6;
}
.inline-page-properties-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  padding: 20px;
  display: grid;
  place-items: center;
  background: #17251d80;
  backdrop-filter: blur(2px);
}
.inline-page-properties-dialog {
  width: min(400px, 100%);
  overflow: hidden;
  border-radius: 11px;
  background: white;
  box-shadow: 0 24px 70px #10221855;
}
.inline-list-properties-dialog {
  width: min(760px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.inline-list-properties-dialog > .inline-list-properties-body {
  min-height: 0;
  padding: 0;
  overflow: auto;
}
.inline-list-properties-dialog .list-properties-only {
  padding: 5px 20px 25px;
}
.inline-list-properties-dialog .list-designer {
  padding-top: 12px;
}
.inline-list-properties-dialog .column-row {
  grid-template-columns: 20px minmax(150px, 1fr) minmax(110px, 180px) 125px 28px;
}
.inline-tab-properties-dialog {
  width: min(760px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.inline-tab-properties-dialog > .inline-tab-properties-body {
  min-height: 0;
  padding: 8px 20px 24px;
  overflow: auto;
}
.inline-tab-properties-dialog .library-heading,
.inline-tab-properties-dialog .schema-tabs {
  display: none;
}
.inline-tab-properties-dialog .tab-designer {
  padding: 0;
}
.inline-tab-properties-dialog .tab-page-list {
  gap: 10px;
}
.inline-tab-properties-dialog .tab-page-config {
  padding: 10px;
  border: 1px solid #dfe7e1;
  border-radius: 8px;
  background: #f8faf8;
}
.complete-page-properties-dialog {
  width: min(940px, 96vw);
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}
.complete-page-properties-body {
  min-height: 0;
  padding: 14px 20px 24px !important;
  overflow: auto;
}
.page-reference-properties {
  padding-bottom: 14px;
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  gap: 10px;
  border-bottom: 1px solid #e3e8e4;
}
.page-reference-properties label,
.complete-form-meta label {
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.page-reference-properties input,
.page-reference-properties select,
.complete-form-meta input,
.complete-form-meta select {
  width: 100%;
  height: 35px;
  margin-top: 5px;
  padding: 0 8px;
  border: 1px solid #dbe3dd;
  border-radius: 6px;
  background: white;
}
.complete-page-properties-body > .list-properties-only,
.complete-page-properties-body > .tab-designer,
.complete-page-properties-body > .layout-designer {
  padding-top: 14px;
}
.complete-page-properties-body .library-heading,
.complete-page-properties-body .schema-tabs {
  display: none;
}
.full-screen-page-properties-dialog {
  width: calc(100vw - 28px);
  height: calc(100vh - 28px);
  max-width: none;
  max-height: none;
}
.full-screen-page-properties-body {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  overflow: hidden;
  background: #f2f6f3;
}
.full-screen-designer-stage {
  min-width: 0;
  min-height: 0;
  padding: 18px;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  border-right: 1px solid #d7e1da;
}
.full-screen-designer-stage > .tabs-preview,
.full-screen-designer-stage > .layout-preview {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: white;
  box-shadow: 0 8px 28px #18332112;
}
.full-screen-designer-properties {
  min-width: 0;
  min-height: 0;
  padding: 16px;
  overflow: auto;
  background: white;
}
.full-screen-designer-properties > .page-reference-properties {
  grid-template-columns: 1fr;
}
.full-screen-designer-properties > .tab-designer,
.full-screen-designer-properties > .layout-designer {
  padding-top: 14px;
}
.full-screen-designer-properties .library-heading,
.full-screen-designer-properties .schema-tabs {
  display: none;
}
.full-screen-designer-properties .tab-page-list {
  gap: 9px;
}
.full-screen-designer-properties .tab-page-config {
  padding: 9px;
  border: 1px solid #dfe7e1;
  border-radius: 7px;
  background: #f8faf8;
}
.visual-form-page-designer {
  min-width: 0;
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 390px);
  overflow: hidden;
  background: #f2f6f3;
}
.visual-form-stage {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid #d7e1da;
}
.visual-form-palette {
  min-height: 60px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  border-bottom: 1px solid #dce5df;
  background: white;
}
.visual-form-palette > span {
  flex: none;
  color: #78877d;
  font-size: 9.2px;
  font-weight: 750;
  letter-spacing: 0.6px;
}
.visual-form-palette > button {
  min-width: max-content;
  height: 40px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #dce5df;
  border-radius: 6px;
  background: #fbfcfb;
  color: #46564b;
  font-size: 10.35px;
}
.visual-form-palette > button:hover {
  border-color: #8eb49a;
  background: #edf6ef;
  color: #176b3a;
}
.visual-form-canvas {
  min-height: 0;
  flex: 1;
  padding: 24px;
  overflow: auto;
}
.visual-form-canvas > .imported-form-preview {
  width: 100%;
  max-width: 920px;
  min-height: 420px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 8px 28px #18332112;
}
.visual-form-canvas .imported-form-field.selectable {
  position: relative;
  padding: 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  cursor: pointer;
}
.visual-form-canvas .imported-form-field.selectable:hover {
  border-color: #a8cbb3;
  background: #f6faf7;
}
.visual-form-canvas .imported-form-field.selected {
  border-color: #00a85a;
  background: #f4fbf6;
  box-shadow: 0 0 0 2px #bde9ce;
}
.visual-form-properties {
  min-width: 0;
  min-height: 0;
  overflow: auto;
  background: white;
}
.visual-form-properties > .right-title {
  position: sticky;
  top: 0;
  z-index: 2;
  background: white;
}
.visual-form-properties > .properties {
  border: 0;
}
@media (max-width: 850px) {
  .full-screen-page-properties-body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(300px, 55%) minmax(280px, 45%);
    overflow: auto;
  }
  .full-screen-designer-stage {
    border-right: 0;
    border-bottom: 1px solid #d7e1da;
  }
  .full-screen-designer-properties {
    overflow: visible;
  }
  .visual-form-page-designer {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(360px, 55%) minmax(300px, 45%);
    overflow: auto;
  }
  .visual-form-stage {
    border-right: 0;
    border-bottom: 1px solid #d7e1da;
  }
}
.complete-form-designer {
  padding-top: 14px;
}
.complete-form-meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
}
.complete-form-meta .wide {
  grid-column: 1/-1;
}
.complete-form-meta textarea {
  width: 100%;
  min-height: 72px;
  margin-top: 5px;
  padding: 8px;
  border: 1px solid #dbe3dd;
  border-radius: 6px;
  resize: vertical;
}
.complete-form-meta .javascript-editor {
  min-height: 120px;
}
.complete-form-elements {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.complete-form-elements > div {
  display: grid;
  grid-template-columns: minmax(130px, 1fr) 130px minmax(110px, 1fr) 85px 30px 30px;
  gap: 6px;
}
.complete-form-elements input,
.complete-form-elements select {
  min-width: 0;
  height: 34px;
  padding: 0 7px;
  border: 1px solid #dce4de;
  border-radius: 5px;
  background: white;
  font-size: 10.35px;
}
.complete-form-elements button {
  border: 1px solid #ead7d7;
  border-radius: 5px;
  color: #a43e3e;
  background: #fff8f8;
}
.complete-form-elements .element-object-props {
  border-color: #c9ddd0;
  color: #176b3a;
  background: #f0f7f2;
}
.complete-form-elements .element-object-props:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.nested-object-properties {
  z-index: 110;
}
.object-field-properties-dialog {
  width: min(680px, 94vw);
}
.object-field-properties-dialog > div {
  display: grid;
  grid-template-columns: 1fr 1fr 160px;
  gap: 10px;
}
.object-field-properties-dialog > div > label {
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.object-field-properties-dialog > div > label input,
.object-field-properties-dialog > div > label select {
  width: 100%;
  height: 35px;
  margin-top: 5px;
  padding: 0 8px;
  border: 1px solid #dbe3dd;
  border-radius: 6px;
}
.object-field-properties-dialog .element-json-label {
  grid-column: 1/-1;
}
@media (max-width: 700px) {
  .page-reference-properties,
  .complete-form-meta {
    grid-template-columns: 1fr;
  }
  .complete-form-meta .wide {
    grid-column: auto;
  }
  .complete-form-elements > div {
    grid-template-columns: 1fr 1fr;
  }
  .complete-form-elements > div button {
    min-height: 32px;
  }
}
.inline-page-properties-dialog > header {
  min-height: 58px;
  padding: 11px 15px;
  border-bottom: 1px solid #e4e9e5;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.inline-page-properties-dialog > header > div {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #176b3a;
}
.inline-page-properties-dialog h3 {
  margin: 0;
  color: #354139;
  font-size: 16.1px;
}
.inline-page-properties-dialog header > button {
  border: 0;
  background: transparent;
  color: #7d8880;
  font-size: 25.3px;
}
.inline-page-properties-dialog > div {
  padding: 17px;
}
.inline-page-properties-dialog label {
  display: block;
  margin-bottom: 12px;
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.inline-page-properties-dialog input,
.inline-page-properties-dialog select {
  width: 100%;
  height: 36px;
  margin-top: 5px;
  padding: 0 9px;
  border: 1px solid #dbe3dd;
  border-radius: 6px;
  background: white;
  color: #3c493f;
  font-size: 11.5px;
  outline: 0;
}
.inline-page-properties-dialog > footer {
  padding: 11px 15px;
  border-top: 1px solid #e6ebe7;
  display: flex;
  justify-content: flex-end;
}
.inline-page-properties-dialog > footer button {
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 6px;
  color: white;
  background: #176b3a;
  font-size: 10.35px;
  font-weight: 700;
}
.menu-page-source {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr);
  gap: 5px;
  margin-top: 6px;
}
.menu-page-source label {
  color: #838c86;
  font-size: 9.2px;
}
.menu-page-source select,
.menu-page-source input {
  width: 100%;
  min-width: 0;
  height: 27px;
  margin-top: 3px;
  padding: 0 5px;
  border: 1px solid #dfe5e1;
  border-radius: 5px;
  background: white;
  color: #4b554e;
  font-size: 9.2px;
  outline: 0;
}
.menu-item-editor.hidden-item .menu-page-source {
  opacity: 0.65;
}
.menu-preview-item.active {
  color: white;
  background: #1f6b3d;
}
.menu-preview-card > section {
  min-width: 0;
  overflow: auto;
  padding: 24px;
  display: block;
}
.menu-preview-card > section > .table-card {
  width: 100%;
  box-shadow: none;
}
.menu-preview-card > section > .embedded-form {
  margin: 20px auto;
}
.menu-page-empty {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #89928c;
  text-align: center;
}
.menu-page-empty h2 {
  margin: 10px 0 5px;
  color: #3f4942;
  font-size: 20.7px;
}
.menu-page-empty p {
  margin: 0;
  font-size: 10.35px;
}
.device-viewport.mobile .menu-preview-card > section {
  padding: 8px;
}
.device-viewport.mobile .menu-preview-card > section .table-title {
  padding: 14px 10px;
}
.menu-preview-card {
  grid-template-rows: 56px minmax(0, 1fr);
  min-height: 640px;
}
.menu-preview-card.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}
.program-topbar {
  position: relative;
  grid-column: 1 / -1;
  height: 56px;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid #e1e6e2;
  background: white;
  z-index: 2;
}
.sidebar-toggle {
  width: 34px;
  height: 34px;
  padding: 8px;
  border: 1px solid #dce3de;
  border-radius: 7px;
  background: #f8faf8;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.sidebar-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: #526057;
  transition: 0.2s;
}
.sidebar-toggle:hover {
  border-color: #91b39c;
  background: #edf5ef;
}
.program-identity {
  display: flex;
  height: 100%;
  align-items: center;
  gap: 9px;
}
.program-identity .brand-mark {
  width: 32px;
  height: 32px;
}
.program-identity .program-full-logo {
  width: auto;
  height: 95%;
  max-width: 210px;
  object-fit: contain;
}
.program-topbar-title {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 40%;
  overflow: hidden;
  transform: translate(-50%, -50%);
  color: #27332b;
  font-size: 17.25px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.program-identity > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.program-identity b {
  color: #27332b;
  font-size: 12.65px;
}
.program-identity small {
  color: #909993;
  font-size: 8.05px;
}
.program-top-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  color: #606b63;
  font-size: 10.35px;
}
.program-top-actions i {
  width: 29px;
  height: 29px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8f2ea;
  color: #286d40;
  font-size: 9.2px;
  font-style: normal;
  font-weight: 700;
}
.menu-preview-card > aside {
  grid-column: 1;
  grid-row: 2;
  min-height: 544px;
}
.menu-preview-card > section {
  grid-row: 2;
}
.menu-preview-card.sidebar-collapsed > section {
  grid-column: 1;
}
.device-viewport.mobile .menu-preview-card {
  grid-template-rows: 52px minmax(0, 1fr);
  min-height: 640px;
}
.device-viewport.mobile .menu-preview-card.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}
.device-viewport.mobile .program-topbar {
  height: 52px;
  padding: 0 9px;
  gap: 8px;
}
.device-viewport.mobile .program-identity b {
  font-size: 10.35px;
}
.device-viewport.mobile .program-identity small,
.device-viewport.mobile .program-top-actions > span {
  display: none;
}
.device-viewport.mobile .menu-preview-card > aside {
  min-height: 588px;
}
.button-script-label {
  position: relative;
  margin-top: 4px !important;
}
.code-language {
  position: absolute;
  right: 7px;
  top: 29px;
  z-index: 1;
  padding: 2px 5px;
  border-radius: 4px;
  background: #2c3d32;
  color: #9bd5aa;
  font: 700 7px/1 monospace;
}
.properties .javascript-editor {
  width: 100%;
  height: 132px;
  margin-top: 7px;
  padding: 12px 10px;
  resize: vertical;
  border: 1px solid #26382d;
  border-radius: 7px;
  outline: 0;
  background: #15221a;
  color: #d8eadc;
  caret-color: #77ca8d;
  font: 9px/1.55 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  tab-size: 2;
}
.properties .javascript-editor:focus {
  border-color: #4c9d65;
  box-shadow: 0 0 0 2px #dcece1;
}
.expandable-code-editor {
  position: relative;
  display: block;
  min-width: 0;
}
.expandable-code-editor > .expand-code-button {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 7px;
  width: 25px;
  height: 25px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #4a6654;
  border-radius: 5px;
  background: #26392d;
  color: #b9ddc3;
  font-size: 14.95px;
  line-height: 1;
  cursor: pointer;
}
.expandable-code-editor > .expand-code-button:hover {
  border-color: #78ae88;
  background: #31513b;
  color: white;
}
.expandable-code-editor > .javascript-editor {
  padding-right: 40px;
}
.expandable-html-editor > .javascript-editor {
  padding-right: 126px;
}
.expandable-html-editor > .insert-html-table-button {
  position: absolute;
  z-index: 3;
  top: 10px;
  right: 39px;
  height: 25px;
  padding: 0 8px;
  border: 1px solid #4a6654;
  border-radius: 5px;
  background: #26392d;
  color: #b9ddc3;
  font-size: 10.35px;
  font-weight: 700;
  cursor: pointer;
}
.expandable-html-editor > .insert-html-table-button:hover {
  border-color: #78ae88;
  background: #31513b;
  color: #fff;
}
.expandable-code-editor > .javascript-editor[aria-invalid="true"] {
  border-color: #e05252;
  box-shadow: 0 0 0 2px #e0525226;
}
.code-syntax-error {
  margin-top: 6px;
  padding: 7px 9px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  border: 1px solid #e0525266;
  border-radius: 6px;
  background: #fff2f2;
  color: #9f2424;
  direction: ltr;
  text-align: left;
  font: 10px/1.45 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}
.code-syntax-error b {
  flex: 0 0 auto;
}
.code-syntax-error span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.modal-code-syntax-error {
  position: absolute;
  z-index: 4;
  right: 14px;
  bottom: 14px;
  left: 14px;
  margin: 0;
  border-color: #f8717180;
  background: #431b1be8;
  color: #fecaca;
  box-shadow: 0 8px 30px #0006;
}
.code-editor-modal-backdrop {
  position: fixed;
  z-index: 160;
  inset: 0;
  padding: 28px;
  display: grid;
  place-items: center;
  background: #0b1811b8;
  backdrop-filter: blur(5px);
}
.code-editor-modal {
  width: min(1040px, 100%);
  height: min(760px, 92vh);
  overflow: hidden;
  display: grid;
  grid-template-rows: 52px minmax(0, 1fr) auto 48px;
  border: 1px solid #4a6453;
  border-radius: 12px;
  background: #101b14;
  box-shadow: 0 30px 100px #0009;
  direction: ltr;
  text-align: left;
}
.code-editor-modal > header {
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #304438;
  background: #18261d;
}
.code-editor-modal > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.code-editor-modal > header span {
  padding: 4px 6px;
  border-radius: 5px;
  background: #295039;
  color: #9fe0b1;
  font: 800 9px/1 monospace;
}
.code-editor-modal > header b {
  color: #e4eee7;
  font-size: 12.65px;
}
.code-editor-modal > header button {
  width: 30px;
  height: 30px;
  border: 0;
  background: transparent;
  color: #b8c5bc;
  font-size: 25.3px;
}
.code-editor-modal > textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 18px;
  resize: none;
  border: 0;
  outline: 0;
  background: #101b14;
  color: #d8eadc;
  caret-color: #77ca8d;
  font: 13px/1.65 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  tab-size: 2;
  direction: ltr;
  text-align: left;
}
.code-editor-modal > footer {
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #304438;
  background: #18261d;
}
.code-editor-modal > .action-helper-bar {
  max-height: 92px;
  margin: 0;
  padding: 8px 14px;
  overflow-y: auto;
  border-top: 1px solid #304438;
  background: #15241a;
}
.code-editor-modal > .action-helper-bar small {
  color: #91a499;
}
.code-editor-modal > .action-helper-bar button {
  border-color: #3d6f4d;
  background: #203b29;
  color: #bde1c7;
}
.code-editor-modal > .action-helper-bar button:hover {
  border-color: #74ad84;
  background: #2c5638;
  color: #fff;
}
.code-editor-modal > footer small {
  color: #819187;
  font-size: 9.2px;
}
.code-editor-modal > footer button {
  height: 30px;
  padding: 0 14px;
  border: 1px solid #43845a;
  border-radius: 6px;
  background: #21703e;
  color: white;
  font-size: 10.35px;
  font-weight: 750;
}
@media (max-width: 700px) {
  .code-editor-modal-backdrop {
    padding: 0;
  }
  .code-editor-modal {
    height: 100%;
    border-radius: 0;
  }
}
.canvas {
  padding: 8px;
}
.device-viewport,
.form-card,
.table-card,
.tabs-preview,
.layout-preview,
.menu-preview-card {
  width: 100%;
  max-width: none;
}
.form-heading {
  display: none;
}
.form-elements {
  padding: 12px;
}
.form-footer {
  padding: 10px 12px;
}
.table-title {
  min-height: 0;
  padding: 8px 10px;
  justify-content: flex-end;
}
.table-title > div:first-child {
  display: none;
}
.table-title:not(:has(.preview-buttons)) {
  display: none;
}
.preview-tab-content {
  padding: 4px;
  min-height: 0;
}
.preview-tabs-title {
  margin: 0;
  padding: 12px 16px;
  border-bottom: 1px solid #e0e8e2;
  background: #fff;
  color: #35443a;
  font-size: 17.25px;
}
.embedded-page-element .preview-tab-content {
  padding: 0;
}
.embedded-form {
  width: 100%;
  margin: 0;
  padding: 12px;
}
.embedded-form > .tiny-logo,
.embedded-form > h2,
.embedded-form > p {
  display: none;
}
.layout-preview-title,
.pane-heading {
  display: none;
}
.layout-preview {
  height: auto;
  min-height: 450px;
  border-radius: 6px;
}
.layout-preview-body {
  min-height: 450px;
}
.menu-preview-card {
  min-height: calc(100vh - 130px);
  border-radius: 6px;
}
.menu-preview-card > section {
  padding: 4px;
}
.menu-preview-card > section > .embedded-form {
  margin: 0;
}
.menu-preview-card .program-topbar {
  min-height: 40px;
  height: 40px;
  padding: 0 8px;
}
.menu-preview-card .program-identity,
.menu-preview-card .program-top-actions {
  display: none;
}
.menu-preview-card {
  grid-template-rows: 40px minmax(0, 1fr);
}
.menu-preview-card > aside {
  min-height: 0;
}
.menu-preview-brand {
  height: 42px;
}
.menu-preview-card nav {
  padding: 5px;
}
.menu-preview-item {
  min-height: 32px;
}
.list-page-modal-backdrop {
  padding: 4px;
}
.list-page-modal {
  width: min(900px, 100%);
  max-height: 98vh;
}
.list-page-modal > header {
  min-height: 40px;
  padding: 4px 10px;
}
.list-page-modal > header > div {
  display: none;
}
.opened-page {
  padding: 4px;
}
.opened-tab-page .preview-tab-content {
  min-height: 0;
}
.map-page {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: white;
  border: 1px solid #dce4de;
  border-radius: 6px;
  color: #344139;
  direction: ltr;
}
.map-toolbar {
  min-height: 46px;
  padding: 6px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-bottom: 1px solid #dfe6e1;
  background: #f8faf8;
}
.map-toolbar label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #647068;
  font-size: 10.35px;
  font-weight: 700;
}
.map-toolbar select,
.map-toolbar button,
.map-import {
  height: 32px;
  padding: 0 9px;
  border: 1px solid #d4ded7;
  border-radius: 5px;
  background: white;
  color: #3d4a41;
  font-size: 10.35px;
}
.map-toolbar button:hover,
.map-import:hover {
  border-color: #6c9f7c;
  background: #edf6ef;
}
.map-import {
  display: flex !important;
  cursor: pointer;
  color: #176b3a !important;
}
.map-import input {
  display: none;
}
.map-export {
  position: relative;
}
.map-export > button {
  height: 32px;
  padding: 0 10px;
  border: 1px solid #8bb29a;
  border-radius: 5px;
  background: #edf6ef;
  color: #176b3a;
  font-size: 10.35px;
  font-weight: 700;
}
.map-export > div {
  position: absolute;
  z-index: 20;
  top: 36px;
  right: 0;
  width: 165px;
  padding: 4px;
  border: 1px solid #d6e0d9;
  border-radius: 6px;
  background: white;
  box-shadow: 0 10px 28px #17251d30;
}
.map-export > div button {
  width: 100%;
  height: 31px;
  padding: 0 8px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #3f4d43;
  text-align: left;
  font-size: 10.35px;
}
.map-export > div button:hover {
  background: #eaf4ec;
  color: #176b3a;
}
.map-workspace {
  min-height: 0;
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 250px;
}
.openlayers-map {
  width: 100%;
  min-height: 470px;
  background: #e5ebe6;
}
.map-workspace > aside {
  padding: 10px;
  overflow: auto;
  border-left: 1px solid #dfe6e1;
  background: #fbfcfb;
  direction: ltr;
}
.map-workspace > aside > label {
  display: block;
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.map-workspace textarea {
  width: 100%;
  height: 260px;
  margin-top: 6px;
  padding: 8px;
  resize: vertical;
  border: 1px solid #d8e1da;
  border-radius: 5px;
  outline: 0;
  font: 9px/1.5 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  direction: ltr;
}
.map-workspace > aside > button {
  width: 100%;
  height: 34px;
  margin-top: 7px;
  border: 0;
  border-radius: 5px;
  background: #176b3a;
  color: white;
  font-size: 10.35px;
  font-weight: 700;
}
.map-workspace > aside > small {
  display: block;
  margin-top: 9px;
  color: #69756d;
  font-size: 9.2px;
  line-height: 1.5;
}
.utm-settings {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 10px;
}
.utm-settings label {
  color: #59665d;
  font-size: 9.2px;
  font-weight: 700;
}
.utm-settings input,
.utm-settings select {
  width: 100%;
  height: 31px;
  margin-top: 4px;
  padding: 0 6px;
  border: 1px solid #d8e1da;
  border-radius: 5px;
  background: white;
  font-size: 10.35px;
}
.ol-zoom {
  top: 8px;
  left: 8px;
}
@media (max-width: 700px) {
  .map-workspace {
    grid-template-columns: 1fr;
  }
  .map-workspace > aside {
    border-left: 0;
    border-top: 1px solid #dfe6e1;
  }
  .openlayers-map {
    min-height: 390px;
  }
}
.process-page {
  width: 100%;
  min-height: 560px;
  overflow: auto;
  border: 1px solid #dce4de;
  border-radius: 6px;
  background: #f4f7f4;
  direction: ltr;
}
.process-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  min-height: 44px;
  padding: 6px 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #dbe4dd;
  background: #fffffff2;
  color: #738078;
  font-size: 10.35px;
}
.process-toolbar button {
  height: 31px;
  padding: 0 11px;
  border: 0;
  border-radius: 5px;
  background: #176b3a;
  color: white;
  font-size: 10.35px;
  font-weight: 700;
}
.process-toolbar span {
  flex: 1;
}
.process-toolbar .clear-process {
  border: 1px solid #d9e1db;
  background: white;
  color: #66736a;
}
.process-toolbar .best-arrange {
  border: 1px solid #83ad91;
  background: #e8f3eb;
  color: #176b3a;
}
.process-toolbar .test-process {
  border: 1px solid #3769a5;
  background: #edf5ff;
  color: #24588f;
}
.process-zoom {
  display: flex;
  gap: 3px;
}
.process-zoom button {
  min-width: 29px;
  padding: 0 7px;
  border: 1px solid #cfdcd2;
  background: white;
  color: #326e47;
  font-size: 13.8px;
}
.process-zoom button:last-child {
  font-size: 9.2px;
}
.process-canvas {
  display: block;
  width: 100%;
  height: 700px;
  background-color: #f4f7f4;
  background-image: radial-gradient(#c9d4cc 1px, transparent 1px);
  background-size: 18px 18px;
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.process-canvas.panning {
  cursor: grabbing;
}
.process-links path,
.process-links line {
  fill: none;
  stroke: #287849;
  stroke-width: 2.5;
}
.process-link {
  cursor: pointer;
}
.process-link .process-link-hit {
  stroke: transparent;
  stroke-width: 18;
  pointer-events: stroke;
}
.process-link .process-link-line {
  pointer-events: none;
  transition: stroke 140ms ease, stroke-width 140ms ease, filter 140ms ease;
}
.process-link.selected .process-link-line {
  stroke: #1681d4;
  stroke-width: 4;
  stroke-opacity: 1;
  filter: drop-shadow(0 0 3px #1681d466);
}
.process-link:hover .process-link-line {
  stroke: #00a85a;
  stroke-width: 4.5;
  stroke-opacity: 1;
  stroke-dasharray: 11 7;
  filter: drop-shadow(0 0 4px rgb(0 168 90 / 55%));
  animation: process-arrow-flow 550ms linear infinite;
}
@keyframes process-arrow-flow {
  to {
    stroke-dashoffset: -18;
  }
}
@media (prefers-reduced-motion: reduce) {
  .process-link:hover .process-link-line {
    animation: none;
    stroke-dasharray: none;
  }
}
.process-links path.drawing {
  stroke: #5c9a70;
  stroke-dasharray: 7 5;
  marker-end: none;
}
.process-node > rect:first-child {
  fill: white;
  stroke: #d5e0d8;
}
.process-node-header {
  fill: #176b3a;
  stroke: none;
}
.process-node .header-square {
  fill: #176b3a;
}
.process-node.activity-type-start .process-node-header,
.process-node.activity-type-start .header-square {
  fill: #1976d2;
}
.process-node.activity-type-end .process-node-header,
.process-node.activity-type-end .header-square {
  fill: #d32f2f;
}
.process-node {
  cursor: move;
}
.process-node.moving {
  opacity: 0.92;
}
.process-node input {
  cursor: text;
}
.process-node button {
  cursor: pointer;
}
.activity-title {
  width: 100%;
  height: 43px;
  padding: 2px 4px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: white;
  text-align: right;
  direction: rtl;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 16.1px;
  font-weight: 750;
  line-height: 1.2;
}
.activity-group-lookup {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: start;
  gap: 5px;
  direction: rtl;
}
.activity-group-lookup > span {
  padding-top: 10px;
  color: #6d7971;
  font-size: 12.65px;
  font-weight: 750;
}
.activity-group-lookup details {
  position: relative;
  min-width: 0;
  direction: rtl;
}
.activity-group-lookup summary {
  height: 43px;
  padding: 4px 6px;
  overflow: hidden;
  border: 1px solid #d8e2da;
  border-radius: 5px;
  background: #f7faf8;
  display: flex;
  align-items: center;
  gap: 4px;
  color: #35463b;
  cursor: pointer;
  list-style: none;
}
.activity-group-lookup summary::-webkit-details-marker {
  display: none;
}
.activity-group-lookup summary > b {
  margin-right: auto;
  color: #77847b;
  font-size: 13.8px;
}
.activity-group-lookup summary > em {
  color: #929c95;
  font-size: 11.5px;
  font-style: normal;
}
.lookup-chips {
  min-width: 0;
  max-height: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  overflow: hidden;
}
.lookup-chips i {
  max-width: 95px;
  padding: 2px 4px;
  overflow: hidden;
  border-radius: 3px;
  background: #dfeee3;
  color: #22683c;
  font-size: 11.5px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-group-lookup details > div {
  position: absolute;
  z-index: 30;
  top: 46px;
  right: 0;
  width: 170px;
  max-height: 155px;
  padding: 4px;
  overflow: auto;
  border: 1px solid #d5dfd8;
  border-radius: 5px;
  background: white;
  box-shadow: 0 8px 22px #17251d30;
}
.activity-group-lookup details > div label {
  min-height: 27px;
  padding: 4px 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 4px;
  color: #3d4941;
  font-size: 12.65px;
  cursor: pointer;
}
.activity-group-lookup details > div label:hover {
  background: #edf5ef;
}
.activity-group-lookup details > div input {
  width: 13px;
  height: 13px;
  margin: 0;
}
.activity-group-lookup details > div small {
  display: block;
  padding: 8px;
  color: #8b958e;
  font-size: 11.5px;
  text-align: center;
}
.activity-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 80;
  padding: 18px;
  display: grid;
  place-items: center;
  background: #17251d80;
  backdrop-filter: blur(2px);
  direction: ltr;
}
.activity-modal {
  width: min(900px, 100%);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 10px;
  background: white;
  box-shadow: 0 24px 75px #10221866;
}
.activity-modal > header {
  min-height: 58px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e1e7e3;
}
.activity-modal > header > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.activity-modal > header b {
  color: #354139;
  font-size: 16.1px;
}
.activity-modal > header small {
  overflow: hidden;
  color: #7d8981;
  font-size: 10.35px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-modal > header > button {
  border: 0;
  background: transparent;
  color: #78847b;
  font-size: 27.6px;
}
.activity-form {
  min-height: 0;
  padding: 16px;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.activity-form label,
.activity-form .activity-field {
  min-width: 0;
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.activity-form input,
.activity-form textarea,
.activity-form select {
  width: 100%;
  margin-top: 5px;
  padding: 0 9px;
  border: 1px solid #d9e2db;
  border-radius: 5px;
  background: white;
  color: #354139;
  font-size: 10.35px;
  outline: 0;
}
.activity-form input {
  height: 35px;
}
.activity-combobox {
  position: relative;
  min-width: 0;
}
.activity-combobox input {
  padding-right: 28px;
  background-image: linear-gradient(45deg, transparent 50%, #668174 50%),
    linear-gradient(135deg, #668174 50%, transparent 50%);
  background-position: calc(100% - 14px) 15px,
    calc(100% - 10px) 15px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
.activity-combobox input:focus {
  border-color: #65a57c;
  box-shadow: 0 0 0 2px #dceee2;
}
.activity-multi-combobox {
  position: relative;
  margin-top: 5px;
}
.activity-multi-combobox > summary {
  min-height: 35px;
  padding: 6px 9px;
  border: 1px solid #d9e2db;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
  background: white;
  cursor: pointer;
  list-style: none;
}
.activity-multi-combobox > summary::-webkit-details-marker {
  display: none;
}
.activity-multi-combobox > summary em {
  color: #929d96;
  font-style: normal;
  font-weight: 500;
}
.activity-single-combobox > summary > span {
  min-width: 0;
  overflow: hidden;
  color: #354139;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-single-combobox > summary > .activity-combo-placeholder {
  color: #929d96;
}
.activity-multi-combobox > summary b {
  color: #668174;
  transition: transform .15s ease;
}
.activity-multi-combobox[open] > summary {
  border-color: #65a57c;
  box-shadow: 0 0 0 2px #dceee2;
}
.activity-multi-combobox[open] > summary b {
  transform: rotate(180deg);
}
.activity-combo-chips {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.activity-combo-chips i {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 145px;
  padding: 2px 5px;
  overflow: hidden;
  border-radius: 9px;
  background: #e5f2e9;
  color: #27613d;
  font-size: 9.2px;
  font-style: normal;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-combo-chips i > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-single-combobox > summary > span {
  flex: 1;
}
.activity-multi-combobox .activity-combo-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #27613d;
  font: 16px/1 sans-serif;
  cursor: pointer;
}
.activity-multi-combobox .activity-combo-remove:hover {
  background: #cde5d5;
}
.activity-multi-combobox .activity-combo-remove:focus-visible {
  outline: 2px solid #27613d;
  outline-offset: 1px;
}
.activity-combo-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 4px);
  right: 0;
  left: 0;
  padding: 6px;
  border: 1px solid #cadbd0;
  border-radius: 6px;
  background: white;
  box-shadow: 0 10px 24px #183a2524;
}
.activity-form .activity-combo-menu > input {
  height: 30px;
  margin: 0 0 5px;
}
.activity-combo-options {
  max-height: 170px;
  overflow: auto;
  display: grid;
  gap: 2px;
}
.activity-combo-options > label {
  min-height: 29px;
  padding: 4px 5px;
  border-radius: 4px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.activity-combo-options > label:hover {
  background: #edf6f0;
}
.activity-single-options > button {
  width: 100%;
  min-height: 29px;
  padding: 4px 5px;
  border: 0;
  border-radius: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.activity-single-options > button:hover,
.activity-single-options > button.active {
  background: #edf6f0;
}
.activity-form .activity-combo-options input[type="checkbox"] {
  width: 14px;
  height: 14px;
  margin: 0;
}
.activity-combo-options span {
  overflow: hidden;
  color: #344b3c;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.activity-combo-options small {
  color: #89958d;
  font: 7px/1.2 ui-monospace, monospace;
}
.activity-combo-empty {
  padding: 8px;
  color: #8b968f;
  text-align: center;
}
.activity-form select {
  min-height: 35px;
}
.activity-form select[multiple] {
  min-height: 88px;
  padding: 5px;
}
.activity-form textarea {
  height: 90px;
  padding-top: 8px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.activity-modal > footer {
  padding: 10px 16px;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e1e7e3;
}
.activity-modal > footer button {
  height: 34px;
  padding: 0 14px;
  border: 0;
  border-radius: 5px;
  background: #176b3a;
  color: white;
  font-size: 10.35px;
  font-weight: 700;
}
.edit-page-rules-link {
  grid-column: 1 / -1;
  justify-self: start;
  padding: 2px 0;
  border: 0;
  border-bottom: 1px dashed #79a98a;
  background: transparent;
  color: #176b3a;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.edit-page-rules-modal {
  width: min(980px, 100%);
}
.edit-page-rules-list {
  min-height: 180px;
  max-height: 68vh;
  padding: 16px;
  overflow: auto;
  background: #f7faf8;
}
.edit-page-rule-card {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(150px, 1.1fr) minmax(110px, .65fr) minmax(110px, .65fr) minmax(120px, .75fr) minmax(170px, 1.2fr) 34px 34px;
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #d8e4dc;
  border-radius: 9px;
  background: white;
}
.edit-page-rule-card label {
  min-width: 0;
  color: #66736b;
  font-size: 10.35px;
  font-weight: 700;
}
.edit-page-rule-card input,
.edit-page-rule-card select {
  width: 100%;
  height: 35px;
  margin-top: 5px;
  padding: 0 9px;
  border: 1px solid #d9e2db;
  border-radius: 5px;
  background: white;
  color: #354139;
  font-size: 11.5px;
}
.edit-page-rule-number {
  align-self: center;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e6f2e9;
  color: #176b3a;
  font-size: 11.5px;
  font-weight: 800;
}
.edit-page-rule-remove {
  display: grid;
  place-items: center;
  width: 32px;
  height: 35px;
  border: 1px solid #efd2d2;
  border-radius: 6px;
  background: #fff3f3;
  color: #b94747;
}
.edit-page-rules-empty {
  min-height: 150px;
  display: grid;
  place-content: center;
  gap: 5px;
  color: #7c8981;
  text-align: center;
}
.edit-page-rules-empty b {
  color: #45544a;
  font-size: 13.8px;
}
.edit-page-rules-empty span {
  font-size: 11.5px;
}
.edit-page-rules-modal > footer {
  justify-content: space-between;
}
@media (max-width: 900px) {
  .edit-page-rule-card {
    grid-template-columns: 30px 1fr 1fr;
  }
  .edit-page-rule-page {
    grid-column: span 2;
  }
}
@media (max-width: 700px) {
  .activity-form {
    grid-template-columns: 1fr;
  }
  .activity-form label {
    grid-column: span 1 !important;
  }
  .activity-form .next-button-hidden-setting {
    grid-column: span 1;
  }
}
.side-library:has(.groups-library) > .section-library-only {
  display: none;
}
.group-id {
  max-width: 90px;
  overflow: hidden;
  color: #98a19b;
  font-size: 8.05px;
  text-overflow: ellipsis;
  white-space: nowrap;
  direction: ltr;
}
.standalone-group {
  position: absolute;
  inset: 47px 0 0;
  padding: 20px;
  display: grid;
  place-items: center;
}
.canvas-wrap:has(.standalone-group) > .canvas {
  display: none;
}
.standalone-group > div {
  min-width: 280px;
  padding: 35px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
  border: 1px solid #dce4de;
  border-radius: 10px;
  background: white;
  color: #3d4a41;
  box-shadow: 0 10px 30px #18332112;
}
.standalone-group small {
  color: #89938c;
  direction: ltr;
}
.right-panel:has(.group-properties) > .properties:not(.group-properties),
.right-panel:has(.group-properties) > .empty-properties {
  display: none;
}
.standalone-process {
  position: absolute;
  inset: 47px 0 0;
  padding: 8px;
  overflow: auto;
}
.canvas-wrap:has(.standalone-process) > .canvas {
  display: none;
}
.standalone-group {
  position: absolute;
  inset: 47px 0 0;
  padding: 8px;
  display: grid;
  place-items: center;
}
.canvas-wrap:has(.standalone-group) > .canvas {
  display: none;
}
.group-preview {
  min-width: 300px;
  padding: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce4de;
  border-radius: 10px;
  background: white;
  box-shadow: 0 10px 32px #23312810;
}
.group-preview > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #e8f3eb;
  color: #176b3a;
}
.group-preview b {
  font-size: 20.7px;
}
.group-preview small {
  color: #7d8981;
  font: 9px ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
}
.right-panel:has(.process-properties) > .properties:not(.process-properties),
.right-panel:has(.process-properties) > .empty-properties,
.right-panel:has(.group-properties) > .properties:not(.group-properties),
.right-panel:has(.group-properties) > .empty-properties {
  display: none;
}
@media (max-width: 1100px) {
  .properties-toggle {
    display: flex;
  }
  .properties-close {
    margin-left: auto;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #77817a;
    align-items: center;
    justify-content: center;
    font-size: 25.3px;
  }
  .workspace,
  .workspace.single-menu-view {
    grid-template-columns: 300px minmax(0, 1fr);
  }
  .workspace.forms-workspace {
    grid-template-columns: var(--forms-panel-width, 240px) minmax(0, 1fr);
  }
  .right-panel {
    display: block;
    position: fixed;
    z-index: 40;
    top: 66px;
    right: 0;
    bottom: 0;
    width: min(var(--properties-width, 360px), 92vw);
    border-left: 1px solid var(--line);
    box-shadow: -15px 0 40px #17251d24;
    transform: translateX(105%);
    transition: transform 0.2s ease;
  }
  .right-panel.responsive-open {
    transform: translateX(0);
  }
}
@media (max-width: 680px) {
  .workspace,
  .workspace.single-menu-view {
    display: block;
  }
  .properties-toggle {
    width: 36px;
    padding: 0;
    justify-content: center;
    font-size: 0;
  }
}
.process-node foreignObject {
  overflow: visible;
  direction: rtl;
}
.process-node input {
  width: 100%;
  height: 100%;
  padding: 0 7px;
  border: 1px solid #dce4de;
  border-radius: 5px;
  outline: 0;
  background: white;
  color: #38453c;
  text-align: right;
  direction: rtl;
  font-size: 10.35px;
}
.process-node-header + path + foreignObject input {
  border: 0;
  background: transparent;
  color: white;
  font-size: 13.8px;
  font-weight: 750;
}
.delete-action {
  width: 24px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  background: #ffffff1c;
  color: white;
  font-size: 19.55px;
}
.input-port {
  fill: white;
  stroke: #176b3a;
  stroke-width: 3;
  cursor: crosshair;
}
.next-port {
  fill: #176b3a;
  stroke: white;
  stroke-width: 3;
  cursor: crosshair;
}
.input-label,
.group-label {
  fill: #7d8981;
  font-size: 11.5px;
  font-weight: 750;
  letter-spacing: 0.5px;
  pointer-events: none;
}
.group-input {
  background: #f5f8f5 !important;
  font-weight: 700;
}
.next-button-row {
  width: 100%;
  height: 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px 28px;
  align-items: center;
  overflow: hidden;
  border: 1px solid #d8e4db;
  border-radius: 5px;
  background: white;
  color: #24683d;
  font-size: 12.65px;
}
.next-button-row span {
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.next-button-row button {
  width: 28px;
  height: 26px;
  padding: 0;
  border: 0;
  border-left: 1px solid #d8e4db;
  background: #f3f8f4;
  color: #24683d;
  font-size: 16.1px;
  font-weight: 800;
}
.next-button-row .remove-next-button {
  color: #b43d3d;
  background: #fff6f6;
}
.remove-next-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  pointer-events: none;
}
.next-button-modal {
  width: min(600px, 100%);
}
.next-button-hidden-setting {
  grid-column: span 2;
  min-height: 58px;
  padding: 9px 11px;
  border: 1px solid #d9e2db;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: #f8faf8;
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.next-button-hidden-setting.active {
  border-color: #8ebba0;
  background: #edf7f0;
  box-shadow: inset 3px 0 0 #287747;
}
.next-button-hidden-setting > div {
  min-width: 0;
  display: grid;
  gap: 3px;
}
.next-button-hidden-setting b {
  color: #45544a;
  font-size: 10.35px;
}
.next-button-hidden-setting small {
  color: #7d8981;
  font-size: 9.2px;
  font-weight: 500;
  line-height: 1.35;
}
.next-button-hidden-switch {
  position: relative;
  flex: 0 0 38px;
  width: 38px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #ccd5cf;
  cursor: pointer;
  transition: background 0.16s ease;
}
.next-button-hidden-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px #13291b33;
  transition: transform 0.16s ease;
}
.next-button-hidden-switch[aria-checked="true"] {
  background: #287747;
}
.next-button-hidden-switch[aria-checked="true"] i {
  transform: translateX(16px);
}
.next-button-hidden-switch:focus-visible {
  outline: 2px solid #287747;
  outline-offset: 2px;
}
.next-button-modal textarea {
  min-height: 92px;
  padding: 9px;
  border: 1px solid #d6e1da;
  border-radius: 6px;
  font: 11px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.process-outcome-error {
  color: #b42318;
}
.process-server-actions-table-wrap {
  margin-bottom: 9px;
  overflow-x: auto;
  border: 1px solid #d8e4dc;
  border-radius: 8px;
  background: white;
}
.process-server-actions-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.process-server-actions-table th,
.process-server-actions-table td {
  padding: 8px;
  border-bottom: 1px solid #e4ebe6;
  overflow: hidden;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.process-server-actions-table th {
  background: #f3f7f4;
  color: #708078;
  font-size: 9.2px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.process-server-actions-table th:nth-child(1) {
  width: 30%;
}
.process-server-actions-table th:nth-child(2) {
  width: 21%;
}
.process-server-actions-table th:last-child {
  width: 58px;
}
.process-server-actions-table tbody tr:not(.empty) {
  cursor: pointer;
}
.process-server-actions-table tbody tr:not(.empty):hover {
  background: #f3faf5;
}
.process-server-actions-table tbody tr:last-child td {
  border-bottom: 0;
}
.process-server-actions-table td code {
  color: #176b3a;
  font: 9px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.process-server-actions-table td span {
  padding: 3px 6px;
  border-radius: 10px;
  background: #edf5ef;
  color: #35704a;
  font-size: 9.2px;
}
.process-server-actions-table td small {
  color: #89958d;
  font: 8px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.process-server-actions-table td:last-child {
  padding: 4px;
  display: flex;
  justify-content: flex-end;
  gap: 3px;
}
.process-server-actions-table td:last-child button {
  width: 24px;
  height: 25px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #d4e1d8;
  border-radius: 5px;
  background: #f7faf8;
  color: #39714d;
}
.process-server-actions-table td:last-child button.delete {
  color: #b34444;
}
.process-server-actions-table .empty td {
  padding: 16px 8px;
  color: #8a968e;
  font-size: 10.35px;
  text-align: center;
}
.process-server-action-modal {
  width: min(1040px, 100%);
}
.activity-modal > header > .process-server-action-header-actions {
  min-width: auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}
.process-server-action-header-actions > button:first-child {
  height: 29px;
  padding: 0 10px;
  border: 1px solid #c9dacf;
  border-radius: 6px;
  background: #f2f8f4;
  color: #176b3a;
  font-size: 10.35px;
  font-weight: 700;
}
.process-server-action-header-actions > button:last-child {
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #78847b;
  font-size: 27.6px;
}
.process-server-action-modal-body {
  min-height: 0;
  padding: 16px;
  display: grid;
  gap: 13px;
  overflow: auto;
}
.process-server-action-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.process-server-action-modal-body label {
  min-width: 0;
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.process-server-action-meta input,
.process-server-action-meta select {
  width: 100%;
  height: 35px;
  margin-top: 5px;
  padding: 0 9px;
  border: 1px solid #d9e2db;
  border-radius: 6px;
  background: white;
}
.process-outcome-type-control {
  margin-top: 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 35px;
  gap: 6px;
}
.process-server-action-meta .process-outcome-type-control select {
  margin-top: 0;
}
.process-outcome-type-control button {
  height: 35px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #bdd3c4;
  border-radius: 6px;
  background: #edf6ef;
  color: #176b3a;
}
.process-server-action-meta small {
  display: block;
  margin-top: 5px;
  color: #839087;
  font-size: 9.2px;
  font-weight: 500;
}
.process-server-action-code {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid #304438;
  border-radius: 9px;
  background: #102018;
}
.process-server-action-code-heading {
  min-height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid #304438;
  background: #18291f;
  color: #b8cbbd;
  font-size: 10.35px;
  letter-spacing: .03em;
}
.process-server-action-code-heading .code-language {
  padding: 3px 5px;
  border-radius: 4px;
  background: #285039;
  color: #9fe0b1;
  font: 800 8px/1 ui-monospace, monospace;
}
.process-server-action-code .expandable-code-editor > .javascript-editor {
  display: block;
  width: 100%;
  height: min(42vh, 390px);
  min-height: 270px;
  padding: 16px 45px 16px 16px;
  resize: vertical;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: #102018;
  color: #d8eadc;
  caret-color: #77ca8d;
  font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  direction: ltr;
  text-align: left;
  tab-size: 2;
}
.process-server-action-code > .middleware-helper-bar {
  max-height: 88px;
  margin: 0;
  padding: 9px 12px;
  overflow-y: auto;
  border-top: 1px solid #304438;
  background: #15241a;
}
.process-server-action-code > .middleware-helper-bar small {
  color: #91a499;
}
.process-server-action-code > .middleware-helper-bar button {
  border-color: #3d6f4d;
  background: #203b29;
  color: #bde1c7;
}
.process-server-action-code > .middleware-helper-bar button:hover {
  border-color: #74ad84;
  background: #2c5638;
  color: white;
}
.process-server-action-modal > footer {
  gap: 8px;
}
.process-server-action-modal > footer .delete-field {
  margin-right: auto;
  border: 1px solid #eccaca;
  background: #fff4f4;
  color: #aa3d3d;
}
@media (max-width: 700px) {
  .process-server-action-meta {
    grid-template-columns: 1fr;
  }
}
.process-test-modal {
  width: min(1040px, 100%);
  direction: rtl;
}
.process-test-inputs {
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border-bottom: 1px solid #e1e7e3;
}
.process-test-inputs label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #526158;
  font-size: 11.5px;
  font-weight: 700;
}
.process-test-inputs textarea {
  min-height: 82px;
  padding: 9px;
  border: 1px solid #d6e1da;
  border-radius: 6px;
  direction: ltr;
  font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.process-test-error {
  margin: 12px 16px 0;
  padding: 10px;
  border-radius: 6px;
  background: #fff0f0;
  color: #a52c2c;
  font-size: 11.5px;
}
.process-test-report {
  min-height: 0;
  padding: 14px 16px;
  overflow: auto;
}
.process-test-summary {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid #f0b9b9;
  border-radius: 7px;
  background: #fff4f4;
  color: #8d2d2d;
}
.process-test-summary.passed {
  border-color: #acd4ba;
  background: #eff9f2;
  color: #176b3a;
}
.process-test-summary span {
  font-size: 10.35px;
}
.process-test-report ol {
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
  list-style: none;
}
.process-test-report li {
  padding: 9px 10px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  border: 1px solid #dfe7e2;
  border-radius: 6px;
  background: white;
}
.process-test-report li > span {
  width: 23px;
  height: 23px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf3ef;
  color: #65746b;
  font-size: 10.35px;
}
.process-test-report li > div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.process-test-report li b {
  color: #36463d;
  font-size: 11.5px;
}
.process-test-report li small {
  overflow-wrap: anywhere;
  color: #758179;
  font-size: 10.35px;
}
.process-test-report li em {
  padding: 4px 7px;
  border-radius: 999px;
  background: #eaf6ee;
  color: #277044;
  font-size: 9.2px;
  font-style: normal;
}
.process-test-report li.process-test-warning em {
  background: #fff5d9;
  color: #8a6414;
}
.process-test-report li.process-test-error em {
  background: #ffebeb;
  color: #a72d2d;
}
.process-test-modal > footer {
  gap: 8px;
}
.process-test-modal > footer button.secondary {
  border: 1px solid #d7e1da;
  background: white;
  color: #607067;
}
@media (max-width: 700px) {
  .process-test-inputs {
    grid-template-columns: 1fr;
  }
  .process-test-summary {
    align-items: flex-start;
    flex-direction: column;
  }
}
.add-next {
  height: 24px;
  padding: 0 8px;
  border: 1px dashed #96b5a0;
  border-radius: 4px;
  background: #f1f7f2;
  color: #236b3e;
  font-size: 11.5px;
  font-weight: 700;
}
.button-script-label > small {
  display: block;
  margin-top: 5px;
  color: #8c958f;
  font-size: 9.2px;
  font-weight: 400;
  line-height: 1.45;
}
.canvas {
  direction: rtl;
  justify-content: flex-start;
}
.canvas .device-viewport {
  direction: rtl;
  text-align: right;
  margin-left: auto;
  margin-right: 0;
}
.canvas .form-card,
.canvas .form-heading,
.canvas .form-elements,
.canvas .field-block,
.canvas .embedded-form,
.canvas .table-card,
.canvas .tabs-preview,
.canvas .layout-preview,
.canvas .menu-preview-card {
  direction: rtl;
  text-align: right;
}
.canvas input,
.canvas textarea,
.canvas select {
  direction: rtl;
  text-align: right;
}
.canvas .field-block label,
.canvas .form-heading h1,
.canvas .form-heading p,
.canvas input::placeholder,
.canvas textarea::placeholder {
  text-align: right;
}
.canvas .input-shell {
  padding-right: 0;
  padding-left: 11px;
}
.canvas .form-bottom-buttons,
.canvas .check-row {
  justify-content: flex-start;
}
.canvas .form-footer {
  direction: rtl;
}
.canvas table {
  direction: rtl;
  text-align: right;
}
.canvas .map-page,
.canvas .process-page {
  direction: ltr;
  text-align: left;
}
.workspace.preview-mode .device-viewport {
  direction: rtl;
  text-align: right;
}
.workspace.preview-mode .canvas {
  direction: rtl;
  justify-content: flex-start;
}
.workspace.preview-mode .device-viewport {
  margin-left: auto;
  margin-right: 0;
}
.workspace.preview-mode .form-heading,
.workspace.preview-mode .field-block,
.workspace.preview-mode .embedded-form,
.workspace.preview-mode .table-card,
.workspace.preview-mode .tabs-preview,
.workspace.preview-mode .layout-preview,
.workspace.preview-mode .menu-preview-card {
  direction: rtl;
  text-align: right;
}
.workspace.preview-mode input,
.workspace.preview-mode textarea,
.workspace.preview-mode select {
  direction: rtl;
  text-align: right;
}
.workspace.preview-mode .form-elements {
  direction: rtl;
}
.workspace.preview-mode .field-block label,
.workspace.preview-mode .form-heading h1,
.workspace.preview-mode .form-heading p {
  text-align: right;
}
.workspace.preview-mode input::placeholder,
.workspace.preview-mode textarea::placeholder {
  text-align: right;
}
.workspace.preview-mode .input-shell {
  padding-right: 0;
  padding-left: 11px;
}
.workspace.preview-mode .form-bottom-buttons,
.workspace.preview-mode .check-row {
  justify-content: flex-start;
}
.workspace.preview-mode .form-footer {
  direction: rtl;
}
.workspace.preview-mode table {
  direction: rtl;
  text-align: right;
}
.workspace.preview-mode .map-page,
.workspace.preview-mode .process-page {
  direction: ltr;
  text-align: left;
}
.canvas [data-form-element-id][dir="rtl"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.workspace.preview-mode [data-form-element-id][dir="rtl"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  direction: rtl;
  text-align: right;
}
.canvas [data-form-element-id][dir="ltr"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea),
.workspace.preview-mode [data-form-element-id][dir="ltr"] :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  direction: ltr;
  text-align: left;
}
.canvas [data-form-element-id][dir="rtl"] :is(input, textarea)::placeholder,
.workspace.preview-mode [data-form-element-id][dir="rtl"] :is(input, textarea)::placeholder {
  direction: rtl;
  text-align: right;
}
.canvas [data-form-element-id][dir="ltr"] :is(input, textarea)::placeholder,
.workspace.preview-mode [data-form-element-id][dir="ltr"] :is(input, textarea)::placeholder {
  direction: ltr;
  text-align: left;
}
.form-divider {
  --divider-color: #176b3a;
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--divider-color);
  font-size: 12.65px;
  font-weight: 750;
}
.form-divider:before,
.form-divider:after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--divider-color);
  opacity: 0.65;
}
.form-divider span {
  flex: none;
  max-width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.form-card.form-view-excel .form-elements > .form-structural-element[data-element-type="divider"],
.embedded-form.form-view-excel .imported-form-elements > .form-structural-element[data-element-type="divider"] {
  min-height: 36px;
  margin: 0;
  padding: 0;
  outline: 1px solid #c8d6cc;
  outline-offset: -0.5px;
  background: #edf4ef;
}
.form-card.form-view-excel .form-elements > .form-structural-element[data-element-type="divider"] > .form-divider,
.embedded-form.form-view-excel .imported-form-elements > .form-structural-element[data-element-type="divider"] > .form-divider {
  min-height: 36px;
  margin: 0;
  padding: 7px 10px;
  justify-content: center;
}
.form-card.form-view-excel .form-elements > .form-structural-element[data-element-type="divider"] > .form-divider::before,
.form-card.form-view-excel .form-elements > .form-structural-element[data-element-type="divider"] > .form-divider::after,
.embedded-form.form-view-excel .imported-form-elements > .form-structural-element[data-element-type="divider"] > .form-divider::before,
.embedded-form.form-view-excel .imported-form-elements > .form-structural-element[data-element-type="divider"] > .form-divider::after {
  display: none;
}
.elements-table-preview {
  width: 100%;
  overflow: hidden;
  border: 1px solid #9fc9b0;
  border-radius: 8px;
  background: #fff;
}
.elements-table-preview > strong {
  display: block;
  padding: 9px 12px;
  border-bottom: 1px solid #b9d8c5;
  background: #e5f3e9;
  color: #176b3a;
}
.elements-table-preview-titles,
.elements-table-preview-controls {
  display: grid;
  grid-template-columns: repeat(var(--elements-table-columns), minmax(90px, 1fr));
}
.elements-table-preview-titles {
  background: #e5f3e9;
  color: #355f49;
}
.elements-table-preview-titles b,
.elements-table-preview-controls span {
  min-width: 0;
  padding: 7px;
  border-inline-end: 1px solid #c8ddd0;
  text-align: center;
}
.elements-table-preview-controls span {
  position: relative;
  border-top: 1px solid #c8ddd0;
  border-bottom: 1px solid #c8ddd0;
  background: #fbfdfb;
}
.elements-table-drop-cell {
  min-height: 52px;
  display: grid;
  place-items: center;
  border: 1px dashed transparent;
}
.elements-table-drop-cell:not(.filled) {
  margin: 5px;
  border-color: #78af8b;
  border-radius: 6px;
  background: #f0f8f3;
  color: #39704f;
}
.elements-table-drop-cell > button {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid #e2a9a9;
  border-radius: 50%;
  background: #fff5f5;
  color: #b42318;
  line-height: 17px;
  cursor: pointer;
}
.elements-table-drop-cell.filled {
  cursor: pointer;
}
.elements-table-preview-controls input {
  width: 100%;
  min-height: 36px;
  border: 1px solid #9fc9b0;
  border-radius: 6px;
  background: #fff;
}
.elements-table-properties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.elements-table-properties > label:first-child,
.elements-table-properties > small {
  grid-column: 1 / -1;
}
.divider-color-property {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: #667269;
  font-size: 10.35px;
  font-weight: 700;
}
.divider-color-property > div {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.divider-color-property button {
  width: 25px;
  height: 25px;
  padding: 0;
  border: 3px solid white;
  border-radius: 50%;
  background: var(--swatch-color);
  box-shadow: 0 0 0 1px #cbd7cf;
  cursor: pointer;
}
.divider-color-property button.active {
  box-shadow: 0 0 0 2px var(--swatch-color);
}
.form-html {
  min-height: 36px;
  overflow: auto;
  color: #38433c;
  font-size: 12.65px;
  line-height: 1.7;
}
.form-html > :first-child {
  margin-top: 0;
}
.form-html > :last-child {
  margin-bottom: 0;
}
.form-html .applicant-summary {
  width: 100%;
  overflow: hidden;
  border: 1px solid #c9dfd1;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 26px rgb(17 92 52 / 8%);
  color: #244334;
}
.form-html .applicant-summary > header {
  min-height: 64px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid #d9e7de;
  background: linear-gradient(110deg, #e8f6ed, #f8fcf9 68%, #fff);
}
.form-html .applicant-summary-icon {
  flex: none;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #07944c, #08703c);
  box-shadow: 0 6px 14px rgb(8 120 62 / 22%);
  color: #fff;
  font-size: 19.55px;
  font-weight: 800;
}
.form-html .applicant-summary h3 {
  margin: 0;
  color: #075f33;
  font-size: 13.8px;
}
.form-html .applicant-summary header p {
  margin: 2px 0 0;
  color: #75867c;
  font-size: 9.2px;
}
.form-html .applicant-summary header i {
  margin-right: auto;
  padding: 4px 8px;
  border: 1px solid #a9d5b7;
  border-radius: 999px;
  background: #fff;
  color: #08783e;
  font-size: 8.05px;
  font-style: normal;
  font-weight: 750;
}
.form-html .applicant-summary header i span {
  width: 5px;
  height: 5px;
  display: inline-block;
  margin-left: 3px;
  border-radius: 50%;
  background: #0a9c51;
}
.form-html .applicant-table-wrap {
  padding: 12px 14px;
  overflow-x: auto;
}
.form-html .applicant-info-table {
  width: 100%;
  min-width: 510px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #dbe7df;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  background: #fff;
}
.form-html .applicant-info-table caption {
  padding: 0;
  caption-side: top;
  border: 1px solid #dbe7df;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(90deg, #f2f9f4, #fbfdfc);
  text-align: right;
}
.form-html .applicant-caption-content {
  padding: 9px 11px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.form-html .applicant-avatar {
  flex: none;
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  background: #e3f2e8;
  box-shadow: inset 0 0 0 1px #bfddc9;
  color: #08783e;
  font-size: 14.95px;
  font-weight: 800;
}
.form-html .applicant-caption-name {
  min-width: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  line-height: 1.45;
}
.form-html .applicant-caption-name small {
  color: #7a8980;
  font-size: 8.05px;
}
.form-html .applicant-caption-name strong {
  color: #173f29;
  font-size: 10.35px;
}
.form-html .applicant-info-table th,
.form-html .applicant-info-table td {
  width: 25%;
  padding: 9px 10px;
  border-left: 1px solid #e3ece6;
  text-align: right;
}
.form-html .applicant-info-table th:last-child,
.form-html .applicant-info-table td:last-child {
  border-left: 0;
}
.form-html .applicant-info-table th {
  border-top: 1px solid #dbe7df;
  border-bottom: 1px solid #dbe7df;
  background: #edf7f0;
  color: #65776c;
  font-size: 9.2px;
}
.form-html .applicant-info-table td {
  color: #183d29;
  font-size: 10.35px;
  font-weight: 750;
}
.form-html .applicant-type-badge,
.form-html .applicant-status-badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 999px;
  background: #e5f4ea;
  color: #08783e;
  font-size: 8.05px;
}
.form-html .applicant-status-badge {
  box-shadow: inset 0 0 0 1px #b9dbc4;
}
.form-html .applicant-summary > footer {
  padding: 7px 14px;
  display: flex;
  gap: 4px;
  border-top: 1px solid #e1ebe4;
  background: #fbfdfc;
  color: #819087;
  font-size: 8.05px;
}
.element-json-label .javascript-editor,
.html-editor {
  min-height: 150px;
}
.json-error {
  display: block;
  margin-top: 5px;
  color: #b64242 !important;
}
.field-block:has(.embedded-table-array) {
  padding: 0;
}
.embedded-table-array {
  min-width: 0;
  margin: 0;
  padding: 0;
}
.embedded-table-array > .table-card {
  width: 100%;
  max-width: none;
  margin: 0;
  border-radius: 4px;
  box-shadow: none;
}
.compact-list .table-scroll,
.compact-list table {
  margin: 0;
  padding: 0;
}
.compact-list th {
  height: 28px;
  padding: 4px 7px;
  font-size: 9.2px;
}
.compact-list td {
  height: 30px;
  padding: 4px 7px;
  font-size: 9.2px;
}
.table-array-empty {
  min-height: 90px;
  padding: 16px;
  border: 1px dashed #cbd7d0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #7c8880;
  background: #f8faf8;
  font-size: 11.5px;
}
.task-page-empty {
  width: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  border: 1px dashed #bfd2c5;
  border-radius: 8px;
  background: #f5faf6;
  color: #65746a;
  text-align: center;
}
.task-page-empty b {
  color: #176b3a;
  font-size: 16.1px;
}
.task-page-empty span {
  max-width: 420px;
  font-size: 11.5px;
  line-height: 1.6;
}
.workflow-task-page {
  width: 100%;
  min-width: 0;
  overflow: auto;
  background: #fff;
  direction: rtl;
}
.workflow-task-page > h4 {
  min-height: 34px;
  margin: 0;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #d8e3dc;
  background: #176b3a;
  color: #fff;
  font-size: 13.8px;
}
.task-breadcrumb {
  width: 100%;
  margin: 0;
  padding: 8px 8px 11px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  list-style: none;
  background: #f6f9f7;
  direction: rtl;
  scrollbar-width: thin;
  scrollbar-color: #91a399 #e3eae5;
}
.task-breadcrumb::-webkit-scrollbar {
  height: 6px;
}
.task-breadcrumb::-webkit-scrollbar-track {
  background: #e3eae5;
  border-radius: 6px;
}
.task-breadcrumb::-webkit-scrollbar-thumb {
  background: #91a399;
  border-radius: 6px;
}
.task-breadcrumb li {
  --step-color: #cfd5d1;
  position: relative;
  flex: none;
  min-height: 34px;
  margin-left: 10px;
  padding: 8px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--step-color);
  color: #536159;
  font-size: 10.35px;
  font-weight: 750;
  line-height: 1.35;
  white-space: nowrap;
}
.task-breadcrumb li:after {
  content: "";
  position: absolute;
  z-index: 1;
  top: 3px;
  left: -10px;
  width: 12px;
  height: 28px;
  border-radius: 14px 0 0 14px;
  background: var(--step-color);
  pointer-events: none;
}
.task-breadcrumb li.previous {
  --step-color: #2478bd;
  color: #fff;
}
.task-breadcrumb li.current {
  --step-color: #198754;
  color: #fff;
  box-shadow: inset 0 0 0 2px #0f6c40;
}
.task-breadcrumb li.remaining {
  --step-color: #cfd5d1;
  color: #536159;
}
.task-breadcrumb li:last-child {
  margin-left: 0;
}
.task-breadcrumb li:last-child:after {
  display: none;
}
.workflow-task-page > .tabs-preview {
  width: 100%;
  min-height: 360px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.workflow-task-notes {
  padding: 8px 12px;
  display: grid;
  gap: 6px;
  background: #fff;
}
.workflow-task-notes > b {
  padding: 8px;
  border-radius: 4px;
  background: #eef3ef;
  color: #35443a;
  font-size: 10.35px;
}
.workflow-task-notes small {
  color: #a04b42;
  font-size: 10.35px;
}
.workflow-task-notes textarea {
  width: 100%;
  min-height: 72px;
  padding: 8px;
  resize: vertical;
  border: 1px solid #d6e1d9;
  border-radius: 5px;
  background: #fff;
  color: #354139;
  font-size: 11.5px;
}
.workflow-task-notes textarea[readonly] {
  background: #f7f9f7;
}
.workflow-task-page > footer {
  position: sticky;
  bottom: 0;
  z-index: 8;
  min-height: 48px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid #cfdcd3;
  background: #f8faf8f5;
  box-shadow: 0 -6px 16px #19342612;
  backdrop-filter: blur(5px);
}
.workflow-task-page > footer button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  background: #176b3a;
  color: #fff;
  font-size: 10.35px;
  font-weight: 700;
}
.workflow-task-page > footer .temporary {
  background: #d48a17;
}
.workflow-task-page > footer .reject,
.workflow-task-page > footer .return {
  background: #c4453d;
}
.workflow-task-page > footer .finish,
.workflow-task-page > footer .end {
  background: #6f7471;
}
.workflow-task-message {
  margin: 8px 12px;
  padding: 8px;
  border-radius: 5px;
  background: #edf6ef;
  color: #27663e;
  font-size: 10.35px;
}
.table-array-options {
  grid-template-columns: 1fr !important;
}
.nested-page-with-properties,
.page-with-properties {
  position: relative;
  min-width: 0;
  min-height: 100%;
}
.nested-page-with-properties {
  padding-top: 43px;
}
.nested-page-with-properties > .inline-page-properties-button,
.page-with-properties > .inline-page-properties-button {
  top: 6px;
  right: 6px;
}
.imported-form-preview {
  width: 100%;
  max-width: none;
}
.imported-form-elements {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(1000, minmax(0, 1fr));
  gap: 0;
}
.imported-form-elements > .field-block {
  margin: 6px;
}
.imported-form-field {
  min-width: 0;
}
.imported-form-field > label {
  display: block;
  margin-bottom: 6px;
  color: #435047;
  font-size: 11.5px;
  font-weight: 700;
}
.imported-form-field > label em {
  margin-right: 3px;
  color: #b43d3d;
  font-style: normal;
}
.imported-form-field textarea {
  width: 100%;
  min-height: 85px;
  padding: 9px;
  border: 1px solid #dce3de;
  border-radius: 6px;
  resize: vertical;
}
.pref-lookup select {
  width: 100%;
  height: 100%;
  padding: 0 10px;
  border: 0;
  outline: 0;
  appearance: none;
  background: transparent;
  color: #354139;
  font-size: 11.5px;
}
.pref-lookup select:disabled {
  color: #8b958e;
  cursor: wait;
}
.imported-form-preview > .form-submit {
  margin-top: 14px;
  margin-left: 7px;
}
.layout-preview-pane.page-with-properties {
  padding-top: 43px;
}
.layout-preview-pane.page-with-properties > .pane-heading {
  margin-top: -37px;
  padding-right: 92px;
}
.top-actions .app-preview-button {
  height: 36px;
  padding: 0 12px;
  border: 1px solid #b9d0c0;
  border-radius: 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #176b3a;
  background: #edf6ef;
  font-size: 13.8px;
  font-weight: 700;
}
.application-preview-backdrop {
  position: fixed;
  inset: 0;
  z-index: 120;
  padding: 12px;
  background: #102018b8;
  backdrop-filter: blur(4px);
}
.application-preview-window {
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-rows: 54px minmax(0, 1fr);
  border-radius: 11px;
  background: #f1f4f1;
  box-shadow: 0 28px 90px #06110b80;
}
.application-preview-topbar {
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dce4de;
  background: white;
  direction: ltr;
}
.application-preview-topbar > div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.application-preview-topbar > div:first-child > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.application-preview-topbar b {
  color: #2e3931;
  font-size: 12.65px;
}
.application-preview-topbar small {
  color: #8b958e;
  font-size: 8.05px;
}
.application-preview-topbar a,
.application-preview-topbar button {
  height: 32px;
  padding: 0 11px;
  border: 1px solid #d6dfd8;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  color: #536158;
  background: white;
  text-decoration: none;
  font-size: 10.35px;
}
.application-preview-topbar button {
  color: white;
  border-color: #176b3a;
  background: #176b3a;
}
.application-preview-body {
  min-height: 0;
  overflow: auto;
  display: grid;
  place-items: stretch;
}
.application-preview-body > .menu-preview-card {
  min-height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.app-login {
  min-height: 100%;
  padding: 28px;
  display: grid;
  place-items: center;
  background-color: #eef3ef;
  background-image: radial-gradient(#cbd8ce 0.7px, transparent 0.7px);
  background-size: 16px 16px;
  direction: rtl;
}
.app-login form {
  width: min(390px, 100%);
  padding: 32px;
  border: 1px solid #dce4de;
  border-radius: 13px;
  background: white;
  box-shadow: 0 20px 55px #1e312426;
}
.app-login-mark {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: white;
  background: #176b3a;
  font-size: 23px;
}
.app-login-heading {
  margin-bottom: 23px;
  text-align: center;
}
.app-login-heading small {
  color: #43805a;
  font-size: 9.2px;
  font-weight: 800;
  letter-spacing: 1px;
}
.app-login h1 {
  margin: 7px 0;
  color: #26332b;
  font-size: 25.3px;
}
.app-login p {
  margin: 0;
  color: #7a857d;
  font-size: 11.5px;
}
.app-login label {
  display: block;
  margin-top: 13px;
  color: #46534a;
  font-size: 11.5px;
  font-weight: 700;
}
.app-login input {
  width: 100%;
  height: 42px;
  margin-top: 6px;
  padding: 0 11px;
  border: 1px solid #d7e0da;
  border-radius: 7px;
  outline: 0;
  background: #fbfcfb;
  direction: ltr;
}
.app-login input:focus {
  border-color: #57936a;
  box-shadow: 0 0 0 3px #e3f0e7;
}
.app-login form > button {
  width: 100%;
  height: 42px;
  margin-top: 18px;
  border: 0;
  border-radius: 7px;
  color: white;
  background: #176b3a;
  font-size: 12.65px;
  font-weight: 750;
}
.app-login form > button:disabled {
  opacity: 0.6;
  cursor: wait;
}
.app-login-error {
  margin-top: 12px;
  padding: 9px;
  border-radius: 6px;
  color: #9e3434;
  background: #f9eaea;
  font-size: 10.35px;
  line-height: 1.6;
}
.gateway-status {
  margin-top: 13px;
  display: block;
  color: #929b95;
  text-align: center;
  font-size: 9.2px;
}
.app-login form > .login-back {
  margin-top: 8px;
  border: 1px solid #d5dfd8;
  color: #5f6c63;
  background: white;
}
.login-page-shell {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 56px minmax(0, 1fr);
}
.login-page-topbar {
  padding: 0 18px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-bottom: 1px solid #dfe6e1;
  background: white;
}
.login-page-topbar span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: white;
  background: #176b3a;
}
.login-page-topbar img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  object-fit: cover;
}
.login-page-topbar b {
  font-size: 12.65px;
}
@media (max-width: 700px) {
  .application-preview-backdrop {
    padding: 0;
  }
  .application-preview-window {
    border-radius: 0;
  }
  .application-preview-topbar a {
    display: none;
  }
  .app-login {
    padding: 14px;
  }
  .app-login form {
    padding: 24px 20px;
  }
}
.application-preview-window,
.application-preview-body,
.application-preview-body > .menu-preview-card {
  direction: rtl;
  text-align: right;
}
.application-preview-topbar {
  direction: rtl;
}
.application-preview-topbar > div,
.program-topbar,
.program-identity,
.program-top-actions,
.menu-preview-brand,
.menu-preview-user {
  direction: rtl;
}
.application-preview-body .menu-preview-card {
  direction: rtl;
  grid-template-columns: 230px minmax(0, 1fr);
}
.application-preview-body .menu-preview-card.sidebar-collapsed {
  grid-template-columns: minmax(0, 1fr);
}
.application-preview-body .menu-preview-card > aside {
  grid-column: 1;
}
.application-preview-body .menu-preview-card > section {
  grid-column: 2;
  direction: rtl;
  text-align: right;
}
.application-preview-body .menu-preview-card.sidebar-collapsed > section {
  grid-column: 1;
}
.application-preview-body .menu-preview-item {
  direction: rtl;
  text-align: right;
}
.application-preview-body .menu-preview-item b {
  padding-right: 0;
  padding-left: 10px;
}
.application-preview-body .menu-preview-children:before {
  left: auto;
  right: 22px;
  border-left: 0;
  border-right: 1px solid #ffffff18;
}
.application-preview-body input,
.application-preview-body textarea,
.application-preview-body select,
.application-preview-body table {
  direction: rtl;
  text-align: right;
}
.application-preview-body input::placeholder,
.application-preview-body textarea::placeholder {
  text-align: right;
}
.application-preview-body .map-page,
.application-preview-body .process-page {
  direction: rtl;
  text-align: right;
}
@media (max-width: 700px) {
  .application-preview-body .menu-preview-card {
    grid-template-columns: 125px minmax(0, 1fr);
  }
  .application-preview-body .menu-preview-card.sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }
}
.uml-designer {
  width: 100%;
  min-height: calc(100vh - 150px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #d8e2db;
  border-radius: 8px;
  background: white;
  direction: ltr;
  text-align: left;
}
.uml-toolbar {
  min-height: 52px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  border-bottom: 1px solid #dce5df;
  background: #f7faf8;
  direction: ltr;
}
.uml-toolbar select,
.uml-toolbar input {
  width: auto;
  height: 32px;
  min-width: 125px;
  margin: 0;
  padding: 0 9px;
  border: 1px solid #bfcfc5;
  border-radius: 6px;
  outline: 0;
  background: white;
  color: #38463e;
  font-size: 11.5px;
  direction: ltr;
  text-align: left;
}
.uml-toolbar select:focus,
.uml-toolbar input:focus {
  border-color: #43835a;
  box-shadow: 0 0 0 2px #dcecdf;
}
.uml-toolbar .uml-add-object {
  min-width: 170px;
  color: #176b3a;
  font-weight: 750;
}
.uml-toolbar button {
  height: 29px;
  padding: 0 12px;
  border: 0;
  border-radius: 5px;
  color: white;
  background: #176b3a;
  font-size: 10.35px;
  font-weight: 700;
}
.uml-toolbar button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.uml-toolbar-divider {
  align-self: stretch;
  width: 1px;
  margin: 0 3px;
  background: #d8e1db;
}
.uml-toolbar-spacer {
  flex: 1;
}
.uml-toolbar .uml-view-button {
  border: 1px solid #bcd2c3;
  color: #176b3a;
  background: #edf6ef;
}
.uml-relation-title {
  color: #506058;
  font-size: 10.35px;
  font-weight: 800;
}
.uml-relation-arrow {
  color: #3d7952;
  font-size: 18.4px;
}
.uml-draw-help {
  color: #738078;
  font-size: 10.35px;
}
.uml-canvas {
  position: relative;
  flex: 1;
  min-height: 600px;
  overflow: auto;
  background-color: #f9fbfa;
  background-image: radial-gradient(#cfdad3 1px, transparent 1px);
  background-size: 18px 18px;
}
.uml-relations {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-width: 900px;
  min-height: 600px;
  overflow: visible;
  pointer-events: none;
}
.uml-relations marker path {
  fill: #287849;
}
.uml-object {
  position: absolute;
  z-index: 2;
  width: 220px;
  min-height: 124px;
  overflow: visible;
  border: 1px solid #82a58f;
  border-radius: 7px;
  background: white;
  box-shadow: 0 5px 18px #244b3420;
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.uml-object.collapsed {
  min-height: 0;
}
.uml-object.collapsed header {
  min-height: 43px;
  border-radius: 6px;
}
.uml-object:active {
  cursor: grabbing;
  box-shadow: 0 8px 24px #244b3430;
}
.uml-object header {
  min-height: 43px;
  padding: 7px 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 6px 6px 0 0;
  color: white;
  background: #216d42;
  direction: ltr;
  text-align: left;
}
.uml-object header div {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.uml-object-actions {
  display: flex;
  align-items: center;
  gap: 3px;
}
.uml-object header small {
  color: #cce1d3;
  font-size: 8.05px;
}
.uml-object header b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.65px;
}
.uml-object header button {
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 4px;
  color: white;
  background: #ffffff1f;
  font-size: 17.25px;
}
.uml-field-headings {
  height: 22px;
  padding: 0 8px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 54px;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #dce6df;
  color: #76827a;
  background: #f4f8f5;
  font-size: 8.05px;
  font-weight: 800;
  text-transform: uppercase;
}
.uml-object ul {
  margin: 0;
  padding: 5px 8px;
  list-style: none;
  direction: ltr;
  text-align: left;
}
.uml-object li {
  position: relative;
  min-height: 22px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 54px;
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #edf1ee;
  color: #45534b;
  font-size: 9.2px;
}
.uml-object li > span,
.uml-object li code {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uml-object li code {
  color: #77857d;
  font-size: 8.05px;
  text-align: left;
}
.uml-object footer {
  padding: 5px 8px;
  color: #78867e;
  font-size: 8.05px;
}
.uml-object.relation-target {
  outline: 2px dashed #4a9462;
  outline-offset: 3px;
}
.uml-object li.field-relation-target {
  background: #eef8f1;
}
.uml-field-input,
.uml-field-output {
  position: absolute;
  top: 50%;
  z-index: 6;
  width: 14px;
  height: 14px;
  padding: 0;
  transform: translateY(-50%);
  border: 2px solid white;
  border-radius: 50%;
  background: #287849;
  box-shadow: 0 1px 4px #1c4b2d44;
  touch-action: none;
}
.uml-field-input {
  left: -16px;
  opacity: 0.7;
  cursor: crosshair;
}
.uml-field-output {
  right: -16px;
  color: white;
  cursor: crosshair;
  font-size: 8.05px;
}
.uml-field-input:hover,
.uml-field-output:hover,
.field-relation-target .uml-field-input {
  opacity: 1;
  transform: translateY(-50%) scale(1.18);
  background: #126d38;
}
.uml-relations .uml-drawing-line {
  fill: none;
  stroke: #21814a;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 7 4;
  vector-effect: non-scaling-stroke;
}
.uml-canvas-empty,
.uml-empty {
  min-height: 500px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #7b8880;
}
.uml-canvas-empty b,
.uml-empty b {
  color: #445149;
  font-size: 13.8px;
}
.uml-canvas-empty span,
.uml-empty span {
  font-size: 10.35px;
}
.uml-relation-delete {
  position: relative;
  z-index: 4;
  min-height: 24px;
  margin: 6px 0 0 6px;
  padding: 0 8px;
  border: 1px solid #d9bcbc;
  border-radius: 5px;
  color: #8d4545;
  background: #fff8f8;
  font-size: 9.2px;
}
.uml-properties .property-summary {
  margin-top: 8px;
}
.uml-object-properties-modal {
  width: min(760px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
}
.inline-page-properties-dialog > .uml-object-properties-body {
  min-height: 0;
  padding: 0;
  overflow: auto;
}
.uml-object-properties-body > .section-properties-only {
  display: block;
  padding: 18px;
}
.uml-object-properties-body .schema-editor {
  display: block;
}
.uml-object-properties-body .schema-fields {
  max-height: none;
}
.object-methods {
  margin-top: 16px;
  border: 1px solid #dce5df;
  border-radius: 7px;
  overflow: hidden;
  background: #fbfcfb;
}
.object-methods summary {
  min-height: 42px;
  padding: 8px 10px;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 7px;
  color: #4d5a52;
  cursor: pointer;
  list-style: none;
  background: #f4f8f5;
}
.object-methods summary::-webkit-details-marker {
  display: none;
}
.object-methods summary span {
  font-size: 10.35px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.object-methods summary small {
  color: #8a948e;
  font-size: 8.05px;
  font-weight: 500;
}
.object-methods summary b {
  color: #47755a;
  transition: transform 0.15s;
}
.object-methods[open] summary b {
  transform: rotate(180deg);
}
.object-methods > div {
  padding: 2px 9px 9px;
  border-top: 1px solid #e1e8e3;
}
.object-methods label {
  position: relative;
  display: block;
  margin: 10px 0;
  color: #4d5a52;
  font-size: 10.35px;
  font-weight: 750;
}
.object-methods .code-language {
  position: absolute;
  top: 0;
  right: 0;
}
.object-methods textarea.javascript-editor {
  width: 100%;
  min-height: 92px;
  margin-top: 5px;
  padding: 8px;
  resize: vertical;
  border: 1px solid #ccd8d0;
  border-radius: 6px;
  color: #d8e8dd;
  background: #17251d;
  font: 9px/1.55 ui-monospace,
    SFMono-Regular,
    Consolas,
    monospace;
  direction: ltr;
  text-align: left;
}
.object-methods textarea.javascript-editor:focus {
  outline: 0;
  border-color: #4f9465;
  box-shadow: 0 0 0 2px #dcecdf;
}
.object-methods .middleware-helper-bar {
  padding: 7px;
  border: 1px solid #d8e5dc;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: #f5faf6;
}
.object-methods .middleware-helper-bar small {
  color: #557060;
}
.object-methods .middleware-helper-bar button {
  font-weight: 650;
}
.form-elements {
  position: relative;
}
.element-selection-box {
  position: absolute;
  z-index: 20;
  pointer-events: none;
  border: 1px solid #268653;
  background: #3c9b6330;
  border-radius: 3px;
}
.code-autocomplete {
  position: absolute;
  z-index: 12;
  left: 8px;
  right: 8px;
  top: calc(100% - 8px);
  max-height: 190px;
  overflow: auto;
  padding: 4px;
  border: 1px solid #3c5e49;
  border-radius: 7px;
  background: #14251a;
  box-shadow: 0 10px 28px #07120b88;
  direction: ltr;
  text-align: left;
}
.code-autocomplete button {
  width: 100%;
  height: 30px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #dcebe0;
  text-align: left;
}
.code-autocomplete button:hover,
.code-autocomplete button:first-child {
  background: #28513a;
}
.code-autocomplete b {
  font: 11px ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
}
.code-autocomplete small {
  color: #87a792;
  font-size: 9.2px;
}
.modal-code-editor-wrap {
  position: relative;
  min-height: 0;
}
.html-modal-editor-wrap {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.html-helper-bar {
  padding: 9px 14px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  border-bottom: 1px solid #304438;
  background: #15241a;
  color: #b9c9be;
}
.html-helper-bar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.35px;
}
.html-helper-bar select {
  min-width: 150px;
  height: 29px;
  padding: 0 8px;
  border: 1px solid #496052;
  border-radius: 5px;
  outline: 0;
  background: #0f1a13;
  color: #d8eadc;
  font: 10px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.html-helper-bar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.html-helper-bar button {
  min-height: 27px;
  padding: 0 9px;
  border: 1px solid #3d6f4d;
  border-radius: 5px;
  background: #203b29;
  color: #bde1c7;
  font-size: 9.2px;
  cursor: pointer;
}
.html-helper-bar button:hover {
  border-color: #74ad84;
  background: #2c5638;
  color: #fff;
}
.html-helper-bar > .format-html-button {
  margin-left: auto;
  border-color: #4d8d62;
  background: #286640;
  color: #fff;
  font-weight: 750;
}
.modal-code-editor-wrap > textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 18px;
  resize: none;
  border: 0;
  outline: 0;
  background: #101b14;
  color: #d8eadc;
  caret-color: #77ca8d;
  font: 13px/1.65 ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;
  tab-size: 2;
  direction: ltr;
  text-align: left;
}
.modal-code-editor-wrap > .code-autocomplete {
  left: 18px;
  right: auto;
  top: auto;
  bottom: 14px;
  width: min(430px, calc(100% - 36px));
}
.field-block.initially-hidden {
  opacity: 0.58;
  background: repeating-linear-gradient(135deg, #f8faf8, #f8faf8 7px, #eef3ef 7px, #eef3ef 14px);
}
.field-block.initially-hidden::after {
  content: "Hidden";
  position: absolute;
  right: 6px;
  bottom: 3px;
  padding: 2px 5px;
  border-radius: 4px;
  background: #6b756e;
  color: white;
  font-size: 8.05px;
  font-weight: 750;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}
.builder-auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f4f7f5;
  color: #17221b;
}
.builder-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
}
.builder-auth form {
  width: min(420px, 100%);
  display: grid;
  gap: 16px;
  padding: 32px;
  border: 1px solid #dce5df;
  border-radius: 18px;
  background: white;
  box-shadow: 0 20px 50px rgb(27 55 38 / 10%);
}
.builder-auth h1,
.builder-auth p {
  margin: 0;
  text-align: right;
}
.builder-auth label {
  display: grid;
  gap: 7px;
  font-size: 14.95px;
  font-weight: 700;
}
.builder-auth input,
.document-name select {
  min-height: 40px;
  padding: 8px 11px;
  border: 1px solid #ccd8d0;
  border-radius: 8px;
  background: white;
  color: inherit;
}
.builder-password-wrap {
  position: relative;
  display: block;
}
.builder-password-wrap input {
  width: 100%;
  padding-right: 42px;
}
.builder-password-visibility {
  position: absolute;
  inset: 0 4px 0 auto;
  width: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #65736a;
  cursor: pointer;
}
.builder-auth-error {
  color: #b42318;
}
.builder-auth-message {
  color: #08783e;
}
.builder-auth-secondary {
  border: 0;
  background: transparent;
  color: #08783e;
  cursor: pointer;
  font-weight: 700;
}
.identity-panel {
  --identity-rows: 2;
  position: relative;
  width: 100%;
  padding: 6px;
  display: grid;
  grid-template-rows: repeat(var(--identity-rows), minmax(34px, auto));
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 4px;
  overflow: hidden;
  border: 1px solid var(--green, #176b3a);
  @supports (color: color-mix(in lab, red, red)) {
    border: 1px solid color-mix(in srgb, var(--green, #176b3a) 24%, #dce8e0);
  }
  border-radius: 10px;
  background: linear-gradient(135deg, #f7fcf9 0%, #edf7f1 100%);
  box-shadow: 0 4px 12px rgba(20, 83, 49, 0.06);
}
.identity-panel::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 5px;
  background: var(--green, #176b3a);
}
.identity-panel-rows-3 {
  --identity-rows: 3;
}
.identity-panel-field {
  min-width: 0;
  padding: 5px 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(23, 107, 58, 0.1);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.78);
}
.identity-panel-field b {
  color: #718078;
  font-size: 10.35px;
  white-space: nowrap;
}
.identity-panel-field span {
  min-width: 0;
  overflow-wrap: anywhere;
  color: #213a2c;
  font-size: 12.65px;
  font-weight: 650;
}
.identity-panel-primary {
  border-color: rgba(23, 107, 58, 0.22);
  background: rgba(232, 246, 237, 0.92);
}
.identity-panel-primary span {
  color: var(--green, #176b3a);
  font-size: 13.8px;
}
@media (max-width: 700px) {
  .identity-panel {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    padding: 6px;
    border-radius: 10px;
  }
}
.action-script-history {
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid #cbdcd1;
  border-radius: 12px;
  background: #fff;
  color: #294b36;
}
.action-script-history::backdrop {
  background: rgb(10 35 22 / 45%);
}
.action-script-history header, .action-script-history footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
}
.action-script-history h2 {
  margin: 0;
  font-size: 18.4px;
  overflow-wrap: anywhere;
}
.action-script-history button {
  padding: 7px 12px;
  border: 1px solid #a9c4b1;
  border-radius: 6px;
  background: #edf7f0;
  color: #176b3a;
  cursor: pointer;
}
.action-script-history button:disabled {
  opacity: .5;
  cursor: default;
}
.action-script-history-body {
  padding: 0 18px;
}
.action-script-history-body label {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
}
.action-script-history select {
  width: 100%;
  padding: 8px;
  border: 1px solid #cbdcd1;
  border-radius: 6px;
}
.action-script-history textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: min(55dvh, 520px);
  min-height: 150px;
  padding: 12px;
  border: 1px solid #cbdcd1;
  border-radius: 6px;
  background: #f7faf8;
  color: #183a27;
  font: 13px/1.6 monospace;
  white-space: pre;
  resize: vertical;
  tab-size: 2;
}
.action-script-history footer {
  font-size: 13.8px;
}
.lookup-key-select {
  min-width: 0;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 6px;
}
.lookup-key-select legend {
  padding: 0 4px;
  color: #59665d;
  font-size: 10.35px;
  font-weight: 700;
}
.lookup-key-select-options {
  display: grid;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}
.lookup-key-select .lookup-key-select-options label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-height: 24px;
  cursor: pointer;
}
.lookup-key-select .lookup-key-select-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
}
.object-options-modal .activity-multi-combobox {
  min-width: 0;
  width: 100%;
  margin-top: 0;
}
.object-options-modal .activity-combo-menu > input {
  height: 30px;
  margin: 0 0 5px;
}
.object-options-modal .activity-combo-options small {
  font: 10px/1.2 ui-monospace, monospace;
}
.object-options-modal .activity-combo-options > label {
  margin: 0;
  display: grid;
}
.object-lookup-field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  font-size: 12.65px;
  font-weight: 650;
}
.component-editor, .component-preview {
  width: 100%;
  padding: 24px;
  overflow: auto;
}
.canvas .component-editor {
  max-width: 1120px;
  margin: 0 auto;
  color: #203229;
  direction: ltr;
  text-align: left;
}
.component-editor-header {
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}
.component-editor-header span, .component-actions-header span {
  color: #29804a;
  font-size: 10.35px;
  font-weight: 800;
  letter-spacing: .12em;
}
.component-editor-header h2 {
  margin: 5px 0 4px;
  font-size: 23px;
  letter-spacing: -.02em;
}
.component-editor-header p {
  margin: 0;
  color: #718077;
  font-size: 12.65px;
}
.component-editor-header code {
  padding: 7px 9px;
  border: 1px solid #d4e1d8;
  border-radius: 7px;
  background: #f4f8f5;
  color: #36704a;
  font: 10px/1 ui-monospace, monospace;
}
.component-meta-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
}
.component-editor label, .component-action-body label {
  display: grid;
  gap: 6px;
  color: #506158;
  font-size: 11.5px;
  font-weight: 700;
}
.component-editor input, .component-editor textarea, .component-actions input, .component-actions select {
  width: 100%;
  border: 1px solid #cad7cf;
  border-radius: 7px;
  padding: 9px 10px;
  outline: 0;
  background: white;
  color: #172c21;
  font-size: 12.65px;
  transition: border-color .15s, box-shadow .15s;
}
.component-editor input:focus, .component-editor textarea:focus, .component-actions input:focus, .component-actions select:focus {
  border-color: #58a16e;
  box-shadow: 0 0 0 3px #4b9b661a;
}
.component-json-card {
  margin-top: 16px;
  overflow: hidden;
  border: 1px solid #cfdad3;
  border-radius: 11px;
  background: white;
  box-shadow: 0 8px 30px #243d2d0a;
}
.component-json-card > header {
  min-height: 58px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #dbe4de;
  background: #fafcfb;
}
.component-json-card > header > div {
  display: grid;
  gap: 3px;
}
.component-json-card > header b {
  font-size: 13.8px;
}
.component-json-card > header small {
  color: #7b8980;
  font-size: 10.35px;
}
.component-json-card > header > span {
  padding: 4px 7px;
  border-radius: 10px;
  background: #e8f4eb;
  color: #277344;
  font-size: 9.2px;
  font-weight: 800;
}
.component-json-card > header > span.dirty {
  background: #fff3d9;
  color: #946514;
}
.canvas .component-json-card > textarea {
  display: block;
  width: 100%;
  min-height: 440px;
  padding: 18px 20px;
  resize: vertical;
  border: 0;
  border-radius: 0;
  background: #f8faf9;
  color: #1c3325;
  caret-color: #247447;
  font: 11px/1.65 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  direction: ltr;
  text-align: left;
  white-space: pre;
  tab-size: 2;
}
.canvas .component-json-card > textarea:focus {
  box-shadow: inset 0 0 0 1px #5a9e6e;
}
.component-json-card > footer {
  padding: 10px 12px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid #dbe4de;
  background: #fafcfb;
}
.component-json-card > footer button {
  height: 32px;
  padding: 0 13px;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 750;
}
.component-json-card > footer .secondary {
  background: white;
}
.component-apply-button {
  border: 1px solid #176b3a;
  background: #176b3a;
  color: white;
}
.component-json-card > footer button:disabled {
  cursor: default;
  opacity: .45;
}
.component-json-error, .component-actions-error {
  margin: 0;
  padding: 9px 12px;
  border-top: 1px solid #f0c6c6;
  background: #fff2f2;
  color: #a22f2f;
  font-size: 11.5px;
}
.component-actions {
  padding: 0 !important;
  background: #f7f9f7;
}
.component-actions-header {
  padding: 17px 15px 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid #dde5e0;
  background: white;
}
.component-actions-header > div {
  display: grid;
  gap: 4px;
}
.component-actions-header b {
  font-size: 14.95px;
}
.component-actions-header small {
  color: #7b8980;
  font-size: 10.35px;
  line-height: 1.45;
}
.component-actions-header em {
  min-width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e9f3ec;
  color: #277344;
  font-size: 10.35px;
  font-style: normal;
  font-weight: 800;
}
.component-context {
  margin: 12px;
  padding: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
  border: 1px solid #d8e3dc;
  border-radius: 8px;
  background: white;
}
.component-context b {
  flex-basis: 100%;
  margin-bottom: 2px;
  color: #596b60;
  font-size: 10.35px;
}
.component-context code {
  padding: 3px 5px;
  border-radius: 4px;
  background: #eef5f0;
  color: #247044;
  font: 8px/1 ui-monospace, monospace;
}
.component-action-list {
  padding: 0 10px;
}
.component-action-card {
  margin-bottom: 7px;
  overflow: hidden;
  border: 1px solid #d5dfd8;
  border-radius: 8px;
  background: white;
}
.component-action-card[open] {
  border-color: #a9c9b3;
  box-shadow: 0 5px 16px #243d2d0d;
}
.component-action-card > summary {
  min-height: 51px;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.component-action-card > summary::-webkit-details-marker {
  display: none;
}
.component-action-card > summary > span:nth-child(2) {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}
.component-action-card > summary b, .component-action-card > summary small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.component-action-card > summary b {
  color: #26382e;
  font: 10px/1.2 ui-monospace, monospace;
}
.component-action-card > summary small {
  color: #87938b;
  font-size: 10.35px;
}
.component-action-card > summary i {
  color: #8d9991;
  font-size: 13.8px;
  font-style: normal;
  transition: transform .15s;
}
.component-action-card[open] > summary i {
  transform: rotate(180deg);
}
.component-action-icon {
  width: 29px;
  height: 29px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #edf5ef;
  color: #287347;
  font-size: 12.65px;
  font-weight: 800;
}
.component-action-icon.locate {
  background: #edf4fa;
  color: #2b668f;
}
.component-action-icon.edit {
  background: #fff6df;
  color: #8c6619;
}
.component-action-body {
  padding: 11px;
  border-top: 1px solid #e2e8e4;
  background: #fbfcfb;
}
.component-action-fields {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 9px;
}
.component-action-body > label {
  margin-top: 9px;
}
.component-script-editor {
  margin-top: 12px;
  overflow: hidden;
  border: 1px solid #31483a;
  border-radius: 8px;
  background: #142019;
  direction: ltr;
  text-align: left;
}
.component-script-heading {
  height: 36px;
  padding: 0 8px 0 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #31483a;
  color: #b7c8bc;
  font-size: 10.35px;
}
.component-script-heading span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.component-script-heading b {
  padding: 3px 5px;
  border-radius: 4px;
  background: #285039;
  color: #9fe0b1;
  font: 800 8px/1 monospace;
}
.component-script-heading button {
  height: 24px;
  padding: 0 7px;
  border: 1px solid #4a6654;
  border-radius: 5px;
  background: #26392d;
  color: #c1d8c7;
  font-size: 9.2px;
}
.component-script-editor > textarea {
  display: block;
  width: 100%;
  min-height: 104px;
  max-height: 180px;
  padding: 12px;
  resize: vertical;
  border: 0;
  outline: 0;
  background: #142019;
  color: #d8eadc;
  caret-color: #77ca8d;
  font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
}
.component-script-editor > textarea[aria-invalid="true"], .component-script-modal > textarea[aria-invalid="true"] {
  box-shadow: inset 0 0 0 1px #d55b5b;
}
.component-script-helpers {
  padding: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border-top: 1px solid #304438;
  background: #18261d;
}
.component-script-helpers small {
  width: 100%;
  color: #819187;
  font-size: 8.05px;
  font-weight: 800;
  letter-spacing: .1em;
}
.component-script-helpers button {
  padding: 4px 6px;
  border: 1px solid #3d6f4d;
  border-radius: 9px;
  background: #203b29;
  color: #bde1c7;
  font-size: 8.05px;
}
.component-script-helpers button:hover {
  border-color: #74ad84;
  background: #2c5638;
  color: white;
}
.component-script-error {
  margin: 0;
  padding: 7px 9px;
  display: flex;
  gap: 6px;
  border-top: 1px solid #7a3434;
  background: #421e1e;
  color: #f8b4b4;
  font: 8px/1.4 ui-monospace, monospace;
}
.component-delete-action {
  margin-top: 11px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #a84747;
  font-size: 10.35px;
  font-weight: 700;
}
.component-add-action {
  width: calc(100% - 20px);
  height: 34px;
  margin: 4px 10px 14px;
  border: 1px dashed #9dbdaa;
  border-radius: 7px;
  background: #edf5ef;
  color: #236c41;
  font-size: 11.5px;
  font-weight: 750;
}
.studio-folder-glyph, .studio-folder-preview i {
  position: relative;
  width: 18px;
  height: 13px;
  flex: none;
  display: inline-block;
  border-radius: 2px;
  background: #f2bd31;
  box-shadow: inset 0 -2px #da9b18;
}
.studio-folder-glyph::before, .studio-folder-preview i::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 1px;
  width: 8px;
  height: 5px;
  border-radius: 2px 2px 0 0;
  background: #dda31d;
}
.studio-folder-preview {
  width: min(980px, 100%);
  min-height: 520px;
  overflow: hidden;
  border: 1px solid #ccd8d0;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 40px #22382a17;
  color: #26372d;
  text-align: left;
}
.studio-folder-preview > header {
  min-height: 48px;
  padding: 7px 10px;
  display: grid;
  grid-template-columns: 28px 28px 28px minmax(180px, 1fr) minmax(150px, 260px);
  align-items: center;
  gap: 5px;
  border-bottom: 1px solid #d9e2dc;
  background: #f8faf9;
}
.studio-folder-preview > header > span {
  color: #617268;
  font-size: 18px;
  text-align: center;
}
.studio-folder-preview > header > div {
  min-width: 0;
  height: 32px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd7cf;
  border-radius: 4px;
  background: #fff;
}
.studio-folder-preview > header b {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-folder-preview > header input {
  width: 100%;
  height: 32px;
  padding: 0 9px;
  border: 1px solid #cbd7cf;
  border-radius: 4px;
  background: #fff;
  font-size: 11px;
}
.studio-folder-preview > div {
  min-height: 470px;
  display: grid;
  grid-template-columns: minmax(190px, 26%) minmax(0, 1fr);
}
.studio-folder-preview aside {
  overflow: auto;
  border-right: 1px solid #d9e2dc;
  background: #fbfcfb;
}
.studio-folder-preview aside > strong {
  display: block;
  padding: 13px 14px 8px;
  color: #6b7b72;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.studio-folder-preview nav {
  padding: 4px 0 12px;
}
.studio-folder-preview-branch > button {
  width: 100%;
  min-height: 33px;
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: #304239;
  text-align: left;
  cursor: pointer;
}
.studio-folder-preview-branch > button:hover {
  background: #eef4f0;
}
.studio-folder-preview-branch > button.selected {
  border-color: #b8d5c2;
  background: #dff0e4;
}
.studio-folder-preview-branch > button > span {
  width: 10px;
  color: #66776d;
}
.studio-folder-preview-branch > button b {
  min-width: 0;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.studio-folder-preview main {
  padding: 32px;
}
.studio-folder-preview-title {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid #dce4df;
}
.studio-folder-preview-title > i {
  width: 50px;
  height: 34px;
}
.studio-folder-preview-title > i::before {
  top: -8px;
  width: 22px;
  height: 10px;
}
.studio-folder-preview-title h2 {
  margin: 0 0 4px;
  font-size: 21px;
}
.studio-folder-preview-title small {
  color: #75847b;
}
.studio-folder-preview dl {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 16px;
  font-size: 12px;
}
.studio-folder-preview dt {
  color: #718078;
}
.studio-folder-preview dd {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.studio-folder-preview code {
  padding: 4px 8px;
  border: 1px solid #cedbd2;
  border-radius: 12px;
  background: #f1f6f2;
  color: #315140;
  font-size: 10px;
}
.studio-folder-preview .studio-folder-preview-categories {
  display: grid;
  gap: 7px;
}
.studio-folder-preview-categories > span {
  min-width: 180px;
  padding: 8px 10px;
  display: grid;
  gap: 3px;
  border: 1px solid #d5e0d8;
  border-radius: 6px;
  background: #f7faf8;
}
.studio-folder-preview-categories b {
  color: #294838;
  font-size: 11px;
}
.studio-folder-preview-categories small {
  color: #708078;
  font-size: 9px;
}
.folder-properties-only {
  overflow: auto;
}
.folder-designer {
  padding: 16px;
  display: grid;
  gap: 14px;
}
.studio-folder-editor-tree {
  display: grid;
  gap: 6px;
}
.studio-folder-editor-children {
  position: relative;
  display: grid;
  gap: 6px;
}
.studio-folder-editor-children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 12px;
  left: 14px;
  border-left: 1px solid #ccd8d0;
}
.studio-folder-editor-row {
  min-width: 0;
  padding: 8px;
  display: grid;
  grid-template-columns: 22px minmax(140px, 1fr) repeat(3, 28px);
  align-items: end;
  gap: 6px;
  border: 1px solid #d8e2dc;
  border-radius: 7px;
  background: #fff;
}
.studio-folder-editor-row > label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: #6a7b70;
  font-size: 9px;
}
.studio-folder-editor-row input, .studio-folder-category-row input {
  min-width: 0;
  width: 100%;
  height: 31px;
  padding: 0 7px;
  border: 1px solid #cbd8cf;
  border-radius: 5px;
  background: #fbfcfb;
  color: #26372d;
  font-size: 10px;
}
.studio-folder-editor-row > button {
  width: 28px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #d1ddd5;
  border-radius: 5px;
  background: #f7faf8;
  color: #47705a;
}
.studio-folder-editor-row > button:last-child {
  color: #b84d4d;
}
.studio-folder-category-list {
  padding: 5px 8px 8px;
  display: grid;
  gap: 5px;
  border-inline-start: 2px solid #d9e5dd;
}
.studio-folder-category-row {
  min-width: 0;
  padding: 7px;
  display: grid;
  grid-template-columns: 22px minmax(100px, .8fr) minmax(130px, 1fr) minmax(85px, .42fr) 28px;
  align-items: end;
  gap: 6px;
  border: 1px solid #deE6e1;
  border-radius: 6px;
  background: #f8faf9;
}
.studio-folder-category-row > label {
  min-width: 0;
  display: grid;
  gap: 4px;
  color: #6a7b70;
  font-size: 9px;
}
.studio-folder-category-icon {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  align-self: center;
  border-radius: 50%;
  background: #deeee4;
  color: #297048;
  font-size: 10px;
  font-weight: 800;
}
.studio-folder-category-row > button {
  width: 28px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #e0cccc;
  border-radius: 5px;
  background: #fff7f7;
  color: #b84d4d;
}
.studio-folder-no-categories {
  padding: 6px 8px;
  color: #8b7762;
  font-size: 9px;
}
@media (max-width: 760px) {
  .studio-folder-preview > header {
    grid-template-columns: 24px 24px 24px minmax(0, 1fr);
  }
  .studio-folder-preview > header input {
    display: none;
  }
  .studio-folder-preview > div {
    grid-template-columns: 1fr;
  }
  .studio-folder-preview aside {
    max-height: 220px;
    border-right: 0;
    border-bottom: 1px solid #d9e2dc;
  }
  .studio-folder-editor-row {
    grid-template-columns: 22px minmax(0, 1fr) repeat(3, 28px);
  }
  .studio-folder-category-row {
    grid-template-columns: 22px minmax(0, 1fr) 28px;
  }
  .studio-folder-category-row > label:nth-of-type(2), .studio-folder-category-row > label:nth-of-type(3) {
    grid-column: 2 / -1;
  }
}
.component-script-modal-backdrop {
  position: fixed;
  z-index: 170;
  inset: 0;
  padding: 28px;
  display: grid;
  place-items: center;
  background: #0b1811c4;
  backdrop-filter: blur(5px);
}
.component-script-modal {
  position: relative;
  width: min(1050px, 100%);
  height: min(760px, 92vh);
  overflow: hidden;
  display: grid;
  grid-template-rows: 55px minmax(0, 1fr) auto 49px;
  border: 1px solid #4a6453;
  border-radius: 13px;
  background: #101b14;
  box-shadow: 0 30px 100px #0009;
  direction: ltr;
  text-align: left;
}
.component-script-modal > header {
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #304438;
  background: #18261d;
}
.component-script-modal > header > div {
  display: flex;
  align-items: center;
  gap: 9px;
}
.component-script-modal > header > div > span {
  padding: 5px 6px;
  border-radius: 5px;
  background: #295039;
  color: #9fe0b1;
  font: 800 9px/1 monospace;
}
.component-script-modal > header > div > div {
  display: grid;
  gap: 2px;
}
.component-script-modal > header b {
  color: #e4eee7;
  font-size: 12.65px;
}
.component-script-modal > header small {
  color: #819187;
  font: 8px/1.2 ui-monospace, monospace;
}
.component-script-modal > header button {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  color: #b8c5bc;
  font-size: 26.45px;
}
.component-script-modal > textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 20px;
  resize: none;
  border: 0;
  outline: 0;
  background: #101b14;
  color: #d8eadc;
  caret-color: #77ca8d;
  font: 13px/1.7 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  tab-size: 2;
}
.component-script-modal > .component-script-helpers {
  max-height: 96px;
  padding: 9px 14px;
  overflow-y: auto;
  background: #15241a;
}
.component-script-modal > .component-script-helpers small {
  width: auto;
  align-self: center;
  margin-right: 4px;
}
.component-script-modal > footer {
  padding: 0 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #304438;
  background: #18261d;
}
.component-script-modal > footer small {
  color: #819187;
  font-size: 9.2px;
}
.component-script-modal > footer button {
  height: 30px;
  padding: 0 15px;
  border: 1px solid #43845a;
  border-radius: 6px;
  background: #21703e;
  color: white;
  font-size: 10.35px;
  font-weight: 750;
}
.component-script-modal > .modal-error {
  position: absolute;
  right: 14px;
  bottom: 115px;
  left: 14px;
  border: 1px solid #7a3434;
  border-radius: 6px;
}
.component-preview section {
  padding: 14px;
  border-bottom: 1px solid #dbe4de;
}
@media (max-width: 700px) {
  .component-editor {
    padding: 14px;
  }
  .component-meta-fields {
    grid-template-columns: 1fr;
  }
  .component-script-modal-backdrop {
    padding: 0;
  }
  .component-script-modal {
    height: 100%;
    border-radius: 0;
  }
}
.pref-table-column summary {
  align-items: center;
  gap: 8px;
}
.pref-table-column summary > b {
  flex: 1;
}
.pref-column-drag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  padding: 3px;
  border: 0;
  background: transparent;
  color: #6b7d72;
  cursor: grab;
}
.pref-column-drag:active {
  cursor: grabbing;
}
.pref-table-column.dragging {
  opacity: .5;
}
.pref-table-column:has(~ .dragging), .pref-table-column.dragging ~ .pref-table-column {
  border-style: dashed;
}
.workspace.mobile-workspace {
  grid-template-columns: 170px minmax(0, 1fr);
}
.mobile-workspace .left-panel {
  overflow-x: hidden;
}
.mobile-workspace .canvas {
  padding: 0;
  background: #edf2ee;
}
.mobile-workspace .device-viewport {
  width: 100%;
  max-width: none;
  min-height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.mobile-designer {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr);
  min-height: 100%;
  direction: ltr;
  text-align: left;
  color: #24392c;
}
.mobile-editor {
  background: white;
  padding: 24px;
  border-right: 1px solid #dce5df;
  min-width: 0;
}
.mobile-editor h2 {
  font-size: 21px;
  margin: 0 0 8px;
}
.mobile-editor p {
  font-size: 13px;
  color: #69796e;
  line-height: 1.6;
}
.mobile-editor h3 {
  font-size: 14px;
  margin: 22px 0 12px;
}
.mobile-editor label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  margin: 14px 0;
}
.mobile-editor input:not([type=checkbox]), .mobile-editor select, .mobile-editor textarea {
  min-width: 0;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #dce5df;
  border-radius: 7px;
  background: #fff;
  color: #24392c;
  font: inherit;
}
.mobile-editor input[type=color] {
  height: 38px;
  padding: 4px;
}
.mobile-editor textarea {
  min-height: 80px;
  resize: vertical;
}
.mobile-editor button {
  padding: 8px 11px;
  border: 1px solid #dce5df;
  border-radius: 7px;
  background: white;
  font-size: 12px;
  cursor: pointer;
}
.mobile-editor button:disabled {
  opacity: .35;
  cursor: default;
}
.mobile-editor button:hover:not(:disabled), .mobile-editor button.active {
  background: #eaf4ed;
  border-color: #7bab88;
}
.mobile-row-actions, .mobile-color-row {
  display: flex;
  gap: 8px;
}
.mobile-color-row > label {
  flex: 1;
}
.mobile-editor .mobile-check {
  flex-direction: row;
  align-items: center;
}
.mobile-nav-editor, .mobile-element-properties {
  padding: 4px 14px 14px;
  margin: 15px 0;
  border: 1px solid #dce5df;
  border-radius: 10px;
}
.mobile-editor .mobile-primary {
  background: #19713c;
  color: white;
  border-color: #19713c;
  width: 100%;
}
.mobile-palette {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.mobile-palette button {
  text-align: left;
}
.mobile-element-list {
  display: grid;
  gap: 6px;
  margin-top: 18px;
}
.mobile-element-list > div {
  display: flex;
  gap: 4px;
}
.mobile-element-list > div > button:first-child {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mobile-preview {
  position: sticky;
  top: 0;
  align-self: start;
  padding: 28px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-width: 0;
}
.time-input {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  width: 100%;
}
.time-input > input:not([type=hidden]) {
  flex: 1;
  min-width: 0;
  width: 0;
  direction: ltr;
  text-align: left;
}
.time-input > select {
  flex: 0 0 auto;
  width: auto;
  min-width: 65px;
}
.mobile-preview-label {
  color: #6c7c70;
  font-size: 12px;
  font-weight: 600;
}
.mobile-phone {
  width: 375px;
  max-width: 100%;
  border: 7px solid #263b2d;
  border-radius: 38px;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 20px 50px #193d2520;
  display: flex;
  flex-direction: column;
  height: 760px;
  max-height: calc(100dvh - 170px);
  min-height: 480px;
}
.mobile-status-bar {
  display: flex;
  justify-content: space-between;
  padding: 13px 23px 10px;
  font-size: 11px;
  color: #24392c;
}
.mobile-screen {
  flex: 1;
  width: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow: auto;
  padding: 14px;
}
.mobile-preview-element {
  position: relative;
  margin-bottom: 12px;
  border-radius: 8px;
  outline-offset: 3px;
}
.mobile-preview-element.selected {
  outline: 2px solid #19713c;
}
.mobile-preview-element h2 {
  font-size: 24px;
  margin: 8px 0;
}
.mobile-preview-element p {
  font-size: 14px;
  line-height: 1.6;
  margin: 8px 0;
  white-space: pre-wrap;
}
.mobile-app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 15px;
  color: white;
  border-radius: 9px;
}
.mobile-card, .mobile-list {
  border: 1px solid #e0e7e2;
  border-radius: 12px;
  padding: 18px;
  background: white;
}
.mobile-card p {
  color: #6c7c70;
}
.mobile-image, .mobile-image-placeholder {
  height: 170px;
  border-radius: 12px;
  background-color: #e0ece4;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  color: #688571;
  background-size: cover;
  background-position: center;
}
.mobile-image > span {
  background: #ffffffd9;
  padding: 5px 10px;
  border-radius: 5px;
}
.mobile-action {
  border: 0;
  border-radius: 10px;
  color: white;
  padding: 14px;
  width: 100%;
  cursor: pointer;
  font: inherit;
}
.mobile-preview-element label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.mobile-preview-element input:not([type=checkbox]) {
  border: 1px solid #dce5df;
  border-radius: 9px;
  padding: 13px;
  width: 100%;
  background: white;
  font: inherit;
}
.mobile-list > div {
  display: flex;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid #edf2ee;
  font-size: 13px;
}
.mobile-preview-element .mobile-switch {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 14px;
  background: white;
  border-radius: 10px;
}
.mobile-switch input {
  accent-color: var(--mobile-accent);
}
.mobile-phone > .mobile-bottom-nav {
  display: flex;
  flex: 0 0 auto;
  border-top: 1px solid #e0e7e2;
  overflow-x: auto;
  padding: 8px 4px;
  min-height: 62px;
}
.mobile-bottom-nav button {
  flex: 1;
  min-width: 56px;
  border: 0;
  background: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: #7a887f;
  cursor: pointer;
}
.mobile-bottom-nav button > span {
  font-size: 21px;
}
.mobile-bottom-nav button.active {
  color: var(--mobile-accent);
  background: transparent;
}
.mobile-bottom-nav button.active > span {
  background: var(--mobile-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--mobile-accent) 12%, transparent);
  }
  padding: 0 15px;
  border-radius: 20px;
}
.mobile-bottom-nav small {
  font-size: 10px;
  white-space: nowrap;
}
.mobile-bottom-nav button:disabled {
  opacity: .45;
}
.mobile-home-indicator {
  display: flex;
  justify-content: center;
  padding: 8px;
}
.mobile-home-indicator span {
  height: 4px;
  width: 100px;
  background: #263b2d;
  border-radius: 4px;
}
.mobile-empty {
  padding: 45px 15px;
  text-align: center;
  color: #718277;
  font-size: 13px;
  line-height: 1.8;
}
.mobile-nav-empty {
  margin: auto;
  font-size: 11px;
  color: #718277;
}
.mobile-back {
  background: white;
  border: 1px solid #dce5df;
  border-radius: 8px;
  padding: 9px 12px;
  margin-bottom: 12px;
  cursor: pointer;
}
.mobile-designer.is-preview {
  grid-template-columns: 1fr;
}
@media (max-width: 1000px) {
  .mobile-designer {
    grid-template-columns: minmax(250px, 1fr) minmax(280px, 1fr);
  }
  .workspace.mobile-workspace {
    grid-template-columns: 100px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .mobile-preview {
    position: static;
  }
  .mobile-designer {
    grid-template-columns: 1fr;
  }
  .mobile-editor {
    border-right: 0;
    border-bottom: 1px solid #dce5df;
  }
  .mobile-preview {
    padding: 20px 10px;
  }
}
.mobile-workspace .side-menu {
  width: 100%;
}
.mobile-workspace .side-menu button {
  padding: 8px 5px;
}
.mobile-phone .inline-page-properties-button, .mobile-phone .inline-tab-properties-button {
  display: none;
}
.mobile-phone .imported-form-preview, .mobile-phone .nested-page-with-properties {
  min-width: 0;
}
.mobile-starter {
  padding: 16px;
  margin: 18px 0;
  background: #edf8f7;
  border: 1px solid #cce6e3;
  border-radius: 12px;
}
.mobile-starter > b {
  font-size: 14px;
  color: #007d81;
}
.mobile-starter > p {
  margin: 7px 0 12px;
}
.mobile-starter > button {
  width: 100%;
  color: #007d81;
  border-color: #b1d5d2;
}
.mobile-page-settings, .mobile-appearance {
  margin: 18px 0;
}
.mobile-page-settings > summary, .mobile-appearance > summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  color: #3d6452;
  padding: 6px 0;
}
.mobile-appearance .mobile-color-row > label {
  min-width: 0;
}
.mobile-page-elements {
  display: grid;
  width: 100%;
  min-width: 0;
  align-content: start;
  min-height: 100%;
}
.mobile-page-elements > .mobile-preview-element {
  margin-bottom: 0;
  min-width: 0;
}
.mobile-page-elements > .mobile-empty {
  grid-column: 1 / -1;
}
.mobile-preview-element h2 {
  color: var(--element-text-color, inherit);
  font-size: var(--element-font-size, 24px);
  font-weight: 800;
}
.mobile-preview-element p {
  color: var(--element-text-color, inherit);
  font-size: var(--element-font-size, 14px);
}
.mobile-card p {
  color: var(--element-text-color, #6c7c70);
}
.mobile-screen[dir=rtl] {
  text-align: right;
}
.mobile-screen[dir=rtl] .mobile-chevron {
  transform: rotate(180deg);
}
.mobile-screen[dir=rtl] h2 {
  font-family: inherit;
}
.mobile-rich {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid transparent;
  background: transparent;
  text-align: inherit;
  color: #151b39;
  font: inherit;
  font-size: var(--element-font-size, 14px);
}
button.mobile-rich {
  cursor: pointer;
}
button.mobile-rich:hover {
  filter: brightness(.98);
}
button.mobile-rich:focus-visible {
  outline: 2px solid var(--mobile-element-accent);
  outline-offset: 3px;
}
.mobile-rich-copy {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mobile-rich strong {
  display: block;
  font-size: inherit;
  line-height: 1.7;
  font-weight: 800;
}
.mobile-rich .mobile-rich-copy p {
  font-size: .8em;
  line-height: 1.9;
  color: var(--element-text-color, #7b7e8c);
  margin: 4px 0 0;
}
.mobile-rich-header {
  align-items: flex-end;
  justify-content: space-between;
  padding-block: 2px 10px;
}
.mobile-header-copy {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}
.mobile-header-copy small {
  display: block;
  color: #9094a1;
  font-size: 10px;
  margin-bottom: 15px;
}
.mobile-rich-header .mobile-header-copy h2 {
  color: var(--element-text-color, var(--mobile-element-accent));
  margin: 0;
  font-size: var(--element-font-size, 23px);
  font-weight: 850;
}
.mobile-notification {
  position: relative;
  display: inline-flex;
  color: #151b39;
  flex-shrink: 0;
}
.mobile-notification > b {
  position: absolute;
  top: -8px;
  inset-inline-end: -9px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 20px;
  background: #ee4055;
  color: white;
  font-size: 11px;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 2px white;
}
.mobile-rich-hero-banner {
  min-height: 112px;
  background: #dcf5f2;
  border-radius: 16px;
  padding: 18px;
  color: var(--mobile-element-accent);
  overflow: hidden;
  gap: 4px;
  font-size: var(--element-font-size, 20px);
}
.mobile-rich-hero-banner .mobile-rich-copy {
  flex: 1.2;
}
.mobile-rich-hero-banner .mobile-rich-copy p {
  font-size: .65em;
}
.mobile-map-art, .mobile-hero-image {
  flex: 1;
  width: 42%;
  min-width: 0;
  height: 100px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.mobile-rich-service-card {
  padding: 14px;
  border-radius: 14px;
  border-color: #dce5ee;
  background: #f3f7fb;
  font-size: var(--element-font-size, 16px);
}
.mobile-icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 50px;
  height: 54px;
  border-radius: 13px;
  background: var(--mobile-element-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--mobile-element-accent) 12%, white);
  }
  color: var(--mobile-element-accent);
}
.mobile-chevron {
  direction: ltr;
  display: inline-flex;
  font: 30px/1 Arial, sans-serif;
  color: #626779;
}
.mobile-rich-notice {
  padding: 14px;
  border-color: #f3d584;
  border-radius: 12px;
  background: #fff5d9;
  color: var(--mobile-element-accent);
  gap: 8px;
  font-size: var(--element-font-size, 13px);
}
.mobile-rich-notice .mobile-icon-tile {
  width: 35px;
  height: 40px;
  border-radius: 10px;
}
.mobile-rich-notice .mobile-rich-copy p {
  font-size: .78em;
}
.mobile-inline-action {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .76em;
  font-weight: 650;
  color: var(--mobile-element-accent);
}
.mobile-inline-action .mobile-chevron {
  font-size: 22px;
  color: inherit;
}
.mobile-rich-notice .mobile-inline-action {
  border-inline-start: 1px solid #f0d28b;
  padding-inline-start: 10px;
  flex-shrink: 0;
  max-width: 30%;
  line-height: 1.9;
}
.mobile-rich-section-header {
  justify-content: space-between;
  font-size: var(--element-font-size, 17px);
  padding-top: 4px;
}
.mobile-rich-request-card {
  display: block;
  padding: 14px;
  background: white;
  border: 1px solid #e1e5eb;
  border-radius: 14px;
  font-size: var(--element-font-size, 13px);
}
.mobile-request-summary {
  display: flex;
  gap: 9px;
  align-items: center;
}
.mobile-request-summary .mobile-icon-tile {
  width: 36px;
  height: 40px;
  border-radius: 9px;
}
.mobile-request-summary .mobile-rich-copy {
  flex: 1;
}
.mobile-request-summary strong {
  font-size: 1em;
  line-height: 1.8;
}
.mobile-status-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  background: #e9f3ff;
  color: #1875eb;
  border-radius: 8px;
  font-size: .75em;
  margin-top: 4px;
}
.mobile-status-chip i {
  width: 6px;
  height: 6px;
  background: currentColor;
  border-radius: 50%;
}
.mobile-request-date {
  align-self: start;
  font-size: .73em;
  color: #8c8f9d;
  padding-top: 3px;
}
.mobile-request-metadata {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  border-top: 1px solid #e9edf2;
  padding-top: 10px;
  margin: 10px 0 0;
}
.mobile-request-metadata dt {
  font-size: .75em;
  color: #9396a4;
}
.mobile-request-metadata dd {
  font-size: .85em;
  color: #4d5263;
  margin: 4px 0 0;
  line-height: 1.7;
}
.mobile-rich-icon-button {
  justify-content: center;
  gap: 10px;
  padding: 12px;
  color: var(--mobile-element-accent);
}
.mobile-rich-spacer {
  min-height: 12px;
}
.mobile-preview-element:has(> .mobile-rich-spacer) {
  min-height: 12px;
}
.mobile-preview-element.selected > .mobile-rich-spacer {
  background: repeating-linear-gradient(135deg, #edf6f2, #edf6f2 5px, white 5px, white 10px);
}
.mobile-bottom-nav button > span {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-bottom-nav button.active > span:has(svg) {
  padding: 2px 10px;
}
.workspace.mobile-pages-workspace {
  grid-template-columns: 340px minmax(0, 1fr);
}
.mobile-pages-workspace .side-menu {
  width: 88px;
}
.mobile-page-library {
  text-align: left;
  direction: ltr;
  color: #24392c;
}
.mobile-page-list-select {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}
.mobile-page-library .form-list-item {
  gap: 4px;
}
.mobile-page-library .form-row-actions {
  flex-shrink: 0;
}
.mobile-page-library .form-list-item:focus-within .form-row-actions {
  opacity: 1;
}
.mobile-page-library .form-list-item > input {
  flex: 1;
  width: 0;
}
.mobile-page-library .library-copy-button:disabled {
  opacity: .4;
  cursor: default;
}
.mobile-page-library .mobile-library-templates {
  margin-top: 24px;
  border-top: 1px solid #e3e9e5;
  padding-top: 14px;
}
.mobile-library-templates > summary {
  cursor: pointer;
  color: #667b6c;
  font-size: 12px;
  font-weight: 650;
}
.mobile-page-library .mobile-starter {
  margin: 10px 0 0;
  padding: 12px;
}
.mobile-page-library .mobile-starter b {
  font-size: 12px;
}
.mobile-page-library .mobile-starter p {
  color: #69796e;
  font-size: 11px;
  line-height: 1.7;
}
.mobile-page-library .mobile-starter button {
  border: 1px solid #b1d5d2;
  border-radius: 7px;
  background: white;
  font-size: 11px;
  padding: 8px;
}
@media (max-width: 1000px) {
  .workspace.mobile-pages-workspace {
    grid-template-columns: 280px minmax(0, 1fr);
  }
  .mobile-pages-workspace .side-menu {
    width: 76px;
  }
}
.convert-to-mobile-control {
  display: grid;
  gap: 8px;
  margin: 12px 0;
}
.convert-to-mobile-control > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #63766a;
}
.convert-to-mobile-control select {
  padding: 5px 9px;
  border: 1px solid #d4e2d9;
  border-radius: 6px;
  background: white;
  font: inherit;
}
.convert-to-mobile-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid #bedbc8;
  border-radius: 7px;
  background: #edf8f1;
  color: #176b3a;
  font-size: 12px;
  font-weight: 650;
  cursor: pointer;
}
.convert-to-mobile-button > span {
  font-size: 20px;
  line-height: 1;
}
.convert-to-mobile-button:hover {
  background: #deefe4;
}
.convert-to-mobile-button:disabled {
  opacity: .45;
  cursor: default;
}
.mobile-converted-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  border: 0;
  margin: 0;
  padding: 0;
  font-size: 13px;
}
.mobile-converted-field > span, .mobile-converted-field legend {
  font-weight: 600;
}
.mobile-converted-field em {
  color: #c34444;
  font-style: normal;
}
.mobile-converted-field :is(input:not([type=checkbox]):not([type=radio]), textarea, select) {
  width: 100%;
  min-width: 0;
  padding: 12px;
  border: 1px solid #d7e1db;
  border-radius: 9px;
  background: white;
  color: #24392c;
  font: inherit;
}
.mobile-converted-field :is(input, textarea, select):disabled {
  opacity: 1;
  color: #7b877f;
  background: #f7faf8;
}
.mobile-converted-field textarea {
  min-height: 90px;
  resize: vertical;
}
.mobile-converted-field.boolean {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #f7faf8;
  border-radius: 9px;
}
.mobile-converted-field input {
  accent-color: var(--mobile-accent);
}
.mobile-radio-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.mobile-preview-element .mobile-converted-field .mobile-radio-choice {
  flex-direction: row;
}
.mobile-page-navigation {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 7px;
  border-bottom: 1px solid #e3eae6;
}
.mobile-page-navigation button {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 9px 11px;
  border: 1px solid #dce5df;
  border-radius: 8px;
  background: white;
  color: #64776b;
  font-size: 11px;
}
.mobile-page-navigation button[aria-current=page] {
  border-color: var(--mobile-accent);
  color: var(--mobile-accent);
  background: var(--mobile-accent);
  @supports (color: color-mix(in lab, red, red)) {
    background: color-mix(in srgb, var(--mobile-accent) 8%, white);
  }
}
.mobile-page-navigation.steps button {
  flex-direction: column;
  border: 0;
  min-width: 65px;
}
.mobile-page-navigation.steps b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ecf2ee;
}
.mobile-page-navigation.steps button[aria-current=page] b {
  background: var(--mobile-accent);
  color: white;
}
.mobile-studio-field, .mobile-embedded-page {
  overflow-x: auto;
}
.mobile-studio-field small {
  display: block;
  margin-top: 6px;
  color: #7b877f;
  font-size: 11px;
}
.mobile-source-settings > summary {
  font-size: 12px;
  color: #63766a;
  cursor: pointer;
}
.mobile-source-settings textarea {
  direction: ltr;
  font: 11px monospace;
}
.mobile-preview-element[hidden] {
  display: none;
}
.mobile-designer:not(.is-preview) .mobile-preview-element > .mobile-converted-field,
.mobile-designer:not(.is-preview) .mobile-preview-element > .mobile-studio-field {
  pointer-events: none;
}
.mobile-vertical-stepper {
  grid-column: 1 / -1;
  display: grid;
  align-content: start;
  gap: 9px;
}
.mobile-accordion-step {
  min-width: 0;
  border: 1px solid #dfe8ec;
  border-radius: 10px;
  background: #fff;
  padding: 11px 13px;
  color: #17375b;
}
.mobile-accordion-step.editing {
  border-color: #69b3aa;
}
.mobile-accordion-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  color: #17375b;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.mobile-accordion-toggle > svg:first-child {
  flex-shrink: 0;
}
.mobile-accordion-toggle strong {
  flex: 1;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.9;
}
.mobile-step-index {
  color: #9bacb9;
  font-size: 9px;
}
.mobile-accordion-chevron {
  flex-shrink: 0;
  transition: transform .16s;
}
.mobile-accordion-step.expanded .mobile-accordion-chevron {
  transform: rotate(180deg);
}
.mobile-accordion-summary {
  white-space: pre-line;
  margin: 3px 32px 0 0;
  font-size: 10px;
  line-height: 1.9;
  color: #8492a6;
  text-align: start;
}
.mobile-screen[dir=ltr] .mobile-accordion-summary {
  margin: 3px 0 0 32px;
}
.mobile-accordion-content {
  display: grid;
  gap: 14px;
  margin-top: 13px;
  padding-top: 14px;
  border-top: 1px solid #edf1f4;
  min-width: 0;
}
.mobile-accordion-content[hidden] {
  display: none;
}
.mobile-step-editor {
  margin: 20px 0;
  padding: 0 0 18px;
  border-bottom: 1px solid #e2eae5;
}
.mobile-step-editor h3 {
  margin-top: 0;
}
.mobile-step-list {
  display: grid;
  gap: 5px;
  margin: 8px 0;
}
.mobile-step-list > div {
  display: flex;
  gap: 4px;
}
.mobile-step-list > div > button:first-child {
  flex: 1;
  min-width: 0;
  text-align: start;
}
.mobile-step-settings {
  border: 1px solid #dce5df;
  border-radius: 8px;
  padding: 0 12px 12px;
  margin-top: 12px;
}
.mobile-screen:has(.mobile-vertical-stepper) > .mobile-page-elements > .mobile-preview-element .mobile-rich-service-card {
  min-height: 68px;
  color: #17375b;
  font-size: 15px;
}
.mobile-screen:has(.mobile-vertical-stepper) .mobile-rich-service-card .mobile-rich-copy {
  display: flex;
  flex-direction: column-reverse;
}
.mobile-screen:has(.mobile-vertical-stepper) .mobile-rich-service-card .mobile-icon-tile {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}
.mobile-screen:has(.mobile-vertical-stepper) .mobile-rich-service-card .mobile-rich-copy p {
  margin-top: 0;
  color: #8395a5;
  font-size: 10px;
}
.mobile-screen:has(.mobile-vertical-stepper) .mobile-rich-service-card .mobile-inline-action {
  color: #008b8f;
}
.workspace.mobile-pages-workspace {
  grid-template-columns: 340px minmax(480px, 1fr) var(--properties-width, 360px);
}
.mobile-designer.with-properties-panel {
  grid-template-columns: minmax(180px, 240px) minmax(280px, 1fr);
}
.mobile-right-panel {
  direction: ltr;
  text-align: left;
  color: #24392c;
}
.mobile-properties-content.mobile-editor {
  padding: 0;
  border: 0;
  background: transparent;
}
.mobile-properties-content .mobile-element-properties {
  margin: 0;
  padding: 16px 20px 28px;
  border: 0;
  border-radius: 0;
}
.mobile-properties-content .mobile-element-properties > h3 {
  margin-top: 0;
}
.mobile-properties-content .empty-properties {
  padding: 28px 20px;
}
.mobile-fixture-properties {
  position: sticky;
  top: 0;
  max-height: calc(100vh - 70px);
  overflow: auto;
  padding: 0;
  background: white;
  border: 0;
  border-left: 1px solid #dce5df;
}
@media (max-width: 1100px) {
  .workspace.mobile-pages-workspace {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}
@media (max-width: 760px) {
  .mobile-designer.with-properties-panel {
    grid-template-columns: 1fr;
  }
}
.mobile-phone {
  position: relative;
  isolation: isolate;
}
.mobile-accordion-step {
  padding: 0;
}
.mobile-accordion-toggle {
  display: block;
  padding: 11px 13px;
  border-radius: inherit;
}
.mobile-accordion-toggle:hover {
  background: #f7fafb;
}
.mobile-accordion-toggle:focus-visible {
  outline: 2px solid var(--mobile-accent);
  outline-offset: 2px;
}
.mobile-step-card-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.mobile-step-card-heading > svg {
  flex-shrink: 0;
}
.mobile-step-open-icon {
  flex-shrink: 0;
}
.mobile-screen[dir=rtl] .mobile-step-open-icon {
  transform: rotate(180deg);
}
.mobile-accordion-summary {
  display: block;
}
.mobile-step-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: white;
  color: #17375b;
  text-align: start;
  min-width: 0;
  min-height: 0;
}
.mobile-step-modal[hidden] {
  display: none;
}
.mobile-step-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 17px 14px;
  border-bottom: 1px solid #e2e9ed;
  background: #f5faf9;
}
.mobile-step-modal-header h2 {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.8;
}
.mobile-step-modal-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: 1px solid #dce7e1;
  border-radius: 8px;
  background: white;
  color: #456154;
  font: 23px/1 Arial, sans-serif;
  cursor: pointer;
}
.mobile-step-modal-body {
  display: grid;
  align-content: start;
  gap: 14px;
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 18px 14px;
}
.mobile-step-modal-footer {
  flex-shrink: 0;
  border-top: 1px solid #e2e9ed;
  padding: 12px 14px;
  background: white;
}
.mobile-step-modal-footer > button {
  width: 100%;
  border: 1px solid #c6e2d4;
  border-radius: 9px;
  padding: 11px;
  color: #176b3a;
  background: #eef7f2;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.mobile-phone:has(> .mobile-step-modal:not([hidden])) > .mobile-screen {
  overflow: hidden;
}
.form-radio-control {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.form-radio-control legend {
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 600;
}
.form-radio-control em {
  color: #d15353;
  font-style: normal;
}
.mobile-studio-field .embedded-form {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}
.mobile-studio-field .imported-form-field {
  min-width: 0;
}
.mobile-properties-content > .properties {
  padding: 16px 20px 28px;
}
.workspace.mobile-home-pages-workspace {
  grid-template-columns: 340px minmax(480px, 1fr);
}
@media (max-width: 1100px) {
  .workspace.mobile-home-pages-workspace {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}
.mobile-vertical-stepper {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.mobile-accordion-step,
.mobile-accordion-toggle,
.mobile-step-card-heading,
.mobile-step-inline-fields,
.mobile-step-modal-body,
.mobile-step-inline-fields .mobile-studio-field {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.mobile-step-modal-body {
  grid-template-columns: minmax(0, 1fr);
}
.mobile-step-card-heading strong {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mobile-accordion-summary {
  min-width: 0;
  overflow-wrap: anywhere;
}
.mobile-step-inline-fields .mobile-converted-field.boolean > span {
  flex: 1 1 0;
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
}
.mobile-step-inline-fields .mobile-converted-field.boolean > input {
  flex-shrink: 0;
}
.mobile-accordion-step {
  position: relative;
}
.mobile-accordion-toggle .mobile-step-card-heading {
  padding-inline-end: 34px;
  box-sizing: border-box;
}
.mobile-step-edit-button {
  position: absolute;
  inset-inline-end: 9px;
  top: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #d9e8e4;
  border-radius: 9px;
  background: #f1faf7;
  color: #087c70;
  cursor: pointer;
}
.mobile-step-edit-button:hover {
  background: #e2f4ed;
}
.mobile-step-edit-button:focus-visible {
  outline: 2px solid #087c70;
  outline-offset: 2px;
}
.mobile-vertical-stepper {
  gap: 22px;
  padding: 8px 4px;
  box-sizing: border-box;
}
.mobile-vertical-stepper > .mobile-accordion-step {
  margin-inline-start: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 0;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
}
.mobile-vertical-stepper > .mobile-accordion-step:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: 13px;
  top: 35px;
  bottom: -17px;
  width: 2px;
  background: #dce3eb;
}
.mobile-step-marker {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  justify-self: center;
  margin-top: 13px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #8996a8;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
}
.mobile-step-content {
  grid-column: 2;
  grid-row: 1;
  position: relative;
  min-width: 0;
  border-radius: 7px;
}
.mobile-vertical-stepper .is-active .mobile-step-content {
  background: #e4efff;
}
.mobile-vertical-stepper .is-active .mobile-step-marker {
  background: #0875ff;
}
.mobile-vertical-stepper .mobile-accordion-toggle {
  padding: 10px 12px;
  border-radius: 7px;
}
.mobile-vertical-stepper .mobile-accordion-toggle:hover {
  background: #edf4ff;
}
.mobile-vertical-stepper .mobile-step-card-heading strong {
  color: #1670df;
  font-size: 14px;
  line-height: 1.7;
}
.mobile-screen .mobile-vertical-stepper .mobile-accordion-summary {
  margin: 6px 0 0;
  color: #718096;
  font-size: 11px;
  line-height: 1.9;
}
.mobile-vertical-stepper .mobile-step-edit-button {
  background: transparent;
  border-color: transparent;
  color: #3976be;
}
.mobile-vertical-stepper .mobile-step-edit-button:hover {
  background: #d7e8ff;
}
.mobile-screen[dir="rtl"] .mobile-vertical-stepper {
  margin-inline-start: calc(0px - var(--mobile-page-padding, 14px));
  width: calc(100% + var(--mobile-page-padding, 14px));
  max-width: none;
  padding-inline-start: 0;
}
.mobile-step-confirm-footer {
  display: flex;
  gap: 10px;
}
.mobile-step-confirm-footer > button {
  flex: 1;
  width: auto;
}
.mobile-step-confirm-footer > button:first-child {
  background: #08783e;
  color: #fff;
  border-color: #08783e;
}
.mobile-step-confirm-footer > button:last-child {
  background: #fff;
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/runtime-list.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
.header-actions { display: flex; gap: 8px; }
.list-tools { display: flex; align-items: end; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #fbfdfb; }
.list-tools label { display: flex; flex-direction: column; gap: 5px; font-size: 10px; }
.list-tools label:first-child { flex: 1; }
.list-tools .list-page-size-control { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 7px; white-space: nowrap; }
.list-tools input, .list-tools select, .filter-row input, .filter-row select { height: 34px; border: 1px solid #cad9d0; border-radius: 7px; padding: 5px 8px; background: #fff; min-width: 90px; }
.list-tools button { height: 34px; border: 1px solid #cad9d0; background: #fff; border-radius: 7px; }
.list-tools .list-tool-icon { width: 34px; min-width: 34px; padding: 0; display: grid; place-items: center; color: #537064; cursor: pointer; }
.list-tools .list-tool-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.list-tools .list-tool-icon.primary { border-color: var(--theme-primary); background: var(--theme-primary); color: #fff; }
.list-tools .list-tool-icon:hover { border-color: #08783e; color: #08783e; background: #edf8f1; }
.list-tools .list-tool-icon.primary:hover { background: var(--theme-primary-hover); color: #fff; }
.filter-row th { padding: 7px; }
.list-column-heading { display: flex; align-items: center; justify-content: space-between; gap: 7px; }
.list-column-sort { width: 24px; height: 24px; flex: none; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #8a988f; cursor: pointer; }
.list-column-sort:hover, .list-column-sort.ascending, .list-column-sort.descending { background: color-mix(in srgb, var(--theme-primary) 10%, transparent); color: var(--theme-primary); }
.list-column-sort svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.list-column-sort:not(.ascending):not(.descending) svg path { opacity: .5; }
.list-column-sort.ascending svg path:last-child, .list-column-sort.descending svg path:first-child { opacity: .25; }
.filter-row input, .filter-row select { width: 100%; }
.lookup-list-filter { min-width: 120px; }
.list-status-row td { height: 96px; text-align: center; color: #75857b; }
.list-status-row.error td { color: #a82d2d; }
.list-footer { display: flex; align-items: center; gap: 16px; padding: 12px 18px; }
.list-footer > span { margin-right: auto; color: #728278; }
.pagination { display: flex; align-items: center; gap: 10px; }
.list-tools .pagination { height: 34px; white-space: nowrap; }
.pagination button { border: 1px solid var(--line); background: #fff; border-radius: 6px; width: 30px; height: 30px; }
.list-export-backdrop { position: fixed; inset: 0; z-index: 120; padding: 20px; display: grid; place-items: center; background: #17251d80; backdrop-filter: blur(2px); }
.list-export-modal { width: min(500px, 100%); max-height: 90vh; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 24px 70px #0d1d1360; display: flex; flex-direction: column; }
.list-export-modal > header { min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.list-export-modal > header > div { display: flex; align-items: center; gap: 10px; }
.list-export-modal > header svg { width: 19px; height: 19px; fill: none; stroke: var(--theme-primary); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.list-export-modal header b { display: block; color: #26352c; font-size: 14px; }
.list-export-modal header small { display: block; margin-top: 3px; color: #849087; font-size: 10px; }
.list-export-modal > header > button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #69766e; font-size: 20px; }
.list-export-body { min-height: 0; padding: 16px; overflow: auto; }
.list-export-body > label { display: grid; gap: 6px; color: #5f6d64; font-size: 11px; font-weight: 700; }
.list-export-body > label select { height: 36px; padding: 0 9px; border: 1px solid #d7e1da; border-radius: 6px; background: #fff; color: #35443a; }
.list-export-heading { margin: 18px 0 8px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.list-export-heading b { font-size: 12px; }
.list-export-heading small { color: #8b958f; font-size: 9px; }
.list-export-columns { display: flex; flex-direction: column; gap: 5px; }
.list-export-columns > div { min-height: 39px; padding: 0 10px; border: 1px solid #e0e7e2; border-radius: 7px; background: #fafcfa; display: flex; align-items: center; gap: 8px; color: #78847c; cursor: grab; }
.list-export-columns > div.dragging { opacity: .45; }
.list-export-columns > div > svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
.list-export-columns label { min-width: 0; flex: 1; display: flex; align-items: center; gap: 8px; color: #3f4c44; font-size: 11px; cursor: pointer; }
.list-export-columns label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-export-error { margin: 10px 0 0; color: #a82d2d; font-size: 10px; }
.list-export-modal > footer { padding: 11px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.list-export-modal > footer button { min-width: 80px; height: 34px; padding: 0 12px; border: 1px solid #d5dfd8; border-radius: 6px; background: #fff; color: #4d5b52; }
.list-export-modal > footer button.primary { border-color: var(--theme-primary); background: var(--theme-primary); color: #fff; }
.list-export-modal button:disabled { opacity: .45; cursor: default; }
.user-password-action-column { width: 112px; }
.user-password-action-heading { min-width: 112px; text-align: center; }
.user-password-action { text-align: center; }
.user-password-action > button { min-height: 30px; padding: 0 9px; border: 1px solid #d5b36e; border-radius: 6px; background: #fff8e9; color: #815e1f; display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 10px; cursor: pointer; }
.user-password-action > button:hover { border-color: #c18b25; background: #fff0cc; }
.user-password-action svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.user-password-backdrop { position: fixed; inset: 0; z-index: 130; padding: 20px; display: grid; place-items: center; background: #17251d80; backdrop-filter: blur(2px); }
.user-password-modal { width: min(430px, 100%); overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 24px 70px #0d1d1360; }
.user-password-modal > header { min-height: 64px; padding: 12px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; }
.user-password-modal header b { display: block; color: #26352c; font-size: 14px; }
.user-password-modal header small { display: block; margin-top: 3px; color: #849087; font-size: 10px; direction: ltr; text-align: right; }
.user-password-modal > header > button { width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: #69766e; font-size: 20px; }
.user-password-modal > div { padding: 16px; display: grid; gap: 13px; }
.user-password-modal label { display: grid; gap: 6px; color: #5f6d64; font-size: 11px; font-weight: 700; }
.user-password-modal input { height: 38px; padding: 0 10px; border: 1px solid #cad9d0; border-radius: 7px; direction: ltr; }
.user-password-control { position: relative; display: block; }
.user-password-control input { width: 100%; padding-inline-end: 58px; }
.user-password-control > button { position: absolute; inset-inline-end: 5px; top: 5px; height: 28px; padding: 0 7px; border: 0; border-radius: 5px; background: transparent; color: #65756b; font-size: 10px; cursor: pointer; }
.user-password-control > button:hover { background: #edf4ef; }
.user-password-modal p { margin: 0; color: #a82d2d; font-size: 10px; }
.user-password-modal > footer { padding: 11px 16px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 8px; }
.user-password-modal > footer button { min-width: 88px; height: 34px; padding: 0 12px; border: 1px solid #d5dfd8; border-radius: 6px; background: #fff; color: #4d5b52; }
.user-password-modal > footer button.primary { border-color: var(--theme-primary); background: var(--theme-primary); color: #fff; }
.user-password-modal button:disabled { opacity: .45; cursor: default; }

@media (max-width: 800px) {
  .list-tools { align-items: stretch; flex-direction: column; }
}

/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/runtime-modal.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
.clickable-row { cursor: pointer; }
.clickable-row:hover td { background: #edf7f0; }
.page-modal { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 24px; background: #173b2b99; backdrop-filter: blur(3px); }
.page-modal-window { position: relative; width: min(1100px, 96vw); max-height: 92vh; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #9fbaa9; border-radius: 15px; background: #fff; box-shadow: 0 30px 90px #102b1e73; }
.page-modal-window-xl { width: min(1680px, 98vw); height: 96vh; max-height: 96vh; }
.page-modal-window-xl .page-modal-body { min-height: 0; flex: 1; padding: 8px; overflow: hidden; }
.page-modal-window > header { position: absolute; z-index: 20; top: 3px; left: 3px; display: block; padding: 0; border: 0; background: transparent; }
.page-modal-window > header > div { display: none; }
.page-modal-window > header small { color: var(--green); font-weight: bold; }
.page-modal-window > header button { width: 26px; height: 26px; box-sizing: border-box; padding: 0 !important; border: 1px solid #9fb9a8; border-radius: 6px; background: #f7faf8; color: #294638; line-height: 1; cursor: pointer; box-shadow: 0 2px 8px #173b2b2b; }
.page-modal-window > header .page-modal-close { display: grid; place-items: center; border-color: #d8a8a8; border-radius: 6px; background: #fff7f7; color: #a82424; }
.page-modal-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.page-modal-close:hover { border-color: #c94a4a; background: #feecec; }
.page-modal-body { min-height: 0; flex: 1 1 auto; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 20px; }
.page-modal-body .form-card { box-shadow: none; }
.task-confirm-modal { width: min(620px, 96vw); background: #fff; }
.task-confirm-modal .page-modal-body { display: grid; gap: 18px; padding: 28px; }
.task-confirm-modal h3 { padding-left: 34px; text-align: center; }
.task-next-steps { display: grid; gap: 10px; }
.task-next-steps section { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); }
.task-next-steps label { display: flex; align-items: center; gap: 10px; }
.task-next-steps select { min-width: 220px; height: 36px; border: 1px solid #cad9d0; border-radius: 7px; background: #fff; }
.task-confirm-actions { display: flex; justify-content: center; gap: 10px; }
.task-confirm-actions button { min-width: 90px; padding: 10px 20px; border: 0; border-radius: 7px; background: var(--green); color: #fff; cursor: pointer; }
.task-confirm-actions button.cancel { border: 1px solid #cad9d0; background: #fff; color: var(--ink); }

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/runtime-tabs.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
.runtime-tabs { min-height: 520px; background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.runtime-tabs-title { padding: 16px 18px; border-bottom: 1px solid var(--line); background: white; color: var(--ink); font-size: 18px; }
.runtime-tabs-header { padding: 16px 18px; border-bottom: 1px solid var(--line); background: white; }
.runtime-tabs-header > :first-child { margin-top: 0; }
.runtime-tabs-header > :last-child { margin-bottom: 0; }
.runtime-html-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--runtime-table-border, var(--line)); border-radius: var(--runtime-table-radius, 7px); background: var(--runtime-table-body-bg, var(--theme-surface, #fff)); }
.runtime-html-table { width: 100%; border-collapse: collapse; color: var(--runtime-table-body-text, var(--ink, #172c21)); font-size: 11px; }
.runtime-html-table th, .runtime-html-table td { padding: var(--runtime-table-cell-padding, 8px) 10px !important; border-inline-start: 1px solid var(--runtime-table-border, var(--line)); border-bottom: 1px solid var(--runtime-table-border, var(--line)); text-align: start; }
.runtime-html-table th:first-child, .runtime-html-table td:first-child { border-inline-start: 0; }
.runtime-html-table th { background: var(--runtime-table-header-bg, var(--soft, #eaf3ed)); color: var(--runtime-table-header-text, var(--theme-primary, var(--green))); font-weight: 750; }
.runtime-html-table tbody tr:last-child td { border-bottom: 0; }
.runtime-html-table-striped tbody tr:nth-child(even), .runtime-html-table tbody tr:hover { background: var(--runtime-table-stripe-bg, color-mix(in srgb, var(--theme-primary, var(--green)) 6%, white)); }
.runtime-tabs > nav { display: flex; flex-wrap: wrap; gap: 0; padding: 10px 12px 0; overflow-x: visible; border-bottom: 1px solid var(--line); background: #f8fbf9; }
.runtime-tabs > nav button { position: relative; width: max-content; min-width: max-content; flex: 0 0 auto; margin-bottom: -1px; margin-inline-start: -1px; padding: 11px 16px; border: 1px solid color-mix(in srgb, var(--line) 78%, #8fa398); border-radius: 0; background: #f3f7f4; color: #65766c; white-space: nowrap; cursor: pointer; }
.runtime-tabs > nav button:first-child { margin-inline-start: 0; }
.runtime-tabs > nav button.active { z-index: 1; border-color: var(--line); border-bottom-color: white; background: white; color: var(--green); font-weight: bold; }
.runtime-tabs-content { width: 100%; min-width: 0; padding: 18px; background: white; }
.runtime-tabs .form-card, .runtime-tabs .list-card { box-shadow: none; }
.runtime-tabs-content > .list-card { width: 100%; max-width: none; margin: 0; }
.runtime-tabs-content > .list-card > .list-tools,
.runtime-tabs-content > .list-card > .table-scroll,
.runtime-tabs-content > .list-card > .list-footer { width: 100%; }
.runtime-stepper { min-height: 520px; background: white; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.runtime-stepper > ol { margin: 0; padding: 18px; display: flex; justify-content: safe center; overflow-x: auto; overflow-y: hidden; list-style: none; scrollbar-gutter: stable; }
.runtime-stepper > ol > li { position: relative; min-width: 96px; flex: 0 0 auto; display: flex; align-items: center; flex-direction: column; gap: 5px; color: #87938b; font-size: 10px; font-weight: 500; }
.runtime-stepper > ol > li > span { padding-inline: 12px; white-space: nowrap; }
.runtime-stepper > ol > li:not(:last-child)::after { content: ""; position: absolute; top: 13px; right: calc(50% + 17px); width: calc(100% - 34px); height: 1px; background: #d7dfd9; }
.runtime-stepper > ol i { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid #b8c9be; border-radius: 50%; background: white; color: #65766c; font-style: normal; }
.runtime-stepper > ol > li.active i, .runtime-stepper > ol > li.complete i { border-color: var(--green); background: var(--green); color: white; }
.runtime-stepper > ol > li.active { color: var(--green); font-weight: 600; }
.runtime-stepper-content { padding: 18px; }
.runtime-stepper .form-card, .runtime-stepper .list-card { box-shadow: none; }
.runtime-stepper > footer { padding: 12px 18px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); }
.runtime-stepper > footer button { min-width: 76px; padding: 8px 14px; border: 1px solid #9ab7a4; border-radius: 7px; background: #edf5ef; color: var(--green); cursor: pointer; }
.runtime-stepper > footer button:disabled { opacity: .45; cursor: default; }
.runtime-stepper > footer span { color: #6d7d73; font-size: 11px; }

/*!*********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/runtime-divider.css ***!
  \*********************************************************************************************************************************************************************************************************************************************************************/
.divider {
  --divider-color: #06763b;
  min-height: 36px;
  padding: 7px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  color: var(--divider-color);
  font-weight: 800;
}

.divider::before,
.divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: var(--divider-color);
  opacity: .82;
}

.divider span {
  flex: none;
  max-width: 75%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*!************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/main-preview-shell.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************/
.runtime-host,
body:has(.runtime-host) {
  overflow: hidden;
}
.runtime-unavailable {
  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;
  display: grid;
  place-items: center;
  background: #f3f7f4;
  color: #26352c;
  font-family: var(--theme-font-family, inherit);
}
.runtime-unavailable > section {
  width: min(420px, 100%);
  padding: 28px;
  border: 1px solid #d7e3da;
  border-radius: 14px;
  display: grid;
  justify-items: center;
  gap: 10px;
  background: white;
  box-shadow: 0 18px 55px #173b2b1f;
  text-align: center;
}
.runtime-unavailable > section > span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff3e7;
  color: #d97706;
  font-size: 24px;
  font-weight: 800;
}
.runtime-unavailable h1 { margin: 4px 0 0; font-size: 18px; }
.runtime-unavailable p { margin: 0; color: #637269; font-size: 12px; line-height: 1.8; }
.runtime-unavailable small { color: #89958d; font-size: 10px; }
.runtime-unavailable button {
  min-width: 120px;
  min-height: 36px;
  margin-top: 5px;
  padding: 7px 16px;
  border: 0;
  border-radius: 7px;
  background: #176b3a;
  color: white;
  font: inherit;
  font-size: 11px;
  font-weight: 750;
  cursor: pointer;
}
.runtime-unavailable button:disabled { cursor: wait; opacity: .65; }
.runtime-theme-shell { min-height: 100vh; min-height: 100dvh; color: var(--ink); background: var(--theme-background); font-family: var(--theme-font-family); }
.runtime-theme-shell .app-login { background-color: var(--theme-background); }
.runtime-theme-shell .app-login form { border-color: var(--line); border-radius: calc(var(--theme-radius) + 5px); background: var(--theme-surface); color: var(--ink); }
.runtime-theme-shell .app-login-mark,
.runtime-theme-shell .brand-gem { border-radius: var(--theme-radius); background: var(--theme-primary); }
.runtime-theme-shell .app-login button[type="submit"] { border-radius: var(--theme-radius); background: var(--theme-primary); }
.runtime-host { width: 100vw; height: 100vh; height: 100dvh; min-height: 0; overflow: hidden !important; color: var(--ink); background: var(--theme-background); font-family: var(--theme-font-family); }
.runtime-host > .menu-preview-card { width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 0; border-radius: 0; box-shadow: none; }
.runtime-host .menu-preview-card { color: var(--ink); background: var(--theme-surface); }
.runtime-host .program-topbar { border-color: var(--line); background: var(--theme-surface); }
.runtime-host .program-identity b { color: var(--ink); }
.runtime-host .program-identity small { color: var(--muted-ink); }
.runtime-host .menu-preview-card > aside { background: var(--theme-sidebar); }
.runtime-host .menu-preview-item { border-radius: var(--theme-radius); }
.runtime-host .menu-preview-item.active { background: var(--theme-primary); color: white; }
.runtime-host .form-submit,
.runtime-host .feature-map-modal > footer .primary { border-color: var(--theme-primary); background: var(--theme-primary); color: white; }
.runtime-host .form-submit:hover { background: var(--theme-primary-hover); }
.runtime-host button,
.runtime-host input,
.runtime-host select,
.runtime-host textarea { border-radius: var(--theme-radius); }
.runtime-host[dir="ltr"],
.runtime-host[dir="ltr"] .menu-preview-card,
.runtime-host[dir="ltr"] .program-topbar,
.runtime-host[dir="ltr"] .program-identity,
.runtime-host[dir="ltr"] .program-top-actions,
.runtime-host[dir="ltr"] .menu-preview-brand,
.runtime-host[dir="ltr"] .menu-preview-user,
.runtime-host[dir="ltr"] .rendered-menu-page { direction: ltr; text-align: left; }
.runtime-host[dir="ltr"] .runtime-user-menu { margin-left: auto !important; margin-right: 0 !important; }
.runtime-host .program-identity,
.runtime-host .program-top-actions { display: flex; }
.runtime-host .brand-mark { display: grid; place-items: center; border-radius: var(--theme-radius); color: white; background: var(--theme-primary); }
.runtime-host .program-top-actions .logout-button {
  min-width: 48px;
  min-height: 29px;
  padding: 4px 10px !important;
  border: 1px solid #e5caca;
  border-radius: 6px;
  background: #fff4f4;
  color: #a33c3c;
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.runtime-host .program-top-actions .logout-button:hover { border-color: #d8aaaa; background: #fbe8e8; }
.runtime-host .program-top-actions .logout-button:disabled { cursor: wait; opacity: .6; }
.runtime-host .runtime-open-new-tab {
  width: 32px;
  height: 32px;
  padding: 7px !important;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--theme-radius);
  background: var(--theme-surface);
  color: var(--muted-ink);
  cursor: pointer;
}
.runtime-host .runtime-open-new-tab:hover {
  border-color: var(--theme-primary);
  color: var(--theme-primary);
  background: color-mix(in srgb, var(--theme-primary) 7%, var(--theme-surface));
}
.runtime-host .runtime-open-new-tab svg {
  width: 18px;
  height: 18px;
  padding: 0 !important;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.runtime-host .runtime-profile-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.runtime-host .runtime-profile-actions .runtime-open-new-tab {
  width: 100%;
  height: auto;
  min-height: 40px;
  padding: 7px 6px !important;
  display: flex;
  justify-content: center;
  gap: 5px;
  font: inherit;
  font-size: 8px;
  font-weight: 700;
}
.runtime-host .runtime-profile-actions .runtime-open-new-tab svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.runtime-host .runtime-user-menu {
  position: relative;
  direction: rtl;
  margin-right: auto !important;
  margin-left: 0 !important;
}
.runtime-host .runtime-server-clock {
  width: 100px;
  min-width: 100px;
  height: 40px;
  box-sizing: border-box;
  padding: 2px 4px !important;
  border: 0;
  border-radius: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 19px 19px;
  align-items: center;
  gap: 0;
  direction: rtl;
  background: transparent;
  color: var(--theme-primary);
  font-family: Arial, sans-serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
  white-space: nowrap;
}
.runtime-host .runtime-server-clock time:first-child {
  grid-row: 2;
}
.runtime-host .runtime-server-clock time:last-child {
  grid-row: 1;
}
.runtime-host .runtime-server-clock time {
  min-width: 0;
  padding: 0 !important;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  color: var(--theme-primary);
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .02em;
  direction: ltr;
}
.runtime-host .runtime-server-clock time em {
  align-self: flex-start;
  margin-top: 1px;
  color: currentColor;
  font-family: Arial, sans-serif;
  font-size: 7px;
  font-style: normal;
  font-weight: 800;
}
@media (max-width: 640px) {
  .runtime-host .runtime-server-clock {
    width: 96px;
    min-width: 96px;
    padding-inline: 2px !important;
  }
}
.runtime-host .runtime-user-icon {
  position: relative;
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border: 1px solid #b9d2c2;
  border-radius: 50%;
  background: #e8f2ea;
  color: #286d40;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
}
.runtime-host .runtime-user-icon:hover,
.runtime-host .runtime-user-icon[aria-expanded="true"] {
  border-color: #176b3a;
  box-shadow: 0 0 0 3px #176b3a18;
}
.runtime-host .runtime-user-icon img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  display: block;
  border-radius: inherit;
  object-fit: cover;
  object-position: center;
}
.runtime-host .runtime-user-panel {
  position: absolute;
  z-index: 200;
  top: 42px;
  left: 0;
  width: 250px;
  padding: 12px !important;
  display: grid;
  gap: 12px;
  border: 1px solid #d3dfd7;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 16px 45px #173b2833;
  color: #33443a;
  text-align: right;
}
.runtime-host .runtime-user-panel > header {
  display: flex;
  align-items: center;
  gap: 9px;
}
.runtime-host .runtime-user-panel > header > span {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e7f3eb;
  color: #176b3a;
  font-weight: 800;
}
.runtime-host .runtime-profile-image {
  position: relative;
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid #c9e0d1;
  border-radius: 50%;
  background: #e7f3eb;
  color: #176b3a;
  font-weight: 800;
  cursor: pointer;
  overflow: hidden;
}
.runtime-host .runtime-profile-image img { width: 100%; height: 100%; object-fit: cover; }
.runtime-host .runtime-profile-image input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.runtime-host .runtime-profile-image i {
  position: absolute;
  inset-inline-end: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--theme-primary);
  color: white;
  font-size: 9px;
  font-style: normal;
}
.runtime-host .runtime-profile-image.uploading { cursor: wait; opacity: .65; }
.runtime-host .runtime-account-username { margin-top: 4px !important; }
.runtime-host .runtime-user-panel small,
.runtime-host .runtime-user-panel b {
  display: block;
}
.runtime-host .runtime-user-panel small {
  color: #849188;
  font-size: 8px;
}
.runtime-host .runtime-user-panel b {
  margin-top: 2px !important;
  font-size: 11px;
}
.runtime-host .runtime-user-groups {
  padding: 10px 0 !important;
  border-top: 1px solid #e6ece8;
  border-bottom: 1px solid #e6ece8;
}
.runtime-host .runtime-groups-section { margin: 0 0 10px !important; }
.runtime-host .runtime-groups-section > div { margin-top: 6px !important; display: flex; flex-wrap: wrap; gap: 5px; }
.runtime-host .runtime-user-groups > .runtime-profile-section { display: grid; gap: 6px; margin: 0 0 10px !important; }
.runtime-host .runtime-profile-list { display: grid; gap: 6px; margin-top: 0 !important; }
.runtime-host .runtime-profile-card {
  min-width: 0;
  padding: 8px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid #dce5df;
  border-radius: 8px;
  background: #f8faf8;
}
.runtime-host .runtime-profile-card.active {
  border-color: #7eb58f;
  background: #eaf5ed;
  box-shadow: inset 3px 0 #176b3a;
}
.runtime-host .runtime-profile-card > div { min-width: 0; }
.runtime-host .runtime-profile-group-ids {
  display: block;
  margin-top: 6px;
  font-size: 10px;
  line-height: 1.7;
  color: #65756b;
  overflow-wrap: anywhere;
}
.runtime-host .runtime-profile-card b {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.runtime-host .runtime-profile-status {
  width: max-content;
  margin-top: 5px !important;
  padding: 3px 6px !important;
  border-radius: 999px;
  background: #eef2ef !important;
  color: #69756d !important;
  font-size: 7px !important;
  font-weight: 700;
}
.runtime-host .runtime-profile-status.status-active { background: #e4f5e9 !important; color: #08783e !important; }
.runtime-host .runtime-profile-status.status-pending { background: #fff4d9 !important; color: #946500 !important; }
.runtime-host .runtime-profile-status.status-rejected,
.runtime-host .runtime-profile-status.status-inactive,
.runtime-host .runtime-profile-status.status-disabled { background: #fdeaea !important; color: #b33a3a !important; }
.runtime-host .runtime-profile-card > button {
  flex: none;
  min-height: 27px;
  padding: 4px 7px !important;
  border: 1px solid #aacbb5;
  border-radius: 6px;
  background: white;
  color: #176b3a;
  font-size: 8px;
  font-weight: 700;
  cursor: pointer;
}
.runtime-host .runtime-profile-card > button:hover { background: #edf7f0; }
.runtime-host .runtime-profile-card > button:disabled { cursor: wait; opacity: .6; }
.runtime-host .runtime-profile-card > .runtime-active-profile-badge {
  flex: none;
  padding: 4px 7px !important;
  background: var(--theme-primary);
  color: white;
}
.runtime-host .runtime-user-groups > div {
  margin-top: 6px !important;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.runtime-host .runtime-user-groups span {
  padding: 4px 7px !important;
  border-radius: 999px;
  background: #e6f4eb;
  color: #176b3a;
  font-size: 8px;
  font-weight: 700;
}
.runtime-host .runtime-user-groups p {
  margin-top: 5px !important;
  color: #929d96;
  font-size: 8px;
}
.runtime-host .runtime-user-panel .logout-button {
  width: 100%;
  min-height: 34px;
}
.runtime-host .menu-preview-brand > span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 7px; background: #ffffff18; }
.runtime-host .sidebar-toggle:disabled { cursor: not-allowed; opacity: .45; }
.runtime-host .runtime-activation-menu-notice {
  margin: 14px !important;
  padding: 18px 12px !important;
  display: grid;
  justify-items: center;
  gap: 7px;
  border: 1px solid #ffffff24;
  border-radius: 10px;
  background: #ffffff0d;
  color: #fff;
  text-align: center;
}
.runtime-host .runtime-activation-menu-notice > span { font-size: 24px; }
.runtime-host .runtime-activation-menu-notice b { font-size: 10px; }
.runtime-host .runtime-activation-menu-notice small { color: #ffffffa8; font-size: 8px; line-height: 1.8; }
.runtime-host .runtime-activation-waiting {
  width: min(520px, calc(100% - 32px));
  margin: clamp(36px, 10vh, 110px) auto !important;
  padding: 42px 30px !important;
  display: grid;
  justify-items: center;
  gap: 10px;
  border: 1px solid #dfc98d;
  border-radius: 18px;
  background: linear-gradient(145deg, #fffdf7, #fff8e7);
  box-shadow: 0 18px 55px #765b1320;
  color: #62501d;
  text-align: center;
}
.runtime-host .runtime-activation-waiting > span { width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: #fff0be; font-size: 29px; }
.runtime-host .runtime-activation-waiting small { color: #9a8240; font-size: 9px; }
.runtime-host .runtime-activation-waiting h2 { margin: 0 !important; color: #725a13; font-size: 20px; }
.runtime-host .runtime-activation-waiting p { max-width: 410px; margin: 0 !important; color: #81714a; font-size: 11px; line-height: 2; }
.runtime-host .runtime-activation-waiting button { margin-top: 8px !important; padding: 8px 18px !important; border: 1px solid #16834a; border-radius: 8px; background: #07833f; color: white; font-size: 10px; font-weight: 700; cursor: pointer; }
.runtime-host .menu-preview-card > aside {
  height: 100%;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
.runtime-host .rendered-menu-page {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: auto !important;
  overscroll-behavior: contain;
  background: #f1f4f1;
}
.runtime-host .rendered-menu-page > .form-card,
.runtime-host .rendered-menu-page > .list-card,
.runtime-host .rendered-menu-page > .runtime-tabs,
.runtime-host .rendered-menu-page > .runtime-stepper {
  width: 100%;
  height: auto;
  max-width: none;
  min-height: 100%;
  border-radius: 0;
}

/* Compact runtime presentation */
.runtime-host * { margin: 0 !important; padding: 3px !important; }
.runtime-host .program-topbar { padding: 0 3px !important; }
.runtime-host .sidebar-toggle { padding: 3px !important; }

/* Keep the application chrome identical to the form-builder menu preview. */
.runtime-host .program-topbar { padding: 0 17px !important; }
.runtime-host .sidebar-toggle { padding: 8px !important; }
.runtime-host .menu-preview-brand { padding: 0 16px !important; }
.runtime-host .menu-preview-filter {
  margin: 10px 10px 6px !important;
  padding: 0 9px !important;
}
.runtime-host .menu-preview-card nav { padding: 12px 8px !important; }
.runtime-host .menu-preview-item {
  min-height: 39px;
  padding-block: 0 !important;
  padding-inline-end: 3px !important;
}
.runtime-host .menu-preview-item b { padding-inline-end: 10px !important; }
.runtime-host .menu-preview-user { padding: 10px 14px !important; }
.runtime-host .menu-preview-user > span { padding: 0 !important; }
.runtime-host .runtime-tabs > nav { gap: 0; }
.runtime-host .runtime-tabs > nav button {
  width: max-content;
  min-width: max-content;
  flex: 0 0 auto;
  padding: 3px !important;
  white-space: nowrap;
}
.runtime-host .runtime-tabs {
  border: 1px solid #cfdad3 !important;
}
.runtime-host .runtime-tabs-title {
  padding: 7px 10px !important;
  font-size: 14px;
  line-height: 20px;
}
.runtime-host .runtime-tabs-header {
  padding: 3px 5px !important;
}
.runtime-host .runtime-tabs-header .identity-panel {
  grid-template-rows: minmax(24px, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(120px, 1fr);
  gap: 3px;
  padding: 3px !important;
  border-radius: 7px;
  box-shadow: none;
}
.runtime-host .runtime-tabs-header .identity-panel-field {
  min-height: 24px;
  box-sizing: border-box;
  padding: 3px 6px !important;
  gap: 6px;
  border-radius: 5px;
}
.runtime-host .runtime-tabs-header .identity-panel-field b {
  font-size: 8px;
}
.runtime-host .runtime-tabs-header .identity-panel-field span,
.runtime-host .runtime-tabs-header .identity-panel-primary span {
  font-size: 10px;
}
.runtime-host .runtime-tabs > nav {
  display: flex !important;
  flex-wrap: wrap;
  min-height: 24px;
  padding: 3px 7px 0 !important;
  overflow-x: visible;
  border-bottom: 1px solid #789884 !important;
  background: #f7faf8 !important;
  box-shadow: none;
}
.runtime-host .runtime-tabs > nav button {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  min-height: 22px;
  box-sizing: border-box;
  padding: 2px 6px !important;
  font-size: 11px;
  line-height: 16px;
  margin-bottom: -1px !important;
  margin-inline-start: -1px !important;
  color: #52635a !important;
  background: #f1f5f2 !important;
  border: 1px solid #b4c4ba !important;
  border-radius: 0 !important;
}
.runtime-host .runtime-tabs > nav button:first-child { margin-inline-start: 0 !important; }
.runtime-host .runtime-tabs > nav button.active {
  z-index: 1;
  color: #176b3a !important;
  background: #fff !important;
  border-color: #789884 !important;
  border-bottom-color: #fff !important;
}
.runtime-host .runtime-tabs-content { width: 100%; min-width: 0; background: #fff; }
.runtime-host .runtime-tabs-content > .list-card {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.runtime-host .runtime-tabs-content > .list-card > .list-tools,
.runtime-host .runtime-tabs-content > .list-card > .table-scroll,
.runtime-host .runtime-tabs-content > .list-card > .list-footer {
  width: 100% !important;
}
@media (max-width: 700px) {
  .runtime-host .runtime-tabs-header .identity-panel {
    grid-template-rows: none;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
  }
}
.runtime-host .form-card > header,
.runtime-host .menu-page-empty > h2,
.runtime-host .rendered-menu-page > h1,
.runtime-host .rendered-menu-page > h2 {
  display: none !important;
}

.process-history {
  margin: 8px 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--theme-radius) + 4px);
  background: var(--theme-surface);
}
.process-history > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.process-history > header h3,
.process-history > header small { display: block; margin: 0; }
.process-history > header h3 { color: var(--ink); font-size: 15px; }
.process-history > header small { margin-top: 4px; color: var(--muted-ink); }
.process-history button {
  min-height: 34px;
  padding: 6px 13px;
  border: 1px solid var(--theme-primary);
  border-radius: var(--theme-radius);
  background: transparent;
  color: var(--theme-primary);
  font: inherit;
  cursor: pointer;
}
.process-history button:disabled { cursor: wait; opacity: .6; }
.process-history-table-wrap { overflow-x: auto; }
.process-history table {
  width: 100%;
  border-collapse: collapse;
  text-align: start;
  font-size: 12px;
}
.process-history th,
.process-history td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: start;
  vertical-align: top;
}
.process-history th {
  color: var(--muted-ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.process-history tbody tr:last-child td { border-bottom: 0; }
.process-history tbody tr:hover { background: color-mix(in srgb, var(--soft) 65%, transparent); }
.process-history-state {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 110px;
  padding: 20px;
  color: var(--muted-ink);
  text-align: center;
}
.process-history-state.error { color: #9b2727; }

@media (max-width: 760px) {
  .process-history table,
  .process-history tbody,
  .process-history tr,
  .process-history td { display: block; }
  .process-history thead { display: none; }
  .process-history tr { padding: 8px 12px; border-bottom: 1px solid var(--line); }
  .process-history td {
    display: grid;
    grid-template-columns: minmax(95px, 34%) 1fr;
    gap: 10px;
    padding: 6px 0;
    border: 0;
  }
  .process-history td::before {
    content: attr(data-label);
    color: var(--muted-ink);
    font-size: 11px;
    font-weight: 700;
  }
}

/* Keep list controls on one compact row on tablets and small screens. */
@media (max-width: 1024px) {
  .runtime-host .list-tools {
    display: flex !important;
    flex-flow: row nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
  }
  .runtime-host .list-tools label {
    display: block !important;
    flex: 0 0 auto;
    min-width: 0;
    padding: 0 !important;
  }
  .runtime-host .list-tools label > span { display: none; }
  .runtime-host .list-tools .list-search-control {
    flex: 1 1 240px;
    min-width: 180px;
  }
  .runtime-host .list-tools .list-sort-control {
    flex: 0 1 190px;
    width: 190px;
    min-width: 145px;
  }
  .runtime-host .list-tools .list-page-size-control {
    flex: 0 0 66px;
    width: 66px;
  }
  .runtime-host .list-tools input,
  .runtime-host .list-tools select {
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    padding: 4px 7px !important;
  }
  .runtime-host .list-tools .pagination {
    flex: 0 0 auto;
    height: 34px !important;
    gap: 5px !important;
    padding: 0 !important;
  }
  .runtime-host .list-tools .pagination button,
  .runtime-host .list-tools .list-tool-icon {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
  }
}

.runtime-mobile-home .mobile-designer { display: block; min-height: 100%; }
.runtime-mobile-home .mobile-preview { padding: 0; display: block; position: static; }
.runtime-mobile-home .mobile-preview-label, .runtime-mobile-home .mobile-status-bar, .runtime-mobile-home .mobile-home-indicator { display: none; }
.runtime-mobile-home .mobile-phone { width: 100%; max-width: none; height: calc(100dvh - 90px); max-height: none; min-height: 360px; border: 0; border-radius: 0; box-shadow: none; }
.runtime-mobile-home .mobile-studio-field:empty, .runtime-mobile-home .mobile-preview-element:has(> .mobile-studio-field:empty) { display: none; }
.runtime-mobile-home .mobile-bottom-nav { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

/* Assigned mobile pages use the full viewport without the desktop shell. */
.runtime-host .menu-preview-card.mobile-page-only { display: block; padding: 0 !important; gap: 0; }
.runtime-host .menu-preview-card.mobile-page-only > .rendered-menu-page { width: 100%; height: 100%; padding: 0 !important; overflow: hidden !important; }
.mobile-page-only .runtime-mobile-home,
.mobile-page-only .runtime-mobile-home .mobile-designer,
.mobile-page-only .runtime-mobile-home .mobile-preview { height: 100%; min-height: 0; }
.mobile-page-only .runtime-mobile-home .mobile-phone { height: 100dvh; min-height: 0; }
.mobile-page-only .runtime-mobile-home,
.mobile-page-only .runtime-mobile-home .mobile-designer,
.mobile-page-only .runtime-mobile-home .mobile-preview,
.mobile-page-only .runtime-mobile-home .mobile-phone { padding: 0 !important; }
.runtime-host .mobile-page-only .mobile-bottom-nav { flex: 0 0 auto; padding: 8px 4px max(8px, env(safe-area-inset-bottom)) !important; }

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/runtime-map.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
.runtime-map-page { position: relative; height: 100%; min-height: 560px; overflow: hidden; background: #eef2f0; color: var(--ink, #17211b); }
.runtime-map-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; width: 100%; height: 100%; min-height: 0; direction: ltr; }
.runtime-map-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; direction: rtl; }
.runtime-openlayers-map { position: absolute; inset: 0; min-width: 0; min-height: 480px; padding: 0 !important; }
.runtime-openlayers-map .ol-viewport { padding: 0 !important; }
.runtime-map-floating-tools, .runtime-map-view-tools, .runtime-map-basemap, .runtime-map-status { position: absolute; z-index: 5; border: 1px solid #d9e2dd; border-radius: 9px; background: #fffffff2; box-shadow: 0 4px 18px #183a2a18; }
.runtime-map-floating-tools { top: 12px; right: 12px; display: flex; gap: 4px; padding: 5px !important; }
.runtime-map-floating-tools button, .runtime-map-view-tools button, .runtime-map-properties > button { min-height: 34px; padding: 6px 11px !important; border: 0; border-radius: 6px; background: transparent; color: var(--ink, #17211b); cursor: pointer; }
.runtime-map-floating-tools button:hover, .runtime-map-view-tools button:hover { background: #edf3ef; }
.runtime-map-floating-tools button.active, .runtime-map-floating-tools button.primary { background: var(--theme-primary, #08783e); color: #fff; }
.runtime-map-floating-tools button:disabled, .runtime-map-properties button:disabled { opacity: .4; cursor: default; }
.runtime-map-floating-tools > span { width: 1px; margin: 3px !important; background: #d8e0db; }
.runtime-map-view-tools { top: 12px; left: 46px; display: grid; gap: 2px; padding: 4px !important; }
.runtime-map-view-tools button { width: 34px; padding: 4px !important; font-size: 19px; }
.runtime-map-basemap { right: 12px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 5px 9px !important; font-size: 10px; }
.runtime-map-basemap select { min-width: 130px; padding: 5px !important; border: 0; background: transparent; color: var(--ink, #17211b); }
.runtime-map-status { left: 50%; bottom: 12px; width: min(470px, 50%); display: flex; justify-content: space-between; gap: 15px; transform: translateX(-50%); padding: 7px 14px !important; color: var(--ink, #17211b); direction: ltr; font-size: 10px; }
.runtime-map-status small { min-width: 0; overflow: hidden; color: var(--muted-ink, #53675b); direction: rtl; text-overflow: ellipsis; white-space: nowrap; }
.runtime-map-dock { display: grid; grid-template-columns: minmax(0, 1fr) 86px; min-width: 0; border-inline-start: 1px solid #d9e2dd; background: #fff; direction: ltr; }
.runtime-map-rail { grid-column: 2; display: flex; flex-direction: column; gap: 3px; padding: 8px 5px !important; border-inline-start: 1px solid #e1e7e3; background: #f1f5f3; direction: rtl; }
.runtime-map-rail button { width: 100%; min-height: 72px; display: grid; place-items: center; align-content: center; gap: 4px; padding: 7px 3px !important; border: 0; border-radius: 6px; background: transparent; color: #17211b; cursor: pointer; }
.runtime-map-rail button:hover, .runtime-map-rail button.active { background: #fff; color: var(--theme-primary, #08783e); box-shadow: 0 2px 9px #183a2a12; }
.runtime-map-rail button b { font-size: 24px; line-height: 1; }
.runtime-map-rail button span { font-size: 10px; font-weight: 700; }
.runtime-map-layers, .runtime-map-properties { grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; overflow: auto; padding: 15px !important; background: #fff; color: var(--ink, #17211b); direction: rtl; }
.runtime-map-layers header, .runtime-map-properties header { min-height: 38px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e4e9e6; }
.runtime-map-layers h3, .runtime-map-properties h3 { margin: 0; color: var(--ink, #17211b); font-size: 16px; }
.runtime-map-layers header button { border: 0; background: transparent; color: var(--theme-primary, #08783e); font-size: 22px; cursor: pointer; }
.runtime-map-layers > div { display: grid; gap: 3px; }
.runtime-map-layers > div label { min-height: 42px; display: grid; grid-template-columns: 12px auto 16px 24px minmax(0, 1fr); align-items: center; gap: 6px; padding: 4px 5px !important; border-radius: 6px; }
.runtime-map-layers > div label:hover, .runtime-map-layers > div label.active { background: color-mix(in srgb, var(--theme-primary, #08783e) 9%, white); }
.runtime-map-layer-grip { color: #8a9790; font-size: 18px; }
.runtime-map-style-swatch { width: 15px; height: 15px; padding: 0 !important; border: 2px solid; border-radius: 1px !important; cursor: pointer; }
.runtime-map-table-button { width: 24px; height: 24px; padding: 0 !important; border: 0; background: transparent; color: var(--theme-primary, #08783e); font-size: 18px; cursor: pointer; }
.runtime-map-layers > div button { min-width: 0; display: grid; gap: 2px; padding: 2px !important; border: 0; background: transparent; color: var(--ink, #17211b); text-align: start; cursor: pointer; }
.runtime-map-layers small, .runtime-map-properties small { color: var(--muted-ink, #53675b); font-size: 9px; }
.runtime-map-layers footer { margin-top: auto; padding-top: 10px !important; border-top: 1px solid #e4e9e6; }
.runtime-map-properties textarea { width: 100%; min-height: 260px; resize: vertical; padding: 9px !important; border: 1px solid #d8e1db; background: #fbfcfb; color: var(--ink, #17211b); -webkit-text-fill-color: var(--ink, #17211b); font: 12px/1.6 monospace; }
.runtime-map-properties > button { border: 1px solid #c9d7ce; background: #f3f7f4; }
.runtime-map-properties dl { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 8px 0 0; font-size: 11px; }
.runtime-map-properties dd { margin: 0; font-weight: 700; }
.runtime-map-feature-inspector { min-width: 0; font-size: 12px; }
.runtime-map-feature-inspector table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.runtime-map-feature-inspector th, .runtime-map-feature-inspector td { padding: 8px; border: 1px solid #d8e1db; vertical-align: top; overflow-wrap: anywhere; text-align: start; }
.runtime-map-feature-inspector th { width: 40%; background: #f3f7f4; }
.runtime-map-feature-inspector pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.6 monospace; }
.runtime-map-properties summary { cursor: pointer; padding: 8px 0; }
.runtime-map-loading { display: grid; min-height: 400px; place-items: center; }
.runtime-symbology-manager { position: absolute; z-index: 20; top: 58px; left: 44px; width: min(310px, calc(100% - 88px)); max-height: calc(100% - 85px); display: grid; gap: 13px; overflow: auto; padding: 14px !important; border: 1px solid #d5ded8; background: #fff; color: #17211b; box-shadow: 0 12px 35px #17211b35; }
.runtime-symbology-manager > header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px !important; border-bottom: 1px solid #e2e8e4; }
.runtime-symbology-manager > header button { border: 0; background: transparent; color: #dc2626; font-size: 26px; cursor: pointer; }
.runtime-symbology-manager > label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; font-size: 12px; }
.runtime-symbology-manager > label input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--theme-primary, #08783e); }
.runtime-symbology-manager input[type="color"] { width: 48px; height: 27px; padding: 1px !important; border: 1px solid #cbd6cf; background: #fff; }
.runtime-symbology-manager select, .runtime-symbology-manager fieldset input:not([type="color"]) { min-height: 32px; padding: 5px 8px !important; border: 1px solid #cbd6cf; background: #fff; color: #17211b; }
.runtime-symbology-manager fieldset { min-width: 0; display: grid; gap: 9px; padding: 10px !important; border: 1px solid #dce4df; }
.runtime-symbology-category > div:first-of-type { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
.runtime-symbology-manager fieldset button { border: 0; background: var(--theme-primary, #08783e); color: #fff; cursor: pointer; }
.runtime-symbology-labels > label { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 7px; font-size: 11px; }
.runtime-symbology-labels > small { color: #66756c; font-size: 10px; line-height: 1.8; }
.runtime-symbology-labels > div { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.runtime-symbology-labels > div label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 5px; font-size: 10px; }
.runtime-symbology-labels input[type="number"] { width: 60px; }
.runtime-symbology-groups { max-height: 180px; display: grid; gap: 4px; overflow: auto; }
.runtime-symbology-groups label { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.runtime-symbology-groups input[type="color"] { width: 32px; height: 24px; }
.runtime-symbology-manager > footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.runtime-symbology-manager > footer button { min-height: 36px; padding: 7px 18px !important; border: 0; background: var(--theme-primary, #08783e); color: #fff; cursor: pointer; }
.runtime-symbology-preview { width: 36px; height: 36px; display: block; border: 4px solid; }
.runtime-map-page.table-open .runtime-map-layout { height: calc(100% - 300px); }
.runtime-map-attribute-table { position: absolute; z-index: 15; right: 0; bottom: 0; left: 0; height: 300px; display: grid; grid-template-rows: 48px minmax(0, 1fr); border-top: 3px solid #66726b; background: #fff; color: #17211b; direction: rtl; }
.runtime-map-attribute-table > header { display: flex; align-items: center; gap: 14px; padding: 8px 15px !important; border-bottom: 1px solid #ccd7d0; }
.runtime-map-attribute-table > header b { color: var(--theme-primary, #08783e); }
.runtime-map-attribute-table > header span { color: #66756c; font-size: 10px; }
.runtime-map-attribute-table > header button { margin-inline-start: auto; border: 0; background: transparent; color: #dc2626; font-size: 23px; cursor: pointer; }
.runtime-map-attribute-table > div { min-height: 0; overflow: auto; direction: rtl; }
.runtime-map-attribute-table table { min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 10px; white-space: nowrap; }
.runtime-map-attribute-table th, .runtime-map-attribute-table td { min-width: 110px; max-width: 260px; padding: 6px 9px !important; overflow: hidden; border-inline-start: 1px solid #9eb4a8; border-bottom: 1px solid #ccd8d1; text-align: center; text-overflow: ellipsis; }
.runtime-map-attribute-table th:first-child, .runtime-map-attribute-table td:first-child { min-width: 65px; width: 65px; }
.runtime-map-attribute-table th:nth-child(2), .runtime-map-attribute-table td:nth-child(2) { min-width: 55px; width: 55px; }
.runtime-map-attribute-table thead { position: sticky; z-index: 2; top: 0; }
.runtime-map-attribute-table thead tr:first-child th { background: #cbe5e2; color: #173a38; font-weight: 800; }
.runtime-map-attribute-table .filter-row th { top: 29px; padding: 4px !important; background: #f8faf9; }
.runtime-map-attribute-table .filter-row input { width: 100%; min-height: 28px; padding: 3px 6px !important; border: 1px solid #bdccc4; background: #fff; color: #17211b; }
.runtime-map-attribute-table td button, .runtime-map-attribute-table .filter-row button { border: 0; background: transparent; color: #075f59; font-size: 17px; cursor: pointer; }
.runtime-map-attribute-table tbody tr:hover td { background: #edf7f5; }
@media (max-width: 1050px) {
  .runtime-map-layout { grid-template-columns: minmax(0, 1fr) 310px; }
  .runtime-map-dock { grid-template-columns: minmax(0, 1fr) 72px; }
  .runtime-map-floating-tools { max-width: calc(100% - 24px); overflow-x: auto; }
  .runtime-map-floating-tools button { white-space: nowrap; }
}
@media (max-width: 760px) {
  .runtime-map-layout { grid-template-columns: 1fr; }
  .runtime-map-dock { position: absolute; z-index: 10; inset: 0 0 0 auto; width: min(330px, 88vw); box-shadow: -10px 0 30px #17211b25; }
  .runtime-map-status { display: none; }
  .runtime-map-floating-tools { right: 8px; left: 8px; }
}

/*!**************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/mine-map.css ***!
  \**************************************************************************************************************************************************************************************************************************************************************/
.mine-map-page { display: grid; grid-template-rows: minmax(0, 1fr); height: 100%; min-height: 600px; overflow: hidden; background: #eef3f0; color: var(--ink); direction: rtl; }
.mine-map-summary { position: relative; overflow: hidden; padding: 5px 10px !important; border-bottom: 1px solid var(--line); background: var(--theme-surface); }
.mine-map-title { display: grid; align-content: start; gap: 7px; }
.mine-map-title select { width: 100%; min-height: 38px; padding: 6px 10px !important; border: 1px solid var(--line); background: #fff; color: var(--ink); font-size: 14px; font-weight: 800; }
.mine-map-title span { color: var(--muted-ink); font-size: 9px; }
.mine-map-properties { display: grid; grid-template-columns: repeat(var(--mine-summary-columns, 4), minmax(100px, 1fr)); gap: 3px 6px; align-content: start; }
.mine-map-properties > span, .mine-map-card p span { min-width: 0; height: 25px; display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 2px 7px !important; border: 1px solid color-mix(in srgb, var(--line) 70%, transparent); border-radius: 5px; background: color-mix(in srgb, var(--theme-background) 48%, white); }
.mine-map-properties small, .mine-map-card p small { overflow: hidden; color: var(--muted-ink); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.mine-map-properties b, .mine-map-card p b { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.mine-map-summary > nav { display: flex; align-items: start; gap: 5px; }
.mine-map-summary button, .mine-map-related button, .mine-map-card nav button { width: 32px; height: 32px; padding: 0 !important; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--theme-primary); font-size: 18px; cursor: pointer; }
.mine-map-summary button:disabled { opacity: .4; }
.mine-map-status { position: absolute; left: 14px; bottom: 3px; color: var(--muted-ink); font-size: 8px; }
.mine-map-body { display: grid; grid-template-columns: minmax(0, 1fr) var(--mine-sidebar-width, 390px); min-height: 0; direction: ltr; }
.mine-map-canvas { min-width: 0; min-height: 420px; padding: 0 !important; direction: rtl; }
.mine-map-canvas .ol-viewport { padding: 0 !important; }
.mine-map-related { display: grid; grid-template-rows: var(--mine-zone-size, 25fr) 5px var(--mine-trench-size, 37.5fr) 5px var(--mine-borehole-size, 37.5fr); min-height: 0; overflow: hidden; padding: 0 !important; border-inline-start: 1px solid var(--line); background: #f7faf8; color: var(--ink); direction: rtl; }
.mine-map-related > section { min-height: 0; display: grid; grid-template-rows: 42px minmax(0, 1fr); overflow: hidden; border-bottom: 1px solid var(--line); }
.mine-map-related > section > header { display: flex; align-items: center; gap: 5px; padding: 4px 8px !important; border-bottom: 1px solid color-mix(in srgb, var(--theme-primary) 28%, var(--line)); background: color-mix(in srgb, var(--theme-primary) 13%, #eef5f1); }
.mine-map-related > section > header b { font-size: 12px; }
.mine-map-related > section > header span { min-width: 23px; padding: 3px 6px !important; border-radius: 12px; background: var(--soft); color: var(--theme-primary); font-size: 9px; text-align: center; }
.mine-map-related > section > header button { margin: 0 0 0 auto !important; width: 24px; height: 24px; box-sizing: border-box; padding: 0 !important; line-height: 1; }
.runtime-host .mine-map-related .mine-map-add { display: grid; place-items: center; border-color: color-mix(in srgb, var(--theme-primary) 45%, var(--line)); border-radius: 5px; background: color-mix(in srgb, var(--theme-primary) 7%, white); }
.runtime-host .mine-map-related .mine-map-add svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.runtime-host .mine-map-related .mine-map-add:hover { background: var(--theme-primary); color: white; }
.mine-map-related > section > div { display: block; overflow: auto; padding: 0 !important; }
.mine-map-panel-splitter { position: relative; z-index: 2; height: 5px; padding: 0 !important; border-top: 1px solid #cbd7d0; border-bottom: 1px solid #cbd7d0; background: #edf2ef; cursor: row-resize; touch-action: none; }
.mine-map-panel-splitter:hover, .mine-map-panel-splitter:active { background: color-mix(in srgb, var(--theme-primary) 15%, #edf2ef); }
.mine-map-panel-splitter span { position: absolute; top: 1px; left: 50%; width: 34px; height: 1px; padding: 0 !important; transform: translateX(-50%); border-top: 1px solid #85958c; border-bottom: 1px solid #85958c; }
.runtime-host .mine-map-card { position: relative; height: var(--mine-row-height, 20px); min-height: var(--mine-row-height, 20px); max-height: var(--mine-row-height, 20px); display: flex; align-items: center; padding: 2px 8px !important; border: 0; border-bottom: 1px solid #dbe4de; border-radius: 0; background: #fff; cursor: pointer; }
.runtime-host .mine-map-card * { margin: 0 !important; padding: 0 !important; }
.mine-map-card:hover { background: #f3f8f5; }
.mine-map-card.selected { background: color-mix(in srgb, var(--theme-primary) 8%, white); box-shadow: inset -3px 0 var(--theme-primary); }
.mine-map-row-identity { min-width: 0; flex: 1; display: grid; grid-template-columns: minmax(80px, 1fr) minmax(60px, .7fr) auto; align-items: center; gap: 7px; }
.mine-map-row-identity b, .mine-map-row-identity span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mine-map-row-identity b { color: var(--ink); font-size: 10px; line-height: 16px; }
.mine-map-row-identity span { color: var(--muted-ink); font-size: 9px; line-height: 16px; direction: ltr; text-align: right; }
.runtime-host .mine-map-row-identity small { min-width: 18px; padding: 0 4px !important; border-radius: 8px; background: var(--soft); color: var(--theme-primary); font-size: 8px; line-height: 16px; text-align: center; }
.mine-map-card nav { display: flex; flex: none; gap: 2px; margin-inline-start: 7px !important; }
.runtime-host .mine-map-card nav button { width: 16px; height: 16px; display: grid; place-items: center; border: 0; background: transparent; color: #48675a; }
.mine-map-card nav button:hover { background: #e4efe9; color: var(--theme-primary); }
.runtime-host .mine-map-card nav svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mine-map-modal-backdrop { position: fixed; z-index: 1200; inset: 0; display: grid; place-items: center; padding: 20px !important; background: #12251c99; backdrop-filter: blur(3px); }
.mine-map-modal { --mine-modal-max-height: min(92dvh, calc(100dvh - 40px)); width: min(1000px, 96vw); max-height: var(--mine-modal-max-height); display: grid; grid-template-rows: auto minmax(0, 1fr); overflow: hidden; border-radius: 14px; background: var(--theme-surface); box-shadow: 0 24px 80px #10221866; }
.mine-map-modal > header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px !important; border-bottom: 1px solid var(--line); }
.mine-map-modal > header button { border: 0; background: transparent; color: #c62d2d; font-size: 28px; cursor: pointer; }
.mine-map-modal > header .mine-map-modal-close { width: 26px; height: 26px; box-sizing: border-box; display: grid; place-items: center; padding: 0 !important; border: 1px solid #e2b5b5; border-radius: 6px; background: #fff7f7; line-height: 1; }
.mine-map-modal-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.mine-map-modal-close:hover { border-color: #c94a4a; background: #feecec; }
.mine-map-modal > .mine-map-modal-body { min-height: 0; max-height: calc(var(--mine-modal-max-height) - 50px); overflow-x: hidden; overflow-y: auto !important; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 12px !important; }
.mine-map-modal .form-card { max-width: none; box-shadow: none; }
.mine-map-modal .runtime-tabs-title { display: none; }
@media (max-width: 1050px) { .mine-map-body { grid-template-columns: minmax(0, 1fr) 330px; } .mine-map-properties { grid-template-columns: repeat(3, minmax(90px, 1fr)); } }
@media (max-width: 760px) { .mine-map-page { height: auto; overflow: auto; grid-template-rows: auto auto; } .mine-map-properties { grid-template-columns: repeat(2, 1fr); } .mine-map-body { grid-template-columns: 1fr; grid-template-rows: 55vh 700px; } }

.runtime-host .mine-map-card nav button { width: auto; min-width: 16px; padding: 0 3px !important; font-size: 9px; white-space: nowrap; }
.mine-map-summary nav button { width: auto; padding: 0 8px !important; font-size: 11px; }

.mine-map-summary nav button svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Hierarchical mine navigator */
.mine-map-related.mine-map-tree { display: block; overflow: auto; padding: 10px !important; background: color-mix(in srgb, var(--theme-background) 68%, white); direction: rtl; }
.mine-map-tree .mine-tree-root { min-height: auto; display: block; overflow: visible; border: 0; }
.mine-map-tree .mine-tree-root-row,
.mine-map-tree .mine-tree-zone > header,
.mine-map-tree .mine-tree-group > header { position: relative; display: flex; align-items: center; gap: 7px; }
.mine-map-tree .mine-tree-root-row { min-height: 54px; padding: 7px 9px !important; border: 1px solid color-mix(in srgb, var(--theme-primary) 34%, var(--line)); border-radius: 10px; background: var(--theme-surface); box-shadow: 0 5px 16px color-mix(in srgb, var(--theme-primary) 8%, transparent); }
.mine-tree-label { min-width: 0; flex: 1; display: grid; gap: 2px; }
.mine-tree-label small { color: var(--muted-ink); font-size: 8px; font-weight: 650; }
.mine-tree-label b { overflow: hidden; color: var(--ink); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mine-tree-kind { width: 27px; height: 27px; flex: none; display: grid; place-items: center; border-radius: 7px; background: #edf2ef; color: #52665a; font: 800 9px/1 ui-monospace, monospace; }
.mine-tree-kind.mine { background: color-mix(in srgb, var(--theme-primary) 16%, white); color: var(--theme-primary); }
.mine-tree-kind.zone { background: color-mix(in srgb, #7c3aed 12%, white); color: #6d28d9; }
.mine-tree-count { min-width: 23px; padding: 3px 6px !important; border-radius: 12px; background: var(--soft); color: var(--theme-primary); font-size: 9px; text-align: center; }
.mine-map-tree .mine-tree-toggle { width: 22px; height: 22px; flex: none; display: grid; place-items: center; padding: 0 !important; border: 0; border-radius: 5px; background: transparent; color: #6c7b72; font-size: 15px; line-height: 1; }
.mine-map-tree .mine-tree-toggle:hover { background: #e8f0eb; color: var(--theme-primary); }
.mine-tree-root-row > nav { display: flex; flex: none; gap: 3px; }
.runtime-host .mine-tree-root-row > nav button { width: 27px; min-width: 27px; height: 27px; display: grid; place-items: center; margin: 0 !important; padding: 0 !important; }
.runtime-host .mine-tree-root-row > nav button svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mine-tree-children { position: relative; margin: 0 18px 0 0 !important; padding: 9px 16px 0 0 !important; }
.mine-tree-children::before { content: ""; position: absolute; top: 0; right: 0; bottom: 18px; width: 1px; background: color-mix(in srgb, var(--theme-primary) 35%, var(--line)); }
.mine-tree-zone { position: relative; margin-bottom: 8px; }
.mine-tree-zone::before { content: ""; position: absolute; z-index: 0; top: 24px; right: -16px; width: 16px; height: 1px; background: color-mix(in srgb, var(--theme-primary) 35%, var(--line)); }
.mine-map-tree .mine-tree-zone > header { z-index: 1; min-height: 48px; padding: 6px 8px !important; border: 1px solid var(--line); border-radius: 9px; background: var(--theme-surface); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.mine-map-tree .mine-tree-zone > header:hover { border-color: color-mix(in srgb, var(--theme-primary) 45%, var(--line)); }
.mine-map-tree .mine-tree-zone > header.selected { border-color: color-mix(in srgb, var(--theme-primary) 62%, var(--line)); background: color-mix(in srgb, var(--theme-primary) 5%, white); box-shadow: inset -3px 0 var(--theme-primary); }
.mine-tree-zone > header nav { display: flex; flex: none; gap: 1px; }
.runtime-host .mine-tree-zone > header nav button { width: 20px; min-width: 20px; height: 20px; display: grid; place-items: center; padding: 0 !important; border: 0; background: transparent; color: #557064; }
.runtime-host .mine-tree-zone > header nav svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mine-tree-zone-children { position: relative; margin: 0 20px 0 0 !important; padding: 8px 14px 0 0 !important; }
.mine-tree-zone-children::before { content: ""; position: absolute; top: 0; right: 0; bottom: 17px; width: 1px; background: #cfdad3; }
.mine-tree-group { position: relative; margin-bottom: 7px; overflow: hidden; border: 1px solid #d9e2dc; border-radius: 8px; background: var(--theme-surface); }
.mine-tree-group::before { content: ""; position: absolute; top: 20px; right: -15px; width: 15px; height: 1px; background: #cfdad3; }
.mine-map-tree .mine-tree-group > header { min-height: 39px; padding: 5px 7px !important; border: 0; border-bottom: 1px solid #e1e8e3; background: #f7faf8; }
.mine-tree-group > header > .mine-tree-kind { width: 24px; height: 24px; border-radius: 6px; }
.mine-tree-group.trenches > header > .mine-tree-kind { background: #fff0f0; color: #c24141; }
.mine-tree-group.boreholes > header > .mine-tree-kind { background: #e9f7fa; color: #087e96; }
.mine-tree-group.block-boxes > header > .mine-tree-kind { background: #fff4df; color: #b76b05; font-size: 7px; }
.mine-tree-group > header > b { min-width: 0; flex: 1; font-size: 10px; }
.mine-tree-group > header > span:not(.mine-tree-kind) { min-width: 21px; padding: 2px 5px !important; border-radius: 10px; background: white; color: var(--muted-ink); font-size: 8px; text-align: center; }
.mine-map-tree .mine-tree-group > header .mine-map-add { width: 23px; height: 23px; margin: 0 !important; }
.mine-tree-group > div { max-height: 190px; overflow: auto; padding: 0 !important; }
.runtime-host .mine-map-tree .mine-map-card { padding-inline: 8px !important; }
.mine-tree-empty { display: block; padding: 10px !important; color: var(--muted-ink); font-size: 9px; text-align: center; }
.mine-tree-empty.root-empty { margin-top: 8px; border: 1px dashed var(--line); border-radius: 8px; background: var(--theme-surface); }
.mine-tree-status { display: block; margin-top: 8px; padding: 7px 9px !important; border-radius: 7px; background: var(--theme-surface); color: var(--muted-ink); font-size: 8px; text-align: center; }
@media (max-width: 760px) {
  .mine-map-page {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    grid-template-rows: minmax(0, 1fr);
  }
  .mine-map-body {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(180px, 42dvh) minmax(0, 1fr);
  }
  .mine-map-canvas { min-height: 0; }
  .mine-map-related.mine-map-tree {
    height: 100%;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .mine-tree-children { margin-right: 8px !important; }
  .mine-tree-zone-children { margin-right: 8px !important; }
}

/*!***********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/tank-daily-report.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************/
.tank-daily-page { min-height: 100%; display: flex; flex-direction: column; overflow: hidden; background: #f3f7f5; color: var(--ink); direction: rtl; }
.tank-daily-header { display: grid; grid-template-columns: minmax(220px,1.4fr) repeat(5,minmax(110px,.7fr)) auto; gap: 8px; align-items: end; padding: 10px 14px !important; border-bottom: 1px solid var(--line); background: #fff; }
.tank-daily-header label, .tank-run-editor label { min-width: 0; display: grid; gap: 3px; }
.tank-daily-header label span, .tank-run-editor label span { color: var(--muted-ink); font-size: 9px; font-weight: 700; }
.tank-daily-header input, .tank-daily-header select, .tank-run-editor input { min-width: 0; height: 30px; padding: 3px 7px !important; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--ink); font: inherit; font-size: 11px; }
.tank-daily-heading { display: grid; gap: 4px; }.tank-daily-heading h2 { margin: 0; font-size: 15px; }.tank-daily-heading select { width: 100%; }
.tank-daily-header nav { display: flex; gap: 4px; }.tank-daily-header button, .tank-daily-tabs button, .tank-run-table header button, .tank-run-editor button { min-height: 30px; padding: 4px 9px !important; border: 1px solid var(--line); border-radius: 5px; background: #fff; color: var(--theme-primary); cursor: pointer; white-space: nowrap; }
.tank-daily-page .primary { border-color: var(--theme-primary); background: var(--theme-primary); color: white; }
.tank-daily-message { margin: 0; padding: 4px 14px !important; background: #fff8db; color: #6f5710; font-size: 10px; }
.runtime-host .tank-daily-tabs { width: 100%; height: 38px; min-height: 38px; max-height: 38px; flex: 0 0 38px; display: flex; align-items: stretch; gap: 0; overflow: hidden; padding: 0 14px !important; border-bottom: 1px solid var(--line); background: #fff; }.runtime-host .tank-daily-tabs button { width: auto !important; height: 37px; min-height: 37px; max-height: 37px; flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px !important; border: 0; border-radius: 0; background: transparent; color: var(--muted-ink); line-height: 1; text-align: center; }.runtime-host .tank-daily-tabs button:hover { background: color-mix(in srgb, var(--theme-primary) 6%, white); color: var(--theme-primary); }.runtime-host .tank-daily-tabs button.active { background: color-mix(in srgb, var(--theme-primary) 10%, white); color: var(--theme-primary); box-shadow: inset 0 -2px var(--theme-primary); }
.tank-run-workspace { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1fr) 390px; direction: ltr; }.tank-run-table,.tank-run-editor { min-height: 0; direction: rtl; background: #fff; }
.tank-run-table { overflow: auto; padding: 10px !important; }.tank-run-table header { display:flex; align-items:center; justify-content:space-between; margin-bottom:7px; }.tank-run-table table { width:100%; border-collapse:collapse; font-size:11px; }.tank-run-table th,.tank-run-table td { padding:7px 8px !important; border:1px solid var(--line); text-align:right; }.tank-run-table th { background:#e8f1ed; }.tank-run-table tbody tr { cursor:pointer; }.tank-run-table tbody tr:hover,.tank-run-table tbody tr.selected { background:#edf8f2; }
.tank-run-editor { overflow:auto; border-inline-end:1px solid var(--line); padding:8px !important; }.tank-run-editor > header { position:sticky; top:-8px; z-index:2; display:flex; justify-content:space-between; align-items:center; padding:5px !important; background:#fff; border-bottom:1px solid var(--line); }.tank-run-editor > header button { width:28px; height:28px; padding:0 !important; }.tank-run-editor fieldset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:7px 0; padding:7px !important; border:1px solid var(--line); border-radius:6px; }.tank-run-editor legend { padding:0 5px !important; color:var(--theme-primary); font-size:10px; font-weight:800; }.tank-run-editor footer { position:sticky; bottom:-8px; padding:7px !important; background:#fff; border-top:1px solid var(--line); }.tank-run-editor footer button { width:100%; }
.tank-daily-placeholder,.tank-daily-section-placeholder { flex:1; display:grid; place-content:center; gap:8px; text-align:center; color:var(--muted-ink); }.tank-daily-placeholder b,.tank-daily-section-placeholder b { color:var(--ink); font-size:16px; }
.tank-aggregate,.tank-materials { margin:12px; padding:12px !important; border:1px solid var(--line); border-radius:7px; background:#fff; overflow:auto; }.tank-aggregate header,.tank-materials header { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }.tank-aggregate table { width:100%; border-collapse:collapse; font-size:11px; }.tank-aggregate th,.tank-aggregate td { padding:7px 8px !important; border:1px solid var(--line); text-align:right; }.tank-aggregate th { background:#e8f1ed; }.tank-aggregate tbody tr { cursor:pointer; }.tank-aggregate tbody tr:hover { background:#edf8f2; }.tank-materials header span { color:var(--muted-ink); font-size:10px; }.tank-materials > div { display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:8px; }.tank-materials label { display:grid; gap:4px; }.tank-materials label span { color:var(--muted-ink); font-size:9px; }.tank-materials input { height:32px; padding:4px 8px !important; border:1px solid var(--line); border-radius:5px; }.tank-materials > button { float:left; margin-top:10px; min-height:30px; padding:4px 12px !important; border:0; border-radius:5px; }
@media(max-width:1100px){.tank-daily-header{grid-template-columns:repeat(3,1fr)}.tank-daily-heading{grid-column:1/-1}.tank-run-workspace{grid-template-columns:minmax(0,1fr) 340px}}

/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/runtime-readonly.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
/* Read-only is visually muted, but values remain readable and copyable.
   Attribute-scoped overrides also win over required, hover and theme colors. */
:root {
  --readonly-stone-bg: #f5f5f4;
  --readonly-stone-border: #d6d3d1;
  --readonly-stone-text: #57534e;
  --readonly-stone-muted: #78716c;
  --readonly-stone-selected: #78716c;
}
:is(.form-grid, .elements-table-cell-control, .table-array-input)
  :is(input[readonly], input:disabled, textarea[readonly], textarea:disabled, select:disabled):not([type="hidden"]):not(.feature-field-control input):not(.lookup-input-row input),
.lookup-field[data-readonly="true"] .lookup-combobox,
.jalali-date-trigger:disabled,
.boolean-choice[data-readonly="true"] > div,
.radio-group-element[data-readonly="true"] .radio-group-option,
.feature-field[data-readonly="true"] .feature-field-control,
.feature-field[data-readonly="true"] .feature-field-control > :is(input, button),
.files-tiny[data-readonly="true"] .files-tiny-grid,
.runtime-cad-field[data-readonly="true"],
.runtime-cad-field[data-readonly="true"] > button {
  background: var(--readonly-stone-bg) !important;
  border-color: var(--readonly-stone-border) !important;
  color: var(--readonly-stone-text) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: default;
}
.lookup-field[data-readonly="true"] .lookup-input-row :is(input, button),
.boolean-choice[data-readonly="true"] button,
.radio-group-element[data-readonly="true"] label {
  background: transparent !important;
  color: var(--readonly-stone-text) !important;
  border-color: var(--readonly-stone-border) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: default;
}
.boolean-choice[data-readonly="true"] button.active {
  background: var(--readonly-stone-selected) !important;
  color: #fff !important;
}
.boolean-choice[data-readonly="true"] button i {
  border-color: var(--readonly-stone-muted);
}
.boolean-choice[data-readonly="true"] button.active i {
  border-color: currentColor;
}
.lookup-field[data-readonly="true"] .lookup-chip {
  background: #e7e5e4;
  border-color: var(--readonly-stone-border);
  color: var(--readonly-stone-text);
}
.radio-group-element[data-readonly="true"] input,
.form-grid input[type="checkbox"]:disabled {
  accent-color: var(--readonly-stone-selected);
}
.boolean-choice[data-readonly="true"] > :is(legend, small),
.radio-group-element[data-readonly="true"] > legend,
.lookup-field[data-readonly="true"] > .lookup-label {
  color: var(--readonly-stone-muted);
}
/* Retain a neutral keyboard indicator for controls that allow inspection. */
.form-grid :is(input[readonly], textarea[readonly]):focus-visible,
.lookup-field[data-readonly="true"] .lookup-combobox:focus-within {
  outline: 2px solid #a8a29e;
  outline-offset: 2px;
}
.form-grid label.checkbox:has(input:disabled),
.table-array-input[data-readonly="true"] .table-array-heading > button:disabled,
.table-array-input[data-readonly="true"] .table-array-delete-button:disabled {
  background: var(--readonly-stone-bg) !important;
  border-color: var(--readonly-stone-border) !important;
  color: var(--readonly-stone-text) !important;
  box-shadow: none !important;
  opacity: 1;
  cursor: default;
}
.form-grid label.checkbox input:disabled + span::before {
  border-color: var(--readonly-stone-border);
  background: var(--readonly-stone-bg);
  box-shadow: none;
}
.form-grid label.checkbox input:disabled:checked + span::before {
  border-color: var(--readonly-stone-selected);
  background: var(--readonly-stone-selected);
  color: #fff;
}

/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[15].oneOf[10].use[3]!./app/runtime-mobile.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* Mobile forms retain readable typography instead of the compact desktop rules. */
.runtime-host.runtime-mobile-view { width: 100%; min-width: 0; max-width: 100%; font-size: 16px; line-height: 1.6; }
.runtime-host.runtime-mobile-view .form-grid { row-gap: 6px; column-gap: 0; }
.runtime-host.runtime-mobile-view .form-grid > div { padding: 2px !important; }
.runtime-host.runtime-mobile-view .form-grid :is(label, .lookup-field, .lookup-label, label > span:first-child) { padding: 0 !important; }
.runtime-host.runtime-mobile-view .form-grid :is(label, .lookup-label),
.runtime-host.runtime-mobile-view .form-grid label > span:first-child,
.runtime-host.runtime-mobile-view .elements-table-cell-title { font-size: 14px !important; line-height: 1.5 !important; }
.runtime-host.runtime-mobile-view .form-grid :is(label, .lookup-field) { gap: 4px; }
.runtime-host.runtime-mobile-view :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=range], [type=color], .jalali-date-required-control), select, textarea) {
  font-size: 16px !important;
  line-height: 1.5 !important;
  min-height: 38px !important;
  height: auto !important;
  padding: 6px 10px !important;
}
.runtime-host.runtime-mobile-view :is(input, textarea)::placeholder { font-size: 16px !important; line-height: 1.5; }
.runtime-host.runtime-mobile-view textarea { min-height: 80px !important; }
.runtime-host.runtime-mobile-view :is(.runtime-input-wrap, .runtime-password-wrap, .lookup-combobox, .lookup-input-row) { min-height: 38px !important; height: auto !important; padding: 0 !important; }
.runtime-host.runtime-mobile-view .lookup-input-row > button { width: 32px; min-height: 38px; padding: 0 !important; }
.runtime-host.runtime-mobile-view .jalali-date-trigger { min-height: 38px !important; height: auto !important; font-size: 16px !important; line-height: 1.5 !important; padding: 6px 10px !important; }
.runtime-host.runtime-mobile-view button { font-size: 16px !important; line-height: 1.5 !important; min-height: 44px; }
.runtime-host.runtime-mobile-view :is(input[type=checkbox], input[type=radio]) { width: 22px; height: 22px; min-height: 22px; flex-shrink: 0; }
.runtime-host.runtime-mobile-view .runtime-tabs > nav button { min-height: 36px; min-width: 0; padding: 5px 10px !important; font-size: 13px !important; line-height: 1.5 !important; white-space: normal; }
.runtime-host.runtime-mobile-view :is(.form-card footer, .mobile-step-modal-footer, .page-modal-window footer) button { min-height: 44px; font-size: 16px !important; }
.runtime-host.runtime-mobile-view :is(.page-modal-window > header b, .mobile-step-modal-header h2, .runtime-tabs-title) { font-size: 14px !important; line-height: 1.6 !important; }
.runtime-host.runtime-mobile-view :is(.page-modal-window > header button, .mobile-step-modal-close) { width: 44px; height: 44px; min-height: 44px; font-size: 24px !important; padding: 0 !important; }
.runtime-host.runtime-mobile-view :is(.form-card small, .lookup-chip, .mobile-accordion-summary, .mobile-rich-copy p) { font-size: 14px !important; line-height: 1.5 !important; }
.runtime-host.runtime-mobile-view .mobile-bottom-nav small { font-size: 13px !important; line-height: 1.5; }

/* Lookup and calendar popups are mounted on body, outside the mobile host. */
body:has(.runtime-host.runtime-mobile-view) > :is(.lookup-options, .jalali-calendar) { font-size: 16px !important; line-height: 1.5; }
body:has(.runtime-host.runtime-mobile-view) > .lookup-options :is(button, span) { min-height: 44px; padding: 10px 12px; font-size: 16px !important; line-height: 1.5; }
body:has(.runtime-host.runtime-mobile-view) > .jalali-calendar :is(button, select) { min-height: 40px; font-size: 15px; }


/* Keep home pages inside the phone; desktop shell spacing must not replace page padding. */
.runtime-host.runtime-mobile-view :is(.runtime-mobile-home, .mobile-designer, .mobile-preview, .mobile-phone, .mobile-screen, .mobile-page-elements, .mobile-preview-element) {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}
.runtime-host.runtime-mobile-view .mobile-screen {
  width: 100%;
  padding: var(--mobile-page-padding, 14px) !important;
}
.runtime-host.runtime-mobile-view .mobile-page-elements { width: 100%; padding: 0 !important; }
.runtime-host.runtime-mobile-view .mobile-preview-element { padding: 0 !important; }
.runtime-host.runtime-mobile-view .mobile-rich { max-width: 100%; box-sizing: border-box; }
.runtime-host.runtime-mobile-view :is(.mobile-rich-copy, .mobile-header-copy, .mobile-inline-action) { min-width: 0; overflow-wrap: anywhere; }
.runtime-host.runtime-mobile-view .mobile-rich-notice .mobile-inline-action { flex-shrink: 1; flex-wrap: wrap; }