body {
  background-color: #f7f7f4;
}
.brand-wordmark {
  height: 34px;
  width: auto;
  display: block;
}
.brand-wordmark-lg {
  height: 56px;
  width: auto;
  display: block;
}
.login-brand-banner {
  background-color: #198754;
  border-radius: 0.75rem 0.75rem 0 0;
  padding: 1.75rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.card {
  border-radius: 0.75rem;
}
.animal-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0.75rem 0.75rem 0 0;
  background: #e9e9e4;
}
.animal-photo-placeholder {
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #b7b7ad;
  background: #e9e9e4;
  border-radius: 0.75rem 0.75rem 0 0;
}
.task-overdue {
  border-left: 5px solid #dc3545;
}
.task-due-soon {
  border-left: 5px solid #ffc107;
}
.task-upcoming {
  border-left: 5px solid #6c757d;
}
.badge-cert-general { background-color: #6c757d; }
.badge-cert-med { background-color: #fd7e14; }
.badge-cert-full { background-color: #198754; }
.checklist-photo {
  max-width: 100%;
  border-radius: 0.5rem;
}

/* Full, uncropped photo on an animal's own profile page — the whole
   animal should always be visible here, letterboxed if the photo's
   proportions don't match the frame. */
.animal-photo-full-wrap {
  width: 100%;
  background: #e9e9e4;
  border-radius: 0.75rem;
  overflow: hidden;
  /* Don't use flex + height:100% here — on iOS Safari the child img
     resolves height:100% against a zero intrinsic height and collapses.
     Let the img size itself naturally instead. */
}
.animal-photo-full {
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  display: block;
  /* On very short screens (phone landscape) cap at 55vh so the photo
     doesn't push the rest of the profile off screen. */
  max-height: min(420px, 55vh);
}

/* Focal-point picker used on the animal form: click the photo to mark
   where the animal is, so cropped thumbnails elsewhere stay centered
   on it instead of a fixed frame chopping off a head or tail. */
.focal-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: crosshair;
  line-height: 0;
}
.focal-img {
  max-width: 100%;
  max-height: 320px;
  display: block;
  border-radius: 0.5rem;
  border: 1px solid #dee2e6;
}
.focal-marker {
  position: absolute;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  margin-top: -11px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: rgba(220, 53, 69, 0.85);
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
/* habitatHQ Assistant — floating widget (bubble + popup panel), present on
   every logged-in page via base.html. Fixed to the lower-right corner,
   above everything else on the page (including the sticky navbar). */
.chat-widget {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1050;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.chat-bubble-btn {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  background: #198754;
  color: #fff;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-bubble-btn:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
}
.chat-panel {
  /* Fixed width — never wider than the viewport */
  width: 360px;
  max-width: calc(100vw - 2rem);
  /* Height: leave room for bubble button + gap */
  height: 500px;
  max-height: calc(100vh - 7rem);
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.28);
  margin-bottom: 0.75rem;
  display: flex;
  flex-direction: column;
  /* Critical: clip children — nothing escapes the panel width */
  overflow: hidden;
  animation: chatPanelIn 0.15s ease-out;
  /* JS sets --kb-offset (px) when the software keyboard is visible */
  transition: transform 0.15s ease;
  transform: translateY(calc(-1 * var(--kb-offset, 0px)));
}
@keyframes chatPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}
.chat-panel-header {
  background: #198754;
  color: #fff;
  padding: 0.65rem 0.9rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
  flex: none;
  /* Prevent header text from widening the panel */
  min-width: 0;
}
.chat-panel-reset-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1rem;
  line-height: 1;
  padding: 0.15rem 0.2rem;
  cursor: pointer;
}
.chat-panel-reset-btn:hover {
  color: #fff;
}
/* Nothing to clear yet -> visibly inert rather than clickable-but-dead. */
.chat-panel-reset-btn:disabled {
  opacity: 0.35;
  cursor: default;
}
.chat-panel-reset-btn:disabled:hover {
  color: rgba(255, 255, 255, 0.85);
}
.chat-panel-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;     /* never let content blow out the width */
  display: flex;
  flex-direction: column;
  background: #fff;
  /* Ensure the body itself is bounded */
  min-width: 0;
}
.chat-panel-input {
  flex: none;
  display: flex;
  gap: 0.4rem;
  padding: 0.6rem;
  border-top: 1px solid #e5e5e0;
  /* Keep input inside the panel on all screen sizes */
  min-width: 0;
}
.chat-panel-input .form-control {
  /* Don't let the input field overflow its flex container */
  min-width: 0;
  flex: 1 1 0;
}

/* Close button inside the input row — always visible above the keyboard */
.chat-panel-close-float {
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #e9e9e4;
  color: #444;
  border: none;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.chat-panel-close-float:hover {
  background: #d0d0ca;
}
@media (max-width: 480px) {
  .chat-widget {
    /* Hug the right edge a little more on small screens */
    right: 0.5rem;
    bottom: 0.75rem;
  }
  .chat-panel {
    /* Full-width minus a small margin on each side */
    width: calc(100vw - 1rem);
    max-width: calc(100vw - 1rem);
    /* Tall enough to be useful, short enough that the input row is
       visible above the keyboard once the JS offset kicks in */
    height: 420px;
    max-height: calc(100vh - 6rem);
  }
}

.chat-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.65rem;
  background: #fff;
  /* Force all child content to wrap within the thread */
  word-break: break-word;
  overflow-wrap: anywhere;
}
.chat-bubble-wrap {
  display: flex;
  margin-bottom: 0.75rem;
  /* Prevent a very long word from escaping the thread */
  min-width: 0;
  max-width: 100%;
}
.chat-bubble-wrap-user {
  justify-content: flex-end;
}
.chat-bubble-wrap-assistant {
  justify-content: flex-start;
}
.chat-bubble {
  /* Cap at 85% of thread width so it never forces horizontal scroll */
  max-width: 85%;
  min-width: 0;
  padding: 0.5rem 0.85rem;
  border-radius: 1rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chat-bubble-user {
  background: #198754;
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}
.chat-bubble-assistant {
  background: #eef1ee;
  color: #212529;
  border-bottom-left-radius: 0.25rem;
  /* .chat-bubble's own 85% cap makes sense for short, plain-text chat
     turns -- it's what keeps a short reply from awkwardly stretching
     edge to edge -- but it's exactly what forces tables into horizontal
     scrolling that doesn't need to happen: a table capped at 85% of an
     already-narrow mobile thread has meaningfully less room than the
     thread actually has available. Overridden here, not on the shared
     .chat-bubble rule, so the user's own (always short, plain-text)
     messages keep the original, narrower bubble sizing -- this only
     widens the assistant's own replies.
  */
  max-width: 100%;
}
/* Headers/hr in an assistant reply use the browser/Bootstrap default
   heading scale unless overridden here -- h3 alone computes to ~25px,
   wildly oversized next to this bubble's own ~16px body text. Scaled
   down to stay proportionate to a compact chat bubble while still
   reading as a clear heading (bold, a bit larger, real but small
   margin) rather than a full-page section title. */
.chat-bubble-assistant h1,
.chat-bubble-assistant h2,
.chat-bubble-assistant h3,
.chat-bubble-assistant h4,
.chat-bubble-assistant h5,
.chat-bubble-assistant h6 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.4rem 0 0.2rem;
  line-height: 1.3;
}
.chat-bubble-assistant hr {
  margin: 0.5rem 0;
  border-color: rgba(0, 0, 0, 0.15);
}
/* A wide table (several columns) can easily exceed the bubble's own
   85%-max-width -- wrapping the table itself in a scrollable box, rather
   than letting it force the whole bubble (or page) wider, keeps a phone
   screen usable instead of pushing content off-screen. Smaller font and
   tighter padding than body text since a table needs to fit real data
   in a compact space, not just prose. */
.chat-bubble-assistant table {
  display: block;
  overflow-x: auto;
  max-width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin: 0.4rem 0;
}
.chat-bubble-assistant th,
.chat-bubble-assistant td {
  border: 1px solid rgba(0, 0, 0, 0.15);
  padding: 0.3rem 0.5rem;
  text-align: left;
  white-space: normal;
  /* .chat-bubble's own overflow-wrap: anywhere (needed to stop a single
     long unbroken string, like a URL, from breaking the bubble's width)
     gets inherited here too -- inside a narrow table cell, that meant
     ordinary words were being broken at arbitrary characters instead of
     wrapping at their natural word boundaries first (confirmed directly,
     2026-09-22: "All-Purpo/se", "Repti-Calc/ium Plus", mid-word breaks
     that had nothing to do with any word actually being too long to
     fit). break-word only forces a hard break as a last resort, when a
     single word genuinely doesn't fit the cell at all -- normal cell
     content wraps at spaces and hyphens like it should. */
  overflow-wrap: break-word;
  word-break: normal;
  /* break-word's own last-resort break has no linguistic awareness of
     WHERE a word should split -- it just breaks wherever the character
     runs out of room, which can still look like an arbitrary mid-word
     chop for a genuinely long word that doesn't fit a narrow cell even
     alone on its own line. hyphens: auto uses the browser's real,
     dictionary-based hyphenation instead, breaking at an actual syllable
     boundary when a break is unavoidable. Requires lang="en" somewhere
     in the ancestry to know which language's rules to use -- already
     set on <html> in base.html, confirmed directly rather than assumed
     (2026-09-22). Vendor-prefixed variants included since Safari in
     particular has long required -webkit-hyphens specifically, and this
     app is read on phones as much as anywhere else.
  */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
.chat-bubble-assistant th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: 700;
}
.chat-sources {
  /* Sits inside .chat-thread so it inherits the thread width */
  margin: -0.4rem 0 0.75rem 0;
  /* Must not overflow the thread */
  max-width: 100%;
  overflow: hidden;
}
.chat-sources a {
  display: inline-block;
  margin: 0 0.35rem 0.35rem 0;
  /* Long source labels wrap onto extra lines instead of being cut off */
  max-width: calc(100% - 0.5rem);
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
  vertical-align: bottom;
}
/* Single-file styled button (matches Add Photos/Videos pattern) */
.file-btn-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}
.file-btn-name {
  font-size: 0.8rem;
  color: #6c757d;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Hidden file input — visually replaced by .media-add-btn */
.media-file-input-hidden {
  display: none;
}
.media-add-btn {
  /* Consistent size whether inside a card footer (sm) or a full form */
  white-space: nowrap;
}

/* Thumbnail button wrapper — removes default button styling */
.media-thumb-btn {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  position: relative;
}

/* Play badge overlaid on video thumbnails */
.media-play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.6rem;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
}

/* ── Lightbox ──────────────────────────────────────────────────── */
.media-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1080;
  background: rgba(0,0,0,0.92);
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.media-lightbox.open {
  display: flex;
}
.media-lightbox-inner {
  position: relative;
  max-width: min(92vw, 960px);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.media-lightbox-media {
  max-width: 100%;
  max-height: 80vh;
  border-radius: 0.5rem;
  object-fit: contain;
  display: block;
}
.media-lightbox-caption {
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  margin-top: 0.5rem;
  text-align: center;
  max-width: 100%;
}
.media-lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1081;
}
.media-lightbox-close:hover {
  background: rgba(255,255,255,0.3);
}

/* ---------------------------------------------------------------------
   Multi-media gallery (tasks, care logs, checklist completions).
   A scrolling row of square thumbnails that expand on tap/click. */
.media-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.media-gallery-item {
  position: relative;
  width: 90px;
  height: 90px;
  flex: none;
  border-radius: 0.5rem;
  overflow: hidden;
  background: #e9e9e4;
}
.media-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0.5rem;
}
video.media-thumb {
  /* Videos get a slightly different treatment — show the first frame */
  object-fit: cover;
}
.media-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 0.65rem;
  padding: 0.15rem 0.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.media-delete-form {
  position: absolute;
  top: 2px;
  right: 2px;
  margin: 0;
}
.media-delete-btn {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.media-delete-btn:hover {
  background: rgba(220,53,69,0.85);
}
@media (max-width: 480px) {
  .media-gallery-item {
    width: 80px;
    height: 80px;
  }
}

/* ── AnAge species typeahead ──────────────────────────────────── */
.anage-suggestions {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 200;
  max-height: 260px;
  overflow-y: auto;
}
.anage-suggestion-item {
  padding: 0.5rem 0.75rem;
  cursor: pointer;
  line-height: 1.3;
  border-bottom: 1px solid #f0f0ec;
}
.anage-suggestion-item:last-child { border-bottom: none; }
.anage-suggestion-item:hover,
.anage-suggestion-item.active {
  background: #f0f7f3;
}
.anage-no-match {
  padding: 0.5rem 0.75rem;
  color: #6c757d;
  font-size: 0.875rem;
  font-style: italic;
}

/* ── Viewer read-only mode ───────────────────────────────────── */
body.viewer-mode form:not(.viewer-safe) button[type="submit"],
body.viewer-mode form:not(.viewer-safe) button:not([type]),
body.viewer-mode a.btn-success,
body.viewer-mode a.btn-warning,
body.viewer-mode a.btn-danger,
body.viewer-mode .viewer-hide {
  display: none !important;
}

/* ── Bulk action sticky bar ──────────────────────────────────── */
.bulk-action-bar {
  position: fixed;
  bottom: -80px;
  left: 50%;
  transform: translateX(-50%);
  background: #212529;
  color: #fff;
  border-radius: 2rem;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  box-shadow: 0 4px 20px rgba(0,0,0,0.35);
  z-index: 1040;
  transition: bottom 0.2s ease;
  white-space: nowrap;
}
.bulk-action-bar.bulk-action-bar-visible {
  bottom: 1.5rem;
}
.bulk-action-bar-count {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.7);
  margin-right: 0.25rem;
}

footer.app-footer {
  color: #bbb;
  font-size: 0.78rem;
  text-align: center;
  padding: 1.5rem 0 1rem;
  border-top: 1px solid #f0f0ec;
  margin-top: 2rem;
}
footer.app-footer a:hover {
  color: #666;
}

/* ---------------------------------------------------------------------
   Analytics charts (Analytics dashboard + per-animal weight trend).
   Reference palette values per the project's dataviz skill - light mode
   only, since the app doesn't have a dark theme. Scoped under .viz-root
   so these tokens can't leak into/collide with anything else. */
.viz-root {
  --viz-surface: #fcfcfb;
  --viz-text-primary: #0b0b0b;
  --viz-text-secondary: #52514e;
  --viz-text-muted: #898781;
  --viz-gridline: #e1e0d9;
  --viz-baseline: #c3c2b7;
  --viz-series-1: #2a78d6;
}
.viz-root svg text {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  fill: var(--viz-text-secondary);
}
.viz-bar {
  fill: var(--viz-series-1);
}
.viz-bar-label {
  font-size: 0.78rem;
  fill: var(--viz-text-secondary);
}
.viz-bar-value {
  font-size: 0.78rem;
  fill: var(--viz-text-primary);
  font-weight: 600;
}
.viz-axis-label {
  font-size: 0.7rem;
  fill: var(--viz-text-muted);
}
.viz-baseline {
  stroke: var(--viz-baseline);
  stroke-width: 1;
}
.viz-line {
  fill: none;
  stroke: var(--viz-series-1);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.viz-dot {
  fill: var(--viz-series-1);
  stroke: var(--viz-surface);
  stroke-width: 2;
}
.viz-stat-tile {
  background: var(--viz-surface);
  border: 1px solid var(--viz-gridline);
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
}
.viz-stat-value {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--viz-text-primary);
  line-height: 1.1;
}
.viz-stat-label {
  font-size: 0.8rem;
  color: var(--viz-text-secondary);
}

/* Dashboard stats row — equal width flex columns */
.dashboard-stats .col-md {
  flex: 1 0 0%;
}
@media (max-width: 767px) {
  .dashboard-stats .col-md {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* ── Mobile nav — flat list, not centered hierarchy ── */
@media (max-width: 991px) {
  .navbar-collapse {
    background: var(--bs-dark, #1a1a18);
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  .navbar-nav .nav-link {
    padding: 0.6rem 1.25rem !important;
    text-align: left !important;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    font-size: 0.95rem;
  }
  .navbar-nav .nav-link:last-child { border-bottom: none; }
  .navbar-nav .dropdown-menu {
    background: rgba(255,255,255,0.05);
    border: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
  }
  .navbar-nav .dropdown-item {
    color: rgba(255,255,255,0.75);
    padding: 0.5rem 2rem;
    font-size: 0.88rem;
    border-bottom: 1px solid rgba(255,255,255,0.04);
  }
  .navbar-nav .dropdown-item:hover {
    background: rgba(255,255,255,0.08);
    color: #fff;
  }
  /* Bootstrap 5 puts .show on the menu itself, not the parent .nav-item —
     the old parent-based selector never matched, so the menu stayed hidden
     and the Admin dropdown could not be opened on mobile. */
  .navbar-nav .dropdown-menu {
    display: none;
  }
  .navbar-nav .dropdown-menu.show {
    display: block;
  }
}

/* ---------------------------------------------------------------------------
   Admin / More dropdown — grouped multi-column layout

   The grid lives on an inner wrapper rather than .dropdown-menu itself,
   because Bootstrap toggles `display` on the menu to open and close it.
   Putting display:grid there would fight that and the menu would never hide.
   --------------------------------------------------------------------------- */
.admin-menu-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.15rem 0.5rem;
  padding: 0.35rem 0.5rem;
}
.admin-menu-group { min-width: 0; }
.admin-menu-heading {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #8a94a0;
  padding: 0.45rem 0.6rem 0.2rem;
  white-space: nowrap;
}
.admin-menu-grid .dropdown-item {
  border-radius: 0.3rem;
  padding: 0.35rem 0.6rem;
  font-size: 0.86rem;
  white-space: normal;      /* let longer labels wrap instead of clipping */
  line-height: 1.25;
}
.admin-menu-grid .dropdown-item i { width: 1.1rem; }

@media (min-width: 768px) {
  .admin-menu {
    min-width: 34rem;
  }
  .admin-menu-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.15rem 0.75rem;
  }
  .admin-menu-grid .dropdown-item { white-space: nowrap; }
}

@media (max-width: 991.98px) {
  /* Inside the collapsed navbar the menu is full width, so the columns
     just halve the vertical height rather than making it wider. */
  .admin-menu-grid {
    padding: 0.25rem 0.75rem 0.5rem;
    gap: 0 0.5rem;
  }
  .admin-menu-heading {
    color: rgba(255,255,255,0.5);
    padding: 0.5rem 0.4rem 0.15rem;
  }
  .navbar-nav .admin-menu-grid .dropdown-item {
    padding: 0.4rem 0.4rem;
    border-bottom: none;      /* dividers get noisy in a grid */
    font-size: 0.82rem;
  }
}