.NQoA565PVFRY8qPmGsrA {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--cin-radius-pill);
  font-family: var(--cin-font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 20px;
  color: var(--cin-on-accent);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.NQoA565PVFRY8qPmGsrA:focus-visible {
  outline: 2px solid var(--cin-text);
  outline-offset: 2px;
}

.Z_0EjWy8bRng57n3qYaw {
  padding: 10px 10px 10px 24px;
  background-color: var(--cin-accent);
  letter-spacing: -0.5px;
}

.Z_0EjWy8bRng57n3qYaw:hover {
  background-color: var(--cin-accent-hover);
}

.a4s7kk5ZJIBIO092xIDg {
  padding: 15px 20px;
  background-color: var(--cin-tint-10);
  color: var(--cin-text);
}

.a4s7kk5ZJIBIO092xIDg:hover {
  background-color: var(--cin-accent-hover);
}

.GNqdeXIi2v5tRznToFJC {
  gap: 0.5rem;
  padding: 7px 20px 7px 0;
  background-color: transparent;
  color: var(--cin-text);
}

.GNqdeXIi2v5tRznToFJC:hover {
  background-color: var(--cin-accent-hover);
}

.w7icDH9r_dzIEtwg4ynD {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #000000;
  font-size: 1.1rem;
}

.N83rvhtRcaYaqNtUk8IG {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-left: 10px;
  font-size: 1.25rem;
}

/* Just the white circle, like the site's mobile list button. */
.G8b3x396GeBlZ5H5TaWE {
  padding: 0;
}

.lz3wrheyGauBnsW7qrSf {
  width: 100%;
}

/* Matches the site, where mobile buttons get even 16px side padding. */
@media (max-width: 479px) {
  .Z_0EjWy8bRng57n3qYaw:not(.G8b3x396GeBlZ5H5TaWE) {
    gap: 12px;
    padding-inline: 16px;
  }

  .a4s7kk5ZJIBIO092xIDg {
    padding-inline: 16px;
  }

  .GNqdeXIi2v5tRznToFJC {
    padding-right: 16px;
  }

  .N83rvhtRcaYaqNtUk8IG {
    margin-left: 12px;
  }
}

.fGI3HYITa4pC9L4ufKzd {
  --columns: 0.75fr 1.75fr 1.25fr 0.5fr 1.5fr;
  width: 100%;
}

.g5hrvYqM7OlcJZdrt3Ey,
.UAMJHl1cCQ2lXtwFkO6e {
  display: grid;
  grid-template-columns: var(--columns);
  gap: 16px;
  align-items: center;
  padding: 2rem 1rem;
}

.g5hrvYqM7OlcJZdrt3Ey {
  border-bottom: 1px solid var(--cin-tint-20);
  font-family: var(--cin-font-heading);
  font-size: 1.5rem;
  text-transform: uppercase;
}

.JB0zLDZFzBEazsImIorJ {
  text-align: right;
}

.ywiBIEZCsyvCnZYuojyw {
  margin: 0;
  padding: 0;
  list-style: none;
}

.UAMJHl1cCQ2lXtwFkO6e {
  transition: background-color 0.35s ease;
}

.UAMJHl1cCQ2lXtwFkO6e:nth-child(2n) {
  background-color: var(--cin-tint-05);
}

.UAMJHl1cCQ2lXtwFkO6e:hover {
  background-color: var(--cin-tint-10);
}

.NPVk1h7adGGY9csz4lPS {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: var(--cin-radius-sm);
  background-color: var(--cin-accent);
  color: rgb(255 255 255 / 0.9);
  font-size: 1.2rem;
  text-decoration: none;
  transition: background-color 0.35s ease;
}

a.NPVk1h7adGGY9csz4lPS:hover {
  background-color: var(--cin-accent-hover);
}

.hcWwCUGZD4O9VI1w3SkZ {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nLBDgjBfdAeoWUWZa83Q {
  color: var(--cin-text-muted);
  font-size: 0.85rem;
}

.fpmCuFWRetdD2dWdmYlw {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
}

.c1EbgnYCfX8IeOUsxNQi {
  display: none !important;
}

@media (max-width: 767px) {
  .h0aL4mFX905v6_bG_5or {
    display: none;
  }

  .g5hrvYqM7OlcJZdrt3Ey span:nth-child(3),
  .g5hrvYqM7OlcJZdrt3Ey span:nth-child(4) {
    display: none;
  }

  .g5hrvYqM7OlcJZdrt3Ey,
  .UAMJHl1cCQ2lXtwFkO6e {
    grid-template-columns: 4.375rem minmax(0, 1fr) auto;
  }

  .UAMJHl1cCQ2lXtwFkO6e {
    padding-block: 1.5rem;
  }

  .NPVk1h7adGGY9csz4lPS {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0;
    font-size: 0.9rem;
  }

  .yaqbS7grlHmxDJRATSgS {
    font-size: 1rem;
  }

  .SMNceJu7ay_1cwBTKxj5 {
    display: none !important;
  }

  .c1EbgnYCfX8IeOUsxNQi {
    display: inline-flex !important;
  }
}

.eVdkJeFdqAAKW3p3bMnQ {
  width: 100%;
  color: var(--cin-text);
  font-family: var(--cin-font-body);
  line-height: var(--cin-line-height);
}

.ARIlyTc8ASrCGR_ZV4JN {
  max-width: var(--cin-container);
  margin-inline: auto;
  padding-inline: var(--cin-gutter);
}

/* Status tabs */
.AMa3iqmOHHhwQcShRCHH {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin-top: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cin-tint-20);
}

.MTYU0ZW3ZZqpUNjJj8u5 {
  padding: var(--cin-button-padding);
  border: 0;
  border-radius: var(--cin-radius);
  background-color: transparent;
  color: rgb(255 255 255 / 0.6);
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1.3;
  cursor: pointer;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.MTYU0ZW3ZZqpUNjJj8u5:hover {
  background-color: var(--cin-tint-05);
  color: rgb(255 255 255 / 0.8);
}

.MTYU0ZW3ZZqpUNjJj8u5:focus-visible,
.DiM6A7gn0vx7e3v3BUGV:focus-visible,
.QsXcNp0mQhQG9wI3ZSw5 select:focus-visible {
  outline: 2px solid var(--cin-text);
  outline-offset: 2px;
}

.FS1GDmxlxDR0BWOYaCIg,
.FS1GDmxlxDR0BWOYaCIg:hover {
  background-color: var(--cin-accent);
  color: var(--cin-on-accent);
  font-weight: 600;
}

/* Filters */
.ImKOTPZyqv5USrtCuyCj {
  display: flex;
  gap: 16px;
  padding-top: 1.5rem;
}

.QsXcNp0mQhQG9wI3ZSw5 {
  position: relative;
  display: block;
  flex: 1 1 0;
  min-width: 0;
}

.QsXcNp0mQhQG9wI3ZSw5 select {
  width: 100%;
  min-height: 70px;
  padding: 0 3rem 0 12px;
  border: 2px solid #1a2028;
  border-radius: 8px;
  background-color: rgb(255 255 255 / 0.12);
  color: var(--cin-text);
  font-family: inherit;
  font-size: var(--cin-h4-size);
  font-weight: 500;
  appearance: none;
  cursor: pointer;
}

.QsXcNp0mQhQG9wI3ZSw5 select:focus {
  border-color: var(--cin-accent);
}

.QsXcNp0mQhQG9wI3ZSw5 option {
  background-color: var(--cin-surface);
  color: var(--cin-text);
}

.SCErWpbMOLXDlNfRMXUg {
  position: absolute;
  top: 50%;
  right: 1rem;
  font-size: 1.25rem;
  transform: translateY(-50%);
  pointer-events: none;
}

.ffQUylUT7qBJR93RCJK8 {
  display: flex;
  flex: none;
  align-self: center;
  overflow: hidden;
  border-radius: 5px;
}

.DiM6A7gn0vx7e3v3BUGV {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  min-height: 66px;
  border: 0;
  background-color: var(--cin-tint-10);
  color: var(--cin-text);
  font-size: 2.25rem;
  cursor: pointer;
  transition: background-color 0.25s ease;
}

.DiM6A7gn0vx7e3v3BUGV:hover {
  background-color: var(--cin-tint-20);
}

.W8MylvL2CtOFMbazuNcl,
.W8MylvL2CtOFMbazuNcl:hover {
  background-color: var(--cin-accent);
}

/* Results */
.BlQRC6_9xtibBDDlP3e0 {
  margin-top: 0.5rem;
}

.WlcqtUzjrnK2R3TUYnr0 {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.TDyTK5UOb33oqZKSuU37 {
  display: flex;
  justify-content: center;
  padding-top: 2rem;
}

.QpEuZn5K3wW13OAA4Zax {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 3rem 0;
}

.vrwQGkBzhtOugypypwmP {
  margin: 0;
  font-family: var(--cin-font-heading);
  font-size: 1.5rem;
  line-height: 1.3;
  text-transform: uppercase;
}

.MhZVH1Y8dNFVc8ZOaucM {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skeleton while data components register */
.Q_Qlpjck1Fqiv7261Vwa {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  padding-block: 1.2rem;
}

.U0Wn_1f_2SZdNutXH2FI {
  display: grid;
  grid-template-columns: 234px minmax(0, 1fr);
  gap: 1rem;
}

.KwqT0FFEQbRD9QBS5dNw,
.tjn3CAwIXcLnGJUh3eXU span {
  border-radius: var(--cin-radius);
  background: linear-gradient(
    90deg,
    var(--cin-tint-05) 25%,
    var(--cin-tint-10) 50%,
    var(--cin-tint-05) 75%
  );
  background-size: 200% 100%;
  animation: GTj0RVkHDhuewZiOQA5L 1.4s ease-in-out infinite;
}

.KwqT0FFEQbRD9QBS5dNw {
  aspect-ratio: 2 / 3;
}

.tjn3CAwIXcLnGJUh3eXU {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--cin-border);
  border-radius: var(--cin-radius);
}

.tjn3CAwIXcLnGJUh3eXU span {
  display: block;
  height: 1.1rem;
}

@keyframes GTj0RVkHDhuewZiOQA5L {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .KwqT0FFEQbRD9QBS5dNw,
  .tjn3CAwIXcLnGJUh3eXU span {
    animation: none;
  }
}

@media (max-width: 767px) {
  .U0Wn_1f_2SZdNutXH2FI {
    grid-template-columns: minmax(0, 1fr);
  }

  .KwqT0FFEQbRD9QBS5dNw {
    display: none;
  }
}

/* As on the site, the tabs and filters only change layout on phones. */
@media (max-width: 479px) {
  .AMa3iqmOHHhwQcShRCHH {
    margin-top: 0;
    justify-content: space-between;
  }

  .MTYU0ZW3ZZqpUNjJj8u5 {
    padding-inline: 1em;
  }

  .ImKOTPZyqv5USrtCuyCj {
    flex-direction: column;
    gap: 1.3rem;
    padding-top: 1rem;
  }

  .QsXcNp0mQhQG9wI3ZSw5 select {
    min-height: 50px;
  }

  .ffQUylUT7qBJR93RCJK8 {
    align-self: stretch;
    margin-top: 0.6rem;
  }

  .DiM6A7gn0vx7e3v3BUGV {
    flex: 1;
    font-size: 1.5rem;
  }
}

.qpUWjAYq0YWga1_ijcsB {
  display: grid;
  grid-template-columns: var(--poster-width, 234px) minmax(0, 1fr);
  gap: 1rem;
  width: 100%;
  padding-block: 1.2rem;
}

.FQtwm0oLbWYT8codIk1t {
  grid-template-columns: minmax(0, 1fr);
}

.wTZ_cMYkP_Gf6S7QpstC {
  align-self: start;
  min-width: 0;
}

.agXIG5Rl4ZGXPLdLKMOz {
  position: relative;
  overflow: hidden;
  background-color: var(--cin-tint-05);
}

.nsw6O3Oxam4fNVyLOwdU {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 3;
  object-fit: cover;
}

.tz2sOEIDWHnzniukvypu {
  display: flex;
  align-items: flex-end;
  aspect-ratio: 2 / 3;
  padding: 1rem;
  font-family: var(--cin-font-heading);
  font-size: 1.5rem;
  line-height: 1.1;
  text-transform: uppercase;
  background: linear-gradient(160deg, var(--cin-accent), var(--cin-surface));
}

.Ypa5ik_vky5HdSvS6zrC {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(0 0 0 / 0.3);
}

/* The card's play button sits between the trailer button's own sizes. */
.Ypa5ik_vky5HdSvS6zrC > button {
  --play-size: 72px;
  --play-icon: 18px;
}

.ov1eUvZlKLmLnip6rEdE {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  min-width: 0;
  padding: 1.5rem 2rem 2rem;
  border: 1px solid var(--cin-border);
  border-radius: var(--cin-radius);
  background-color: rgb(255 255 255 / 0.09);
}

/* Label, with the content rating icons pinned to the corner. Rendered even when empty, so every
   title starts at the same height, as on the site. */
.lGRkAXKoqtZAT55c3iXm {
  display: flex;
  align-items: flex-start;
}

.oT2XoKtvr4BpmRJaV9Mw {
  position: absolute;
  top: 1rem;
  right: 1rem;
}

/* The negative margin and the title's top margin put the label right above the title. */
.c1EtNXXwYH1MX0UcYKEn {
  margin-bottom: -1rem;
  padding: 0.5rem 1rem;
  border-radius: var(--cin-radius-sm);
  background-color: var(--cin-tint-10);
}

/* An h4 on the site with the h2 size, so it keeps the h4 weight and top margin. */
.KTmBrSRQqVCf1B6x3pzh {
  max-width: 80%;
  margin: 10px 0 0;
  font-family: var(--cin-font-heading);
  font-size: var(--cin-h2-size);
  font-weight: var(--cin-h4-weight);
  line-height: var(--cin-h2-line-height);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}

/* Reserves about three lines, so short descriptions don't make the card jump. */
.Wur_Wvg1d657qplHPBrf {
  min-height: 4.5em;
  margin: 0 0 0.75em;
  color: rgb(255 255 255 / 0.5);
}

.LAJquntgRd19pvhtUpP7 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  overflow: hidden;
}

.I1Y2fhqiUyJ1A0O5L5Iy {
  width: 100%;
  min-width: 0;
}

/* "Voorstellingen", only shown on phones, as on the site. */
.sqPZbjwt8pfTBgb8gQy7 {
  display: none;
  margin: 0 0 8px;
  font: 500 15px / 1.3 var(--cin-font-ui);
}

/* Last slide when "Max showtimes" cuts the row short. */
.T51jfx_zCgIWErw9C5TO {
  display: flex;
  flex: 0 0 120px;
  align-self: stretch;
}

.rTofj76Ex6vLqDhKWVrT {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  border: 1px dashed var(--cin-tint-20);
  border-radius: var(--cin-radius-sm);
  color: var(--cin-text);
  font-size: 0.85rem;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.35s ease;
}

.rTofj76Ex6vLqDhKWVrT:hover {
  background-color: var(--cin-tint-10);
}

.rTofj76Ex6vLqDhKWVrT:focus-visible {
  outline: 2px solid var(--cin-text);
  outline-offset: -2px;
}

.fYSZ6RQk4R2m4GU4hkHW {
  font-family: var(--cin-font-heading);
  font-size: 1.6rem;
  line-height: 1.1;
}

.LVLgPZpeup8fPwlF0Ctb {
  margin: 0;
  padding: 0.6rem 1rem;
  border-radius: var(--cin-radius-sm);
  background-color: var(--cin-tint-10);
  font-family: var(--cin-font-heading);
  font-size: 1.25rem;
  text-transform: uppercase;
}

.R9FM8Y8WUsbYAPEPyCnL {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: auto;
}

/* The site's card button: the accent pill with less padding than the other primary buttons. */
.qpUWjAYq0YWga1_ijcsB a.tRR6jEc_OkWnmoeuGfXd {
  padding: 6px 10px 6px 20px;
}

.qpUWjAYq0YWga1_ijcsB .fMXS5KvMFM5vyOw6GaUB {
  gap: 0.4rem 0.25rem;
}

.qpUWjAYq0YWga1_ijcsB .fMXS5KvMFM5vyOw6GaUB li {
  padding: 0.2rem 0.5rem;
}

/* Phones: one grid with the poster beside the label, title and genres, then the showtimes and
   the "Meer info" bar across the full width. The body and footer wrappers step aside
   (display: contents), so their children are placed in the card's grid directly. */
@media (max-width: 767px) {
  .qpUWjAYq0YWga1_ijcsB {
    grid-template-columns: 140px minmax(0, 1fr);
    grid-template-rows: auto auto auto 1fr auto auto;
    grid-template-areas:
      'poster meta'
      'poster title'
      'poster genres'
      'poster .'
      'schedule schedule'
      'button button';
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--cin-tint-20);
    border-radius: 8px;
    background-color: #1c1c1c;
  }

  .FQtwm0oLbWYT8codIk1t {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'meta' 'title' 'genres' '.' 'schedule' 'button';
  }

  .wTZ_cMYkP_Gf6S7QpstC {
    grid-area: poster;
    margin: 18px 0 18px 18px;
  }

  .Ypa5ik_vky5HdSvS6zrC > button {
    --play-size: 44px;
    --play-icon: 14px;
  }

  .tz2sOEIDWHnzniukvypu {
    padding: 0.5rem;
    font-size: 1rem;
  }

  .ov1eUvZlKLmLnip6rEdE,
  .R9FM8Y8WUsbYAPEPyCnL {
    display: contents;
  }

  .lGRkAXKoqtZAT55c3iXm {
    grid-area: meta;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin: 18px 18px 0;
  }

  .oT2XoKtvr4BpmRJaV9Mw {
    position: static;
    --rating-gap: 5px;
  }

  .c1EtNXXwYH1MX0UcYKEn {
    margin-bottom: 0;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.3;
  }

  .KTmBrSRQqVCf1B6x3pzh {
    grid-area: title;
    max-width: none;
    margin: 8px 18px 0;
    font-family: var(--cin-font-ui);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .Wur_Wvg1d657qplHPBrf {
    display: none;
  }

  .qpUWjAYq0YWga1_ijcsB .fMXS5KvMFM5vyOw6GaUB {
    grid-area: genres;
    gap: 2px 12px;
    margin: 6px 18px 0;
  }

  .qpUWjAYq0YWga1_ijcsB .fMXS5KvMFM5vyOw6GaUB li {
    padding: 0;
    border-radius: 0;
    background: none;
    color: rgb(255 255 255 / 0.55);
    font-size: 14px;
    line-height: 1.3;
  }

  .I1Y2fhqiUyJ1A0O5L5Iy {
    grid-area: schedule;
    padding: 14px 0 16px 18px;
    background-color: #292929;
  }

  .sqPZbjwt8pfTBgb8gQy7 {
    display: block;
  }

  .LVLgPZpeup8fPwlF0Ctb {
    margin-right: 18px;
  }

  .qpUWjAYq0YWga1_ijcsB a.tRR6jEc_OkWnmoeuGfXd {
    grid-area: button;
    width: 100%;
    padding: 12px 16px;
    border-radius: 0 0 7px 7px;
    background-color: #4a4a4a;
    font-family: var(--cin-font-ui);
    font-size: 16px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .qpUWjAYq0YWga1_ijcsB a.tRR6jEc_OkWnmoeuGfXd:hover {
    background-color: #5a5a5a;
  }

  /* No arrow circle in the full-width bar. */
  .tRR6jEc_OkWnmoeuGfXd > :last-child:not(:first-child) {
    display: none;
  }
}

@media (max-width: 479px) {
  .qpUWjAYq0YWga1_ijcsB {
    grid-template-columns: 110px minmax(0, 1fr);
  }

  .FQtwm0oLbWYT8codIk1t {
    grid-template-columns: minmax(0, 1fr);
  }

  .wTZ_cMYkP_Gf6S7QpstC {
    margin: 14px 0 14px 14px;
  }

  .lGRkAXKoqtZAT55c3iXm {
    margin: 14px 14px 0;
  }

  .oT2XoKtvr4BpmRJaV9Mw {
    --rating-size: 1.4rem !important;
  }

  .KTmBrSRQqVCf1B6x3pzh {
    margin: 6px 14px 0;
    font-size: 20px;
    line-height: 1.25;
  }

  .qpUWjAYq0YWga1_ijcsB .fMXS5KvMFM5vyOw6GaUB {
    margin: 4px 14px 0;
  }

  .I1Y2fhqiUyJ1A0O5L5Iy {
    margin-top: 10px;
    padding: 14px 0 16px 14px;
  }

  .LVLgPZpeup8fPwlF0Ctb {
    margin-right: 14px;
  }

  .qpUWjAYq0YWga1_ijcsB a.tRR6jEc_OkWnmoeuGfXd {
    font-size: 15px;
  }

  .T51jfx_zCgIWErw9C5TO {
    flex-basis: 142px;
  }
}

.gQzFeFmzi7_kFXKPa7_M {
  position: relative;
}

/* A native scroller, so touch swipe and keyboard scrolling work; the scrollbar is hidden. */
.vHrOlEIrkphZ5r3h57MF {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.vHrOlEIrkphZ5r3h57MF::-webkit-scrollbar {
  display: none;
}

/* Half outside the row, vertically centred on the tiles. */
.JlJvQRfM_aDAuO8dNo8j {
  position: absolute;
  top: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: 50%;
  background-color: rgb(20 20 20 / 0.9);
  color: #ffffff;
  font-size: 1.25rem;
  cursor: pointer;
  translate: 0 -50%;
  transition:
    background-color 0.2s ease,
    opacity 0.2s ease;
}

.JlJvQRfM_aDAuO8dNo8j:hover {
  background-color: rgb(60 60 60 / 0.95);
}

.JlJvQRfM_aDAuO8dNo8j:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

.JlJvQRfM_aDAuO8dNo8j:disabled {
  opacity: 0;
  pointer-events: none;
}

.MQmwEqxSGHRO5ttHQRzk {
  left: -18px;
}

.hfCoiY1Z8PajuEmbGGpR {
  right: -18px;
}

/* Touch screens and phones swipe instead. */
@media (hover: none), (max-width: 767px) {
  .JlJvQRfM_aDAuO8dNo8j {
    display: none;
  }
}

/* On phones the row runs to the card's right edge, with room after the last tile. */
@media (max-width: 767px) {
  .vHrOlEIrkphZ5r3h57MF {
    gap: 14px;
    padding-right: 18px;
  }
}

@media (max-width: 479px) {
  .vHrOlEIrkphZ5r3h57MF {
    padding-right: 14px;
  }
}

/* The site's "mc-slide": a fixed-width tile in the card's horizontal showtime slider. */
.hh0qhDWjteszVz3tg2vM {
  position: relative;
  display: flex;
  flex: 0 0 120px;
  flex-direction: column;
  width: 120px;
  overflow: hidden;
  border-radius: var(--cin-radius-sm);
  background-color: #000000;
  color: #ffffff;
  line-height: 1.3;
  text-align: center;
  scroll-snap-align: start;
}

.hi7pzy0sVnpZFV_h_c3n {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 24px;
  background-color: #3d3d3d;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.i5ecik97YMklz0wCNG6g {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8px;
}

/* Without a show type bar, the tile still ends a little below the time. */
.RMAiJWxJdREYDpS5xM3K .i5ecik97YMklz0wCNG6g {
  padding-bottom: 10px;
}

/* Room badge and picture and sound logos, wrapping when both don't fit. */
.iQcm5wx7Rrj8U7wVA6Kf {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  max-width: 100%;
  padding: 0 6px;
}

.HK3uDuIEgvYO7DC9kq8U {
  padding: 2px 7px;
  border-radius: 4px;
  background-color: var(--cin-accent-hover);
  font-size: 12px;
  white-space: nowrap;
}

.bl2CN_zZmuGaqiQZSUZU {
  padding: 2px 0 6px;
  color: inherit;
  font-family: var(--cin-font-heading);
  font-size: 29px;
  line-height: 1.1;
  text-decoration: none;
}

/* The ticket link covers the whole tile. */
a.bl2CN_zZmuGaqiQZSUZU::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

a.bl2CN_zZmuGaqiQZSUZU:focus-visible {
  outline: none;
}

a.bl2CN_zZmuGaqiQZSUZU:focus-visible::after {
  outline: 2px solid #ffffff;
  outline-offset: -2px;
}

.uN_EceyxjNYnKTUbYg5f {
  margin: -4px 0 6px;
  padding: 0 6px;
  color: var(--cin-text-muted);
  font-size: 11px;
  line-height: 1.2;
}

.WNATW2UByVVbJBE2dCw9 {
  opacity: 0.55;
}

.WNATW2UByVVbJBE2dCw9 .bl2CN_zZmuGaqiQZSUZU {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.BZQpomdIcjabPMeXwQe9 {
  margin-top: auto;
  padding: 3px 6px;
  overflow: hidden;
  background-color: #5a5a5a;
  color: rgb(255 255 255 / 0.8);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: background-color 0.2s ease;
}

.Li_QXR5RH75SbfRrY2lh:hover .hi7pzy0sVnpZFV_h_c3n {
  background-color: #2b2b2b;
}

.Li_QXR5RH75SbfRrY2lh:hover .BZQpomdIcjabPMeXwQe9 {
  background-color: #444444;
}

/* Phones: outlined tiles, larger logos and red show type bars. */
@media (max-width: 767px) {
  .hh0qhDWjteszVz3tg2vM {
    --format-size: 24px;
    border: 1px solid #2e2e2e;
    border-radius: 4px;
  }

  .BZQpomdIcjabPMeXwQe9 {
    background-color: color-mix(in srgb, var(--cin-accent-hover) 85%, #000000);
    color: #ffffff;
  }

  .Li_QXR5RH75SbfRrY2lh:hover .BZQpomdIcjabPMeXwQe9 {
    background-color: color-mix(in srgb, var(--cin-accent-hover) 70%, #000000);
  }
}

@media (max-width: 479px) {
  .hh0qhDWjteszVz3tg2vM {
    flex-basis: 142px;
    width: 142px;
  }

  .hi7pzy0sVnpZFV_h_c3n {
    height: 30px;
    font-size: 15px;
  }

  .i5ecik97YMklz0wCNG6g {
    padding-top: 10px;
  }

  .HK3uDuIEgvYO7DC9kq8U {
    padding: 2px 8px;
    font-size: 15px;
  }

  .bl2CN_zZmuGaqiQZSUZU {
    font-size: 37px;
  }

  .BZQpomdIcjabPMeXwQe9 {
    font-size: 15px;
  }
}