/* ConciergeDeck owner Help: step-by-step guides (step list + full screen + close-up).
   Manual only: nothing advances by itself. No inline styles (CSP style-src 'self');
   per-step highlight and close-up positions are generated at the end of this file. */

/* ---- guide index at the top of Help ---- */
.hs-toc {
  margin: 0 0 8px;
  padding: 16px 18px 18px;
  background: #f4f7f2;
  border: 1px solid #cfdad4;
  border-radius: 8px;
}

.hs-toc h3 {
  margin: 0 0 12px;
  color: #0b7656;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
  text-transform: uppercase;
}

.hs-toc ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-toc a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 12px;
  color: #13231d;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  background: #fff;
  border: 1px solid #dde3df;
  border-radius: 8px;
}

.hs-toc a:hover { border-color: #9fd3bd; background: #f8fbf9; }
.hs-toc a:focus-visible { outline: 2px solid #0b7656; outline-offset: 2px; }

.hs-toc a span {
  flex: 0 0 auto;
  color: #0b7656;
  font-size: 11px;
  font-weight: 850;
}

/* ---- one article per guide ---- */
.hs-article {
  padding: 44px 0 48px;
  border-top: 1px solid rgba(20, 33, 29, .12);
  scroll-margin-top: 140px;
}

.hs-toc + .hs-article { margin-top: 28px; }

.hs-head { max-width: 760px; }
.hs-head .owner-help-actions { margin-top: 18px; }

/* ---- the guide card ---- */
.hs-guide {
  display: grid;
  grid-template-columns: minmax(250px, 300px) minmax(0, 1fr);
  grid-template-areas:
    "steps panes"
    "steps nav";
  gap: 22px 40px;
  align-items: start;
  margin-top: 26px;
  padding: 28px;
  background: #fbfcfb;
  border: 1px solid #dde3df;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(24, 33, 30, .06);
}

.hs-guide:focus { outline: none; }
.hs-guide:focus-visible { outline: 2px solid #0b7656; outline-offset: 3px; }

/* ---- step list ---- */
.hs-steps-col { grid-area: steps; min-width: 0; }

.hs-count {
  margin: 0 0 12px;
  color: #0b7656;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.hs-steps {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hs-step-button {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
  margin: 0;
  padding: 9px 10px;
  color: #13231d;
  font: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
}

.hs-step-button:hover { background: #f0f5f2; }
.hs-step-button:focus-visible { outline: 2px solid #0b7656; outline-offset: 1px; }

.hs-num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: #4d6158;
  font-size: 13px;
  font-weight: 800;
  background: #fff;
  border: 1.5px solid #9db3a8;
  border-radius: 50%;
}

.hs-step-text { display: grid; gap: 2px; min-width: 0; padding-top: 1px; }

.hs-kicker {
  color: #607169;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
}

.hs-step-text strong {
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
}

.hs-detail {
  margin: 4px 10px 10px 50px;
  color: rgba(20, 33, 29, .74);
  font-size: 13.5px;
  line-height: 1.55;
}

.hs-step:not(.is-current) .hs-detail { display: none; }

.hs-step.is-done .hs-num { color: #0b7656; background: #dff4ec; border-color: #9fd3bd; }
.hs-step.is-done .hs-step-text strong { color: #3f524a; font-weight: 650; }

.hs-step.is-current .hs-step-button { background: #e6f2ec; border-color: #9fd3bd; }
.hs-step.is-current .hs-num { color: #fff; background: #0b7656; border-color: #0b7656; }
.hs-step.is-current .hs-kicker { color: #0b7656; }

/* ---- screen + close-up (one pane per step; only the current one is shown) ---- */
.hs-panes { grid-area: panes; min-width: 0; }

.hs-pane {
  display: grid;
  grid-template-columns: minmax(0, 290px) minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

.hs-pane[hidden] { display: none; }

.hs-screen,
.hs-zoom-fig { margin: 0; min-width: 0; }

.hs-phone {
  padding: 9px;
  background: #111814;
  border-radius: 38px;
  box-shadow: 0 24px 60px rgba(20, 33, 29, .18);
}

.hs-shot {
  position: relative;
  overflow: hidden;
  border-radius: 29px;
  background: #f4f6f4;
}

.hs-screen-img {
  display: block;
  width: 100%;
  height: auto;
}

.hs-ring,
.hs-zoom-ring {
  position: absolute;
  box-sizing: border-box;
  pointer-events: none;
}

.hs-ring {
  border: 2.5px solid rgba(24, 190, 132, .98);
  border-radius: 8px;
  box-shadow: 0 0 0 3px rgba(95, 231, 183, .30), 0 0 14px rgba(49, 206, 151, .35);
}

.hs-zoom {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #fff;
  border-radius: 14px;
  /* the frame line is a shadow, not a border, so the window stays exactly 4:3 and the crop maths holds */
  box-shadow: 0 0 0 1px #cfdad4, 0 18px 44px rgba(20, 33, 29, .12);
}

.hs-zoom-img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
}

.hs-zoom-ring {
  border: 3px solid rgba(24, 190, 132, .98);
  border-radius: 12px;
  box-shadow: 0 0 0 4px rgba(95, 231, 183, .26);
}

.hs-ring.is-circle,
.hs-zoom-ring.is-circle { border-radius: 50%; }

.hs-ring.is-look,
.hs-zoom-ring.is-look {
  border-style: dashed;
  box-shadow: none;
}

.hs-caption {
  margin-top: 10px;
  color: rgba(20, 33, 29, .66);
  font-size: 13px;
  line-height: 1.45;
}

.hs-screen .hs-caption { text-align: center; }

.hs-zoom-label {
  margin-right: 6px;
  color: #0b7656;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

/* Hide a highlight until its screenshot has loaded, so it never floats over an empty frame. */
.hs-guide.is-ready .hs-pane:not(.is-loaded) .hs-ring,
.hs-guide.is-ready .hs-pane:not(.is-loaded) .hs-zoom-ring { visibility: hidden; }

/* ---- previous / next ---- */
.hs-nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.hs-nav .button { min-width: 128px; justify-content: center; }
.hs-nav .button:disabled { opacity: .45; cursor: default; }

.hs-progress {
  flex: 1;
  min-width: 40px;
  height: 6px;
  overflow: hidden;
  background: #dde3df;
  border-radius: 999px;
}

.hs-progress i {
  display: block;
  height: 100%;
  background: #0b7656;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .hs-progress i { transition: none; }
}

/* ---- "Which files work" inside the import guide ---- */
.owner-help-files {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 32px;
  align-items: start;
  margin-top: 22px;
  padding: 24px 26px;
  background: #f4f7f2;
  border: 1px solid #cfdad4;
  border-radius: 8px;
  scroll-margin-top: 140px;
}

.owner-help-files h4 {
  margin: 0 0 10px;
  color: #13231d;
  font-size: 18px;
  line-height: 1.25;
}

.owner-help-files p,
.owner-help-files li {
  color: rgba(20, 33, 29, .72);
  font-size: 14px;
  line-height: 1.6;
}

.owner-help-files p { margin: 0; }
.owner-help-files p strong { color: #13231d; }

.owner-help-files ul {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding-left: 18px;
}

.owner-help-files-example { margin: 0; min-width: 0; }

.owner-help-files-example figcaption {
  margin-bottom: 8px;
  color: #0b7656;
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.owner-help-files-example table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border: 1px solid #cfdad4;
  font-size: 13px;
  table-layout: fixed;
}

.owner-help-files-example th,
.owner-help-files-example td {
  height: 36px;
  padding: 7px 10px;
  border: 1px solid #dde3df;
  color: #13231d;
  text-align: left;
  overflow-wrap: anywhere;
}

.owner-help-files-example th {
  background: #e8eee9;
  font-weight: 800;
}

/* ---- tablets: screen and close-up side by side, the full step list underneath ---- */
@media (max-width: 1099px) {
  .hs-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hs-guide {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "panes"
      "nav"
      "steps";
    gap: 22px;
  }
  .hs-pane { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; }
  .owner-help-files { grid-template-columns: 1fr; gap: 22px; }
}

/* ---- phones: screenshot, close-up, then only the current step with Previous / Next ---- */
@media (max-width: 699px) {
  .hs-article { padding: 34px 0 36px; scroll-margin-top: 120px; }
  .hs-toc { padding: 14px 12px 12px; }
  .hs-toc ol { gap: 6px; }
  .hs-toc a { gap: 7px; min-height: 42px; padding: 7px 9px; font-size: 13px; }
  .hs-guide {
    grid-template-areas:
      "panes"
      "steps"
      "nav";
    gap: 16px;
    margin-top: 20px;
    padding: 16px 14px;
  }
  .hs-pane { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hs-screen { justify-self: center; width: min(100%, 250px); }
  .hs-phone { padding: 7px; border-radius: 32px; }
  .hs-shot { border-radius: 25px; }
  .hs-zoom-fig { justify-self: center; width: min(100%, 440px); }
  /* the current step's text sits right below, so the captions would only repeat it */
  .hs-pane .hs-caption { display: none; }
  .hs-step:not(.is-current) { display: none; }
  .hs-step-button { padding: 8px; cursor: default; }
  .hs-step.is-current .hs-step-button { background: transparent; border-color: transparent; }
  .hs-detail { margin: 4px 4px 0 48px; }
  .hs-count { margin-bottom: 4px; }
  .hs-nav { gap: 10px; }
  .hs-nav .button { min-width: 0; flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }
  .owner-help-files { padding: 18px 16px; }
  .owner-help-files-example th,
  .owner-help-files-example td { padding: 6px 7px; font-size: 12px; }
}

@media (max-width: 374px) {
  .hs-toc ol { grid-template-columns: minmax(0, 1fr); }
  .hs-guide { padding: 14px 10px; }
  .hs-nav .button { padding-left: 11px; padding-right: 11px; }
}

/* ---- dark theme ---- */
[data-theme="dark"] .hs-toc,
[data-theme="dark"] .owner-help-files { background: var(--dark-2); border-color: var(--line); }
[data-theme="dark"] .hs-toc a { color: #fff; background: transparent; border-color: var(--line); }
[data-theme="dark"] .hs-article { border-top-color: var(--line); }
[data-theme="dark"] .hs-guide { background: var(--dark-2); border-color: var(--line); box-shadow: none; }
[data-theme="dark"] .hs-zoom { box-shadow: 0 0 0 1px var(--line); }
[data-theme="dark"] .hs-step-button,
[data-theme="dark"] .owner-help-files h4,
[data-theme="dark"] .owner-help-files p strong { color: #fff; }
[data-theme="dark"] .hs-step-button:hover,
[data-theme="dark"] .hs-step.is-current .hs-step-button { background: rgba(255, 255, 255, .06); border-color: var(--line); }
[data-theme="dark"] .hs-detail,
[data-theme="dark"] .hs-caption,
[data-theme="dark"] .owner-help-files p,
[data-theme="dark"] .owner-help-files li { color: var(--muted); }

/* ---- generated: highlight and close-up positions per guide step (from guides-v6.json) ---- */
#admin-setup [data-pane="1"] .hs-ring { left: 3.75%; top: 26.1%; width: 92.5%; height: 17%; }
#admin-setup [data-pane="1"] .hs-zoom-img { width: 100%; left: 0%; top: -50.3%; }
#admin-setup [data-pane="1"] .hs-zoom-ring { left: 3.75%; top: 25.36%; width: 92.5%; height: 49.28%; }
#admin-setup [data-pane="2"] .hs-ring { left: 4.75%; top: 28.2%; width: 90.5%; height: 13%; }
#admin-setup [data-pane="2"] .hs-zoom-img { width: 100%; left: 0%; top: -50.59%; }
#admin-setup [data-pane="2"] .hs-zoom-ring { left: 4.75%; top: 31.158%; width: 90.5%; height: 37.685%; }
#admin-setup [data-pane="3"] .hs-ring { left: 21.7%; top: 89.3%; width: 16%; height: 6.2%; }
#admin-setup [data-pane="3"] .hs-zoom-img { width: 200%; left: -9.4%; top: -479.768%; }
#admin-setup [data-pane="3"] .hs-zoom-ring { left: 34%; top: 37.965%; width: 32%; height: 35.946%; }
#admin-setup [data-pane="4"] .hs-ring { left: 3.5%; top: 31.25%; width: 93%; height: 19.5%; }
#admin-setup [data-pane="4"] .hs-zoom-img { width: 100%; left: 0%; top: -68.852%; }
#admin-setup [data-pane="4"] .hs-zoom-ring { left: 3.5%; top: 21.736%; width: 93%; height: 56.527%; }
#settings-cloud [data-pane="1"] .hs-ring { left: 21.7%; top: 89.3%; width: 16%; height: 6.2%; }
#settings-cloud [data-pane="1"] .hs-zoom-img { width: 200%; left: -9.4%; top: -479.768%; }
#settings-cloud [data-pane="1"] .hs-zoom-ring { left: 34%; top: 37.965%; width: 32%; height: 35.946%; }
#settings-cloud [data-pane="2"] .hs-ring { left: 74%; top: 19.5%; width: 13%; height: 4.8%; }
#settings-cloud [data-pane="2"] .hs-zoom-img { width: 200%; left: -100%; top: -76.969%; }
#settings-cloud [data-pane="2"] .hs-zoom-ring { left: 48%; top: 36.086%; width: 26%; height: 27.829%; }
#settings-cloud [data-pane="3"] .hs-ring { left: 3.3%; top: 26.5%; width: 89%; height: 7.8%; }
#settings-cloud [data-pane="3"] .hs-zoom-img { width: 100%; left: 0%; top: -38.125%; }
#settings-cloud [data-pane="3"] .hs-zoom-ring { left: 3.3%; top: 38.695%; width: 89%; height: 22.611%; }
#settings-cloud [data-pane="4"] .hs-ring { left: 7%; top: 58.2%; width: 34%; height: 6%; }
#settings-cloud [data-pane="4"] .hs-zoom-img { width: 200%; left: 0%; top: -304.818%; }
#settings-cloud [data-pane="4"] .hs-zoom-ring { left: 14%; top: 32.607%; width: 68%; height: 34.786%; }
#import-residents [data-pane="1"] .hs-ring { left: 3%; top: 40.4%; width: 94%; height: 7.6%; }
#import-residents [data-pane="1"] .hs-zoom-img { width: 100%; left: 0%; top: -78.129%; }
#import-residents [data-pane="1"] .hs-zoom-ring { left: 3%; top: 38.984%; width: 94%; height: 22.031%; }
#import-residents [data-pane="2"] .hs-ring { left: 3.65%; top: 22.6%; width: 11.5%; height: 5.4%; }
#import-residents [data-pane="2"] .hs-zoom-img { width: 200%; left: 0%; top: -96.681%; }
#import-residents [data-pane="2"] .hs-zoom-ring { left: 7.3%; top: 34.346%; width: 23%; height: 31.307%; }
#import-residents [data-pane="3"] .hs-ring { left: 4%; top: 35.9%; width: 92%; height: 6.4%; }
#import-residents [data-pane="3"] .hs-zoom-img { width: 100%; left: 0%; top: -63.345%; }
#import-residents [data-pane="3"] .hs-zoom-ring { left: 4%; top: 40.724%; width: 92%; height: 18.553%; }
#import-residents [data-pane="4"] .hs-ring { left: 4.9%; top: 22.5%; width: 27%; height: 21%; }
#import-residents [data-pane="4"] .hs-zoom-img { width: 136.891%; left: 0%; top: -80.952%; }
#import-residents [data-pane="4"] .hs-zoom-ring { left: 6.708%; top: 8.333%; width: 36.961%; height: 83.333%; }
#import-residents [data-pane="5"] .hs-ring { left: 3.25%; top: 90.1%; width: 93.5%; height: 5.6%; }
#import-residents [data-pane="5"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#import-residents [data-pane="5"] .hs-zoom-ring { left: 3.25%; top: 71.301%; width: 93.5%; height: 16.233%; }
#import-residents [data-pane="6"] .hs-ring { left: 62.25%; top: 61.1%; width: 22.5%; height: 5.8%; }
#import-residents [data-pane="6"] .hs-zoom-img { width: 200%; left: -97%; top: -321.051%; }
#import-residents [data-pane="6"] .hs-zoom-ring { left: 27.5%; top: 33.187%; width: 45%; height: 33.627%; }
#import-residents [data-pane="7"] .hs-ring { left: 4%; top: 48.1%; width: 92%; height: 9.6%; }
#import-residents [data-pane="7"] .hs-zoom-img { width: 100%; left: 0%; top: -103.349%; }
#import-residents [data-pane="7"] .hs-zoom-ring { left: 4%; top: 36.086%; width: 92%; height: 27.829%; }
#parcel-in [data-pane="1"] .hs-ring { left: 3%; top: 24.9%; width: 67%; height: 6%; }
#parcel-in [data-pane="1"] .hs-zoom-img { width: 124.378%; left: 0%; top: -50.594%; }
#parcel-in [data-pane="1"] .hs-zoom-ring { left: 3.731%; top: 39.183%; width: 83.333%; height: 21.633%; }
#parcel-in [data-pane="2"] .hs-ring { left: 6.5%; top: 86.15%; width: 87%; height: 6.3%; }
#parcel-in [data-pane="2"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#parcel-in [data-pane="2"] .hs-zoom-ring { left: 6.5%; top: 59.851%; width: 87%; height: 18.263%; }
#parcel-in [data-pane="3"] .hs-ring { left: 7%; top: 74.25%; width: 86%; height: 5.9%; }
#parcel-in [data-pane="3"] .hs-zoom-img { width: 100%; left: 0%; top: -173.79%; }
#parcel-in [data-pane="3"] .hs-zoom-ring { left: 7%; top: 41.448%; width: 86%; height: 17.103%; }
#parcel-in [data-pane="4"] .hs-ring { left: 3%; top: 77.8%; width: 94%; height: 6.6%; }
#parcel-in [data-pane="4"] .hs-zoom-img { width: 100%; left: 0%; top: -185.096%; }
#parcel-in [data-pane="4"] .hs-zoom-ring { left: 3%; top: 40.434%; width: 94%; height: 19.132%; }
#parcel-in [data-pane="5"] .hs-ring { left: 2.75%; top: 80.8%; width: 94.5%; height: 6%; }
#parcel-in [data-pane="5"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#parcel-in [data-pane="5"] .hs-zoom-ring { left: 2.75%; top: 44.342%; width: 94.5%; height: 17.393%; }
#parcel-out [data-pane="1"] .hs-ring { left: 3%; top: 36.55%; width: 94%; height: 19.5%; }
#parcel-out [data-pane="1"] .hs-zoom-img { width: 100%; left: 0%; top: -84.216%; }
#parcel-out [data-pane="1"] .hs-zoom-ring { left: 3%; top: 21.736%; width: 94%; height: 56.527%; }
#parcel-out [data-pane="2"] .hs-ring { left: 83.2%; top: 65.18%; width: 14%; height: 6.439%; }
#parcel-out [data-pane="2"] .hs-zoom-img { width: 200%; left: -100%; top: -346.561%; }
#parcel-out [data-pane="2"] .hs-zoom-ring { left: 66.4%; top: 31.333%; width: 28%; height: 37.333%; }
#parcel-out [data-pane="3"] .hs-ring { left: 5%; top: 54.5%; width: 90%; height: 21%; }
#parcel-out [data-pane="3"] .hs-zoom-img { width: 100%; left: 0%; top: -138.425%; }
#parcel-out [data-pane="3"] .hs-zoom-ring { left: 5%; top: 19.562%; width: 90%; height: 60.876%; }
#parcel-out [data-pane="4"] .hs-ring { left: 3%; top: 78.2%; width: 94%; height: 6.6%; }
#parcel-out [data-pane="4"] .hs-zoom-img { width: 100%; left: 0%; top: -186.255%; }
#parcel-out [data-pane="4"] .hs-zoom-ring { left: 3%; top: 40.434%; width: 94%; height: 19.132%; }
#parcel-out [data-pane="5"] .hs-ring { left: 3%; top: 81%; width: 94%; height: 6.4%; }
#parcel-out [data-pane="5"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#parcel-out [data-pane="5"] .hs-zoom-ring { left: 3%; top: 44.922%; width: 94%; height: 18.553%; }
#parcel-out [data-pane="6"] .hs-ring { left: 3%; top: 50.4%; width: 94%; height: 8.6%; }
#parcel-out [data-pane="6"] .hs-zoom-img { width: 100%; left: 0%; top: -108.567%; }
#parcel-out [data-pane="6"] .hs-zoom-ring { left: 3%; top: 37.535%; width: 94%; height: 24.93%; }
#parcel-out [data-pane="7"] .hs-ring { left: 6.8%; top: 75.5%; width: 46%; height: 6.2%; }
#parcel-out [data-pane="7"] .hs-zoom-img { width: 181.159%; left: -3.986%; top: -362.769%; }
#parcel-out [data-pane="7"] .hs-zoom-ring { left: 8.333%; top: 33.72%; width: 83.333%; height: 32.559%; }
#parcel-out [data-pane="8"] .hs-ring { left: 3%; top: 59.55%; width: 94%; height: 32.5%; }
#parcel-out [data-pane="8"] .hs-zoom-img { width: 100%; left: 0%; top: -169.732%; }
#parcel-out [data-pane="8"] .hs-zoom-ring { left: 3%; top: 2.894%; width: 94%; height: 94.212%; }
#key-in [data-pane="1"] .hs-ring { left: 3%; top: 23%; width: 94%; height: 8.6%; }
#key-in [data-pane="1"] .hs-zoom-img { width: 100%; left: 0%; top: -29.138%; }
#key-in [data-pane="1"] .hs-zoom-ring { left: 3%; top: 37.535%; width: 94%; height: 24.93%; }
#key-in [data-pane="2"] .hs-ring { left: 2.8%; top: 45.1%; width: 47%; height: 6.4%; }
#key-in [data-pane="2"] .hs-zoom-img { width: 177.305%; left: 0%; top: -198.252%; }
#key-in [data-pane="2"] .hs-zoom-ring { left: 4.965%; top: 33.553%; width: 83.333%; height: 32.895%; }
#key-in [data-pane="3"] .hs-ring { left: 3%; top: 25.3%; width: 94%; height: 7%; }
#key-in [data-pane="3"] .hs-zoom-img { width: 100%; left: 0%; top: -33.487%; }
#key-in [data-pane="3"] .hs-zoom-ring { left: 3%; top: 39.854%; width: 94%; height: 20.292%; }
#key-in [data-pane="4"] .hs-ring { left: 1%; top: 75.8%; width: 44%; height: 5%; }
#key-in [data-pane="4"] .hs-zoom-img { width: 189.394%; left: 0%; top: -379.885%; }
#key-in [data-pane="4"] .hs-zoom-ring { left: 1.894%; top: 36.274%; width: 83.333%; height: 27.451%; }
#key-in [data-pane="5"] .hs-ring { left: 3%; top: 55.3%; width: 94%; height: 7.2%; }
#key-in [data-pane="5"] .hs-zoom-img { width: 100%; left: 0%; top: -120.742%; }
#key-in [data-pane="5"] .hs-zoom-ring { left: 3%; top: 39.564%; width: 94%; height: 20.872%; }
#key-in [data-pane="6"] .hs-ring { left: 3%; top: 86.6%; width: 94%; height: 6.6%; }
#key-in [data-pane="6"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#key-in [data-pane="6"] .hs-zoom-ring { left: 3%; top: 61.156%; width: 94%; height: 19.132%; }
#key-in [data-pane="7"] .hs-ring { left: 3%; top: 71.75%; width: 94%; height: 12.5%; }
#key-in [data-pane="7"] .hs-zoom-img { width: 100%; left: 0%; top: -176.109%; }
#key-in [data-pane="7"] .hs-zoom-ring { left: 3%; top: 31.882%; width: 94%; height: 36.235%; }
#key-in [data-pane="8"] .hs-ring { left: 3%; top: 39%; width: 94%; height: 33%; }
#key-in [data-pane="8"] .hs-zoom-img { width: 100%; left: 0%; top: -110.886%; }
#key-in [data-pane="8"] .hs-zoom-ring { left: 3%; top: 2.169%; width: 94%; height: 95.662%; }
#key-out [data-pane="1"] .hs-ring { left: 3%; top: 31.8%; width: 94%; height: 6.4%; }
#key-out [data-pane="1"] .hs-zoom-img { width: 100%; left: 0%; top: -51.459%; }
#key-out [data-pane="1"] .hs-zoom-ring { left: 3%; top: 40.724%; width: 94%; height: 18.553%; }
#key-out [data-pane="2"] .hs-ring { left: 1.5%; top: 28.6%; width: 97%; height: 5.6%; }
#key-out [data-pane="2"] .hs-zoom-img { width: 100%; left: 0%; top: -41.024%; }
#key-out [data-pane="2"] .hs-zoom-ring { left: 1.5%; top: 41.883%; width: 97%; height: 16.233%; }
#key-out [data-pane="3"] .hs-ring { left: 77.2%; top: 77.55%; width: 15%; height: 6.899%; }
#key-out [data-pane="3"] .hs-zoom-img { width: 200%; left: -100%; top: -419.612%; }
#key-out [data-pane="3"] .hs-zoom-ring { left: 54.4%; top: 30%; width: 30%; height: 40%; }
#key-out [data-pane="4"] .hs-ring { left: 3.5%; top: 50.5%; width: 93%; height: 19%; }
#key-out [data-pane="4"] .hs-zoom-img { width: 100%; left: 0%; top: -123.93%; }
#key-out [data-pane="4"] .hs-zoom-ring { left: 3.5%; top: 22.461%; width: 93%; height: 55.078%; }
#key-out [data-pane="5"] .hs-ring { left: 3%; top: 83.5%; width: 94%; height: 6.6%; }
#key-out [data-pane="5"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#key-out [data-pane="5"] .hs-zoom-ring { left: 3%; top: 52.169%; width: 94%; height: 19.132%; }
#key-out [data-pane="6"] .hs-ring { left: 3%; top: 71.5%; width: 94%; height: 15%; }
#key-out [data-pane="6"] .hs-zoom-img { width: 100%; left: 0%; top: -179.008%; }
#key-out [data-pane="6"] .hs-zoom-ring { left: 3%; top: 28.259%; width: 94%; height: 43.483%; }
#key-out [data-pane="7"] .hs-ring { left: 3%; top: 41.3%; width: 94%; height: 6.4%; }
#key-out [data-pane="7"] .hs-zoom-img { width: 100%; left: 0%; top: -78.998%; }
#key-out [data-pane="7"] .hs-zoom-ring { left: 3%; top: 40.724%; width: 94%; height: 18.553%; }
#key-out [data-pane="8"] .hs-ring { left: 3%; top: 90.9%; width: 94%; height: 6.6%; }
#key-out [data-pane="8"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#key-out [data-pane="8"] .hs-zoom-ring { left: 3%; top: 73.621%; width: 94%; height: 19.132%; }
#key-out [data-pane="9"] .hs-ring { left: 3%; top: 65%; width: 94%; height: 31%; }
#key-out [data-pane="9"] .hs-zoom-img { width: 100%; left: 0%; top: -183.357%; }
#key-out [data-pane="9"] .hs-zoom-ring { left: 3%; top: 5.068%; width: 94%; height: 89.864%; }
#visitor-log [data-pane="1"] .hs-ring { left: 3%; top: 39.5%; width: 94%; height: 6.6%; }
#visitor-log [data-pane="1"] .hs-zoom-img { width: 100%; left: 0%; top: -74.07%; }
#visitor-log [data-pane="1"] .hs-zoom-ring { left: 3%; top: 40.434%; width: 94%; height: 19.132%; }
#visitor-log [data-pane="2"] .hs-ring { left: 3%; top: 90.9%; width: 94%; height: 6.6%; }
#visitor-log [data-pane="2"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#visitor-log [data-pane="2"] .hs-zoom-ring { left: 3%; top: 73.621%; width: 94%; height: 19.132%; }
#visitor-log [data-pane="3"] .hs-ring { left: 20%; top: 75.9%; width: 33%; height: 6.4%; }
#visitor-log [data-pane="3"] .hs-zoom-img { width: 200%; left: -23%; top: -408.596%; }
#visitor-log [data-pane="3"] .hs-zoom-ring { left: 17%; top: 31.447%; width: 66%; height: 37.105%; }
#visitor-log [data-pane="4"] .hs-ring { left: 2%; top: 85.6%; width: 96%; height: 6.8%; }
#visitor-log [data-pane="4"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#visitor-log [data-pane="4"] .hs-zoom-ring { left: 2%; top: 58.257%; width: 96%; height: 19.712%; }
#visitor-log [data-pane="5"] .hs-ring { left: 3%; top: 89.9%; width: 94%; height: 6.6%; }
#visitor-log [data-pane="5"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#visitor-log [data-pane="5"] .hs-zoom-ring { left: 3%; top: 70.722%; width: 94%; height: 19.132%; }
#visitor-log [data-pane="6"] .hs-ring { left: 52.5%; top: 75.9%; width: 34%; height: 6.4%; }
#visitor-log [data-pane="6"] .hs-zoom-img { width: 200%; left: -89%; top: -408.596%; }
#visitor-log [data-pane="6"] .hs-zoom-ring { left: 16%; top: 31.447%; width: 68%; height: 37.105%; }
#visitor-log [data-pane="7"] .hs-ring { left: 51.2%; top: 63.1%; width: 34%; height: 6.6%; }
#visitor-log [data-pane="7"] .hs-zoom-img { width: 200%; left: -86.4%; top: -334.966%; }
#visitor-log [data-pane="7"] .hs-zoom-ring { left: 16%; top: 30.868%; width: 68%; height: 38.265%; }
#visitor-log [data-pane="8"] .hs-ring { left: 3%; top: 90.9%; width: 94%; height: 6.6%; }
#visitor-log [data-pane="8"] .hs-zoom-img { width: 100%; left: 0%; top: -189.884%; }
#visitor-log [data-pane="8"] .hs-zoom-ring { left: 3%; top: 73.621%; width: 94%; height: 19.132%; }
#visitor-log [data-pane="9"] .hs-ring { left: 21%; top: 55%; width: 20%; height: 5.2%; }
#visitor-log [data-pane="9"] .hs-zoom-img { width: 200%; left: -12%; top: -283.946%; }
#visitor-log [data-pane="9"] .hs-zoom-ring { left: 30%; top: 34.926%; width: 40%; height: 30.148%; }
.hs-guide[data-total="4"][data-step="1"] .hs-progress i { transform: scaleX(0.25); }
.hs-guide[data-total="4"][data-step="2"] .hs-progress i { transform: scaleX(0.5); }
.hs-guide[data-total="4"][data-step="3"] .hs-progress i { transform: scaleX(0.75); }
.hs-guide[data-total="4"][data-step="4"] .hs-progress i { transform: scaleX(1); }
.hs-guide[data-total="5"][data-step="1"] .hs-progress i { transform: scaleX(0.2); }
.hs-guide[data-total="5"][data-step="2"] .hs-progress i { transform: scaleX(0.4); }
.hs-guide[data-total="5"][data-step="3"] .hs-progress i { transform: scaleX(0.6); }
.hs-guide[data-total="5"][data-step="4"] .hs-progress i { transform: scaleX(0.8); }
.hs-guide[data-total="5"][data-step="5"] .hs-progress i { transform: scaleX(1); }
.hs-guide[data-total="7"][data-step="1"] .hs-progress i { transform: scaleX(0.143); }
.hs-guide[data-total="7"][data-step="2"] .hs-progress i { transform: scaleX(0.286); }
.hs-guide[data-total="7"][data-step="3"] .hs-progress i { transform: scaleX(0.429); }
.hs-guide[data-total="7"][data-step="4"] .hs-progress i { transform: scaleX(0.571); }
.hs-guide[data-total="7"][data-step="5"] .hs-progress i { transform: scaleX(0.714); }
.hs-guide[data-total="7"][data-step="6"] .hs-progress i { transform: scaleX(0.857); }
.hs-guide[data-total="7"][data-step="7"] .hs-progress i { transform: scaleX(1); }
.hs-guide[data-total="8"][data-step="1"] .hs-progress i { transform: scaleX(0.125); }
.hs-guide[data-total="8"][data-step="2"] .hs-progress i { transform: scaleX(0.25); }
.hs-guide[data-total="8"][data-step="3"] .hs-progress i { transform: scaleX(0.375); }
.hs-guide[data-total="8"][data-step="4"] .hs-progress i { transform: scaleX(0.5); }
.hs-guide[data-total="8"][data-step="5"] .hs-progress i { transform: scaleX(0.625); }
.hs-guide[data-total="8"][data-step="6"] .hs-progress i { transform: scaleX(0.75); }
.hs-guide[data-total="8"][data-step="7"] .hs-progress i { transform: scaleX(0.875); }
.hs-guide[data-total="8"][data-step="8"] .hs-progress i { transform: scaleX(1); }
.hs-guide[data-total="9"][data-step="1"] .hs-progress i { transform: scaleX(0.111); }
.hs-guide[data-total="9"][data-step="2"] .hs-progress i { transform: scaleX(0.222); }
.hs-guide[data-total="9"][data-step="3"] .hs-progress i { transform: scaleX(0.333); }
.hs-guide[data-total="9"][data-step="4"] .hs-progress i { transform: scaleX(0.444); }
.hs-guide[data-total="9"][data-step="5"] .hs-progress i { transform: scaleX(0.556); }
.hs-guide[data-total="9"][data-step="6"] .hs-progress i { transform: scaleX(0.667); }
.hs-guide[data-total="9"][data-step="7"] .hs-progress i { transform: scaleX(0.778); }
.hs-guide[data-total="9"][data-step="8"] .hs-progress i { transform: scaleX(0.889); }
.hs-guide[data-total="9"][data-step="9"] .hs-progress i { transform: scaleX(1); }