/* Shared bottom information box used by all five disease overview sections. */
:is(
  .symptoms-note,
  .asthma-symptoms__note,
  .lung-cancer-advice,
  .copd-overview__note,
  .fibrosis-advice
) {
  color: #344139 !important;
  background: rgba(251, 247, 237, 0.96) !important;
  border: 1px solid rgba(84, 115, 90, 0.28) !important;
  border-radius: 22px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  gap: 24px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 110px !important;
  margin-top: 20px !important;
  padding: 20px 28px !important;
  position: relative !important;
  inset: auto !important;
  overflow: visible !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: 0 10px 28px rgba(43, 80, 61, 0.08) !important;
}

/* One identical lightbulb asset and size across every page. */
:is(
  .symptoms-note,
  .asthma-symptoms__note,
  .lung-cancer-advice,
  .copd-overview__note,
  .fibrosis-advice
)::before {
  content: "" !important;
  background-image: url("../img/shared-about-lightbulb.webp") !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  clip-path: circle(43.2% at 50% 50%);
  display: block !important;
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
}

/* Remove each page's previous icon and divider implementation. */
.symptoms-note > .symptoms-note__icon,
.asthma-symptoms__note > img:first-child,
.lung-cancer-advice > .lung-cancer-advice__icon,
.copd-overview__note > span:first-child,
.fibrosis-advice > img:first-child,
.symptoms-note > .symptoms-note__divider,
.asthma-symptoms__note > i,
.lung-cancer-advice > i,
.fibrosis-advice > i {
  display: none !important;
}

/* Shared divider and naturally wrapping text area. */
:is(
  .symptoms-note,
  .asthma-symptoms__note,
  .lung-cancer-advice,
  .fibrosis-advice
) > span:last-child,
.copd-overview__note > p:last-child {
  color: #344139 !important;
  border-left: 1px solid rgba(84, 115, 90, 0.32) !important;
  box-sizing: border-box !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  margin: 0 !important;
  padding: 4px 0 4px 24px !important;
  position: static !important;
  font-family: Montserrat, Arial, sans-serif !important;
  font-size: clamp(14px, 0.9vw, 17px) !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  text-align: left !important;
  white-space: normal !important;
  overflow: visible !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

:is(
  .symptoms-note,
  .asthma-symptoms__note,
  .lung-cancer-advice,
  .copd-overview__note,
  .fibrosis-advice
) br {
  display: none !important;
}

@media (max-width: 760px) {
  :is(
    .symptoms-note,
    .asthma-symptoms__note,
    .lung-cancer-advice,
    .copd-overview__note,
    .fibrosis-advice
  ) {
    gap: 18px !important;
    padding: 18px 20px !important;
  }

  :is(
    .symptoms-note,
    .asthma-symptoms__note,
    .lung-cancer-advice,
    .copd-overview__note,
    .fibrosis-advice
  )::before {
    flex-basis: 64px !important;
    width: 64px !important;
    height: 64px !important;
  }

  :is(
    .symptoms-note,
    .asthma-symptoms__note,
    .lung-cancer-advice,
    .fibrosis-advice
  ) > span:last-child,
  .copd-overview__note > p:last-child {
    padding-left: 18px !important;
    font-size: 14px !important;
  }
}

@media (max-width: 480px) {
  :is(
    .symptoms-note,
    .asthma-symptoms__note,
    .lung-cancer-advice,
    .copd-overview__note,
    .fibrosis-advice
  ) {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 18px !important;
  }

  :is(
    .symptoms-note,
    .asthma-symptoms__note,
    .lung-cancer-advice,
    .fibrosis-advice
  ) > span:last-child,
  .copd-overview__note > p:last-child {
    border-left: 0 !important;
    border-top: 1px solid rgba(84, 115, 90, 0.32) !important;
    width: 100% !important;
    padding: 14px 0 0 !important;
    text-align: center !important;
  }
}