:root {
  --s72p-font-family: "Poppins";
  --s72p-font-fallbacks:
    system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
    "Noto Color Emoji";
  --s72p-font-stack: var(--s72p-font-family), var(--s72p-font-fallbacks);
  --s72p-text-color: #ddd;
  --s72p-button-primary-text-color: #000;
  --s72p-button-primary-text-color--hover: var(--s72p-button-primary-text-color);
  --s72p-button-primary-border-color: transparent;
  --s72p-button-primary-border-color--hover: transparent;
  --s72p-button-primary-bg-color: #00a3ff;
  --s72p-button-primary-bg-color--hover: #66c7ff;
  --s72p-panel-bg-color: #222;
  --s72p-panel-text-color: var(--s72p-text-color);
  --s72p-panel-border: 1px solid rgba(85, 85, 85, 0.25);
  --s72p-panel-border-radius: 4px;
  --s72p-panel-box-shadow: inset 0px 0px 3px rgba(255, 255, 255, 0.05), 0px 3px 15px 3px rgba(0, 0, 0, 0.15);
  --s72p-control-color: #ddd;
  --s72p-popup-bg: rgba(17, 17, 17, 0.85);
  --s72p-popup-border: 0 none;
  --s72p-popup-border-radius: 4px;
  --s72p-menu-item-padding-x: 0.5em;
  --s72p-menu-item-padding-y: 0.5em;
  --s72p-menu-button-hover-bg: rgba(68, 68, 68, 0.85);
  --s72p-popup-scrollbar-bg: transparent;
  --s72p-popup-scrollbar-color: #222;
  --s72p-progress-bg: rgba(221, 221, 221, 0.2);
  --s72p-progress-track-color: #ddd;
  --s72p-progress-buffer-color: rgba(221, 221, 221, 0.3);
  --s72p-progress-duration-live-bg: rgb(224, 49, 49);
}

/* For containers which host elements overlaying other things. */
/* For things which overlay other things. */
/* Each browser has a different prefixed pseudo-class for fullscreened elements.
 * Define the properties of a fullscreened element in a mixin, then apply to
 * each of the browser-specific pseudo-classes.
 * NOTE: These fullscreen pseudo-classes can't be combined with commas into a
 * single delcaration.  Browsers ignore the rest of the list once they hit one
 * pseudo-class they don't support. */
/* For things that should not shrink inside a flex container.
 * This will be used for all controls by default. */
/* Use this to override .unshrinkable() in particular cases that *should* shrink
 * inside a flex container. */
.s72p-slider-container {
  position: relative;
  width: 100%;
  /* Smaller height to contain the background for the virtual track. */
  height: 0.7em;
  background: transparent;
  outline: none;
  cursor: pointer;
}

.s72p-slider-bar {
  /* This contains an input element which overlays it. */
  /* For a detailed explanation of how this achieves an overlay, please refer
   * to https://developer.mozilla.org/en-US/docs/Web/CSS/position .
   *
   * But you don't have to, because we've encapsulated these high level
   * concepts into classes.
   *
   * This makes it possible for some children of this container to overlay the
   * others using .overlay-child(). */
  position: relative;
  /* Make sure any top or left styles applied from outside don't move this from
   * it's original position, now that it's relative to that original position.
   * This is a defensive move that came out of intensive debugging on IE 11. */
  top: 0;
  left: 0;
  width: 100%;
  top: auto;
  height: 0.15em;
  margin: 0.275em 0;
  background: rgba(255, 255, 255, 0.3);
  transition: height 100ms ease-in-out, margin 100ms ease-in-out;
  border-radius: 1em;
}

.s72p-slider-bar:focus {
  outline: none;
}

.s72p-slider-value {
  /* Overlay and fill the container div. */
  /* For a detailed explanation of how this achieves an overlay, please refer
   * to https://developer.mozilla.org/en-US/docs/Web/CSS/position .
   *
   * But you don't have to, because we've encapsulated these high level
   * concepts into classes.
   *
   * This makes it possible for this child to overlay the other children of a
   * .overlay-parent() object. */
  position: absolute;
  /* Fill the container by default. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  height: 100%;
  user-select: none;
  background: white;
  position: relative;
  width: 0;
  z-index: 2;
  border-radius: 1em;
}

.s72p-slider-value:after {
  content: "";
  border-radius: 50%;
  background: white;
  width: 0.7em;
  height: 0.7em;
  position: absolute;
  right: -0.35em;
  top: -0.275em;
  transition: top 100ms ease-in-out;
  background: white;
}

.s72p-progress-bar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}

.s72p-progress-bar.s72p-progress-bar-live {
  justify-content: flex-end;
}

.s72p-progress-bar.s72p-progress-bar-live .s72p-progress-duration {
  background: var(--s72p-progress-duration-live-bg);
  border-radius: 2em;
  padding: 0.5em 0.75em;
  display: flex;
  align-items: center;
}

.s72p-progress-bar.s72p-progress-bar-live .s72p-progress-duration:before {
  content: "";
  background: var(--s72p-control-color);
  width: 0.8em;
  height: 0.8em;
  border-radius: 100%;
  margin-right: 0.5em;
}

.s72p-button.s72p-progress-current-time,
.s72p-button.s72p-progress-duration {
  margin: 0 1em;
  font-size: 1em;
  padding: 0;
  text-shadow: 0 0 0.3em rgba(0, 0, 0, 0.4);
}

.s72p-progress-slider-container {
  flex-grow: 1;
  width: auto;
}

.s72p-progress-slider-container .s72p-progress-slider {
  background: var(--s72p-progress-bg);
}

.s72p-progress-slider-container .s72p-slider-value {
  background: var(--s72p-progress-track-color);
}

.s72p-progress-slider-container .s72p-slider-value:after {
  opacity: 0;
  transform: scale(0);
  transition-property: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.s72p-progress-slider-container:hover .s72p-slider-value:after {
  transform: scale(1);
  opacity: 1;
}

.s72p-progress-slider-container .s72p-slider {
  padding: 0 0.6em;
}

.s72p-progress-slider-buffer {
  /* Overlay and fill the container div. */
  /* For a detailed explanation of how this achieves an overlay, please refer
   * to https://developer.mozilla.org/en-US/docs/Web/CSS/position .
   *
   * But you don't have to, because we've encapsulated these high level
   * concepts into classes.
   *
   * This makes it possible for this child to overlay the other children of a
   * .overlay-parent() object. */
  position: absolute;
  /* Fill the container by default. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  height: 75%;
  margin: auto 0;
  background: var(--s72p-progress-buffer-color);
  z-index: 1;
  border-radius: 1em;
}

.s72p-progress-slider-hover {
  opacity: 0;
  transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 300ms;
  position: absolute;
  bottom: 1em;
  background: #222;
  color: #fff;
  padding: 0.2em 0.3em;
  border-radius: 0.2em;
  border: 1px solid rgba(0, 0, 0, 0.3);
  user-select: none;
  z-index: 2;
}

.s72p-logo {
  width: 1.5em;
  height: 1.5em;
  fill: var(--s72p-control-color);
  opacity: 0.6;
  margin: 1em;
  transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 100ms;
}

.s72p-logo:hover {
  opacity: 1;
}

.s72p-logo:hover > svg {
  filter: drop-shadow(0 0 0.5em var(--s72p-control-color));
}

.s72p-popup {
  position: absolute;
  bottom: 60px;
  right: 1em;
  text-align: left;
  display: none;
  z-index: 2;
  color: var(--s72p-control-color);
  background: var(--s72p-popup-bg);
  border: var(--s72p-popup-border);
  border-radius: var(--s72p-popup-border-radius);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--s72p-popup-scrollbar-bg) var(--s72p-popup-scrollbar-color);
}

.s72p-popup-scrollbar, .s72p-popup::-webkit-scrollbar {
  background: var(--s72p-popup-scrollbar-bg);
  width: 0.5em;
}

.s72p-popup-scrollbar-thumb, .s72p-popup::-webkit-scrollbar-thumb {
  border-radius: 1em;
  background: var(--s72p-popup-scrollbar-color);
  border: 3px solid var(--s72p-popup-scrollbar-color);
}

.s72p-button {
  color: var(--s72p-control-color);
  padding: 0.5em;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  font-size: 1em;
  cursor: pointer;
}

.s72p-button:disabled {
  color: rgba(255, 255, 255, 0.3);
}

.s72p-icon {
  display: block;
  font-size: 1.6em;
}

.s72p-icon-button {
  --s72p-icon-button-bg: transparent;
  --s72p-icon-button-bg-hover: rgba(170, 170, 170, 0.2);
  --s72p-icon-button-bg-disabled: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.4em;
  color: var(--s72p-control-color);
  background-color: var(--s72p-icon-button-bg);
  border: 0;
  border-radius: 0.15em;
  cursor: pointer;
  padding: 0.4em;
  margin: 0.1em;
  gap: 0.25em;
  transition: background-color 50ms;
}

.s72p-icon-button--text-below {
  flex-direction: column;
}

.s72p-icon-button__label {
  font-size: 0.6em;
}

.s72p-icon-button:active {
  background-color: var(--s72p-icon-button-bg-hover) !important;
  transition-duration: 0ms;
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .s72p-icon-button:hover {
    background-color: var(--s72p-icon-button-bg-hover) !important;
    transition-duration: 0ms;
  }
}
.s72p-icon-button:disabled {
  color: rgba(255, 255, 255, 0.3);
}

.s72p-icon-button:disabled:active, .s72p-icon-button:disabled:hover {
  text-shadow: none;
  background-color: var(--s72p-icon-button-bg-disabled);
}

.s72p-volume-slider {
  min-width: 15px;
  max-width: 50px;
}

.s72p-volume-slider .s72p-slider-value:after {
  content: "";
  border-radius: 50%;
  background: white;
  width: 0.6em;
  height: 0.6em;
  position: absolute;
  right: -0.3em;
  top: -0.225em;
  transition: top 100ms ease-in-out;
}

.s72p-stats-overlay {
  position: absolute;
  left: 1em;
  right: max(100% - 500px, 1em);
  bottom: 2em;
}

.s72p-stats-overlay__box {
  color: var(--s72p-panel-text-color);
  background-color: var(--s72p-panel-bg-color);
  border: var(--s72p-panel-border);
  box-shadow: var(--s72p-panel-box-shadow);
  border-radius: var(--s72p-panel-border-radius);
  position: relative;
  font: 14px sans-serif;
  padding: 1em;
  border-radius: 5px;
  opacity: 0.8;
  margin-bottom: 0.5em;
}

.s72p-stats-overlay__box dl, .s72p-stats-overlay__box dt, .s72p-stats-overlay__box dd {
  margin: 0;
  padding: 0;
}

.s72p-stats-overlay__box dt, .s72p-stats-overlay__box dd {
  float: left;
  width: 50%;
}

.s72p-stats-overlay__box:after {
  content: "";
  clear: both;
  display: block;
}

.s72p-stats-overlay__close {
  position: absolute;
  top: 0.25em;
  right: 0.25em;
  font-size: 0.8em;
}

.s72p-stats-graph {
  width: 100%;
  height: 80px;
}

.s72p-developer-menu {
  display: inline-block;
}

.s72p-developer-menu small {
  color: #aaa;
}

.s72p-developer-menu__dropdown {
  min-width: 350px;
}

.s72p-spinner {
  /* When setting "position: absolute" it uses the left,right,top,bottom
   * properties to determine the positioning.  We should set all these
   * properties to ensure it is positioned properly on all platforms. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  color: #ddd;
  margin: auto;
  width: 4em;
  height: 4em;
  z-index: 3;
  pointer-events: none;
}

.s72p-spinner-svg {
  animation: rotate 1s linear infinite;
}

.s72p-spinner-bg {
  stroke: rgba(17, 17, 17, 0.3);
}

/* This is the path element, which draws a circle. */
.s72p-spinner-path {
  /* Fall back for IE 11, where the stroke properties cannot be animated,
   * but the spinner still rotates. */
  stroke: rgba(221, 221, 221, 0.8);
  stroke-dasharray: 20, 200;
  stroke-dashoffset: 0;
  /* Animate the stroke of this circular path. */
  /* Round the line on the ends. */
  stroke-linecap: round;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
.s72p-poster {
  /* When setting "position: absolute" it uses the left,right,top,bottom
  * properties to determine the positioning.  We should set all these
  * properties to ensure it is positioned properly on all platforms. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  transition: opacity 0.3s linear;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-color: #000;
  display: flex;
}

.s72p-poster-fadeout {
  opacity: 0;
}

.s72p-poster-status {
  background: rgba(0, 0, 0, 0.6);
  flex: 1;
  text-align: center;
  padding: 3em;
}

.s72p-slider {
  --s72p-slider-track-height: 0.15em;
  --s72p-slider-color: #ddd;
  --s72p-slider-padding: 0.5em;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
  outline: none;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.s72p-slider, .s72p-slider * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.s72p-slider[data-slider-changing] {
  --s72p-slider-color: tomato;
}

.s72p-slider__track {
  overflow: hidden;
  flex: 1;
  background-color: rgba(0, 0, 0, 0.2);
  height: var(--s72p-slider-track-height);
  border-radius: 3px;
}

.s72p-slider__bar {
  position: absolute;
  left: 0;
  height: var(--s72p-slider-track-height);
  background-color: var(--s72p-slider-color);
}

.s72p-slider__thumb {
  position: absolute;
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: var(--s72p-slider-color);
  opacity: 0;
  transform: translateX(-50%) scale(0);
  transition-property: transform, opacity;
  transition-duration: 0.3s;
  transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.s72p-slider[data-slider-changing] .s72p-slider__thumb, .s72p-slider:hover:not([data-disabled]) .s72p-slider__thumb {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}

.s72p-slider[data-disabled] .s72p-slider__bar {
  opacity: 0.5;
}

.s72p-loading-spinner {
  animation: s72p-loading-spinner-animation 2s linear infinite;
}

@keyframes s72p-loading-spinner-animation {
  100% {
    transform: rotate(360deg);
  }
}
.s72p-popover {
  display: inline-block;
  position: relative;
}

.s72p-popover__panel {
  position: absolute;
  position: absolute;
  text-align: left;
  z-index: 2;
  color: var(--s72p-control-color);
  background-color: #222;
  border: 1px solid rgba(85, 85, 85, 0.25);
  box-shadow: inset 0px 0px 3px rgba(255, 255, 255, 0.05), 0px 3px 20px 3px rgba(0, 0, 0, 0.3);
  border-radius: var(--s72p-popup-border-radius);
  font-size: 0.8em;
  color: #ddd;
  overflow: hidden;
}

html:not([data-headlessui-focus-visible]) .s72p-popover__panel {
  outline: none;
}

.s72p-popover__panel--placement-over-button {
  left: 0;
  top: 0;
}

.s72p-popover__panel--placement-above {
  bottom: 100%;
}

.s72p-popover__panel--placement-above-left {
  left: 0;
}

.s72p-popover__panel--placement-above-right {
  right: 0;
}

.s72p-popover__panel--placement-below {
  top: 100%;
}

.s72p-popover__panel--placement-below-left {
  left: 0;
}

.s72p-popover__panel--placement-below-right {
  right: 0;
}

.s72p-transition__fade--enter, .s72p-transition__fade--leave {
  transition-duration: var(--s72p-transition-time, 0.25s);
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
}

.s72p-transition__fade--enter-from, .s72p-transition__fade--leave-to {
  opacity: 0;
}

.s72p-transition__fade--enter-to, .s72p-transition__fade--leave-from {
  opacity: 1;
}

.s72p-menu {
  display: inline-block;
}

.s72p-new-menu-container {
  color: var(--s72p-panel-text-color);
  background-color: var(--s72p-panel-bg-color);
  border: var(--s72p-panel-border);
  box-shadow: var(--s72p-panel-box-shadow);
  border-radius: var(--s72p-panel-border-radius);
  position: absolute;
  text-align: left;
  z-index: 2;
  font-size: 0.8em;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 1px;
}

html:not([data-headlessui-focus-visible]) .s72p-new-menu-container {
  outline: none;
}

.s72p-new-menu--placement-above-left {
  left: 0;
  bottom: 100%;
}

.s72p-new-menu--placement-above-right {
  right: 0;
  bottom: 100%;
}

.s72p-new-menu--placement-below-left {
  top: 100%;
  left: 0;
}

.s72p-new-menu--placement-below-right {
  top: 100%;
  right: 0;
}

.s72p-new-menu-scroll-container {
  display: flex;
  flex-direction: column;
  min-width: 12em;
  max-height: 15em;
  overflow-y: auto;
  overflow-x: hidden;
  color: var(--s72p-control-color);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3);
}

.s72p-new-menu-scroll-container::-webkit-scrollbar {
  background-color: transparent;
  width: 6px;
}

.s72p-new-menu-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.s72p-new-menu-scroll-container::-webkit-scrollbar-track {
  background-color: transparent;
}

.s72p-new-menu-item {
  background-color: unset;
  color: var(--s72p-panel-text-color);
  border: none;
  outline: none;
  margin: 0;
  padding: 1em;
  text-align: left;
  font-family: inherit;
}

.s72p-new-menu-item[data-headlessui-state~=active] {
  background-color: rgba(255, 255, 255, 0.05);
}

.s72p-new-menu-transition--above--enter, .s72p-new-menu-transition--above--leave,
.s72p-new-menu-transition--below--enter,
.s72p-new-menu-transition--below--leave {
  transition-duration: 0.25s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
}

.s72p-new-menu-transition--above--enter-from,
.s72p-new-menu-transition--below--enter-from {
  opacity: 0;
}

.s72p-new-menu-transition--above--enter-to,
.s72p-new-menu-transition--below--enter-to {
  opacity: 1;
}

.s72p-new-menu-transition--above--leave-from,
.s72p-new-menu-transition--below--leave-from {
  opacity: 1;
}

.s72p-new-menu-transition--above--leave-to,
.s72p-new-menu-transition--below--leave-to {
  opacity: 0;
}

.s72p-new-menu-transition--above--enter-from {
  transform: translateY(2rem);
}

.s72p-new-menu-transition--above--leave-to {
  transform: translateY(1rem);
}

.s72p-new-menu-transition--below--enter-from {
  transform: translateY(-2rem);
}

.s72p-new-menu-transition--below--leave-to {
  transform: translateY(-1rem);
}

.s72p-media-thumbnail {
  display: flex;
  position: relative;
  border-radius: 5px;
  width: 10em;
  height: auto;
  aspect-ratio: 16/9;
  overflow: hidden;
  justify-content: center;
  align-items: center;
}

.s72p-media-thumbnail__image {
  object-fit: cover;
  object-position: center;
  width: 100%;
  max-width: fit-content;
  max-height: 100%;
  place-self: center;
}

.s72p-media-thumbnail__image, .s72p-media-thumbnail__backdrop-image {
  transition: opacity 0.2s;
  opacity: 0;
}

.s72p-media-thumbnail--loaded .s72p-media-thumbnail__image, .s72p-media-thumbnail--loaded .s72p-media-thumbnail__backdrop-image {
  opacity: 1;
}

.s72p-media-thumbnail__placeholder, .s72p-media-thumbnail__contents, .s72p-media-thumbnail__backdrop-image {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.s72p-media-thumbnail__placeholder {
  z-index: -2;
  background-color: rgba(119, 119, 119, 0.5);
  transition: opacity 0.2s;
  opacity: 1;
}

.s72p-media-thumbnail--loaded .s72p-media-thumbnail__placeholder {
  opacity: 0;
}

.s72p-media-thumbnail__backdrop-image {
  z-index: -1;
  filter: blur(20px);
  background-size: cover;
  background-position: center;
}

.s72p-media-thumbnail__contents {
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.s72p-media-thumbnail--portrait {
  aspect-ratio: 282/422;
}

.s72p-media-thumbnail--landscape {
  aspect-ratio: 585/330;
}

.s72p-settings-menu-item {
  display: flex;
  align-items: center;
  min-width: 22em;
  min-height: 3.2em;
  font-size: inherit;
}

.s72p-settings-menu-item__icon {
  min-width: 2.5em;
  max-width: 2.5em;
  font-size: 1.6em;
  display: flex;
  align-items: center;
  margin-top: -0.5em;
  margin-bottom: -0.5em;
}

.s72p-settings-menu-item__primary {
  flex: 5;
}

.s72p-settings-menu-item__secondary {
  margin-left: 1em;
  flex: 4;
  opacity: 0.8;
  font-size: 0.8em;
}

.s72p-settings-menu-item[data-headlessui-state~=disabled] {
  opacity: 0.5;
}

.s72p-settings-menu-container {
  will-change: width, height;
  transition: all 0.25s;
}

.s72p-settings-menu-contents {
  position: absolute;
  bottom: 0;
  right: 0;
}

.s72p-settings-menu-transition__main--enter, .s72p-settings-menu-transition__main--leave, .s72p-settings-menu-transition__submenu--enter, .s72p-settings-menu-transition__submenu--leave {
  transition-duration: 0.25s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  will-change: width height;
  pointer-events: none;
  overflow: hidden;
}

.s72p-settings-menu-transition__main--enter-from, .s72p-settings-menu-transition__main--leave-to, .s72p-settings-menu-transition__submenu--enter-from, .s72p-settings-menu-transition__submenu--leave-to {
  opacity: 0;
}

.s72p-settings-menu-transition__main--enter-to, .s72p-settings-menu-transition__main--leave-from, .s72p-settings-menu-transition__submenu--enter-to, .s72p-settings-menu-transition__submenu--leave-from {
  opacity: 1;
}

.s72p-settings-menu-transition__main--enter-from, .s72p-settings-menu-transition__main--leave-to {
  transform: translateX(-100%);
}

.s72p-settings-menu-transition__submenu--enter-from, .s72p-settings-menu-transition__submenu--leave-to {
  transform: translateX(100%);
}

.s72p-subtitle-settings {
  min-width: 22em;
}

.s72p-subtitle-settings__body {
  padding: 0 1em 1em;
}

.s72p-subtitle-settings__form-group {
  display: flex;
  min-height: 3.2em;
  align-items: center;
}

.s72p-subtitle-settings__form-group label {
  display: block;
  min-width: 4em;
}

.s72p-subtitle-settings__form-group select {
  display: block;
  flex: 1;
  font-size: 1em;
  color: #ddd;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 0.3em;
  padding: 0.5em;
}

.s72p-control-overlay {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  user-select: none;
}

.s72p-control-overlay .s72p-controlbar-wrapper, .s72p-control-overlay .s72p-title-bar {
  z-index: 1;
}

.s72p-control-overlay .s72p-controlbar {
  flex: 0;
}

.s72p-control-overlay .s72p-control-overlay-content {
  flex: 1;
  position: relative;
}

.s72p-control-overlay .s72p-logo {
  position: absolute;
  bottom: 0;
  right: 0;
}

.s72p-control-overlay .s72p-title-bar {
  transform: none;
}

.s72p-control-overlay .s72p-title-bar.s72p-control-overlay-child--hidden {
  transform: translateY(-0.3em);
}

.s72p-control-overlay .s72p-controlbar-wrapper {
  transform: none;
}

.s72p-control-overlay .s72p-controlbar-wrapper.s72p-control-overlay-child--hidden {
  transform: translateY(0.3em);
}

.s72p-control-overlay__gradient-top, .s72p-control-overlay__gradient-bottom {
  position: absolute;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.85 !important;
}

.s72p-control-overlay__gradient-top {
  top: 0;
  bottom: calc(100% - 10em);
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.11) 33%, rgba(0, 0, 0, 0.22) 49%, rgba(0, 0, 0, 0.33) 59%, rgba(0, 0, 0, 0.44) 67%, rgba(0, 0, 0, 0.56) 73%, rgba(0, 0, 0, 0.67) 79%, rgba(0, 0, 0, 0.78) 84%, rgba(0, 0, 0, 0.89) 91%, black 100%);
}

.s72p-control-overlay__gradient-bottom {
  top: calc(100% - 10em);
  bottom: 0%;
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.11) 33%, rgba(0, 0, 0, 0.22) 49%, rgba(0, 0, 0, 0.33) 59%, rgba(0, 0, 0, 0.44) 67%, rgba(0, 0, 0, 0.56) 73%, rgba(0, 0, 0, 0.67) 79%, rgba(0, 0, 0, 0.78) 84%, rgba(0, 0, 0, 0.89) 91%, black 100%);
}

.s72p-big-play-button {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition-duration: 0.05s;
}

.s72p-big-play-button__button {
  font-size: 1em;
  pointer-events: all;
  color: #ddd;
  border: none;
  background-color: unset;
  border-radius: 50%;
  width: 3.5em;
  height: 3.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 300ms;
  background-color: transparent;
}

.s72p-big-play-button__button:hover {
  transition-duration: 0ms;
  background-color: rgba(34, 34, 34, 0.3);
  cursor: pointer;
}

.s72p-big-play-button__button * {
  font-size: 2em;
}

.s72p-big-play-button__button svg path {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));
}

.s72p-controlbar {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  user-select: none;
  padding: 0.2em;
}

.s72p-controlbar .s72p-icon-button {
  padding: 0.4em;
  margin: 0.1em;
}

.s72p-controlbar .s72p-volume-slider {
  margin-left: 0.5em;
}

.s72p-controlbar .s72p-icon-button :not(:hover) svg path {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.6));
}

.s72p-controlbar .s72p-theatre-mode-icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
}

.s72p-controlbar .s72p-theatre-mode-icon {
  border: solid 0.1rem currentColor;
  border-radius: 0.1rem;
  aspect-ratio: 16/9;
  width: 100%;
  transition: 0.3s;
}

.s72p-controlbar .s72p-theatre-mode-icon--enabled {
  width: 60%;
}

.s72p-seekbar {
  min-height: 1.2em;
  position: relative;
}

.s72p-seekbar > .s72p-progress-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
}

.s72p-seekbar .s72p-slider-bar {
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1), 0 2px 3px rgba(0, 0, 0, 0.05);
}

.s72p-control-overlay-child {
  opacity: 1;
  transition-property: opacity, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
}

@media (prefers-reduced-motion) {
  .s72p-control-overlay-child {
    transition-property: opacity;
  }
}
.s72p-control-overlay-child--hidden {
  opacity: 0 !important;
}

.s72p-control-overlay-child--hidden, .s72p-control-overlay-child--hidden * {
  cursor: none;
  pointer-events: none;
}

.s72p-touch-controls__seek-icon {
  position: absolute;
  margin-top: auto;
  margin-bottom: auto;
  color: #ddd;
  top: calc(50vh - 0.5em);
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  font-size: 3em;
}

.s72p-touch-controls__seek-icon svg path {
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.3)) drop-shadow(0 0 20px rgba(0, 0, 0, 0.3));
}

.s72p-touch-controls__seek-icon--rewind {
  right: 67vw;
}

.s72p-touch-controls__seek-icon--ff {
  left: 67vw;
}

.s72p-touch-controls__seek-icon-pulse--enter, .s72p-touch-controls__seek-icon-pulse--leave {
  transition-duration: 250ms;
  transition-property: all;
  animation-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
  transition-timing-function: cubic-bezier(0.83, 0, 0.17, 1);
}

.s72p-touch-controls__seek-icon-pulse--enter-from {
  opacity: 0;
}

.s72p-touch-controls__seek-icon-pulse--enter-to, .s72p-touch-controls__seek-icon-pulse--leave-from {
  animation: s72p-touch-controls__pulse-animation 200ms;
  animation-iteration-count: infinite;
  opacity: 0.7;
}

.s72p-touch-controls__seek-icon-pulse--leave-to {
  opacity: 0;
}

@keyframes s72p-touch-controls__pulse-animation {
  0% {
    transform: scale(1);
  }
  20% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.s72p-playlist-skip-button {
  position: absolute;
  font-size: 1em;
  right: 1em;
  bottom: 5em;
  padding: 0.5em 1.5em;
  background-color: rgba(17, 17, 17, 0.4);
  color: #ddd;
  border: solid 3px #ddd;
  border-radius: 5px;
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.s72p-playlist-skip-button:hover {
  background-color: rgba(34, 34, 34, 0.8);
  cursor: pointer;
}

.s72p-related-content-menu-button {
  color: var(--s72p-text-color);
}

.s72p-related-content-menu {
  display: flex;
  min-width: min(26em, 100vw - 1.5em);
  max-height: calc(100vh - 10em);
  overflow-y: scroll;
}

.s72p-related-content-menu__item {
  width: 100%;
  font-size: inherit;
  display: flex;
  align-items: center;
  padding: 0.5em 1em;
}

.s72p-related-content-menu__item > .s72p-thumbnail-and-meta {
  flex: 1;
}

.s72p-related-content-menu__item > .s72p-icon {
  margin-right: 0.5em;
}

.s72p-related-content-menu__item .s72p-media-thumbnail {
  width: 7em;
}

.s72p-related-content-menu__item[data-headlessui-state~=disabled] {
  opacity: 0.5;
}

.s72p-related-content-menu__heading {
  display: flex;
  justify-content: left;
  align-items: center;
  font-size: 0.8em;
  min-height: 2.5em;
  flex-shrink: 0;
  padding-left: 0.8em;
  margin: 0 0.5em 0.5em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  opacity: 0.8;
}

.s72p-thumbnail-and-meta {
  display: flex;
  gap: 0.6em;
}

.s72p-thumbnail-and-meta .s72p-media-thumbnail {
  place-self: flex-start;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.15), 0 2px 5px rgba(0, 0, 0, 0.05);
}

.s72p-thumbnail-and-meta__text {
  flex: 1;
  place-self: center;
}

.s72p-thumbnail-and-meta__title {
  font-size: 1em;
  font-weight: 500;
  margin-bottom: 0.2em;
}

.s72p-thumbnail-and-meta__description {
  font-size: 0.75em;
  text-overflow: ellipsis;
  overflow: hidden;
  opacity: 0.8;
}

.s72p-thumbnail-availability {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 0.8em;
  padding: 0.3em;
  line-height: 1;
  border-bottom-right-radius: 4px;
  color: black;
  background-color: rgb(0, 163, 255);
  box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.15);
}

.s72p-thumbnail-play-icon {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ddd;
  border: 1px solid rgba(221, 221, 221, 0.7);
  background-color: rgba(17, 17, 17, 0.3);
  box-shadow: 0 2px 5px 2px rgba(0, 0, 0, 0.2), 0 2px 3px 1px rgba(0, 0, 0, 0.3);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.s72p-thumbnail-play-icon .s72p-icon {
  font-size: 1.8em;
}

.s72p-tv-season-menu {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.s72p-tv-season-menu__season-selector-prev {
  margin-left: -0.25em;
}

.s72p-tv-season-menu__season-selector-next {
  margin-right: -0.25em;
}

.s72p-tv-season-menu__season-selector-name {
  flex: 1;
  display: flex;
  justify-content: center;
}

.s72p-tv-season-menu__content {
  overflow-y: scroll;
}

.s72p-tv-season-menu__content > .s72p-related-content-menu-item:last-child {
  margin-bottom: 0.5em;
}

.s72p-tv-season-menu__no-episodes {
  text-align: center;
  margin: 2em;
}

.s72p-title-bar {
  display: flex;
  align-items: flex-start;
  color: #ddd;
  padding-left: 0.5em;
  padding-right: 0.5em;
  margin-top: 0.5em;
}

.s72p-title-bar__title {
  flex: 1;
  display: flex;
  gap: 1em;
  align-items: flex-start;
}

.s72p-title-bar__title-stack {
  flex: 1;
  margin-left: 0.5em;
  margin-top: 0.45em;
}

.s72p-title-bar__primary, .s72p-title-bar__secondary {
  line-height: 1.4;
}

.s72p-title-bar__primary {
  font-size: 1.4em;
  font-weight: 400;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  display: flex;
  text-align: left;
  justify-content: left;
  margin: 0;
}

.s72p-title-bar__secondary {
  font-size: 0.8em;
  font-weight: 400;
  margin: 0;
  margin-bottom: -0.2em;
  text-align: left;
  color: #c4c4c4;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
}

.s72p-title-bar__nav-buttons-group {
  display: flex;
  justify-content: start;
  align-items: center;
}

.s72p-title-bar__nav-buttons-group .s72p-button {
  gap: 0.25em;
}

.s72p-title-bar__right-buttons {
  display: flex;
  justify-content: flex-end;
}

.s72p-end-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background-color: rgba(17, 17, 17, 0.5);
  justify-content: start;
  padding-top: 5em;
  align-items: center;
  gap: 1em;
  overflow-y: scroll;
  --s72p-end-screen-width: 40em;
  --s72p-end-screen-text-color: #FFF;
}

@supports (justify-content: safe center) {
  .s72p-end-screen {
    justify-content: safe center;
    padding-top: 0;
  }
}
.s72p-end-screen--landscape-posters {
  --s72p-end-screen-width: 40em;
  --s72p-end-screen-grid-areas:
    "title"
    "main"
    "other";
  --s72p-end-screen-grid-columns: 1fr;
}

.s72p-end-screen--portrait-posters {
  --s72p-end-screen-width: 60em;
  --s72p-end-screen-grid-areas:
    "title title"
    "main other";
  --s72p-end-screen-grid-columns: 1fr 2fr;
}

.s72p-end-screen__layout {
  display: grid;
  gap: 1em;
  grid-template-areas: var(--s72p-end-screen-grid-areas);
  grid-template-columns: var(--s72p-end-screen-grid-columns);
  width: var(--s72p-end-screen-width);
  max-width: 90vw;
  min-width: 0;
}

.s72p-end-screen__title {
  position: relative;
  grid-area: title;
}

.s72p-end-screen__main-suggestion {
  grid-area: main;
}

.s72p-end-screen__other-suggestions {
  grid-area: other;
  align-content: end;
}

.s72p-end-screen__up-next-label {
  margin: 0;
  color: var(--s72p-end-screen-text-color);
}

.s72p-end-screen__close-button {
  position: absolute;
  top: -0.4em;
  right: -0.5em;
}

.s72p-end-screen__main-suggestion .s72p-end-screen__item {
  min-height: 0;
}

.s72p-end-screen__other-suggestions-items {
  display: grid;
  gap: 0.5em;
  min-width: 0;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

.s72p-end-screen__item {
  display: flex;
  border: 0.1rem solid rgba(0, 0, 0, 0.2);
  border-radius: 0.5em;
  overflow: hidden;
  box-shadow: 0 2px 3px -2px rgba(0, 0, 0, 0.5), 0 5px 20px rgba(0, 0, 0, 0.3);
  width: 100%;
  min-height: fit-content;
  max-width: 100%;
}

.s72p-end-screen__item:hover {
  border-color: var(--s72p-control-color);
}

.s72p-end-screen__item-thumbnail {
  width: 100%;
}

.s72p-end-screen__item-thumbnail .s72p-media-thumbnail__image {
  object-fit: contain;
  max-width: 100%;
}

.s72p-end-screen__item-thumbnail .s72p-media-thumbnail__contents {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  padding: 0.1em 0.3em;
}

.s72p-end-screen__item-title {
  font-size: 0.75em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.2s;
  color: var(--s72p-end-screen-text-color);
  background-color: rgba(68, 68, 68, 0.4);
  position: absolute;
  left: 0;
  top: 0;
  padding: 0.3em 0.6em 0.2em 0.5em;
  border-end-end-radius: 0.5em;
  backdrop-filter: saturate(2) blur(10px);
}

.s72p-end-screen__item-title--keep-visible, .s72p-end-screen__item:hover .s72p-end-screen__item-title {
  opacity: 1;
}

@media (max-height: 600px) {
  .s72p-end-screen {
    padding-top: 3em;
    padding-bottom: 6em;
  }
}
.s72p-end-screen--landscape-posters {
  --s72p-end-screen-width: 25em;
}

@media (min-width: 1000px) {
  .s72p-end-screen--landscape-posters {
    --s72p-end-screen-width: 30em;
  }
}
@media (min-width: 1800px) {
  .s72p-end-screen--landscape-posters {
    --s72p-end-screen-width: 40em;
  }
}
.s72p-end-screen--portrait-posters {
  --s72p-end-screen-width: 30em;
}

@media (min-width: 1000px) {
  .s72p-end-screen--portrait-posters {
    --s72p-end-screen-width: 40em;
  }
}
@media (min-width: 1800px) {
  .s72p-end-screen--portrait-posters {
    --s72p-end-screen-width: 60em;
  }
}
@media (max-height: 500px) {
  .s72p-end-screen--portrait-posters {
    --s72p-end-screen-width: 25em;
  }
}
@media (max-height: 800px) {
  .s72p-end-screen--portrait-posters {
    --s72p-end-screen-width: 40em;
  }
}
@media (max-width: 1920px) {
  .s72p-player--smart-tv .s72p-end-screen {
    --s72p-end-screen-width: 25em;
  }
}
.s72p-end-screen__transition--enter, .s72p-end-screen__transition--leave {
  transition-duration: 0.3s;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  overflow: hidden;
}

.s72p-end-screen__transition--enter-from {
  opacity: 0;
  transform: translateY(1rem);
}

.s72p-end-screen__transition--enter-to {
  opacity: 1;
}

.s72p-end-screen__transition--leave-from {
  opacity: 1;
}

.s72p-end-screen__transition--leave-to {
  opacity: 0;
  transform: translateY(1rem);
}

.s72p-casting {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: stretch;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.65, 0, 0.35, 1);
}

.s72p-casting--visible {
  opacity: 1;
}

.s72p-casting__title-placeholder {
  min-height: 3em;
  max-height: 6em;
  flex: 1 1;
  position: relative;
}

.s72p-casting__title-placeholder .s72p-title-bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

.s72p-casting__backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #111;
  filter: blur(5px) brightness(0.5);
  background-size: cover;
}

.s72p-casting__controls {
  align-self: center;
}

.s72p-casting__controls .s72p-cast-controls {
  flex: 1;
}

.s72p-casting__now-playing {
  flex: 1 1;
  place-self: center;
  display: flex;
  justify-content: start;
  align-items: end;
  gap: 1.5em;
  min-height: 0;
  margin-bottom: 2.5em;
}

.s72p-casting__now-playing-title {
  flex: 1;
  font-size: 3em;
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.02em;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.s72p-casting__now-playing .s72p-media-thumbnail {
  width: auto;
  height: auto;
  max-width: min(20em, 40%);
  max-height: min(20em, 100%);
  overflow: visible;
}

.s72p-casting__now-playing .s72p-media-thumbnail__image {
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3), 0 0 1px white;
  border-radius: 0.5em;
  overflow: hidden;
  align-self: flex-end;
}

.s72p-casting__controls {
  display: flex;
  justify-content: center;
  align-items: center;
}

.s72p-casting__footer {
  display: flex;
  flex: 1 1;
  justify-content: end;
  align-items: end;
}

.s72p-casting__stop-casting-button {
  align-self: end;
}

.s72p-casting__controls, .s72p-casting__now-playing {
  width: 90%;
  max-width: 720px;
}

@media screen and (min-width: 1600px) {
  .s72p-casting__controls, .s72p-casting__now-playing {
    width: 45%;
    max-width: 1600px;
  }
}
.s72p-casting__footer {
  max-height: 10%;
}

@media screen and (orientation: portrait) and (max-width: 600px) {
  .s72p-casting__footer {
    max-height: 20%;
  }
}
@media screen and (max-height: 600px) {
  .s72p-casting__now-playing {
    max-height: 1em;
  }

  .s72p-casting__now-playing .s72p-media-thumbnail, .s72p-casting__now-playing-title {
    display: none;
  }

  .s72p-casting__footer {
    max-height: unset;
  }
}
@media screen and (max-width: 719px) {
  .s72p-casting__now-playing {
    justify-content: center;
  }

  .s72p-casting__now-playing-title {
    display: none;
  }

  .s72p-casting__now-playing .s72p-media-thumbnail {
    max-width: 90%;
    max-height: 100%;
  }
}
@media screen and (max-height: 480px) {
  .s72p-casting__title-placeholder {
    min-height: 1.5em;
  }

  .s72p-casting__now-playing {
    margin-bottom: 0.5em;
  }

  .s72p-casting .s72p-cast-controls {
    padding: 1em;
    gap: 0.25em;
  }

  .s72p-casting .s72p-cast-controls__main-button {
    font-size: 2em;
  }
}
.s72p-cast-controls {
  font-size: 1em;
  background-color: rgba(102, 102, 102, 0.7);
  border: 1px solid rgba(119, 119, 119, 0.2);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(20px);
  padding: 1.5em 2em;
  border-radius: 0.5em;
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.s72p-cast-controls__status {
  position: relative;
  display: flex;
  color: rgba(221, 221, 221, 0.7);
  font-size: 0.9em;
  align-items: center;
  gap: 0.5em;
}

.s72p-cast-controls__cast-icon, .s72p-cast-controls__loading-spinner {
  font-size: 1.2em;
  left: 0;
  top: 0;
}

.s72p-cast-controls__secondary-buttons {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  font-size: 1em;
  display: flex;
  gap: 0.25em;
  align-items: center;
  justify-content: right;
  margin-right: -0.4em;
  min-height: 2.8em;
}

.s72p-cast-controls__playback-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
}

.s72p-cast-controls__playback-buttons--left, .s72p-cast-controls__playback-buttons--center, .s72p-cast-controls__playback-buttons--right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.s72p-cast-controls__playback-buttons--left {
  justify-content: end;
  flex: 1;
}

.s72p-cast-controls__playback-buttons--middle {
  justify-content: center;
  flex: 0;
}

.s72p-cast-controls__playback-buttons--right {
  justify-content: start;
  flex: 1;
}

.s72p-cast-controls .s72p-cast-volume-popover {
  flex: 1;
}

.s72p-cast-controls__main-button {
  color: rgba(221, 221, 221, 0.8);
  font-size: 3em;
  padding: 0.2em;
  aspect-ratio: 1/1;
}

.s72p-cast-controls__main-button--size-sm {
  font-size: 1.5em;
}

.s72p-cast-controls__main-button--play svg {
  transform: translateX(-0.03em);
}

.s72p-cast-controls__main-button--skip-ad {
  gap: 0.1em;
  aspect-ratio: unset;
  border-radius: 5em;
  padding: 0.1em 0.5em;
  min-width: 4.5em;
  margin-left: 0.25em;
}

.s72p-cast-controls__main-button--skip-ad, .s72p-cast-controls__main-button--skip-ad[disabled]:hover {
  background-color: rgba(221, 221, 221, 0.1);
}

.s72p-cast-controls__main-button .s72p-icon-button__label {
  white-space: nowrap;
}

.s72p-cast-controls .s72p-cast-error-alert {
  margin-top: 1.35em;
  margin-bottom: 1em;
}

.s72p-cast-controls__seek-bar {
  margin-top: 1em;
}

.s72p-cast-controls__seek-bar-times {
  color: #ddd;
  opacity: 0.7;
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

.s72p-cast-controls__subtitle-menu-button, .s72p-cast-controls__audio-menu-button {
  aspect-ratio: 1/1;
}

.s72p-cast-controls__subtitle-menu-button .s72p-icon-button__label, .s72p-cast-controls__audio-menu-button .s72p-icon-button__label {
  font-size: 0.5em;
  opacity: 0.8;
  display: none;
}

.s72p-cast-error-alert {
  display: flex;
  font-size: 0.8em;
  gap: 1em;
  background-color: rgba(221, 221, 221, 0.05);
  border: 1px solid rgba(221, 221, 221, 0.1);
  border-radius: 5px;
  padding-left: 0;
  padding: 1em;
  padding-bottom: 0.6em;
}

@media screen and (min-width: 480px) {
  .s72p-cast-error-alert {
    padding: 2em;
    padding-bottom: 1.6em;
  }
}
.s72p-cast-error-alert__title {
  margin: 0;
}

.s72p-cast-error-alert__icon {
  flex: 0;
  font-size: 2em;
}

.s72p-cast-error-alert__message {
  flex: 1;
  opacity: 0.9;
}

.s72p-cast-error-alert a {
  color: #ddd;
}

.s72p-cast-error-alert__button {
  margin-top: 0.75em;
  margin-left: -0.25em;
  --s72p-icon-button-bg: rgba(170, 170, 170, 0.2);
  --s72p-icon-button-bg-hover: rgba(170, 170, 170, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.s72p-cast-error-alert__button .s72p-icon-button__label {
  font-size: 0.75em;
}

.s72p-choose-cast-device {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ddd;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.s72p-choose-cast-device__icon {
  font-size: 6em;
}

.s72p-choose-cast-device__wrapper {
  gap: 1em;
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
}

.s72p-choose-cast-device__wrapper--position-top {
  align-self: flex-start;
  top: 15vh;
}

.s72p-choose-cast-device__spinner {
  position: absolute;
  display: flex;
  gap: 0.5em;
  font-size: 1.2em;
  justify-content: center;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
}

.s72p-choose-cast-device__heading {
  margin-top: 0;
  margin-bottom: 0.5em;
}

.s72p-choose-cast-device__message {
  margin: 0;
  max-width: 20em;
}

.s72p-choose-cast-device__text {
  margin: 0;
  color: rgba(221, 221, 221, 0.8);
}

.s72p-cast-volume-control {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.s72p-cast-volume-control .s72p-slider {
  flex: 1;
}

.s72p-cast-volume-popover .s72p-cast-volume-control {
  font-size: 1em;
  width: 15em;
  margin: 0.5em;
  margin-right: 1.5em;
}

.s72p-cast-volume-popover .s72p-popover__panel {
  font-size: unset;
  left: -0.55em;
  top: -0.55em;
}

.s72p-controlbar .s72p-icon-button svg path {
  transform: translate(0px, 5px);
}

.s72p-control-bar__seek-button svg path {
  transform: translate(0px, 5px) !important;
}

.s72p-control-bar__fullscreen-button svg path {
  transform: translate(3px, 7px) !important;
}

.s72p-title-bar__back-button svg path {
  transform: translate(10px, 3px) !important;
}

.s72p-player--smart-tv svg path {
  filter: none !important;
}

.s72p-subtitles {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  display: flex;
}

.s72p-subtitles .shaka-text-container {
  flex: 1;
}

.s72p-subtitles--direction-rtl .s72p-subtitles__cue {
  direction: rtl !important;
}

.s72p-subtitles__cue {
  font-size: 1em;
}

.s72p-subtitles__cue .s72p-subtitles__cue-line {
  line-height: 1.3;
}

.s72p-subtitles--bg-transparent-panel .s72p-subtitles__cue {
  border-radius: 5px;
  padding: 0.25em 0.5em;
  background-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0px 5px 20px 2px rgba(0, 0, 0, 0.2);
  text-shadow: 0.05em 0.05em 0.1em rgba(0, 0, 0, 0.5), 0.05em 0.05em 0.05em rgba(0, 0, 0, 0.5);
}

.s72p-subtitles--bg-none .s72p-subtitles__cue {
  background-color: unset;
  box-shadow: unset;
  padding: unset;
}

.s72p-subtitles--bg-none .s72p-subtitles__cue .s72p-subtitles__cue-line {
  text-shadow: -1px 0px 0px #000, 0px -1px 0px #000, 1px 0px 0px #000, 0px 1px 0px #000, 0 0 5px #000;
}

.s72p-subtitles--bg-black .s72p-subtitles__cue {
  background-color: unset;
  text-shadow: unset;
  border-radius: unset;
  box-shadow: unset;
}

.s72p-subtitles--bg-black .s72p-subtitles__cue .s72p-subtitles__cue-line {
  background-color: black;
  padding: 0.1em 0.2em;
  line-height: 1.3;
}

.s72p-subtitles--text-sm .s72p-subtitles__cue {
  font-size: 0.7em;
}

.s72p-subtitles--text-md .s72p-subtitles__cue {
  font-size: 1em;
}

.s72p-subtitles--text-lg .s72p-subtitles__cue {
  font-size: 1.4em;
}

.s72p-subtitles--color-white .s72p-subtitles__cue {
  color: #dee2e6;
}

.s72p-subtitles--color-yellow .s72p-subtitles__cue {
  color: #fab005;
}

video::cue {
  opacity: 1;
  background: transparent;
  text-shadow: -1px 0px 0px #000, 0px -1px 0px #000, 1px 0px 0px #000, 0px 1px 0px #000, 0 0 5px #000;
  color: #fff;
}

video::-webkit-media-text-track-background,
video::-webkit-media-text-track-display,
video::-webkit-media-text-track-display-backdrop {
  background: transparent !important;
  overflow: visible !important;
}

.video-container, .s72p-player {
  font-size: 16px;
  font-family: var(--s72p-font-stack);
  z-index: 1;
  position: relative;
  background-color: #000;
  -webkit-font-smoothing: antialiased;
  --s72p-root-font-size: 16px;
  font-size: var(--s72p-root-font-size);
  display: flex;
  align-items: center;
}

.video-container video::-webkit-media-controls, .s72p-player video::-webkit-media-controls {
  display: none !important;
}

.video-container video, .s72p-player video {
  width: 100%;
  height: unset;
  max-height: 100%;
}

/* NOTE: These fullscreen pseudo-classes can't be combined.  Browsers ignore
 * the rest of the list once they hit one prefix they don't support.
 */
.video-container:fullscreen {
  width: 100%;
  height: 100%;
  position: absolute;
}

.video-container:-webkit-full-screen {
  width: 100%;
  height: 100%;
  position: absolute;
}

.video-container:-moz-full-screen {
  width: 100%;
  height: 100%;
  position: absolute;
}

.video-container:-ms-fullscreen {
  width: 100%;
  height: 100%;
  position: absolute;
}

.s72p-ui {
  /* For a detailed explanation of how this achieves an overlay, please refer
   * to https://developer.mozilla.org/en-US/docs/Web/CSS/position .
   *
   * But you don't have to, because we've encapsulated these high level
   * concepts into classes.
   *
   * This makes it possible for this child to overlay the other children of a
   * .overlay-parent() object. */
  position: absolute;
  /* Fill the container by default. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  z-index: 3;
}

.s72p-ui > * {
  /* When setting "position: absolute" it uses the left,right,top,bottom
   * properties to determine the positioning.  We should set all these
   * properties to ensure it is positioned properly on all platforms. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.s72p-player-backdrop {
  /* When setting "position: absolute" it uses the left,right,top,bottom
   * properties to determine the positioning.  We should set all these
   * properties to ensure it is positioned properly on all platforms. */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.s72p-controls {
  /* For a detailed explanation of how this achieves an overlay, please refer
   * to https://developer.mozilla.org/en-US/docs/Web/CSS/position .
   *
   * But you don't have to, because we've encapsulated these high level
   * concepts into classes.
   *
   * This makes it possible for this child to overlay the other children of a
   * .overlay-parent() object. */
  position: absolute;
  /* Fill the container by default. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  /* Without this, the controls container overflows the video container. */
  box-sizing: border-box;
  /* A flex container, to make layout of children easier to reason about. */
  display: flex;
  /* Defines in which direction the children should flow. */
  flex-direction: column;
  /* Pushes the children toward the bottom of the container. */
  justify-content: flex-end;
  align-items: end;
  -webkit-align-items: flex-end;
  /* A black gradient at the bottom, behind the controls, but only so high. */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0, transparent 5em);
  /* Transparent unless explicitly made opaque through "s72p-shown=true" attribute */
  opacity: 0;
  /* When we show/hide this, do it gradually using cubic-bezier timing. */
  transition: opacity cubic-bezier(0.4, 0, 0.6, 1) 600ms;
  /* Position the controls container in front of the text container, so that
   * the text container doesn't interfere with the control buttons. */
  z-index: 2;
}

.s72p-controls.s72p-menu-open, .s72p-controls.s72p-casting, .s72p-controls.s72p-user-active {
  opacity: 1;
}

.s72p-ads {
  background: #000;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  z-index: 101;
  overflow: hidden;
}

.cast-display {
  position: absolute;
  font: 13px sans-serif;
  bottom: 60px;
  left: 0;
  width: 100%;
  text-align: center;
  text-shadow: 0px 0px 5px rgb(0, 0, 0);
  display: none;
}

/* This is a spacer element used to separate elements within the control
 * buttons panel. It's just an empty div of certain width. */
.s72p-spacer {
  /* This should not have a pointer-style cursor like the other controls. */
  cursor: default;
  /* Make the element shrink to accommodate things to the right. */
  flex-shrink: 0;
  /* Make the element grow to take up the remaining space. */
  flex-grow: 1;
  /* Margins don't shrink. Remove margins in order to be more flexible when
   * shrinking. */
  margin: 0;
}

.s72p-hidden {
  display: none !important;
}

.s72p-shown {
  display: flex;
}

nav-bar {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  flex: 0 0 73px;
  bottom: auto;
  z-index: 10;
  color: #ddd;
  display: flex;
  font-size: 16px;
}
nav-bar::after {
  content: " ";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  height: 20vh;
  pointer-events: none;
  opacity: 0.85;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.11) 33%, rgba(0, 0, 0, 0.22) 49%, rgba(0, 0, 0, 0.33) 59%, rgba(0, 0, 0, 0.44) 67%, rgba(0, 0, 0, 0.56) 73%, rgba(0, 0, 0, 0.67) 79%, rgba(0, 0, 0, 0.78) 84%, rgba(0, 0, 0, 0.89) 91%, black 100%);
}
@media screen and (min-width: 1024px) {
  nav-bar {
    font-size: 18px;
  }
}
@media screen and (min-width: 1200px) {
  nav-bar {
    font-size: 22px;
  }
}
@media screen and (min-width: 2000px) {
  nav-bar {
    font-size: 24px;
  }
}
@media screen and (min-width: 3000px) {
  nav-bar {
    font-size: 28px;
  }
}
nav-bar .nav-bar {
  display: flex;
  flex: 1;
  align-items: flex-start;
  margin-top: 0.5em;
  padding-left: 0.5em;
  padding-right: 0.5em;
}
nav-bar a,
nav-bar a:visited,
nav-bar a:hover {
  text-decoration: none;
}
nav-bar .title {
  flex: 1;
  margin-top: 0.5em;
  margin-left: 0.5em;
}
nav-bar .title-primary, nav-bar .title-secondary {
  margin: 0;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
  font-weight: 400;
}
nav-bar .title-primary {
  font-size: 1.4em;
}
nav-bar .title-secondary {
  font-size: 0.8em;
  color: #c4c4c4;
}
nav-bar .back, nav-bar .menu-toggle {
  font-size: 1.4em;
  padding: 0.5em;
  cursor: pointer;
}
nav-bar h1 {
  text-align: left;
  font-weight: normal;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
nav-bar .nav-buttons {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.5em;
}
nav-bar .prev, nav-bar .next {
  font-size: 0.8em;
  color: #a3a3a3;
  display: flex;
  align-items: center;
  gap: 0.25em;
  padding: 0.5em;
}
nav-bar .hidden {
  visibility: hidden;
}
nav-bar .menu {
  position: absolute;
  top: 73px;
  left: auto;
  bottom: auto;
  right: 10px;
  display: block;
  background-color: #000;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  padding: 10px;
  padding-bottom: 0;
  max-width: 400px;
  max-height: 460px;
  overflow-y: auto;
  overflow-x: hidden;
}
nav-bar .menu .menu-item {
  display: block;
  padding-bottom: 10px;
}
nav-bar .menu .menu-item.active .playing-now {
  display: block;
}
nav-bar .menu .menu-item.active .play-icon {
  display: none;
}
nav-bar .menu .menu-item:hover .play-icon {
  opacity: 1;
}
nav-bar .menu .menu-item .playing-now {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  margin-top: -18px;
  margin-left: -50px;
  width: 90px;
  padding: 5px;
  display: none;
  background-color: rgba(0, 0, 0, 0.8);
}
nav-bar .menu .menu-item .play-icon {
  opacity: 0.6;
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  margin-top: -28px;
  margin-left: -24px;
}
nav-bar .menu .menu-item img {
  border-radius: 4px;
  width: 100%;
}
nav-bar .menu .menu-item .image,
nav-bar .menu .menu-item .body {
  display: table-cell;
  vertical-align: top;
  font-size: 14px;
}
nav-bar .menu .menu-item .image {
  text-align: center;
  position: relative;
  width: 125px;
}
nav-bar .menu .menu-item .body {
  position: relative;
  width: 250px;
  padding-left: 10px;
}
nav-bar .menu .menu-item .body h4, nav-bar .menu .menu-item .body p {
  margin: 0;
  padding: 0;
}
nav-bar .menu .menu-item .body small {
  position: relative;
  position: absolute;
  font-weight: normal;
  top: 0;
  right: 0;
  background-color: #000;
  padding: 2px 4px;
}
nav-bar .menu .menu-item .body small:before {
  content: "";
  position: absolute;
  left: -20px;
  bottom: 0;
  height: 100%;
  width: 20px;
  background-image: linear-gradient(to right, transparent 0%, #000 100%);
}
nav-bar .menu .menu-item .body h4 {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  margin-bottom: 5px;
  width: 250px;
}
nav-bar .menu .menu-item .body h4:after {
  content: "";
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 20px;
  background-image: linear-gradient(to right, transparent 0%, #000 100%);
}
nav-bar .menu .menu-item .body p {
  position: relative;
  color: #a3a3a3;
  font-size: 12px;
  overflow: hidden;
  height: 56px;
  width: 250px;
}
nav-bar .menu .menu-item .body p:after {
  content: "";
  text-align: right;
  position: absolute;
  right: 0;
  bottom: 0;
  height: 14px;
  width: 50px;
  background-image: linear-gradient(to right, transparent 0%, #000 100%);
}
nav-bar .play-icon svg {
  width: 48px;
  height: 48px;
}
nav-bar .play-icon svg circle, nav-bar .play-icon svg path {
  stroke-width: 1px;
  stroke: #fff;
  fill: rgba(0, 0, 0, 0.8);
}
nav-bar .play-icon svg path {
  fill: #fff;
  stroke-linejoin: round;
}

watch-window-notification {
  position: absolute;
  z-index: 10;
  bottom: 15vh;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  width: max-content;
  max-width: 95vw;
}

.s72p-watch-window-notification {
  position: relative;
  cursor: default;
  color: var(--s72p-panel-text-color);
  background-color: var(--s72p-panel-bg-color);
  border: var(--s72p-panel-border);
  box-shadow: var(--s72p-panel-box-shadow);
  border-radius: var(--s72p-panel-border-radius);
  padding: 2em 2.5em;
  text-rendering: geometricPrecision;
}
.s72p-watch-window-notification__title {
  font-size: 1.2em;
  font-weight: 500;
  margin: 0;
  margin-bottom: 0.5em;
}
.s72p-watch-window-notification__message {
  margin: 0;
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--s72p-font-stack);
  color: #ddd;
  background-color: #000;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  overflow: hidden;
  display: flex;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  scrollbar-width: thin;
  scrollbar-color: #777d transparent;
}

body.player-app {
  flex-direction: column;
}

h1 {
  text-align: center;
}

a {
  color: #fff;
}

.stretch {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
}

.loading {
  z-index: 2;
}
.loading .loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: 50%;
  right: 50%;
  margin-left: -50px;
  margin-top: -13.5px;
  font-size: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
}

.loaded {
  z-index: 2;
}

.loaded,
.loading,
.supported,
.playing,
.countdown {
  display: flex;
  flex: 1;
}

.denied,
.not-supported {
  overflow-y: auto;
  flex-direction: column;
}

.no-nav .supported {
  top: 0;
}

.words {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  line-height: 1.4;
}
@media screen and (max-width: 640px) {
  .words {
    width: auto;
    margin-left: 20px;
    margin-right: 20px;
  }
}
.words .s72p-button-primary {
  margin-top: 1.2em;
}
.words section {
  margin: 1.2em 0;
}
.words h3, .words h4, .words h5 {
  margin-bottom: 0.5em;
}
.words p, .words ul {
  margin: 0.5em 0;
}
.words .spacer {
  flex: 1 1;
}
.words .spacer:first-child {
  min-height: 10vh;
}

player {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.video-player-container {
  position: absolute !important;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

countdown {
  display: block;
  text-align: center;
}
countdown h3 {
  margin-top: 0;
}

.browser-support-table {
  border-spacing: 0;
  border-collapse: separate;
  width: 100%;
}
.browser-support-table th, .browser-support-table td {
  padding: 0.2em 0.4em;
}
.browser-support-table th {
  font-size: 0.9em;
  font-weight: 400;
  text-align: left;
  color: var(--s72p-text-color);
}
.browser-support-table td, .browser-support-table thead th {
  text-align: center;
}
.browser-support-table tr > :nth-child(2n) {
  background-color: rgba(255, 255, 255, 0.13);
}

.not-supported {
  overflow-y: scroll;
}
.not-supported .box-highlight {
  position: relative;
  top: unset;
}
.not-supported .support-icon {
  font-size: 1.2em;
}
.not-supported .app-links {
  margin-bottom: 0.5em;
}
.not-supported .app-links h4 {
  margin-top: 0;
}
.not-supported .app-links hr {
  color: var(--s72p-text-color);
  opacity: 0.3;
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}
.not-supported .browser-support > h4 {
  margin-top: 0;
}
.not-supported .browser-support p {
  font-size: 0.9em;
}
.not-supported .app-store-link {
  display: inline-block;
  vertical-align: middle;
  margin: 10px;
  margin-left: 0;
}
.not-supported .app-support-message {
  font-size: 0.9em;
}
.not-supported .table-wrapper {
  margin-top: 1em;
  margin-bottom: 1em;
  overflow-x: scroll;
}
.not-supported .device-support-legend {
  display: grid;
  grid-template-columns: 1em auto;
  gap: 0 0.7em;
  margin-left: 0.3em;
}
.not-supported .device-support-legend dt {
  grid-column-start: 1;
  text-align: center;
}
.not-supported .device-support-legend dd {
  grid-column-start: 2;
  margin: 0;
  font-size: 0.85em;
}

.box-highlight {
  color: var(--s72p-panel-text-color);
  background-color: var(--s72p-panel-bg-color);
  border: var(--s72p-panel-border);
  box-shadow: var(--s72p-panel-box-shadow);
  border-radius: var(--s72p-panel-border-radius);
  padding: 30px;
  position: sticky;
  top: 80px;
}
.box-highlight h1 {
  margin-top: 0;
  margin-bottom: 16px;
  text-align: left;
}

.s72p-button-primary {
  display: inline-block;
  font-size: 16px;
  border-radius: 4px;
  color: var(--s72p-button-primary-text-color);
  border: 1px solid transparent;
  background-color: var(--s72p-button-primary-bg-color);
  border-color: var(--s72p-button-primary-border-color);
  font-weight: normal;
  font-family: var(--s72p-font-stack);
  padding: 8px 16px;
  text-decoration: none;
  line-height: 25px;
  cursor: pointer;
  user-select: none;
}
.s72p-button-primary:hover {
  color: var(--s72p-button-primary-text-color--hover);
  background-color: var(--s72p-button-primary-bg-color--hover);
  border-color: var(--s72p-button-primary-border-color--hover);
}

.dialog {
  color: var(--s72p-panel-text-color);
  background-color: var(--s72p-panel-bg-color);
  border: var(--s72p-panel-border);
  box-shadow: var(--s72p-panel-box-shadow);
  border-radius: var(--s72p-panel-border-radius);
  max-width: 360px;
  margin: 20px auto;
  text-align: center;
  padding: 2em 2.5em;
}
@media screen and (max-width: 400px) {
  .dialog {
    max-width: 95vw;
    padding: 1em;
  }
}
.dialog h2 {
  margin: 0;
  font-weight: normal;
}
.dialog .btn,
.dialog .link {
  display: block;
  width: 100%;
  padding: 6px;
  font-size: 1.1em;
  background-color: transparent;
  color: #fff;
  text-decoration: none;
}
.dialog .btn:hover,
.dialog .link:hover {
  cursor: pointer;
}
.dialog .btn {
  border: 1px solid #fff;
  border-radius: 3px;
}
.dialog .link {
  border: 0 none;
  margin-top: 0;
  font-size: 16px;
  color: #ddd;
}
.dialog .link:hover {
  text-decoration: underline;
  color: white;
}
.dialog .error {
  text-align: left;
  margin: 0.5em 0 0 0;
  font-size: 0.9em;
}

pin-code, .dialog-resume {
  flex: 1;
  place-self: center;
}

.dialog-resume {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dialog-resume h2 {
  margin-bottom: 1rem;
}

.dialog-pincode > div {
  gap: 0.5em;
  display: flex;
  flex-direction: column;
}
.dialog-pincode form {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.dialog-pincode button[disabled] {
  opacity: 0.5;
}
.dialog-pincode .link {
  width: auto;
  align-self: center;
  padding: 6px;
}
.dialog-pincode .link:last-child {
  margin-bottom: -6px;
}
.dialog-pincode .pincode {
  position: relative;
  margin-bottom: 1.5em;
}
.dialog-pincode .pincode .error {
  position: absolute;
  margin-top: 0.2em;
  margin-bottom: 0.5em;
  color: #c2255c;
}
.dialog-pincode .pincode--error input {
  animation: shake 500ms ease-in-out;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  6.5% {
    transform: translateX(-6px) rotateY(-9deg);
  }
  18.5% {
    transform: translateX(5px) rotateY(7deg);
  }
  31.5% {
    transform: translateX(-3px) rotateY(-5deg);
  }
  43.5% {
    transform: translateX(2px) rotateY(3deg);
  }
  50% {
    transform: translateX(0);
  }
}
.pincode-text, .pincode-input {
  border: 0 none;
  font-size: 1.1em;
  text-align: center;
  padding: 6px;
}

.pincode-input {
  text-align: center;
  width: 100%;
  padding-left: 1.1em;
  letter-spacing: 1em;
  font-weight: bold;
  font-size: 18px;
  height: 42px;
  padding: 9px 16px;
}

.error-request-id {
  margin: 0 20px;
}
@media screen and (min-width: 700px) {
  .error-request-id {
    width: 700px;
    margin: 0 auto;
  }
}

/*# sourceMappingURL=main.css.map */