#tenant-appointments-calendar {
  height: calc(100vh - 255px);
  min-height: 720px;
}

.toast-calendar-event {
  overflow: hidden;
  padding: 2px 4px;
}

.toast-calendar-event__title {
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toast-calendar-event__meta {
  color: #475569;
  font-size: 11px;
  line-height: 1.2;
  margin-top: 1px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.toastui-calendar-layout {
  border: 0 !important;
}

.toastui-calendar-panel {
  border-color: #e5e7eb !important;
}

.toastui-calendar-day-name__name,
.toastui-calendar-weekday-grid-line .toastui-calendar-weekday-grid-date,
.toastui-calendar-weekday-event,
.toastui-calendar-template-alldayTitle,
.toastui-calendar-timegrid-hourmarker-time,
.toastui-calendar-time-date {
  color: #334155 !important;
}

.toastui-calendar-weekday-event-block,
.toastui-calendar-weekday-event-title,
.toastui-calendar-weekday-event-time,
.toastui-calendar-event-time,
.toastui-calendar-event-title {
  font-family: var(--font-sans) !important;
}

.toastui-calendar-grid-selection {
  background-color: rgba(37, 99, 235, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.35) !important;
}

.toastui-calendar-weekday-event {
  border-radius: 8px !important;
  padding: 2px 6px !important;
  min-height: 22px;
}

.toastui-calendar-weekday-event-dot {
  display: none !important;
}

.toastui-calendar-weekday-event-title {
  padding-left: 0 !important;
}

#appointments-calendar-filters-modal,
#appointment-form-modal,
#appointment-detail-drawer {
  backdrop-filter: blur(4px);
}

.appointment-form-shell {
  max-height: calc(100vh - 96px);
  overflow-y: auto;
}

.appointment-form-panel {
  border: 1px solid #dbe3ef;
  border-radius: 1rem;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  padding: 1.35rem;
}

.appointment-form-panel__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid #edf2f7;
}

.appointment-form-panel__title {
  color: #0f172a;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
}

.appointment-form-panel__copy {
  color: #64748b;
  font-size: 0.875rem;
  line-height: 1.5;
  margin-top: 0.3rem;
  max-width: 48rem;
}

.appointment-form-label {
  display: block;
  margin-bottom: 0.45rem;
  color: #334155;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.appointment-form-control {
  width: 100%;
  min-height: 3.1rem;
  border: 1px solid #cfd8e3;
  border-radius: 0.85rem;
  background: #fff;
  color: #0f172a;
  font-size: 1rem;
  line-height: 1.5;
  padding: 0.8rem 0.95rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.appointment-form-control:hover {
  border-color: #94a3b8;
}

.appointment-form-control:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.appointment-form-control::placeholder {
  color: #94a3b8;
}

.appointment-form-select {
  appearance: none;
  padding-right: 2.75rem;
  background-image:
    linear-gradient(45deg, transparent 50%, #64748b 50%),
    linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:
    calc(100% - 19px) calc(50% - 3px),
    calc(100% - 13px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.appointment-form-control--datetime {
  padding-right: 0.95rem;
}

.appointment-form-textarea {
  min-height: 6rem;
  resize: vertical;
}

.appointment-form-static-field {
  border: 1px solid #dbe3ef;
  border-radius: 0.85rem;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f7fb 100%);
  padding: 0.95rem 1rem;
}

.appointment-form-static-field--compact {
  min-height: 3.1rem;
}

.appointment-form-static-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.45rem;
}

.appointment-form-static-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.3rem 0.55rem;
}

.appointment-form-static-value {
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
}

.appointment-form-help {
  color: #6b7280;
  font-size: 0.8rem;
  line-height: 1.4;
  margin-top: 0.3rem;
}

.appointment-detail-shell {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
}

.appointment-detail-hero {
  border: 1px solid #dbe4f0;
  border-radius: 1rem;
  background: linear-gradient(135deg, #f8fbff 0%, #f1f5f9 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 1.1rem 1.15rem;
}

.appointment-detail-hero__title {
  color: #0f172a;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.45;
}

.appointment-detail-hero__meta {
  color: #475569;
  font-size: 0.93rem;
  line-height: 1.5;
  margin-top: 0.35rem;
}

.appointment-detail-card {
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03);
  padding: 1rem 1.05rem;
}

.appointment-detail-label {
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.appointment-detail-value {
  color: #0f172a;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.45;
  margin-top: 0.35rem;
}

.appointment-detail-status-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 0.45rem 0.7rem;
  text-transform: capitalize;
}

.appointment-detail-status-badge[data-status="completed"] {
  background: #dcfce7;
  color: #15803d;
}

.appointment-detail-status-badge[data-status="cancelled"] {
  background: #fee2e2;
  color: #b91c1c;
}

.appointment-detail-status-badge[data-status="no_show"] {
  background: #ffedd5;
  color: #c2410c;
}

.appointment-detail-status-badge[data-status="confirmed"] {
  background: #d1fae5;
  color: #047857;
}

.appointment-detail-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  border-radius: 0.8rem;
  padding: 0 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease, box-shadow 0.18s ease;
}

.appointment-detail-action:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  box-shadow: none;
}

.appointment-detail-action--primary {
  background: #1d4ed8;
  color: #ffffff;
}

.appointment-detail-action--primary:hover:not(:disabled) {
  background: #1e40af;
}

.appointment-detail-action--success {
  background: #16a34a;
  color: #ffffff;
}

.appointment-detail-action--success:hover:not(:disabled) {
  background: #15803d;
}

.appointment-detail-action--warning {
  background: #d97706;
  color: #ffffff;
}

.appointment-detail-action--warning:hover:not(:disabled) {
  background: #b45309;
}

.appointment-detail-action--danger {
  background: #dc2626;
  color: #ffffff;
}

.appointment-detail-action--danger:hover:not(:disabled) {
  background: #b91c1c;
}

.appointment-detail-action--ghost-danger {
  background: #fff5f5;
  color: #b91c1c;
}

.appointment-detail-action--ghost-danger:hover:not(:disabled) {
  background: #fee2e2;
}

@media (max-width: 1024px) {
  #tenant-appointments-calendar {
    height: calc(100vh - 290px);
    min-height: 680px;
  }

  .appointment-form-panel {
    padding: 1.15rem;
  }
}

@media (max-width: 640px) {
  #tenant-appointments-calendar {
    height: calc(100vh - 320px);
    min-height: 620px;
  }

  .appointment-form-shell {
    max-height: calc(100vh - 48px);
  }

  .appointment-form-panel {
    border-radius: 0.85rem;
    padding: 1rem;
  }

  .appointment-form-panel__header {
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
  }

  .appointment-form-control {
    min-height: 3rem;
    font-size: 0.95rem;
  }

  .appointment-detail-hero {
    padding: 1rem;
  }
}
/*
 * Public eligibility checker landing page.
 *
 * Self-contained on purpose. The rest of the app is styled with Tailwind, whose
 * build only emits the utilities it finds in the views at compile time — a
 * marketing page written in fresh utility classes would render unstyled on any
 * environment whose CSS had not been rebuilt. Everything here is plain CSS
 * under a `pl-` prefix, compiled into application.css by the sprockets
 * require_tree, so the page looks right wherever it is served.
 *
 * Every animation is opt-out: the prefers-reduced-motion block at the bottom
 * stops all of it for visitors who ask for that.
 */

/* This page does not load Tailwind's preflight the way the signed-in app does,
   so the browser's default `body { margin: 8px }` survived and framed the whole
   page in white — and pushed the sticky header 8px down from the viewport top.
   Scoped to the landing page's own body class rather than a bare `body` rule,
   because this file is compiled into the app-wide application.css. */
.pl-page {
  margin: 0;
  padding: 0;
  background: #061426;
}

.pl-root {
  --pl-navy: #0b1f38;
  --pl-navy-deep: #061426;
  --pl-blue: #173d6c;
  --pl-blue-bright: #2f6fb5;
  --pl-green: #2fad6f;
  --pl-green-bright: #3fd08a;
  --pl-ink: #0f1b2b;
  --pl-body: #475569;
  --pl-muted: #94a3b8;
  --pl-line: #e2e8f0;
  --pl-surface: #ffffff;
  --pl-surface-alt: #f6f9fc;
  --pl-radius: 18px;
  --pl-shadow: 0 24px 60px -28px rgba(11, 31, 56, 0.4);

  color: var(--pl-body);
  background: var(--pl-surface);
  -webkit-font-smoothing: antialiased;
  /* Backstop only. Each overflow below is fixed at its source; this stops any
     future one from turning into a sideways-scrolling page on a phone. */
  overflow-x: hidden;
}
/* Grid and flex children default to min-width:auto, which refuses to shrink
   below their content and was pushing the hero off a 390px screen. */
.pl-hero__inner > *, .pl-steps > *, .pl-cards > *, .pl-stats > *, .pl-grid > * { min-width: 0; }

.pl-root *,
.pl-root *::before,
.pl-root *::after { box-sizing: border-box; }

/* Wrapped in :where() so the reset carries zero specificity. Written as
   `.pl-root p { margin: 0 }` it scored (0,1,1) and silently beat every
   single-class component rule below it — .pl-hero__note, .pl-step p and the
   rest all lost their margins to it. */
:where(.pl-root) :where(h1, h2, h3, h4, p, ul, ol, figure) { margin: 0; }
:where(.pl-root) :where(ul, ol) { padding: 0; list-style: none; }
:where(.pl-root) :where(a) { color: inherit; text-decoration: none; }

.pl-shell { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 520px) { .pl-shell { padding: 0 18px; } }
.pl-shell--narrow { max-width: 860px; }

/* ---------------------------------------------------------------- nav ---- */

/* Light bar, so the full-colour lockup can be used as-is. The navy wordmark
   needs a light surface; on the previous navy bar it was unreadable, which is
   what the reversed variant exists for. The footer is still dark, so it keeps
   the reversed lockup. */
.pl-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid var(--pl-line);
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.pl-nav.is-stuck {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px -22px rgba(11, 31, 56, 0.65);
}
.pl-nav__inner { display: flex; align-items: center; gap: 24px; height: 72px; }
.pl-nav__brand { display: flex; align-items: center; flex: none; }

/* --- the Hadari lockup ------------------------------------------------- */

.pl-logo { display: block; height: 38px; width: auto; }
.pl-logo__word {
  /* application.css sets `* { font-family: Inter !important }` app-wide, which
     would otherwise take the brand wordmark with it. */
  font-family: "Outfit", "Inter", ui-sans-serif, system-ui, sans-serif !important;
  font-weight: 600;
}

@media (max-width: 560px) { .pl-logo { height: 32px; } }
.pl-nav__links { display: none; gap: 28px; margin-left: auto; }
.pl-nav__links a {
  position: relative; color: var(--pl-body);
  font-size: 14.5px; font-weight: 500; transition: color 0.2s ease;
}
.pl-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1.5px;
  background: var(--pl-green); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease;
}
.pl-nav__links a:hover { color: var(--pl-ink); }
.pl-nav__links a:hover::after { transform: scaleX(1); }
.pl-nav__actions { display: flex; align-items: center; gap: 20px; margin-left: auto; }
.pl-nav__links + .pl-nav__actions { margin-left: 0; }
.pl-nav__login {
  font-size: 14.5px; font-weight: 600; color: var(--pl-ink);
  transition: color 0.2s ease; white-space: nowrap;
}
.pl-nav__login:hover { color: var(--pl-blue); }

@media (min-width: 900px) {
  .pl-nav__links { display: flex; }
}

/* -------------------------------------------------------------- buttons -- */

.pl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 1px solid transparent;
  font-size: 15px; font-weight: 600; line-height: 1; cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.pl-btn:active { transform: translateY(1px); }
.pl-btn--primary {
  background: linear-gradient(135deg, var(--pl-green) 0%, #1f8f5b 100%);
  color: #fff;
  box-shadow: 0 12px 30px -12px rgba(47, 173, 111, 0.8);
}
.pl-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -14px rgba(47, 173, 111, 0.9); }
.pl-btn--ghost { background: rgba(255, 255, 255, 0.06); color: #eaf2fa; border-color: rgba(255, 255, 255, 0.28); }
.pl-btn--ghost:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.45); color: #fff; transform: translateY(-2px); }
.pl-btn--dark { background: var(--pl-blue); color: #fff; }
.pl-btn--dark:hover { background: #12314f; transform: translateY(-2px); }
.pl-btn--outline { border-color: var(--pl-line); color: var(--pl-ink); background: #fff; }
.pl-btn--outline:hover { border-color: var(--pl-blue); color: var(--pl-blue); }
.pl-btn--block { width: 100%; }
.pl-btn--lg { padding: 15px 30px; font-size: 16px; }
.pl-btn[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ----------------------------------------------------------------- hero -- */

.pl-hero {
  position: relative;
  overflow: hidden;
  /* Room for the nav, which is opaque and sits directly above. */
  background: radial-gradient(1100px 560px at 12% -20%, #16406c 0%, transparent 62%),
              radial-gradient(760px 420px at 88% 8%, #174a52 0%, transparent 58%),
              linear-gradient(180deg, var(--pl-navy-deep) 0%, var(--pl-navy) 55%, #0a2340 100%);
  color: #fff;
  padding: 72px 0 88px;
}
/* Softens the seam into the white section below instead of ending on a hard
   edge. */
.pl-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 20, 38, 0.5) 100%);
  pointer-events: none;
}
.pl-hero__grid-lines {
  position: absolute; inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 20%, #000 20%, transparent 75%);
  pointer-events: none;
}
.pl-orb {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5;
  animation: pl-drift 18s ease-in-out infinite; pointer-events: none;
}
.pl-orb--a { width: 360px; height: 360px; top: -110px; left: -80px; background: #1f5fa5; opacity: 0.42; }
/* Kept small and low-opacity: at full strength this read as a green smear in
   the bottom-right corner rather than as light. */
.pl-orb--b { width: 260px; height: 260px; bottom: -60px; right: -40px; background: var(--pl-green); opacity: 0.22; animation-delay: -6s; }
.pl-orb--c { width: 240px; height: 240px; top: 46%; right: 40%; background: #2b7bd4; opacity: 0.2; animation-delay: -12s; }

@keyframes pl-drift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(30px, -24px, 0) scale(1.08); }
  66%      { transform: translate3d(-22px, 18px, 0) scale(0.95); }
}

.pl-hero__inner { position: relative; z-index: 2; display: grid; gap: 52px; }
@media (min-width: 1020px) {
  .pl-hero__inner { grid-template-columns: 1.02fr 0.98fr; align-items: center; gap: 64px; }
}

.pl-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, 0.86);
  position: relative; overflow: hidden;
}
.pl-pill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.22) 50%, transparent 80%);
  transform: translateX(-120%);
  animation: pl-sheen 4.5s ease-in-out infinite;
}
@keyframes pl-sheen { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.pl-pill__count {
  display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px;
  border-radius: 999px; background: var(--pl-green); color: #04220f; font-weight: 800; font-size: 12px;
}

.pl-hero h1 {
  margin-top: 24px;
  /* Capped lower than before: at 62px the last two words fell onto a line of
     their own and the block lost its shape. */
  font-size: clamp(36px, 4.6vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 800;
  color: #fff;
  max-width: 15ch;
}
.pl-hero h1 .pl-accent {
  background: linear-gradient(100deg, var(--pl-green-bright) 0%, #86e8bd 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pl-hero__sub {
  margin-top: 20px; max-width: 520px;
  font-size: 17.5px; line-height: 1.68; color: rgba(226, 236, 247, 0.76);
}
.pl-hero__actions { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px; }
.pl-hero__note { margin-top: 14px; font-size: 13px; color: rgba(226, 236, 247, 0.5); }
.pl-hero__trust {
  margin-top: 34px; padding-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
/* Sized to keep all three on one line in the hero's left column, which is
   ~545px at the 1180px shell width. */
.pl-hero__trust li {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; color: rgba(226, 236, 247, 0.74);
}
.pl-hero__trust svg { width: 16px; height: 16px; }
@media (min-width: 900px) { .pl-hero__trust li { white-space: nowrap; } }
.pl-hero__trust svg { width: 17px; height: 17px; color: var(--pl-green-bright); flex: none; }

/* The looping demo card: what a check looks like when it runs. */
.pl-demo {
  position: relative;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.03);
  padding: 6px;
  animation: pl-float 8s ease-in-out infinite;
}
@keyframes pl-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.pl-demo__frame { border-radius: 17px; background: #08182b; overflow: hidden; }
.pl-demo__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 13px 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pl-demo__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.pl-demo__title { margin-left: 6px; font-size: 12.5px; color: rgba(226, 236, 247, 0.6); letter-spacing: 0.02em; }
.pl-demo__live {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pl-green-bright);
}
.pl-demo__live::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
  animation: pl-ping 1.8s ease-out infinite;
}
.pl-demo__body { padding: 18px 20px 22px; }

/* The request being answered. Without it the card was four lines of status in
   a large empty box. */
.pl-demo__req { display: flex; flex-wrap: wrap; gap: 7px; padding-bottom: 16px; }
.pl-demo__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 11.5px; color: rgba(226, 236, 247, 0.72);
}
.pl-demo__chip b { color: #fff; font-weight: 600; }
.pl-demo__rule { height: 1px; background: rgba(255, 255, 255, 0.08); }

.pl-demo__step {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0; font-size: 14px; color: rgba(226, 236, 247, 0.4);
  transition: color 0.4s ease;
}
.pl-demo__step.is-done { color: rgba(226, 236, 247, 0.85); }
.pl-demo__step.is-live { color: #fff; }
.pl-demo__tick {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  color: transparent; font-size: 11px; font-weight: 800;
  transition: all 0.4s ease;
}
.pl-demo__step.is-live .pl-demo__tick {
  border-color: var(--pl-green-bright);
  border-right-color: transparent;
  animation: pl-spin 0.9s linear infinite;
}
.pl-demo__step.is-done .pl-demo__tick {
  background: var(--pl-green); border-color: var(--pl-green); color: #04220f;
  animation: none;
}
@keyframes pl-spin { to { transform: rotate(360deg); } }

.pl-demo__result {
  margin-top: 16px; padding: 16px; border-radius: 14px;
  background: linear-gradient(160deg, rgba(47, 173, 111, 0.16) 0%, rgba(47, 173, 111, 0.06) 100%);
  border: 1px solid rgba(47, 173, 111, 0.34);
  /* Holds its space while hidden so the card does not jump every loop. */
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.pl-demo__result.is-shown { opacity: 1; transform: translateY(0); }
.pl-demo__badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--pl-green-bright);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.pl-demo__badge::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--pl-green-bright); box-shadow: 0 0 0 0 rgba(63, 208, 138, 0.6);
  animation: pl-ping 1.8s ease-out infinite;
}
@keyframes pl-ping {
  0%   { box-shadow: 0 0 0 0 rgba(63, 208, 138, 0.55); }
  100% { box-shadow: 0 0 0 12px rgba(63, 208, 138, 0); }
}
.pl-demo__figures { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pl-demo__figures > * { min-width: 0; }
@media (max-width: 430px) {
  .pl-demo__figures { grid-template-columns: 1fr 1fr; }
  .pl-demo__figure dd { font-size: 16px; }
}
.pl-demo__figure {
  background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px; padding: 11px 12px;
}
.pl-demo__figure dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(226, 236, 247, 0.5); }
.pl-demo__figure dd { margin: 5px 0 0; font-size: 18px; font-weight: 700; color: #fff; }

/* ------------------------------------------------------------ sections --- */

.pl-section { padding: 104px 0; }
@media (max-width: 720px) { .pl-section { padding: 72px 0; } }
.pl-section--tint { background: var(--pl-surface-alt); }
.pl-section--tight { padding-top: 0; }
.pl-section--ink { background: var(--pl-navy-deep); color: rgba(226, 236, 247, 0.75); }

.pl-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #1f8f5b;
}
.pl-eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--pl-green), rgba(47, 173, 111, 0.15));
}
.pl-head--center .pl-eyebrow::before { display: none; }
.pl-section--ink .pl-eyebrow { color: var(--pl-green-bright); }

.pl-h2 {
  margin-top: 16px;
  font-size: clamp(28px, 3.2vw, 40px); line-height: 1.16;
  letter-spacing: -0.028em; font-weight: 800; color: var(--pl-ink);
}
.pl-section--ink .pl-h2 { color: #fff; }
.pl-lede { margin-top: 16px; max-width: 640px; font-size: 17px; line-height: 1.7; }
.pl-head--center { text-align: center; }
.pl-head--center .pl-lede { margin-left: auto; margin-right: auto; }

/* --------------------------------------------------------- how it works -- */

.pl-steps { position: relative; margin-top: 56px; display: grid; gap: 22px; }
@media (min-width: 900px) { .pl-steps { grid-template-columns: repeat(4, 1fr); gap: 18px; } }

/* The rail is drawn once as the section scrolls into view. */
.pl-steps__rail {
  display: none;
  position: absolute; top: 52px; left: 12%; right: 12%; height: 2px;
  background: var(--pl-line);
}
@media (min-width: 900px) { .pl-steps__rail { display: block; } }
.pl-steps__rail::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, var(--pl-blue), var(--pl-green));
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-steps.is-visible .pl-steps__rail::after { transform: scaleX(1); }

.pl-step {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--pl-line); border-radius: var(--pl-radius);
  padding: 28px 24px; box-shadow: 0 2px 6px -2px rgba(15, 27, 43, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pl-step:hover { transform: translateY(-6px); box-shadow: var(--pl-shadow); border-color: #cbd5e1; }
.pl-step__num {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
  background: linear-gradient(140deg, var(--pl-blue) 0%, #2a6bab 100%);
  color: #fff; font-weight: 800; font-size: 17px;
  box-shadow: 0 12px 26px -12px rgba(23, 61, 108, 0.95);
  /* A white ring so the badge sits cleanly on top of the connecting rail. */
  outline: 5px solid #fff;
}
.pl-step:nth-child(3) .pl-step__num { background: linear-gradient(140deg, #1d6a92 0%, #2591a0 100%); }
.pl-step:nth-child(4) .pl-step__num { background: linear-gradient(140deg, #1f8f5b 0%, var(--pl-green) 100%); }
.pl-step:nth-child(5) .pl-step__num { background: linear-gradient(140deg, #2fad6f 0%, #57c98d 100%); }
.pl-step h3 { margin-top: 22px; font-size: 17.5px; font-weight: 700; color: var(--pl-ink); letter-spacing: -0.01em; }
.pl-step p { margin-top: 10px; font-size: 14.5px; line-height: 1.7; }
.pl-step__meta {
  /* Pinned to the bottom so the four pills line up across cards of
     different text lengths. */
  margin-top: auto; padding-top: 16px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; color: #2a6bab;
  background: #eef4fb; border: 1px solid #dbe7f4; border-radius: 999px; padding: 5px 12px;
}

/* -------------------------------------------------------- pipeline flow -- */

.pl-flow { margin-top: 52px; border-radius: 24px; padding: 30px 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.09); }
.pl-flow svg { width: 100%; height: auto; display: block; }
.pl-flow__node text { font-size: 11px; font-weight: 600; fill: rgba(226, 236, 247, 0.9); }
.pl-flow__node rect { fill: #0d2338; stroke: rgba(255, 255, 255, 0.2); }
.pl-flow__wire { stroke: rgba(255, 255, 255, 0.16); stroke-width: 2; fill: none; }
.pl-flow__packet { fill: var(--pl-green-bright); filter: drop-shadow(0 0 6px rgba(63, 208, 138, 0.9)); }
.pl-flow__packet--back { fill: #7cc4ff; filter: drop-shadow(0 0 6px rgba(124, 196, 255, 0.9)); }
.pl-flow__arrow { fill: rgba(255, 255, 255, 0.3); }
.pl-flow__label { font-size: 10px; fill: rgba(226, 236, 247, 0.55); letter-spacing: 0.08em; }

/* Packets travel the wire with CSS transforms rather than SMIL, so the
   reduced-motion block at the bottom of this file switches them off like
   everything else. */
.pl-flow__packet--out {
  animation: pl-packet-out 3.3s linear infinite;
}
.pl-flow__packet--back {
  animation: pl-packet-back 3.3s linear infinite;
  animation-delay: 0.8s;
}
@keyframes pl-packet-out {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(700px); opacity: 0; }
}
@keyframes pl-packet-back {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(-700px); opacity: 0; }
}

/* ---------------------------------------------------------------- stats -- */

.pl-stats { margin-top: 48px; display: grid; gap: 18px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px) { .pl-stats { grid-template-columns: repeat(4, 1fr); } }
.pl-stat {
  border-radius: var(--pl-radius); padding: 28px 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 100%);
  border: 1px solid rgba(255, 255, 255, 0.11);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.pl-stat:hover { border-color: rgba(63, 208, 138, 0.4); transform: translateY(-4px); }
.pl-stat__value {
  font-size: clamp(32px, 4vw, 44px); font-weight: 800; letter-spacing: -0.035em;
  line-height: 1; color: #fff;
  background: linear-gradient(150deg, #ffffff 0%, #b9d7ef 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pl-stat__label { margin-top: 12px; font-size: 13.5px; color: rgba(226, 236, 247, 0.62); line-height: 1.6; }

/* -------------------------------------------------------------- feature -- */

.pl-cards { margin-top: 52px; display: grid; gap: 20px; }
@media (min-width: 760px) { .pl-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .pl-cards { grid-template-columns: repeat(3, 1fr); } }
.pl-card {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--pl-line); border-radius: var(--pl-radius);
  padding: 28px 24px; transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.pl-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--pl-blue), var(--pl-green));
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease;
}
.pl-card:hover { transform: translateY(-6px); box-shadow: var(--pl-shadow); }
.pl-card:hover::before { transform: scaleX(1); }
.pl-card__icon {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px;
  background: #eef4fb; color: var(--pl-blue);
}
.pl-card__icon svg { width: 22px; height: 22px; }
.pl-card h3 {
  margin-top: 18px; font-size: 17px; font-weight: 700; color: var(--pl-ink);
  letter-spacing: -0.01em;
}
.pl-card p { margin-top: 9px; font-size: 14.5px; line-height: 1.68; }

/* The eligibility module carries a badge, because it is the one a visitor can
   use on this page. */
.pl-tag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  padding: 3px 9px; border-radius: 999px;
  background: #e7f7ef; border: 1px solid #b6e6ce;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: #1f8f5b; white-space: nowrap;
}
.pl-card.is-featured {
  border-color: #a7dcc2;
  box-shadow: 0 18px 44px -26px rgba(47, 173, 111, 0.55);
}
.pl-card.is-featured::before { transform: scaleX(1); }
.pl-card.is-featured .pl-card__icon { background: #e7f7ef; color: #1f8f5b; }

/* The value band is three wide even at the width the module grid uses. */
@media (min-width: 760px) and (max-width: 1059px) {
  .pl-cards--three { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1060px) { .pl-cards--three { grid-template-columns: repeat(3, 1fr); } }

/* ------------------------------------------------------------- marquee --- */

.pl-marquee { margin-top: 40px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.pl-marquee__track { display: flex; gap: 14px; width: max-content; animation: pl-marquee 38s linear infinite; }
.pl-marquee:hover .pl-marquee__track { animation-play-state: paused; }
@keyframes pl-marquee { to { transform: translateX(-50%); } }
.pl-chip {
  flex: none; padding: 11px 20px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 14px; font-weight: 600; color: rgba(226, 236, 247, 0.78); white-space: nowrap;
}

/* ---------------------------------------------------------------- forms -- */

.pl-panel {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--pl-line); border-radius: 24px;
  box-shadow: 0 30px 70px -34px rgba(11, 31, 56, 0.34); padding: 32px;
}
.pl-panel::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--pl-blue) 0%, var(--pl-green) 100%);
}
@media (min-width: 720px) { .pl-panel { padding: 40px; } }
.pl-panel__head { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; justify-content: space-between; }
.pl-panel h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--pl-ink); }
.pl-panel p.pl-panel__hint { margin-top: 8px; font-size: 14.5px; line-height: 1.6; }

.pl-grid { display: grid; gap: 24px 18px; margin-top: 26px; }
@media (min-width: 700px) { .pl-grid--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px) { .pl-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.pl-field--wide { grid-column: 1 / -1; }

.pl-field label:not(.pl-check) {
  display: block; font-size: 13px; font-weight: 600; color: var(--pl-ink); margin-bottom: 7px;
}
.pl-field label .pl-req { color: #dc2626; }
.pl-field input[type="text"],
.pl-field input[type="email"],
.pl-field input[type="password"],
.pl-field input[type="tel"],
.pl-field input[type="url"],
.pl-field input[type="date"],
.pl-field input[type="number"],
.pl-field input[type="search"],
.pl-field select,
.pl-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 12px;
  border: 1px solid var(--pl-line); background: #fff; color: var(--pl-ink);
  font-size: 15px; line-height: 1.35;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.pl-field input:focus, .pl-field select:focus, .pl-field textarea:focus {
  outline: none; border-color: var(--pl-blue-bright);
  box-shadow: 0 0 0 4px rgba(47, 111, 181, 0.14);
}
.pl-field__hint { margin-top: 6px; font-size: 12.5px; color: var(--pl-muted); }
.pl-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; line-height: 1.55; }
.pl-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--pl-green); }
.pl-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pl-alert { margin-top: 22px; padding: 14px 16px; border-radius: 12px; font-size: 14px; line-height: 1.55; }
.pl-alert--error { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.pl-alert--note { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }
.pl-alert--good { background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46; }

.pl-form-actions { margin-top: 26px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.pl-form-actions .pl-note { font-size: 12.5px; color: var(--pl-muted); }

/* --------------------------------------------------------------- modal --- */

.pl-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; }
.pl-modal[hidden] { display: none; }
.pl-modal__scrim {
  position: absolute; inset: 0;
  background: rgba(6, 20, 38, 0.62);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  animation: pl-fade 0.2s ease;
}
.pl-modal__dialog {
  position: relative; width: 100%; max-width: 420px;
  max-height: calc(100vh - 48px); overflow-y: auto;
  background: #fff; border-radius: 20px; padding: 32px;
  box-shadow: 0 40px 90px -30px rgba(6, 20, 38, 0.7);
  animation: pl-modal-in 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-modal__title {
  margin-top: 12px; margin-bottom: 4px;
  font-size: 26px; font-weight: 800; letter-spacing: -0.025em; color: var(--pl-ink);
}
.pl-modal__close {
  position: absolute; top: 14px; right: 16px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: none; color: var(--pl-muted); font-size: 24px; line-height: 1; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.pl-modal__close:hover { background: #f1f5f9; color: var(--pl-ink); }
.pl-modal__foot {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--pl-line);
  font-size: 13px; color: var(--pl-muted); text-align: center;
}
@keyframes pl-fade { from { opacity: 0; } }
@keyframes pl-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }

/* ---------------------------------------------------------------- auth --- */

.pl-auth { padding-top: 72px; padding-bottom: 96px; }
.pl-auth__panel { max-width: 460px; margin: 0 auto; }
.pl-auth__head { margin-bottom: 26px; }
.pl-auth__title {
  margin-top: 12px; font-size: 30px; font-weight: 800;
  letter-spacing: -0.025em; color: var(--pl-ink);
}
.pl-auth__foot {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pl-line);
  font-size: 13.5px; line-height: 1.6; color: var(--pl-muted);
}
.pl-auth__aside {
  margin-top: 22px; text-align: center; font-size: 14px; color: var(--pl-body);
}
.pl-auth__link { color: var(--pl-blue); font-weight: 600; }
.pl-auth__link:hover { text-decoration: underline; }

.pl-login { margin-top: 24px; }
.pl-login .pl-field + .pl-field { margin-top: 18px; }
.pl-login .pl-check { margin-top: 18px; }
.pl-field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pl-field__aside { font-size: 12.5px; font-weight: 600; color: var(--pl-blue); }
.pl-field__aside:hover { text-decoration: underline; }

/* --------------------------------------------------------- portal choice -- */

.pl-choose { padding-top: 64px; }
.pl-choose__head { max-width: 640px; margin: 0 auto 44px; }
.pl-choose__alert { max-width: 640px; margin: 0 auto 28px; }
.pl-choose__group + .pl-choose__group { margin-top: 40px; }
.pl-choose__group-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.pl-choose__label {
  display: flex; align-items: center; gap: 9px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pl-muted); margin-bottom: 14px;
}
.pl-choose__group-head .pl-choose__label { margin-bottom: 0; }
.pl-choose__count {
  display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 999px; background: #eef4fb; color: var(--pl-blue);
  font-size: 11px; letter-spacing: 0;
}
.pl-choose__filter {
  width: min(280px, 100%); padding: 9px 13px; border-radius: 10px;
  border: 1px solid var(--pl-line); background: #fff; color: var(--pl-ink); font-size: 14px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.pl-choose__filter:focus {
  outline: none; border-color: var(--pl-blue-bright);
  box-shadow: 0 0 0 4px rgba(47, 111, 181, 0.14);
}
.pl-choose__empty { margin-top: 18px; text-align: center; font-size: 14.5px; color: var(--pl-muted); }
.pl-choose__foot {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--pl-line);
  text-align: center; font-size: 13.5px; color: var(--pl-muted);
}

.pl-choices { display: grid; gap: 12px; }
.pl-choices form { margin: 0; display: flex; }
/* A single column reads as a very long list once an account holds more than a
   handful of practices. */
@media (min-width: 700px) { .pl-choices--grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .pl-choices--grid { grid-template-columns: repeat(3, 1fr); } }

.pl-choice {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; border-radius: 14px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--pl-line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pl-choice:hover {
  border-color: var(--pl-green); transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(11, 31, 56, 0.5);
}
.pl-choice__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  background: #eef4fb; color: var(--pl-blue);
}
.pl-choice__icon svg { width: 20px; height: 20px; }
.pl-choice__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pl-choice__title {
  font-size: 15px; font-weight: 700; color: var(--pl-ink); line-height: 1.35;
}
.pl-choice__meta {
  font-size: 12.5px; color: var(--pl-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pl-choice__flag { color: #b45309; font-weight: 600; }
.pl-choice__flag::before { content: "· "; color: var(--pl-muted); font-weight: 400; }
.pl-choice__go { color: var(--pl-muted); font-size: 18px; flex: none; }
.pl-choice:hover .pl-choice__go { color: var(--pl-green); }

/* ---------------------------------------------------------------- auth --- */

.pl-auth { padding-top: 72px; padding-bottom: 96px; }
.pl-auth__panel { max-width: 460px; margin: 0 auto; }
.pl-auth__head { margin-bottom: 26px; }
.pl-auth__title {
  margin-top: 12px; font-size: 30px; font-weight: 800;
  letter-spacing: -0.025em; color: var(--pl-ink);
}
.pl-auth__foot {
  margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pl-line);
  font-size: 13.5px; line-height: 1.6; color: var(--pl-muted);
}
.pl-auth__aside {
  margin-top: 22px; text-align: center; font-size: 14px; color: var(--pl-body);
}
.pl-auth__link { color: var(--pl-blue); font-weight: 600; }
.pl-auth__link:hover { text-decoration: underline; }

.pl-login { margin-top: 24px; }
.pl-login .pl-field + .pl-field { margin-top: 18px; }
.pl-login .pl-check { margin-top: 18px; }
.pl-field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pl-field__aside { font-size: 12.5px; font-weight: 600; color: var(--pl-blue); }
.pl-field__aside:hover { text-decoration: underline; }

/* --------------------------------------------------------- portal choice -- */

.pl-choices { display: grid; gap: 12px; }
.pl-choices form { margin: 0; }
.pl-choice {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 16px 18px; border-radius: 14px; text-align: left; cursor: pointer;
  background: #fff; border: 1px solid var(--pl-line);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.pl-choice:hover {
  border-color: var(--pl-green); transform: translateY(-2px);
  box-shadow: 0 14px 30px -20px rgba(11, 31, 56, 0.5);
}
.pl-choice__icon {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 11px;
  background: #eef4fb; color: var(--pl-blue);
}
.pl-choice__icon svg { width: 20px; height: 20px; }
.pl-choice__body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pl-choice__title { font-size: 15.5px; font-weight: 700; color: var(--pl-ink); }
.pl-choice__meta { font-size: 12.5px; color: var(--pl-muted); }
.pl-choice__flag { color: #b45309; font-weight: 600; }
.pl-choice__go { color: var(--pl-muted); font-size: 18px; flex: none; }
.pl-choice:hover .pl-choice__go { color: var(--pl-green); }

/* ------------------------------------------------------------ allowance -- */

.pl-allowance {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px;
  padding: 18px 22px; border-radius: 16px;
  background: linear-gradient(120deg, #f0f7f3 0%, #eef4fb 100%);
  border: 1px solid #d8e6de;
}
.pl-allowance__count { font-size: 30px; font-weight: 800; color: var(--pl-ink); letter-spacing: -0.02em; }
.pl-allowance__count span { font-size: 15px; font-weight: 600; color: var(--pl-body); }
.pl-allowance__meter { flex: 1 1 220px; height: 9px; border-radius: 999px; background: #dbe7f2; overflow: hidden; }
.pl-allowance__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--pl-green), var(--pl-blue-bright));
  width: 0; transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.pl-allowance__label { font-size: 13px; color: var(--pl-body); }

/* -------------------------------------------------------------- results -- */

.pl-result-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; }
.pl-status {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 999px; font-size: 14.5px; font-weight: 700;
  border: 1px solid transparent;
}
.pl-status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pl-status.is-active { background: #ecfdf5; border-color: #a7f3d0; color: #047857; }
.pl-status.is-inactive { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.pl-status.is-unknown { background: #f8fafc; border-color: var(--pl-line); color: #475569; }

.pl-figures { margin-top: 26px; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 800px) { .pl-figures { grid-template-columns: repeat(4, 1fr); } }
.pl-figure { border: 1px solid var(--pl-line); border-radius: 14px; padding: 18px; background: #fff; }
.pl-figure dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pl-muted); font-weight: 600; }
.pl-figure dd { margin: 8px 0 0; font-size: 26px; font-weight: 800; color: var(--pl-ink); letter-spacing: -0.02em; }
.pl-figure__note { margin-top: 4px; font-size: 12px; color: var(--pl-muted); }

.pl-detail { margin-top: 26px; border: 1px solid var(--pl-line); border-radius: 16px; overflow: hidden; }
.pl-detail__row { display: flex; justify-content: space-between; gap: 20px; padding: 13px 18px; font-size: 14px; border-bottom: 1px solid var(--pl-line); }
.pl-detail__row:last-child { border-bottom: 0; }
.pl-detail__row:nth-child(odd) { background: #fbfdff; }
.pl-detail__row dt { color: var(--pl-body); }
.pl-detail__row dd { margin: 0; font-weight: 600; color: var(--pl-ink); text-align: right; }

.pl-history { margin-top: 28px; }
.pl-history h3 { font-size: 15px; font-weight: 700; color: var(--pl-ink); }
.pl-history ul { margin-top: 12px; border: 1px solid var(--pl-line); border-radius: 14px; overflow: hidden; }
.pl-history li { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 13.5px; border-bottom: 1px solid var(--pl-line); }
.pl-history li:last-child { border-bottom: 0; }
.pl-history__tag { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px; border-radius: 999px; }
.pl-history__tag.is-active { background: #ecfdf5; color: #047857; }
.pl-history__tag.is-inactive { background: #fef2f2; color: #b91c1c; }
.pl-history__tag.is-unknown { background: #f1f5f9; color: #475569; }
.pl-history__tag.is-failed { background: #fff7ed; color: #b45309; }

/* ------------------------------------------------------------------ faq -- */

.pl-faq { margin-top: 44px; display: grid; gap: 12px; }
.pl-faq__item { border: 1px solid var(--pl-line); border-radius: 14px; background: #fff; overflow: hidden; }
.pl-faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 20px; background: none; border: 0; cursor: pointer;
  font-size: 15.5px; font-weight: 600; color: var(--pl-ink); text-align: left;
}
.pl-faq__q::after {
  content: "+"; font-size: 20px; font-weight: 400; color: var(--pl-muted);
  transition: transform 0.25s ease; flex: none;
}
.pl-faq__item.is-open .pl-faq__q::after { transform: rotate(45deg); }
.pl-faq__a { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.pl-faq__a p { padding: 0 20px 20px; font-size: 14.5px; line-height: 1.7; }

/* ------------------------------------------------------------------ cta -- */

.pl-cta {
  position: relative; overflow: hidden;
  border-radius: 26px; padding: 54px 34px; text-align: center;
  background: radial-gradient(700px 300px at 30% 0%, #1c4f7e 0%, transparent 60%),
              linear-gradient(135deg, var(--pl-navy-deep) 0%, #10345a 100%);
  color: #fff;
}
.pl-cta h2 { font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; letter-spacing: -0.025em; }
.pl-cta p { margin-top: 14px; font-size: 17px; color: rgba(226, 236, 247, 0.76); }
.pl-cta__actions { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

.pl-footer { background: var(--pl-navy-deep); color: rgba(226, 236, 247, 0.55); padding: 46px 0; font-size: 13.5px; }
.pl-footer__inner { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.pl-footer__brand { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.pl-footer__brand .pl-logo { height: 32px; }
.pl-footer a { color: rgba(226, 236, 247, 0.75); }
.pl-footer a:hover { color: #fff; }
.pl-footer__legal { max-width: 640px; margin-top: 18px; line-height: 1.7; font-size: 12.5px; color: rgba(226, 236, 247, 0.42); }

/* ------------------------------------------------------ scroll reveals --- */

.pl-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.pl-reveal.is-visible { opacity: 1; transform: none; }
.pl-reveal[data-delay="1"] { transition-delay: 0.08s; }
.pl-reveal[data-delay="2"] { transition-delay: 0.16s; }
.pl-reveal[data-delay="3"] { transition-delay: 0.24s; }
.pl-reveal[data-delay="4"] { transition-delay: 0.32s; }

.pl-flash { position: fixed; top: 84px; left: 50%; transform: translateX(-50%); z-index: 60; max-width: 90vw; }
.pl-flash__item {
  padding: 13px 20px; border-radius: 999px; font-size: 14px; font-weight: 600;
  box-shadow: 0 18px 40px -18px rgba(11, 31, 56, 0.6); animation: pl-drop 0.5s ease;
}
.pl-flash__item + .pl-flash__item { margin-top: 10px; }
.pl-flash__item.is-notice { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.pl-flash__item.is-alert { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
@keyframes pl-drop { from { opacity: 0; transform: translateY(-14px); } }

/* Submitting state: the button says what is happening, because a real payer
   round trip can take a couple of seconds. */
.pl-btn.is-busy { pointer-events: none; opacity: 0.75; }
.pl-btn.is-busy::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.45); border-top-color: #fff;
  animation: pl-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .pl-root *, .pl-root *::before, .pl-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .pl-reveal { opacity: 1; transform: none; }
  .pl-steps__rail::after { transform: scaleX(1); }
}
/*!
 * TOAST UI Calendar 2nd Edition
 * @version 2.1.3 | Tue Aug 16 2022
 * @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
 * @license MIT
 */
.toastui-calendar-holiday {
  color: red;
  font-size: 15px;
}

.toastui-calendar-layout {
  box-sizing: border-box;
  position: relative;
  white-space: nowrap;
}

.toastui-calendar-layout * {
  box-sizing: border-box;
}

.toastui-calendar-layout.toastui-calendar-dragging--move-event * {
  cursor: move;
}

.toastui-calendar-layout.toastui-calendar-dragging--resize-horizontal-event * {
  cursor: col-resize;
}

.toastui-calendar-layout.toastui-calendar-dragging--resize-vertical-event * {
  cursor: row-resize;
}

.toastui-calendar-layout .toastui-calendar-panel-resizer {
  user-select: none;
}

.toastui-calendar-layout .toastui-calendar-panel-resizer:hover {
  border-color: #999;
}

.toastui-calendar-layout .toastui-calendar-panel-resizer-guide {
  position: absolute;
}

.toastui-calendar-layout.toastui-calendar-horizontal .toastui-calendar-panel,
.toastui-calendar-layout.toastui-calendar-horizontal .toastui-calendar-panel-resizer {
  display: inline-block;
  vertical-align: middle;
}

.toastui-calendar-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
}
.toastui-calendar-icon.toastui-calendar-ic-title {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAO5JREFUKBVjYCATMOLSFxkZqfHnz5+1QHktNDVbV69e7cOCJgjmQjXtB3IksMh7g8SY0CXQNTEyMlYD1fBCabhyFI3omkCq/v//PwnotC8gGq4LyIBrxKYJpBBoU15oaCgPiEbWCPYjUEIFGBBY/QS0qRWooRVIg/UBDXgMYoBtBHJSgWxsAQFWjET8BBqQBuLDNM4Can6GpAAb8ydQMADo3x0gSbDGlStX3gVqdMSjGUUTSCNKAggPD1cDOmU/EEuBJKEAQxNIHEUjSABNM1ZNIHXMIAIZXL169a2+vv5moK18QKeXAv20B1meYjYAr7xrljpOzc0AAAAASUVORK5CYII=) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-location {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAR1JREFUKBWdUTtPg1AUBiT8CydHJtv/0MTJRWAgcTK1bq0/pO3k4E4IYLo2Me46tS4wumjSpV07kAb6HXLPzaGPRZLL+c73uE/D+OdnHuaCIOhVVTUEf620pWVZ0yRJ3qW3FfR9f1zX9UgaGJumOUnT9Fn3DDzPuwPOuD9TvSzL3kizhOFJ4LnjOJc0wM0FP2Asgx0mEehHUfRHgzDzqF3GOogzbJg8V6XHFqYv4Cvqy7J8DcOwWYmw8Hwy1kHMRjcaKuEGgV82caWbZay3indagJyxcKLOlKeRdJA627YfUVaN0v6tlKbZVjCO4zW2cw91px3AxJEmOONCNoTzPP9xXZfOd6u0Bzz60RGOgmQuiuIb4S3gB0IvaoJW2QMDs1bBoH1CAQAAAABJRU5ErkJggg==) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-date {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAGpJREFUKBVjYKAGCA0N/Q/C6GZhE2cEKQoLC9v6//9/L3QN2PiMjIzbVq1a5c0EkiRWE7JasEZsJhMSI1sjC7LJq1evBvsZWQyZjRxwZNs4hDSiBA6y55EDBRsb7EdQasAmiUNsKw5x4oQBkUAeDPJ53KsAAAAASUVORK5CYII=) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-state {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAIxJREFUKBVjYCATMKLrCw8P9/z3798soLgMVO4JExNT2sqVK7cjq2VC5oDYME2MjIyNIAwUkoGKoShlQeFBOGCbVq1a1QDihoaG1gMpmO0gITAAOzUsLGzr////vWCC+GigK7YBDfUGO5VYTSADYWox/IjPNmS5UY3IoYHGBgcOKG7QxPFxt+KTJCgHAGcZJbGLRuJ2AAAAAElFTkSuQmCC) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-private {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAKpJREFUKBVjYCATMKLri46Olvn9+3fX////HUByjIyMB1hZWcuWLl36BFktikaQpl+/fl0EKhBCVgRkv2NjY9NH1syErABkE1TTdqBCWRAG8reDxKBycOUoGmHOA2pIA5kOwiA2SDVMDqYTRSNQUBIkgewkJDZYDqYR7sewsLCtQFO9YBLYaGBAbVu1apU3SA5uIyFNIMXIauAaQRKkgBGlERTURATOVpgaABRQQOK46wEAAAAAAElFTkSuQmCC) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-public {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAKdJREFUKBVjYCATMKLri46Olvn9+3fX////HUByjIyMB1hZWcuWLl36BFktikaQpl+/fl0EKhBCVgRkv2NjY9NH1syErABkE1TTdqBCWRAG8reDxKBycOUoGmHOA2pIA5kOwiA2SDVMDq4TmREaGvofhJHFcLHhfgwLC9sKNNULl0KQODCgtq1atcobxIY7lZAmkGJkNXCNIAlSwIjSCApqIgJnK0wNALoOPwSpOcq0AAAAAElFTkSuQmCC) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-close {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAJRJREFUKBXFkNERhCAMREUbuEKohzq0Eq2DDq6Da4B60KezDORkxj+ZwchmX0IYhtdWCGFl9y5g82NtzDnPdzAaudo76ZBS+nrvPxiInMkJcs5tMcZFfqcfxdqIRiELof+BiIJPg+mExmpmvKRn3zKj7OrG9Y79szPL14A1xEP0Hgy4gBZS5R7czHj3ehSgOzkVeyfuGrBw/WLm0hsAAAAASUVORK5CYII=) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-user-b {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAJpJREFUKBVjYKA1YES3wMTExBMoNgsqnnbmzJntyGqYkDlQ9qz////LgDCQD9MIV4ZNA1wSGwObhjRGRsYnIAzUkIZNE0licE+bm5tr/fnzJx1osjPQBFmoKY+BftnLwsIy8+TJk9dAYmANxsbGoUD2YiBmBwliAT+BYrFnz55dDfNDO1AAl2KQfpAcSA0DTIMyiEMAEKMG0wgAolIjcM7Tjm8AAAAASUVORK5CYII=) no-repeat;
  top: -4px;
}

.toastui-calendar-icon.toastui-calendar-ic-edit {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAMdJREFUKBVjYCARMOJTb2xsLMfIyBjLysq64Pjx409BapnwaQDKzf7//3/L79+/D1tbW0uB1LJg02BmZqYIVPgdKBf/79+//UC2xs+fP8OB/H4MG0CK//79ewCkEGQYExOTI5DawMnJuQTER/EDTDFQXA4kCQQ3QBpOnz79AsJF8gMWxTA1KDTYBhyKMUwH6WSysrKSB7kZyIY5AySOVTFIggno+5VAmijFYA1AwhzEgAKcJsMUwIMVGKPH2NnZ7ZFDBKYImQYAuO5YIMgk39gAAAAASUVORK5CYII=) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-delete {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAFhJREFUKBVjYCARMKKrNzEx2fr//38vkDgjI+O2M2fOeCOrAWtAVoQsicyGaWZCFsTHBtr6H588Tjm4H4yNjfGacPbsWbBaop0Es3JYaQBFDMxjWOitMDEA3EEZfFEISwUAAAAASUVORK5CYII=) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-arrow-solid-top {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAIFJREFUKBVjYBj+gBmXF2NiYiTV1dV5rl279gWbGiZsgg0NDSw/f/5cCZRbBWJjU4PVRjExsR6g4nAgln/z5g3v1atXd6JrxtAYHh4e+v///z4khZa6urrXgJqvIYkxMCJzgJo0//37dwooxoMsDmR/YWJiMlu5cuV1NPFRLrYQAADMVCaUtbG7XwAAAABJRU5ErkJggg==) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-milestone {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAGFJREFUKBVjYCARMILU/3dw+I+hj5FxG+P+/d7o4rg1IKtE0syELI6T/f+/F0yOOA0w1UCa9hpYkGxjYDxwABwIILH/jo5bGWBuZ2TcClOHogEmCKKxBSlInPZ+ANlCEgAA37EU4AHbBQUAAAAASUVORK5CYII=) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-arrow-left {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAYAAAAvZezQAAAAAXNSR0IArs4c6QAAAFZJREFUCB1jZICCyspK83///hUxgvhVVVV6f//+3c3ExJTMVFNTowqU2cHMzJzf3t6+hen379/zgIp2t7W1rQCpZmJlZU0C0q5AbREgAQwzwAIgGZgtADMCJqH/QyvhAAAAAElFTkSuQmCC) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-arrow-right {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAHCAYAAAAvZezQAAAAAXNSR0IArs4c6QAAAFxJREFUCB1jKC8vX1lZWWnOAAVMQLD4379/m6qqqvRAYowgAsiJAAr2sbCw2IMFQIIVFRUL////r8SCpMKVlZXVnhFooA9Q+VxmZmbXtra2S0xATizQYD8QB6QaAJMLJ9BqE9yTAAAAAElFTkSuQmCC) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-handle-y {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAICAMAAADp7a43AAAACVBMVEX///////////+OSuX+AAAAA3RSTlMrQJG5H4EIAAAAEUlEQVR4AWNgYmRiZABB/CwAAtgAIUTUNkMAAAAASUVORK5CYII=) center no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-checkbox-normal {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAADpJREFUKBVjPHfu3O5///65MJAAmJiY9jCcOXPmP6kApIeJBItQlI5qRAkOVM5o4KCGBwqPkcxEvhsAbzRE+Jhb9IwAAAAASUVORK5CYII=) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-checkbox-checked {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAMBJREFUKBWVkjEOwjAMRe2WgZW7IIHEDdhghhuwcQ42rlJugAQS54Cxa5cq1QM5TUpByZfS2j9+dlJVt/tX5ZxbS4ZU9VLkQvSHKTIGRaVJYFmKrBbTCJxE2UgCdDzMZDkHrOV6b95V0US6UmgKodujEZbJg0B0ZgEModO5lrY1TMQf1TpyJGBEjD+E2NPN7ukIUDiF/BfEXgRiGEw8NgkffYGYwCi808fpn/6OvfUfsDr/Vc1IfRf8sKnFVqeiVQfDu0tf/nWH9gAAAABJRU5ErkJggg==) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-ic-dropdown-arrow {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYBgFOEOAEVkmPDxc89+/f6eAYjzI4kD2FyYmJrOVK1deh4kzwRggGiQBVJCELAZig8SQNYHEmEEEMrh69eo1HR0dfqCYJUickZGxf9WqVf3IakBsFBthklpaWmVA9mEQhrJhUoTp0NBQCRAmrHL4qgAAuu4cWZOZIGsAAAAASUVORK5CYII=) no-repeat;
}

.toastui-calendar-icon.toastui-calendar-open.toastui-calendar-ic-dropdown-arrow {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAAAXNSR0IArs4c6QAAAIFJREFUKBVjYBj+gBmXF2NiYiTV1dV5rl279gWbGiZsgg0NDSw/f/5cCZRbBWJjU4PVRjExsR6g4nAgln/z5g3v1atXd6JrxtAYHh4e+v///z4khZa6urrXgJqvIYkxMCJzgJo0//37dwooxoMsDmR/YWJiMlu5cuV1NPFRLrYQAADMVCaUtbG7XwAAAABJRU5ErkJggg==) no-repeat;
}

.toastui-calendar-ic-location-b {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAOZJREFUKBWVUT0KwjAUbkzGTuJWPYNDpV0cXD2ETuIRBK+gs4ubp3BwcXBp6eINBKWDgydoid9X8oKCggYeee/7S9IGwZ9LverTNO3Wdb2y1o6IK6WOWutFlmU30XmDE58hbgvpTA+Y+mJqCemS20jdG2N6LPYMICc6b5BrIG3ONBZ7CoVj7w0cfllGRDj+gKQpjt/iPU0ye/LkROcNANaoCUzjqqquIsBuHddAWoiyLO9RFHUwJ4JxR/qmKIqdYG9vCMNwCeIiJHuHecj/B0GSJBng7ifO+ErDPM8L4b7ucRzPWJ8ET1E7YC7tmi9qAAAAAElFTkSuQmCC) no-repeat;
  top: -4px;
}

.toastui-calendar-ic-state-b {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAHlJREFUKBVjYCARMCKrNzEx8QTyZ/3//18GJM7IyPgESKWdOXNmO4gPAkwQCk6CFQMVNoIwVOMsuCw6w9jY+D8Iw8TR+SBxsJOATtkKNM0LphAbDbRxG9Bp3mAnEVIMMgCmBt0P2AxHERusGkAhgOJQ7Jyt2IUJiAIAwwIn24FgmhkAAAAASUVORK5CYII=) no-repeat;
  top: -4px;
}

.toastui-calendar-ic-repeat-b {
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAAXNSR0IArs4c6QAAAQpJREFUKBVjYCARMCKrNzU1tf/3718lUMwQiP8yMjKeYWJi6j516tRhExOThjNnzjTANQAFqv///98CVHQPSO8A0ixATa5AtjyQPgDETmfPngULMpiZmbn//fu3BSg4B6ggCyjxG8hm8PT0ZH/9+vUJoJgTiA8CTCACqDgXaOJ9Xl7eTJhikDhQcSVQsQGITT8A9rSxsfF/mJVApzWCQgPGd3BwYPny5cstoNOuAZ3rAwoJOAAqviAqKtoOEwAaxPr58+dpQL4iEGeAxJFt2AfkOwA1PQTSu4Em/gGyPYC0EpCuAdraCtIADiWgQCPQOmdmZmYHoNgVoCJfIB0CpG8DI84BphgoRjoAAAzgdELI91E5AAAAAElFTkSuQmCC) no-repeat;
  top: -4px;
}

.toastui-calendar-timegrid-time-column {
  font-size: 11px;
  height: 100%;
}

.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-hour-rows {
  display: inline-block;
  position: relative;
  height: 100%;
}

.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time {
  text-align: right;
  position: absolute;
  right: 5px;
  color: #333;
}

.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time.toastui-calendar-timegrid-time-past {
  font-weight: normal;
}

.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time.toastui-calendar-timegrid-time-first {
  line-height: normal;
  visibility: hidden;
}

.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time.toastui-calendar-timegrid-time-last {
  height: 0;
  visibility: hidden;
}

.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time .toastui-calendar-timegrid-time-label,
.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time span {
  transform: translateY(-50%);
  position: absolute;
  right: 0;
}

.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time .toastui-calendar-timegrid-day-difference {
  position: absolute;
  right: 0;
  bottom: 100%;
}

.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-time-hidden {
  visibility: hidden;
}

.toastui-calendar-timegrid-time-column .toastui-calendar-timegrid-current-time {
  position: absolute;
  text-align: right;
  right: 5px;
  font-size: 11px;
  font-weight: normal;
  transform: translateY(-50%);
}

.toastui-calendar-timezone-labels-slot {
  display: table;
  table-layout: fixed;
  position: absolute;
  height: 40px;
  border-bottom: 1px solid #e9e9e9;
  background-color: #fff;
}

.toastui-calendar-timezone-labels-slot .toastui-calendar-timegrid-timezone-label {
  display: table-cell;
  background-color: #fff;
  font-size: 11px;
  border-right: 1px solid #e5e5e5;
  vertical-align: middle;
  padding-right: 5px;
  text-align: right;
}

.toastui-calendar-timezone-labels-slot .toastui-calendar-timegrid-timezone-collapse-button {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 10px;
  border: 1px solid #dddddd;
  border-left: none;
  background: transparent;
  cursor: pointer;
}

.toastui-calendar-timezone-labels-slot .toastui-calendar-timegrid-timezone-collapse-button .toastui-calendar-icon {
  width: 4px;
  height: 7px;
  transform: translateX(-50%);
}

.toastui-calendar-column {
  position: relative;
}

.toastui-calendar-column .toastui-calendar-gridline-half {
  position: absolute;
  width: 100%;
}

.toastui-calendar-column .toastui-calendar-grid-selection {
  position: absolute;
  right: 10px;
  left: 1px;
  padding: 3px;
}

.toastui-calendar-column .toastui-calendar-grid-selection .toastui-calendar-grid-selection-label {
  font-size: 11px;
  font-weight: bold;
}

.toastui-calendar-column .toastui-calendar-events {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

.toastui-calendar-panel.toastui-calendar-time {
  overflow-y: auto;
}

.toastui-calendar-timegrid {
  user-select: none;
  position: relative;
  height: 200%;
  min-height: 900px;
}

.toastui-calendar-timegrid .toastui-calendar-timegrid-scroll-area {
  position: relative;
  height: 100%;
}

.toastui-calendar-timegrid .toastui-calendar-columns {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-gridline-half {
  position: absolute;
  width: 100%;
}

.toastui-calendar-timegrid .toastui-calendar-columns .toastui-calendar-column {
  display: inline-block;
  height: 100%;
}

.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator {
  position: absolute;
  left: 0;
  right: 0;
}

.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-left {
  position: absolute;
}

.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-marker {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin: -4px 0 0 -5px;
}

.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-today {
  position: absolute;
}

.toastui-calendar-timegrid .toastui-calendar-timegrid-now-indicator .toastui-calendar-timegrid-now-indicator-right {
  position: absolute;
  right: 0;
}



.toastui-calendar-event-background { position: absolute; }

.toastui-calendar-event-time {
  position: absolute;
  overflow: hidden;
  cursor: pointer;
}

.toastui-calendar-event-time .toastui-calendar-travel-time,
.toastui-calendar-event-time .toastui-calendar-event-time-content {
  overflow: hidden;
  padding: 1px 0 0 3px;
  font-size: 12px;
}

.toastui-calendar-resize-handler-x {
  position: absolute;
  right: 0;
  bottom: 1px;
  left: 0;
  height: 8px;
  text-align: center;
  color: #fff;
  cursor: row-resize;
  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAECAMAAACEE47CAAAACVBMVEX///////////+OSuX+AAAAA3RSTlMrQJG5H4EIAAAAEUlEQVR4AWNgYoRABhjEFAEAArQAIcHQcPsAAAAASUVORK5CYII=) no-repeat center bottom;
}

.toastui-calendar-weekday-event-title {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 3px;
  font-weight: bold;
  font-size: 12px;
}

.toastui-calendar-weekday-event-dot {
  position: relative;
  top: 8px;
  float: left;
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.toastui-calendar-weekday-event-dot + .toastui-calendar-weekday-event-title {
  color: #333;
}

.toastui-calendar-weekday-resize-handle {
  position: absolute;
  top: 0;
  right: 5px;
}

.toastui-calendar-weekday-resize-handle.toastui-calendar-handle-y {
  cursor: col-resize;
}

.toastui-calendar-grid-cell-date .toastui-calendar-weekday-grid-date.toastui-calendar-weekday-grid-date-decorator {
  display: inline-block;
  width: 26px;
  height: 26px;
  line-height: 26px;
  text-align: center;
  background-color: #135de6;
  border-radius: 50%;
  font-weight: bold;
  margin-left: 2px;
}



.toastui-calendar-panel-title {
  display: table;
  float: left;
  height: 100%;
  padding-right: 5px;
}

.toastui-calendar-panel-title .toastui-calendar-left-content {
  display: table-cell;
  vertical-align: middle;
  text-align: right;
  font-size: 11px;
}

.toastui-calendar-panel-grid-wrapper {
  position: relative;
  overflow-y: hidden;
}

.toastui-calendar-panel .toastui-calendar-panel-title,
.toastui-calendar-panel .toastui-calendar-panel-grid-wrapper {
  height: 100%;
}

.toastui-calendar-allday-panel {
  position: relative;
  height: 100%;
  overflow-y: hidden;
}

.toastui-calendar-allday-panel .toastui-calendar-grid-selection {
  position: absolute;
  right: 10px;
  z-index: 1;
  top: 0;
}

.toastui-calendar-panel-grid {
  height: 100%;
  position: absolute;
}

.toastui-calendar-panel-event-wrapper {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow-y: scroll;
}

.toastui-calendar-panel-event-wrapper .toastui-calendar-weekday-event-block {
  position: absolute;
}

.toastui-calendar-panel-event-wrapper .toastui-calendar-weekday-event {
  position: relative;
  margin: 0 10px 0 1px;
  cursor: pointer;
  border-left-style: solid;
  border-left-width: 3px;

  height: 18px;
  border-radius: 0;
  color: #9a1313;
  background-color: rgba(218, 27, 27, 0.2);
  border-color: #da1b1b;
}

.toastui-calendar-panel-event-wrapper .toastui-calendar-weekday-exceed-right .toastui-calendar-weekday-event {
  margin-right: 0;
}

.toastui-calendar-panel-event {
  position: absolute;
  border: 1px solid #333;
}

.toastui-calendar-weekday-exceed-in-week {
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 1;
  margin-right: 5px;
  font-size: 12px;
  line-height: 14px;
  cursor: pointer;
  padding: 1px 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #000;
}

.toastui-calendar-collapse-btn-icon {
  display: inline-block;
  vertical-align: middle;
  margin: -1px -14px 0 -4px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 5px solid #4f5959;
}

.toastui-calendar-day-view .toastui-calendar-panel:not(.toastui-calendar-time),
.toastui-calendar-week-view .toastui-calendar-panel:not(.toastui-calendar-time) {
  overflow-y: scroll;
}



.toastui-calendar-floating-layer {
  z-index: 1;
}

.toastui-calendar-floating-layer * {
  box-sizing: border-box;
}

.toastui-calendar-popup-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.toastui-calendar-popup-container {
  position: absolute;
  font-weight: 2.5;
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
  clear: both;
  z-index: 2;
}

.toastui-calendar-popup-section {
  font-size: 0;
  min-height: 40px;
}

.toastui-calendar-popup-button.toastui-calendar-popup-close {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #fff;
  padding: 0;
  border: none;
}

.toastui-calendar-popup-button.toastui-calendar-popup-confirm {
  float: right;
  width: 96px;
  height: 36px;
  border-radius: 40px;
  background-color: #ff6618;
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  border: none;
}

.toastui-calendar-dropdown-menu {
  position: absolute;
  width: 100%;
  top: 31px;
  z-index: 1;
  padding: 4px 0;
  background-color: #fff;
  border: 1px solid #d5d5d5;
  border-top: none;
  border-radius: 0 0 2px 2px;
}

.toastui-calendar-dropdown-menu.toastui-calendar-open {
  display: block;
}

.toastui-calendar-dropdown-menu-item {
  width: 100%;
  height: 30px;
  border: none;
  padding: 0 9px 0 12px;
  font-size: 0;
  border-radius: 2px;
  cursor: pointer;
}

.toastui-calendar-popup-arrow-border,
.toastui-calendar-popup-arrow-fill {
  position: absolute;
}

.toastui-calendar-see-more-container {
  display: block;
  position: absolute;
  z-index: 1;
}

.toastui-calendar-see-more {
  height: inherit;
  padding: 5px;
}

.toastui-calendar-more-title-date {
  font-size: 23px;
  color: #333;
}

.toastui-calendar-more-title-day {
  font-size: 12px;
  color: #333;
}

.toastui-calendar-month-more-list {
  overflow: auto;
  padding: 0 17px;
}

.toastui-calendar-see-more-header {
  position: relative;
  border-bottom: none;
}

.toastui-calendar-form-container {
  min-width: 474px;
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
  background-color: #fff;
  border: 1px solid #d5d5d5;
  padding: 17px;
  border-radius: 2px;
}

.toastui-calendar-form-container .toastui-calendar-hidden-input {
  display: none;
}

.toastui-calendar-form-container .toastui-calendar-grid-selection {
  font-size: 11px;
  font-weight: bold;
}

.toastui-calendar-popup-section-item {
  height: 32px;
  padding: 0 9px 0 12px;
  border: 1px solid #d5d5d5;
  display: inline-block;
  font-size: 0;
  border-radius: 2px;
}

.toastui-calendar-popup-section-item input {
  border: none;
  height: 30px;
  outline: none;
  display: inline-block;
}

.toastui-calendar-popup-section-item .toastui-calendar-content {
  text-align: left;
  display: inline-block;
  font-size: 12px;
  vertical-align: middle;
  position: relative;
  padding-left: 8px;
}

.toastui-calendar-popup-date-picker .toastui-calendar-content {
  max-width: 125px;
}

.toastui-calendar-dropdown-section {
  position: relative;
}

.toastui-calendar-dropdown-section.toastui-calendar-calendar-section {
  width: 176px;
}

.toastui-calendar-dropdown-section .toastui-calendar-content {
  line-height: 30px;
}

.toastui-calendar-popup-section-title input {
  width: 365px;
}

.toastui-calendar-dot {
  border-radius: 8px;
  width: 12px;
  height: 12px;
  margin: 1px;
}

.toastui-calendar-content.toastui-calendar-event-calendar {
  width: 125px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  top: -1px;
}

.toastui-calendar-popup-section-location .toastui-calendar-content {
  width: 400px;
}

.toastui-calendar-popup-section-allday {
  border: none;
  padding: 0 0 0 8px;
  cursor: pointer;
}

.toastui-calendar-popup-section-allday .toastui-calendar-ic-checkbox-normal {
  display: inline-block;
  cursor: pointer;
  line-height: 14px;
  margin: 0;
  width: 14px;
  height: 14px;
  vertical-align: middle;
}

.toastui-calendar-popup-section-allday .toastui-calendar-content {
  padding-left: 4px;
}

.toastui-calendar-popup-date-picker {
  width: 176px;
}

.toastui-calendar-datepicker-container > div {
  z-index: 1;
}

.toastui-calendar-popup-date-dash {
  font-size: 12px;
  color: #d5d5d5;
  height: 32px;
  padding: 0 4px;
  vertical-align: middle;
}

.toastui-calendar-popup-button {
  background: #fff;
  border: 1px solid #d5d5d5;
  border-radius: 2px;
  text-align: center;
  outline: none;
  font-size: 12px;
  cursor: pointer;
  color: #333;
}

.toastui-calendar-popup-button.toastui-calendar-popup-section-private {
  height: 32px;
  padding: 8px;
  font-size: 0;
  margin-left: 4px;
}

.toastui-calendar-popup-button .toastui-calendar-event-state {
  width: 58px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.toastui-calendar-dropdown-section.toastui-calendar-state-section {
  width: 109px;
}

.toastui-calendar-dropdown-section.toastui-calendar-state-section .toastui-calendar-popup-button {
  width: 100%;
}

.toastui-calendar-state-section .toastui-calendar-content {
  width: 58px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.toastui-calendar-popup-section-item.toastui-calendar-dropdown-menu-item {
  display: block;
  height: 30px;
  border: none;
  cursor: pointer;
}

.toastui-calendar-dropdown-menu-item .toastui-calendar-content {
  display: inline-block;
  position: relative;
  padding-left: 8px;
  text-align: left;
  font-size: 12px;
  vertical-align: middle;
}

.toastui-calendar-popup-section-item.toastui-calendar-popup-button {
  height: 32px;
  font-size: 0;
  top: -1px;
}

.toastui-calendar-popup-arrow.toastui-calendar-top .toastui-calendar-popup-arrow-border {
  border-top: none;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #d5d5d5;
  border-left: 8px solid transparent;
  left: calc(50% - 8px);
  top: -7px;
}

.toastui-calendar-popup-arrow.toastui-calendar-top .toastui-calendar-popup-arrow-fill {
  border-top: none;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #fff;
  border-left: 7px solid transparent;
  left: -7px;
  top: 1px;
}

.toastui-calendar-popup-arrow.toastui-calendar-bottom .toastui-calendar-popup-arrow-border {
  border-top: 8px solid #d5d5d5;
  border-right: 8px solid transparent;
  border-bottom: none;
  border-left: 8px solid transparent;
  bottom: -7px;
}

.toastui-calendar-popup-arrow.toastui-calendar-bottom .toastui-calendar-popup-arrow-fill {
  border-top: 7px solid #fff;
  border-right: 7px solid transparent;
  border-bottom: none;
  border-left: 7px solid transparent;
  left: -7px;
  bottom: 1px;
}

.toastui-calendar-detail-container {
  width: 301px;
  min-width: 301px;
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 10%);
  background-color: #fff;
  border: solid 1px #d5d5d5;
  padding: 17px 17px 0;
  border-radius: 2px;
}

.toastui-calendar-detail-container .toastui-calendar-section-header {
  margin-bottom: 6px;
}

.toastui-calendar-detail-container .toastui-calendar-section-detail {
  margin-bottom: 16px;
}

.toastui-calendar-detail-container .toastui-calendar-section-button {
  border-top: 1px solid #e5e5e5;
  font-size: 0;
}

.toastui-calendar-detail-container .toastui-calendar-content {
  height: 24px;
  font-size: 12px;
  line-height: 2;
}

.toastui-calendar-detail-container .toastui-calendar-icon {
  width: 12px;
  height: 12px;
  background-size: 12px;
  position: relative;
  margin-right: 8px;
}

.toastui-calendar-detail-container .toastui-calendar-calendar-dot {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  top: -4px;
  margin-right: 10px;
}

.toastui-calendar-event-title {
  font-size: 15px;
  font-weight: bold;
  line-height: 1.6;
  word-break: break-all;
}

.toastui-calendar-detail-item-indent {
  text-indent: -20px;
  padding-left: 20px;
}

.toastui-calendar-edit-button,
.toastui-calendar-delete-button {
  display: inline-block;
  padding: 7px 9px 11px 9px;
  width: calc(50% - 1px);
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}

.toastui-calendar-vertical-line {
  background: #e5e5e5;
  width: 1px;
  height: 14px;
  vertical-align: middle;
  display: inline-block;
  margin-top: -7px;
}

.toastui-calendar-section-button .toastui-calendar-icon {
  margin-right: 4px;
  top: -3px;
}

.toastui-calendar-section-button .toastui-calendar-content {
  position: relative;
  top: 2px;
}

.toastui-calendar-popup-top-line {
  position: absolute;
  border-radius: 2px 2px 0 0;
  width: 100%;
  height: 4px;
  border: none;
  top: 0;
}

.toastui-calendar-popup-arrow.toastui-calendar-left .toastui-calendar-popup-arrow-border {
  border-top: 8px solid transparent;
  border-right: 8px solid #d5d5d5;
  border-bottom: 8px solid transparent;
  border-left: none;
  left: -7px;
}

.toastui-calendar-popup-arrow.toastui-calendar-left .toastui-calendar-popup-arrow-fill {
  border-top: 7px solid transparent;
  border-right: 7px solid #fff;
  border-bottom: 7px solid transparent;
  border-left: none;
  top: -7px;
  left: 1px;
}

.toastui-calendar-popup-arrow.toastui-calendar-right .toastui-calendar-popup-arrow-border {
  border-top: 8px solid transparent;
  border-right: none;
  border-bottom: 8px solid transparent;
  border-left: 8px solid #d5d5d5;
  right: -7px;
}

.toastui-calendar-popup-arrow.toastui-calendar-right .toastui-calendar-popup-arrow-fill {
  border-top: 7px solid transparent;
  border-right: none;
  border-bottom: 7px solid transparent;
  border-left: 7px solid #fff;
  top: -7px;
  right: 1px;
}



.toastui-calendar-day-names {
  position: relative;
}

.toastui-calendar-day-name-container {
  position: relative;
}

.toastui-calendar-day-name-item {
  position: absolute;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
  padding: 0 10px;
}

.toastui-calendar-day-name-item.toastui-calendar-week {
  line-height: 38px;
  height: 42px;
}

.toastui-calendar-day-name-item.toastui-calendar-month {
  line-height: 31px;
  height: 31px;
}

.toastui-calendar-day-view-day-names,
.toastui-calendar-week-view-day-names {
  border-bottom: 1px solid #e5e5e5;
}

.toastui-calendar-day-names.toastui-calendar-week {
  height: 42px;
  padding-left: 0;
  text-align: left;
}

.toastui-calendar-day-names.toastui-calendar-month {
  height: 31px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: normal;
  text-align: left;
}

.toastui-calendar-day-name__date {
  font-size: 26px;
}

.toastui-calendar-day-name__name {
  font-size: 12px;
}

.toastui-calendar-layout.toastui-calendar-month {
  height: 100%;
}

.toastui-calendar-month .toastui-calendar-day-names {
  /* from constant MONTH_DAY_NAME_HEIGHT */
  height: 31px;
}

.toastui-calendar-month .toastui-calendar-month-daygrid {
  position: relative;
  /* modify this if you want to change height of day names */
  height: calc(100% - 31px);
}

.toastui-calendar-month-week-item {
  position: relative;
}

.toastui-calendar-weekday-grid {
  position: absolute;
  min-height: inherit;
  width: 100%;
  height: 100%;
}

.toastui-calendar-daygrid-cell {
  position: absolute;
  height: 100%;
  min-height: inherit;
  padding: 3px 0;
}

.toastui-calendar-daygrid-cell + .toastui-calendar-daygrid-cell {
  border-left: 1px solid #e5e5e5;
}

.toastui-calendar-grid-cell-date {
  display: inline-block;
  width: 27px;
  height: 27px;
  line-height: 1.7;
  text-align: center;
}

.toastui-calendar-grid-cell-footer {
  position: absolute;
  width: 100%;
  bottom: 0;
}

.toastui-calendar-grid-cell-more-events {
  float: right;
  height: 27px;
  line-height: 27px;
  padding: 0 5px;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  color: #aaa;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.toastui-calendar-weekday-events {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  font-size: 12px;
}

/* TODO: define this class in more common place */
.toastui-calendar-weekday-event {
  cursor: pointer;
}

.toastui-calendar-weekday {
  height: 100%;
}

.toastui-calendar-weekday .toastui-calendar-grid-selection {
  position: absolute;
}





/* ============================================================
   Toast notifications

   Markup lives in app/views/shared/_toast_flash.html.erb and
   app/views/shared/_toast.html.erb; behaviour in app/javascript/toasts.js.

   Deliberately written as plain CSS rather than Tailwind utilities so the
   animations survive a Tailwind purge and can be reused by toasts that are
   built in JavaScript (window.HBSToast.show).
   ============================================================ */

.hbs-toast-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: min(24rem, calc(100vw - 2rem));
  pointer-events: none;
}

@media (max-width: 640px) {
  .hbs-toast-stack {
    top: 0.75rem;
    right: 0.75rem;
    left: 0.75rem;
    width: auto;
  }
}

.hbs-toast {
  --hbs-toast-accent: #173d6c;
  --hbs-toast-accent-soft: #e6edf5;
  --hbs-toast-duration: 5000ms;

  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 0.75rem;
  padding: 0.875rem 1rem;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 0.75rem;
  background-color: #fff;
  box-shadow:
    0 10px 24px -6px rgba(15, 23, 42, 0.18),
    0 4px 8px -4px rgba(15, 23, 42, 0.1);
  pointer-events: auto;

  /* Entry is pure CSS so a toast inserted by a Turbo Stream animates in even
     when the tab is backgrounded and JS animation frames are throttled. */
  animation: hbs-toast-in 280ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  transition:
    opacity 260ms cubic-bezier(0.16, 1, 0.3, 1),
    transform 260ms cubic-bezier(0.16, 1, 0.3, 1),
    height 220ms cubic-bezier(0.4, 0, 0.2, 1),
    margin 220ms cubic-bezier(0.4, 0, 0.2, 1),
    padding 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hbs-toast:last-child {
  margin-bottom: 0;
}

@keyframes hbs-toast-in {
  from {
    opacity: 0;
    transform: translateX(1.75rem) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.hbs-toast--leaving {
  opacity: 0;
  transform: translateX(1.75rem) scale(0.97);
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-top-width: 0;
  border-bottom-width: 0;
}

/* Accent rail down the leading edge */
.hbs-toast::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background-color: var(--hbs-toast-accent);
}

.hbs-toast__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  margin-left: 0.125rem;
  border-radius: 9999px;
  background-color: var(--hbs-toast-accent-soft);
  color: var(--hbs-toast-accent);
}

.hbs-toast__icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.hbs-toast__body {
  flex: 1 1 auto;
  min-width: 0;
  padding-top: 0.125rem;
}

.hbs-toast__title {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25rem;
  color: #111827;
}

.hbs-toast__message {
  margin: 0.125rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: #4b5563;
  overflow-wrap: anywhere;
}

.hbs-toast__close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin: -0.125rem -0.25rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 0.375rem;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.hbs-toast__close:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.hbs-toast__close:focus-visible {
  outline: 2px solid var(--hbs-toast-accent);
  outline-offset: 1px;
}

.hbs-toast__close svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* Countdown bar — pauses while the toast is hovered or focused */
.hbs-toast__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background-color: var(--hbs-toast-accent);
  opacity: 0.9;
  transform-origin: left center;
  animation: hbs-toast-progress var(--hbs-toast-duration) linear forwards;
}

.hbs-toast--paused .hbs-toast__progress,
.hbs-toast:hover .hbs-toast__progress {
  animation-play-state: paused;
}

.hbs-toast--leaving .hbs-toast__progress {
  opacity: 0;
}

@keyframes hbs-toast-progress {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}

/* Type accents */
.hbs-toast--success {
  --hbs-toast-accent: #059669;
  --hbs-toast-accent-soft: #ecfdf5;
}

.hbs-toast--error {
  --hbs-toast-accent: #dc2626;
  --hbs-toast-accent-soft: #fef2f2;
}

.hbs-toast--warning {
  --hbs-toast-accent: #d97706;
  --hbs-toast-accent-soft: #fffbeb;
}

.hbs-toast--info {
  --hbs-toast-accent: #173d6c;
  --hbs-toast-accent-soft: #e6edf5;
}

@media (prefers-reduced-motion: reduce) {
  .hbs-toast {
    animation: none;
    transition-duration: 1ms;
    transform: none;
  }

  .hbs-toast--leaving {
    transform: none;
  }

  .hbs-toast__progress {
    animation: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the
 * bottom of the compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS files in this directory.
 *


 *
 * dark_mode.css is stubbed out of that tree and linked on its own by the
 * application layout. It overrides the very utilities this file overrides
 * below, so it has to load after this file rather than ahead of it — and
 * require_tree would put it ahead.

 */

:root {
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-inter: 'Inter', sans-serif;
  --primary-blue: #173D6C;
  --primary-blue-50: #173D6C80;
  --primary-green: #2FAD6F;
  --primary-green-50: #2FAD6F80;
}

* {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji' !important;
}

html { 
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji' !important;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji' !important;
}

input, textarea, select, button {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji' !important;
}

/* Button Styles - Blue with half opacity on hover */
.bg-blue-600,
.bg-indigo-600 {
  background-color: var(--primary-blue) !important;
  transition: background-color 0.2s ease;
}

.bg-blue-600:hover,
.bg-indigo-600:hover {
  background-color: var(--primary-blue-50) !important;
}

/* Override Tailwind hover classes */
.hover\:bg-blue-700:hover,
.hover\:bg-indigo-700:hover {
  background-color: var(--primary-blue-50) !important;
}

/* Clickable Links - Blue, green on hover, half opacity green when selected */
a.text-blue-600,
a.text-indigo-600,
a:not(.no-link-style):not(.bg-blue-600):not(.bg-indigo-600):not(button):not([role="button"]):not(.text-gray):not(.text-white):not(.text-red):not(.text-yellow) {
  color: var(--primary-blue) !important;
  transition: color 0.2s ease;
}

a.text-blue-600:hover,
a.text-indigo-600:hover,
a:not(.no-link-style):not(.bg-blue-600):not(.bg-indigo-600):not(button):not([role="button"]):not(.text-gray):not(.text-white):not(.text-red):not(.text-yellow):hover {
  color: var(--primary-green) !important;
}

/* Override Tailwind hover text classes */
a.hover\:text-blue-800:hover,
a.hover\:text-indigo-800:hover {
  color: var(--primary-green) !important;
}

a.text-blue-600:active,
a.text-blue-600.active,
a.text-blue-600[aria-current="page"],
a.text-indigo-600:active,
a.text-indigo-600.active,
a.text-indigo-600[aria-current="page"],
a:not(.no-link-style):not(.bg-blue-600):not(.bg-indigo-600):not(button):not([role="button"]):not(.text-gray):not(.text-white):not(.text-red):not(.text-yellow):active,
a:not(.no-link-style):not(.bg-blue-600):not(.bg-indigo-600):not(button):not([role="button"]):not(.text-gray):not(.text-white):not(.text-red):not(.text-yellow).active,
a:not(.no-link-style):not(.bg-blue-600):not(.bg-indigo-600):not(button):not([role="button"]):not(.text-gray):not(.text-white):not(.text-red):not(.text-yellow)[aria-current="page"] {
  color: var(--primary-green-50) !important;
}

/* Sidebar Links - Blue, follow same rules */
aside nav a,
aside nav a:link {
  color: var(--primary-blue) !important;
  transition: color 0.2s ease;
}

aside nav a:hover {
  color: var(--primary-green) !important;
}

aside nav a.active,
aside nav a[aria-current="page"],
aside nav a.bg-indigo-50 {
  color: var(--primary-green-50) !important;
  background-color: rgba(47, 173, 111, 0.1) !important;
}

/* ============================================================
   Collapsible sidebar (admin + tenant)

   Two different behaviours share one #app-sidebar:

     - desktop (>= md): a docked rail that collapses to a 12px stub
     - mobile  (<  md): an off-canvas drawer opened from the topbar "-" button

   They must not overlap. `.sidebar-collapsed` used to apply at every width, so
   a collapsed preference turned the mobile drawer into a 12px sliver and made
   the topbar toggle look dead. Every collapse rule below is therefore scoped to
   the desktop breakpoint.

   The breakpoints are expressed in rem to line up exactly with Tailwind's `md:`
   (48rem) used by the markup; mixing px and rem here leaves a dead band when
   the browser's root font size is not 16px.
   ============================================================ */

#app-sidebar {
  overflow: visible;
  transition: width 200ms ease;
  z-index: 40;
}

#app-main {
  transition: margin-left 200ms ease;
}

#app-sidebar [data-sidebar-content] {
  overflow: hidden;
}

/* Mobile off-canvas sidebar */
@media (max-width: 47.9375rem) {
  #app-sidebar {
    display: flex !important;
    width: min(80vw, 320px);
    transform: translateX(-110%);
    transition: transform 200ms ease;
    z-index: 50;
  }

  .mobile-sidebar-open #app-sidebar {
    transform: translateX(0);
  }

  /* The scrim colour is plain CSS rather than the `bg-black/30` utility: that
     utility is not in the compiled Tailwind build, which left the backdrop
     fully transparent. */
  #mobile-sidebar-overlay {
    background-color: rgb(0 0 0 / 0.3);
    transition: opacity 200ms ease;
  }

  .mobile-sidebar-open #mobile-sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Desktop collapse rail */
@media (min-width: 48rem) {
  .sidebar-collapsing #app-sidebar [data-sidebar-content],
  .sidebar-collapsed #app-sidebar [data-sidebar-content] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .sidebar-collapsed #app-sidebar {
    width: 12px !important;
  }

  #sidebar-collapse-toggle {
    right: 0;
    transform: translateX(50%);
    transition: transform 200ms ease;
  }

  .sidebar-collapsed #sidebar-collapse-toggle {
    transform: translateX(0);
  }

  .sidebar-collapsed #app-main {
    margin-left: 12px !important;
  }
}