:root {
      --bg: #f3f6fc;
      --panel: #ffffff;
      --panel-soft: #f7f9ff;
      --border: #e2e8f5;
      --ink: #1f2633;
      --muted: #6e7687;
      --accent: #0f6cbd;
      --accent-soft: rgba(15, 108, 189, 0.12);
      --danger: #ff2000;
      --task-status-success: #34c759;
      --success: var(--task-status-success);
      --radius: 3px;
      --client-pill-width: 110px;
      --column-vertical-gap: 25px;
      --column-header-content-gap: 12px;
      --left-action-rail-left: 25px;
      --left-action-rail-width: 75px;
      --left-action-rail-bottom: 25px;
      --employee-rail-gap: 25px;
      --employee-rail-menu-left: calc(var(--left-action-rail-left) + var(--left-action-rail-width) + var(--employee-rail-gap));
      --employee-rail-menu-width: 200px;
      --employee-rail-secondary-left: calc(var(--employee-rail-menu-left) + var(--employee-rail-menu-width) + var(--employee-rail-gap));
      --main-layout-bottom-padding: 12px;
      --app-border-width: 1px;
      --layout-col-1: 420px;
      --layout-col-2: 470px;
      --layout-col-3: 510px;
      --layout-gap: 50px;
      --layout-left-padding: 150px;
      --card-width: 370px;
      --column-card-inset: 50px;
      --shadow: 0 14px 34px rgba(18, 40, 70, 0.08);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      font-family: "Raleway", "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
      color: var(--ink);
      background: #f6f7f4;
      height: 100vh;
      overflow: hidden;
    }

    .app {
      width: 100vw;
      height: 100vh;
      margin: 0;
      background: var(--panel);
      border: 1px solid #203220;
      border-radius: 0;
      box-shadow: none;
      overflow: hidden;
      position: relative;
      min-height: 0;
    }

    .topbar {
      height: 56px;
      border-bottom: 1px solid #162515;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px 0 28px;
      background: #203220;
    }
    .left-action-rail {
      position: absolute;
      left: var(--left-action-rail-left);
      bottom: var(--left-action-rail-bottom);
      width: var(--left-action-rail-width);
      height: 375px;
      border-radius: 3px;
      background: #203220;
      z-index: 10;
      pointer-events: none;
    }
    .left-action-rail-glyph {
      position: absolute;
      left: 50%;
      width: 25px;
      height: 25px;
      transform: translateX(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid #203220;
      box-sizing: border-box;
      background: transparent;
      appearance: none;
      pointer-events: auto;
      color: #ffffff;
      transition: color 140ms ease;
      cursor: pointer;
    }
    .left-action-rail-glyph--bell {
      bottom: 125px;
    }
    .left-action-rail-glyph--add {
      bottom: 175px;
    }
    .left-action-rail-glyph--reporting {
      bottom: 225px;
    }
    .left-action-rail-glyph--tasks {
      bottom: 275px;
    }
    .left-action-rail-glyph--clients {
      bottom: 325px;
    }
    .left-action-rail-glyph--help {
      bottom: 75px;
    }
    .left-action-rail-glyph--brass {
      bottom: 25px;
    }
    .left-action-rail-glyph svg {
      display: block;
      width: 20px;
      height: 20px;
    }
    .left-action-rail-glyph svg path,
    .left-action-rail-glyph svg polygon,
    .left-action-rail-glyph svg rect:not([fill="none"]) {
      fill: currentColor !important;
    }
    .left-action-rail-glyph:hover {
      color: #e1c16e;
    }
    .left-action-rail-glyph.toggle-active {
      color: #e1c16e;
    }
    .left-action-rail-glyph[aria-disabled="true"] {
      cursor: default;
    }
    .left-action-rail-icon {
      display: block;
      width: 20px;
      height: 20px;
      background: currentColor;
      box-sizing: border-box;
    }
    .left-action-rail-icon--clients {
      -webkit-mask: url("./Kunder.svg?v=20260522-kunder-1") center / contain no-repeat;
      mask: url("./Kunder.svg?v=20260522-kunder-1") center / contain no-repeat;
    }
    .left-action-rail-icon--tasks {
      -webkit-mask: url("./Opgaver.svg?v=20260522-opgaver-1") center / contain no-repeat;
      mask: url("./Opgaver.svg?v=20260522-opgaver-1") center / contain no-repeat;
    }
    .left-action-rail-icon--reporting {
      -webkit-mask: url("./Rapportering.svg?v=20260522-rapportering-1") center / contain no-repeat;
      mask: url("./Rapportering.svg?v=20260522-rapportering-1") center / contain no-repeat;
    }
    .left-action-rail-icon--add {
      -webkit-mask: url("./Tilføj.svg?v=20260522-tilfoej-1") center / contain no-repeat;
      mask: url("./Tilføj.svg?v=20260522-tilfoej-1") center / contain no-repeat;
    }
    .left-action-rail-icon--bell {
      -webkit-mask: url("./Notifikationer.svg?v=20260522-notifikationer-1") center / contain no-repeat;
      mask: url("./Notifikationer.svg?v=20260522-notifikationer-1") center / contain no-repeat;
    }
    .left-action-rail-icon--help {
      -webkit-mask: url("./Hjælp.svg?v=20260522-support-1") center / contain no-repeat;
      mask: url("./Hjælp.svg?v=20260522-support-1") center / contain no-repeat;
    }
    .left-action-rail-icon--menu {
      -webkit-mask: url("./Menu.svg?v=20260522-menu-1") center / contain no-repeat;
      mask: url("./Menu.svg?v=20260522-menu-1") center / contain no-repeat;
    }
    .left-action-rail-glyph--bell.has-unread {
      color: #c62828;
    }
    .left-action-rail-glyph--bell.has-unread .left-action-rail-icon--bell {
      -webkit-mask: url("./Notifikationer-unread.svg?v=20260522-notifikationer-unread-1") center / contain no-repeat;
      mask: url("./Notifikationer-unread.svg?v=20260522-notifikationer-unread-1") center / contain no-repeat;
    }
    .app.employee-rail-menu-active #mainLayout {
      filter: blur(10px);
    }
    #employeeMenuBackdrop {
      position: absolute;
      inset: 56px 0 0 100px;
      z-index: 1080;
      background: rgba(246, 247, 244, 0.08);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 280ms ease,
        visibility 0ms linear 280ms;
    }
    #employeeMenuBackdrop.is-active {
      opacity: 1;
      visibility: visible;
      pointer-events: auto;
      transition:
        opacity 280ms ease,
        visibility 0ms linear 0ms;
    }
    #employeeRailMenu,
    #employeeRailAddMenu {
      position: absolute;
      left: var(--employee-rail-menu-left);
      z-index: 1110;
      padding: 25px 25px;
      border-radius: 3px 0 0 3px;
      background: #203220;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      display: grid;
      align-content: start;
      justify-items: start;
      gap: 25px;
    }
    #employeeRailMenu {
      bottom: 25px;
      width: 200px;
      height: 125px;
    }
    #employeeRailAddMenu {
      bottom: 175px;
      width: 200px;
      height: auto;
    }
    #employeeRailAddTaskPanel {
      position: absolute;
      left: var(--employee-rail-secondary-left);
      bottom: 175px;
      z-index: 1110;
      width: 450px;
      min-height: 325px;
      height: auto;
      padding: 25px;
      border-radius: 3px;
      background: #d9d9d9;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      display: grid;
      row-gap: 25px;
      align-content: start;
      justify-items: start;
      color: #000001;
      box-sizing: border-box;
    }
    #employeeRailAddTaskPanel.hidden {
      display: none !important;
    }
    .employee-rail-add-task-row {
      display: grid;
      grid-template-columns: 100px 25px 275px;
      width: 400px;
      height: 25px;
      align-items: stretch;
    }
    .employee-rail-add-task-repeat-row {
      grid-template-columns: 100px 25px 25px 25px 100px 25px 100px;
    }
    .employee-rail-add-task-mode-hidden {
      display: none !important;
    }
    .employee-rail-add-task-label {
      grid-column: 1;
      width: 100px;
      height: 25px;
      margin: 0;
      color: #000001;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
    }
    .employee-rail-add-task-field {
      grid-column: 3;
      width: 275px;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 8px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      box-sizing: border-box;
    }
    .employee-rail-add-task-field:focus,
    .employee-rail-add-task-field:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    .employee-rail-add-task-field.is-invalid,
    .employee-rail-add-task-date-input.is-invalid {
      box-shadow: inset 0 0 0 1px var(--danger);
    }
    .employee-rail-add-task-repeat-icon {
      grid-column: 3;
      width: 25px;
      height: 25px;
      padding: 0;
      border: 0;
      background: transparent;
      appearance: none;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #000001;
      fill: none;
      transition: color 160ms ease, fill 160ms ease;
      cursor: pointer;
    }
    .employee-rail-add-task-repeat-icon.is-active {
      color: #e1c16e;
      fill: #e1c16e;
    }
    .employee-rail-add-task-repeat-icon:focus,
    .employee-rail-add-task-repeat-icon:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    .employee-rail-add-task-repeat-icon svg {
      display: block;
      width: 15px;
      height: 15px;
    }
    .employee-rail-add-task-repeat-icon path {
      fill: transparent;
      stroke: currentColor;
      transition: fill 160ms ease, stroke 160ms ease;
    }
    .employee-rail-add-task-repeat-icon.is-active path {
      fill: #e1c16e;
      stroke: #e1c16e;
    }
    .employee-rail-add-task-repeat-icon.is-icon-popping svg {
      animation: taskCompleteIconPop 260ms cubic-bezier(0.18, 1.35, 0.32, 1);
    }
    .employee-rail-add-task-repeat-field {
      width: 100px;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 8px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      box-sizing: border-box;
    }
    .employee-rail-add-task-repeat-field.is-inactive {
      background: #d9d9d9;
      background-color: #d9d9d9;
    }
    .employee-rail-add-task-repeat-field:disabled {
      opacity: 1;
      cursor: default;
    }
    .employee-rail-add-task-repeat-field:focus,
    .employee-rail-add-task-repeat-field:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    .employee-rail-add-task-repeat-frequency {
      grid-column: 5;
    }
    .employee-rail-add-task-repeat-day {
      grid-column: 7;
    }
    .employee-rail-add-task-date-input {
      grid-column: 3;
      width: 275px;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 8px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      background-color: #ffffff;
      color: #000000;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      box-sizing: border-box;
      cursor: default;
      appearance: none;
      -webkit-appearance: none;
    }
    .employee-rail-add-task-date-input:focus,
    .employee-rail-add-task-date-input:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    .employee-rail-add-task-date-input.is-invalid:focus,
    .employee-rail-add-task-date-input.is-invalid:focus-visible,
    .employee-rail-add-task-field.is-invalid:focus,
    .employee-rail-add-task-field.is-invalid:focus-visible {
      box-shadow: inset 0 0 0 1px var(--danger);
    }
    .employee-rail-add-task-description-row {
      height: 75px;
      align-items: stretch;
    }
    .employee-rail-add-task-description-field {
      grid-column: 3;
      width: 275px;
      height: 75px;
      min-height: 75px;
      max-height: 75px;
      padding: 0 8px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      box-sizing: border-box;
      resize: none;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .employee-rail-add-task-description-field:focus,
    .employee-rail-add-task-description-field:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    .employee-rail-add-task-support-description-row {
      height: 175px;
      align-items: stretch;
    }
    .employee-rail-add-task-support-description-field {
      grid-column: 3;
      width: 275px;
      height: 175px;
      min-height: 175px;
      max-height: 175px;
      padding: 0 8px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      box-sizing: border-box;
      resize: none;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    .employee-rail-add-task-support-description-field:focus,
    .employee-rail-add-task-support-description-field:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    .employee-rail-add-task-support-description-field.is-invalid,
    .employee-rail-add-task-support-description-field.is-invalid:focus,
    .employee-rail-add-task-support-description-field.is-invalid:focus-visible {
      box-shadow: inset 0 0 0 1px var(--danger);
    }
    .employee-rail-add-task-process-description-row {
      height: 175px;
      align-items: stretch;
    }
    .employee-rail-add-task-process-rich-field {
      grid-column: 3;
      display: grid;
      grid-template-rows: 25px 150px;
      width: 275px;
      height: 175px;
      background: #ffffff;
      border: 0;
      border-radius: 3px;
      overflow: hidden;
      box-sizing: border-box;
    }
    .employee-rail-add-task-process-rich-field .rich-text-toolbar {
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      width: 275px;
      height: 25px;
      padding: 0 25px;
      box-sizing: border-box;
      background: #ffffff;
    }
    .employee-rail-add-task-process-rich-field .rich-text-toolbar::after {
      content: "";
      position: absolute;
      left: 25px;
      right: 25px;
      bottom: 0;
      height: 1px;
      background: rgba(0, 0, 0, 0.18);
      pointer-events: none;
    }
    .employee-rail-add-task-process-rich-field .rich-text-toolbar .btn {
      min-width: 25px;
      height: 25px;
      padding: 0 4px;
      border: 0;
      line-height: 25px;
      box-sizing: border-box;
    }
    .employee-rail-add-task-process-rich-field .rich-text-editor {
      width: 275px;
      height: 150px;
      min-height: 150px;
      padding: 6px;
      border: 0;
      border-radius: 0;
      overflow-x: hidden;
      overflow-y: auto;
      background: #ffffff;
      color: #000000;
      font-size: 12px;
      font-weight: 400;
      box-sizing: border-box;
      overscroll-behavior: contain;
    }
    .employee-rail-add-task-process-rich-field .rich-text-editor:focus,
    .employee-rail-add-task-process-rich-field .rich-text-editor:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    .employee-rail-add-task-subtasks {
      display: grid;
      grid-auto-rows: 25px;
      row-gap: 25px;
      width: 400px;
      align-content: start;
      justify-items: start;
    }
    .employee-rail-add-task-subtask-add {
      grid-column: 3;
      width: 275px;
      height: 25px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #000001;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      cursor: pointer;
    }
    .employee-rail-add-task-subtask-add:focus,
    .employee-rail-add-task-subtask-add:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    .employee-rail-add-task-subtask-field {
      grid-column: 3;
      width: 275px;
      height: 25px;
      display: grid;
      grid-template-columns: 1fr 25px;
      align-items: center;
      border-radius: 3px;
      background: #ffffff;
      overflow: hidden;
      box-sizing: border-box;
    }
    .employee-rail-add-task-subtask-input {
      width: 100%;
      height: 25px;
      min-width: 0;
      padding: 0 8px;
      border: 0;
      background: transparent;
      color: #000000;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      box-sizing: border-box;
    }
    .employee-rail-add-task-subtask-input:focus,
    .employee-rail-add-task-subtask-input:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    .employee-rail-add-task-action-row {
      width: 400px;
      height: 25px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
    .system-standard-save-button,
    .system-standard-delete-button,
    .system-standard-statistics-button,
    .system-standard-send-test-button {
      width: 25px;
      height: 25px;
      min-width: 25px;
      max-width: 25px;
      min-height: 25px;
      max-height: 25px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #000001;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transform-style: preserve-3d;
      transition: color 160ms ease, opacity 160ms ease;
    }
    .system-standard-save-button:hover {
      color: #e1c16e;
    }
    .system-standard-statistics-button:hover {
      color: #e1c16e;
    }
    .system-standard-send-test-button:hover {
      color: #e1c16e;
    }
    .system-standard-send-test-button.is-confirming {
      color: #ffb400;
      transition: none;
    }
    .system-standard-send-test-button.is-sent {
      color: var(--task-status-success);
      transition: none;
    }
    .system-standard-send-test-button.is-sent-fading {
      color: #000001;
      transition: color 2000ms ease;
    }
    .system-standard-save-button.is-save-success {
      color: var(--task-status-success);
      transition: none;
    }
    .system-standard-save-button.is-save-fading {
      color: #000001;
      transition: color 2000ms ease;
    }
    .system-standard-delete-button.is-confirming {
      color: var(--danger);
    }
    .system-standard-save-button:disabled,
    .system-standard-delete-button:disabled,
    .system-standard-statistics-button:disabled,
    .system-standard-send-test-button:disabled {
      cursor: wait;
      opacity: 0.7;
    }
    .system-standard-save-button svg,
    .system-standard-delete-button svg,
    .system-standard-statistics-button svg,
    .system-standard-send-test-button svg {
      display: block;
      width: 15px;
      height: auto;
      max-height: 15px;
      overflow: visible;
      transform-origin: center;
    }
    .system-standard-save-button.is-save-success svg,
    .system-standard-delete-button.is-confirming svg {
      animation: systemStandardIconSingleFlip 520ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .system-standard-send-test-button.is-icon-flipping svg {
      animation: employeeRailIconActionFlip 520ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .system-standard-save-button.is-save-error,
    .system-standard-delete-button.is-delete-error,
    .system-standard-send-test-button.is-send-error {
      color: var(--danger);
      animation: systemStandardSaveButtonErrorFlash 380ms linear;
    }
    .system-standard-save-button.is-save-error svg,
    .system-standard-delete-button.is-delete-error svg,
    .system-standard-send-test-button.is-send-error svg {
      animation: systemStandardSaveButtonShake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
    }
    @keyframes systemStandardSaveButtonShake {
      0%, 100% {
        transform: translateX(0);
      }
      18%, 54% {
        transform: translateX(-3px);
      }
      36%, 72% {
        transform: translateX(3px);
      }
    }
    @keyframes systemStandardIconSingleFlip {
      0% {
        transform: rotateY(0deg);
      }
      100% {
        transform: rotateY(360deg);
      }
    }
    @keyframes systemStandardSaveButtonErrorFlash {
      0%, 100% {
        color: #000001;
      }
      22%, 78% {
        color: var(--danger);
      }
    }
    .system-standard-save-button:focus,
    .system-standard-save-button:focus-visible,
    .system-standard-delete-button:focus,
    .system-standard-delete-button:focus-visible,
    .system-standard-statistics-button:focus,
    .system-standard-statistics-button:focus-visible,
    .system-standard-send-test-button:focus,
    .system-standard-send-test-button:focus-visible {
      outline: 0;
      box-shadow: none;
    }
    #employeeRailMenu.employee-rail-menu--admin {
      height: 475px;
    }
    #employeeRailSupportMenu {
      position: absolute;
      left: var(--employee-rail-menu-left);
      bottom: 75px;
      z-index: 1110;
      width: 200px;
      height: 300px;
      padding: 25px;
      border-radius: 3px;
      background: #203220;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      display: grid;
      grid-template-rows: repeat(10, 25px);
      align-content: start;
      justify-items: start;
      color: #ffffff;
      box-sizing: border-box;
    }
    #employeeRailSupportMenu.hidden {
      display: none !important;
    }
    .employee-rail-support-text,
    .employee-rail-support-link {
      width: 150px;
      height: 25px;
      margin: 0;
      color: #ffffff;
      line-height: 25px;
      text-align: left;
      text-decoration: none;
      box-sizing: border-box;
      white-space: nowrap;
    }
    .employee-rail-support-title {
      font-size: 16px;
      font-weight: 400;
      color: #e1c16e;
    }
    .employee-rail-support-strong {
      font-size: 12px;
      font-weight: 600;
    }
    .employee-rail-support-regular {
      font-size: 10px;
      font-weight: 400;
    }
    .employee-rail-support-hours {
      display: grid;
      grid-template-columns: 75px 75px;
      width: 150px;
      height: 25px;
    }
    .employee-rail-support-link:hover,
    .employee-rail-support-link:focus {
      color: #e1c16e;
      outline: 0;
    }
    .employee-rail-menu-divider {
      width: 100%;
      height: 25px;
      border: 0;
      margin: 0;
      padding: 0;
      background: transparent;
      justify-self: stretch;
      align-self: stretch;
      display: flex;
      align-items: center;
    }
    .employee-rail-menu-divider::before {
      content: "";
      width: 100%;
      height: 1px;
      background: rgba(255, 255, 255, 0.88);
    }
    #employeeRailPasswordPanel {
      --employee-rail-label-width: 185px;
      --employee-rail-field-width: 225px;
      --employee-rail-grid-gap: 25px;
      position: absolute;
      left: var(--employee-rail-secondary-left);
      bottom: 25px;
      z-index: 1110;
      width: 460px;
      height: 175px;
      padding: 25px;
      border: 0;
      border-radius: 3px;
      background: #f2f2f2;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      color: #000000;
      font-size: 16px;
      display: grid;
      align-content: start;
      gap: 25px;
    }
    #employeeRailPasswordPanel .employee-rail-password-row,
    #employeeRailPasswordPanel .employee-rail-field-action-row,
    #employeeRailPasswordPanel .employee-rail-settings-action-row {
      grid-template-columns: var(--employee-rail-label-width) var(--employee-rail-field-width);
      column-gap: 0;
    }
    #employeeRailPasswordPanel .employee-rail-menu-action.employee-rail-password-label,
    #employeeRailPasswordPanel .employee-rail-menu-action.employee-rail-password-label:hover,
    #employeeRailPasswordPanel .employee-rail-menu-action.employee-rail-password-label:focus,
    #employeeRailPasswordPanel .employee-rail-menu-action.employee-rail-password-label:focus-visible,
    #employeeRailPasswordPanel .employee-rail-menu-action.employee-rail-password-label.toggle-active {
      width: var(--employee-rail-label-width);
      height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      justify-content: flex-start;
      text-align: left;
    }
    #employeeRailPasswordPanel .employee-rail-password-input {
      width: var(--employee-rail-field-width);
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 0 0 10px;
      border: 0;
      background: #ffffff;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      box-sizing: border-box;
    }
    #employeeRailPasswordPanel .employee-rail-settings-action-row {
      grid-column: auto;
      grid-row: auto;
      align-self: auto;
      justify-self: stretch;
      width: 100%;
      min-height: 25px;
    }
    #employeeRailSystemPanel {
      --employee-rail-label-width: 100px;
      --employee-rail-grid-gap: 25px;
      position: absolute;
      left: var(--employee-rail-secondary-left);
      bottom: 25px;
      z-index: 1110;
      width: auto;
      height: 475px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      color: #000000;
      font-size: 14px;
      display: block;
      box-sizing: border-box;
      overflow: visible;
    }
    #employeeRailSystemPanel.employee-rail-secondary-panel--employees {
      height: 475px;
      min-height: 475px;
    }
    #employeeRailSystemPanel.employee-rail-secondary-panel--emails {
      height: 475px;
      min-height: 475px;
    }
    #employeeRailSystemPanel.employee-rail-secondary-panel--tasks {
      height: 475px;
      min-height: 475px;
    }
    .employee-rail-settings-panel {
      position: relative;
      display: grid;
      grid-template-columns: 200px 725px;
      grid-template-rows: 1fr 25px;
      column-gap: 0;
      row-gap: 25px;
      height: 475px;
      min-height: 475px;
      width: 925px;
      min-width: 0;
      border-radius: 3px;
      background: #f2f2f2;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      color: #000000;
      overflow: hidden;
    }
    .employee-rail-settings-tabs {
      position: relative;
      left: auto;
      top: auto;
      bottom: auto;
      grid-column: 1;
      grid-row: 1 / 3;
      display: grid;
      grid-auto-rows: 25px;
      align-content: start;
      row-gap: 25px;
      width: 200px;
      height: 475px;
      padding: 25px;
      border-bottom: 0;
      border-radius: 3px 0 0 3px;
      background: #203220;
      box-sizing: border-box;
    }
    .employee-rail-settings-tabs::after {
      content: none;
      pointer-events: none;
    }
    .employee-rail-settings-tab {
      position: relative;
      width: 150px;
      height: 25px;
      padding: 0;
      border: 0;
      border-radius: 3px;
      background: transparent;
      color: #ffffff;
      font: inherit;
      font-size: 16px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      text-indent: 0;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      overflow: hidden;
      transition:
        color 140ms ease,
        font-weight 140ms ease;
    }
    .employee-rail-settings-tab-label {
      display: block;
      height: 25px;
      line-height: 25px;
      transform: translateX(0);
      transition: transform 220ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .employee-rail-settings-tab::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 5px;
      height: 25px;
      border-radius: 3px;
      background: #e1c16e;
      opacity: 0;
      transform: translateY(-50%) scaleY(0.35) scaleX(0.72);
      transform-origin: center;
      pointer-events: none;
      transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .employee-rail-settings-tab:hover {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-settings-tab.is-selected {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-settings-tab.is-selected .employee-rail-settings-tab-label {
      transform: translateX(15px);
    }
    .employee-rail-settings-tab.is-selected.is-entering .employee-rail-settings-tab-label {
      animation: employeeRailSettingsTabTextIn 220ms cubic-bezier(0.2, 0.85, 0.22, 1) both;
    }
    .employee-rail-settings-tab.is-selected::before {
      opacity: 1;
      transform: translateY(-50%) scaleY(1) scaleX(1);
    }
    .employee-rail-settings-tab.is-selected.is-entering::before {
      animation: employeeRailFirstMenuPillPop 260ms cubic-bezier(0.18, 1.35, 0.32, 1);
    }
    .employee-rail-settings-tab.is-leaving .employee-rail-settings-tab-label {
      animation: employeeRailSettingsTabTextOut 220ms cubic-bezier(0.2, 0.85, 0.22, 1) both;
    }
    .employee-rail-settings-tab.is-leaving::before {
      animation: employeeRailSettingsPillOut 220ms cubic-bezier(0.2, 0.85, 0.22, 1) both;
    }
    @keyframes employeeRailSettingsTabTextIn {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(15px);
      }
    }
    @keyframes employeeRailSettingsTabTextOut {
      0% {
        transform: translateX(15px);
      }
      100% {
        transform: translateX(0);
      }
    }
    @keyframes employeeRailSettingsPillOut {
      0% {
        opacity: 1;
        transform: translateY(-50%) scaleY(1) scaleX(1);
      }
      100% {
        opacity: 0;
        transform: translateY(-50%) scaleY(0.35) scaleX(0.72);
      }
    }
    .employee-rail-settings-fields {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 25px;
      width: 100%;
    }
    .employee-rail-settings-field-row {
      display: grid;
      grid-template-columns: 100px 75px;
      column-gap: 25px;
      width: 200px;
      height: 25px;
      align-items: stretch;
    }
    .employee-rail-settings-label {
      display: block;
      width: 100px;
      height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
    }
    .employee-rail-settings-input {
      width: 75px;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 6px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      box-sizing: border-box;
    }
    .employee-rail-settings-logo-row {
      display: grid;
      grid-template-columns: 100px auto;
      column-gap: 25px;
      width: 100%;
      height: 25px;
      align-items: center;
    }
    .employee-rail-settings-logo-controls {
      display: flex;
      align-items: center;
      gap: 25px;
      height: 25px;
      min-width: 0;
    }
    .employee-rail-settings-upload-button {
      display: inline-grid;
      align-items: center;
      justify-items: start;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      margin: 0;
      padding: 0;
      border: 0;
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      color: #000000;
      font: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 12px;
      cursor: pointer;
      box-sizing: border-box;
    }
    .employee-rail-settings-upload-button-text {
      display: block;
      line-height: 12px;
    }
    .employee-rail-file-input {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: 0;
      padding: 0;
      border: 0;
      opacity: 0;
      pointer-events: none;
    }
    .employee-rail-settings-logo-preview {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex: 0 0 200px;
      width: 200px;
      height: 25px;
      max-width: 200px;
      overflow: hidden;
    }
    .employee-rail-settings-logo-preview.is-empty {
      display: none;
    }
    .employee-rail-settings-logo-preview img {
      display: block;
      max-width: 200px;
      max-height: 25px;
      object-fit: contain;
    }
    .employee-rail-settings-content {
      grid-column: 2;
      grid-row: 1;
      width: 725px;
      min-width: 0;
      min-height: 25px;
    }
    .employee-rail-settings-action-row {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      grid-column: 2;
      grid-row: 2;
      align-self: end;
      justify-self: stretch;
      width: 725px;
      height: 25px;
    }
    .employee-rail-settings-action-row--empty {
      visibility: hidden;
    }
    .employee-rail-settings-action-row .employee-rail-inline-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 25px;
      width: auto;
      height: 25px;
      min-height: 25px;
      grid-column: auto;
      justify-self: auto;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="settings"] {
      grid-template-columns: 200px 450px;
      grid-template-rows: 400px 50px;
      width: 650px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="settings"] .employee-rail-settings-content,
    .employee-rail-settings-panel[data-employee-rail-shared-panel="settings"] .employee-rail-settings-action-row {
      width: 450px;
      box-sizing: border-box;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="settings"] .employee-rail-settings-content {
      padding: 25px 25px 0;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="settings"] .employee-rail-settings-action-row {
      height: 50px;
      padding: 0 25px 25px;
      align-items: flex-start;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="employees"] {
      grid-template-columns: 200px 450px;
      grid-template-rows: 400px 50px;
      width: 650px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="employees"][data-employee-rail-employee-section="settings"] {
      grid-template-columns: 200px 900px;
      width: 1100px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="employees"] .employee-rail-settings-content,
    .employee-rail-settings-panel[data-employee-rail-shared-panel="employees"] .employee-rail-settings-action-row {
      width: 450px;
      box-sizing: border-box;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="employees"][data-employee-rail-employee-section="settings"] .employee-rail-settings-content,
    .employee-rail-settings-panel[data-employee-rail-shared-panel="employees"][data-employee-rail-employee-section="settings"] .employee-rail-settings-action-row {
      width: 900px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="employees"] .employee-rail-settings-content {
      padding: 25px 25px 0;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="employees"] .employee-rail-settings-action-row {
      height: 50px;
      padding: 0 25px 25px;
      align-items: flex-start;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="teams"] {
      grid-template-columns: 200px 450px;
      grid-template-rows: 400px 50px;
      width: 650px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="teams"] .employee-rail-settings-content,
    .employee-rail-settings-panel[data-employee-rail-shared-panel="teams"] .employee-rail-settings-action-row {
      width: 450px;
      box-sizing: border-box;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="teams"] .employee-rail-settings-content {
      padding: 25px 25px 0;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="teams"] .employee-rail-settings-action-row {
      height: 50px;
      padding: 0 25px 25px;
      align-items: flex-start;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="emails"] {
      grid-template-columns: 200px 900px;
      grid-template-rows: 475px;
      width: 1100px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="emails"].employee-rail-emails-panel--signature-settings {
      grid-template-columns: 200px 900px;
      width: 1100px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="emails"].employee-rail-emails-panel--logs-diagnostics {
      grid-template-columns: 200px 900px;
      width: 1100px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="emails"].employee-rail-emails-panel--preview {
      grid-template-columns: 200px 900px;
      width: 1100px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="emails"] .employee-rail-settings-content {
      width: 900px;
      height: 475px;
      box-sizing: border-box;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="emails"].employee-rail-emails-panel--signature-settings .employee-rail-settings-content {
      width: 900px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="emails"].employee-rail-emails-panel--logs-diagnostics .employee-rail-settings-content {
      width: 900px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="emails"].employee-rail-emails-panel--preview .employee-rail-settings-content {
      width: 900px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="tasks"] {
      grid-template-columns: 200px 450px;
      grid-template-rows: 475px;
      width: 650px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="tasks"].employee-rail-tasks-panel--payment {
      grid-template-columns: 200px 900px;
      width: 1100px;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="tasks"] .employee-rail-settings-content {
      width: 450px;
      height: 475px;
      box-sizing: border-box;
    }
    .employee-rail-settings-panel[data-employee-rail-shared-panel="tasks"].employee-rail-tasks-panel--payment .employee-rail-settings-content {
      width: 900px;
    }
    .employee-rail-employees-tabs {
      grid-template-rows: minmax(0, 375px) 25px;
      grid-auto-rows: unset;
      overflow: visible;
      row-gap: 25px;
    }
    .employee-rail-employees-tabs::after {
      right: 0;
    }
    .employee-rail-settings-tab--muted {
      color: rgba(255, 255, 255, 0.62);
    }
    .employee-rail-employees-add-row {
      grid-row: 2;
      align-self: end;
      justify-self: start;
      width: 150px;
      height: 25px;
    }
    .employee-rail-soft-action.employee-rail-employees-add-button {
      width: 150px;
      min-width: 150px;
      max-width: 150px;
      height: 25px;
      line-height: 25px;
      text-align: right;
      white-space: nowrap;
      color: #ffffff;
    }
    .employee-rail-employees-add-button > span {
      display: block;
      width: 100%;
      text-align: right;
    }
    .employee-rail-soft-action.employee-rail-employees-add-button:hover,
    .employee-rail-soft-action.employee-rail-employees-add-button.is-selected {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-employees-list {
      display: grid;
      grid-auto-rows: auto;
      align-content: start;
      row-gap: 25px;
      width: 150px;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .employee-rail-employees-tabs .employee-rail-settings-tab {
      width: 150px;
      max-width: 150px;
    }
    .employee-rail-employees-tabs .employee-rail-settings-tab-label {
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .employee-rail-employees-tabs .employee-rail-settings-tab.is-selected .employee-rail-settings-tab-label {
      max-width: 135px;
    }
    .employee-rail-employees-tabs .employee-rail-settings-tab.is-leaving .employee-rail-settings-tab-label {
      max-width: 135px;
    }
    .employee-rail-teams-tabs {
      grid-template-rows: minmax(0, 375px) 25px;
      grid-auto-rows: unset;
      overflow: visible;
      row-gap: 25px;
    }
    .employee-rail-teams-tabs::after {
      right: 0;
    }
    .employee-rail-teams-add-row {
      grid-row: 2;
      align-self: end;
      justify-self: start;
      width: 150px;
      height: 25px;
    }
    .employee-rail-soft-action.employee-rail-teams-add-button {
      width: 150px;
      min-width: 150px;
      max-width: 150px;
      height: 25px;
      line-height: 25px;
      text-align: right;
      white-space: nowrap;
      color: #ffffff;
    }
    .employee-rail-teams-add-button > span {
      display: block;
      width: 100%;
      text-align: right;
    }
    .employee-rail-soft-action.employee-rail-teams-add-button:hover,
    .employee-rail-soft-action.employee-rail-teams-add-button.is-selected {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-teams-list {
      display: grid;
      grid-auto-rows: auto;
      align-content: start;
      row-gap: 25px;
      width: 150px;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .employee-rail-teams-tabs .employee-rail-settings-tab {
      width: 150px;
      max-width: 150px;
    }
    .employee-rail-teams-tabs .employee-rail-settings-tab-label {
      max-width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .employee-rail-teams-tabs .employee-rail-settings-tab.is-selected .employee-rail-settings-tab-label {
      max-width: 135px;
    }
    .employee-rail-teams-tabs .employee-rail-settings-tab.is-leaving .employee-rail-settings-tab-label {
      max-width: 135px;
    }
    .employee-rail-employee-details-layout {
      display: grid;
      grid-template-columns: 450px 50px 350px;
      width: 850px;
      min-height: 375px;
      align-items: start;
    }
    .employee-rail-employee-fields {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 25px;
      width: 350px;
    }
    .employee-rail-employee-details-layout .employee-rail-employee-fields {
      width: 450px;
    }
    .employee-rail-employee-row {
      display: grid;
      grid-template-columns: 100px 225px;
      column-gap: 25px;
      width: 350px;
      height: 25px;
      align-items: stretch;
    }
    .employee-rail-employee-details-layout .employee-rail-employee-row {
      grid-template-columns: 100px 325px;
      width: 450px;
    }
    .employee-rail-employee-input {
      width: 225px;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 6px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      box-sizing: border-box;
    }
    .employee-rail-employee-details-layout .employee-rail-employee-input {
      width: 325px;
    }
    .employee-rail-team-details-layout {
      display: grid;
      grid-template-columns: 350px;
      width: 350px;
      min-height: 325px;
      align-items: start;
    }
    .employee-rail-team-fields {
      --employee-rail-field-width: 225px;
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 25px;
      width: 350px;
    }
    .employee-rail-team-field-row {
      display: grid;
      grid-template-columns: 100px 225px;
      column-gap: 25px;
      width: 350px;
      height: 25px;
      align-items: stretch;
    }
    .employee-rail-team-members-row {
      display: grid;
      grid-template-columns: 100px 225px;
      column-gap: 25px;
      width: 350px;
      height: 275px;
      min-height: 275px;
      align-items: start;
    }
    .employee-rail-team-members-label {
      width: 100px;
      height: 25px;
      line-height: 25px;
    }
    .employee-rail-team-placeholder {
      margin: 0;
      width: 350px;
      min-height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
    }
    .employee-rail-employee-signature-label {
      width: 325px;
      height: 25px;
      line-height: 25px;
    }
    .employee-rail-employee-details-layout .employee-rail-employee-signature-label {
      width: 350px;
    }
    .employee-rail-employee-signature-column {
      grid-column: 3;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 25px 325px;
      row-gap: 25px;
      width: 325px;
      align-content: start;
    }
    .employee-rail-employee-details-layout .employee-rail-employee-signature-column {
      width: 350px;
    }
    .employee-rail-employee-signature-preview {
      width: 325px;
      height: 325px;
      min-height: 325px;
      max-height: 325px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      overflow-x: hidden;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      box-sizing: border-box;
    }
    .employee-rail-employee-details-layout .employee-rail-employee-signature-preview {
      width: 350px;
    }
    .employee-rail-employee-signature-preview .signature-preview-frame {
      display: block;
      width: 100%;
      min-height: 325px;
      border: 0;
    }
    .employee-rail-employee-tab-group {
      display: grid;
      grid-template-rows: 25px 0;
      width: 150px;
      min-height: 25px;
      overflow: hidden;
    }
    .employee-rail-employee-tab-group.is-expanded,
    .employee-rail-employee-tab-group.is-collapsing {
      grid-template-rows: 25px 125px;
    }
    .employee-rail-employee-subrow {
      height: 0;
      min-height: 0;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: translateY(-8px);
    }
    .employee-rail-employee-tab-group.is-expanded .employee-rail-employee-subrow,
    .employee-rail-employee-tab-group.is-collapsing .employee-rail-employee-subrow {
      height: 125px;
      min-height: 125px;
      max-height: 125px;
      opacity: 1;
      transform: translateY(0);
    }
    .employee-rail-employee-subgrid {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: repeat(3, 25px);
      row-gap: 0;
      width: 135px;
      margin-left: 15px;
      padding-top: 25px;
      box-sizing: border-box;
    }
    .employee-rail-employee-subtab {
      width: 135px;
      height: 25px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #ffffff;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      cursor: pointer;
      box-sizing: border-box;
    }
    .employee-rail-employee-subtab:hover,
    .employee-rail-employee-subtab.is-selected {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-settings-export-fields {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 25px;
      width: 250px;
    }
    .employee-rail-settings-export-row {
      display: grid;
      grid-template-columns: 100px 125px;
      column-gap: 25px;
      width: 250px;
      height: 25px;
      align-items: center;
    }
    .employee-rail-settings-export-button {
      width: 125px;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #000000;
      font: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      cursor: pointer;
    }
    .employee-rail-settings-export-button:hover {
      font-weight: 600;
    }
    .employee-rail-settings-export-button.is-error {
      color: #c33535;
      font-weight: 600;
    }
    .employee-rail-settings-admin-fields {
      display: grid;
      grid-template-rows: 25px 75px 25px 25px 1fr;
      row-gap: 25px;
      width: 400px;
      height: 375px;
      min-height: 375px;
    }
    .employee-rail-settings-admin-row {
      display: grid;
      grid-template-columns: 100px 275px;
      column-gap: 25px;
      width: 400px;
      height: 25px;
      align-items: center;
    }
    .employee-rail-settings-admin-row--details {
      height: 75px;
      align-items: start;
    }
    .employee-rail-settings-admin-row--label-only {
      grid-template-columns: 100px;
    }
    .employee-rail-settings-admin-label {
      width: 100px;
      height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
    }
    .employee-rail-settings-admin-info {
      width: 275px;
      height: 25px;
      color: #000000;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .employee-rail-settings-admin-info--details {
      display: grid;
      grid-template-rows: 16px 16px;
      align-content: start;
      height: 75px;
      min-height: 75px;
      max-height: 75px;
      line-height: 16px;
      white-space: normal;
      text-overflow: clip;
    }
    .employee-rail-settings-admin-sync-button {
      width: 275px;
      height: 25px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #000000;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      cursor: pointer;
    }
    .employee-rail-settings-admin-sync-button:hover {
      font-weight: 600;
    }
    .employee-rail-settings-admin-sync-button:disabled {
      cursor: default;
      opacity: 1;
    }
    .employee-rail-settings-admin-sync-button.is-error {
      color: #c33535;
      font-weight: 600;
    }
    .employee-rail-settings-admin-info-line {
      display: block;
      height: 16px;
      min-height: 16px;
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .employee-rail-settings-admin-audit-box {
      width: 400px;
      height: 125px;
      min-height: 125px;
      padding: 12px;
      border: 1px solid #203220;
      border-radius: 3px;
      color: #000000;
      font-size: 12px;
      font-weight: 400;
      line-height: 18px;
      overflow: auto;
      box-sizing: border-box;
    }
    .employee-rail-settings-admin-audit-row {
      display: grid;
      grid-template-columns: 95px 105px 1fr 45px;
      column-gap: 12px;
      min-height: 25px;
      align-items: center;
      border-bottom: 1px solid rgba(32, 50, 32, 0.18);
    }
    .employee-rail-settings-admin-audit-row:last-child {
      border-bottom: 0;
    }
    #employeeRailThirdPanel {
      --employee-rail-label-width: 135px;
      --employee-rail-field-width: 270px;
      --employee-rail-grid-gap: 0px;
      position: absolute;
      left: 970px;
      top: calc(100% - 500px);
      z-index: 1110;
      width: 460px;
      height: auto;
      min-height: 175px;
      padding: 25px;
      border-radius: 3px;
      background: #ffffff;
      box-shadow: 0 18px 42px rgba(18, 40, 70, 0.16);
      color: #000000;
      font-size: 14px;
      display: grid;
      align-content: start;
      gap: 25px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--team {
      min-height: 475px;
      grid-template-rows: 25px minmax(125px, 1fr) 25px;
    }
    .employee-rail-password-row {
      display: grid;
      grid-template-columns: var(--employee-rail-label-width) 1fr;
      height: 25px;
      gap: var(--employee-rail-grid-gap);
      align-items: stretch;
    }
    .employee-rail-secondary-action {
      width: 100%;
      height: 25px;
      line-height: 25px;
      border: 0;
      border-radius: 3px;
      padding: 0;
      background: transparent;
      color: #ffffff;
      font: inherit;
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      cursor: pointer;
      transition: color 140ms ease, font-weight 140ms ease;
    }
    .employee-rail-secondary-action:hover,
    .employee-rail-secondary-action.toggle-active {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-secondary-action.employee-rail-secondary-action--disabled,
    .employee-rail-secondary-action.employee-rail-secondary-action--disabled:hover,
    .employee-rail-secondary-action.employee-rail-secondary-action--disabled:focus,
    .employee-rail-secondary-action.employee-rail-secondary-action--disabled:focus-visible {
      color: rgba(255, 255, 255, 0.42);
      font-weight: 400;
      cursor: default;
      outline: none;
    }
    .employee-rail-secondary-action.employee-rail-secondary-action--muted {
      color: rgba(255, 255, 255, 0.52);
    }
    .employee-rail-secondary-action.employee-rail-secondary-action--muted:hover,
    .employee-rail-secondary-action.employee-rail-secondary-action--muted.toggle-active {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-secondary-group {
      --employee-rail-subrow-height: 100px;
      --employee-rail-expanded-height: 125px;
      width: 100%;
      display: grid;
      grid-template-rows: 25px;
      align-content: start;
      gap: 0;
    }
    .employee-rail-secondary-group.employee-rail-secondary-group--compact {
      --employee-rail-subrow-height: 75px;
      --employee-rail-expanded-height: 100px;
    }
    .employee-rail-secondary-group.is-expanded {
      grid-template-rows: 25px var(--employee-rail-subrow-height);
    }
    .employee-rail-secondary-group.is-collapsing {
      grid-template-rows: 25px var(--employee-rail-subrow-height);
    }
    .employee-rail-secondary-subrow {
      width: 100%;
      display: grid;
      grid-template-rows: 25px 1fr;
      height: var(--employee-rail-subrow-height);
      min-height: var(--employee-rail-subrow-height);
      max-height: var(--employee-rail-subrow-height);
      gap: 0;
      overflow: hidden;
      opacity: 0;
      max-height: 0;
      transform: translateY(-8px);
      transform-origin: top center;
      transition:
        max-height 520ms cubic-bezier(0.2, 0.85, 0.22, 1),
        opacity 420ms ease,
        transform 520ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .employee-rail-secondary-group.is-expanded .employee-rail-secondary-subrow,
    .employee-rail-secondary-group.is-collapsing .employee-rail-secondary-subrow {
      grid-row: 2;
    }
    .employee-rail-secondary-group.is-expanded .employee-rail-secondary-subrow {
      opacity: 1;
      max-height: var(--employee-rail-subrow-height);
      transform: translateY(0);
    }
    .employee-rail-secondary-group.is-collapsing .employee-rail-secondary-subrow {
      opacity: 0;
      max-height: 0;
      transform: translateY(-8px);
    }
    .employee-rail-secondary-subgrid {
      width: 100%;
      display: grid;
      grid-auto-rows: min-content;
      grid-row: 2;
      align-content: start;
      row-gap: 4px;
    }
    .employee-rail-secondary-subaction {
      width: 100%;
      height: auto;
      min-height: 0;
      line-height: normal;
      border: 0;
      border-radius: 3px;
      padding: 0;
      background: transparent;
      color: #ffffff;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      text-align: right;
      cursor: pointer;
      transition: color 140ms ease, font-weight 140ms ease;
      display: flex;
      align-items: center;
    }
    .employee-rail-secondary-subaction:hover,
    .employee-rail-secondary-subaction.toggle-active {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-secondary-subspacer {
      width: 100%;
      height: 25px;
      min-height: 25px;
      pointer-events: none;
    }
    .employee-rail-third-placeholder,
    .employee-rail-logo-file-name {
      display: inline-block;
      width: 100%;
      height: 25px;
      line-height: 25px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      font: inherit;
      font-weight: 400;
      text-align: left;
    }
    .employee-rail-third-placeholder {
      color: #000000;
      font-size: 14px;
      font-weight: 400;
    }
    .employee-rail-logo-file-name {
      color: #1f2633;
      font-size: 16px;
    }
    .employee-rail-logo-preview-row {
      height: 125px;
      align-items: stretch;
    }
    .employee-rail-file-button,
    .employee-rail-file-display {
      width: 100%;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 8px;
      border: 1px solid #c8d2df;
      border-radius: 3px;
      background: #ffffff;
      color: #1f2633;
      font: inherit;
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      box-sizing: border-box;
    }
    .employee-rail-file-button {
      cursor: pointer;
    }
    .employee-rail-file-display {
      display: flex;
      align-items: center;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .employee-rail-logo-preview {
      height: 125px;
      border: 1px solid #c8d2df;
      border-radius: 3px;
      padding: 25px;
      background: #ffffff;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .employee-rail-logo-preview img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
    .employee-rail-signature-preview-row {
      min-height: 125px;
      height: auto;
      align-items: stretch;
    }
    .employee-rail-rich-row {
      display: grid;
      grid-template-columns: var(--employee-rail-label-width) 1fr;
      min-height: 125px;
      gap: var(--employee-rail-grid-gap);
      align-items: stretch;
    }
    .employee-rail-rich-row--medium {
      min-height: 175px;
    }
    .employee-rail-rich-row--tall {
      min-height: 225px;
    }
    .employee-rail-rich-field {
      min-height: 100%;
      display: block;
    }
    .employee-rail-rich-field .rich-text-field {
      min-height: 100%;
      height: 100%;
      display: grid;
      grid-template-rows: auto 1fr;
    }
    .employee-rail-rich-field .rich-text-editor {
      min-height: 100px;
      height: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .employee-rail-rich-field .rich-text-editor.is-disabled {
      background: #f5f7fb;
      color: #5e6575;
    }
    .employee-rail-preview-shell {
      min-height: 125px;
      height: 100%;
      border: 1px solid #c8d2df;
      border-radius: 3px;
      background: #ffffff;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      box-sizing: border-box;
    }
    .employee-rail-preview-shell .email-preview-canvas {
      min-height: 100%;
      box-sizing: border-box;
    }
    .employee-rail-mail-section-card {
      border: 1px solid #c8d2df;
      border-radius: 3px;
      background: #ffffff;
      padding: 12px;
      display: grid;
      gap: 12px;
      box-sizing: border-box;
      min-height: 100%;
    }
    .employee-rail-mail-log-list {
      display: grid;
      gap: 25px;
      align-content: start;
      width: var(--employee-rail-field-width);
      height: 225px;
      min-height: 225px;
      max-height: 225px;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .employee-rail-mail-log-item {
      border: 0;
      border-radius: 0;
      background: transparent;
      padding: 0;
      display: grid;
      gap: 0;
      box-sizing: border-box;
    }
    .employee-rail-mail-log-subject,
    .employee-rail-mail-log-line {
      margin: 0;
      font-size: 12px;
      line-height: 25px;
      color: #000000;
    }
    .employee-rail-mail-log-subject {
      font-weight: 600;
    }
    .employee-rail-mail-log-line {
      font-weight: 400;
    }
    .employee-rail-merge-tags {
      width: 270px;
      display: grid;
      align-content: start;
      gap: 4px;
      color: #000000;
      font-size: 12px;
      line-height: 1.35;
    }
    .employee-rail-merge-tags span {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .employee-rail-diagnostics-grid {
      display: grid;
      gap: 12px;
      align-content: start;
    }
    .employee-rail-diagnostics-card {
      border: 1px solid #c8d2df;
      border-radius: 3px;
      background: #ffffff;
      padding: 12px;
      display: grid;
      gap: 8px;
      box-sizing: border-box;
    }
    .employee-rail-inline-note {
      margin: 0;
      font-size: 12px;
      color: #5e6575;
      line-height: 1.4;
    }
    .employee-rail-static-label {
      margin: 0;
      font-size: 12px;
      color: #5e6575;
      line-height: 1.4;
      font-weight: 600;
    }
    .employee-rail-team-members-row {
      min-height: 125px;
      height: 100%;
      align-items: stretch;
    }
    #employeeRailSystemPanel .employee-rail-team-members-row {
      display: grid;
      grid-template-columns: 100px 225px;
      column-gap: 25px;
      width: 350px;
      height: 275px;
      min-height: 275px;
      align-items: start;
    }
    .employee-rail-signature-preview {
      height: 125px;
      border: 1px solid #c8d2df;
      border-radius: 3px;
      background: #ffffff;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    #employeeRailThirdPanel .employee-rail-password-row,
    #employeeRailThirdPanel .employee-rail-rich-row {
      grid-template-columns: var(--employee-rail-label-width) var(--employee-rail-field-width);
      column-gap: 0;
    }
    #employeeRailThirdPanel .employee-rail-password-row.employee-rail-task-stats-row {
      height: auto;
      min-height: 25px;
      align-items: start;
    }
    #employeeRailThirdPanel .employee-rail-field-action-row,
    #employeeRailThirdPanel .employee-rail-inline-action-row,
    #employeeRailThirdPanel .employee-rail-settings-action-row {
      grid-template-columns: var(--employee-rail-label-width) var(--employee-rail-field-width);
      column-gap: 0;
    }
    #employeeRailThirdPanel .employee-rail-settings-action-row {
      grid-column: auto;
      grid-row: auto;
      align-self: auto;
      justify-self: stretch;
      width: 100%;
      min-height: 25px;
    }
    #employeeRailThirdPanel .employee-rail-action-row {
      grid-template-columns: var(--employee-rail-label-width) var(--employee-rail-field-width);
      column-gap: 0;
    }
    #employeeRailThirdPanel .employee-rail-label-action-wrap {
      grid-column: 1;
      width: var(--employee-rail-label-width);
    }
    #employeeRailThirdPanel .employee-rail-action-buttons {
      grid-column: 2;
      width: var(--employee-rail-field-width);
      justify-self: end;
    }
    #employeeRailThirdPanel .employee-rail-menu-action.employee-rail-password-label,
    #employeeRailThirdPanel .employee-rail-menu-action.employee-rail-password-label:hover,
    #employeeRailThirdPanel .employee-rail-menu-action.employee-rail-password-label:focus,
    #employeeRailThirdPanel .employee-rail-menu-action.employee-rail-password-label:focus-visible,
    #employeeRailThirdPanel .employee-rail-menu-action.employee-rail-password-label.toggle-active {
      width: 135px;
      height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      justify-content: flex-start;
      text-align: left;
    }
    #employeeRailThirdPanel .employee-rail-password-input,
    #employeeRailThirdPanel .employee-rail-password-select,
    #employeeRailThirdPanel .employee-rail-file-button,
    #employeeRailThirdPanel .employee-rail-file-display {
      width: 270px;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 0 0 10px;
      border: 1px solid #ebebeb;
      border-color: #ebebeb;
      background: #ffffff;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel .employee-rail-password-input:disabled,
    #employeeRailThirdPanel .employee-rail-password-select:disabled,
    #employeeRailThirdPanel .employee-rail-password-input[readonly],
    #employeeRailThirdPanel .employee-rail-password-select[readonly],
    #employeeRailThirdPanel .readonly,
    #employeeRailThirdPanel .employee-rail-file-display {
      background: #ebebeb;
      color: #000000;
    }
    #employeeRailThirdPanel .employee-rail-third-inline {
      width: 270px;
      min-height: 25px;
      color: #000000;
      font-size: 14px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel .employee-rail-rich-field,
    #employeeRailThirdPanel .employee-rail-preview-shell,
    #employeeRailThirdPanel .employee-rail-logo-preview,
    #employeeRailThirdPanel .employee-rail-signature-preview {
      width: 270px;
      border-color: #ebebeb;
      color: #000000;
      font-size: 14px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel .employee-rail-rich-field .rich-text-editor,
    #employeeRailThirdPanel .employee-rail-rich-field .rich-text-field,
    #employeeRailThirdPanel .employee-rail-preview-shell,
    #employeeRailThirdPanel .employee-rail-logo-preview,
    #employeeRailThirdPanel .employee-rail-signature-preview {
      background: #ffffff;
      color: #000000;
      font-size: 14px;
      border: 0;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel .employee-rail-preview-shell .email-preview-canvas,
    #employeeRailThirdPanel .employee-rail-signature-preview .signature-preview-frame {
      border: 0;
      border-radius: 0;
      box-shadow: none;
      background: #ffffff;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel .employee-rail-signature-preview .signature-preview-frame {
      width: 100%;
      height: 100%;
      min-height: 100%;
    }
    #employeeRailThirdPanel .employee-rail-rich-field .rich-text-editor {
      padding-left: 10px;
      padding-right: 10px;
    }
    #employeeRailSystemPanel .employee-rail-team-members-field,
    #employeeRailSystemPanel .employee-rail-employee-signature-preview,
    #employeeRailThirdPanel .employee-rail-preview-shell,
    #employeeRailThirdPanel .employee-rail-logo-preview,
    #employeeRailThirdPanel .employee-rail-signature-preview,
    #employeeRailThirdPanel .employee-rail-mail-log-list,
    #employeeRailThirdPanel .employee-rail-task-list-box,
    #employeeRailThirdPanel .employee-rail-team-members-field,
    #employeeRailThirdPanel .employee-rail-payment-calendar-box,
    #employeeRailThirdPanel .employee-rail-logs-diagnostics-list,
    #employeeRailThirdPanel .employee-rail-logs-diagnostics-preview,
    #employeeRailThirdPanel .employee-rail-rich-field .rich-text-editor {
      min-height: 0;
      max-height: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    #employeeRailThirdPanel .employee-rail-rich-field,
    #employeeRailThirdPanel .employee-rail-rich-field .rich-text-field {
      min-height: 0;
      max-height: 100%;
      overflow: hidden;
    }
    #employeeRailThirdPanel .employee-rail-rich-field .rich-text-editor.is-disabled,
    #employeeRailThirdPanel .employee-rail-password-input[readonly] {
      background: #ebebeb;
    }
    #employeeRailThirdPanel .employee-rail-preview-shell .email-preview-canvas,
    #employeeRailThirdPanel .employee-rail-mail-section-card,
    #employeeRailThirdPanel .employee-rail-mail-log-item,
    #employeeRailThirdPanel .employee-rail-diagnostics-card,
    #employeeRailThirdPanel .employee-rail-third-placeholder {
      color: #000000;
      font-size: 14px;
    }
    #employeeRailThirdPanel .employee-rail-mail-section-card,
    #employeeRailThirdPanel .employee-rail-mail-log-item,
    #employeeRailThirdPanel .employee-rail-diagnostics-card {
      border-color: #ebebeb;
      background: #ffffff;
    }
    .employee-rail-client-list {
      display: grid;
      align-content: start;
      gap: 25px;
      width: 100%;
    }
    .employee-rail-client-card {
      display: grid;
      grid-template-columns: 5px 15px minmax(0, 1fr) auto;
      grid-template-rows: 25px auto;
      align-items: start;
      width: 100%;
      min-width: 0;
    }
    .employee-rail-client-status {
      grid-column: 1;
      grid-row: 1;
      display: block;
      width: 5px;
      height: 25px;
      border-radius: 3px;
      background: #0f7b6c;
    }
    .employee-rail-client-status.status-green {
      background: #0f7b6c;
    }
    .employee-rail-client-status.status-orange {
      background: #ffb400;
    }
    .employee-rail-client-status.status-red {
      background: #ff2000;
    }
    .employee-rail-client-gap {
      grid-column: 2;
      grid-row: 1 / span 2;
      width: 15px;
      min-width: 15px;
    }
    .employee-rail-client-name {
      grid-column: 3;
      grid-row: 1;
      margin: 0;
      height: 25px;
      line-height: 25px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
    }
    .employee-rail-client-actions {
      grid-column: 4;
      grid-row: 1;
      justify-self: end;
      display: flex;
      align-items: center;
      gap: 25px;
      height: 25px;
      line-height: 25px;
      color: #5f6978;
      font-size: 12px;
      font-weight: 400;
    }
    .employee-rail-client-stats-body {
      grid-column: 3 / 5;
      grid-row: 2;
      display: none;
      overflow: hidden;
      padding-top: 25px;
    }
    .employee-rail-client-stats-body.is-open,
    .employee-rail-client-stats-body.is-closing {
      display: block;
    }
    .employee-rail-client-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 25px;
      width: 100%;
    }
    .employee-rail-client-stat {
      min-height: 25px;
      color: #000000;
      font-size: 12px;
      line-height: 1.25;
      min-width: 0;
    }
    .employee-rail-client-stat .k {
      color: #5f6978;
      font-size: 12px;
      font-weight: 400;
    }
    .employee-rail-client-stat .v {
      color: #000000;
      font-size: 12px;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .employee-rail-stats-section {
      display: grid;
      gap: 25px;
      width: 100%;
    }
    .employee-rail-stats-heading {
      margin: 0;
      height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 600;
      line-height: 25px;
    }
    .employee-rail-team-members-field {
      width: var(--employee-rail-field-width);
      height: 100%;
      min-height: 125px;
      border: 0;
      background: transparent;
      padding: 0;
      overflow: auto;
      box-sizing: border-box;
    }
    .employee-rail-team-members {
      display: grid;
      align-content: start;
      gap: 25px;
      width: var(--employee-rail-field-width);
    }
    #employeeRailSystemPanel .employee-rail-team-members-field {
      width: 225px;
      height: 275px;
      min-height: 275px;
      background: transparent;
      overflow: auto;
    }
    #employeeRailSystemPanel .employee-rail-team-members {
      width: 225px;
    }
    #employeeRailSystemPanel .employee-rail-team-member-item {
      width: 225px;
    }
    .employee-rail-team-member-item {
      --employee-rail-team-pill-width: 5px;
      width: var(--employee-rail-field-width);
      height: 25px;
      min-height: 25px;
      display: flex;
      align-items: center;
      border: 0;
      border-radius: 3px;
      padding: 0;
      background: transparent;
      color: #000000;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      position: relative;
      overflow: hidden;
      cursor: pointer;
      transition:
        color 140ms ease,
        font-weight 140ms ease;
      box-sizing: border-box;
    }
    .employee-rail-team-member-item::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 5px;
      height: 25px;
      border-radius: 3px;
      background: #000000;
      opacity: 0;
      transform: translateY(-50%) scaleY(0.35) scaleX(0.72);
      transform-origin: center;
      pointer-events: none;
      transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .employee-rail-team-member-item::after {
      content: none;
    }
    .employee-rail-team-member-item:hover {
      color: #000000;
      font-weight: 600;
    }
    .employee-rail-team-member-item.is-selected {
      color: #000000;
      font-weight: 600;
    }
    .employee-rail-team-member-item.is-selected::before {
      opacity: 1;
      transform: translateY(-50%) scaleY(1) scaleX(1);
      animation: employeeRailFirstMenuPillPop 260ms cubic-bezier(0.18, 1.35, 0.32, 1);
    }
    .employee-rail-team-member-item.is-selected::after {
      animation: none;
    }
    .employee-rail-team-member-status {
      display: none;
    }
    .employee-rail-team-member-item.is-selected .employee-rail-team-member-status {
      display: none;
    }
    .employee-rail-team-member-gap {
      display: none;
    }
    .employee-rail-team-member-name {
      position: relative;
      z-index: 1;
      display: block;
      width: 225px;
      max-width: 225px;
      height: 25px;
      line-height: 25px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      transform: translateX(0);
      transition: transform 220ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .employee-rail-team-member-item.is-selected .employee-rail-team-member-name {
      max-width: 210px;
      transform: translateX(15px);
    }
    .employee-rail-emails-tabs {
      grid-template-rows: minmax(0, 425px);
      grid-auto-rows: unset;
      overflow: visible;
      row-gap: 0;
    }
    .employee-rail-emails-list {
      display: grid;
      grid-auto-rows: auto;
      align-content: start;
      row-gap: 25px;
      width: 150px;
      height: 425px;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .employee-rail-email-tab-group {
      width: 150px;
      display: grid;
      grid-template-rows: 25px;
      align-content: start;
      gap: 0;
    }
    .employee-rail-email-tab-group.is-expanded,
    .employee-rail-email-tab-group.is-collapsing {
      grid-template-rows: 25px var(--employee-rail-subrow-height);
    }
    .employee-rail-email-subrow {
      width: 150px;
      height: var(--employee-rail-subrow-height);
      min-height: var(--employee-rail-subrow-height);
      max-height: var(--employee-rail-subrow-height);
      display: grid;
      grid-template-rows: 1fr;
      overflow: hidden;
      opacity: 0;
      max-height: 0;
      transform: translateY(-8px);
      transform-origin: top center;
      transition:
        max-height 520ms cubic-bezier(0.2, 0.85, 0.22, 1),
        opacity 420ms ease,
        transform 520ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .employee-rail-email-tab-group.is-expanded .employee-rail-email-subrow,
    .employee-rail-email-tab-group.is-collapsing .employee-rail-email-subrow {
      grid-row: 2;
    }
    .employee-rail-email-tab-group.is-expanded .employee-rail-email-subrow {
      opacity: 1;
      max-height: var(--employee-rail-subrow-height);
      transform: translateY(0);
    }
    .employee-rail-email-tab-group.is-collapsing .employee-rail-email-subrow {
      opacity: 0;
      max-height: 0;
      transform: translateY(-8px);
    }
    .employee-rail-email-subgrid {
      display: grid;
      grid-row: 1;
      grid-template-rows: repeat(var(--employee-rail-email-submode-count), 25px);
      align-content: start;
      width: 135px;
      margin-left: 15px;
      padding-top: 25px;
      row-gap: 0;
      box-sizing: border-box;
    }
    .employee-rail-email-subtab {
      width: 135px;
      height: 25px;
      border: 0;
      border-radius: 3px;
      padding: 0;
      background: transparent;
      color: #ffffff;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      cursor: pointer;
    }
    .employee-rail-email-subtab:hover,
    .employee-rail-email-subtab.toggle-active {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-tasks-tabs {
      grid-template-rows: minmax(0, 425px);
      grid-auto-rows: unset;
      overflow: visible;
      row-gap: 0;
    }
    .employee-rail-tasks-list {
      display: grid;
      grid-auto-rows: auto;
      align-content: start;
      row-gap: 25px;
      width: 150px;
      height: 425px;
      min-height: 0;
      overflow-x: hidden;
      overflow-y: auto;
    }
    .employee-rail-task-tab-group {
      width: 150px;
      display: grid;
      grid-template-rows: 25px;
      align-content: start;
      gap: 0;
    }
    .employee-rail-task-tab-group.is-expanded,
    .employee-rail-task-tab-group.is-collapsing {
      grid-template-rows: 25px var(--employee-rail-subrow-height);
    }
    .employee-rail-task-subrow {
      width: 150px;
      height: var(--employee-rail-subrow-height);
      min-height: var(--employee-rail-subrow-height);
      max-height: var(--employee-rail-subrow-height);
      display: grid;
      grid-template-rows: 1fr;
      overflow: hidden;
      opacity: 0;
      max-height: 0;
      transform: translateY(-8px);
      transform-origin: top center;
      transition:
        max-height 520ms cubic-bezier(0.2, 0.85, 0.22, 1),
        opacity 420ms ease,
        transform 520ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .employee-rail-task-tab-group.is-expanded .employee-rail-task-subrow,
    .employee-rail-task-tab-group.is-collapsing .employee-rail-task-subrow {
      grid-row: 2;
    }
    .employee-rail-task-tab-group.is-expanded .employee-rail-task-subrow {
      opacity: 1;
      max-height: var(--employee-rail-subrow-height);
      transform: translateY(0);
    }
    .employee-rail-task-tab-group.is-collapsing .employee-rail-task-subrow {
      opacity: 0;
      max-height: 0;
      transform: translateY(-8px);
    }
    .employee-rail-task-subgrid {
      display: grid;
      grid-row: 1;
      grid-auto-rows: 25px;
      align-content: start;
      width: 135px;
      margin-left: 15px;
      padding-top: 25px;
      row-gap: 0;
      box-sizing: border-box;
    }
    .employee-rail-task-subtab {
      width: 135px;
      height: 25px;
      border: 0;
      border-radius: 3px;
      padding: 0;
      background: transparent;
      color: #ffffff;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .employee-rail-task-subtab:hover,
    .employee-rail-task-subtab.toggle-active {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-email-content-placeholder {
      width: 725px;
      height: 425px;
      min-height: 425px;
      pointer-events: none;
    }
    .employee-rail-email-content .employee-rail-email-content-placeholder {
      width: 900px;
      height: 475px;
      min-height: 475px;
    }
    .employee-rail-task-content .employee-rail-email-content-placeholder {
      width: 450px;
      height: 475px;
      min-height: 475px;
    }
    .employee-rail-emails-panel--signature-settings .employee-rail-email-content-placeholder {
      width: 900px;
    }
    .employee-rail-emails-panel--logs-diagnostics .employee-rail-email-content-placeholder {
      width: 900px;
    }
    .employee-rail-emails-panel--preview .employee-rail-email-content-placeholder {
      width: 900px;
    }
    .employee-rail-tasks-panel--payment .employee-rail-task-content .employee-rail-email-content-placeholder {
      width: 900px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails {
      --employee-rail-label-width: 100px;
      --employee-rail-field-width: 725px;
      --employee-rail-grid-gap: 25px;
      left: auto;
      top: auto;
      width: 900px;
      height: 475px;
      min-height: 475px;
      max-height: 475px;
      padding: 25px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      align-content: start;
      gap: 25px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--signature-settings {
      width: 900px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--logs-diagnostics {
      width: 900px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview {
      width: 900px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks {
      --employee-rail-label-width: 100px;
      --employee-rail-field-width: 275px;
      --employee-rail-grid-gap: 25px;
      left: auto;
      top: auto;
      width: 450px;
      height: 475px;
      min-height: 475px;
      max-height: 475px;
      padding: 25px;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
      overflow: visible;
      align-content: start;
      gap: 25px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-editor-grid {
      display: grid;
      grid-template-columns: 400px;
      row-gap: 25px;
      width: 400px;
      height: 375px;
      overflow-x: hidden;
      overflow-y: auto;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-column {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 25px;
      width: 400px;
      align-content: start;
      min-width: 0;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-column--right {
      grid-column: 1;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-field-row {
      display: grid;
      grid-template-columns: 100px 275px;
      column-gap: 25px;
      width: 400px;
      height: 25px;
      align-items: stretch;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-field-row--tall {
      height: 125px;
      align-items: start;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-field-row--series { height: 75px; align-items: start; }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-field-row--subtasks { height: auto; min-height: 25px; align-items: start; }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-field-row--payment-calendar {
      height: 225px;
      align-items: start;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-settings-label,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-menu-action.employee-rail-password-label,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-menu-action.employee-rail-password-label:hover,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-menu-action.employee-rail-password-label:focus,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-menu-action.employee-rail-password-label:focus-visible,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-menu-action.employee-rail-password-label.toggle-active {
      width: 100px;
      height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      justify-content: flex-start;
      text-align: left;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-password-input,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-password-select,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-file-display,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-third-inline {
      width: 275px;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 6px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-series-picker {
      display: grid;
      grid-template-columns: 175px 75px;
      column-gap: 25px;
      width: 275px;
      height: 25px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-series-picker .employee-rail-password-input {
      width: 175px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-series-picker .employee-rail-soft-action {
      width: 75px;
      text-align: left;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-list-box {
      width: 275px;
      height: 75px;
      min-height: 75px;
      max-height: 75px;
      padding: 0;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      overflow: auto;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks #adminTaskSubtaskList {
      display: grid; row-gap: 25px; height: auto; min-height: 0; max-height: none; background: transparent; overflow: visible;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks #adminTaskSubtaskList .employee-rail-task-draft-subtask-field { grid-column: auto; }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-list-box .small-note,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-note {
      margin: 0;
      color: #000000;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-list-box .subtask-row,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-list-box .series-date-item,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-list-box .historic-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 8px;
      width: 100%;
      min-height: 25px;
      font-size: 12px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-list-box input {
      width: 100%;
      height: 25px;
      border: 0;
      background: transparent;
      font: inherit;
      font-size: 12px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-subtask-add {
      width: 275px; height: 25px; margin-top: 0;
      padding: 0; border: 0; background: transparent;
      color: #000001;
      font-size: 12px; font-weight: 400; line-height: 25px;
      text-align: left;
      cursor: pointer;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks #adminTaskSubtaskList:not(:empty) + .employee-rail-task-subtask-add { margin-top: 25px; }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-toggle {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 275px;
      height: 25px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-rich-field {
      width: 275px;
      height: 125px;
      min-height: 125px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      overflow: hidden;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-rich-field .rich-text-field {
      width: 275px;
      height: 125px;
      border: 0;
      background: #ffffff;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-rich-field .rich-text-toolbar {
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
      width: 275px;
      height: 25px;
      min-height: 25px;
      padding: 0 12px;
      border: 0;
      background: #ffffff;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-rich-field .rich-text-toolbar::after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 0;
      height: 1px;
      background: rgba(0, 0, 0, 0.18);
      pointer-events: none;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-rich-field .rich-text-editor {
      width: 275px;
      height: 100px;
      min-height: 100px;
      padding: 6px;
      border: 0;
      border-radius: 0;
      background: #ffffff;
      color: #000000;
      font-size: 14px;
      overflow: auto;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-box {
      width: 350px;
      height: 225px;
      min-height: 225px;
      max-height: 225px;
      padding: 0;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      overflow: auto;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-table {
      display: grid;
      gap: 0;
      width: 350px;
      min-width: 350px;
      font-size: 10px;
      line-height: 25px;
      color: #000000;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-header,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-month-row {
      display: grid;
      grid-template-columns: 50px repeat(5, 60px);
      column-gap: 0;
      min-height: 25px;
      align-items: start;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-header {
      position: sticky;
      top: 0;
      z-index: 1;
      background: #ffffff;
      border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-header-cell,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-month-label {
      height: 25px;
      padding: 0 4px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-header-cell {
      text-align: center;
      color: rgba(0, 0, 0, 0.62);
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-month-row.warning {
      background: rgba(225, 193, 110, 0.18);
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-day-cell {
      display: grid;
      grid-template-rows: 25px 25px;
      min-height: 50px;
      justify-items: center;
      align-items: start;
      overflow: hidden;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-chips {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 2px;
      width: 60px;
      height: 25px;
      overflow: hidden;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-chip {
      width: 16px;
      min-width: 16px;
      height: 16px;
      margin: 0;
      padding: 0;
      border: 1px solid rgba(0, 0, 0, 0.26);
      border-radius: 3px;
      background: #f2f2f2;
      color: #000000;
      font: inherit;
      font-size: 9px;
      line-height: 14px;
      text-align: center;
      cursor: pointer;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-chip.state-2 {
      background: #e1c16e;
      border-color: #e1c16e;
      color: #203220;
      font-weight: 600;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-chip.state-4 {
      background: #203220;
      border-color: #203220;
      color: #e1c16e;
      font-weight: 600;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-chip.state-both {
      background: linear-gradient(135deg, #e1c16e 0 50%, #203220 50% 100%);
      border-color: #203220;
      color: #ffffff;
      font-weight: 600;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-calendar-counts {
      height: 25px;
      color: rgba(0, 0, 0, 0.62);
      font-size: 9px;
      line-height: 25px;
      white-space: nowrap;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-mail-fields {
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 25px;
      width: 400px;
      align-content: start;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-mail-fields .employee-rail-task-rich-field,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-mail-fields .employee-rail-task-rich-field .rich-text-field {
      width: 225px;
      height: 75px;
      min-height: 75px;
      max-height: 75px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-mail-fields .employee-rail-task-rich-field .rich-text-editor {
      width: 225px;
      height: 50px;
      min-height: 50px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-test-row {
      display: grid;
      grid-template-columns: 75px 175px;
      column-gap: 25px;
      width: 275px;
      height: 25px;
      align-items: center;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-test-row .employee-rail-soft-action {
      width: 75px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-payment-test-status {
      width: 175px;
      height: 25px;
      margin: 0;
      color: rgba(0, 0, 0, 0.62);
      font-size: 10px;
      line-height: 25px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-dual-row {
      display: grid;
      grid-template-columns: 100px 75px 100px 100px;
      column-gap: 25px;
      width: 450px;
      height: 25px;
      align-items: stretch;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-dual-row .employee-rail-password-input,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-dual-row .employee-rail-password-select {
      width: 75px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-task-dual-row .employee-rail-password-select:last-child {
      justify-self: end;
      width: 75px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-field-action-row,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-inline-action-row,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-settings-action-row {
      position: absolute;
      right: 25px;
      bottom: 25px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 400px;
      height: 25px;
      min-height: 25px;
      margin: 0;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-inline-actions,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks .employee-rail-settings-action-row .employee-rail-inline-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 25px;
      width: auto;
      height: 25px;
      min-height: 25px;
      grid-column: auto;
      justify-self: auto;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment {
      --employee-rail-field-width: 350px;
      width: 900px;
      height: 475px;
      min-height: 475px;
      max-height: 475px;
      padding: 25px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-payment-editor-grid {
      grid-template-columns: 475px 25px 350px;
      width: 850px;
      height: 375px;
      overflow: visible;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column {
      width: 475px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right {
      grid-column: 3;
      width: 350px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-field-row {
      grid-template-columns: 100px 350px;
      width: 475px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right .employee-rail-task-field-row {
      grid-template-columns: 100px 225px;
      width: 350px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-password-input,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-password-select,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-file-display,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-third-inline {
      width: 350px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right .employee-rail-password-input,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right .employee-rail-password-select,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right .employee-rail-file-display,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right .employee-rail-third-inline,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right .employee-rail-task-rich-field,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right .employee-rail-task-rich-field .rich-text-field,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right .employee-rail-task-rich-field .rich-text-toolbar,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-column--right .employee-rail-task-rich-field .rich-text-editor {
      width: 225px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-series-picker {
      grid-template-columns: 250px 75px;
      width: 350px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-task-series-picker .employee-rail-password-input {
      width: 250px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-payment-calendar-box {
      width: 350px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-payment-mail-fields {
      width: 350px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-payment-test-row {
      grid-template-columns: 75px 125px;
      width: 225px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-payment-test-status {
      width: 125px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-field-action-row,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-inline-action-row,
    #employeeRailThirdPanel.employee-rail-third-panel--tasks.employee-rail-third-panel--payment .employee-rail-settings-action-row {
      right: 25px;
      bottom: 25px;
      width: 850px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-password-row,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-rich-row,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-field-action-row,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-inline-action-row,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-settings-action-row {
      grid-template-columns: 100px 725px;
      column-gap: 25px;
      width: 850px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label:hover,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label:focus,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label:focus-visible,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label.toggle-active {
      width: 100px;
      height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      justify-content: flex-start;
      text-align: left;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-password-input,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-password-select,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-file-button,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-file-display,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-third-inline {
      width: 725px;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      padding: 0 6px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font-size: 14px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-password-select optgroup {
      color: rgba(0, 0, 0, 0.58);
      font-size: 12px;
      font-weight: 600;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-password-select option {
      color: #000000;
      font-size: 14px;
      font-weight: 400;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-row .employee-rail-password-select {
      width: 275px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-rich-field,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-preview-shell,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-preview,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-mail-log-list,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-merge-tags {
      width: 275px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font-size: 14px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-rich-field .rich-text-editor,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-rich-field .rich-text-field,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-preview-shell,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-preview {
      background: #ffffff;
      border-color: transparent;
      color: #000000;
      font-size: 14px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-field-action-row,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-inline-action-row,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-settings-action-row {
      position: absolute;
      right: 25px;
      bottom: 25px;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 850px;
      height: 25px;
      min-height: 25px;
      margin: 0;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--signature-settings .employee-rail-settings-action-row {
      width: 850px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-inline-actions,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-settings-action-row .employee-rail-inline-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 25px;
      width: auto;
      height: 25px;
      min-height: 25px;
      grid-column: auto;
      justify-self: auto;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-inline-actions .system-standard-save-button,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-settings-action-row .system-standard-save-button {
      width: auto;
      min-width: 0;
      flex: 0 0 auto;
      text-align: right;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-inline-actions .employee-rail-soft-action,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-settings-action-row .employee-rail-soft-action {
      width: auto;
      min-width: 0;
      flex: 0 0 auto;
      text-align: right;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-layout {
      display: grid;
      grid-template-columns: 400px 50px 400px;
      width: 850px;
      height: 425px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-section {
      display: grid;
      grid-template-rows: 25px 375px;
      row-gap: 25px;
      width: 400px;
      height: 425px;
      min-width: 0;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-section--diagnostics {
      grid-column: 3;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-heading {
      margin: 0;
      width: 400px;
      height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 600;
      line-height: 25px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-body {
      display: grid;
      grid-template-rows: 25px 25px 275px;
      row-gap: 25px;
      width: 400px;
      height: 375px;
      min-width: 0;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-row {
      display: grid;
      grid-template-columns: 100px 275px;
      column-gap: 25px;
      width: 400px;
      height: 25px;
      align-items: stretch;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-list,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-preview {
      width: 400px;
      height: 275px;
      min-height: 275px;
      max-height: 275px;
      overflow: auto;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-list {
      display: grid;
      align-content: start;
      row-gap: 25px;
      padding: 12px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-list .employee-rail-mail-log-item {
      width: 100%;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-preview {
      padding: 0;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-logs-diagnostics-preview .employee-rail-diagnostics-grid {
      gap: 25px;
      padding: 0;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-settings-grid {
      display: grid;
      grid-template-rows: 25px 100px 100px 25px;
      row-gap: 25px;
      width: 850px;
      height: 375px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-settings-grid {
      display: grid;
      grid-template-columns: 450px 50px 350px;
      width: 850px;
      height: 375px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-fields {
      grid-column: 1;
      display: grid;
      grid-template-columns: 1fr;
      row-gap: 25px;
      width: 450px;
      align-content: start;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-section-heading {
      width: 450px;
      height: 25px;
      color: #000000;
      font-size: 14px;
      font-weight: 600;
      line-height: 25px;
      text-align: left;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-pair-row {
      display: grid;
      grid-template-columns: 100px 325px;
      column-gap: 25px;
      width: 450px;
      height: 25px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-pair-row .employee-rail-password-input {
      width: 325px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-editor-column {
      grid-column: 3;
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 25px 275px 25px;
      row-gap: 25px;
      width: 350px;
      height: 375px;
      align-content: start;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label.employee-rail-signature-editor-label,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label.employee-rail-signature-editor-label:hover,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label.employee-rail-signature-editor-label:focus,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label.employee-rail-signature-editor-label:focus-visible,
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-menu-action.employee-rail-password-label.employee-rail-signature-editor-label.toggle-active {
      width: 350px;
      max-width: 350px;
      font-weight: 600;
      white-space: nowrap;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-editor-merge-row {
      display: grid;
      grid-template-columns: 100px 225px;
      column-gap: 25px;
      width: 350px;
      height: 25px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-signature-editor-merge-row .employee-rail-password-select {
      width: 225px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-subject-row {
      display: grid;
      grid-template-columns: 100px 725px;
      column-gap: 25px;
      width: 850px;
      height: 25px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-merge-row {
      display: grid;
      grid-template-columns: 100px 725px;
      column-gap: 25px;
      width: 850px;
      height: 25px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-preview-grid, #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-reporting-preview-grid {
      display: grid;
      grid-template-rows: 25px 325px;
      row-gap: 25px;
      width: 400px;
      height: 375px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-preview-row, #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-reporting-preview-row {
      display: grid;
      grid-template-columns: 100px 275px;
      column-gap: 25px;
      width: 400px;
      height: 325px;
      align-items: start;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-preview-shell, #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-reporting-preview-shell {
      width: 275px;
      height: 325px;
      min-height: 325px;
      max-height: 325px;
      overflow: auto;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-deadline-preview-grid, #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-reporting-preview-grid {
      width: 850px;
      height: 375px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-deadline-section-row, #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-deadline-preview-row, #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-reporting-preview-select-row, #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-reporting-preview-row {
      grid-template-columns: 100px 725px;
      width: 850px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-password-select, #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-deadline-preview-shell, #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-reporting-preview-shell {
      width: 725px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails.employee-rail-third-panel--email-preview .employee-rail-settings-action-row {
      width: 850px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-sections-grid {
      display: grid;
      grid-template-rows: 25px 25px minmax(0, 225px) 25px;
      row-gap: 25px;
      width: 850px;
      height: 375px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-reporting-sections-grid {
      display: grid;
      grid-template-rows: 25px 25px 100px 100px 25px;
      row-gap: 25px;
      width: 850px;
      height: 375px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-row, #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-reporting-preview-select-row, #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-body-row, #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-reporting-section-body-row {
      display: grid;
      grid-template-columns: 100px 725px;
      column-gap: 25px;
      width: 850px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-row {
      display: grid;
      grid-template-columns: 100px 725px;
      column-gap: 25px;
      width: 850px;
      height: 100px;
      align-items: start;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-row, #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-reporting-preview-select-row {
      height: 25px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-body-row {
      height: 225px;
      align-items: start;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-reporting-section-body-row {
      height: 100px;
      align-items: start;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-subject-input {
      width: 725px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-rich-field {
      width: 725px;
      height: 225px;
      min-height: 225px;
      max-height: 225px;
      overflow: hidden;
      background: #ffffff;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field {
      width: 725px;
      height: 100px;
      min-height: 100px;
      max-height: 100px;
      overflow: hidden;
      background: #ffffff;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-rich-field .rich-text-field {
      display: grid;
      grid-template-rows: 25px 200px;
      gap: 0;
      width: 725px;
      height: 225px;
      background: #ffffff;
      border: 0;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field .rich-text-field {
      display: grid;
      grid-template-rows: 25px 75px;
      gap: 0;
      width: 725px;
      height: 100px;
      background: #ffffff;
      border: 0;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-rich-field .rich-text-toolbar {
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      width: 725px;
      padding: 0 25px;
      box-sizing: border-box;
      background: #ffffff;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field .rich-text-toolbar {
      position: relative;
      display: flex;
      align-items: center;
      gap: 4px;
      flex-wrap: nowrap;
      width: 725px;
      padding: 0 25px;
      box-sizing: border-box;
      background: #ffffff;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-rich-field .rich-text-toolbar::after {
      content: "";
      position: absolute;
      left: 25px;
      right: 25px;
      bottom: 0;
      height: 1px;
      background: rgba(0, 0, 0, 0.18);
      pointer-events: none;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field .rich-text-toolbar::after {
      content: "";
      position: absolute;
      left: 25px;
      right: 25px;
      bottom: 0;
      height: 1px;
      background: rgba(0, 0, 0, 0.18);
      pointer-events: none;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-rich-field .rich-text-toolbar .btn {
      min-width: 25px;
      height: 25px;
      padding: 0 4px;
      border: 0;
      line-height: 25px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field .rich-text-toolbar .btn {
      min-width: 25px;
      height: 25px;
      padding: 0 4px;
      border: 0;
      line-height: 25px;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-deadline-section-rich-field .rich-text-editor {
      width: 725px;
      height: 200px;
      min-height: 200px;
      padding: 6px;
      border: 0;
      border-radius: 0;
      overflow: auto;
      background: #ffffff;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field .rich-text-editor {
      width: 725px;
      height: 75px;
      min-height: 75px;
      padding: 6px;
      border: 0;
      border-radius: 0;
      overflow: auto;
      background: #ffffff;
      box-sizing: border-box;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field.employee-rail-signature-editor-rich-field {
      width: 350px;
      height: 275px;
      min-height: 275px;
      max-height: 275px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field.employee-rail-signature-editor-rich-field .rich-text-field {
      width: 350px;
      height: 275px;
      grid-template-rows: 25px 250px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field.employee-rail-signature-editor-rich-field .rich-text-toolbar {
      width: 350px;
    }
    #employeeRailThirdPanel.employee-rail-third-panel--emails .employee-rail-email-standard-rich-field.employee-rail-signature-editor-rich-field .rich-text-editor {
      width: 350px;
      height: 250px;
      min-height: 250px;
    }
    .employee-rail-add-task-description-field,
    .employee-rail-add-task-support-description-field,
    .employee-rail-add-task-process-rich-field .rich-text-editor,
    #employeeRailSystemPanel .employee-rail-team-members-field,
    #employeeRailSystemPanel .employee-rail-employee-signature-preview,
    #employeeRailThirdPanel .employee-rail-preview-shell,
    #employeeRailThirdPanel .employee-rail-logo-preview,
    #employeeRailThirdPanel .employee-rail-signature-preview,
    #employeeRailThirdPanel .employee-rail-mail-log-list,
    #employeeRailThirdPanel .employee-rail-task-list-box,
    #employeeRailThirdPanel .employee-rail-team-members-field,
    #employeeRailThirdPanel .employee-rail-payment-calendar-box,
    #employeeRailThirdPanel .employee-rail-logs-diagnostics-list,
    #employeeRailThirdPanel .employee-rail-logs-diagnostics-preview,
    #employeeRailThirdPanel .employee-rail-rich-field .rich-text-editor {
      overflow-x: hidden;
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    #employeeRailThirdPanel .employee-rail-rich-field,
    #employeeRailThirdPanel .employee-rail-rich-field .rich-text-field,
    .employee-rail-add-task-process-rich-field {
      overflow: hidden;
    }
    .employee-rail-menu-action {
      position: relative;
      width: 100%;
      height: 25px;
      line-height: 25px;
      border: 0;
      border-radius: 3px;
      background: transparent;
      color: #ffffff;
      font: inherit;
      font-size: 16px;
      font-weight: 400;
      text-align: left;
      padding: 0;
      text-indent: 0;
      cursor: pointer;
      transition:
        color 140ms ease,
        font-weight 140ms ease,
        text-indent 220ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    #employeeRailMenu .employee-rail-menu-action::before,
    #employeeRailAddMenu .employee-rail-menu-action::before {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 5px;
      height: 25px;
      border-radius: 3px;
      background: #e1c16e;
      opacity: 0;
      transform: translateY(-50%) scaleY(0.35) scaleX(0.72);
      transform-origin: center;
      pointer-events: none;
      transition:
        opacity 180ms ease,
        transform 220ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .employee-rail-menu-action:hover {
      color: #e1c16e;
      font-weight: 600;
    }
    .employee-rail-menu-action.toggle-active {
      color: #e1c16e;
      font-weight: 600;
      text-indent: 15px;
    }
    #employeeRailMenu .employee-rail-menu-action.toggle-active::before,
    #employeeRailAddMenu .employee-rail-menu-action.toggle-active::before {
      opacity: 1;
      transform: translateY(-50%) scaleY(1) scaleX(1);
      animation: employeeRailFirstMenuPillPop 260ms cubic-bezier(0.18, 1.35, 0.32, 1);
    }
    @keyframes employeeRailFirstMenuPillPop {
      0% {
        opacity: 0;
        transform: translateY(-50%) scaleY(0.35) scaleX(0.72);
      }
      58% {
        opacity: 1;
        transform: translateY(-50%) scaleY(1.08) scaleX(1.12);
      }
      100% {
        opacity: 1;
        transform: translateY(-50%) scaleY(1) scaleX(1);
      }
    }
    .employee-rail-menu-action.employee-rail-password-label,
    .employee-rail-menu-action.employee-rail-password-label:hover,
    .employee-rail-menu-action.employee-rail-password-label:focus,
    .employee-rail-menu-action.employee-rail-password-label:focus-visible,
    .employee-rail-menu-action.employee-rail-password-label.toggle-active {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      height: 100%;
      line-height: normal;
      box-sizing: border-box;
      color: #1f2633;
      cursor: default;
      outline: none;
    }
    .employee-rail-menu-action:focus-visible,
    .left-action-rail-glyph:focus-visible {
      outline: 2px solid #e1c16e;
      outline-offset: 2px;
    }
    .employee-rail-password-input,
    .employee-rail-password-select {
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      font: inherit;
      font-size: 16px;
      font-weight: 400;
      border-radius: 3px;
    }
    .employee-rail-password-input,
    .employee-rail-password-select {
      width: 100%;
      padding: 0 8px;
      border: 1px solid #c8d2df;
      background: #ffffff;
      color: #1f2633;
    }
    .employee-rail-password-input::placeholder {
      color: #6e7687;
    }
    .employee-rail-soft-action {
      width: 100%;
      height: 25px;
      min-height: 25px;
      max-height: 25px;
      position: relative;
      overflow: hidden;
      border: 0;
      border-radius: 3px;
      padding: 0;
      background: transparent;
      color: #5f6978;
      font: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      cursor: pointer;
      transform-style: preserve-3d;
      transition: color 140ms ease, font-weight 140ms ease;
      box-shadow: none;
    }
    .employee-rail-soft-action:hover {
      background: transparent;
      color: #000000;
      font-weight: 600;
    }
    .employee-rail-soft-action.is-confirming {
      animation: employeeRailDangerFlip 260ms cubic-bezier(0.2, 0.85, 0.22, 1);
      background: transparent;
      color: #0f7b6c;
      font-weight: 600;
    }
    .employee-rail-soft-action::before {
      content: "";
      position: absolute;
      inset: -2px;
      background: linear-gradient(100deg, rgba(225, 193, 110, 0.1) 0%, rgba(225, 193, 110, 0.98) 46%, rgba(248, 228, 168, 0.92) 100%);
      transform: translateX(-115%) skewX(-18deg);
      opacity: 0;
      pointer-events: none;
    }
    .employee-rail-soft-action::after {
      content: "✓";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0.7);
      opacity: 0;
      color: #203220;
      font-size: 14px;
      font-weight: 700;
      pointer-events: none;
    }
    .employee-rail-soft-action > span {
      position: relative;
      z-index: 1;
      display: inline-block;
      transition: transform 260ms ease, letter-spacing 260ms ease, color 220ms ease, opacity 180ms ease;
    }
    .employee-rail-soft-action.is-saved {
      animation: employeeRailSoftActionMorph 620ms cubic-bezier(0.2, 0.85, 0.22, 1) forwards;
    }
    .employee-rail-soft-action.is-saved::before {
      animation: employeeRailSoftActionSwirl 620ms cubic-bezier(0.2, 0.85, 0.22, 1) forwards;
    }
    .employee-rail-soft-action.is-saved::after {
      animation: employeeRailSoftActionCheck 220ms 360ms cubic-bezier(0.2, 0.85, 0.22, 1) forwards;
    }
    .employee-rail-soft-action.is-saved > span {
      animation: employeeRailSoftActionLabelExit 240ms ease forwards;
    }
    .employee-rail-icon-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 25px;
      width: auto;
      height: 25px;
      min-height: 25px;
      line-height: 25px;
    }
    .employee-rail-icon-action {
      width: 25px;
      height: 25px;
      min-width: 25px;
      max-width: 25px;
      min-height: 25px;
      max-height: 25px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #000001;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transform-style: preserve-3d;
      transition: color 160ms ease;
    }
    .employee-rail-icon-action:hover {
      color: #e1c16e;
    }
    .employee-rail-icon-action.is-confirming {
      color: #ffb400;
      transition: none;
    }
    .employee-rail-icon-action.is-success {
      color: var(--task-status-success);
      transition: none;
    }
    .employee-rail-icon-action.is-success-fading {
      color: #000001;
      transition: color 2000ms ease;
    }
    .employee-rail-icon-action svg {
      display: block;
      width: 15px;
      height: auto;
      max-height: 15px;
      overflow: visible;
      transform-origin: center;
    }
    .employee-rail-icon-action.is-icon-flipping svg {
      animation: employeeRailIconActionFlip 520ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .employee-rail-icon-action.is-icon-error {
      color: #c33535;
      animation: employeeRailIconActionErrorFlash 380ms linear;
    }
    .employee-rail-icon-action.is-icon-error svg {
      animation: systemStandardSaveButtonShake 380ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
    }
    @keyframes employeeRailIconActionFlip {
      0% {
        transform: scaleX(1);
      }
      50% {
        transform: scaleX(0.08);
      }
      100% {
        transform: scaleX(1);
      }
    }
    @keyframes employeeRailIconActionErrorFlash {
      0%, 100% {
        color: #000001;
      }
      22%, 78% {
        color: #c33535;
      }
    }
    @keyframes employeeRailSoftActionSwirl {
      0% {
        transform: translateX(-132%) rotate(-14deg) skewX(-18deg);
        opacity: 0.16;
      }
      42% {
        transform: translateX(-18%) rotate(-6deg) skewX(-12deg);
        opacity: 0.94;
      }
      72% {
        transform: translateX(8%) rotate(2deg) skewX(-4deg);
        opacity: 1;
      }
      100% {
        transform: translateX(0) rotate(0deg) skewX(0deg);
        opacity: 1;
      }
    }
    @keyframes employeeRailSoftActionMorph {
      0% {
        width: var(--employee-rail-soft-action-start-width, 100%);
        background: transparent;
        color: #5f6978;
        box-shadow: none;
        border-radius: 3px;
      }
      48% {
        width: var(--employee-rail-soft-action-start-width, 100%);
        background: #e1c16e;
        color: #203220;
        box-shadow: inset 0 0 0 1px rgba(32, 50, 32, 0.12);
        border-radius: 3px;
      }
      78% {
        width: 37px;
        background: #e1c16e;
        color: #203220;
        box-shadow: inset 0 0 0 1px rgba(32, 50, 32, 0.12);
        border-radius: 3px;
      }
      100% {
        width: 25px;
        background: #e1c16e;
        color: #203220;
        box-shadow: inset 0 0 0 1px rgba(32, 50, 32, 0.12);
        border-radius: 3px;
      }
    }
    @keyframes employeeRailSoftActionLabelExit {
      0% {
        opacity: 1;
        transform: translateX(0);
        letter-spacing: 0.01em;
      }
      100% {
        opacity: 0;
        transform: translateX(8px);
        letter-spacing: 0.02em;
      }
    }
    @keyframes employeeRailSoftActionCheck {
      0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
      }
      100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }
    @keyframes employeeRailTeamMemberSelect {
      0% {
        background: #ffffff;
      }
      100% {
        background: #e1c16e;
      }
    }
    @keyframes employeeRailDangerFlip {
      0% { transform: rotateX(0deg); }
      49% { transform: rotateX(90deg); }
      50% { transform: rotateX(-90deg); }
      100% { transform: rotateX(0deg); }
    }
    @keyframes employeeRailSecondaryExpand {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    @keyframes employeeRailSecondaryReveal {
      0% {
        opacity: 0;
        transform: translateX(-8px);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }
    @keyframes employeeRailSecondaryDividerReveal {
      0% {
        opacity: 0;
        transform: scaleX(0.92);
      }
      100% {
        opacity: 1;
        transform: scaleX(1);
      }
    }
    .employee-rail-action-row {
      display: grid;
      grid-template-columns:
        calc((100% - var(--employee-rail-label-width) - (var(--employee-rail-grid-gap) * 2)) / 2)
        calc(var(--employee-rail-label-width) - ((100% - var(--employee-rail-label-width) - (var(--employee-rail-grid-gap) * 2)) / 2))
        var(--employee-rail-grid-gap)
        calc((100% - var(--employee-rail-label-width) - (var(--employee-rail-grid-gap) * 2)) / 2)
        var(--employee-rail-grid-gap)
        calc((100% - var(--employee-rail-label-width) - (var(--employee-rail-grid-gap) * 2)) / 2);
      gap: 0;
      width: 100%;
      min-height: 25px;
      align-items: stretch;
    }
    .employee-rail-field-action-row {
      display: grid;
      grid-template-columns:
        var(--employee-rail-label-width)
        var(--employee-rail-grid-gap)
        calc((100% - var(--employee-rail-label-width) - (var(--employee-rail-grid-gap) * 2)) / 2)
        var(--employee-rail-grid-gap)
        calc((100% - var(--employee-rail-label-width) - (var(--employee-rail-grid-gap) * 2)) / 2);
      gap: 0;
      width: 100%;
      min-height: 25px;
      align-items: stretch;
    }
    .employee-rail-label-action-wrap {
      grid-column: 1;
      display: flex;
      justify-content: flex-start;
      width: 100%;
      min-height: 25px;
    }
    .employee-rail-field-action-wrap {
      grid-column: 5;
      display: flex;
      justify-content: flex-end;
      width: 100%;
      min-height: 25px;
    }
    .employee-rail-action-buttons {
      grid-column: 4 / 7;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: var(--employee-rail-grid-gap);
      width: 100%;
      min-height: 25px;
    }
    .employee-rail-action-buttons--single > * {
      grid-column: 2;
    }
    .employee-rail-field-action-wrap > .system-standard-save-button,
    .employee-rail-field-action-wrap > .system-standard-delete-button,
    .employee-rail-field-action-wrap > .employee-rail-soft-action,
    .employee-rail-label-action-wrap > .system-standard-save-button,
    .employee-rail-label-action-wrap > .system-standard-delete-button,
    .employee-rail-label-action-wrap > .employee-rail-soft-action,
    .employee-rail-action-buttons > .system-standard-delete-button,
    .employee-rail-action-buttons > .employee-rail-soft-action,
    .employee-rail-action-buttons > .system-standard-save-button {
      width: 100%;
      min-width: 0;
    }
    .employee-rail-action-buttons > .system-standard-save-button {
      justify-self: end;
    }
    .employee-rail-inline-action-row {
      display: grid;
      grid-template-columns: var(--employee-rail-label-width) minmax(0, 1fr);
      column-gap: 0;
      width: 100%;
      min-height: 25px;
      align-items: stretch;
    }
    .employee-rail-inline-actions {
      grid-column: 2;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 25px;
      width: 100%;
      height: 25px;
      color: #5f6978;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
    }
    .employee-rail-inline-actions .system-standard-save-button,
    .employee-rail-inline-actions .employee-rail-soft-action,
    .employee-rail-inline-actions .system-standard-delete-button {
      width: auto;
      min-width: 0;
      flex: 0 0 auto;
    }

    .top-employee {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      font-weight: 700;
      color: #f2f7ef;
    }
    .top-employee select {
      width: auto;
      min-width: 190px;
      font-size: 11px;
      padding: 4px 8px;
      height: 25px;
      background: #ffffff;
      border-color: #b8c7b8;
      color: #203220;
    }
    .status {
      border: 0;
      border-radius: 0;
      padding: 0;
      background: transparent;
      min-height: auto;
      display: flex;
      align-items: center;
      margin-right: 12px;
    }
    .top-logo {
      display: block;
      height: 25px;
      max-height: 25px;
      width: auto;
      max-width: 220px;
      object-fit: contain;
    }
    .topbar .btn.subtle {
      background: rgba(255, 255, 255, 0.12);
      border-color: #ffffff;
      color: #ffffff;
      font-weight: 400;
    }
    .topbar .btn.subtle:hover {
      background: rgba(255, 255, 255, 0.2);
      border-color: #ffffff;
      color: #ffffff;
    }
    .topbar .btn.subtle.toggle-active {
      background: rgba(255, 255, 255, 0.24);
      border-color: #ffffff;
      color: #ffffff;
    }
    .auth-overlay {
      position: fixed;
      inset: 0;
      z-index: 3000;
      background: #203220;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 32px 24px;
    }
    .confirm-overlay {
      position: fixed;
      inset: 0;
      z-index: 1600;
      background: rgba(246, 247, 244, 0.34);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .confirm-overlay.hidden { display: none !important; }
    .confirm-card {
      width: 100%;
      max-width: 440px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      box-shadow: 0 26px 64px rgba(18, 40, 70, 0.24);
      padding: 18px;
      display: grid;
      gap: 12px;
    }
    .confirm-title {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .confirm-message {
      margin: 0;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }
    .confirm-actions {
      display: flex;
      justify-content: flex-end;
      gap: 8px;
    }
    .auth-card {
      width: min(100%, 460px);
      display: grid;
      justify-items: stretch;
      gap: 22px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      box-shadow: none;
    }
    .auth-logo-wrap {
      display: flex;
      justify-content: center;
      margin-bottom: 36px;
    }
    .auth-logo {
      display: block;
      width: min(66%, 300px);
      height: auto;
      max-width: 100%;
      object-fit: contain;
    }
    .auth-panel {
      display: grid;
      gap: 12px;
      padding: 0;
      background: transparent;
    }
    .auth-panel input {
      background: rgba(255, 255, 255, 0.08);
      border-color: rgba(255, 255, 255, 0.28);
      color: #ffffff;
    }
    .auth-panel input::placeholder {
      color: rgba(255, 255, 255, 0.7);
    }
    .auth-panel .actions-row {
      justify-content: center;
    }
    .auth-panel .btn.primary {
      min-width: 180px;
      justify-content: center;
      background: linear-gradient(180deg, #e1c16e 0%, #b89a4e 100%);
      border-color: #b89a4e;
      color: #203220;
    }
    .auth-panel .btn.primary:hover {
      background: linear-gradient(180deg, #ebcb77 0%, #c2a556 100%);
      border-color: #c2a556;
      color: #203220;
    }

    .layout {
      display: grid;
      grid-template-columns: var(--layout-col-1) var(--layout-col-2) var(--layout-col-3);
      height: calc(100% - 56px);
      padding: 25px 12px var(--main-layout-bottom-padding) var(--layout-left-padding);
      gap: var(--layout-gap);
      background: #f8f8f8;
      min-height: 0;
    }

    .column {
      border: 0;
      border-radius: var(--radius);
      overflow: visible;
      background: transparent;
      min-height: 0;
    }
    #taskColumn {
      position: relative;
      display: flex;
      flex-direction: column;
      background: transparent;
    }
    #processColumn {
      position: relative;
      display: flex;
      flex-direction: column;
      background: transparent;
    }
    #clientColumn {
      display: flex;
      flex-direction: column;
      background: transparent;
    }
    #clientColumn .section-header {
      background: #ffffff;
      border-bottom: 0;
      padding-left: 0;
      padding-right: 0;
    }
    #clientColumn .section-header::after {
      content: none;
    }
    #clientColumn .column-title {
      padding: 16px 50px 0 0;
    }
    .column-title {
      margin: 0;
      padding: 16px 16px 0;
      font-size: 24px;
      font-weight: 400;
      line-height: 1.1;
      color: #203220;
    }
    #taskColumn .section-header,
    #processColumn .section-header {
      background: #DCDEDC !important;
      border-bottom: 0 !important;
      backdrop-filter: none !important;
    }
    #taskColumn .section-header {
      display: none;
      background: #ffffff !important;
      padding-left: 0;
      padding-right: 0;
    }
    #taskColumn .section-header::after,
    #processColumn .section-header::after {
      content: none;
    }
    #processColumn .section-header {
      display: none;
      background: #ffffff !important;
      padding-left: 0;
      padding-right: 0;
    }
    #taskColumn .column-title,
    #processColumn .column-title {
      padding: 16px 50px 0;
    }
    #taskColumn .column-title {
      padding: 16px 50px 0;
    }
    #processColumn .column-title {
      padding: 16px 0 0 50px;
    }
    #taskColumn::before,
    #processColumn::before {
      content: "";
      position: absolute;
      left: -25px;
      top: 92.5px;
      bottom: calc(var(--left-action-rail-bottom) - var(--main-layout-bottom-padding));
      width: 1px;
      background: #D9D9D9;
      pointer-events: none;
    }
    #taskColumn #taskList,
    #processColumn .content {
      background: transparent;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border-bottom-left-radius: 3px;
      border-bottom-right-radius: 3px;
    }
    #clientColumn #clientList {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: 50px 50px 16px 0;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      margin-top: 0;
    }
    #clientColumn #clientActionsBottom {
      margin-top: auto !important;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
    }
    #clientInfoPanel {
      position: fixed;
      left: calc(var(--app-border-width) + var(--layout-left-padding) + var(--card-width) + 25px);
      top: 81px;
      transform: none;
      display: grid;
      grid-template-columns: 200px 800px;
      grid-template-rows: minmax(0, 1fr) 50px;
      width: 1000px;
      height: 475px;
      max-height: calc(100vh - 106px);
      overflow: hidden;
      z-index: 1300;
      border: 0;
      border-radius: 3px;
      background: #f2f2f2;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      transform-origin: center center;
      padding: 0;
    }
    #taskColumn #taskList {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      padding: 50px 50px 0;
      box-sizing: border-box;
      margin-top: 0;
    }
    #taskColumn #taskActionsBottom {
      margin-top: auto !important;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      align-items: center;
    }
    #taskColumn #taskBottomRow {
      margin-top: auto !important;
      margin-bottom: 13px !important;
      margin-left: 0 !important;
      margin-right: 0 !important;
      display: flex;
      justify-content: center;
      gap: 0;
      align-items: center;
      flex-wrap: nowrap;
    }
    #taskColumn #taskMonthBottom {
      display: inline-flex;
      gap: 6px;
      align-items: center;
      justify-content: center;
      margin: 0 auto;
      min-width: 0;
      flex: 0 0 auto;
    }
    #taskColumn #taskMonthDisplay {
      width: auto;
      min-width: 0;
      justify-content: center;
      text-align: center;
      flex: 1 1 auto;
    }
    #taskColumn #taskStats {
      margin-top: 10px !important;
    }
    #processColumn .content {
      flex: 1 1 auto;
      min-height: 0;
      overflow: auto;
      margin-top: 0;
      padding: 50px 0 0 50px;
      gap: 10px;
    }
    #mainLayout.task-rail-overview #taskBottomRow,
    #mainLayout.task-rail-overview #taskStats {
      display: none !important;
    }
    #mainLayout.task-rail-overview #clientList,
    #mainLayout.task-rail-overview #taskList,
    #mainLayout.task-rail-overview #processList {
      display: grid;
      align-content: start;
      gap: 0;
    }
    #processColumn #processActionsBottom {
      margin-top: auto !important;
      display: flex;
      justify-content: flex-end;
      gap: 8px;
      align-items: center;
    }
    #clientActionsBottom .btn,
    #taskActionsBottom .btn,
    #taskBottomRow .btn,
    #processActionsBottom .btn {
      background: #203220;
      border-color: transparent;
      color: #ffffff;
      font-weight: 400;
    }
	    #addClientBtn,
	    #toggleTaskFormBtn,
	    #addTodoBtn,
	    #addProcessBtn {
	      min-width: 110px;
	    }
    #taskColumn #taskMonthBottom .btn {
      position: relative;
      min-width: 110px;
      min-height: 34px;
      padding: 7px 14px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: #ffffff;
      border: 1px solid #203220;
      color: #203220;
      font-weight: 700;
      line-height: 1;
      box-sizing: border-box;
    }
    #taskColumn #prevTaskMonthBtn,
    #taskColumn #nextTaskMonthBtn {
      min-width: 34px !important;
      width: 34px !important;
      padding: 7px 0;
      flex: 0 0 34px !important;
    }
	    #taskColumn #taskMonthDisplay {
	      min-width: 160px;
	      padding-left: 10px;
	      padding-right: 10px;
	    }
    #taskColumn #taskMonthBottom .btn:hover {
      background: #f7faf7;
      border-color: #203220;
      color: #203220;
    }
    #notificationUnreadBadge {
      position: absolute;
      top: -8px;
      right: -8px;
      min-width: 20px;
      height: 20px;
      padding: 0 6px;
      border-radius: 999px;
      background: #17351d;
      color: #fff;
      font-size: 11px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,255,255,0.95);
      line-height: 1;
    }
    #taskColumn #taskBottomRow .btn {
      width: auto;
      flex: 0 0 auto;
    }
    #clientActionsBottom .btn:hover,
    #taskActionsBottom .btn:hover,
    #taskBottomRow .btn:hover,
    #processActionsBottom .btn:hover {
      background: #1a2a1a;
      border-color: transparent;
      color: #ffffff;
    }
    #clientActionsBottom,
    #taskActionsBottom,
    #taskBottomRow,
    #processActionsBottom {
      border: 0;
      background: transparent;
      padding: 0;
      margin-left: 14px !important;
      margin-right: 14px !important;
    }
    #clientActionsBottom {
      margin-left: 16px !important;
      margin-right: 16px !important;
    }
	    #taskColumn #taskBottomRow {
	      margin-left: 0 !important;
	      margin-right: 0 !important;
	    }
    #clientActionsBottom,
    #taskBottomRow,
    #processActionsBottom {
      padding-top: var(--column-vertical-gap);
    }
    .notification-panel {
      position: absolute;
      left: var(--employee-rail-menu-left);
      bottom: 125px;
      width: 275px;
      height: 575px;
      display: grid;
      grid-template-rows: 475px 25px;
      gap: 25px;
      padding: 25px;
      background: #ffffff;
      border: 1px solid #203220;
      border-radius: 3px;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
      overflow: hidden;
      z-index: 1110;
      color: #000000;
      box-sizing: border-box;
    }
    .notification-panel.hidden {
      display: none !important;
    }
    .notification-panel-actions {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 225px;
      height: 25px;
    }
    .notification-list {
      overflow-x: hidden;
      overflow-y: auto;
      display: grid;
      align-content: start;
      grid-auto-rows: auto;
      gap: 25px;
      width: 225px;
      height: 475px;
      min-height: 0;
      padding: 0;
      background: transparent;
    }
    .notification-item {
      width: 225px;
      min-height: 75px;
      max-height: 75px;
      border: 0;
      border-bottom: 1px solid #203220;
      border-radius: 0;
      background: #ffffff;
      padding: 0;
      box-shadow: none;
      cursor: pointer;
      overflow: hidden;
      transition: max-height 220ms cubic-bezier(0.2, 0.85, 0.22, 1), background 140ms ease;
      box-sizing: border-box;
    }
    .notification-item.is-unread {
      background: #ffffff;
    }
    .notification-item.is-expanded {
      max-height: 225px;
    }
    .notification-item-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-auto-rows: auto;
      gap: 0;
      width: 225px;
      min-height: 75px;
      padding: 0;
      box-sizing: border-box;
    }
    .notification-item-summary {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      line-height: 25px;
      color: #000000;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .notification-item-summary strong {
      font-weight: 600;
    }
    .notification-item-action-lines {
      min-width: 0;
    }
    .notification-item-action-line {
      margin: 0;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      color: #000000;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .notification-item-action-lines .notification-item-action-line + .notification-item-action-line {
      margin-top: 0;
    }
    .notification-item-meta,
    .notification-item-time,
    .notification-empty {
      margin: 0;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      color: #bfbfbf;
    }
    .notification-item-meta,
    .notification-item-time {
      white-space: nowrap;
    }
    .notification-item-meta-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      column-gap: 25px;
      align-items: center;
      width: 225px;
      height: 25px;
    }
    .notification-item-meta {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
    }
    .notification-item-details {
      display: grid;
      gap: 0;
      max-height: 0;
      opacity: 0;
      overflow: hidden;
      transition: max-height 220ms cubic-bezier(0.2, 0.85, 0.22, 1), opacity 140ms ease;
    }
    .notification-item.is-expanded .notification-item-details {
      max-height: 150px;
      opacity: 1;
    }
    .notification-item-body {
      margin: 0;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      color: #000000;
      overflow-wrap: anywhere;
    }
    .email-diagnostics-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
      margin-bottom: 12px;
    }
    .notification-read-btn {
      width: auto;
      height: 25px;
      min-height: 25px;
      padding: 0;
      border: 0;
      background: transparent;
      color: #000000;
      font: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      text-align: left;
      cursor: pointer;
    }
    .notification-read-btn:hover {
      background: transparent;
      color: #203220;
      font-weight: 600;
    }
    .notification-item:not(.is-unread) .notification-item-summary,
    .notification-item:not(.is-unread) .notification-item-action-line,
    .notification-item:not(.is-unread) .notification-item-meta,
    .notification-item:not(.is-unread) .notification-item-body,
    .notification-item:not(.is-unread) .notification-item-time,
    .notification-item:not(.is-unread) .notification-read-btn {
      color: #8a8a8a;
    }
    .notification-item.is-unread .notification-item-meta {
      color: #000000;
    }
    .brass-flash {
      animation: brassFlashPulse 1.35s ease-out 1;
    }
    @keyframes brassFlashPulse {
      0% {
        border-color: #e1c16e;
        box-shadow: 0 0 0 2px rgba(225, 193, 110, 0.28);
      }
      55% {
        border-color: #e1c16e;
        box-shadow: 0 0 0 4px rgba(225, 193, 110, 0.18);
      }
      100% {
        border-color: inherit;
        box-shadow: none;
      }
    }

    .section-header {
      position: sticky;
      top: 0;
      z-index: 3;
      background: rgba(255, 255, 255, 0.96);
      backdrop-filter: blur(8px);
      border-bottom: 1px solid var(--border);
      padding: 10px 14px 0;
      min-height: 0;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
    .header-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    #clientColumn .header-topline,
    #taskColumn .header-topline,
    #processColumn .header-topline {
      justify-content: flex-end;
    }
    #processColumn .header-topline::after {
      content: none;
      display: none;
    }
    .header-topline .section-subtitle {
      margin: 0;
    }

    .section-title {
      margin: 0;
      font-size: 12px;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0.6px;
      color: var(--muted);
    }

    .section-subtitle {
      margin: 6px 0 0;
      font-size: 18px;
      font-weight: 700;
    }

    .small-note { font-size: 11px; color: var(--muted); margin-top: 8px; }

    .actions-row {
      margin-top: 10px;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    .actions-sub {
      margin-top: 6px;
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .header-topline .actions-sub {
      margin-top: 0;
      flex-wrap: nowrap;
      justify-content: flex-end;
    }
    #processColumn .header-topline .actions-sub {
      min-height: 25px;
    }
    .employee-row {
      margin-top: 0 !important;
      margin-bottom: 6px;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      flex-wrap: nowrap;
    }
    .employee-name {
      width: 340px;
      min-width: 340px;
      max-width: 340px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
    }
    .employee-actions {
      display: grid;
      grid-template-columns: 74px 96px 90px 64px;
      align-items: center;
      gap: 6px;
    }
    .employee-actions .btn { width: 100%; }

    .btn {
      border: 1px solid var(--border);
      background: #fff;
      color: var(--ink);
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      padding: 7px 10px;
      border-radius: var(--radius);
      cursor: pointer;
    }

    .btn:hover { background: var(--panel-soft); }
    .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn.danger { color: var(--danger); border-color: #f2c9ce; background: #fff5f6; }
    .btn.subtle { font-size: 11px; padding: 4px 8px; font-weight: 400; color: var(--muted); }
    .btn.toggle-active {
      background: var(--accent-soft);
      border-color: rgba(15, 108, 189, 0.35);
      color: var(--accent);
    }
    .list-wrap { padding: 10px; }
    #clientList { padding: 16px; box-sizing: border-box; }

    .item {
      width: 100%;
      text-align: left;
      padding: 10px;
      border: 1px solid transparent;
      border-radius: var(--radius);
      background: transparent;
      margin-bottom: 10px;
      cursor: pointer;
      font-family: inherit;
    }
    #clientList .item:last-child { margin-bottom: 0; }
    #clientList .empty { margin: 0; }
    .client-section-divider {
      position: relative;
      height: 25px;
      margin: 25px 0;
      padding-top: 0;
      display: flex;
      align-items: center;
    }
    .client-section-divider.no-line {
      margin-top: 0;
    }
    .client-section-divider::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: auto;
      bottom: 0;
      border-top: 1px solid #cfd4dc;
      opacity: 0.75;
      transform: none;
    }
    .client-section-divider.no-line::before {
      display: none;
    }
    .client-section-label {
      margin: 0;
      display: flex;
      align-items: center;
      line-height: 25px;
      font-size: 10px;
      font-weight: 500;
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0.4px;
    }
    .completed-task-accordion-toggle {
      display: inline-flex;
      align-items: center;
      height: 25px;
      margin: 0;
      padding: 0;
      border: 0;
      background: transparent;
      color: #5f6978;
      font: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      cursor: pointer;
    }
    .completed-task-accordion-body {
      display: none;
      overflow: hidden;
      padding-top: 25px;
    }
    .completed-task-accordion-body.is-open,
    .completed-task-accordion-body.is-closing {
      display: block;
    }

    .item:hover { background: #ffffff; border-color: transparent; }
    .item.active {
      background: linear-gradient(180deg, #203220 0%, #0d200e 100%);
      border-color: transparent;
      box-shadow: 3.54px 3.54px 5px rgba(0, 0, 0, 0.5);
    }
    .item.missing-owner,
    .item.missing-owner:hover,
    .item.missing-owner.active {
      border-color: #ff0000;
    }
    .item.economic-blocked,
    .item.economic-blocked:hover,
    .item.economic-blocked.active {
      border-color: #d22f27;
      box-shadow: inset 0 0 0 1px rgba(210, 47, 39, 0.15);
    }
    .item.ended {
      opacity: 0.55;
      background: #f5f6f8;
      border-color: #d7dbe3;
    }

    .item-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      min-width: 0;
    }
    .item-main {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100%;
      flex: 1 1 auto;
      min-width: 0;
    }
    .item-main > div:first-child {
      min-width: 0;
    }
    .item-status-stack {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
      flex: 0 0 auto;
      align-self: flex-start;
    }
    .item-bottom-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      margin-top: 8px;
    }
    .item-pills-row {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      align-items: center;
      min-width: 0;
    }
    .item-pills-row .status-pill,
    .item-pills-row .item-task-stat {
      width: auto;
      min-width: 0;
      flex: 0 0 auto;
    }
    .item-pills-row .item-task-stats {
      display: flex;
      flex-direction: row;
      gap: 6px;
      align-items: center;
    }

    .item-title {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .item-id { margin: 2px 0 0; font-size: 10px; color: var(--muted); }
    .item-meta { margin: 3px 0 0; font-size: 10px; color: var(--muted); }
    .item.active .item-title,
    .item.active .item-id {
      color: #ffffff !important;
    }
    .item.active .item-meta {
      color: rgba(255, 255, 255, 0.84) !important;
    }
    .item-task-stats {
      display: flex;
      flex-direction: column;
      gap: 4px;
      align-items: flex-end;
    }
    .item-actions-bottom {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 0 0 auto;
    }
    .item-task-stat {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--client-pill-width);
      height: 24px;
      border: 1px solid transparent;
      border-radius: 3px;
      padding: 0 10px;
      font-size: 10px;
      font-weight: 400;
      letter-spacing: 0.2px;
      color: #000000;
      background: #ffffff;
      border-color: #d1d1d1;
      white-space: nowrap;
      box-sizing: border-box;
    }
    .item.active .item-title {
      color: #000000;
    }
    .item.active .item-meta,
    .item.active .item-id {
      color: #000000;
    }
    .item.active .item-task-stat {
      color: #000000;
      background: #ffffff;
      border-color: #d1d1d1;
    }
    .item.active .status-pill.status-green {
      background: #d9f2e4;
      border-color: #8ed0ac;
      color: #0f7b6c;
    }
    .item.active .status-pill.status-orange {
      background: #fff1cc;
      border-color: #ffb400;
      color: #ffb400;
    }
    .item.active .status-pill.status-red {
      background: #ffd7dc;
      border-color: #ff2000;
      color: #ff2000;
    }
    #clientList .client-list-item {
      display: block;
      width: 370px;
      height: 75px;
      padding: 0;
      margin-bottom: 25px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      box-shadow: none;
      overflow: hidden;
      transform: translateY(0);
      transition:
        transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    #clientList .client-list-item:hover,
    #clientList .client-list-item.active,
    #clientList .client-list-item.missing-owner,
    #clientList .client-list-item.missing-owner:hover,
    #clientList .client-list-item.missing-owner.active,
    #clientList .client-list-item.economic-blocked,
#clientList .client-list-item.economic-blocked:hover,
#clientList .client-list-item.economic-blocked.active,
#clientList .client-list-item.ended {
      background: #ffffff;
      border-color: transparent;
      box-shadow: none;
    }
    #clientList .client-list-item.active {
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.75);
      transform: translateY(-3px);
    }
    #clientList .client-list-item.active.client-list-item--lift {
      animation: clientCardLift 320ms cubic-bezier(0.18, 1, 0.32, 1) both;
    }
    #clientList .client-list-item.ended {
      opacity: 0.55;
    }
    #clientList .client-card-row {
      display: grid;
      grid-template-columns: 25px 25px 260px 25px 15px 20px;
      grid-template-rows: 12.5px 25px 25px 12.5px;
      align-items: start;
      width: 370px;
      height: 75px;
      min-width: 0;
    }
    #clientList .client-status-marker {
      display: block;
      grid-column: 1;
      grid-row: 1 / -1;
      width: 25px;
      height: 75px;
      border-radius: 3px 0 0 3px;
    }
    #clientList .client-status-marker.status-green {
      background: #0f7b6c;
      border: 0;
    }
    #clientList .client-status-marker.status-orange {
      background: #ffb400;
      border: 0;
    }
    #clientList .client-status-marker.status-red {
      background: #ff2000;
      border: 0;
    }
    #clientList .client-card-name {
      display: block;
      grid-column: 3;
      grid-row: 2;
      width: 260px;
      max-width: 260px;
      height: 25px;
      min-width: 0;
      margin: 0;
      padding: 0;
      color: #000000;
      font-size: 16px;
      font-weight: 600;
      line-height: 25px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      justify-self: start;
      align-self: start;
    }
    #clientList .client-list-item.active .client-card-name {
      font-weight: 600;
    }
    #clientList .client-card-owner {
      display: block;
      grid-column: 3;
      grid-row: 3;
      width: 260px;
      max-width: 260px;
      height: 25px;
      min-width: 0;
      margin: 0;
      padding: 0;
      color: #000000;
      font-size: 12px;
      font-weight: 400;
      line-height: 25px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      justify-self: start;
      align-self: start;
    }
    #clientList .client-card-edit-slot {
      grid-column: 5;
      grid-row: 2;
      width: 15px;
      height: 15px;
      align-self: center;
      overflow: hidden;
    }
    #clientList .client-card-edit-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #000000;
      font-family: inherit;
      font-size: 12px;
      font-weight: 400;
      line-height: 15px;
      text-align: center;
      cursor: pointer;
      opacity: 0;
      transform: translateX(-8px);
      pointer-events: none;
    }
    #clientList .client-card-edit-link svg {
      display: block;
      width: 15px;
      height: 15px;
    }
    #clientList .client-list-item.active .client-card-edit-link {
      opacity: 1;
      transform: translateX(0);
      pointer-events: auto;
    }
    #clientList .client-list-item.active .client-card-edit-link.client-card-edit-link--reveal {
      animation: clientCardEditReveal 440ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    @keyframes clientCardEditReveal {
      0% {
        opacity: 0;
        transform: translateX(-8px);
      }
      100% {
        opacity: 1;
        transform: translateX(0);
      }
    }
    @keyframes clientCardLift {
      0% {
        transform: translateY(0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      }
      100% {
        transform: translateY(-3px);
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.75);
      }
    }
    .status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--client-pill-width);
      height: 24px;
      padding: 0 10px;
      border-radius: 3px;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2px;
      border: 1px solid transparent;
      white-space: nowrap;
      box-sizing: border-box;
    }
    .status-green { background: #eaf8f0; color: #0f7b6c; border-color: #bde8d5; }
    .status-orange { background: #fff1cc; color: #ffb400; border-color: #ffb400; }
    .status-red { background: #ffecef; color: #ff2000; border-color: #ff2000; }

    .chevron { font-size: 11px; color: var(--muted); }
    .drag { cursor: grab; user-select: none; padding: 2px 6px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 11px; color: var(--muted); }
    .dragging { opacity: 0.45; }
    .drop-before { box-shadow: inset 0 2px 0 var(--accent); }
    .drop-after { box-shadow: inset 0 -2px 0 var(--accent); }

    .panel { padding: 10px; border-top: 1px solid var(--border); background: #fcfdff; }
    .panel.hidden { display: none; }
    .hidden { display: none !important; }
    #taskFormPanel.inline-edit {
      margin: 0 0 10px;
      border: 1px solid var(--border);
      border-top: 1px solid var(--border);
      border-radius: var(--radius);
    }
    .editor-backdrop {
      position: fixed;
      inset: 0;
      z-index: 1250;
      background: rgba(246, 247, 244, 0.34);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    .editor-backdrop.hidden { display: none !important; }
    .app.modal-active #clientList .client-list-item.active {
      position: relative;
      z-index: 1260;
    }
    .editor-modal {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(920px, calc(100vw - 64px));
      max-height: min(84vh, 900px);
      overflow: auto;
      z-index: 1300;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      box-shadow: 0 26px 64px rgba(18, 40, 70, 0.24);
      padding: 18px;
    }
    #employeeCreateModal {
      z-index: 1700;
      width: min(640px, calc(100vw - 64px));
      max-height: min(84vh, 860px);
    }
    .editor-modal.hidden { display: none !important; }
    .editor-modal-body {
      display: grid;
      gap: 12px;
    }
    .editor-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 12px;
      padding-bottom: 12px;
      border-bottom: 1px solid var(--border);
    }
    .editor-modal-title {
      margin: 0;
      font-size: 14px;
      font-weight: 700;
      color: var(--ink);
    }
    .editor-modal-close {
      flex: 0 0 auto;
    }
    .editor-modal.edit-closing {
      pointer-events: none;
    }
    #clientInfoPanel .btn.primary,
    #taskFormPanel .btn.primary,
    #processFormPanel .btn.primary {
      background: #203220;
      border-color: transparent;
      color: #ffffff;
    }
    #clientInfoPanel .btn.primary:hover,
    #taskFormPanel .btn.primary:hover,
    #processFormPanel .btn.primary:hover {
      background: #1a2a1a;
      border-color: transparent;
      color: #ffffff;
    }
    .app.modal-active .topbar,
    .app.modal-active #mainLayout,
    .app.modal-active #employeePanel {
      user-select: none;
    }
    #taskFormPanel {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(760px, calc(100vw - 64px));
      max-height: min(84vh, 900px);
      overflow: auto;
      z-index: 1300;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      box-shadow: 0 26px 64px rgba(18, 40, 70, 0.24);
      padding: 18px;
      margin: 0;
    }
    #taskFormPanel.inline-edit {
      margin: 0;
      border-top: 0;
    }
    .task-card.make-room {
      animation: makeRoom 220ms ease-out;
    }
    @keyframes makeRoom {
      from { transform: translateY(-6px); }
      to { transform: translateY(0); }
    }
    .form-section {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 8px;
      background: #fff;
    }
    .form-section-title {
      margin: 0 0 8px;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0.5px;
    }
    .global-submenu {
      border-top: 0;
      background: #fff;
      padding: 25px 16px 16px;
    }
    #employeePanel {
      position: absolute;
      top: 56px;
      left: 0;
      right: 0;
      z-index: 1100;
      border-top: 1px solid var(--border);
      border-bottom: 1px solid var(--border);
      background: #ffffff;
      box-shadow: 0 12px 28px rgba(18, 40, 70, 0.12);
      max-height: none;
      overflow: visible;
    }
    #employeePanel .grid {
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }
    #employeePanel .form-section {
      padding: 7px;
    }
    .client-edit-tabbar .btn.subtle {
      font-size: 11px;
      padding: 4px 8px;
      font-weight: 400;
      color: #000;
      border: 1px solid var(--border);
      background: #fff;
    }
    .client-edit-tabbar .btn.subtle.toggle-active {
      color: #000;
      border-color: #000;
      background: #fff;
    }
    .admin-metrics-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    .admin-metric {
      border: 1px solid #000;
      border-radius: var(--radius);
      background: #fff;
      padding: 10px;
    }
    .admin-metric .k {
      font-size: 10px;
      text-transform: none;
      letter-spacing: 0.5px;
      color: var(--muted);
      font-weight: 700;
    }
    .admin-metric .v {
      margin-top: 2px;
      font-size: 13px;
      font-weight: 600;
    }
    .admin-metric .m {
      margin-top: 3px;
      font-size: 11px;
      color: var(--muted);
      font-weight: 400;
    }
    .admin-metric-value-row {
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
    }
    .admin-metric-value-row .v {
      margin-top: 0;
      flex: 0 0 auto;
    }
    .admin-metric-value-row .admin-overview-details {
      margin-top: 0;
      flex: 0 0 auto;
    }
    .admin-metric-expandable {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      column-gap: 10px;
      row-gap: 6px;
    }
    .admin-metric-expandable .v {
      grid-column: 1;
      margin-top: 0;
    }
    .admin-metric-expandable .admin-overview-details {
      grid-column: 2;
      margin-top: 0;
      justify-self: end;
    }
    .admin-metric-expandable .admin-metric-list {
      grid-column: 1 / -1;
      display: none;
    }
    .admin-metric-expandable .admin-overview-details[open] + .admin-metric-list {
      display: grid;
    }
    .admin-list {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      overflow: hidden;
    }
    .admin-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 10px;
      align-items: center;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
    }
    .admin-row:last-child { border-bottom: 0; }
    .admin-status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 84px;
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .employee-stats-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 10px;
    }
    .employee-stat-card {
      border: 1px solid #000;
      border-radius: var(--radius);
      background: #fff;
      padding: 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      flex-wrap: wrap;
    }
    .employee-stat-head {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      flex: 1 1 auto;
      flex-wrap: wrap;
    }
    .employee-stat-name {
      font-size: 12px;
      font-weight: 600;
      margin: 0;
    }
    .employee-stat-kpis {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      flex: 1 1 auto;
    }
    .employee-kpi {
      border: 1px solid #000;
      border-radius: var(--radius);
      background: #fff;
      padding: 5px 7px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .employee-kpi .k {
      font-size: 10px;
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0.5px;
      font-weight: 700;
    }
    .employee-kpi .v {
      font-size: 13px;
      font-weight: 600;
    }
    .employee-status-row {
      display: inline-flex;
      gap: 6px;
      flex-wrap: wrap;
      align-items: center;
      flex: 1 0 100%;
    }
    .employee-status-pill {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 84px;
      padding: 5px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 700;
      border: 1px solid transparent;
      white-space: nowrap;
    }
    .deadline-mail-layout {
      display: grid;
      grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1fr) minmax(180px, 0.34fr);
      gap: 10px;
      align-items: stretch;
      max-height: calc(100vh - 180px);
      min-height: 0;
    }
    .deadline-mail-layout > .form-section,
    .deadline-mail-layout > .deadline-mail-preview,
    .deadline-mail-layout > .deadline-mail-tags {
      min-height: 0;
      max-height: calc(100vh - 180px);
      overflow: auto;
    }
    .deadline-mail-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 8px;
    }
    .deadline-mail-meta strong {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .deadline-mail-actions {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 8px;
    }
    .deadline-mail-section-list {
      display: grid;
      gap: 8px;
      margin-top: 8px;
    }
    .deadline-mail-section-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      padding: 8px;
      display: grid;
      gap: 6px;
    }
    .deadline-mail-preview {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      padding: 12px;
      display: grid;
      gap: 10px;
      min-height: 100%;
      min-width: 0;
    }
    .deadline-mail-preview-subject {
      font-size: 11px;
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0.5px;
    }
    .deadline-mail-preview-body {
      display: grid;
      gap: 12px;
      font-size: 12px;
      line-height: 1.55;
      color: var(--ink);
    }
    .deadline-mail-preview-body p {
      margin: 0;
    }
    .deadline-mail-preview-section {
      display: grid;
      gap: 6px;
      padding-top: 10px;
      border-top: 1px solid var(--line);
    }
    .deadline-mail-preview-section:first-child {
      padding-top: 0;
      border-top: 0;
    }
    .deadline-mail-preview-section h4 {
      margin: 0;
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .reporting-mail-preview-section-title {
      margin: 0 0 8px;
      font-family: Aptos, 'Segoe UI', sans-serif;
      font-size: 18px;
      font-weight: 700;
      line-height: 1.35;
      letter-spacing: 0;
      color: var(--ink);
      text-transform: capitalize;
    }
    .reporting-mail-preview-section-body {
      margin: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.45;
      color: var(--ink);
    }
    .reporting-mail-preview-section-body p,
    .reporting-mail-preview-section-body ul,
    .reporting-mail-preview-section-body ol {
      margin: 0 0 6px;
    }
    .reporting-mail-preview-section-body p:last-child,
    .reporting-mail-preview-section-body ul:last-child,
    .reporting-mail-preview-section-body ol:last-child {
      margin-bottom: 0;
    }
    .reporting-mail-preview-section-footer {
      margin: 6px 0 0;
      font-size: 10px;
      font-weight: 400;
      line-height: 1.45;
      color: var(--ink);
    }
    .reporting-mail-preview-section-footer p,
    .reporting-mail-preview-section-footer ul,
    .reporting-mail-preview-section-footer ol {
      margin: 0 0 6px;
    }
    .reporting-mail-preview-section-footer p:last-child,
    .reporting-mail-preview-section-footer ul:last-child,
    .reporting-mail-preview-section-footer ol:last-child {
      margin-bottom: 0;
    }
    .reporting-mail-revenue-meta {
      display: inline-table;
      margin: 4px 0 14px;
      border-collapse: collapse;
      font-size: 14px;
      color: var(--ink);
    }
    .reporting-mail-revenue-meta th,
    .reporting-mail-revenue-meta td {
      font-size: 14px;
      line-height: 1.45;
      color: var(--ink);
      white-space: nowrap;
    }
    .reporting-mail-revenue-meta thead th {
      padding: 0 14px 4px 0;
      font-weight: 700;
    }
    .reporting-mail-revenue-meta thead th:not(:first-child),
    .reporting-mail-revenue-meta tbody td:not(:first-child) {
      min-width: 132px;
    }
    .reporting-mail-revenue-meta thead th:last-child {
      padding-right: 0;
    }
    .reporting-mail-revenue-meta thead th:not(:first-child) {
      text-align: right;
    }
    .reporting-mail-revenue-meta tbody td {
      padding: 0 14px 4px 0;
      font-weight: 400;
      text-align: left;
    }
    .reporting-mail-revenue-meta tbody td:not(:first-child) {
      text-align: right;
    }
    .reporting-mail-revenue-meta tbody tr:last-child td {
      padding-bottom: 0;
    }
    .reporting-mail-revenue-meta tbody td:last-child {
      padding-right: 0;
    }
    .reporting-mail-revenue-chart {
      margin-top: 14px;
      border: 1px solid #91a59a;
      padding: 14px 14px 4px;
      background: #fff;
    }
    .reporting-mail-revenue-chart svg {
      display: block;
      width: 100%;
      height: auto;
    }
    .reporting-mail-revenue-chart-empty,
    .reporting-mail-revenue-chart-loading,
    .reporting-mail-revenue-chart-error {
      font-size: 11px;
      color: var(--muted);
    }
    .reporting-mail-revenue-chart-error {
      color: #7a2e2e;
    }
    .deadline-mail-preview ul {
      margin: 0;
      padding-left: 18px;
      display: grid;
      gap: 4px;
    }
    .deadline-mail-empty {
      color: var(--muted);
      font-size: 12px;
    }
    .series-date-picker-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: end;
    }
    #adminTaskSeriesDatesWrap > .series-date-picker-row,
    #adminTaskSeriesDatesWrap > .series-date-list {
      grid-column: 2;
    }
    .series-date-list {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }
    .series-date-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 3px;
      background: #fff;
    }
    .series-date-item-label {
      min-width: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: 12px;
      color: var(--text);
    }
    .section-switcher {
      display: grid;
      gap: 4px;
      margin-top: 8px;
    }
    .section-switcher select {
      width: 100%;
    }
    .reporting-mail-collapsed .rich-text-editor {
      min-height: 36px;
      max-height: 36px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      padding-top: 8px;
      padding-bottom: 8px;
    }
    .reporting-mail-collapsed .rich-text-editor p {
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .deadline-mail-form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .deadline-mail-field-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 4px;
    }
    .deadline-mail-field-head label {
      margin: 0;
    }
    .rich-text-field {
      display: grid;
      gap: 6px;
    }
    .rich-text-toolbar {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .rich-text-toolbar.hidden {
      display: none;
    }
    .rich-text-toolbar .btn {
      min-width: 28px;
      padding: 4px 7px;
    }
    .rich-text-editor {
      min-height: 96px;
      padding: 8px 10px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: #fff;
      font-size: 12px;
      line-height: 1.45;
      color: var(--ink);
      outline: none;
      white-space: normal;
    }
    .rich-text-editor.is-disabled {
      background: #f4f6f8;
      color: #5f6c83;
    }
    .rich-text-editor.is-disabled *,
    .rich-text-editor.is-disabled p,
    .rich-text-editor.is-disabled span,
    .rich-text-editor.is-disabled div,
    .rich-text-editor.is-disabled strong,
    .rich-text-editor.is-disabled b,
    .rich-text-editor.is-disabled em,
    .rich-text-editor.is-disabled i,
    .rich-text-editor.is-disabled ul,
    .rich-text-editor.is-disabled ol,
    .rich-text-editor.is-disabled li {
      color: inherit !important;
    }
    .rich-text-editor.is-empty::before {
      content: attr(data-placeholder);
      color: #98a2b3;
      pointer-events: none;
    }
    .rich-text-editor p,
    .rich-text-editor ul,
    .rich-text-editor ol {
      margin: 0 0 8px;
    }
    .rich-text-editor p:last-child,
    .rich-text-editor ul:last-child,
    .rich-text-editor ol:last-child {
      margin-bottom: 0;
    }
    .rich-text-editor strong,
    .rich-text-editor b,
    .email-preview-content strong,
    .email-preview-content b,
    .deadline-mail-preview-body strong,
    .deadline-mail-preview-body b,
    .deadline-mail-preview-section strong,
    .deadline-mail-preview-section b,
    .reporting-mail-preview-section-body strong,
    .reporting-mail-preview-section-body b,
    .reporting-mail-preview-section-footer strong,
    .reporting-mail-preview-section-footer b {
      font-weight: 600;
    }
    #globalSignatureEditor table[data-signature-two-col="1"] {
      border-collapse: separate;
      border-spacing: 10px 5px;
      width: 100%;
      max-width: 540px;
      margin: 0;
    }
    #globalSignatureEditor p,
    #globalSignatureEditor ul,
    #globalSignatureEditor ol {
      margin: 0 0 10px;
    }
    #globalSignatureEditor p:last-child,
    #globalSignatureEditor ul:last-child,
    #globalSignatureEditor ol:last-child {
      margin-bottom: 0;
    }
    #globalSignatureEditor td[data-signature-cell] {
      min-height: 34px;
      padding: 7px 10px;
      border: 1px dashed #b8c7c0;
      background: #f6faf7;
      vertical-align: top;
      border-radius: 3px;
    }
    #globalSignatureEditor td[data-signature-cell="label"] {
      width: 34%;
      background: #f3f5f4;
    }
    #globalSignatureEditor td[data-signature-cell="value"] {
      width: 66%;
      background: #fff;
    }
    #globalSignatureEditor td[data-signature-cell][data-empty="1"]::before {
      content: attr(data-placeholder);
      color: var(--muted);
      font-size: 11px;
      pointer-events: none;
    }
    .signature-preview-frame {
      width: 100%;
      min-height: 260px;
      border: 1px solid #d5dbe5;
      border-radius: 3px;
      background: #ffffff;
      display: block;
    }
    .deadline-mail-form-grid .full {
      grid-column: 1 / -1;
    }
    .email-preview-canvas {
      border: 1px solid #d5dbe5;
      border-radius: 3px;
      background: #ffffff;
      box-shadow: 0 1px 3px rgba(20, 30, 40, 0.06);
      overflow: auto;
      max-height: calc(100vh - 230px);
    }
    .email-preview-header {
      padding: 10px 12px;
      border-bottom: 1px solid #e4e8ef;
      background: #f6f8fb;
      display: grid;
      gap: 4px;
      font-size: 12px;
    }
    .email-preview-header strong {
      font-weight: 600;
    }
    .email-preview-content {
      padding: 12px;
      font-size: 14px;
      line-height: 1.45;
      color: var(--ink);
      font-family: Aptos, "Segoe UI", sans-serif;
    }
    .email-preview-body {
      display: grid;
      gap: 10px;
    }
    .email-preview-paragraph {
      margin: 0;
      font-size: 14px;
    }
    .email-preview-paragraph p,
    .email-preview-section-text p,
    .email-preview-section-text ul,
    .email-preview-section-text ol,
    .email-preview-paragraph ul,
    .email-preview-paragraph ol {
      margin: 0 0 8px;
    }
    .email-preview-paragraph p:last-child,
    .email-preview-section-text p:last-child,
    .email-preview-section-text ul:last-child,
    .email-preview-section-text ol:last-child,
    .email-preview-paragraph ul:last-child,
    .email-preview-paragraph ol:last-child {
      margin-bottom: 0;
    }
    .email-preview-section-block {
      display: grid;
      gap: 4px;
    }
    .email-preview-section-title {
      margin: 0;
      font-weight: 700;
      font-size: 16px;
    }
    .email-preview-section-text {
      margin: 0;
      font-size: 14px;
    }
    .deadline-mail-tags {
      border: 1px solid var(--border);
      border-radius: 3px;
      background: #fff;
      padding: 10px;
      display: grid;
      align-content: start;
      gap: 8px;
    }
    .deadline-mail-tags h4 {
      margin: 0;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
    }
    .deadline-mail-tag-list {
      display: grid;
      gap: 6px;
    }
    .info-mail-tag-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 6px;
    }
    .deadline-mail-tag-item {
      border: 1px solid var(--border);
      border-radius: 3px;
      background: #fff;
      padding: 7px 8px;
      display: grid;
      gap: 3px;
    }
    .deadline-mail-tag-code {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 11px;
      color: #203220;
    }
    .deadline-mail-tag-desc {
      font-size: 11px;
      color: var(--muted);
      line-height: 1.35;
    }
    .deadline-mail-run-status {
      font-size: 11px;
      color: var(--muted);
    }
    .deadline-mail-log {
      display: grid;
      gap: 8px;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .deadline-mail-log-filters {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .deadline-mail-log-list {
      display: grid;
      gap: 6px;
    }
    .deadline-mail-log-item {
      border: 1px solid var(--border);
      border-radius: 3px;
      background: #fff;
      padding: 8px;
      display: grid;
      gap: 4px;
    }
    .deadline-mail-log-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .deadline-mail-log-title {
      margin: 0;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
    }
    .deadline-mail-log-meta,
    .deadline-mail-log-error {
      margin: 0;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
    }
    .deadline-mail-log-error {
      color: #8a1f1f;
    }
    .app-update-status {
      display: grid;
      gap: 4px;
      margin-top: 8px;
      font-size: 11px;
      color: var(--muted);
      line-height: 1.4;
    }
    .app-update-output {
      max-height: 140px;
      overflow: auto;
      white-space: pre-wrap;
      word-break: break-word;
      padding: 8px;
      border: 1px solid var(--border);
      border-radius: 3px;
      background: #fff;
      color: var(--ink);
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size: 10px;
    }
    .stats-table {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      overflow: hidden;
    }
    .stats-table .thead,
    .stats-table .trow {
      display: grid;
      grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
      gap: 8px;
      align-items: center;
      padding: 8px 10px;
      font-size: 12px;
    }
    .stats-table .thead {
      background: #f7f9ff;
      border-bottom: 1px solid var(--border);
      font-size: 10px;
      text-transform: none;
      letter-spacing: 0.5px;
      color: var(--muted);
      font-weight: 700;
    }
    .stats-table .trow {
      border-bottom: 1px solid var(--border);
    }
    .stats-table .trow:last-child {
      border-bottom: 0;
    }
    .stats-table .num {
      text-align: right;
      font-variant-numeric: tabular-nums;
    }
    @media (max-width: 1200px) {
      .employee-stats-grid {
        grid-template-columns: 1fr;
      }
    }
    .option-list {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      padding: 8px;
      display: grid;
      gap: 8px;
      max-height: none;
      overflow: visible;
    }
    .option-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      color: var(--ink);
      min-height: 24px;
    }
    .option-item .option-main {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex: 1 1 auto;
    }
    .option-item .ios-switch {
      width: 36px;
      height: 22px;
      flex: 0 0 36px;
      margin: 0;
    }
    #clientAnnualAgreementWrap {
      width: 36px;
      height: 22px;
      flex: 0 0 36px;
      margin: 0;
    }
    .annual-toggle-row {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--ink);
      font-size: 12px;
      font-weight: 400;
      line-height: 1.35;
      letter-spacing: 0;
      min-height: 24px;
      vertical-align: middle;
    }
    .annual-toggle-row,
    .annual-toggle-row span,
    .annual-toggle-row label {
      font-size: 12px;
      font-weight: 400;
      line-height: 1.35;
    }
    .annual-toggle-row > .ios-switch,
    .annual-toggle-row .ios-switch {
      align-self: center;
      vertical-align: middle;
      flex: 0 0 36px;
    }
    .annual-toggle-row .small-note {
      display: inline-flex;
      align-items: center;
      line-height: 1.2;
      margin: 0;
    }
    .option-item .option-title {
      line-height: 1.35;
    }
    .option-item .option-qty {
      width: 62px;
      min-width: 62px;
      margin-left: 8px;
      font-size: 12px;
      padding: 4px 6px;
      text-align: center;
      align-self: center;
    }
    .option-item .option-qty[disabled] {
      opacity: 0.45;
      background: #f3f5fa;
    }
    .option-item .option-meta {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      align-items: center;
      justify-content: end;
      flex: 0 0 auto;
      min-width: 0;
      white-space: nowrap;
      margin-left: auto;
    }
    .option-item .option-date-label {
      font-size: 11px;
      color: var(--muted);
      flex: 0 0 auto;
    }
    .option-item .option-date {
      width: 132px;
      min-width: 132px;
      font-size: 12px;
      padding: 4px 6px;
      flex: 0 0 132px;
    }
    .option-item .option-date[disabled] {
      opacity: 0.45;
      background: #f3f5fa;
    }
    .catalog-row {
      display: grid;
      grid-template-columns: 1fr auto auto;
      gap: 8px;
      align-items: center;
      padding: 6px 0;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
    }
    .catalog-row:last-child { border-bottom: 0; }
    .catalog-row.option-row {
      grid-template-columns: 1fr auto auto auto;
    }
    .historic-list {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      max-height: 170px;
      overflow: auto;
      display: grid;
      gap: 0;
    }
    .historic-row {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
    }
    .historic-row:last-child { border-bottom: 0; }
    .historic-meta {
      margin-top: 2px;
      font-size: 11px;
      color: var(--muted);
    }
    .history-list {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      overflow: hidden;
    }
    .history-row {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      font-size: 12px;
    }
    .history-row:last-child { border-bottom: 0; }
    .history-meta {
      color: var(--muted);
      font-size: 11px;
      margin-top: 2px;
    }
    .admin-client-grid {
      display: grid;
      gap: 8px;
    }
    .admin-client-card {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      padding: 10px;
      text-align: left;
      font-family: inherit;
      cursor: pointer;
    }
    .admin-client-card.toggle-active {
      background: var(--accent-soft);
      border-color: rgba(15, 108, 189, 0.35);
    }
    .admin-client-card.inactive {
      opacity: 0.55;
      background: #f4f6fa;
      border-color: #d5dbe7;
    }
    .admin-client-card .head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: center;
      font-size: 12px;
      font-weight: 700;
    }
    .admin-client-card .meta {
      margin-top: 4px;
      display: grid;
      gap: 2px;
      font-size: 11px;
      color: var(--muted);
    }
    .admin-columns {
      display: grid;
      grid-template-columns: minmax(220px, 0.9fr) minmax(320px, 1fr) minmax(280px, 1fr);
      gap: 10px;
      min-height: 0;
      align-items: start;
    }
    .admin-columns.wide-third {
      grid-template-columns: minmax(220px, 0.8fr) minmax(280px, 0.7fr) minmax(360px, 1.5fr);
    }
    .admin-columns.paymentcalendar-layout {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-metrics-grid.stack-single {
      grid-template-columns: minmax(0, 1fr);
    }
    .admin-column-surface {
      background: transparent;
      border: 0;
      border-radius: var(--radius);
      padding: 0;
      min-height: 0;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .admin-column-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 16px 0;
      min-height: 22px;
      border-bottom: 0;
    }
    .admin-column-title {
      margin: 0;
      font-size: 12px;
      font-weight: 600;
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0.4px;
    }
    .admin-column-body {
      display: grid;
      gap: 8px;
      min-height: 0;
      overflow: auto;
      padding: 10px 16px 0;
      background: #fff;
      border-radius: var(--radius);
    }
    .admin-column-footer {
      margin-top: auto;
      padding: 10px 16px 0;
      display: flex;
      justify-content: flex-end;
    }
    .admin-select-card {
      border: 1px solid #000;
      border-radius: var(--radius);
      background: #fff;
      padding: 10px;
      text-align: left;
      cursor: pointer;
      display: grid;
      gap: 4px;
      font-family: inherit;
      width: 100%;
    }
    .admin-select-card:hover {
      background: #fff;
    }
    .admin-select-card.is-selected {
      border-color: #000;
      background: #f4f6f4;
      box-shadow: inset 0 0 0 1px #000;
    }
    .admin-select-title {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .admin-select-meta {
      font-size: 11px;
      color: var(--muted);
      display: grid;
      gap: 2px;
    }
    .admin-select-card.inactive {
      opacity: 0.58;
      background: #f1f3f4;
    }
    .admin-detail-stack,
    .admin-stat-stack {
      display: grid;
      gap: 8px;
      align-content: start;
    }
    .admin-detail-stack > div:has(> label + input),
    .admin-detail-stack > div:has(> label + select),
    .admin-detail-stack > div:has(> label + textarea),
    .admin-detail-stack > div:has(> .deadline-mail-field-head + input),
    .admin-detail-stack > div:has(> .deadline-mail-field-head + .rich-text-field),
    .admin-detail-stack > div:has(> label + div),
    .deadline-mail-form-grid > div:has(> label + .field-wrap),
    .signature-config-col > div:has(> label + input),
    .signature-config-col > div:has(> label + select),
    .signature-config-col > div:has(> label + textarea),
    .deadline-mail-form-grid > div:has(> label + input),
    .deadline-mail-form-grid > div:has(> label + select),
    .deadline-mail-form-grid > div:has(> .deadline-mail-field-head + input),
    .deadline-mail-form-grid > div:has(> .deadline-mail-field-head + .rich-text-field),
    .deadline-mail-section-card > div:has(> label + input),
    .deadline-mail-section-card > div:has(> .deadline-mail-field-head + .rich-text-field) {
      display: grid;
      grid-template-columns: 132px minmax(0, 1fr);
      gap: 10px;
      align-items: start;
    }
    .admin-detail-stack > div:has(> label + input) > label,
    .admin-detail-stack > div:has(> label + select) > label,
    .admin-detail-stack > div:has(> label + textarea) > label,
    .admin-detail-stack > div:has(> label + div) > label,
    .deadline-mail-form-grid > div:has(> label + .field-wrap) > label,
    .signature-config-col > div:has(> label + input) > label,
    .signature-config-col > div:has(> label + select) > label,
    .signature-config-col > div:has(> label + textarea) > label,
    .deadline-mail-form-grid > div:has(> label + input) > label,
    .deadline-mail-form-grid > div:has(> label + select) > label,
    .deadline-mail-section-card > div:has(> label + input) > label {
      margin: 7px 0 0;
    }
    .admin-detail-stack > div:has(> .deadline-mail-field-head + input) > .deadline-mail-field-head,
    .admin-detail-stack > div:has(> .deadline-mail-field-head + .rich-text-field) > .deadline-mail-field-head,
    .deadline-mail-form-grid > div:has(> .deadline-mail-field-head + input) > .deadline-mail-field-head,
    .deadline-mail-form-grid > div:has(> .deadline-mail-field-head + .rich-text-field) > .deadline-mail-field-head,
    .deadline-mail-section-card > div:has(> .deadline-mail-field-head + .rich-text-field) > .deadline-mail-field-head {
      margin: 7px 0 0;
    }
    .admin-detail-stack > div:has(> .deadline-mail-field-head + input) > .deadline-mail-field-head label,
    .admin-detail-stack > div:has(> .deadline-mail-field-head + .rich-text-field) > .deadline-mail-field-head label,
    .deadline-mail-form-grid > div:has(> .deadline-mail-field-head + input) > .deadline-mail-field-head label,
    .deadline-mail-form-grid > div:has(> .deadline-mail-field-head + .rich-text-field) > .deadline-mail-field-head label,
    .deadline-mail-section-card > div:has(> .deadline-mail-field-head + .rich-text-field) > .deadline-mail-field-head label {
      margin: 0;
    }
    .admin-stat-card {
      border: 1px solid #000;
      border-radius: var(--radius);
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 4px;
    }
    .admin-stat-label {
      font-size: 10px;
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0.4px;
    }
    .admin-stat-value {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .admin-meta-list {
      display: grid;
      gap: 6px;
      font-size: 12px;
      color: var(--ink);
    }
    .admin-meta-line {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      align-items: baseline;
    }
    .admin-meta-line .label {
      color: var(--muted);
    }
    .admin-inline-stats {
      display: grid;
      gap: 8px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .admin-distribution-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      align-items: start;
    }
    .admin-record-list {
      display: grid;
      gap: 8px;
    }
    .admin-subtle-divider {
      border-top: 1px solid var(--border);
      padding-top: 8px;
      margin-top: 2px;
      display: grid;
      gap: 8px;
    }
    .admin-segmented {
      display: inline-flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .admin-outlier-list {
      display: grid;
      gap: 6px;
      margin-top: 8px;
    }
    .admin-outlier-row {
      border: 1px solid #000;
      border-radius: var(--radius);
      padding: 8px;
      background: #fff;
      display: grid;
      gap: 2px;
      font-size: 12px;
    }
    .admin-overview-details {
      margin-top: 6px;
    }
    .admin-overview-details summary {
      cursor: pointer;
      font-size: 11px;
      font-weight: 400;
      color: var(--muted);
      list-style: none;
    }
    .admin-overview-details summary::-webkit-details-marker { display: none; }
    .admin-overview-details summary::before {
      content: "▸";
      display: inline-block;
      margin-right: 6px;
      color: var(--muted);
    }
    .admin-overview-details[open] summary::before {
      content: "▾";
    }
    .admin-compact-table {
      display: grid;
      gap: 8px;
    }
    .admin-compact-row {
      border: 1px solid #000;
      border-radius: var(--radius);
      background: #fff;
      padding: 8px 10px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto auto;
      gap: 10px;
      align-items: center;
      font-size: 12px;
    }
    .admin-compact-row .value {
      font-weight: 600;
      text-align: right;
    }
    .admin-metric-list {
      margin-top: 6px;
      display: grid;
      gap: 6px;
    }
    .admin-metric-list-item {
      font-size: 12px;
      color: var(--ink);
    }
    .admin-column-body details {
      border: 1px solid #000;
      border-radius: var(--radius);
      background: #fff;
      padding: 8px;
    }
    .admin-column-body summary {
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
      list-style: none;
    }
    .admin-column-body summary::-webkit-details-marker {
      display: none;
    }
    .admin-column-body summary::before {
      content: "▸";
      display: inline-block;
      margin-right: 6px;
      color: var(--muted);
    }
    .admin-column-body details[open] summary::before {
      content: "▾";
    }
    .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .full { grid-column: 1 / -1; }
    .client-contact-col {
      display: grid;
      align-content: start;
      gap: 8px;
    }
    .client-contact-list {
      display: grid;
      gap: 8px;
    }
    .client-contact-card {
      display: grid;
      gap: 8px;
      padding: 10px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
    }
    .client-contact-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }
    .client-contact-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 8px;
      align-items: center;
    }
    .client-contact-summary {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      min-width: 0;
    }
    .client-contact-summary-text {
      min-width: 0;
      font-size: 12px;
      line-height: 1.35;
      color: var(--ink);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .client-contact-mail-flags {
      display: flex;
      gap: 12px;
      flex-wrap: nowrap;
      align-items: center;
      justify-content: space-between;
    }
    .client-contact-mail-flags .annual-toggle-row {
      margin: 0;
    }
    .client-contact-flag-group {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      min-width: 0;
    }
    .client-contact-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex: 0 0 auto;
      gap: 8px;
    }
    .subscription-main-col {
      display: grid;
      align-content: start;
      gap: 8px;
      padding-right: 8px;
    }
    .subscription-tier-line {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: space-between;
      flex-wrap: nowrap;
    }
    .subscription-tier-main {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 0;
      flex: 0 1 33.333%;
      max-width: 33.333%;
    }
    .subscription-tier-main > select {
      flex: 1 1 auto;
      min-width: 0;
      width: 100%;
    }
    .subscription-tier-side {
      display: flex;
      align-items: center;
      gap: 10px;
      justify-content: flex-end;
      flex: 0 0 auto;
      min-width: 0;
      white-space: nowrap;
    }
    .subscription-tier-line .annual-toggle-row {
      display: flex;
      align-items: center;
      gap: 8px;
      width: auto;
      white-space: nowrap;
      margin: 0;
    }
    #clientEconomicSubscriptionsList {
      width: 100%;
      display: grid;
      gap: 8px;
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .client-inline-field {
      grid-template-columns: 140px minmax(0, 1fr);
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .form-section > .grid > div {
      display: flex;
      align-items: center;
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .form-section > .grid > div > select {
      width: 100%;
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .client-inline-field .field-wrap {
      max-width: none;
      width: 100%;
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .form-section,
    .client-edit-pane[data-client-edit-pane="subscription"] .subscription-tier-line,
    .client-edit-pane[data-client-edit-pane="subscription"] .subscription-tier-main {
      width: 100%;
      max-width: none;
    }
    #clientEconomicSubscriptionsList .option-row {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto 150px auto 64px auto 132px auto 132px;
      align-items: start;
      gap: 12px;
      width: 100%;
    }
    #clientEconomicSubscriptionsList .option-main {
      grid-column: 1;
      min-width: 0;
    }
    #clientEconomicSubscriptionsList .option-left {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      align-items: flex-start;
      gap: 8px;
      min-width: 0;
    }
    #clientEconomicSubscriptionsList .option-title {
      display: grid;
      gap: 2px;
      min-width: 0;
    }
    #clientEconomicSubscriptionsList .option-title strong {
      display: block;
      min-width: 0;
      white-space: normal;
      overflow: visible;
      text-overflow: clip;
    }
    #clientEconomicSubscriptionsList .option-description {
      display: block;
      font-weight: 400;
      color: var(--muted);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      line-height: 1.35;
    }
    .client-subscription-summary {
      margin-top: 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px 12px;
      background: #faf8f1;
    }
    .client-subscription-summary-rows {
      display: grid;
      gap: 6px;
    }
    .client-subscription-summary-row {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 12px;
      font-size: 12px;
      line-height: 1.35;
    }
    .client-subscription-summary-row strong {
      font-weight: 700;
    }
    .client-subscription-summary-total {
      border-top: 1px solid var(--line);
      margin-top: 8px;
      padding-top: 8px;
      display: grid;
      gap: 6px;
    }
    #clientEconomicSubscriptionsList .option-meta {
      display: grid;
      grid-template-columns: auto 150px auto 64px auto 132px auto 132px;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
      grid-column: 2 / 10;
    }
    #clientEconomicSubscriptionsList .option-meta .option-payroll-cadence {
      width: 150px;
      min-width: 150px;
    }
    #clientEconomicSubscriptionsList .option-qty {
      width: 64px;
      min-width: 64px;
    }
    #clientEconomicSubscriptionsList .option-meta .option-date {
      width: 132px;
      min-width: 132px;
    }
    #clientEconomicSubscriptionsList .option-meta .option-meta-empty {
      display: block;
      width: 64px;
      min-width: 64px;
    }
    #clientEconomicSubscriptionsList .option-meta .option-meta-empty.option-payroll-empty {
      width: 150px;
      min-width: 150px;
    }
    .subscription-date-meta {
      display: flex;
      flex-wrap: nowrap;
      gap: 6px;
      align-items: center;
      justify-content: end;
      margin-top: 0;
      white-space: nowrap;
    }
    .subscription-date-meta .option-date-label {
      font-size: 11px;
      color: var(--muted);
      flex: 0 0 auto;
    }
    .subscription-date-meta .option-date {
      width: 132px;
      min-width: 132px;
      font-size: 12px;
      padding: 4px 6px;
      flex: 0 0 132px;
    }
    #clientEconomicSubscriptionsList .option-title,
    #clientEconomicSubscriptionsList .option-date-label,
    #clientEconomicSummary,
    #clientEconomicSummary .small-note,
    #clientEconomicCustomerAppSummary,
    #clientEconomicCustomerAppSummary .small-note {
      font-size: 12px;
      line-height: 1.4;
    }
    #clientEconomicSummary .employee-status-pill,
    #clientEconomicCustomerAppSummary .employee-status-pill {
      font-size: 12px;
      min-width: auto;
      padding: 4px 8px;
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .subscription-tier-line {
      align-items: stretch;
      justify-content: flex-start;
      flex-direction: column;
      gap: 10px;
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .subscription-tier-main {
      display: block;
      flex: 1 1 auto;
      max-width: none;
      width: 100%;
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .subscription-tier-side {
      display: flex;
      gap: 12px;
      justify-content: flex-start;
      align-items: center;
      width: 100%;
      white-space: nowrap;
      flex-wrap: nowrap;
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .subscription-tier-side .annual-toggle-row {
      justify-content: flex-start;
      width: auto;
      flex: 0 0 auto;
      margin: 0;
    }
    .client-edit-pane[data-client-edit-pane="subscription"] .subscription-tier-side .subscription-date-meta {
      justify-content: flex-start;
      width: auto;
      flex: 0 0 auto;
      margin: 0;
    }
    #clientAnnualAgreementPeriodRow .subscription-date-meta {
      justify-content: flex-start;
      width: auto;
      flex: 0 0 auto;
      margin: 0;
    }
    .subscription-date-meta .option-date[disabled] {
      opacity: 0.45;
      background: #f3f5fa;
    }
    .subscription-history-col {
      align-self: start;
      border-left: 1px solid var(--border);
      padding-left: 10px;
    }
    .subscription-history-heading {
      margin: 0 0 4px;
    }
    .subscription-owner-section {
      margin-top: 8px;
    }
    .client-edit-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .client-edit-tabbar {
      position: static;
      grid-column: 1;
      grid-row: 1 / 3;
      z-index: 2;
      display: grid;
      grid-auto-rows: min-content;
      align-content: start;
      justify-items: start;
      row-gap: 25px;
      padding: 25px;
      margin: 0;
      background: #203220;
      border-bottom: 0;
      border-radius: 3px 0 0 3px;
    }
    .client-edit-tabbar .client-edit-primary-tab.btn.subtle { position: relative; width: 150px; height: 25px; min-height: 25px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #ffffff; font: inherit; font-size: 16px; font-weight: 400; text-align: left; text-indent: 0; justify-content: flex-start; line-height: 25px; overflow: hidden; transition: color 140ms ease, font-weight 140ms ease, text-indent 220ms cubic-bezier(0.2, 0.85, 0.22, 1); }
    .client-edit-tabbar .client-edit-primary-tab.btn.subtle::before { content: ""; position: absolute; left: 0; top: 50%; width: 5px; height: 25px; border-radius: 3px; background: #e1c16e; opacity: 0; transform: translateY(-50%) scaleY(0.35) scaleX(0.72); transform-origin: center; pointer-events: none; transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.85, 0.22, 1); }
    .client-edit-tabbar .client-edit-primary-tab.btn.subtle:hover,
    .client-edit-tabbar .client-edit-primary-tab.btn.subtle.toggle-active {
      border: 0;
      background: transparent;
      color: #e1c16e;
    }
    .client-edit-tabbar .client-edit-primary-tab.btn.subtle.toggle-active {
      font-weight: 600;
      text-indent: 15px;
    }
    .client-edit-tabbar .client-edit-primary-tab.btn.subtle.toggle-active::before { opacity: 1; transform: translateY(-50%) scaleY(1) scaleX(1); animation: employeeRailFirstMenuPillPop 260ms cubic-bezier(0.18, 1.35, 0.32, 1); }
    .client-edit-tabbody {
      grid-column: 2;
      grid-row: 1 / 3;
      display: grid;
      grid-template-rows: minmax(0, 1fr) 25px;
      gap: 25px;
      min-height: 0;
      overflow: hidden;
      padding: 25px;
      background: #f2f2f2;
    }
    .client-edit-tabbody:has(.client-stam-misc-pane:not(.hidden)) {
      grid-template-rows: minmax(0, 1fr) 0;
      gap: 0;
    }
    .client-edit-tab-group { width: 150px; display: grid; grid-template-rows: 25px 0; align-content: start; overflow: hidden; transition: grid-template-rows 520ms cubic-bezier(0.2, 0.85, 0.22, 1); }
    .client-edit-tab-group.is-expanded { grid-template-rows: 25px var(--client-edit-subrow-height); }
    .client-edit-subrow { width: 150px; min-height: var(--client-edit-subrow-height); max-height: 0; display: grid; grid-template-rows: 1fr; overflow: hidden; opacity: 0; transform: translateY(-8px); transform-origin: top center; transition: max-height 520ms cubic-bezier(0.2, 0.85, 0.22, 1), opacity 420ms ease, transform 520ms cubic-bezier(0.2, 0.85, 0.22, 1); }
    .client-edit-tab-group.is-expanded .client-edit-subrow { max-height: var(--client-edit-subrow-height); opacity: 1; transform: translateY(0); }
    .client-edit-subgrid { display: grid; grid-template-rows: repeat(var(--client-edit-submode-count), 25px); align-content: start; width: 135px; margin-left: 15px; padding-top: 25px; row-gap: 0; box-sizing: border-box; }
    .client-edit-subtab.btn.subtle { width: 135px; height: 25px; min-height: 25px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: #ffffff; font: inherit; font-size: 14px; font-weight: 400; line-height: 25px; justify-content: flex-start; text-align: left; cursor: pointer; }
    .client-edit-subtab.btn.subtle:hover,
    .client-edit-subtab.btn.subtle.toggle-active { background: transparent; color: #e1c16e; font-weight: 600; }
    .client-edit-pane {
      grid-row: 1;
      display: grid;
      gap: 25px; align-content: start; min-width: 0; min-height: 0; overflow: auto; padding-right: 0;
    }
    .client-edit-pane.hidden {
      display: none !important;
    }
    .client-stam-pane,
    .client-1720-pane {
      display: grid;
      gap: 25px;
      align-content: start;
      min-width: 0;
    }
    .client-stam-pane.hidden,
    .client-1720-pane.hidden {
      display: none !important;
    }
    .client-edit-col {
      display: grid;
      gap: 25px;
      align-content: start;
      min-width: 0;
    }
    .client-stam-general-pane {
      gap: 25px;
    }
    .client-stam-general-columns {
      display: grid;
      grid-template-columns: 350px 350px;
      gap: 50px;
      align-items: start;
      width: 750px;
      max-width: 100%;
    }
    .client-stam-general-divider {
      width: 750px;
      max-width: 100%;
      height: 1px;
      background: #d9d9d9;
    }
    .signature-config-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }
    .signature-config-col {
      min-width: 0;
      display: grid;
      gap: 25px;
      align-content: start;
    }
    .client-inline-field {
      display: grid;
      grid-template-columns: 100px 225px;
      gap: 25px;
      align-items: center;
      min-height: 25px;
    }
    .client-inline-field > label,
    .client-inline-field > .subscription-history-heading {
      min-height: 25px;
      display: flex;
      align-items: center;
      margin: 0;
      white-space: nowrap;
      color: #000001;
      font-size: 12px;
      font-weight: 400;
    }
    .required-label::after {
      content: " *";
      color: var(--danger);
      font-weight: 600;
    }
    #clientInfoPanel .required-label::after {
      content: "";
    }
    .client-inline-field .field-wrap {
      min-width: 0;
      display: grid;
      gap: 25px;
      width: 225px;
      max-width: 225px;
    }
    .client-inline-field.client-inline-field--full-width {
      grid-template-columns: 100px 625px;
      width: 750px;
      max-width: 100%;
    }
    .client-inline-field.client-inline-field--full-width .field-wrap {
      width: 625px;
      max-width: 625px;
    }
    .client-welcome-mail-wrap {
      display: flex !important;
      align-items: center;
      gap: 25px;
      height: 25px;
      min-height: 25px;
      background: transparent;
    }
    .client-welcome-mail-recipients {
      min-width: 0;
      flex: 1 1 auto;
      height: 25px;
      line-height: 25px;
      color: #000001;
      font-size: 12px;
      font-weight: 400;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      background: transparent;
    }
    .client-welcome-mail-recipients.is-empty {
      color: #666666;
    }
    #clientInfoPanel .client-inline-field .autocomplete-wrap {
      width: 100%;
      min-width: 0;
    }
    #clientInfoPanel input,
    #clientInfoPanel textarea,
    #clientInfoPanel select {
      width: 100%;
      min-height: 25px;
      box-sizing: border-box;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000001;
      font-size: 12px;
      font-weight: 400;
      box-shadow: none;
    }
    #clientInfoPanel input,
    #clientInfoPanel select {
      height: 25px;
      padding: 0 8px;
    }
    #clientInfoPanel .client-stam-economic-master-pane input,
    #clientInfoPanel .client-stam-economic-master-pane select {
      background: #cccccc;
      cursor: default;
      opacity: 1;
      pointer-events: none;
      -webkit-text-fill-color: #000001;
    }
    #clientInfoPanel .client-stam-economic-master-pane select {
      appearance: none;
      -webkit-appearance: none;
      background-image: none;
    }
    #clientInfoPanel input:focus,
    #clientInfoPanel textarea:focus,
    #clientInfoPanel select:focus {
      outline: none;
      box-shadow: none;
    }
    #clientInfoPanel .form-section {
      border: 0;
      background: transparent;
      padding: 0;
    }
    .client-edit-actions {
      grid-column: 1;
      grid-row: 2;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 25px;
      height: 25px;
      margin: 0;
      padding: 0;
      background: #f2f2f2;
    }

    label {
      display: block;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      margin-bottom: 4px;
      text-transform: none;
      letter-spacing: 0.5px;
    }

    input, textarea, select {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      font-family: inherit;
      font-size: 13px;
      color: var(--ink);
      padding: 8px;
    }
    input:disabled,
    textarea:disabled,
    select:disabled {
      background: #f2f5fb;
      color: #8a93a6;
      border-color: #d9e0ee;
      cursor: not-allowed;
    }
    input[readonly],
    textarea[readonly] {
      background: #f2f5fb;
      color: #8a93a6;
      border-color: #d9e0ee;
      cursor: default;
    }
    .autocomplete-wrap {
      position: relative;
    }
    .autocomplete-menu {
      position: absolute;
      left: 0;
      right: 0;
      top: calc(100% + 4px);
      z-index: 40;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: 0 10px 20px rgba(18, 40, 70, 0.08);
      max-height: 220px;
      overflow: auto;
      padding: 4px;
      display: grid;
      gap: 2px;
    }
    .autocomplete-item {
      width: 100%;
      border: 0;
      border-radius: var(--radius);
      background: transparent;
      text-align: left;
      font-family: inherit;
      cursor: pointer;
      padding: 7px 8px;
      display: grid;
      gap: 2px;
    }
    .autocomplete-item:hover {
      background: #f4f7fb;
    }
    .autocomplete-item .name {
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
      line-height: 1.25;
    }
    .autocomplete-item .meta {
      font-size: 10px;
      color: var(--muted);
      line-height: 1.25;
    }
    .subtle-autofill {
      margin-top: 6px;
      min-height: 16px;
      padding: 0 8px;
      color: #5f6978;
      font-size: 12px;
      line-height: 1.35;
    }
    .subtle-autofill.is-empty {
      color: #8b95a4;
      font-style: italic;
    }

    textarea { min-height: 120px; resize: vertical; line-height: 1.45; }

    .month-label {
      margin: 12px 10px 8px;
      font-size: 12px;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0.6px;
      color: #4c5f7a;
    }

    .month-drop {
      margin: 0 10px 8px;
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      font-size: 10px;
      color: var(--muted);
      padding: 5px 7px;
      text-transform: none;
      letter-spacing: 0.5px;
    }

    .task-card {
      margin: 0 0 10px;
      border: 0;
      border-radius: var(--radius);
      padding: 10px;
      background: #DCDEDC;
      box-shadow: 3.54px 3.54px 5px rgba(0, 0, 0, 0.5);
      text-align: left;
    }
    .task-card.active {
      background: var(--accent-soft);
    }
    .task-card.is-completed {
      background: #F4F5F4;
      box-shadow: none;
      color: #6f7f79;
    }
    .task-card.is-completed .task-title,
    .task-card.is-completed .task-meta-inline,
    .task-card.is-completed .task-desc,
    .task-card.is-completed .subtask-text,
    .task-card.is-completed .task-repeat-icon,
    .task-card.is-completed .task-card-timer-btn,
    .task-card.is-completed .card-edit-btn {
      color: #6f7f79;
    }
    .task-card.is-completed .task-card-timer-btn svg *,
    .task-card.is-completed .task-card-timer-btn.toggle-active svg * {
      stroke: #6f7f79 !important;
    }
    .task-card.is-completed .ios-slider {
      opacity: 0.85;
    }
    .task-card.todo.is-completed .task-desc {
      display: none;
    }
    .task-card.overdue-carry {
      box-shadow: inset 0 0 0 1px #ff0000, 3.54px 3.54px 5px rgba(0, 0, 0, 0.5);
    }
    .task-card.overdue-carry.active {
      box-shadow: inset 0 0 0 1px #ff0000, 3.54px 3.54px 5px rgba(0, 0, 0, 0.5);
    }
    .task-card.overdue-carry.is-completed,
    .task-card.overdue-carry.is-completed.active {
      box-shadow: inset 0 0 0 1px #ff0000;
    }
    #taskList .task-card:last-child { margin-bottom: 0; }
    #taskList .empty { margin: 0; }

    .task-top {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .task-leading-toggle {
      margin: 0;
      flex: 0 0 auto;
    }
    .task-leading-toggle.ios-switch {
      width: 36px;
      height: 20px;
      margin-top: 0;
    }
    .task-leading-toggle.ios-switch .ios-slider {
      border-radius: 3px;
      box-shadow: none;
    }
    .task-leading-toggle.ios-switch .ios-slider::before {
      width: 14px;
      height: 12px;
      left: 4px;
      top: 4px;
      border-radius: 2px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
      transform: none;
    }
    .task-leading-toggle.ios-switch input:checked + .ios-slider::before {
      transform: translateX(14px);
    }
    .task-card-timer-btn {
      width: 20px;
      min-width: 20px;
      height: 20px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 3px;
    }
    .task-card-timer-btn svg {
      width: 14px;
      height: 14px;
      display: block;
      flex: 0 0 14px;
      stroke: #000000;
      fill: none;
      stroke-width: 1.6;
      stroke-linecap: round;
      stroke-linejoin: round;
      shape-rendering: geometricPrecision;
      vector-effect: non-scaling-stroke;
      overflow: visible;
    }
    .task-card-timer-btn svg * {
      stroke: #000000 !important;
      fill: none !important;
    }
    .task-card.todo .task-top { align-items: center; }
    .task-card.task,
    .task-card.todo {
      --task-status-column: 25px;
      --task-grid-gap: 25px;
      --task-title-column: 255px;
      --task-toggle-column: 15px;
      --task-card-height: 75px;
      --task-duration-height: 55px;
      --task-duration-visible-height: 50px;
      --task-duration-overlap: calc(var(--task-duration-height) - var(--task-duration-visible-height));
      --task-duration-width: calc(var(--task-title-column) + var(--task-grid-gap) + var(--task-toggle-column));
      display: grid;
      grid-template-columns: var(--task-status-column) var(--task-grid-gap) var(--task-title-column) var(--task-grid-gap) var(--task-toggle-column) var(--task-grid-gap);
      grid-template-rows: 12.5px 25px 25px 12.5px;
      align-items: start;
      width: 370px;
      height: var(--task-card-height);
      margin: 0 0 25px;
      padding: 0;
      border-radius: 3px;
      background: #ffffff;
      box-shadow: none;
      overflow: visible;
      cursor: pointer;
      position: relative;
      transform: translateY(0);
      transition:
        margin-bottom 900ms cubic-bezier(0.2, 0.85, 0.22, 1),
        transform 320ms cubic-bezier(0.18, 1, 0.32, 1);
    }
    .task-card.todo.has-description {
      height: auto;
      min-height: var(--task-card-height);
      grid-template-rows: 12.5px 25px 25px auto 12.5px;
    }
    .task-card.task:not([data-task-card-edit]),
    .task-card.todo:not([data-task-card-edit]) {
      cursor: default;
    }
    .task-card.task.active,
    .task-card.todo.active {
      background: #ffffff;
      box-shadow: none;
    }
    .task-card.task.is-completed,
    .task-card.todo.is-completed {
      background: #ffffff;
      box-shadow: none;
    }
    .task-card.task.overdue-carry,
    .task-card.task.overdue-carry.active,
    .task-card.task.overdue-carry.is-completed,
    .task-card.task.overdue-carry.is-completed.active,
    .task-card.todo.overdue-carry,
    .task-card.todo.overdue-carry.active,
    .task-card.todo.overdue-carry.is-completed,
    .task-card.todo.overdue-carry.is-completed.active {
      box-shadow: inset 0 0 0 1px #ff0000;
    }
    .task-card.task.has-duration-input,
    .task-card.todo.has-duration-input {
      margin-bottom: 75px;
      background: transparent;
      box-shadow: none;
      transform: translateY(-3px);
      z-index: 3;
    }
    .task-card.task.is-duration-opening,
    .task-card.todo.is-duration-opening {
      animation:
        taskCardDurationSpaceIn 900ms cubic-bezier(0.2, 0.85, 0.22, 1) both,
        taskCardDurationLiftIn 320ms cubic-bezier(0.18, 1, 0.32, 1) both;
    }
    .task-card.task.is-duration-closing,
    .task-card.todo.is-duration-closing {
      margin-bottom: 25px;
      background: transparent;
      box-shadow: none;
      transform: translateY(0);
      z-index: 3;
      animation:
        taskCardDurationSpaceOut 900ms cubic-bezier(0.2, 0.85, 0.22, 1) both,
        taskCardDurationLiftOut 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .task-card.task.has-duration-input::before,
    .task-card.todo.has-duration-input::before,
    .task-card.task.is-duration-closing::before,
    .task-card.todo.is-duration-closing::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      pointer-events: none;
      border-radius: 3px;
      background: #ffffff;
      box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.75);
    }
    .task-card.task.is-duration-opening::before,
    .task-card.todo.is-duration-opening::before {
      animation: taskCardDurationShadowIn 900ms cubic-bezier(0.2, 0.85, 0.22, 1);
    }
    .task-card.task.has-duration-input.overdue-carry::before,
    .task-card.todo.has-duration-input.overdue-carry::before,
    .task-card.task.is-duration-closing.overdue-carry::before,
    .task-card.todo.is-duration-closing.overdue-carry::before {
      box-shadow: inset 0 0 0 1px #ff0000, 5px 5px 5px rgba(0, 0, 0, 0.75);
    }
    .task-card.task.has-duration-input > :not(.task-duration-inline),
    .task-card.todo.has-duration-input > :not(.task-duration-inline),
    .task-card.task.is-duration-closing > :not(.task-duration-inline),
    .task-card.todo.is-duration-closing > :not(.task-duration-inline) {
      position: relative;
      z-index: 3;
    }
    .task-card.task.is-completed,
    .task-card.todo.is-completed {
      position: relative;
      overflow: visible;
    }
    .task-card.task .task-top,
    .task-card.todo .task-top {
      display: grid;
      grid-template-columns: var(--task-title-column) var(--task-grid-gap) var(--task-toggle-column);
      grid-template-rows: 25px 25px;
      align-items: center;
      width: var(--task-duration-width);
      height: 50px;
      gap: 0;
    }
    .task-card.task .task-stack,
    .task-card.todo .task-stack {
      grid-column: 3 / 6;
      grid-row: 2 / 4;
      width: var(--task-duration-width);
      min-width: 0;
    }
    .task-card.todo.has-description .task-stack {
      grid-row: 2 / 5;
    }
    .task-card.task .task-status-marker,
    .task-card.todo .task-status-marker {
      display: grid;
      grid-column: 1;
      grid-row: 1 / -1;
      grid-template-rows: 12.5px 24.5px 1px 24.5px 12.5px;
      align-self: start;
      width: 25px;
      height: 75px;
      border-radius: 3px 0 0 3px;
      cursor: default;
      overflow: hidden;
    }
    .task-card.todo .task-status-marker {
      grid-template-rows: 1fr;
    }
    .task-card.todo .task-status-date-part,
    .task-card.todo .task-status-date-divider {
      display: none;
    }
    .task-card.todo.has-description .task-status-marker {
      align-self: stretch;
      height: auto;
    }
    .task-card.task .task-status-marker.status-green,
    .task-card.todo .task-status-marker.status-green {
      background: var(--task-status-success);
    }
    .task-card.task .task-status-marker.status-orange,
    .task-card.todo .task-status-marker.status-orange {
      background: #ffb400;
    }
    .task-card.task .task-status-marker.status-red,
    .task-card.todo .task-status-marker.status-red {
      background: #ff2000;
    }
    .task-card.task.is-completed .task-status-marker,
    .task-card.todo.is-completed .task-status-marker,
    .task-card.task.has-duration-input .task-status-marker,
    .task-card.todo.has-duration-input .task-status-marker,
    .task-card.task.is-duration-closing .task-status-marker,
    .task-card.todo.is-duration-closing .task-status-marker {
      background: #d9d9d9;
    }
    .task-card.support .task-status-marker,
    .task-card.support.is-completed .task-status-marker {
      background: #e1c16e;
    }
    .task-status-date-part {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25px;
      height: 24.5px;
      color: #ffffff;
      font-size: 12px;
      font-weight: 600;
      line-height: 1;
      text-align: center;
    }
    .task-status-date-day {
      grid-row: 2;
    }
    .task-status-date-month {
      grid-row: 4;
    }
    .task-status-date-divider {
      grid-row: 3;
      justify-self: center;
      width: 15px;
      height: 1px;
      background: #ffffff;
    }
    .task-card.task .task-column-gap,
    .task-card.todo .task-column-gap {
      display: block;
      grid-column: 2;
      width: 25px;
      height: 100%;
    }
    .task-card.task .task-main,
    .task-card.todo .task-main {
      display: grid;
      grid-column: 1;
      grid-row: 1 / 3;
      grid-template-rows: 25px 25px;
      width: var(--task-title-column);
      max-width: var(--task-title-column);
      min-width: 0;
      min-height: 0;
      height: 50px;
    }
    .task-card.task .task-title-row,
    .task-card.todo .task-title-row {
      display: block;
      grid-row: 1;
      width: 100%;
      height: 25px;
    }
    .task-card.task .task-client-row,
    .task-card.todo .task-client-row {
      display: block;
      grid-row: 2;
      width: 100%;
      height: 25px;
    }
    .task-card.task .task-title,
    .task-card.todo .task-title {
      margin: 0;
      display: flex;
      align-items: center;
      width: var(--task-title-column);
      max-width: var(--task-title-column);
      height: 25px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1;
      font-size: 16px;
      font-weight: 600;
      color: #000000;
    }
    .task-card.task .task-client-name,
    .task-card.todo .task-client-name {
      margin: 0;
      display: flex;
      align-items: center;
      width: var(--task-title-column);
      max-width: var(--task-title-column);
      height: 25px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1;
      font-size: 12px;
      font-weight: 400;
      color: #000000;
    }
    .task-card.task.is-completed .task-title,
    .task-card.todo.is-completed .task-title,
    .task-card.task.is-completed .task-client-name,
    .task-card.todo.is-completed .task-client-name,
    .task-card.task.is-completed .subtask-text,
    .task-card.todo.is-completed .subtask-text {
      color: #000000;
    }
    .task-card.task.is-completed .task-title,
    .task-card.todo.is-completed .task-title {
      font-weight: 400;
    }
    .task-card.task .task-actions,
    .task-card.todo .task-actions,
    .task-card.task .task-repeat-icon,
    .task-card.todo .task-repeat-icon,
    .task-card.task .task-carry-icon,
    .task-card.todo .task-carry-icon {
      display: none;
    }
    .task-card.task .task-action-gap,
    .task-card.todo .task-action-gap {
      display: block;
      width: 10px;
      height: 25px;
    }
    .task-card.task .task-action-slot,
    .task-card.todo .task-action-slot {
      display: none;
      align-items: center;
      justify-content: center;
      width: 20px;
      height: 25px;
    }
    .task-card.task .task-toggle-slot,
    .task-card.todo .task-toggle-slot {
      display: flex;
      grid-column: 3;
      grid-row: 1;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      align-self: center;
      cursor: default;
    }
    .task-card.task .task-completion-date,
    .task-card.todo .task-completion-date {
      display: flex;
      grid-column: 3;
      grid-row: 2;
      align-items: center;
      justify-content: flex-end;
      justify-self: end;
      width: 45px;
      height: 25px;
      margin-left: 0;
      font-size: 10px;
      font-weight: 400;
      line-height: 1;
      text-align: right;
      color: #000000;
      white-space: nowrap;
    }
    .task-card.task .task-toggle-gap,
    .task-card.todo .task-toggle-gap {
      display: block;
      grid-column: 2;
      grid-row: 1;
      width: 25px;
      height: 25px;
    }
    .task-duration-inline {
      position: absolute;
      grid-column: 3 / 6;
      left: 0;
      right: 0;
      bottom: calc(-1 * var(--task-duration-visible-height));
      z-index: 1;
      display: grid;
      grid-template-columns: var(--task-grid-gap) 190px 20px 35px 1fr;
      align-items: center;
      width: auto;
      height: var(--task-duration-height);
      padding-top: var(--task-duration-overlap);
      border-radius: 0 0 3px 3px;
      background: #d9d9d9;
      box-shadow: none;
      overflow: hidden;
      cursor: default;
    }
    .task-card.is-duration-opening .task-duration-inline {
      animation: taskDurationInlineGlideIn 900ms cubic-bezier(0.2, 0.85, 0.22, 1) both;
    }
    .task-card.is-duration-closing .task-duration-inline {
      animation: taskDurationInlineGlideOut 900ms cubic-bezier(0.2, 0.85, 0.22, 1) both;
    }
    .task-duration-inline-label {
      grid-column: 2;
      display: flex;
      align-items: center;
      width: 190px;
      height: 25px;
      color: #000000;
      font-size: 12px;
      font-weight: 400;
      line-height: 1;
      white-space: nowrap;
    }
    .task-duration-inline-input {
      grid-column: 4;
      width: 35px;
      height: 25px;
      padding: 0 3px;
      border: 0;
      border-radius: 3px;
      background: #ffffff;
      color: #000000;
      font-size: 10px;
      font-weight: 400;
      line-height: 25px;
      text-align: center;
      outline: 1px solid #d9d9d9;
      outline-offset: -1px;
    }
    .task-duration-inline-input::placeholder {
      color: #8f8f8f;
      opacity: 1;
    }
    @keyframes taskDurationInlineGlideIn {
      0% {
        transform: translateY(calc(-1 * var(--task-duration-visible-height)));
      }
      100% {
        transform: translateY(0);
      }
    }
    @keyframes taskDurationInlineGlideOut {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(calc(-1 * var(--task-duration-visible-height)));
      }
    }
    @keyframes taskCardDurationSpaceIn {
      0% {
        margin-bottom: 25px;
      }
      100% {
        margin-bottom: 75px;
      }
    }
    @keyframes taskCardDurationSpaceOut {
      0% {
        margin-bottom: 75px;
      }
      100% {
        margin-bottom: 25px;
      }
    }
    @keyframes taskCardDurationShadowIn {
      0% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
      }
      100% {
        box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.75);
      }
    }
    @keyframes taskCardDurationLiftIn {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-3px);
      }
    }
    @keyframes taskCardDurationLiftOut {
      0% {
        transform: translateY(-3px);
      }
      100% {
        transform: translateY(0);
      }
    }
    .task-complete-toggle {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      margin: 0;
      cursor: pointer;
    }
    .task-complete-toggle--static {
      cursor: default;
      pointer-events: none;
    }
    .task-complete-toggle input {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      pointer-events: none;
    }
    .task-complete-icon {
      display: block;
      width: 15px;
      height: 15px;
      overflow: visible;
      fill: none;
      color: #000001;
      transform: scale(1);
      transform-origin: center;
      transition: fill 160ms ease;
    }
    .task-complete-icon path {
      stroke: currentColor;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .task-complete-toggle input:checked + .task-complete-icon {
      fill: var(--task-status-success);
      color: var(--task-status-success);
    }
    .task-complete-toggle.is-icon-popping .task-complete-icon {
      animation: taskCompleteIconPop 260ms cubic-bezier(0.18, 1.35, 0.32, 1);
    }
    .task-complete-icon .task-complete-sparkle,
    .system-standard-save-button .task-complete-sparkle {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      pointer-events: none;
    }
    .task-complete-icon path.task-complete-sparkle,
    .system-standard-save-button path.task-complete-sparkle {
      fill: none;
      stroke: var(--task-status-success);
      stroke-width: 1.4;
    }
    .task-complete-icon .task-complete-sparkle-dot,
    .system-standard-save-button .task-complete-sparkle-dot {
      fill: var(--task-status-success);
      stroke: none;
    }
    .task-complete-toggle.is-icon-popping .task-complete-sparkle,
    .system-standard-save-button.is-save-success .task-complete-sparkle {
      animation: taskCompleteSparkleRay 1200ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }
    .task-complete-toggle.is-icon-popping .task-complete-sparkle-dot,
    .system-standard-save-button.is-save-success .task-complete-sparkle-dot {
      animation-name: taskCompleteSparkleDot;
    }
    .task-complete-toggle.is-icon-popping .task-complete-sparkle--delay-1,
    .system-standard-save-button.is-save-success .task-complete-sparkle--delay-1 {
      animation-delay: 80ms;
    }
    .task-complete-toggle.is-icon-popping .task-complete-sparkle--delay-2,
    .system-standard-save-button.is-save-success .task-complete-sparkle--delay-2 {
      animation-delay: 130ms;
    }
    .task-complete-toggle.is-icon-popping .task-complete-sparkle--delay-3,
    .system-standard-save-button.is-save-success .task-complete-sparkle--delay-3 {
      animation-delay: 180ms;
    }
    @keyframes taskCompleteIconPop {
      0% {
        transform: scale(0.72);
      }
      58% {
        transform: scale(1.18);
      }
      100% {
        transform: scale(1);
      }
    }
    @keyframes taskCompleteSparkleRay {
      0%, 22% {
        opacity: 0;
        transform: scale(0.55);
      }
      38%, 54% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0.85);
      }
    }
    @keyframes taskCompleteSparkleDot {
      0%, 28% {
        opacity: 0;
        transform: scale(0.45);
      }
      46%, 62% {
        opacity: 1;
        transform: scale(1);
      }
      100% {
        opacity: 0;
        transform: scale(0.7);
      }
    }
    .task-card.is-completed .task-leading-toggle.ios-switch input:checked + .ios-slider,
    .task-card.is-completed .subtask-row > .ios-switch input:checked + .ios-slider {
      background: #d7dde7;
    }
    .task-main {
      display: flex;
      flex-direction: column;
      justify-content: center;
      min-height: 30px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .task-card.todo .task-main { min-height: 0; }
    .task-actions {
      display: flex;
      align-items: center;
      gap: 6px;
      margin-left: auto;
    }
    .task-repeat-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      color: var(--muted);
      user-select: none;
    }
    .task-repeat-icon svg {
      width: 14px;
      height: 14px;
      display: block;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      shape-rendering: geometricPrecision;
    }
    .task-generated-badge {
      display: inline-flex;
      align-items: center;
      height: 22px;
      padding: 0 8px;
      border: 1px solid var(--line);
      border-radius: 3px;
      background: #fff;
      color: var(--muted);
      font-size: 11px;
      font-weight: 400;
      white-space: nowrap;
    }
    .task-carry-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 14px;
      height: 14px;
      color: #ff0000;
      flex: 0 0 auto;
    }
    .task-carry-icon svg {
      width: 14px;
      height: 14px;
      display: block;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      shape-rendering: geometricPrecision;
    }
    .task-card.todo .task-actions { align-self: center; }
    .card-edit-btn {
      width: 20px;
      min-width: 20px;
      height: 20px;
      min-height: 20px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
      border-radius: 3px;
    }
    .card-edit-btn svg {
      width: 14px;
      height: 14px;
      display: block;
      stroke: currentColor;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
      fill: none;
      shape-rendering: geometricPrecision;
      vector-effect: non-scaling-stroke;
    }

    .ios-switch {
      position: relative;
      display: inline-block;
      width: 36px;
      height: 22px;
      margin-top: 1px;
    }
    .ios-switch input {
      opacity: 0;
      width: 0;
      height: 0;
      position: absolute;
    }
    .ios-slider {
      position: absolute;
      inset: 0;
      cursor: pointer;
      background: #d7dde7;
      border-radius: 999px;
      transition: 0.2s ease;
      border: 0;
      box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18), inset 0 -1px 1px rgba(255, 255, 255, 0.4);
    }
    .ios-slider::before {
      content: "";
      position: absolute;
      width: 16px;
      height: 16px;
      left: 4px;
      top: 50%;
      background: #ffffff;
      border-radius: 50%;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
      transition: 0.2s ease;
      transform: translateY(-50%);
    }
    .ios-switch input:checked + .ios-slider {
      background: var(--task-status-success);
    }
    .ios-switch input:checked + .ios-slider::before {
      transform: translate(12px, -50%);
    }
    .ios-switch input:disabled + .ios-slider {
      background: #e1e6ef;
      cursor: not-allowed;
    }
    .ios-switch input:disabled + .ios-slider::before {
      background: #f7f9fd;
      box-shadow: none;
    }
    body.readonly-user #addClientBtn,
    body.readonly-user #toggleTaskFormBtn,
    body.readonly-user #addTodoBtn,
    body.readonly-user #addProcessBtn,
    body.readonly-user #saveClientBtn,
    body.readonly-user #removeClientBtn,
    body.readonly-user [data-client-edit],
    body.readonly-user [data-task-edit],
    body.readonly-user [data-process-edit],
    body.readonly-user [data-task-card-timer-btn],
    body.readonly-user [data-process-save],
    body.readonly-user [data-process-delete] {
      display: none !important;
    }
    body.readonly-user input[type="checkbox"][data-task-toggle] + .ios-slider {
      pointer-events: none;
      opacity: 0.55;
    }
    body.readonly-user .task-complete-toggle {
      pointer-events: none;
      opacity: 0.55;
    }
    .ios-switch.deadline-today input:not(:checked) + .ios-slider {
      background: #ffb400;
    }
    .ios-switch.deadline-tomorrow input:not(:checked) + .ios-slider {
      background: #ffb400;
    }
    .ios-switch.deadline-overdue input:not(:checked) + .ios-slider {
      background: #ff2000;
    }
    .task-leading-toggle.ios-switch.deadline-today input:not(:checked) + .ios-slider,
    .task-leading-toggle.ios-switch.deadline-tomorrow input:not(:checked) + .ios-slider,
    .task-leading-toggle.ios-switch.deadline-overdue input:not(:checked) + .ios-slider {
      background: #000000;
    }
    .task-card .task-leading-toggle.ios-switch input:not(:checked) + .ios-slider,
    .task-card .subtask-row > .ios-switch input:not(:checked) + .ios-slider {
      background: #000000;
    }
    .task-card .task-leading-toggle.ios-switch input:checked + .ios-slider,
    .task-card .subtask-row > .ios-switch input:checked + .ios-slider {
      background: #d7dde7;
    }
    .complete-btn {
      border: 1px solid var(--border);
      background: #fff;
      border-radius: var(--radius);
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      padding: 4px 8px;
      cursor: pointer;
    }
    .complete-btn.done {
      color: #0f7b6c;
      border-color: #b7e7de;
      background: #e9fbf6;
    }
    .task-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: nowrap;
      min-width: 0;
    }
    .task-title {
      margin: 0;
      font-size: 13px;
      font-weight: 700;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      flex: 1 1 auto;
    }
    .todo-created { margin: 2px 0 0; font-size: 11px; color: var(--muted); flex: 0 0 auto; }
    .task-due { margin: 2px 0 0; font-size: 11px; color: var(--muted); }
    .task-meta-inline {
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
      height: 22px;
      line-height: 1;
      display: inline-flex;
      align-items: center;
    }
    .task-desc { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
    .task-card.todo .task-desc {
      margin-top: 8px;
      border-top: 1px solid var(--border);
      padding-top: 8px;
    }

    .repeat-badge {
      font-size: 10px;
      font-weight: 700;
      text-transform: none;
      letter-spacing: 0.5px;
      color: var(--accent);
      background: #e8f2fb;
      border-radius: var(--radius);
      padding: 4px 7px;
    }

    .task-expanded { display: none; }
    .task-card.expanded .task-expanded { display: block; }

    .subtasks-box {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      padding: 8px;
    }
    .subtask-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 6px;
    }
    .task-card.task .subtask-row,
    .task-card.todo .subtask-row {
      display: grid;
      grid-template-columns: 224px 60px 36px;
      align-items: center;
      width: 320px;
      height: 25px;
      gap: 0;
      margin-bottom: 0;
    }
    .subtask-row > .ios-switch {
      width: 36px;
      height: 20px;
      margin-top: 0;
      flex: 0 0 auto;
    }
    .task-card.task .subtask-row > .ios-switch,
    .task-card.todo .subtask-row > .ios-switch {
      grid-column: 3;
      justify-self: center;
    }
    .subtask-row > .ios-switch .ios-slider {
      border-radius: 3px;
      box-shadow: none;
    }
    .subtask-row > .ios-switch .ios-slider::before {
      width: 14px;
      height: 12px;
      left: 4px;
      top: 4px;
      border-radius: 2px;
      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
      transform: none;
    }
    .subtask-row > .ios-switch input:checked + .ios-slider::before {
      transform: translateX(14px);
    }
    .subtask-row:last-child { margin-bottom: 0; }
    .subtask-row.is-draggable {
      padding: 4px 0;
      border-radius: var(--radius);
    }
    .subtask-row.is-draggable.drop-before {
      box-shadow: inset 0 2px 0 var(--accent);
    }
    .subtask-row.is-draggable.drop-after {
      box-shadow: inset 0 -2px 0 var(--accent);
    }
    .subtask-grip {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 18px;
      height: 18px;
      color: var(--muted);
      cursor: grab;
      flex: 0 0 auto;
      user-select: none;
    }
    .subtask-grip svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      stroke-width: 1.8;
      fill: none;
      stroke-linecap: round;
    }
    .subtask-text {
      font-size: 12px;
      flex: 1 1 auto;
      min-width: 0;
    }
    .task-card.task .subtask-text,
    .task-card.todo .subtask-text {
      display: block;
      grid-column: 1;
      width: 334px;
      max-width: 334px;
      height: 25px;
      line-height: 25px;
      font-size: 12px;
      font-weight: 400;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .subtask-text.done {
      color: var(--muted);
      text-decoration: line-through;
    }
    .subtask-time {
      font-size: 10px;
      color: var(--muted);
      margin-left: auto;
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .task-card.task .subtask-time,
    .task-card.todo .subtask-time {
      display: none;
    }
    .payment-calendar-grid {
      display: grid;
      gap: 14px;
    }
    .payment-calendar-count {
      border: 1px solid var(--line);
      border-radius: 3px;
      padding: 12px;
      background: #fff;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      padding-bottom: 6px;
    }
    .payment-calendar-table {
      display: grid;
      gap: 8px;
      min-width: 780px;
    }
    .payment-calendar-header,
    .payment-calendar-month-row {
      display: grid;
      grid-template-columns: 88px repeat(5, minmax(0, 1fr));
      gap: 8px;
      align-items: start;
    }
    .payment-calendar-header {
      padding-bottom: 4px;
      border-bottom: 1px solid var(--line-soft);
    }
    .payment-calendar-header-cell {
      font-size: 11px;
      color: var(--muted);
      text-align: center;
    }
    .payment-calendar-header-cell + .payment-calendar-header-cell {
      border-left: 1px solid var(--line-soft);
      padding-left: 8px;
    }
    .payment-calendar-month-row {
      border-radius: 3px;
      padding: 8px;
    }
    .payment-calendar-month-row.warning {
      background: #fff4e5;
      border: 1px solid #e1c16e;
    }
    .payment-calendar-month-label {
      padding-top: 4px;
    }
    .payment-calendar-day-cell {
      display: grid;
      gap: 4px;
      justify-items: center;
      min-width: 0;
    }
    .payment-calendar-day-cell + .payment-calendar-day-cell {
      border-left: 1px solid var(--line-soft);
      padding-left: 8px;
    }
    .payment-calendar-chips {
      display: flex;
      flex-wrap: nowrap;
      gap: 4px;
      justify-content: center;
      width: 100%;
    }
    .payment-calendar-chip {
      min-width: 34px;
      width: 34px;
      height: 24px;
      border: 1px solid #c2c8cc;
      border-radius: 3px;
      background: #f4f6f7;
      color: #1f2528;
      font: inherit;
      font-size: 11px;
      line-height: 1;
      font-weight: 400;
      cursor: pointer;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
      transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
      padding: 0;
    }
    .payment-calendar-chip.state-2 {
      background: #e1c16e;
      color: #203220;
      border-color: #c6a44d;
      font-weight: 600;
      box-shadow: none;
    }
    .payment-calendar-chip.state-4 {
      background: #203220;
      color: #e1c16e;
      border-color: #203220;
      font-weight: 600;
      box-shadow: none;
    }
    .payment-calendar-chip.state-both {
      background: linear-gradient(135deg, #e1c16e 0 50%, #203220 50% 100%);
      color: #ffffff;
      border-color: #203220;
      font-weight: 600;
      box-shadow: none;
    }
    .payment-calendar-chip.state-none {
      background: #f4f6f7;
      color: #1f2528;
    }
    .payment-calendar-chip:hover {
      border-color: #203220;
    }
    .payment-calendar-warning {
      color: #9a5a00;
      font-size: 11px;
      margin-top: 2px;
      text-align: center;
    }
    .payment-calendar-counts {
      display: flex;
      gap: 8px;
      justify-content: center;
      align-items: center;
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }
    .subtasks-inline {
      margin-top: 8px;
      border-top: 1px solid var(--border);
      padding-top: 8px;
      display: grid;
      gap: 6px;
    }
    .task-card.task .subtasks-inline,
    .task-card.todo .subtasks-inline {
      width: 320px;
      margin-top: 0;
      padding-top: 25px;
      border-top: 0;
      display: grid;
      gap: 0;
    }
    .task-time-box {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      padding: 10px;
      display: grid;
      gap: 8px;
    }
    .task-time-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .task-time-display {
      font-size: 13px;
      font-weight: 600;
      color: var(--ink);
    }
    .task-time-buttons {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
    }
    .subtask-add {
      margin-top: 8px;
      display: flex;
      gap: 8px;
    }
    .subtask-add input { flex: 1 1 auto; }

    .task-controls {
      margin-top: 8px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .task-scope-row {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 6px;
    }
    .task-title-inline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }
    .task-title-inline label { margin: 0; flex: 0 0 auto; }
    .task-title-inline input { width: 160px; min-width: 160px; flex: 0 0 160px; }
    .task-manual-inline {
      display: inline-flex;
      align-items: center;
      gap: 6px;
    }
    .task-manual-inline label {
      margin: 0;
      white-space: nowrap;
    }
    .task-manual-inline input {
      width: 88px;
      min-width: 88px;
    }
    .task-time-topline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .task-time-topline .task-time-display {
      white-space: nowrap;
    }
    .scope-toggle {
      display: inline-flex;
      gap: 4px;
    }
    .scope-toggle .btn {
      font-size: 10px;
      padding: 4px 7px;
      min-width: 72px;
    }
    .repeat-under-deadline {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .repeat-under-deadline p {
      margin: 0;
      font-size: 11px;
      font-weight: 700;
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0.5px;
    }
    .deadline-inline {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .deadline-inline label {
      margin: 0;
      flex: 0 0 auto;
    }
    .deadline-inline input {
      width: auto;
      min-width: 160px;
    }
    .repeat-inline-row {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 8px;
      align-items: end;
    }
    .repeat-inline-row input,
    .repeat-inline-row select {
      width: 100%;
    }
    .task-form-divider {
      grid-column: 1 / -1;
      height: 1px;
      background: var(--border);
      margin: 2px 0 0;
    }
    .task-section-divider {
      height: 1px;
      background: var(--border);
      margin: 8px 0 10px;
    }
    .month-popover {
      position: fixed;
      z-index: 1300;
      width: 252px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: 0 12px 28px rgba(18, 40, 70, 0.14);
      padding: 8px;
      display: grid;
      gap: 8px;
    }
    .month-popover-head {
      display: grid;
      grid-template-columns: 26px 1fr 26px;
      gap: 6px;
      align-items: center;
    }
    .month-popover-year {
      text-align: center;
      font-size: 12px;
      font-weight: 600;
      color: var(--ink);
    }
    .month-popover-nav {
      width: 26px;
      height: 22px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .month-popover-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px;
    }
    .month-popover-month {
      width: 100%;
      height: 24px;
      padding: 0 6px;
      font-size: 11px;
      font-weight: 500;
    }
    .month-popover-month.active {
      background: var(--accent-soft);
      border-color: rgba(15, 108, 189, 0.35);
      color: var(--accent);
    }
    .client-form-divider {
      grid-column: 1 / -1;
      height: 1px;
      background: var(--border);
      margin: 4px 0;
    }

    .task-select { width: auto; min-width: 130px; font-size: 11px; padding: 6px 8px; }
    .task-number { width: 78px; font-size: 11px; padding: 6px 8px; }

    .content { padding: 16px; display: grid; gap: 12px; }

    .process-card {
      display: grid;
      grid-template-columns: 25px 25px 320px;
      align-items: start;
      width: 370px;
      min-height: 50px;
      border: 0;
      border-radius: 3px;
      overflow: visible;
      background: #ffffff;
      margin-bottom: 25px;
      min-width: 0;
    }
    #processList .process-card:last-child {
      margin-bottom: 0;
    }
    .process-card.active {
      background: #ffffff;
      border-color: transparent;
    }
    .process-status-marker {
      grid-column: 1;
      grid-row: 1 / -1;
      display: block;
      width: 25px;
      height: 100%;
      min-height: 50px;
      border-radius: 3px 0 0 3px;
      background: #d9d9d9;
    }
    .process-card.active .process-status-marker {
      background: #000000;
    }
    .process-column-gap {
      grid-column: 2;
      grid-row: 1 / -1;
      display: block;
      width: 25px;
      height: 100%;
      min-height: 50px;
    }
    .process-stack {
      grid-column: 3;
      width: 320px;
      min-height: 50px;
      min-width: 0;
    }
    .process-head {
      width: 100%;
      border: 0;
      background: transparent;
      padding: 0;
      display: grid;
      grid-template-columns: 250px 25px 15px 30px;
      align-items: center;
      width: 100%;
      height: 50px;
      cursor: pointer;
      text-align: left;
      font-family: inherit;
      min-width: 0;
    }
    .process-head-copy {
      min-width: 0;
      width: 100%;
      height: 50px;
    }
    .process-name {
      margin: 0;
      width: 100%;
      height: 50px;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 50px;
      font-size: 14px;
      font-weight: 400;
      color: #000000;
    }
    .process-card.active .process-name {
      font-weight: 600;
    }
    .process-edit-gap {
      display: block;
      width: 25px;
      height: 50px;
    }
    .process-edit-slot {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
    }
    .process-card-edit-link {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 15px;
      height: 15px;
      min-width: 15px;
      min-height: 15px;
      padding: 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      color: #000000;
      cursor: pointer;
      line-height: 1;
      appearance: none;
      -webkit-appearance: none;
    }
    .process-card-edit-link svg {
      display: block;
      width: 15px;
      height: 15px;
    }
    .process-body { display: none; padding: 25px 0 25px; background: transparent; }
    .process-card.active .process-body,
    .process-card.is-closing .process-body { display: block; }
    .process-body.editing { padding: 25px 0 25px; }
    .process-desc {
      margin: 0;
      font-size: 13px;
      font-weight: 400;
      color: var(--muted);
      line-height: 1.45;
    }
    .process-card.active .process-desc {
      color: #000000;
    }

    .readonly { background: #f5f7fb; color: #5e6575; }
    .rte-toolbar { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
    .rte-btn { font-size: 11px; padding: 4px 7px; }
    .rte-editor {
      margin-top: 8px;
      min-height: 130px;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      padding: 8px;
      font-size: 13px;
      line-height: 1.45;
    }
    .rte-editor ol,
    .rte-editor ul,
    .process-desc ol,
    .process-desc ul {
      margin: 0 !important;
      margin-left: 0 !important;
      margin-inline-start: 0 !important;
      padding-left: 0 !important;
      padding-inline-start: 0 !important;
      list-style-position: inside;
    }
    .rte-editor li,
    .process-desc li {
      margin-left: 0 !important;
      padding-left: 0 !important;
      text-indent: 0 !important;
    }
    .rte-editor ol ol,
    .rte-editor ol ul,
    .rte-editor ul ol,
    .rte-editor ul ul,
    .process-desc ol ol,
    .process-desc ol ul,
    .process-desc ul ol,
    .process-desc ul ul {
      padding-left: 18px !important;
      padding-inline-start: 18px !important;
      margin-left: 0 !important;
      margin-inline-start: 0 !important;
    }
    .rte-editor ol ol,
    .process-desc ol ol {
      list-style-type: lower-alpha;
    }
    .rte-editor[contenteditable="false"] { background: #f5f7fb; color: #5e6575; }
    .process-stamp {
      margin-top: 8px;
      font-size: 11px;
      color: var(--muted);
    }

    .stats {
      border: 1px solid var(--border);
      border-radius: var(--radius);
      background: #fff;
      padding: 12px;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
    }
	    #taskColumn #taskBottomRow {
	      display: flex;
	      grid-template-columns: none;
	      justify-content: center;
	      align-items: center;
	      flex-wrap: nowrap;
	    }

    .stat { border: 1px solid var(--border); border-radius: var(--radius); background: #fbfcff; padding: 8px; }
    .stat-key { font-size: 10px; text-transform: none; letter-spacing: 0.6px; color: var(--muted); font-weight: 700; }
    .stat-value { margin-top: 2px; font-size: 13px; font-weight: 700; }

    .empty {
      margin: 12px 10px;
      border: 1px dashed var(--border);
      border-radius: var(--radius);
      padding: 12px;
      font-size: 12px;
      color: var(--muted);
      background: #fbfcff;
    }

    .flatpickr-day.weekend {
      background: #fff2f2;
      border-color: #ffd9d9;
      color: #a94442;
    }

    .flatpickr-day.weekend:hover {
      background: #ffe7e7;
    }

    .flatpickr-calendar {
      font-family: "Raleway", "Segoe UI", sans-serif;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: none;
    }

    .flatpickr-months .flatpickr-month {
      background: #fff;
      color: var(--ink);
      fill: var(--ink);
    }

    .flatpickr-weekwrapper {
      background: #f8f9fc;
      border-right: 1px solid var(--border);
    }

    .flatpickr-weekday {
      color: var(--muted);
      font-weight: 600;
    }

    .flatpickr-day.selected,
    .flatpickr-day.startRange,
    .flatpickr-day.endRange {
      background: var(--accent);
      border-color: var(--accent);
    }

    @media (max-width: 1280px) {
      .layout {
        grid-template-columns: minmax(260px, 34vw) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
      }
      #taskColumn::before,
      #processColumn::before {
        display: none;
      }
      #processColumn {
        grid-column: 1 / -1;
        border-left: 0;
      }
      #clientInfoPanel {
        width: min(1100px, calc(100vw - 40px));
      }
      .admin-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 980px) {
      body { padding: 0; }
      .app { height: 100vh; }
      .left-action-rail { display: none; }
      .topbar {
        height: auto;
        min-height: 56px;
        padding: 8px 12px;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
      }
      .top-employee {
        flex-wrap: nowrap;
        gap: 6px;
        max-width: none;
        min-width: 0;
        flex: 1 1 auto;
      }
      .top-employee select {
        width: auto;
        min-width: 120px;
        max-width: 210px;
        flex: 0 1 auto;
      }
      .top-employee .btn {
        flex: 0 0 auto;
      }
      .status {
        margin-right: 0;
        margin-left: 8px;
        width: auto;
        flex: 0 0 auto;
      }
      .layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        overflow: auto;
        padding-left: 12px;
      }
      #processColumn {
        grid-column: auto;
        overflow: visible;
        display: block;
      }
      .column {
        border-right: 0;
        border-left: 0;
        border-bottom: 1px solid var(--border);
        max-height: none;
        min-height: 320px;
      }
      .column:last-child { border-bottom: 0; }
      .section-header {
        min-height: 40px;
        padding: 0 14px;
      }
      #taskColumn #taskBottomRow,
      #clientActionsBottom,
      #processActionsBottom {
        margin-left: 10px !important;
        margin-right: 10px !important;
      }
      #clientActionsBottom {
        margin-left: 16px !important;
        margin-right: 16px !important;
      }
      #taskColumn #taskBottomRow {
        margin-left: 16px !important;
        margin-right: 16px !important;
      }
      #taskColumn #taskBottomRow .btn,
      #taskColumn #taskMonthBottom .btn {
        white-space: nowrap;
      }
      #clientInfoPanel {
        position: fixed;
        left: 50%;
        top: 50%;
        right: auto;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: min(1100px, calc(100vw - 24px));
        max-height: calc(100vh - 24px);
        overflow: auto;
        box-shadow: 0 26px 64px rgba(18, 40, 70, 0.24);
        border: 0;
      }
      .client-edit-layout {
        grid-template-columns: 1fr;
      }
      .client-inline-field {
        grid-template-columns: 1fr;
        gap: 6px;
      }
      .client-inline-field > label,
      .client-inline-field > .subscription-history-heading {
        margin-top: 0;
      }
      #processColumn .content {
        overflow: visible;
        max-height: none;
        margin-top: var(--column-header-content-gap) !important;
      }
      #processColumn #processActionsBottom {
        position: static;
        margin-top: 0 !important;
      }
      .employee-name {
        width: auto;
        min-width: 0;
        max-width: none;
        flex: 1 1 auto;
      }
      .employee-actions {
        grid-template-columns: 74px 110px 90px 64px;
      }
    }

    @media (max-width: 720px) {
      .left-action-rail { display: none; }
      #taskColumn #taskBottomRow { gap: 6px; }
      #taskColumn #taskBottomRow .btn,
      #taskColumn #taskMonthBottom .btn {
        font-size: 11px;
        padding: 6px 8px;
      }
      .top-employee { max-width: none; }
      .status { width: auto; justify-content: flex-end; }
      .top-logo {
        max-width: 160px;
      }
      .employee-row {
        flex-wrap: wrap;
        align-items: flex-start;
      }
      .employee-actions {
        width: 100%;
        grid-template-columns: 1fr 1fr;
      }
      .admin-metrics-grid {
        grid-template-columns: 1fr;
      }
      .admin-distribution-row {
        grid-template-columns: 1fr;
      }
      .stats-table .thead,
      .stats-table .trow {
        grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr;
        font-size: 11px;
      }
    }