.Toastify > .Toastify__toast-container {
  z-index: 11000;
  flex-direction: column;
  align-items: flex-end;
  display: flex;
  top: 60px;
  overflow: visible;
}

.Toastify > .Toastify__toast-container > .Toastify__toast {
  background-color: var(--background);
  border-radius: var(--border-radius-tiny-u);
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  box-shadow: 0 1px 10px 0 var(--shadow), 0 2px 15px 0 var(--shadow);
  color: var(--text-foreground-1);
  font: 16px var(--regular-font);
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-inline: 30px;
  display: flex;
  overflow: visible;
}

.Toastify > .Toastify__toast-container > .Toastify__toast:before {
  content: "";
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  position: absolute;
  top: 50%;
  left: -24px;
}

.Toastify > .Toastify__toast-container > .Toastify__toast:after {
  background-color: var(--notification-picto-background-overlay);
  color: #fff;
  content: "";
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  display: flex;
  position: absolute;
  top: 50%;
  left: -20px;
}

.Toastify > .Toastify__toast-container > .Toastify__toast > .Toastify__progress-bar {
  border-radius: 0 0 var(--border-radius-tiny-u) var(--border-radius-tiny-u);
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--error:before {
  background-color: var(--error);
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--error:after {
  content: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 240%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27white%27 width=%2724px%27 height=%2724px%27 style=%27margin-top: 4px%27%3E%3Cpath d=%27M28.89,47.86c-6.14-6.13-5.39-13.24,1-19.61,6.13-6.13,13.47-7.11,19.61-1L101,78.74l49.27-49.26c6.37-6.38,13.48-5.64,19.6.48,6.38,6.38,7.36,13.73,1,20.1L121.54,99.33l50.74,50.74c6.36,6.37,5.14,13.47-1,19.6-6.37,6.37-13.24,7.35-19.6,1L101,119.92,49.72,171.15c-6.37,6.37-13.72,5.4-20.1-1-6.12-6.12-6.86-13.23-.49-19.6L80.36,99.33Z%27 /%3E%3C/svg%3E");
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--error > .Toastify__progress-bar {
  background-color: var(--error);
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--info:before {
  background-color: var(--info);
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--info:after {
  content: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 240%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27white%27 width=%2724px%27 height=%2724px%27 style=%27margin-top: 4px%27%3E%3Cpath d=%27M1156.28-278.29c-35.37-1-62.91-14.61-83.59-41.41a3.24,3.24,0,0,1-.48-3.76c14-31.1,38.09-49.66,72.62-54.12,39.67-5.14,78.73,18,93.36,54.47a2.83,2.83,0,0,1-.42,3.15c-17,22.32-39.37,36-67.59,40.35-4.93.75-10,.95-13.9,1.32%27 /%3E%3Cpath d=%27M1196.82-436.56a41.72,41.72,0,0,1-41.9,41.6A41.78,41.78,0,0,1,1113.48-437c.11-22.73,19-41.35,41.91-41.26a41.8,41.8,0,0,1,41.43,41.73%27 /%3E%3Cpath d=%27M1156.28-278.29c-35.37-1-62.91-14.61-83.59-41.41a3.24,3.24,0,0,1-.48-3.76c14-31.1,38.09-49.66,72.62-54.12,39.67-5.14,78.73,18,93.36,54.47a2.83,2.83,0,0,1-.42,3.15c-17,22.32-39.37,36-67.59,40.35-4.93.75-10,.95-13.9,1.32%27 /%3E%3Cpath d=%27M1196.82-436.56a41.72,41.72,0,0,1-41.9,41.6A41.78,41.78,0,0,1,1113.48-437c.11-22.73,19-41.35,41.91-41.26a41.8,41.8,0,0,1,41.43,41.73%27 /%3E%3Cpath d=%27M102.07.06A99.87,99.87,0,0,0,0,99.85C-.25,155.08,44.71,200,99.88,200,154.54,200.57,200,155.23,200,100.4A100,100,0,0,0,102.07.06Zm-2,182.33c-45.66,0-82.84-36.9-82.45-82.57s36.7-82.79,84-82.17c44.67.59,81,36.9,80.86,83.18C182.28,145.86,145.47,182.39,100,182.39Z%27 /%3E%3Cpath d=%27M90.47,62.72a3.45,3.45,0,0,1-1-2.54v-11a3.62,3.62,0,0,1,1-2.69A3.47,3.47,0,0,1,93,45.48h13.8a3.6,3.6,0,0,1,3.76,3.74v11a3.32,3.32,0,0,1-1.14,2.54,3.7,3.7,0,0,1-2.62,1.05H93A3.47,3.47,0,0,1,90.47,62.72Zm.61,90.75a3.42,3.42,0,0,1-1-2.55V80.12a3.36,3.36,0,0,1,1-2.62,3.57,3.57,0,0,1,2.54-1h12.76A3.58,3.58,0,0,1,110,80.12v70.8a3.58,3.58,0,0,1-3.59,3.6H93.62A3.43,3.43,0,0,1,91.08,153.47Z%27 /%3E%3C/svg%3E");
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--info > .Toastify__progress-bar {
  background-color: var(--info);
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--success:before {
  background-color: var(--success);
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--success:after {
  content: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 240%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27white%27 width=%2724px%27 height=%2724px%27 style=%27margin-top: 4px%27%3E%3Cpath d=%27M67.93,171.64l-65-65a10,10,0,0,1,0-14.14L17.07,78.36a10,10,0,0,1,14.14,0L75,122.14l93.79-93.78a10,10,0,0,1,14.14,0L197.07,42.5a10,10,0,0,1,0,14.14l-115,115a10,10,0,0,1-14.14,0Z%27 /%3E%3C/svg%3E");
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--success > .Toastify__progress-bar {
  background-color: var(--success);
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--warning:before {
  background-color: var(--warning);
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--warning:after {
  content: url("data:image/svg+xml,%3Csvg viewBox=%270 0 200 240%27 xmlns=%27http://www.w3.org/2000/svg%27 fill=%27white%27 width=%2724px%27 height=%2724px%27 style=%27margin-top: 4px%27%3E%3Cpath d=%27M99,13.15.84,186.05a1,1,0,0,0,.87,1.49l196.57.83a1,1,0,0,0,.87-1.49L100.76,13.15A1,1,0,0,0,99,13.15Z%27 /%3E%3Cpath fill=%27gold%27 d=%27M91.39,141a5.37,5.37,0,0,1,3.15-2.73,22,22,0,0,1,6.59-.72c3,0,5.16.66,6.5,2s2,3.37,2,6.18v1.65a31.58,31.58,0,0,1-.16,3.66,9.23,9.23,0,0,1-1,2.84q-1.65,3-7.88,3t-8.25-2q-2-2-2-7.78A13.79,13.79,0,0,1,91.39,141Zm13.81-12a21.55,21.55,0,0,1-5.25.51,21.7,21.7,0,0,1-5.26-.51A4.18,4.18,0,0,1,92,127.1a7.21,7.21,0,0,1-.93-2.37,24.31,24.31,0,0,1-.15-3.19V88.87A25.93,25.93,0,0,1,91,85.62a6.68,6.68,0,0,1,1-2.42,4.57,4.57,0,0,1,2.79-1.9,19.38,19.38,0,0,1,5.25-.57,19.51,19.51,0,0,1,5.26.57,4.31,4.31,0,0,1,2.73,2,7.76,7.76,0,0,1,.93,2.48,25.64,25.64,0,0,1,.15,3.24v32.67a24.6,24.6,0,0,1-.15,3.2,6.2,6.2,0,0,1-1,2.31A4.43,4.43,0,0,1,105.2,129Z%27 /%3E%3C/svg%3E");
}

.Toastify > .Toastify__toast-container > .Toastify__toast.Toastify__toast--warning > .Toastify__progress-bar {
  background-color: var(--warning);
}

.Toastify > .Toastify__toast-container > .Toastify__toast > .Toastify__close-button > svg {
  fill: var(--text-foreground-1);
}

:root {
  --header-height-u: 58px;
  --header-logo-height-u: 30px;
  --header-logo-width-u: 164px;
  --burger-width-u: 66px;
  --npvr-large-container-width-u: 1200px;
  --border-radius-tiny-u: 4px;
  --border-radius-small-u: 10px;
  --border-radius-medium-u: 14px;
  --border-radius-big-u: 18px;
  --border-radius-huge-u: 28px;
  --default-font: sans-serif;
  --monospace: monospace;
  --light-font: FontLight, var(--default-font, sans-serif);
  --regular-font: FontRegular, var(--default-font, sans-serif);
  --semibold-font: FontSemiBold, var(--default-font, sans-serif);
  --bold-font: FontBold, var(--default-font, sans-serif);
  --black-font: FontBlack, var(--default-font, sans-serif);
  --tile-gemtv-image-width-u: 320px;
  --tile-gemtv-image-height-u: 180px;
  --tile-gemtv-horizontal-space-u: 24px;
  --tile-portrait-image-width-u: 200px;
  --tile-portrait-image-height-u: 296px;
  --tile-portrait-horizontal-space-u: 24px;
  --tile-deeplink-image-width-u: 248px;
  --tile-deeplink-image-height-u: var(--tile-portrait-image-height-u);
  --tile-deeplink-horizontal-space-u: 24px;
  --tile-deeplink-5x1-image-width-u: 1770px;
  --tile-deeplink-5x1-image-height-u: 354px;
  --tile-deeplink-5x1-horizontal-space-u: 24px;
  --tile-deeplink-3x1-image-width-u: 873px;
  --tile-deeplink-3x1-image-height-u: 291px;
  --tile-deeplink-3x1-horizontal-space-u: 24px;
  --tile-landscape-image-width-u: 320px;
  --tile-landscape-image-height-u: 180px;
  --tile-landscape-horizontal-space-u: 24px;
  --tile-landscape-big-image-width-u: 455px;
  --tile-landscape-big-image-height-u: 256px;
  --tile-landscape-big-horizontal-space-u: 24px;
  --tile-landscape-vod-image-width-u: 478px;
  --tile-landscape-vod-image-height-u: 268px;
  --tile-landscape-vod-horizontal-space-u: 24px;
  --tile-channel-image-width-u: 96px;
  --tile-channel-image-height-u: 60px;
  --tile-channel-group-image-width-u: 153px;
  --tile-channel-group-image-height-u: 115px;
  --tile-channel-group-horizontal-space-u: 24px;
  --tile-channel-group-big-image-width-u: 200px;
  --tile-channel-group-big-image-height-u: 165px;
  --tile-channel-group-big-horizontal-space-u: 24px;
  --avenue-image-width-u: 100px;
  --avenue-image-height-u: 100px;
  --npvr-tv-image-width-u: 178px;
  --npvr-tv-image-height-u: 100px;
  --selection-thickness-u: 8px;
  --tile-border-radius-u: 14px;
  --tile-selection-border-radius-u: 22px;
  --tile-synopsis-font-size-u: 12px;
  --tile-synopsis-line-height-u: 14px;
  --tile-synopsis-tagline-font-size-u: 14px;
  --tile-synopsis-tagline-line-height-u: 16px;
  --tile-text-height-u: 41px;
  --channel-list-item-width-u: 120px;
  --channel-list-item-height-u: 60px;
  --channel-image-width-u: 80px;
  --channel-image-height-u: 40px;
  --tile-channel-logo-width-u: 50px;
  --tile-channel-logo-height-u: 25px;
  --conflict-channel-image-width-u: 40px;
  --conflict-channel-image-height-u: 20px;
  --avatar-size-small-u: 32px;
  --avatar-size-medium-u: 100px;
  --avatar-size-big-u: 125px;
  --modal-inline-padding-u: 50px;
  --extra-short-duration: .15s;
  --short-duration: .3s;
  --medium-duration: .5s;
  --long-duration: 1s;
  --opacity-short: opacity var(--short-duration) ease-out;
  --opacity-medium: opacity var(--medium-duration) ease-out;
  --opacity-long: opacity var(--long-duration) ease-out;
}

@keyframes pulse {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@font-face {
  font-display: swap;
  font-family: FontLight;
  src: url(/static/font/Light.ef847ef25c.woff2) format("woff2"), url(/static/font/Light.bae39d22bd.woff) format("woff"), url(/static/font/Light.13c15a0a81.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: FontRegular;
  src: url(/static/font/Regular.3de828eae5.woff2) format("woff2"), url(/static/font/Regular.f9a0ef5a10.woff) format("woff"), url(/static/font/Regular.08e2d99ba2.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: FontSemiBold;
  src: url(/static/font/SemiBold.b64c3bb55e.woff2) format("woff2"), url(/static/font/SemiBold.0e8ec1d974.woff) format("woff"), url(/static/font/SemiBold.a8b7d19987.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: FontBold;
  src: url(/static/font/Bold.e747606c5d.woff2) format("woff2"), url(/static/font/Bold.a1b4fd6bb9.woff) format("woff"), url(/static/font/Bold.5d2cb4ed4c.ttf) format("truetype");
}

@font-face {
  font-display: swap;
  font-family: FontBlack;
  src: url(/static/font/ExtraBold.13ffce3886.woff2) format("woff2"), url(/static/font/ExtraBold.4163321a27.woff) format("woff"), url(/static/font/ExtraBold.ae6c0bfa75.ttf) format("truetype");
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

html {
  background-color: var(--background);
  width: 100vw;
  height: 100vh;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  position: relative;
}

body * {
  -webkit-touch-callout: none;
  box-sizing: border-box;
  font: inherit;
  -webkit-user-select: none;
  user-select: none;
  outline: 0;
  flex-flow: row;
  flex: none;
  transition-property: none;
  transition-duration: 0s;
  display: flex;
  overflow: hidden;
}

body #didomi-host * {
  display: initial;
  flex: initial;
  overflow: initial;
}

body #didomi-host a:not(.didomi-no-link-style) {
  font-weight: bold;
}

body #didomi-host .didomi-popup-backdrop {
  background-color: #0009;
}

body #didomi-host .didomi-exterior-border, body #didomi-host .didomi-popup-container {
  border: 0;
}

body #didomi-host .didomi-popup-notice .didomi-popup-notice-text {
  max-width: revert;
  text-align: justify;
}

body #didomi-host .didomi-consent-popup-body__explanation {
  text-align: justify;
}

body style {
  display: none;
}

body img {
  border: 0;
}

body > script, body > iframe {
  display: none;
}

body > #root {
  background-color: var(--background);
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  display: flex;
}

body > #root .parentalGuidance.pegi3, body > #root .parentalGuidance.pegi7, body > #root .parentalGuidance.pegi12, body > #root .parentalGuidance.pegi16, body > #root .parentalGuidance.pegi18 {
  color: #fff;
  text-shadow: 1px 1px #00000040;
}

body > #root .parentalGuidance.pegi3, body > #root .parentalGuidance.pegi7 {
  background-color: #a6c500;
}

body > #root .parentalGuidance.pegi12, body > #root .parentalGuidance.pegi16 {
  background-color: #f5a200;
}

body > #root .parentalGuidance.pegi18 {
  background-color: #e30013;
}

body .videoDiagContainer {
  justify-content: center;
  align-items: center;
  position: absolute;
  inset: 0;
}

body .videoDiagContainer.hidden {
  visibility: hidden;
  z-index: 0;
  background-color: #0000;
  width: 0;
  height: 0;
  display: none;
}

body .videoDiagContainer.visible {
  visibility: visible;
  z-index: 99999;
  background-color: #0009;
  width: 100vw;
  height: 100vh;
  display: flex;
}

body .videoDiagContainer > .videoDiagContent {
  background-color: var(--background);
  border-radius: var(--border-radius-medium-u);
  box-shadow: 0 0 8px 4px var(--shadow);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5px;
  display: flex;
}

body .videoDiagContainer > .videoDiagContent > video {
  width: 300px;
}

body .videoDiagContainer > .videoDiagContent > .videoDiagLegend {
  color: var(--text-foreground-1);
  padding: 20px 20px 15px;
}

body .gsContainerWrapper {
  object-fit: cover;
  z-index: 9999;
  background: #000;
  width: 100vw;
  height: 100vh;
  display: grid;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

body .gsContainerWrapper > .infiniteCircleLoaderArc, body .gsContainerWrapper > .gsClientContainer {
  grid-area: 1 / 1 / 2 / 2;
}

body .gsContainerWrapper > .gsClientContainer video {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

body .gsContainerWrapper > .exitButton {
  color: #aaa;
  cursor: pointer;
  background: radial-gradient(#0003, #0000 80%);
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  font-size: 38px;
  font-weight: bold;
  position: absolute;
  top: 10px;
  right: 10px;
}

body .gsContainerWrapper > .exitButton:hover {
  color: #fff;
}

.loginHeader {
  background-color: var(--header-login-background);
  z-index: 10;
  align-items: center;
  width: 100%;
  height: 58px;
  display: flex;
}

.loginHeader > img {
  height: var(--header-logo-height-u);
  -webkit-user-select: none;
  user-select: none;
  width: var(--header-logo-width-u);
  margin-left: 50px;
}

.loginHeader > .pictoElement {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin: 0 10px 0 auto;
}

.runningOnMobile {
  background-color: var(--background);
  color: var(--text-foreground-1);
  font: 16px var(--regular-font);
  background-repeat: no-repeat;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
  position: absolute;
  inset: 0;
}

.runningOnMobile > img {
  -webkit-user-select: none;
  user-select: none;
  height: 200px;
  margin-bottom: 50px;
}

.runningOnMobile > img + div {
  text-align: center;
  margin-bottom: 50px;
}

.runningOnMobile > a {
  margin-bottom: 10px;
  text-decoration: none;
}

.runningOnMobile > a.text {
  background-color: var(--text-foreground-1);
  border-radius: var(--border-radius-tiny-u);
  color: var(--background);
  font: 16px var(--semibold-font);
  margin-top: 40px;
  padding: 10px 20px;
}

.browserNotCompatible {
  color: var(--text-foreground-1);
  font: 24px var(--regular-font);
  flex-direction: column;
  align-items: center;
  margin: auto 20px;
  display: flex;
}

.browserNotCompatible > img {
  -webkit-user-select: none;
  user-select: none;
  height: 200px;
  margin-bottom: 50px;
}

.browserNotCompatible > .browsers {
  justify-content: space-evenly;
  align-self: stretch;
  margin: 20px 0 40px;
}

.browserNotCompatible > .browsers + div {
  margin-bottom: 20px;
}

.browserNotCompatible a {
  margin-bottom: 10px;
  text-decoration: none;
}

.browserNotCompatible a:link, .browserNotCompatible a:visited {
  color: var(--accent);
}

.browserNotCompatible a:active, .browserNotCompatible a:hover {
  color: var(--accent-light);
}

.appLoader {
  flex-grow: 1;
  justify-content: center;
  align-items: center;
  display: flex;
}

.startupError {
  color: var(--text-foreground-1);
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
}

.startupError > .errorTitle {
  font: 24px var(--bold-font);
  align-items: center;
}

.startupError > .errorName {
  font: 18px var(--regular-font);
}

.startupError > .errorHint {
  font: 16px var(--regular-font);
  margin-top: 50px;
}

@media (max-width: 768px) {
  .browserNotCompatible {
    font: 18px var(--regular-font);
  }
}

@media (max-width: 400px) {
  .browserNotCompatible {
    font: 14px var(--regular-font);
  }

  .browserNotCompatible > svg {
    width: 120px;
    margin-bottom: 40px;
  }
}

.buttonFX {
  --loader-size-u: 30px;
  border-radius: var(--border-radius-tiny-u);
  cursor: pointer;
  border: none;
  justify-content: center;
  align-items: stretch;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}

.buttonFX > .content {
  font: 16px var(--semibold-font);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  z-index: 1;
  flex-direction: column;
  flex: 1 0 100%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.buttonFX > .content.padding {
  padding-inline: 20px;
}

.buttonFX > .content div, .buttonFX > .content span {
  color: inherit;
}

.buttonFX.dark {
  background-color: var(--button-dark-background);
}

.buttonFX.dark > .content {
  color: var(--button-dark-foreground);
}

.buttonFX.dark.empty {
  border: 1px solid var(--button-dark-empty-border);
  background-color: #0000;
}

.buttonFX.dark.link > .content {
  color: var(--button-light-background);
}

.buttonFX.light {
  background-color: var(--button-light-background);
}

.buttonFX.light > .content {
  color: var(--button-light-foreground);
}

.buttonFX.light.empty {
  border: 1px solid var(--button-light-empty-border);
  background-color: #0000;
}

.buttonFX.light.link > .content {
  color: var(--button-dark-foreground);
}

.buttonFX:has(.hoverLayer:hover) {
  border-color: #0000;
}

.buttonFX:has(.hoverLayer:hover).empty {
  border-color: #0000;
}

.buttonFX:has(.hoverLayer:hover) > .content {
  color: var(--button-foreground-hover);
}

.buttonFX:not(:has(.hoverLayer:hover)).empty > .content {
  color: var(--text-foreground-1);
}

.buttonFX.link {
  opacity: .8;
  background-color: #0000;
  border: 0;
  text-decoration: underline;
}

.buttonFX.link:hover {
  opacity: 1;
}

.buttonFX.link > .content {
  font-family: var(--regular-font);
}

.buttonFX > .hoverLayer {
  border-radius: var(--border-radius-tiny-u);
  position: absolute;
  inset: 0;
}

.buttonFX.heightStretched {
  height: 100%;
}

.buttonFX.heightSmall {
  height: 30px;
}

.buttonFX.heightSmall .infiniteCircleLoader {
  width: 26px;
}

.buttonFX.heightMedium {
  height: 40px;
}

.buttonFX.heightLarge {
  height: 46px;
}

.buttonFX.widthAuto {
  width: auto;
}

.buttonFX.widthStretched {
  width: 100%;
}

.buttonFX.widthSmall {
  width: 164px;
}

.buttonFX.widthLarge {
  width: 210px;
}

.buttonFX.loading > .content {
  opacity: .4;
}

.buttonFX > .disabled {
  background-color: var(--button-background-disabled);
  border-radius: var(--border-radius-tiny-u);
  cursor: default;
  position: absolute;
  inset: 0;
}

.buttonFX > .loader {
  aspect-ratio: 1;
  left: calc((100% - var(--loader-size-u)) / 2);
  top: calc((100% - var(--loader-size-u)) / 2);
  width: var(--loader-size-u);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

button.avatarContainer {
  --no-avatar-bg-color-0: #0954b5;
  --no-avatar-bg-color-1: #1cb509;
  --no-avatar-bg-color-2: #b57909;
  --no-avatar-bg-color-3: #b5097a;
  --no-avatar-bg-color-4: #253e60;
  cursor: pointer;
  background-color: #0000;
  border: none;
  justify-content: stretch;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
  position: relative;
}

button.avatarContainer.displayNameBottom {
  flex-direction: column;
  row-gap: 1rem;
}

button.avatarContainer.displayNameRight {
  flex-direction: row;
  column-gap: 1rem;
}

button.avatarContainer.displayNameRight > .avatarName {
  max-width: revert;
  text-overflow: revert;
}

button.avatarContainer:disabled {
  cursor: revert;
}

button.avatarContainer > .avatarImage {
  border: var(--btn-border-u) solid transparent;
  background-color: #ffffff1a;
  border-radius: 50%;
  position: relative;
}

button.avatarContainer > .avatarImage.profile0 {
  background-color: var(--no-avatar-bg-color-0);
}

button.avatarContainer > .avatarImage.profile1 {
  background-color: var(--no-avatar-bg-color-1);
}

button.avatarContainer > .avatarImage.profile2 {
  background-color: var(--no-avatar-bg-color-2);
}

button.avatarContainer > .avatarImage.profile3 {
  background-color: var(--no-avatar-bg-color-3);
}

button.avatarContainer > .avatarImage.profile4 {
  background-color: var(--no-avatar-bg-color-4);
}

button.avatarContainer > .avatarImage > .editPicto, button.avatarContainer > .avatarImage > .userPicto {
  background-color: #000000b3;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  inset: 0;
}

button.avatarContainer > .avatarImage > img {
  border: none;
  margin: 0;
  padding: 0;
}

button.avatarContainer > .avatarImage .profileInitial, button.avatarContainer > .avatarImage .profileInitialPlaceholder {
  color: var(--overlay-foreground-1);
  font: 36px var(--semibold-font);
  justify-content: center;
  align-items: center;
}

button.avatarContainer > .avatarImage > .noAvatar {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

button.avatarContainer > .avatarImage > .noAvatar > .profileInitialPlaceholder {
  color: #ffffff4d;
}

button.avatarContainer > .avatarName {
  color: var(--overlay-foreground-1);
  font: 22px var(--regular-font);
  max-width: var(--avatar-size-big-u);
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

button.avatarContainer.unavailable {
  opacity: .4;
}

button.avatarContainer.unavailable > .avatarImage > .userPicto {
  display: flex;
}

button.avatarContainer.small {
  --btn-border-u: 4px;
}

button.avatarContainer.small > .avatarImage > img, button.avatarContainer.small > .avatarImage > svg, button.avatarContainer.small > .avatarImage > div {
  height: var(--avatar-size-small-u);
  width: var(--avatar-size-small-u);
  font-size: 18px;
}

button.avatarContainer.medium {
  --btn-border-u: 5px;
}

button.avatarContainer.medium > .avatarImage > img, button.avatarContainer.medium > .avatarImage > svg, button.avatarContainer.medium > .avatarImage > div {
  height: var(--avatar-size-medium-u);
  width: var(--avatar-size-medium-u);
  font-size: 30px;
}

button.avatarContainer.big {
  --btn-border-u: 6px;
}

button.avatarContainer.big > .avatarImage > img, button.avatarContainer.big > .avatarImage > svg, button.avatarContainer.big > .avatarImage > div {
  height: var(--avatar-size-big-u);
  width: var(--avatar-size-big-u);
  font-size: 36px;
}

button.avatarContainer.selected > .avatarImage {
  border-color: var(--avatar-selected);
}

button.avatarContainer:hover:not(:disabled) .avatarImage {
  border-color: var(--accent);
}

button.avatarContainer:hover:not(:disabled).showOnHover .editPicto, button.avatarContainer.showAlways .editPicto {
  display: flex;
}

.pictoElement {
  aspect-ratio: 1;
  background-color: #0000;
  border: 0;
  border-radius: 0;
  justify-content: center;
  align-items: center;
  width: 28px;
  display: flex;
  position: relative;
  overflow: visible;
}

.pictoElement > svg {
  fill: var(--picto-foreground);
  opacity: 1;
  pointer-events: all;
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  width: 24px;
}

.pictoElement > .background {
  aspect-ratio: 1;
  background-color: var(--picto-background);
  box-shadow: 0 1px 2px 0 var(--shadow);
  z-index: 0;
  border-radius: 50%;
  width: 24px;
  position: absolute;
  top: 2px;
  left: 2px;
}

.pictoElement > .background + svg {
  z-index: 1;
  width: 18px;
}

.pictoElement.recording > svg, .pictoElement.scheduledRecording > svg {
  fill: var(--recording);
}

.pictoElement.recording.live, .pictoElement.scheduledRecording.live {
  animation: pulse var(--long-duration) infinite ease-in-out;
}

.pictoElement.future svg {
  fill: var(--future);
}

.pictoElement.preview svg {
  fill: var(--catchup);
}

.pictoElement.hoverEffect > svg {
  opacity: .4;
  transform: scale(.9);
}

.pictoElement.hoverEffect:not(:disabled, [data-disabled="true"], [disabled]) > svg {
  cursor: pointer;
  opacity: .9;
}

.pictoElement.hoverEffect:not(:disabled, [data-disabled="true"], [disabled]):hover > svg {
  opacity: 1;
  transform: scale(1);
}

@keyframes movingArrow {
  0% {
    opacity: 0;
  }

  30% {
    opacity: 1;
    transform: translateX(5px);
  }

  100% {
    opacity: 1;
    transform: translateX(10px);
  }
}

.section {
  --section-header-height-u: 27px;
  --section-header-bottom-margin-u: 8px;
  --navigation-button-size-u: 126px;
  --navigation-button-collapsed-position-u: calc(var(--navigation-button-size-u) / -4);
  --navigation-button-expanded-position-u: calc(var(--navigation-button-size-u) / -8);
  --navigation-button-picto-margin-u: calc(var(--navigation-button-size-u) / 8);
  --navigation-button-vertical-shift-u: calc(var(--section-header-height-u) + var(--section-header-bottom-margin-u));
  --navigation-button-vertical-shift-selection-u: calc(var(--navigation-button-vertical-shift-u) + var(--selection-thickness-u));
  opacity: 1;
  pointer-events: auto;
  transform-origin: top;
  flex-direction: column;
  width: 100%;
  margin: 30px 0;
  padding-left: 50px;
  transition: opacity ease-out, transform ease-out;
  display: flex;
  position: relative;
  overflow: visible;
  transform: scaleY(1) translateY(0);
}

.section.hidden {
  opacity: 0;
  transition-duration: var(--long-duration);
  transform: translateY(300px);
}

.section > .backBar {
  cursor: pointer;
  align-items: center;
  height: 40px;
  margin-bottom: 20px;
  margin-right: auto;
  display: flex;
}

.section > div {
  overflow: visible;
}

.section > .navigationButton {
  aspect-ratio: 1;
  background-color: var(--section-navigation-buttons);
  cursor: pointer;
  opacity: 0;
  transition: left var(--short-duration) ease-out, right var(--short-duration) ease-out, var(--opacity-short);
  width: var(--navigation-button-size-u);
  z-index: 250;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.section > .navigationButton:hover {
  background-color: var(--section-navigation-buttons-hover);
}

.section > .navigationButton > .pictoElement {
  height: 20px;
}

.section > .navigationButton.previous {
  left: var(--navigation-button-collapsed-position-u);
  border-radius: 0 50% 50% 0;
}

.section > .navigationButton.previous:hover {
  left: var(--navigation-button-expanded-position-u);
}

.section > .navigationButton.previous > .pictoElement {
  margin-left: var(--navigation-button-picto-margin-u);
}

.section > .navigationButton.next {
  right: var(--navigation-button-collapsed-position-u);
  border-radius: 50% 0 0 50%;
  margin-left: auto;
}

.section > .navigationButton.next:hover {
  right: var(--navigation-button-expanded-position-u);
}

.section > .navigationButton.next > .pictoElement {
  margin-left: var(--navigation-button-picto-margin-u);
}

.section > .navigationButton.gemtv {
  top: calc((var(--tile-gemtv-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-u));
}

.section > .navigationButton.portrait, .section > .navigationButton.deeplink {
  top: calc((var(--tile-portrait-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-u));
}

.section > .navigationButton.deeplink3x1, .section > .navigationButton.deeplink5x1 {
  top: calc((var(--tile-deeplink-3x1-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-selection-u));
}

.section > .navigationButton.landscape {
  top: calc((var(--tile-landscape-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-u));
}

.section > .navigationButton.landscape.big {
  top: calc((var(--tile-landscape-big-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-selection-u));
}

.section > .navigationButton.landscape.vod {
  top: calc((var(--tile-landscape-vod-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-u));
}

.section > .navigationButton.channelgroup {
  top: calc((var(--tile-channel-group-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-selection-u));
}

.section > .navigationButton.channelgroup.big {
  top: calc((var(--tile-channel-group-big-image-height-u) - var(--navigation-button-size-u)) / 2 + var(--navigation-button-vertical-shift-selection-u));
}

.section:hover > .navigationButton {
  opacity: 1;
}

.section:hover > .header > .gridViewButton {
  opacity: .8;
}

.section:hover > .header > .sectionTitleContainer > .sectionTitle {
  opacity: 1;
  transform: scale(1.01);
}

.section.grid {
  height: auto;
  margin-top: 0;
}

.section.grid > .header {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 10px;
  height: auto;
  margin-bottom: 20px;
}

.section.grid > .header > .sectionTitleContainer .sectionTitle {
  opacity: 1;
  font-size: 36px;
  transition: none;
  transform: none;
}

.section.grid > .header > .sortAndFilter {
  margin: 0;
}

.section.grid .sectionSlider {
  flex-flow: wrap;
  flex: 1;
  justify-content: flex-start;
  row-gap: 60px;
  height: auto;
  margin: 0;
}

.section.grid .sectionSlider:after {
  content: "";
  flex: auto;
}

.section.grid .sectionSlider > .sectionItem {
  margin-top: 10px;
  margin-bottom: 10px;
}

.section > .header {
  height: var(--section-header-height-u);
  margin-bottom: var(--section-header-bottom-margin-u);
  align-items: center;
  padding-right: 20px;
  display: flex;
}

.section > .header > .sectionTitleContainer {
  align-items: center;
  display: flex;
  overflow: visible;
}

.section > .header > .sectionTitleContainer.hoverable {
  cursor: pointer;
}

.section > .header > .sectionTitleContainer > .sectionTitle {
  color: var(--text-foreground-1);
  font: 20px var(--bold-font);
  opacity: .7;
  transform-origin: 0;
  transition: transform var(--short-duration) ease-out;
  -webkit-user-select: none;
  user-select: none;
  margin-left: 5px;
  transform: scale(1);
}

.section > .header > .gridViewButton {
  color: var(--text-foreground-1);
  cursor: pointer;
  font: 16px var(--regular-font);
  opacity: 0;
  align-items: center;
  margin-left: 30px;
  display: flex;
}

.section > .header > .gridViewButton:hover {
  opacity: 1;
  text-decoration: underline;
}

.section > .header > .gridViewButton:hover > .pictoElement {
  animation: movingArrow var(--short-duration) ease-out forwards;
  margin-inline: -10px 10px;
}

.section > .header > .gridViewButton > .pictoElement {
  opacity: 0;
  height: 24px;
}

.section > .header > .gridViewButton > .pictoElement > svg {
  fill: var(--text-foreground-1);
  width: 14px;
}

.section > .header > .sectionPagination {
  color: var(--text-foreground-1);
  font: 14px var(--semibold-font);
  opacity: .8;
  margin-left: auto;
}

.section.placeholder > .header .sectionTitleContainer.noTitle {
  background-color: var(--placeholder-text);
  width: 250px;
  height: 17px;
}

.section .sectionSlider {
  transition: transform var(--short-duration) ease-out;
  flex-direction: row;
  flex: auto;
  display: flex;
  overflow: visible;
  transform: translate3d(0, 0, 0);
}

.backButtonBase {
  background-color: #0000;
  border: 0;
}

.backButtonBase:hover > .pictoElement.hoverEffect > svg {
  opacity: 1;
  transform: scale(1);
}

.backButtonBase:hover > .text {
  opacity: 1;
}

.backButtonBase > .text {
  color: var(--text-foreground-1);
  font: 18px var(--semibold-font);
  opacity: .7;
  transition: var(--opacity-short);
  -webkit-user-select: none;
  user-select: none;
  margin-left: 10px;
}

.backButtonBase > .pictoElement > svg {
  opacity: .7;
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  width: 30px;
  transform: scale(.9);
}

.sectionItem {
  pointer-events: auto;
  z-index: 200;
  flex-direction: column;
  display: flex;
  overflow: visible;
}

.sectionItem * {
  transition: var(--opacity-short);
}

.sectionItem > .selectionBorder {
  border-radius: var(--tile-selection-border-radius-u);
  background-color: #0000;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.sectionItem > .selectionBorder .channelName {
  max-width: var(--tile-channel-image-width-u);
  pointer-events: none;
  z-index: 1000;
  width: fit-content;
  position: absolute;
}

.sectionItem .tileContainer {
  border-radius: var(--tile-border-radius-u);
  cursor: pointer;
  transform-origin: center;
  transition: transform var(--short-duration) ease-out;
  will-change: transform;
  z-index: 300;
  background: center / cover no-repeat;
  display: flex;
  position: relative;
  overflow: visible;
  transform: translate3d(0, 0, 0);
}

.sectionItem .tileContainer > .backgroundImage {
  animation-duration: var(--medium-duration);
  border-radius: var(--tile-border-radius-u);
  opacity: 1;
  width: 100%;
  height: 100%;
  animation-fill-mode: both;
  position: absolute;
  top: 0;
  left: 0;
}

.sectionItem .tileContainer > .backgroundImage.visible {
  z-index: 302;
  animation-name: fadeIn;
  animation-timing-function: ease-out;
}

.sectionItem .tileContainer > .backgroundImage.hidden {
  z-index: 301;
  animation-name: fadeOut;
  animation-timing-function: ease-in;
}

.sectionItem .tileContainer.locked {
  overflow: hidden;
}

.sectionItem .tileContainer.locked > .backgroundImage {
  filter: blur(10px);
}

.sectionItem .tileContainer > .missingImageText {
  color: var(--text-foreground-1);
  font: 20px var(--semibold-font);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.sectionItem .tileContainer > .lockWrapper {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: var(--tile-border-radius-u);
  cursor: pointer;
  z-index: 330;
  background-color: #0000004d;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
}

.sectionItem .tileContainer > .lockWrapper > .pictoElement > svg {
  width: 50px;
}

.sectionItem .tileContainer.focused {
  transform: scale3d(1.22, 1.22, 1);
}

.sectionItem .tileContainer.focused > .missingImageText {
  display: none;
}

.sectionItem .tileContainer.focused > .decoration {
  opacity: 0;
}

.sectionItem .tileContainer.focused > .overlay {
  opacity: 1;
}

.sectionItem .tileContainer.focused ~ .textContainer {
  opacity: 0;
}

.sectionItem .tileContainer > .textScroller {
  width: 92%;
  position: absolute;
  top: calc(50% - 9px);
  left: 4%;
}

.sectionItem .tileContainer > .channelName {
  color: var(--text-foreground-1);
  pointer-events: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.sectionItem:hover {
  z-index: 340;
}

.sectionItem > .textContainer {
  cursor: pointer;
  height: var(--tile-text-height-u);
  opacity: 1;
  z-index: 250;
  flex-direction: column;
  margin-top: 2px;
  display: flex;
}

.sectionItem > .textContainer .text {
  color: var(--text-foreground-1);
  font: 16px var(--semibold-font);
  text-align: left;
  flex: 1 0;
}

.sectionItem > .textContainer .text.secondLineInfo {
  color: var(--text-foreground-2);
  font: 14px var(--regular-font);
}

.sectionItem > .textContainer.placeholder {
  cursor: default;
}

.sectionItem > .textContainer.placeholder > .text {
  flex: 0 auto;
  width: 200px;
  height: 17px;
  margin-bottom: 2px;
}

.sectionItem > .textContainer.placeholder > .text.secondLineInfo {
  width: 140px;
}

.section.gemtv .sectionItem {
  margin-right: var(--tile-gemtv-horizontal-space-u);
  width: var(--tile-gemtv-image-width-u);
}

.section.gemtv .sectionItem > .tileContainer {
  height: var(--tile-gemtv-image-height-u);
}

.section.gemtv.medium .sectionItem {
  width: var(--tile-landscape-image-width-u);
}

.section.gemtv.medium .sectionItem > .tileContainer {
  height: var(--tile-landscape-image-height-u);
}

.section.gemtv.big .sectionItem {
  width: var(--tile-landscape-big-image-width-u);
}

.section.gemtv.big .sectionItem > .tileContainer {
  height: var(--tile-landscape-big-image-height-u);
}

.section.portrait .sectionItem > .tileContainer, .section.deeplink .sectionItem > .tileContainer, .section.landscape .sectionItem > .tileContainer {
  background-size: 100% 100%;
}

.section.portrait .sectionItem {
  margin-right: var(--tile-portrait-horizontal-space-u);
  width: var(--tile-portrait-image-width-u);
}

.section.portrait .sectionItem > .tileContainer {
  height: var(--tile-portrait-image-height-u);
}

.section.deeplink .sectionItem {
  margin-right: var(--tile-deeplink-horizontal-space-u);
  width: var(--tile-deeplink-image-width-u);
}

.section.deeplink .sectionItem > .tileContainer {
  height: var(--tile-deeplink-image-height-u);
}

.section.deeplink5x1 .sectionItem {
  margin-right: var(--tile-deeplink-5x1-horizontal-space-u);
  width: var(--tile-deeplink-5x1-image-width-u);
}

.section.deeplink5x1 .sectionItem > .selectionBorder {
  height: calc(var(--tile-deeplink-5x1-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-deeplink-5x1-image-width-u) + 2 * var(--selection-thickness-u));
}

.section.deeplink5x1 .sectionItem > .selectionBorder:hover {
  background-color: var(--accent);
}

.section.deeplink5x1 .sectionItem .tileContainer {
  height: var(--tile-deeplink-5x1-image-height-u);
  width: var(--tile-deeplink-5x1-image-width-u);
  background-size: 100% 100%;
}

.section.deeplink3x1 .sectionItem {
  margin-right: var(--tile-deeplink-3x1-horizontal-space-u);
  width: var(--tile-deeplink-3x1-image-width-u);
}

.section.deeplink3x1 .sectionItem > .selectionBorder {
  height: calc(var(--tile-deeplink-3x1-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-deeplink-3x1-image-width-u) + 2 * var(--selection-thickness-u));
}

.section.deeplink3x1 .sectionItem > .selectionBorder:hover {
  background-color: var(--accent);
}

.section.deeplink3x1 .sectionItem .tileContainer {
  height: var(--tile-deeplink-3x1-image-height-u);
  width: var(--tile-deeplink-3x1-image-width-u);
  background-size: 100% 100%;
}

.section.landscape .sectionItem {
  margin-right: var(--tile-landscape-horizontal-space-u);
  width: var(--tile-landscape-image-width-u);
}

.section.landscape .sectionItem > .tileContainer {
  height: var(--tile-landscape-image-height-u);
}

.section.landscape .sectionItem > .selectionBorder {
  height: calc(var(--tile-landscape-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-landscape-image-width-u) + 2 * var(--selection-thickness-u));
}

.section.landscape .sectionItem > .selectionBorder:hover {
  background-color: var(--accent);
}

.section.landscape .sectionItem > .selectionBorder > .tileContainer {
  height: var(--tile-landscape-image-height-u);
  width: var(--tile-landscape-image-width-u);
}

.section.landscape.big .sectionItem {
  margin-right: var(--tile-landscape-big-horizontal-space-u);
  width: var(--tile-landscape-big-image-width-u);
}

.section.landscape.big .sectionItem > .selectionBorder {
  height: calc(var(--tile-landscape-big-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-landscape-big-image-width-u) + 2 * var(--selection-thickness-u));
}

.section.landscape.big .sectionItem > .selectionBorder:hover {
  background-color: var(--accent);
}

.section.landscape.big .sectionItem .tileContainer {
  height: var(--tile-landscape-big-image-height-u);
  width: var(--tile-landscape-big-image-width-u);
}

.section.landscape.vod .sectionItem {
  margin-right: var(--tile-landscape-vod-horizontal-space-u);
  width: var(--tile-landscape-vod-image-width-u);
}

.section.landscape.vod .sectionItem > .tileContainer {
  height: var(--tile-landscape-vod-image-height-u);
}

.section.landscape.vod .sectionItem > .tileContainer > .overlay > .pricing {
  justify-content: center;
  align-self: center;
  column-gap: 20px;
  min-width: 210px;
}

.section.landscape.vod .sectionItem > .tileContainer > .overlay > .pricing.reversed {
  flex-direction: column-reverse;
}

.section.landscape.vod .sectionItem > .tileContainer > .overlay > .pricing > .availabilityDate {
  margin-bottom: 0;
}

.section.landscape.vod .sectionItem > .tileContainer > .overlay > .pricing + .buttonFX {
  margin-top: 10px;
}

.section.landscape.vod .sectionItem > .tileContainer > .overlay .buttonFX {
  align-self: center;
}

.section.landscape.vod .sectionItem > .tileContainer > .overlay .buttonFXBicolor {
  margin: 0;
}

.section.channelgroup {
  --selection-width: calc(var(--tile-channel-group-image-width-u) + 2 * var(--selection-thickness-u));
  --selection-height: calc(var(--tile-channel-group-image-height-u) + 2 * var(--selection-thickness-u));
}

.section.channelgroup .sectionItem {
  width: calc(var(--tile-channel-group-image-width-u) + var(--tile-channel-group-horizontal-space-u));
  z-index: 200;
}

.section.channelgroup .sectionItem .tileContainer {
  height: var(--tile-channel-group-image-height-u);
  width: var(--tile-channel-group-image-width-u);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}

.section.channelgroup:not(.cover) .sectionItem .selectionBorder .tileContainer {
  background-color: var(--tile-background);
}

.section.channelgroup .selectionBorder {
  height: calc(var(--tile-channel-group-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-channel-group-image-width-u) + 2 * var(--selection-thickness-u));
}

.section.channelgroup .selectionBorder:hover {
  background-color: var(--accent);
}

.section.channelgroup .selectionBorder:hover > .tileContainer {
  background-color: var(--tile-background-hover);
}

.section.channelgroup.big .sectionItem {
  margin-right: var(--tile-channel-group-big-horizontal-space-u);
  width: var(--tile-channel-group-big-image-width-u);
}

.section.channelgroup.big .sectionItem .selectionBorder {
  height: calc(var(--tile-channel-group-big-image-height-u) + 2 * var(--selection-thickness-u));
  width: calc(var(--tile-channel-group-big-image-width-u) + 2 * var(--selection-thickness-u));
}

.section.channelgroup.big .sectionItem .selectionBorder > .tileContainer {
  height: var(--tile-channel-group-big-image-height-u);
  width: var(--tile-channel-group-big-image-width-u);
}

.section.channel {
  --height-u: calc(var(--tile-channel-image-height-u) + 2 * var(--selection-thickness-u));
  --width-u: calc(var(--tile-channel-image-width-u) + 2 * var(--selection-thickness-u));
  --margin-u: calc(18px - 2 * var(--selection-thickness-u));
}

.section.channel .sectionItem {
  height: var(--height-u);
  width: var(--width-u);
}

.section.channel .sectionItem .tileContainer {
  height: var(--tile-channel-image-height-u);
  width: var(--tile-channel-image-width-u);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 80%;
}

.section.channel .selectionBorder {
  height: var(--height-u);
  width: var(--width-u);
}

.section.channel .selectionBorder:hover {
  background-color: var(--accent);
}

.section.channel .selectionBorder:hover > .tileContainer {
  background-color: var(--tile-background-hover);
}

.section.cover .sectionItem > .selectionBorder > .tileContainer {
  background-size: cover;
}

.section .sectionItem .tileContainer, .section .sectionItem .selectionBorder .tileContainer, .section .sectionItem > .textContainer.placeholder > .text {
  background-color: var(--placeholder-tile);
}

.section:not(.placeholder).channel .sectionSlider, .section:not(.placeholder).channelgroup .sectionSlider, .section:not(.placeholder).landscape.big .sectionSlider, .section:not(.placeholder).deeplink3x1 .sectionSlider, .section:not(.placeholder).deeplink5x1 .sectionSlider {
  margin-left: calc(-1 * var(--selection-thickness-u));
}

.synopsisMeasure {
  font: var(--tile-synopsis-font-size-u) var(--light-font);
  letter-spacing: .1pt;
  line-height: var(--tile-synopsis-line-height-u);
  position: absolute;
  top: -1000px;
  left: -1000px;
}

.synopsisMeasure.tagLine {
  font-size: var(--tile-synopsis-tagline-font-size-u);
  line-height: var(--tile-synopsis-tagline-line-height-u);
}

.sectionItem > .tileContainer > .overlay {
  background-color: var(--dimmer);
  border-radius: var(--tile-border-radius-u);
  color: var(--tile-hover-foreground-1);
  cursor: pointer;
  opacity: 0;
  text-align: left;
  height: 100%;
  transition: var(--opacity-short);
  -webkit-user-select: none;
  user-select: none;
  will-change: opacity;
  z-index: 350;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
  width: 100%;
  padding: 10px 15px 15px;
  display: flex;
  position: absolute;
  overflow: visible;
}

.sectionItem > .tileContainer > .overlay.bottom {
  justify-content: flex-end;
}

.sectionItem > .tileContainer > .overlay > .loader {
  flex-grow: 1;
  align-self: center;
}

.sectionItem > .tileContainer > .overlay > .loader > svg {
  fill: var(--text-foreground-1);
}

.sectionItem > .tileContainer > .overlay .text {
  filter: drop-shadow(1px 1px 1px #00000080);
  font: 18px var(--bold-font);
  max-height: 24px;
  display: flex;
}

.sectionItem > .tileContainer > .overlay .text.secondLineInfo, .sectionItem > .tileContainer > .overlay .text.thirdLineInfo {
  color: var(--tile-hover-foreground-2);
  font: 11px var(--light-font);
  max-height: 16px;
}

.sectionItem > .tileContainer > .overlay .text.thirdLineInfo {
  margin-bottom: 5px;
}

.sectionItem > .tileContainer > .overlay > .details {
  color: var(--tile-hover-foreground-1);
  font: 12px var(--regular-font);
  opacity: .9;
  text-align: left;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
  overflow: visible;
}

.sectionItem > .tileContainer > .overlay > .details.other {
  margin: 5px 0;
}

.sectionItem > .tileContainer > .overlay > .details .pictoInfo {
  border-radius: var(--border-radius-tiny-u);
  padding: 1px 4px;
  font-size: 10px;
}

.sectionItem > .tileContainer > .overlay > .details > div {
  align-items: center;
  margin-right: 15px;
  display: flex;
  position: relative;
  overflow: visible;
}

.sectionItem > .tileContainer > .overlay > .details > div:not(:last-child):after {
  background-color: var(--tile-hover-foreground-1);
  content: "";
  opacity: .7;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin: 0 5px;
  position: absolute;
  right: -15px;
}

.sectionItem > .tileContainer > .overlay > .details > div.languages > .pictoInfo {
  border: 1px solid var(--tile-hover-foreground-1);
}

.sectionItem > .tileContainer > .overlay > .details > div.languages > .pictoInfo:not(:last-child) {
  margin-right: 5px;
}

.sectionItem > .tileContainer > .overlay > .details > div.languages > .pictoInfo.impaired {
  height: 18px;
  padding-inline: 4px;
}

.sectionItem > .tileContainer > .overlay > .details > div.languages > .pictoInfo.impaired > svg {
  fill: var(--text-foreground-1);
  height: 12px;
}

.sectionItem > .tileContainer > .overlay > .details > div.parentalGuidance.pictoInfo {
  background-color: var(--tile-hover-foreground-1);
  color: var(--tile-parental-guidance-foreground);
  font: 11px var(--bold-font);
  padding: 1px 4px 2px;
}

.sectionItem > .tileContainer > .overlay .resizeDetectorSynopsis {
  margin-block: 4px 10px;
}

.sectionItem > .tileContainer > .overlay .synopsisWrapper {
  flex-direction: column;
  flex-shrink: 1;
  align-items: stretch;
  display: flex;
  overflow: visible;
}

.sectionItem > .tileContainer > .overlay .synopsisWrapper.empty {
  margin: 0;
}

.sectionItem > .tileContainer > .overlay .synopsisWrapper.tagLine .synopsis > .text, .sectionItem > .tileContainer > .overlay .synopsisWrapper.tagLine .ellipsis {
  font-size: var(--tile-synopsis-tagline-font-size-u);
  line-height: var(--tile-synopsis-tagline-line-height-u);
}

.sectionItem > .tileContainer > .overlay .synopsis, .sectionItem > .tileContainer > .overlay .ellipsis {
  font: var(--tile-synopsis-font-size-u) var(--light-font);
  letter-spacing: .1pt;
  line-height: var(--tile-synopsis-line-height-u);
}

.sectionItem > .tileContainer > .overlay .synopsis > .text {
  font: var(--tile-synopsis-font-size-u) var(--light-font);
  line-height: var(--tile-synopsis-line-height-u);
  max-height: unset;
  flex: 1;
  overflow: hidden;
}

.sectionItem > .tileContainer > .overlay .ellipsis {
  opacity: .7;
}

.sectionItem > .tileContainer > .overlay .ellipsis:hover {
  opacity: 1;
}

.sectionItem > .tileContainer > .overlay .buttonFX {
  margin-top: auto;
}

.sectionItem > .tileContainer > .overlay .buttonFX > .content {
  font-size: 12px;
}

.pricing {
  background-color: var(--transaction-status-purchased-background-tile);
  color: var(--transaction-status-purchased-foreground);
  font: 14px var(--semibold-font);
  flex-direction: column;
  padding-inline: 10px;
  display: flex;
}

.pricing.spaced {
  row-gap: 10px;
}

.pricing.reversed {
  flex-direction: column-reverse;
}

.pricing > .availabilityDate {
  color: var(--tile-hover-foreground-1);
}

.pricing.purchasable {
  background-color: unset;
  padding: 0;
}

.pricing div {
  -webkit-user-select: none;
  user-select: none;
  justify-content: center;
}

.overlay .pricing {
  align-items: center;
  margin-top: auto;
  overflow: visible;
}

.overlay .pricing + .buttonFX {
  margin-top: 10px;
}

.iconBar .pricing > .availabilityDate {
  color: var(--text-foreground-1);
  margin-bottom: 0;
  padding: 5px 10px;
}

.iconBar .pricing > .buttonFX > .content {
  font-size: 16px;
}

.iconBar .pricing:not(.purchasable) {
  background-color: var(--transaction-status-purchased-background-card);
  margin: 0;
  padding: 5px 10px;
}

.episodePricing {
  column-gap: 20px;
  display: flex;
  overflow: visible;
}

.availabilityDate {
  background-color: var(--transaction-status-availability-background);
  color: var(--tile-hover-foreground-1);
  font: italic 14px var(--regular-font);
  justify-content: center;
  overflow: visible;
}

.buttonFXBicolor > .content {
  flex-direction: row;
}

.buttonFXBicolor > .content > .part {
  align-items: center;
  height: 100%;
}

.buttonFXBicolor > .content > .part.left {
  flex-grow: 1;
  justify-content: center;
}

.buttonFXBicolor > .content > .part.right {
  text-shadow: 1px 1px #0000004d;
  justify-content: center;
  width: 75px;
  padding: 0 10px;
}

.buttonFXBicolor.dark > .content > .part.left {
  background-color: var(--button-transaction-dark-left-background);
  color: var(--button-transaction-dark-left-foreground);
}

.buttonFXBicolor.dark > .content > .part.right {
  background-color: var(--button-transaction-dark-right-background);
  color: var(--button-transaction-dark-right-foreground);
}

.buttonFXBicolor.dark > .content.hovered > .left {
  background-color: #0000 !important;
}

.buttonFXBicolor.dark > .content.hovered > .right {
  background-color: var(--button-transaction-dark-right-background-hover) !important;
}

.buttonFXBicolor.light > .content > .part.left {
  background-color: var(--button-transaction-light-left-background);
  color: var(--button-transaction-light-left-foreground);
}

.buttonFXBicolor.light > .content > .part.right {
  background-color: var(--button-transaction-light-right-background);
  color: var(--button-transaction-light-right-foreground);
}

.buttonFXBicolor.light > .content.hovered > .left {
  background-color: #0000 !important;
}

.buttonFXBicolor.light > .content.hovered > .right {
  background-color: var(--button-transaction-dark-right-background-hover) !important;
}

.buttonFXBicolor > .content.hovered > .part.left, .buttonFXBicolor > .content.hovered > .part.right {
  color: var(--button-foreground-hover);
}

.modalDialogDiv.confirmation {
  max-width: 500px;
}

.modalDialogDiv.confirmation > .content > .question {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
  padding: 20px var(--modal-inline-padding-u);
}

.modalDialogDiv.confirmation > .content > .buttons {
  padding: 30px var(--modal-inline-padding-u);
  flex-direction: column-reverse;
  align-items: center;
  row-gap: 20px;
  display: flex;
}

@keyframes modalSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes modalSlideUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes closeBtnSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes iconSlideDown {
  0% {
    transform: translateY(-300%);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes iconSlideUp {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-300%);
  }
}

.modalBackground {
  z-index: 1000;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.modalOverlayDiv {
  background-color: var(--dimmer);
  z-index: 1000;
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
}

.modalContentDiv {
  --icon-size-u: 100px;
  --balloon-height-u: 88px;
  --balloon-width-u: 86px;
  text-align: center;
  z-index: 10000;
  padding: 20px;
  position: fixed;
  inset: 0;
}

.modalContentDiv.modalContentClickable {
  cursor: pointer;
}

.modalContentDiv:after {
  content: "";
  vertical-align: middle;
  height: 100%;
  margin-left: -.05em;
  display: inline-block;
}

.modalContentDiv > .modalDialogDiv {
  box-sizing: border-box;
  cursor: default;
  vertical-align: middle;
  outline: 0;
  flex-direction: column;
  max-height: 100%;
  margin: auto;
  display: flex;
  position: relative;
  overflow: visible;
}

.modalContentDiv > .modalDialogDiv > .content {
  border-radius: var(--border-radius-huge-u);
  will-change: transform;
  flex-direction: column;
  flex: auto;
  width: 100%;
  display: flex;
  transform: translateY(0);
}

.modalContentDiv > .modalDialogDiv > .content.slideDown {
  animation: modalSlideDown var(--short-duration) ease-in both;
}

.modalContentDiv > .modalDialogDiv > .content.slideUp {
  animation: modalSlideUp var(--short-duration) ease-out both;
}

.modalContentDiv > .modalDialogDiv > .content > .modalHeader {
  z-index: 10;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  display: flex;
}

.modalContentDiv > .modalDialogDiv > .content > .modalHeader > .title {
  font: 26px var(--semibold-font);
  margin: 0 auto 0 10px;
}

.modalContentDiv > .modalDialogDiv > .content > .modalHeader > .title.clickable {
  cursor: pointer;
}

.modalContentDiv > .modalDialogDiv > .content > .modalHeader > .modalClose {
  animation: closeBtnSlideDown var(--extra-short-duration) var(--short-duration) ease-in both;
}

.modalContentDiv > .modalDialogDiv > .content > .modalHeader > .modalClose > svg {
  width: 20px;
}

.modalContentDiv > .modalDialogDiv > .content > .header {
  font: 26px var(--bold-font);
  padding: 0 var(--modal-inline-padding-u);
  border: none;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.modalContentDiv > .modalDialogDiv > .content > .header.separator {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  margin-bottom: 30px;
  padding-bottom: 20px;
}

.modalContentDiv > .modalDialogDiv > .iconContainer {
  aspect-ratio: 1;
  margin-left: calc(var(--icon-size-u) / -2);
  left: 50%;
  top: calc(var(--icon-size-u) / -2);
  width: var(--icon-size-u);
  z-index: 15;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  position: absolute;
  overflow: visible;
}

.modalContentDiv > .modalDialogDiv > .iconContainer.slideDown {
  animation: iconSlideDown var(--short-duration) ease-in;
}

.modalContentDiv > .modalDialogDiv > .iconContainer.slideUp {
  animation: iconSlideUp var(--short-duration) ease-out;
}

.modalContentDiv > .modalDialogDiv > .iconContainer > svg {
  fill: #0000;
  height: var(--balloon-height-u);
  margin-left: calc(var(--balloon-width-u) / -2);
  stroke-width: 2px;
  left: 50%;
  top: calc(var(--icon-size-u) - var(--balloon-height-u));
  width: var(--balloon-width-u);
  position: absolute;
}

.modalContentDiv > .modalDialogDiv > .iconContainer > .pictoElement > svg {
  width: 30px;
}

.modalContentDiv > .modalDialogDiv > .iconContainer > .pictoElement.error > svg > path:nth-child(2) {
  fill: var(--background);
}

.modalContentDiv > .modalDialogDiv > .iconContainer > .pictoElement.recording {
  margin-top: -1px;
}

.modalContentDiv > .modalDialogDiv > .iconContainer > .pictoElement.recording > svg {
  width: 36px;
}

.modalContentDiv > .modalDialogDiv.dark > .content {
  background-color: var(--overlay-background);
}

.modalContentDiv > .modalDialogDiv.dark > .content > .modalHeader, .modalContentDiv > .modalDialogDiv.dark > .content > .modalHeader > .title {
  color: var(--overlay-foreground-1);
}

.modalContentDiv > .modalDialogDiv.dark > .content > .modalHeader > .pictoElement > svg {
  fill: var(--overlay-foreground-1);
}

.modalContentDiv > .modalDialogDiv.dark > .content > .header {
  border-bottom-color: var(--separator-dark);
  color: var(--overlay-foreground-1);
}

.modalContentDiv > .modalDialogDiv.dark > .iconContainer {
  background-color: var(--overlay-background);
}

.modalContentDiv > .modalDialogDiv.dark > .iconContainer > svg {
  stroke: var(--overlay-foreground-1);
}

.modalContentDiv > .modalDialogDiv.dark > .iconContainer > .pictoElement > svg {
  fill: var(--overlay-foreground-1);
}

.modalContentDiv > .modalDialogDiv.dark > .iconContainer > .pictoElement.recording > svg {
  fill: var(--recording);
}

.modalContentDiv > .modalDialogDiv.light > .content {
  background-color: var(--overlay-foreground-1);
}

.modalContentDiv > .modalDialogDiv.light > .content > .modalHeader, .modalContentDiv > .modalDialogDiv.light > .content > .modalHeader > .title {
  color: var(--overlay-background);
}

.modalContentDiv > .modalDialogDiv.light > .content > .modalHeader > .pictoElement > svg {
  fill: var(--overlay-background);
}

.modalContentDiv > .modalDialogDiv.light > .content > .header {
  border-bottom-color: var(--separator-light);
  color: var(--overlay-background);
}

.modalContentDiv > .modalDialogDiv.light > .iconContainer {
  background-color: var(--overlay-foreground-1);
}

.modalContentDiv > .modalDialogDiv.light > .iconContainer > svg {
  stroke: var(--overlay-background);
}

.modalContentDiv > .modalDialogDiv.light > .iconContainer > .pictoElement > svg {
  fill: var(--overlay-background);
}

.modalContentDiv > .modalDialogDiv.light > .iconContainer > .pictoElement.recording > svg {
  fill: var(--recording);
}

.modalDialogDiv.npvrConfirmation {
  width: 450px;
}

.modalDialogDiv.npvrConfirmation > .content {
  color: var(--overlay-foreground-1);
  position: relative;
}

.modalDialogDiv.npvrConfirmation > .content > .pictoElement {
  z-index: 15;
  position: absolute;
  top: 10px;
  left: 10px;
}

.modalDialogDiv.npvrConfirmation > .content > .pictoElement > svg {
  fill: var(--overlay-foreground-1);
  width: 20px;
  top: 10px;
  left: 10px;
}

.modalDialogDiv.npvrConfirmation > .content > .header > .episodeTitle {
  font: 18px var(--regular-font);
}

.modalDialogDiv.npvrConfirmation > .content > .confirmationBody {
  padding: 30px var(--modal-inline-padding-u);
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
  display: flex;
}

.modalDialogDiv.npvrConfirmation > .content > .confirmationBody > .confirmationOptions {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 30px;
}

.modalDialogDiv.npvrConfirmation > .content > .confirmationBody > .confirmationOptions > .confirmationOption {
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  margin: 10px 0;
}

.modalDialogDiv.npvrConfirmation > .content > .confirmationBody > .confirmationOptions > .confirmationOption > .confirmationLabel {
  font: 18px var(--semibold-font);
  margin-bottom: 10px;
}

.modalDialogDiv.npvrConfirmation > .content > .confirmationBody > .confirmationOptions > .confirmationOption > input {
  text-align: center;
  width: 50px;
}

.multipleChoices {
  cursor: pointer;
  font: 14px var(--semibold-font);
  align-items: center;
  position: relative;
}

.multipleChoices.disabled {
  cursor: default;
}

.multipleChoices.disabled > .disabledLayer {
  display: block;
}

.multipleChoices > .disabledLayer {
  background-color: #ffffff4d;
  width: 100%;
  height: 100%;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

.multipleChoices > .labels {
  --choice-count: 0;
  --offset-x: 0;
  --label-height: 0;
  --label-width: 0;
  grid-template-columns: repeat(var(--choice-count), 1fr);
  width: 100%;
  display: grid;
}

.multipleChoices > .labels:before {
  background-color: var(--multiple-choice-background-selected);
  border-radius: var(--border-radius-tiny-u);
  content: "";
  height: var(--label-height);
  transform: translateX(var(--offset-x));
  transition: transform var(--extra-short-duration) ease-out;
  width: var(--label-width);
  display: block;
  position: absolute;
}

.multipleChoices > .labels > .label {
  border: 1px solid var(--multiple-choice-border);
  color: var(--multiple-choice-foreground);
  transition: color var(--short-duration) ease-out;
  -webkit-user-select: none;
  user-select: none;
  z-index: 1;
  justify-content: center;
  align-items: center;
  padding: 10px 50px;
}

.multipleChoices > .labels > .label:first-child {
  border-radius: var(--border-radius-tiny-u) 0 0 var(--border-radius-tiny-u);
}

.multipleChoices > .labels > .label:last-child {
  border-radius: 0 var(--border-radius-tiny-u) var(--border-radius-tiny-u) 0;
}

.multipleChoices > .labels > .label.small {
  padding: 10px;
}

.multipleChoices > .labels > .label.medium {
  padding: 10px 30px;
}

.multipleChoices > .labels > .label.large {
  padding: 10px 50px;
}

.multipleChoices > .labels > .label:hover {
  background-color: var(--multiple-choice-background-hover);
  color: var(--multiple-choice-foreground-hover);
  border-color: var(--multiple-choice-border-hover);
}

.multipleChoices > .labels > .label.selected {
  color: var(--multiple-choice-foreground-selected);
  border-color: var(--multiple-choice-border-selected);
}

.resizeDetector {
  pointer-events: none;
  position: absolute;
  inset: 0;
}

.resizeDetector.withChildren {
  inset: initial;
  pointer-events: all;
  flex: 1 0 auto;
  position: relative;
}

.modalDialogDiv.eula {
  max-width: 500px;
}

.modalDialogDiv.eula > .content > .text {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
  padding: 20px var(--modal-inline-padding-u);
}

.modalDialogDiv.eula > .content > .buttons {
  padding: 0 var(--modal-inline-padding-u) 30px var(--modal-inline-padding-u);
  flex-direction: column-reverse;
  align-items: center;
  row-gap: 20px;
  display: flex;
}

.overlay > .iconBar {
  flex-direction: column;
  align-items: center;
  padding: 10px;
  display: flex;
  position: absolute;
  top: 5px;
  right: -24px;
}

.overlay > .iconBar > .iconContainer {
  background-color: var(--overlay-transparent-background);
  border-radius: var(--border-radius-huge-u);
  margin-bottom: 4px;
}

.overlay > .iconBar > .iconContainer > .pictoElement > svg {
  fill: var(--overlay-icon);
  width: 18px;
}

.overlay > .iconBar > .iconContainer > .pictoElement.favorite > svg {
  fill: var(--accent);
  stroke: var(--accent);
}

.overlay > .iconBar > .iconContainer > .pictoElement.bookmark {
  opacity: .3;
  transition: var(--opacity-short);
}

.overlay > .iconBar > .iconContainer > .pictoElement.bookmark.favorite {
  opacity: 1;
}

.overlay > .iconBar > .iconContainer > .pictoElement.bookmark.favorite > svg {
  fill: var(--accent);
  stroke: var(--accent);
}

.overlay > .iconBar > .iconContainer > .pictoElement.moreInfo > svg {
  margin: 10px;
}

.card .infoAndActionsContainer .iconBar {
  flex-direction: column;
  row-gap: 10px;
  width: 210px;
  display: flex;
}

.card .infoAndActionsContainer .iconBar .favoriteButton .content {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
}

.card .infoAndActionsContainer .iconBar .favoriteButton .content .favorite {
  margin-left: -3px;
}

.card .infoAndActionsContainer .iconBar .favoriteButton .content .favorite svg {
  fill: var(--accent);
  pointer-events: none;
  stroke: var(--accent);
}

.card .infoAndActionsContainer .iconBar .favoriteButton:hover .content .favorite:not(.franceChannel) svg {
  fill: var(--button-foreground-hover);
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}

.infiniteCircleLoader {
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
  width: 30px;
  animation: 2s linear infinite rotate;
  display: flex;
}

.infiniteCircleLoader > svg {
  width: 100%;
}

.infiniteCircleLoader.dark > svg {
  fill: var(--background);
}

.infiniteCircleLoader.light > svg {
  fill: var(--text-foreground-1);
}

.src-components-textScroller-TextScroller-module__wrapper-eXPj9u {
  white-space: nowrap;
  overflow: hidden;
}

.src-components-textScroller-TextScroller-module__elementMeasure-wjkW91 {
  position: absolute;
  top: -1000px;
  left: -1000px;
}

.sectionItem > .tileContainer > .decoration {
  border-radius: inherit;
  opacity: 1;
  height: 100%;
  transition: var(--opacity-short);
  z-index: 310;
  width: 100%;
  position: absolute;
}

.sectionItem > .tileContainer > .decoration.tv {
  background: var(--tile-tv-bottom-gradient);
}

.sectionItem > .tileContainer > .decoration > * {
  position: absolute;
}

.sectionItem > .tileContainer > .decoration > .channelImage {
  height: var(--tile-channel-logo-height-u);
  width: var(--tile-channel-logo-width-u);
  background: 0 / contain no-repeat;
  bottom: 10px;
  left: 10px;
}

.sectionItem > .tileContainer > .decoration > .series {
  bottom: 10px;
  right: 10px;
}

.sectionItem > .tileContainer > .decoration > .series > svg path:first-child, .sectionItem > .tileContainer > .decoration > .series > svg path:nth-child(2), .sectionItem > .tileContainer > .decoration > .series > svg path:nth-child(3) {
  fill: #000;
}

.sectionItem > .tileContainer > .decoration > .future, .sectionItem > .tileContainer > .decoration > .preview, .sectionItem > .tileContainer > .decoration > .recording, .sectionItem > .tileContainer > .decoration > .scheduledRecording {
  top: 10px;
  left: 10px;
}

.sectionItem > .tileContainer > .decoration > .watchingStatus {
  margin: auto;
  position: relative;
  overflow: visible;
}

.sectionItem > .tileContainer > .decoration > .debugInfo {
  background-color: var(--dimmer);
  border: 2px solid var(--accent);
  border-radius: var(--tile-border-radius-u) 0;
  color: var(--tile-hover-foreground-1);
  flex-direction: column;
  padding: 5px;
  display: flex;
}

.sectionItem > .tileContainer > .decoration > .debugInfo > div {
  font: 12px var(--semibold-font);
  -webkit-user-select: none;
  user-select: none;
  flex-direction: column;
  display: flex;
}

.sectionItem > .tileContainer > .decoration > .debugInfo > div.record {
  border-top: 1px solid var(--overlay-foreground-2);
  margin-top: 3px;
  padding-top: 3px;
}

.watchingStatus {
  --watching-status-size-u: 80px;
  aspect-ratio: 1;
  background-color: var(--watching-status-background);
  height: var(--watching-status-size-u);
  width: var(--watching-status-size-u);
  border-radius: 50%;
  position: relative;
}

.watchingStatus.clickable {
  cursor: pointer;
}

.watchingStatus > svg {
  width: 104px;
  height: 104px;
  margin: -12px 0 0 -12px;
}

.watchingStatus > svg > circle {
  fill: #0000;
  stroke: var(--watching-status-progress-foreground);
  stroke-dasharray: 252;
  stroke-dashoffset: 0;
  stroke-width: 4px;
  transform-origin: 50%;
  transition: stroke-dashoffset var(--long-duration) ease-out;
  transform: rotate(-90deg);
}

.watchingStatus > svg > circle.background {
  stroke: var(--watching-status-progress-background);
}

.watchingStatus > .pictoElement {
  margin: -14px 0 0 -14px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.src-components-progressBar-ProgressBar-module__container-ZSxkYh {
  background-color: var(--live-progress-bar-background);
  pointer-events: none;
  z-index: 320;
  width: 100%;
  height: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.src-components-progressBar-ProgressBar-module__container-ZSxkYh > .src-components-progressBar-ProgressBar-module__progressBar-sOkRxy {
  background-color: var(--live-progress-bar-foreground);
  transform-origin: 0;
  transition: transform var(--long-duration) linear;
  will-change: transform;
  width: 100%;
  transform: scaleX(1);
}

.section.placeholder .sectionSlider > .sectionItem {
  margin-right: var(--tile-gemtv-horizontal-space-u);
  width: var(--tile-gemtv-image-width-u);
}

.section.placeholder .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-gemtv-image-height-u);
}

.section.placeholder .sectionSlider > .sectionItem > .textContainer > .text {
  background-color: var(--placeholder-tile);
  flex: 0 auto;
  width: 200px;
  height: 17px;
  margin-bottom: 2px;
}

.section.placeholder .sectionSlider > .sectionItem > .textContainer > .text.secondLineInfo {
  width: 140px;
}

.section.placeholder.gemtv.medium .sectionItem {
  width: var(--tile-landscape-image-width-u);
}

.section.placeholder.gemtv.medium .sectionItem > .tileContainer {
  height: var(--tile-landscape-image-height-u);
}

.section.placeholder.gemtv.big > .sectionItem {
  width: var(--tile-landscape-big-image-width-u);
}

.section.placeholder.gemtv.big > .sectionItem > .tileContainer {
  height: var(--tile-landscape-big-image-height-u);
}

.section.placeholder.channelgroup .sectionSlider .sectionItem {
  margin-block: var(--selection-thickness-u);
  margin-right: var(--tile-channel-group-horizontal-space-u);
  width: var(--tile-channel-group-image-width-u);
}

.section.placeholder.channelgroup .sectionSlider .sectionItem.placeholder > .tileContainer {
  height: var(--tile-channel-group-image-height-u);
}

.section.placeholder.channelgroup .sectionSlider .sectionItem.placeholder > .textContainer {
  display: none;
}

.section.placeholder.channelgroup.big .sectionSlider .sectionItem {
  margin-right: var(--tile-channel-group-big-horizontal-space-u);
  width: var(--tile-channel-group-big-image-width-u);
}

.section.placeholder.channelgroup.big .sectionSlider .sectionItem.placeholder > .tileContainer {
  height: var(--tile-channel-group-big-image-height-u);
  width: var(--tile-channel-group-big-image-width-u);
}

.section.placeholder.portrait .sectionSlider > .sectionItem {
  margin-right: var(--tile-portrait-horizontal-space-u);
  width: var(--tile-portrait-image-width-u);
}

.section.placeholder.portrait .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-portrait-image-height-u);
  background-size: 100% 100%;
}

.section.placeholder.portrait .sectionSlider > .sectionItem > .textContainer {
  display: none;
}

.section.placeholder.deeplink .sectionSlider > .sectionItem {
  margin-right: var(--tile-deeplink-horizontal-space-u);
  width: var(--tile-deeplink-image-width-u);
}

.section.placeholder.deeplink .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-deeplink-image-height-u);
  background-size: 100% 100%;
}

.section.placeholder.deeplink .sectionSlider > .sectionItem > .textContainer {
  display: none;
}

.section.placeholder.deeplink5x1 .sectionSlider > .sectionItem {
  margin-block: var(--selection-thickness-u);
  margin-right: var(--tile-deeplink-5x1-horizontal-space-u);
  width: var(--tile-deeplink-5x1-image-width-u);
}

.section.placeholder.deeplink5x1 .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-deeplink-5x1-image-height-u);
}

.section.placeholder.deeplink3x1 .sectionSlider > .sectionItem {
  margin-block: var(--selection-thickness-u);
  margin-right: var(--tile-deeplink-3x1-horizontal-space-u);
  width: var(--tile-deeplink-3x1-image-width-u);
}

.section.placeholder.deeplink3x1 .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-deeplink-3x1-image-height-u);
}

.section.placeholder.landscape .sectionSlider > .sectionItem {
  margin-right: var(--tile-landscape-horizontal-space-u);
  width: var(--tile-landscape-image-width-u);
}

.section.placeholder.landscape .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-landscape-image-height-u);
  background-size: 100% 100%;
}

.section.placeholder.landscape .sectionSlider > .sectionItem > .textContainer {
  display: none;
}

.section.placeholder.landscape.big .sectionSlider > .sectionItem {
  margin-block: var(--selection-thickness-u);
  margin-right: var(--tile-landscape-big-horizontal-space-u);
  width: var(--tile-landscape-big-image-width-u);
}

.section.placeholder.landscape.big .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-landscape-big-image-height-u);
}

.section.placeholder.landscape.vod .sectionSlider > .sectionItem {
  margin-right: var(--tile-landscape-vod-horizontal-space-u);
  width: var(--tile-landscape-vod-image-width-u);
}

.section.placeholder.landscape.vod .sectionSlider > .sectionItem > .tileContainer {
  height: var(--tile-landscape-vod-image-height-u);
  background-size: 100% 100%;
}

.section.placeholder.landscape.vod .sectionSlider > .sectionItem > .textContainer {
  display: none;
}

.sortAndFilter {
  align-items: center;
  margin-left: 20px;
  display: flex;
}

.sortAndFilter > input {
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-huge-u);
  color: var(--search-grid-foreground);
  font: 16px var(--regular-font);
  -webkit-user-select: text;
  user-select: text;
  background-color: #0000;
  justify-content: center;
  width: 250px;
  margin-right: 20px;
  padding: 8px 12px;
  display: flex;
}

.sortAndFilter > input::placeholder {
  color: var(--search-grid-placeholder);
}

.sortAndFilter > button {
  color: var(--placeholder-input);
  cursor: pointer;
  background-color: #0000;
  border: 0;
  align-items: center;
}

.sortAndFilter > button.selected {
  color: var(--text-foreground-1);
}

.sortAndFilter > button > .pictoElement > svg {
  fill: var(--text-foreground-1);
  width: 20px;
}

@keyframes circleLoaderArcSpin {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.infiniteCircleLoaderArc {
  aspect-ratio: 1;
  border: 10px solid #fff3;
  border-left-color: #fff;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 100px;
  margin: auto;
  animation: 1s linear infinite circleLoaderArcSpin;
  display: flex;
  transform: translateZ(0);
}

.mainLayout {
  background-color: var(--background);
  z-index: 200;
  flex-direction: column;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  overflow-y: auto;
}

.alertPicto {
  width: 24px;
  height: 24px;
}

.alertPicto.failure svg {
  fill: #b90015;
}

.alertPicto.failure svg path:last-child {
  fill: var(--background);
}

.alertPicto.warning svg {
  fill: var(--warning);
}

.alertPicto.warning svg path:last-child {
  fill: #000;
}

::-webkit-scrollbar {
  -webkit-box-shadow: unset;
  background: var(--scrollbar-background);
  width: 14px;
  height: 14px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: unset;
  background: none;
}

::-webkit-scrollbar-thumb {
  -webkit-box-shadow: unset;
  background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-corner {
  -webkit-box-shadow: unset;
  background: none;
}

.mainLayout {
  transition: background-color var(--short-duration) ease-in;
  background-color: #0000;
  flex-direction: column;
  display: flex;
}

.mainLayout.theaterMode {
  background-color: var(--player-background);
  justify-content: center;
}

.mainLayout.theaterMode > .circleLoader {
  position: absolute;
}

.mainLayout.theaterMode > .circleLoader > svg > circle {
  stroke-width: 10px;
}

.mainLayout.theaterMode > .circleLoader > svg > circle:last-child {
  stroke: var(--player-overlay-background);
}

.mainLayout > .workingZone {
  opacity: 1;
  min-height: 100%;
  transition: opacity var(--medium-duration) ease-in, visibility var(--medium-duration) ease-in;
  visibility: visible;
  z-index: 220;
  flex-direction: column;
  justify-content: space-between;
  display: flex;
  position: relative;
}

.mainLayout > .workingZone.theaterMode {
  opacity: 0;
  visibility: hidden;
}

.mainLayout > .workingZone > .text {
  font-size: 70px;
}

@keyframes fade {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  30% {
    background-color: #ffccf6;
  }

  45% {
    background-color: #ccdcff;
  }

  60% {
    background-color: #ccffe6;
  }

  75% {
    background-color: #ffefcc;
  }

  85% {
    opacity: 1;
    background-color: #fff;
  }

  100% {
    opacity: 0;
  }
}

@keyframes numberFade {
  from {
    opacity: 0;
    transform: scale(0);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

.unicornized {
  opacity: 0;
  z-index: 1000000;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  animation: 6s ease-out fade;
  display: flex;
  position: absolute;
  inset: 0;
}

.unicornized > .countDown {
  color: #000;
  opacity: 0;
  font: bold 400px Helvetica, sans-serif;
  animation: 1s ease-out numberFade;
  position: absolute;
}

.unicornized > .countDown.number0 {
  animation-delay: 1s;
}

.unicornized > .countDown.number1 {
  animation-delay: 2s;
}

.unicornized > .countDown.number2 {
  animation-delay: 3s;
}

.unicornized > .countDown.number3 {
  color: #0000;
  background-color: #0000;
  background-image: linear-gradient(red 30%, orange, #ff0, green, #00f, violet 80%);
  background-clip: text;
  font-size: 240px;
  animation-delay: 4s;
}

.bg1, .bg2, .bg3, .bg4 {
  z-index: 10000;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
}

.bg1 {
  background: #ffccf6;
}

.bg2 {
  background: #ccdcff;
}

.bg3 {
  background: #ccffe6;
}

.bg4 {
  background: #ffefcc;
}

.unicorn {
  overflow: visible;
  transform: scale(.5);
}

.unicorn * {
  display: block;
  overflow: visible;
}

.face {
  background: #efeeef;
  border-radius: 4rem;
  width: 8rem;
  height: 6rem;
  transform: rotate(20deg);
}

.face * {
  position: absolute;
}

.cheek {
  z-index: 1;
  background: radial-gradient(#eccbdf 5%, #efeeef 70%);
  border-radius: 50%;
  width: 3rem;
  height: 3rem;
  top: 2rem;
  left: 4rem;
}

.snoot {
  background: #efeeef;
  border-radius: 4rem;
  width: 14rem;
  height: 7rem;
  left: -5rem;
  transform: rotate(-40deg);
}

.nose {
  background: #e4a3ca;
  border-radius: 50% 0 0 50%;
  width: 3.5rem;
  height: 7rem;
}

.nostril {
  background: #5a5056;
  border-radius: 50%;
  width: 1rem;
  height: 2rem;
  top: 1.5rem;
  left: 1rem;
}

.eye {
  background: #332a2f;
  border-radius: 3rem 3rem 0 0;
  width: 2.5rem;
  height: 1rem;
  left: 3rem;
}

.eye:after {
  content: "";
  background: #efeeef;
  border-radius: 3rem 3rem 0 0;
  width: 1.5rem;
  height: 1rem;
  position: absolute;
  top: .5rem;
  left: .5rem;
}

.eyelashes {
  background: #332a2f;
  width: .5rem;
  height: 1rem;
  top: -.5rem;
  left: 1rem;
}

.eyelashes:before {
  content: "";
  background: #332a2f;
  width: .5rem;
  height: 1rem;
  position: absolute;
  top: .25rem;
  left: -1rem;
  transform: rotate(-40deg);
}

.eyelashes:after {
  content: "";
  background: #332a2f;
  width: .5rem;
  height: 1rem;
  position: absolute;
  top: .25rem;
  left: 1rem;
  transform: rotate(30deg);
}

.ear {
  z-index: 1;
  border-bottom: 4rem solid #efeeef;
  border-left: 2rem solid #0000;
  border-right: 2rem solid #0000;
  top: -5rem;
  left: 2.5rem;
  transform: rotate(-5deg);
}

.ear:after {
  content: "";
  border-bottom: 2rem solid #e4a3ca;
  border-left: .75rem solid #0000;
  border-right: .75rem solid #0000;
  position: absolute;
  top: .75rem;
  left: -.75rem;
}

.horn {
  z-index: -1;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  background: repeating-linear-gradient(-25deg, #ffe3aa, #ffe3aa .5rem, #bea97e 1rem .5rem);
  width: 3rem;
  height: 7rem;
  top: -7rem;
  left: -.5rem;
  transform: rotate(-55deg);
}

.mane.top {
  border-radius: 50%;
  width: 4rem;
  height: 2rem;
  top: -1.5rem;
  left: 1.5rem;
  transform: rotate(140deg);
  box-shadow: 7px 1rem 0 6px #a891b6;
}

.mane.top:before {
  content: "";
  border-radius: 50%;
  width: 3rem;
  height: 2rem;
  position: absolute;
  top: 2.5rem;
  left: -3rem;
  transform: rotate(260deg);
  box-shadow: 5px 1rem 0 6px #ffead9;
}

.mane.top:after {
  content: "";
  border-radius: 50%;
  width: 4rem;
  height: 2rem;
  position: absolute;
  top: -.5rem;
  left: -2rem;
  transform: rotate(100deg);
  box-shadow: 5px 1rem 0 6px #c6e8d7;
}

.mane.mid {
  z-index: -1;
  border-radius: 50%;
  width: 4rem;
  height: 2rem;
  top: -1rem;
  left: 4.5rem;
  transform: rotate(250deg);
  box-shadow: 3px 1rem 0 8px #ffcbc1;
}

.mane.mid:before {
  content: "";
  border-radius: 50%;
  width: 4rem;
  height: 2rem;
  position: absolute;
  left: -2rem;
  transform: rotate(40deg);
  box-shadow: 5px 1rem 0 6px #afc8ff;
}

.mane.mid:after {
  content: "";
  z-index: -1;
  border-radius: 50%;
  width: 4rem;
  height: 2rem;
  position: absolute;
  top: 1rem;
  left: -1rem;
  transform: rotate(40deg);
  box-shadow: 0 1rem 0 .5rem #ff9cee;
}

.neck {
  z-index: -1;
  background: #efeeef;
  width: 3rem;
  height: 5rem;
  position: absolute;
  top: 5rem;
  left: 5rem;
  transform: skew(-20deg);
}

.mane.end {
  border-radius: 50%;
  width: 4rem;
  height: 2rem;
  top: 1rem;
  transform: rotate(270deg);
  box-shadow: 3px 1rem 0 8px #b6edb6;
}

.mane.end:before {
  content: "";
  border-radius: 50%;
  width: 5rem;
  height: 3rem;
  position: absolute;
  left: 1rem;
  box-shadow: 5px 1rem 0 6px #caf;
}

.mane.end:after {
  content: "";
  z-index: -1;
  border-radius: 50%;
  width: 5rem;
  height: 3rem;
  position: absolute;
  top: .5rem;
  left: -.5rem;
  transform: rotate(30deg);
  box-shadow: 5px 1rem 0 6px #ffbdbd;
}

@keyframes rotating {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.avenueView {
  --picto-huge-size-u: 150px;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: auto;
  display: flex;
  position: relative;
}

.avenueView > .avenueHeader {
  animation: fadeIn var(--medium-duration) ease-in forwards;
  pointer-events: none;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}

.avenueView > .avenueHeader + .slider {
  margin-top: calc(110px + var(--header-height-u));
}

.avenueView > .avenueHeader + .backBar + .slider > .section.grid > .header > .sectionTitleContainer {
  display: none;
}

.avenueView > .slider {
  --carousel-margin: calc(40px + var(--header-height-u));
  flex-direction: column;
  height: auto;
  margin-bottom: 20px;
  display: flex;
  overflow: visible;
}

.avenueView > .slider:first-child .section:first-child, .avenueView > .slider:first-child .sectionCarousel + .section {
  margin-top: var(--carousel-margin);
}

.avenueView > .slider > .noResult {
  flex-direction: column;
  align-items: center;
  margin: 50px;
  display: flex;
}

.avenueView > .slider > .noResult > .pictoElement {
  height: auto;
}

.avenueView > .slider > .noResult > .pictoElement > svg {
  cursor: default;
  fill: var(--text-foreground-1);
  opacity: .8;
  width: var(--picto-huge-size-u);
}

.avenueView > .slider > .noResult > .noResultText {
  color: var(--text-foreground-1);
  font: 18px var(--regular-font);
  width: auto;
  margin-top: 30px;
}

.avenueView > .slider > .emptyMyVideos {
  color: var(--text-foreground-1);
  flex-direction: column;
  align-items: center;
  margin: 10% auto;
}

.avenueView > .slider > .emptyMyVideos > .title {
  font: 20px var(--bold-font);
}

.avenueView > .slider > .emptyMyVideos > .subtitle {
  font: 16px var(--regular-font);
  margin-top: 10px;
}

.avenueView > .slider > .emptyMyVideos > .iconAndText {
  align-items: center;
  margin-top: 40px;
}

.avenueView > .slider > .emptyMyVideos > .iconAndText > .pictoElement {
  width: auto;
  height: auto;
  margin: 0 40px 0 0;
}

.avenueView > .slider > .emptyMyVideos > .iconAndText > .pictoElement > svg {
  fill: var(--text-foreground-1);
  width: var(--picto-huge-size-u);
}

.avenueView > .slider > .emptyMyVideos > .iconAndText > .pictoElement > svg path:last-child {
  fill: var(--accent);
}

.avenueView > .slider > .emptyMyVideos > .iconAndText > div {
  flex-direction: column;
}

.avenueView > .slider > .emptyMyVideos > .iconAndText > div > ul {
  flex-direction: column;
  margin: 10px 0 0;
  padding: 0;
  list-style: inside square;
  display: flex;
}

.avenueView > .slider > .emptyMyVideos > .iconAndText > div > ul > li {
  font: 16px var(--regular-font);
  margin-bottom: 5px;
  display: list-item;
}

.avenueView > .slider > .emptyMyVideos > .image {
  background-position: top;
  background-repeat: no-repeat;
  width: 100%;
  height: 300px;
}

.avenueView > .slider > .search {
  pointer-events: auto;
  flex-direction: column;
  align-items: stretch;
  width: auto;
  height: auto;
  margin-top: 50px;
  padding: 50px;
  display: flex;
}

.avenueView > .slider > .search > .searchBox {
  flex-direction: row;
  align-items: center;
  width: auto;
  height: auto;
  margin-bottom: 50px;
  display: flex;
  overflow: visible;
}

.avenueView > .slider > .search > .searchBox > .pictoElement {
  transform-origin: 14px 21px;
  width: 30px;
  margin-right: 20px;
}

.avenueView > .slider > .search > .searchBox > .pictoElement > svg {
  fill: var(--text-foreground-1);
  width: 100%;
}

.avenueView > .slider > .search > .searchBox > input {
  border: 0;
  border-bottom: 1px solid var(--search-avenue-bottom);
  color: var(--text-foreground-1);
  font: 30px var(--regular-font);
  -webkit-user-select: text;
  user-select: text;
  border-radius: 0;
  flex: 1;
  justify-content: center;
  height: auto;
  padding: 20px 0;
}

.avenueView > .slider > .search > .searchBox > input::selection {
  background: var(--text-foreground-1);
  color: var(--background);
}

.avenueView > .slider > .search > .searchBox > input::placeholder {
  color: var(--placeholder-input);
}

.avenueView > .slider > .search.loading > .searchBox > .pictoElement {
  animation: rotating var(--medium-duration) linear infinite;
}

.avenueView > .avenueImage {
  height: var(--avenue-image-height-u);
  margin: var(--header-height-u) 0 -10px 40px;
  width: var(--avenue-image-width-u);
  background: 0 / contain no-repeat;
}

.avenueView > .backBar {
  cursor: pointer;
  height: 40px;
  margin: calc(33px + var(--header-height-u)) auto 20px 50px;
  align-items: center;
  display: flex;
}

.avenueView > .backBar + .slider > .sectionCarousel + .section {
  margin-top: -12px;
}

.avenueView > .backBar + .avenueImage {
  margin-top: 0;
}

.modalContentDiv .avenueView.explore {
  margin-top: 20px;
}

.modalContentDiv .avenueView.explore > .slider .selectionBorder > .container {
  background-color: var(--tile-background-explorer);
}

.modalContentDiv .avenueView.explore > .slider .selectionBorder:hover > .container {
  background-color: var(--tile-background-explorer-hover);
}

.modalContentDiv .avenueView.explore .section.channel .tileContainer, .modalContentDiv .avenueView.explore .section.channelgroup .tileContainer {
  background-color: var(--tile-background);
}

.sectionCarousel {
  opacity: 1;
  pointer-events: none;
  height: 440px;
  transition: var(--opacity-medium);
  flex-direction: row;
  justify-content: center;
  align-items: stretch;
  padding: 0 20px;
  display: flex;
}

.sectionCarousel.hidden {
  opacity: 0;
}

.sectionCarousel .previousButton, .sectionCarousel .nextButton {
  opacity: .4;
  pointer-events: auto;
  align-items: center;
  width: 30px;
  height: 100%;
  display: flex;
}

.sectionCarousel .previousButton > .pictoElement, .sectionCarousel .nextButton > .pictoElement {
  height: 20px;
}

.sectionCarousel .previousButton:hover, .sectionCarousel .nextButton:hover {
  opacity: 1;
}

.sectionCarousel > .paginationAndActions {
  pointer-events: auto;
  flex-direction: column;
  align-self: flex-end;
}

.sectionCarousel > .paginationAndActions > .pagination {
  opacity: .8;
  flex: 1;
  margin-bottom: 25px;
  display: flex;
}

.sectionCarousel > .paginationAndActions > .pagination > .itemIndex {
  cursor: pointer;
}

.sectionCarousel > .paginationAndActions > .iconBar {
  --picto-shadow: drop-shadow(1px 1px 0 #0000004d);
  flex-direction: row;
  align-items: flex-end;
  height: 20px;
}

.sectionCarousel > .paginationAndActions > .iconBar .pictoElement {
  filter: var(--picto-shadow);
  width: 20px;
}

.sectionCarousel > .paginationAndActions > .iconBar .pictoElement > svg {
  width: 14px;
}

.sectionCarousel > .swipeable {
  pointer-events: auto;
  flex: auto;
  align-items: center;
  display: flex;
  overflow: visible;
}

.sectionCarousel > .swipeable > .itemSlideContainer {
  pointer-events: none;
  flex: 100%;
  align-items: center;
  height: 100%;
  position: relative;
  overflow: visible;
}

.sectionCarousel > .swipeable > .itemSlideContainer > .hubImage {
  width: auto;
  height: auto;
  padding-left: 100px;
  position: absolute;
  top: -80px;
}

.equalizer {
  --equalizer-bar-start: 0;
  --equalizer-bar-width-u: 2px;
  --equalizer-bar-width-incl-margin-u: 4px;
  cursor: pointer;
  filter: var(--picto-shadow);
  width: 18px;
  height: 20px;
  margin: 0 20px 3px;
  position: relative;
}

.equalizer.notAllowed {
  cursor: not-allowed;
}

.equalizer > span {
  background-color: var(--carousel-foreground);
  transform-origin: bottom;
  height: 100%;
  transition: transform var(--short-duration) ease-out;
  width: var(--equalizer-bar-width-u);
  margin: 0;
  display: block;
  position: absolute;
  bottom: 1px;
  transform: scaleY(1);
}

.equalizer > span:first-child {
  left: 0;
}

.equalizer > span:nth-child(2) {
  left: 4px;
}

.equalizer > span:nth-child(3) {
  left: 8px;
}

.equalizer > span:nth-child(4) {
  left: 12px;
}

.equalizer > span:nth-child(5) {
  left: 16px;
}

.equalizer .muteSign {
  left: var(--equalizer-bar-start);
  pointer-events: none;
  position: absolute;
}

.equalizer .muteSign > svg > line {
  stroke: var(--background);
  stroke-width: 2px;
}

.tooltip {
  background: var(--tooltip-background);
  border-radius: var(--border-radius-huge-u);
  color: var(--overlay-foreground-1);
  font: 14px var(--regular-font);
  pointer-events: auto;
  outline: none;
  padding: 6px 10px;
  box-shadow: 2px 2px 2px #0000000d, inset 1px 1px #ffffff0d;
}

.tooltip .tooltipContent {
  text-align: left;
  flex-direction: column;
  flex: 0 auto;
  margin: 10px;
  display: flex;
}

.tooltip .tooltipContent.carouselIndex {
  margin: 0;
}

.tooltip .tooltipContent.carouselIndex > img {
  border-radius: var(--tile-border-radius-u);
  margin: 16px 16px 0;
}

.tooltip .tooltipContent.carouselIndex > .titleContainer {
  font: 14px var(--regular-font);
  flex-direction: column;
  margin: 5px 16px;
  display: flex;
}

.tooltip .tooltipContent.carouselIndex.gemtv, .tooltip .tooltipContent.carouselIndex.landscape {
  width: 192px;
}

.tooltip .tooltipContent.carouselIndex.gemtv > img, .tooltip .tooltipContent.carouselIndex.landscape > img {
  width: 160px;
  height: 90px;
}

.tooltip .tooltipContent.carouselIndex.portrait {
  width: 144px;
}

.tooltip .tooltipContent.carouselIndex.portrait > img {
  width: 112px;
  height: 166px;
}

.tooltip .tooltipContent.castSummary {
  animation: fadeIn var(--medium-duration) ease-in forwards;
  flex-direction: column;
  align-items: flex-start;
  margin: 20px;
  display: flex;
}

.tooltip .tooltipContent.castSummary.castLoaderWrapper svg {
  fill: var(--overlay-foreground-1);
}

.tooltip .tooltipContent.castSummary a {
  color: var(--overlay-foreground-2);
  font: 14px var(--regular-font);
  align-items: center;
}

.tooltip .tooltipContent.castSummary a:hover {
  color: var(--overlay-foreground-1);
}

.tooltip .tooltipContent.castSummary a > .pictoElement {
  width: 24px;
}

.tooltip .tooltipContent.castSummary a > .pictoElement > svg {
  fill: var(--overlay-foreground-2);
  width: 12px;
}

.tooltip .tooltipContent.castSummary .summary {
  font: 14px var(--light-font);
  width: 400px;
  margin: 20px 0;
}

.tooltip .tooltipContent.castSummary > .detailsAndImage {
  flex-direction: row;
  align-items: flex-start;
  display: flex;
}

.tooltip .tooltipContent.castSummary > .detailsAndImage > .details {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.tooltip .tooltipContent.castSummary > .detailsAndImage > .details > .name {
  font: 24px var(--semibold-font);
}

.tooltip .tooltipContent.castSummary > .detailsAndImage > .details > .dates {
  font: 14px var(--regular-font);
  opacity: .8;
}

.tooltip .tooltipContent.castSummary > .detailsAndImage > img {
  width: 100px;
  margin-left: 10px;
}

.tooltip .tooltipContent.castSummary > .citation {
  color: var(--overlay-foreground-2);
  font: 12px var(--regular-font);
  align-self: flex-end;
  margin-top: 20px;
}

.tooltip .tooltipContent.castSummary > .citation a {
  font: 12px var(--semibold-font);
  margin-left: 5px;
}

.tooltip .tooltipContent.castSummary > .citation > .license:before {
  content: "-";
  margin: 0 5px;
}

.tooltip .tooltipContent.npvrError {
  font: 16px var(--semibold-font);
  margin: 20px;
}

.tooltip .tooltipContent.npvrError > .text.title {
  font: 16px var(--bold-font);
  margin-bottom: 10px;
}

.tooltip .tooltipContent.npvrError > .conflicts {
  flex-direction: column;
  margin: 5px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.tooltip .tooltipContent.npvrError > .conflicts > .conflictItem {
  margin-top: 5px;
}

.tooltip .tooltipContent.vodInformation {
  flex-direction: column;
  margin: 20px 30px;
  display: flex;
}

.tooltip .tooltipContent.vodInformation > .bullet {
  font: 14px var(--regular-font);
}

.tooltip .tooltipContent.vodInformation > .bullet:before {
  content: "■";
  margin-right: 10px;
}

.tooltip .tooltipContent.vodInformation > .title {
  font: 20px var(--semibold-font);
}

.tooltip .tooltipContent.vodInformation > .subtitle {
  font: 16px var(--semibold-font);
  margin: 20px 0 10px;
}

.tooltip .tooltipContent.vodInformation > .customerService {
  font: 16px var(--semibold-font);
  margin-top: 40px;
}

.itemIndex {
  --item-index-width-u: 50px;
  color: var(--carousel-foreground);
  width: auto;
  height: 19px;
  display: flex;
  position: relative;
  overflow: visible;
}

.itemIndex > .videoProgressContainer {
  width: calc(100% - 2px);
  height: 19px;
  position: absolute;
}

.itemIndex > .videoProgressContainer > .videoProgress {
  background: var(--player-progress-bar-buffered);
  width: 0;
  height: 100%;
  display: none;
  position: absolute;
}

.itemIndex.focused > .index > p {
  color: var(--accent);
  font: 14px var(--bold-font);
}

.itemIndex.focused .videoProgress {
  display: flex;
}

.itemIndex > .index {
  width: var(--item-index-width-u);
  flex-direction: column;
  justify-content: flex-start;
  display: flex;
}

.itemIndex > .index > p {
  filter: drop-shadow(1px 1px #0006);
  font: 14px var(--light-font);
  text-align: center;
  -webkit-user-select: none;
  user-select: none;
  margin: 0;
  display: inline;
}

.itemIndex > .index > p:hover {
  font-family: var(--bold-font);
}

.itemIndex > .index > p:after {
  content: "00";
  font-family: var(--bold-font);
  visibility: hidden;
  height: 0;
  display: block;
}

.itemIndex:not(:last-child) > .index > p {
  border-right: 2px solid var(--carousel-foreground);
}

@keyframes slideTitleSlideIn {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  30% {
    opacity: 0;
  }

  60% {
    transform: translateX(0);
  }

  100% {
    opacity: 1;
  }
}

.itemSlide {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--medium-duration) ease-in-out;
  z-index: 250;
  flex-direction: column;
  padding-left: 100px;
  display: flex;
  position: absolute;
  overflow: visible;
}

.itemSlide.visible {
  opacity: 1;
  pointer-events: all;
  z-index: 255;
}

.itemSlide.visible .title {
  animation: slideTitleSlideIn .2s var(--short-duration) ease-in both;
}

.itemSlide > .infoContainer {
  color: var(--carousel-foreground);
  flex-direction: column;
  align-items: flex-start;
  display: flex;
  overflow: visible;
}

.itemSlide > .infoContainer .overTitle {
  flex-direction: row;
  align-items: center;
  display: flex;
  overflow: visible;
}

.itemSlide > .infoContainer .overTitle > .text, .itemSlide > .infoContainer .overTitle > .separator {
  font: 16px var(--regular-font);
  margin-right: 12px;
}

.itemSlide > .infoContainer .overTitle > .text {
  opacity: .8;
  transition: var(--opacity-short);
}

.itemSlide > .infoContainer .overTitle > .text.clickable {
  cursor: pointer;
}

.itemSlide > .infoContainer .overTitle > .text.clickable:hover {
  opacity: 1;
}

.itemSlide > .infoContainer .overTitle > .liveRecording {
  align-items: center;
  margin-left: 10px;
}

.itemSlide > .infoContainer .overTitle > .liveRecording > .pictoElement > .background {
  width: 20px;
  top: 4px;
  left: 4px;
}

.itemSlide > .infoContainer .overTitle > .liveRecording > .pictoElement > svg {
  width: 12px;
}

.itemSlide > .infoContainer .overTitle > .liveRecording > .text {
  margin-left: 5px;
}

.itemSlide > .infoContainer .title {
  filter: drop-shadow(1px 1px 2px #00000080);
  font: 38px var(--bold-font);
  opacity: 0;
  max-width: 800px;
  margin-block: 5px 32px;
  line-height: 50px;
}

.itemSlide > .infoContainer > .iconBar {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
  overflow: visible;
}

.itemSlide > .infoContainer > .iconBar > .pictoElement {
  width: 44px;
  margin: 0 8px;
}

.itemSlide > .infoContainer > .iconBar > .pictoElement > svg {
  width: 28px;
}

.itemSlide > .infoContainer > .iconBar > .pictoElement.play {
  width: 64px;
  margin-right: 16px;
}

.itemSlide > .infoContainer > .iconBar > .pictoElement.play > svg {
  width: 28px;
}

.itemSlide > .infoContainer > .iconBar > .spacedButton {
  margin-right: 20px;
}

.statusPicto {
  border-radius: var(--border-radius-tiny-u);
  color: var(--picto-foreground);
  font: 14px var(--semibold-font);
  -webkit-user-select: none;
  user-select: none;
  justify-content: center;
  align-items: center;
  padding: 3px 8px;
}

.statusPicto.clickable {
  cursor: pointer;
}

.statusPicto.live {
  background-color: var(--live);
}

.statusPicto.future {
  background-color: var(--future);
}

.statusPicto.catchup, .statusPicto.preview {
  background-color: var(--catchup);
}

.statusPicto.recording {
  background-color: var(--recording);
}

.statusPicto.past {
  background-color: var(--past);
}

.section.channelGroupSection {
  --channel-group-navigation-button-size-u: 80px;
  --channel-group-navigation-button-collapsed-position-u: calc(var(--channel-group-navigation-button-size-u) / 4);
  --channel-group-navigation-button-expanded-position-u: calc(var(--channel-group-navigation-button-size-u) / 8);
  --channel-group-navigation-button-picto-margin-u: calc(var(--channel-group-navigation-button-collapsed-position-u) / 2);
  pointer-events: auto;
  flex-direction: column;
  padding-left: 50px;
  display: flex;
}

.section.channelGroupSection > div {
  overflow: visible;
}

.section.channelGroupSection > .navigationButton {
  background-color: var(--section-navigation-buttons);
  cursor: pointer;
  height: var(--channel-group-navigation-button-size-u);
  top: calc((125px - var(--channel-group-navigation-button-size-u)) / 2 + 38px);
  transition: left var(--short-duration) ease-out, right var(--short-duration) ease-out;
  width: var(--channel-group-navigation-button-size-u);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
}

.section.channelGroupSection > .navigationButton:hover {
  background-color: var(--section-navigation-buttons-hover);
}

.section.channelGroupSection > .navigationButton > .pictoElement {
  height: 20px;
}

.section.channelGroupSection > .navigationButton.previous {
  left: calc(-1 * var(--channel-group-navigation-button-collapsed-position-u));
  border-radius: 0 50% 50% 0;
}

.section.channelGroupSection > .navigationButton.previous:hover {
  left: calc(-1 * var(--channel-group-navigation-button-expanded-position-u));
}

.section.channelGroupSection > .navigationButton.previous > .pictoElement {
  margin-left: var(--channel-group-navigation-button-picto-margin-u);
}

.section.channelGroupSection > .navigationButton.next {
  right: calc(-1 * var(--channel-group-navigation-button-collapsed-position-u));
  border-radius: 50% 0 0 50%;
}

.section.channelGroupSection > .navigationButton.next:hover {
  right: calc(-1 * var(--channel-group-navigation-button-expanded-position-u));
}

.section.channelGroupSection > .navigationButton.next > .pictoElement {
  margin-left: calc(-1 * var(--channel-group-navigation-button-picto-margin-u));
}

.section.channelGroupSection > .header {
  align-items: center;
  margin: 0 0 8px 13px;
  display: flex;
}

.section.channelGroupSection > .header .sectionTitleContainer {
  color: var(--text-foreground-1);
  font: 18px var(--bold-font);
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  display: flex;
}

.section.channelGroupSection .slider {
  height: var(--tile-channel-group-image-height-u);
  transition: transform var(--short-duration) ease-out;
  flex-direction: row;
  flex: auto;
  display: flex;
  overflow: visible;
  transform: translate3d(0, 0, 0);
}

.section.channelSection {
  pointer-events: auto;
  flex-direction: column;
  align-items: flex-start;
  padding: 0 50px;
  display: flex;
}

.section.channelSection > .header {
  color: var(--text-foreground-1);
  font: 18px var(--bold-font);
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  margin: 0 0 8px 13px;
  display: flex;
}

.section.channelSection .itemGrid {
  flex-flow: wrap;
  flex: 1;
  justify-content: flex-start;
  display: flex;
}

.section.channelSection .itemGrid:after {
  content: "";
  flex: auto;
}

.searchHistory {
  flex-flow: wrap;
  align-items: center;
  row-gap: 10px;
  display: flex;
}

.searchHistoryTerm {
  color: var(--text-foreground-1);
  flex-direction: row-reverse;
  align-items: center;
  margin-right: 20px;
  display: flex;
}

.searchHistoryTerm .pictoElement {
  width: 18px;
  height: 20px;
}

.searchHistoryTerm .pictoElement > svg {
  height: 16px;
}

.searchHistoryTerm > .refresh {
  opacity: 0;
  transition: var(--opacity-short);
}

.searchHistoryTerm > .refresh > svg {
  fill: var(--text-foreground-1);
}

.searchHistoryTerm > .term {
  background-color: var(--search-avenue-history-background);
  border-radius: var(--border-radius-huge-u);
  cursor: pointer;
  margin: 0 5px;
  padding: 14px 22px;
}

.searchHistoryTerm > .term:hover {
  background-color: var(--search-avenue-history-background-hover);
}

.searchHistoryTerm > .term:hover + .refresh {
  opacity: 1;
}

.searchHistoryTerm > .delete > .pictoElement > svg {
  fill: var(--text-foreground-1);
}

.circleLoader {
  aspect-ratio: 1;
  background-color: #162f491a;
  border-radius: 50%;
  justify-content: center;
  align-self: center;
  align-items: center;
  width: 80px;
  margin: 50px;
  display: flex;
  position: relative;
  overflow: visible;
}

.circleLoader > svg {
  aspect-ratio: 1;
  width: 104px;
  position: absolute;
}

.circleLoader > svg > circle {
  fill: #0000;
  stroke: var(--accent);
  stroke-dasharray: 252;
  stroke-dashoffset: 0;
  stroke-width: 4px;
  transform-origin: 50%;
  transition: stroke-dashoffset 50ms linear;
  transform: rotate(-90deg);
}

.circleLoader > svg > circle.background {
  stroke: #ffffff4d;
}

.circleLoader > .percentage {
  color: var(--text-foreground-1);
  font: 18px var(--semibold-font);
}

.errorBoundary {
  color: #fff;
  font: 14px var(--regular-font);
  z-index: 100000;
  background-color: red;
  margin: 10px;
  padding: 10px;
}

@keyframes footerSlideUp {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes footerSlideDown {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

.footer {
  background-color: var(--footer-background);
  color: var(--footer-foreground);
  font: 14px var(--regular-font);
  opacity: 0;
  flex-direction: column;
  margin-top: auto;
  display: flex;
  position: relative;
  transform: translateY(100%);
}

.footer.slideUp {
  animation: footerSlideUp var(--short-duration) ease-out forwards;
}

.footer.slideDown {
  animation: footerSlideDown var(--short-duration) ease-in forwards;
}

.footer > .footerCommon {
  justify-content: flex-end;
}

.footer > .footerCommon > .pictoElement.topButton {
  border-radius: var(--border-radius-tiny-u);
  cursor: pointer;
  margin: 20px 20px 10px;
  transition: background-color .7s ease-out;
}

.footer > .footerCommon > .pictoElement.topButton > svg {
  opacity: .6;
  width: 16px;
}

.footer > .footerCommon > .pictoElement.topButton:hover {
  background-color: var(--picto-foreground);
  opacity: 1;
}

.footer > .footerCommon > .pictoElement.topButton:hover > svg {
  fill: var(--footer-background);
  opacity: 1;
}

.footer .footerVersion {
  opacity: .8;
  align-items: center;
  font-size: 12px;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

@keyframes debugElasticAppearing {
  0% {
    opacity: 0;
    width: 0;
    transform: scale(0);
  }

  1% {
    opacity: 0;
    width: auto;
    transform: scale(0);
  }

  66% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes debugElasticDisappearing {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  33% {
    opacity: 1;
    transform: scale(1.3);
  }

  99% {
    opacity: 0;
    width: auto;
    transform: scale(0);
  }

  100% {
    opacity: 0;
    width: 0;
    transform: scale(0);
  }
}

.debugPicto {
  opacity: 0;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  transform: scale(0);
}

.debugPicto.dark {
  fill: var(--text-foreground-1);
}

.debugPicto.light {
  fill: var(--overlay-background);
}

.debugPicto.hidden {
  animation: debugElasticDisappearing var(--medium-duration) ease-out forwards;
}

.debugPicto.visible {
  animation: debugElasticAppearing var(--medium-duration) ease-out forwards;
}

@keyframes headerSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes headerSlideUp {
  0% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.mainLayout > .header {
  background-image: linear-gradient(var(--header-background-top-color), var(--header-background-bottom-color));
  height: var(--header-height-u);
  opacity: 0;
  transition: --header-background-bottom-color var(--medium-duration), --header-background-top-color var(--medium-duration);
  z-index: 350;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: fixed;
  overflow: visible;
  transform: translateY(-100%);
}

.mainLayout > .header.slideDown {
  animation: headerSlideDown var(--short-duration) ease-out forwards;
}

.mainLayout > .header.slideUp {
  animation: headerSlideUp var(--short-duration) ease-in forwards;
}

.mainLayout > .header.scroll {
  --header-background-bottom-color: var(--header-background-scroll-bottom-color);
  --header-background-top-color: var(--header-background-scroll-top-color);
}

.mainLayout > .header:hover {
  --header-background-bottom-color: var(--header-background-hover-bottom-color);
  --header-background-top-color: var(--header-background-hover-top-color);
}

.mainLayout > .header > .headerLeft {
  align-items: center;
}

.mainLayout > .header > .headerLeft > .headerImage {
  cursor: pointer;
  height: var(--header-logo-height-u);
  pointer-events: auto;
  -webkit-user-select: none;
  user-select: none;
  margin: 0 50px;
}

.mainLayout > .header > .headerMiddle {
  min-width: var(--burger-width-u);
  flex: auto;
  align-items: center;
  position: relative;
  overflow: visible;
}

.mainLayout > .header > .headerRight {
  align-items: center;
  margin: 0 50px;
  display: flex;
}

.mainLayout > .header > .headerRight > a, .mainLayout > .header > .headerRight > .link {
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  cursor: pointer;
  font-family: var(--bold-font);
  text-decoration: none;
}

.mainLayout > .header > .headerRight > a:hover, .mainLayout > .header > .headerRight > .link:hover {
  color: var(--accent-light);
  border-color: var(--accent-light);
}

.mainLayout > .header > .headerRight > .searchBox {
  margin: 0 10px;
}

.mainLayout > .header > .headerRight > .freeTrial {
  border-radius: var(--border-radius-tiny-u);
  color: #fff;
  background-color: red;
  justify-content: center;
  align-items: center;
  height: 44px;
  margin-right: 20px;
  padding-inline: 20px;
  display: flex;
  position: relative;
}

.mainLayout > .header > .headerRight > .freeTrial:hover {
  background-color: #ff1a48;
}

@keyframes searchBoxAppear {
  0% {
    opacity: 0;
    width: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    width: 280px;
  }
}

.searchBox {
  pointer-events: auto;
  flex-direction: row;
  align-items: center;
  display: flex;
}

.searchBox > .pictoElement {
  width: 44px;
  height: 44px;
}

.searchBox > input {
  animation: searchBoxAppear var(--short-duration) cubic-bezier(0, .4, .4, 1) both;
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-huge-u);
  color: var(--search-header-foreground);
  font: 15px var(--regular-font);
  transform-origin: 100%;
  -webkit-user-select: text;
  user-select: text;
  background-color: #0000;
  justify-content: center;
  width: 280px;
  padding: 8px 12px;
}

.searchBox > input::selection {
  background: var(--search-header-selection-background);
  color: var(--search-header-selection-foreground);
}

.searchBox > input::placeholder {
  color: var(--placeholder-input);
}

.mainLayout > .header > .headerMiddle > .menuWrapper {
  min-width: var(--burger-width-u);
  pointer-events: auto;
  flex: auto;
  align-items: center;
  overflow: visible;
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon {
  color: var(--header-foreground);
  cursor: pointer;
  font: 15px var(--regular-font);
  opacity: .8;
  height: 40px;
  transition: var(--opacity-short), transform var(--short-duration) ease-in-out;
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  margin: 0 auto 0 0;
  padding: 5px;
  position: relative;
  overflow: visible;
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .pictoElement {
  width: 20px;
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .pictoElement > svg {
  width: 14px;
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu {
  background-color: var(--header-burger-menu-background);
  border-radius: var(--border-radius-big-u);
  opacity: 0;
  transform-origin: 50% 0;
  min-width: 220px;
  transition: transform var(--short-duration) ease-out, var(--opacity-short);
  flex-direction: column;
  display: flex;
  position: absolute;
  top: 40px;
  right: 0;
  transform: scaleY(0);
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement {
  padding: 10px 20px;
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement:not(:first-child) {
  border-top: 1px solid var(--header-burger-menu-separator);
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement > .text {
  color: var(--header-burger-menu-foreground);
  display: flex;
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement:hover {
  background-color: var(--header-burger-menu-background-hover);
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement:hover > .text {
  opacity: 1;
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon > .burgerMenu > .avenueElement:before {
  display: none;
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon:hover {
  opacity: 1;
}

.mainLayout > .header > .headerMiddle > .menuWrapper > .burgerIcon:hover > .burgerMenu {
  opacity: .9;
  transform: scaleY(1);
}

.avenueElement {
  font: 14px var(--semibold-font);
  flex: none;
  justify-content: flex-start;
  align-items: center;
  height: 40px;
  display: flex;
}

.avenueElement.separator:before {
  color: var(--header-foreground);
  content: "|";
  font: inherit;
  pointer-events: none;
  margin: 0 22px 0 19px;
}

.avenueElement > .text {
  color: var(--header-foreground);
  cursor: pointer;
  font: inherit;
  opacity: .7;
  transition: var(--opacity-short);
  -webkit-user-select: none;
  user-select: none;
  background-color: #0000;
  flex-direction: column;
  align-items: center;
  margin-left: 5px;
  margin-right: 5px;
  padding: 5px;
  display: flex;
}

.avenueElement > .text:after {
  content: attr(data-text);
  font-family: var(--bold-font);
  visibility: hidden;
  height: 0;
  display: block;
}

.avenueElement > .text:hover {
  color: var(--accent);
  opacity: 1;
}

.avenueElement.focused > .text {
  font-family: var(--bold-font);
  opacity: 1;
}

.mainLayout > .header > .headerRight .pictoElement {
  width: 44px;
  height: 44px;
}

.imageCarousel {
  pointer-events: none;
  width: 100%;
  height: 660px;
  position: absolute;
}

.imageCarousel > .imageContainer {
  opacity: 0;
  pointer-events: none;
  transition: var(--opacity-long);
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.imageCarousel > .imageContainer.selected {
  opacity: 1;
}

.imageCarousel > .imageContainer.locked {
  filter: blur(50px);
}

.playerView > .debugOverlay {
  color: #fff;
  background-color: #00000080;
  flex-direction: column;
  grid-template-rows: 1fr min-content auto;
  grid-template-columns: [col1-start] 1fr[col1-end col2-start] 1fr[col2-end col3-start] 1fr[col3-end];
  column-gap: 20px;
  min-width: 200px;
  padding: 10px;
  display: grid;
  position: absolute;
  top: 140px;
  left: 80px;
}

.playerView > .debugOverlay > .column1, .playerView > .debugOverlay > .column2, .playerView > .debugOverlay > .column3 {
  flex-direction: column;
  display: flex;
}

.playerView > .debugOverlay > .wholeRow {
  flex-direction: column;
  grid-column: col1-start / col3-end;
  max-width: 750px;
  margin-bottom: 10px;
}

.playerView > .debugOverlay > .column1 {
  grid-area: col1;
}

.playerView > .debugOverlay > .column2 {
  grid-area: col2;
}

.playerView > .debugOverlay > .column3 {
  grid-area: col3;
}

.playerView > .debugOverlay .pictoElement {
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
}

.playerView > .debugOverlay .pictoElement > svg {
  color: var(--accent);
}

.playerView > .debugOverlay .title {
  color: var(--accent);
  font: 12px var(--semibold-font);
}

.playerView > .debugOverlay .subsection {
  flex-direction: column;
  margin-bottom: 5px;
  margin-left: 20px;
}

.playerView > .debugOverlay .data {
  align-items: baseline;
  margin-left: 10px;
}

.playerView > .debugOverlay .data > .label {
  font: 10px var(--light-font);
}

.playerView > .debugOverlay .data > .label.button {
  cursor: pointer;
  background-color: #0000001a;
  border: 1px solid #fff;
  border-radius: 3px;
  padding: 0 3px;
}

.playerView > .debugOverlay .data > .label.button:hover {
  background-color: #00000080;
}

.playerView > .debugOverlay .data > .label.button:active {
  color: #000;
  background-color: #fff;
}

.playerView > .debugOverlay .data > .value {
  font: 10px var(--regular-font);
  margin-left: 5px;
}

.playerView > .debugOverlay .data + .title {
  margin-top: 10px;
}

@keyframes pictoGrow {
  0% {
    transform: scale3d(0, 0, 1);
  }

  80% {
    transform: scale3d(1.2, 1.2, 1);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes blink {
  0% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }

  50% {
    opacity: 1;
    transform: scale3d(1.2, 1.2, 1);
  }

  80% {
    opacity: 1;
    transform: scale3d(1.2, 1.2, 1);
  }

  100% {
    opacity: 0;
    transform: scale3d(0, 0, 1);
  }
}

.playerView {
  --status-picto-size-u: 80px;
  --status-picto-margin-u: calc(var(--status-picto-size-u) / -2);
  background-color: var(--player-background);
  cursor: none;
  font: 14px var(--regular-font);
  z-index: 500;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: absolute;
  inset: 0;
}

.playerView > .videoContainer {
  flex-direction: column;
  flex: 1;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.playerView > .videoContainer > video {
  object-fit: contain;
  width: 100%;
  height: 100%;
  max-height: 100%;
}

.playerView > .videoContainer > video.shifted::-webkit-media-text-track-container {
  transition: transform var(--short-duration) ease-out;
  transform: translateY(-160px);
}

.playerView > .videoContainer > video::cue(.white) {
  color: #fff;
}

.playerView > .videoContainer > video::cue(.lime) {
  color: #0f0;
}

.playerView > .videoContainer > video::cue(.cyan) {
  color: #0ff;
}

.playerView > .videoContainer > video::cue(.red) {
  color: red;
}

.playerView > .videoContainer > video::cue(.yellow) {
  color: #ff0;
}

.playerView > .videoContainer > video::cue(.magenta) {
  color: #f0f;
}

.playerView > .videoContainer > video::cue(.blue) {
  color: #00f;
}

.playerView > .videoContainer > video::cue(.black) {
  color: #000;
}

.playerView > .videoContainer > video::cue(.bg_white) {
  background-color: #fff;
}

.playerView > .videoContainer > video::cue(.bg_lime) {
  background-color: #0f0;
}

.playerView > .videoContainer > video::cue(.bg_cyan) {
  background-color: #0ff;
}

.playerView > .videoContainer > video::cue(.bg_red) {
  background-color: red;
}

.playerView > .videoContainer > video::cue(.bg_yellow) {
  background-color: #ff0;
}

.playerView > .videoContainer > video::cue(.bg_magenta) {
  background-color: #f0f;
}

.playerView > .videoContainer > video::cue(.bg_blue) {
  background-color: #00f;
}

.playerView > .videoContainer > video::cue(.bg_black) {
  background-color: #000;
}

.playerView > .videoContainer > .shaka-text-container {
  color: #fff;
  pointer-events: none;
  text-align: center;
  transition: transform var(--short-duration) ease-out;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  font-size: 48px;
  line-height: 1.4;
  display: flex;
  position: absolute;
  inset: 0;
  transform: translateY(0);
}

.playerView > .videoContainer > .shaka-text-container * {
  display: initial;
  position: unset;
  overflow: visible;
}

.playerView > .videoContainer > .blackOutWrapper {
  background-color: var(--background);
  pointer-events: none;
  z-index: 520;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.playerView > .videoContainer > .blackOutWrapper > img {
  width: 320px;
  margin-top: -5%;
}

.playerView > .videoContainer > .blackOutWrapper > div {
  color: var(--player-controller-foreground);
  text-align: center;
  white-space: pre-line;
  font-size: 24px;
}

.playerView > .videoContainer > .blackOutWrapper > div.blackOutTitle {
  font-family: var(--bold-font);
  margin-block: 60px 40px;
  font-size: 36px;
}

.playerView > .videoContainer > .lockWrapper {
  background-color: var(--background);
  color: var(--player-controller-foreground);
  pointer-events: none;
  z-index: 505;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}

.playerView > .videoContainer > .lockWrapper > .lockTitle {
  font: 40px var(--semibold-font);
}

.playerView > .videoContainer > .lockWrapper > .lockTitle + div {
  text-align: center;
  white-space: break-spaces;
  margin-block: 50px;
  font-size: 20px;
}

.playerView > .videoContainer > .lockWrapper > .buttonFX {
  pointer-events: all;
}

.playerView > .videoContainer > .lockWrapper > .buttonFX.unlock .content {
  flex-direction: row;
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  display: flex;
}

.playerView > .videoContainer > .lockWrapper > .buttonFX.unlock .content svg {
  fill: var(--player-controller-background);
}

.playerView > .videoContainer > .loaderWrapper {
  opacity: 0;
  pointer-events: none;
  height: 100%;
  transition: var(--opacity-short);
  z-index: 510;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.playerView > .videoContainer > .loaderWrapper.visible {
  opacity: 1;
}

.playerView > .videoContainer > .loaderWrapper > img {
  filter: blur(8px);
  opacity: .3;
  -webkit-user-select: none;
  user-select: none;
  width: 600px;
  height: 300px;
}

.playerView > .videoContainer > .videoController {
  width: 100%;
  height: 160px;
  position: absolute;
  bottom: 0;
}

.playerView > .videoContainer > .statusPictoBackground {
  aspect-ratio: 1;
  background-color: var(--player-status-picto-background);
  margin-top: var(--status-picto-margin-u);
  opacity: 0;
  pointer-events: none;
  width: var(--status-picto-size-u);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  transform: scale3d(0, 0, 1);
}

.playerView > .videoContainer > .statusPictoBackground.play, .playerView > .videoContainer > .statusPictoBackground.pause {
  margin-left: var(--status-picto-margin-u);
  left: 50%;
}

.playerView > .videoContainer > .statusPictoBackground.skipBackward {
  left: 10%;
}

.playerView > .videoContainer > .statusPictoBackground.skipForward {
  right: 10%;
}

.playerView > .videoContainer > .statusPictoBackground.play, .playerView > .videoContainer > .statusPictoBackground.skipBackward, .playerView > .videoContainer > .statusPictoBackground.skipForward {
  animation: blink var(--medium-duration) ease-in-out forwards;
}

.playerView > .videoContainer > .statusPictoBackground.pause {
  animation-duration: var(--short-duration);
  animation-name: fadeIn, pictoGrow;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.playerView > .videoContainer > .statusPictoBackground > .pictoElement {
  width: 24px;
}

.playerView > .videoContainer > .statusPictoBackground > .pictoElement > svg {
  fill: var(--player-status-picto-foreground);
  pointer-events: none;
}

.playerView.visibleCursor {
  cursor: default;
}

.playerView.visibleCursor > .videoContainer > .shaka-text-container {
  transform: translateY(-160px);
}

.playerView.visibleCursor > .videoContainer > video::-webkit-media-text-track-container {
  transition: transform var(--short-duration) ease-out;
  transform: translateY(-160px);
}

.playerView > .backBar {
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  height: 40px;
  transition: var(--opacity-short);
  z-index: 530;
  align-items: center;
  margin-top: 75px;
  padding-left: 60px;
  display: flex;
  position: absolute;
  left: 0;
  overflow: visible;
}

.playerView > .backBar.visible {
  opacity: 1;
  pointer-events: auto;
}

.playerView > .backBar > .pictoElement > svg {
  fill: var(--player-status-picto-foreground);
  filter: drop-shadow(3px 5px 2px #0000004d);
  width: 30px;
}

.videoController {
  background-color: var(--player-controller-background);
  opacity: 0;
  pointer-events: none;
  transition: var(--opacity-short);
  z-index: 550;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 40px;
  display: flex;
  position: relative;
  overflow: visible;
}

.videoController:has(.channelZapper) {
  padding-left: 0;
}

.videoController.visible {
  opacity: 1;
  pointer-events: auto;
}

.videoController > .controller {
  flex-direction: column;
  flex: 1;
  justify-content: space-evenly;
  position: relative;
  overflow: visible;
}

.videoController > .controller > .textInfo {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 60px;
  display: flex;
}

.videoController > .controller > .textInfo > .titlesAndStatus {
  flex-direction: column;
  justify-content: center;
  margin: 0 auto 0 0;
  display: flex;
}

.videoController > .controller > .textInfo > .titlesAndStatus.multiline {
  justify-content: flex-start;
}

.videoController > .controller > .textInfo > .titlesAndStatus .title {
  color: var(--player-controller-foreground);
  font: 20px var(--regular-font);
  -webkit-user-select: none;
  user-select: none;
}

.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine {
  align-items: center;
}

.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .title {
  font: 24px var(--semibold-font);
  -webkit-user-select: none;
  user-select: none;
  line-height: 30px;
}

.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .statusPicto {
  margin: 0 20px;
}

.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .statusPicto.live > .recording {
  margin-top: 2px;
}

.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .statusPicto.notLive {
  background-color: var(--timeshift);
}

.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .liveRecording {
  align-items: center;
}

.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine > .liveRecording > .text {
  color: var(--player-controller-foreground);
  margin-left: 5px;
}

.videoController > .controller > .textInfo > .titlesAndStatus > .mainLine + .title {
  margin-top: 5px;
}

.videoController > .controller > .textInfo > .channelImage {
  height: var(--channel-image-height-u);
  width: var(--channel-image-width-u);
  justify-content: center;
  margin-left: -5px;
  margin-right: 3px;
  padding-top: 5px;
  overflow: visible;
}

.videoController > .controller > .textInfo > .channelImage > img {
  object-fit: scale-down;
  -webkit-user-select: none;
  user-select: none;
}

.videoController > .controller > .textInfo > .channelImage + .titlesAndStatus {
  margin-left: 10px;
}

.videoController > .controller > .textInfo > .rightDetails {
  flex-direction: column;
  align-items: flex-end;
  margin-top: auto;
  margin-left: auto;
  display: flex;
}

.videoController > .controller > .textInfo > .rightDetails > .rowWrapper {
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
  display: flex;
}

.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .parentalGuidance {
  color: var(--tile-parental-guidance-foreground);
  font: 14px var(--bold-font);
}

.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .parentalGuidance.pictoInfo {
  background-color: var(--tile-hover-foreground-1);
  border-radius: var(--border-radius-tiny-u);
  padding: 3px 6px;
}

.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .videoQuality {
  color: var(--player-controller-foreground);
  font: 14px var(--semibold-font);
  align-items: center;
}

.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .videoQuality > div {
  border: 1px solid var(--player-controller-foreground);
  border-radius: var(--border-radius-tiny-u);
  margin-left: 10px;
  padding: 2px 4px;
}

.videoController > .controller > .textInfo > .rightDetails > .rowWrapper > .videoQuality > .leaf {
  height: 25px;
}

.videoController > .controller > .textInfo > .rightDetails > .timeInfo > div {
  color: var(--player-controller-foreground);
  font: 20px var(--regular-font);
  -webkit-user-select: none;
  user-select: none;
  align-items: flex-end;
}

.videoController > .controller > .textInfo > .rightDetails > .timeInfo > div.first {
  color: var(--player-controller-foreground);
}

.videoController > .controller > .textInfo > .rightDetails > .timeInfo > div.first.margin {
  color: var(--player-time-in-margin);
}

.videoController > .controller > .textInfo > .rightDetails > .timeInfo > div.timeSeparator {
  margin: 0 5px;
}

.videoController > .controller > .seekBar {
  justify-content: center;
  align-items: center;
  height: 40px;
}

.videoController > .controller > .buttons {
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  overflow: visible;
}

.videoController > .controller > .buttons > .controlButtonContainer, .videoController > .controller > .buttons > .infoButtonContainer {
  align-items: center;
}

.videoController > .controller > .buttons > .controlButtonContainer .pictoElement :not(:disabled) svg, .videoController > .controller > .buttons > .infoButtonContainer .pictoElement :not(:disabled) svg {
  fill: var(--player-controller-foreground);
}

.videoController > .controller > .buttons > .controlButtonContainer .pictoElement:not(.skipPicto), .videoController > .controller > .buttons > .infoButtonContainer .pictoElement:not(.skipPicto) {
  justify-content: center;
  width: 50px;
}

.videoController > .controller > .buttons > .controlButtonContainer .pictoElement:not(.skipPicto) > svg, .videoController > .controller > .buttons > .infoButtonContainer .pictoElement:not(.skipPicto) > svg {
  width: 18px;
}

.videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer, .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer {
  height: 50px;
}

.videoController > .controller > .buttons > .controlButtonContainer {
  justify-content: flex-start;
}

.videoController > .controller > .buttons > .infoButtonContainer {
  justify-content: flex-end;
}

.videoController .channelZapper + .controller {
  margin-left: 20px;
}

@media screen and (max-width: 1100px) {
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement {
    margin-right: 20px;
  }

  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement.prev, .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement {
    margin-left: 20px;
  }
}

@media screen and (max-width: 950px) {
  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement {
    margin-right: 5px;
  }

  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement.prev, .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement {
    margin-left: 5px;
  }
}

@media screen and (max-width: 820px) {
  .videoController > .controller > .buttons > .controlButtonContainer, .videoController > .controller > .buttons > .infoButtonContainer {
    height: 50px;
  }

  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement, .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer > .pictoElement, .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement, .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer > .pictoElement {
    width: 40px;
  }

  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement > svg, .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer > .pictoElement > svg, .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement > svg, .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer > .pictoElement > svg {
    width: 25px;
  }

  .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer, .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer {
    height: 40px;
  }
}

@media screen and (max-width: 725px) {
  .videoController > .controller > .buttons > .controlButtonContainer, .videoController > .controller > .buttons > .infoButtonContainer {
    height: 45px;
  }

  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement, .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer > .pictoElement, .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement, .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer > .pictoElement {
    width: 35px;
  }

  .videoController > .controller > .buttons > .controlButtonContainer > .pictoElement > svg, .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer > .pictoElement > svg, .videoController > .controller > .buttons > .infoButtonContainer > .pictoElement > svg, .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer > .pictoElement > svg {
    width: 20px;
  }

  .videoController > .controller > .buttons > .controlButtonContainer > .playerVolumeContainer, .videoController > .controller > .buttons > .infoButtonContainer > .playerVolumeContainer {
    height: 35px;
  }
}

.channelZapper {
  flex-direction: row;
  align-items: flex-end;
  display: flex;
  overflow: visible;
}

.channelZapper > .channelListOpener {
  background-color: var(--accent);
  cursor: pointer;
  height: var(--channel-list-item-height-u);
  width: 10px;
  margin-bottom: 50px;
}

.channelZapper > .channelListOpener.disabled {
  cursor: default;
  opacity: 0;
}

.channelZapper > .channelList {
  flex-direction: column;
  align-items: center;
  display: flex;
}

.channelZapper > .channelList > .pictoElement {
  width: 100%;
  height: 50px;
}

.channelZapper > .channelList > .pictoElement.disabled {
  opacity: 0;
}

.channelZapper > .channelList > .channelContainer {
  height: var(--channel-list-item-height-u);
  width: var(--channel-list-item-width-u);
}

.channelZapper > .channelList > .channelContainer > .channelSlider {
  transition: transform var(--short-duration) ease-in-out;
  flex-direction: column-reverse;
  align-items: center;
  width: 100%;
  overflow: visible;
}

.channelZapper.open {
  height: 100%;
}

.channelZapper.open > .channelList > .channelContainer {
  background-color: var(--player-channel-zapper-background);
  height: 100%;
}

.channelSlider > .channel {
  cursor: pointer;
  height: var(--channel-list-item-height-u);
  width: var(--channel-list-item-width-u);
  background: center / contain no-repeat;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.channelSlider > .channel.disabled {
  cursor: default;
}

.channelSlider > .channel:hover:not(.disabled) {
  background-color: var(--player-channel-zapper-background-hover);
}

.channelSlider > .channel > .channelImage {
  height: var(--channel-image-height-u);
  width: var(--channel-image-width-u);
  background-repeat: no-repeat;
  background-size: contain;
}

.channelSlider > .channel > .channelName {
  color: var(--player-controller-foreground);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.channelZapper.open > .channelList > .channelContainer > .channelSlider {
  margin-bottom: 50px;
}

.channelZapper.open > .channelList > .channelContainer > .channelSlider > .channel {
  border-bottom: 1px solid var(--separator-light);
}

.progressBar {
  align-items: center;
  height: 30px;
  overflow: visible;
}

.progressBar > .reactiveBackground {
  background-color: #0000;
  width: 100%;
  height: 30px;
  padding: 10px 0;
  overflow: visible;
}

.progressBar > .reactiveBackground > .mainContainer {
  background-color: var(--player-progress-bar-unavailable);
  cursor: not-allowed;
  width: 100%;
  height: 10px;
  position: relative;
  overflow: visible;
}

.progressBar > .reactiveBackground > .mainContainer > .available {
  background-color: var(--player-progress-bar-available);
  z-index: 600;
  width: 0;
  height: 100%;
  display: flex;
  position: absolute;
  overflow: visible;
}

.progressBar > .reactiveBackground > .mainContainer > .buffered {
  background-color: var(--player-progress-bar-buffered);
  pointer-events: none;
  z-index: 610;
  width: 0;
  height: 100%;
  display: flex;
  position: absolute;
}

.progressBar > .reactiveBackground > .mainContainer > .progress {
  background-color: var(--accent);
  pointer-events: none;
  z-index: 620;
  width: 0;
  display: flex;
  position: relative;
  overflow: visible;
}

.progressBar > .reactiveBackground > .mainContainer > .progress > .thumb {
  pointer-events: auto;
  z-index: 630;
  position: absolute;
  top: -9px;
  right: -13px;
}

.progressBar > .reactiveBackground > .mainContainer > .progress > .thumb > svg {
  fill: var(--accent);
  opacity: 0;
  pointer-events: none;
  transition: var(--opacity-medium), transform var(--short-duration) ease-out;
  transform: scale(0);
}

.progressBar > .reactiveBackground > .mainContainer > .progress > .thumb.dragged > svg {
  opacity: 1;
  transform: scale(1);
}

.progressBar > .reactiveBackground > .mainContainer > .timeBadge {
  background-color: var(--player-overlay-background);
  border-radius: var(--border-radius-tiny-u);
  color: var(--player-overlay-foreground-1);
  font: 18px var(--regular-font);
  -webkit-user-select: none;
  user-select: none;
  padding: 5px 10px;
  position: absolute;
  top: -45px;
  left: 0;
}

.progressBar > .reactiveBackground > .mainContainer > .timeBadge.inMargin {
  color: var(--player-time-in-margin);
}

.progressBar > .reactiveBackground:hover > .mainContainer > .progress > .thumb {
  cursor: pointer;
}

.progressBar > .reactiveBackground:hover > .mainContainer > .progress > .thumb > svg {
  opacity: 1;
  transform: scale(1);
}

.progressBar.live > .reactiveBackground > .mainContainer.hoveredGood {
  cursor: pointer;
}

.progressBar.live > .reactiveBackground > .mainContainer.hoveredBad {
  cursor: not-allowed;
}

.options {
  --option-picto-height: 22px;
  background-color: var(--player-overlay-background);
  z-index: 700;
  grid-template-columns: [picto-start] 30px[picto-end title-start] auto[title-end selection-start] auto[selection-end];
  align-items: center;
  display: grid;
  position: absolute;
  bottom: 50px;
  right: 0;
  overflow: visible;
}

.options .pictoElement > svg {
  fill: var(--player-overlay-foreground-1);
  height: var(--option-picto-height);
}

.options .cell {
  cursor: pointer;
  width: 100%;
  height: 100%;
  padding: 12px 10px;
}

.options > .selection {
  display: contents;
}

.options > .selection div {
  -webkit-user-select: none;
  user-select: none;
  z-index: 740;
}

.options > .selection > .pictoElement {
  grid-column: picto-start / picto-end;
}

.options > .selection > .pictoElement > svg {
  transition: transform var(--short-duration) ease-out;
}

.options > .selection:hover > div {
  background-color: var(--player-overlay-background-hover);
}

.options > .selection.highlighted > div {
  background-color: var(--player-overlay-background-active);
}

.options > .selection.highlighted > .pictoElement svg {
  transform: rotate(-180deg);
}

.options > .selection > .selectionTitle {
  font: 16px var(--semibold-font);
  grid-column: title-start / title-end;
}

.options > .selection > .selectionInfo {
  color: var(--player-overlay-foreground-2);
  font: 16px var(--regular-font);
  grid-column: selection-start / selection-end;
}

.options > .selection.greenStreaming {
  display: contents;
}

.options > .selection.greenStreaming > .selectionTitle {
  grid-column: title-start / selection-end;
}

.options > .selection.greenStreaming > .selectionTitle > .leaf {
  border: 1px solid var(--player-overlay-foreground-2);
  border-radius: var(--border-radius-tiny-u);
  height: var(--option-picto-height);
  margin-left: 5px;
}

.options > .selection.greenStreaming > .pictoElement {
  bottom: unset;
  left: unset;
}

.options > .optionsContainer {
  background-color: var(--player-overlay-background);
  opacity: 0;
  pointer-events: none;
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  z-index: 620;
  grid-template-columns: [picto-start] 30px[picto-end title-start] auto[title-end];
  display: grid;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(0);
}

.options > .optionsContainer.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-100%);
}

.options > .optionsContainer > .option {
  display: contents;
}

.options > .optionsContainer > .option:hover > div {
  background-color: var(--player-overlay-background-hover);
}

.options > .optionsContainer > .option .pictoElement {
  grid-column: picto-start / picto-end;
}

.options > .optionsContainer > .option .pictoElement.impaired {
  height: 18px;
}

.options > .optionsContainer > .option > .optionLabel {
  color: var(--player-overlay-foreground-1);
  font: 16px var(--regular-font);
  grid-column: title-start / title-end;
  align-items: center;
}

.playerVolumeContainer {
  align-items: center;
  display: flex;
  position: relative;
}

.playerVolumeContainer > .pictoVolumeDown, .playerVolumeContainer > .pictoVolumeUp, .playerVolumeContainer > .pictoVolumeMuted {
  position: absolute;
}

.playerVolumeContainer > .volumeController {
  cursor: pointer;
  justify-content: space-around;
  align-items: center;
  width: 80px;
}

.playerVolumeContainer > .volumeController > .volumeBar {
  background-color: var(--player-controller-foreground-disabled);
  opacity: .9;
  height: 22px;
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  width: 8px;
  transform: scale(.9);
}

.playerVolumeContainer > .volumeController > .volumeBar.active {
  background-color: var(--player-controller-foreground);
}

.playerVolumeContainer > .volumeController > .volumeBar:hover {
  opacity: 1;
  transform: scale(1);
}

.progressBar.standard > .reactiveBackground > .mainContainer .allowed, .progressBar.standard > .reactiveBackground > .mainContainer > .available {
  cursor: pointer;
}

.graphRoot {
  flex-direction: column;
  align-items: flex-start;
  margin: 0 auto 10px;
  display: flex;
}

.graphRoot.red {
  --border-color: #9d0000;
  --background-color: #ff00002e;
}

.graphRoot.green {
  --border-color: #009d00;
  --background-color: #00ff002e;
}

.graphRoot.blue {
  --border-color: #00009d;
  --background-color: #0000ff2e;
}

.graphRoot.yellow {
  --border-color: #9d9d00;
  --background-color: #ffff002e;
}

.graphRoot > .graphTitle {
  background-color: var(--border-color);
  color: #fff;
  border-radius: 3px 3px 0 0;
  padding: 2px 6px;
  font-size: 10px;
}

.graphRoot > .graphData {
  background-color: var(--background-color);
  border: 1px solid var(--border-color);
  width: 240px;
  height: 100px;
  margin-inline: auto;
}

.videoCarousel {
  pointer-events: none;
  width: 100%;
  height: 100%;
  position: absolute;
}

.videoCarousel > video {
  background-color: var(--player-background);
  pointer-events: auto;
  transition: transform var(--medium-duration) ease-in-out;
  z-index: -100;
  width: 100%;
  position: absolute;
  left: 0;
  transform: translateY(-136px);
}

.videoCarousel > .mask {
  background-color: var(--background);
  height: 700px;
  transition: transform var(--long-duration) ease-in-out;
  z-index: -50;
  width: 100%;
  position: absolute;
  top: 600px;
  transform: translateY(0);
}

.videoCarousel > .mask.reduced {
  transform: translateY(194px);
}

.videoCarousel > .backBar {
  cursor: pointer;
  pointer-events: auto;
  align-items: flex-end;
  height: 40px;
  margin: 50px 0 0 50px;
  display: none;
}

.videoCarousel > .backBar > .pictoElement {
  background-color: var(--player-controller-foreground);
  border-radius: 50%;
  width: 36px;
}

.videoCarousel > .backBar > .pictoElement > svg {
  fill: var(--player-overlay-foreground-1);
  opacity: .7;
  width: 16px;
}

.videoCarousel.fullscreen > .backBar {
  display: flex;
}

.videoCarousel.fullscreen > video {
  transform: translateY(0);
}

.modalDialogDiv.authenticationRequired {
  max-width: 500px;
}

.modalDialogDiv.authenticationRequired > .content > .header {
  padding: 50px var(--modal-inline-padding-u) 0 var(--modal-inline-padding-u);
}

.modalDialogDiv.authenticationRequired > .content > .authenticationRequiredContent {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
  padding: 0 var(--modal-inline-padding-u) 30px var(--modal-inline-padding-u);
  flex-direction: column;
  align-items: center;
  display: flex;
}

.modalDialogDiv.authenticationRequired > .content > .authenticationRequiredContent > :first-child {
  margin-block: 30px;
}

.modalDialogDiv.avenue {
  width: 60%;
}

.modalDialogDiv.avenue > .content > .avenueView {
  flex: 1;
  overflow-y: auto;
}

.modalDialogDiv.avenue > .content > .avenueView > .slider {
  margin-top: 0;
}

.modalDialogDiv.avenue.explore > .content {
  background-color: var(--explorer-background);
  color: var(--explorer-foreground);
}

.modalDialogDiv.avenue.explore > .content .avenueView > .slider > .section:first-child {
  margin-top: 30px;
}

.modalDialogDiv.avenue.explore > .content .channelGroupSection > .header, .modalDialogDiv.avenue.explore > .content .sectionGrid > .header, .modalDialogDiv.avenue.explore > .content .channelGroupSection > .header .sectionTitleContainer, .modalDialogDiv.avenue.explore > .content .sectionGrid > .header .sectionTitleContainer {
  color: inherit;
}

@media (max-width: 1600px) {
  .modalDialogDiv.avenue {
    width: 80%;
  }
}

@media (max-width: 1400px) {
  .modalDialogDiv.avenue {
    width: 90%;
  }
}

@media (max-width: 1000px) {
  .modalDialogDiv.avenue {
    width: 100%;
  }
}

@keyframes wishlistElasticAppearing {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  66% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes wishlistElasticDisappearing {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  33% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: 0;
    transform: scale(0);
  }
}

@keyframes cardTitleSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-100%);
  }

  30% {
    opacity: 0;
  }

  50% {
    transform: translateY(0);
  }

  100% {
    opacity: 1;
  }
}

.modalContentDiv > .modalDialogDiv.card > .content {
  background-color: var(--card-background);
}

.modalContentDiv > .modalDialogDiv.card > .content > .modalHeader > .pictoElement > svg {
  fill: var(--card-foreground);
}

.modalContentDiv > .modalDialogDiv.card > .content > .modalHeader > .title {
  color: var(--card-foreground);
}

.card {
  --perspective: 1;
  --image-z-translation-u: -1px;
  --image-scale: 2.05;
  --mask-z-translation-u: -1px;
  --mask-scale-x: 2.5;
  --mask-scale-y: 3;
  width: min(100%, 1200px);
  height: 100%;
}

.card > .content > .slider {
  flex-direction: column;
  flex: auto;
  height: 100vh;
  display: flex;
  position: relative;
  overflow: hidden auto;
}

.card > .content > .slider > .backgroundImage {
  animation: fadeIn var(--medium-duration) ease-in forwards;
  pointer-events: none;
  z-index: -2;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
}

.card > .content > .slider > .backgroundImage.image {
  transition: background-image var(--short-duration) ease-out;
  background-repeat: no-repeat;
  background-size: contain;
}

.card > .content > .slider > .backgroundImage.mask {
  background: linear-gradient(to bottom, transparent 40%, #0000004d 50%, var(--background) 55%);
  z-index: -1;
}

.card > .content > .slider .swipeable + .backgroundImage.mask {
  z-index: 1;
}

.card > .content > .slider > .cover {
  z-index: 0;
  display: none;
}

.card > .content > .slider > .infoAndActionsContainer {
  color: var(--text-foreground-1);
  z-index: 1;
  flex-direction: row;
  align-items: flex-end;
  width: 100%;
  margin: 400px 0 20px;
  padding: 0 50px;
  display: flex;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer {
  flex-direction: column;
  flex: auto;
  align-items: flex-start;
  margin-right: 50px;
  display: flex;
  overflow: visible;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .channelImage {
  height: var(--channel-image-height-u);
  width: var(--channel-image-width-u);
  background: 0 / contain no-repeat;
  justify-content: flex-start;
  align-items: center;
  margin-right: 20px;
  display: flex;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text {
  flex-direction: column;
  flex-shrink: 1;
  display: flex;
  position: relative;
  overflow: visible;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite {
  opacity: 0;
  position: absolute;
  top: 8px;
  left: -34px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite.visible {
  opacity: 1;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite.appearing {
  animation: wishlistElasticAppearing var(--medium-duration) ease-out forwards;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite.disappearing {
  animation: wishlistElasticDisappearing var(--medium-duration) ease-out forwards;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .favorite > svg {
  fill: var(--accent);
  stroke: var(--accent);
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .text > .title {
  animation: cardTitleSlideIn var(--short-duration) var(--short-duration) ease-in both;
  filter: drop-shadow(1px 1px 2px #00000080);
  font: 36px var(--bold-font);
  text-align: left;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer {
  font: 16px var(--regular-font);
  flex-direction: column;
  display: flex;
  overflow: visible;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo {
  color: var(--text-foreground-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
  overflow: visible;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo .pictoInfo {
  border-radius: var(--border-radius-tiny-u);
  padding: 2px 6px;
  font-size: 14px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div {
  align-items: center;
  margin-right: 15px;
  display: flex;
  position: relative;
  overflow: visible;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div:not(:last-child):not(.statusPicto):after {
  background-color: var(--text-foreground-1);
  content: "";
  opacity: .7;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin: 0 5px;
  position: absolute;
  right: -15px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.languages > .pictoInfo {
  border: 1px solid var(--text-foreground-2);
  color: var(--text-foreground-2);
  font: 14px var(--semibold-font);
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.languages > .pictoInfo:not(:last-child) {
  margin-right: 5px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.languages > .pictoInfo.impaired {
  height: 25px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.languages > .pictoInfo.impaired > svg {
  fill: var(--text-foreground-2);
  height: 16px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > div.parentalGuidance.pictoInfo {
  background-color: var(--text-foreground-1);
  color: var(--background);
  font: 15px var(--semibold-font);
  padding: 2px 6px 3px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .statusPicto {
  margin-right: 12px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .liveRecording {
  margin-left: -10px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .liveRecording svg {
  width: 10px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .scheduledRecording {
  margin-left: -5px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .scheduledRecording > .pictoElement {
  margin-right: 5px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .recordError {
  cursor: pointer;
  align-items: center;
  margin-left: -5px;
  display: flex;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .recordError > .pictoElement > svg {
  width: 20px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .recordError > .description {
  font: 16px var(--regular-font);
  opacity: .8;
  transition: var(--opacity-short);
  align-items: center;
  text-decoration: underline;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .programInfo > .recordError:hover > .description {
  opacity: 1;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .gameInfo > .gameInfoValue {
  font-family: var(--semibold-font);
  margin-left: 5px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .tagline {
  font: 18px var(--semibold-font);
  text-align: left;
  margin: 30px 0 0;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .synopsis {
  font: 18px var(--light-font);
  text-align: justify;
  margin-top: 10px;
  line-height: 24px;
}

.card > .content > .slider > .infoAndActionsContainer > .infoContainer > .metadataContainer > .gameCopyright {
  font: 12px var(--light-font);
  text-align: start;
  margin-top: 20px;
}

.card > .content > .slider.parallax {
  perspective: calc(var(--perspective) * 1px);
  overflow-y: scroll;
}

.card > .content > .slider.parallax:has(.lockOverlay) {
  overflow: hidden;
}

.card > .content > .slider.parallax > .backgroundImage.image {
  transform: translateZ(var(--image-z-translation-u)) scale(var(--image-scale));
}

.card > .content > .slider.parallax > .backgroundImage.mask {
  transform: translateZ(var(--mask-z-translation-u)) scale(var(--mask-scale-x), var(--mask-scale-y));
}

.card > .content > .slider > .lockOverlay {
  -webkit-backdrop-filter: blur(30px);
  backdrop-filter: blur(30px);
  cursor: pointer;
  z-index: 10;
  background-color: #0000;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0;
}

.card > .content > .slider > .lockOverlay > .pictoElement > svg {
  width: 64px;
}

.card.portrait .content > .slider > .backgroundImage.image, .card.deeplink .content > .slider > .backgroundImage.image {
  background-position-y: -300px;
  background-size: contain;
}

.card.portrait .content > .slider > .backgroundImage.blurred, .card.deeplink .content > .slider > .backgroundImage.blurred {
  filter: blur(30px) saturate(1.5);
  background-size: cover;
}

.card.portrait .content > .slider > .backgroundImage.mask, .card.deeplink .content > .slider > .backgroundImage.mask {
  background: linear-gradient(to bottom, transparent 20%, var(--background) 60%);
}

.card.portrait .content > .slider > .cover, .card.deeplink .content > .slider > .cover {
  margin: 50px;
  display: block;
}

.card.portrait .content > .slider > .infoAndActionsContainer, .card.deeplink .content > .slider > .infoAndActionsContainer {
  margin: 0 0 20px;
}

.card.portrait .content > .slider > .infoAndActionsContainer > .infoContainer > .header, .card.deeplink .content > .slider > .infoAndActionsContainer > .infoContainer > .header {
  height: unset;
  margin: 20px 0 10px;
}

.card.portrait .content > .slider > .cover {
  height: var(--tile-portrait-image-height-u);
  width: var(--tile-portrait-image-width-u);
}

.card.deeplink .content > .slider > .cover {
  height: var(--tile-deeplink-image-height-u);
  width: var(--tile-deeplink-image-width-u);
}

@media (max-width: 1200px) and (min-aspect-ratio: 16 / 9), (min-width: 1200px) and (max-height: 760px) {
  .card > .content > .slider > .backgroundImage.image {
    background-size: cover;
  }
}

@media (max-height: 900px) {
  .card > .content > .slider > .backgroundImage.mask {
    background: linear-gradient(to bottom, transparent 45%, #0000004d 55%, var(--background) 60%);
  }
}

@media (max-height: 800px) {
  .card > .content > .slider > .backgroundImage.mask {
    background: linear-gradient(to bottom, transparent 50%, #0000004d 60%, var(--background) 65%);
  }
}

@media (max-height: 700px) {
  .card > .content > .slider > .backgroundImage.mask {
    background: linear-gradient(to bottom, transparent 60%, #0000004d 70%, var(--background) 75%);
  }
}

@media (max-height: 620px) {
  .card {
    --image-z-translation-u: 0;
    --mask-z-translation-u: 0;
  }

  .card > .content > .slider > .backgroundImage.mask {
    background: linear-gradient(to bottom, transparent 55%, #0000004d 60%, var(--background) 65%);
  }
}

.cardAvenueView {
  background-color: var(--card-background);
  z-index: 2;
  flex-direction: column;
  display: flex;
}

.cardAvenueView > .sectionButtonBar {
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-end;
  margin-top: 40px;
  margin-bottom: 10px;
  margin-left: 50px;
  display: flex;
}

.cardAvenueView > .sectionButtonBar > .tabButton {
  width: 182px;
  height: 34px;
  margin-right: 20px;
}

.cardAvenueView > .sectionOrderBar {
  justify-content: flex-end;
  align-items: center;
  height: 34px;
  padding-right: 40px;
  display: flex;
}

.episode {
  pointer-events: auto;
  z-index: 200;
  flex-direction: column;
  display: flex;
  position: relative;
  overflow: visible;
}

.episode:after {
  border-left: 4px solid var(--accent);
  content: "";
  opacity: 0;
  transform-origin: 0;
  transition: var(--opacity-short), transform var(--short-duration) ease-out;
  z-index: 300;
  position: absolute;
  top: 0;
  bottom: 0;
  transform: scaleX(0);
}

.episode:hover > .header {
  background-color: var(--tile-background-past-hover);
}

.episode:hover > .header.future {
  background-color: var(--tile-background-future-hover);
}

.episode.expanded:after {
  opacity: 1;
  transform: scaleX(1);
}

.episode.expanded > .header > .actions > .arrow > svg {
  opacity: .7;
  transform: scale(.9) rotate(-180deg);
}

.episode.expanded > .header > .actions > .arrow > svg:hover {
  opacity: 1;
  transform: scale(1) rotate(-180deg);
}

.episode.expanded > .content {
  max-height: 100vh;
  padding: 10px 20px;
}

.episode > .header {
  background-color: var(--tile-background-past);
  border-radius: var(--border-radius-medium-u);
  color: var(--text-foreground-1);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  display: flex;
  position: relative;
}

.episode > .header.future {
  background-color: var(--tile-background-future);
}

.episode > .header > .actions {
  justify-content: flex-end;
  align-items: center;
  display: flex;
  overflow: visible;
}

.episode > .header > .actions > .watchingStatus {
  width: 34px;
  height: 34px;
  margin: -3px 0 -3px 20px;
}

.episode > .header > .actions > .watchingStatus > svg {
  width: 38px;
  height: 38px;
  margin: -2px 0 0 -2px;
}

.episode > .header > .actions > .watchingStatus > svg > circle {
  stroke-width: 8px;
}

.episode > .header > .actions > .watchingStatus > .pictoElement > svg {
  width: 12px;
  margin-right: -1px;
}

.episode > .header > .actions > .arrow {
  margin-left: 20px;
}

.episode > .header > .actions > .arrow > svg {
  fill: var(--text-foreground-1);
  opacity: .7;
  width: 16px;
  transition-timing-function: ease-out;
}

.episode > .header > .actions > .arrow > svg:hover {
  opacity: 1;
  transform: scale(1);
}

.episode > .content {
  max-height: 0;
  transition: padding var(--short-duration) ease-in-out, max-height var(--short-duration) ease-in-out;
  flex-direction: row;
  padding: 0 20px;
  display: flex;
}

.episode > .content > .cover {
  background: center / cover no-repeat;
}

.episode > .content > .details {
  color: var(--text-foreground-1);
  z-index: 250;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  margin: 0 10px;
  display: flex;
}

.episode > .content > .details > .date {
  margin: 10px 0;
}

.episode > .content > .details > .programInfo {
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
  display: flex;
}

.episode > .content > .details > .programInfo .pictoInfo {
  border-radius: var(--border-radius-tiny-u);
  padding: 2px 6px;
  font-size: 14px;
}

.episode > .content > .details > .programInfo > div {
  align-items: center;
  display: flex;
}

.episode > .content > .details > .programInfo > div:not(:last-child):not(.statusPicto):after {
  background-color: var(--text-foreground-1);
  content: "";
  opacity: .7;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin: 0 5px;
}

.episode > .content > .details > .programInfo > div.languages > .pictoInfo {
  border: 1px solid var(--text-foreground-1);
}

.episode > .content > .details > .programInfo > div.languages > .pictoInfo:not(:last-child) {
  margin-right: 5px;
}

.episode > .content > .details > .programInfo > div.parentalGuidance.pictoInfo {
  background-color: var(--text-foreground-1);
  color: var(--background);
}

.episode > .content > .details > .synopsis {
  font: 14px var(--regular-font);
  text-align: left;
  margin: 0 0 10px;
}

.seriesSection {
  --navigation-button-size-u: 126;
  --navigation-button-collapsed-position-u: var(--navigation-button-size-u) / 4;
  --navigation-button-expanded-position-u: var(--navigation-button-size-u) / 8;
  --navigation-button-picto-margin-u: var(--navigation-button-collapsed-position-u) / 2;
  pointer-events: auto;
  flex-direction: column;
  width: 100%;
  margin: 30px 0 50px;
  padding: 0 50px;
  display: flex;
  overflow: visible;
}

.seriesSection > .header {
  align-items: center;
  margin-bottom: 8px;
  padding-right: 20px;
  display: flex;
}

.seriesSection > .header > .sectionTitleContainer {
  align-items: center;
  display: flex;
}

.seriesSection > .header > .sectionTitleContainer > .sectionTitle {
  color: var(--text-foreground-1);
  font: 18px var(--bold-font);
  -webkit-user-select: none;
  user-select: none;
  align-items: center;
  margin-left: 5px;
}

.seriesSection > .header > .sectionTitleContainer > .sectionTitle > .episodeCount {
  color: var(--text-foreground-2);
  margin-left: 5px;
}

.seriesSection.placeholder > .header .sectionTitleContainer.noTitle {
  background-color: var(--placeholder-text);
  width: 250px;
  height: 17px;
}

.seriesSection .episodes {
  flex-direction: column;
  flex: auto;
  row-gap: 4px;
  display: flex;
  overflow: visible;
}

.episode.tv > .header > .clock {
  opacity: .1;
  height: 100%;
  position: absolute;
  right: 190px;
}

.episode.tv > .header > .clock > svg {
  aspect-ratio: 1;
  fill: var(--tile-background-clock);
  width: 150px;
}

.episode.tv > .header > .dateAndTitle {
  white-space: nowrap;
  flex-direction: column;
  flex-shrink: 1;
  margin-right: auto;
  display: flex;
}

.episode.tv > .header > .dateAndTitle > .date {
  font: 16px var(--bold-font);
}

.episode.tv > .header > .dateAndTitle > .title {
  font: 16px var(--regular-font);
}

.episode.tv > .header > .actions > .recording {
  width: 38px;
}

.episode.tv > .header > .actions > .recording > svg {
  width: 100%;
}

.episode.tv > .header > .actions > .recording > svg > circle {
  r: 34px;
}

.episode.tv > .content > .cover {
  width: 284px;
  height: 160px;
}

.episode.tv > .content > .details > .programInfo > .statusPicto {
  margin-right: 12px;
}

.episode.tv > .content > .details > .programInfo > .liveRecording {
  margin-left: -10px;
}

.episode.tv > .content > .details > .programInfo > .liveRecording svg {
  width: 10px;
}

.episode.tv > .content > .details > .programInfo > .recordError {
  cursor: pointer;
  align-items: center;
  display: flex;
}

.episode.tv > .content > .details > .programInfo > .recordError > .pictoElement > svg {
  width: 20px;
}

.episode.tv > .content > .details > .programInfo > .recordError > .description {
  font: 16px var(--regular-font);
  opacity: .8;
  transition: var(--opacity-short);
  align-items: center;
  text-decoration: underline;
}

.episode.tv > .content > .details > .programInfo > .recordError:hover > .description {
  opacity: 1;
}

.episode.tv > .content > .details > .programInfo > .duration > .real {
  color: var(--recording);
}

.episode.tv > .content > .details > .programInfo > .duration > .separator {
  margin: 0 5px;
}

.seriesSection.placeholder .episode.tv > .header {
  height: 62px;
}

.seriesSection.placeholder .episode.tv > .header > .dateAndTitle.placeholder .date {
  background-color: var(--placeholder-text);
  width: 300px;
  height: 20px;
}

.seriesSection.placeholder .episode.tv > .header > .dateAndTitle.placeholder .title {
  background-color: var(--placeholder-text);
  width: 200px;
  height: 20px;
}

.episode.vod > .header {
  column-gap: 20px;
}

.episode.vod > .header > .title {
  font: 16px var(--bold-font);
  white-space: nowrap;
  flex-shrink: 1;
  margin-right: auto;
}

.episode.vod > .header > .actions {
  color: var(--text-foreground-1);
}

.episode.vod > .header > .actions .availabilityDate {
  font: italic 14px var(--regular-font);
  overflow: visible;
}

.episode.vod > .header > .actions .pricingLink {
  font: 14px var(--bold-font);
  opacity: 1;
  transition: var(--opacity-short);
  text-decoration: underline;
}

.episode.vod > .header > .actions .pricingLink:hover {
  opacity: .6;
}

.episode.vod > .content > .cover {
  width: 108px;
  height: 160px;
}

.episode.vod .purchaseStatus {
  color: var(--accent);
  font: 14px var(--semibold-font);
}

.seriesSection.placeholder .episodes > .episode.vod > .header {
  height: 48px;
}

.seriesSection.placeholder .episodes > .episode.vod > .header .empty {
  background-color: var(--placeholder-text);
  width: 300px;
  height: 20px;
  margin-left: 5px;
}

.seriesSection.placeholder .episodes > .episode.vod > .header .pricingLink {
  background-color: var(--placeholder-text);
  width: 160px;
  height: 20px;
  margin-left: 20px;
}

.episode.tv > .header > .clock {
  opacity: .1;
  height: 100%;
  position: absolute;
  right: 190px;
}

.episode.tv > .header > .clock > svg {
  aspect-ratio: 1;
  fill: var(--tile-background-clock);
  width: 150px;
}

.episode.tv > .header > .dateAndTitle {
  white-space: nowrap;
  flex-direction: column;
  flex-shrink: 1;
  margin-right: auto;
  display: flex;
}

.episode.tv > .header > .dateAndTitle > .date {
  font: 16px var(--bold-font);
}

.episode.tv > .header > .dateAndTitle > .title {
  font: 16px var(--regular-font);
}

.episode.tv > .header > .actions > .recording {
  width: 38px;
}

.episode.tv > .header > .actions > .recording > svg {
  width: 100%;
}

.episode.tv > .header > .actions > .recording > svg > circle {
  r: 34px;
}

.episode.tv > .content > .cover {
  width: 284px;
  height: 160px;
}

.episode.tv > .content > .details > .programInfo > .statusPicto {
  margin-right: 12px;
}

.episode.tv > .content > .details > .programInfo > .liveRecording {
  margin-left: -10px;
}

.episode.tv > .content > .details > .programInfo > .liveRecording svg {
  width: 10px;
}

.episode.tv > .content > .details > .programInfo > .recordError {
  cursor: pointer;
  align-items: center;
  display: flex;
}

.episode.tv > .content > .details > .programInfo > .recordError > .pictoElement > svg {
  width: 20px;
}

.episode.tv > .content > .details > .programInfo > .recordError > .description {
  font: 16px var(--regular-font);
  opacity: .8;
  transition: var(--opacity-short);
  align-items: center;
  text-decoration: underline;
}

.episode.tv > .content > .details > .programInfo > .recordError:hover > .description {
  opacity: 1;
}

.episode.tv > .content > .details > .programInfo > .duration > .real {
  color: var(--recording);
}

.episode.tv > .content > .details > .programInfo > .duration > .separator {
  margin: 0 5px;
}

.episode.vod > .header {
  column-gap: 20px;
}

.episode.vod > .header > .title {
  font: 16px var(--bold-font);
  white-space: nowrap;
  flex-shrink: 1;
  margin-right: auto;
}

.episode.vod > .header > .actions {
  color: var(--text-foreground-1);
}

.episode.vod > .header > .actions .availabilityDate {
  font: italic 14px var(--regular-font);
  overflow: visible;
}

.episode.vod > .header > .actions .pricingLink {
  font: 14px var(--bold-font);
  opacity: 1;
  transition: var(--opacity-short);
  text-decoration: underline;
}

.episode.vod > .header > .actions .pricingLink:hover {
  opacity: .6;
}

.episode.vod > .content > .cover {
  width: 108px;
  height: 160px;
}

.episode.vod .purchaseStatus {
  color: var(--accent);
  font: 14px var(--semibold-font);
}

.credits {
  font: 16px var(--regular-font);
  text-align: left;
  flex-wrap: wrap;
}

.credits > span {
  font: 16px var(--light-font);
  display: inline-block;
  position: relative;
}

.credits > span.label {
  color: var(--text-foreground-2);
  font: 16px var(--regular-font);
  white-space: nowrap;
  margin-right: 5px;
}

.credits > span.cast {
  color: var(--text-foreground-1);
}

.credits > span.cast:before {
  background-color: var(--cast-underline);
  content: "";
  width: 100%;
  height: 2px;
  position: absolute;
  bottom: 0;
}

.credits > span.cast:not(:last-child):before {
  width: 95%;
}

.credits > span.cast:not(:last-child):after {
  content: ", ";
}

.credits > span.cast:hover {
  opacity: 1;
}

.credits > span.cast:hover:before {
  height: 3px;
}

.credits > span.nocast {
  opacity: .8;
}

@keyframes closeButtonSlideDown {
  0% {
    opacity: 0;
    transform: translateY(calc(var(--fullscreen-exit-margin) * -1));
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.gameSlideshow {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gameSlideshow > .gameImage {
  cursor: pointer;
  opacity: 0;
  height: 100%;
  transition: var(--opacity-short);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.gameSlideshow > .gameImage.selected {
  opacity: 1;
}

.gameSlideshow > button.imageNav {
  cursor: pointer;
  opacity: .8;
  height: 370px;
  transition: var(--opacity-short);
  background-color: #ffffff05;
  border: none;
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  top: 0;
}

.gameSlideshow > button.imageNav.previous {
  left: 0;
}

.gameSlideshow > button.imageNav.next {
  right: 0;
}

.gameSlideshow > button.imageNav:hover {
  opacity: 1;
  background-color: #ffffff0d;
}

.gameSlideshow > .fullscreenExit {
  --fullscreen-exit-margin: 40px;
  animation: closeButtonSlideDown var(--short-duration) var(--short-duration) ease-in both;
  right: var(--fullscreen-exit-margin);
  top: var(--fullscreen-exit-margin);
  position: absolute;
}

.gameSlideshow.fullscreen > button.imageNav {
  height: 100%;
}

.gameSlideshow.fullscreen > .gameSlideshowNavigator {
  height: 100%;
  right: revert;
  width: 100%;
  padding-bottom: 20px;
}

.gameSlideshowNavigator {
  pointer-events: none;
  z-index: 2;
  justify-content: center;
  align-items: flex-end;
  height: 450px;
  display: flex;
  position: absolute;
  right: 50px;
}

.gameSlideshowNavigator .container {
  background-color: var(--background);
  border-radius: 40px;
  gap: 10px;
  padding: 10px;
  display: flex;
}

.gameSlideshowNavigator .container > button {
  background-color: var(--overlay-foreground-2);
  cursor: pointer;
  pointer-events: all;
  border: none;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  padding: 0;
}

.gameSlideshowNavigator .container > button:hover {
  background-color: var(--overlay-foreground-1);
}

.gameSlideshowNavigator .container > button.selected {
  background-color: var(--accent);
  cursor: revert;
}

.modalDialogDiv.externalContent {
  width: 1200px;
  height: 100%;
  position: relative;
}

.modalDialogDiv.externalContent iframe {
  border: 0;
  width: 100%;
  height: 100%;
}

.modalDialogDiv.externalContent .loader {
  margin-top: -50px;
  margin-left: -50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.modalDialogDiv .gameProfileSelect {
  place-content: center;
  gap: 30px;
  margin: 50px;
  display: flex;
}

button.profileBtn {
  cursor: pointer;
  background-color: #0000;
  border: none;
  border-radius: 4px;
  flex-direction: column;
  justify-content: stretch;
  align-items: center;
  margin: 0;
  padding: 0;
  display: flex;
}

button.profileBtn.selected img.profileAvatar {
  border-color: var(--accent);
}

button.profileBtn:hover img.profileAvatar {
  border-color: var(--accent-light);
}

button.profileBtn img.profileAvatar {
  border: 4px solid #0000;
  border-radius: 10px;
  width: 100px;
  height: 100px;
}

button.profileBtn .profileNickname {
  color: #fff;
  padding: 10px;
}

.modalDialogDiv.keyboardShortcuts > .content {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent {
  flex: 1;
  padding: 0 50px;
  overflow-y: auto;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column {
  flex-direction: column;
  display: flex;
  overflow: visible;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > .sectionTitle {
  font: 18px var(--semibold-font);
  margin: 20px 0 10px 100px;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul {
  flex-direction: column;
  grid-template-columns: [shortcut-start] 110px[shortcut-end action-start] auto[action-end];
  row-gap: 6px;
  margin: 0;
  padding: 0 0 20px;
  list-style: none;
  display: grid;
  overflow: visible;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li {
  display: contents;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li:not(:last-child) {
  margin-bottom: 6px;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .shortcut {
  grid-column: shortcut-start / shortcut-end;
  margin-left: auto;
  overflow: visible;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .shortcut > span {
  background-color: var(--keyboard-shortcut-background);
  box-shadow: 0 1px 2px 0 var(--shadow);
  color: var(--keyboard-shortcut-foreground);
  font-family: var(--monospace);
  border-radius: 8px;
  justify-content: center;
  min-width: 26px;
  padding: 5px 10px;
  position: relative;
  overflow: visible;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .shortcut > span:not(:last-child) {
  margin-right: 15px;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .shortcut > span:not(:last-child):after {
  content: "+";
  position: absolute;
  right: -12px;
}

.modalDialogDiv.keyboardShortcuts > .content > .keyboardShortcutsContent > .column > ul > li > .action {
  grid-column: action-start / action-end;
  align-items: center;
  margin-left: 10px;
}

.modalDialogDiv.legalNotice > .content > .legalContent {
  font: 16px var(--regular-font);
  max-width: 500px;
  padding: 20px var(--modal-inline-padding-u) 50px;
  text-align: left;
  white-space: pre-line;
  flex-direction: column;
  flex: 1;
  align-items: flex-start;
  display: flex;
  overflow-y: auto;
}

.modalDialogDiv.legalNotice.dark > .content > .legalContent {
  color: var(--overlay-foreground-1);
}

.modalDialogDiv.legalNotice.light > .content > .legalContent {
  color: var(--overlay-background);
}

.modalDialogDiv.message > .content > .header {
  padding-top: 50px;
}

.modalDialogDiv.message > .content > .messageContainer {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
  padding: 20px var(--modal-inline-padding-u) 30px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.modalDialogDiv.message > .content > .messageContainer > .messageContent {
  flex-direction: column;
  align-items: flex-start;
  margin-bottom: 50px;
  display: flex;
}

.modalDialogDiv.newVersion > .content > .header {
  padding-top: 50px;
}

.modalDialogDiv.newVersion > .content > .newVersionContent {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
  padding: 20px var(--modal-inline-padding-u) 30px;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.modalDialogDiv.newVersion > .content > .newVersionContent > :first-child {
  margin-bottom: 20px;
}

.modalDialogDiv.npvrHelp {
  width: 60%;
  max-height: 650px;
}

.modalDialogDiv.npvrHelp > .content div, .modalDialogDiv.npvrHelp > .content span, .modalDialogDiv.npvrHelp > .content ul, .modalDialogDiv.npvrHelp > .content li {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
}

.modalDialogDiv.npvrHelp > .content > .helpContent {
  padding: 10px var(--modal-inline-padding-u) 30px;
  flex-direction: column;
  flex: 1;
  overflow-y: auto;
}

.modalDialogDiv.npvrHelp > .content > .helpContent > .sectionTitle {
  font: 18px var(--semibold-font);
  margin: 30px 0 15px;
}

.modalDialogDiv.npvrHelp > .content > .helpContent > ul {
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: inside square;
  display: flex;
}

.modalDialogDiv.npvrHelp > .content > .helpContent > ul.noBullet {
  list-style: none;
}

.modalDialogDiv.npvrHelp > .content > .helpContent > ul > li {
  text-align: left;
  margin-bottom: 10px;
  display: list-item;
}

.modalDialogDiv.npvrHelp > .content > .helpContent > ul > li > div {
  flex-direction: row;
  align-items: center;
  display: flex;
}

.modalDialogDiv.npvrHelp > .content > .helpContent > ul > li > div > .buttonFX > .content {
  color: revert;
  font: revert;
}

.modalDialogDiv.npvrHelp > .content > .helpContent > ul > li > div > .buttonFX > .disabled {
  background-color: #0000;
}

.modalDialogDiv.npvrHelp > .content > .helpContent > ul > li > div > .hint {
  all: unset;
  font: 16px var(--regular-font);
  margin-left: 10px;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
  min-width: 680px;
  padding: 0 var(--modal-inline-padding-u) 40px;
  flex: auto;
  display: block;
  overflow-y: auto;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu {
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 35px 10px;
  display: grid;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcSectionLabel {
  font: 22px var(--semibold-font);
  grid-column: 1 / span 2;
  margin-top: 30px;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu .pcHint {
  font: 14px var(--light-font);
  opacity: .7;
  text-align: start;
  margin-top: 5px;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcSectionHint {
  grid-column: 1 / span 2;
  margin-top: 0;
  margin-bottom: 30px;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcLabel {
  flex-direction: column;
  align-items: flex-start;
  display: flex;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcLabel > .pcSelectedValue {
  font: 15px var(--light-font);
  margin-top: 10px;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu > .pcValue {
  margin-left: auto;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcMainMenu .parentalGuidance {
  background-color: var(--text-foreground-1);
  border-radius: var(--border-radius-huge-u);
  color: var(--background);
  font: 20px var(--bold-font);
  padding: 5px 10px;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcVideoMinAgeSelection {
  flex-direction: column;
  align-items: center;
  row-gap: 50px;
  display: flex;
}

.modalDialogDiv.parentalControl > .content > .parentalControlContent > .pcVideoMinAgeSelection > .pcExplanations {
  white-space: pre;
}

.pcVideoMinAgeSelection {
  --item-size: 64px;
  --margin-u: 30px;
  --border-u: 4px;
  --not-selected-opacity: .6;
  --selected-scale: 1.4;
  overflow: visible;
}

.pcVideoMinAgeSelection > .pcItemsWrapper {
  --selected-index: 0;
  column-gap: var(--margin-u);
  position: relative;
  overflow: visible;
}

.pcVideoMinAgeSelection > .pcItemsWrapper:before {
  background-color: var(--overlay-foreground-1);
  content: "";
  height: var(--border-u);
  left: calc(var(--item-size) - var(--border-u) * 2);
  pointer-events: none;
  top: calc(var(--item-size) / 2 - 10px);
  transition: width var(--short-duration) ease-out;
  width: calc((var(--margin-u) + var(--item-size)) * var(--selected-index));
  z-index: 0;
  position: absolute;
}

.pcVideoMinAgeSelection > .pcItemsWrapper:after {
  background-color: var(--overlay-foreground-1);
  content: "";
  height: var(--border-u);
  right: calc(var(--item-size) - var(--border-u) * 2);
  opacity: .6;
  pointer-events: none;
  top: calc(var(--item-size) / 2 - 10px);
  transition: width var(--short-duration) ease-out;
  width: calc(100% - var(--item-size));
  z-index: 0;
  position: absolute;
}

.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem {
  width: var(--item-size);
  flex-direction: column;
  align-items: center;
  row-gap: 20px;
  display: flex;
  overflow: visible;
}

.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem:not(.selected) {
  cursor: pointer;
}

.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.included > .pictoElementBg > .pictoElement, .pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.selected > .pictoElementBg > .pictoElement, .pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.included > .pictoElementBg > .pictoElement > svg, .pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.selected > .pictoElementBg > .pictoElement > svg {
  opacity: 1;
}

.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem:hover:not(.selected) > .pictoElementBg > .pictoElement {
  border-color: var(--accent);
  opacity: 1;
}

.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem > .pictoElementBg {
  background-color: var(--overlay-background);
  z-index: 1;
  border-radius: 50%;
  overflow: visible;
}

.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem > .pictoElementBg > .pictoElement {
  background-color: var(--overlay-background);
  border: var(--border-u) solid var(--overlay-foreground-1);
  opacity: var(--not-selected-opacity);
  z-index: 1;
  border-radius: 50%;
  padding-inline: 20px;
}

.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem > .pictoElementBg > .pictoElement > svg {
  fill: var(--overlay-foreground-1);
  opacity: 0;
}

.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem.selected .pictoElement {
  transform: scale(var(--selected-scale));
}

.pcVideoMinAgeSelection > .pcItemsWrapper > .pcItem > .pcLabel {
  font-size: 14px;
}

.pcVideoMinAgeSelection > .pcVideoMinAgeHint {
  border-radius: var(--border-radius-big-u);
  border: 1px solid #ffffff4d;
  align-items: center;
  column-gap: 20px;
  padding: 10px 20px;
  display: flex;
}

.modalDialogDiv.pin > .content > .modalHeader > .pictoElement {
  margin: 10px 10px -10px 0;
}

.modalDialogDiv.pin > .content > .pinContent {
  color: var(--overlay-foreground-1);
  font: 16px var(--regular-font);
  min-width: 680px;
  padding: 0 var(--modal-inline-padding-u) 40px;
  flex-direction: column;
  align-items: center;
  row-gap: 30px;
  display: flex;
}

.modalDialogDiv.pin > .content > .pinContent > hr {
  opacity: .4;
  width: 100%;
}

.modalDialogDiv.pin > .content > .pinContent > .buttonFX {
  margin-top: 10px;
}

.modalDialogDiv.pin > .content > .pinContent > .pinError {
  color: var(--error);
  height: 24px;
  margin-top: -10px;
}

.modalDialogDiv.pin > .content > .pinContent > .parentalGuidance {
  background-color: var(--text-foreground-1);
  border-radius: var(--border-radius-huge-u);
  color: var(--background);
  font: 24px var(--bold-font);
  padding: 10px;
}

.digitsWrapper {
  --border-size-u: 4px;
  padding: var(--border-size-u);
  justify-content: center;
  align-items: center;
  column-gap: 20px;
  display: flex;
}

.digitsWrapper .digit {
  cursor: pointer;
  font: 32px var(--bold-font);
  -webkit-user-select: none;
  user-select: none;
  background-color: #ffffff1a;
  border-radius: 4px;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 60px;
  padding: 10px 15px;
  line-height: 30px;
}

.digitsWrapper .digit.focused {
  outline: var(--border-size-u) solid var(--accent);
  background-color: #fff3;
}

.digitsWrapper .digit:hover {
  background-color: #fff3;
}

.avatarSelectContainer {
  flex-wrap: wrap;
  place-content: center;
  align-items: center;
  gap: 40px;
  width: 720px;
  margin: 4rem 2rem;
  display: flex;
}

.modalDialogDiv.profileEditor {
  max-width: 1000px;
}

.modalDialogDiv.profileEditor .profileEditorContainer {
  color: var(--overlay-foreground-1);
  flex-direction: column;
  flex-shrink: 1;
  align-items: center;
  row-gap: 2rem;
  margin-block: 3.4rem 4rem;
  padding-inline: 3rem;
  display: flex;
  overflow-y: scroll;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileEditorAvatarAndName {
  flex-direction: column;
  align-items: center;
  row-gap: 1rem;
  display: flex;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileEditorAvatarAndName > .profileEditorAvatar > img {
  border: none;
  margin: 0;
  padding: 0;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileEditorAvatarAndName > .selectAvatarLink {
  color: var(--overlay-foreground-1);
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileEditorAvatarAndName > .profileEditorName {
  border-radius: var(--border-radius-small-u);
  color: var(--overlay-foreground-1);
  background-color: #ffffff1a;
  border: 0;
  width: 18rem;
  margin-top: 2rem;
  padding: 1rem;
  font-size: 24px;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings {
  grid-template-columns: 1fr 280px;
  align-items: center;
  gap: 1rem;
  margin-block: 3rem;
  display: grid;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .expert {
  display: none;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings.expertMode .expert {
  display: flex;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .sectionTitle {
  font: 24px var(--bold-font);
  grid-column: span 2;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel {
  align-items: center;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel.column {
  flex-direction: column;
  align-items: flex-start;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel > .value {
  font: 16px var(--semibold-font);
  margin-top: -1px;
  margin-left: 10px;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel .leaf {
  border: 1px solid var(--text-foreground-1);
  border-radius: var(--border-radius-tiny-u);
  opacity: .7;
  width: 34px;
  height: 22px;
  margin-left: 5px;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings > .settingsLabel > .hint {
  font: 14px var(--light-font);
  opacity: .7;
  text-align: start;
  margin-top: 5px;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .settingsValue {
  font-family: var(--semibold-font);
  justify-self: end;
  align-items: center;
  margin-left: 10px;
  overflow: visible;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .settingsValue.slider {
  margin: 15px 0;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .settingsValue > .pictoElement > svg {
  width: 20px;
}

.modalDialogDiv.profileEditor .profileEditorContainer .profileSettings .settingsValue > .pictoElement.speaker.waves {
  margin: 0 10px 0 -27px;
}

.modalDialogDiv.profileEditor .profileEditorContainer > .deleteAvatarLink {
  color: var(--overlay-foreground-2);
}

.linkButton {
  color: inherit;
  cursor: pointer;
  font: inherit;
  opacity: .8;
  background-color: #0000;
  border: 0;
  text-decoration: underline;
}

.linkButton:hover {
  opacity: 1;
}

.linkButton.disabled {
  cursor: default;
  opacity: .4;
}

.slider {
  --slider-size-u: 6px;
  position: relative;
  overflow: visible;
}

.slider > input[type="range"] {
  -webkit-appearance: none;
  box-sizing: border-box;
  background-color: #0000;
  width: 150px;
  overflow: visible;
}

.slider > input[type="range"]::-webkit-slider-runnable-track {
  background-color: var(--slider-background);
  cursor: pointer;
  height: var(--slider-size-u);
  border-radius: 3px;
  width: 100%;
}

.slider > input[type="range"]::-moz-range-track {
  background-color: var(--slider-background);
  cursor: pointer;
  height: var(--slider-size-u);
  border-radius: 3px;
  width: 100%;
}

.slider > input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--slider-thumb);
  cursor: pointer;
  height: calc(2 * var(--slider-size-u));
  margin-top: calc(var(--slider-size-u) / -2);
  width: calc(2 * var(--slider-size-u));
  border-radius: 50%;
}

.slider > input[type="range"]::-webkit-slider-thumb:hover {
  background-color: var(--slider-thumb-hover);
}

.slider > input[type="range"]::-moz-range-thumb {
  background-color: var(--slider-thumb);
  cursor: pointer;
  height: calc(2 * var(--slider-size-u));
  margin-top: calc(var(--slider-size-u) / -2);
  width: calc(2 * var(--slider-size-u));
  border: 0;
  border-radius: 50%;
}

.slider > input[type="range"]::-moz-range-thumb:hover {
  background-color: var(--slider-thumb-hover);
}

.slider > input[type="range"]::-moz-range-progress {
  cursor: pointer;
  height: var(--slider-size-u);
  background-color: currentColor;
  border-radius: 50%;
}

.slider > .ticks {
  top: calc(2 * (var(--slider-size-u) + 1px));
  z-index: -1;
  justify-content: space-between;
  width: 150px;
  padding: 0 3px 0 7px;
  position: absolute;
  overflow: visible;
}

.slider > .ticks > .tick {
  background: var(--slider-tick);
  color: var(--slider-tick-value);
  font: 10px var(--regular-font);
  width: 1px;
  height: var(--slider-size-u);
  line-height: calc(var(--slider-size-u) * 4 + 2px);
  justify-content: center;
  overflow: visible;
}

.slider > .currentValue {
  font: 16px var(--semibold-font);
  justify-content: flex-end;
  width: 60px;
}

@keyframes splashscreenImage {
  0% {
    opacity: 0;
    transform: scale(.8);
  }

  25% {
    opacity: 1;
    transform: scale(1.2);
  }

  45% {
    opacity: 1;
    transform: scale(1);
  }

  80% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(.8);
  }
}

@keyframes splashscreenName {
  0% {
    opacity: 0;
  }

  15% {
    opacity: 0;
  }

  45% {
    opacity: 1;
    transform: scale(1.2);
  }

  80% {
    opacity: 1;
    transform: scale(1.2);
  }

  100% {
    opacity: 0;
    transform: scale(.8);
  }
}

.modalContentDiv > .modalDialogDiv.profileSplashscreen {
  --animation-duration: 2s;
}

.modalContentDiv > .modalDialogDiv.profileSplashscreen > .content {
  background-color: #0000;
  overflow: visible;
}

.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent {
  flex-direction: column;
  align-items: center;
  row-gap: 4rem;
  display: flex;
  overflow: visible;
}

.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent button {
  overflow: visible;
}

.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent button .avatarImage {
  transform-origin: center;
}

.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent button .avatarName {
  max-width: revert;
  display: flex;
}

.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent.animated .avatarImage {
  animation: splashscreenImage var(--animation-duration) cubic-bezier(.04, .48, .55, .98) both;
}

.modalContentDiv > .modalDialogDiv.profileSplashscreen .profileSplashscreenMessageContent.animated .avatarName {
  animation: splashscreenName var(--animation-duration) cubic-bezier(.04, .48, .55, .98) both;
}

.modalContentDiv > .modalDialogDiv.profiles {
  --btn-border-u: 4px;
  min-width: 600px;
  min-height: 400px;
}

.modalContentDiv > .modalDialogDiv.profiles > .content {
  background-color: #0000;
}

.modalContentDiv > .modalDialogDiv.profiles .loader {
  margin-top: -50px;
  margin-left: -50px;
  position: absolute;
  top: 50%;
  left: 50%;
}

.modalContentDiv > .modalDialogDiv.profiles .profilesContent {
  color: var(--overlay-foreground-1);
  flex-direction: column;
  align-items: center;
  row-gap: 5rem;
  display: flex;
}

.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesHeader {
  font: 36px var(--semibold-font);
  margin-block: 1rem;
}

.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesList {
  justify-content: space-between;
  align-items: flex-start;
  column-gap: 4rem;
  display: flex;
}

.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesList > .actionBtn {
  cursor: pointer;
  height: calc(var(--avatar-size-big-u) + 2 * var(--btn-border-u));
  width: calc(var(--avatar-size-big-u) + 2 * var(--btn-border-u));
  background-color: #ffffff26;
  border: none;
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  display: flex;
}

.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesList > .actionBtn:hover {
  background-color: #fff3;
}

.modalContentDiv > .modalDialogDiv.profiles .profilesContent .profilesList > .actionBtn:disabled {
  cursor: revert;
  background-color: #ffffff0d;
}

.modalDialogDiv.vodPurchase {
  max-width: 600px;
}

.modalDialogDiv.vodPurchase > .content .titles {
  font: 36px var(--bold-font);
  text-align: left;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  flex-direction: column;
  flex: 1 0;
  padding: 30px;
  display: flex;
}

.modalDialogDiv.vodPurchase > .content .titles > .subtitle {
  font: 24px var(--regular-font);
}

.modalDialogDiv.vodPurchase > .content .invalidContent {
  font: 20px var(--semibold-font);
  justify-content: center;
  padding: 50px;
}

.modalDialogDiv.vodPurchase > .content .validation {
  flex-direction: column;
  flex-shrink: 1;
  align-items: stretch;
  padding: 30px 30px 0;
  display: flex;
  overflow-y: auto;
}

.modalDialogDiv.vodPurchase > .content .validation > .summary {
  font: 24px var(--regular-font);
  flex-direction: row;
  align-items: center;
  display: flex;
}

.modalDialogDiv.vodPurchase > .content .validation > .summary > .price {
  flex-direction: column;
  align-items: flex-end;
  display: flex;
}

.modalDialogDiv.vodPurchase > .content .validation > .summary > .price.discount {
  background-color: var(--purchase-discount-background);
  border-radius: var(--border-radius-tiny-u);
  color: var(--purchase-discount-foreground);
  font: 20px var(--semibold-font);
  padding: 2px 10px;
}

.modalDialogDiv.vodPurchase > .content .validation > .summary > .price.struck {
  margin-left: 10px;
  text-decoration: line-through;
}

.modalDialogDiv.vodPurchase > .content .validation > .details {
  font: 16px var(--regular-font);
  opacity: .7;
  text-align: left;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 5px;
  display: flex;
}

.modalDialogDiv.vodPurchase > .content .validation > .details .pictoInfo {
  border-radius: var(--border-radius-tiny-u);
  padding: 2px 6px;
  font-size: 12px;
}

.modalDialogDiv.vodPurchase > .content .validation > .details > div {
  align-items: center;
  display: flex;
}

.modalDialogDiv.vodPurchase > .content .validation > .details > div:not(:last-child):after {
  content: "";
  opacity: .7;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  margin: 0 5px;
}

.modalDialogDiv.vodPurchase > .content .validation > .details > div.languages > .pictoInfo {
  font: 14px var(--semibold-font);
  border-style: solid;
  border-width: 1px;
  height: 24px;
}

.modalDialogDiv.vodPurchase > .content .validation > .details > div.languages > .pictoInfo:not(:last-child) {
  margin-right: 5px;
}

.modalDialogDiv.vodPurchase > .content .validation > .details > div.languages > .pictoInfo.impaired {
  padding-inline: 16px;
}

.modalDialogDiv.vodPurchase > .content .validation > .details > div.languages > .pictoInfo > svg {
  width: 20px;
}

.modalDialogDiv.vodPurchase > .content .validation > .details > div.parentalGuidance.pictoInfo {
  font: 15px var(--semibold-font);
}

.modalDialogDiv.vodPurchase > .content .validation > .validity {
  font: 16px var(--regular-font);
  flex-direction: column;
  margin: 40px 0 10px;
}

.modalDialogDiv.vodPurchase > .content .validation > .validity > .bullet {
  text-align: left;
}

.modalDialogDiv.vodPurchase > .content .validation > .validity > .bullet:before {
  content: "•";
  margin-right: 10px;
}

.modalDialogDiv.vodPurchase > .content .validation > .codeAndButton {
  align-items: center;
  margin: 20px 0 5px;
}

.modalDialogDiv.vodPurchase > .content .validation > .codeAndButton > input {
  border: 2px solid var(--input-border);
  border-radius: var(--border-radius-huge-u);
  font: 14px var(--regular-font);
  -webkit-user-select: text;
  user-select: text;
  background-color: #0000;
  flex: 1;
  height: 46px;
  margin-right: 20px;
  padding: 8px 12px;
}

.modalDialogDiv.vodPurchase > .content .validation > .codeAndButton > .pictoElement > svg {
  fill: var(--success);
}

.modalDialogDiv.vodPurchase > .content .validation > .appliedPromocode > .label {
  font: 14px var(--light-font);
}

.modalDialogDiv.vodPurchase > .content .validation > .appliedPromocode > .promocode {
  font: 14px var(--regular-font);
  margin-left: 3px;
}

.modalDialogDiv.vodPurchase > .content .validation > .promocodeError {
  font: 14px var(--regular-font);
  opacity: 0;
  text-align: left;
  height: 60px;
  margin-bottom: 20px;
}

.modalDialogDiv.vodPurchase > .content .validation > .promocodeError.visible {
  opacity: 1;
}

.modalDialogDiv.vodPurchase > .content .validation > .information {
  cursor: pointer;
  align-items: center;
  margin: 8px 0;
  font-size: 12px;
}

.modalDialogDiv.vodPurchase > .content .validation > .information > .pictoElement {
  width: 20px;
}

.modalDialogDiv.vodPurchase > .content .validation > .information > .pictoElement > svg {
  fill: var(--accent);
  width: 16px;
}

.modalDialogDiv.vodPurchase > .content .paid {
  text-align: left;
  flex-direction: column;
  margin: 30px;
}

.modalDialogDiv.vodPurchase > .content .paid > .title {
  font: 24px var(--semibold-font);
}

.modalDialogDiv.vodPurchase > .content .paid > .message {
  font: 18px var(--regular-font);
  margin: 30px 0;
}

.modalDialogDiv.vodPurchase > .content .paid > .buttons {
  justify-content: space-between;
}

.modalDialogDiv.vodPurchase.dark > .content {
  color: var(--overlay-foreground-1);
}

.modalDialogDiv.vodPurchase.dark > .content .titles {
  border-bottom-color: var(--separator-dark);
}

.modalDialogDiv.vodPurchase.dark > .content .validation > .summary > .price.struck {
  -webkit-text-decoration-color: var(--overlay-foreground-1);
  text-decoration-color: var(--overlay-foreground-1);
}

.modalDialogDiv.vodPurchase.dark > .content .validation > .details > div:not(:last-child):after {
  background-color: var(--overlay-foreground-1);
}

.modalDialogDiv.vodPurchase.dark > .content .validation > .details > div.languages > .pictoInfo {
  border-color: var(--overlay-foreground-1);
}

.modalDialogDiv.vodPurchase.dark > .content .validation > .details > div.languages > .pictoInfo > svg {
  fill: var(--overlay-foreground-1);
}

.modalDialogDiv.vodPurchase.dark > .content .validation > .details > div.parentalGuidance.pictoInfo {
  background-color: var(--overlay-foreground-1);
  color: var(--overlay-background);
}

.modalDialogDiv.vodPurchase.dark > .content .validation > .codeAndButton > input {
  background-color: var(--overlay-background);
  border-color: var(--placeholder-input);
  color: var(--overlay-foreground-1);
}

.modalDialogDiv.vodPurchase.dark > .content .validation > .codeAndButton > input::placeholder {
  color: var(--placeholder-input);
}

.modalDialogDiv.vodPurchase.dark > .content .validation > .promocodeError {
  color: var(--error);
}

.modalDialogDiv.vodPurchase.light > .content {
  color: var(--overlay-background);
}

.modalDialogDiv.vodPurchase.light > .content .titles {
  border-bottom-color: var(--separator-light);
}

.modalDialogDiv.vodPurchase.light > .content .validation > .summary > .price.struck {
  -webkit-text-decoration-color: var(--overlay-background);
  text-decoration-color: var(--overlay-background);
}

.modalDialogDiv.vodPurchase.light > .content .validation > .details > div:not(:last-child):after {
  background-color: var(--overlay-background);
}

.modalDialogDiv.vodPurchase.light > .content .validation > .details > div.languages > .pictoInfo {
  border-color: var(--overlay-background);
}

.modalDialogDiv.vodPurchase.light > .content .validation > .details > div.parentalGuidance.pictoInfo {
  background-color: var(--overlay-background);
  color: var(--overlay-foreground-1);
}

.modalDialogDiv.vodPurchase.light > .content .validation > .codeAndButton > input {
  background-color: var(--overlay-foreground-1);
  border-color: var(--placeholder-input);
  color: var(--overlay-background);
}

.modalDialogDiv.vodPurchase.light > .content .validation > .codeAndButton > input::placeholder {
  color: var(--placeholder-input);
}

.modalDialogDiv.vodPurchase.light > .content .validation > .promocodeError {
  color: var(--error);
}

.purchaseRedirect {
  flex-direction: column;
  align-items: flex-start;
  row-gap: 30px;
  padding: 0 40px 40px;
  display: flex;
}

.purchaseRedirect > .purchaseRedirectTitle {
  font: 24px var(--semibold-font);
}

.purchaseRedirect > .purchaseRedirectContainer {
  align-items: flex-start;
  column-gap: 40px;
  display: flex;
}

.purchaseRedirect > .purchaseRedirectContainer > .purchaseRedirectMessage {
  text-align: start;
  white-space: break-spaces;
  flex-shrink: 1;
  line-height: 1.3rem;
}

.purchaseRedirect > .purchaseRedirectContainer > .qrCodeContainer {
  border-radius: var(--border-radius-big-u);
  background-color: #fff;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: flex;
}

.registrationFrameContainer {
  flex-grow: 1;
}

.registrationFrameContainer > .debugPanel {
  background-color: var(--accent-light);
  color: var(--text-foreground-1);
  font: 14px var(--regular-font);
  z-index: 1000;
  flex-direction: column;
  width: 100%;
  padding: 10px 0;
  display: flex;
  position: absolute;
  top: 0;
  overflow: visible;
  box-shadow: 0 0 4px #000;
}

.registrationFrameContainer > .debugPanel > .overriddenAppConf {
  font: 16px var(--regular-font);
  z-index: 1000;
  align-items: center;
  width: 100%;
  margin: 10px 0;
  padding: 0 20px;
  display: flex;
}

.registrationFrameContainer > .debugPanel > .overriddenAppConf > .label {
  background-color: var(--text-foreground-1);
  border-radius: var(--border-radius-tiny-u) 0 0 var(--border-radius-tiny-u);
  color: var(--background);
  padding: 1px 5px;
}

.registrationFrameContainer > .debugPanel > .overriddenAppConf > .value {
  background-color: var(--background);
  border-radius: 0 var(--border-radius-tiny-u) var(--border-radius-tiny-u) 0;
  color: var(--text-foreground-1);
  font-family: var(--bold-font);
  padding: 1px 5px;
}

.registrationFrameContainer > .debugPanel.reduced {
  padding: 0;
}

.registrationFrameContainer > .debugPanel.reduced > .overriddenAppConf {
  margin: 5px 0;
  font-size: 14px;
}

.registrationFrameContainer > .debugPanel * {
  overflow: visible;
}

.registrationFrameContainer > .debugPanel > .separator {
  border-top: 1px solid #ffffff4d;
  margin: 10px 0;
}

.registrationFrameContainer > .debugPanel > .row {
  align-items: center;
  margin: 10px 0;
  padding: 0 20px;
}

.registrationFrameContainer > .debugPanel > .row.buttons {
  justify-content: center;
}

.registrationFrameContainer > .debugPanel > .row.buttons > div {
  margin-inline: 20px;
}

.registrationFrameContainer > .debugPanel > .row > .label {
  font-family: var(--semibold-font);
  margin-right: 10px;
}

.registrationFrameContainer > .debugPanel > .row > input {
  border-radius: var(--border-radius-tiny-u);
  color: var(--text-foreground-1);
  -webkit-user-select: text;
  user-select: text;
  background-color: #ffffff4d;
  border: 0;
  flex-grow: 1;
  padding: 5px 10px;
}

.registrationFrameContainer > .debugPanel > .row > input::selection {
  color: var(--text-foreground-1);
  background: #fff;
}

.registrationFrameContainer > .registrationFrame {
  border: 0;
  width: 100%;
  height: 100%;
}

@keyframes debugSlideIn {
  0% {
    opacity: 0;
    transform: translateX(-110%);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes debugSlideOut {
  0% {
    opacity: 1;
    transform: translateX(0);
  }

  100% {
    opacity: 0;
    transform: translateX(-110%);
  }
}

.start {
  flex-grow: 1;
  position: relative;
}

.start > .mainLayout {
  background-color: var(--background);
  opacity: 0;
  z-index: 200;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  display: flex;
  inset: 0;
}

.start > .mainLayout.visible {
  animation: fadeIn var(--short-duration) ease-out forwards;
}

.start > .mainLayout.hidden {
  animation: fadeOut var(--short-duration) ease-in forwards;
}

.start > .mainLayout > .debugContainer {
  opacity: 0;
  background-color: #2a2a2a;
  border-radius: 2px 10px 2px 2px;
  flex-direction: column;
  min-width: 280px;
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  transform: translateX(-110%);
  box-shadow: 0 0 5px #0006;
}

.start > .mainLayout > .debugContainer.debugSlideIn {
  animation: debugSlideIn var(--short-duration) ease-out forwards;
}

.start > .mainLayout > .debugContainer.debugSlideOut {
  animation: debugSlideOut var(--short-duration) ease-in forwards;
}

.start > .mainLayout > .debugContainer > .version, .start > .mainLayout > .debugContainer > .line {
  background: linear-gradient(0deg, #0000001a, #0000);
  border-bottom: 1px solid #ffffff0d;
  margin-bottom: 2px;
}

.start > .mainLayout > .debugContainer > .version {
  color: #fff;
  font: 14px var(--regular-font);
  align-items: center;
  padding: 5px;
}

.start > .mainLayout > .debugContainer > .version > svg {
  fill: #fff;
}

.start > .mainLayout > .debugContainer > .line {
  color: #949494;
  align-items: center;
  padding: 2px 5px;
}

.start > .mainLayout > .debugContainer > .line > .status {
  background: #949494 linear-gradient(0deg, #0003 0%, #fff0 20% 80%, #fff3 100%);
  border-radius: 50%;
  width: 20px;
  height: 20px;
}

.start > .mainLayout > .debugContainer > .line > .status > .queryLoader {
  border-width: 3px;
  width: 20px;
  height: 20px;
}

.start > .mainLayout > .debugContainer > .line.inProgress {
  color: var(--warning);
}

.start > .mainLayout > .debugContainer > .line.inProgress > .status {
  background-color: var(--warning);
}

.start > .mainLayout > .debugContainer > .line.success {
  color: var(--success);
}

.start > .mainLayout > .debugContainer > .line.success > .status {
  background-color: var(--success);
}

.start > .mainLayout > .debugContainer > .line.error {
  color: var(--error);
}

.start > .mainLayout > .debugContainer > .line.error > .status {
  background-color: var(--error);
}

.start > .mainLayout > .debugContainer > .line > .label, .start > .mainLayout > .debugContainer > .line > .status {
  color: inherit;
  font: 14px var(--regular-font);
  align-items: center;
}

.start > .mainLayout > .debugContainer > .line > .duration {
  margin-right: 5px;
  font: 12px monospace;
}

.start > .mainLayout > .debugContainer > .line > .label {
  margin-right: auto;
}

.start > .mainLayout > .progressBar {
  background-color: var(--text-foreground-1);
  transform-origin: 0;
  height: 4px;
  transition: transform var(--short-duration) linear;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scaleX(0);
}

.start > .mainLayout > .loaderAnimation {
  width: 100%;
  height: 100%;
}

.start > .footerVersion {
  color: var(--text-foreground-1);
  font: 16px var(--regular-font);
  z-index: 1000;
  position: absolute;
  bottom: 10px;
  right: 10px;
}

.start > .startLoader {
  z-index: 500;
  margin-top: -50px;
  margin-left: -50px;
  position: absolute;
  top: 50%;
  left: 50%;
}