/*********************
** COLORS
*********************/

:root {
  --col-h1: rgb(173, 196, 206);
  --col-h1-raw: 173, 196, 206;
  --col-h1-d: rgb(73, 96, 106);
  --col-h2: rgb(241, 240, 232);
  --col-h2-raw: 241, 240, 232;
  --col-h2-d: rgb(91, 90, 82);
  --col-h3: rgb(150, 182, 197);
  --col-h3-raw: 150, 182, 197;
  --col-h3-d: rgb(50, 82, 97);
  --col-h4: rgb(238, 224, 201);
  --col-hl: rgba(255, 255, 255, 0.3);
  --col-al: rgba(255, 255, 255, 0.5);
  --col-hd: rgba(0, 0, 0, 0.3);
  --col-ad: rgba(0, 0, 0, 0.5);
  --col-bt: rgba(255, 255, 255, 0.3);
  --col-bt-l: rgba(255, 255, 255, 0.5);
  --col-bt-d: rgba(0, 0, 0, 0.6);
  --col-t1: rgb(40, 40, 40);
  --col-t1-raw: 40, 40, 40;
  --col-t2: rgb(70, 70, 70);
  --col-t3: rgb(100, 100, 100);
  --col-tl1: rgb(170, 170, 170);
  --col-tl2: rgb(200, 200, 200);
  --col-tl3: rgb(230, 230, 230);
  --col-tl3-raw: 230, 230, 230;
  --col-lg: rgb(230, 235, 240);
  --col-lgd: rgb(30, 35, 40);
  --col-err: rgb(215 143 143);
  --col-yy: rgb(69 121 213);

  --col-l-h1: rgb(173, 196, 206);
  --col-l-lg: rgb(241, 240, 232);
  --col-l-t1: rgb(40, 40, 40);
  --col-l-t2: rgb(70, 70, 70);

  --pad: 40px;
  --pad-t: calc(var(--pad) + env(titlebar-area-height, 0px) + env(safe-area-inset-top, 0px));
  --pad-r: calc(var(--pad) + env(safe-area-inset-right, 0px));
  --pad-b: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  --pad-l: calc(var(--pad) + env(safe-area-inset-left, 0px));
}

html body.native {
  --pad: 20px;
}

html body.native:not(.in-tray):not(.native-mobile) {
  --pad-t: calc(var(--pad) + 14px + env(titlebar-area-height, 0px) + env(safe-area-inset-top, 0px));
}

body.settings-toggle-dark-mode {
  --col-h1: rgb(30, 32, 35);
  --col-h1-raw: 30, 32, 35;
  --col-h1-d: rgb(0, 0, 0);
  --col-h2: rgb(40, 42, 45);
  --col-h2-raw: 40, 42, 45;
  --col-h2-d: rgb(0, 0, 0);
  --col-h3: rgb(45, 47, 50);
  --col-h3-raw: 45, 47, 50;
  --col-h3-d: rgb(0, 0, 0);
  --col-hl: rgba(255, 255, 255, 0.05);
  --col-al: rgba(255, 255, 255, 0.1);
  --col-bt: rgba(200, 210, 220, 0.1);
  --col-bt-l: rgba(200, 210, 220, 0.2);
  --col-bt-d: rgba(200, 210, 220, 0.6);
  --col-t1: rgb(230, 232, 235);
  --col-t1-raw: 230, 232, 235;
  --col-t2: rgb(200, 202, 205);
  --col-t3: rgb(150, 152, 155);
  --col-tl1: rgb(100, 100, 100);
  --col-tl2: rgb(70, 70, 70);
  --col-tl3: rgb(40, 40, 40);
  --col-tl3-raw: 40, 40, 40;
  --col-lg: rgb(241, 240, 232);
  --col-yy: rgb(88, 178, 216);
}

@media (prefers-color-scheme: dark) {
  body {
    --col-l-h1: rgb(30, 32, 35);
  }

  /* Ensures body shows a dark color while splash screen is shown.
   * Fixes flashing of blue color on iOS title bar */
  body.loading {
    background-color: var(--col-l-h1) !important;
  }
}

@supports (-moz-appearance:none) {

  /* on FF we set a generic color for BODY and use #app for the actual background color due to color bleeding in extensions */
  html body {
    background-color: #000000;
  }

  html body #app {
    background-color: var(--col-h1);
  }
}

body.settings-toggle-dark-mode.native:not(.native-mobile) {
  --col-l-h1: rgb(30, 32, 35);
}

body:not(.settings-toggle-dark-mode) #header {
  --col-hl: rgba(255, 255, 255, 0.6);
  --col-al: rgb(255, 255, 255);
}

@media only screen and (max-width: 1000px),
only screen and (max-height: 800px) {
  :root {
    --pad: 20px;
  }

  html body.native {
    --pad: 10px;
  }

  html body.native:not(.in-tray):not(.native-mobile) {
    --pad-t: calc(var(--pad) + 20px + env(titlebar-area-height, 0px) + env(safe-area-inset-top, 0px));
  }
}

@media only screen and (max-width: 700px),
only screen and (max-height: 600px) {
  :root {
    --pad: 10px;
  }

  html body.native {
    --pad: 10px;
  }

  html body.native:not(.in-tray):not(.native-mobile) {
    --pad-t: calc(var(--pad) + 20px + env(titlebar-area-height, 0px) + env(safe-area-inset-top, 0px));
  }
}

@media (display-mode: window-controls-overlay) {

  :root {
    --pad: 10px;
  }
}

@media only screen and (max-width: 500px),
only screen and (max-height: 500px) {

  :root {
    --pad: 0px;
  }

  html body.native {
    --pad: 0px;
  }

  html body.native:not(.in-tray):not(.native-mobile) {
    --pad-t: calc(27px + env(titlebar-area-height, 0px) + env(safe-area-inset-top, 0px));
  }

  /* allow player image overflow with safe-area-inset on mobile */
  html body.native-mobile ui-ui:not(.settings-toggle-full-episode-layout) #content-wrapper {
    overflow: visible;
  }

  html body.native-mobile ui-ui.menu-position-t:not(.settings-toggle-full-episode-layout) ui-player .player-image {
    top: calc(env(safe-area-inset-top, 0px) * -1);
    height: calc(70px + env(safe-area-inset-top, 0px));
  }

  html body.native-mobile ui-ui.menu-position-b:not(.settings-toggle-full-episode-layout) ui-player .player-image {
    top: auto;
    bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
    height: calc(70px + env(safe-area-inset-bottom, 0px));
  }

  html body.native-mobile ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-image {
    width: 100vw;
    left: calc(env(safe-area-inset-left, 0px) * -1);
  }

  html body.native-mobile ui-ui.menu-position-b ui-player .player-meta ui-wave {
    bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
    height: env(safe-area-inset-bottom, 70px);
  }

  html body.native-mobile ui-player .player-meta ui-wave {
    left: calc(env(safe-area-inset-left, 0px) * -1);
    /* Only full 100vw if an inset-bottom is present, i.e. if on mobile */
    width: calc(100vw - env(safe-area-inset-bottom, 70px) + env(safe-area-inset-bottom, 0px));
  }

  /* same as above but for mobile ios pwa */
  @supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
      html body ui-ui:not(.settings-toggle-full-episode-layout) #content-wrapper {
        overflow: visible;
      }

      html body ui-ui.menu-position-t:not(.settings-toggle-full-episode-layout) ui-player .player-image {
        top: calc(env(safe-area-inset-top, 0px) * -1);
        height: calc(70px + env(safe-area-inset-top, 0px));
      }

      html body ui-ui.menu-position-b:not(.settings-toggle-full-episode-layout) ui-player .player-image {
        top: auto;
        bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
        height: calc(70px + env(safe-area-inset-bottom, 0px));
      }

      html body ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-image {
        width: 100vw;
        left: calc(env(safe-area-inset-left, 0px) * -1);
      }

      html body ui-ui.menu-position-b ui-player .player-meta ui-wave {
        bottom: calc(env(safe-area-inset-bottom, 0px) * -1);
        height: env(safe-area-inset-bottom, 70px);
      }

      html body ui-player .player-meta ui-wave {
        left: calc(env(safe-area-inset-left, 0px) * -1);
        /* Only full 100vw if an inset-bottom is present, i.e. if on mobile */
        width: calc(100vw - env(safe-area-inset-bottom, 70px) + env(safe-area-inset-bottom, 0px));
      }
    }
  }
}

html body.native {
  /* otherwise pad-x will use ::root.--pad */
  --pad-t: calc(var(--pad) + env(titlebar-area-height, 0px) + env(safe-area-inset-top, 0px));
  --pad-r: calc(var(--pad) + env(safe-area-inset-right, 0px));
  --pad-b: calc(var(--pad) + env(safe-area-inset-bottom, 0px));
  --pad-l: calc(var(--pad) + env(safe-area-inset-left, 0px));
}

/*********************
** BASE
*********************/

@font-face {
  font-family: "ff-sans";
  src: url("/fonts/lexend.ttf") format("truetype-variations");
  font-weight: 1 999;
  font-display: block;
}

@font-face {
  font-family: "ff-mono";
  src: url("/fonts/inconsolata.ttf") format("truetype-variations");
  font-weight: 1 999;
  font-display: block;
}

@font-face {
  font-family: "ff-ico";
  src: url("/fonts/material.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 700;
  font-display: block;
}

.ff-ico {
  font-family: "ff-ico";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  font-weight: 200;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  touch-action: pan-y pan-x;
  overscroll-behavior-y: none;
}

body.native-mobile {
  /* iOS safe area fix */
  height: 100vh;
}

@media (display-mode: standalone) {
  body {
    height: 100vh;
  }
}

body {
  cursor: default;
  font-family: "ff-sans", sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: var(--col-t2);
  background-color: var(--col-h1);
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-text-size-adjust: none;
  -webkit-user-select: none;
  /* padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); */
}

/* @supports(padding:max(0px)) {
  html {
    min-height: calc(100% + env(safe-area-inset-top)) !important;
    height: calc(100% + env(safe-area-inset-top)) !important;
  }
} */

h1 {
  color: var(--col-t1);
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  text-transform: uppercase;
}

a {
  cursor: default;
}

* {
  pointer-events: none;
  touch-action: pan-y pan-x;
  -webkit-tap-highlight-color: #00000000;
}

/*********************
** ANIMATIONS
*********************/

.element-loading::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, rgba(var(--col-t1-raw), 0) 0, rgba(var(--col-t1-raw), 0.05) 60%, rgba(var(--col-t1-raw), 0.1) 75%, rgba(var(--col-t1-raw), 0));
  animation: element-loading 2s infinite;
  content: "";
}

.element-loading,
.element-loading * {
  pointer-events: none !important;
}

@keyframes element-loading {
  100% {
    transform: translateX(100%);
  }
}

/*********************
** GENERAL
*********************/

#app {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: auto;
}

.window-decoration {
  display: none;
}

body.native-windows .window-decoration {
  position: absolute;
  pointer-events: auto;
  display: block;
  z-index: 999;
}

.window-decoration-1 {
  top: 0;
  left: 0;
  width: 100vw;
  height: 5px;
}

.window-decoration-2 {
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 5px;
}

.window-decoration-3 {
  top: 0;
  left: 0;
  width: 5px;
  height: 100vh;
}

.window-decoration-4 {
  top: 0;
  right: 0;
  width: 5px;
  height: 100vh;
}

#window-controls {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1000;
}

body.native-windows #window-controls {
  display: flex;
}

#window-controls ui-button {
  width: 50px;
  height: 30px;
}

#window-controls ui-button.window-controls-max .button-icon {
  font-size: 14px;
}

#window-controls ui-button.window-controls-close {
  --pointer-h-col: rgb(177, 52, 31);
  --pointer-a-col: rgb(214, 75, 50);
}

#window-controls ui-button .button-icon {
  font-size: 20px;
  font-weight: 300;
  color: var(--col-t3);
}

#window-controls ui-button .button-wrapper {
  border-radius: 0;
}

#pwa-controls {
  display: none;
  position: fixed;
  z-index: 1;
  left: env(titlebar-area-x, 0px);
  top: env(titlebar-area-y, 0px);
  width: env(titlebar-area-width, 0px);
  height: env(titlebar-area-height, 0px);
  overflow: hidden;
  -webkit-app-region: drag;
  app-region: drag;
  pointer-events: auto;
}

#pwa-controls .pwa-title {
  color: var(--col-t1);
  height: 100%;
  padding-left: 10px;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

#pwa-controls .pwa-text-input-wrapper {
  position: absolute;
  top: 5px;
  height: calc(100% - 10px);
  width: min(50%, 500px);
  left: 50%;
  margin: 0 max(-25%, -250px);
  box-sizing: border-box;
}

@media only screen and (max-width: 800px) {
  #pwa-controls .pwa-text-input-wrapper {
    display: none;
  }

  body.native:not(.native-mobile) #pwa-controls .pwa-text-input-wrapper {
    display: block;
  }
}

@media only screen and (max-width: 450px) {

  body.native #pwa-controls .pwa-text-input-wrapper,
  #pwa-controls .pwa-text-input-wrapper {
    display: none;
  }
}

#pwa-controls .pwa-text-input {
  width: 100%;
  height: 100%;
  color: var(--col-lgd);
  font-size: 100%;
  font-weight: 300;
  padding: 0 20px 0 40px;
  border-radius: 3px;
  box-sizing: border-box;
  border: 1px solid var(--col-lgd);
  background-color: var(--col-lg);
  cursor: text;
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

#pwa-controls .pwa-text-input-overlay {
  position: absolute;
  color: var(--col-lgd);
  top: 0;
  left: 10px;
  height: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-family: "ff-ico";
  font-size: 14px;
}

@media (display-mode: window-controls-overlay) {
  #pwa-controls {
    display: block;
  }
}

body.native:not(.in-tray):not(.native-mobile) #pwa-controls {
  display: block;
  left: 70px;
  right: auto;
  height: 30px;
  width: calc(100% - 140px);
}

body.native #pwa-controls .pwa-title {
  display: none;
}

#content-wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: top;
  position: absolute;
  /* overflow: hidden; */
  top: var(--pad-t);
  right: var(--pad-r);
  bottom: var(--pad-b);
  left: var(--pad-l);
  overflow: hidden;
  border-radius: 3px;
}

ui-pointer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
}

ui-pointer .pointer-h,
ui-pointer .pointer-a {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

ui-pointer .pointer-a {
  opacity: 0;
  transform: scaleY(0);
  background-color: var(--pointer-a-col, transparent);
}

ui-pointer .pointer-h {
  opacity: 0;
  background-color: var(--pointer-h-col, transparent);
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

*.disabled>ui-pointer .pointer-h,
ui-pointer.no-hover .pointer-h {
  display: none;
}

*.disabled>ui-pointer .pointer-a,
ui-pointer.no-active .pointer-a {
  display: none;
}

@media (hover: hover) {

  ui-pointer.hover .pointer-h,
  *:hover>ui-pointer .pointer-h {
    opacity: var(--pointer-h-opacity, 1);
  }

  /* iOS z-index fix: */
  @media not all and (min-resolution:.001dpcm) {

    @media {
      :root *:hover>ui-pointer~* {
        transform: translateZ(0);
      }
    }
  }
}


ui-pointer.active .pointer-a {
  opacity: var(--pointer-a-opacity, 1);
  transform: scaleY(1);
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1), transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

html body ui-pointer.postactive .pointer-a {
  opacity: 0;
  transform: scaleY(1);
  transition: opacity 0.5s cubic-bezier(0.37, 0, 0.63, 1), transform 0.5s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-pointer.highlight .pointer-a {
  animation: pointer-highlight 2s 0s 1;
}

@keyframes pointer-highlight {
  0% {
    /* don't animate if forcing active state */
    opacity: 0;
    transform: scaleY(0);
  }

  25% {
    opacity: 1;
    transform: scaleY(1);
  }

  50% {
    opacity: 0.5;
    transform: scaleY(1);
  }

  75% {
    opacity: 1;
    transform: scaleY(1);
  }

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

/******************
 * GENERAL: Loader
 ******************/

#splash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--col-l-h1);
  z-index: 100;
  pointer-events: auto;
  app-region: drag;
  transition: opacity 1s cubic-bezier(0.37, 0, 0.63, 1);
}

#splash-content {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}

#splash-content>span {
  display: block;
  max-width: 256px;
  margin-top: 10px;
  text-align: center;
}

/* force font preloading */
#font-preload-1 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "ff-ico";
}

#font-preload-2 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "ff-mono";
}

#font-preload-3 {
  position: absolute;
  top: 0;
  left: 0;
  font-family: "ff-sans";
}

.splash-logo {
  position: relative;
  width: calc(100% - 40px);
  max-width: 256px;
  overflow: hidden;
  background-color: var(--col-l-lg);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.37, 0, 0.63, 1), transform 1s cubic-bezier(0.37, 0, 0.63, 1);
}

.splash-logo-spacer {
  width: 100%;
  padding-top: 100%;
}

.splash-logo-background-1,
.splash-logo-background-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  animation: 3s cubic-bezier(0.37, 0, 0.63, 1) infinite splash-1 paused;
}

.splash-logo-background-2 {
  background-color: var(--col-l-lg);
  animation: 3s cubic-bezier(0.37, 0, 0.63, 1) infinite splash-2 paused;
}

.splash-logo-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0.85;
}

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

  60% {
    transform: scale(1);
  }

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

@keyframes splash-2 {
  0% {
    transform: scale(0);
  }

  40% {
    transform: scale(0);
  }

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

/******************
 * GENERAL: Menu Position
 ******************/

ui-ui.menu-position-t #header {
  order: 1;
}

ui-ui.menu-position-t #body-wrapper {
  order: 2;
}

ui-ui.menu-position-t #header-content {
  flex-direction: row-reverse;
}

ui-ui.menu-position-t #header-content .player-info {
  flex-direction: row-reverse;
}


/******************
 * GENERAL: Rest
 ******************/

#background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

#background #background-body {
  position: relative;
  flex: 1 1 auto;
  background-color: var(--col-h1);
  overflow: hidden;
}

#background #background-body #background-windows {
  top: calc(var(--pad-t) + 70px);
  left: 0;
  right: 0;
  bottom: 0;
  transform: scaleY(0);
  position: absolute;
  background-color: var(--col-h3);
  overflow: hidden;
  transform-origin: 50% 100%;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

#background #background-body #background-windows::after {
  display: block;
  position: absolute;
  content: "";
  border-radius: 3px;
  box-shadow: 0px 0px 50px 0px var(--col-h3-d);
  top: 0;
  right: var(--pad-r);
  bottom: 0;
  left: var(--pad-l);
}

@media only screen and (max-width: 500px),
only screen and (max-height: 500px) {

  /* phones with safe-zone will otherwise show a shadow */
  #background #background-body #background-windows::after {
    box-shadow: none;
  }
}

ui-ui.menu-position-t #background #background-body #background-windows {
  top: 70px;
}

ui-ui.has-windows #background #background-body #background-windows {
  transform: scaleY(1);
}

#background #background-body::before {
  display: block;
  position: absolute;
  content: "";
  border-radius: 3px;
  box-shadow: 0px 0px 50px 0px var(--col-h1-d);
  top: var(--pad-t);
  right: var(--pad-r);
  bottom: 0;
  left: var(--pad-l);
}

@media only screen and (max-width: 500px),
only screen and (max-height: 500px) {

  /* phones with safe-zone will otherwise show a shadow */
  #background #background-body::before {
    box-shadow: none;
  }
}

#background #background-header {
  position: relative;
  flex: 0 0 auto;
  height: calc(var(--pad-b) + 70px);
  background-color: var(--col-h2);
  overflow: hidden;
}

#background #background-header::before {
  display: block;
  position: absolute;
  content: "";
  border-radius: 3px;
  box-shadow: 0px 0px 50px 0px var(--col-h2-d);
  top: 0;
  right: var(--pad-r);
  bottom: var(--pad-b);
  left: var(--pad-l);
}

@media only screen and (max-width: 500px),
only screen and (max-height: 500px) {

  /* phones with safe-zone will otherwise show a shadow */
  #background #background-header::before {
    box-shadow: none;
  }
}

ui-ui.menu-position-t #background #background-body {
  order: 1;
}

ui-ui.menu-position-t #background #background-body::before {
  top: 0;
  bottom: var(--pad-b);
}

ui-ui.menu-position-t #background #background-body #background-windows::after {
  top: 0;
  bottom: var(--pad-b);
}

ui-ui.menu-position-t #background #background-header {
  order: 0;
  height: calc(var(--pad-t) + 70px);
}

ui-ui.menu-position-t #background #background-header::before {
  top: var(--pad-t);
  bottom: 0;
}

#windows {
  display: none;
  transform: scaleY(0);
  transform-origin: 50% 100%;
  position: absolute;
  top: 70px;
  left: 0;
  right: 0;
  bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
  /* border-radius: 3px; */
  z-index: 13;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

#windows.show {
  transform: scaleY(1);
}

ui-ui:not(.has-windows) #windows {
  display: none;
}

ui-ui.menu-position-t {
  top: 0;
  bottom: 70px;
}

#windows-header {
  position: absolute;
  display: flex;
  flex-direction: row;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: var(--col-h1);
  z-index: 13;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-ui.has-windows #windows-header {
  transform: scaleY(1);
  pointer-events: auto;
}

#windows-header .windows-header-left,
#windows-header .windows-header-right {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: nowrap;
  gap: 50px 10px;
  padding: 20px 10px;
  width: calc(50% - 60px);
  overflow: hidden;
}

#windows-header .windows-header-right {
  flex-direction: row-reverse;
  flex-wrap: wrap;
  gap: 50px 10px;
}

#windows-header ui-button {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

#windows-header .spacer {
  flex: 1 1 auto;
}

#windows-header .windows-header-logo-wrapper {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 5px 10px;
  background-color: var(--col-lg);
}

#windows-header .windows-header-logo {
  width: 60px;
  height: 60px;
  background-image: url("/img/logo.png");
  background-size: contain;
}

#overlays {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  z-index: 60;
}

.mousetrap {
  /* z-index: 48; */
  pointer-events: auto;
  position: absolute;
  background-color: rgba(var(--col-h1-raw), 0.5);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  /* will-change: opacity, backdrop-filter; */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  z-index: 55;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.mousetrap.show {
  opacity: 1;
}

.text-input {
  position: relative;
  font-family: "ff-sans", sans-serif;
  height: 50px;
  color: var(--col-lgd);
  font-size: 20px;
  font-weight: 300;
  margin: 0;
  padding: 0 50px 0 20px;
  border-radius: 3px;
  border: none;
  background-color: var(--col-lg);
  pointer-events: auto;
  -webkit-appearance: none;
  outline: none;
  background-image: none;
  box-shadow: none;
}

.focusable {
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
}

ui-menu-item .spinner {
  z-index: 2;
  height: 50px;
}

.list-content>.spinner {
  height: 40px;
  z-index: 11;
  transform-origin: 50% 0;
  transition: none;
}

.spinner {
  position: absolute;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(var(--col-h1-raw), 0.5);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.spinner.show {
  opacity: 1;
}

.spinner .spinner-wrapper {
  position: relative;
  width: 30px;
  height: 30px;
  opacity: 1;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.spinner .spinner-wrapper.hide {
  opacity: 0;
}

.spinner .spinner-circle {
  background-color: var(--col-lg);
  width: 30px;
  height: 30px;
  overflow: hidden;
  border-radius: 50%;
}

.spinner .spinner-circle .spinner-background-1,
.spinner .spinner-circle .spinner-background-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 50%;
  transform: scale(0);
  animation: 3s cubic-bezier(0.37, 0, 0.63, 1) infinite spinner-1 paused;
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.spinner .spinner-circle .spinner-background-2 {
  background-color: var(--col-lg);
  animation: 3s cubic-bezier(0.37, 0, 0.63, 1) infinite spinner-2 paused;
}

.spinner .spinner-circle .spinner-background-1.show,
.spinner .spinner-circle .spinner-background-2.show {
  opacity: 1;
  animation-play-state: running;
}

.spinner .spinner-ico,
.spinner .spinner-check,
.spinner .spinner-nocheck {
  font-family: "ff-ico";
  position: absolute;
  left: calc(50% - 15px);
  top: calc(50% - 15px);
  font-size: 30px;
  line-height: 30px;
  width: 30px;
  height: 30px;
  color: var(--col-lgd);
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.spinner .spinner-ico.show,
.spinner .spinner-check.show,
.spinner .spinner-nocheck.show {
  opacity: 0.5;
}

@keyframes spinner-1 {
  0% {
    transform: scale(0);
  }

  60% {
    transform: scale(1);
  }

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

@keyframes spinner-2 {
  0% {
    transform: scale(0);
  }

  40% {
    transform: scale(0);
  }

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

.badge {
  position: absolute;
  top: 4px;
  right: 4px;
  opacity: 0;
  width: 6px;
  height: 6px;
  background-color: var(--col-yy);
  border-radius: 50%;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.badge.show {
  opacity: 1;
}

ui-menu-item .badge {
  right: auto;
  left: 4px;
}

ui-button {
  display: block;
  position: relative;
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-button.disabled {
  opacity: 0.5;
  pointer-events: none !important;
}

ui-button.disabled * {
  pointer-events: none !important;
}

ui-button.inline {
  display: inline-block;
  align-self: baseline;
  height: 40px;
}

ui-button.inline .button-wrapper {
  display: inline-block;
  padding: 0 15px;
  box-sizing: border-box;
}

ui-button.inline .button-content {
  height: 100%;
  align-items: center;
  width: auto;
}

ui-button .button-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--col-bt);
  color: var(--col-t1);
  pointer-events: auto;
  z-index: 1;
  border-radius: 3px;
}

ui-button.transparent .button-wrapper,
ui-button.full-transparent .button-wrapper {
  background-color: transparent;
}

ui-button.full-transparent .button-wrapper {
  --pointer-h-col: transparent;
  --pointer-a-col: transparent;
}

ui-button .button-wrapper .button-content {
  display: flex;
  flex-direction: row;
  gap: 5px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: relative;
}

ui-button.flip-horizontal .button-wrapper {
  transform: scaleX(-1);
}

ui-wave {
  display: block;
  overflow: hidden;
}

ui-wave .wave-wrapper {
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-end;
  gap: 3px;
  transform: scaleY(1);
  transform-origin: 50% 100%;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  box-sizing: border-box;
}

ui-wave .wave-wrapper.hide {
  transform: scaleY(0);
}

ui-wave .wave-bar {
  flex: 1 1 auto;
  background-color: var(--col-t1);
  opacity: 0.1;
  border-radius: 3px 3px 0 0;
  transform: scaleY(1);
  transform-origin: 50% 100%;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1), opacity 1s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-wave .wave-bar.hide {
  transform: scaleY(0);
  transition: none;
}

ui-wave .wave-bar.active {
  opacity: 0.2;
}

.disable-pointer {
  pointer-events: none !important;
  overflow: hidden !important;
}

*:not(.nocull).cull {
  visibility: hidden;
}

a {
  color: inherit;
  transition: color 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  pointer-events: auto;
}

@media (hover: hover) {
  a:hover {
    color: var(--col-t3);
  }
}

a:active {
  color: var(--col-t3);
}

textarea {
  color: var(--col-t1);
  width: 100%;
  height: 200px;
  padding: 10px;
  box-sizing: border-box;
  background-color: var(--col-bt);
  border: none;
  overflow: auto;
  overscroll-behavior: contain;
  outline: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  resize: none;
  border-radius: 3px;
  pointer-events: auto;
  font-family: "ff-sans", sans-serif;
}

/*********************
** UI
*********************/

ui-ui {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#header {
  position: relative;
  flex-shrink: 0;
  flex-grow: 0;
  height: 70px;
  background-color: var(--col-h2);
}

#header-content {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  /* overflow: hidden; */
  height: 70px;
  align-items: flex-start;
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

#body-wrapper {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  background-color: var(--col-h1);
}

#body {
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  will-change: transition;
}

#footer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  z-index: 11;
}

.overlay-window-zoomer {
  position: absolute;
  border-radius: 3px;
  background-color: var(--col-h3);
  transform-origin: 50% 0%;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-window {
  position: relative;
  display: block;
  bottom: 0;
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  pointer-events: auto;
  overflow: hidden;
  z-index: 1;
}

html body ui-ui #overlays ui-window.overlay {
  position: absolute;
  max-height: min(800px, calc(100vh - 120px));
  min-width: min(400px, calc(100vw - 80px));
  max-width: min(400px, calc(100vw - 80px));
  min-height: min(70px, calc(100vh - 120px));
  background-color: var(--col-h3);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  transform: scaleY(0);
  transform-origin: 50% 50px;
  /* ios performance fix */
  /* will-change: transform; */
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

html body ui-ui #overlays ui-window.overlay.fullscreen {
  max-height: none;
  min-width: none;
  max-width: none;
  min-height: none;
  box-shadow: none;
  border-radius: none;
  transform: scaleY(1);
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

html body ui-ui #overlays ui-window.overlay.fullscreen .window-content .window-content-element .window-content-element-scroll-view {
  padding: 10px 40px;
}

html body ui-ui #overlays ui-window.overlay.show {
  transform: scaleY(1);
}

html body ui-ui #overlays ui-window.overlay.fullscreen.show {
  opacity: 1;
}

html body ui-ui #overlays ui-window.overlay>.window-content>ui-episode-item,
html body ui-ui #overlays ui-window.overlay>.window-content>ui-show-item {
  width: calc(100% - 20px);
  left: 10px;
  top: 10px;
}

html body ui-ui #overlays ui-window.overlay .window-content-element .window-content-element-scroll-view,
html body ui-ui #overlays ui-window.overlay .window-content-element .window-content-element-scroll-view {
  padding: 10px;
}

html body ui-ui #overlays ui-window.overlay .window-content-element.has-preview-episode .window-content-element-scroll-view,
html body ui-ui #overlays ui-window.overlay .window-content-element.has-preview-show .window-content-element-scroll-view {
  padding-top: 85px;
}

ui-window.attached {
  max-height: calc(100% - 40px);
}

ui-window .window-content {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  pointer-events: auto;
}

ui-window .window-background {
  display: none;
}

/* ui-window.overscroll .window-content {
  overflow-x: hidden;
}

ui-window.no-bounce .window-content {
  overscroll-behavior-y: auto;
  overscroll-behavior-x: none;
} */

ui-window .window-content p {
  padding: 0 10px;
  color: var(--col-t2);
  margin: 0 0 10px;
}

ui-window .window-content p.no-indent {
  padding: 0;
}

@supports (-webkit-touch-callout: none) {

  /* iOS scroll snap reset fix */
  /* Needs to be declared in one block */
  ui-window.no-snap .window-content {
    scroll-snap-type: none;
    overflow: hidden;
  }
}

@supports not (-webkit-touch-callout: none) {

  ui-window.no-snap .window-content {
    scroll-snap-type: none;
  }
}

ui-window .window-content::-webkit-scrollbar {
  display: none;
}

ui-window .window-content-element {
  position: relative;
  display: block;
  flex-grow: 0;
  flex-shrink: 0;
  scroll-snap-stop: always;
  scroll-snap-align: start;
  height: 100%;
  width: 100%;
  max-width: 100%;
}

ui-window.overlay .window-content-element {
  max-width: 100%;
}

ui-window.overlay .window-content-element::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: "";
  z-index: 9;
  background: linear-gradient(180deg, rgba(var(--col-h3-raw), 1) 0%, rgba(var(--col-h3-raw), 1) 90%, rgba(var(--col-h3-raw), 0) 100%);
}

ui-window.overlay .window-content-element::after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: "";
  background: linear-gradient(0deg, rgba(var(--col-h3-raw), 1) 0%, rgba(var(--col-h3-raw), 1) 10%, rgba(var(--col-h3-raw), 0) 100%);
  z-index: 9;
}

ui-window .window-content-element .window-content-element-scroll-view::-webkit-scrollbar {
  display: none;
}

ui-window .window-content-element .window-content-element-scroll-view {
  position: relative;
  min-height: 100%;
  max-height: 100%;
  height: 100%;
  padding: 20px 10px 10px;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  pointer-events: auto;
}

@supports (-webkit-touch-callout: none) {

  /* iOS force scroll */
  ui-window:not(.overlay) .window-content-element .window-content-element-scroll-view .window-content-element-zoom-view {
    /* iOS scroll/visibility fix */
    min-height: calc(100% + 1px);
  }
}

html body ui-ui ui-window .window-content-element .window-content-element .window-content-element-scroll-view {
  /* embedded */
  padding: 0 !important;
  min-height: auto !important;
  max-height: auto !important;
  height: auto !important;
  overflow: hidden !important;
}

html body ui-ui ui-window .window-content-element .window-content-element {
  /* embedded */
  max-width: auto !important;
  height: auto !important;
}

html body ui-ui ui-window .window-content .window-content-element .window-content-element p {
  /* embedded */
  padding: 0 !important;
}

ui-window .window-content-element .window-content-element-zoom-view {
  position: relative;
  width: 100%;
}

ui-window .window-content-element .window-content-element-content {
  margin: 0 auto;
  max-width: 800px;
  min-width: 300px;
  width: 100%;
}

#windows .window-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--col-h3);
}

#windows .window-background .window-cycling-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s cubic-bezier(0.37, 0, 0.63, 1);
  /* Force GPU rendering on Safari and Firefox */
  /* transform: translate3d(0, 0, 0) rotate(0) skewX(0) skewY(0) scaleX(1) scaleY(1); */
}

#windows .window-background .window-cycling-background.active {
  opacity: 0.1;
}

#windows-header .window-title {
  flex: 1 1 auto;
  position: relative;
}

#windows-header .window-title .window-cycling-title {
  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
  /* will-change: transform, opacity; */
}

#windows-header .window-title .window-cycling-title span {
  display: inline-block;
  box-sizing: border-box;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 400;
  font-size: 16px;
  color: var(--col-t1);
  text-align: right;
}

#windows-header .window-back-button {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  position: relative;
  transform: translate(-10px 0) scale(0);
  opacity: 0;
  overflow: hidden;
  transition: none;
}

#windows-header .window-back-button .button-icon {
  font-weight: 400;
}

ui-window h1 {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 500;
}

ui-window h1.element-loading {
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
  background-color: var(--col-bt);
  width: 150px;
}

ui-window h2 {
  color: var(--col-t2);
  text-transform: uppercase;
  font-size: 15px;
  padding: 0;
  margin: 0;
  font-weight: 500;
}

ui-window table {
  border: 0;
  border-collapse: collapse;
}

ui-window div.table {
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 3px 10px;
}

ui-splash-out {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  max-width: 100%;
  background-color: var(--col-l-h1);
  clip-path: circle(0%);
  z-index: 9999;
  transition: clip-path 1s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-column {
  display: flex;
  gap: 5px;
  flex-direction: column;
}

ui-row {
  position: relative;
  display: flex;
  gap: 5px;
  flex-direction: row;
}

.nogap {
  gap: 0;
}

.tinygap {
  gap: 2px;
}

.mediumgap {
  gap: 10px;
}

.biggap {
  gap: 20px;
}

.right {
  justify-content: flex-end;
}

.center {
  justify-content: center;
}

.between {
  justify-content: space-between;
}

ui-menu-item {
  position: relative;
  background-color: var(--col-bt);
  color: var(--col-t1);
  pointer-events: auto;
  overflow: hidden;
  --pointer-a-col: var(--col-al);
  --pointer-h-col: var(--col-hl);
  /* iOS transition border corner fix */
  z-index: 1;
  will-change: transform;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.menu-item-dummy {
  position: relative;
  background-color: var(--col-bt);
  width: 100%;
  height: 50px;
  border-radius: 3px;
  overflow: hidden;
}

ui-menu-item::before {
  display: block;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  height: 100%;
  width: 5px;
  background-color: var(--col-t1);
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 1;
  z-index: 1;
  /* +window */
  /* will-change: transform; */
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-window.transitioning ui-menu-item::before {
  /* chrome display fix */
  will-change: transform;
}

ui-menu-item.disabled>* {
  opacity: 0.5;
}

ui-menu-item .menu-item-content {
  width: 100%;
  height: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  padding: 0 10px;
  box-sizing: border-box;
}

ui-menu-item.low .menu-item-content,
ui-menu-item.low .menu-item-input,
ui-menu-item.low .menu-item-seek {
  height: 30px;
}

ui-menu-item.low ui-show-image {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  max-width: 30px;
  max-height: 30px;
}

ui-menu-item.low .menu-item-icon,
ui-menu-item.low .menu-item-right-icon,
ui-menu-item.low .menu-item-toggle,
ui-menu-item.low .menu-item-value-title,
ui-menu-item.low .menu-item-title {
  line-height: 30px;
}

@media (hover: hover) {
  ui-menu-item:not(.disabled):hover::before {
    transform: scaleX(1);
  }
}

ui-menu-item ui-show-image {
  position: relative;
  left: -10px;
  padding-top: 0;
  width: 50px;
  height: 50px;
  min-width: 50px;
  min-height: 50px;
  max-width: 50px;
  max-height: 50px;
  flex: 0 0 auto;
  border-radius: 0;
  /* will-change: transform; */
  /* transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1); */
}

ui-menu-item .menu-item-vertical-titles {
  flex: 1 1 auto;
  max-width: calc(100% - 100px);
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

ui-menu-item .menu-item-vertical-titles .menu-item-value-title,
ui-menu-item .menu-item-vertical-titles .menu-item-title {
  height: 16px;
  line-height: 16px;
  max-width: 100%;
  flex: 0 0 auto;
}

ui-menu-item .menu-item-value-title,
ui-menu-item .menu-item-title {
  position: relative;
  display: block;
  height: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  line-height: 50px;
  flex: 1 0 auto;
  max-width: calc(100% - 90px);
  padding-right: 10px;
  /* transform: translate(0); */
  /* will-change: transform; */
  /* transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1); */
}

ui-menu-item .menu-item-title {
  max-width: calc(100% - 40px);
  color: var(--col-t1);
}

ui-menu-item .menu-item-title a {
  font-weight: bold;
  pointer-events: auto;
  transition: color 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

@media (hover: hover) {
  ui-menu-item .menu-item-title a:hover {
    color: var(--col-t3);
  }
}

ui-menu-item .menu-item-title a:active {
  color: var(--col-t3);
}

ui-menu-item .menu-item-value-title {
  flex: 0 1 auto;
  padding-right: 0;
  min-width: 0;
  margin-right: 10px;
  color: var(--col-t3);
}

ui-menu-item.toggle .menu-item-title,
ui-menu-item.settings-toggle .menu-item-title {
  max-width: calc(100% - 110px);
}

ui-menu-item.has-right-icon .menu-item-title {
  max-width: calc(100% - 90px);
}

ui-menu-item .menu-item-icon,
ui-menu-item .menu-item-right-icon,
ui-menu-item .menu-item-toggle {
  position: relative;
  flex-grow: 0;
  flex-shrink: 0;
  width: 30px;
  height: 100%;
  margin-right: 10px;
  font-size: 20px;
  line-height: 50px;
  left: 0;
  text-align: center;
  /* will-change: transform; */
  /* transform: scale(1) translate(0); */
  /* transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1); */
}

ui-menu-item .menu-item-icon svg.download-spinner {
  position: relative;
  top: 17px;
  left: 7px;
}

ui-menu-item.error .menu-item-icon {
  color: var(--col-err);
}

ui-menu-item.show-image .menu-item-icon {
  display: none;
}

ui-menu-item.show-image .menu-item-title {
  max-width: calc(100% - 120px);
}

ui-menu-item.mirror-icon .menu-item-icon {
  transform: scaleX(-1);
}

ui-menu-item .menu-item-right-icon {
  display: none;
  margin-right: 0;
  margin-left: 0;
  left: auto;
  right: 0;
}

ui-menu-item.has-right-icon .menu-item-right-icon {
  display: block;
}

ui-menu-item .menu-item-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
  left: auto;
  right: 0;
}

ui-menu-item.settings-toggle .menu-item-toggle,
ui-menu-item.toggle .menu-item-toggle {
  display: flex;
}

ui-menu-item .menu-item-toggle-content {
  width: 100%;
  height: 15px;
  box-sizing: border-box;
  border: 1px solid var(--col-t1);
  border-radius: 15px;
}

ui-menu-item .menu-item-toggle-content::after {
  display: block;
  content: "close";
  font-family: "ff-ico";
  overflow: hidden;
  font-size: 11px;
  line-height: 11px;
  text-indent: 0;
  width: 11px;
  height: 11px;
  border-radius: 11px;
  transform: translate(2px, 1px);
  background-color: var(--col-t1);
  color: var(--col-tl3);
  /* will-change: transform; */
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-menu-item.toggle-active .menu-item-toggle-content::after,
ui-menu-item.settings-toggle-active .menu-item-toggle-content::after {
  content: "check";
  transform: translate(15px, 1px);
}

ui-menu-item:not(.hide):first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

ui-menu-item:not(.hide):last-child {
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}

/* ui-menu-item:not(:last-child)::after
{
  display: block;
  position: absolute;
  content: "";
  height: 1px;
  min-height: 1px;
  max-height: 1px;
  font-size: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
  overflow: hidden;
  background: linear-gradient(90deg, #ffffff00, #ffffff22 5% 95%, #ffffff00);
} */

ui-menu-item .menu-item-select {
  display: none;
  border: none;
  outline: none;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -ms-appearance: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  font-size: 0;
  box-sizing: border-box;
  padding: 0 5px;
}

ui-menu-item .menu-item-select::-ms-expand {
  display: none;
}

ui-menu-item.select .menu-item-select {
  display: block;
  pointer-events: auto;
}

ui-menu-item .menu-item-select option {
  font-size: initial;
  display: initial;
  position: initial;
  color: var(--col-t1);
  background-color: var(--col-h1);
}

ui-menu-item .menu-item-file {
  display: none;
}

ui-menu-item.input {
  --pointer-a-col: transparent;
}

ui-menu-item .menu-item-input {
  display: none;
  position: absolute;
  height: 50px;
  right: 10px;
  top: 0;
  padding: 0;
  /* transform: translate(0); */
  color: var(--col-t3);
  /* padding: 0 5px 0 0; */
  margin: 0;
  border: none;
  -webkit-appearance: none;
  outline: none;
  background-image: none;
  background-color: transparent;
  box-shadow: none;
  pointer-events: all;
  font-family: "ff-sans", sans-serif;
  font-size: 14px;
  font-weight: 300;
  max-width: calc(100% - 70px);
}

ui-menu-item.show-input .menu-item-input,
ui-menu-item.always-show-input .menu-item-input {
  display: block;
}

ui-menu-item:not(.disabled).always-show-input {
  cursor: text;
}

ui-menu-item.show-input .menu-item-title {
  overflow: visible;
  flex: 0 1 auto;
}

ui-menu-item.show-input .menu-item-value-title {
  display: none;
}

ui-menu-item.focusable:not(.disabled):focus::before,
ui-menu-item.show-input:not(.always-show-input)::before,
ui-menu-item.always-show-input:focus-within::before {
  transform: scale(1, 1);
}

ui-menu-item .menu-item-seek {
  position: relative;
  display: none;
  height: 50px;
  width: 100px;
  flex: 1 1 auto;
  max-width: calc(100% - 90px);
}

ui-menu-item.seek .menu-item-seek {
  display: flex;
}

ui-gallery {
  display: block;
  position: relative;
}

ui-gallery .gallery-content {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-x: scroll;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  pointer-events: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

ui-gallery .gallery-content::-webkit-scrollbar {
  display: none;
}

ui-gallery .gallery-content>* {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-width: min(100%, 250px);
}

ui-gallery .gallery-left,
ui-gallery .gallery-right {
  position: absolute;
  top: -31px;
  right: 5px;
  width: 25px;
  height: 25px;
  overflow: hidden;
  z-index: 1;
  opacity: 1;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-gallery .gallery-left .button-wrapper,
ui-gallery .gallery-right .button-wrapper {
  border-radius: 3px;
}

ui-gallery .gallery-left.hide,
ui-gallery .gallery-right.hide {
  opacity: 0.5;
}

ui-gallery .gallery-left {
  right: 35px;
}

ui-gallery .gallery-left span,
ui-gallery .gallery-right span {
  font-size: 35px;
}

ui-show-item {
  position: relative;
  display: block;
  width: auto;
  height: auto;
  min-width: 70px;
  padding-top: calc(100% + 25px);
  overflow: visible;
}

.show-content {
  position: absolute;
  overflow: hidden;
  border-radius: 3px;
  background-color: var(--col-bt);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 5px;
  box-sizing: border-box;
  pointer-events: auto;
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
  transform: scale(1);
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1), box-shadow 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  will-change: transform;
}

ui-ui ui-show-item:not(.clickable) .show-content {
  pointer-events: none;
}

ui-ui ui-show-item ui-show-image {
  box-shadow: none;
}

.show-content ui-show-image {
  width: 100%;
}

.show-content ui-show-image {
  /* will-change: transform, box-shadow; */
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1), box-shadow 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-ui ui-show-item.dragging-shift-top .show-content {
  transform: translateY(calc(-100% - 5px));
}

ui-ui ui-show-item.dragging-shift-bottom .show-content {
  transform: translateY(calc(100% + 5px));
}

ui-ui ui-show-item.dragging-shift-left .show-content {
  transform: translateX(calc(-100% - 5px));
}

ui-ui ui-show-item.dragging-shift-right .show-content {
  transform: translateX(calc(100% + 5px));
}

ui-ui ui-show-item.dragging-shift-top.dragging-shift-right .show-content {
  transform: translate(calc(100% + 5px), calc(-100% - 5px));
}

ui-ui ui-show-item.dragging-shift-bottom.dragging-shift-left .show-content {
  transform: translate(calc(-100% - 5px), calc(100% + 5px));
}

ui-ui ui-show-item.dragging-shift-top.dragging-shift-right-double .show-content {
  transform: translate(calc(200% + 10px), calc(-100% - 5px));
}

ui-ui ui-show-item.dragging-shift-bottom.dragging-shift-left-double .show-content {
  transform: translate(calc(-200% - 10px), calc(100% + 5px));
}

ui-ui ui-show-item.dragging-shift-top.dragging-shift-right-tripple .show-content {
  transform: translate(calc(300% + 15px), calc(-100% - 5px));
}

ui-ui ui-show-item.dragging-shift-bottom.dragging-shift-left-tripple .show-content {
  transform: translate(calc(-300% - 15px), calc(100% + 5px));
}

.show-content .show-meta {
  position: absolute;
  display: flex;
  box-sizing: border-box;
  left: 0;
  bottom: 5px;
  width: 100%;
  padding: 0 5px;
  flex-direction: row;
  flex-wrap: nowrap;
  /* gap: 12px; */
  overflow: hidden;
  align-items: flex-start;
}

.show-content .show-title {
  /* position: absolute;
  left: -3px;
  bottom: -9px;
  font-weight: 999; */
  flex: 1 1 auto;
  color: var(--col-t1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  position: relative;
  overflow: hidden;
  /* line-height: 50px; */
}

.show-content .show-description {
  display: none;
  color: var(--col-t2);
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  overflow: hidden;
}

.show-content .show-description.show {
  display: block;
}

/* ui-ui.active-edit .show-content .show-more
{
  width: 0;
  opacity: 0;
  pointer-events: none;
} */

ui-ui ui-window .window-content>ui-show-item {
  position: fixed;
  height: 64px;
  padding-top: 0;
  top: 20px;
  width: calc(100% - 20px);
  max-width: 800px;
  left: max(10px, calc(50% - 400px));
  position: fixed;
  z-index: 10;
}

ui-ui ui-window .window-content>ui-show-item .show-content {
  height: 64px;
  display: flex;
  gap: 10px;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  padding: 0;
}

ui-ui ui-window .window-content>ui-show-item .show-meta {
  display: block;
  height: auto;
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  padding: 0 10px 0 0;
  bottom: 2px;
}

ui-ui ui-window .window-content>ui-show-item .show-meta .show-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 500;
}

ui-ui ui-window .window-content>ui-show-item .show-meta .show-description {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

ui-ui ui-window .window-content>ui-show-item ui-show-image {
  width: 64px;
  flex: 0 0 auto;
  pointer-events: none;
  border-radius: 3px 0 0 3px;
}

.list-content.show-list .list-items .item-list-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, max-content));
  grid-auto-rows: min-content;
  grid-gap: 5px;
  grid-auto-flow: row;
  padding-bottom: 40px;
}

.list-content.show-list ui-show-item {
  width: 230px;
  max-width: 100%;
}

@media only screen and (max-width: 300px) {
  .list-content.show-list .list-items .item-list-content {
    grid-template-columns: repeat(auto-fit, minmax(100%, max-content));
  }

  .list-content.show-list ui-show-item {
    width: 100%;
  }
}

.list-content.show-list ui-item-list ui-button {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 30px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.list-content.show-list ui-item-list ui-button .button-wrapper {
  pointer-events: none;
  color: var(--col-t3);
}

ui-ui.player-loaded .list-content.show-list ui-item-list ui-button {
  opacity: 1;
  pointer-events: auto;
}

ui-ui.player-loaded .list-content.show-list ui-item-list ui-button .button-wrapper {
  pointer-events: auto;
}

ui-drag-container>.show-content {
  top: auto;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: 12;
}

div.show-content.dragging {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-show-image {
  display: inline-block;
  position: relative;
  overflow: hidden;
  border-radius: 3px;
  /* -webkit-mask-image: -webkit-radial-gradient(white, black); */
}

ui-window ui-show-image.element-loading {
  background-color: var(--col-bt);
}

ui-show-image.element-loading {
  background-color: var(--col-bt);
}

ui-show-image.element-loading img {
  opacity: 0;
}

ui-show-image .show-image-spacer {
  margin-top: 100%;
}

ui-show-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  background-color: var(--col-bt);
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  /* transition: filter 0.15s cubic-bezier(0.37, 0, 0.63, 1); */
}

ui-show-image.enable-filter img {
  filter: grayscale(80%);
}


ui-comments {
  display: block;
}

ui-comments .comments-content {
  margin-bottom: -10px;
}

.content-episode-content ui-comments .comments-content {
  margin-bottom: 0;
}

ui-comments .comments-add-input .menu-item-title {
  color: var(--col-t3);
  padding-right: 0;
}

ui-comments .comments-add-input .menu-item-icon {
  margin-right: 5px;
  margin-top: 1px;
}

ui-comments .comments-add-input .menu-item-input {
  color: var(--col-t3);
  margin-top: -1px;
}

ui-comments .comments-comments {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

ui-comments .comments-error {
  position: relative;
  width: 100%;
  height: 0;
  max-height: 0;
}

ui-comments .comments-error-message {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  transform: scaleY(0);
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  color: var(--col-t3);
}

ui-comments .comments-error-message.show {
  transform: scaleY(1);
}

ui-comment {
  display: block;
  position: relative;
  --pointer-a-col: var(--col-al);
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  padding: 5px 0;
}

ui-comment>ui-pointer {
  position: absolute;
  top: -5px;
  right: -5px;
  bottom: -5px;
  left: -5px;
  border-radius: 3px;
}

ui-comment>ui-pointer div {
  border-radius: 3px;
}

ui-comment .comment-options {
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  height: 13px;
  margin: 0 -6px;
}

ui-comments.disabled ui-comment .comment-time {
  pointer-events: none;
}

ui-comment .comment-time,
ui-comment .comment-delete {
  position: relative;
  top: -8px;
  height: 30px;
}

ui-comment .comment-time.hidden {
  display: none;
}

ui-comment .comment-delete {
  display: none;
}

ui-comment .comment-delete.show {
  display: inline;
}

ui-comment .comment-time .button-wrapper {
  padding: 0 7px;
}

ui-comment .comment-delete .button-wrapper {
  padding: 0 5px;
}

ui-comments ui-comment .comment-comment {
  color: var(--col-t2);
}

ui-comments ui-comment .comment-user-name {
  color: var(--col-t1);
  font-weight: 400;
}

ui-comment .comment-content {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  justify-content: flex-start;
}

ui-comment .comment-comment {
  word-wrap: break-word;
}

ui-comment .comment-comment.element-loading {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: var(--col-bt);
}

ui-comment .comment-description {
  flex: 1 1 auto;
  min-width: 0;
}

ui-comment .comment-headline {
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-bottom: 3px;
}

ui-comment .comment-headline .comment-user-name {
  flex: 1 1 auto;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  line-height: 13px;
}

ui-comment .comment-headline .comment-user-name.element-loading {
  position: relative;
  width: 50%;
  max-width: 50%;
  background-color: var(--col-bt);
}

ui-comment .comment-user-icon {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: var(--col-bt);
  overflow: hidden;
}

ui-comment .comment-user-icon.element-loading {
  position: relative;
}

ui-comment.floating {
  position: absolute;
  max-width: min(100%, 200px);
  bottom: 5px;
  left: 0;
  padding: 3px 0;
  background-color: var(--col-lg);
  border-radius: 3px;
  --offset: 0px;
  margin-left: var(--offset);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-comment.floating .comment-content {
  padding: 5px 8px 5px 5px;
  gap: 5px;
  font-size: 12px;
  line-height: 16px;
}

ui-comment.floating .comment-user-icon,
ui-comment.floating .comment-user-icon img {
  width: 16px;
  height: 16px;
  background-color: var(--col-lgd);
}

ui-comment.floating .comment-title {
  display: none;
}

ui-comment.floating .comment-comment {
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  color: var(--col-lgd);
}

ui-comment.floating .comment-user-name {
  color: var(--col-lgd);
  font-weight: 400;
}

ui-comment.floating .comment-options {
  display: none;
}

ui-comment.floating::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: calc(10px + (var(--offset) * -1));
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--col-lg);
}

ui-tooltip {
  display: block;
  position: absolute;
  min-width: min(calc(100vw - 20px), 250px);
  max-width: min(calc(100vw - 20px), 400px);
  background-color: var(--col-lg);
  border-radius: 3px;
  --offset: 0px;
  margin-left: var(--offset);
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  z-index: 20;
  pointer-events: auto;
  transform-origin: 50% 10%;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
}

ui-tooltip .tooltip-content {
  padding: 10px;
}

ui-tooltip .tooltip-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--col-lgd);
  margin-bottom: 5px;
}

ui-tooltip .tooltip-description {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 10px;
}

ui-tooltip .tooltip-description p {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: var(--col-lgd);
}

ui-tooltip .tooltip-content ui-row ui-button {
  height: 30px;
}

ui-tooltip .tooltip-content ui-row ui-button .button-wrapper {
  height: 30px;
  padding: 0 10px;
}

body.settings-toggle-dark-mode ui-tooltip .tooltip-content ui-row ui-button .button-wrapper {
  color: var(--col-tl1);
  background-color: var(--col-bt-d);
  --pointer-h-col: var(--col-bt-d);
}

ui-tooltip::after {
  display: block;
  content: "";
  position: absolute;
  top: -10px;
  left: calc(50% - 10px - var(--offset));
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--col-lg);
}

ui-person {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

ui-person .person-image-spacer {
  margin-top: 100%;
}

ui-person img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(80%);
}

ui-person .person-image {
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  background-color: var(--col-bt);
}

ui-person .person-name {
  margin-top: 5px;
  position: relative;
  text-align: center;
}

ui-person .person-name.element-loading {
  height: 20px;
  background-color: var(--col-bt);
}

.issue-report-error-message {
  display: none;
  transform: scaleY(0);
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.issue-report-error-message.show {
  display: block;
  transform: scaleY(1);
}

.password-error-message.show,
.sign-in-error-message.show,
.sign-up-error-message.show {
  transform: scaleY(1);
}

.password-error-message,
.sign-in-error-message,
.sign-up-error-message {
  transform: scaleY(0);
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.password-error-message.show,
.sign-in-error-message.show,
.sign-up-error-message.show {
  transform: scaleY(1);
}

.content-privacy-policy h1 {
  color: var(--col-t1);
}

.content-privacy-policy h2 {
  margin: 0;
  padding: 0;
  color: var(--col-t2);
}

.content-privacy-policy h3 {
  margin: 0;
  padding: 0;
  font-weight: 400;
  padding-left: 10px;
  color: var(--col-t2);
}

.content-privacy-policy ul {
  color: var(--col-t2);
  margin: 0 0 10px;
  padding-left: 30px;
}

ui-content-explore-shows .content-explore-shows-search-wrapper {
  position: relative;
  flex: 1 1 auto;
  flex-wrap: wrap;
}

ui-content-explore-shows .content-explore-shows-search-wrapper .content-explore-shows-search-delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  opacity: 0;
  cursor: text;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-content-explore-shows .content-explore-shows-search-wrapper .content-explore-shows-search-delete.show {
  opacity: 1;
  cursor: default;
}

ui-content-explore-shows .content-explore-shows-search-wrapper .content-explore-shows-search-delete .button-wrapper {
  color: var(--col-t3);
  --pointer-h-color: transparent;
  --pointer-a-color: var(--col-ad);
}

ui-content-explore-shows .text-input {
  width: 100%;
  box-sizing: border-box;
  padding-left: 20px;
}

ui-content-explore-shows ui-gallery.content-explore-shows-suggestions {
  height: 110px;
}

ui-content-trending-shows .window-content-element-content {
  position: relative;
}

ui-content-trending-shows .content-trending-shows-state-search,
ui-content-trending-shows .content-trending-shows-state-trending,
ui-content-trending-shows .content-trending-shows-tags-wrapper {
  display: none;
}

ui-content-trending-shows.state-shows .content-trending-shows-state-search,
ui-content-trending-shows.state-trending .content-trending-shows-state-trending,
ui-content-trending-shows.state-trending .content-trending-shows-tags-wrapper {
  display: flex;
}

ui-content-trending-shows .content-trending-shows-tags-wrapper {
  flex-wrap: wrap;
}

ui-content-trending-shows .content-trending-shows-tags-wrapper ui-tag {
  display: block;
  margin-right: 5px;
  margin-bottom: 5px;
  overflow: hidden;
}

ui-content-trending-shows .content-trending-shows-tags-wrapper ui-tag .tag-wrapper {
  margin-right: 20px;
}

ui-content-trending-shows .content-trending-shows-tags-wrapper ui-tag ui-button {
  position: absolute;
  right: 0;
  top: 0;
  width: 25px;
  height: 100%;
}

ui-content-trending-shows .content-trending-shows-tags-wrapper ui-tag ui-button .button-icon {
  font-size: 18px;
  font-weight: 500;
}

ui-content-trending-shows .content-trending-shows-tags-wrapper ui-tag ui-button .button-wrapper {
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
  border-radius: 0;
}

ui-content-trending-shows .content-trending-shows-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  grid-auto-rows: min-content;
  grid-gap: 5px;
  grid-auto-flow: row;
}

/* ui-content-trending-shows .content-trending-shows-sort {
  width: 40px;
  height: 40px;
  min-width: 40px;
} */

/* ui-content-trending-shows .content-trending-shows-search-wrapper,
ui-content-trending-shows .content-trending-shows-trending-wrapper {
  position: relative;
  flex: 1 1 auto;
  flex-wrap: wrap;
} */

ui-content-trending-shows .content-trending-shows-search-wrapper {
  position: relative;
}

/* ui-content-trending-shows .content-trending-shows-search-wrapper .content-trending-shows-search {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
} */

ui-content-trending-shows .content-trending-shows-search-wrapper .content-trending-shows-search-delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  opacity: 0;
  cursor: text;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-content-trending-shows .content-trending-shows-search-wrapper .content-trending-shows-search-delete.show {
  opacity: 1;
  cursor: default;
}

ui-content-trending-shows .content-trending-shows-search-wrapper .content-trending-shows-search-delete .button-wrapper {
  color: var(--col-t3);
  --pointer-h-color: transparent;
  --pointer-a-color: var(--col-ad);
}

ui-content-trending-shows .text-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0 100 0 20;
}

ui-content-trending-shows .content-trending-shows-sortlabel {
  font-size: 12px;
  position: absolute;
  right: 0;
  top: 3px;
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-content-trending-shows .content-trending-shows-sortlabel .tiny {
  font-size: 7px;
  position: relative;
  top: -1px;
}

ui-content-main-menu .main-menu-debug {
  display: none;
}

ui-content-admin .admin-content table {
  width: 100%;
  border-spacing: 0;
}

ui-content-admin .admin-content table td {
  padding: 5px;
}

ui-content-admin .admin-content table tr {
  transition: background-color 1s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-content-admin .admin-content table tr:first-child {
  background-color: #dddddd;
  font-weight: bold;
}

ui-content-admin .admin-content table tr:nth-child(odd) {
  background-color: #e5e5e5;
}

ui-content-admin .admin-content table tr:nth-child(even) {
  background-color: #eeeeee;
}

html body ui-content-admin .admin-content table tr.admin-done {
  background-color: #7ebe85;
}

ui-content-admin .admin-content table textarea {
  width: 100%;
  height: 200px;
  pointer-events: auto;
}

ui-content-confirmation {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  /* background-color: rgba(50, 50, 55, 0.95); */
  background-color: rgba(var(--col-h3-raw), 0.75);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  pointer-events: auto;
  z-index: 11;
}

ui-content-confirmation>ui-column {
  width: 100%;
  max-width: 800px;
}

.native-onboarding .window-content-element-zoom-view,
.native-onboarding .window-content-element-content {
  min-height: 100%;
}

.native-onboarding .window-content-element-content>ui-column {
  justify-content: center;
  min-height: calc(100vh - 20px);
}

.native-onboarding ui-row.onboarding-row-skip {
  position: absolute;
  bottom: 20px;
  height: 40px;
  width: calc(100% + 30px);
  max-width: 830px;
  left: max(-15px, calc(50vw - 415px - var(--pad-l)));
}

.native-onboarding ui-row.onboarding-row-skip .onboarding-button-back {
  position: absolute;
  left: 0;
}

.native-onboarding ui-button.onboarding-button {
  width: calc(50% - 5px);
  height: 100px;
  font-size: 16px;
}

.native-onboarding ui-button.onboarding-button .button-content {
  flex-direction: column;
}

.native-onboarding ui-button.onboarding-button .button-icon {
  font-size: 30px;
}

.native-onboarding ui-button.onboarding-button.active {
  background-color: var(--col-al);
}

ui-show-preview {
  display: block;
  position: relative;
  pointer-events: auto;
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
  background-color: var(--col-bt);
  border-radius: 3px;
  box-sizing: border-box;
  padding: 5px;
  overflow: hidden;
}

ui-show-preview:not(.no-clickable) {
  will-change: transform;
}

ui-show-preview.no-clickable {
  pointer-events: none;
}

ui-show-preview.no-clickable * {
  pointer-events: none;
}

ui-show-preview .show-preview-content {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  flex-direction: row;
  align-items: stretch;
  gap: 10px;
}

ui-show-preview ui-show-image {
  position: relative;
  flex: 0 0 auto;
  width: 33%;
  min-width: 100px;
  max-width: 200px;
  pointer-events: none;
}

/* @media (hover: hover) {
  ui-show-preview ui-show-image:hover img {
    filter: grayscale(80%) brightness(1.3);
  }
} */

/* ui-show-preview ui-show-image:active {
  transform: scale(0.98);
} */

ui-show-preview .show-preview-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
}

ui-show-preview .show-preview-title-row {
  flex: 0 0 auto;
  width: 100%;
}

ui-show-preview .show-preview-title {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  font-weight: 600;
  color: var(--col-t1);
}

ui-show-preview .show-preview-subscribe {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  position: relative;
  top: -2px;
}

ui-show-preview.subscribed .show-preview-subscribe {
  font-variation-settings: "FILL" 1;
}

ui-show-preview .show-preview-subscribe.disabled {
  display: none;
}

/* @media (hover: hover) {
  ui-show-preview .show-preview-subscribe:hover .button-wrapper {
    color: var(--col-t1);
  }
} */

ui-show-preview .show-preview-title.element-loading {
  height: 20px;
  width: 50%;
}

ui-show-preview .show-preview-description {
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(to bottom, black calc(100% - 15px), transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 15px), transparent 100%);
}

ui-show-preview .show-preview-description-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

ui-logo {
  position: relative;
  width: 100%;
  height: 100%;
}

#header ui-logo {
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  pointer-events: auto;
  background-color: var(--col-bt);
  border-radius: 3px 0 3px 3px;
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
}

ui-ui.menu-position-t #header ui-logo {
  border-radius: 3px 3px 0 3px;
}

ui-logo .logo-content {
  position: relative;
  top: 10px;
  left: 10px;
  width: 50px;
  height: 50px;
  transform: scale(1);
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-logo .logo-bar {
  position: absolute;
  width: 100%;
  height: 6px;
  top: calc(50% - 3px);
  left: 0;
  border-radius: 3px;
  background-color: var(--col-t1);
  opacity: 1;
  transform: none;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1), transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

@media (hover: hover) {
  ui-logo:hover .logo-content {
    transform: scale(1.05);
  }
}

ui-logo:active .logo-content {
  transform: scale(0.9);
}

ui-logo .logo-bar1.hidden {
  opacity: 0;
  transform: translateY(-18px);
}

ui-logo .logo-bar2.hidden {
  opacity: 0;
  transform: translateY(-5px);
}

ui-logo .logo-bar3.hidden {
  opacity: 0;
  transform: translateY(8px);
}

ui-logo .logo-bar1 {
  transform: translateY(-13px);
}

ui-logo .logo-bar2 {
  transform: translateY(0);
}

ui-logo .logo-bar3 {
  transform: translateY(13px);
}

ui-logo.state-x .logo-bar1 {
  transform: rotate(-45deg) translateY(0);
}

ui-logo.state-x .logo-bar2 {
  transform: translateY(0);
  opacity: 0;
}

ui-logo.state-x .logo-bar3 {
  transform: rotate(-135deg) translateY(0);
}

ui-content-player {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 490px;
  box-sizing: border-box;
  background-color: rgba(var(--col-h1-raw), 0.9);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 3px;
  padding: 30px 40px;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.5);
  opacity: 1;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

html body ui-ui ui-content-player.hidden {
  opacity: 0;
}

ui-content-player .player-meta {
  max-width: 400px;
  width: 100%;
  margin: 0 auto;
  opacity: 1;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-content-player.soft-disabled .player-meta,
ui-content-player.disabled .player-meta {
  opacity: 0.5;
}

ui-content-player.soft-disabled *,
ui-content-player.disabled *,
ui-content-player.hidden * {
  pointer-events: none !important;
}

ui-content-episode .content-episode-player {
  display: none;
}

ui-content-player ui-wave {
  position: absolute;
  top: 17px;
  left: 0;
  width: 100%;
  height: 100px;
}

ui-content-player ui-wave .wave-wrapper {
  gap: 1px;
  align-items: center;
  transform-origin: 50% 50%;
}

ui-content-player .player-controls {
  display: flex;
  flex-direction: row;
  gap: 10px;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: 30px 0 20px;
}

@media only screen and (max-width: 530px) {
  html body ui-ui.settings-toggle-context-menus ui-content-episode.has-player .content-episode-content .content-episode-menu {
    top: calc((100vh - var(--pad-t) - var(--pad-b)) / 2 - 140px - 60px);
    width: 30px;
    height: 30px;
    right: 0;
    left: auto;
    margin: 0;
  }

  html body ui-ui.settings-toggle-context-menus ui-content-episode.has-player .content-episode-content .content-episode-menu ui-button {
    width: 30px;
    height: 30px;
  }
}

@media only screen and (max-width: 450px) {
  ui-content-player {
    padding: 30px 30px;
  }
}

@media only screen and (max-width: 360px) {
  ui-content-player {
    padding: 30px 20px;
  }
}

ui-content-player .player-controls ui-button {
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
}

ui-content-player .player-controls ui-button .button-icon {
  font-size: 36px;
}

ui-content-player .player-controls ui-button.player-backward .button-icon,
ui-content-player .player-controls ui-button.player-forward .button-icon {
  font-size: 30px;
}

ui-content-player .player-controls .player-play-pause .button-icon::after {
  content: "play_arrow";
  font-size: 66px;
  font-variation-settings: "FILL" 1;
}

ui-content-player.playing .player-controls .player-play-pause .button-icon::after {
  content: "pause";
  font-size: 56px;
  font-weight: 100;
}

ui-content-player .player-meta .player-time-info {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  position: relative;
  top: 5px;
  margin-top: 10px;
  padding: 0 13px;
}

ui-content-player .player-meta .player-time,
ui-content-player .player-meta .player-time-total {
  flex: 1 1 auto;
  font-family: "ff-mono", monospace;
  color: var(--col-t3);
  font-size: 12px;
  text-align: right;
}

ui-content-player .player-meta .player-time {
  color: var(--col-t1);
  text-align: left;
}

ui-content-player ui-seek.player-seek {
  height: 28px;
  width: calc(100% + 20px);
  position: relative;
  left: -10px;
}

ui-content-player .player-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap-reverse;
  flex-direction: row;
  gap: 0;
  margin: 0 auto;
  width: 100%;
}

ui-content-player.mobile-player .player-options {
  justify-content: flex-end;
}

ui-content-player.mobile-player .player-volume {
  display: none;
}

ui-content-player .player-options>ui-menu-item {
  display: inline-block;
  border-radius: 3px;
  background-color: transparent;
  height: 30px;
  padding: 0 10px;
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
}

ui-content-player .player-options>ui-menu-item .menu-item-content {
  padding: 0;
  justify-content: center;
}

ui-content-player .player-options>ui-menu-item .menu-item-icon {
  margin: 0;
  padding: 0 5px 0 0;
  width: 10px;
  color: var(--col-t1);
  font-weight: 300;
}

ui-content-player .player-options>ui-menu-item.player-volume .menu-item-icon {
  padding: 0 5px;
}

ui-content-player .player-options>ui-menu-item .menu-item-value-title {
  max-width: 100%;
  margin: 0 5px 0 10px;
  padding: 0;
  text-overflow: clip;
  color: var(--col-t1);
}

ui-content-player .player-options>ui-menu-item .menu-item-right-icon {
  display: none;
}

@media (hover: hover) {
  ui-content-player .player-options>ui-menu-item:hover::before {
    transform: scale(0, 1);
  }

  ui-content-player .player-options>ui-menu-item:hover .menu-item-title,
  ui-content-player .player-options>ui-menu-item:hover .menu-item-value-title,
  ui-content-player .player-options>ui-menu-item:hover .menu-item-select,
  ui-content-player .player-options>ui-menu-item:hover .menu-item-seek,
  ui-content-player .player-options>ui-menu-item:hover .menu-item-icon,
  ui-content-player .player-options>ui-menu-item:hover ui-show-image {
    transform: none;
  }
}

ui-content-player .player-options .player-volume {
  flex: 1 1 auto;
}

ui-content-player .player-options .player-speed,
ui-content-player .player-options .player-sleep {
  flex: 0 0 auto;
}

ui-content-player .player-options>ui-menu-item * {
  line-height: 30px;
}

ui-content-player .player-options>ui-menu-item .menu-item-title {
  display: none;
}

ui-content-player .player-options>ui-menu-item.player-volume .menu-item-value-title {
  display: none;
}

ui-content-player .player-options>ui-menu-item.player-volume ui-seek {
  height: 30px;
  width: 100%;
  max-width: 100%;
}

ui-content-player .player-comment-floater {
  position: relative;
  z-index: 4;
  height: 0;
  max-height: 0;
}

ui-content-player .player-comment-floater .player-comment-markers,
ui-content-player .player-comment-floater .player-comment-floaters {
  position: absolute;
  top: -20px;
  width: 100%;
}

ui-content-player .player-comment-floater .marker {
  position: absolute;
  top: 4px;
  left: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--col-t3);
}

ui-player {
  height: 70px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
}

html body ui-ui ui-player:not(.loaded) * {
  pointer-events: none;
}

ui-player .player-unloaded {
  position: absolute;
  display: flex;
  flex-direction: row;
  height: 40px;
  top: 15px;
  right: 10px;
  opacity: 1;
  justify-content: center;
  align-content: center;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-player .player-unloaded ui-button {
  width: 40px;
  height: 40px;
}

ui-ui.menu-position-b ui-player .player-unloaded {
  right: auto;
  left: 10px;
}

ui-ui.has-windows ui-player .player-unloaded,
ui-player.loaded .player-unloaded {
  opacity: 0;
  pointer-events: none;
}

html body ui-ui:not(.has-windows) ui-player .player-unloaded ui-button,
html body ui-ui:not(.has-windows) ui-player .player-unloaded .button-wrapper,
html body ui-ui ui-player:not(.loaded) .player-unloaded ui-button,
html body ui-ui ui-player:not(.loaded) .player-unloaded .button-wrapper {
  pointer-events: auto;
}

html body #app ui-ui.has-windows ui-player .player-unloaded ui-button,
html body #app ui-ui.has-windows ui-player .player-unloaded ui-button .button-wrapper,
html body #app ui-ui ui-player.loaded .player-unloaded ui-button,
html body #app ui-ui ui-player.loaded .player-unloaded ui-button .button-wrapper {
  pointer-events: none;
}

ui-player .player-info {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  position: relative;
  height: 70px;
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-player.loaded .player-info {
  opacity: 1;
}

ui-player ui-comments {
  display: none;
}

ui-player .player-controls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: 11px;
  flex: 0 0 auto;
  height: 45px;
  box-sizing: border-box;
  opacity: 0.5;
  margin-right: 5px;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-player .player-controls ui-button .button-wrapper {
  color: var(--col-t1);
  font-weight: 400;
}

ui-player:not(.disabled) .player-controls {
  pointer-events: auto;
  opacity: 1;
}

ui-player .player-controls .player-time-info {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 30px;
  justify-content: center;
  pointer-events: none;
  margin-left: 5px;
}

ui-player .player-controls .player-time,
ui-player .player-controls .player-time-total {
  font-family: "ff-mono", monospace;
  color: var(--col-t3);
  font-size: 12px;
  height: 10px;
  padding-bottom: 3px;
  text-align: center;
}

ui-player .player-controls .player-time {
  border-bottom: 1px solid var(--col-t3);
  color: var(--col-t1);
}

ui-player .player-controls ui-button {
  height: 30px;
  width: 30px;
  top: 3px;
  pointer-events: inherit;
}

ui-player .player-controls ui-button .button-icon {
  font-weight: 300;
}

@media only screen and (max-width: 500px) {

  ui-player .player-controls .player-backward {
    display: none;
  }

  ui-player .player-controls ui-button {
    width: 25px;
    height: 25px;
    margin-top: 2px
  }
}

ui-player .player-controls .player-sleep,
ui-player .player-controls .player-sleep {
  display: none;
  width: 0;
}

ui-player .player-controls .player-sleep .button-title,
ui-player .player-controls .player-sleep .button-title {
  display: none;
}

ui-player .player-controls .player-play-pause-small {
  display: none;
}

ui-player .player-controls .player-play-pause-small .button-icon {
  font-variation-settings: "FILL" 1;
  font-size: 36px;
}

ui-player .player-controls .player-play-pause-small .button-icon::after {
  content: "play_arrow";
  font-size: 36px;
  font-variation-settings: "FILL" 1;
}

ui-player.playing .player-controls .player-play-pause-small .button-icon::after {
  content: "pause";
  font-size: 36px;
  font-weight: 100;
}

ui-player .player-image {
  position: relative;
  flex: 0 0 auto;
  width: 70px;
  height: 70px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-controls .player-play-pause-small {
  display: block;
}

ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-image {
  position: absolute;
  left: 0;
  width: calc(100% + 70px);
  opacity: 0.1;
}

ui-ui.menu-position-t:not(.settings-toggle-full-episode-layout) ui-player .player-image {
  left: -70px;
}

ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-image .player-play-pause {
  display: none;
}

ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-image ui-show-image {
  height: 100%;
}

ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-image ui-show-image.element-loading {
  background-color: transparent;
}

ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-image ui-show-image.element-loading::after {
  display: none;
}

ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-image ui-show-image .show-image-spacer {
  display: none;
}

ui-ui:not(.settings-toggle-full-episode-layout) ui-player .player-image ui-show-image img {
  filter: blur(20px);
}

ui-player .player-image ui-show-image {
  width: 100%;
  border-radius: 0 3px 3px 3px;
}

ui-ui.menu-position-t ui-player .player-image ui-show-image {
  border-radius: 3px 3px 0 3px;
}

ui-player .player-image .player-play-pause {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

ui-player .player-image .player-play-pause ui-pointer {
  width: 56px;
  height: 56px;
  top: 7px;
  left: 7px;
  border-radius: 50%;
  background-color: var(--col-bt-d);
  --pointer-h-col: var(--col-hd);
  --pointer-a-col: var(--col-ad);
  overflow: hidden;
}

ui-player .player-image .player-play-pause .button-icon::after {
  content: "play_arrow";
  font-size: 50px;
  font-variation-settings: "FILL" 1;
}

ui-player.playing .player-image .player-play-pause .button-icon::after {
  content: "pause";
  font-size: 40px;
  font-weight: 100;
}

ui-player.loaded.disabled .player-image .player-play-pause .button-wrapper {
  opacity: 0.5;
  pointer-events: none;
}

ui-player.loaded .player-image .player-play-pause .button-wrapper {
  opacity: 1;
  pointer-events: auto;
  color: var(--col-tl3);
}

ui-player .player-meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  box-sizing: border-box;
  position: relative;
  padding: 5px 10px 0;
  /* overflow: hidden; */
  height: 70px;
}

ui-player .player-meta ui-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 3px;
}

@media only screen and (max-width: 400px) {
  ui-player .player-meta ui-wave .wave-bar:nth-child(odd) {
    display: none;
  }
}

@media only screen and (max-width: 800px) {

  ui-player .player-meta ui-wave .wave-wrapper {
    gap: 2px;
  }
}

@media only screen and (max-width: 600px) {

  ui-player .player-meta ui-wave .wave-wrapper {
    gap: 1px;
  }
}

ui-player .player-titles {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  position: relative;
  padding: 4px 10px 0 5px;
  width: 0;
  overflow: hidden;
  pointer-events: auto;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
}

ui-player .player-titles ui-pointer {
  border-radius: 3px;
  overflow: hidden;
  bottom: 21px;
}

ui-player .player-show {
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 400;
  font-size: 14px;
  color: var(--col-t3);
}

ui-player .player-show.element-loading {
  position: relative;
  height: 14px;
  width: 50%;
  margin-bottom: 2px;
  background-color: var(--col-bt);
}

ui-player .player-title {
  position: relative;
  text-overflow: ellipsis;
  text-transform: uppercase;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 600;
  font-size: 16px;
  color: var(--col-t1);
}

ui-player .player-title.element-loading {
  position: relative;
  height: 20px;
  width: 100%;
  background-color: var(--col-bt);
}

ui-player ui-seek {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 28px;
  width: 100%;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-player:not(.disabled) ui-seek {
  pointer-events: auto;
  opacity: 1;
}

ui-player .player-comment-floater {
  position: absolute;
  top: 50px;
  left: 0;
  right: 0;
  z-index: 1;
  box-sizing: border-box;
  margin: 0 10px;
}

ui-player .player-comment-floater .marker {
  position: absolute;
  top: 4px;
  left: 0;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  overflow: hidden;
  background-color: var(--col-t3);
}

ui-seek {
  position: relative;
  min-height: 8px;
  display: flex;
  flex-direction: row;
  align-items: center;
  pointer-events: auto;
}

ui-seek .seek-content {
  position: relative;
  height: 8px;
  width: 100%;
  margin: 0 10px;
  box-sizing: border-box;
  background-color: var(--col-t1);
  border-radius: 3px;
  overflow: hidden;
}

ui-seek .seek-content.element-loading::after {
  background: linear-gradient(90deg, rgba(var(--col-tl3-raw), 0) 0, rgba(var(--col-tl3-raw), 0.2) 60%, rgba(var(--col-tl3-raw), 0.35) 75%, rgba(var(--col-tl3-raw), 0.05) 85%, rgba(var(--col-tl3-raw), 0));
}

ui-seek .seek-progress {
  position: absolute;
  height: 6px;
  top: 1px;
  left: 1px;
  box-sizing: border-box;
  background-color: var(--col-tl3);
  border-radius: 3px;
  transition: width 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-seek .seek-overlay {
  position: absolute;
  left: 1px;
  top: 1px;
  height: 6px;
  background-color: var(--col-tl2);
  border-radius: 3px;
  opacity: 0;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-seek.has-pointer .seek-overlay {
  opacity: 0.85;
}

ui-list-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  flex-grow: 1;
  justify-content: center;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

ui-list-container .scroll-view {
  /* display: inline-block; */
  position: relative;
  max-width: 100%;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow-y: hidden;
  overflow-x: auto;
  overscroll-behavior: contain;
  scroll-snap-type: x mandatory;
  pointer-events: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
  transform: scale(1);
  z-index: 10;
}

@supports (-webkit-touch-callout: none) {

  /* iOS scroll snap reset fix */
  /* needs to be declared in one block */
  ui-list-container .scroll-view.no-snap {
    scroll-snap-type: none;
    overflow: hidden;
  }
}

@supports not (-webkit-touch-callout: none) {

  ui-list-container .scroll-view.no-snap {
    scroll-snap-type: none;
  }
}

ui-list-container .scale-view-wrapper {
  display: inline-block;
  text-align: center;
  position: relative;
  height: 100%;
  min-width: 100%;
  /* will-change: scroll-position; */
}

ui-list-container .scroll-view.no-snap .scale-view-wrapper {
  overflow: hidden;
}

ui-list-container .scale-view-center {
  display: inline-block;
  text-align: left;
  height: 100%;
}

ui-list-container .scale-view {
  position: relative;
  height: 100%;
  padding: 0;
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  transform-origin: 0 0;
  /* transform: translate(0, 1); */
  /* background-color: #ff00ff99; */
  /* will-change: left; */
  transition: left 0.15s linear;
}

ui-list-container .scroll-view::-webkit-scrollbar {
  display: none;
}

#startup-content {
  display: none;
}

ui-startup-content {
  display: none;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 40px 20px;
  box-sizing: border-box;
  flex-direction: column;
  gap: 40px;
  align-items: center;
  flex-wrap: nowrap;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  z-index: 11;
  pointer-events: auto;
  background-color: var(--col-h1);
}

@media only screen and (max-width: 800px) {

  ui-startup-content {
    padding: 20px;
  }
}

ui-startup-content::-webkit-scrollbar {
  display: none;
}

ui-startup-content .startup-cats {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  max-width: 1000px;
  width: 100%;
  gap: 10px;
}

ui-startup-content .startup-cats-left,
ui-startup-content .startup-cats-right,
ui-startup-content .startup-cats-mid {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  flex: 1 1 auto;
  width: calc(100% - 138px);
}

ui-startup-content .startup-cats-mid {
  flex: 0 0 auto;
  width: 128px;
}

ui-startup-content .startup-cats ul {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 10px 0 0;
  margin: 0;
  max-height: 68px;
  overflow: hidden;
}

ui-startup-content .startup-cats .startup-cats-right ul {
  justify-content: flex-start;
  padding: 0 0 0 10px;
}

ui-startup-content .startup-cats-top {
  display: none;
}

@media only screen and (max-width: 750px) {

  ui-startup-content .startup-cats {
    display: block;
    text-align: center;
  }

  ui-startup-content .startup-cats-mid {
    display: none;
  }

  ui-startup-content .startup-cats-top {
    display: block;
    margin-bottom: 10px;
  }

  ui-startup-content .startup-cats-left {
    display: inline;
  }

  ui-startup-content .startup-cats-right {
    display: inline;
    padding: 0;
  }

  ui-startup-content .startup-cats-mid .startup-logo {
    margin: 0 auto;
  }

  ui-startup-content .startup-cats .startup-cats-left ul,
  ui-startup-content .startup-cats .startup-cats-right ul {
    display: inline;
    margin: 0;
    padding: 0;
  }

  ui-startup-content .startup-cats ul li {
    display: inline-block;
    margin: 5px 5px 0 0;
  }

  ui-startup-content .startup-cats a {
    background-color: var(--col-bt);
  }
}

ui-startup-content .startup-cats a {
  display: inline-block;
  position: relative;
  height: 30px;
  text-decoration: none;
  padding: 0 10px;
  color: var(--col-t1);
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
  overflow: hidden;
  border-radius: 3px;
  text-wrap: nowrap;
}

ui-startup-content .startup-cats a span {
  line-height: 30px;
  position: relative;
}

ui-startup-content .startup-logo-wrapper {
  width: 128px;
  height: 128px;
  background-color: var(--col-lg);
  border-radius: 50%;
  margin: 0 auto;
}

ui-startup-content .startup-logo {
  width: 128px;
  height: 128px;
  background-image: url("/img/logo.png");
  background-size: contain;
}

ui-startup-content .startup-welcome {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  max-width: 1000px;
  gap: 10px 20px;
}

ui-startup-content .startup-col {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: calc(50% - 10px);
}

ui-startup-content .startup-col ui-menu-item.hide {
  display: none;
}

@media only screen and (max-width: 800px) {

  ui-startup-content .startup-welcome {
    flex-direction: column;
  }

  ui-startup-content .startup-col {
    width: 100%;
  }
}

ui-startup-content .startup-welcome .startup-headline {
  margin-bottom: 10px;
  word-break: break-word;
}

ui-startup-content p {
  padding: 0 0 10px;
  margin: 0;
  word-break: break-word;
}

ui-startup-content .startup-shows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 1000px;
  width: 100%;
}

ui-startup-content .startup-search-wrapper {
  position: relative;
}

ui-startup-content .startup-search-input {
  padding-left: 50px;
  width: calc(100% - 100px)
}

ui-startup-content .startup-search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  width: 50px;
  height: 50px;
  cursor: text;
  color: var(--col-t3);
}

ui-startup-content .startup-search-delete {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
  opacity: 0;
  cursor: text;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-startup-content .startup-search-delete.show {
  opacity: 1;
  cursor: default;
}

ui-startup-content .startup-search-delete .button-wrapper {
  color: var(--col-t3);
  --pointer-h-color: transparent;
  --pointer-a-color: var(--col-ad);
}

ui-startup-content .startup-shows>h1 {
  margin: 30px 0 0;
}

ui-startup-content .startup-shows-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

ui-startup-content .startup-shows-wrapper .static-show {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 35px;
}

ui-startup-content .startup-shows-wrapper .static-show-item {
  position: relative;
  flex: 1 1 auto;
  width: calc(33.3% - 17px);
  max-width: calc(33.3% - 17px);
  height: 120px;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  gap: 10px;
  text-decoration: none;
  background-color: var(--col-bt);
  border-radius: 3px;
  padding: 5px;
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
}

@media only screen and (max-width: 900px) {
  ui-startup-content .startup-shows-wrapper .static-show-item {
    width: calc(50% - 15px);
    max-width: calc(50% - 15px);
  }
}

@media only screen and (max-width: 650px) {
  ui-startup-content .startup-shows-wrapper .static-show-item {
    width: 100%;
    max-width: 100%;
  }
}

ui-startup-content .startup-shows-wrapper .static-show .static-show-image {
  position: relative;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
  border-radius: 3px;
}

ui-startup-content .startup-shows-wrapper .static-show .static-show-image-spacer {
  width: 100%;
  padding-top: 100%;
}

ui-startup-content .startup-shows-wrapper .static-show .static-show-image img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  object-fit: cover;
}

ui-startup-content .startup-shows-wrapper .static-show>ui-menu-item {
  width: 100%;
  max-width: 500px;
  margin-top: 10px;
  border-radius: 3px;
}

ui-startup-content .startup-shows-wrapper .static-show .static-show-content h4 {
  text-align: center;
  margin: 20px 0 0;
  color: var(--col-t2);
}

ui-startup-content .startup-shows-wrapper .static-show .static-show-content h3 {
  text-align: center;
  margin: 0 0 20px;
  color: var(--col-t1);
}

ui-startup-content .startup-shows-wrapper .static-show .static-show-content p {
  margin: 0 0 20px;
}

ui-startup-content .startup-shows-wrapper>h1 {
  flex: 0 0 auto;
  width: 100%;
}

ui-startup-content .startup-shows-wrapper .static-show-item .static-show-item-image {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

ui-startup-content .startup-shows-wrapper .static-show-item .static-show-item-image img {
  filter: grayscale(80%);
  width: 100%;
  height: 100%;
}

ui-startup-content .startup-shows-wrapper .static-show-item-content {
  display: flex;
  flex-direction: column;
  height: 120px;
  position: relative;
  z-index: 1;
}

ui-startup-content .startup-shows-wrapper .static-show-item h3 {
  color: var(--col-t1);
  font-weight: 400;
  margin: 0 0 5px;
  flex: 0 0 auto;
}

ui-startup-content .startup-shows-wrapper .static-show-item p {
  color: var(--col-t3);
  flex: 1 1 auto;
  overflow: hidden;
  display: block;
  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 15px), transparent 100%);
}

ui-startup-content .startup-shows-wrapper .static-show-item.explore .static-show-item-image {
  color: var(--col-t3);
  font-size: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "ff-ico";
}

ui-startup-content .startup-shows-wrapper .static-show-item.explore .static-show-item-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

ui-startup-content .startup-shows-wrapper .static-show-item.explore .static-show-item-content h3 {
  color: var(--col-t3);
  padding: 0;
  margin: 0;
}

ui-content-install-pwa .install-overlay-ios {
  display: none;
}

ui-content-install-pwa .install-overlay-android {
  display: none;
}

ui-content-install-pwa li span.ff-ico {
  font-size: 22px;
  position: relative;
  top: 4px;
}

ui-content-install-pwa ol {
  padding: 0 0 0 20px;
}

ui-ui ui-drag-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  transform: scale(1);
  z-index: 10;
}

ui-list {
  display: block;
  position: relative;
  height: 100%;
  flex-shrink: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  transform: scale(1);
  z-index: 10;
}

ui-list.dragging {
  z-index: 12;
}

ui-list .list-highlight-message {
  display: none;
  position: fixed;
  top: 40px;
  left: 0;
  right: 0;
  bottom: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 20px;
  background-color: rgba(var(--col-h1-raw), 0.5);
  opacity: 0;
  z-index: 2;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-list .list-highlight-message.show {
  opacity: 1;
}

ui-list .list-highlight-message span {
  display: inline-block;
  background-color: var(--col-bt);
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  border-radius: 3px;
  color: var(--col-t1);
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  box-sizing: border-box;
  padding: 10px;
  transform: scaleY(0);
  /* will-change: transform; */
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-list .list-highlight-message.show span {
  transform: scaleY(1);
}

ui-list .list-highlight-message span::after {
  display: block;
  content: "library_add";
  text-align: center;
  font-family: "ff-ico";
  font-size: 50px;
  color: var(--col-t3);
  padding-top: 10px;
  font-weight: 200;
}

ui-list.highlight-message .list-highlight-message {
  display: flex;
}

ui-ui .list-content {
  position: relative;
  height: 100%;
  left: 0px;
  background-color: var(--col-h1);
  box-sizing: border-box;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1), transform-origin 0.15s cubic-bezier(0.37, 0, 0.63, 1), box-shadow 0.15s cubic-bezier(0.37, 0, 0.63, 1), border-radius 1.25s cubic-bezier(0.37, 0, 0.63, 1), left 0.15s cubic-bezier(0.37, 0, 0.63, 1), top 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-ui .list-content:not(.dragging)::before {
  position: absolute;
  top: 0;
  left: 0;
  height: 40px;
  width: 100%;
  z-index: 9;
  content: "";
  background: linear-gradient(180deg, rgba(var(--col-h1-raw), 0.9) 0%, rgba(var(--col-h1-raw), 0.9) 90%, rgba(var(--col-h1-raw), 0) 100%);
}

ui-list.highlight .list-content .list-header {
  box-shadow: inset 0px 15px 0px -10px var(--col-t1);
}

ui-drag-container .list-content {
  position: absolute;
  overflow: hidden;
  z-index: 12;
  border-radius: 3px;
  width: 100vw;
}

.list-content.dragging {
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
  transition: none;
}

ui-ui ui-list-container ui-list,
ui-ui ui-list-container ui-list .list-content,
ui-ui ui-drag-container .list-content {
  width: calc(100vw - var(--pad-l) - var(--pad-r));
}

@media only screen and (min-width: 700px) {

  ui-ui ui-list-container ui-list,
  ui-ui ui-list-container ui-list .list-content,
  ui-ui ui-drag-container .list-content {
    width: calc((100vw - var(--pad-l) - var(--pad-r)) / 2);
  }
}

@media only screen and (min-width: 1000px) {

  ui-ui ui-list-container ui-list,
  ui-ui ui-list-container ui-list .list-content,
  ui-ui ui-drag-container .list-content {
    width: calc((100vw - var(--pad-l) - var(--pad-r)) / 3);
  }
}

@media only screen and (min-width: 1500px) {

  ui-ui ui-list-container ui-list,
  ui-ui ui-list-container ui-list .list-content,
  ui-ui ui-drag-container .list-content {
    width: calc((100vw - var(--pad-l) - var(--pad-r)) / 4);
  }
}

@media only screen and (min-width: 2000px) {

  ui-ui ui-list-container ui-list,
  ui-ui ui-list-container ui-list .list-content,
  ui-ui ui-drag-container .list-content {
    width: calc((100vw - var(--pad-l) - var(--pad-r)) / 5);
  }
}

@media only screen and (min-width: 2500px) {

  ui-ui ui-list-container ui-list,
  ui-ui ui-list-container ui-list .list-content,
  ui-ui ui-drag-container .list-content {
    width: calc((100vw - var(--pad-l) - var(--pad-r)) / 6);
  }
}

@media only screen and (min-width: 3000px) {

  ui-ui ui-list-container ui-list,
  ui-ui ui-list-container ui-list .list-content,
  ui-ui ui-drag-container .list-content {
    width: calc((100vw - var(--pad-l) - var(--pad-r)) / 7);
  }
}

@media only screen and (min-width: 3500px) {

  ui-ui ui-list-container ui-list,
  ui-ui ui-list-container ui-list .list-content,
  ui-ui ui-drag-container .list-content {
    width: calc((100vw - var(--pad-l) - var(--pad-r)) / 8);
  }
}

@media only screen and (min-width: 4000px) {

  ui-ui ui-list-container ui-list,
  ui-ui ui-list-container ui-list .list-content,
  ui-ui ui-drag-container .list-content {
    width: calc((100vw - var(--pad-l) - var(--pad-r)) / 9);
  }
}

ui-list.hidden {
  transition: width 0.15s cubic-bezier(0.37, 0, 0.63, 1), transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  transform: scale(0, 1);
  transform-origin: 0 50%;
  width: 0;
}

ui-list.hidden .list-content {
  position: absolute;
  /* background-color: rgba(84, 26, 26, 0.5); */
  top: 0;
  left: 0;
}

ui-list.dragging-shift-left .list-content {
  transform: translateX(-100%);
}

ui-list.dragging-shift-right .list-content {
  transform: translateX(100%);
}

.list-content .list-header {
  position: absolute;
  height: 40px;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow: hidden;
  z-index: 10;
  padding: 0 10px;
  color: var(--col-t1);
  pointer-events: auto;
  border-radius: 3px;
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
  transition: box-shadow 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.playing-icon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 1px;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 8px;
  height: 8px;
  opacity: 0;
}

.list-header .playing-icon {
  margin: 0 10px;
  flex: 0 0 auto;
  position: relative;
  right: auto;
  top: auto;
  width: 11px;
  height: 11px;
}

.playing-icon-bar {
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background-color: var(--col-t3);
  animation: playing-icon 6s infinite;
  pointer-events: none;
}

.list-header .playing-icon-bar {
  width: 3px;
}

.playing-icon-bar:first-child {
  animation-delay: -2s;
}

.playing-icon-bar:last-child {
  animation-delay: -4s;
}

@keyframes playing-icon {
  0% {
    transform: scaleY(1);
  }

  10% {
    transform: scaleY(0.7);
  }

  20% {
    transform: scaleY(0.8);
  }

  30% {
    transform: scaleY(0.5);
  }

  40% {
    transform: scaleY(0.6);
  }

  50% {
    transform: scaleY(1);
  }

  60% {
    transform: scaleY(0.6);
  }

  70% {
    transform: scaleY(0.9);
  }

  80% {
    transform: scaleY(0.7);
  }

  90% {
    transform: scaleY(0.8);
  }

  100% {
    transform: scaleY(1);
  }
}

.list-content .list-header .list-icon {
  flex: 0 0 auto;
  width: 25px;
  height: 40px;
  line-height: 40px;
  font-weight: 400;
  font-size: 20px;
  color: var(--col-t1);
}

.list-content .list-header .list-name {
  flex: 0 1 auto;
  position: relative;
  height: 40px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  line-height: 40px;
  max-width: 100%;
  color: var(--col-t1);
}

.list-content .list-header .list-shows {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: 3px;
  margin-left: 10px;
}

.list-content .list-header .list-shows ui-show-image {
  flex: 0 1 auto;
  position: relative;
  padding-top: 0;
  width: 15px;
  height: 30px;
  min-width: 0;
  max-width: 15px;
  overflow: visible;
  border-radius: 0px;
  transform-origin: 100% 50%;
  box-sizing: border-box;
}

.list-content .list-header .list-shows ui-show-image:last-child {
  flex: 0 0 auto;
  width: 30px;
  max-width: 30px;
}

.list-content .list-header .list-shows ui-show-image img {
  border-radius: 3px;
  width: 30px;
  box-shadow: -1px 0px 5px 0px rgba(0, 0, 0, 0.5);
}

.list-content .list-header .list-shows ui-show-image:first-child img {
  box-shadow: none;
}

.list-content .list-items {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  /* overscroll-behavior: contain; */
  padding: 45px 10px 50px;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
  scrollbar-width: none;
  pointer-events: auto;
}

.list-content.show-list .list-items {
  padding: 45px 10px 10px;
}

.list-content .list-items::-webkit-scrollbar {
  display: none;
}

ui-episode-item {
  display: block;
  position: relative;
  /* will-change: scroll-position; */
  min-height: 64px;
  max-height: 64px;
  height: 64px;
  pointer-events: auto;
}

ui-episode-item.element-loading .episode-content {
  display: none;
}

ui-episode-item.element-loading {
  background-color: var(--col-bt);
  border-radius: 3px;
  overflow: hidden;
}

ui-episode-item .episode-content {
  pointer-events: inherit;
}

ui-window .window-content ui-episode-item {
  overflow: hidden;
}

ui-window>.window-content>ui-episode-item {
  position: fixed;
  top: 20px;
  width: calc(100% - 20px);
  left: max(50% - 400px, 10px);
  max-width: 800px;
  z-index: 10;
}

/* ui-episode-item.failed, */
ui-episode-item:not(.clickable) {
  pointer-events: none;
}

ui-window .window-content-element.has-preview-episode .window-content-element-scroll-view,
ui-window .window-content-element.has-preview-show .window-content-element-scroll-view {
  padding-top: 95px;
}

ui-item-list {
  display: block;
}

ui-item-list .item-list-content {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

ui-item-list .item-list-content-wrapper {
  position: relative;
}

ui-list ui-item-list .item-list-content-wrapper,
ui-drag-container ui-item-list .item-list-content-wrapper {
  /* Only set min height when in ui-list or when dragging, so ui-button at bottom stays where it is */
  min-height: 100%;
}

@supports (-webkit-touch-callout: none) {

  /* iOS force scroll */
  ui-ui ui-list .list-content:not(.dragging) .list-items .item-list-content-wrapper {
    min-height: calc(100% + 1px);
  }
}

ui-item-list .item-list-content>* {
  flex-shrink: 0;
  flex-grow: 0;
}

ui-ui .episode-content {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  overflow: hidden;
  top: 0;
  height: 64px;
  background-color: var(--col-bt);
  box-shadow: none;
  border-radius: 3px;
  /* iOS overflow fix */
  z-index: 1;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1), box-shadow 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  will-change: transform;
}

ui-drag-container>.episode-content {
  position: absolute;
  overflow: hidden;
  z-index: 12;
  border-radius: 3px;
  pointer-events: auto;
}

div.episode-content.dragging {
  /* keep transitions for bg and radius, not for transform and width */
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
  transition: box-shadow 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-ui ui-episode-item.dragging-shift-top .episode-content {
  transform: translateY(calc(-100% - 5px));
}

ui-ui ui-episode-item.dragging-shift-bottom .episode-content {
  transform: translateY(calc(100% + 5px));
}

ui-ui .episode-content .episode-image {
  position: absolute;
  right: 0;
  top: 0;
  width: 128px;
  height: 64px;
  overflow: hidden;
  opacity: 0.15;
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) 60%, rgba(0, 0, 0, 0));
}

ui-ui.settings-toggle-full-episode-layout .episode-content .episode-image {
  position: relative;
  right: auto;
  top: auto;
  min-width: 64px;
  max-width: 64px;
  width: 64px;
  opacity: 1;
  mask-image: none;
}

ui-ui .episode-content .episode-image ui-show-image {
  border-radius: 0;
  width: 100%;
  height: 100%;
}

ui-ui .episode-content .episode-meta {
  flex-grow: 2;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 1px;
  position: relative;
  overflow: hidden;
  padding: 0 10px;
  height: 100%;
  pointer-events: inherit;
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
}

ui-ui .episode-content .episode-showtitle,
ui-ui .episode-content .episode-title {
  position: relative;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  font-weight: 400;
  font-size: 14px;
  margin-bottom: 1px;
  padding: 0 30px 0 0;
  color: var(--col-t1);
}

ui-ui ui-episode-item.archived .episode-content .episode-title {
  padding: 0;
}

ui-ui .episode-content .episode-showtitle {
  margin: 0;
  padding: 0;
  color: var(--col-t3);
}

ui-ui .episode-content .episode-data {
  position: relative;
  left: -2px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2px;
  justify-content: flex-start;
  flex-wrap: nowrap;
  font-size: 11px;
  font-weight: 400;
  color: var(--col-t3);
  overflow: hidden;
  min-height: 15px;
  max-height: 15px;
  padding: 0 30px 0 0;
}

ui-ui .episode-content .episode-data-date,
ui-ui .episode-content .episode-data-season,
ui-ui .episode-content .episode-data-duration,
ui-ui .episode-content .episode-data-explicit-icon {
  margin-right: 6px;
  white-space: nowrap;
}

ui-ui .episode-content .episode-data-explicit-icon,
ui-ui .episode-content .episode-data-date-icon,
ui-ui .episode-content .episode-data-season-icon,
ui-ui .episode-content .episode-data-duration-icon {
  font-size: 18px;
  line-height: 13px;
}

ui-ui ui-episode-item.failed .episode-content .episode-data-download,
ui-ui ui-episode-item.failed .episode-data-explicit-icon,
ui-ui ui-episode-item.failed .episode-data-date-icon,
ui-ui ui-episode-item.failed .episode-data-season-icon,
ui-ui ui-episode-item.failed .episode-data-duration-icon {
  display: none;
}

ui-ui .episode-content .episode-data-season,
ui-ui .episode-content .episode-data-season-icon {
  display: none;
}

ui-ui ui-episode-item.show-season:not(.element-loading) .episode-data-season,
ui-ui ui-episode-item.show-season:not(.element-loading) .episode-data-season-icon {
  display: block;
}

ui-ui .episode-content:not(.explicit) .episode-data-explicit-icon {
  display: none;
}

ui-ui .episode-content .episode-data-download {
  height: 13px;
  margin-top: -1px;
  display: none;
}

ui-ui .episode-content.show-download .episode-data-download {
  display: block;
}

svg.download-spinner {
  width: 16px;
  height: 16px;
  transform: rotate(-90deg);
  display: block;
}

svg.download-spinner circle:first-child {
  stroke: var(--col-bt);
}

svg.download-spinner circle:last-child {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  stroke: var(--col-bt-d);
}

ui-ui .episode-content .episode-data-download svg.download-spinner {
  margin-top: -2px;
}

ui-ui .episode-content.show-download-complete .episode-data-download svg.download-spinner,
ui-ui .episode-content.show-download-error .episode-data-download svg.download-spinner {
  display: none;
}

ui-ui .episode-content .episode-data-download-icon::after {
  font-size: 18px;
  line-height: 13px;
  font-weight: 200;
  content: "";
  font-family: "ff-ico";
  display: none;
}

ui-ui .episode-content.show-download-complete .episode-data-download-icon::after {
  content: "cloud_done";
  display: block;
}

ui-ui .episode-content.show-download-error .episode-data-download-icon::after {
  content: "cloud_off";
  display: block;
}

/* ui-ui .episode-content .episode-drag
{
  position: relative;
  flex: 0 0 auto;
  opacity: 0;
  width: 0;
  height: 100%;
  margin: 0;
  will-change: width, opacity, margin;
  transition: width 0.15s cubic-bezier(0.37, 0, 0.63, 1), margin 0.15s cubic-bezier(0.37, 0, 0.63, 1), opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
} */

/* ui-ui.active-edit .episode-content .episode-drag
{
  width: 40px;
  margin-left: -10px;
  opacity: 1;
  pointer-events: auto;
} */

ui-ui .episode-content .episode-duration-played-overlay {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  height: 1px;
  background-color: var(--col-bt-d);
  transform-origin: 0 50%;
  transform: scaleX(0);
}

ui-ui.settings-toggle-full-episode-layout .episode-content .episode-duration-played-overlay {
  left: 64px;
  width: calc(100% - 64px);
}

ui-ui .episode-content .episode-play-pause {
  display: none;
}

ui-ui.settings-toggle-full-episode-layout .episode-content .episode-play-pause {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}

ui-ui .episode-content .episode-meta-play-pause {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 64px;
  height: 64px;
}

ui-ui .episode-content .episode-meta-play-pause ui-pointer {
  height: 30px;
  width: 30px;
  left: auto;
  top: auto;
  bottom: 5px;
  right: 5px;
}

ui-ui .episode-content .episode-meta-play-pause .button-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
  height: 100%;
}

ui-ui .episode-content .episode-meta-play-pause .button-content {
  width: 30px;
  height: 30px;
  margin: 0 5px 5px 0;
}

@media (hover: hover) {
  ui-ui .episode-content .episode-meta-play-pause {
    bottom: 5px;
    right: 5px;
    height: 30px;
    width: 30px;
  }

  ui-ui .episode-content .episode-meta-play-pause ui-pointer {
    bottom: 0;
    right: 0;
  }

  ui-ui .episode-content .episode-meta-play-pause .button-content {
    margin: 0;
  }

  ui-ui:not(.settings-toggle-full-episode-layout) .episode-content:not(.dragging) .episode-title {
    padding: 0;
    transition: padding 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  }

  ui-ui:not(.settings-toggle-full-episode-layout) .episode-content:hover .episode-title,
  ui-ui:not(.settings-toggle-full-episode-layout) .episode-content.dragging .episode-title,
  ui-ui:not(.settings-toggle-full-episode-layout) .episode-content.loaded-in-player .episode-title {
    padding: 0 30px 0 0;
  }

  ui-ui:not(.settings-toggle-full-episode-layout) ui-episode-item.archived .episode-content .episode-title {
    padding: 0;
    transition: none;
  }

  ui-ui:not(.settings-toggle-full-episode-layout) .episode-content:not(.dragging) .episode-meta-play-pause {
    opacity: 0;
    transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
  }

  ui-ui:not(.settings-toggle-full-episode-layout) .episode-content:hover .episode-meta-play-pause,
  ui-ui:not(.settings-toggle-full-episode-layout) .episode-content.dragging .episode-meta-play-pause,
  ui-ui:not(.settings-toggle-full-episode-layout) .episode-content.loaded-in-player .episode-meta-play-pause {
    opacity: 1;
  }
}

ui-ui .episode-content .episode-meta-play-pause .button-wrapper {
  color: var(--col-t3);
}

ui-ui.settings-toggle-full-episode-layout .episode-content .episode-meta-play-pause {
  display: none;
}

ui-ui .episode-content .episode-play-pause ui-pointer {
  width: 50px;
  height: 50px;
  top: 7px;
  left: 7px;
  border-radius: 50%;
  background-color: var(--col-bt-d);
  --pointer-h-col: var(--col-hd);
  --pointer-a-col: var(--col-ad);
  overflow: hidden;
}

ui-ui .episode-content .episode-play-pause .button-wrapper {
  color: var(--col-tl3);
}

html body ui-ui ui-episode-item.archived .episode-content .episode-meta-play-pause,
html body ui-ui ui-episode-item.failed .episode-content .episode-meta-play-pause,
html body ui-ui ui-episode-item:not(.clickable) .episode-content .episode-meta-play-pause,
html body ui-ui ui-episode-item.archived .episode-content .episode-play-pause,
html body ui-ui ui-episode-item.failed .episode-content .episode-play-pause,
html body ui-ui ui-episode-item:not(.clickable) .episode-content .episode-play-pause {
  display: none;
}

ui-ui .episode-content .episode-meta-play-pause .button-icon::after,
ui-ui .episode-content .episode-play-pause .button-icon::after {
  content: "play_arrow";
  font-size: 50px;
  font-variation-settings: "FILL" 1;
}

ui-ui ui-content-list-menu .menu-item-play-list .menu-item-icon,
ui-ui ui-content-episode-menu .menu-item-play-episode .menu-item-icon {
  font-variation-settings: "FILL" 1;
}

ui-ui .episode-content.loaded-in-player.playing-in-player .episode-meta-play-pause .button-icon::after,
ui-ui .episode-content.loaded-in-player.playing-in-player .episode-play-pause .button-icon::after {
  content: "pause";
  font-size: 40px;
  font-weight: 100;
}

.content-show-content,
.content-episode-content {
  display: flex;
  flex-direction: column;
}

.content-show-content .content-show-image,
.content-episode-content .content-episode-image {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.content-show-content .content-show-image ui-show-image,
.content-episode-content .content-episode-image ui-show-image {
  flex: 0 0 auto;
  display: block;
  position: relative;
  width: 100%;
  max-width: 390px;
  overflow: hidden;
  border-radius: 3px;
  position: relative;
}

@media only screen and (max-width: 500px) {

  .content-show-content .content-show-image,
  ui-content-episode:not(.has-player) .content-episode-content .content-episode-image {
    position: relative;
    left: -10px;
    top: -20px;
    width: calc(100% + 20px);
    margin-bottom: -20px;
  }

  .content-show-content .content-show-image ui-show-image,
  ui-content-episode:not(.has-player) .content-episode-content .content-episode-image ui-show-image {
    max-width: 100%;
  }
}

.content-show-content .content-show-menu,
.content-episode-content .content-episode-menu {
  width: 100%;
  max-width: 390px;
  margin: 0 auto;
  position: relative;
}

ui-ui:not(.settings-toggle-context-menus) ui-content-episode.has-player .content-episode-content .content-episode-menu {
  max-width: 100%;
}

.content-show-content .content-show-meta-item,
.content-episode-content .content-episode-meta-item {
  display: inline-block;
}

.content-show-content .content-show-meta-item-icon,
.content-episode-content .content-episode-meta-item-icon {
  position: relative;
  top: 3px;
  margin-left: 5px;
  font-size: 15px;
}

.content-show-content .content-show-titles,
.content-episode-content .content-episode-titles {
  position: relative;
}

.content-show-content .content-show-title,
.content-episode-content .content-episode-title {
  text-align: center;
}

.content-show-content .content-show-tags,
.content-episode-content .content-episode-tags {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 100%;
  justify-content: center;
  position: relative;
}

.content-show-content .content-show-description,
.content-episode-content .content-episode-description {
  position: relative;
}

.content-show-content .content-show-description.element-loading,
.content-episode-content .content-episode-description.element-loading {
  overflow: hidden;
  height: 100px;
  background-color: var(--col-bt);
}

.content-episode-content .content-episode-archive-explanation {
  color: var(--col-t2);
  position: right;
}

.content-show-content .content-show-author,
.content-episode-content .content-episode-author {
  text-align: center;
  position: relative;
  font-size: 12px;
  font-weight: 500;
  color: var(--col-t2);
}

.content-show-content .content-show-author.element-loading,
.content-episode-content .content-episode-author.element-loading {
  display: block;
  overflow: hidden;
  width: 50%;
  max-width: 200px;
  margin: 0 auto;
  position: relative;
  background-color: var(--col-bt);
}

.content-show-content .content-show-title.element-loading,
.content-episode-content .content-episode-title.element-loading {
  overflow: hidden;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  position: relative;
  background-color: var(--col-bt);
}

.content-show-content .description-spacer,
.content-episode-content .description-spacer {
  width: 100%;
  height: 5px;
  min-height: 5px;
  max-height: 5px;
}

.content-show-content .content-show-persons,
.content-episode-content .content-episode-persons {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  grid-auto-rows: min-content;
  gap: 10px;
  grid-auto-flow: row;
}

.content-show-content .content-show-persons ui-person,
.content-episode-content .content-episode-persons ui-person {
  min-width: 90px;
}

.content-episode-menu-content .column-play-episode {
  flex: 1 1 auto;
  min-width: 0;
}

.content-show-menu-content .menu-item-more,
.content-episode-menu-content .menu-item-more {
  display: none;
  flex: 0 0 auto;
  width: 50px;
  height: 50px;
}

ui-content-episode.has-player .content-episode-image {
  position: absolute;
  left: -10px;
  top: -20px;
  right: -10px;
  bottom: auto;
  width: auto;
  height: calc(100vh - var(--pad-t) - var(--pad-b) - 140px);
}

ui-content-episode.has-player .content-episode-image ui-show-image {
  max-width: 100%;
}

ui-content-episode.has-player .content-episode-image ui-show-image.element-loading::after {
  display: none;
}

ui-content-episode.has-player .content-episode-image ui-show-image .show-image-spacer {
  display: none;
}

ui-content-episode.has-player .content-episode-player {
  position: relative;
  z-index: 2;
  height: calc(100vh - 70px - 70px - 20px - var(--pad-t) - var(--pad-b));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

ui-content-episode.has-player .content-episode-player .content-episode-player-more {
  position: absolute;
  bottom: 10px;
  width: 50px;
  height: 50px;
  left: calc(50% - 25px);
}

ui-content-episode.has-player .content-episode-player .content-episode-player-more .button-icon {
  font-size: 65px;
  font-weight: 400;
}

ui-content-episode.has-player .column-play-episode {
  display: none;
}

ui-ui.settings-toggle-context-menus ui-content-episode.has-player .content-episode-content .content-episode-menu {
  position: absolute;
  top: calc((100vh - var(--pad-t) - var(--pad-b)) / 2 - 140px + 50px);
  width: 50px;
  left: calc(50% + 155px);
  z-index: 2;
  overflow: hidden;
}

ui-ui.settings-toggle-context-menus ui-content-episode.has-player .content-episode-content .content-episode-menu .menu-item-more .button-wrapper {
  background-color: transparent;
}

.content-show-menu-content .column-subscribe-show {
  flex: 1 1 auto;
  min-width: 0;
}

/* html body ui-ui .content-list-new-menu-explanation {
  overflow: hidden;
  margin-top: -10px;
  margin-bottom: 5px;
  max-height: 0px;
} */

.menu-item-settings-profile-button-wrapper {
  overflow: hidden;
  height: 0;
  display: none;
  margin: 0;
}

.settings-account-error {
  position: relative;
  width: 100%;
  height: 0;
  max-height: 0;
  margin-top: -10px;
  padding-top: 5px;
  transition: height 0.15s cubic-bezier(0.37, 0, 0.63, 1), max-height 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.settings-account-error.show {
  position: relative;
  width: 100%;
  height: 25px;
  max-height: 25px;
  margin-top: -10px;
}

.settings-account-error-message {
  position: absolute;
  width: 100%;
  box-sizing: border-box;
  transform: scaleY(0);
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

.settings-account-error.show .settings-account-error-message {
  transform: scaleY(1);
}

ui-pagination {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  opacity: 1;
  z-index: 11;
  transition: opacity 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-pagination.disabled {
  pointer-events: none !important;
  opacity: 0 !important;
}

ui-pagination.disabled * {
  pointer-events: none !important;
}

ui-ui.menu-position-b ui-pagination {
  bottom: 90px;
}

ui-pagination .pagination-wrapper {
  position: relative;
  margin: 0 auto;
  width: 50%;
  min-width: 100px;
  max-width: 300px;
  height: 10px;
}

ui-pagination .pagination-wrapper::before {
  /* Separate box shadow element -- Safari fix */
  content: "";
  display: block;
  position: absolute;
  top: -10px;
  left: -40px;
  height: 30px;
  width: calc(100% + 80px);
  border-radius: 3px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

ui-pagination .pagination-background {
  position: absolute;
  top: -10px;
  left: -40px;
  background-color: var(--col-h2);
  height: 30px;
  width: calc(100% + 80px);
  border-radius: 3px;
  opacity: 0.9;
}

ui-ui.settings-toggle-always-pagination:not(.active-zoom) ui-pagination {
  opacity: 1;
}

ui-ui:not(.settings-toggle-always-pagination) ui-pagination {
  opacity: 0;
}

ui-ui:not(.settings-toggle-always-pagination):not(.active-zoom) ui-pagination.scrolling {
  opacity: 1;
}

ui-ui.active-zoom ui-pagination {
  opacity: 0;
}

ui-pagination .pagination-container {
  position: relative;
  height: 10px;
  width: 100%;
  background-color: var(--col-h1);
  border-radius: 3px;
}

ui-pagination .pagination-bar {
  position: relative;
  height: 10px;
  background-color: var(--col-t3);
  border-radius: 3px;
}

ui-pagination .pagination-left,
ui-pagination .pagination-right {
  position: absolute;
  top: -10px;
  left: -40px;
  height: 30px;
  width: calc(50% + 40px);
  pointer-events: auto;
}

ui-ui:not(.settings-toggle-always-pagination) ui-pagination:not(.scrolling) .pagination-left,
ui-ui:not(.settings-toggle-always-pagination) ui-pagination:not(.scrolling) .pagination-right,
ui-ui.active-zoom ui-pagination .pagination-left,
ui-ui.active-zoom ui-pagination .pagination-right {
  pointer-events: none;
}

ui-pagination .pagination-left::after,
ui-pagination .pagination-right::after {
  content: "arrow_left";
  font-family: "ff-ico";
  display: block;
  width: 30px;
  height: 30px;
  position: absolute;
  box-sizing: border-box;
  /* text-indent: -15px; */
  top: 0;
  left: 3px;
  font-size: 26px;
  line-height: 30px;
  text-align: center;
  color: var(--col-t3);
  transform: scale(1);
  /* background-color: rgba(255, 255, 255, 0.3); */
  border-radius: 3px;
  transition: transform 0.15s cubic-bezier(0.37, 0, 0.63, 1), color 0.15s cubic-bezier(0.37, 0, 0.63, 1);
}

ui-pagination .pagination-left::before,
ui-pagination .pagination-right::before {
  content: "";
  display: block;
  width: 32px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 3px 0 0 3px;
  background-color: transparent;
}

ui-pagination .pagination-right::before {
  left: auto;
  right: 0;
  border-radius: 0 3px 3px 0;
}

ui-pagination .pagination-right {
  left: auto;
  right: -40px;
}

ui-pagination .pagination-right::after {
  content: "arrow_right";
  left: auto;
  right: 3px;
}

@media (hover: hover) {

  ui-pagination .pagination-left:hover::after,
  ui-pagination .pagination-right:hover::after {
    color: var(--col-t1);
    transform: scale(1.2);
  }
}

ui-pagination .pagination-left:active::after,
ui-pagination .pagination-right:active::after {
  color: var(--col-t1);
  transform: scale(0.9);
}

ui-message-bar {
  position: absolute;
  display: flex;
  flex-direction: row;
  bottom: 0;
  left: 0;
  width: 100%;
  min-height: 40px;
  opacity: 0;
  background-color: var(--col-h3);
  color: var(--col-t1);
  z-index: 12;
  pointer-events: auto;
}

ui-message-bar>span {
  font-weight: 500;
  flex: 1 1 auto;
  align-self: center;
  padding: 5px 10px;
}

ui-ui ui-message-bar .message-bar-button {
  flex: 0 0 auto;
  height: 40px;
  align-self: center;
}

ui-message-bar .message-bar-button1 .button-wrapper {
  padding: 0 10px 0 5px;
}

ui-message-bar .message-bar-button2 {
  width: 40px;
}

ui-tag {
  position: relative;
  display: inline;
  overflow: hidden;
  padding: 7px 10px;
  background-color: var(--col-bt);
  border-radius: 3px;
  --pointer-h-col: var(--col-hl);
  --pointer-a-col: var(--col-al);
}

ui-tag.light {
  background-color: var(--col-bt-l);
}

ui-tag .tag-wrapper {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 5px;
}

ui-tag .tag-icon {
  display: none;
  font-size: 12px;
  font-weight: 400;
  color: var(--col-t1);
  position: relative;
  top: 1px;
}

ui-tag .tag-title {
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--col-t1);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
}

ui-tag.element-loading {
  width: 50px;
}

ui-tag.clickable {
  pointer-events: auto;
}

span.minigap {
  margin-right: 3px;
}