html :where(.theme-teva), html :where(.theme-teva) *, html:where(.theme-teva) * {
  --vision-comp-ident-secondary-collapsed-max-width: 12rem;
  --vision-comp-ident-secondary-expanded-max-width: 14rem;
  --vision-comp-ident-primary-collapsed-max-width: 12rem;
  --vision-comp-ident-primary-expanded-max-width: 14rem;
}

.vi-theme {
    --vi-brand-secondary-2: #00567a;
}

.meal-header {
    background: linear-gradient(90deg, #e8f4fd, #ffffff);
    border-left: 6px solid #4a90d9;
    padding: 8px 16px;
    font-weight: bold;
    font-size: 1rem;
    color: #1a4f75;
    width: 100%;
    display: block;
    border-radius: 0 4px 4px 0;
}

.food-list {
    min-height: 10rem;
    row-gap: 1rem;
}

.left-border {
    border-left: 1px solid #ddd;
}

.text-balance {
    text-wrap: balance;
}

.text-decoration-underline {
    text-decoration: underline;
}

.no-before::before, .no-after::after {
    content: none !important;
}

table:not(.table):not(.table-content--calories):not(.ui-datepicker-calendar):not(.calendar), 
table:not(.table):not(.table-content--calories):not(.ui-datepicker-calendar):not(.calendar) th, 
table:not(.table):not(.table-content--calories):not(.ui-datepicker-calendar):not(.calendar) td {
    border: 1px solid;
}

table:not(.table):not(.table-content--calories):not(.ui-datepicker-calendar):not(.calendar), 
table:not(.table):not(.table-content--calories):not(.ui-datepicker-calendar):not(.calendar) th:first-child, 
table:not(.table):not(.table-content--calories):not(.ui-datepicker-calendar):not(.calendar) td:first-child {
    min-width: 4.7rem;
}

.table-content--calories {
    border-color: #2dc26b;
}

.table-content--calories th, .table-content--calories td {
    border-color: #2dc26b;
    min-width: 0 !important;
}

.table-content--calories th::before, .table-content--calories td::before, .table-content--calories th::after, .table-content--calories td::after {
    content: none !important;
}

th:not(.ui-datepicker-calendar th):not(.calendar th), td:not(.ui-datepicker-calendar td):not(.calendar td) {
    padding: 0.625rem;
}

.vi-content-layout__main img:not(.vi-tab-panel.vi-tab-panel--inversed img, .body-diagram img, .ovulation-calendar-legend-container img, .food-list img, img.thumb, .pollen-widget__image img) {
    width: 100%;
    height: auto;
}

.vi-container.vi-container--column:has(.vi-tab-panel.vi-tab-panel--inversed) {
    padding: 0;
}

.annotation__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border-radius: 50%;
    border: 2px solid #5b9bd5;
    background: rgba(91, 155, 213, 0.18);
    text-decoration: none;
    transition: background 0.2s;
    cursor: pointer;
    box-shadow: inset 0 0 0 4px rgba(91,155,213,0.35);
}

.annotation__dot:hover,
.annotation__dot:focus {
    background: rgba(91, 155, 213, 0.45);
    outline: 2px solid #1a5fa8;
    outline-offset: 2px;
}

.annotation__label {
    font-size: 0.82rem;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}

.annotation__label:hover,
.annotation__label:focus {
    color: #1a5fa8;
    border-bottom-color: #1a5fa8;
    outline: none;
}

.body-diagram {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.body-diagram img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.annotation {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transform: translateY(-50%);
}

.annotation--left {
    flex-direction: row-reverse;
    text-align: right;
}

.annotation--right {
    flex-direction: row;
    text-align: left;
}

#ann-vrat {
    top: 35%;
    right: 34%;
}

#ann-leda {
    top: 45%;
    left: 32%;
}

#ann-prsa {
    top: 49%;
    right: 15%;
}

#ann-nat-straga {
    top: 66%;
    left: 13%;
}

#ann-nat {
    top: 59%;
    right: -4%;
}

#ann-ramena {
    top: 19%;
    left: 61%;
}

#ann-ruke {
    top: 32%;
    left: 20%;
}

#ann-nat-sprijeda {
    top: 64%;
    left: 12%;
}

#ann-potkoljenica {
    top: 81%;
    left: 62%;
}

#ann-nat-straga .annotation__dot {
    margin-left: 65px;
}

#ann-nat-straga .annotation__label::before {
    content: "";
    position: absolute;
    top: 50%;
    height: 1px;
    width: 68px;
    background: #5b9bd5;
    z-index: 1;
    left: 45%;
}

.anatomy {
  box-sizing: border-box;
  container-type: inline-size;
  max-width: 900px;
  margin: 0 auto;
  padding: 18px 22px 40px;
  background: #fff;
  color: #8e99a9;
  font: 11px/1.3 Arial, sans-serif;
}

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

.anatomy__tabs {
  margin-bottom: 26px;
  font-size: 12px;
}

.anatomy__tabs a {
  color: #7795c5;
  text-decoration: none;
}

.anatomy__tabs a[aria-current="page"] {
  color: #0871c5;
}

/* Desktop: two independent panels, so neither image covers the other. */
.anatomy__figures {
  display: flex;
  align-items: flex-start;
}

.anatomy__figure {
  position: relative;
  flex: 0 0 50%;
  min-width: 0;
  aspect-ratio: 0.92;
}

.anatomy__image {
  position: absolute;
  top: 0;
  display: block;
  width: 78%;
  height: auto;
  max-width: none;
  z-index: 0;
}

.anatomy__figure--front .anatomy__image {
  right: 0;
}

.anatomy__figure--back .anatomy__image {
  left: 0;
}

/* Topics sit ABOVE the white backgrounds of the supplied PNGs. */
.anatomy__topics {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.anatomy__topics--left {
    top: 25px;
    left: 10px;
}

.anatomy__topics--right {
  top: 15px;
}

.anatomy__topic {
  position: absolute;
  pointer-events: auto;
}

.anatomy__figure--front .anatomy__topic {
  left: 0;
  width: 44%;
}

.anatomy__figure--back .anatomy__topic {
  right: 0;
  width: 48%;
}

.anatomy__topic h3 {
  margin: 0;
  color: #9da6b5;
  font-size: 12px;
  line-height: 1.15;
}

.anatomy__topic ul {
  margin: 2px 0 0;
  padding-left: 17px;
}

.anatomy__topic li {
  padding-left: 2px;
}

/* Align desktop headings approximately with the artwork's lines. */
.anatomy__figure--front .anatomy__topic:nth-child(1) { top: 2%; }
.anatomy__figure--front .anatomy__topic:nth-child(2) { top: 17%; }
.anatomy__figure--front .anatomy__topic:nth-child(3) {top: 33.5%;}
.anatomy__figure--front .anatomy__topic:nth-child(4) {top: 54%;}
.anatomy__figure--front .anatomy__topic:nth-child(5) {top: 71%;}

.anatomy__figure--back .anatomy__topic:nth-child(1) { top: 0; }
.anatomy__figure--back .anatomy__topic:nth-child(2) {top: 29%;}
.anatomy__figure--back .anatomy__topic:nth-child(3) {top: 40%;}
.anatomy__figure--back .anatomy__topic:nth-child(4) {top: 55%;}
.anatomy__figure--back .anatomy__topic:nth-child(5) {top: 67%;}

/*
 * Narrow containers: front panel on one row, back panel on the next.
 * Topics still sit alongside their respective images, but flow naturally
 * instead of using fixed top positions that would overlap when text wraps.
 */
@container (max-width: 760px) {
  .anatomy__figures {
    flex-direction: column;
    gap: 28px;
  }

  .anatomy__figure {
    flex: none;
    aspect-ratio: auto;
    min-height: clamp(390px, 100cqw, 490px);
  }

  .anatomy__topics--right {
    left: 65px;
  }
}

.anatomy .anatomy__topic a,
.anatomy .anatomy__topic a:link,
.anatomy .anatomy__topic a:visited {
  color: #8e99a9;
  text-decoration: none;
}

.anatomy .anatomy__topic:is(:hover, :focus-within) h3,
.anatomy .anatomy__topic:is(:hover, :focus-within) a,
.anatomy .anatomy__topic:is(:hover, :focus-within) a:visited {
  color: #000;
}

.anatomy .anatomy__topic a:hover {
  text-decoration: underline;
}

.anatomy .anatomy__topic a:focus-visible {
  outline: 2px solid #0871c5;
  outline-offset: 2px;
  text-decoration: underline;
}

.pollen-list li:not(:has(.pollen-value)) {
    grid-template-columns: 1fr 1fr;
    justify-items: end;
}

   .pollen-forecast {
       color: #444;
   }
   .pollen-forecast__intro {
       margin: 0;
   }
   .pollen-forecast__source {
       margin: 19px 10px 0 0;
       text-align: right;
   }
   .pollen-forecast__divider {
       height: 1px;
       margin: 14px 0 29px;
       border: 0;
       background: #aaa;
   }
   .pollen-forecast__levels {
       font-weight: bold;
   }
   .pollen-forecast__very-high,
   .pollen-forecast__high {
       color: #c00;
   }
   .pollen-forecast__moderate {
       color: #f90;
   }
   .pollen-forecast__low {
       color: #009639;
   }
   
   .plants .pollen-widget {
    height: auto;
}

.pollen-widget__image {
    position: relative;
    flex: 0 0 100%;
    max-width: 100%;
    overflow: hidden;
}

.plants .pollen-widget__image {
    height: 200px;
}

.pollen-widget__current {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #ececec;
    text-align: center;
}

.pollen-widget__forecast {
    flex: 0 0 50%;
    max-width: 50%;
    padding: 0.625rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pollen-widget__links {
    flex: 0 0 100%;
    max-width: 100%;
    display: flex;
    align-items: flex-start;
    padding: 0 1rem;
    border-left: 1px solid #ddd;
    height: 200px;
}

.pollen-widget {
    flex-wrap: wrap;
}

@media (min-width: 576px) {
    .pollen-widget__image {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .plants .pollen-widget__image {
        height: auto;
    }

    .pollen-widget {
        flex-wrap: nowrap;
    }
    
    .plants .pollen-widget {
        height: 200px;
    }

    .pollen-widget__links {
        flex: 0 0 55%;
        max-width: 55%;
        display: flex;
        align-items: flex-start;
        padding: 0 1rem;
        border-left: 1px solid #ddd;
        height: auto;
    }

    .pollen-widget__current {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .pollen-widget__forecast {
        flex: 0 0 25%;
        max-width: 25%;
    }
}