/* VimeoPlayer - v4.43.30 - 2025-09-11 */
@keyframes buffer{100%{transform:translateX(-10px)}}@-moz-keyframes bufferLeft{0%{left:0}100%{left:-10px}}@keyframes throb{0%,100%{background-color:#555}50%{background-color:#444}}@keyframes wiggle{0%{transform:translateY(10px)}20%{transform:translateY(0)}40%,80%{transform:translateX(8px)}60%{transform:translateX(-8px)}100%{transform:translateX(0)}}@keyframes pulse{50%{transform:scale(.9)}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{stroke-dasharray:89,200;stroke-dashoffset:-135px}}@keyframes rotate{100%{transform:rotate(360deg)}}@keyframes scaleAnimation{0%{transform:scale(.9,.9)}100%{transform:scale(1,1)}}:fullscreen-ancestor>:not(:fullscreen-ancestor):not(:fullscreen){display:none!important}body:not(.showfocus) .player a,body:not(.showfocus) .player button,body:not(.showfocus) .player div,body:not(.showfocus) .player li,body:not(.showfocus) .player span,body:not(.showfocus) .player svg{outline:0!important}body:not(.showfocus) .player input{outline:0}.vp-center{display:flex;align-items:center;justify-content:center}.vp-placeholder{opacity:1;transition:opacity 125ms ease-out .1s}.vp-placeholder-fadeout{opacity:0}.player{position:relative;max-height:100%;width:100%;height:100%;margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:auto;color:#fff;line-height:normal;font-family:"Helvetica Neue",Helvetica,Arial!important;font-size:10px;overflow:visible;border-collapse:separate;user-select:none;touch-action:manipulation}.player :focus{outline:2px solid #00adef;outline-offset:2px}.player,.player *,.player ::after,.player ::before{box-sizing:border-box;-webkit-tap-highlight-color:transparent}.player.scrubbing *{cursor:grabbing!important}.player.loading .vp-video-wrapper{opacity:0}.player button{cursor:pointer;font-size:1em}.player button:not(.exclude-global-button-styles),.player input,.player textarea{appearance:none;border:0;padding:0;margin:0;font-family:"Helvetica Neue",Helvetica,Arial;line-height:normal;height:auto;vertical-align:baseline}.player a:active,.player button:active,.player button:not(:focus){outline:0}.player img{border:0}.player a{text-decoration:none}.player .hidden{display:none!important}.player .invisible{opacity:0}.player .cloaked{visibility:hidden}.player .rounded-box{background:rgba(0,0,0,.9);border-radius:.5em}.player .fill{fill:#fff}.player .toggle.off .fill{fill:#fff}.player .toggle.off .stroke{stroke:#fff}.player .stroke{stroke:#fff;fill:none}.player .only-in-fullscreen{display:none!important}.js-player-fullscreen-api .only-in-fullscreen,.js-player-fullscreen:fullscreen .only-in-fullscreen{display:block!important}.player .vp-target{position:absolute;top:0;left:0;width:100%;height:100%;z-index:3}.player.player-ad .vp-target{visibility:hidden}.player .vp-video-wrapper{opacity:1;transition:opacity 125ms ease-out}.player .vp-sr-only{clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;width:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.player .vp-content-area-background,.player .vp-player-ui-container,.player .vp-player-ui-overlays{pointer-events:none;position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden}.player .vp-player-ui-container{z-index:4}.player .vp-player-ui-overlays{z-index:37}.player.player-cursor-hide{cursor:none}.player.grabbable{cursor:move;cursor:grab}.player.grabbing{cursor:move;cursor:grabbing}.player.hide-controls-mode{pointer-events:none}.player.hide-controls-mode video::-webkit-media-controls-start-playback-button{display:none}.player.right-content-area-supported{overflow:hidden}.player.right-content-area-supported>.content-area-sibling-enabled{width:100%;right:0;position:absolute}.player.right-content-area-supported.animating>.content-area-sibling-enabled{transition:width .4s ease-in-out,right .4s ease-in-out}.player.right-content-area-supported.animating>.content-area-sibling-enabled.vp-video-wrapper{transition:width .4s ease-in-out,right .4s ease-in-out,opacity 125ms ease-out}.player.right-content-area-supported.right-content-area-open.app-mini>.content-area-sibling-enabled,.player.right-content-area-supported.right-content-area-open.app-tiny>.content-area-sibling-enabled,.player.right-content-area-supported.right-content-area-open.app-xs>.content-area-sibling-enabled,.player.right-content-area-supported.right-content-area-open.app-xxs>.content-area-sibling-enabled{width:100%;right:0}.player.right-content-area-supported.right-content-area-open.app-sm>.content-area-sibling-enabled{width:50%;right:50%}.player.right-content-area-supported.right-content-area-open.app-md>.content-area-sibling-enabled{width:calc(100% - 400px);right:400px}.player.right-content-area-supported.right-content-area-open.app-lg>.content-area-sibling-enabled{width:calc(100% - 400px);right:400px}.player.right-content-area-supported.right-content-area-open.app-xl>.content-area-sibling-enabled{width:calc(100% - 480px);right:480px}.player.right-content-area-supported.right-content-area-open.app-xxl>.content-area-sibling-enabled{width:calc(100% - 480px);right:480px}.player.right-content-area-supported.right-content-area-open.is-google-bot>.content-area-sibling-enabled{width:100%;right:0}.player .vp-ads-wrapper{position:absolute;top:0;left:0;width:100%;height:100%}.player .vp-ads-wrapper .vp-ads-tag{position:absolute;top:10px;left:10px;height:22px;padding:0 .8em;font-size:1.2em;line-height:2;text-transform:uppercase;border-radius:3px;background:rgba(0,0,0,.9);color:#fff}.player[data-filter] .thumb::after,.player[data-filter] .vp-preview::after,.player[data-filter] .vp-video::after{content:"";display:block;height:100%;width:100%;top:0;left:0;position:absolute;opacity:1;background:linear-gradient(to right,transparent,transparent),radial-gradient(circle,transparent,transparent)}.player[data-filter=aden] .thumb,.player[data-filter=aden] .vp-preview,.player[data-filter=aden] .vp-video{filter:brightness(1.2) contrast(.9) grayscale(0) hue-rotate(-20deg) saturate(.85) sepia(0)}.player[data-filter=aden] .thumb::after,.player[data-filter=aden] .vp-preview::after,.player[data-filter=aden] .vp-video::after{background:linear-gradient(to right,rgba(66,10,14,.2),transparent),radial-gradient(circle,transparent,transparent);mix-blend-mode:darken}.player[data-filter=earlybird] .thumb,.player[data-filter=earlybird] .vp-preview,.player[data-filter=earlybird] .vp-video{filter:brightness(1) contrast(.9) grayscale(0) hue-rotate(0) saturate(1) sepia(.2)}.player[data-filter=earlybird] .thumb::after,.player[data-filter=earlybird] .vp-preview::after,.player[data-filter=earlybird] .vp-video::after{background:linear-gradient(to right,transparent,transparent),radial-gradient(circle,#d0ba8e 20%,#360309 85%,#1d0210 100%);mix-blend-mode:overlay}.player[data-filter=hudson] .thumb,.player[data-filter=hudson] .vp-preview,.player[data-filter=hudson] .vp-video{filter:brightness(1.2) contrast(.9) grayscale(0) hue-rotate(0) saturate(1.1) sepia(0)}.player[data-filter=hudson] .thumb::after,.player[data-filter=hudson] .vp-preview::after,.player[data-filter=hudson] .vp-video::after{background:linear-gradient(to right,transparent,transparent),radial-gradient(circle,#a6b1ff 50%,#342134);mix-blend-mode:multiply;opacity:.5}.player[data-filter=inkwell] .thumb,.player[data-filter=inkwell] .vp-preview,.player[data-filter=inkwell] .vp-video{filter:brightness(1.1) contrast(1.1) grayscale(1) hue-rotate(0) saturate(1) sepia(0)}.player[data-filter=inkwell] .thumb::after,.player[data-filter=inkwell] .vp-preview::after,.player[data-filter=inkwell] .vp-video::after{opacity:0}.player[data-filter=mayfair] .thumb,.player[data-filter=mayfair] .vp-preview,.player[data-filter=mayfair] .vp-video{filter:brightness(1) contrast(1.1) grayscale(0) hue-rotate(0) saturate(1.1) sepia(0)}.player[data-filter=mayfair] .thumb::after,.player[data-filter=mayfair] .vp-preview::after,.player[data-filter=mayfair] .vp-video::after{background:linear-gradient(to right,transparent,transparent),radial-gradient(circle at 40% 40%,rgba(255,255,255,.8),rgba(255,200,200,.6),#111 60%);mix-blend-mode:overlay;opacity:.4}.player[data-filter=toaster] .thumb,.player[data-filter=toaster] .vp-preview,.player[data-filter=toaster] .vp-video{filter:brightness(.9) contrast(1.5) grayscale(0) hue-rotate(0) saturate(1) sepia(0)}.player[data-filter=toaster] .thumb::after,.player[data-filter=toaster] .vp-preview::after,.player[data-filter=toaster] .vp-video::after{background:linear-gradient(to right,transparent,transparent),radial-gradient(circle,#804e0f,#3b003b);mix-blend-mode:screen}.player[data-filter=ascii] .thumb{filter:brightness(1) contrast(2) grayscale(0) hue-rotate(0) saturate(1) sepia(0)}.player[data-filter=ascii] .thumb::after{background-color:#0f0;mix-blend-mode:darken}.player[data-filter=ascii] .vp-captions{transition:none}.player[data-filter=ascii] .vp-captions>span{font-family:monospace;color:#0f0;border-radius:0;background:#000;padding:0 .5em}.player .vp-video-wrapper{position:absolute;top:0;left:0;bottom:0;right:0;background-color:#000;overflow:hidden}.player .vp-video-wrapper.transparent{background-color:transparent}.player .vp-video-wrapper.native-controls{z-index:25}.player .vp-video-wrapper .snapshot{position:absolute;z-index:1}.player .vp-video-wrapper .vp-video{position:absolute;top:0;left:0;bottom:0;right:0;transition:filter .25s,opacity .25s}.player .vp-video-wrapper .vp-video::after{transition:all .25s}.player .vp-video-wrapper .vp-telecine{position:absolute;top:0;left:0;bottom:0;right:0;transition:opacity .25s}.player .vp-video-wrapper .vp-telecine.hide-webkit-controls video::-webkit-media-controls-play-button{display:none}.player .vp-video-wrapper .vp-telecine.hide-webkit-controls video::-webkit-media-controls-start-playback-button{display:none}.player .vp-video-wrapper .vp-telecine.hide-webkit-controls video:state(webkit-media-controls-play-button){display:none}.player .vp-video-wrapper object,.player .vp-video-wrapper video{width:100%;height:100%}.player .vp-video-wrapper .vp-telecine-cover video{object-fit:cover}.player .vp-video-wrapper pre{font-family:monospace!important}.js-player-fullscreen-api,.js-player-fullscreen:fullscreen{background-color:#000!important}.js-player-fullscreen-api .vp-video-wrapper,.js-player-fullscreen:fullscreen .vp-video-wrapper{background-color:transparent!important}.js-player-fullscreen-api .vp-canvas-effect,.js-player-fullscreen:fullscreen .vp-canvas-effect{display:none}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.SideDock_module_root__5460dbdc {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px;
  padding-top: 0;
  z-index: 19;
  /*
      Prevents a flicker on Safari when other elements are animating
      @see https://stackoverflow.com/questions/15751012/
      css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
  */
  transform: translate3d(0, 0, 0);
  /* Required so VOD button stays right aligned when tooltips displayed */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.SideDock_module_root__5460dbdc,
.SideDock_module_root__5460dbdc .SideDock_module_sidedockInner__5460dbdc {
  transition: opacity 250ms ease-out;
}
.SideDock_module_root__5460dbdc button {
  margin: 8px;
  font-family: inherit;
  border-radius: 4px;
  color: #fff;
  border: 0;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  background-color: rgba(0, 0, 0, 0.9);
  transition: background-color 40ms;
  margin-right: 0;
  background-color: var(--color-one-opacity-ninety);
  color: var(--color-three);
  /* Prevent icons from initiating clicks. Causes issues with tooltip display */
}
.SideDock_module_root__5460dbdc button svg {
  pointer-events: none;
}
.SideDock_module_root__5460dbdc button path {
  fill: var(--color-three);
}
.SideDock_module_root__5460dbdc button,
.SideDock_module_root__5460dbdc label {
  margin-top: 8px;
  margin-bottom: 0;
}
.SideDock_module_root__5460dbdc.SideDock_module_visible__5460dbdc button {
  pointer-events: auto;
}
.SideDock_module_root__5460dbdc button:not([data-vod-button=true]) {
  /* Match default button padding on Chrome. Required for iOS */
  padding: 1px 6px;
}
.SideDock_module_root__5460dbdc button:focus {
  outline: none;
}
.SideDock_module_root__5460dbdc button:hover:not(:active) {
  background-color: var(--color-two);
  color: var(--color-two-monochrome);
  border: none;
}
.SideDock_module_root__5460dbdc button:hover:not(:active) path {
  fill: var(--color-two-monochrome);
}
.SideDock_module_root__5460dbdc.SideDock_module_fullscreen__5460dbdc {
  font-size: 11px;
}
.SideDock_module_root__5460dbdc.SideDock_module_outroVisible__5460dbdc button:not(:hover) {
  opacity: 0.65;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compliation is separate from the existing SASS build pipeline */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.LabeledButton_module_labeledButton__a4450693 {
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  font-size: 1.2em;
  padding: 0 1em;
  height: 3em;
  line-height: 3em;
  border-radius: 3px;
  transition: opacity 150ms ease-out, transform 150ms ease-out;
  margin: 8px;
  font-family: inherit;
  border-radius: 4px;
  color: #fff;
  border: 0;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  border-radius: 0.25rem;
  padding: 0.8em 1.2em;
  line-height: 1.88rem;
  height: 2rem;
  font-size: 1.2em;
  font-weight: bold;
  margin-right: 0;
  align-items: center;
  pointer-events: none;
  white-space: nowrap;
}

.LabeledButton_module_box__a4450693 {
  display: flex;
  justify-content: flex-end;
  transition: transform 150ms ease-out;
}
.LabeledButton_module_box__a4450693:nth-child(3) {
  transition-delay: 50ms;
}
.LabeledButton_module_box__a4450693:nth-child(4) {
  transition-delay: 100ms;
}
.ShareButton_module_shareIcon__e4957da4 {
  transform: translateX(-1px);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compliation is separate from the existing SASS build pipeline */
.VODButton_module_vodButtonContainer__33b65469 {
  display: flex;
  justify-content: end;
}

.VODButton_module_vodButton__33b65469 {
  padding: 0 4em 0 0.8em;
  /* Font styles to match designs */
}
.VODButton_module_vodButton__33b65469 span {
  font-size: 0.88rem;
  font-weight: bold;
}
.VODButton_module_vodButton__33b65469 .VODButton_module_icon__33b65469 {
  position: absolute;
  right: 0.8em;
}
.VODButton_module_vodButton__33b65469[data-vod-purchased="1"][data-vod-expiring="1"] {
  animation: VODButton_module_pulse__33b65469 1s infinite;
}
.VODButton_module_vodButton__33b65469 .VODButton_module_expiring__33b65469 {
  background: rgba(188, 23, 30, 0.75);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.AIButton_module_icon__e739ab41 {
  transform: scale(1.4);
}
.AIButton_module_icon__e739ab41 [data-shape=largeStar] {
  transform-origin: center;
  transform: rotateZ(0deg);
  transition-property: none;
  transition-duration: var(--shimmer-speed-in);
}

.AIButton_module_button__e739ab41 {
  background: radial-gradient(#82ffeb 0%, #17d5ff 30%, #0ba1ff 45%, #9e00ff 75%, rgba(157, 0, 255, 0) 100%);
  background-repeat: no-repeat;
  background-position: 175% 175%;
  background-size: 225% 225%;
}
.AIButton_module_button__e739ab41.AIButton_module_transitionIn__e739ab41 {
  background-position: 80% 80%;
  transition-timing-function: cubic-bezier(0.17, 0, 0.2, 1);
  transition-duration: var(--shimmer-speed-in);
}
.AIButton_module_button__e739ab41.AIButton_module_transitionIn__e739ab41 [data-shape=largeStar] {
  transform: rotateZ(90deg) translateX(1px);
  transition-property: transform;
}
.AIButton_module_button__e739ab41.AIButton_module_transitionOut__e739ab41 {
  background-position: -65% -65%;
  transition-timing-function: cubic-bezier(0.5, 0, 0.83, 1);
  transition-duration: var(--shimmer-speed-out);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compliation is separate from the existing SASS build pipeline */
.DebugPanel_module_root__b1b6d642 {
  position: absolute;
  z-index: 36;
  width: max-content;
  min-width: 300px;
  max-width: 100%;
  max-height: calc(100% - 10px);
  padding: 10px;
  padding-bottom: 0;
  margin: 10px 0 0 10px;
  user-select: text;
  font-size: 1.2em;
  top: 0;
  pointer-events: all;
  overflow: auto;
}
.DebugPanel_module_root__b1b6d642 p {
  /* Some on site pages can be agressive about p margins */
  margin: 0.1em 0;
}
.DebugPanel_module_root__b1b6d642 p:first-child {
  margin-top: 0;
}
.DebugPanel_module_root__b1b6d642 .DebugPanel_module_buttonWrapper__b1b6d642 {
  position: sticky;
  width: 100%;
  bottom: 0;
  background-color: black;
  display: flex;
  align-items: center;
  z-index: 1;
  padding-bottom: 10px;
}

.DebugPanel_module_root__b1b6d642.DebugPanel_module_smallPlayer__b1b6d642 {
  background: black;
}

.DebugPanel_module_closeButton__b1b6d642 {
  position: absolute;
  right: 10px;
  top: 10px;
  background: none;
}
.DebugPanel_module_closeButton__b1b6d642 svg {
  width: 1.2em;
  height: 1.2em;
}
.DebugPanel_module_closeButton__b1b6d642 svg path {
  fill: #fff;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.CopyDebugButton_module_button__2cd3eba3 {
  border: none;
  padding: 3px;
  border-radius: 3px;
  margin-left: 5px;
  display: inline-block;
  background-color: var(--color-two);
  color: var(--color-two-monochrome);
}
.CopyDebugButton_module_button__2cd3eba3:hover:not(:active) {
  border: none;
}
@charset "UTF-8";
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
.DebugValues_module_values__54d9bb7b {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.DebugValues_module_values__54d9bb7b div {
  display: inline-flex;
  padding: 0;
  height: 16px;
  width: max-content;
  margin: 0;
}
.DebugValues_module_values__54d9bb7b dd {
  font-weight: bold;
  letter-spacing: 0.02em;
  color: #fff;
  position: relative;
  margin-inline-start: 4px;
  padding: 0;
}

.DebugValues_module_clipId__54d9bb7b {
  cursor: pointer;
}
.DebugValues_module_clipId__54d9bb7b:hover {
  text-decoration: underline;
}

.DebugValues_module_bandwidthMinMax__54d9bb7b {
  font-size: 0.8em;
  font-weight: normal;
}

.DebugValues_module_bandwidthMin__54d9bb7b,
.DebugValues_module_bandwidthMax__54d9bb7b {
  position: relative;
  padding-left: 10px;
}
.DebugValues_module_bandwidthMin__54d9bb7b::before,
.DebugValues_module_bandwidthMax__54d9bb7b::before {
  display: block;
  position: absolute;
  left: 2px;
  font-size: 0.8em;
  top: 3px;
}

.DebugValues_module_bandwidthMin__54d9bb7b::before {
  content: "▼"/"Minimum bandwidth";
}

.DebugValues_module_bandwidthMax__54d9bb7b::before {
  content: "▲"/"Maximum bandwidth";
}

.DebugValues_module_timeSeries__54d9bb7b {
  margin-top: 6px;
}

.DebugValues_module_sessionId__54d9bb7b,
.DebugValues_module_payloadId__54d9bb7b {
  font-size: 0.8em;
  font-weight: bold;
  overflow-wrap: break-word;
}
.BandwidthSeriesDisplay_module_marker__e795ff85:hover {
  cursor: pointer;
  stroke-width: 3;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Badge_module_badge__43ce2278 {
  display: block;
  float: left;
  position: relative;
  z-index: 13;
  padding: 0;
  margin: 0;
  pointer-events: inherit;
}

.Badge_module_badgeLink__43ce2278 {
  display: block;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.TitleTags_module_tagWrapper__20a17f3b {
  display: inline-block;
}

.TitleTags_module_tag__20a17f3b {
  background: var(--color-one-monochrome-opacity-twenty-eighty);
  color: #fff;
  font-weight: bold;
  display: inline-block;
  border-radius: 2px;
  text-shadow: none;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  letter-spacing: 0.4px;
  font-size: 10px;
  line-height: 1.2em;
  max-height: 1.6em;
  padding: 0.2em 0.4em;
  margin-top: -0.2em;
}
.player.player-md .TitleTags_module_tag__20a17f3b {
  margin-top: -0.3333333333em;
}
.player.player-lg .TitleTags_module_tag__20a17f3b {
  margin-top: -0.3333333333em;
}
.player.player-xl .TitleTags_module_tag__20a17f3b {
  margin-top: -0.3333333333em;
}
.player.player-xxl .TitleTags_module_tag__20a17f3b {
  margin-top: -0.3333333333em;
}
.player.player-xl .TitleTags_module_tag__20a17f3b {
  font-size: 12px;
  border-radius: 4px;
  padding: 0.3333333333em 0.6666666667em;
  line-height: 1.3333333333em;
  max-height: 2em;
  margin-left: 0.6666666667em;
}
.player.player-xxl .TitleTags_module_tag__20a17f3b {
  font-size: 12px;
  border-radius: 4px;
  padding: 0.3333333333em 0.6666666667em;
  line-height: 1.3333333333em;
  max-height: 2em;
  margin-left: 0.6666666667em;
}
.TitleTags_module_tag__20a17f3b.TitleTags_module_dolbyVisionTag__20a17f3b {
  padding: 0.4em;
}
.TitleTags_module_tag__20a17f3b.TitleTags_module_dolbyVisionTag__20a17f3b svg {
  height: 1em;
}
.player.player-xl .TitleTags_module_tag__20a17f3b.TitleTags_module_dolbyVisionTag__20a17f3b svg {
  height: 0.8333333333em;
}
.player.player-xxl .TitleTags_module_tag__20a17f3b.TitleTags_module_dolbyVisionTag__20a17f3b svg {
  height: 0.8333333333em;
}

.TitleTags_module_tag__20a17f3b ~ .TitleTags_module_tag__20a17f3b {
  margin-left: 0.4em;
}

a.TitleTags_module_aiTag__20a17f3b[data-ai-content-tag=true] {
  color: #fff;
}
a.TitleTags_module_aiTag__20a17f3b[data-ai-content-tag=true]:hover {
  background: rgba(0, 0, 0, 0.2);
  color: var(--color-two-monochrome);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.player.mobile.Title_module_noFullscreenApiSupport__2159b884 .Title_module_portrait__2159b884 {
  display: none;
}

.player.mobile.Title_module_noFullscreenSupport__2159b884 .Title_module_portrait__2159b884 {
  display: none;
}

.Title_module_jsPlayerFullscreen__2159b884:not(:fullscreen) .player.mobile .Title_module_portrait__2159b884, .player.mobile:not(:fullscreen) .Title_module_portrait__2159b884 {
  display: none;
}

.player.fullscreen .Title_module_title__2159b884 {
  margin-right: 4em;
}

.Title_module_title__2159b884 {
  display: flex;
  position: relative;
  padding: 8px;
  z-index: 12;
  transition: opacity 250ms ease-out;
  margin-right: 4.4em;
  pointer-events: auto;
  /*
      Prevents a flicker on Safari when other elements are animating
      @see https://stackoverflow.com/questions/15751012/
      css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
  */
  transform: translate3d(0, 0, 0);
}

.Title_module_jsPlayerFullscreen__2159b884:fullscreen .Title_module_title__2159b884,
.Title_module_jsPlayerFullscreenApi__2159b884 .Title_module_title__2159b884 {
  font-size: 11px;
}

.Title_module_portrait__2159b884 {
  width: 3.6em;
  height: 3.6em;
  margin: 0 0.4em 0 0;
  flex: 1 0 auto;
  pointer-events: inherit;
}
.Title_module_portrait__2159b884 .Title_module_portraitLink__2159b884 {
  display: block;
  width: 100%;
  height: 100%;
}
.player.player-xs .Title_module_portrait__2159b884 {
  width: 4.8em;
  height: 4.8em;
}
.player.player-sm .Title_module_portrait__2159b884 {
  width: 4.8em;
  height: 4.8em;
}
.player.player-md .Title_module_portrait__2159b884 {
  width: 4.8em;
  height: 4.8em;
}
.player.player-lg .Title_module_portrait__2159b884 {
  width: 4.8em;
  height: 4.8em;
}
.player.player-xl .Title_module_portrait__2159b884 {
  width: 4.8em;
  height: 4.8em;
}
.player.player-xxl .Title_module_portrait__2159b884 {
  width: 4.8em;
  height: 4.8em;
}
.player.player-sm .Title_module_portrait__2159b884 {
  width: 5.6em;
  height: 5.6em;
}
.player.player-md .Title_module_portrait__2159b884 {
  width: 5.6em;
  height: 5.6em;
}
.player.player-lg .Title_module_portrait__2159b884 {
  width: 5.6em;
  height: 5.6em;
}
.player.player-xl .Title_module_portrait__2159b884 {
  width: 5.6em;
  height: 5.6em;
}
.player.player-xxl .Title_module_portrait__2159b884 {
  width: 5.6em;
  height: 5.6em;
}
.Title_module_portrait__2159b884 img {
  border: 2px solid;
  border-color: var(--color-one-opacity-ninety);
  width: 3.6em;
  height: 3.6em;
  border-radius: 50%;
}
.Title_module_portrait__2159b884 img:hover {
  border-color: var(--color-two);
}
.player.player-xs .Title_module_portrait__2159b884 img {
  width: 4.8em;
  height: 4.8em;
}
.player.player-sm .Title_module_portrait__2159b884 img {
  width: 4.8em;
  height: 4.8em;
}
.player.player-md .Title_module_portrait__2159b884 img {
  width: 4.8em;
  height: 4.8em;
}
.player.player-lg .Title_module_portrait__2159b884 img {
  width: 4.8em;
  height: 4.8em;
}
.player.player-xl .Title_module_portrait__2159b884 img {
  width: 4.8em;
  height: 4.8em;
}
.player.player-xxl .Title_module_portrait__2159b884 img {
  width: 4.8em;
  height: 4.8em;
}
.player.player-sm .Title_module_portrait__2159b884 img {
  width: 5.6em;
  height: 5.6em;
}
.player.player-md .Title_module_portrait__2159b884 img {
  width: 5.6em;
  height: 5.6em;
}
.player.player-lg .Title_module_portrait__2159b884 img {
  width: 5.6em;
  height: 5.6em;
}
.player.player-xl .Title_module_portrait__2159b884 img {
  width: 5.6em;
  height: 5.6em;
}
.player.player-xxl .Title_module_portrait__2159b884 img {
  width: 5.6em;
  height: 5.6em;
}

.Title_module_header__2159b884 {
  margin: 0;
  display: flex;
  flex-flow: row nowrap;
}

.Title_module_headers__2159b884 {
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-start;
  flex: 1 1 100%;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}
.Title_module_headers__2159b884 * {
  pointer-events: inherit;
}

span.Title_module_titleText__2159b884 {
  font-size: 14px;
  letter-spacing: -0.2px;
}
.player.player-md span.Title_module_titleText__2159b884 {
  font-size: 18px;
  letter-spacing: -0.6px;
}
.player.player-lg span.Title_module_titleText__2159b884 {
  font-size: 18px;
  letter-spacing: -0.6px;
}
.player.player-xl span.Title_module_titleText__2159b884 {
  font-size: 18px;
  letter-spacing: -0.6px;
}
.player.player-xxl span.Title_module_titleText__2159b884 {
  font-size: 18px;
  letter-spacing: -0.6px;
}
.player.player-xl span.Title_module_titleText__2159b884 {
  font-size: 24px;
  letter-spacing: -0.8px;
}
.player.player-xxl span.Title_module_titleText__2159b884 {
  font-size: 24px;
  letter-spacing: -0.8px;
}

.Title_module_titleWrapper__2159b884 {
  display: block;
  position: relative;
  background-color: var(--color-one-opacity-ninety);
  color: var(--color-three);
  border-radius: 4px;
  margin-bottom: 0.4em;
  height: auto;
}
.Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884 {
  display: inline-block;
  vertical-align: middle;
  border-radius: 4px;
  font-size: 14px;
  padding: 0.2857142857em 0.5714285714em;
  line-height: 20px;
  height: 100%;
}
.player.player-md .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884 {
  font-size: 18px;
  padding: 0.2222222222em 0.4444444444em;
  line-height: 24px;
}
.player.player-lg .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884 {
  font-size: 18px;
  padding: 0.2222222222em 0.4444444444em;
  line-height: 24px;
}
.player.player-xl .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884 {
  font-size: 18px;
  padding: 0.2222222222em 0.4444444444em;
  line-height: 24px;
}
.player.player-xxl .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884 {
  font-size: 18px;
  padding: 0.2222222222em 0.4444444444em;
  line-height: 24px;
}
.player.player-xl .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884 {
  font-size: 24px;
  padding: 0.1666666667em 0.5em;
  line-height: 32px;
}
.player.player-xxl .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884 {
  font-size: 24px;
  padding: 0.1666666667em 0.5em;
  line-height: 32px;
}
.Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884[data-title-tags=true] span.Title_module_titleText__2159b884 {
  margin-right: 0.5714285714em;
}
.player.player-md .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884[data-title-tags=true] span.Title_module_titleText__2159b884 {
  margin-right: 0.4444444444em;
}
.player.player-lg .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884[data-title-tags=true] span.Title_module_titleText__2159b884 {
  margin-right: 0.4444444444em;
}
.player.player-xl .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884[data-title-tags=true] span.Title_module_titleText__2159b884 {
  margin-right: 0.4444444444em;
}
.player.player-xxl .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884[data-title-tags=true] span.Title_module_titleText__2159b884 {
  margin-right: 0.4444444444em;
}
.player.player-xl .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884[data-title-tags=true] span.Title_module_titleText__2159b884 {
  margin-right: 0.3333333333em;
}
.player.player-xxl .Title_module_titleWrapper__2159b884 .Title_module_textAndTagsWrapper__2159b884[data-title-tags=true] span.Title_module_titleText__2159b884 {
  margin-right: 0.3333333333em;
}
.Title_module_titleWrapper__2159b884:hover {
  background-color: var(--color-two);
}
.Title_module_titleWrapper__2159b884:hover .Title_module_textAndTagsWrapper__2159b884 {
  color: var(--color-two-monochrome);
}
.Title_module_titleWrapper__2159b884:hover .Title_module_textAndTagsWrapper__2159b884 span[id=title-text] {
  color: var(--color-two-monochrome);
}
.Title_module_titleWrapper__2159b884:hover .Title_module_titleTag__2159b884 {
  background: var(--color-two-monochrome-opacity-twenty-eighty);
}

a.Title_module_titleLink__2159b884 {
  position: absolute;
  width: 100%;
  height: 100%;
}

a.Title_module_subtitle__2159b884 {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  background-color: var(--color-one-opacity-ninety);
  color: var(--color-three);
  border-radius: 4px;
  font-size: 12px;
  gap: 0.3333333333em;
  line-height: 16px;
  padding: 0.3333333333em 0.6666666667em;
  margin: 0;
}
.player.player-xl a.Title_module_subtitle__2159b884 {
  font-size: 14px;
  gap: 0.2857142857em;
  line-height: 20px;
  letter-spacing: -0.2px;
  padding: 0.2857142857em 0.8571428571em;
}
.player.player-xxl a.Title_module_subtitle__2159b884 {
  font-size: 14px;
  gap: 0.2857142857em;
  line-height: 20px;
  letter-spacing: -0.2px;
  padding: 0.2857142857em 0.8571428571em;
}
a.Title_module_subtitle__2159b884 span {
  color: var(--color-three);
  font-size: inherit;
}
a.Title_module_subtitle__2159b884:hover {
  background-color: var(--color-two);
}
a.Title_module_subtitle__2159b884:hover span {
  color: var(--color-two-monochrome);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Cards_module_cardsWrapper__19f4ca28 {
  z-index: 11;
  position: absolute;
  pointer-events: all;
  overflow: visible;
  top: 1em;
  right: 1em;
  display: flex;
  transition-property: transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.18, 0.89, 0.32, 1.2);
  width: 320px;
  height: 0;
  transform: translateX(0);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Card_module_card__924d992f {
  border-radius: 0.8em;
  max-width: 248px;
  position: absolute;
  top: 0;
  right: 0;
  height: 72px;
  opacity: 0;
  cursor: pointer;
  transform: translate(100%, 0);
  transition: transform 250ms cubic-bezier(0.18, 0.89, 0.32, 1.2), opacity 200ms;
  background: var(--color-one-opacity-ninety);
}
.Card_module_card__924d992f:hover {
  background: var(--color-one);
  box-shadow: rgba(0, 0, 0, 0.17) 0 0.5rem 1rem -0.5rem, rgba(0, 0, 0, 0.33) 0 0 0.25rem -0.06rem;
}

.Card_module_card__924d992f:not(.Card_module_active__924d992f) {
  pointer-events: none;
}

.Card_module_card__924d992f.Card_module_active__924d992f {
  opacity: 1;
  transform: translate(0, 0);
}

.Card_module_card__924d992f.Card_module_hasThumbnail__924d992f {
  max-width: 320px;
}

.Card_module_card__924d992f.Card_module_vertical__924d992f {
  max-width: 208px;
}

.Card_module_inner__924d992f {
  display: flex;
  height: 100%;
  overflow: hidden;
  border-radius: 0.8em;
}

.Card_module_imageWrap__924d992f {
  display: none;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
}

.Card_module_hasThumbnail__924d992f .Card_module_imageWrap__924d992f {
  display: flex;
}

.Card_module_image__924d992f {
  height: 100%;
  width: auto;
}

.Card_module_body__924d992f {
  width: 248px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.4em 1.6em;
}

.Card_module_text__924d992f {
  margin: 0;
  user-select: none;
}

.Card_module_text__924d992f.Card_module_title__924d992f {
  color: var(--color-three);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.2px;
}

.Card_module_text__924d992f.Card_module_detail__924d992f {
  color: var(--color-three);
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.5;
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.Card_module_popOutWrapper__924d992f {
  padding: 1em 1em 0 0;
}

.Card_module_popOut__924d992f {
  flex: 0 0 1em;
  width: 1em;
  height: 1em;
}
.Card_module_popOut__924d992f * {
  fill: var(--color-three);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.TinyProgressBar_module_tinyBar__c04d36b1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0.5em;
}
.TinyProgressBar_module_tinyBar__c04d36b1 svg.TinyProgressBar_module_tinyBarSVG__c04d36b1 {
  width: 100%;
  height: 100%;
}

.TinyProgressBar_module_played__c04d36b1 {
  fill: var(--color-two);
}

.TinyProgressBar_module_loaded__c04d36b1 {
  fill: var(--color-one-monochrome-opacity-twenty);
}

.TinyProgressBar_module_bufferPattern__c04d36b1 line {
  stroke: var(--color-two);
}

.TinyProgressBar_module_buffer__c04d36b1,
.TinyProgressBar_module_loaded__c04d36b1,
.TinyProgressBar_module_played__c04d36b1 {
  position: absolute;
  border: 0.1em solid transparent;
  height: 100%;
  background-clip: padding-box;
}

.TinyProgressBar_module_buffer__c04d36b1 {
  animation: TinyProgressBar_module_buffer__c04d36b1 250ms linear infinite;
}

@keyframes TinyProgressBar_module_buffer__c04d36b1 {
  100% {
    transform: translateX(-10px);
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PlayButton_module_playButtonWrapper__dfb7bfee {
  transition: width 250ms ease-in-out, margin 250ms ease-in-out;
  width: 5.6em;
  height: 3.2em;
  margin: 0 0.8em 0 0;
  pointer-events: all;
}
.player.player-xl .PlayButton_module_playButtonWrapper__dfb7bfee {
  height: 4em;
  width: 6.4em;
}
.player.player-xxl .PlayButton_module_playButtonWrapper__dfb7bfee {
  height: 4em;
  width: 6.4em;
}
.PlayButton_module_playButtonWrapper__dfb7bfee.PlayButton_module_center__dfb7bfee {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.PlayButton_module_playButtonWrapper__dfb7bfee.PlayButton_module_trailer__dfb7bfee {
  width: 14.5em;
  height: 4em;
}
.player.player-xl .PlayButton_module_playButtonWrapper__dfb7bfee.PlayButton_module_trailer__dfb7bfee {
  height: 4.8em;
  width: 15.8em;
}
.player.player-xxl .PlayButton_module_playButtonWrapper__dfb7bfee.PlayButton_module_trailer__dfb7bfee {
  height: 4.8em;
  width: 15.8em;
}
.PlayButton_module_playButtonWrapper__dfb7bfee.PlayButton_module_progressExpanded__dfb7bfee {
  width: 0;
  margin: 0;
}
.player.player-xl .PlayButton_module_playButtonWrapper__dfb7bfee.PlayButton_module_progressExpanded__dfb7bfee {
  width: 0;
  margin: 0;
}
.player.player-xxl .PlayButton_module_playButtonWrapper__dfb7bfee.PlayButton_module_progressExpanded__dfb7bfee {
  width: 0;
  margin: 0;
}

.PlayButton_module_playButton__dfb7bfee {
  margin: 8px;
  font-family: inherit;
  border-radius: 4px;
  color: #fff;
  border: 0;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
  background-color: rgba(0, 0, 0, 0.9);
  width: 5.6em;
  height: 3.2em;
  color: #fff;
  position: relative;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  appearance: none;
  z-index: 23;
  background-color: var(--color-one-opacity-ninety);
  /*
      Prevents a flicker on Safari when other elements are animating
      @see https://stackoverflow.com/questions/15751012/
      css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
  */
  transform: translate3d(0, 0, 0);
  transition: opacity 250ms ease-out, background-color 40ms, color 40ms, width 250ms ease-in-out;
}
.player.player-xl .PlayButton_module_playButton__dfb7bfee {
  height: 4em;
  width: 6.4em;
}
.player.player-xxl .PlayButton_module_playButton__dfb7bfee {
  height: 4em;
  width: 6.4em;
}
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_playIcon__dfb7bfee,
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_pauseIcon__dfb7bfee,
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_replayIcon__dfb7bfee,
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_trailerIcon__dfb7bfee {
  margin: 0;
}
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_playIcon__dfb7bfee path,
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_pauseIcon__dfb7bfee path,
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_replayIcon__dfb7bfee path,
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_trailerIcon__dfb7bfee path {
  fill: var(--color-three);
}
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_playIcon__dfb7bfee,
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_pauseIcon__dfb7bfee {
  width: 100%;
  min-height: auto;
  height: 2.4em;
}
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_replayIcon__dfb7bfee {
  width: 2em;
  height: 2em;
  transform: scaleX(-1);
}
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_trailerIcon__dfb7bfee {
  margin-right: 1.2em;
  width: 1.4em;
  height: 1.6em;
  min-width: unset;
}
.PlayButton_module_playButton__dfb7bfee.PlayButton_module_trailer__dfb7bfee {
  display: flex;
  justify-content: center;
  width: 14.5em;
  height: 4em;
  padding: 0.8em 1.6em 0.8em 1.2em;
  border-radius: 4px;
}
.PlayButton_module_playButton__dfb7bfee.PlayButton_module_trailer__dfb7bfee > span {
  overflow: visible;
}
.player.player-xl .PlayButton_module_playButton__dfb7bfee.PlayButton_module_trailer__dfb7bfee {
  height: 4.8em;
  width: 15.8em;
  left: 1.6em;
  padding: 1.2em 1.6em 1.2em 1.2em;
  border-radius: 8px;
}
.player.player-xxl .PlayButton_module_playButton__dfb7bfee.PlayButton_module_trailer__dfb7bfee {
  height: 4.8em;
  width: 15.8em;
  left: 1.6em;
  padding: 1.2em 1.6em 1.2em 1.2em;
  border-radius: 8px;
}
.PlayButton_module_playButton__dfb7bfee.PlayButton_module_progressExpanded__dfb7bfee {
  width: 0;
  pointer-events: none;
}
.PlayButton_module_playButton__dfb7bfee .PlayButton_module_text__dfb7bfee {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 1.7142857143em;
  font-size: 14px;
  font-weight: bold;
  color: var(--color-three);
}
.player.player-xl .PlayButton_module_playButton__dfb7bfee .PlayButton_module_text__dfb7bfee {
  width: 6.125em;
  font-size: 16px;
}
.player.player-xxl .PlayButton_module_playButton__dfb7bfee .PlayButton_module_text__dfb7bfee {
  width: 6.125em;
  font-size: 16px;
}
@media (hover: hover) {
  .PlayButton_module_playButton__dfb7bfee:hover {
    background-color: var(--color-two);
  }
  .PlayButton_module_playButton__dfb7bfee:hover .PlayButton_module_playIcon__dfb7bfee path,
  .PlayButton_module_playButton__dfb7bfee:hover .PlayButton_module_pauseIcon__dfb7bfee path,
  .PlayButton_module_playButton__dfb7bfee:hover .PlayButton_module_replayIcon__dfb7bfee path,
  .PlayButton_module_playButton__dfb7bfee:hover .PlayButton_module_trailerIcon__dfb7bfee path {
    fill: var(--color-two-monochrome);
  }
  .PlayButton_module_playButton__dfb7bfee:hover .PlayButton_module_text__dfb7bfee {
    color: var(--color-two-monochrome);
  }
  .PlayButton_module_playButton__dfb7bfee:hover [data-tiny-played] {
    fill: var(--color-two-monochrome);
  }
  .PlayButton_module_playButton__dfb7bfee:hover [data-tiny-loaded] {
    fill: var(--color-two-monochrome-opacity-twenty);
  }
  .PlayButton_module_playButton__dfb7bfee:hover [data-tiny-buffer-pattern] line {
    stroke: var(--color-two-monochrome);
  }
  .PlayButton_module_playButton__dfb7bfee:hover:not(:active) {
    border: none;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.player.no-fullscreen-support .FullscreenButton_module_fullscreen__5b68e32b {
  display: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PrefsButton_module_prefsButton__c0bd4f7c .PrefsButton_module_gearIcon__c0bd4f7c {
  height: 100%;
  transform-origin: 50% 50%;
  transition: transform 450ms cubic-bezier(0.08, 0.82, 0.17, 1);
}
.PrefsButton_module_prefsButton__c0bd4f7c[aria-expanded=true] .PrefsButton_module_gearIcon__c0bd4f7c {
  transform: rotate(30deg);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.VimeoLogoLink_module_vimeoLogo__5f2f7e24 {
  display: flex;
  margin-right: 4px;
  height: 100%;
  z-index: 23;
}
.VimeoLogoLink_module_vimeoLogo__5f2f7e24 svg {
  height: 100%;
  fill: #fff;
  padding: 0.2em;
  width: 24px;
}
.player.player-sm .VimeoLogoLink_module_vimeoLogo__5f2f7e24 svg {
  width: 58px;
}
.player.player-md .VimeoLogoLink_module_vimeoLogo__5f2f7e24 svg {
  width: 58px;
}
.player.player-lg .VimeoLogoLink_module_vimeoLogo__5f2f7e24 svg {
  width: 58px;
}
.player.player-xl .VimeoLogoLink_module_vimeoLogo__5f2f7e24 svg {
  width: 58px;
}
.player.player-xxl .VimeoLogoLink_module_vimeoLogo__5f2f7e24 svg {
  width: 58px;
}
.player.player-xl .VimeoLogoLink_module_vimeoLogo__5f2f7e24 svg {
  width: 76px;
  padding: 0.3em 0.2em;
}
.player.player-xxl .VimeoLogoLink_module_vimeoLogo__5f2f7e24 svg {
  width: 76px;
  padding: 0.3em 0.2em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ControlBarButton_module_controlBarButton__b1b2618a {
  width: 2.4em;
  height: 2.4em;
  padding: 0.2em;
  border-radius: 4px;
  appearance: none;
  border: none;
  transition: none;
  background: none;
  position: relative;
  display: flex;
  pointer-events: inherit;
  z-index: 23;
}
.player.player-xl .ControlBarButton_module_controlBarButton__b1b2618a {
  width: 3.2em;
  height: 3.2em;
  border-radius: 8px;
}
.player.player-xxl .ControlBarButton_module_controlBarButton__b1b2618a {
  width: 3.2em;
  height: 3.2em;
  border-radius: 8px;
}
.ControlBarButton_module_controlBarButton__b1b2618a svg {
  width: 2.4em;
  height: 100%;
}
.ControlBarButton_module_controlBarButton__b1b2618a svg path {
  fill: var(--color-three);
}
.player.player-xl .ControlBarButton_module_controlBarButton__b1b2618a svg {
  width: 3.2em;
}
.player.player-xxl .ControlBarButton_module_controlBarButton__b1b2618a svg {
  width: 3.2em;
}
@media (hover: hover) {
  .ControlBarButton_module_controlBarButton__b1b2618a:hover svg path {
    fill: var(--color-two);
  }
}
.ControlBarButton_module_controlBarButton__b1b2618a:active {
  background: rgba(255, 255, 255, 0.4);
}

span.ControlBarButton_module_controlBarButtonChildren__b1b2618a {
  transform: translate3d(0, 0, 0);
  position: fixed;
  overflow: visible;
}

span.ControlBarButton_module_controlBarButtonTooltip__b1b2618a {
  bottom: calc(1.3333333333em + 4px);
}
.player.player-xl span.ControlBarButton_module_controlBarButtonTooltip__b1b2618a {
  bottom: calc(1.4285714286em + 8px);
}
.player.player-xxl span.ControlBarButton_module_controlBarButtonTooltip__b1b2618a {
  bottom: calc(1.4285714286em + 8px);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ChromecastButton_module_chromecastButton__6a7b0286 {
  position: relative;
  background: none;
  border: none;
  appearance: none;
  --connected-color: var(--color-two);
}
.ChromecastButton_module_chromecastButton__6a7b0286:active {
  outline: 2px solid #00adef !important;
  outline-offset: 2px;
  background: rgba(255, 255, 255, 0.4);
}
@media (max-width: 299px), (max-height: 169px) {
  .ChromecastButton_module_chromecastButton__6a7b0286 {
    display: none;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.CollapseButton_module_collapseButton__a30f190b {
  transform: rotate(180deg);
  transition: transform 250ms ease-in-out;
  z-index: 23;
}
.CollapseButton_module_collapseButton__a30f190b.CollapseButton_module_expanded__a30f190b {
  transform: rotate(0deg);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.CustomLogo_module_customLogo__2ae31b19 {
  margin-left: 0.8em;
}
.player.player-xl .CustomLogo_module_customLogo__2ae31b19 {
  margin-left: 1.6em;
}
.player.player-xxl .CustomLogo_module_customLogo__2ae31b19 {
  margin-left: 1.6em;
}
.CustomLogo_module_customLogo__2ae31b19.CustomLogo_module_link__2ae31b19 {
  pointer-events: all;
}

.CustomLogo_module_customLogoImg__2ae31b19 {
  position: relative;
  z-index: 24;
  vertical-align: bottom;
}

.CustomLogo_module_customLogo__2ae31b19,
.CustomLogo_module_customLogoImg__2ae31b19 {
  transition: max-width 250ms ease-in-out;
  max-height: 3.2em;
}
.player.player-sm .CustomLogo_module_customLogo__2ae31b19,
.player.player-sm .CustomLogo_module_customLogoImg__2ae31b19 {
  max-height: 4em;
}
.player.player-md .CustomLogo_module_customLogo__2ae31b19,
.player.player-md .CustomLogo_module_customLogoImg__2ae31b19 {
  max-height: 4.8em;
}
.player.player-lg .CustomLogo_module_customLogo__2ae31b19,
.player.player-lg .CustomLogo_module_customLogoImg__2ae31b19 {
  max-height: 5.6em;
}
.player.player-xl .CustomLogo_module_customLogo__2ae31b19,
.player.player-xl .CustomLogo_module_customLogoImg__2ae31b19 {
  max-height: 6.4em;
}
.player.player-xxl .CustomLogo_module_customLogo__2ae31b19,
.player.player-xxl .CustomLogo_module_customLogoImg__2ae31b19 {
  max-height: 7.2em;
}
.CustomLogo_module_customLogo__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19),
.CustomLogo_module_customLogoImg__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19) {
  max-width: 11.2em;
}
.player.player-sm .CustomLogo_module_customLogo__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19),
.player.player-sm .CustomLogo_module_customLogoImg__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19) {
  max-width: 12em;
}
.player.player-md .CustomLogo_module_customLogo__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19),
.player.player-md .CustomLogo_module_customLogoImg__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19) {
  max-width: 12.8em;
}
.player.player-lg .CustomLogo_module_customLogo__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19),
.player.player-lg .CustomLogo_module_customLogoImg__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19) {
  max-width: 13.6em;
}
.player.player-xl .CustomLogo_module_customLogo__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19),
.player.player-xl .CustomLogo_module_customLogoImg__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19) {
  max-width: 14.4em;
}
.player.player-xxl .CustomLogo_module_customLogo__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19),
.player.player-xxl .CustomLogo_module_customLogoImg__2ae31b19:not(.CustomLogo_module_progressExpanded__2ae31b19) {
  max-width: 15.2em;
}
.CustomLogo_module_customLogo__2ae31b19.CustomLogo_module_progressExpanded__2ae31b19,
.CustomLogo_module_customLogoImg__2ae31b19.CustomLogo_module_progressExpanded__2ae31b19 {
  max-width: 0;
  pointer-events: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.CuePointMarkers_module_cuePoints__e764eae6 {
  background-color: #fff;
  height: 100%;
  margin: 0;
  padding: 0 1px;
  position: absolute;
  top: 0;
  transition: transform 150ms ease-in-out, opacity 150ms ease-out;
  opacity: 0.5;
  transform: translateX(-50%) scale(1);
  z-index: 26;
  cursor: pointer;
}
.CuePointMarkers_module_cuePoints__e764eae6:hover, .CuePointMarkers_module_cuePoints__e764eae6:focus {
  opacity: 1;
  transform: translateX(-50%) scale(1.5);
  z-index: 27;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.FocusTarget_module_focusTarget__abd564d5 {
  width: 100%;
  height: 100%;
  outline: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.InteractiveMarker_module_interactiveMarker__62af4b37 {
  position: absolute;
  height: 0.8em;
  width: 0.8em;
  border: 0.2em solid var(--color-two);
  border-radius: 0.4em;
  margin-left: -0.4em;
  z-index: 26;
  background-color: var(--color-three);
  cursor: pointer;
}
@media (max-width: 414px), (max-height: 168px) {
  .InteractiveMarker_module_interactiveMarker__62af4b37 {
    display: none;
  }
}
.InteractiveMarker_module_interactiveMarker__62af4b37:hover, .InteractiveMarker_module_interactiveMarker__62af4b37:focus {
  height: 1.2em;
  width: 1.2em;
  border-radius: 0.6em;
  margin-left: -0.6em;
  z-index: 27;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Timecode_module_timecodeContainer__0e71c943 {
  position: absolute;
  display: block;
  left: 0;
  top: -0.8em;
  margin: -2em 0 0 -1.2em;
}
.Timecode_module_timecodeContainer__0e71c943 .Timecode_module_timecode__0e71c943 {
  border-radius: 4px;
  padding: 0.2em 0.4em;
  line-height: 1.6em;
  font-weight: 500;
  position: relative;
  left: -50%;
  display: inline-block;
  margin-left: 2.3em;
  background: #fff;
  color: #000;
  cursor: grab;
}
.Timecode_module_timecodeContainer__0e71c943 .Timecode_module_timecode__0e71c943.Timecode_module_disabled__0e71c943 {
  cursor: default;
}
.Timecode_module_timecodeContainer__0e71c943 .Timecode_module_timecode__0e71c943::after {
  border-left: 0.4em solid transparent;
  border-right: 0.4em solid transparent;
  border-top: 0.4em solid #fff;
  bottom: -0.3em;
  content: "";
  left: 50%;
  margin-left: -0.4em;
  position: absolute;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ThumbnailPreview_module_thumbnailPreview__0cb46f3c {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  overflow: hidden;
  max-height: 12em;
  border-radius: 8px;
  transform: translateX(-50%);
  bottom: 2.4em;
  pointer-events: none;
}
.player.player-sm .ThumbnailPreview_module_thumbnailPreview__0cb46f3c {
  max-height: 16em;
}
.player.player-md .ThumbnailPreview_module_thumbnailPreview__0cb46f3c {
  max-height: 16em;
}
.player.player-lg .ThumbnailPreview_module_thumbnailPreview__0cb46f3c {
  max-height: 16em;
}
.player.player-xl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c {
  max-height: 16em;
}
.player.player-xxl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c {
  max-height: 16em;
}
.player.player-xl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c {
  max-height: 20em;
  bottom: 2.8em;
}
.player.player-xxl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c {
  max-height: 20em;
  bottom: 2.8em;
}
.ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewImage__0cb46f3c {
  border: 2px solid #000;
  border-radius: 8px 8px 0 0;
}
.ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  max-height: 5.8181818182em;
  line-height: 1.4545454545em;
  padding: 0.3636363636em;
  background: rgba(0, 0, 0, 0.9);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  border-radius: 0 0 8px 8px;
}
.player.player-xl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c {
  max-height: 6.6666666667em;
  padding: 0.6666666667em;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.3333333333em;
}
.player.player-xxl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c {
  max-height: 6.6666666667em;
  padding: 0.6666666667em;
  font-size: 12px;
  letter-spacing: 0;
  line-height: 1.3333333333em;
}
.ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_separator__0cb46f3c {
  border: 1px solid #414141;
  width: 10.1818181818em;
  margin: 0.3636363636em 0.7272727273em;
  background-color: #414141;
}
.player.player-sm .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_separator__0cb46f3c {
  width: 13.0909090909em;
}
.player.player-md .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_separator__0cb46f3c {
  width: 13.0909090909em;
}
.player.player-lg .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_separator__0cb46f3c {
  width: 13.0909090909em;
}
.player.player-xl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_separator__0cb46f3c {
  width: 13.0909090909em;
}
.player.player-xxl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_separator__0cb46f3c {
  width: 13.0909090909em;
}
.player.player-xl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_separator__0cb46f3c {
  width: 15.3333333333em;
  margin: 0.6666666667em;
}
.player.player-xxl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_separator__0cb46f3c {
  width: 15.3333333333em;
  margin: 0.6666666667em;
}
.ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_text__0cb46f3c {
  height: 1.4545454545em;
  padding: 0 0.3636363636em;
  max-width: 10.1818181818em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.player.player-sm .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_text__0cb46f3c {
  max-width: 13.0909090909em;
}
.player.player-md .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_text__0cb46f3c {
  max-width: 13.0909090909em;
}
.player.player-lg .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_text__0cb46f3c {
  max-width: 13.0909090909em;
}
.player.player-xl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_text__0cb46f3c {
  max-width: 13.0909090909em;
}
.player.player-xxl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_text__0cb46f3c {
  max-width: 13.0909090909em;
}
.player.player-xl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_text__0cb46f3c {
  padding: 0 0.3333333333em;
  height: 1.3333333333em;
  max-width: 15.3333333333em;
  line-height: 1.3333333333em;
}
.player.player-xxl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_text__0cb46f3c {
  padding: 0 0.3333333333em;
  height: 1.3333333333em;
  max-width: 15.3333333333em;
  line-height: 1.3333333333em;
}
.ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_time__0cb46f3c {
  height: 1.4545454545em;
}
.player.player-xl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_time__0cb46f3c {
  height: 1.3333333333em;
}
.player.player-xxl .ThumbnailPreview_module_thumbnailPreview__0cb46f3c .ThumbnailPreview_module_thumbnailPreviewText__0cb46f3c .ThumbnailPreview_module_time__0cb46f3c {
  height: 1.3333333333em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ChapterSegment_module_chapter__4e173c26,
.ChapterSegment_module_segmentBar__4e173c26 {
  height: 0.4em;
  border-radius: 10em;
}

.ChapterSegment_module_chapter__4e173c26 {
  transition: height 0.2s ease-in-out;
  background-color: var(--color-three-opacity-twenty);
}

.ChapterSegment_module_segmentBar__4e173c26 {
  position: absolute;
}

.ChapterSegment_module_chapter__4e173c26.ChapterSegment_module_seekingDisabled__4e173c26 {
  cursor: not-allowed;
}
.ChapterSegment_module_chapter__4e173c26.ChapterSegment_module_seekingDisabled__4e173c26 .ChapterSegment_module_segmentBar__4e173c26 {
  cursor: pointer;
}

.ChapterSegment_module_chapterWrapper__4e173c26 {
  position: relative;
  padding: 1.6em 0;
  cursor: pointer;
  margin-left: 2px;
  overflow: hidden;
}
.ChapterSegment_module_chapterWrapper__4e173c26.ChapterSegment_module_liveDisabled__4e173c26, .ChapterSegment_module_chapterWrapper__4e173c26.ChapterSegment_module_seekingDisabled__4e173c26 {
  cursor: default;
}
.ChapterSegment_module_chapterWrapper__4e173c26:first-of-type {
  margin-left: 0;
}
.ChapterSegment_module_chapterWrapper__4e173c26.ChapterSegment_module_expanded__4e173c26 .ChapterSegment_module_chapter__4e173c26,
.ChapterSegment_module_chapterWrapper__4e173c26.ChapterSegment_module_expanded__4e173c26 .ChapterSegment_module_segmentBar__4e173c26, .ChapterSegment_module_chapterWrapper__4e173c26:not(.ChapterSegment_module_hoverDisabled__4e173c26):hover .ChapterSegment_module_chapter__4e173c26,
.ChapterSegment_module_chapterWrapper__4e173c26:not(.ChapterSegment_module_hoverDisabled__4e173c26):hover .ChapterSegment_module_segmentBar__4e173c26 {
  height: 0.8em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.LoadedBar_module_loaded__3d837846 {
  background-color: var(--color-three-opacity-twenty);
  transition: width 175ms cubic-bezier(0.18, 0, 0.07, 1), height 0.2s ease-in-out;
}
.LoadedBar_module_loaded__3d837846.LoadedBar_module_shortVideo__3d837846 {
  transition: width 300ms cubic-bezier(0.18, 0, 0.07, 1), height 0.2s ease-in-out;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PlayedBar_module_played__38fb8087 {
  transition: height 0.2s ease-in-out;
  background-color: var(--color-two);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ChapterSegments_module_chapterSegmentsWrapper__e0fda153 {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ProgressBarV1_module_progressBarContainer__ddee2161 {
  transition: width 250ms ease-in-out, margin 250ms ease-in-out, flex-grow 250ms ease-in-out, flex-shrink 250ms ease-in-out, padding 250ms ease-in-out;
  height: 0.4em;
  display: flex;
  align-items: center;
  padding: 16px 8px;
  flex-grow: 1;
}
.player.player-xl .ProgressBarV1_module_progressBarContainer__ddee2161 {
  padding: 16px 8px 16px 12px;
}
.player.player-xxl .ProgressBarV1_module_progressBarContainer__ddee2161 {
  padding: 16px 8px 16px 12px;
}
.ProgressBarV1_module_progressBarContainer__ddee2161.ProgressBarV1_module_progressHidden__ddee2161 {
  padding: 16px 0;
  flex-grow: 0;
}
.ProgressBarV1_module_progressBarContainer__ddee2161.ProgressBarV1_module_progressExpanded__ddee2161 {
  padding: 16px 8px;
  flex-shrink: 0;
}
.ProgressBarV1_module_progressBarContainer__ddee2161 .ProgressBarV1_module_progressBar__ddee2161 {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 1;
  height: 0.4em;
  position: relative;
}

.player.player-tiny .ProgressBarV1_module_progressBarContainer__ddee2161 {
  display: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ProgressBarV2_module_progressBarContainer__3c92713b {
  transition: width 250ms ease-in-out, margin 250ms ease-in-out, flex-grow 250ms ease-in-out, flex-shrink 250ms ease-in-out, padding 250ms ease-in-out;
  height: 0.4em;
  display: flex;
  align-items: center;
  padding: 16px 8px;
  width: 100%;
}
.player.player-xl .ProgressBarV2_module_progressBarContainer__3c92713b {
  padding: 16px 8px 16px 12px;
}
.player.player-xxl .ProgressBarV2_module_progressBarContainer__3c92713b {
  padding: 16px 8px 16px 12px;
}
.ProgressBarV2_module_progressBarContainer__3c92713b.ProgressBarV2_module_progressExpanded__3c92713b {
  padding: 16px 8px;
  flex-shrink: 0;
}
.ProgressBarV2_module_progressBarContainer__3c92713b .ProgressBarV2_module_progressBar__3c92713b {
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: 1;
  height: 0.4em;
  position: relative;
  width: 100%;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ControlBarV1_module_controlBarWrapper__cf14f860 {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  bottom: 0.8em;
  left: 0.8em;
  right: 0.8em;
  height: 3.2em;
  touch-action: pan-y pinch-zoom;
}
.player.player-xl .ControlBarV1_module_controlBarWrapper__cf14f860 {
  bottom: 1.6em;
  left: 1.6em;
  right: 1.6em;
  height: 4em;
}
.player.player-xxl .ControlBarV1_module_controlBarWrapper__cf14f860 {
  bottom: 1.6em;
  left: 1.6em;
  right: 1.6em;
  height: 4em;
}

.ControlBarV1_module_controls__cf14f860 {
  height: 3.2em;
  z-index: 23;
  display: flex;
  flex: 1;
  pointer-events: all;
  justify-content: flex-end;
}
.player.player-xl .ControlBarV1_module_controls__cf14f860 {
  height: 4em;
}
.player.player-xxl .ControlBarV1_module_controls__cf14f860 {
  height: 4em;
}
.ControlBarV1_module_controls__cf14f860.ControlBarV1_module_trailer__cf14f860 {
  align-items: center;
  flex-direction: column;
  z-index: 16;
  height: auto !important;
}

.ControlBarV1_module_progressBarAndButtons__cf14f860 {
  transition: flex-grow 250ms ease-in-out;
  background-color: var(--color-one-opacity-ninety);
  border-radius: 4px;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 32px;
  padding: 4px;
  /*
      Prevents a flicker on Safari when other elements are animating
      @see https://stackoverflow.com/questions/15751012/
      css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
  */
  transform: translate3d(0, 0, 0);
}
.ControlBarV1_module_progressBarAndButtons__cf14f860.ControlBarV1_module_showAllControls__cf14f860 {
  justify-content: flex-end;
}
.player.player-xl .ControlBarV1_module_progressBarAndButtons__cf14f860 {
  height: 40px;
}
.player.player-xxl .ControlBarV1_module_progressBarAndButtons__cf14f860 {
  height: 40px;
}
.ControlBarV1_module_progressBarAndButtons__cf14f860.ControlBarV1_module_progressBarDisabled__cf14f860 {
  gap: 4px;
  flex-grow: 0;
  z-index: 23;
  justify-content: flex-end;
  max-width: 100%;
  pointer-events: all;
}
.ControlBarV1_module_progressBarAndButtons__cf14f860.ControlBarV1_module_progressBarDisabled__cf14f860.ControlBarV1_module_buttonsExpanded__cf14f860 {
  flex-grow: 1;
}
.ControlBarV1_module_progressBarAndButtons__cf14f860:empty {
  display: none;
}

.ControlBarV1_module_centerPlayButton__cf14f860 {
  height: auto;
  top: 0.8em;
}
.player.player-xl .ControlBarV1_module_centerPlayButton__cf14f860 {
  height: auto;
  top: 1.6em;
}
.player.player-xxl .ControlBarV1_module_centerPlayButton__cf14f860 {
  height: auto;
  top: 1.6em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.VolumeControl_module_volumeControlContainer__02ffae11 {
  padding: 1.6em 0;
  display: flex;
  justify-content: center;
  pointer-events: auto;
}

.VolumeControl_module_volumeControl__02ffae11 {
  transform: translate3d(0, 0, 0);
  position: absolute;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8em 1em;
  width: 3.2em;
  height: 9.6em;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  bottom: 3.2em;
}
.VolumeControl_module_volumeControl__02ffae11:focus-within {
  outline: none;
}
.player.player-xl .VolumeControl_module_volumeControl__02ffae11 {
  bottom: 4em;
  width: 4em;
  height: 12em;
  border-radius: 8px;
}
.player.player-xxl .VolumeControl_module_volumeControl__02ffae11 {
  bottom: 4em;
  width: 4em;
  height: 12em;
  border-radius: 8px;
}

.VolumeControl_module_volumeControl__02ffae11:active {
  cursor: grabbing;
}

.VolumeControl_module_volumeControl__02ffae11:focus-visible {
  outline: 2px solid #00adef;
  outline-offset: 2px;
}

.VolumeControl_module_volumeBar__02ffae11 {
  position: relative;
  display: flex;
  justify-content: center;
  height: 7.2em;
  width: 0.4em;
  background-color: rgba(255, 255, 255, 0.4);
  border-radius: 100px;
  outline: none;
  transition: width 0.2s ease-in-out;
}
.player.player-xl .VolumeControl_module_volumeBar__02ffae11 {
  width: 0.6em;
  height: 8.8em;
}
.player.player-xxl .VolumeControl_module_volumeBar__02ffae11 {
  width: 0.6em;
  height: 8.8em;
}

.VolumeControl_module_volumeBarFill__02ffae11 {
  position: absolute;
  width: 100%;
  bottom: 0;
  opacity: 1;
  border-radius: 100px;
  background-color: var(--color-two);
}

.VolumeControl_module_sliderHandle__02ffae11 {
  position: absolute;
  transform: translateY(50%);
  background-color: #fff;
  height: 0.8em;
  width: 0.8em;
  border-radius: 4px;
  margin: 0 6em;
  transition: height 0.2s ease-in-out, width 0.2s ease-in-out, border-radius 0.2s ease-in-out;
}
.player.player-xl .VolumeControl_module_sliderHandle__02ffae11 {
  height: 1.2em;
  width: 1.2em;
  border-radius: 6px;
}
.player.player-xxl .VolumeControl_module_sliderHandle__02ffae11 {
  height: 1.2em;
  width: 1.2em;
  border-radius: 6px;
}

.VolumeControl_module_mouseEnteredSlider__02ffae11 {
  width: 0.6em;
}
.player.player-xl .VolumeControl_module_mouseEnteredSlider__02ffae11 {
  width: 0.8em;
}
.player.player-xxl .VolumeControl_module_mouseEnteredSlider__02ffae11 {
  width: 0.8em;
}
.VolumeControl_module_mouseEnteredSlider__02ffae11 .VolumeControl_module_sliderHandle__02ffae11 {
  height: 1.2em;
  width: 1.2em;
  border-radius: 6px;
}
.player.player-xl .VolumeControl_module_mouseEnteredSlider__02ffae11 .VolumeControl_module_sliderHandle__02ffae11 {
  height: 1.6em;
  width: 1.6em;
  border-radius: 8px;
}
.player.player-xxl .VolumeControl_module_mouseEnteredSlider__02ffae11 .VolumeControl_module_sliderHandle__02ffae11 {
  height: 1.6em;
  width: 1.6em;
  border-radius: 8px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ControlBarButtonsAndMenusV1_module_wrapper__950407c7 {
  gap: 4px;
  max-width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: max-width 250ms ease-in-out, flex-grow 250ms ease-in-out, opacity 250ms ease-out;
  height: 100%;
  opacity: 1;
}
.ControlBarButtonsAndMenusV1_module_wrapper__950407c7.ControlBarButtonsAndMenusV1_module_progressHidden__950407c7 {
  flex-grow: 1;
}
.ControlBarButtonsAndMenusV1_module_wrapper__950407c7.ControlBarButtonsAndMenusV1_module_buttonsHidden__950407c7 {
  flex-grow: 0;
}
.ControlBarButtonsAndMenusV1_module_wrapper__950407c7.ControlBarButtonsAndMenusV1_module_progressExpanded__950407c7 {
  opacity: 0;
  max-width: 0%;
}

.ControlBarButtonsAndMenusV1_module_collapsibleWrapper__950407c7 {
  transition: opacity 250ms ease-out, width 250ms ease-out, margin 250ms ease-out;
  width: 100%;
  height: 100%;
  opacity: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  z-index: 22;
}
.ControlBarButtonsAndMenusV1_module_collapsibleWrapper__950407c7.ControlBarButtonsAndMenusV1_module_collapsingEnabled__950407c7 {
  clip-path: polygon(-100% calc(-32px - 8px), 200% calc(-32px - 8px), 200% calc(32px + 8px), calc(100% - 24px - 2px * 2) calc(32px + 8px), calc(100% - 24px - 2px * 2) 200%, calc(24px + 2px * 2) 200%, calc(24px + 2px * 2) calc(32px + 8px), -100% calc(32px + 8px), -100% calc(-32px - 8px));
}
.ControlBarButtonsAndMenusV1_module_collapsibleWrapper__950407c7.ControlBarButtonsAndMenusV1_module_canScroll__950407c7 {
  justify-content: center;
  mask-image: linear-gradient(to right, transparent 0%, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-clip: no-clip;
}
.ControlBarButtonsAndMenusV1_module_collapsibleWrapper__950407c7.ControlBarButtonsAndMenusV1_module_buttonsHidden__950407c7 {
  opacity: 0;
  width: 0%;
}
.ControlBarButtonsAndMenusV1_module_collapsibleWrapper__950407c7.ControlBarButtonsAndMenusV1_module_buttonsOnly__950407c7.ControlBarButtonsAndMenusV1_module_vimeoLogoEnabled__950407c7 {
  margin-left: 4px;
}
.ControlBarButtonsAndMenusV1_module_collapsibleWrapper__950407c7.ControlBarButtonsAndMenusV1_module_buttonsOnly__950407c7.ControlBarButtonsAndMenusV1_module_collapsingEnabled__950407c7 {
  margin: 0 -8px;
}

.ControlBarButtonsAndMenusV1_module_collapsibleContent__950407c7 {
  /* Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
  /* Chrome / Safari */
  transition: width 250ms ease-in-out, padding 250ms ease-in-out;
  gap: 4px;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 0;
  pointer-events: none;
  overflow: visible;
  clip-path: none;
}
.ControlBarButtonsAndMenusV1_module_collapsibleContent__950407c7::-webkit-scrollbar {
  display: none;
}
.ControlBarButtonsAndMenusV1_module_collapsibleContent__950407c7 button {
  pointer-events: all;
}
.ControlBarButtonsAndMenusV1_module_collapsibleContent__950407c7.ControlBarButtonsAndMenusV1_module_collapsingEnabled__950407c7 {
  overflow: visible clip;
  position: absolute;
  justify-content: flex-end;
  padding: 56px 8px;
}
.ControlBarButtonsAndMenusV1_module_collapsibleContent__950407c7.ControlBarButtonsAndMenusV1_module_collapsingEnabled__950407c7.ControlBarButtonsAndMenusV1_module_canScroll__950407c7 {
  overflow-x: scroll;
  justify-content: flex-start;
  pointer-events: visible;
  padding: 24px 32px;
}
.ControlBarButtonsAndMenusV1_module_collapsibleContent__950407c7.ControlBarButtonsAndMenusV1_module_buttonsHidden__950407c7 {
  width: 0%;
}
.ControlBarButtonsAndMenusV1_module_collapsibleContent__950407c7.ControlBarButtonsAndMenusV1_module_buttonsHidden__950407c7 button {
  pointer-events: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ControlBarButtonsAndMenusV2_module_wrapper__59175d11 {
  gap: 4px;
  max-width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: max-width 250ms ease-in-out, flex-grow 250ms ease-in-out, opacity 250ms ease-out;
  height: 100%;
  opacity: 1;
  position: inherit;
}
.ControlBarButtonsAndMenusV2_module_wrapper__59175d11.ControlBarButtonsAndMenusV2_module_progressExpanded__59175d11 {
  opacity: 0;
  max-width: 0%;
}

.ControlBarButtonsAndMenusV2_module_collapsibleWrapper__59175d11 {
  /* Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
  /* Chrome / Safari */
  container-type: scroll-state;
  transition: opacity 250ms ease-out, width 250ms ease-out, max-width 250ms ease-out, margin 250ms ease-out;
  height: 100%;
  opacity: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 22;
  width: fit-content;
  overflow: auto;
}
.ControlBarButtonsAndMenusV2_module_collapsibleWrapper__59175d11::-webkit-scrollbar {
  display: none;
}
.ControlBarButtonsAndMenusV2_module_collapsibleWrapper__59175d11.ControlBarButtonsAndMenusV2_module_canScroll__59175d11 {
  mask-image: linear-gradient(to right, transparent 0%, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-clip: no-clip;
}
.ControlBarButtonsAndMenusV2_module_collapsibleWrapper__59175d11.ControlBarButtonsAndMenusV2_module_buttonsHidden__59175d11 {
  opacity: 0;
}
.ControlBarButtonsAndMenusV2_module_collapsibleWrapper__59175d11.ControlBarButtonsAndMenusV2_module_buttonsOnly__59175d11.ControlBarButtonsAndMenusV2_module_vimeoLogoEnabled__59175d11 {
  margin-left: 4px;
}
.ControlBarButtonsAndMenusV2_module_collapsibleWrapper__59175d11.ControlBarButtonsAndMenusV2_module_buttonsOnly__59175d11.ControlBarButtonsAndMenusV2_module_collapsingEnabled__59175d11 {
  margin: 0 -8px;
}

.ControlBarButtonsAndMenusV2_module_collapsibleContent__59175d11 {
  /* Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
  /* Chrome / Safari */
  transition: width 250ms ease-in-out, max-width 250ms ease-in-out, padding 250ms ease-in-out;
  gap: 4px;
  position: static;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: auto;
  height: 100%;
  padding: 0 4px;
  pointer-events: none;
  overflow-y: hidden;
  clip-path: none;
  min-width: fit-content;
}
.ControlBarButtonsAndMenusV2_module_collapsibleContent__59175d11::-webkit-scrollbar {
  display: none;
}
.ControlBarButtonsAndMenusV2_module_collapsibleContent__59175d11 button {
  pointer-events: all;
}
.ControlBarButtonsAndMenusV2_module_collapsibleContent__59175d11.ControlBarButtonsAndMenusV2_module_buttonsHidden__59175d11 button {
  pointer-events: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
button.DebugPanelButton_module_debugPanelButton__02c58441 {
  height: 4.8em;
  width: 100%;
  display: flex;
  justify-content: flex-start;
  background-color: transparent;
  color: #fff;
  padding-left: 20px;
  border: none;
}
button.DebugPanelButton_module_debugPanelButton__02c58441 .DebugPanelButton_module_debugPanelButtonIcon__02c58441 {
  fill: #fff;
  margin-right: 1em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PreviewWindow_module_previewWindow__8f065cd1 {
  display: block;
  background-color: rgba(0, 0, 0, 0.9);
  width: calc(100% + 16px);
  height: 9.4em;
  text-align: center;
  margin: -1em -0.8em 0;
  pointer-events: none;
  overflow: hidden;
}

.PreviewWindow_module_checkeredBackground__8f065cd1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, #414141 25%, transparent 25%), linear-gradient(-45deg, #414141 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #414141 75%), linear-gradient(-45deg, transparent 75%, #414141 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ResetButton_module_resetButton__5af7707c {
  margin: 1.6em;
  height: 2.4em;
  width: calc(100% - 32px);
  border-radius: 4px;
  border: 1px solid #fff;
  position: relative;
  font-weight: bold;
  color: #fff;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: visible;
}
.ResetButton_module_resetButton__5af7707c:hover {
  background: rgba(255, 255, 255, 0.2);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ChaptersPanelMenuOption_module_chapterListItem__22a198a7 {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 1.2em 1.6em;
  gap: 8px;
}
.ChaptersPanelMenuOption_module_chapterListItem__22a198a7.ChaptersPanelMenuOption_module_active__22a198a7 {
  background-color: rgba(255, 255, 255, 0.1);
}
.ChaptersPanelMenuOption_module_chapterListItem__22a198a7:hover:not(.ChaptersPanelMenuOption_module_disabled__22a198a7) {
  background-color: rgba(255, 255, 255, 0.2);
}
.ChaptersPanelMenuOption_module_chapterListItem__22a198a7:hover .ChaptersPanelMenuOption_module_copyLinkButton__22a198a7, .ChaptersPanelMenuOption_module_chapterListItem__22a198a7:focus-within .ChaptersPanelMenuOption_module_copyLinkButton__22a198a7 {
  opacity: 1;
}
.ChaptersPanelMenuOption_module_chapterListItem__22a198a7.ChaptersPanelMenuOption_module_disabled__22a198a7 {
  cursor: not-allowed;
}

.ChaptersPanelMenuOption_module_chapterListButton__22a198a7 {
  justify-content: space-between;
  display: flex;
  border: none;
  color: #fff;
  gap: 0.8em;
  background: transparent;
  align-items: center;
  padding: 0;
  cursor: pointer;
  flex-grow: 1;
}
.ChaptersPanelMenuOption_module_chapterListButton__22a198a7:focus {
  outline-offset: -2px;
  border-radius: 3px;
}
.ChaptersPanelMenuOption_module_chapterListButton__22a198a7:disabled {
  cursor: not-allowed;
  color: rgba(255, 255, 255, 0.6);
}

.ChaptersPanelMenuOption_module_chapterInfoContainer__22a198a7 {
  display: flex;
  align-items: start;
  flex-direction: column;
  gap: 0.8em;
}

.ChaptersPanelMenuOption_module_chapterTitleText__22a198a7 {
  font-weight: bolder;
  font-size: 1.4em;
  line-height: 20px;
  letter-spacing: -0.2px;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.ChaptersPanelMenuOption_module_chapterStartTime__22a198a7 {
  border-radius: 4px;
  padding: 0.4em;
  gap: 1em;
  background-color: rgba(255, 255, 255, 0.2);
  color: inherit;
  font-size: 1em;
  font-weight: normal;
  letter-spacing: 0.4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ChaptersCopyLinkButton_module_tooltipContainer__fd58dc8d {
  display: inline-block;
  position: relative;
}

.ChaptersCopyLinkButton_module_buttonWrapper__fd58dc8d {
  display: inline-block;
}

button.ChaptersCopyLinkButton_module_button__fd58dc8d {
  opacity: 0;
  background-color: transparent;
  padding: 4px;
  height: 36px;
  width: 36px;
}
button.ChaptersCopyLinkButton_module_button__fd58dc8d:hover, button.ChaptersCopyLinkButton_module_button__fd58dc8d:focus {
  background-color: rgba(255, 255, 255, 0.2);
}
button.ChaptersCopyLinkButton_module_button__fd58dc8d.ChaptersCopyLinkButton_module_touchDevice__fd58dc8d {
  opacity: 1;
}
button.ChaptersCopyLinkButton_module_button__fd58dc8d.ChaptersCopyLinkButton_module_touchDevice__fd58dc8d:hover, button.ChaptersCopyLinkButton_module_button__fd58dc8d.ChaptersCopyLinkButton_module_touchDevice__fd58dc8d:focus {
  background-color: transparent;
}
.player.player-sm button.ChaptersCopyLinkButton_module_button__fd58dc8d {
  height: 36px;
  width: 36px;
}
.player.player-md button.ChaptersCopyLinkButton_module_button__fd58dc8d {
  height: 36px;
  width: 36px;
}
.player.player-lg button.ChaptersCopyLinkButton_module_button__fd58dc8d {
  height: 36px;
  width: 36px;
}
.player.player-xl button.ChaptersCopyLinkButton_module_button__fd58dc8d {
  height: 36px;
  width: 36px;
}
.player.player-xxl button.ChaptersCopyLinkButton_module_button__fd58dc8d {
  height: 36px;
  width: 36px;
}
.player.player-xl button.ChaptersCopyLinkButton_module_button__fd58dc8d {
  height: 36px;
  width: 36px;
}
.player.player-xxl button.ChaptersCopyLinkButton_module_button__fd58dc8d {
  height: 36px;
  width: 36px;
}
.player.player-xxl button.ChaptersCopyLinkButton_module_button__fd58dc8d {
  height: 36px;
  width: 36px;
}

.ChaptersCopyLinkButton_module_linkCopied__fd58dc8d {
  font-weight: normal;
  display: flex;
  align-items: center;
  line-height: 2em;
}

.ChaptersCopyLinkButton_module_linkCopiedIcon__fd58dc8d {
  width: 2em;
  height: 2em;
  margin-right: 2px;
  padding: 3px 6px 3px 0;
}

.ChaptersCopyLinkButton_module_iconContainer__fd58dc8d {
  height: 2.4em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ControlBarV2_module_controlBarWrapper__91252170 {
  position: absolute;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  bottom: 0.8em;
  left: 0.8em;
  right: 0.8em;
  height: 3.2em;
  touch-action: pan-y pinch-zoom;
}
.player.player-xl .ControlBarV2_module_controlBarWrapper__91252170 {
  bottom: 1.6em;
  left: 1.6em;
  right: 1.6em;
  height: 4em;
}
.player.player-xxl .ControlBarV2_module_controlBarWrapper__91252170 {
  bottom: 1.6em;
  left: 1.6em;
  right: 1.6em;
  height: 4em;
}
.ControlBarV2_module_controlBarWrapper__91252170.ControlBarV2_module_centerPlayButton__91252170 {
  height: auto;
  top: 0.8em;
}
.player.player-xl .ControlBarV2_module_controlBarWrapper__91252170.ControlBarV2_module_centerPlayButton__91252170 {
  height: auto;
  top: 1.6em;
}
.player.player-xxl .ControlBarV2_module_controlBarWrapper__91252170.ControlBarV2_module_centerPlayButton__91252170 {
  height: auto;
  top: 1.6em;
}

.ControlBarV2_module_controls__91252170 {
  transition: max-width 250ms ease-in-out;
  height: 3.2em;
  z-index: 23;
  display: flex;
  flex: 1;
  pointer-events: all;
  justify-content: flex-end;
  max-width: calc(100% - 56px - 8px);
}
.player.player-xl .ControlBarV2_module_controls__91252170 {
  height: 4em;
}
.player.player-xxl .ControlBarV2_module_controls__91252170 {
  height: 4em;
}
.ControlBarV2_module_controls__91252170.ControlBarV2_module_trailer__91252170 {
  align-items: center;
  flex-direction: column;
  z-index: 16;
  height: auto !important;
}
.ControlBarV2_module_controls__91252170.ControlBarV2_module_centerPlayButton__91252170, .ControlBarV2_module_controls__91252170.ControlBarV2_module_progressBarExpanded__91252170 {
  max-width: 100%;
}

.ControlBarV2_module_progressBarAndButtons__91252170 {
  transform: translate3d(0, 0, 0);
  transition: flex-grow 250ms ease-in-out;
  background-color: var(--color-one-opacity-ninety);
  border-radius: 4px;
  display: flex;
  flex-grow: 1;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  height: 32px;
  padding: 4px;
  max-width: 100%;
}
.player.player-xl .ControlBarV2_module_progressBarAndButtons__91252170 {
  height: 40px;
}
.player.player-xxl .ControlBarV2_module_progressBarAndButtons__91252170 {
  height: 40px;
}
.ControlBarV2_module_progressBarAndButtons__91252170.ControlBarV2_module_progressBarDisabled__91252170 {
  gap: 4px;
  flex-grow: 0;
  z-index: 23;
  justify-content: flex-end;
  max-width: 100%;
  pointer-events: all;
}
.ControlBarV2_module_progressBarAndButtons__91252170.ControlBarV2_module_progressBarDisabled__91252170.ControlBarV2_module_buttonsExpanded__91252170 {
  padding-left: 12px;
}
.ControlBarV2_module_progressBarAndButtons__91252170:empty {
  display: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
:root {
  --clock-rotate-direction: 1;
}

.AnimatedClock_module_hands__167fcd36 {
  transform-origin: center;
  fill: #fff;
  stroke-width: 1.65;
  animation-duration: 900ms;
  animation-delay: 100ms;
  animation-timing-function: linear;
  transform: rotate(0deg);
}
.AnimatedClock_module_hands__167fcd36.AnimatedClock_module_hour__167fcd36 {
  animation-name: AnimatedClock_module_hourHand__167fcd36;
}
.AnimatedClock_module_hands__167fcd36.AnimatedClock_module_minute__167fcd36 {
  animation-name: AnimatedClock_module_minuteHand__167fcd36;
}
.AnimatedClock_module_hands__167fcd36.AnimatedClock_module_reverse__167fcd36 {
  --clock-rotate-direction: -1;
}

@keyframes AnimatedClock_module_hourHand__167fcd36 {
  to {
    rotate: calc(45deg * var(--clock-rotate-direction));
  }
}
@keyframes AnimatedClock_module_minuteHand__167fcd36 {
  to {
    rotate: calc(540deg * var(--clock-rotate-direction));
  }
}
.AnimatedClock_module_circle__167fcd36 {
  fill: transparent;
  stroke: #fff;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Notification_module_root__2d0169c3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 34;
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}
.Notification_module_root__2d0169c3 svg {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.25));
}
.Notification_module_root__2d0169c3 svg path {
  fill: #fff;
}
.Notification_module_root__2d0169c3.Notification_module_active__2d0169c3 {
  display: flex;
}
.Notification_module_root__2d0169c3.Notification_module_behindSideDock__2d0169c3 {
  z-index: 17;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.NudgeNotification_module_nudge__f8bdde81 {
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}

.NudgeNotification_module_nudgeInfo__f8bdde81 {
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: flex-end;
  position: relative;
  margin-right: 3.2em;
  width: 9.6em;
}
.player.player-sm .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-right: 4.8em;
}
.player.player-md .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-right: 6.4em;
}
.player.player-lg .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-right: 8em;
}
.player.player-xl .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-right: 9.6em;
}
.player.player-xxl .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-right: 11.2em;
}
.player.player-sm .NudgeNotification_module_nudgeInfo__f8bdde81 {
  width: 12em;
}
.player.player-md .NudgeNotification_module_nudgeInfo__f8bdde81 {
  width: 12em;
}
.player.player-lg .NudgeNotification_module_nudgeInfo__f8bdde81 {
  width: 12em;
}
.player.player-xl .NudgeNotification_module_nudgeInfo__f8bdde81 {
  width: 16em;
}
.player.player-xxl .NudgeNotification_module_nudgeInfo__f8bdde81 {
  width: 16em;
}
@media (max-width: 299px), (max-height: 169px) {
  .NudgeNotification_module_nudgeInfo__f8bdde81 {
    margin-right: 1.6em;
    width: 9.6em;
  }
}
@media (min-width: 300px) and (max-width: 375px) {
  .NudgeNotification_module_nudgeInfo__f8bdde81 {
    margin-right: 2.4em;
    width: 9.6em;
  }
}

.NudgeNotification_module_nudgeIcon__f8bdde81 svg {
  fill: #fff;
  height: 3.2em;
}
.player.player-sm .NudgeNotification_module_nudgeIcon__f8bdde81 svg {
  height: 4em;
}
.player.player-md .NudgeNotification_module_nudgeIcon__f8bdde81 svg {
  height: 4em;
}
.player.player-lg .NudgeNotification_module_nudgeIcon__f8bdde81 svg {
  height: 4em;
}
.player.player-xl .NudgeNotification_module_nudgeIcon__f8bdde81 svg {
  height: 4.8em;
}
.player.player-xxl .NudgeNotification_module_nudgeIcon__f8bdde81 svg {
  height: 4.8em;
}
@media (max-width: 299px), (max-height: 169px) {
  .NudgeNotification_module_nudgeIcon__f8bdde81 svg {
    height: 2.4em;
  }
}

.NudgeNotification_module_nudgeTime__f8bdde81 {
  font-weight: bold;
  font-size: 1.4em;
  letter-spacing: -0.4px;
  height: 1.8em;
}
.player.player-sm .NudgeNotification_module_nudgeTime__f8bdde81 {
  font-size: 1.6em;
}
.player.player-md .NudgeNotification_module_nudgeTime__f8bdde81 {
  font-size: 1.6em;
}
.player.player-lg .NudgeNotification_module_nudgeTime__f8bdde81 {
  font-size: 1.8em;
}
.player.player-xl .NudgeNotification_module_nudgeTime__f8bdde81 {
  font-size: 2.4em;
}
.player.player-xxl .NudgeNotification_module_nudgeTime__f8bdde81 {
  font-size: 2.4em;
}
.player.player-sm .NudgeNotification_module_nudgeTime__f8bdde81 {
  letter-spacing: -0.4px;
}
.player.player-md .NudgeNotification_module_nudgeTime__f8bdde81 {
  letter-spacing: -0.4px;
}
.player.player-lg .NudgeNotification_module_nudgeTime__f8bdde81 {
  letter-spacing: -0.6px;
}
.player.player-xl .NudgeNotification_module_nudgeTime__f8bdde81 {
  letter-spacing: -0.8px;
}
.player.player-xxl .NudgeNotification_module_nudgeTime__f8bdde81 {
  letter-spacing: -0.8px;
}
.player.player-sm .NudgeNotification_module_nudgeTime__f8bdde81 {
  height: 2em;
}
.player.player-md .NudgeNotification_module_nudgeTime__f8bdde81 {
  height: 2em;
}
.player.player-lg .NudgeNotification_module_nudgeTime__f8bdde81 {
  height: 2.4em;
}
.player.player-xl .NudgeNotification_module_nudgeTime__f8bdde81 {
  height: 3.2em;
}
.player.player-xxl .NudgeNotification_module_nudgeTime__f8bdde81 {
  height: 3.2em;
}
@media (max-width: 414px), (max-height: 168px) {
  .NudgeNotification_module_nudgeTime__f8bdde81 {
    font-size: 1.2em;
    height: 1.6em;
  }
}

.NudgeNotification_module_nudgeBackward__f8bdde81 {
  left: 0;
  background-image: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
}
.NudgeNotification_module_nudgeBackward__f8bdde81 .NudgeNotification_module_nudgeInfo__f8bdde81 {
  align-self: flex-start;
  margin-left: 3.2em;
}
.player.player-sm .NudgeNotification_module_nudgeBackward__f8bdde81 .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-left: 4.8em;
}
.player.player-md .NudgeNotification_module_nudgeBackward__f8bdde81 .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-left: 6.4em;
}
.player.player-lg .NudgeNotification_module_nudgeBackward__f8bdde81 .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-left: 8em;
}
.player.player-xl .NudgeNotification_module_nudgeBackward__f8bdde81 .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-left: 9.6em;
}
.player.player-xxl .NudgeNotification_module_nudgeBackward__f8bdde81 .NudgeNotification_module_nudgeInfo__f8bdde81 {
  margin-left: 11.2em;
}
@media (max-width: 299px), (max-height: 169px) {
  .NudgeNotification_module_nudgeBackward__f8bdde81 .NudgeNotification_module_nudgeInfo__f8bdde81 {
    margin-left: 1.6em;
  }
}
@media (min-width: 300px) and (max-width: 375px) {
  .NudgeNotification_module_nudgeBackward__f8bdde81 .NudgeNotification_module_nudgeInfo__f8bdde81 {
    margin-left: 2.4em;
  }
}
.NudgeNotification_module_nudgeBackward__f8bdde81 .NudgeNotification_module_nudgeIcon__f8bdde81 {
  transform: rotate(180deg);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.NudgeArea_module_nudgeArea__49409dbe {
  top: 0;
  display: block;
  position: absolute;
  height: 100%;
  width: 33%;
  pointer-events: all;
}

.NudgeArea_module_nudgeForwardArea__49409dbe {
  right: 0;
}

.NudgeArea_module_nudgeBackwardArea__49409dbe {
  left: 0;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.HelpOverlay_module_keysWrapper__9720f2ff {
  display: grid;
  justify-content: center;
  grid-template-rows: repeat(4, auto);
  gap: 1em 1em;
  grid-auto-flow: column;
}
.player.player-sm .HelpOverlay_module_keysWrapper__9720f2ff {
  column-gap: 5em;
}
.player.player-md .HelpOverlay_module_keysWrapper__9720f2ff {
  column-gap: 5em;
}
.player.player-lg .HelpOverlay_module_keysWrapper__9720f2ff {
  column-gap: 5em;
}
.player.player-xl .HelpOverlay_module_keysWrapper__9720f2ff {
  column-gap: 5em;
}
.player.player-xxl .HelpOverlay_module_keysWrapper__9720f2ff {
  column-gap: 5em;
}

.HelpOverlay_module_keyWrapper__9720f2ff {
  display: flex;
  align-items: center;
  text-align: initial;
  font-size: 10px;
}
@media (min-width: 400px) and (min-height: 225px) and (min-aspect-ratio: 640 / 360) {
  .HelpOverlay_module_keyWrapper__9720f2ff {
    font-size: 4.4444444444vh;
  }
}
@media (min-width: 400px) and (min-height: 225px) and (max-aspect-ratio: 640 / 360) {
  .HelpOverlay_module_keyWrapper__9720f2ff {
    font-size: 2.5vw;
  }
}
@media (min-width: 640px) and (min-height: 360px) {
  .HelpOverlay_module_keyWrapper__9720f2ff {
    font-size: 16px;
  }
}
.HelpOverlay_module_keyWrapper__9720f2ff.HelpOverlay_module_hideOnSmall__9720f2ff {
  display: none;
}
.player.player-sm .HelpOverlay_module_keyWrapper__9720f2ff.HelpOverlay_module_hideOnSmall__9720f2ff {
  display: flex;
}
.player.player-md .HelpOverlay_module_keyWrapper__9720f2ff.HelpOverlay_module_hideOnSmall__9720f2ff {
  display: flex;
}
.player.player-lg .HelpOverlay_module_keyWrapper__9720f2ff.HelpOverlay_module_hideOnSmall__9720f2ff {
  display: flex;
}
.player.player-xl .HelpOverlay_module_keyWrapper__9720f2ff.HelpOverlay_module_hideOnSmall__9720f2ff {
  display: flex;
}
.player.player-xxl .HelpOverlay_module_keyWrapper__9720f2ff.HelpOverlay_module_hideOnSmall__9720f2ff {
  display: flex;
}

.HelpOverlay_module_keySymbol__9720f2ff {
  display: inline-flex;
  border: 1px solid #fff;
  border-radius: 5px;
  width: 2em;
  height: 2em;
  font-family: -apple-system, "Helvetica", "Arial", sans-serif;
  font-size: 1.25em;
  line-height: 1.5;
  text-align: center;
  justify-content: center;
  align-items: center;
  min-width: 2em;
}
.player.player-sm .HelpOverlay_module_keySymbol__9720f2ff {
  border-width: 2px;
}
.player.player-md .HelpOverlay_module_keySymbol__9720f2ff {
  border-width: 2px;
}
.player.player-lg .HelpOverlay_module_keySymbol__9720f2ff {
  border-width: 2px;
}
.player.player-xl .HelpOverlay_module_keySymbol__9720f2ff {
  border-width: 2px;
}
.player.player-xxl .HelpOverlay_module_keySymbol__9720f2ff {
  border-width: 2px;
}

.HelpOverlay_module_keyText__9720f2ff {
  display: inline-block;
  margin: 0 0.625em;
  font-size: 0.875em;
}

.HelpOverlay_module_arrow__9720f2ff .HelpOverlay_module_keySymbol__9720f2ff {
  align-items: baseline;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.SpatialRedirectOverlay_module_background__08f49e82 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background: linear-gradient(to bottom, rgba(20, 21, 22, 0.3), #141516);
}

.SpatialRedirectOverlay_module_title__08f49e82 {
  font-size: 1.7em;
}

button.SpatialRedirectOverlay_module_button__08f49e82 {
  appearance: none;
  border: none;
  margin: 0 6px;
  margin-top: 1em;
  display: inline-block;
  font-weight: bold;
  padding: 12px 24px;
  border-radius: 5px;
  background-color: var(--color-two);
  color: #000;
}
.player.player-xxs button.SpatialRedirectOverlay_module_button__08f49e82 {
  font-size: 1.8em;
}
.player.player-xs button.SpatialRedirectOverlay_module_button__08f49e82 {
  font-size: 1.8em;
}
.player.player-sm button.SpatialRedirectOverlay_module_button__08f49e82 {
  font-size: 1.8em;
}
.player.player-md button.SpatialRedirectOverlay_module_button__08f49e82 {
  font-size: 1.8em;
}
.player.player-md button.SpatialRedirectOverlay_module_button__08f49e82 {
  font-size: 2.4em;
}
.player.player-lg button.SpatialRedirectOverlay_module_button__08f49e82 {
  font-size: 2.4em;
}
.player.player-xl button.SpatialRedirectOverlay_module_button__08f49e82 {
  font-size: 2.4em;
}
.player.player-xxl button.SpatialRedirectOverlay_module_button__08f49e82 {
  font-size: 2.4em;
}

.SpatialRedirectOverlay_module_lowerText__08f49e82 {
  padding-top: 1.6em;
  font-size: 1.6em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PipOverlay_module_overlay__82a6be37 {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  background-color: #121212;
}
.PipOverlay_module_overlay__82a6be37 svg {
  height: 1.8em;
}
.player.player-sm .PipOverlay_module_overlay__82a6be37 svg {
  height: 2.7em;
}
.player.player-md .PipOverlay_module_overlay__82a6be37 svg {
  height: 2.7em;
}
.player.player-lg .PipOverlay_module_overlay__82a6be37 svg {
  height: 2.7em;
}
.player.player-xl .PipOverlay_module_overlay__82a6be37 svg {
  height: 2.7em;
}
.player.player-xxl .PipOverlay_module_overlay__82a6be37 svg {
  height: 2.7em;
}
.PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  margin-top: 8px;
  font-size: 16px;
}
.player.player-sm .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  margin-top: 16px;
}
.player.player-md .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  margin-top: 16px;
}
.player.player-lg .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  margin-top: 16px;
}
.player.player-xl .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  margin-top: 16px;
}
.player.player-xxl .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  margin-top: 16px;
}
.player.player-sm .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  font-size: 24px;
}
.player.player-md .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  font-size: 32px;
}
.player.player-lg .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  font-size: 32px;
}
.player.player-xl .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  font-size: 40px;
}
.player.player-xxl .PipOverlay_module_overlay__82a6be37 .PipOverlay_module_title__82a6be37 {
  font-size: 40px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.LiveStatusLabelAndViewerCounter_module_liveStatusLabelAndViewerCounter__51a91077 {
  display: flex;
  align-items: center;
  position: absolute;
  width: 12em;
  height: 4em;
}
.player.player-xl .LiveStatusLabelAndViewerCounter_module_liveStatusLabelAndViewerCounter__51a91077 {
  width: 16.4em;
  height: 6.4em;
}
.player.player-xxl .LiveStatusLabelAndViewerCounter_module_liveStatusLabelAndViewerCounter__51a91077 {
  width: 16.4em;
  height: 6.4em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.LiveStatusLabel_module_liveStatusLabel__bf9dd22d {
  display: flex;
  flex: none;
  align-items: center;
  height: 2.4em;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  margin-left: 0.8em;
  margin-right: 0.4em;
  padding: 4px 8px;
}
.player.player-xl .LiveStatusLabel_module_liveStatusLabel__bf9dd22d {
  height: 3.2em;
  padding: 8px;
  margin-left: 1.6em;
}
.player.player-xxl .LiveStatusLabel_module_liveStatusLabel__bf9dd22d {
  height: 3.2em;
  padding: 8px;
  margin-left: 1.6em;
}
.LiveStatusLabel_module_liveStatusLabel__bf9dd22d .LiveStatusLabel_module_liveStatusText__bf9dd22d {
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.4px;
  line-height: 14.65px;
}
.LiveStatusLabel_module_liveStatusLabel__bf9dd22d .LiveStatusLabel_module_liveStatusText__bf9dd22d.LiveStatusLabel_module_offline__bf9dd22d {
  color: #b5b5b5;
}
.LiveStatusLabel_module_liveStatusLabel__bf9dd22d .LiveStatusLabel_module_liveStatusCircle__bf9dd22d {
  margin-right: 0.8em;
  background: #ff4d4d;
  height: 1em;
  width: 1em;
  border-radius: 0.8em;
}
.LiveStatusLabel_module_liveStatusLabel__bf9dd22d .LiveStatusLabel_module_liveStatusCircle__bf9dd22d.LiveStatusLabel_module_live__bf9dd22d {
  background: #ff4d4d;
}
.LiveStatusLabel_module_liveStatusLabel__bf9dd22d .LiveStatusLabel_module_liveStatusCircle__bf9dd22d.LiveStatusLabel_module_offline__bf9dd22d {
  border: 2px solid #a3a3a3;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.LiveViewerCounter_module_liveViewerCounter__3b9df3bd {
  display: flex;
  flex: none;
  justify-content: center;
  align-items: center;
  height: 2.4em;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 4px;
  padding: 4px 8px 4px 4px;
}
.player.player-xl .LiveViewerCounter_module_liveViewerCounter__3b9df3bd {
  height: 3.2em;
  padding: 8px;
}
.player.player-xxl .LiveViewerCounter_module_liveViewerCounter__3b9df3bd {
  height: 3.2em;
  padding: 8px;
}
@media (max-width: 414px), (max-height: 168px) {
  .LiveViewerCounter_module_liveViewerCounter__3b9df3bd {
    display: none;
  }
}
.LiveViewerCounter_module_liveViewerCounter__3b9df3bd .LiveViewerCounter_module_liveViewerCountValue__3b9df3bd {
  font-size: 12px;
  font-weight: bold;
  line-height: 1.5em;
  margin-left: 0.4em;
  letter-spacing: 0.4px;
}
.LiveViewerCounter_module_liveViewerCounter__3b9df3bd .LiveViewerCounter_module_liveViewerCounterIcon__3b9df3bd {
  max-width: 1.6em;
  height: 1.6em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.RightContentArea_module_rightContentArea__1100fc34 {
  position: absolute;
  left: 100%;
  right: 0;
  top: 0;
  height: 100%;
  width: 400px;
  z-index: 39;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.8);
  width: 50%;
}
.RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_iframeEmbed__1100fc34 {
  background-color: transparent;
}
.right-content-area-supported.animating .RightContentArea_module_rightContentArea__1100fc34 {
  transition-duration: 400ms;
  transition-timing-function: ease-in-out;
  transition-property: left, opacity;
}
.player.app-md .RightContentArea_module_rightContentArea__1100fc34 {
  width: 400px;
}
.player.app-lg .RightContentArea_module_rightContentArea__1100fc34 {
  width: 400px;
}
.player.app-xl .RightContentArea_module_rightContentArea__1100fc34 {
  width: 480px;
}
.player.app-xxl .RightContentArea_module_rightContentArea__1100fc34 {
  width: 480px;
}
.right-content-area-supported.app-xs .RightContentArea_module_rightContentArea__1100fc34, .right-content-area-supported.app-xxs .RightContentArea_module_rightContentArea__1100fc34, .right-content-area-supported.app-tiny .RightContentArea_module_rightContentArea__1100fc34, .right-content-area-supported.app-mini .RightContentArea_module_rightContentArea__1100fc34 {
  width: 100%;
  left: 0%;
  opacity: 0;
  pointer-events: none;
}
.RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34 {
  left: 50%;
}
.player.app-md .RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34 {
  left: calc(100% - 400px);
}
.player.app-lg .RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34 {
  left: calc(100% - 400px);
}
.player.app-xl .RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34 {
  left: calc(100% - 480px);
}
.player.app-xxl .RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34 {
  left: calc(100% - 480px);
}
.right-content-area-supported.app-xs .RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34, .right-content-area-supported.app-xxs .RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34, .right-content-area-supported.app-tiny .RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34, .right-content-area-supported.app-mini .RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34 {
  opacity: 1;
}
.RightContentArea_module_rightContentArea__1100fc34.RightContentArea_module_visible__1100fc34.RightContentArea_module_googleBot__1100fc34 {
  position: relative;
  left: auto;
  top: auto;
  width: auto;
  height: auto;
  max-height: 0;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ContentAreaBackground_module_imgContainer__698d7036 {
  background-color: #000;
  width: 100%;
  height: 100%;
}
.right-content-area-supported.app-xs .ContentAreaBackground_module_imgContainer__698d7036, .right-content-area-supported.app-xxs .ContentAreaBackground_module_imgContainer__698d7036, .right-content-area-supported.app-tiny .ContentAreaBackground_module_imgContainer__698d7036, .right-content-area-supported.app-mini .ContentAreaBackground_module_imgContainer__698d7036 {
  z-index: 38;
  position: absolute;
  left: 0;
  top: 0;
}

.ContentAreaBackground_module_img__698d7036 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: blur(10px);
}
.ContentAreaBackground_module_img__698d7036.ContentAreaBackground_module_loaded__698d7036 {
  opacity: 0.1;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.TranscriptLoader_module_hidden__9a8b905f {
  pointer-events: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.BufferHandler_module_shade__94101f09 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: #000;
  opacity: 0.4;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Captions_module_captions__5ed5b89b {
  padding: 0 10px 10px;
  transform: translateY(0);
  transition: transform 250ms ease-out 200ms;
  bottom: 0;
}
.Captions_module_captions__5ed5b89b.Captions_module_hide__5ed5b89b {
  display: none;
}
.Captions_module_captions__5ed5b89b.Captions_module_contentAreaSibling__5ed5b89b {
  /*
      When a right content area is enabled, we need to support animation for
      scaling the captions container when the content area is open as well as
      sliding the caption up when the control bar is visible.
  */
  transition: transform 250ms ease-out 200ms, width 400ms ease-in-out, right 400ms ease-in-out;
}
.Captions_module_captions__5ed5b89b.Captions_module_fullscreen__5ed5b89b {
  padding: 1.5%;
}
.Captions_module_captions__5ed5b89b.Captions_module_withControls__5ed5b89b {
  transform: translateY(-50px);
  transition: transform 150ms ease;
}
.Captions_module_captions__5ed5b89b.Captions_module_withControls__5ed5b89b.Captions_module_contentAreaSibling__5ed5b89b {
  transition: transform 150ms ease, width 400ms ease-in-out, right 400ms ease-in-out;
}
.Captions_module_captions__5ed5b89b.Captions_module_withControls__5ed5b89b.Captions_module_noPlaybar__5ed5b89b:not(.Captions_module_fullscreen__5ed5b89b) {
  transform: translateY(-32px);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.QoESurvey_module_thumbsUp__c40e38d2 {
  margin-right: 2px;
}

.QoESurvey_module_thumbsDown__c40e38d2 {
  margin-left: 2px;
  margin-right: 4px;
}
.player.player-sm .QoESurvey_module_thumbsDown__c40e38d2 {
  margin-right: 8px;
}
.player.player-md .QoESurvey_module_thumbsDown__c40e38d2 {
  margin-right: 8px;
}
.player.player-lg .QoESurvey_module_thumbsDown__c40e38d2 {
  margin-right: 8px;
}
.player.player-xl .QoESurvey_module_thumbsDown__c40e38d2 {
  margin-right: 8px;
}
.player.player-xxl .QoESurvey_module_thumbsDown__c40e38d2 {
  margin-right: 8px;
}
.player.player-xl .QoESurvey_module_thumbsDown__c40e38d2 {
  margin-right: 4px;
}
.player.player-xxl .QoESurvey_module_thumbsDown__c40e38d2 {
  margin-right: 4px;
}

.QoESurvey_module_thumbsUp__c40e38d2.QoESurvey_module_selected__c40e38d2,
.QoESurvey_module_thumbsDown__c40e38d2.QoESurvey_module_selected__c40e38d2 {
  background: none;
}
.QoESurvey_module_thumbsUp__c40e38d2.QoESurvey_module_selected__c40e38d2:hover,
.QoESurvey_module_thumbsDown__c40e38d2.QoESurvey_module_selected__c40e38d2:hover {
  background: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ChangeLanguages_module_icon__5b8ff53b {
  fill: #fff;
  margin-right: 8px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Toasts_module_toasts__b772bc4f {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 10;
  transition: transform 400ms ease-in-out;
}
.player.player-sm .Toasts_module_toasts__b772bc4f {
  margin-right: 4.4em;
}
.player.player-md .Toasts_module_toasts__b772bc4f {
  margin-right: 4.4em;
}
.player.player-lg .Toasts_module_toasts__b772bc4f {
  margin-right: 4.4em;
}
.player.player-xl .Toasts_module_toasts__b772bc4f {
  margin-right: 4.4em;
}
.player.player-xxl .Toasts_module_toasts__b772bc4f {
  margin-right: 4.4em;
}
.player.player-xl .Toasts_module_toasts__b772bc4f {
  top: 16px;
  left: 16px;
}
.player.player-xxl .Toasts_module_toasts__b772bc4f {
  top: 16px;
  left: 16px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.TopCenterActionItems_module_topCenterActionItems__6bbfa089 {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
button.AIWidgetError_module_reload__9a79f9d1 {
  border: none;
  padding: 4px 12px;
  gap: 4px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  color: #fff;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.AIWidget_module_aiWidget__f665b717 {
  width: 100%;
  height: 100%;
  pointer-events: all;
}
.AIWidget_module_aiWidget__f665b717.AIWidget_module_hidden__f665b717 {
  pointer-events: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PersistentLogo_module_persistentLogo__5ecbc670 {
  display: flex;
  position: absolute;
  bottom: 12px;
  right: 16px;
  opacity: 0.6;
  pointer-events: none;
  width: 24px;
  height: 24px;
  z-index: 14;
  padding: 2px;
  filter: drop-shadow(0 0 16px rgba(0, 0, 0, 0.64));
}
.player.player-sm .PersistentLogo_module_persistentLogo__5ecbc670 {
  width: 58px;
  padding: 3px 2px;
}
.player.player-md .PersistentLogo_module_persistentLogo__5ecbc670 {
  width: 58px;
  padding: 3px 2px;
}
.player.player-lg .PersistentLogo_module_persistentLogo__5ecbc670 {
  width: 58px;
  padding: 3px 2px;
}
.player.player-xl .PersistentLogo_module_persistentLogo__5ecbc670 {
  width: 58px;
  padding: 3px 2px;
}
.player.player-xxl .PersistentLogo_module_persistentLogo__5ecbc670 {
  width: 58px;
  padding: 3px 2px;
}
.player.player-xl .PersistentLogo_module_persistentLogo__5ecbc670 {
  width: 76px;
  height: 32px;
  bottom: 20px;
  right: 24px;
}
.player.player-xxl .PersistentLogo_module_persistentLogo__5ecbc670 {
  width: 76px;
  height: 32px;
  bottom: 20px;
  right: 24px;
}
.PersistentLogo_module_persistentLogo__5ecbc670 svg {
  width: 100%;
  height: 100%;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Outro_module_outroWrapper__64bf980e {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: all;
  z-index: 8 !important;
}
.Outro_module_outroWrapper__64bf980e.Outro_module_inactive__64bf980e {
  display: none;
}

.Outro_module_outro__64bf980e {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.OutroContentWrapper_module_outroContent__06afa88b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.OutroContentWrapper_module_outroContent__06afa88b.OutroContentWrapper_module_hidden__06afa88b {
  display: none !important;
}

.OutroContentWrapper_module_outroShade__06afa88b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*
  * Smooths transition from share overlay to outro, since they both have gradient backgrounds.
  * When both gradients are visible at the same opacity at the same time, the effect is an overall
  * darker gradient (the overlap magnifies the effect).
  *
  * @todo
  * Eventually this should be a single, separate component that stays visible during
  * the transition from one component (overlay) that uses a gradient background to
  * another component (outro) that also uses a gradient background. Then we would
  * just need to fade the component content, and the background would stay visible.
  */
  animation: OutroContentWrapper_module_fadeIn__06afa88b 200ms forwards;
  background: linear-gradient(to bottom, rgba(20, 21, 22, 0.3), #141516);
}

@keyframes OutroContentWrapper_module_fadeIn__06afa88b {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.TextOutro_module_textWrapper__24ee4bfe {
  text-align: left;
  padding: 60px;
  color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.TextOutro_module_textWrapper__24ee4bfe img {
  max-width: 100%;
}
.TextOutro_module_textWrapper__24ee4bfe a {
  font-weight: bold;
}
.TextOutro_module_textWrapper__24ee4bfe ul {
  padding-left: 18px;
}

.TextOutro_module_text__24ee4bfe {
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 1.6em;
  line-height: 1.4;
}
.player.player-xxs .TextOutro_module_text__24ee4bfe {
  font-size: 1.4em;
}
.player.player-xs .TextOutro_module_text__24ee4bfe {
  font-size: 1.4em;
}
.player.player-sm .TextOutro_module_text__24ee4bfe {
  width: 640px;
  margin: 0 auto;
}
.player.player-md .TextOutro_module_text__24ee4bfe {
  width: 640px;
  margin: 0 auto;
}
.player.player-lg .TextOutro_module_text__24ee4bfe {
  width: 640px;
  margin: 0 auto;
}
.player.player-xl .TextOutro_module_text__24ee4bfe {
  width: 640px;
  margin: 0 auto;
}
.player.player-xxl .TextOutro_module_text__24ee4bfe {
  width: 640px;
  margin: 0 auto;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.OutroContentBackground_module_background__3bf40fb2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1a2e3b;
  background-size: cover;
  background-position: center center;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.LinkOutro_module_linkBackground__0f1c39e6 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1a2e3b;
  background-size: cover;
  background-position: center center;
}

@keyframes LinkOutro_module_slideDown__0f1c39e6 {
  to {
    transform: translate(0, 0);
    opacity: 1;
  }
}
.LinkOutro_module_linkWrapper__0f1c39e6 {
  width: 70%;
  max-width: 50em;
  margin: 0;
  position: relative;
  text-align: center;
  opacity: 0;
  transform: translate(0, -20px);
  animation: 250ms ease 150ms LinkOutro_module_slideDown__0f1c39e6;
  animation-fill-mode: forwards;
}
@media (max-width: 299px), (max-height: 169px) {
  .LinkOutro_module_linkWrapper__0f1c39e6 {
    display: none;
  }
}
.LinkOutro_module_linkWrapper__0f1c39e6 .LinkOutro_module_link__0f1c39e6,
.LinkOutro_module_linkWrapper__0f1c39e6 .LinkOutro_module_button__0f1c39e6 {
  display: inline-block;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 100%;
  color: #fff;
}
.LinkOutro_module_linkWrapper__0f1c39e6 a.LinkOutro_module_link__0f1c39e6 {
  text-decoration: underline;
}
.LinkOutro_module_linkWrapper__0f1c39e6 .LinkOutro_module_button__0f1c39e6 {
  appearance: none;
  border: none;
  position: relative;
  display: inline-block;
  padding: 14px 23px;
  border-radius: 3px;
  background-color: var(--color-two);
  font-weight: bold;
  color: var(--color-one-monochrome);
  text-decoration: none;
}
.LinkOutro_module_linkWrapper__0f1c39e6 .LinkOutro_module_button__0f1c39e6:hover, .LinkOutro_module_linkWrapper__0f1c39e6 .LinkOutro_module_button__0f1c39e6:active {
  color: var(--color-one-monochrome);
}
.LinkOutro_module_linkWrapper__0f1c39e6 .LinkOutro_module_button__0f1c39e6:hover::before, .LinkOutro_module_linkWrapper__0f1c39e6 .LinkOutro_module_button__0f1c39e6:active::before {
  content: "";
  background-color: rgba(0, 0, 0, 0.15);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.LinkOutro_module_title__0f1c39e6,
.LinkOutro_module_description__0f1c39e6 {
  text-align: center;
}
.player.player-xxs .LinkOutro_module_title__0f1c39e6,
.player.player-xxs .LinkOutro_module_description__0f1c39e6 {
  display: none;
}

.LinkOutro_module_title__0f1c39e6 {
  font-size: 1.8em;
  margin: 0 0 0.4em;
  color: #fff;
}
.player.player-md .LinkOutro_module_title__0f1c39e6 {
  font-size: 24px;
}
.player.player-lg .LinkOutro_module_title__0f1c39e6 {
  font-size: 24px;
}
.player.player-xl .LinkOutro_module_title__0f1c39e6 {
  font-size: 24px;
}
.player.player-xxl .LinkOutro_module_title__0f1c39e6 {
  font-size: 24px;
}

.LinkOutro_module_description__0f1c39e6 {
  margin: 0 0 8px;
  font-size: 14px;
  line-height: 1.4;
  color: #fff;
}

.LinkOutro_module_buttonWrap__0f1c39e6 {
  margin: 22px 0;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ImageOutro_module_imageOutro__7772436e,
.ImageOutro_module_imageOutroLink__7772436e {
  display: block;
  width: 100%;
  height: 100%;
}

.ImageOutro_module_imageOutro__7772436e {
  background-color: #1a2e3b;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: opacity 450ms, transform 250ms;
}

.ImageOutro_module_imageOutroLink__7772436e .ImageOutro_module_imageOutro__7772436e:hover {
  transform: scale(1.1);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.VideosList_module_videosList__24b2c487 {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0;
}
.VideosList_module_videosList__24b2c487 li {
  flex: 1;
  list-style-type: none;
  padding: 0;
  margin: 0 4px;
  max-width: 400px;
}
.player.player-xs .VideosList_module_videosList__24b2c487 li {
  margin: 0 1%;
}
.player.player-sm .VideosList_module_videosList__24b2c487 li {
  margin: 0 1%;
}
.player.player-md .VideosList_module_videosList__24b2c487 li {
  margin: 0 1%;
}
.player.player-lg .VideosList_module_videosList__24b2c487 li {
  margin: 0 1%;
}
.player.player-xl .VideosList_module_videosList__24b2c487 li {
  margin: 0 1%;
}
.player.player-xxl .VideosList_module_videosList__24b2c487 li {
  margin: 0 1%;
}
@media (min-width: 300px) and (max-width: 375px) {
  .VideosList_module_videosList__24b2c487 li:last-child {
    display: none;
  }
}
.player.player-xs .VideosList_module_videosList__24b2c487[data-num-videos="1"] li {
  margin: 0 3%;
}
.player.player-xs .VideosList_module_videosList__24b2c487[data-num-videos="2"] li {
  margin: 0 1.5%;
}
.player.player-sm .VideosList_module_videosList__24b2c487[data-num-videos="1"] li {
  margin: 0 3%;
}
.player.player-sm .VideosList_module_videosList__24b2c487[data-num-videos="2"] li {
  margin: 0 1.5%;
}
.player.player-md .VideosList_module_videosList__24b2c487[data-num-videos="1"] li {
  margin: 0 3%;
}
.player.player-md .VideosList_module_videosList__24b2c487[data-num-videos="2"] li {
  margin: 0 1.5%;
}
.player.player-lg .VideosList_module_videosList__24b2c487[data-num-videos="1"] li {
  margin: 0 3%;
}
.player.player-lg .VideosList_module_videosList__24b2c487[data-num-videos="2"] li {
  margin: 0 1.5%;
}
.player.player-xl .VideosList_module_videosList__24b2c487[data-num-videos="1"] li {
  margin: 0 3%;
}
.player.player-xl .VideosList_module_videosList__24b2c487[data-num-videos="2"] li {
  margin: 0 1.5%;
}
.player.player-xxl .VideosList_module_videosList__24b2c487[data-num-videos="1"] li {
  margin: 0 3%;
}
.player.player-xxl .VideosList_module_videosList__24b2c487[data-num-videos="2"] li {
  margin: 0 1.5%;
}

.VideosList_module_videoHeader__24b2c487 {
  position: absolute;
  left: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 250ms;
}
.player.player-xxs .VideosList_module_videoHeader__24b2c487 {
  display: none;
}

.VideosList_module_videoLink__24b2c487 {
  display: block;
  position: relative;
  width: 100%;
  opacity: 1;
  transform: scale(1);
  transition: opacity 100ms ease-out, transform 150ms ease-out;
}
.VideosList_module_videoLink__24b2c487:hover, .VideosList_module_videoLink__24b2c487:focus {
  z-index: 1;
  opacity: 1;
  transform: scale(1.1);
}
.VideosList_module_videoLink__24b2c487:hover .VideosList_module_videoHeader__24b2c487, .VideosList_module_videoLink__24b2c487:focus .VideosList_module_videoHeader__24b2c487 {
  opacity: 1;
}
.VideosList_module_videoLink__24b2c487:active {
  transform: scale(1.07);
}

.VideosList_module_videoThumbnail__24b2c487 {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 1;
}

h1.VideosList_module_videoTitle__24b2c487 {
  font-size: 12px;
  padding: 0.3em 0.5em 0;
  margin: 0;
  font-weight: bold;
}
@media (min-width: 677px) and (min-height: 303px) and (min-aspect-ratio: 960 / 430) {
  h1.VideosList_module_videoTitle__24b2c487 {
    font-size: 3.9534883721vh;
  }
}
@media (min-width: 677px) and (min-height: 303px) and (max-aspect-ratio: 960 / 430) {
  h1.VideosList_module_videoTitle__24b2c487 {
    font-size: 1.7708333333vw;
  }
}
@media (min-width: 960px) and (min-height: 430px) {
  h1.VideosList_module_videoTitle__24b2c487 {
    font-size: 17px;
  }
}

h2.VideosList_module_videoByline__24b2c487 {
  font-size: 10px;
  padding: 2px 7px 0;
  margin: 0;
}
@media (min-width: 800px) and (min-height: 358px) and (min-aspect-ratio: 960 / 430) {
  h2.VideosList_module_videoByline__24b2c487 {
    font-size: 2.7906976744vh;
  }
}
@media (min-width: 800px) and (min-height: 358px) and (max-aspect-ratio: 960 / 430) {
  h2.VideosList_module_videoByline__24b2c487 {
    font-size: 1.25vw;
  }
}
@media (min-width: 960px) and (min-height: 430px) {
  h2.VideosList_module_videoByline__24b2c487 {
    font-size: 12px;
  }
}

.VideosList_module_videoTitle__24b2c487,
.VideosList_module_videoByline__24b2c487 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.FollowButton_module_followButtonContainer__7f7b5348 {
  font-size: 12px;
  position: relative;
  text-align: left;
}
@media (min-width: 720px) and (min-height: 322px) and (min-aspect-ratio: 960 / 430) {
  .FollowButton_module_followButtonContainer__7f7b5348 {
    font-size: 3.7209302326vh;
  }
}
@media (min-width: 720px) and (min-height: 322px) and (max-aspect-ratio: 960 / 430) {
  .FollowButton_module_followButtonContainer__7f7b5348 {
    font-size: 1.6666666667vw;
  }
}
@media (min-width: 960px) and (min-height: 430px) {
  .FollowButton_module_followButtonContainer__7f7b5348 {
    font-size: 16px;
  }
}

/* additional specificity required to override Button component styles */
button.FollowButton_module_followButton__7f7b5348 {
  font-size: inherit;
  font-weight: normal;
  margin: 0;
  margin-left: 0.4em;
  position: relative;
  padding: 0.1em 0.7em;
  border-radius: 2px;
  white-space: nowrap;
  color: #fff;
  text-align: left;
  appearance: none;
  border: none;
  background-color: rgba(127, 127, 127, 0.56);
  transition: background-color 0.1s ease-in-out;
}
button.FollowButton_module_followButton__7f7b5348 span {
  display: flex;
  flex-direction: row;
  align-items: center;
}
button.FollowButton_module_followButton__7f7b5348:hover {
  background-color: rgba(127, 127, 127, 0.76);
}
button.FollowButton_module_followButton__7f7b5348.FollowButton_module_following__7f7b5348 {
  background-color: #7fc400;
}
button.FollowButton_module_followButton__7f7b5348 .FollowButton_module_icon__7f7b5348 {
  width: 0.68em;
  margin-right: 4px;
  height: 0.68em;
}
button.FollowButton_module_followButton__7f7b5348 .FollowButton_module_icon__7f7b5348 path {
  transition: opacity 0.1s ease-in-out;
  fill: #fff;
}
button.FollowButton_module_followButton__7f7b5348 .FollowButton_module_icon__7f7b5348.FollowButton_module_check__7f7b5348 {
  width: 0.8em;
}
button.FollowButton_module_followButton__7f7b5348 .FollowButton_module_icon__7f7b5348.FollowButton_module_close__7f7b5348 {
  width: 1em;
  height: 1em;
}

.FollowButton_module_followButtonText__7f7b5348 {
  line-height: 1.5;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
h1.VideosHeader_module_videosTitle__75827656 {
  margin: 0;
  font-size: inherit;
  line-height: 1.8;
  /* extra specificity is required to override global player styles */
}
h1.VideosHeader_module_videosTitle__75827656 a[href] {
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
h1.VideosHeader_module_videosTitle__75827656 a[href]:hover {
  color: var(--color-two);
}

.VideosHeader_module_videosHeaderWrapper__75827656 {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 0;
}

.VideosHeader_module_videosHeader__75827656 {
  font-size: 14px;
  margin: 0 0 1em;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
@media (min-width: 560px) and (min-height: 250px) and (min-aspect-ratio: 960 / 430) {
  .VideosHeader_module_videosHeader__75827656 {
    font-size: 5.5813953488vh;
  }
}
@media (min-width: 560px) and (min-height: 250px) and (max-aspect-ratio: 960 / 430) {
  .VideosHeader_module_videosHeader__75827656 {
    font-size: 2.5vw;
  }
}
@media (min-width: 960px) and (min-height: 430px) {
  .VideosHeader_module_videosHeader__75827656 {
    font-size: 24px;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.VideosOutro_module_videosOutro__ce717ee3 {
  position: relative;
  width: 100%;
  text-align: center;
  padding: 0;
  flex: 1;
}
.VideosOutro_module_videosOutro__ce717ee3:first-child {
  z-index: 2;
  margin-left: 57px;
}
.VideosOutro_module_videosOutro__ce717ee3:last-child {
  margin-right: 57px;
}
.player.player-xs .VideosOutro_module_videosOutro__ce717ee3:first-child {
  margin-left: 14%;
}
.player.player-xs .VideosOutro_module_videosOutro__ce717ee3:last-child {
  margin-right: 14%;
}
.player.player-sm .VideosOutro_module_videosOutro__ce717ee3:first-child {
  margin-left: 14%;
}
.player.player-sm .VideosOutro_module_videosOutro__ce717ee3:last-child {
  margin-right: 14%;
}
.player.player-md .VideosOutro_module_videosOutro__ce717ee3:first-child {
  margin-left: 14%;
}
.player.player-md .VideosOutro_module_videosOutro__ce717ee3:last-child {
  margin-right: 14%;
}
.player.player-lg .VideosOutro_module_videosOutro__ce717ee3:first-child {
  margin-left: 14%;
}
.player.player-lg .VideosOutro_module_videosOutro__ce717ee3:last-child {
  margin-right: 14%;
}
.player.player-xl .VideosOutro_module_videosOutro__ce717ee3:first-child {
  margin-left: 14%;
}
.player.player-xl .VideosOutro_module_videosOutro__ce717ee3:last-child {
  margin-right: 14%;
}
.player.player-xxl .VideosOutro_module_videosOutro__ce717ee3:first-child {
  margin-left: 14%;
}
.player.player-xxl .VideosOutro_module_videosOutro__ce717ee3:last-child {
  margin-right: 14%;
}
@media (max-width: 299px), (max-height: 169px) {
  .VideosOutro_module_videosOutro__ce717ee3 {
    display: none;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* extra specificity is required to override global player link styles */
a[href].VODButton_module_VODButton__9172ec57 {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6em 0.8em;
  margin: 0;
  font-weight: bold;
  font-size: 1.6em;
  line-height: 1;
  border-radius: 5px;
  cursor: pointer;
  background-color: var(--color-two);
}
a[href].VODButton_module_VODButton__9172ec57, a[href].VODButton_module_VODButton__9172ec57:hover {
  color: var(--color-two-monochrome) !important;
}
a[href].VODButton_module_VODButton__9172ec57.VODButton_module_watch__9172ec57 {
  display: inline-block;
  padding: 0.625em 1.25em;
  line-height: normal;
}
@media screen and (max-height: 200px) {
  a[href].VODButton_module_VODButton__9172ec57 {
    font-size: 9px;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.VODIcon_module_VODIconContainer__698e3678 {
  margin-right: 0.8em;
}

.VODIcon_module_VODIcon__698e3678 {
  margin-top: 0.125em;
  width: 1.375em;
  height: 1.375em;
}
.VODIcon_module_VODIcon__698e3678 path {
  fill: var(--color-two-monochrome);
}
.PurchaseOptionItem_module_purchaseOptionItem__9ee33594 {
  list-style-type: none;
  border-radius: 5px;
}

.PurchaseOptionItem_module_label__9ee33594 {
  margin: 0;
  padding: 0;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PurchaseOptions_module_purchaseOptions__40d29c02 {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 10px;
  display: inline-flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.VODOutro_module_VODOutroContainer__4642efe8 {
  text-align: center;
}
@media (max-width: 299px), (max-height: 169px) {
  .VODOutro_module_VODOutroContainer__4642efe8 {
    display: none;
  }
}

.VODOutro_module_VODHeader__4642efe8 {
  margin: 0 3.1em 0.5em;
  font-size: 3.2em;
  /* extra specificity is required to override global player link styles */
}
.VODOutro_module_VODHeader__4642efe8 a[href],
.VODOutro_module_VODHeader__4642efe8 a[href]:hover {
  color: #fff;
}
.player.player-xxs .VODOutro_module_VODHeader__4642efe8 {
  font-size: 2.8em;
}
.player.player-xs .VODOutro_module_VODHeader__4642efe8 {
  font-size: 2.8em;
}
.player.player-sm .VODOutro_module_VODHeader__4642efe8 {
  font-size: 2.8em;
}
.player.player-xxs .VODOutro_module_VODHeader__4642efe8 {
  font-size: 2.4em;
}
@media (max-width: 299px), (max-height: 169px) {
  .VODOutro_module_VODHeader__4642efe8 {
    font-size: 2.4em;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Warning_module_warningIcon__3a030e60 {
  width: 15px;
  height: 15px;
  position: relative;
  top: 3px;
  margin-right: 5px;
}
.Warning_module_warningIcon__3a030e60 path {
  fill: #f44;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Alert_module_alert__903f4136 {
  background-color: rgba(0, 0, 0, 0.9);
  text-align: center;
  z-index: 35;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 50px;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}
.Alert_module_alert__903f4136 h3 {
  margin: 0;
  color: #fff;
  font-size: 1.2em;
}

.Alert_module_close__903f4136 {
  position: absolute;
  right: 0;
  background: transparent;
  margin: 0;
  padding: 0;
  top: 0;
  height: 100%;
  border: none;
}
.Alert_module_close__903f4136:active {
  transform: translateY(1px);
}

.Alert_module_closeIcon__903f4136 {
  width: 1.125em;
  height: 1.125em;
  margin: 0.9375em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.RemoteAccessGate_module_accessGateWrapper__90c54c08 {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.6);
  overflow: hidden;
  z-index: 41;
}
.RemoteAccessGate_module_accessGateWrapper__90c54c08 iframe {
  pointer-events: all;
}
.RemoteAccessGate_module_accessGateWrapper__90c54c08 [data-component-type=spinner] {
  transition: transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28), opacity 500ms ease-in-out;
}

.RemoteAccessGate_module_accessGate__90c54c08 {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-100%);
  max-height: 1px;
  transition: transform 500ms ease-in-out, opacity 500ms ease-in-out 250ms;
  /*
      The gate page will only send the `remoteComponentReady` message
      to the player when the page is mounted.
      However, the iframe content won't be rendered if it is outside
      the boundaries of the player.
      This may result in the player never knowing when it can display the gate.
      To compensate for this, we position the iframe within the bounds
      of the player while the page is being loaded,
      then move it back above the player before the gate content is loaded
      so that it can animate into view.
      By setting the height of the iframe to a single pixel,
      it make sure it does not exceed the bounds of a player embed,
      which can impact the order of events between player and gate iframes.
  */
}
.RemoteAccessGate_module_accessGate__90c54c08.RemoteAccessGate_module_waitingToDisplay__90c54c08 {
  opacity: 0;
  visibility: hidden;
  transform: translateY(0);
  max-height: 1px;
}
.RemoteAccessGate_module_accessGate__90c54c08.RemoteAccessGate_module_visible__90c54c08 {
  max-height: unset;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.RemoteAccessGateError_module_container__fdcfc0f0 {
  display: flex;
  position: absolute;
  pointer-events: all;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0 48px;
  gap: 24px;
  width: 100%;
}
.RemoteAccessGateError_module_container__fdcfc0f0 .RemoteAccessGateError_module_messageText__fdcfc0f0 {
  text-align: center;
}
.RemoteAccessGateError_module_container__fdcfc0f0 .RemoteAccessGateError_module_icon__fdcfc0f0 {
  width: 40px;
  height: 40px;
}

button.RemoteAccessGateError_module_reload__fdcfc0f0 {
  border: none;
  padding: 4px 12px;
  gap: 4px;
  height: 32px;
  background: #515151;
  border-radius: 4px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.LocalAccessGate_module_localAccessGateWrapper__36d942ec {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  background-image: linear-gradient(to bottom, rgba(20, 21, 22, 0.3), #141516);
  padding: 0 16px;
  background-position: center center;
  background-size: cover;
  text-align: center;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PrivateGate_module_localAccessGateWrapper__b6123279 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  background-image: linear-gradient(to bottom, rgba(20, 21, 22, 0.3), #141516);
  padding: 0 16px;
  background-position: center center;
  background-size: cover;
  text-align: center;
}

.PrivateGate_module_privateGateWrapper__b6123279 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: PrivateGate_module_scaleAnimation__b6123279 200ms ease-in-out;
}

h1.PrivateGate_module_header__b6123279 {
  padding: 0;
  font-size: 18px;
  margin-bottom: 8px;
}
.player.player-sm h1.PrivateGate_module_header__b6123279 {
  font-size: 18px;
}
.player.player-md h1.PrivateGate_module_header__b6123279 {
  font-size: 18px;
}
.player.player-lg h1.PrivateGate_module_header__b6123279 {
  font-size: 18px;
}
.player.player-xl h1.PrivateGate_module_header__b6123279 {
  font-size: 18px;
}
.player.player-xxl h1.PrivateGate_module_header__b6123279 {
  font-size: 18px;
}
.player.player-md h1.PrivateGate_module_header__b6123279 {
  font-size: 24px;
}
.player.player-lg h1.PrivateGate_module_header__b6123279 {
  font-size: 24px;
}
.player.player-xl h1.PrivateGate_module_header__b6123279 {
  font-size: 24px;
}
.player.player-xxl h1.PrivateGate_module_header__b6123279 {
  font-size: 24px;
}
.player.player-lg h1.PrivateGate_module_header__b6123279 {
  font-size: 32px;
}
.player.player-xl h1.PrivateGate_module_header__b6123279 {
  font-size: 32px;
}
.player.player-xxl h1.PrivateGate_module_header__b6123279 {
  font-size: 32px;
}
.player.player-xl h1.PrivateGate_module_header__b6123279 {
  font-size: 40px;
}
.player.player-xxl h1.PrivateGate_module_header__b6123279 {
  font-size: 40px;
}

span.PrivateGate_module_subtitle__b6123279 {
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 14px;
}
.player.player-lg span.PrivateGate_module_subtitle__b6123279 {
  font-size: 16px;
}
.player.player-xl span.PrivateGate_module_subtitle__b6123279 {
  font-size: 16px;
}
.player.player-xxl span.PrivateGate_module_subtitle__b6123279 {
  font-size: 16px;
}
.player.player-xl span.PrivateGate_module_subtitle__b6123279 {
  font-size: 18px;
}
.player.player-xxl span.PrivateGate_module_subtitle__b6123279 {
  font-size: 18px;
}
@media (max-width: 299px), (max-height: 169px) {
  span.PrivateGate_module_subtitle__b6123279 {
    display: none;
  }
}

.PrivateGate_module_login__b6123279.PrivateGate_module_loginButton__b6123279 {
  font-size: 14px;
  display: inline-block;
  padding: 10px 12px;
  border-radius: 8px;
  border: none;
  margin: 0 auto;
  color: var(--color-two-monochrome);
  background-color: var(--color-two);
}
.player.player-lg .PrivateGate_module_login__b6123279.PrivateGate_module_loginButton__b6123279 {
  font-size: 16px;
  padding: 14px 16px;
}
.player.player-xl .PrivateGate_module_login__b6123279.PrivateGate_module_loginButton__b6123279 {
  font-size: 16px;
  padding: 14px 16px;
}
.player.player-xxl .PrivateGate_module_login__b6123279.PrivateGate_module_loginButton__b6123279 {
  font-size: 16px;
  padding: 14px 16px;
}
.player.player-xxl .PrivateGate_module_login__b6123279.PrivateGate_module_loginButton__b6123279 {
  font-size: 18px;
  padding: 16px 20px;
}
.PrivateGate_module_login__b6123279.PrivateGate_module_loginButton__b6123279:active, .PrivateGate_module_login__b6123279.PrivateGate_module_loginButton__b6123279:hover {
  background-color: var(--color-two-opacity-ninety);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PasswordGate_module_localAccessGateWrapper__edc7257a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  background-image: linear-gradient(to bottom, rgba(20, 21, 22, 0.3), #141516);
  padding: 0 16px;
  background-position: center center;
  background-size: cover;
  text-align: center;
}

.PasswordGate_module_passwordGateWrapper__edc7257a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: PasswordGate_module_scaleAnimation__edc7257a 200ms ease-in-out;
  width: 100%;
  max-width: 40em;
}
.player.player-lg .PasswordGate_module_passwordGateWrapper__edc7257a {
  max-width: 45em;
}
.player.player-xl .PasswordGate_module_passwordGateWrapper__edc7257a {
  max-width: 45em;
}
.player.player-xxl .PasswordGate_module_passwordGateWrapper__edc7257a {
  max-width: 45em;
}

h1.PasswordGate_module_header__edc7257a {
  font-size: 1.8em;
  font-weight: bold;
  letter-spacing: -0.6px;
  cursor: text;
  user-select: text;
  padding: 0;
  margin-bottom: 8px;
}
.player.player-sm h1.PasswordGate_module_header__edc7257a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-md h1.PasswordGate_module_header__edc7257a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-lg h1.PasswordGate_module_header__edc7257a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-xl h1.PasswordGate_module_header__edc7257a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-xxl h1.PasswordGate_module_header__edc7257a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-lg h1.PasswordGate_module_header__edc7257a {
  font-size: 3.2em;
  letter-spacing: -1px;
}
.player.player-xl h1.PasswordGate_module_header__edc7257a {
  font-size: 3.2em;
  letter-spacing: -1px;
}
.player.player-xxl h1.PasswordGate_module_header__edc7257a {
  font-size: 3.2em;
  letter-spacing: -1px;
}
.player.player-xl h1.PasswordGate_module_header__edc7257a {
  font-size: 4em;
  letter-spacing: -1.2px;
}
.player.player-xxl h1.PasswordGate_module_header__edc7257a {
  font-size: 4em;
  letter-spacing: -1.2px;
}

span.PasswordGate_module_subtitle__edc7257a {
  font-size: 1.4em;
  cursor: text;
  user-select: text;
  line-height: 1.5;
  margin-bottom: 16px;
}
.player.player-lg span.PasswordGate_module_subtitle__edc7257a {
  font-size: 1.6em;
}
.player.player-xl span.PasswordGate_module_subtitle__edc7257a {
  font-size: 1.6em;
}
.player.player-xxl span.PasswordGate_module_subtitle__edc7257a {
  font-size: 1.6em;
}
.player.player-xl span.PasswordGate_module_subtitle__edc7257a {
  font-size: 1.8em;
}
.player.player-xxl span.PasswordGate_module_subtitle__edc7257a {
  font-size: 1.8em;
}
.player.player-lg span.PasswordGate_module_subtitle__edc7257a {
  margin-bottom: 20px;
}
.player.player-xl span.PasswordGate_module_subtitle__edc7257a {
  margin-bottom: 20px;
}
.player.player-xxl span.PasswordGate_module_subtitle__edc7257a {
  margin-bottom: 20px;
}

.PasswordGate_module_form__edc7257a {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  gap: 8px;
}

button.PasswordGate_module_submitPassword__edc7257a,
input.PasswordGate_module_passwordInput__edc7257a {
  font-weight: bold;
  border-radius: 4px;
  padding: 8px;
  width: 100%;
  font-size: 1.6em;
}
.player.player-sm button.PasswordGate_module_submitPassword__edc7257a,
.player.player-sm input.PasswordGate_module_passwordInput__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-md button.PasswordGate_module_submitPassword__edc7257a,
.player.player-md input.PasswordGate_module_passwordInput__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-lg button.PasswordGate_module_submitPassword__edc7257a,
.player.player-lg input.PasswordGate_module_passwordInput__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-xl button.PasswordGate_module_submitPassword__edc7257a,
.player.player-xl input.PasswordGate_module_passwordInput__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-xxl button.PasswordGate_module_submitPassword__edc7257a,
.player.player-xxl input.PasswordGate_module_passwordInput__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-lg button.PasswordGate_module_submitPassword__edc7257a,
.player.player-lg input.PasswordGate_module_passwordInput__edc7257a {
  padding: 12px 16px;
}
.player.player-xl button.PasswordGate_module_submitPassword__edc7257a,
.player.player-xl input.PasswordGate_module_passwordInput__edc7257a {
  padding: 12px 16px;
}
.player.player-xxl button.PasswordGate_module_submitPassword__edc7257a,
.player.player-xxl input.PasswordGate_module_passwordInput__edc7257a {
  padding: 12px 16px;
}
.player.player-xxl button.PasswordGate_module_submitPassword__edc7257a,
.player.player-xxl input.PasswordGate_module_passwordInput__edc7257a {
  padding: 16px;
}

input.PasswordGate_module_passwordInput__edc7257a {
  color: #000;
  font-weight: normal;
}
input.PasswordGate_module_passwordInput__edc7257a[aria-invalid=true]:focus {
  outline: 2px solid rgb(227, 79, 79);
  outline-offset: 2px;
}

button.PasswordGate_module_submitPassword__edc7257a {
  border: none;
  color: var(--color-two-monochrome);
  background-color: var(--color-two);
  cursor: pointer;
}
.player.player-sm button.PasswordGate_module_submitPassword__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-md button.PasswordGate_module_submitPassword__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-lg button.PasswordGate_module_submitPassword__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-xl button.PasswordGate_module_submitPassword__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-xxl button.PasswordGate_module_submitPassword__edc7257a {
  border-radius: 8px;
  padding: 10px 12px;
}
.player.player-lg button.PasswordGate_module_submitPassword__edc7257a {
  padding: 12px 16px;
}
.player.player-xl button.PasswordGate_module_submitPassword__edc7257a {
  padding: 12px 16px;
}
.player.player-xxl button.PasswordGate_module_submitPassword__edc7257a {
  padding: 12px 16px;
}
button.PasswordGate_module_submitPassword__edc7257a:active, button.PasswordGate_module_submitPassword__edc7257a:hover {
  background-color: var(--color-two-opacity-ninety);
}
button.PasswordGate_module_submitPassword__edc7257a:disabled {
  cursor: not-allowed;
}
button.PasswordGate_module_submitPassword__edc7257a.PasswordGate_module_loading__edc7257a {
  animation: PasswordGate_module_throb__edc7257a 1s linear infinite;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.GeoBlockingGate_module_localAccessGateWrapper__b24d757a {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  background-image: linear-gradient(to bottom, rgba(20, 21, 22, 0.3), #141516);
  padding: 0 16px;
  background-position: center center;
  background-size: cover;
  text-align: center;
}

/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.GeoBlockingGate_module_geoblockingGateWrapper__b24d757a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: GeoBlockingGate_module_scaleAnimation__b24d757a 200ms ease-in-out;
}

h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 1.8em;
  font-weight: bold;
  letter-spacing: -0.6px;
  cursor: text;
  user-select: text;
  margin-bottom: 8px;
}
.player.player-sm h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-md h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-lg h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-xl h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-xxl h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-lg h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 3.2em;
  letter-spacing: -1px;
}
.player.player-xl h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 3.2em;
  letter-spacing: -1px;
}
.player.player-xxl h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 3.2em;
  letter-spacing: -1px;
}
.player.player-xl h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 4em;
  letter-spacing: -1.2px;
}
.player.player-xxl h1.GeoBlockingGate_module_header__b24d757a {
  font-size: 4em;
  letter-spacing: -1.2px;
}
.player.player-lg h1.GeoBlockingGate_module_header__b24d757a {
  margin-bottom: 16px;
}
.player.player-xl h1.GeoBlockingGate_module_header__b24d757a {
  margin-bottom: 16px;
}
.player.player-xxl h1.GeoBlockingGate_module_header__b24d757a {
  margin-bottom: 16px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.DRMPlaybackUnavailableGate_module_localAccessGateWrapper__e4e38468 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  pointer-events: all;
  background-image: linear-gradient(to bottom, rgba(20, 21, 22, 0.3), #141516);
  padding: 0 16px;
  background-position: center center;
  background-size: cover;
  text-align: center;
}

/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.DRMPlaybackUnavailableGate_module_wrapper__e4e38468 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: DRMPlaybackUnavailableGate_module_scaleAnimation__e4e38468 200ms ease-in-out;
}

h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 1.8em;
  font-weight: bold;
  letter-spacing: -0.6px;
  cursor: text;
  user-select: text;
  margin-bottom: 8px;
}
.player.player-sm h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-md h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-lg h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-xl h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-xxl h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 2.4em;
  letter-spacing: -0.8px;
}
.player.player-lg h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 3.2em;
  letter-spacing: -1px;
}
.player.player-xl h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 3.2em;
  letter-spacing: -1px;
}
.player.player-xxl h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 3.2em;
  letter-spacing: -1px;
}
.player.player-xl h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 4em;
  letter-spacing: -1.2px;
}
.player.player-xxl h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  font-size: 4em;
  letter-spacing: -1.2px;
}
.player.player-lg h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  margin-bottom: 16px;
}
.player.player-xl h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  margin-bottom: 16px;
}
.player.player-xxl h1.DRMPlaybackUnavailableGate_module_header__e4e38468 {
  margin-bottom: 16px;
}

.DRMPlaybackUnavailableGate_module_message__e4e38468 {
  font-size: 1.4em;
  cursor: text;
  user-select: text;
  max-width: 450px;
}
.player.player-lg .DRMPlaybackUnavailableGate_module_message__e4e38468 {
  font-size: 1.6em;
}
.player.player-xl .DRMPlaybackUnavailableGate_module_message__e4e38468 {
  font-size: 1.6em;
}
.player.player-xxl .DRMPlaybackUnavailableGate_module_message__e4e38468 {
  font-size: 1.6em;
}
.player.player-xl .DRMPlaybackUnavailableGate_module_message__e4e38468 {
  font-size: 1.8em;
}
.player.player-xxl .DRMPlaybackUnavailableGate_module_message__e4e38468 {
  font-size: 1.8em;
}
.player.player-lg .DRMPlaybackUnavailableGate_module_message__e4e38468 {
  max-width: 575px;
}
.player.player-xl .DRMPlaybackUnavailableGate_module_message__e4e38468 {
  max-width: 575px;
}
.player.player-xxl .DRMPlaybackUnavailableGate_module_message__e4e38468 {
  max-width: 575px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
.VimeoInteractive_module_container__211f1fff {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  pointer-events: none;
  z-index: 5;
}
.VimeoInteractive_module_container__211f1fff.VimeoInteractive_module_active__211f1fff {
  z-index: 28;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.VideoThumbnail_module_videoThumbnail__836d3344 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  transition: opacity 0.25s;
}
.VideoThumbnail_module_videoThumbnail__836d3344.VideoThumbnail_module_cover__836d3344 {
  background-size: cover;
}

/* Enables scaling of thumbnail while content area is closing */
.vp-video-wrapper.content-area-sibling-enabled .VideoThumbnail_module_videoThumbnail__836d3344.VideoThumbnail_module_cover__836d3344 {
  background-size: contain;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.DefaultVideoThumbnail_module_defaultVideoThumbnail__a8b490d0 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #282828;
  display: flex;
  align-items: center;
  justify-content: center;
}

.DefaultVideoThumbnail_module_icon__a8b490d0 {
  width: 27%;
  height: 27%;
}
.DefaultVideoThumbnail_module_icon__a8b490d0 path {
  fill: #3d3d3d;
}
.DefaultVideoThumbnail_module_icon__a8b490d0 circle {
  fill: #141414;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.LiveStatusAlerts_module_eventTextWrapper__edeebd03 {
  background-image: linear-gradient(to bottom, rgba(20, 21, 22, 0.3), #141516);
  cursor: default;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.6em;
  font-weight: bold;
  top: 0;
}

.LiveStatusAlerts_module_schedule__edeebd03 {
  top: 50%;
  transform: translateY(-50%);
  position: relative;
  width: 100%;
}

.LiveStatusAlerts_module_scheduleTitle__edeebd03,
.LiveStatusAlerts_module_scheduleBody__edeebd03 {
  display: block;
  margin-bottom: 9px;
}

.LiveStatusAlerts_module_scheduleBody__edeebd03 {
  font-weight: normal;
  font-size: 3.2em;
}

@media screen and (max-height: 350px), screen and (max-width: 740px) {
  .LiveStatusAlerts_module_scheduleTitle__edeebd03 {
    font-weight: bold;
  }
  .LiveStatusAlerts_module_scheduleBody__edeebd03,
  .LiveStatusAlerts_module_scheduleFooter__edeebd03 {
    font-size: 1.4em;
    display: inline;
    font-weight: normal;
  }
  .LiveStatusAlerts_module_scheduleBody__edeebd03 {
    padding-right: 6px;
  }
}
@media screen and (max-height: 200px), screen and (max-width: 480px) {
  .LiveStatusAlerts_module_eventTextWrapper__edeebd03 {
    font-size: 1.2em;
  }
}
@media screen and (max-height: 200px), screen and (max-width: 250px) {
  .LiveStatusAlerts_module_eventTextWrapper__edeebd03 {
    font-size: 1em;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ChromecastText_module_wrapper__a0b71cf1 {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  font-size: 1.6em;
  font-weight: bold;
  pointer-events: none;
  cursor: default;
  z-index: 18;
  background-color: #000;
}
.ChromecastText_module_wrapper__a0b71cf1 .ChromecastText_module_text__a0b71cf1 {
  top: 50%;
  position: relative;
}

@media screen and (max-height: 200px), screen and (max-width: 480px) {
  .ChromecastText_module_wrapper__a0b71cf1 {
    font-size: 1.2em;
  }
}
@media screen and (max-height: 200px), screen and (max-width: 250px) {
  .ChromecastText_module_wrapper__a0b71cf1 {
    font-size: 1em;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.SpatialInstructions_module_instructions__c872b826 {
  padding: 8px;
  display: inline-flex;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Link_module_link__bdf8051d {
  position: relative;
  pointer-events: inherit;
}
.Link_module_link__bdf8051d:hover {
  color: var(--color-two-complement);
}
.Link_module_link__bdf8051d:active, .Link_module_link__bdf8051d:hover {
  cursor: pointer;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
dialog.ModalMenu_module_menu__40756e47,
dialog.ModalMenu_module_menu__40756e47:modal {
  /* Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
  /* Chrome / Safari */
  pointer-events: all;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(40px);
  z-index: 30;
  overflow-x: auto;
  transition: opacity 200ms ease-out;
  transform: translateY(0);
  opacity: 1;
  color: #fff;
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  top: 0;
  left: 0;
  border: 0;
  margin: 0;
  padding: 0;
  overflow-y: hidden;
}
dialog.ModalMenu_module_menu__40756e47::-webkit-scrollbar,
dialog.ModalMenu_module_menu__40756e47:modal::-webkit-scrollbar {
  display: none;
}
dialog.ModalMenu_module_menu__40756e47 .ModalMenu_module_menuBody__40756e47,
dialog.ModalMenu_module_menu__40756e47:modal .ModalMenu_module_menuBody__40756e47 {
  /* Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
  /* Chrome / Safari */
  width: 100%;
  overflow-x: hidden;
  height: calc(100% - 5.6em);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
dialog.ModalMenu_module_menu__40756e47 .ModalMenu_module_menuBody__40756e47::-webkit-scrollbar,
dialog.ModalMenu_module_menu__40756e47:modal .ModalMenu_module_menuBody__40756e47::-webkit-scrollbar {
  display: none;
}
dialog.ModalMenu_module_menu__40756e47 .ModalMenu_module_menuPanel__40756e47,
dialog.ModalMenu_module_menu__40756e47:modal .ModalMenu_module_menuPanel__40756e47 {
  display: inline-block;
  margin: 0.8em 0;
  width: 100%;
}
dialog.ModalMenu_module_menu__40756e47::backdrop, dialog.ModalMenu_module_menu__40756e47:-internal-dialog-in-top-layer::backdrop,
dialog.ModalMenu_module_menu__40756e47:modal::backdrop,
dialog.ModalMenu_module_menu__40756e47:modal:-internal-dialog-in-top-layer::backdrop {
  background-color: transparent;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.PopoverMenu_module_menu__488876d7 {
  /* Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
  /* Chrome / Safari */
  pointer-events: all;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(40px);
  z-index: 30;
  overflow-x: auto;
  transition: opacity 200ms ease-out;
  right: 0;
  bottom: 3.2em;
  margin-bottom: 0.8em;
  margin-right: 0.8em;
  transform: translateY(0);
  width: 32em;
  border-radius: 8px;
}
.PopoverMenu_module_menu__488876d7::-webkit-scrollbar {
  display: none;
}
.player.player-xl .PopoverMenu_module_menu__488876d7 {
  margin-right: 1.6em;
  bottom: 4em;
}
.player.player-xxl .PopoverMenu_module_menu__488876d7 {
  margin-right: 1.6em;
  bottom: 4em;
}
.PopoverMenu_module_menu__488876d7 .PopoverMenu_module_menuBody__488876d7 {
  /* Edge */
  -ms-overflow-style: none;
  /* Firefox */
  scrollbar-width: none;
  /* Chrome / Safari */
  width: 100%;
  overflow-x: hidden;
  height: 0;
  overflow-y: hidden;
  transition: height 200ms ease-out;
}
.PopoverMenu_module_menu__488876d7 .PopoverMenu_module_menuBody__488876d7::-webkit-scrollbar {
  display: none;
}
.PopoverMenu_module_menu__488876d7 .PopoverMenu_module_menuPanel__488876d7 {
  display: inline-block;
  margin: 0.8em 0;
  width: 100%;
}
.PopoverMenu_module_menu__488876d7.PopoverMenu_module_verticalVideo__488876d7 {
  width: calc(100% - 1.6em);
  right: 8px;
  margin: 0;
  bottom: 4.5em;
  overflow: scroll;
}
.player.player-xl .PopoverMenu_module_menu__488876d7.PopoverMenu_module_verticalVideo__488876d7 {
  bottom: 5.3em;
}
.player.player-xxl .PopoverMenu_module_menu__488876d7.PopoverMenu_module_verticalVideo__488876d7 {
  bottom: 5.3em;
}
.PopoverMenu_module_menu__488876d7.PopoverMenu_module_scroll__488876d7 {
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.MenuHeader_module_menuHeader__1bebde08 {
  overflow-x: hidden;
}
.MenuHeader_module_menuHeader__1bebde08 svg {
  width: 2.4em;
  height: 2.4em;
}
.MenuHeader_module_menuHeader__1bebde08 svg path {
  fill: #fff;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_header__1bebde08 {
  display: flex;
  height: 5.6em;
  align-items: center;
  padding: 0.8em;
  min-width: 22.4em;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_title__1bebde08 {
  margin: 0 1em;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_backButton__1bebde08 svg {
  transform: rotate(180deg);
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_closeButton__1bebde08 {
  display: none;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_closeButton__1bebde08 svg {
  vertical-align: middle;
  width: 1.6em;
  height: 1.6em;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_backButton__1bebde08,
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_closeButton__1bebde08 {
  width: 4em;
  height: 4em;
  border: none;
  appearance: none;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_backButton__1bebde08:hover,
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_closeButton__1bebde08:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_backButtonWrapper__1bebde08,
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_title__1bebde08,
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_closeButtonWrapper__1bebde08 {
  flex: 1;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_backButtonWrapper__1bebde08 {
  display: none;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_closeButtonWrapper__1bebde08 {
  margin-left: 0.4em;
  padding-left: 0.4em;
  display: flex;
  justify-content: flex-end;
}
.MenuHeader_module_menuHeader__1bebde08.MenuHeader_module_fullWidth__1bebde08 {
  position: sticky;
  top: 0;
}
.MenuHeader_module_menuHeader__1bebde08.MenuHeader_module_fullWidth__1bebde08 .MenuHeader_module_closeButton__1bebde08 {
  display: block;
}
.MenuHeader_module_menuHeader__1bebde08.MenuHeader_module_hasBack__1bebde08 .MenuHeader_module_backButtonWrapper__1bebde08 {
  display: inline-block;
}
.MenuHeader_module_menuHeader__1bebde08.MenuHeader_module_hasBack__1bebde08 .MenuHeader_module_title__1bebde08 {
  text-align: center;
}
.MenuHeader_module_menuHeader__1bebde08:not(.MenuHeader_module_hasBack__1bebde08) .MenuHeader_module_title__1bebde08 {
  margin: 0 0 0 0.6666666667em;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_backButtonWrapper__1bebde08 .MenuHeader_module_backButton__1bebde08:not(:hover),
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_closeButtonWrapper__1bebde08 .MenuHeader_module_closeButton__1bebde08:not(:hover) {
  background: none;
}
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_backButtonWrapper__1bebde08 .MenuHeader_module_backButton__1bebde08:hover:not(:active),
.MenuHeader_module_menuHeader__1bebde08 .MenuHeader_module_closeButtonWrapper__1bebde08 .MenuHeader_module_closeButton__1bebde08:hover:not(:active) {
  border: none;
}
.MenuHeader_module_menuHeader__1bebde08.MenuHeader_module_hideCloseButton__1bebde08 .MenuHeader_module_closeButtonWrapper__1bebde08 {
  display: none;
}
.MenuHeader_module_menuHeader__1bebde08.MenuHeader_module_hideCloseButton__1bebde08 .MenuHeader_module_title__1bebde08 {
  position: absolute;
  left: 0;
  right: 0;
  pointer-events: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.MenuOption_module_option__5ad9c96b.MenuOption_module_styled__5ad9c96b {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1em;
  cursor: pointer;
  line-height: 40px;
  transition: background-color 200ms ease-out;
  overflow: hidden;
}
.MenuOption_module_option__5ad9c96b.MenuOption_module_styled__5ad9c96b:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.MenuOption_module_option__5ad9c96b.MenuOption_module_styled__5ad9c96b:focus {
  border-radius: 3px;
}
.MenuOption_module_option__5ad9c96b.MenuOption_module_styled__5ad9c96b.MenuOption_module_withActive__5ad9c96b {
  justify-content: initial;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.MenuItem_module_optionButton__2ed021e3 {
  padding: 1em;
  cursor: pointer;
  width: 100%;
  height: 4em;
  border-radius: 0;
}
.MenuItem_module_optionButton__2ed021e3:hover {
  background: rgba(255, 255, 255, 0.2);
}
.MenuItem_module_optionButton__2ed021e3:focus {
  outline-offset: -2px;
}
.MenuItem_module_optionButton__2ed021e3:active {
  outline: none;
}
.MenuItem_module_optionButton__2ed021e3 .MenuItem_module_label__2ed021e3,
.MenuItem_module_optionButton__2ed021e3 .MenuItem_module_value__2ed021e3 {
  margin-bottom: 0;
}
.MenuItem_module_optionButton__2ed021e3 .MenuItem_module_label__2ed021e3 {
  margin: 0 0 0 0.6666666667em;
  flex-grow: 1;
  text-align: start;
}
.MenuItem_module_optionButton__2ed021e3 .MenuItem_module_value__2ed021e3 {
  margin: 0 0 0 0.8em;
  pointer-events: none;
}
.MenuItem_module_optionButton__2ed021e3 .MenuItem_module_icon__2ed021e3 {
  width: 2.4em;
  height: 2.4em;
  margin: 0 0.8em;
}
.MenuItem_module_optionButton__2ed021e3 .MenuItem_module_icon__2ed021e3 svg path {
  fill: #fff;
}
.MenuItem_module_optionButton__2ed021e3 .MenuItem_module_icon__2ed021e3.MenuItem_module_open__2ed021e3 {
  transform: rotate(180deg);
}
.MenuItem_module_optionButton__2ed021e3.MenuItem_module_small__2ed021e3 {
  margin: 0 0 0.4em;
}

body:not(.showfocus) .MenuItem_module_optionButton__2ed021e3:focus {
  outline: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.MenuOptionListItem_module_listItem__5ba640e5 {
  margin: 0;
  padding: 1em;
  height: 4em;
  border-radius: 0;
  width: 100%;
}
.MenuOptionListItem_module_listItem__5ba640e5.MenuOptionListItem_module_accordion__5ba640e5:first-child {
  margin: 0.8em 0 0;
}
.MenuOptionListItem_module_listItem__5ba640e5.MenuOptionListItem_module_accordion__5ba640e5:last-child {
  margin: 0 0 0.8em;
}
.MenuOptionListItem_module_listItem__5ba640e5:focus {
  outline-offset: -2px;
}
.MenuOptionListItem_module_listItem__5ba640e5.MenuOptionListItem_module_ordered__5ba640e5.MenuOptionListItem_module_active__5ba640e5 {
  background-color: #3d3d3d;
}

.MenuOptionListItem_module_text__5ba640e5 {
  max-width: calc(100% - 52px);
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.MenuOptionListItem_module_number__5ba640e5 {
  height: 1.7em;
  width: 2.3em;
  text-align: center;
  font-weight: bold;
  font-size: 1.4em;
  line-height: 1.8em;
}

.MenuOptionListItem_module_icon__5ba640e5 {
  margin: 0 0.8em;
  height: 1.6em;
  width: 1.6em;
  display: flex;
}
.MenuOptionListItem_module_icon__5ba640e5 svg {
  width: 1.6em;
  height: 1.6em;
}
.MenuOptionListItem_module_icon__5ba640e5 svg path {
  fill: #fff;
}

.MenuOptionListItem_module_check__5ba640e5 {
  margin: 0 0.8em;
  height: 1.6em;
  width: 1.6em;
}
.MenuOptionListItem_module_check__5ba640e5 svg {
  display: none;
  height: 1.6em;
  width: 1.6em;
}
.MenuOptionListItem_module_check__5ba640e5.MenuOptionListItem_module_activeCheck__5ba640e5 svg {
  display: block;
}

.MenuOptionListItem_module_point__5ba640e5 {
  position: absolute;
  right: 1.6em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Divider_module_divider__c6c33e8d {
  height: 0;
  min-width: 22.4em;
  border-top: 1px solid #414141;
}
.Divider_module_divider__c6c33e8d.Divider_module_buffer__c6c33e8d {
  margin: 0.8em 0;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Accordion_module_accordion__4336dd83 .Accordion_module_content__4336dd83 {
  display: block;
  height: 0;
  transition: height 200ms ease-out;
  overflow: hidden;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ButtonRow_module_label__45a1df77 {
  margin: 0.4em 0;
}

.ButtonRow_module_filledButton__45a1df77 {
  padding: 4px;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 0.4285714286em;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 0.5714285714em;
  flex-grow: 1;
  text-align: center;
}
.ButtonRow_module_filledButton__45a1df77:last-of-type {
  margin-right: 0;
}
.ButtonRow_module_filledButton__45a1df77:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.ButtonRow_module_filledButton__45a1df77.ButtonRow_module_active__45a1df77 {
  background-color: rgba(255, 255, 255, 0.9);
}
.ButtonRow_module_filledButton__45a1df77.ButtonRow_module_active__45a1df77 .ButtonRow_module_label__45a1df77 {
  color: #000;
}
.ButtonRow_module_filledButton__45a1df77.ButtonRow_module_active__45a1df77:hover {
  background-color: #fff;
}

.ButtonRow_module_buttonRow__45a1df77 {
  display: flex;
  margin: 0.8em;
  padding: 0 8px;
  list-style: none;
}
.ButtonRow_module_buttonRow__45a1df77.ButtonRow_module_wrap__45a1df77 {
  flex-wrap: wrap;
  row-gap: 0.8em;
}
.ButtonRow_module_buttonRow__45a1df77.ButtonRow_module_wrap__45a1df77 .ButtonRow_module_filledButton__45a1df77 {
  flex-grow: 0;
  width: calc(50% - 8px);
  display: inline-block;
  margin-right: 0;
}
.ButtonRow_module_buttonRow__45a1df77.ButtonRow_module_wrap__45a1df77 .ButtonRow_module_filledButton__45a1df77:nth-child(odd) {
  margin-right: 0.8em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ColorSwabs_module_colorSwabs__1985ad2c {
  display: flex;
  justify-content: space-between;
  margin: 0 0.8em;
  padding: 0 0.8em;
  list-style: none;
}
.ColorSwabs_module_colorSwabs__1985ad2c .ColorSwabs_module_colorSwab__1985ad2c {
  padding: 2px;
  border-color: transparent;
  border-width: 2px;
  border-style: solid;
  border-radius: 50%;
  transition: transform 200ms ease-out;
}
.ColorSwabs_module_colorSwabs__1985ad2c .ColorSwabs_module_colorSwab__1985ad2c .ColorSwabs_module_inner__1985ad2c {
  height: 1.6em;
  width: 1.6em;
  border-radius: 50%;
  border: 1px solid #fff;
  position: relative;
  outline: none;
  cursor: pointer;
}
.ColorSwabs_module_colorSwabs__1985ad2c .ColorSwabs_module_colorSwab__1985ad2c.ColorSwabs_module_active__1985ad2c {
  border-color: #fff;
}
.ColorSwabs_module_colorSwabs__1985ad2c .ColorSwabs_module_colorSwab__1985ad2c.ColorSwabs_module_active__1985ad2c .ColorSwabs_module_inner__1985ad2c {
  border: none;
}
.ColorSwabs_module_colorSwabs__1985ad2c .ColorSwabs_module_colorSwab__1985ad2c:hover {
  transform: scale(1.25);
}
.ColorSwabs_module_colorSwabs__1985ad2c.ColorSwabs_module_wrap__1985ad2c {
  flex-wrap: wrap;
  row-gap: 0.8em;
  max-width: 19.2em;
  justify-content: normal;
}
.ColorSwabs_module_colorSwabs__1985ad2c.ColorSwabs_module_wrap__1985ad2c .ColorSwabs_module_colorSwab__1985ad2c {
  margin-right: 0.8em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.MenuFieldLabel_module_menuField__080b7b9c {
  margin: 1.2em 0;
  padding: 0 0.8em;
}

.MenuFieldLabel_module_label__080b7b9c {
  margin: 0 0 0.8em 0.8em;
  flex-grow: 1;
  text-align: start;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compliation is separate from the existing SASS build pipeline */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Tooltip_module_tooltip__b2bc4d16 {
  display: flex;
  justify-content: center;
  align-items: center;
  left: calc(50% + 0px);
  color: #fff;
  background: rgba(0, 0, 0, 0.9);
  font-size: 12px;
  letter-spacing: 0;
  bottom: 2.6666666667em;
  padding: 0.6666666667em 1em;
  height: 2.6666666667em;
  line-height: 1.25em;
  border-radius: 4px;
  transition: opacity 150ms ease-out;
  position: absolute;
  font-weight: bold;
  white-space: pre;
  transform: translateX(-50%);
  cursor: default;
}
.player.player-xl .Tooltip_module_tooltip__b2bc4d16 {
  font-size: 14px;
  letter-spacing: -0.2px;
  bottom: 2.8571428571em;
  height: 2.8571428571em;
  border-radius: 8px;
  line-height: 1.2857142857em;
}
.player.player-xxl .Tooltip_module_tooltip__b2bc4d16 {
  font-size: 14px;
  letter-spacing: -0.2px;
  bottom: 2.8571428571em;
  height: 2.8571428571em;
  border-radius: 8px;
  line-height: 1.2857142857em;
}
.Tooltip_module_tooltipContainer__b2bc4d16.Tooltip_module_forceVisible__b2bc4d16 .Tooltip_module_tooltip__b2bc4d16, .Tooltip_module_tooltipContainer__b2bc4d16[data-touch-device=false]:hover .Tooltip_module_tooltip__b2bc4d16 {
  color: #fff;
}
.Tooltip_module_tooltip__b2bc4d16.Tooltip_module_tooltipLeft__b2bc4d16 {
  transform: translateY(-50%);
  bottom: calc(50% - 2.6666666667em);
}
.player.player-xl .Tooltip_module_tooltip__b2bc4d16.Tooltip_module_tooltipLeft__b2bc4d16 {
  bottom: calc(50% - 2.8571428571em);
}
.player.player-xxl .Tooltip_module_tooltip__b2bc4d16.Tooltip_module_tooltipLeft__b2bc4d16 {
  bottom: calc(50% - 2.8571428571em);
}

.Tooltip_module_playTooltip__b2bc4d16 {
  /*
      This is required since the player button container is slightly taller than other control bar buttons.
      So the `bottom` value needs to be slightly higher.
  */
  margin-bottom: 4px;
}
.Tooltip_module_playTooltip__b2bc4d16.Tooltip_module_trailerPlayTooltip__b2bc4d16 {
  bottom: 3.3333333333em;
  margin-bottom: 8px;
}
.player.player-xl .Tooltip_module_playTooltip__b2bc4d16.Tooltip_module_trailerPlayTooltip__b2bc4d16 {
  bottom: 4em;
}
.player.player-xxl .Tooltip_module_playTooltip__b2bc4d16.Tooltip_module_trailerPlayTooltip__b2bc4d16 {
  bottom: 4em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Text_module_text__73112353 {
  line-height: 1.25;
}

.Text_module_sm__73112353 {
  font-size: 12px;
}

.Text_module_md__73112353 {
  font-size: 14px;
}

.Text_module_lg__73112353 {
  font-size: 16px;
}

.Text_module_xl__73112353 {
  font-size: 18px;
}

.player.player-xxs .Text_module_bpxxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xs .Text_module_bpxxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-sm .Text_module_bpxxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-md .Text_module_bpxxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-lg .Text_module_bpxxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xl .Text_module_bpxxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xxl .Text_module_bpxxs_fontsm__73112353 {
  font-size: 12px;
}

.player.player-xxs .Text_module_bpxxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xs .Text_module_bpxxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-sm .Text_module_bpxxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-md .Text_module_bpxxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-lg .Text_module_bpxxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xl .Text_module_bpxxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xxl .Text_module_bpxxs_fontmd__73112353 {
  font-size: 14px;
}

.player.player-xxs .Text_module_bpxxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xs .Text_module_bpxxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-sm .Text_module_bpxxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-md .Text_module_bpxxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-lg .Text_module_bpxxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xl .Text_module_bpxxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xxl .Text_module_bpxxs_fontlg__73112353 {
  font-size: 16px;
}

.player.player-xxs .Text_module_bpxxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xs .Text_module_bpxxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-sm .Text_module_bpxxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-md .Text_module_bpxxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-lg .Text_module_bpxxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xl .Text_module_bpxxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xxl .Text_module_bpxxs_fontxl__73112353 {
  font-size: 18px;
}

.player.player-xs .Text_module_bpxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-sm .Text_module_bpxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-md .Text_module_bpxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-lg .Text_module_bpxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xl .Text_module_bpxs_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xxl .Text_module_bpxs_fontsm__73112353 {
  font-size: 12px;
}

.player.player-xs .Text_module_bpxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-sm .Text_module_bpxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-md .Text_module_bpxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-lg .Text_module_bpxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xl .Text_module_bpxs_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xxl .Text_module_bpxs_fontmd__73112353 {
  font-size: 14px;
}

.player.player-xs .Text_module_bpxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-sm .Text_module_bpxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-md .Text_module_bpxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-lg .Text_module_bpxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xl .Text_module_bpxs_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xxl .Text_module_bpxs_fontlg__73112353 {
  font-size: 16px;
}

.player.player-xs .Text_module_bpxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-sm .Text_module_bpxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-md .Text_module_bpxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-lg .Text_module_bpxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xl .Text_module_bpxs_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xxl .Text_module_bpxs_fontxl__73112353 {
  font-size: 18px;
}

.player.player-sm .Text_module_bpsm_fontsm__73112353 {
  font-size: 12px;
}
.player.player-md .Text_module_bpsm_fontsm__73112353 {
  font-size: 12px;
}
.player.player-lg .Text_module_bpsm_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xl .Text_module_bpsm_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xxl .Text_module_bpsm_fontsm__73112353 {
  font-size: 12px;
}

.player.player-sm .Text_module_bpsm_fontmd__73112353 {
  font-size: 14px;
}
.player.player-md .Text_module_bpsm_fontmd__73112353 {
  font-size: 14px;
}
.player.player-lg .Text_module_bpsm_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xl .Text_module_bpsm_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xxl .Text_module_bpsm_fontmd__73112353 {
  font-size: 14px;
}

.player.player-sm .Text_module_bpsm_fontlg__73112353 {
  font-size: 16px;
}
.player.player-md .Text_module_bpsm_fontlg__73112353 {
  font-size: 16px;
}
.player.player-lg .Text_module_bpsm_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xl .Text_module_bpsm_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xxl .Text_module_bpsm_fontlg__73112353 {
  font-size: 16px;
}

.player.player-sm .Text_module_bpsm_fontxl__73112353 {
  font-size: 18px;
}
.player.player-md .Text_module_bpsm_fontxl__73112353 {
  font-size: 18px;
}
.player.player-lg .Text_module_bpsm_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xl .Text_module_bpsm_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xxl .Text_module_bpsm_fontxl__73112353 {
  font-size: 18px;
}

.player.player-md .Text_module_bpmd_fontsm__73112353 {
  font-size: 12px;
}
.player.player-lg .Text_module_bpmd_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xl .Text_module_bpmd_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xxl .Text_module_bpmd_fontsm__73112353 {
  font-size: 12px;
}

.player.player-md .Text_module_bpmd_fontmd__73112353 {
  font-size: 14px;
}
.player.player-lg .Text_module_bpmd_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xl .Text_module_bpmd_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xxl .Text_module_bpmd_fontmd__73112353 {
  font-size: 14px;
}

.player.player-md .Text_module_bpmd_fontlg__73112353 {
  font-size: 16px;
}
.player.player-lg .Text_module_bpmd_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xl .Text_module_bpmd_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xxl .Text_module_bpmd_fontlg__73112353 {
  font-size: 16px;
}

.player.player-md .Text_module_bpmd_fontxl__73112353 {
  font-size: 18px;
}
.player.player-lg .Text_module_bpmd_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xl .Text_module_bpmd_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xxl .Text_module_bpmd_fontxl__73112353 {
  font-size: 18px;
}

.player.player-lg .Text_module_bplg_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xl .Text_module_bplg_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xxl .Text_module_bplg_fontsm__73112353 {
  font-size: 12px;
}

.player.player-lg .Text_module_bplg_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xl .Text_module_bplg_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xxl .Text_module_bplg_fontmd__73112353 {
  font-size: 14px;
}

.player.player-lg .Text_module_bplg_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xl .Text_module_bplg_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xxl .Text_module_bplg_fontlg__73112353 {
  font-size: 16px;
}

.player.player-lg .Text_module_bplg_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xl .Text_module_bplg_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xxl .Text_module_bplg_fontxl__73112353 {
  font-size: 18px;
}

.player.player-xl .Text_module_bpxl_fontsm__73112353 {
  font-size: 12px;
}
.player.player-xxl .Text_module_bpxl_fontsm__73112353 {
  font-size: 12px;
}

.player.player-xl .Text_module_bpxl_fontmd__73112353 {
  font-size: 14px;
}
.player.player-xxl .Text_module_bpxl_fontmd__73112353 {
  font-size: 14px;
}

.player.player-xl .Text_module_bpxl_fontlg__73112353 {
  font-size: 16px;
}
.player.player-xxl .Text_module_bpxl_fontlg__73112353 {
  font-size: 16px;
}

.player.player-xl .Text_module_bpxl_fontxl__73112353 {
  font-size: 18px;
}
.player.player-xxl .Text_module_bpxl_fontxl__73112353 {
  font-size: 18px;
}

.player.player-xxl .Text_module_bpxxl_fontsm__73112353 {
  font-size: 12px;
}

.player.player-xxl .Text_module_bpxxl_fontmd__73112353 {
  font-size: 14px;
}

.player.player-xxl .Text_module_bpxxl_fontlg__73112353 {
  font-size: 16px;
}

.player.player-xxl .Text_module_bpxxl_fontxl__73112353 {
  font-size: 18px;
}

.Text_module_bold__73112353 {
  font-weight: bold;
}

.Text_module_normal__73112353 {
  font-weight: normal;
}

.Text_module_medium__73112353 {
  font-weight: 500;
}

.Text_module_white__73112353 {
  color: #fff;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Button_module_button__61be5b9c {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-rendering: optimizelegibility;
  border-radius: 0.4em;
  pointer-events: inherit;
}

.Button_module_buttonChildren__61be5b9c {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.Button_module_icon__61be5b9c svg {
  display: inline-flex;
  overflow: visible;
}
.Button_module_icon__61be5b9c.Button_module_iconSm__61be5b9c > svg {
  width: 1.8em;
  height: 1.8em;
}
.Button_module_icon__61be5b9c.Button_module_iconMd__61be5b9c > svg {
  width: 2.4em;
  height: 2.4em;
}

.Button_module_primary__61be5b9c {
  background-color: var(--color-one-opacity-ninety);
  color: var(--color-three);
}
.Button_module_primary__61be5b9c:hover {
  background-color: var(--color-two);
  color: var(--color-two-monochrome);
}

.Button_module_alternative__61be5b9c {
  background: none;
  color: #fff;
}
.Button_module_alternative__61be5b9c:hover:not(:active) {
  background: rgba(255, 255, 255, 0.2);
}

.Button_module_md__61be5b9c {
  line-height: 3.8em;
  height: 4em;
  min-width: 4em;
}

.Button_module_sm__61be5b9c {
  line-height: 3em;
  height: 3.2em;
  min-width: 3.2em;
}

.Button_module_xs__61be5b9c {
  line-height: normal;
  height: 2.4em;
  width: 2.4em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.CopyLinkButton_module_copyLinkButton__fd675415 {
  border-radius: 4px;
  border: none;
  margin: 4px;
  flex-grow: 0;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  display: flex;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.1);
  height: 26px;
  width: 48px;
  font-size: 1.4em;
  padding: 6px 12px;
}
.CopyLinkButton_module_copyLinkButton__fd675415:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.player.player-sm .CopyLinkButton_module_copyLinkButton__fd675415 {
  height: 40px;
  width: 60px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1.4em;
}
.player.player-md .CopyLinkButton_module_copyLinkButton__fd675415 {
  height: 40px;
  width: 60px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1.4em;
}
.player.player-lg .CopyLinkButton_module_copyLinkButton__fd675415 {
  height: 40px;
  width: 60px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1.4em;
}
.player.player-xl .CopyLinkButton_module_copyLinkButton__fd675415 {
  height: 40px;
  width: 60px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1.4em;
}
.player.player-xxl .CopyLinkButton_module_copyLinkButton__fd675415 {
  height: 40px;
  width: 60px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1.4em;
}
.player.player-xl .CopyLinkButton_module_copyLinkButton__fd675415 {
  height: 48px;
  width: 72px;
  padding: 14px 16px;
  font-size: 1.6em;
}
.player.player-xxl .CopyLinkButton_module_copyLinkButton__fd675415 {
  height: 48px;
  width: 72px;
  padding: 14px 16px;
  font-size: 1.6em;
}
.player.player-xxl .CopyLinkButton_module_copyLinkButton__fd675415 {
  height: 56px;
  width: 85px;
  padding: 16px 20px;
  font-size: 1.8em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.SearchInput_module_label__e264b933 {
  color: rgba(255, 255, 255, 0.8);
  position: absolute;
  left: 40px;
}
.player.app-xl .SearchInput_module_label__e264b933, .player.app-xxl .SearchInput_module_label__e264b933 {
  left: 48px;
}
.player.app-xxs .SearchInput_module_label__e264b933, .player.app-xs .SearchInput_module_label__e264b933, .player.app-tiny .SearchInput_module_label__e264b933, .player.app-mini .SearchInput_module_label__e264b933 {
  left: 32px;
}

input,
.SearchInput_module_label__e264b933 {
  font-size: 1.4em;
}
.player.app-xxs input, .player.app-xs input, .player.app-tiny input, .player.app-mini input,
.player.app-xxs .SearchInput_module_label__e264b933,
.player.app-xs .SearchInput_module_label__e264b933,
.player.app-tiny .SearchInput_module_label__e264b933,
.player.app-mini .SearchInput_module_label__e264b933 {
  font-size: 1.2em;
}

input.SearchInput_module_mobileSafari__e264b933:focus,
input.SearchInput_module_mobileSafari__e264b933:focus + .SearchInput_module_label__e264b933 {
  font-size: 1.6em;
}

.SearchInput_module_inputForm__e264b933 {
  display: flex;
  position: relative;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  border-radius: 8px;
  font-weight: normal;
  min-width: 0;
  flex: 1;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 8px;
  cursor: text;
}
.player.app-xxs .SearchInput_module_inputForm__e264b933, .player.app-xs .SearchInput_module_inputForm__e264b933, .player.app-tiny .SearchInput_module_inputForm__e264b933, .player.app-mini .SearchInput_module_inputForm__e264b933 {
  border-radius: 4px;
  padding: 4px;
}
.player.app-xl .SearchInput_module_inputForm__e264b933, .player.app-xxl .SearchInput_module_inputForm__e264b933 {
  padding: 12px 16px;
}
.SearchInput_module_inputForm__e264b933[data-disabled=false]:hover, .SearchInput_module_inputForm__e264b933[data-focused=true] {
  background-color: rgba(255, 255, 255, 0.3);
}
.SearchInput_module_inputForm__e264b933[data-focused=true] {
  outline: 2px solid #00adef;
  outline-offset: 2px;
}
.SearchInput_module_inputForm__e264b933[data-disabled=true] {
  cursor: not-allowed;
}
.SearchInput_module_inputForm__e264b933 input,
.SearchInput_module_inputForm__e264b933 button {
  appearance: none;
}
.SearchInput_module_inputForm__e264b933 svg path {
  fill: #fff;
}
.SearchInput_module_inputForm__e264b933 .SearchInput_module_searchButton__e264b933 {
  width: 32px;
  height: 32px;
  background-color: transparent;
  border: none;
  padding: 0;
}
.SearchInput_module_inputForm__e264b933 .SearchInput_module_searchButton__e264b933:last-child {
  margin-right: 0;
}
.SearchInput_module_inputForm__e264b933 .SearchInput_module_searchButton__e264b933:hover:not(:disabled) {
  background-color: rgba(255, 255, 255, 0.3);
}
.SearchInput_module_inputForm__e264b933 .SearchInput_module_searchButton__e264b933:hover:not(:disabled):active {
  background-color: rgba(255, 255, 255, 0.3);
}
.SearchInput_module_inputForm__e264b933 .SearchInput_module_searchButton__e264b933 svg {
  width: 100%;
  height: 24px;
}
.player.app-xxs .SearchInput_module_inputForm__e264b933 .SearchInput_module_searchButton__e264b933, .player.app-xs .SearchInput_module_inputForm__e264b933 .SearchInput_module_searchButton__e264b933, .player.app-tiny .SearchInput_module_inputForm__e264b933 .SearchInput_module_searchButton__e264b933, .player.app-mini .SearchInput_module_inputForm__e264b933 .SearchInput_module_searchButton__e264b933 {
  width: 24px;
  height: 24px;
  border-radius: 4px;
}
.SearchInput_module_inputForm__e264b933 input {
  min-width: 0;
  background-color: transparent;
  margin-left: 0;
  color: #fff;
  flex: 1;
}
.SearchInput_module_inputForm__e264b933 input:focus {
  outline: none;
}
.SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933 {
  padding: 4px;
}
.player.app-xl .SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933, .player.app-xxl .SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933 {
  padding: 8px;
}
.SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933 input {
  margin-left: 8px;
}
.player.app-xl .SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933 input, .player.app-xxl .SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933 input {
  margin-left: 8px;
}
.player.app-xxs .SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933 input, .player.app-xs .SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933 input, .player.app-tiny .SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933 input, .player.app-mini .SearchInput_module_inputForm__e264b933.SearchInput_module_active__e264b933 input {
  margin-left: 4px;
}
.SearchInput_module_inputForm__e264b933 .SearchInput_module_searchIcon__e264b933 {
  width: 24px;
  height: 24px;
  margin-left: 0;
  margin-right: 8px;
}
.player.app-xxs .SearchInput_module_inputForm__e264b933 .SearchInput_module_searchIcon__e264b933, .player.app-xs .SearchInput_module_inputForm__e264b933 .SearchInput_module_searchIcon__e264b933, .player.app-tiny .SearchInput_module_inputForm__e264b933 .SearchInput_module_searchIcon__e264b933, .player.app-mini .SearchInput_module_inputForm__e264b933 .SearchInput_module_searchIcon__e264b933 {
  margin-right: 4px;
}
.SearchInput_module_inputForm__e264b933 .SearchInput_module_searchItem__e264b933 {
  font-size: 1.2em;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  margin-right: 8px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
@keyframes Spinner_module_buffer__795e5e53 {
  100% {
    transform: translateX(-10px);
  }
}
@-moz-keyframes Spinner_module_bufferLeft__795e5e53 {
  0% {
    left: 0;
  }
  100% {
    left: -10px;
  }
}
@keyframes Spinner_module_throb__795e5e53 {
  0%, 100% {
    background-color: #555;
  }
  50% {
    background-color: #444;
  }
}
@keyframes Spinner_module_wiggle__795e5e53 {
  0% {
    transform: translateY(10px);
  }
  20% {
    transform: translateY(0);
  }
  40%, 80% {
    transform: translateX(8px);
  }
  60% {
    transform: translateX(-8px);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes Spinner_module_pulse__795e5e53 {
  50% {
    transform: scale(0.9);
  }
}
@keyframes Spinner_module_dash__795e5e53 {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35px;
  }
  100% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -135px;
  }
}
@keyframes Spinner_module_rotate__795e5e53 {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes Spinner_module_scaleAnimation__795e5e53 {
  0% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Spinner_module_spinner__795e5e53 {
  position: absolute;
  top: 50%;
  left: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
  transition: opacity 0.1s, transform 0.25s cubic-bezier(0.17, 0.88, 0.32, 1.28);
}
.Spinner_module_spinner__795e5e53 circle {
  stroke-width: 4px;
  background: transparent;
}
.Spinner_module_spinner__795e5e53 [data-spinner-trace=true] {
  stroke-opacity: 0.2;
}
.Spinner_module_spinner__795e5e53 [data-spinner-circle=true] {
  transform-origin: 50% 50%;
  stroke-linecap: round;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: Spinner_module_rotate__795e5e53 2s linear 0.25s infinite, Spinner_module_dash__795e5e53 1.5s ease-in-out 0.25s infinite;
}

.Spinner_module_lg__795e5e53 {
  max-width: 120px;
  width: 18%;
}
.Spinner_module_lg__795e5e53 circle {
  stroke-width: 2px;
}

.Spinner_module_sm__795e5e53 {
  width: 48px;
  height: 48px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* Influenced by tooltip speed */
.Switch_module_switch__c1fb02cb {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 200ms ease-out;
  overflow: hidden;
}
.Switch_module_switch__c1fb02cb.Switch_module_isMenuItem__c1fb02cb {
  width: 100%;
  height: 4em;
  padding: 1em;
}
.Switch_module_switch__c1fb02cb:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.Switch_module_switch__c1fb02cb:focus {
  border-radius: 3px;
  outline-offset: -2px;
}

.Switch_module_switchContainer__c1fb02cb {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0.8em;
}
.Switch_module_switchContainer__c1fb02cb .Switch_module_handle__c1fb02cb {
  position: absolute;
  left: 2px;
  transform: translateX(0);
  transition: transform 150ms ease;
}
.Switch_module_switchContainer__c1fb02cb.Switch_module_checked__c1fb02cb .Switch_module_handle__c1fb02cb {
  transform: translateX(15px);
}
.Switch_module_switchContainer__c1fb02cb:not(.Switch_module_checked__c1fb02cb) svg rect {
  fill: rgba(255, 255, 255, 0.3);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.CaptionsRenderer_module_captions__04afad3c {
  text-align: center;
  position: absolute;
  z-index: 6;
  color: #fff;
  left: 0;
  right: 0;
  user-select: text;
}

.CaptionsRenderer_module_captionsWindow__04afad3c {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.CaptionsRenderer_module_captionsLine__04afad3c {
  display: inline-block;
  padding: 0.2em 0.4em;
  line-height: 1.2;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ToastBase_module_toast__211c883d {
  background: rgba(0, 0, 0, 0.9);
  pointer-events: all;
  display: flex;
  align-items: center;
  border-radius: 4px;
  padding: 4px;
  max-width: calc(100% - 16px);
}
.player.player-sm .ToastBase_module_toast__211c883d {
  border-radius: 8px;
}
.player.player-md .ToastBase_module_toast__211c883d {
  border-radius: 8px;
}
.player.player-lg .ToastBase_module_toast__211c883d {
  border-radius: 8px;
}
.player.player-xl .ToastBase_module_toast__211c883d {
  border-radius: 8px;
}
.player.player-xxl .ToastBase_module_toast__211c883d {
  border-radius: 8px;
}
.player.player-xl .ToastBase_module_toast__211c883d {
  padding: 8px;
  max-width: calc(100% - 32px);
}
.player.player-xxl .ToastBase_module_toast__211c883d {
  padding: 8px;
  max-width: calc(100% - 32px);
}
.player.player-xxl .ToastBase_module_toast__211c883d {
  border-radius: 12px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ToastDivider_module_divider__6ba5f3ac {
  width: 1px;
  align-self: stretch;
  margin: -4px 4px;
  background-color: rgba(255, 255, 255, 0.2);
}
.player.player-xl .ToastDivider_module_divider__6ba5f3ac {
  margin: -8px 8px;
}
.player.player-xxl .ToastDivider_module_divider__6ba5f3ac {
  margin: -8px 8px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ToastProgress_module_progressWrapper__b38b38c9 {
  position: absolute;
  overflow: hidden;
  pointer-events: none;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}
.player.player-sm .ToastProgress_module_progressWrapper__b38b38c9 {
  border-radius: 8px;
}
.player.player-md .ToastProgress_module_progressWrapper__b38b38c9 {
  border-radius: 8px;
}
.player.player-lg .ToastProgress_module_progressWrapper__b38b38c9 {
  border-radius: 8px;
}
.player.player-xl .ToastProgress_module_progressWrapper__b38b38c9 {
  border-radius: 8px;
}
.player.player-xxl .ToastProgress_module_progressWrapper__b38b38c9 {
  border-radius: 8px;
}
.player.player-xxl .ToastProgress_module_progressWrapper__b38b38c9 {
  border-radius: 12px;
}

.ToastProgress_module_progress__b38b38c9 {
  position: absolute;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  pointer-events: none;
  width: 0%;
  left: 0;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ToastButton_module_toastButton__609a14eb {
  border: none;
  border-radius: 4px;
  width: 24px;
  height: 24px;
}
.ToastButton_module_toastButton__609a14eb:active {
  background: rgba(255, 255, 255, 0.2);
}
.ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 32px;
  padding: 12px;
  margin: -4px;
  color: var(--color-three);
}
.ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb:active, .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb:hover {
  background: var(--color-two);
}
.ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb:active span, .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb:hover span {
  color: var(--color-two-monochrome);
}
.ToastButton_module_toastButton__609a14eb svg {
  width: 20px;
  height: 20px;
}
.ToastButton_module_toastButton__609a14eb svg path {
  fill: #fff;
}
.player.player-sm .ToastButton_module_toastButton__609a14eb {
  width: 32px;
  height: 32px;
}
.player.player-sm .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 40px;
  border-radius: 8px;
}
.player.player-sm .ToastButton_module_toastButton__609a14eb svg {
  width: 24px;
  height: 24px;
}
.player.player-md .ToastButton_module_toastButton__609a14eb {
  width: 32px;
  height: 32px;
}
.player.player-md .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 40px;
  border-radius: 8px;
}
.player.player-md .ToastButton_module_toastButton__609a14eb svg {
  width: 24px;
  height: 24px;
}
.player.player-lg .ToastButton_module_toastButton__609a14eb {
  width: 32px;
  height: 32px;
}
.player.player-lg .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 40px;
  border-radius: 8px;
}
.player.player-lg .ToastButton_module_toastButton__609a14eb svg {
  width: 24px;
  height: 24px;
}
.player.player-xl .ToastButton_module_toastButton__609a14eb {
  width: 32px;
  height: 32px;
}
.player.player-xl .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 40px;
  border-radius: 8px;
}
.player.player-xl .ToastButton_module_toastButton__609a14eb svg {
  width: 24px;
  height: 24px;
}
.player.player-xxl .ToastButton_module_toastButton__609a14eb {
  width: 32px;
  height: 32px;
}
.player.player-xxl .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 40px;
  border-radius: 8px;
}
.player.player-xxl .ToastButton_module_toastButton__609a14eb svg {
  width: 24px;
  height: 24px;
}
.player.player-lg .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 48px;
  padding: 16px;
}
.player.player-xl .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 48px;
  padding: 16px;
}
.player.player-xxl .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 48px;
  padding: 16px;
}
.player.player-xl .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  margin: -8px;
}
.player.player-xxl .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  margin: -8px;
}
.player.player-xxl .ToastButton_module_toastButton__609a14eb {
  width: 40px;
  height: 40px;
}
.player.player-xxl .ToastButton_module_toastButton__609a14eb.ToastButton_module_fullToast__609a14eb {
  width: auto;
  height: 56px;
  padding: 20px;
  border-radius: 12px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ToastMessage_module_label__ce6e9106 {
  margin: 0 8px;
  cursor: text;
}
.player.player-sm .ToastMessage_module_label__ce6e9106 {
  margin: 0 12px;
}
.player.player-md .ToastMessage_module_label__ce6e9106 {
  margin: 0 12px;
}
.player.player-lg .ToastMessage_module_label__ce6e9106 {
  margin: 0 12px;
}
.player.player-xl .ToastMessage_module_label__ce6e9106 {
  margin: 0 12px;
}
.player.player-xxl .ToastMessage_module_label__ce6e9106 {
  margin: 0 12px;
}
.player.player-xxl .ToastMessage_module_label__ce6e9106 {
  margin: 0 12px 0 16px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.CloseToastButton_module_close__a71d1b4f.CloseToastButton_module_selected__a71d1b4f {
  background: rgba(255, 255, 255, 0.2);
}
.RemoteComponent_module_remoteComponent__c2722e03 {
  border: none;
  width: 100%;
  height: 100%;
  opacity: 0;
  background-color: transparent;
}
.RemoteComponent_module_remoteComponent__c2722e03.RemoteComponent_module_loaded__c2722e03 {
  opacity: 1;
}

.RemoteComponent_module_spinner__c2722e03 {
  opacity: 0;
}
.RemoteComponent_module_spinner__c2722e03.RemoteComponent_module_visible__c2722e03 {
  opacity: 1;
}
.Image_module_image__2d6414b2 {
  background: no-repeat center center;
  background-size: cover;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
button.CopyEmbedCodeButton_module_copyEmbedCodeButton__9ab4105c {
  padding: 10.5px;
  margin: 0 0 0 10px;
  flex: 0 0 auto;
  font-size: 1.4em;
  font-weight: bold;
  border-radius: 5px;
  appearance: none;
  border: 0;
  background-color: var(--color-two);
  color: var(--color-two-monochrome);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.EmbedShare_module_embedShareContainer__ce226e34 {
  position: absolute;
  top: 0;
  width: 150%;
}
.EmbedShare_module_embedShareContainer__ce226e34.EmbedShare_module_hidden__ce226e34 {
  pointer-events: none;
}
.EmbedShare_module_embedShareContainer__ce226e34 .EmbedShare_module_shareFootnote__ce226e34 a {
  font-weight: bold;
  margin: 0;
  color: #fff;
}

.EmbedShare_module_embedShareTitle__ce226e34 {
  margin: 0 auto 0.6em;
  line-height: 1;
  font-size: 2.4em;
  user-select: text;
}

.EmbedShare_module_embedShareSubtitle__ce226e34 {
  margin: 16.8px 14px 21px;
}
@media (max-height: 175px) {
  .EmbedShare_module_embedShareSubtitle__ce226e34 {
    display: none;
  }
}

.EmbedShare_module_embedShareEmbedCode__ce226e34 {
  margin: 15px auto 0;
  display: flex;
  justify-content: center;
  width: 85%;
}
.EmbedShare_module_embedShareEmbedCode__ce226e34 > div {
  flex: 1 1 auto;
}

input.EmbedShare_module_embedInput__ce226e34 {
  margin: 0;
  padding: 10.5px;
  width: 100%;
  font-family: "Inconsolata", "Monaco", "Consolas", "Courier New", "Courier", monospace;
  font-size: 1.4em;
  color: #4e595d;
  font-weight: normal;
  cursor: text;
  border-radius: 5px;
  background-color: #fff;
}

.EmbedShare_module_embedOnlyShare__ce226e34 {
  transform: translateX(-17%);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
p.shared_module_shareFootnote__360a097f {
  font-size: 1.4em;
  line-height: 1;
  font-weight: normal;
}
p.shared_module_shareFootnote__360a097f a {
  user-select: text;
}
p.shared_module_shareFootnote__360a097f a,
p.shared_module_shareFootnote__360a097f button {
  margin: 0 0.25em;
}
p.shared_module_shareFootnote__360a097f a:hover {
  color: #00adef;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.SocialShareLink_module_shareButton__cb9db123 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  font-size: 1.2em;
  line-height: 1;
  border-radius: inherit;
  position: relative;
}
.SocialShareLink_module_shareButton__cb9db123:hover, .SocialShareLink_module_shareButton__cb9db123:active {
  background-color: rgba(0, 0, 0, 0.15);
}
.SocialShareLink_module_shareButton__cb9db123:focus {
  outline-color: #00adef;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.SocialShare_module_socialShareContainer__241f1ad7 {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7 {
  font-size: 1.2em;
  color: #fff;
  /* stylelint-disable-next-line value-no-vendor-prefix */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 200px;
}
.SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7:hover {
  color: #00adef;
}
.player.player-sm .SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7 {
  font-size: 1.4em;
  max-width: 100%;
}
.player.player-md .SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7 {
  font-size: 1.4em;
  max-width: 100%;
}
.player.player-lg .SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7 {
  font-size: 1.4em;
  max-width: 100%;
}
.player.player-xl .SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7 {
  font-size: 1.4em;
  max-width: 100%;
}
.player.player-xxl .SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7 {
  font-size: 1.4em;
  max-width: 100%;
}
.player.player-xl .SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7 {
  font-size: 1.6em;
}
.player.player-xxl .SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7 {
  font-size: 1.6em;
}
.player.player-xxl .SocialShare_module_socialShareContainer__241f1ad7 a.SocialShare_module_clipUrl__241f1ad7 {
  font-size: 1.8em;
}
.SocialShare_module_socialShareContainer__241f1ad7 .SocialShare_module_hidden__241f1ad7 {
  pointer-events: none;
}

.SocialShare_module_shareTitle__241f1ad7 {
  font-size: 1.8em;
  margin-bottom: 0;
}
.player.player-sm .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 2.4em;
}
.player.player-md .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 2.4em;
}
.player.player-lg .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 2.4em;
}
.player.player-xl .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 2.4em;
}
.player.player-xxl .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 2.4em;
}
.player.player-lg .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 3.2em;
}
.player.player-xl .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 3.2em;
}
.player.player-xxl .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 3.2em;
}
.player.player-xl .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 4em;
}
.player.player-xxl .SocialShare_module_shareTitle__241f1ad7 {
  font-size: 4em;
}

.SocialShare_module_shareOptions__241f1ad7 {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  width: auto;
}
.player.player-sm .SocialShare_module_shareOptions__241f1ad7 {
  flex-direction: row;
  gap: 16px;
}
.player.player-md .SocialShare_module_shareOptions__241f1ad7 {
  flex-direction: row;
  gap: 16px;
}
.player.player-lg .SocialShare_module_shareOptions__241f1ad7 {
  flex-direction: row;
  gap: 16px;
}
.player.player-xl .SocialShare_module_shareOptions__241f1ad7 {
  flex-direction: row;
  gap: 16px;
}
.player.player-xxl .SocialShare_module_shareOptions__241f1ad7 {
  flex-direction: row;
  gap: 16px;
}
.player.player-md .SocialShare_module_shareOptions__241f1ad7 {
  margin: 0 auto;
}
.player.player-lg .SocialShare_module_shareOptions__241f1ad7 {
  margin: 0 auto;
}
.player.player-xl .SocialShare_module_shareOptions__241f1ad7 {
  margin: 0 auto;
}
.player.player-xxl .SocialShare_module_shareOptions__241f1ad7 {
  margin: 0 auto;
}

.SocialShare_module_shareButtons__241f1ad7 {
  display: flex;
  gap: 8px;
  color: #fff;
  padding: 0;
  list-style: none;
  margin: 0 auto;
  justify-content: center;
  width: auto;
  height: 24px;
}
.player.player-xs .SocialShare_module_shareButtons__241f1ad7 {
  height: 32px;
}
.player.player-sm .SocialShare_module_shareButtons__241f1ad7 {
  height: 32px;
}
.player.player-md .SocialShare_module_shareButtons__241f1ad7 {
  height: 32px;
}
.player.player-lg .SocialShare_module_shareButtons__241f1ad7 {
  height: 32px;
}
.player.player-xl .SocialShare_module_shareButtons__241f1ad7 {
  height: 32px;
}
.player.player-xxl .SocialShare_module_shareButtons__241f1ad7 {
  height: 32px;
}
.player.player-sm .SocialShare_module_shareButtons__241f1ad7 {
  height: 40px;
}
.player.player-md .SocialShare_module_shareButtons__241f1ad7 {
  height: 40px;
}
.player.player-lg .SocialShare_module_shareButtons__241f1ad7 {
  height: 40px;
}
.player.player-xl .SocialShare_module_shareButtons__241f1ad7 {
  height: 40px;
}
.player.player-xxl .SocialShare_module_shareButtons__241f1ad7 {
  height: 40px;
}
.player.player-xl .SocialShare_module_shareButtons__241f1ad7 {
  height: 48px;
}
.player.player-xxl .SocialShare_module_shareButtons__241f1ad7 {
  height: 48px;
}
.player.player-xxl .SocialShare_module_shareButtons__241f1ad7 {
  height: 56px;
}
.SocialShare_module_shareButtons__241f1ad7.SocialShare_module_hidden__241f1ad7 {
  opacity: 0;
}

.SocialShare_module_shareButtonItem__241f1ad7 {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  border-radius: 4px;
  background-color: var(--color-two);
  color: var(--color-two-monochrome);
  width: 24px;
}
.player.player-xs .SocialShare_module_shareButtonItem__241f1ad7 {
  width: 32px;
}
.player.player-sm .SocialShare_module_shareButtonItem__241f1ad7 {
  width: 32px;
}
.player.player-md .SocialShare_module_shareButtonItem__241f1ad7 {
  width: 32px;
}
.player.player-lg .SocialShare_module_shareButtonItem__241f1ad7 {
  width: 32px;
}
.player.player-xl .SocialShare_module_shareButtonItem__241f1ad7 {
  width: 32px;
}
.player.player-xxl .SocialShare_module_shareButtonItem__241f1ad7 {
  width: 32px;
}
.player.player-sm .SocialShare_module_shareButtonItem__241f1ad7 {
  border-radius: 8px;
  width: 40px;
}
.player.player-md .SocialShare_module_shareButtonItem__241f1ad7 {
  border-radius: 8px;
  width: 40px;
}
.player.player-lg .SocialShare_module_shareButtonItem__241f1ad7 {
  border-radius: 8px;
  width: 40px;
}
.player.player-xl .SocialShare_module_shareButtonItem__241f1ad7 {
  border-radius: 8px;
  width: 40px;
}
.player.player-xxl .SocialShare_module_shareButtonItem__241f1ad7 {
  border-radius: 8px;
  width: 40px;
}
.player.player-xl .SocialShare_module_shareButtonItem__241f1ad7 {
  width: 48px;
}
.player.player-xxl .SocialShare_module_shareButtonItem__241f1ad7 {
  width: 48px;
}
.player.player-xxl .SocialShare_module_shareButtonItem__241f1ad7 {
  border-radius: 12px;
  width: 56px;
}
.SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 16px;
  height: 16px;
}
.player.player-xs .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-sm .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-md .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-lg .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-xl .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-xxl .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-sm .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-md .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-lg .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-xl .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-xxl .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 20px;
  height: 20px;
}
.player.player-xxl .SocialShare_module_shareButtonItem__241f1ad7 svg {
  width: 28px;
  height: 28px;
}

.SocialShare_module_linkWrapper__241f1ad7 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 12px 0;
}
.player.player-sm .SocialShare_module_linkWrapper__241f1ad7 {
  margin: 16px 0;
}
.player.player-md .SocialShare_module_linkWrapper__241f1ad7 {
  margin: 16px 0;
}
.player.player-lg .SocialShare_module_linkWrapper__241f1ad7 {
  margin: 16px 0;
}
.player.player-xl .SocialShare_module_linkWrapper__241f1ad7 {
  margin: 16px 0;
}
.player.player-xxl .SocialShare_module_linkWrapper__241f1ad7 {
  margin: 16px 0;
}

.SocialShare_module_copyLinkButton__241f1ad7 {
  margin-left: 8px;
  opacity: 1;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.SegmentShareInputs_module_segmentShareWrapper__d711f219 {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.SegmentShareInputs_module_checkboxContainer__d711f219 {
  position: relative;
  cursor: pointer;
  user-select: none;
}

.SegmentShareInputs_module_customCheckbox__d711f219 {
  height: 20px;
  width: 20px;
  border: 1px solid #fff;
  border-radius: 2px;
  display: block;
}
.SegmentShareInputs_module_customCheckbox__d711f219::after {
  content: "";
  position: absolute;
  display: none;
  left: 34%;
  top: 14%;
  width: 6px;
  height: 12px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  border-bottom-right-radius: 1px;
  transform: rotate(45deg);
}
.SegmentShareInputs_module_customCheckbox__d711f219.SegmentShareInputs_module_checked__d711f219 {
  background-color: rgba(255, 255, 255, 0.9);
  padding: 1px;
}
.SegmentShareInputs_module_customCheckbox__d711f219.SegmentShareInputs_module_checked__d711f219::after {
  display: block;
}

.SegmentShareInputs_module_inputWithError__d711f219 {
  position: relative;
  display: flex;
  gap: 8px;
}

.SegmentShareInputs_module_inputWrapper__d711f219 {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  max-width: 80px;
}
.player.player-sm .SegmentShareInputs_module_inputWrapper__d711f219 {
  max-width: 100px;
}
.player.player-md .SegmentShareInputs_module_inputWrapper__d711f219 {
  max-width: 100px;
}
.player.player-lg .SegmentShareInputs_module_inputWrapper__d711f219 {
  max-width: 100px;
}
.player.player-xl .SegmentShareInputs_module_inputWrapper__d711f219 {
  max-width: 100px;
}
.player.player-xxl .SegmentShareInputs_module_inputWrapper__d711f219 {
  max-width: 100px;
}
.SegmentShareInputs_module_inputWrapper__d711f219:focus-within {
  outline: 2px solid #00adef;
  outline-offset: 2px;
}
.SegmentShareInputs_module_inputWrapper__d711f219:has(input:invalid) {
  outline: 2px solid #f44;
  outline-offset: 2px;
}

.SegmentShareInputs_module_errorMessage__d711f219 {
  position: absolute;
  bottom: -20px;
  left: 0;
  color: #f44;
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  padding-top: 4px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
input.TimeInput_module_segmentShareInput__87e7fee4 {
  width: 100%;
  color: #fff;
  background-color: transparent;
  border: none;
  padding-top: 12px;
  padding-left: 12px;
  height: 32px;
  font-size: 1.4em;
}
.player.player-sm input.TimeInput_module_segmentShareInput__87e7fee4 {
  height: 40px;
  padding-top: 16px;
}
.player.player-md input.TimeInput_module_segmentShareInput__87e7fee4 {
  height: 40px;
  padding-top: 16px;
}
.player.player-lg input.TimeInput_module_segmentShareInput__87e7fee4 {
  height: 40px;
  padding-top: 16px;
}
.player.player-xl input.TimeInput_module_segmentShareInput__87e7fee4 {
  height: 40px;
  padding-top: 16px;
}
.player.player-xxl input.TimeInput_module_segmentShareInput__87e7fee4 {
  height: 40px;
  padding-top: 16px;
}
.player.player-xl input.TimeInput_module_segmentShareInput__87e7fee4 {
  font-size: 1.6em;
  height: 48px;
}
.player.player-xxl input.TimeInput_module_segmentShareInput__87e7fee4 {
  font-size: 1.6em;
  height: 48px;
}
.player.player-xxl input.TimeInput_module_segmentShareInput__87e7fee4 {
  height: 56px;
}
input.TimeInput_module_segmentShareInput__87e7fee4:focus {
  outline: none;
}
input.TimeInput_module_segmentShareInput__87e7fee4::placeholder {
  color: rgba(255, 255, 255, 0.6);
  opacity: 1;
  padding-top: 2px;
}

.TimeInput_module_floatingLabel__87e7fee4 {
  position: absolute;
  left: 12px;
  top: 4px;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1em;
  line-height: 1;
  pointer-events: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.player.player-sm .TimeInput_module_floatingLabel__87e7fee4 {
  top: 8px;
}
.player.player-md .TimeInput_module_floatingLabel__87e7fee4 {
  top: 8px;
}
.player.player-lg .TimeInput_module_floatingLabel__87e7fee4 {
  top: 8px;
}
.player.player-xl .TimeInput_module_floatingLabel__87e7fee4 {
  top: 8px;
}
.player.player-xxl .TimeInput_module_floatingLabel__87e7fee4 {
  top: 8px;
}
.player.player-md .TimeInput_module_floatingLabel__87e7fee4 {
  top: 8px;
}
.player.player-lg .TimeInput_module_floatingLabel__87e7fee4 {
  top: 8px;
}
.player.player-xl .TimeInput_module_floatingLabel__87e7fee4 {
  top: 8px;
}
.player.player-xxl .TimeInput_module_floatingLabel__87e7fee4 {
  top: 8px;
}
.player.player-xxl .TimeInput_module_floatingLabel__87e7fee4 {
  font-size: 1.2em;
  top: 12px;
}
.TimeInput_module_segmentShareInput__87e7fee4:focus + .TimeInput_module_floatingLabel__87e7fee4, .TimeInput_module_segmentShareInput__87e7fee4:valid + .TimeInput_module_floatingLabel__87e7fee4 {
  color: #fff;
}
.TimeInput_module_floatingLabel__87e7fee4.TimeInput_module_inline__87e7fee4 {
  transform: translateY(50%) scale(1);
  font-size: 1.4em;
}
.player.player-xl .TimeInput_module_floatingLabel__87e7fee4.TimeInput_module_inline__87e7fee4 {
  font-size: 1.6em;
}
.player.player-xxl .TimeInput_module_floatingLabel__87e7fee4.TimeInput_module_inline__87e7fee4 {
  font-size: 1.6em;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.Share_module_shareWrapper__b91002f4 {
  position: relative;
  display: inline-block;
  min-width: 30em;
  max-width: 80%;
  text-align: center;
}

.Share_module_backButton__b91002f4 {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateX(1.5em);
  transition: transform 0.2s, opacity 0.2s;
  opacity: 0;
  background: 0 0;
  appearance: none;
  border: none;
}
.Share_module_backButton__b91002f4.Share_module_visible__b91002f4 {
  opacity: 0.7;
  transform: translateX(0);
}

.Share_module_backButtonIcon__b91002f4 {
  font-size: 16px;
  height: 1.5em;
  width: auto;
  margin: 1.25em;
}
.Share_module_backButtonIcon__b91002f4 path {
  fill: #fff;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ValidationBubble_module_validationBubble__6b620843 {
  display: inline-block;
  position: absolute;
  z-index: 1;
  pointer-events: none;
  left: 0;
}

.ValidationBubble_module_message__6b620843 {
  display: block;
  position: relative;
  font-size: 1em;
  letter-spacing: 0.4px;
  border-radius: 4px;
  padding: 4px 8px;
  min-width: 5em;
  max-width: 40em;
  background-color: rgb(227, 79, 79);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.BaseError_module_error__896e096f {
  display: flex;
  justify-content: center;
  user-select: text;
  flex-direction: column;
  width: 100%;
  padding: 0 18px;
  align-items: center;
}
.BaseError_module_error__896e096f a {
  color: #00adef;
}
.BaseError_module_error__896e096f a:hover {
  color: #ff5210;
}
.BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  padding: 0;
  font-size: 18px;
  margin-bottom: 8px;
  font-weight: bold;
}
.player.player-sm .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 18px;
}
.player.player-md .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 18px;
}
.player.player-lg .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 18px;
}
.player.player-xl .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 18px;
}
.player.player-xxl .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 18px;
}
.player.player-md .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 24px;
}
.player.player-lg .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 24px;
}
.player.player-xl .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 24px;
}
.player.player-xxl .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 24px;
}
.player.player-lg .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 32px;
}
.player.player-xl .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 32px;
}
.player.player-xxl .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 32px;
}
.player.player-xl .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 40px;
}
.player.player-xxl .BaseError_module_error__896e096f h1.BaseError_module_header__896e096f {
  font-size: 40px;
}

.BaseError_module_description__896e096f {
  line-height: 1.5;
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 14px;
}
.player.player-sm .BaseError_module_description__896e096f {
  width: 66.6666666667%;
}
.player.player-md .BaseError_module_description__896e096f {
  width: 50%;
}
.player.player-lg .BaseError_module_description__896e096f {
  width: 41.6666666667%;
}
.player.player-xl .BaseError_module_description__896e096f {
  width: 33.3333333333%;
}
.player.player-xxl .BaseError_module_description__896e096f {
  width: 25%;
}
.player.player-lg .BaseError_module_description__896e096f {
  font-size: 16px;
}
.player.player-xl .BaseError_module_description__896e096f {
  font-size: 16px;
}
.player.player-xxl .BaseError_module_description__896e096f {
  font-size: 16px;
}
.player.player-xl .BaseError_module_description__896e096f {
  font-size: 18px;
}
.player.player-xxl .BaseError_module_description__896e096f {
  font-size: 18px;
}
@media (max-width: 299px), (max-height: 169px) {
  .BaseError_module_description__896e096f {
    display: none;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.CloseOverlayButton_module_closeOverlayButton__74aa447b {
  pointer-events: all;
  position: absolute;
  right: 0;
  opacity: 0.7;
  background: none;
}
.CloseOverlayButton_module_closeOverlayButton__74aa447b:hover {
  opacity: 1;
}
.CloseOverlayButton_module_closeOverlayButton__74aa447b svg {
  width: 40px;
  height: 40px;
  margin: 8px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.OverlayBase_module_overlayCell__61370790 {
  width: 100%;
  height: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  pointer-events: all;
}

.OverlayBase_module_overlayWrapper__61370790 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 29;
  transition: background-color 200ms;
  background-position: center center;
  background-size: cover;
  text-align: center;
  display: block;
  background-image: linear-gradient(to bottom, rgba(20, 21, 22, 0.3), #141516);
  z-index: 32;
  user-select: text;
}
.OverlayBase_module_overlayWrapper__61370790.OverlayBase_module_hidden__61370790 * {
  pointer-events: none;
}
.OverlayBase_module_overlayWrapper__61370790 .OverlayBase_module_overlayNav__61370790 {
  opacity: 1;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 33;
}

.OverlayBase_module_overlay__61370790 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: scale(0.9, 0.9);
  transition: transform 105ms, opacity 105ms;
}
.OverlayBase_module_overlay__61370790.OverlayBase_module_visible__61370790 {
  transition: transform 200ms, opacity 105ms;
  transform: scale(1, 1);
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.SendDebugButton_module_button__e51d0bfb {
  border: none;
  padding: 3px;
  border-radius: 3px;
  margin-left: 5px;
  display: inline-block;
  background-color: var(--color-two);
  color: var(--color-two-monochrome);
}
.SendDebugButton_module_button__e51d0bfb:hover:not(:active) {
  border: none;
}
.SendDebugButton_module_button__e51d0bfb.SendDebugButton_module_large__e51d0bfb {
  padding: 10px;
  font-size: 1.2em;
  margin: 0;
  border-radius: 4px;
}
@media (max-width: 299px), (max-height: 169px) {
  .SendDebugButton_module_button__e51d0bfb.SendDebugButton_module_large__e51d0bfb {
    padding: 4px;
  }
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ContentAreaCloseButton_module_closeContentAreaButton__8960d891 {
  position: absolute;
  top: 16px;
  right: 16px;
  border-width: 0;
}
.ContentAreaCloseButton_module_closeContentAreaButton__8960d891, .ContentAreaCloseButton_module_closeContentAreaButton__8960d891:hover, .ContentAreaCloseButton_module_closeContentAreaButton__8960d891:focus, .ContentAreaCloseButton_module_closeContentAreaButton__8960d891:active {
  background-color: transparent !important;
}
.right-content-area-supported.app-xs .ContentAreaCloseButton_module_closeContentAreaButton__8960d891, .right-content-area-supported.app-xxs .ContentAreaCloseButton_module_closeContentAreaButton__8960d891, .right-content-area-supported.app-tiny .ContentAreaCloseButton_module_closeContentAreaButton__8960d891, .right-content-area-supported.app-mini .ContentAreaCloseButton_module_closeContentAreaButton__8960d891 {
  top: 8px;
  right: 8px;
}

.ContentAreaCloseButton_module_tooltip__8960d891 {
  top: 3.6em;
  bottom: auto;
  pointer-events: none;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.ContentAreaMessage_module_container__3b7e983a {
  display: flex;
  position: absolute;
  pointer-events: all;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0 48px;
  gap: 24px;
  width: 100%;
}
.ContentAreaMessage_module_container__3b7e983a .ContentAreaMessage_module_messageText__3b7e983a {
  text-align: center;
}
.ContentAreaMessage_module_container__3b7e983a .ContentAreaMessage_module_icon__3b7e983a {
  width: 40px;
  height: 40px;
}
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/* need to keep this in sync with CONTENT_AREA_ANIMATION_SPEED_MS in constants/animation.js */
/* this is required since css module compilation is separate from the existing SASS build pipeline */
/*
    Prevents a flicker on Safari when other elements are animating
    @see https://stackoverflow.com/questions/15751012/
    css-transform-causes-flicker-in-safari-but-only-when-the-browser-is-2000px-w
*/
.shared_module_roundedBox__29a0c6d5 {
  background: rgba(0, 0, 0, 0.9);
  border-radius: 0.5em;
}

.shared_module_hidden__29a0c6d5 {
  display: none !important;
}

.shared_module_focusable__29a0c6d5, .showfocus .shared_module_focusableButton__29a0c6d5:focus::after, .showfocus .shared_module_focusableCircle__29a0c6d5:focus::after, .showfocus .shared_module_focusableMarker__29a0c6d5:focus::after,
.shared_module_focusableMarker__29a0c6d5,
.shared_module_focusableCircle__29a0c6d5,
.shared_module_focusableButton__29a0c6d5 {
  /* stylelint-disable-line css-modules/no-undef-class */
  /*
      These classes have to be declared outside of the `:global` wrapper
      in order for style lint to verify they exist.

      I was hoping this release would fix the issue:
      https://github.com/atfzl/eslint-plugin-css-modules/pull/82
      but it did not seem to, so I have declare them with an empty
      block for now (necessitating the style-lint exception).
      Hoping a future release solves this issue.
  */
}

.showfocus .shared_module_focusable__29a0c6d5, .showfocus .shared_module_focusableButton__29a0c6d5:focus::after, .showfocus .shared_module_focusableCircle__29a0c6d5:focus::after, .showfocus .shared_module_focusableMarker__29a0c6d5:focus::after,
.showfocus .shared_module_focusableCircle__29a0c6d5,
.showfocus .shared_module_focusableButton__29a0c6d5 {
  /*
      This is to disable the global style `.player *:focus { outline: none; }` in player.scss
      on the element itself.

      We want to render the focus ring using the `::after` pseudo element
      so that it respects the shape of the element.

      Defining this within the `global(...)` wrapper so that the specificity is higher
      we don't have to use `!important` to override the player.scss styles.
  */
  outline: none;
}
.showfocus .shared_module_focusable__29a0c6d5:focus::after, .showfocus .shared_module_focusableButton__29a0c6d5:focus::after, .showfocus .shared_module_focusableCircle__29a0c6d5:focus::after, .showfocus .shared_module_focusableMarker__29a0c6d5:focus::after {
  content: "";
  pointer-events: none;
  position: absolute;
  border: 2px solid #000;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  top: -4px;
  left: -4px;
  border-radius: 8px;
  z-index: 1;
  outline: 2px solid #00adef;
  outline-offset: -4px;
}
.showfocus .shared_module_focusableMarker__29a0c6d5:focus::after {
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  top: -6px;
  left: -6px;
  border-radius: 12px;
}
.showfocus .shared_module_focusableCircle__29a0c6d5:focus::after {
  border-radius: 50%;
}
.showfocus .shared_module_focusableButton__29a0c6d5:focus::after {
  border-radius: 12px;
}
.showfocus .player.app-xxs .shared_module_focusableButton__29a0c6d5:focus::after,
.showfocus .player.app-xs .shared_module_focusableButton__29a0c6d5:focus::after,
.showfocus .player.app-tiny .shared_module_focusableButton__29a0c6d5:focus::after,
.showfocus .player.app-mini .shared_module_focusableButton__29a0c6d5:focus::after {
  border-radius: 8px;
}

.shared_module_visuallyHidden__29a0c6d5 {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  white-space: nowrap;
}