/*
 * Styles for the [displayevents] shortcode.
 * Moved from wp-content/themes/salient-child/style.css — see Task 6 of the
 * extraction plan / the 2026-07-02 design spec.
 */

/* Home page TV Section CSS */
.tooltip-bar {
  background-color: #336699;
  padding-left: 35px !important;
  width: 100%;
  max-width: 87.5rem; /* 1400px */
  margin: -97px auto 0 auto;
  height: 130px;
}

.tooltip-left h4 {
  color: #15191b;
  text-transform: uppercase;
  font-size: 24px;
  line-height: 28px;
  font-family: "Avenir Next LT W01 Bold", serif !important;
}

.tooltip-btn {
  display: inline-block;
}
.tooltip-btn div a {
  background-repeat: no-repeat;
  background-size: auto;
  background-position: left center;
  font-size: 16px;
  line-height: 20px;
  color: #ffffff;
  font-family: "Avenir Next LT W01 Bold", serif !important;
  margin-right: 5px;
}

.tooltip-btn div {
  float: left;
  margin-right: 8px;
}

.tooltip-bar-content {
  display: inline-block;
  width: 100%;
  height: 130px;
}

.tooltip-left {
  width: 36%;
  float: left;
  padding: 30px 0px 15px;
  height: 130px;
}

.tooltip-right {
  width: 64%;
  float: right;
  height: 130px;
}

.week-days {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 130px;
  float: right;
}
.week-days .day {
  border-right: 1px solid #fff;
  flex: 0 1 170px;
  min-width: 0;
  font-size: 24px;
  line-height: 130px;
  color: #ffffff;
  font-family: "Avenir Next LT W01 Bold", serif !important;
  text-transform: uppercase;
  text-align: center;
  height: 130px;
  cursor: pointer;
}
.week-days .day a {
  color: #fff;
}
.week-days .day:hover {
  color: #15191b;
}
.week-days .day:hover a {
  color: #15191b;
}
.week-days .day:last-child {
  border-right: 0px solid #fff;
}

.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
  visibility: hidden;
  width: 270px;
  background-color: #fff;
  text-align: center;
  border-radius: 0px;
  padding: 10px 10px 20px 10px;
  position: absolute;
  z-index: 1;
  bottom: 104%;
  left: 0%;
  margin-left: -60px;
}
.week-days .day::after {
  content: "";
  position: absolute;
  bottom: calc(104% - 20px);
  left: 50%;
  margin-left: -10px;
  border-width: 10px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  visibility: hidden;
}
.tooltip:hover .tooltiptext,
.week-days .day:hover::after {
  visibility: visible;
}

.week-days .day:last-child .tooltiptext {
  left: auto;
  right: 0;
  margin-left: 0;
}

.tooltiptext .guestname {
  background-image: url(/wp-content/uploads/2019/05/home-guest-icon.png);
}
.tooltiptext .titlename {
  background-image: url(/wp-content/uploads/2019/05/home-title-icon.png);
  cursor: pointer;
}
.tooltiptext .guestname {
  margin-left: 11px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto;
  font-size: 16px;
  line-height: 20px;
  color: #15191b;
  font-family: "Avenir Next LT W01 Bold", serif !important;
  text-align: left;
  padding: 5px 10px 0px 28px;
  text-transform: capitalize;
}
.tooltiptext .titlename {
  margin-left: 11px;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: auto;
  font-size: 16px;
  line-height: 20px;
  color: #15191b;
  font-family: "Avenir Next LT W01 Bold", serif !important;
  text-align: left;
  padding: 5px 10px 0px 28px;
  text-transform: capitalize;
}
.tooltiptext .titlename a {
  color: #15191b;
}
.tooltiptext .titlename:hover {
  color: #336699;
}
.tooltiptext .titlename:hover a {
  color: #336699;
}
.tooltiptext .air-date {
  font-size: 14px;
  color: #336699;
  font-family: "AvenirNextLTW01-Medium", serif !important;
  text-align: left;
  line-height: 16px;
  padding: 15px 11px 8px 11px;
  text-transform: capitalize;
}
.tooltiptext .tooltip-img {
  line-height: 17px;
}


/* The feature banner. Two pages wear it: the front page, via this plugin's
   templates/hero-banner.php, and /videos/, via the theme's episode-list.php,
   which emits the same markup and enqueues this stylesheet for it (see
   salient-child/functions.php). Renamed off `.homepage-feature-banner`
   2026-08-20 when the second page picked it up. Anything scoped to
   `.am-twol-feature-banner` below therefore belongs to both — the theme keeps
   no copy of it. */
.featured-img-bg.am-twol-feature-banner {
  position: relative;
  height: auto;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
}

.my-home-page-container {
  margin-bottom: 0 !important;
}

.am-twol-feature-banner__inner {
  width: 100%;
  max-width: 87.5rem; /* 1400px */
  margin: 0 auto;
  padding-top: 23.75rem; /* 380px */
  padding-bottom: 7.3125rem;
}

/* Salient gives a top-level `.container` 90px of side padding. On the front page
   the banner's container is nested inside the page's own, where that padding is
   already zeroed, so the hero has never seen it; on /videos/ the banner is the
   top-level container and picked up a 90px indent the front page does not have.
   Zeroed here so both pages inset the copy by the same thing — `.row`'s clamp
   below, and nothing else. */
.am-twol-feature-banner .container.main-content {
  padding-left: 0;
  padding-right: 0;
}

/* Readability scrim behind the hero copy — white text over an arbitrary episode
   still has no guaranteed contrast otherwise. Replaces two things: the tint that
   used to sit in the front page's WPBakery Custom CSS on prod (removed
   2026-08-18), and the masked panel that replaced it (removed 2026-08-20), which
   was sized to the layout container at 1400px rather than to the 768px of copy
   it was protecting and so read as a grey rectangle laid across the subject.

   It rides the banner rather than the container for that reason: full-bleed, it
   has no edges to feather and no relationship to the container's width. Two
   layers, one colour — a gentle falloff off the bottom edge, plus an elliptical
   pool anchored to the bottom-left corner where the copy actually sits. Density
   collects under the text and is gone by the opposite corner, where the still
   usually puts its second subject and the LIFE Today mark.

   Measured on the composited pixels of a field still and a studio set, over the
   worst 2% of each text box: 7.0:1 on the 72px title, 5.6:1 on the gold byline,
   14.6:1 on the 18px description. WCAG AA asks 3:1, 3:1 and 4.5:1.

   No z-index here: `.row` below already carries position:relative; z-index:1,
   which keeps the copy above a pseudo-element generated after it. */
.featured-img-bg.am-twol-feature-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to top,
      rgba(12, 15, 17, 0.72) 0%,
      rgba(12, 15, 17, 0.6) 20%,
      rgba(12, 15, 17, 0.34) 42%,
      rgba(12, 15, 17, 0.09) 66%,
      rgba(12, 15, 17, 0) 88%),
    radial-gradient(64% 80% at 18% 88%,
      rgba(12, 15, 17, 0.76) 0%,
      rgba(12, 15, 17, 0.6) 36%,
      rgba(12, 15, 17, 0.24) 70%,
      rgba(12, 15, 17, 0) 100%);
}

.am-twol-feature-banner__inner .container.main-content > .row {
  position: relative;
  z-index: 1;
  padding: clamp(1.5625rem, 1.448rem + 0.49vw, 1.875rem) clamp(1.25rem, 0.79rem + 1.95vw, 2.5rem);
}

.am-twol-feature-banner__inner .header-video-icon, .am-twol-feature-banner__inner .header-video-text, .am-twol-feature-banner__inner .header-post-guest-name, .am-twol-feature-banner__inner .header-post-title, .am-twol-feature-banner__inner .header-entry-content {
  padding-left: 0;
}
.am-twol-feature-banner__inner .header-post-title a {
  color: #fff;
}
.am-twol-feature-banner__inner .header-entry-content p {
  /* Unitless rather than rem: this is the one number that should follow the
     paragraph's own font-size, not the root's. 26px at the 16px default. */
  line-height: 1.625;
}

.container-wrap.my-main-tooltip-container {
  min-height: 0 !important;
}

.tooltiptext p {
  font-size: 16px;
  line-height: 20px;
  color: #15191b;
  font-family: "Avenir Next LT W01 Bold", serif !important;
  padding-top: 15px;
}

/* Elementor's laptop ceiling (kit viewport_laptop 1366), not the legacy 1500px. */
@media only screen and (max-width: 1366px) {
  .tooltip-bar {
    max-width: 71.875rem; /* 1150px */
  }

  .tooltip-left {
    width: 46%;
  }

  .tooltip-right {
    width: 54%;
  }

  .tooltip .tooltiptext {
    margin-left: -57px;
    width: 225px;
  }
}

@media only screen and (max-width: 1024px) {
  .week-days .day .tooltiptext,
  .week-days .day::after {
    display: none;
  }

  .week-days,
  .week-days .day {
    height: clamp(3.25rem, 2.53rem + 3.08vw, 4.5rem);
  }
  .week-days {
    float: none;
  }
  .week-days .day {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    font-size: clamp(0.9375rem, 0.757rem + 0.77vw, 1.25rem);
  }

  .week-days .day > a,
  .week-days .day > .myBtn {
    flex: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .am-twol-feature-banner__inner {
    padding-top: clamp(11rem, 4.07rem + 29.6vw, 23rem);
    padding-bottom: 0;
  }

  .tooltip-bar {
    width: 100%;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto;
    height: auto;
  }

  .tooltip-bar-content {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 0.22rem + 1.23vw, 1.25rem);
    height: auto;
  }

  .tooltip-left {
    flex: 0 1 auto;
    width: auto;
    height: auto;
    padding: 0.75rem 0 0.75rem clamp(0.75rem, 0.37rem + 1.54vw, 1.75rem);
  }
  .tooltip-left h4 {
    margin-bottom: 0 !important;
    color: #fff;
    font-size: clamp(0.875rem, 0.51rem + 1.54vw, 1.5rem);
    line-height: 1.2;
  }

  .tooltip-btn div {
    float: none;
    display: inline-block;
    margin: 0;
  }
  .tooltip-btn div a {
    margin-right: 0;
    font-size: clamp(0.75rem, 0.6rem + 0.62vw, 1rem);
  }
  .tooltip-btn div a span {
    display: inline;
  }

  .tooltip-right {
    flex: 1 1 auto;
    width: auto;
    float: none;
    height: auto;
  }

  .my-main-tooltip-container .container.main-content {
    max-width: 100% !important;
  }
}


/* ===========================================================================
   Moved out of salient-child (style.scss + style.css), 2026-08-18.

   Two groups, and they left the theme for different reasons.

   1. The station-guide button. `.station` / `.am-icon-station_guid` are emitted
      by nothing but templates/week-tooltip-bar.php any more, so the theme's
      copies were deleted outright. The `.ticket` / `.guest` / `am-icon-get_tickets`
      / `am-icon-be_a_guest_icon` halves of those grouped selectors stay in the
      theme: they are equally unused in theme PHP, but page content lives in the
      database here and cannot be grepped, so they are not ours to remove.

   2. The hero copy. `.featured-img-bg` and the `.header-*` classes are shared
      with the theme's episode-list.php and single-episode.php templates, so the
      theme's rules had to stay for those pages. They are restated here scoped to
      `.am-twol-feature-banner`, which both outranks the theme's flat rules and
      keeps them from being the place you edit the hero. Everything below is a
      faithful port of what the theme was already applying to this markup,
      except where noted.
   =========================================================================== */

.tooltip-bar .am-icon-station_guid {
  margin-right: 7px;
  height: 32px;
  font-size: 32px;
  line-height: 32px;
  float: left;
  transition: color 0.2s ease;
}
.tooltip-bar .am-icon-station_guid::before {
  color: #15191b;
}
.tooltip-bar .station span {
  line-height: 32px;
  transition: color 0.2s ease;
}
.tooltip-bar .station:hover a span {
  color: #15191b;
}

.am-twol-feature-banner .header-post-guest-name,
.am-twol-feature-banner .header-post-title,
.am-twol-feature-banner .header-post-guest-name a,
.am-twol-feature-banner .header-post-title a {
  font-size: 64px;
  line-height: 0.9;
  color: #fff;
  text-transform: uppercase;
  font-family: "Avenir Next LT W01 Bold", serif !important;
}

.am-twol-feature-banner .header-entry-content p {
  font-size: 18px;
  color: #fff;
  font-family: "AvenirNextLTW01-Medium", serif !important;
  margin: 16px 0 15px 0;
  width: 52%;
}

/* The hero's type ladder, re-cut onto the Elementor kit's viewports so the whole
   plugin moves at the same widths the rest of the site does. The theme's own
   ladder ran 1400/1300/1150/1000/690/480; the six steps map one-for-one onto
   Laptop/Tablet Landscape/Tablet/Mobile Landscape/Mobile, which is why the sizes
   below are unchanged and only the breakpoints moved. Widescreen (min-width
   2400) gets no rule: the hero caps at 87.5rem, so nothing about it changes
   above the laptop step.

   One step lands a little earlier than it used to: the excerpt's measure now
   opens to 800px at 1366 rather than 1300, the nearest Elementor viewport. The
   play button's own steps are gone with the graphic they sized. Blocks stay in
   descending order: these all carry the same specificity, so the narrower query
   has to come last to win. */

/* Laptop */
@media only screen and (max-width: 1366px) {
  .am-twol-feature-banner .header-post-guest-name,
  .am-twol-feature-banner .header-post-title,
  .am-twol-feature-banner .header-post-guest-name a,
  .am-twol-feature-banner .header-post-title a {
    font-size: 50px;
  }
  .am-twol-feature-banner .header-entry-content p {
    width: 800px;
  }
}

/* Tablet Landscape */
@media only screen and (max-width: 1200px) {
  .am-twol-feature-banner .header-post-guest-name,
  .am-twol-feature-banner .header-post-title,
  .am-twol-feature-banner .header-post-guest-name a,
  .am-twol-feature-banner .header-post-title a {
    font-size: 48px;
  }
}

/* Tablet — the same viewport the layout flips at, above. */
@media only screen and (max-width: 1024px) {
  .am-twol-feature-banner .header-entry-content p {
    width: 100%;
  }
  .am-twol-feature-banner .header-post-guest-name,
  .am-twol-feature-banner .header-post-title,
  .am-twol-feature-banner .header-post-guest-name a,
  .am-twol-feature-banner .header-post-title a {
    font-size: 45px;
    /* Deliberately not ported: the theme also sets
       `.header-post-guest-name { color: #15191b }` at this step, next to the
       `.video-sub-content { display: none }` rules that mark it as
       single-episode styling. On this hero it painted the guest name #15191b on
       the #15191b readability tint — invisible. Restated as #fff. */
    color: #fff;
  }

  /* Not a port either. The theme grew the icon to 44px here (36px !important
     below 690), sized for the legacy three-across mobile button row; this bar
     keeps one button on one line beside the day strip, where 44px next to a 12px
     label reads as an error. Tracks the label instead: 20px on a 375px phone up
     to the desktop 32px at the breakpoint. */
  .tooltip-bar .am-icon-station_guid {
    font-size: clamp(1.25rem, 0.87rem + 1.54vw, 2rem);
    height: auto;
    line-height: 1;
    margin-right: 0.4375rem;
  }
}

/* Mobile Landscape — the theme sandwiched this step between 690 and 480; as a
   plain max-width it is simply overridden by the Mobile block below. */
@media only screen and (max-width: 880px) {
  .am-twol-feature-banner .header-post-guest-name,
  .am-twol-feature-banner .header-post-title,
  .am-twol-feature-banner .header-post-guest-name a,
  .am-twol-feature-banner .header-post-title a {
    font-size: 30px;
    line-height: 27px;
  }
  .am-twol-feature-banner .header-entry-content p {
    font-size: 15px;
  }
}

/* Mobile */
@media only screen and (max-width: 767px) {
  .am-twol-feature-banner .header-post-guest-name,
  .am-twol-feature-banner .header-post-title,
  .am-twol-feature-banner .header-post-guest-name a,
  .am-twol-feature-banner .header-post-title a {
    font-size: 20px;
    line-height: 0.9;
  }
  .am-twol-feature-banner .header-entry-content p {
    font-size: 12px;
  }
}


/* ===========================================================================
   Hero copy, second pass (2026-08-18). The guest name and the episode title
   used to compute identically on every axis - 64px, line-height 0.9, the same
   Bold face, #fff, uppercase, zero margin - and their boxes shared an edge, so
   the hero read as one sentence: "Betty Robison, Ann Pretorius New Vision".

   The fix is not a margin. They are two different kinds of thing, so they are
   set as two different kinds of thing: the episode title leads as the headline
   and the guest names follow as a byline, differing in size, weight, case and
   colour at once. templates/hero-banner.php emits the title first as of the
   same commit.

   Placed after the whole breakpoint ladder above deliberately. These carry the
   same specificity as the ladder's rules, so one fluid declaration here wins at
   every width and six media blocks stay untouched.
   =========================================================================== */

/* The excerpt was the only thing here with a measure; at 64px the display type
   ran the full 1320px, straight across the subjects' faces. */
.am-twol-feature-banner .container.main-content > .row {
  max-width: 48rem; /* 768px */
}

/* Title leads. -0.015em is the tightening a 72px cap setting wants; the floor
   before caps start to touch is -0.04em, so there is room left if it needs it. */
.am-twol-feature-banner .header-post-title,
.am-twol-feature-banner .header-post-title a {
  font-size: clamp(1.75rem, 0.55rem + 5.1vw, 4.5rem); /* 28 -> 72 */
  line-height: 0.92;
  letter-spacing: -0.015em;
  margin-top: clamp(1rem, 0.7rem + 1.2vw, 1.75rem);
  text-wrap: balance;
}

/* Byline. Medium face, sentence case, gold - it shares nothing with the title,
   which is what stops the two being read as one line.

   #ffb547 is a tint of the brand orange (#f08d00, the Donate button). The
   native value only reaches 4.0:1 where the photo behind the 0.82 panel is
   white; this holds 5.6:1 in that worst case. */
.am-twol-feature-banner .header-post-guest-name,
.am-twol-feature-banner .header-post-guest-name a {
  /* !important to match the rest of this file: the theme pins this class to
     the Bold face with !important of its own, for episode-list.php. */
  font-family: "AvenirNextLTW01-Medium", serif !important;
  font-size: clamp(1rem, 0.8rem + 0.85vw, 1.625rem); /* 16 -> 26 */
  line-height: 1.25;
  letter-spacing: 0.01em;
  text-transform: none; /* guest_name is stored title-cased; caps read as shouting */
  color: #ffb547;
  margin-top: clamp(0.75rem, 0.5rem + 1vw, 1.25rem);
}
/* Reads as a byline rather than a stray name. Guarded on the anchor rather than
   the div because an episode with no `guest_name` still emits an empty <a>. */
.am-twol-feature-banner .header-post-guest-name a:not(:empty)::before {
  content: "with ";
  opacity: 0.62;
}
/* ...and that empty anchor otherwise keeps its margin. */
.am-twol-feature-banner .header-post-guest-name:has(a:empty) {
  display: none;
}

/* The row's max-width now sets the measure, so the percentage can go. */
.am-twol-feature-banner .header-entry-content p {
  width: auto;
  max-width: 34rem;
}


/* ---------------------------------------------------------------------------
   The play control, same pass. It used to be a stroke-only 84px circle beside a
   separate "Today's Video" label, and measuring it turned up two defects under
   the visual one:

   - the <a> around the graphic was an inline box, so its height came from
     line-height rather than from the 84px image overflowing it. The hit area
     was 84 x 17 - a band across the lower third of a circle that looked
     84 x 84, and below the 24 x 24 WCAG 2.5.8 asks for.
   - the graphic and the label were two links with two destinations: the circle
     autoplayed, the words beside it did not.

   Both stop existing rather than getting patched: one element, one target, one
   hit area, and the accessible name is the button's own text instead of an alt
   attribute. It also covers less of the photo than the circle-plus-label did.

   templates/hero-banner.php drops the <img> and the .header-video-text div in
   the same commit, and the theme's episode-list.php followed on 2026-08-20.
   play-button.svg stays in /uploads: single-episode.php and functions.php still
   reference it.
   --------------------------------------------------------------------------- */
.am-twol-feature-banner .am-twol-watch {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.78rem 1.6rem 0.78rem 1.25rem;
  border-radius: 999px;
  /* A surface of its own. The old mark was a 4px stroke with no fill, so
     whatever was behind it showed through and nothing held it to the page. */
  background: #fff;
  color: #15191b; /* 16.1:1 */
  font-family: "Avenir Next LT W01 Bold", serif !important;
  font-size: clamp(0.8125rem, 0.74rem + 0.32vw, 1rem); /* 13 -> 16 */
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.34);
  transition:
    background-color 260ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 260ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 260ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* Brand orange on hover rather than at rest, so Donate stays the loudest thing
   in the viewport. #15191b on #f08d00 is 7.2:1. */
.am-twol-feature-banner .am-twol-watch:hover,
.am-twol-feature-banner .am-twol-watch:focus-visible {
  background: #f08d00;
  color: #15191b;
  transform: translateY(-2px);
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.42);
}
.am-twol-feature-banner .am-twol-watch:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

/* The triangle rides currentColor, so it inverts with the pill for free and
   there is no second asset to keep in sync with it. */
.am-twol-feature-banner .am-twol-watch__tri {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.5em 0 0.5em 0.85em;
  border-color: transparent transparent transparent currentColor;
}

@media (prefers-reduced-motion: reduce) {
  .am-twol-feature-banner .am-twol-watch {
    transition-duration: 1ms;
  }
  .am-twol-feature-banner .am-twol-watch:hover {
    transform: none;
  }
}



/* ---------------------------------------------------------------------------
   The hero clips the Slider Revolution bullets between 690 and 768.

   On the front page the hero's WPBakery column carries an inline
   `margin-top: -75px`, tuned for the desktop layout, where a "THIS WEEK ON LIFE"
   heading row sits between the slider and the hero and contributes ~186px of
   clearance. That row is display:none at <=768, so from there down the negative
   margin has nothing to eat into but the slider itself. It lands on the slide
   bullets - absolutely positioned at the module's bottom edge - and cuts them
   roughly in half. Measured at 720: slider bottom 870, bullets 795-845, hero top
   816.

   The lower bound is Salient's own 690px breakpoint, not a guess: at <=690 the
   slider row gains enough padding to absorb the pull (the hero lands exactly on
   the slider's bottom edge, overlap 0), while at 691 the only thing left between
   them is the row's 21px bottom margin, so -75px overlaps by 54. Hence 691-768,
   and hence a lower bound at all - without one this would open a 75px gap on
   mobile, where nothing is wrong.

   Cancelled rather than offset by a matching +75px. The inline value lives in
   the database and differs per page - the same hero sits in a -100px column on
   /life-today-tv/ - so a number here would drift the moment someone edits the
   page. `:has` keeps this to the column actually holding this hero, and the
   `sr7-module` guard keeps it to pages where a slider is the thing it would
   collide with: /life-today-tv/ has no slider and its -100px is doing its job.

   The durable fix is a responsive margin on that column in WPBakery, but page
   content is database-only here and does not deploy with the repo.
   --------------------------------------------------------------------------- */
@media only screen and (min-width: 691px) and (max-width: 768px) {
  body:has(sr7-module) .neg-marg:has(.am-twol-feature-banner) {
    margin-top: 0 !important;
  }
}


#am-twol-video-modal video.size {
  width: 50%;
  height: 100%;
  border-width: 0;
}
#am-twol-video-modal {
  position: absolute;
  z-index: 999999 !important;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
  text-align: center;
  display: none;
}
#am-twol-video-modal .modal-dialog {
  margin-top: 150px;
}
#am-twol-video-modal button.close {
  margin-left: 50%;
  background: #336699;
  color: white;
  border: none;
  height: 25px;
  width: 25px;
  font-size: 22px;
}
#am-twol-video-modal button.close:hover,
#am-twol-video-modal button.close:focus {
  cursor: pointer;
}
/* Laptop ceiling, same as the week-days block above. */
@media only screen and (max-width: 1366px) {
  #am-twol-video-modal video.size {
    width: 80%;
  }
  #am-twol-video-modal button.close {
    margin-left: 80%;
  }
}