@charset "UTF-8";
/* Variables */
:root {
  --baseline: 1.6rem;
  --grid: 5px;
  --color-background-1: #F6F5F3; /* White, Background 1 */
  --color-background-2: #E7E6E6; /* Light Grey, Background 2 */
  --color-background-3: #410065; /* Dark Purple, Background 3 */
  --color-text-1: #410065; /* Dark Purple, Text 1 */
  --color-text-2: #44546A; /* Blue-Grey, Text 2 */
  --color-text-3: #F6F5F3; /* White, Text 3 */
  --color-accent-1: #A900C0; /* Dark Purple, Accent 1 */
  --color-accent-2: #FF1958; /* Red, Accent 2 */
  --color-accent-2b: #E0003D; /* Red, Accent 2b */
  --color-accent-3: #C7058F; /* Pink, Accent 3 */
  --color-accent-4: #FFC000; /* Gold, Accent 4 */
  --color-accent-5: #5B9BD5; /* Blue, Accent 5 */
  --color-accent-6: #70AD47; /* Green, Accent 6 */
  --color-accent-6b: #3D5C28; /* Green, Accent 6b, sufficient contrast with white text */
  --color-accent-7: #F46F01; /* Orange, Accent 7 */
}

:root {
  --color-dark: #2C0043;
  --color-light: #FFFFFF;
  --color-light-shade: #F6F5F4;
  --color-mid: #B7B7B7;
  --color-mid-glare: #D4D4D4;
  --color-mid-shade: #444444;
  --color-charcoal: #222;
  --color-primary: #420065;
  --color-primary-glare: #B6A7BD;
  --color-primary-bright: #F6F3F8;
  --color-inclusive: #A900C0;
  --color-inclusive-shade: #7F238B;
  --color-sustainable: #FF1958;
  --color-ethical: #E100A0;
  --color-ethical-glare: #f857ca;
  --color-original: #F56F00;
  --color-bright: #FFC000;
  --color-bright-glare: #FFC822;
  --space-2xs: clamp(0.25rem, 0.23rem + 0.09vw, 0.3125rem);
  --space-xs: clamp(0.5625rem, 0.54rem + 0.09vw, 0.625rem);
  --space-s: clamp(0.875rem, 0.86rem + 0.09vw, 0.9375rem);
  --space-m: clamp(1.6875rem, 1.63rem + 0.28vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.18rem + 0.37vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.26rem + 0.56vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.35rem + 0.74vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.53rem + 1.11vw, 7.5rem);
  --space-xs-s: clamp(0.5625rem, 0.45rem + 0.56vw, 0.9375rem);
  --space-s-m: clamp(0.875rem, 0.58rem + 1.48vw, 1.875rem);
  --space-s-l: clamp(0.875rem, 0.39rem + 2.41vw, 2.5rem);
  --space-m-l: clamp(1.6875rem, 1.45rem + 1.20vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.81rem + 2.22vw, 3.75rem);
  --space-m-2xl: clamp(1.6875rem, 0.71rem + 4.91vw, 5rem);
  --space-l-2xl: clamp(2.25rem, 1.44rem + 4.07vw, 5rem);
  --space-xl-2xl: clamp(3.375rem, 2.89rem + 2.41vw, 5rem);
  --space-xl-3xl: clamp(3.375rem, 2.15rem + 6.11vw, 7.5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.61rem + 4.44vw, 7.5rem);
  --size-step-00: clamp(0.9375rem, 0.92rem + 0.09vw, 1rem);
  --size-step-0: clamp(1rem, 0.96rem + 0.19vw, 1.125rem);
  --size-step-1: clamp(1.1875rem, 1.11rem + 0.37vw, 1.4375rem);
  --size-step-2: clamp(1.4375rem, 1.34rem + 0.46vw, 1.75rem);
  --size-step-3: clamp(1.75rem, 1.62rem + 0.65vw, 2.1875rem);
  --size-step-4: clamp(2.0625rem, 1.86rem + 1.02vw, 2.75rem);
  --size-step-5: clamp(2.5rem, 2.22rem + 1.39vw, 3.4375rem);
  --size-step-6: clamp(2.5rem, 1.96rem + 2.69vw, 4.3125rem);
  --size-step-7: clamp(3.5625rem, 3.03rem + 2.69vw, 5.375rem);
  --size-step-8: clamp(4.3125rem, 3.61rem + 3.52vw, 6.6875rem);
  --size-step-9: clamp(5.1875rem, 4.24rem + 4.72vw, 8.375rem);
  --leading-flat: 1;
  --leading-fine: 1.15;
  --leading-compact: 1.25;
  --leading-standard: 1.5;
  --leading-loose: 1.7;
  --font-base: Poppins,Century Gothic,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
  --font-mono: Cousine,monospace;
  --font-normal: 400;
  --font-medium: 500;
  --font-bold: 700;
  --font-black: 900;
}

/* 
  Global styles 

  Low(ish)-specificity, global styles that apply to the whole 
  project: https://cube.fyi/css.html
*/

/* Global variables */

:root {
  --transition-base: 250ms ease;
  --transition-movement: 200ms linear;
  --transition-fade: 300ms ease;
  --transition-bounce: 500ms cubic-bezier(0.5, 0.05, 0.2, 1.5);
  --focus-offset: 0.2em;
  --radius: 0.6rem;
  --radius-s: 0.4rem;
  --radius-xs: 0.2rem;
  --radius-l: clamp(0.75rem, 4vw, 1.2rem);
  --radius-xl: clamp(1.5rem, 6vw, 2.5rem);
  --radius-pinched: 0 var(--radius-xl) 0 var(--radius-xl);
  --stroke: 1px solid var(--color-mid);
  --stroke-shade: 1px solid var(--color-mid-shade);
  --stroke-high-contrast: 1px solid transparent;
  --gutter: var(--space-m);
  --wrapper-max-width: 1400px;
  --accent: var(--color-inclusive);
  --gradient-standard: linear-gradient(
      104deg,
      rgba(0, 0, 0, 0.2) 0%,
      rgba(0, 0, 0, 0) 100%
    ),
    linear-gradient(
      104deg,
      var(--color-primary) 0%,
      var(--color-inclusive) 99.04%
    );
  --gradient-subtle: linear-gradient(
      102deg,
      rgba(0, 0, 0, 0.04) 0%,
      rgba(0, 0, 0, 0.04) 27.08%,
      rgba(0, 0, 0, 0.04) 99.98%
    ),
    linear-gradient(
      280deg,
      rgba(66, 0, 101, 0.5) 0.01%,
      rgba(169, 0, 192, 0.3) 100%
    );
  --gradient-deep: linear-gradient(
      102deg,
      rgba(197, 94, 250, 0.05) 0%,
      rgba(197, 94, 250, 0) 45.03%,
      rgba(197, 94, 250, 0.05) 100%
    ),
    linear-gradient(
      299deg,
      rgba(66, 0, 101, 0.05) 0%,
      rgba(255, 255, 255, 0.05) 52.08%,
      rgba(66, 0, 101, 0.05) 100%
    );
  --gradient-light: linear-gradient(
      102deg,
      rgba(169, 0, 192, 0.05) 0%,
      rgba(169, 0, 192, 0) 45.03%,
      rgba(169, 0, 192, 0.05) 100%
    ),
    linear-gradient(
      299deg,
      rgba(66, 0, 101, 0.05) 0%,
      rgba(255, 255, 255, 0.05) 52.08%,
      rgba(66, 0, 101, 0.05) 100%
    );
}

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/poppins-regular.woff2") format("woff2"), url("../fonts/poppins-regular.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: local(""), url("../fonts/poppins-italic.woff2") format("woff2"), url("../fonts/poppins-italic.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: local(""), url("../fonts/poppins-500.woff2") format("woff2"), url("../fonts/poppins-500.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  src: local(""), url("../fonts/poppins-500italic.woff2") format("woff2"), url("../fonts/poppins-500italic.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("../fonts/poppins-600.woff2") format("woff2"), url("../fonts/poppins-600.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  src: local(""), url("../fonts/poppins-600italic.woff2") format("woff2"), url("../fonts/poppins-600italic.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/poppins-700.woff2") format("woff2"), url("../fonts/poppins-700.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: local(""), url("../fonts/poppins-700italic.woff2") format("woff2"), url("../fonts/poppins-700italic.woff") format("woff");
  font-display: block;
}
@font-face {
  font-family: "Cousine";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("../fonts/cousine-regular.woff2") format("woff2"), url("../fonts/cousine-regular.woff") format("woff");
}
@font-face {
  font-family: "Cousine";
  font-style: italic;
  font-weight: 400;
  src: local(""), url("../fonts/cousine-italic.woff2") format("woff2"), url("../fonts/cousine-italic.woff") format("woff");
}
@font-face {
  font-family: "Cousine";
  font-style: normal;
  font-weight: 700;
  src: local(""), url("../fonts/cousine-700.woff2") format("woff2"), url("../fonts/cousine-700.woff") format("woff");
}
@font-face {
  font-family: "Cousine";
  font-style: italic;
  font-weight: 700;
  src: local(""), url("../fonts/cousine-700italic.woff2") format("woff2"), url("../fonts/cousine-700italic.woff") format("woff");
}
/* html {
  font-size: 1.11rem;
  font-size: calc(1rem + 0.15vw);
} */

body {
  padding: 0;
  color: var(--color-text-1);
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: rgb(246 243 248);
  color: var(--color-charcoal);
  font-size: var(--size-step-0);
  font-family: var(--font-base);
  line-height: var(--leading-standard);
  --flow-space: var(--space-l);
  line-height: var(--leading-loose);
  font-size: var(--size-step-1);
}

main,
nav {
  max-width: 50rem;
  margin: 0 auto;
}

main {
  width: 100%;
  order: 1;
  background-color: rgb(246 243 248);
}

nav {
  order: 0;
}

[data-bathtub=slide] {
  padding: 2rem 5rem;
}

.theme-light[data-bathtub=slide] {
  padding-bottom: 0;
}

nav {
  width: 100%;
  padding: 1rem;
  background: var(--color-background-1);
  border-bottom: 3px solid #420065;
  background: var(--color-light);
}

@media (min-height: 30rem) {
  nav {
    position: sticky;
    top: 0;
    z-index: 1;
  }
}
nav ul {
  list-style: none;
  padding-left: 0;
}

nav button,
button[data-scorm-goto="1"] {
  border: none;
  display: inline-block;
  font-weight: 300;
  background: var(--color-background-3);
  padding: 0.25rem 1rem;
  color: #fff;
  text-decoration: none;
  font-weight: bold;
  white-space: nowrap;
  opacity: 0.8;
  min-width: 6rem;
}

button[data-scorm-goto="1"] {
  background-color: transparent;
  color: var(--color-background-3);
  outline: 0.1em solid var(--color-background-3)
}

button[data-scorm-goto="1"]:focus-visible {
  box-shadow: 0 0 0 0.2em #FFF, 0 0 0 0.25em #000;
  color: var(--color-accent-1);
}

nav button:focus,
nav button:hover {
  background: var(--color-accent-1);
}

nav button:disabled,
.tl-progress-controls-container button:disabled {
  opacity: 0.2;
}

nav:has(div[class^="tl-nav-variant"]) {
  margin: 0;
}

nav > div[class^="tl-nav-variant"] {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

/* The following programme specific changes, ensure that even when the ToC is labelled "Browse programme", it all still sits on the same line */

.tl-nav-variant-programme {
  flex-direction: row;
  margin-left: 0;
  margin-right: 0;
}

.tl-nav-variant-programme div:first-of-type {
  padding-left: 0;
}

.tl-nav-variant-programme div:last-of-type {
  padding-right: 0;
}

a,
.js-custom-link {
  color: #A900C0;
}

.js-custom-link {
  text-decoration: underline;
}

.external-link-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.external-link-icon::after {
  position: relative;
  top: -0.3rem;
  content: "◳";
  font-size: 0.6rem;
  padding-left: 0.2rem;
}

button {
  background-color: var(--color-background-3);
  color: var(--color-text-3);
}

button:focus,
a:focus {
  outline: 1px solid #420065;
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-text-1);
  font-weight: bold;
  font-family: "Poppins", sans-serif;
  line-height: 3rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  line-height: var(--leading-fine);
  color: var(--color-primary);
  text-wrap: balance;
}

h1 {
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
}

h2 {
  font-size: var(--size-step-6);
}

p,
li,
legend {
  max-width: 45ch;
}

video,
iframe,
img {
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

iframe {
  aspect-ratio: 560/315;
  width: 100%;
}

figure figcaption {
  font-size: 0.8em;
  margin: 0;
  padding: 0.75rem 1rem;
}

figure img {
  margin-left: 0 !important;
}

blockquote {
  margin-left: 2rem;
  padding-left: 2rem;
  border-left: 2px solid var(--color-text-1);
  font-size: 0.9em;
}

.theme-dark blockquote {
  border-left-color: var(--color-accent-4);
}

.theme-purple blockquote {
  border-left-color: var(--color-text-3);
}

li[aria-current] {
  font-weight: bold;
}

legend {
  font-size: inherit;
}

code, pre {
  font-family: "Cousine", monospace;
}

.theme-border,
.theme-outline {
  border: 1px solid #000;
}

.theme-outline {
  padding: 0.5rem;
}

.theme-dark .theme-border,
.theme-dark .theme-outline {
  border: 1px solid #fff;
}

.theme-purple .theme-border,
.theme-purple .theme-outline {
  border: 1px solid #fff;
}

.theme-background-white {
  background-color: #fff;
}

.theme-background-1 {
  background-color: var(--color-background-1);

  background: var(--color-light);
}

.theme-background-2 {
  background-color: var(--color-background-2);
}

.theme-background-3 {
  background-color: var(--color-background-3);
}

.theme-light ol li::marker {
  color: var(--color-accent-1);
}

.theme-light code:not(.hljs) {
  color: var(--color-text-2);
}

.theme-dark code:not(.hljs) {
  color: var(--color-text-3);
}

code.hljs {
  background-color: var(--color-background-3);
  padding: 1rem 0.5rem;
  border-radius: 1rem;
}
code.hljs .hljs-comment {
  color: inherit;
}

.btn-primary {
  color: #fff;
  background-color: #A900C0;
  border-color: #A900C0;
}

.btn-primary:focus,
.btn-primary:hover {
  color: #fff;
  background-color: #A900C0;
  border-color: #A900C0;
  box-shadow: 0 0 0 0.25rem rgba(169, 0, 192, 0.5);
}

.btn-primary:disabled {
  color: #fff;
  background-color: #A900C0;
  border-color: #A900C0;
  opacity: 0.5;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #565e64;
  border-color: #565e64;
}

.btn-secondary:focus,
.btn-secondary:hover {
  color: #fff;
  background-color: #565e64;
  border-color: #565e64;
  box-shadow: 0 0 0 0.25rem rgba(92, 99, 106, 0.5);
}

.btn-secondary:disabled {
  color: #fff;
  background-color: #565e64;
  border-color: #565e64;
  opacity: 0.5;
}

.btn-success {
  color: #fff;
  background-color: #420065;
  border-color: #420065;
}

.btn-success:focus,
.btn-success:hover {
  color: #fff;
  background-color: #420065;
  border-color: #420065;
  box-shadow: 0 0 0 0.25rem rgba(60, 0, 101, 0.5);
}

.btn-success:disabled {
  color: #fff;
  background-color: #420065;
  border-color: #420065;
  opacity: 0.5;
}

.theme-dark .btn-success:focus {
  border-color: #fff;
  outline-offset: 0.25em;
}

.form-check-input {
  border: 1px solid #420065;
  opacity: 1;
}

.tl-logo {
  display: block;
  width: 25rem;
  margin: 0 auto;
}

[data-bathtub=slide] {
  position: relative;
  background-image: url("../images/vertical-divider-red.png");
  background-repeat: no-repeat;
  background-size: 1.5rem;
  background-position-x: 2.5rem;
}

.theme-light {
  background-color: var(--color-background-1);
  color: var(--color-text-1);

  background: var(--color-light);
  background: rgb(246 243 248);
}
.theme-light h1, .theme-light h2, .theme-light h3, .theme-light h4, .theme-light h5, .theme-light h6 {
  color: var(--color-text-1);
}

.theme-dark {
  background-color: var(--color-background-3);
  color: var(--color-text-3);
}
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 {
  color: var(--color-accent-4);
}
.theme-dark a,
.theme-dark .js-custom-link {
  color: inherit;
}
.theme-dark button {
  background-color: var(--color-accent-3);
  color: var(--color-text-3);
  border:0.1em solid #FFFFFF;
}
.theme-dark button:focus,
.theme-dark button:hover,
.theme-dark a:focus,
.theme-dark a:hover {
  outline: 1px solid var(--color-text-3);
  outline-offset: 2px;
}
[data-course-intro].theme-dark {
  padding-top: 5rem;
}

.theme-red {
  background-image: url("../images/vertical-divider-orange.svg");
  background-color: var(--color-accent-2);
  color: var(--color-text-3);
}
.theme-red h1, .theme-red h2, .theme-red h3, .theme-red h4, .theme-red h5, .theme-red h6 {
  color: var(--color-text-3);
}
.theme-red a,
.theme-red .js-custom-link {
  color: inherit;
}

.theme-orange {
  background-image: url("../images/vertical-divider-orange.svg");
  background-color: var(--color-accent-7);
  color: var(--color-text-3);
}
.theme-orange h1, .theme-orange h2, .theme-orange h3, .theme-orange h4, .theme-orange h5, .theme-orange h6 {
  color: var(--color-text-3);
}
.theme-orange a,
.theme-orange .js-custom-link {
  color: inherit;
}

.theme-purple {
  background-image: url("../images/vertical-divider-red.png");
  background-color: var(--color-accent-1);
  color: var(--color-text-3);
  padding-top: 5rem;
}
.theme-purple h1, .theme-purple h2, .theme-purple h3, .theme-purple h4, .theme-purple h5, .theme-purple h6 {
  color: var(--color-text-3);
}
.theme-dark[data-module] h1{
  margin-top: 1.5em;
}
.theme-purple a,
.theme-purple .js-custom-link {
  color: inherit;
}
.theme-purple button {
  background: var(--color-background-3);
  color: var(--color-text-3);
}
.theme-purple button:focus,
.theme-purple a:focus {
  outline: 1px solid var(--color-text-3);
  outline-offset: 2px;
}

.theme-pink {
  background-image: url("../images/vertical-divider-orange.svg");
  background-color: var(--color-accent-3);
  color: var(--color-text-3);
}
.theme-pink h1, .theme-pink h2, .theme-pink h3, .theme-pink h4, .theme-pink h5, .theme-pink h6 {
  color: var(--color-text-3);
}
.theme-pink a,
.theme-pink .js-custom-link {
  color: inherit;
}

main > section {
  min-height: 25rem;
}

.theme-layout-full-height {
  min-height: 100%;
}

.theme-template-title,
.theme-template-section,
.theme-template-definition {
  background-image: none;
  font-weight: bold;
}

.theme-template-section h1 {
  margin-top: 10rem;
  margin-bottom: 0;
}

.theme-template-title .introduction-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 4rem;
}

.theme-template-title .introduction-container h1 {
  margin-bottom: 0.5rem;
}

.theme-template-title {
  display: flex;
  flex-direction: column;
}
.theme-template-title div {
  flex: auto;
}
.theme-template-title footer {
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-end;
  margin: 1rem -3rem -2rem -3rem;
}
.theme-template-title footer :last-child {
  flex: 1;
  margin-left: 1rem;
  text-align: left;
}
.theme-template-title footer p, .theme-template-title footer li {
  max-width: none;
}
.theme-template-title footer img {
  margin: 0 0 0 auto;
}
.theme-template-title .theme-client-logo {
  position: absolute;
  top: 1rem;
  right: 1rem;
  max-height: 8rem;
}
.theme-template-title > * {
  z-index: 1;
}

.theme-template-title:before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 3rem;
  top: 1rem;
  left: 1rem;
  background-image: url("../images/tetralogical-logo-light.svg");
  background-size: contain;
  background-repeat: no-repeat;
  z-index: 1;
}

.theme-light.theme-template-title, .theme-light.theme-template-section {
  background-image: url("../images/Tetralogical-logo-scaled-whiteout-RGB.svg");
  background-size: cover;
}
.theme-light.theme-template-title {
  background-position-y: -10rem;
}
.theme-light.theme-template-section {
  background-position-x: -2rem;
}
.theme-light figure figcaption {
  color: var(--color-text-2);
  border-left: 0.14rem solid var(--color-mid);
  font-weight: 600;
  margin: 0.5rem 0;
  padding: 0.75rem 1rem 0.75rem 0.75em;
}

.theme-dark.theme-template-title::before {
  background-image: url("../images/tetralogical-logo-dark.png");
}
.theme-dark.theme-template-title::after, .theme-dark.theme-template-section::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-image: url("../images/Tetralogical-logo-scaled-whiteout-RGB.svg");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.2;
}
.theme-dark.theme-template-title:has(video + details) {
  min-height:34rem;
}
.theme-dark.theme-template-title:has(video + details)::after {
  background-size: 60%;
  background-position-y: 1rem;
  background-position-x: center;
}
.theme-dark.theme-template-title::after {
  background-position-y: -10rem;
}
.theme-dark.theme-template-section::after {
  background-position-x: -2rem;
}


@media (max-width: 45rem) {
  .theme-dark.theme-template-title::after {
    background-image: none;
  }
}

.theme-purple.theme-template-title::before,
.theme-red.theme-template-title::before,
.theme-orange.theme-template-title::before,
.theme-pink.theme-template-title::before {
  background-image: url("../images/Tetralogical-logo-whiteout-RGB.svg");
}
.theme-purple.theme-template-title::after, .theme-purple.theme-template-section::after,
.theme-red.theme-template-title::after,
.theme-red.theme-template-section::after,
.theme-orange.theme-template-title::after,
.theme-orange.theme-template-section::after,
.theme-pink.theme-template-title::after,
.theme-pink.theme-template-section::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: "";
  background-image: url("../images/Tetralogical-logo-scaled-whiteout-RGB.svg");
  background-size: cover;
  opacity: 0.2;
}
.theme-purple.theme-template-title::after,
.theme-red.theme-template-title::after,
.theme-orange.theme-template-title::after,
.theme-pink.theme-template-title::after {
  background-position-y: -10rem;
}
.theme-purple.theme-template-section::after,
.theme-red.theme-template-section::after,
.theme-orange.theme-template-section::after,
.theme-pink.theme-template-section::after {
  background-position-x: -2rem;
}

.theme-template-definition h1,
section[data-topic] h1 {
  position: relative;
  margin-bottom: 0;
  padding-bottom: 3rem;
}
.theme-template-definition h1::after,
section[data-topic] h1::after {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 5rem;
  height: 2rem;
  background-image: url("../images/divider-horizontal-orange-red.png");
  background-size: contain;
  background-repeat: no-repeat;
}

.theme-template-quotation {
  background-image: none;
  font-weight: bold;
}
.theme-template-quotation h1:empty {
  display: none;
}
.theme-template-quotation blockquote {
  position: relative;
  border: none;
  color: var(--color-accent-4);
  background-color: inherit;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "galano-grotesque-alt", sans-serif;
  line-height: 2rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin-right: 3.3rem;
}
.theme-template-quotation blockquote:before {
  position: absolute;
  left: -2.5rem;
  display: block;
  content: "";
  width: 3.5rem;
  height: 2rem;
  background-image: url("../images/quotes_dark_left.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.theme-template-quotation blockquote::after {
  position: absolute;
  right: -4.5rem;
  bottom: 0;
  display: block;
  content: "";
  width: 3.5rem;
  height: 2rem;
  background-image: url("../images/quotes_dark_right.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
.theme-template-quotation figure blockquote + figcaption {
  font-size: 1.3rem;
  text-align: right;
}

figure blockquote {
  position: relative;
  border: none;
  color: var(--color-accent-4);
  background-color: inherit;
  font-size: 1.5rem;
  font-weight: bold;
  font-family: "galano-grotesque-alt", sans-serif;
  line-height: 2rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  background: var(--color-background-3);
  margin: 0;
  padding: 1rem 4rem;
  border-radius: 1rem 1rem 0 0;
}
figure blockquote:before {
  position: absolute;
  left: 1rem;
  display: block;
  content: "";
  width: 3.5rem;
  height: 2rem;
  background-image: url("../images/quotes_dark_left.svg");
  background-size: contain;
  background-repeat: no-repeat;
}
figure blockquote::after {
  position: absolute;
  right: 1rem;
  bottom: 0;
  display: block;
  content: "";
  width: 3.5rem;
  height: 2rem;
  background-image: url("../images/quotes_dark_right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right;
}

figure blockquote + figcaption,
.theme-light figure blockquote + figcaption {
  margin: 0;
  border: none;
  color: var(--color-text-3);
  background: var(--color-background-3);
  font-size: 1.3rem;
  text-align: right;
  border-radius: 0 0 1rem 1rem;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
}

/* Outline for images in the content */
section[data-bathtub="slide"] img:not([src*=".svg"], [src*="icon"], .theme-client-logo) {
  border: 0.2em solid transparent;
  outline: 0.14rem solid var(--color-mid);
}

section[data-bathtub="slide"].theme-dark video {
  outline: 0.1em solid white;
}

main ul {
  list-style-type: none;
}

main ul {
  padding-left: 1.5rem;
}

main ul li {
  position: relative;
}

main ul li:before {
  position: absolute;
  left: -1.5rem;
  top: 0.7ch;
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url("../images/bullet.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.theme-layout-list-columns-2 ul,
.theme-layout-list-columns-2 ol {
  columns: 2;
}

.theme-layout-list-columns-3 ul,
.theme-layout-list-columns-3 ol {
  columns: 3;
}

.theme-layout-full-width {
  padding-left: 0;
  padding-right: 0;
}

.theme-layout-full {
  background-image: none;
  padding: 0;
}

table {
  width: 100%;
  margin-bottom: 1rem;
  caption-side: top;
}

table, th, td {
  border: 1px #9985A3 solid;
  border-collapse: collapse;
}

th {
  background: #A900C0;
  color: var(--color-text-3);
}

caption {
  color: inherit;
}

.theme-purple th {
  background: var(--color-background-3);
}

tbody tr th {
  background-color: transparent;
  color: var(--color-charcoal);
  font-weight: bold;
}

th, td {
  padding: 0.5rem;
}

details,
[data-details] {
  margin-bottom: 1rem;
}

.theme-layout-1-1 .theme-container,
.theme-layout-2-1 .theme-container,
.theme-layout-1-2 .theme-container,
.theme-layout-3-1 .theme-container,
.theme-layout-1-3 .theme-container {
  display: flex;
  flex-flow: row wrap;
}
.theme-layout-1-1 .theme-panel:first-of-type,
.theme-layout-2-1 .theme-panel:first-of-type,
.theme-layout-1-2 .theme-panel:first-of-type,
.theme-layout-3-1 .theme-panel:first-of-type,
.theme-layout-1-3 .theme-panel:first-of-type {
  padding-right: 0.5rem;
}
.theme-layout-1-1 .theme-panel:last-of-type,
.theme-layout-2-1 .theme-panel:last-of-type,
.theme-layout-1-2 .theme-panel:last-of-type,
.theme-layout-3-1 .theme-panel:last-of-type,
.theme-layout-1-3 .theme-panel:last-of-type {
  padding-left: 0.5rem;
}
.theme-layout-1-1 .theme-panel.theme-panel-bottom,
.theme-layout-2-1 .theme-panel.theme-panel-bottom,
.theme-layout-1-2 .theme-panel.theme-panel-bottom,
.theme-layout-3-1 .theme-panel.theme-panel-bottom,
.theme-layout-1-3 .theme-panel.theme-panel-bottom {
  margin-top: auto;
}
.theme-layout-1-1 .theme-panel.theme-panel-center,
.theme-layout-2-1 .theme-panel.theme-panel-center,
.theme-layout-1-2 .theme-panel.theme-panel-center,
.theme-layout-3-1 .theme-panel.theme-panel-center,
.theme-layout-1-3 .theme-panel.theme-panel-center {
  text-align: center;
}

.theme-layout-1-1 .theme-panel {
  flex: 1;
  min-width: 16.5rem;
}

.theme-layout-2-1 .theme-panel:first-of-type {
  flex: 2;
  min-width: 26rem;
}
.theme-layout-2-1 .theme-panel:last-of-type {
  flex: 1;
  min-width: 11rem;
}

.theme-layout-1-2 .theme-panel:first-of-type {
  flex: 1;
  min-width: 11rem;
}
.theme-layout-1-2 .theme-panel:last-of-type {
  flex: 2;
  min-width: 11rem;
}

.theme-layout-3-1 .theme-panel:first-of-type {
  flex: 3;
  min-width: 11rem;
}
.theme-layout-3-1 .theme-panel:last-of-type {
  flex: 1;
  min-width: 11rem;
}

.theme-layout-1-3 .theme-panel:first-of-type {
  flex: 1;
  min-width: 11rem;
}
.theme-layout-1-3 .theme-panel:last-of-type {
  flex: 3;
  min-width: 11rem;
}

ul.theme-quiz-list {
  display: flex;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}
ul.theme-quiz-list li {
  margin-right: 1rem;
}
ul.theme-quiz-list li:last-of-type {
  margin-right: 0;
}
ul.theme-quiz-list li::before {
  background: none;
}
ul.theme-quiz-list button {
  display: inline-block;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  text-align: left;
}
ul.theme-quiz-list button:focus, ul.theme-quiz-list button:hover:not(:disabled) {
  background: var(--color-accent-1);
}
ul.theme-quiz-list button:disabled {
  opacity: 0.2;
}
ul.theme-quiz-list button[aria-pressed=true] {
  opacity: 1;
}
ul.theme-quiz-list [data-answer=true] button[aria-pressed=true] {
  background: var(--color-accent-6b);
}
ul.theme-quiz-list [data-answer=false] button[aria-pressed=true] {
  background: var(--color-accent-2b);
}

ol.theme-quiz-list {
  list-style: upper-alpha;
  list-style-position: inside;
  margin: 0;
  padding: 0;
}
ol.theme-quiz-list li {
  background-color: var(--color-accent-3);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
}
ol.theme-quiz-list button {
  display: inline-block;
  width: 95%;
  background: none;
  border: none;
  color: var(--color-text-3);
  text-align: left;
}
ol.theme-quiz-list li::before {
  background-color: none;
}

/* Next / Close button interaction */
[data-bathtub~=navigation]:not([data-bathtub-navigation-status-last]) [data-el-close-container] {
  display: none;
}

[data-bathtub~=navigation][data-bathtub-navigation-status-last] [data-el-close-container] + [data-el-next-container] {
  display: none;
}

/* Icon specific styling */

.tl-icon__clock {
  max-height: 8rem;
  max-width: 8rem;
  margin-top: 1.5rem;
}

/* Progress Indicator */
.tl-progress-controls-container {
  display: flex;
  flex-direction: row;
  margin: 0 auto;
  padding: 1rem 0.5rem 0.5rem 0.5rem;
  width: 100%;
  justify-content: space-between;
}

.tl-js-disabled {
  display: none !important;
}

.tl-progress-indicator-holder {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.tl-progress-indicator-holder p {
  line-height: 1.3;
  margin-bottom: 0;
}

.tl-progress-indicator-container {
  --progress-indicator-width: 0;
  border: 0.25rem solid var(--color-background-3);
  flex-grow: 1;
  height: 1.5rem;
  line-height: 1.3;
  max-width: 100%;
  position: relative;
}

.tl-progress-indicator-container::before {
  background-color: var(--color-background-3);
  border-left: 0.4rem solid var(--color-background-3);
  box-sizing: content-box;
  content: "";
  display: block;
  height: 1.3rem;
  left: -0.2rem;
  line-height: 1.3;
  position: absolute;
  top: -0.2rem;
  width: var(--progress-indicator-width);
}

.tl-progress-indicator-label {
  font-size: 0.8em;
}

.tl-progress-indicator-label::after {
  position: absolute;
  content: " ";
  display: block;
  height: 1rem;
  width: 1rem;
}

.tl-progress-controls-container nav {
  border-bottom: none;
  width: max-content;
}

/* Timeline styling */

.tl-timeline {
  height: 2rem;
  justify-content: space-between;
  margin: 0;
  max-width: 100%;
  min-height: 20rem;
  padding: 9rem 0;
  position: relative;
}

.tl-timeline-holder {
  display: flex;
  flex-direction: row;
  height: 2rem;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  max-width: 90%;
  padding: 0;
}

.tl-timeline li {
  height: 8rem;
  margin: 2.5rem 0rem;
  min-width: 8ch;
  position: relative;
  text-align: center;
  width: 8ch;
}

.tl-timeline li:nth-child(odd) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: -8.5rem;
}

.tl-timeline li:nth-child(odd) svg {
  left: calc(50% - 0.5rem);
  top: 9.05rem;
}

.tl-timeline li::before {
  background-image: none;
  content: " ";
  height: 18rem;
  left: -2rem;
  position: absolute;
  top: -11rem;
  width: calc(100% + 4rem);
}

.tl-timeline li:nth-child(odd)::before {
  top: 0rem;
}

.tl-timeline li svg {
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='6' fill='%236325B5'/%3E%3C/svg%3E");
  left: calc(50% - 0.5rem);
  position: absolute;
  top: -1.95rem;
}

.tl-timeline-year {
  display: block;
  font-weight: bold;
}

.tl-timeline-graphic {
  background-color: var(--color-background-3);
  display: block;
  height: 2rem;
  margin-left: 0.1rem;
  position: absolute;
  width: 99%;
}

.tl-timeline-holder::before {
  background-color: var(--color-background-1);
  content: '';
  height: 2rem;
  mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='svg-triangle'%3E%3Cpolygon points='0,0 50,50 0,100 '/%3E%3C/svg%3E") no-repeat 50% 50%;
  -webkit-mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='svg-triangle'%3E%3Cpolygon points='0,0 50,50 0,100 '/%3E%3C/svg%3E") no-repeat 50% 50%;
  mask-size: cover;
  min-width: 2rem;
  width: 2rem;
}

.tl-timeline__end-of-line-arrowhead {
  background-color: var(--color-background-1);
  height: 4rem;
  min-width: 2rem;
  position: absolute;
  right: 0;
  top: 8rem;
  width: 2rem;
}

@media only screen and (max-width: 60rem) {
  .tl-timeline {
    height: auto;
    margin-bottom: 3rem;
    padding: 0;
  }
  .tl-timeline-holder{
    flex-direction: column;
    height: auto;
    margin-left: 2rem;
    padding-left: 1rem;
  }
  .tl-timeline-holder::before{
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(90deg);
  }
  .tl-timeline-graphic {
    height: 100%;
    margin-left: 0;
    width: 2rem;
  }
  .tl-timeline .tl-timeline-holder li {
    height: auto;
    margin: 1rem 0;
    margin-top: 0;
    text-align: left;
    width: auto;
  }
  .tl-timeline li:first-of-type {
    margin-top: 2rem;
  }
  .tl-timeline li::before {
    display: none;
  }
  .tl-timeline li svg, .tl-timeline li:nth-child(odd) svg {
    left: -2.5rem;
    position: absolute;
    top: 0.45rem;
  }
  .tl-timeline__end-of-line-arrowhead {
    bottom: -2.8rem;
    left: 0;
    right: auto;
    top: auto;
    transform: rotate(90deg);
  }
}

/* Styling added for specific customer's self-led training, Version 1.0.5 */

/* Sticky header */

.tl-progress-controls-container,
.toc__button-holder,
.toc__container {
  background: var(--color-background-1);
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-light);
}

.toc__container {
  top: 9rem;
}

@media only screen and (max-width: 60rem) {
  .tl-progress-controls-container {
    position: relative;
  }
  .tl-progress-indicator-holder {
    padding: 1rem 2rem !important
  }
}

section[data-bathtub="slide"] nav {
  position: relative;
  border-bottom: none;
}

/* When content in the slides receives focus, this ensures it is scrolled to appropriately beneath the sticky header */
section[data-bathtub="slide"] *:focus {
  scroll-margin-top: 8rem;
}

section[data-bathtub="slide"] *:active {
  scroll-margin-top: 0;
}

/* Close link styled as button */

.tl-close-button {
  background: var(--color-background-3);
  border: none;
  color: #fff;
  display: inline-block;
  font-weight: bold;
  min-width: 6rem;
  opacity: 0.8;
  padding: 0.25rem 1rem;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.tl-close-button:focus,
.tl-close-button:hover {
  background: var(--color-accent-1);
  color: #fff;
}

/* Module cards */

.tl-module-cards__container {
  counter-reset: section;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  list-style-type: none;
  padding-left: 0;
}

.tl-module-cards__card {
  border: 0.25rem solid var(--color-background-3);
  background-color: var(--color-background-3);
  border-radius: 0%;
  color: var(--color-text-3);
  display: block;
  text-decoration: none;
  padding: 0.5rem;
  width: 100%;
  text-align: center;
}

.tl-module-cards__card[aria-current="true"] {
  background-color: var(--color-background-1);
  border: 0.25rem solid var(--color-text-1);
  border-radius: 0;
  color: var(--color-text-1);
  font-weight: bold;
  padding: 0.5rem;
  width: 100%;

  background: var(--color-light);
}

.tl-module-cards__card::before {
  content: counter(section) ". ";
  counter-increment: section;
}

/* Visually hidden content */

.visually-hidden:not(:focus):not(:active) {
  clip: rect(0 0 0 0); 
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap; 
  width: 1px;
}

.theme-panel a.visually-hidden:focus {
  position: relative !important;
}

/* TL cards */

.tl-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  line-height: 100%;
  margin: 0;
  padding: 0;
}

.tl-cards li {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  line-height: inherit;
  margin: auto 0;
  max-height: 100%;
  text-align: center;
}

.tl-cards a:hover,.tl-cards a:focus, .tl-cards li[aria-current="true"] a:hover {
  background-color: var(--color-accent-1);
  color: var(--color-text-3);
  /* font-weight: bold; */
}

.tl-cards a,
.tl-cards .js-custom-link {
  background-color: var(--color-background-3);
  border: 0.25rem solid var(--color-background-3);
  color: var(--color-text-3);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
  line-height: 1.3rem;
  padding: 0.5rem;
  text-decoration: none;
}

.tl-cards li::before {
  display: none;
}

.tl-cards li[aria-current="true"]{
  border-radius: 0;
  padding: 0;
  width: 100%;
}

.tl-cards li[aria-current="true"] a{
  background-color: var(--color-background-1);
  border: 0.25rem solid var(--color-text-1);
  color: var(--color-text-1);
  font-weight: bold;

  background: var(--color-light);
}

.tl-cards--horizontal {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 1rem;
}

.tl-cards--horizontal li[aria-current="true"] {
  width: max-content;
}

.tl-cards li a code {
  color: inherit !important;
}

/* Exercise icon */

.theme-dark:not(.theme-template-title, section:last-of-type, [data-quizzical-score]) h1 {
  width: 90%;
}

.theme-dark:not(.theme-template-title, section:last-of-type, [data-quizzical-score], .theme-reflection-summary) h1::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20width%3D%222000%22%20height%3D%222000%22%20version%3D%221.0%22%20viewBox%3D%220%200%201500%201500%22%3E%0A%20%20%3Cellipse%20cx%3D%22-1103.349%22%20cy%3D%22663.251%22%20rx%3D%22136.598%22%20ry%3D%22136.614%22%20style%3D%22fill%3Anone%3Bfill-opacity%3A1%3Bstroke%3A%23ffc000%3Bstroke-width%3A92.1721%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20transform%3D%22rotate(-70.948)%20skewX(.005)%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M279.624%20414.379c-2.167-13.367-28.179-50.217-24.927-97.905%203.251-47.688%2035.765-106.214%2086.343-137.645%2050.578-31.43%20119.219-35.765%20163.656-14.089%2044.437%2021.677%2064.668%2069.363%2076.229%2065.389%2011.56-3.974%2014.43-59.219%2045.354-97.782%2030.923-38.563%2089.038-59.37%20144.675-55.757%2055.637%203.613%20108.38%2031.79%20135.115%2070.81%2026.734%2039.017%2027.457%2088.87%2035.766%2093.206%208.31%204.335%2024.205-36.848%2057.804-59.247%2033.599-22.4%2084.898-26.012%20125.722-18.425%2040.825%207.587%2071.17%2026.372%2096.821%2055.274%2025.65%2028.903%2046.604%2067.918%2047.688%20103.324%201.083%2035.405-17.702%2067.196-12.644%2080.202%205.058%2013.006%2033.958%207.226%2062.86%2017.703%2028.903%2010.477%2057.804%2037.21%2077.674%2069.725%2019.87%2032.515%2030.708%2070.81%2028.54%20108.02-2.167%2037.21-17.059%2072.668-38.77%2099.898-21.71%2027.23-48.657%2044.25-70.695%2051.113-22.038%206.865-38.656%203.252-38.656%2015.174%200%2011.923%2016.619%2039.379%2016.619%2074.06%200%2034.682-16.243%2075.644-36.193%20105.198-19.95%2029.555-41.842%2045.092-65.686%2055.93-23.844%2010.838-49.006%2016.59-73.333%2017.315-24.327.727-47.331-3.587-66.84-10.451-19.51-6.864-35.405-16.257-49.856-29.986-14.451-13.728-27.456-31.791-33.598-28.178-6.142%203.613-5.42%2028.9-17.703%2055.274-12.283%2026.373-37.397%2053.64-70.5%2071.464-33.102%2017.825-73.285%2025.718-107.245%2021.744-33.96-3.974-61.416-19.87-84.899-36.127-23.483-16.258-42.99-32.876-53.468-61.417-10.477-28.54-11.922-69.003-17.702-73.7-5.78-4.696-15.688%2025.734-41.13%2047.857-25.44%2022.123-64.36%2034.153-99.405%2037.043-35.044%202.89-65.39-3.613-94.292-18.786-28.902-15.174-56.358-39.017-74.783-69.726-18.425-30.708-27.818-68.28-24.205-96.098%203.613-27.818%2020.23-45.88%2014.089-52.384-6.142-6.503-35.044-1.445-65.751-13.006-30.708-11.56-62.653-39.246-82.808-70.563-20.155-31.316-27.38-65.275-27.019-97.79.362-32.515%208.31-63.583%2028.902-93.93%2020.593-30.348%2053.829-59.97%2081.286-69.725%2027.457-9.755%2049.133.36%2046.965-13.006z%22%20style%3D%22fill%3Anone%3Bstroke%3A%23ffc000%3Bstroke-width%3A92.1827%3Bstroke-linecap%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%3Bfill-opacity%3A1%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m743.497%20305.636-78.035%20201.59%20138.729%206.502-93.208%20333.815L886.56%20511.561l-130.058-26.012%2078.035-177.746z%22%20style%3D%22fill%3Anone%3Bstroke%3A%23ffc000%3Bstroke-width%3A85.0394%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%2F%3E%0A%3C%2Fsvg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: inline-block;
  height: 3.5rem;
  margin-bottom: -0.25rem;
  margin-left: 1rem;
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 3.5rem;
}

/* Case study icon */

.theme-purple:not(.theme-template-title, [data-quizzical-score]) h1 {
  width: 90%;
}

.theme-purple:not(.theme-template-title, [data-quizzical-score]) h1::after {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xml%3Aspace%3D%22preserve%22%20width%3D%222000%22%20height%3D%222000%22%20version%3D%221.0%22%20viewBox%3D%220%200%201500%201500%22%3E%0A%20%20%3Cellipse%20cx%3D%22-565.099%22%20cy%3D%221433.401%22%20rx%3D%22136.598%22%20ry%3D%22136.614%22%20style%3D%22fill%3Anone%3Bfill-opacity%3A1%3Bstroke%3A%23fff%3Bstroke-width%3A92.1721%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20transform%3D%22rotate(-70.948)%20skewX(.005)%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m498.23%20660.73%209.719%20141.899%2093.303-104.967M1009.454%20658.786l-9.719%20141.899-93.303-104.966%22%20style%3D%22fill%3A%23fff%3Bfill-opacity%3A1%3Bstroke%3A%23fff%3Bstroke-width%3A76.5354%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M1301.037%20402.37a557.61%20289.363%200%200%201-557.351%20289.364%20557.61%20289.363%200%200%201-557.87-289.095A557.61%20289.363%200%200%201%20742.65%20113.007a557.61%20289.363%200%200%201%20558.387%20288.826%22%20style%3D%22fill%3Anone%3Bfill-opacity%3A1%3Bstroke%3A%23fff%3Bstroke-width%3A91.8974%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%2F%3E%0A%20%20%3Cellipse%20cx%3D%22-837.717%22%20cy%3D%22643.801%22%20rx%3D%22136.598%22%20ry%3D%22136.614%22%20style%3D%22fill%3Anone%3Bfill-opacity%3A1%3Bstroke%3A%23fff%3Bstroke-width%3A92.1721%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20transform%3D%22rotate(-70.948)%20skewX(.005)%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m485.955%20412.09%20124.822-14.975%22%20style%3D%22fill%3Anone%3Bfill-opacity%3A1%3Bstroke%3A%23fff%3Bstroke-width%3A94.3428%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20transform%3D%22matrix(.02476%20.97205%20-.98074%20.0566%201106.14%20-260.581)%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m465.258%20389.765%20145.52%207.35%22%20style%3D%22fill%3Anone%3Bfill-opacity%3A1%3Bstroke%3A%23fff%3Bstroke-width%3A94.3428%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20transform%3D%22matrix(.02476%20.97205%20-.98074%20.0566%201115.818%20-69.63)%22%2F%3E%0A%20%20%3Cpath%20d%3D%22M155.505%201360.673c39.663-209.273%20322.384-207.807%20357.663%200M992.799%201360.311c39.662-209.273%20322.383-207.806%20357.662%200M485.955%20412.09l484.01-1.944%22%20style%3D%22fill%3Anone%3Bfill-opacity%3A1%3Bstroke%3A%23fff%3Bstroke-width%3A92.1825%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m485.955%20412.09%20484.01-1.944%22%20style%3D%22fill%3Anone%3Bfill-opacity%3A1%3Bstroke%3A%23fff%3Bstroke-width%3A94.34281061%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20transform%3D%22matrix(.7755%20.5866%20-.56712%20.80214%20415.47%20-342.498)%22%2F%3E%0A%20%20%3Cpath%20d%3D%22m485.955%20412.09%20484.01-1.944%22%20style%3D%22fill%3Anone%3Bfill-opacity%3A1%3Bstroke%3A%23fff%3Bstroke-width%3A105.759%3Bstroke-linecap%3Around%3Bstroke-linejoin%3Around%3Bstroke-dasharray%3Anone%3Bstroke-opacity%3A1%22%20transform%3D%22matrix(.63125%20-.59446%20.61421%20.62514%2043.443%20561.489)%22%2F%3E%0A%3C%2Fsvg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: inline-block;
  height: 3.5rem;
  margin-bottom: -0.25rem;
  margin-left: 1rem;
  position: absolute;
  right: 2.5rem;
  width: 3.5rem;
  top: 4.5rem;
}

/* Quizzical button styling */

.tl-quizzical__btn-answer {
  display: inline-block;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  border: none;
  text-align: left;
}

ol:has(.tl-quizzical__btn-answer) {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

li:has(.tl-quizzical__btn-answer) {
  list-style: none;
}

[data-answer] button[disabled]:hover {
  outline: none;
}

[data-answer] button[aria-pressed=true] {
  border: 0.15em solid var(--color-text-3);
}

[data-answer=true] button[aria-pressed=true][disabled] {
  background: var(--color-accent-6b);
  font-weight: bold;
  text-decoration: underline;
}

[data-answer=false] button[aria-pressed=true][disabled] {
  background: var(--color-accent-2b);
  font-weight: bold;
  text-decoration: underline;
}

/* Instruction icon */

.theme-instruction h1::after {
  
  background-image: url("data:image/svg+xml,%3Csvg width='63' height='81' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cmask id='a' fill='%23fff'%3E%3Crect y='6' width='63' height='75' rx='5'/%3E%3C/mask%3E%3Crect y='6' width='63' height='75' rx='5' stroke='%23000' stroke-width='12' mask='url(%23a)'/%3E%3Cpath fill='%23000' d='M17 12h29v6H17zM33 26h18v5H33zM33 38h18v5H33zM33 50h18v5H33zM33 62h18v5H33z'/%3E%3Cpath d='m14 27 3.5 3.5L25 23M14 39l3.5 3.5L25 35M14 51l3.5 3.5L25 47M14 63l3.5 3.5L25 59' stroke='%23000' stroke-width='3'/%3E%3Cpath d='M21 5a5 5 0 0 1 5-5h11a5 5 0 0 1 5 5v1H21V5Z' fill='%23000'/%3E%3Ccircle cx='31.5' cy='7.5' r='3.5' fill='%23F6F5F3'/%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  content: "";
  display: inline-block;
  height: 2.45rem;
  margin-bottom: -0.25rem;
  margin-left: 1rem;
  position: absolute;
  right: 2rem;
  top: 2rem;
  width: 1.9rem;
}

/* Timeline styling */

.tl-timeline {
  height: 2rem;
  justify-content: space-between;
  margin: 0;
  max-width: 100%;
  min-height: 20rem;
  padding: 9rem 0;
  position: relative;
}

.tl-timeline-holder {
  display: flex;
  flex-direction: row;
  height: 2rem;
  justify-content: space-between;
  list-style: none;
  margin: 0;
  max-width: 90%;
  padding: 0;
}

.tl-timeline li {
  height: 8rem;
  margin: 2.5rem 0rem;
  min-width: 8ch;
  position: relative;
  text-align: center;
  width: 8ch;
}

.tl-timeline li:nth-child(odd) {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-top: -8.5rem;
}

.tl-timeline li:nth-child(odd) svg {
  left: calc(50% - 0.5rem);
  top: 9.05rem;
}

.tl-timeline li::before {
  background-image: none;
  content: " ";
  height: 18rem;
  left: -2rem;
  position: absolute;
  top: -11rem;
  width: calc(100% + 4rem);
}

.tl-timeline li:nth-child(odd)::before {
  top: 0rem;
}

.tl-timeline li svg {
  content: url("data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='8' fill='%23fff'/%3E%3Ccircle cx='8' cy='8' r='6' fill='%236325B5'/%3E%3C/svg%3E");
  left: calc(50% - 0.5rem);
  position: absolute;
  top: -1.95rem;
}

.tl-timeline-year {
  display: block;
  font-weight: bold;
}

.tl-timeline-graphic {
  background-color: var(--color-background-3);
  display: block;
  height: 2rem;
  margin-left: 0.1rem;
  position: absolute;
  width: 99%;
}

.tl-timeline-holder::before {
  background-color: var(--color-background-1);
  content: '';
  height: 2rem;
  mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='svg-triangle'%3E%3Cpolygon points='0,0 50,50 0,100 '/%3E%3C/svg%3E") no-repeat 50% 50%;
  -webkit-mask: url("data:image/svg+xml, %3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' class='svg-triangle'%3E%3Cpolygon points='0,0 50,50 0,100 '/%3E%3C/svg%3E") no-repeat 50% 50%;
  mask-size: cover;
  min-width: 2rem;
  width: 2rem;

  background: var(--color-light);
}

.tl-timeline__end-of-line-arrowhead {
  background-color: var(--color-background-1);
  height: 4rem;
  min-width: 2rem;
  position: absolute;
  right: 0;
  top: 8rem;
  width: 2rem;

  background: var(--color-light);
}

@media only screen and (max-width: 60rem) {
  .tl-timeline {
    height: auto;
    margin-bottom: 3rem;
    padding: 0;
  }
  .tl-timeline-holder{
    flex-direction: column;
    height: auto;
    margin-left: 2rem;
    padding-left: 1rem;
  }
  .tl-timeline-holder::before{
    left: 0;
    position: absolute;
    top: 0;
    transform: rotate(90deg);
  }
  .tl-timeline-graphic {
    height: 100%;
    margin-left: 0;
    width: 2rem;
  }
  .tl-timeline .tl-timeline-holder li {
    height: auto;
    margin: 1rem 0;
    margin-top: 0;
    text-align: left;
    width: auto;
  }
  .tl-timeline li:first-of-type {
    margin-top: 2rem;
  }
  .tl-timeline li::before {
    display: none;
  }
  .tl-timeline li svg, .tl-timeline li:nth-child(odd) svg {
    left: -2.5rem;
    position: absolute;
    top: 0.45rem;
  }
  .tl-timeline__end-of-line-arrowhead {
    bottom: -2.8rem;
    left: 0;
    right: auto;
    top: auto;
    transform: rotate(90deg);
  }
}

/* Pyramid graphic */

.tl-pyramid-graphic-background {
  aspect-ratio: 1/1;
  background-color: var(--color-accent-1);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  max-height: 10rem;
}

.tl-pyramid-graphic {
  position: relative;
}

.tl-pyramid-graphic ol {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-around;
  left: 5rem;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  width: max-content;
}

.tl-pyramid-graphic li {
  background-color: white;
  border: 0.125rem solid var(--color-background-3);
  border-radius: 0.25rem;
  margin: 0.25rem 0;
  padding: 0.25rem 0.5rem;
  text-align: center;
  width: 100%;
}

.tl-pyramid-graphic li[aria-current="true"]{
  background-color: var(--color-accent-1);
  color: var(--color-text-3);
  font-weight: bold;
  text-decoration: underline;
}

/* Updated disclosure icon */

details summary,
[data-details] [data-summary] {
  cursor: pointer;
  font-weight: bold;
  list-style-image: none;
  list-style: none;
}

details summary::-webkit-details-marker,
details summary::marker,
[data-details] [data-summary]::marker {
  display:none;
}

.tl-disclosure {
  height: 1em;
  margin-right: 0.5em;
  width: 1em;
}

details:not([open]) > summary > .tl-disclosure--expanded,
[data-details][data-details-expanded] [data-summary] > .tl-disclosure--expanded {
  display: none;
}

details[open] > summary > .tl-disclosure--collapsed,
[data-details]:not([data-details-expanded]) [data-summary] > .tl-disclosure--collapsed {
  display: none;
}

[data-details][data-details-expanded] > *:not([data-summary]) {
  display: none;
}

details > details {
  padding: 0.5em;
  margin-top: 0.5em;
}

.tl-disclosure path{
  stroke: var(--color-text-1);
}

.tl-disclosure circle{
  fill: var(--color-text-1);
}

.theme-purple .tl-disclosure path{
  stroke: var(--color-text-3);
}

.theme-purple .tl-disclosure circle{
  fill: var(--color-text-3);
}

.theme-dark .tl-disclosure path{
  stroke: var(--color-accent-7);
}

.theme-dark .tl-disclosure circle{
  fill: var(--color-accent-7);
}

/* Keyboard keys */

.theme-dark kbd {
  border: 0.1rem solid white;
}

@media only screen and (max-width: 60rem) {
  [data-bathtub=slide] {
    background-size: 1.25rem;
    background-position-x: 0.35rem;
  }
  [data-bathtub=slide]:not(.theme-layout-full) {
    padding: 2rem;
  }
  [data-bathtub=slide].theme-dark.theme-template-title.theme-layout-2-1 {
    padding-top: 4rem;
  }
  .theme-dark:not(.theme-template-title, section:last-of-type, [data-quizzical-score]) h1 {
    width: 70%;
  }
  [data-bathtub=slide]:not(.theme-layout-full).theme-template-title footer {
    margin-left: 0;
    margin-right: 0;
  }
  .tl-progress-indicator-holder {
    flex-direction: column;
    gap: 0.5rem;
  }
  nav button,
  .tl-close-button {
    margin: 0.25rem 0;
  }
}

@media only screen and (max-width: 40rem) {
  main,
  nav {
    margin: 0;
  }
  .tl-pyramid-graphic {
    min-width: 6rem;
    min-height: 10rem;
  }
  .tl-pyramid-graphic-background {
    margin: 0 auto;
  }
  .tl-pyramid-graphic ol {
    left: 0;
    width: 100%;
  }
  ol, ul {
    padding-left: 1rem;
  }
  .theme-template-title .theme-client-logo {
    top: 5rem;
  }
  h1 {
    font-size: 1.2rem;
  }
  .theme-template-title footer {
    flex-direction: column;
    padding: 2rem;
  }
  blockquote {
    margin-left: 1rem;
  }
}

.theme-layout-1-1 .theme-panel {
  flex: 1;
  flex-grow: 1;
  min-width: auto;
}

.theme-layout-1-2 .theme-panel:first-of-type {
  flex: 1;
  flex-grow: 1;
  min-width: auto;
}

.theme-layout-1-2 .theme-panel:last-of-type {
  flex: 2;
  flex-grow: 2;
  min-width: auto;
}

/* Table of contents styling */

.toc__button-holder {
  align-items: center;
  background: #FFF;
  display: flex;
  flex-direction: row;
}
.toc__button {
  align-items: center;
  background-color: transparent;
  border: none;
  color: var(--color-background-3);
  display: flex;
  flex-direction: row;
  font-size: 0.8em;
  font-weight: bold;
  margin-left: 0.2em;
  margin-right: 0.2em;
  text-align: left;
  text-transform: capitalize;
}

.toc__button svg {
  height: min-content;
  width: 1.5rem;
  aspect-ratio: 1 / 1;
}

.toc__button[aria-expanded="false"] .tl-navigation--expanded {
  display: none;
}

.toc__button[aria-expanded="true"] .tl-navigation--collapsed {
  display: none;
}

.toc__container--collapsed {
  display: none;
}

.toc__outerList {
  background-color: white;
  padding-left: 0;
}

.toc__outerListItem {
  list-style: none;
}

.toc__innerList {
  list-style: disc;
}

.toc__outerListItem + .toc__outerListItem {
  margin-top: 0.5em;
}

.toc__container {
  counter-reset: moduleCounter;
  margin-left: -1rem;
  border-right: 0.2em solid var(--color-background-3);
  border-left: none;
  margin-bottom: -1rem;
}

.toc__innerListItem {
  list-style-type: none;
  position: relative;
}

.toc__innerListItem::before {
  position: absolute;
  left: -1.5rem;
  top: 0.7ch;
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-image: url("../images/bullet.svg");
  background-repeat: no-repeat;
  background-size: cover;
}

.toc__module {
  font-weight: bold;
}

.toc__module::before {
  display: block;
  counter-increment: moduleCounter;
  content: "Module";
  width: max-content;
  background-color: var(--color-background-3);
  padding: 0.2em 0.4em;
  color: #fff;
  text-decoration: none;
  font-size: 0.8em;
  border-bottom: 0;
  text-decoration-color: var(--color-background-3) !important;
  text-decoration: underline;
}

.toc__active-item {
  font-weight: bolder;
  text-decoration-thickness: 0.2em;
}

.js-custom-button {
  font-weight: normal;
}

[aria-current="true"].js-custom-button {
  font-weight: bold;
}

.js-custom-button[aria-disabled="true"] {
  color: var(--color-text-1);
  font-weight: normal;
  text-decoration: none;
}

.js-custom-button[aria-disabled="true"]:hover {
  cursor: text;
}

h2.tl-quiz__response-heading, 
h2.tl-quizzical-error__heading, 
h2.tl-textEntry_error-heading, 
h2.tl-codeEntry_error-heading,
h2.tl-codeEntry_feedback-heading {
  font-size: 1.2em;
  margin-top: 0.2em;
}

details img[src*="icon-"] {
  max-height: 8rem;
}

/* Side by side container */

.tl-sideBySide  {
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.tl-sideBySide--rowReverse {
  flex-direction: row-reverse;
}

.tl-sideBySide p {
  margin-bottom: 0;
}

.tl-sideBySide p:has(img[src*="user-stories"]) {
  flex-shrink: 3;
}

.tl-sideBySide img[src*="user-stories"] {
  margin: 0;
  outline: none !important;
}

@media (forced-colors: active) {
  input[type="radio"],
  input[type="checkbox"] {
    border-width: 0.1em;
  }
  
  .tl-progress-indicator-container::before {
    background-color: CanvasText;
  }

  .tl-disclosure path{
    stroke: LinkText !important;
  }
  
  .tl-disclosure circle{
    fill: LinkText !important;
  }
}

/* Resolves reflow issue */
@media (max-width: 50rem) {
  .theme-layout-2-1 .theme-panel:first-of-type {
    min-width: 100%;
  }
}

video + details {
  margin-top: 1rem;
}

video + details p {
  font-weight: normal;
}

section[data-bathtub="slide"].theme-dark video,
section[data-bathtub="slide"].theme-light video {
  aspect-ratio: 16/9;
  width:100%;
}

.theme-light input[type="radio"]:focus,
.theme-light input[type="checkbox"]:focus,
.theme-light input[type="radio"]:focus-visible,
.theme-light input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: rgb(255,255,255) 0px 0px 0px 3px, var(--color-background-3) 0px 0px 0px 6px, rgb(255, 255, 255) 0px 0px 0px 9px;
}

.theme-dark input[type="radio"]:focus,
.theme-dark input[type="checkbox"]:focus,
.theme-dark input[type="radio"]:focus-visible,
.theme-dark input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: var(--color-background-3) 0px 0px 0px 3px, rgb(255, 255, 255) 0px 0px 0px 6px, var(--color-background-3) 0px 0px 0px 9px
}

@media (forced-colors: active) {
  input[type="radio"]:focus-visible,
  input[type="checkbox"]:focus-visible {
    outline: 0.2em solid;
  }
}

/* Navigation UI layout */

body {
  display: grid;
  grid-template-columns: max-content 1fr;
  grid-template-rows: min-content auto min-content;
  min-height: 100vh;
}

main {
  grid-column: 2 / span 1;
  grid-row: 2 / span 1;
}

.tl-nav-controls-container {
  grid-column: 2 / span 1;
  grid-row: 1 / span 1;
  position: sticky;
  top: 0;
  z-index: 2;
}

div.toc__container {
  background: #FFFFFF;
  grid-column: 1 / span 1;
  grid-row: 2 / span 1;
  height: calc(100vh - 8.2rem);
  max-height: 100%;
  max-width: 25rem;
  overflow-y: scroll;
  padding: 1rem 2rem;
}

.footerNav__container {
  grid-column: 2 / span 1;
  margin: 1.5rem auto;
  max-width: 50rem;
  width: 100%;
  z-index: 2;
}

.footerNav__nav {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding-left: 0;
  justify-content: end;
}

@media only screen and (max-width: 60rem) {
  body {
    display: grid;
    flex-direction: column;
    grid-template-columns: 1fr;
    grid-template-rows: min-content min-content min-content auto min-content;
    overflow-x: hidden;
  }
  .tl-nav-controls-container {
    gap: 1rem;
    grid-column: 1 / span 1;
    grid-row: 3 / span 1;
    max-width: 100vw;
  }
  .tl-progress-controls-container nav {
    padding: 0;
  }
  .tl-progress-controls-container button{
    margin: 0;
  }
  .tl-progress-indicator-holder {
    flex-wrap: wrap;
    max-width: 100%;
  }
  main {
    grid-column: 1 / span 1;
    grid-row: 4 / span 1;
    max-width: 100vw;
  }
  pre, code {
    max-width: 100%;
    overflow-x: scroll;
    text-wrap: auto;
    white-space: break-spaces;
    width: 100%;
  }
  nav:has(div[class^="tl-nav-variant"]),
  div[class^="tl-nav-variant"] {
    flex-wrap: wrap;
  }
  nav > div[class^="tl-nav-variant"] {
    gap: 1rem;
  }
  .toc__button-holder {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
    padding: 1rem 2rem;
    padding-bottom: 0.2rem;
    position: relative;
  }
  div.toc__container {
    border-bottom: 0.2em solid var(--color-background-3);
    border-right: none;
    grid-column: 1 / span 1;
    grid-row: 2 / span 1;
    height: max-content;
    margin-left: 0;
    max-width: 100%;
    overflow-y: visible;
    position: relative;
    top: 0;
  }
  .footerNav__container {
    grid-column: 1 / span 1;
    grid-row: 5 / span 1;
    padding: 0rem 2rem;
    width: 100%;
  }
  .footerNav__nav {
    margin: 0;
    padding: 0;
  }
  .tl-progress-controls-container {
    /* align-items: flex-start !important;
    flex-direction: column !important; */
    margin: 0 !important;
    padding: 1rem 2rem !important;
  }
  img[src*="hearing.svg"],
  img[src*="seeing.svg"],
  img[src*="moving.svg"],
  img[src*="thinking.svg"]{
    max-width: 20rem;
    width: 100%;
  }
}
.theme-light[data-bathtub="slide"] * + *:last-child:not(.tl-modal) {
  margin-bottom: 0;
}