/* cafeday — the daily operations plan.
 *
 * One stylesheet, five pages. The visual language is the café's own: a warm
 * bone ground, espresso ink, and a single ember accent that only ever marks
 * the thing you are meant to press. Times are set in a monospace so the
 * schedule's columns line up — a rota that does not align is a rota nobody
 * reads at 07:00.
 */

:root {
  --cd-paper:   #F1F2ED;
  --cd-surface: #FBFBF8;
  --cd-ink:     #1A1A17;
  --cd-ink-2:   #55564D;
  --cd-ink-3:   #8B8C81;
  --cd-rule:    #D9DAD1;
  --cd-ember:   #B4501C;

  --cd-display: "Futura", "Century Gothic", "Avenir Next", "Trebuchet MS", sans-serif;
  --cd-ui:      "Avenir Next", Avenir, "Segoe UI", system-ui, sans-serif;
  --cd-body:    "Charter", "Iowan Old Style", Georgia, serif;
  --cd-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --cd-paper:   #14150F;
    --cd-surface: #1D1F18;
    --cd-ink:     #EDEEE4;
    --cd-ink-2:   #A9AB9D;
    --cd-ink-3:   #74766A;
    --cd-rule:    #33362B;
    --cd-ember:   #E4924F;
  }
}

body {
  background: var(--cd-paper);
  color: var(--cd-ink);
  font-family: var(--cd-ui);
  -webkit-font-smoothing: antialiased;
}

.cd-page {
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(28px, 6vw, 64px) clamp(18px, 5vw, 40px) 80px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* the two sign-in pages are a single column of form, not a layout */
.cd-page-auth { max-width: 460px; }

.cd-title {
  font-family: var(--cd-display);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 46px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

.cd-lede {
  font-family: var(--cd-body);
  font-size: clamp(15px, 1.8vw, 18px);
  line-height: 1.62;
  color: var(--cd-ink-2);
  max-width: 60ch;
  margin: 0;
}

.cd-note {
  font-family: var(--cd-body);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--cd-ink-3);
  max-width: 56ch;
  margin: 0;
}

/* the day marks: the schedule's only structural device, so they carry a rule
 * rather than just a size change */
.cd-daymark {
  font-family: var(--cd-display);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cd-ink-3);
  border-top: 1px solid var(--cd-rule);
  padding-top: 14px;
  margin: 18px 0 0;
}

/* ---- buttons: ember means "this is the way forward", once per page ---- */
.cd-btn {
  font-family: var(--cd-display);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1px solid var(--cd-rule);
  background: var(--cd-surface);
  color: var(--cd-ink-2);
  cursor: pointer;
  align-self: flex-start;
}
.cd-btn:hover { color: var(--cd-ink); border-color: var(--cd-ink-3); }
.cd-btn-primary {
  background: var(--cd-ember);
  border-color: var(--cd-ember);
  color: var(--cd-paper);
}
.cd-btn-primary:hover { color: var(--cd-paper); filter: brightness(1.08); }

:focus-visible { outline: 2px solid var(--cd-ember); outline-offset: 2px; }

/* ---- the schedule: one row per task ----
 *
 * This was an auto-drawn zTable and is now a shuttled pattern, because a
 * table painted from a result set as one lump cannot carry a per-row button.
 * The row is a grid rather than a table row so the detail can sit under the
 * title on a phone instead of forcing a sixth column into 390px — the shape
 * that broke twice while this was still a table.
 */
.cd-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--cd-rule);
  border: 1px solid var(--cd-rule);
  border-radius: 3px;
  overflow: hidden;
}

.cd-row {
  background: var(--cd-surface);
  padding: 13px 16px;
  display: grid;
  grid-template-columns: 122px 96px minmax(0, 1fr) auto;
  gap: 3px 16px;
  align-items: baseline;
}
.cd-row:hover { background: var(--cd-paper); }

.cd-row-clock {
  grid-column: 1;
  font-family: var(--cd-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--cd-ink-2);
  white-space: nowrap;
}

.cd-row-lane {
  grid-column: 2;
  font-family: var(--cd-display);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cd-ink-3);
  white-space: nowrap;
}

.cd-row-title {
  grid-column: 3;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--cd-ink);
}

/* the detail sits under the title, in the title's own column */
.cd-row-detail {
  grid-column: 3;
  font-family: var(--cd-body);
  font-size: 13px;
  line-height: 1.55;
  color: var(--cd-ink-2);
}

.cd-row-actions {
  grid-column: 4;
  grid-row: 1 / span 2;
  display: flex;
  gap: 6px;
  align-self: center;
}

.cd-rowbtn {
  font-family: var(--cd-display);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--cd-rule);
  background: var(--cd-paper);
  color: var(--cd-ink-2);
  text-decoration: none;
  white-space: nowrap;
}
.cd-rowbtn:hover { color: var(--cd-ink); border-color: var(--cd-ink-3); }
.cd-rowbtn-delete:hover { color: var(--cd-ember); border-color: var(--cd-ember); }

/* the task a confirm page is about to remove, stated plainly */
.cd-confirm-what {
  font-family: var(--cd-mono);
  font-size: 13px;
  color: var(--cd-ink);
  border-left: 3px solid var(--cd-ember);
  padding-left: 12px;
}

/* On a phone the four columns become two: clock and lane share a line, the
 * title and detail run full width beneath, and the buttons sit at the end.
 * Nothing is clipped and nothing scrolls sideways. */
@media (max-width: 640px) {
  .cd-row {
    grid-template-columns: auto 1fr;
    gap: 5px 12px;
  }
  .cd-row-clock  { grid-column: 1; grid-row: 1; }
  .cd-row-lane   { grid-column: 2; grid-row: 1; }
  .cd-row-title  { grid-column: 1 / -1; }
  .cd-row-detail { grid-column: 1 / -1; }
  .cd-row-actions { grid-column: 1 / -1; grid-row: auto; margin-top: 6px; }
}

/* ---- forms ----
 *
 * BLACK TEXT ON A DARK BOX. The bifrost client paints a focused input with
 * its own dark background, which beat my `background` but left my near-black
 * `color` in place — so the moment you clicked into the sign-in field, what
 * you typed became almost invisible. It is visible in the very first Bifrost
 * screenshot of the add form: a dark navy input sitting on a light page. I
 * read past it because the test was green and the text was technically there.
 *
 * Both properties are forced together now, and on `:focus` explicitly, so the
 * pair can never drift apart again. Autofill gets the same treatment — browsers
 * paint autofilled fields with their own background and ignore `background`
 * entirely, so it takes the inset-shadow trick and `-webkit-text-fill-color`.
 */
.cd-page input,
.cd-page input:focus,
.cd-page input:active,
.cd-page select,
.cd-page select:focus,
.cd-page textarea,
.cd-page textarea:focus {
  font-family: var(--cd-ui) !important;
  font-size: 15px !important;
  background: var(--cd-surface) !important;
  background-color: var(--cd-surface) !important;
  color: var(--cd-ink) !important;
  -webkit-text-fill-color: var(--cd-ink) !important;
  caret-color: var(--cd-ember);
  border: 1px solid var(--cd-rule) !important;
  border-radius: 3px !important;
  padding: 10px 12px !important;
  width: 100%;
  max-width: 460px;
}

.cd-page input:focus,
.cd-page textarea:focus,
.cd-page select:focus {
  border-color: var(--cd-ember) !important;
  outline: 2px solid color-mix(in srgb, var(--cd-ember) 40%, transparent) !important;
  outline-offset: 1px;
}

.cd-page input::placeholder,
.cd-page textarea::placeholder { color: var(--cd-ink-3) !important; opacity: 1; }

/* autofill ignores `background` — the inset shadow is the only way to repaint it */
.cd-page input:-webkit-autofill,
.cd-page input:-webkit-autofill:hover,
.cd-page input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--cd-surface) inset !important;
  box-shadow: 0 0 0 1000px var(--cd-surface) inset !important;
  -webkit-text-fill-color: var(--cd-ink) !important;
  caret-color: var(--cd-ember) !important;
}

.cd-page label {
  font-family: var(--cd-display);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cd-ink-3);
}

/* the client's default Submit is a green pill; ember is this app's one
 * "forward" colour and a second accent reads as a second meaning */
.cd-page button[type="submit"],
.cd-page input[type="submit"] {
  font-family: var(--cd-display) !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  background: var(--cd-ember) !important;
  border: 1px solid var(--cd-ember) !important;
  color: var(--cd-paper) !important;
  padding: 11px 22px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

:root { --cd-prep:#5C7030; --cd-front:#276184; --cd-service:#7C3F65; --cd-admin:#4C5370; }
@media (prefers-color-scheme: dark) {
  :root { --cd-prep:#A9C263; --cd-front:#6FB6D9; --cd-service:#D58FBA; --cd-admin:#9FA7C9; }
}

/* ---- THE TIMELINE ----
 *
 * Lanes down the side, the day across the top, one block per task. This is
 * the view the flat list replaced, and the list genuinely could not show the
 * thing that matters: two ovens running side by side, and who overlaps whom.
 *
 * CSS cannot read "07:30" and turn it into a position, so every task carries
 * start_min and span_min as numbers (see zSchema.cafeday) and the generated
 * classes at the bottom of this file turn those numbers into left and width.
 * 2.3px per minute, 07:00 to 21:30 — the same scale as the original chart.
 */
.cd-tl { overflow-x: auto; border: 1px solid var(--cd-rule); border-radius: 3px;
         background: var(--cd-surface); }
.cd-tl-inner { min-width: 2145px; }

.cd-tl-lane { display: flex; border-bottom: 1px solid var(--cd-rule); }
.cd-tl-lane:last-child { border-bottom: 0; }

/* the lane name stays put while the day scrolls under it */
.cd-tl-lanename {
  position: sticky; left: 0; z-index: 3;
  flex: 0 0 132px; width: 132px;
  background: var(--cd-surface);
  border-right: 1px solid var(--cd-rule);
  padding: 12px 12px;
  font-family: var(--cd-display); font-size: 12px; letter-spacing: .04em;
  color: var(--cd-ink); display: flex; align-items: center;
}

.cd-tl-track { position: relative; height: 54px; flex: 0 0 2001px;
  background-image: repeating-linear-gradient(to right,
      color-mix(in srgb, var(--cd-rule) 55%, transparent) 0 1px,
      transparent 1px 138px); }

/* one task */
.cd-tl-task {
  position: absolute; top: 7px; bottom: 7px;
  display: block; overflow: hidden; text-decoration: none;
  padding: 5px 8px; border-radius: 2px;
  font-family: var(--cd-ui); font-size: 11.5px; line-height: 1.25;
  white-space: nowrap; text-overflow: ellipsis;
  background: color-mix(in srgb, var(--cd-k) 14%, var(--cd-surface));
  box-shadow: inset 3px 0 0 var(--cd-k);
  color: var(--cd-ink);
}
.cd-tl-task:hover { background: color-mix(in srgb, var(--cd-k) 26%, var(--cd-surface)); }

/* task colour by kind — the same five categories as the original chart */
.cd-k-bake    { --cd-k: var(--cd-bake); }
.cd-k-prep    { --cd-k: var(--cd-prep); }
.cd-k-front   { --cd-k: var(--cd-front); }
.cd-k-service { --cd-k: var(--cd-service); }
.cd-k-admin   { --cd-k: var(--cd-admin); }

/* the hour ruler */
.cd-tl-ruler .cd-tl-track { height: 26px; background-image: none; }
.cd-tl-hr { position: absolute; top: 7px; font-family: var(--cd-mono);
  font-size: 10px; color: var(--cd-ink-3); font-variant-numeric: tabular-nums; }

/* service window — when guests are actually in the building */
.cd-tl-open { position: absolute; top: 3px; bottom: 3px;
  background: color-mix(in srgb, var(--cd-ember) 10%, transparent);
  border-left: 2px solid var(--cd-ember); border-right: 2px solid var(--cd-ember);
  display: flex; align-items: center; justify-content: center; }
.cd-tl-openlabel { font-family: var(--cd-display); font-size: 9.5px;
  letter-spacing: .16em; text-transform: uppercase; color: var(--cd-ember); }

.cd-tl-hint { font-family: var(--cd-mono); font-size: 10.5px;
  color: var(--cd-ink-3); margin: 8px 0 0; }


/* ---- the palette ----
 *
 * A card per item rather than a table row: each one carries three unequal
 * things — what the work is, how it behaves (how often, how long, whose), and
 * a way to remove it — and a table would force those into columns that fight.
 */
.cd-libgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 10px;
}

.cd-lib {
  background: var(--cd-surface);
  border: 1px solid var(--cd-rule);
  border-left: 3px solid var(--cd-k, var(--cd-rule));
  border-radius: 3px;
  padding: 13px 15px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-start;
}

.cd-lib-title { font-weight: 600; font-size: 14.5px; color: var(--cd-ink); }

.cd-lib-meta {
  font-family: var(--cd-mono);
  font-size: 11px;
  color: var(--cd-ink-3);
  font-variant-numeric: tabular-nums;
}

/* the remove link stays quiet until the card is under the cursor — a palette
 * is for reading far more often than for editing */
.cd-lib-remove { margin-top: 4px; opacity: .45; }
.cd-lib:hover .cd-lib-remove { opacity: 1; }


/* ---- the planner ----
 *
 * Palette on the left, board on the right. The rail scrolls independently and
 * stays put while the board scrolls, because the whole activity is looking at
 * one and reaching for the other.
 */
.cd-page-plan { max-width: 1400px; }

.cd-plan-hours {
  font-family: var(--cd-mono); font-size: 12px; color: var(--cd-ink-2);
  font-variant-numeric: tabular-nums;
}

/* scenario tabs — incompatible versions of the day, side by side */
.cd-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 1px solid var(--cd-rule);
           padding-bottom: 10px; }
.cd-tab {
  font-family: var(--cd-display); font-size: 12px; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none;
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--cd-rule); background: var(--cd-surface); color: var(--cd-ink-2);
}
.cd-tab:hover { color: var(--cd-ink); border-color: var(--cd-ember); }

/* THE PALETTE STRIP — sticks to the top of the viewport while the board
 * scrolls beneath it, so the work you are placing stays reachable however far
 * down the day you are looking. Horizontal scroll rather than a wrap, so it
 * never eats half the screen. */
.cd-rail {
  position: sticky; top: 0; z-index: 8;
  background: var(--cd-surface);
  border: 1px solid var(--cd-rule); border-radius: 3px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.cd-rail-head {
  font-family: var(--cd-display); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cd-ink-3);
}
.cd-rail-hint { font-family: var(--cd-body); font-size: 12.5px; color: var(--cd-ink-3); }
.cd-rail-list {
  display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px;
}
.cd-rail-list > * { flex: 0 0 auto; width: 168px; }

/* a chip looks liftable — it is the thing you pick up and put somewhere */
.cd-pal {
  color: var(--cd-ink);
  text-decoration: none;
  background: color-mix(in srgb, var(--cd-k, var(--cd-rule)) 13%, var(--cd-surface));
  box-shadow: inset 3px 0 0 var(--cd-k, var(--cd-rule));
  border-radius: 2px;
  padding: 9px 11px;
  cursor: grab;
  display: flex; flex-direction: column; gap: 3px;
  height: 100%;
}
.cd-pal:hover { background: color-mix(in srgb, var(--cd-k, var(--cd-rule)) 24%, var(--cd-surface)); }
.cd-pal:active { cursor: grabbing; }
.cd-pal-title { font-size: 12.5px; font-weight: 600; line-height: 1.25; color: var(--cd-ink); }
.cd-pal-meta {
  font-family: var(--cd-mono); font-size: 10px; color: var(--cd-ink-3);
  font-variant-numeric: tabular-nums; margin-top: auto;
}

.cd-ghost {
  position: fixed; z-index: 99; pointer-events: none;
  background: var(--cd-ember); color: var(--cd-paper);
  font-family: var(--cd-ui); font-size: 11.5px; font-weight: 600;
  padding: 5px 9px; border-radius: 2px; max-width: 220px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 6px 18px rgba(0,0,0,.22);
}

.cd-board { min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* a lane that can be dropped on — lights up during a drag, set by the script */
.cd-drop.cd-drop-active .cd-tl-track {
  background-color: color-mix(in srgb, var(--cd-ember) 7%, transparent);
  box-shadow: inset 0 0 0 1px var(--cd-ember);
}

@media (max-width: 860px) {
  .cd-rail { position: static; }
}

/* GENERATED: left from the start time, right from the end time.
 *
 * Setting BOTH edges means the width falls out on its own, so a task needs no
 * stored geometry at all — it positions itself from the two times someone
 * already typed. The previous version stored minutes-after-07:00 and a length
 * in two extra columns, which meant the add form asked people to do arithmetic
 * to place a task. Those columns are gone.
 *
 * The colon in a class name is legal in HTML and escaped here in the selector,
 * which is what lets "07:30" be the class. */
.cd-s-07\:00{left:0.0px}
.cd-s-07\:05{left:11.5px}
.cd-s-07\:10{left:23.0px}
.cd-s-07\:15{left:34.5px}
.cd-s-07\:20{left:46.0px}
.cd-s-07\:25{left:57.5px}
.cd-s-07\:30{left:69.0px}
.cd-s-07\:35{left:80.5px}
.cd-s-07\:40{left:92.0px}
.cd-s-07\:45{left:103.5px}
.cd-s-07\:50{left:115.0px}
.cd-s-07\:55{left:126.5px}
.cd-s-08\:00{left:138.0px}
.cd-s-08\:05{left:149.5px}
.cd-s-08\:10{left:161.0px}
.cd-s-08\:15{left:172.5px}
.cd-s-08\:20{left:184.0px}
.cd-s-08\:25{left:195.5px}
.cd-s-08\:30{left:207.0px}
.cd-s-08\:35{left:218.5px}
.cd-s-08\:40{left:230.0px}
.cd-s-08\:45{left:241.5px}
.cd-s-08\:50{left:253.0px}
.cd-s-08\:55{left:264.5px}
.cd-s-09\:00{left:276.0px}
.cd-s-09\:05{left:287.5px}
.cd-s-09\:10{left:299.0px}
.cd-s-09\:15{left:310.5px}
.cd-s-09\:20{left:322.0px}
.cd-s-09\:25{left:333.5px}
.cd-s-09\:30{left:345.0px}
.cd-s-09\:35{left:356.5px}
.cd-s-09\:40{left:368.0px}
.cd-s-09\:45{left:379.5px}
.cd-s-09\:50{left:391.0px}
.cd-s-09\:55{left:402.5px}
.cd-s-10\:00{left:414.0px}
.cd-s-10\:05{left:425.5px}
.cd-s-10\:10{left:437.0px}
.cd-s-10\:15{left:448.5px}
.cd-s-10\:20{left:460.0px}
.cd-s-10\:25{left:471.5px}
.cd-s-10\:30{left:483.0px}
.cd-s-10\:35{left:494.5px}
.cd-s-10\:40{left:506.0px}
.cd-s-10\:45{left:517.5px}
.cd-s-10\:50{left:529.0px}
.cd-s-10\:55{left:540.5px}
.cd-s-11\:00{left:552.0px}
.cd-s-11\:05{left:563.5px}
.cd-s-11\:10{left:575.0px}
.cd-s-11\:15{left:586.5px}
.cd-s-11\:20{left:598.0px}
.cd-s-11\:25{left:609.5px}
.cd-s-11\:30{left:621.0px}
.cd-s-11\:35{left:632.5px}
.cd-s-11\:40{left:644.0px}
.cd-s-11\:45{left:655.5px}
.cd-s-11\:50{left:667.0px}
.cd-s-11\:55{left:678.5px}
.cd-s-12\:00{left:690.0px}
.cd-s-12\:05{left:701.5px}
.cd-s-12\:10{left:713.0px}
.cd-s-12\:15{left:724.5px}
.cd-s-12\:20{left:736.0px}
.cd-s-12\:25{left:747.5px}
.cd-s-12\:30{left:759.0px}
.cd-s-12\:35{left:770.5px}
.cd-s-12\:40{left:782.0px}
.cd-s-12\:45{left:793.5px}
.cd-s-12\:50{left:805.0px}
.cd-s-12\:55{left:816.5px}
.cd-s-13\:00{left:828.0px}
.cd-s-13\:05{left:839.5px}
.cd-s-13\:10{left:851.0px}
.cd-s-13\:15{left:862.5px}
.cd-s-13\:20{left:874.0px}
.cd-s-13\:25{left:885.5px}
.cd-s-13\:30{left:897.0px}
.cd-s-13\:35{left:908.5px}
.cd-s-13\:40{left:920.0px}
.cd-s-13\:45{left:931.5px}
.cd-s-13\:50{left:943.0px}
.cd-s-13\:55{left:954.5px}
.cd-s-14\:00{left:966.0px}
.cd-s-14\:05{left:977.5px}
.cd-s-14\:10{left:989.0px}
.cd-s-14\:15{left:1000.5px}
.cd-s-14\:20{left:1012.0px}
.cd-s-14\:25{left:1023.5px}
.cd-s-14\:30{left:1035.0px}
.cd-s-14\:35{left:1046.5px}
.cd-s-14\:40{left:1058.0px}
.cd-s-14\:45{left:1069.5px}
.cd-s-14\:50{left:1081.0px}
.cd-s-14\:55{left:1092.5px}
.cd-s-15\:00{left:1104.0px}
.cd-s-15\:05{left:1115.5px}
.cd-s-15\:10{left:1127.0px}
.cd-s-15\:15{left:1138.5px}
.cd-s-15\:20{left:1150.0px}
.cd-s-15\:25{left:1161.5px}
.cd-s-15\:30{left:1173.0px}
.cd-s-15\:35{left:1184.5px}
.cd-s-15\:40{left:1196.0px}
.cd-s-15\:45{left:1207.5px}
.cd-s-15\:50{left:1219.0px}
.cd-s-15\:55{left:1230.5px}
.cd-s-16\:00{left:1242.0px}
.cd-s-16\:05{left:1253.5px}
.cd-s-16\:10{left:1265.0px}
.cd-s-16\:15{left:1276.5px}
.cd-s-16\:20{left:1288.0px}
.cd-s-16\:25{left:1299.5px}
.cd-s-16\:30{left:1311.0px}
.cd-s-16\:35{left:1322.5px}
.cd-s-16\:40{left:1334.0px}
.cd-s-16\:45{left:1345.5px}
.cd-s-16\:50{left:1357.0px}
.cd-s-16\:55{left:1368.5px}
.cd-s-17\:00{left:1380.0px}
.cd-s-17\:05{left:1391.5px}
.cd-s-17\:10{left:1403.0px}
.cd-s-17\:15{left:1414.5px}
.cd-s-17\:20{left:1426.0px}
.cd-s-17\:25{left:1437.5px}
.cd-s-17\:30{left:1449.0px}
.cd-s-17\:35{left:1460.5px}
.cd-s-17\:40{left:1472.0px}
.cd-s-17\:45{left:1483.5px}
.cd-s-17\:50{left:1495.0px}
.cd-s-17\:55{left:1506.5px}
.cd-s-18\:00{left:1518.0px}
.cd-s-18\:05{left:1529.5px}
.cd-s-18\:10{left:1541.0px}
.cd-s-18\:15{left:1552.5px}
.cd-s-18\:20{left:1564.0px}
.cd-s-18\:25{left:1575.5px}
.cd-s-18\:30{left:1587.0px}
.cd-s-18\:35{left:1598.5px}
.cd-s-18\:40{left:1610.0px}
.cd-s-18\:45{left:1621.5px}
.cd-s-18\:50{left:1633.0px}
.cd-s-18\:55{left:1644.5px}
.cd-s-19\:00{left:1656.0px}
.cd-s-19\:05{left:1667.5px}
.cd-s-19\:10{left:1679.0px}
.cd-s-19\:15{left:1690.5px}
.cd-s-19\:20{left:1702.0px}
.cd-s-19\:25{left:1713.5px}
.cd-s-19\:30{left:1725.0px}
.cd-s-19\:35{left:1736.5px}
.cd-s-19\:40{left:1748.0px}
.cd-s-19\:45{left:1759.5px}
.cd-s-19\:50{left:1771.0px}
.cd-s-19\:55{left:1782.5px}
.cd-s-20\:00{left:1794.0px}
.cd-s-20\:05{left:1805.5px}
.cd-s-20\:10{left:1817.0px}
.cd-s-20\:15{left:1828.5px}
.cd-s-20\:20{left:1840.0px}
.cd-s-20\:25{left:1851.5px}
.cd-s-20\:30{left:1863.0px}
.cd-s-20\:35{left:1874.5px}
.cd-s-20\:40{left:1886.0px}
.cd-s-20\:45{left:1897.5px}
.cd-s-20\:50{left:1909.0px}
.cd-s-20\:55{left:1920.5px}
.cd-s-21\:00{left:1932.0px}
.cd-s-21\:05{left:1943.5px}
.cd-s-21\:10{left:1955.0px}
.cd-s-21\:15{left:1966.5px}
.cd-s-21\:20{left:1978.0px}
.cd-s-21\:25{left:1989.5px}
.cd-s-21\:30{left:2001.0px}
.cd-e-07\:05{right:1992.5px}
.cd-e-07\:10{right:1981.0px}
.cd-e-07\:15{right:1969.5px}
.cd-e-07\:20{right:1958.0px}
.cd-e-07\:25{right:1946.5px}
.cd-e-07\:30{right:1935.0px}
.cd-e-07\:35{right:1923.5px}
.cd-e-07\:40{right:1912.0px}
.cd-e-07\:45{right:1900.5px}
.cd-e-07\:50{right:1889.0px}
.cd-e-07\:55{right:1877.5px}
.cd-e-08\:00{right:1866.0px}
.cd-e-08\:05{right:1854.5px}
.cd-e-08\:10{right:1843.0px}
.cd-e-08\:15{right:1831.5px}
.cd-e-08\:20{right:1820.0px}
.cd-e-08\:25{right:1808.5px}
.cd-e-08\:30{right:1797.0px}
.cd-e-08\:35{right:1785.5px}
.cd-e-08\:40{right:1774.0px}
.cd-e-08\:45{right:1762.5px}
.cd-e-08\:50{right:1751.0px}
.cd-e-08\:55{right:1739.5px}
.cd-e-09\:00{right:1728.0px}
.cd-e-09\:05{right:1716.5px}
.cd-e-09\:10{right:1705.0px}
.cd-e-09\:15{right:1693.5px}
.cd-e-09\:20{right:1682.0px}
.cd-e-09\:25{right:1670.5px}
.cd-e-09\:30{right:1659.0px}
.cd-e-09\:35{right:1647.5px}
.cd-e-09\:40{right:1636.0px}
.cd-e-09\:45{right:1624.5px}
.cd-e-09\:50{right:1613.0px}
.cd-e-09\:55{right:1601.5px}
.cd-e-10\:00{right:1590.0px}
.cd-e-10\:05{right:1578.5px}
.cd-e-10\:10{right:1567.0px}
.cd-e-10\:15{right:1555.5px}
.cd-e-10\:20{right:1544.0px}
.cd-e-10\:25{right:1532.5px}
.cd-e-10\:30{right:1521.0px}
.cd-e-10\:35{right:1509.5px}
.cd-e-10\:40{right:1498.0px}
.cd-e-10\:45{right:1486.5px}
.cd-e-10\:50{right:1475.0px}
.cd-e-10\:55{right:1463.5px}
.cd-e-11\:00{right:1452.0px}
.cd-e-11\:05{right:1440.5px}
.cd-e-11\:10{right:1429.0px}
.cd-e-11\:15{right:1417.5px}
.cd-e-11\:20{right:1406.0px}
.cd-e-11\:25{right:1394.5px}
.cd-e-11\:30{right:1383.0px}
.cd-e-11\:35{right:1371.5px}
.cd-e-11\:40{right:1360.0px}
.cd-e-11\:45{right:1348.5px}
.cd-e-11\:50{right:1337.0px}
.cd-e-11\:55{right:1325.5px}
.cd-e-12\:00{right:1314.0px}
.cd-e-12\:05{right:1302.5px}
.cd-e-12\:10{right:1291.0px}
.cd-e-12\:15{right:1279.5px}
.cd-e-12\:20{right:1268.0px}
.cd-e-12\:25{right:1256.5px}
.cd-e-12\:30{right:1245.0px}
.cd-e-12\:35{right:1233.5px}
.cd-e-12\:40{right:1222.0px}
.cd-e-12\:45{right:1210.5px}
.cd-e-12\:50{right:1199.0px}
.cd-e-12\:55{right:1187.5px}
.cd-e-13\:00{right:1176.0px}
.cd-e-13\:05{right:1164.5px}
.cd-e-13\:10{right:1153.0px}
.cd-e-13\:15{right:1141.5px}
.cd-e-13\:20{right:1130.0px}
.cd-e-13\:25{right:1118.5px}
.cd-e-13\:30{right:1107.0px}
.cd-e-13\:35{right:1095.5px}
.cd-e-13\:40{right:1084.0px}
.cd-e-13\:45{right:1072.5px}
.cd-e-13\:50{right:1061.0px}
.cd-e-13\:55{right:1049.5px}
.cd-e-14\:00{right:1038.0px}
.cd-e-14\:05{right:1026.5px}
.cd-e-14\:10{right:1015.0px}
.cd-e-14\:15{right:1003.5px}
.cd-e-14\:20{right:992.0px}
.cd-e-14\:25{right:980.5px}
.cd-e-14\:30{right:969.0px}
.cd-e-14\:35{right:957.5px}
.cd-e-14\:40{right:946.0px}
.cd-e-14\:45{right:934.5px}
.cd-e-14\:50{right:923.0px}
.cd-e-14\:55{right:911.5px}
.cd-e-15\:00{right:900.0px}
.cd-e-15\:05{right:888.5px}
.cd-e-15\:10{right:877.0px}
.cd-e-15\:15{right:865.5px}
.cd-e-15\:20{right:854.0px}
.cd-e-15\:25{right:842.5px}
.cd-e-15\:30{right:831.0px}
.cd-e-15\:35{right:819.5px}
.cd-e-15\:40{right:808.0px}
.cd-e-15\:45{right:796.5px}
.cd-e-15\:50{right:785.0px}
.cd-e-15\:55{right:773.5px}
.cd-e-16\:00{right:762.0px}
.cd-e-16\:05{right:750.5px}
.cd-e-16\:10{right:739.0px}
.cd-e-16\:15{right:727.5px}
.cd-e-16\:20{right:716.0px}
.cd-e-16\:25{right:704.5px}
.cd-e-16\:30{right:693.0px}
.cd-e-16\:35{right:681.5px}
.cd-e-16\:40{right:670.0px}
.cd-e-16\:45{right:658.5px}
.cd-e-16\:50{right:647.0px}
.cd-e-16\:55{right:635.5px}
.cd-e-17\:00{right:624.0px}
.cd-e-17\:05{right:612.5px}
.cd-e-17\:10{right:601.0px}
.cd-e-17\:15{right:589.5px}
.cd-e-17\:20{right:578.0px}
.cd-e-17\:25{right:566.5px}
.cd-e-17\:30{right:555.0px}
.cd-e-17\:35{right:543.5px}
.cd-e-17\:40{right:532.0px}
.cd-e-17\:45{right:520.5px}
.cd-e-17\:50{right:509.0px}
.cd-e-17\:55{right:497.5px}
.cd-e-18\:00{right:486.0px}
.cd-e-18\:05{right:474.5px}
.cd-e-18\:10{right:463.0px}
.cd-e-18\:15{right:451.5px}
.cd-e-18\:20{right:440.0px}
.cd-e-18\:25{right:428.5px}
.cd-e-18\:30{right:417.0px}
.cd-e-18\:35{right:405.5px}
.cd-e-18\:40{right:394.0px}
.cd-e-18\:45{right:382.5px}
.cd-e-18\:50{right:371.0px}
.cd-e-18\:55{right:359.5px}
.cd-e-19\:00{right:348.0px}
.cd-e-19\:05{right:336.5px}
.cd-e-19\:10{right:325.0px}
.cd-e-19\:15{right:313.5px}
.cd-e-19\:20{right:302.0px}
.cd-e-19\:25{right:290.5px}
.cd-e-19\:30{right:279.0px}
.cd-e-19\:35{right:267.5px}
.cd-e-19\:40{right:256.0px}
.cd-e-19\:45{right:244.5px}
.cd-e-19\:50{right:233.0px}
.cd-e-19\:55{right:221.5px}
.cd-e-20\:00{right:210.0px}
.cd-e-20\:05{right:198.5px}
.cd-e-20\:10{right:187.0px}
.cd-e-20\:15{right:175.5px}
.cd-e-20\:20{right:164.0px}
.cd-e-20\:25{right:152.5px}
.cd-e-20\:30{right:141.0px}
.cd-e-20\:35{right:129.5px}
.cd-e-20\:40{right:118.0px}
.cd-e-20\:45{right:106.5px}
.cd-e-20\:50{right:95.0px}
.cd-e-20\:55{right:83.5px}
.cd-e-21\:00{right:72.0px}
.cd-e-21\:05{right:60.5px}
.cd-e-21\:10{right:49.0px}
.cd-e-21\:15{right:37.5px}
.cd-e-21\:20{right:26.0px}
.cd-e-21\:25{right:14.5px}
.cd-e-21\:30{right:3.0px}