.hbl-make-view {
  min-width: 0;
  color: #18364a;
}

.hbl-make-header,
.hbl-make-search,
.hbl-make-toolbar,
.hbl-make-footer {
  display: flex;
  align-items: center;
}

.hbl-make-header {
  justify-content: space-between;
  margin-bottom: 16px;
}

.hbl-make-header p,
.hbl-make-header h2 {
  margin: 0;
}

.hbl-make-header p {
  margin-bottom: 4px;
  color: #718494;
  font-size: 12px;
}

.hbl-make-header-summary {
  display: flex;
  align-items: baseline;
  gap: 5px;
  padding: 9px 13px;
  border: 1px solid #d9e4eb;
  border-radius: 12px;
  background: #f7fafc;
}

.hbl-make-header-summary strong {
  color: #087e8b;
  font-size: 22px;
}

.hbl-make-header-summary span {
  color: #718494;
  font-size: 12px;
}

.hbl-make-search {
  align-items: flex-end;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d9e4eb;
  border-radius: 14px;
  background: #f8fbfd;
}

.hbl-make-search label,
.hbl-make-dialog label {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hbl-make-search label > span,
.hbl-make-dialog label > span {
  color: #607787;
  font-size: 12px;
  font-weight: 700;
}

.hbl-make-search select {
  min-width: 96px;
}

.hbl-make-search .hbl-make-keyword {
  flex: 0 0 240px;
  width: 240px;
}

.hbl-make-search-input-wrap {
  position: relative;
  display: block;
}

.hbl-make-search .hbl-make-keyword input {
  padding-right: 30px;
}

.hbl-make-search-spinner {
  position: absolute;
  top: 50%;
  right: 10px;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid #b7d3db;
  border-top-color: #087e8b;
  border-radius: 50%;
  animation: hbl-make-search-spin .7s linear infinite;
  pointer-events: none;
}

.hbl-make-search-spinner.hidden {
  display: none;
}

.hbl-make-search.is-searching .hbl-make-keyword input {
  border-color: #8bbbc3;
  background: #fbfeff;
}

@keyframes hbl-make-search-spin {
  to { transform: rotate(360deg); }
}

.hbl-make-search input,
.hbl-make-search select,
.hbl-make-dialog input,
.hbl-make-dialog select,
.hbl-make-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  border: 1px solid #cbd9e2;
  border-radius: 9px;
  background: #fff;
  color: #18364a;
  font: inherit;
  padding: 8px 10px;
}

.hbl-make-dialog textarea {
  line-height: 1.45;
  resize: vertical;
}

/* Safari otherwise collapses native selects below the component's declared
   38px minimum, while Chromium renders the intended size. */
.hbl-make-search select,
.hbl-make-dialog select {
  height: 38px;
}

.hbl-make-search input:focus,
.hbl-make-search select:focus,
.hbl-make-dialog input:focus,
.hbl-make-dialog select:focus,
.hbl-make-dialog textarea:focus {
  border-color: #1597a5;
  box-shadow: 0 0 0 3px rgba(21, 151, 165, .12);
  outline: none;
}

.hbl-make-toolbar {
  justify-content: space-between;
  gap: 10px;
  margin: 12px 0;
}

.hbl-make-toolbar > div {
  display: flex;
  gap: 8px;
}

.hbl-make-toolbar button,
.hbl-make-search button,
.hbl-make-dialog button {
  border: 1px solid #c6d6df;
  border-radius: 9px;
  background: #fff;
  color: #24475b;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  min-height: 38px;
  padding: 8px 13px;
}

.hbl-make-toolbar button.primary,
.hbl-make-search button.primary,
.hbl-make-dialog button.primary {
  border-color: #087e8b;
  background: #087e8b;
  color: #fff;
}

.hbl-make-toolbar button:disabled,
.hbl-make-search button:disabled,
.hbl-make-dialog button:disabled {
  cursor: not-allowed;
  opacity: .5;
}

.hbl-make-error {
  margin-bottom: 10px;
  padding: 10px 12px;
  border: 1px solid #f2c0bd;
  border-radius: 9px;
  background: #fff3f2;
  color: #a8332d;
}

.hbl-make-table-wrap {
  overflow: auto;
  border: 1px solid #d9e4eb;
  border-radius: 13px;
  background: #fff;
}

.hbl-make-table {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
}

.hbl-make-table th,
.hbl-make-table td {
  border-bottom: 1px solid #e4ebf0;
  padding: 11px 12px;
  text-align: left;
  white-space: nowrap;
}

.hbl-make-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f1f6f8;
  color: #526c7c;
  font-size: 12px;
  letter-spacing: .02em;
}

.hbl-make-table tbody tr:hover {
  background: #f7fbfc;
}

.hbl-make-search-hit {
  border-radius: 3px;
  background: #fff0a8;
  color: #754c08;
  padding: 0 1px;
}

.hbl-make-check {
  width: 42px;
  text-align: center !important;
}

.hbl-make-no-select .hbl-make-check {
  display: none;
}

.hbl-make-type {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
}

.hbl-make-type.hbl {
  background: #e5f5f7;
  color: #087e8b;
}

.hbl-make-type.telex {
  background: #fff0e4;
  color: #a95c19;
}

.hbl-make-link,
.hbl-make-actions button {
  border: 0;
  background: transparent;
  color: #087e8b;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  padding: 3px 5px;
}

.hbl-make-actions {
  display: flex;
  gap: 5px;
}

.hbl-make-actions button.danger {
  color: #b43d36;
}

.hbl-make-footer {
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.hbl-make-footer > label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #607787;
  font-size: 12px;
}

.hbl-make-footer select {
  height: 34px;
  min-height: 34px;
  border: 1px solid #cbd9e2;
  border-radius: 8px;
  background: #fff;
  padding: 5px 8px;
}

body.hbl-make-modal-open {
  overflow: hidden;
}

.hbl-make-modal {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(17, 42, 57, .52);
  backdrop-filter: blur(3px);
}

.hbl-make-modal.hidden {
  display: none;
}

.hbl-make-dialog {
  display: flex;
  flex-direction: column;
  width: min(1540px, 96vw);
  max-height: 94vh;
  overflow: hidden;
  border: 1px solid #d1dee6;
  border-radius: 18px;
  background: #f7fafc;
  box-shadow: 0 24px 80px rgba(16, 42, 58, .28);
}

.hbl-make-dialog > header,
.hbl-make-dialog > footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  background: #fff;
}

.hbl-make-dialog > header {
  border-bottom: 1px solid #dce6ec;
}

.hbl-make-dialog > footer {
  border-top: 1px solid #dce6ec;
}

.hbl-make-dialog > header p,
.hbl-make-dialog > header h2 {
  margin: 0;
}

.hbl-make-dialog > header p {
  margin-bottom: 3px;
  color: #718494;
  font-size: 11px;
}

.hbl-make-dialog > header button {
  width: 38px;
  min-width: 38px;
  padding: 0;
  border-radius: 50%;
  font-size: 23px;
}

.hbl-make-dialog > footer > span {
  color: #ad3e38;
  font-size: 13px;
}

.hbl-make-dialog > footer > div {
  display: flex;
  gap: 8px;
}

.hbl-make-editor-busy {
  min-height: 320px;
  display: grid;
  place-items: center;
  color: #607787;
}

#hblMakeEditorContent {
  overflow: auto;
  padding: 15px 18px 20px;
}

.hbl-make-import-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #bfe0e4;
  border-radius: 12px;
  background: #eef9fa;
}

.hbl-make-import-panel > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.hbl-make-import-panel span {
  color: #607787;
  font-size: 12px;
}

.hbl-make-import-controls {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(250px, 1.4fr) auto;
  gap: 7px;
  flex: 1;
  max-width: 900px;
}

.hbl-make-form-section {
  margin-bottom: 13px;
  padding: 14px;
  border: 1px solid #d9e4eb;
  border-radius: 13px;
  background: #fff;
}

.hbl-make-form-section h3 {
  margin: 0 0 12px;
  color: #25495d;
  font-size: 15px;
}

.hbl-make-identification {
  border-color: #b8dce0;
  background: linear-gradient(135deg, #f4fcfd 0%, #fff 62%);
}

.hbl-make-section-kicker {
  margin: 0 0 3px;
  color: #087e8b;
  font-size: 12px;
  font-weight: 700;
}

.hbl-make-parties,
.hbl-make-grid,
.hbl-make-cargo-columns {
  display: grid;
  gap: 11px;
}

.hbl-make-parties {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hbl-make-party .hbl-make-lookup {
  margin-bottom: 2px;
}

.hbl-make-order-no,
.hbl-make-lookup {
  position: relative;
}

.hbl-make-order-candidates,
.hbl-make-lookup-candidates {
  position: absolute;
  z-index: 24;
  top: calc(100% + 3px);
  right: 0;
  left: 0;
  max-height: 190px;
  overflow: auto;
  border: 1px solid #b9cdd9;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 10px 22px rgba(30, 67, 86, .18);
}

.hbl-make-order-candidates.hidden,
.hbl-make-lookup-candidates.hidden {
  display: none;
}

.hbl-make-order-candidates button,
.hbl-make-lookup-candidates button {
  display: block;
  width: 100%;
  min-height: 34px;
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid #e4ebf0;
  padding: 7px 10px;
  background: #fff;
  color: #24475b;
  text-align: left;
  font-weight: 600;
}

.hbl-make-order-candidates button:hover,
.hbl-make-order-candidates button:focus,
.hbl-make-lookup-candidates button:hover,
.hbl-make-lookup-candidates button:focus {
  background: #eaf6f7;
}

.hbl-make-order-candidates button:last-child,
.hbl-make-lookup-candidates button:last-child {
  border-bottom: 0;
}

.hbl-make-order-candidates mark,
.hbl-make-lookup-candidates mark {
  padding: 1px 3px;
  border-radius: 3px;
  background: #ffe56f;
  color: #173d55;
  font-weight: 800;
}

.hbl-make-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.hbl-make-key-fields {
  grid-template-columns: minmax(180px, 1.2fr) minmax(260px, 1.6fr) minmax(120px, .7fr) minmax(70px, .4fr) minmax(160px, 1fr);
}

.hbl-make-key-fields > label:first-child > span,
.hbl-make-key-fields .hbl-make-order-no > span {
  color: #087e8b;
}

.hbl-make-key-fields > label:first-child input,
.hbl-make-key-fields .hbl-make-order-no input {
  border-color: #8bcbd1;
  font-weight: 700;
}

.hbl-make-route-fields {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hbl-make-route-loading-stack {
  display: grid;
  min-width: 0;
  gap: 11px;
}

.hbl-make-grid.metrics {
  grid-template-columns: .5fr 1fr .5fr .5fr 3.5fr;
  margin-top: 12px;
}

.hbl-make-grid.metrics > label > span {
  display: block;
  min-height: 30px;
  line-height: 15px;
}

.hbl-make-cargo-columns {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.hbl-make-cargo-field {
  min-width: 0;
}

.hbl-make-cargo-field textarea {
  min-height: 116px;
}

.hbl-make-shipping-terms {
  min-width: 0;
  margin: 0;
}

.hbl-make-section-title,
.hbl-make-list-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.hbl-make-section-title {
  margin-bottom: 10px;
}

.hbl-make-section-title h3 {
  margin: 0;
}

.hbl-make-section-title label {
  min-width: 240px;
}

.hbl-make-list-title {
  margin: 8px 0 6px;
}

.hbl-make-list-title button {
  min-height: 30px;
  padding: 4px 9px;
  font-size: 12px;
}

.hbl-make-text-row {
  display: grid;
  grid-template-columns: 1fr 34px;
  gap: 6px;
  margin-bottom: 6px;
}

.hbl-make-text-row button {
  min-height: 34px;
  padding: 0;
  color: #a33d37;
}

.hbl-make-shipper-rows {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.hbl-make-shipper-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1.5fr 28px;
  align-items: end;
  gap: 7px;
  padding: 8px;
  border: 1px dashed #ccdae2;
  border-radius: 10px;
  background: #f8fbfc;
}

.hbl-make-shipper-row > button {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  height: 28px;
  padding: 0;
  color: #a33d37;
  font-size: 16px;
  line-height: 1;
}

.hbl-make-document .hbl-make-shipment-note-row {
  grid-template-columns: minmax(0, 1fr) 28px;
}

.hbl-make-empty-inline {
  padding: 11px;
  border: 1px dashed #ccd9e1;
  border-radius: 9px;
  color: #718494;
  font-size: 12px;
  text-align: center;
}

.hbl-make-place-of-issue input {
  background: #f1f5f7;
  color: #607787;
}

/* Same document grid as the order HBL editor. Tool controls remain editable;
   all overrides are scoped so order workflow fields and mail dock are untouched. */
.hbl-make-document {
  color: #213f60;
  background: #fff;
  box-shadow: 0 12px 30px rgba(32, 78, 119, .12);
}

/* The order HBL workflow is the typography authority. Keep these overrides
   inside the standalone tool so the workflow itself and the tool's import
   controls remain untouched. */
.hbl-make-document label > span {
  color: #3d5874;
  font-size: 12px;
  font-weight: 900;
}

.hbl-make-document input,
.hbl-make-document select,
.hbl-make-document textarea {
  border-color: #b9cfe3;
  border-radius: 4px;
  background: linear-gradient(#fff, #f8fbff);
  color: #17324d;
  font-size: 13px;
  font-weight: 800;
}

/* Container identifiers need a larger reading size; all other controls stay unchanged. */
.hbl-make-document input[data-hbl-shipper-part1],
.hbl-make-document input[data-hbl-shipper-part2],
.hbl-make-document input[data-hbl-shipper-part3] {
  font-size: 15px;
}

.hbl-make-document input,
.hbl-make-document select {
  min-height: 32px;
  height: 32px;
  padding: 0 9px;
}

.hbl-make-document textarea {
  padding: 8px 9px;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.hbl-make-document .hbl-document-shell {
  overflow: visible;
  box-shadow: none;
}

.hbl-make-document .hbl-party-card {
  min-width: 0;
  min-height: 190px;
}

.hbl-make-document .hbl-party-card textarea {
  min-height: 118px;
  font-family: "Times New Roman", Georgia, serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}

.hbl-make-document .hbl-title-card {
  justify-content: flex-start;
  gap: 30px;
}

.hbl-make-document .hbl-logo-block {
  margin: auto 0;
}

.hbl-make-document .hbl-logo-block img {
  max-width: 100%;
}

.hbl-make-document-type {
  align-self: center;
  padding: 7px 28px;
  border: 2px solid #2b658d;
  color: #2b658d;
  font-size: 23px;
  letter-spacing: .12em;
  font-weight: 800;
}

.hbl-make-document .hbl-number-row strong {
  overflow-wrap: anywhere;
}

.hbl-make-document .hbl-route-grid > label {
  min-width: 0;
  margin: 0;
  padding: 10px;
  border-right: 1px solid #b8cce0;
  border-bottom: 1px solid #b8cce0;
}

.hbl-make-document .hbl-cargo-grid {
  grid-template-columns: minmax(0, 1fr) 155px 145px 145px;
}

.hbl-make-document .hbl-measure-card {
  min-width: 0;
  gap: 14px;
}

.hbl-make-document .hbl-measure-card label > span {
  min-height: 28px;
  line-height: 1.2;
}

.hbl-make-document .hbl-make-shipper-row {
  grid-template-columns: minmax(120px, 1.3fr) minmax(95px, 1fr) minmax(70px, .7fr) 28px;
}

.hbl-make-document .hbl-make-shipper-row:has([data-hbl-shipper-name]:not([value=""])) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hbl-make-say {
  padding: 10px 12px;
  border: 1px solid #b8cce0;
  border-top: 0;
}

.hbl-make-document .hbl-issue-grid {
  margin-top: 0;
}

.hbl-make-document .hbl-issue-cell label {
  margin: 0;
}

.hbl-make-preview-value {
  min-height: 30px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #18364a;
  font-weight: 600;
  line-height: 1.5;
}

.hbl-make-preview-note {
  margin: 0 0 12px;
  color: #607787;
  font-size: 13px;
}

.is-layout-preview .hbl-make-identification { display: none; }
#hblMakeDocument.hidden, #hblMakeLayoutPreview.hidden { display: none; }

@media (max-width: 1100px) {
  .hbl-make-document .hbl-cargo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .hbl-make-document .hbl-cargo-main { grid-column: 1 / -1; }
  .hbl-make-key-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1050px) {
  .hbl-make-grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hbl-make-key-fields,
  .hbl-make-route-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hbl-make-grid.metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hbl-make-import-panel {
    align-items: stretch;
    flex-direction: column;
  }

  .hbl-make-import-controls {
    max-width: none;
  }
}

@media (max-width: 720px) {
  .hbl-make-document .hbl-document-shell,
  .hbl-make-document .hbl-route-grid,
  .hbl-make-document .hbl-issue-grid { grid-template-columns: minmax(0, 1fr); }
  .hbl-make-document .hbl-title-card { grid-row: auto; }
  .hbl-make-document .hbl-number-row { grid-template-columns: minmax(0, 1fr); }
  .hbl-make-document .hbl-make-shipper-row { grid-template-columns: minmax(0, 1fr); }
  .hbl-make-dialog > footer { flex-wrap: wrap; padding: 10px; }
  .hbl-make-dialog > footer > div { flex-wrap: wrap; }
  .hbl-make-dialog > footer > span:empty { display: none; }
  #hblMakeEditorContent { padding: 10px; }
  .hbl-make-header,
  .hbl-make-search,
  .hbl-make-toolbar,
  .hbl-make-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .hbl-make-parties,
  .hbl-make-grid.four,
  .hbl-make-key-fields,
  .hbl-make-route-fields,
  .hbl-make-grid.metrics,
  .hbl-make-import-controls {
    grid-template-columns: 1fr;
  }

  .hbl-make-shipper-row {
    grid-template-columns: 1fr;
  }

  .hbl-make-dialog {
    width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }

  .hbl-make-modal {
    padding: 0;
  }
}

/* Same PDF glyph family and explicit soft breaks; preserve the tool's grid and control sizes. */
#hblMakeModal #hblMakeShipperName,
#hblMakeModal #hblMakeConsigneeName,
#hblMakeModal #hblMakeNotifyPartyName {
  font-family: "Courier New", "Microsoft YaHei", monospace !important;
  font-weight: bold; white-space: pre; overflow-wrap: normal;
}
#hblMakeModal .hbl-print-layout { top: 2px; }
#hblMakeModal .hbl-tool-print-preview svg { display: block; max-width: 100%; height: auto; }
#hblMakeModal .hbl-tool-print-preview svg text { font-family: "Courier New", "Microsoft YaHei", monospace; font-weight: bold; white-space: pre; }
#hblMakeModal .hbl-tool-print-preview > strong { display: block; }
#hblMakeModal .hbl-tool-print-preview p { font: 11px/1.4 sans-serif; }

.hbl-output-modal { position:fixed; inset:0; z-index:1250; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(19,42,62,.34); backdrop-filter:blur(3px); }
.hbl-output-modal.hidden { display:none; }
.hbl-output-dialog { width:min(520px,100%); max-height:calc(100dvh - 40px); overflow-y:auto; margin:0; border:1px solid #ccdce8; border-radius:22px; background:#fff; color:#203f59; box-shadow:0 24px 70px #15354b36,0 3px 12px #15354b14; }
.hbl-output-head { display:flex; align-items:center; justify-content:space-between; padding:23px 26px 20px; border-bottom:1px solid #e6edf3; background:linear-gradient(130deg,#f2f8fd,#fff); }
.hbl-output-head p { margin:0 0 5px; color:#6f8ca3; font-size:12px; }
.hbl-output-head h2 { margin:0; font-size:21px; font-weight:700; letter-spacing:.4px; }
.hbl-output-close { flex:none; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:#eaf1f7; color:#678198; font-size:23px; cursor:pointer; }
.hbl-output-body { padding:23px 26px 5px; }
.hbl-output-context { display:flex; flex-wrap:wrap; gap:7px 12px; align-items:center; margin-bottom:20px; }
.hbl-output-context strong { font-size:15px; letter-spacing:.25px; }
.hbl-output-context>span { color:#7a8e9d; font-size:12px; }
.hbl-output-onboard { display:flex; gap:12px; align-items:center; justify-content:space-between; padding:17px 18px; border:1px solid #d8e7f3; border-radius:13px; background:#f3f8fc; }
.hbl-output-onboard>div { display:flex; flex-direction:column; gap:6px; }
.hbl-output-onboard>div>label { color:#64829a; font-size:12px; }
.hbl-output-onboard strong { font-size:22px; font-weight:650; letter-spacing:.5px; font-variant-numeric:tabular-nums; }
.hbl-output-source { color:#6387a3; font-size:11px; padding:5px 9px; border-radius:20px; background:#e6f0f8; white-space:nowrap; }
.hbl-output-options { display:flex; gap:10px; margin:23px 0 18px; padding:0; border:0; min-width:0; }
.hbl-output-options legend { float:none; padding:0 0 11px; font-size:14px; font-weight:650; }
.hbl-output-options label { display:flex; flex:1; align-items:center; gap:10px; padding:12px 14px; border:1px solid #dbe5ed; border-radius:12px; cursor:pointer; transition:background .15s,border-color .15s; }
.hbl-output-options label:has(input:checked) { border-color:#6e9ec3; background:#edf5fc; box-shadow:inset 0 0 0 1px #6e9ec329; }
.hbl-output-options input { width:16px; height:16px; margin:0; accent-color:#2e6f9e; }
.hbl-output-options label>span { display:flex; flex-direction:column; gap:5px; }
.hbl-output-options strong { font-size:13px; font-weight:600; }
.hbl-output-options small { color:#7b8e9e; font-size:12px; font-variant-numeric:tabular-nums; }
.hbl-output-date-label { display:block; margin-bottom:7px; color:#6a8093; font-size:12px; }
.hbl-output-date { display:block; box-sizing:border-box; width:100%; min-width:0; padding:11px 14px; border:1px solid #cfdeea; border-radius:10px; background:#fff; color:#27465f; font:inherit; font-size:15px; }
.hbl-output-date:focus { outline:2px solid #8ab5d44d; border-color:#679dc3; }
.hbl-output-message { min-height:17px; margin:9px 0 0; color:#b34f3c; font-size:12px; line-height:1.5; overflow-wrap:anywhere; }
.hbl-output-dialog footer { display:flex; justify-content:flex-end; gap:10px; padding:16px 26px 23px; }
.hbl-output-dialog footer button { border-radius:999px; padding:10px 25px; font:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.hbl-output-cancel { border:1px solid #d7e1ea; background:#fff; color:#6d8397; }
.hbl-output-submit { border:1px solid #286996; background:linear-gradient(#4187b8,#2c6c9b); color:#fff; box-shadow:0 3px 8px #28699626,inset 0 1px 0 #ffffff38; }
.hbl-output-dialog button:disabled { opacity:.55; cursor:wait; }
@media(max-width:520px) { .hbl-output-modal { padding:14px; } .hbl-output-head,.hbl-output-body { padding-left:20px; padding-right:20px; } .hbl-output-dialog footer { padding-left:20px; padding-right:20px; } }

.hbl-output-onboard-date { width:210px; max-width:100%; padding:7px 10px; font-size:18px; background:#fff; }
@media(max-width:520px) { .hbl-output-onboard-date { width:180px; font-size:16px; } .hbl-output-onboard>div { min-width:0; } }