:root {
  --background-hue: 0;
  --background-saturation: 0%;
  --background-lightness: 7.96%;
  --theme-primary-color-hue: 116;
  --theme-primary-color-saturation: 41.7%;
  --theme-primary-color-lightness: 50.2%;
  --theme-text-color-hue: 0;
  --theme-text-color-saturation: 0%;
  --theme-text-color-lightness: 100%;
  --theme-text-color-alpha: 1;
  --theme-secondary-text-color-alpha: 0.6;
  --theme-accent-text-color-lightbg: green;
  --theme-accent-text-color-darkbg: #6ccf65;
  --theme-accent-text-color: var(--theme-accent-text-color-darkbg);
  --button-background-hue: var(--background-hue);
  --button-background-saturation: var(--background-saturation);
  --button-background-lightness: calc(var(--background-lightness) + 12%);
  --button-background-alpha: 0.7;
  --button-background-blur-lightness: var(--button-background-lightness);
  --button-background-blur-alpha: var(--button-background-alpha);
  --button-blur-backdrop-filter: none;
  --card-background-hue: var(--background-hue);
  --card-background-saturation: var(--background-saturation);
  --card-background-lightness: calc(var(--background-lightness) + 12%);
  --card-background-alpha: 0.7;
  --input-background-hue: var(--background-hue);
  --input-background-saturation: var(--background-saturation);
  --input-background-lightness: calc(var(--background-lightness) + 12%);
  --header-background: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 5%)
  );
  --header-blur-background: rgba(29, 29, 31, 0.72);
  --footer-background: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 5%)
  );
  --line-background: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    0.14
  );
  --line-size: 0.08em;
  --drawer-background: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 3.5%)
  );
  --docked-drawer-background: hsla(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 18%),
    0.2
  );
  --dialog-border-width: 0;
  --focus-background-hue: 0;
  --focus-background-saturation: 0%;
  --focus-background-lightness: 100%;
  --focus-blur-background-lightness: 100%;
  --focus-text-color-lightness: 0%;
  --slider-lower-opacity: 0.7;
}
@media (pointer: fine) {
  :not(.layout-tv):root {
    --background-hue: 0;
    --background-saturation: 0%;
    --background-lightness: 11.76%;
    --theme-text-color-alpha: 0.87;
    --header-blur-background: rgba(29, 29, 31, 0.72);
    --button-background-hue: var(--background-hue);
    --button-background-saturation: var(--background-saturation);
    --button-background-lightness: calc(var(--background-lightness) + 19%);
    --card-background-hue: var(--background-hue);
    --card-background-saturation: var(--background-saturation);
    --card-background-lightness: calc(var(--background-lightness) + 12.5%);
    --input-background-hue: var(--background-hue);
    --input-background-saturation: var(--background-saturation);
    --input-background-lightness: calc(var(--background-lightness) + 11%);
    --dialog-border-width: var(--line-size);
  }
}
.layout-tv:root {
  --background-hue: 0;
  --background-saturation: 0%;
  --background-lightness: 10.98%;
  --theme-text-color-alpha: 0.87;
  --header-background: transparent;
  --header-blur-background: transparent;
  --button-background-hue: var(--background-hue);
  --button-background-saturation: var(--background-saturation);
  --button-background-lightness: calc(var(--background-lightness) + 12.5%);
  --card-background-hue: var(--background-hue);
  --card-background-saturation: var(--background-saturation);
  --card-background-lightness: calc(var(--background-lightness) + 12.5%);
  --input-background-hue: var(--background-hue);
  --input-background-saturation: var(--background-saturation);
  --input-background-lightness: calc(var(--background-lightness) + 11%);
}
.dialog {
  --background-hue: 240;
  --background-saturation: 3.4%;
  --background-lightness: 16.4%;
  background-color: hsl(
    var(--background-hue),
    var(--background-saturation),
    var(--background-lightness)
  );
  --header-background: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 5%)
  );
  --footer-background: var(--header-background);
  --button-background-hue: var(--background-hue);
  --button-background-saturation: var(--background-saturation);
  --button-background-lightness: calc(var(--background-lightness) + 10%);
  --button-background-blur-lightness: var(--button-background-lightness);
  --button-background-blur-alpha: var(--button-background-alpha);
  --card-background-hue: var(--background-hue);
  --card-background-saturation: var(--background-saturation);
  --card-background-lightness: calc(var(--background-lightness) + 10%);
  --input-background-hue: var(--background-hue);
  --input-background-saturation: var(--background-saturation);
  --input-background-lightness: calc(var(--background-lightness) + 10%);
  border: var(--dialog-border-width) solid var(--line-background);
  box-shadow:
    inset 0 0 0 0.07em rgba(0, 0, 0, 0.2),
    0 0.56em 2.8em rgba(0, 0, 0, 0.55);
}
.mainDrawer {
  background: var(--drawer-background);
}
.drawer-docked {
  background: var(--docked-drawer-background);
  -webkit-border-end: var(--line-size) solid #000;
  border-inline-end: var(--line-size) solid #000;
}
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) {
  .dialog-blur,
  .drawer-open-backdropfilter:not(.drawer-docked) {
    --background-hue: 0;
    --background-saturation: 0%;
    --background-lightness: 21.96%;
    background-color: hsla(
      var(--background-hue),
      var(--background-saturation),
      var(--background-lightness),
      0.76
    );
    -webkit-backdrop-filter: saturate(1.8) blur(4em);
    backdrop-filter: saturate(1.8) blur(4em);
  }
}
html {
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
  scrollbar-color: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      0.4
    )
    transparent;
}
.emby-collapsible-button-collapsed::after {
  background: var(--line-background);
}
.appfooter {
  background: var(--footer-background);
}
.formDialogHeader:not(.formDialogHeader-clear),
.formDialogFooter:not(.formDialogFooter-clear) {
  background: var(--header-background);
}
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) {
  .skinHeader-withBackground.skinHeader-withbackdropfilter.headroom-scrolling:not(
      .semiTransparent
    ) {
    background: var(--header-blur-background);
    -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
    backdrop-filter: saturate(1.8) blur(1.5em);
  }
  .appfooter-withbackdropfilter {
    background: rgba(29, 29, 31, 0.72);
    -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
    backdrop-filter: saturate(1.8) blur(1.5em);
  }
}
.headerNowPlaying {
  background: hsla(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 5%),
    0.7
  );
}
.skinHeader.semiTransparent {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: transparent;
  background: 0 0;
  box-shadow: none !important;
  border-bottom: 0;
  --theme-text-color-lightness: 100%;
  --theme-text-color-alpha: 1;
  --focus-background-hue: 0;
  --focus-background-saturation: 0%;
  --focus-background-lightness: 100%;
  --focus-text-color-lightness: 0%;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
}
.appHeader-tv.semiTransparent {
  --theme-text-color-alpha: 0.87;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
}
.skinHeader.semiTransparent::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  transition: opacity 0.3s ease-out;
  content: " ";
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.3);
  background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
  z-index: -1;
}
.semiTransparent.headroom-scrolling {
  text-shadow: none;
}
.semiTransparent.headroom-scrolling::before {
  opacity: 1;
}
.pageTitleWithDefaultLogo {
  background-image: url(../logowhite.png);
}
html,
.backgroundContainer {
  background-color: hsl(
    var(--background-hue),
    var(--background-saturation),
    var(--background-lightness)
  );
}
.backgroundContainer.withBackdrop {
  background-color: rgba(0, 0, 0, 0.8);
}
.backgroundContainer-withfocuspreview.withBackdrop {
  background-image: linear-gradient(
    to right,
    #000,
    rgba(0, 0, 0, 0.9) 34%,
    rgba(0, 0, 0, 0),
    transparent
  );
  background-color: transparent;
}
[dir="rtl"] .backgroundContainer-withfocuspreview.withBackdrop {
  background-image: linear-gradient(
    to left,
    #000,
    rgba(0, 0, 0, 0.9) 34%,
    rgba(0, 0, 0, 0),
    transparent
  );
}
@media not all and (min-width: 50em) {
  .itemBackgroundContainer-preventbackdrop.withBackdrop {
    background-color: hsl(
      var(--background-hue),
      var(--background-saturation),
      var(--background-lightness)
    );
  }
}
.paper-icon-button-light:active {
  background-color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    0.2
  );
}
.paper-icon-button-light-tv:focus {
  background: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
}
/* .paper-icon-button-light:focus-visible { */
/*   background: hsla( */
/*     var(--focus-background-hue), */
/*     var(--focus-background-saturation), */
/*     var(--focus-background-lightness), */
/*     0.9 */
/*   ); */
/*   --theme-text-color-lightness: var(--focus-text-color-lightness); */
/*   color: hsla( */
/*     var(--theme-text-color-hue), */
/*     var(--theme-text-color-saturation), */
/*     0%, */
/*     var(--theme-text-color-alpha) */
/*   ); */
}
.raised,
.fab {
  background: hsla(
    var(--button-background-hue),
    var(--button-background-saturation),
    var(--button-background-lightness),
    var(--button-background-alpha)
  );
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
  box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25);
}
.raised:active,
.fab:active {
  background: hsla(
    var(--button-background-hue),
    var(--button-background-saturation),
    calc(var(--button-background-lightness) + 10%),
    var(--button-background-alpha)
  );
}
.emby-select,
.emby-multilineselect {
  color: inherit;
  background: hsla(
    var(--input-background-hue),
    var(--input-background-saturation),
    var(--input-background-lightness),
    var(--button-background-alpha)
  );
  border: var(--line-size) solid transparent;
}
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) {
  .raised-backdropfilter,
  .fab-backdropfilter,
  .emby-select-backdropfilter.detailTrackSelect {
    background: hsla(
      var(--button-background-hue),
      var(--button-background-saturation),
      var(--button-background-blur-lightness),
      var(--button-background-blur-alpha)
    );
    -webkit-backdrop-filter: var(--button-blur-backdrop-filter);
    backdrop-filter: var(--button-blur-backdrop-filter);
  }
  .toast-large {
    --theme-text-color-lightness: 100%;
    --theme-text-color-alpha: 0.85;
    color: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      var(--theme-text-color-alpha)
    );
  }
}
.filter-active {
  background: #03a9f4 !important;
  color: #fff !important;
}
.button-submit {
  background: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
  color: #fff;
}
@media not all and (min-width: 50em) {
  .detailButton-primary {
    background: #fff;
    color: #1a1a1a;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}
.emby-select > option {
  --theme-text-color-alpha: 1;
  --theme-text-color-lightness: 100%;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
  background: hsl(
    var(--card-background-hue),
    var(--card-background-saturation),
    var(--card-background-lightness)
  );
}
.emby-select:focus-visible {
  border-color: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  ) !important;
}
.emby-select-tv:focus {
  border-color: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  ) !important;
  background: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  ) !important;
  --theme-text-color-lightness: var(--focus-text-color-lightness) !important;
  --theme-text-color-alpha: 1 !important;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  ) !important;
}
.emby-select-tv:focus ~ .emby-select-selectedNameContainer {
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  ) !important;
}
.emby-select-tv:focus ~ .selectArrowContainer {
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  ) !important;
}
.emby-textarea-label:focus-within > .emby-textarea-labeltext,
.selectLabel:focus-within > .selectLabelText,
.inputLabelFocused {
  color: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
}
.sliderLabel:focus-within > .sliderLabelText {
  color: var(--theme-accent-text-color);
}
.emby-collapse-expandIcon,
.accentText {
  color: var(--theme-accent-text-color);
}
.button-link {
  color: var(--theme-accent-text-color);
}
.button-link-color-inherit {
  color: inherit;
}
.paperList,
.visualCardBox {
  background-color: hsla(
    var(--card-background-hue),
    var(--card-background-saturation),
    var(--card-background-lightness),
    var(--card-background-alpha)
  );
}
.listItems-border {
  border: var(--line-size) solid var(--line-background);
}
.collapseContent {
  border: var(--line-size) solid var(--line-background);
}
.secondaryText,
.fieldDescription,
.cardText-secondary {
  --theme-text-color-alpha: var(--theme-secondary-text-color-alpha);
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
}
@supports (color: var(--fake-var)) {
  .cardText-first {
    --theme-text-color-alpha: 1;
    color: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      var(--theme-text-color-alpha)
    );
  }
  .layout-tv .cardText-first {
    --theme-text-color-alpha: 0.87;
    color: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      var(--theme-text-color-alpha)
    );
  }
}
.actionsheetDivider {
  background: var(--line-background);
}
.selectionCommandsPanel {
  background: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 15%)
  );
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
}
.upNextDialog-countdownText {
  color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
.navMenuOption-selected .listItem-content {
  color: var(--theme-accent-text-color);
}
.navMenuOption-selected .listItem-content::before {
  background-color: hsla(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness),
    0.2
  );
}
.listItem-border::after {
  background: var(--line-background);
}
@media (hover: hover) and (pointer: fine) {
  .listItem-hoverable:hover .listItem-content-bg {
    background-color: transparent;
  }
  .listItem-hoverable:hover .listItem-content-bg::before {
    background: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      0.2
    );
  }
}
.listItem-tv:focus .listItem-content-bg {
  background: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
  box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25);
}
.listItem-button:focus-visible .listItem-content-bg {
  background: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
}
@supports (color: var(--fake-var)) {
  .listItem-tv:focus .listItem-content-bg {
    color: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      var(--theme-text-color-alpha)
    );
  }
  .listItem-button:focus-visible .listItem-content-bg {
    color: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      var(--theme-text-color-alpha)
    );
  }
}
.listItem-tv:focus .listItem-content-fb::before {
  border-color: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.7
  );
}
.progressring-spiner {
  border-color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
.mediaInfoText {
  background: hsla(
    var(--button-background-hue),
    var(--button-background-saturation),
    var(--button-background-lightness),
    var(--button-background-alpha)
  );
}
.starIcon {
  color: #cb272a;
}
.mediaInfoTimerIcon {
  color: #cb272a;
}
.emby-input,
.emby-textarea {
  color: inherit;
  background: hsla(
    var(--input-background-hue),
    var(--input-background-saturation),
    var(--input-background-lightness),
    var(--button-background-alpha)
  );
  border: var(--line-size) solid transparent;
}
.emby-input:focus-visible,
.emby-textarea:focus-visible {
  border-color: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
}
.emby-input-tv:focus,
.emby-textarea-tv:focus {
  border-color: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
}
.emby-checkbox + .checkboxLabel::before {
  border-color: currentcolor;
}
.chkCardSelect + .checkboxLabel::before {
  border-color: transparent;
  background: rgba(255, 255, 255, 0.4);
}
.chkItemSelect-selecthint + .checkboxLabel::before {
  border-color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    calc(var(--theme-primary-color-lightness) - 5%)
  );
  background-color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    calc(var(--theme-primary-color-lightness) - 5%)
  );
}
.emby-checkbox:checked + .checkboxLabel::before {
  border-color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
  background-color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
.emby-checkbox-focusoutline {
  background: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.2
  );
}
.emby-checkbox:checked + .checkboxLabel + .emby-checkbox-focusoutline {
  background: hsla(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness),
    0.2
  );
}
.mdl-radio__inner-circle {
  background-color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
.emby-radio:focus-visible + .radioButtonLabel {
  background-color: hsla(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness),
    0.2
  );
  color: var(--theme-accent-text-color);
}
.itemProgressBar {
  background: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    0.3
  );
}
.itemProgressBarForeground {
  background-color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
.itemProgressBarForeground-recording {
  background-color: #cb272a;
}
.countIndicator {
  background: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
.playedIndicator {
  background: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
.emby-tab-button-active {
  background: hsla(
    var(--button-background-hue),
    var(--button-background-saturation),
    calc(var(--button-background-lightness) + 50%),
    0.5
  );
  --theme-text-color-lightness: 100%;
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
}
.emby-tab-button-active.videoosd-tab-button {
  background: 0 0;
}
.emby-tab-button-active.videoosd-tab-button::before {
  background: #666;
}
.emby-button:focus-visible {
  background: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
}
.emby-button-tv:focus {
  background: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
  box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25);
}
.button-link:focus-visible {
  background: 0 0;
}
.button-link.emby-button-tv:focus {
  background: 0 0;
  box-shadow: none;
}
.button-link:focus-visible::before {
  background: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  );
}
.button-link.emby-button-tv:focus::before {
  background: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.9
  );
}
@supports (-webkit-mask-composite: xor) {
  .emby-button-outline:focus::after,
  .emby-button-outline.fab:focus::after,
  .emby-button-outline.paper-icon-button-light:focus::after {
    background: hsla(
      var(--focus-background-hue),
      var(--focus-background-saturation),
      var(--focus-background-lightness),
      0.4
    );
  }
}
.firstChannelCell-withscroll {
  background: hsl(
    var(--background-hue),
    var(--background-saturation),
    var(--background-lightness)
  ) !important;
}
.epgCellInner {
  background: hsla(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 18%),
    0.5
  );
}
.channelCellInner {
  background-color: hsla(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 9%),
    1
  );
}
.programCellInner-sports {
  background: rgba(61, 130, 146, 0.5);
}
.programCellInner-movie {
  background: rgba(137, 96, 172, 0.5);
}
.programCellInner-kids {
  background: rgba(115, 176, 205, 0.5);
}
.programCellInner-news {
  background: rgba(151, 176, 127, 0.5);
}
.guide-currentTimeIndicatorDot {
  border-inline-end-color: hsla(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness),
    0.2
  );
  color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
.epgRow-tv:focus-within .epgCellInner {
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
  background: hsla(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 60%),
    0.5
  );
}
.channelCell-tv:focus > .channelCellInner,
.programCell-tv:focus > .programCellInner {
  background-color: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
}
.channelCell:focus-visible > .channelCellInner,
.programCell:focus-visible > .programCellInner {
  background-color: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
}
.guide-programTextIcon {
  color: #1e1e1e;
  background: hsl(
    var(--button-background-hue),
    var(--button-background-saturation),
    calc(var(--button-background-lightness) + 23.5%)
  );
}
.infoBanner {
  background: hsl(
    var(--card-background-hue),
    var(--card-background-saturation),
    var(--card-background-lightness)
  );
}
.warningBanner {
  background: rgba(255, 69, 0, 0.1);
  color: #ff4500;
}
.ratingbutton-icon-withrating {
  color: #c33;
}
.downloadbutton-icon-on {
  color: #4285f4;
}
.downloadbutton-icon-complete {
  color: #4285f4;
}
.playstatebutton-icon-played {
  color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  ) !important;
}
.toggleButtonIcon-active {
  background: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    0.5
  );
  color: #000;
}
.card:focus .cardBox-sideFooter-f {
  background-color: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
}
.card:focus-visible .cardBox-sideFooter {
  background-color: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
}
.card:focus .cardContent-bxsborder::before,
.sideFooterCard:focus .cardBox-sideFooter-f::before {
  border-color: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.8
  ) !important;
}
.card:focus:focus-visible .cardContent-bxsborder-fv::before {
  border-color: hsla(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness),
    0.8
  ) !important;
}
.cardContent-button {
  background-color: transparent;
}
.cardContent-shadow {
  box-shadow: 0 0.25em 0.4375em rgba(0, 0, 0, 0.25);
  background-color: hsla(
    var(--card-background-hue),
    var(--card-background-saturation),
    var(--card-background-lightness),
    var(--card-background-alpha)
  );
}
.card-focustransform:focus .cardContent-shadow {
  box-shadow: 0 0.278em 0.975em rgba(0, 0, 0, 0.5);
}
.defaultCardBackground {
  background-color: hsla(
    var(--card-background-hue),
    var(--card-background-saturation),
    var(--card-background-lightness),
    var(--card-background-alpha)
  );
}
.cardImageContainer-sideFooter {
  background-color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    0.04
  );
}
.cardOverlayButtonIcon,
.listItemOverlayButtonIcon {
  background-color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
::-webkit-scrollbar-track-piece {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    0.5
  );
}
.emby-slider-background {
  background: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    0.3
  );
}
.emby-slider {
  color: inherit;
}
.emby-slider-thumb {
  background: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    1
  );
}
.emby-slider-background-upper {
  background: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    0.35
  );
}
.emby-slider-background-upper-accent {
  background: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  );
}
.emby-slider-background-lower {
  background: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--slider-lower-opacity)
  );
}
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) {
  .emby-slider-background-backdropfilter {
    -webkit-backdrop-filter: saturate(1.8) blur(4em);
    backdrop-filter: saturate(1.8) blur(4em);
  }
}
.scrollbuttoncontainer {
  color: white;
  background: hsla(var(--theme-text-color-hue),
  var(--theme-text-color-saturation),
  var(--theme-text-color-lightness),0.35);
  border-radius: 0.7em;
}
.recordingIcon-active {
  color: #c33 !important;
}
.textActionButton.dragging {
  background: hsla(
    var(--button-background-hue),
    var(--button-background-saturation),
    var(--button-background-lightness),
    var(--button-background-alpha)
  ) !important;
}
.dragging-over.full-drop-target {
  background: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  ) !important;
  color: #fff !important;
}
.dragging-over-top::before,
.dragging-over-bottom::after,
.dragging-over-left::before,
.dragging-over-right::after {
  background: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
}
.checkboxLabel-lockedfield-embeddedintofield {
  border-inline-start-color: var(--line-background) !important;
  border-top-width: var(--line-size) !important;
  border-bottom-width: var(--line-size) !important;
}
.checkboxLabel-lockedfield {
  background: hsla(
    var(--button-background-hue),
    var(--button-background-saturation),
    var(--button-background-lightness),
    var(--button-background-alpha)
  ) !important;
}
.chkLockedField:checked + span {
  border-color: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  ) !important;
  background: hsl(
    var(--theme-primary-color-hue),
    var(--theme-primary-color-saturation),
    var(--theme-primary-color-lightness)
  ) !important;
}
.chkLockedField.emby-checkbox-tv:focus {
  box-shadow: 0 0 0 0.12em
    hsl(
      var(--theme-primary-color-hue),
      var(--theme-primary-color-saturation),
      var(--theme-primary-color-lightness)
    );
}
.chkLockedField:focus-visible + span {
  box-shadow: 0 0 0 0.12em
    hsl(
      var(--theme-primary-color-hue),
      var(--theme-primary-color-saturation),
      var(--theme-primary-color-lightness)
    );
}
.tabs-viewmenubar-backgroundcontainer {
  background: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 9.75%)
  );
}
@supports (backdrop-filter: blur(1em)) or (-webkit-backdrop-filter: blur(1em)) {
  .tabs-viewmenubar-backgroundcontainer-backdropfilter {
    background: hsla(
      var(--background-hue),
      var(--background-saturation),
      calc(var(--background-lightness) + 15%),
      0.5
    );
    -webkit-backdrop-filter: saturate(1.8) blur(1.5em);
    backdrop-filter: saturate(1.8) blur(1.5em);
  }
}
.tabs-viewmenubar:focus-within .emby-tab-button-active:not(:focus) {
  background: 0 0;
}
.dockedtabs {
  border-top: var(--line-size) solid var(--line-background);
}
.dockedtabs-tab-button {
  background: 0 0 !important;
}
.dockedtabs-tab-button.emby-tab-button:focus {
  color: inherit;
}
.dockedtabs-tab-button.emby-tab-button-active {
  color: var(--theme-accent-text-color) !important;
}
.searchFieldsBottomBorder {
  border-bottom: var(--line-size) solid var(--line-background);
}
.activeSession-bottomsection:nth-child(odd) {
  background: hsla(
    var(--card-background-hue),
    var(--card-background-saturation),
    calc(var(--card-background-lightness) - 10%),
    0.5
  );
}
.dataGridHeader-content-inner {
  background: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 7%)
  );
}
.dataGridItem:nth-child(2n) {
  background: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 7%)
  );
}
@media (hover: hover) and (pointer: fine) {
  .dataGridItem-hoverable:hover,
  .dataGridItem-hoverable:hover .chkItemSelectContainer {
    background-color: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      0.2
    );
  }
}
.dataGridItem-focusscale:focus {
  background: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
}
.dataGridItem-button:focus-visible {
  background: hsl(
    var(--focus-background-hue),
    var(--focus-background-saturation),
    var(--focus-background-lightness)
  );
  --theme-text-color-lightness: var(--focus-text-color-lightness);
  --theme-text-color-alpha: 1;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    0%,
    var(--theme-text-color-alpha)
  );
}
@media all and (min-width: 50em) {
  .itemBackgroundContainer.withBackdrop {
    background: linear-gradient(
      77deg,
      rgba(0, 0, 0, 0.84) 0,
      rgba(0, 0, 0, 0.75) 60%,
      rgba(0, 0, 0, 0.3) 100%
    ) !important;
    opacity: 1 !important;
  }
  [dir="rtl"] .itemBackgroundContainer.withBackdrop {
    background: linear-gradient(
      283deg,
      rgba(0, 0, 0, 0.84) 0,
      rgba(0, 0, 0, 0.75) 60%,
      rgba(0, 0, 0, 0.3) 100%
    ) !important;
  }
}
@media all and (orientation: landscape) {
  .itemBackgroundContainer-brighter.withBackdrop {
    background: 0 0 !important;
    opacity: 1 !important;
  }
}
@media all and (min-width: 50em) {
  .darkContentContainer-item {
    --background-hue: 285;
    --background-saturation: 10%;
    --background-lightness: 7.84%;
    --focus-background-hue: 0;
    --focus-background-saturation: 0%;
    --focus-background-lightness: 100%;
    --focus-blur-background-lightness: 100%;
    --focus-text-color-lightness: 0%;
    --theme-text-color-hue: 0;
    --theme-text-color-saturation: 0%;
    --theme-text-color-lightness: 100%;
    --theme-text-color-alpha: 1;
    --theme-accent-text-color: var(--theme-accent-text-color-darkbg);
    --line-background: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      0.14
    );
    color: hsla(
      var(--theme-text-color-hue),
      var(--theme-text-color-saturation),
      var(--theme-text-color-lightness),
      var(--theme-text-color-alpha)
    );
    --button-background-hue: 285;
    --button-background-saturation: 4.2%;
    --button-background-lightness: 40%;
    --button-background-alpha: 0.7;
    --button-background-blur-lightness: calc(
      var(--button-background-lightness) + 37%
    );
    --button-background-blur-alpha: 0.3;
    --button-blur-backdrop-filter: saturate(1.8) blur(4em);
    --card-background-hue: 0;
    --card-background-saturation: 0%;
    --card-background-lightness: 17.25%;
    --card-background-alpha: 0.7;
    --input-background-hue: 285;
    --input-background-saturation: 4.2%;
    --input-background-lightness: 40%;
    --drawer-background: hsl(
      var(--background-hue),
      var(--background-saturation),
      calc(var(--background-lightness) + 3.5%)
    );
    --docked-drawer-background: hsla(
      var(--background-hue),
      var(--background-saturation),
      calc(var(--background-lightness) + 18%),
      0.2
    );
  }
  .detailMainContainer-withbackdrop {
    text-shadow: 0.18em 0.18em 0.28em rgba(0, 0, 0, 0.45);
  }
  .details-additionalContent-withbackdrop {
    --theme-text-color-alpha: 0.85;
  }
}
.darkContentContainer {
  --background-hue: 285;
  --background-saturation: 10%;
  --background-lightness: 7.84%;
  --focus-background-hue: 0;
  --focus-background-saturation: 0%;
  --focus-background-lightness: 100%;
  --focus-blur-background-lightness: 100%;
  --focus-text-color-lightness: 0%;
  --theme-text-color-hue: 0;
  --theme-text-color-saturation: 0%;
  --theme-text-color-lightness: 100%;
  --theme-text-color-alpha: 1;
  --theme-accent-text-color: var(--theme-accent-text-color-darkbg);
  --line-background: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    0.14
  );
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
  --button-background-hue: 285;
  --button-background-saturation: 4.2%;
  --button-background-lightness: 40%;
  --button-background-alpha: 0.6;
  --button-background-blur-lightness: calc(
    var(--button-background-lightness) + 37%
  );
  --button-background-blur-alpha: 0.3;
  --button-blur-backdrop-filter: saturate(1.8) blur(4em);
  --card-background-hue: 0;
  --card-background-saturation: 0%;
  --card-background-lightness: 17.25%;
  --card-background-alpha: 0.7;
  --input-background-hue: 285;
  --input-background-saturation: 4.2%;
  --input-background-lightness: 40%;
  --drawer-background: hsl(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 3.5%)
  );
  --docked-drawer-background: hsla(
    var(--background-hue),
    var(--background-saturation),
    calc(var(--background-lightness) + 18%),
    0.2
  );
}
.darkContentContainer-tv {
  --theme-text-color-alpha: 0.87;
  color: hsla(
    var(--theme-text-color-hue),
    var(--theme-text-color-saturation),
    var(--theme-text-color-lightness),
    var(--theme-text-color-alpha)
  );
}
.graphicContentContainer {
  --theme-text-color-alpha: 1;
  --theme-secondary-text-color-alpha: 0.7;
  --button-background-hue: 0;
  --button-background-saturation: 0%;
  --button-background-lightness: 15%;
  --button-background-alpha: 0.6;
  --input-background-hue: 0;
  --input-background-saturation: 0%;
  --input-background-lightness: 15%;
  --slider-lower-opacity: 1;
}
.detailTrackSelect {
  border-color: transparent;
}
.lyricsScroller {
  --theme-secondary-text-color-alpha: 0.3;
}