.companion-video-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: .5em;
      padding: 8px;
      list-style-type: none;
      margin: 0 auto;
    }

    .companion-video-list li {
      background-color: white;
      min-height: 80px;
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      padding: 0;
      box-sizing: border-box;
      margin: 0 1em;
    }

.companion-side-menu {
      width: 100%;
      box-sizing: border-box;
      background: var(--companion-background, linear-gradient(180deg, #1a3a2f 0%, #101c18 100%));
      color: #e9f4ee;
      border: 1px solid var(--companion-border, #2f5b4b);
      border-radius: 10px;
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.28);
      overflow: hidden;
}

.companion-side-menu--r {
      --companion-background: linear-gradient(180deg, #1d4f7a 0%, #111e2e 100%);
      --companion-border: #3f6a91;
}

.companion-side-menu--stata {
      --companion-background: linear-gradient(180deg, #145f62 0%, #101f20 100%);
      --companion-border: #3f7e7e;
}

.companion-side-menu--spss {
      --companion-background: linear-gradient(180deg, #2a6021 0%, #111f10 100%);
      --companion-border: #4f7c43;
}

.companion-side-menu--essentials {
      --companion-background: linear-gradient(180deg, #005070 0%, #00344a 100%);
      --companion-border: #2f6f8e;

      --companion-link: #d7ecf8;
      --companion-title: #dff2fb;
      --companion-text-link: #8fd5f2;
      --companion-nav-border: rgba(173, 214, 232, 0.26);
      --companion-breadcrumb-ink: #dff2fb;
      --companion-item-border: rgba(173, 214, 232, 0.2);
      --companion-item-ink: #dff2fb;
      --companion-marker: #8fd5f2;
      --companion-summary-open: rgba(143, 213, 242, 0.14);
      --companion-submenu: rgba(0, 37, 54, 0.42);
      --companion-hover: rgba(143, 213, 242, 0.14);
      --companion-active: rgba(48, 176, 224, 0.22);
      --companion-active-border: #30b0e0;
}

.companion-side-menu a {
      color: var(--companion-link, #d9f7dd);
}

.companion-side-menu a:hover {
      color: #ffffff;
}

.companion-side-breadcrumb {
      padding: 4px 0px 0px 12px;
      text-align: left;
}

.companion-side-breadcrumb .fineprint {
      display: block;
      width: 100%;
      margin: 0;
      text-align: left;
      color: var(--companion-breadcrumb-ink, #e9f4ee);
}

.companion-side-breadcrumb a {
      color: var(--companion-breadcrumb-ink, #e9f4ee);
      text-decoration: none;
      border-bottom: none;
}

.companion-side-breadcrumb a:hover {
      color: #ffffff;
      border-bottom: none;
}

.companion-side-hero {
      display: grid;
      grid-template-columns: 40% 60%;
      gap: 12px;
      align-items: start;
      padding: 12px;
}

.companion-side-cover-link {
      display: block;
}

.companion-side-cover {
      width: 100%;
      display: block;
      border: 1px solid #13231c;
      box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.5);
      border-radius: 2px;
}

.companion-side-about {
      text-align: left;
}

.companion-side-title {
      display: block;
      width: 100%;
      margin: 0 0 8px 0;
      font-size: 18px;
      line-height: 1.15;
      color: var(--companion-title, #f3ff8a);
      font-weight: bold;
      text-align: center;
}

.companion-side-text {
      margin: 0 0 8px 0;
      font-size: 14px;
      line-height: 1.35;
      color: #ebf6f0;
}

.companion-side-text a:not(.action-button) {
      color: var(--companion-text-link, #f3ff8a);
      text-decoration: underline;
}

.companion-side-action {
      margin: 0;
      text-align: right;
}

.companion-side-nav {
      border-top: 1px solid var(--companion-nav-border, rgba(217, 247, 221, 0.2));
      padding: 8px 0 10px 0;
      text-align: left;
}

.companion-side-nav-list,
.companion-side-submenu ul {
      list-style: none;
      margin: 0;
      padding: 0;
}

.companion-side-nav-list > li {
      margin: 0;
}

.companion-side-nav-list > li > a,
.companion-side-nav-list > li > span,
.companion-side-submenu > summary {
      display: block;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 1.3;
      text-decoration: none;
      border-top: 1px solid var(--companion-item-border, rgba(217, 247, 221, 0.14));
      color: var(--companion-item-ink, #e9f4ee);
}

.companion-side-submenu > summary {
      cursor: pointer;
      user-select: none;
      font-weight: bold;
}

.companion-side-submenu > summary::marker {
      color: var(--companion-marker, #b8e3c4);
}

.companion-side-submenu[open] > summary {
      background-color: var(--companion-summary-open, rgba(255, 255, 255, 0.08));
}

.companion-side-submenu ul {
      padding: 4px 0 8px 0;
      background-color: var(--companion-submenu, rgba(0, 0, 0, 0.2));
}

.companion-side-submenu li a {
      display: block;
      padding: 5px 28px;
      font-size: 13px;
      text-decoration: none;
      color: var(--companion-link, #d9f7dd);
      line-height: 1.25;
}

.companion-side-submenu li a:hover {
      background-color: var(--companion-hover, rgba(255, 255, 255, 0.1));
}

.companion-side-submenu li a.is-active {
      color: #ffffff;
      background-color: var(--companion-active, rgba(243, 255, 138, 0.18));
      border-left: 3px solid var(--companion-active-border, #f3ff8a);
      padding-left: 25px;
}

.companion-side-nav-muted {
      color: #b9d3c2;
      font-style: italic;
}

@media (max-width: 899px) {
      .companion-side-hero {
          grid-template-columns: 1fr;
      }

      .companion-side-cover-link {
          max-width: 190px;
          margin: 0 auto;
      }
}

.companion-side-menu--essentials .companion-side-breadcrumb {
    border-bottom: 1px solid rgba(173, 214, 232, 0.26);
    background-color: rgba(0, 37, 54, 0.35);
}