/*
_________________________________________________________________________
------------------------- COLOR HEX & RGB CODES -------------------------
	RED 	    : #990000 & (153, 0, 0)
	DARK COLOR  : #660000

	ORANGE      : #FF8000 & (255, 128, 0)
	DARK COLOR  : #BF6000

	ORANGE PLEX : #CC7B19 & (204, 123, 25)
	DARK COLOR  : #B35A00

	YELLOW      : #BDBD00 & (189, 189, 0)
	DARK COLOR  : #757500

	GREEN       : #52B54B & (82, 181, 75)
	DARK COLOR  : #3E8437

	BLUE	    : #4285F4 & (66, 133, 244)
	DARK COLOR  : #0C57D6

	BLUE DARK	: #3367d6 & (51,103,214)
	BLUE DARK (DARK) : #1f4698

	PURPLE      : #673AB7 & (103, 58, 183)
	DARK COLOR  : #3F2471

	GRAY	    : #7F7F7F & (127, 127, 127)
	DARK COLOR  : #535353

	PINK	    : #F707DF & (247, 7, 223)
	DARK COLOR  : #C604B3

*/
:root {
  --theme-primary-color: #600000 !important;
  --theme-primary-text-color: #600000 !important;
  --theme-primary-color-lightened: #900000 !important;
  --theme-icon-focus-background: rgba(82, 0, 0, 0.2) !important;
  --theme-background: #141414;
  --button-background: #282828;
  --theme-body-secondary-text-color: rgba(255, 255, 255, .6);
  --card-background: #0c0c0c !important;
  --dark1: #101010;
  --dark2: #131313;
  --dark3: #161616;
  --background-hue: 0 !important;
  --background-saturation: 0% !important;
  --background-lightness: 5% !important;
  --theme-text-color-alpha: .95 !important;
  --button-background-hue: 0 !important;
  --button-background-saturation: 0% !important;
  --button-background-lightness: 10% !important;
  --card-background-hue: 0 !important;
  --card-background-saturation: 0% !important;
  --card-background-lightness: 5% !important;
  --dialog-border-width: var(--line-size);
}

/*
================================================================================
----------------------------   ADDITIONAL IMPORTS   ---------------------------
*/
/* Dark Theme */
@import url('https://css.vengefulsyndicate.com/emby/DARK-COLORS.css');
/* Extras */
@import url('https://css.vengefulsyndicate.com/emby/VS-ELEMENTS.css');
/* Logo */
@import url('https://css.vengefulsyndicate.com/emby/VS-LOGO.css');
/* Fonts */
@import url('https://css.vengefulsyndicate.com/emby/Fonts.css');
/* Cards */
@import url('https://css.vengefulsyndicate.com/emby/CARDS.css');

/*
================================================================================
----------------------- EMBY THEME : ACCENT COLORS ----------------------

                 ---------- Table of Contents ----------

	1. ACCENT COLORS
	   1.1 Buttons
	       1.1.1 Checkboxes
		   1.1.2 Rectangles
		   1.1.3 Links & Text buttons
		   1.1.4 Others
	   1.2 Details
	       1.2.1 Circles
		   1.2.2 Indicators
		   1.2.3 Fonts
		   1.2.4 Icons
		   1.2.5 Dialogs & Action Sheets
		   1.2.6 Others
	   1.3 Fixes

	2. MISCELLANEOUS MODIFICATIONS
	   2.1 Buttons
	   2.2 Details
	       2.2.1 Scrollbars
	       2.2.2 Logos
	       2.2.3 Others
	   2.3 Fixes
	       2.3.1 Dark Colors

*/
/* ------------------------ 1. ACCENT COLORS ------------------------- */
/* ----- 1.1 Buttons ----- */
/* 1.1.1 Checkboxes */
.emby-checkbox:checked+span+span+.checkboxOutline, .itemProgressBarForeground {
  background: none !important;
}

.emby-checkbox:checked+span+span+.checkboxOutline>.checkboxOutlineTick {
  background-color: #990000 !important;
}

.emby-checkbox:checked+span+span+.checkboxOutline>.checkboxIcon-checked {
  background-color: #900000;
}

.emby-checkbox:checked+span+span+.checkboxOutline,
.progressring-spiner {
  /*border-color: #990000 !important;*/
  border: none !important;
}

.emby-checkbox:focus+span+.emby-checkbox-focushelper {
  background-color: #990000 !important;
  opacity: 0.26 !important;
}

/* 1.1.2 Rectangles */
.raised {
  background: rgba(64, 0, 0, .750) !important;
  border: 1px solid #000;
  color: #fff !important;
}

.raised:hover {
  background: #161616 !important;
  border: 1px solid #000;
  -moz-box-shadow: 0 0 5px #300000 !important;
  -webkit-box-shadow: 0 0 5px #300000 !important;
  box-shadow: 0px 0px 5px #300000 !important;
  color: #fff !important;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  transform: scale(1.05);
}

/* Tags Button */
.tag-dot {
  display: none;
}

.raised-tag-inner-triangle {
  display: none;
}

.raised-tag {
  background: none !important;
}

.raised-tag-inner {
  border-radius: .25em;
  padding: 0 1em 0 1em;
}

/* Cancel Button */
.raised.cancel.block.btnCancel.emby-button {
  color: #990000 !important;
  border: 1px solid #600;
}

.raised.button-cancel.block.btnCancel.emby-button {
  color: #990000 !important;
  border: 1px solid #600;
}

/* Cancel Button: Hover */
.raised.cancel.block.btnCancel.emby-button:hover {
  background: #900000 !important;
  border: 1px solid #000;
  -moz-box-shadow: 0 0 5px #300000 !important;
  -webkit-box-shadow: 0 0 5px #300000 !important;
  box-shadow: 0px 0px 5px #300000 !important;
  color: #fff !important;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  transform: scale(1.02);
}

.raised.button-cancel.block.btnCancel.emby-button:hover {
  background: #900000 !important;
  border: 1px solid #000;
  -moz-box-shadow: 0 0 5px #300000 !important;
  -webkit-box-shadow: 0 0 5px #300000 !important;
  box-shadow: 0px 0px 5px #300000 !important;
  color: #fff !important;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  transform: scale(1.02);
}

/* Submit Button */
.raised.button-submit.block.emby-button {
  background: #006600 !important;
  color: #fff !important;
}

/* Submit Button: Hover */
.raised.button-submit.block.emby-button:hover {
  background: #009900 !important;
  border: 1px solid #000;
  -moz-box-shadow: 0 0 5px #003000 !important;
  -webkit-box-shadow: 0 0 5px #003000 !important;
  box-shadow: 0px 0px 5px #003000 !important;
  color: #fff !important;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  -ms-transition: all 0.2s ease-out;
  -o-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  transform: scale(1.02);
}

/* "Up Next" OSD Dialog Buttons */
.raised.raised-mini.btnStartNow.upNextDialog-button.emby-button {
  background: rgba(0, 102, 0, .25) !important;
}

.raised.raised-mini.btnStartNow.upNextDialog-button.emby-button:hover {
  background: rgba(0, 102, 0, .5) !important;
  -moz-box-shadow: 0 0 5px #003000 !important;
  -webkit-box-shadow: 0 0 5px #003000 !important;
  box-shadow: 0px 0px 5px #003000 !important;
}

.raised.raised-mini.btnHide.upNextDialog-button.emby-button {
  background: rgba(102, 0, 0, .25) !important;
}

.raised.raised-mini.btnHide.upNextDialog-button.emby-button:hover {
  background: rgba(102, 0, 0, .5) !important;
  -moz-box-shadow: 0 0 5px #300000 !important;
  -webkit-box-shadow: 0 0 5px #300000 !important;
  box-shadow: 0px 0px 5px #300000 !important;
}

.raised-mini.emby-button {
  background: #990000 !important;
  color: #ffffff !important;
}

/* Restart */
.btnRestartContainer.emby-button {
  background: #990000 !important;
  color: #fff;
}

/* Play & Resume */
.btnPlaySimple.emby-button {
  background: #990000 !important;
  color: #fff;
}

.btnResume.emby-button {
  /* background: #660000 !important; */
  color: #fff;
}

.detailButton-icon:not(.nobackdropfilter), .emby-select-withcolor:not(.nobackdropfilter), .fab:not(.nobackdropfilter), .raised:not(.nobackdropfilter) {
  background: rgba(96, 0, 0, .5);
}

.detailButton-icon:not(.nobackdropfilter):hover {
  background: rgba(160, 0, 0, .5);
  -webkit-box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 0.56em 0 rgba(0, 0, 0, .12) !important;
  box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 0.56em 0 rgba(0, 0, 0, .12) !important;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all .3s ease-in-out;
  transform: scale(1.1);
  -moz-text-shadow: 0 0 5px #600000;
  -webkit-text-shadow: 0 0 5px #600000;
  text-shadow: 0px 0px 5px #600000;
}

/* 1.1.3 Links & Text buttons */
.button-link, .button-flat-accent, .button-accent-flat,
.textlink {
  color: #990000 !important;
  /*font-weight: bold;*/
}

.button-link:hover, .button-flat-accent:hover,
.button-accent-flat:hover, .textlink:hover {
  color: #9b9b9b !important;
}

.button-link:active, .button-flat-accent:active,
.button-accent-flat:active, .textlink:active {
  color: #660000 !important;
}

/* Top Header */
.tabs-viewmenubar-slider-backdropfilter {
  background: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.emby-tab-button-active {
  color: #900000 !important;
}

.emby-button-foreground:hover {
  transform: scale(1.1) !important;
  color: #ffffff !important;
  font-weight: bolder !important;
  transition-duration: .5s !important;
}

/* 1.1.4 Others */
.emby-button>i:hover {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all .3s ease-in-out;
  transform: scale(1.5);
  -moz-text-shadow: 0 0 5px #600000;
  -webkit-text-shadow: 0 0 5px #600000;
  text-shadow: 0px 0px 5px #600000;
}

/* Alpha Picker */
.alphaPickerButton-selected, .alphaPickerButton-tv:focus {
  background-color: #990000 !important;
  color: #fff !important;
}

/* Radio Buttons */
.mdl-radio__inner-circle {
  background: #990000 !important;
}

.mdl-radio__button:checked+.mdl-radio__label+.mdl-radio__outer-circle {
  border: 2px solid #990000 !important;
}

.mdl-radio__button:checked:focus+.mdl-radio__label+.mdl-radio__outer-circle+.mdl-radio__inner-circle {
  -webkit-box-shadow: 0 0 0 10px rgba(153, 0, 0, 0.26) !important;
  box-shadow: 0 0 0 10px rgba(153, 0, 0, 0.26) !important;
}

/* Control Group Buttons */
div[data-role="controlgroup"] a.ui-btn-active[data-role='button'] {
  border: 2px solid #000 !important;
  background: #990000 !important;
  color: #fff !important;
  font-weight: bold !important;
  text-shadow: 2px 2px 5px #000 !important;
}

div[data-role=controlgroup] a[data-role=button] {
  border: 1px solid #000 !important;
  background: #161616 !important;
  color: #cfcfcf !important;
}

div[data-role=controlgroup] a[data-role=button]:hover {
  background: #131313 !important;
  color: #900 !important;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  transform: scale(1.1);
}

/* ----- 1.2 Details ----- */
/* 1.2.1 Circles */
/* .listItemIcon:not(.listItemIcon-transparent) {
    background-color: #600000 !important; } */
.dashboardSection i.listItemIcon.md-icon {
  background-color: #990000 !important;
}

.scheduledTaskPaperIconItem[data-status="Running"] i.listItemIcon.md-icon {
  background-color: #660000 !important;
}

/* Focus Helper circles */
.paper-icon-button-light:focus {
  color: #600000 !important;
  background-color: rgba(96, 0, 0, .3) !important;
}

.paper-icon-button-light:hover {
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all .3s ease-in-out;
  transform: scale(1.5);
  -moz-text-shadow: 0 0 5px #600000;
  -webkit-text-shadow: 0 0 5px #600000;
  text-shadow: 0px 0px 5px #600000;
}

/* 1.2.2 Indicators */
.countIndicator {
  background: rgba(153, 0, 0, 0.75) !important;
  border: 1px solid #000 !important;
  border-radius: 40% !important;
  height: 24px;
}

.countIndicator, .playedIndicator {
  background: rgba(153, 0, 0, 0.75) !important;
  border: 1px solid #000 !important;
  border-radius: 40% !important;
}

.cardIndicators {
  border-radius: 40% !important;
  box-shadow: 0 0 5px #000;
}

.levelNormal {
  background-color: #990000 !important;
}

.fullSyncIndicator {
  background: #990000 !important;
  color: #fff;
}

.playstatebutton-played i, .ratingbutton-withrating i {
  color: #990000 !important;
}

p#pUpToDate i.md-icon {
  background-color: #990000 !important;
}

/* Loading Spinners */
.mdl-spinner__layer-1, .mdl-spinner__layer-2, .mdl-spinner__layer-3,
.mdl-spinner__layer-4 {
  border-color: #990000 !important;
}

.progressring-spiner {
  border: 0.25em solid #990000 !important;
}

/* 1.2.3 Fonts */
.selectLabelFocused, .textareaLabelFocused, .inputLabelFocused {
  color: #990000 !important;
  font-weight: bolder;
}

.secondary.listItemBodyText span, div#divRunningTasks span {
  color: #990000 !important;
}

/* 1.2.4 Icons */
.starIcon, .mediaInfoTimerIcon {
  color: #990000 !important;
}

/* Top Header */
.btnActiveCast {
  color: #990000 !important;
}

/* Now Playing Bar & Now Playing Page */
.repeatActive,
button.btnCommand.repeatToggleButton.autoSize.nowPlayingPageRepeatActive {
  color: #990000 !important;
}

/* 1.2.5 Dialogs & Action Sheets */
/* 1.2.6 Others */
/* General Accent Color Modifications */
:focus {
  outline: #990000 auto 5px;
}

select:focus {
  border-color: #990000 !important;
}

::selection {
  background-color: #660000 !important;
}

.emby-input:focus, .emby-textarea:focus {
  border-color: #990000 !important;
}

/* Google Now Playing Bar & Now Playing Page */
.iconOsdProgressInner, .mdl-slider__background-lower,
.mdl-slider::-webkit-slider-thumb {
  background: #990000 !important;
}

.mdl-slider:focus::-webkit-slider-thumb {
  -webkit-box-shadow: 0 0 0 10px rgba(153, 0, 0, 0.26);
  box-shadow: 0 0 0 10px rgba(153, 0, 0, 0.26) !important;
}

/* Firefox Now Playing Bar & Now Playing Page */
.mdl-slider::-moz-range-thumb, .mdl-slider::-moz-range-progress {
  background: #990000 !important;
}

.mdl-slider:focus::-moz-range-thumb {
  box-shadow: 0 0 0 10px rgba(153, 0, 0, 0.26) !important;
}

/* Progress Bars */
.itemProgressBarForeground {
  background-color: #990000 !important;
}

.taskProgressInner {
  background: #990000 !important;
}

/* Google Progress Bars */
progress::-webkit-progress-value {
  background: #990000 !important;
}

/* Firefox Progress Bars */
progress::-moz-progress-bar {
  background: #990000 !important;
}

/* Edge Progress Bars */
progress {
  background: #990000 !important;
}

/* Main Drawers */
.mainDrawer {
    backdrop-filter: saturate(1.8) blur(0.25em);
    /* border-right: 2px solid black !important; */
    border-right: 1px solid #000;
    background-color: rgba(12, 12, 12, 0.90) !important;
    padding: 1em 1em 10vh;
}
.mainDrawer:before {
  background-color: rgba(9, 9, 9, 0.90) !important;
  /* backdrop-filter: blur(5px) !important; */
  -webkit-filter: blur(5px) !important;
}

.dashboardDocument .mainDrawer {
  background-color: #0c0c0c !important;
}

.navMenuDivider {
  background: #262626 !important;
}

.adminDrawerLogo {
  border-bottom: 1px solid #262626 !important;
}

.sidebarHeader {
  color: #bbbbbb !important;
}

.navMenuOption {
  color: #ffffff !important;
}

.navMenuOption.navMenuOption-selected {
  background: rgba(0, 0, 0, 0.25) !important;
  color: #A00000 !important;
  font-weight: bolder !important;
  border: 1px solid black;
}

/*  .navMenuOption:hover {
  background: #252528 !important;
  color: #9b9b9b !important; }
*/
.navMenuOption:hover {
  background: rgba(0, 0, 0, 0.5) !important;
  color: #900000 !important;
  font-weight: bolder !important;
  transform: scale(1.05)!important;
  /* border-top: 1px solid #000!important; */
  /* border-bottom: 1px solid #000!important; */
}

/* Metadata Editor */
div.jstree-wholerow.jstree-wholerow-clicked:hover,
div.jstree-wholerow.jstree-wholerow-clicked,
div.jstree-wholerow.jstree-wholerow-hovered {
  background: #252528 !important;
}

.jstree-anchor.jstree-clicked,
.jstree-anchor.jstree-clicked.jstree-hovered {
  background: #252528 !important;
  color: #990000 !important;
}

/* Multi-select */
.itemSelectionPanel {
  border: 1px solid #990000 !important;
}

.selectionCommandsPanel {
  background: #990000 !important;
  color: #fff;
}

/* upNextDialog */
.upNextDialog-countdownText {
  color: #990000 !important;
}

/* Selection Bars */
.emby-select-selectionbar, .emby-textarea-selectionbar,
.emby-input-selectionbar {
  background-color: #990000 !important;
}

/* Media Info Detail Image */
.itemDetailImage.loaded:hover {
  border: 1px solid #990000 !important;
}

/* 1.3 Fixes */
/* ------------------ 2. MISCELLANEOUS MODIFICATIONS ----------------- */
/* ----- 2.1 Buttons ----- */
/* Circles */
.fab {
  background-color: transparent !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

/* ----- 2.2 Details ----- */
/* 2.2.1 Scrollbars */
/* Google Chrome */
::-webkit-scrollbar-corner {
  background-color: #202020;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
  background-color: #202020;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #888888;
}

/* Google Chrome - Dashboard Drawer */
div.scrollContainer.smoothScrollY::-webkit-scrollbar-corner {
  background-color: transparent !important;
}

div.scrollContainer.smoothScrollY::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: transparent !important;
}

div.scrollContainer.smoothScrollY::-webkit-scrollbar-thumb {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #080808;
}

/* Google Chrome - Filter Dialog */
.dynamicFilterDialog::-webkit-scrollbar-corner {
  background-color: transparent !important;
}

.dynamicFilterDialog::-webkit-scrollbar {
  width: 2px;
  height: 2px;
  background-color: transparent !important;
}

.dynamicFilterDialog::-webkit-scrollbar-thumb {
  -webkit-border-radius: 2px;
  border-radius: 2px;
  background: #080808;
}

/* 2.2.2 Logos */
/* Login Page */
.imgLogoIcon {
  content: url(https://cdn.rawgit.com/Nostalgist92/Emby-Dark-Themes-Resources/master/images/logos-and-icons/RED-VS/logo.png) !important;
}

/* Main Drawer Mobile */
.adminDrawerLogo img {
  content: url(https://cdn.rawgit.com/Nostalgist92/Emby-Dark-Themes-Resources/master/images/logos-and-icons/RED-VS/logo.png) !important;
}

/* 2.2.3 Others	*/
/* Dashboard Items */
.localnav .raised.ui-btn-active {
  background: #900000 !important;
}

.listItem-border {
  border: none !important;
}

/* CSS Box */
#txtCustomCss {
  height: 300px !important;
  overflow-y: scroll !important;
}

/* Select Box */
select option {
  background-color: #202020 !important;
  color: #ffffff !important;
}

/* Dialogs */
.formDialogHeader:not(.formDialogHeader-clear),
.formDialogFooter:not(.formDialogFooter-clear) {
  background-color: #121212 !important;
  color: #fff;
}

/* Headers */
.skinHeader {
  background-color: rgba(9, 9, 9, .5) !important;
  border-bottom: 1px solid #000;
  color: #fff !important;
}

.skinHeader-withBackground {
  background-color: rgba(9, 9, 9, .5) !important;
  border-bottom: 1px solid #000 !important;
}

@supports (backdrop-filter: blur(1.5em)) or (-webkit-backdrop-filter: blur(1.5em)) {
  .skinHeader-blurred {
    background: rgba(20, 20, 20, 0.7) !important;
    -webkit-backdrop-filter: blur(1.5em) !important;
    backdrop-filter: blur(1.5em) !important;
  }
}

.skinHeader.semiTransparent::before {
  backdrop-filter: saturate(1.8) blur(0.5em);
}

.appfooter {
  background-color: rgba(9, 9, 9, .9) !important;
  color: #fff !important;
}

@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .appfooter-blurred {
    background: rgba(24, 24, 24, 0.7) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
  }
}

/* TV Global Modifications */
.emby-tab-button-active.emby-button-tv {
  color: #fff !important;
}

.guide-channelHeaderCell, .guide-channelTimeslotHeader {
  background: #2e2e2e !important;
}

.guide-programTextIcon {
  color: #1e1e1e !important;
  background: #555 !important;
}

.guide-headerTimeslots {
  color: #ccc !important;
}

/* ----- 2.3 Fixes ----- */
/* 2.3.1 Dark Colors */
.autoorganizetable tbody tr:nth-child(odd) td, .autoorganizetable tbody tr:nth-child(odd) th {
  background-color: #222326 !important;
}

.autoorganizetable>.table>tbody>tr {
  border: 1px solid #222326 !important;
}

/*
_____________________________________________________________________

    Emby Dark Themes is maintained by Ben Z (BenZuser)
    with the contribution of Happy2Play.
_____________________________________________________________________

*/
/* TEMPORARY FIXES */
/* Links */
.searchSuggestionsList a, .noItemsMessage a, a.lnkPremiere {
  color: #990000 !important;
}

.searchSuggestionsList a:hover, .noItemsMessage a:hover,
a.lnkPremiere:hover {
  color: #9b9b9b !important;
}

.searchSuggestionsList a:active, .noItemsMessage a:active,
a.lnkPremiere:active {
  color: #660000 !important;
}

/*
===========================================================================
---------------------------- Additional Tweaks ---------------------------
*/
/* Add glow to login page images on hover*/
.cardScalable:hover {
  -moz-box-shadow: 0 0 5px #600000;
  -webkit-box-shadow: 0 0 5px #600000;
  box-shadow: 0px 0px 5px #600000;
}

/* Black Border on Cards */
.cardContent-button {
  border: 0 !important;
  border-bottom: 1px solid black !important;
  /* border: 1px solid #000 !important; */
  /* border: 2px solid #000 !important; */
    border-radius: 8px;
}

/* Red Border on Card Hover */
.cardOverlayContainer {
  background: -webkit-radial-gradient(50% 50%, farthest-corner, rgba(16, 16, 16, .5) 75%, #000 100%) !important;
  background: -o-radial-gradient(50% 50%, farthest-corner, rgba(16, 16, 16, .5) 75%, #000 100%) !important;
  background: radial-gradient(farthest-corner at 50% 50%, rgba(16, 16, 16, .5) 75%, #000 100%) !important;
  -moz-box-shadow: 0 0 5px #300000 !important;
  -webkit-box-shadow: 0 0 5px #300000 !important;
  box-shadow: 0px 0px 5px #300000 !important;
  /* border: 2px solid #300000; */
  border: none !important;
}

.emby-select-withcolor:focus {
  outline: 2px solid #660000 !important
}

/* =========================================================================== */
/* Login Page Tweaks */
/* Set images to grayscale */
#loginPage .card {
  -webkit-filter: grayscale(75%);
  filter: grayscale(75%);
}

/* Transition images to color on hover*/
#loginPage .card:hover {
  -webkit-filter: grayscale(0);
  filter: grayscale(0);
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  transform: scale(1.1);
}

/* Add border to login page images */
#loginPage .cardScalable {
  border: 1px solid #000;
}

/* Add glow to login page images on hover*/
#loginPage .cardScalable:hover {
  -moz-box-shadow: 0 0 5px #600000;
  -webkit-box-shadow: 0 0 5px #600000;
  box-shadow: 0px 0px 5px #600000;
}

/* =========================================================================== */
/* OSD */
.osdPoster-img {
  max-height: 70%!important;
  margin: 0 0 1vh!important;
}

.osdPoster-img:hover {
  border: 2px solid #000 !important;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  transform: scale(1.05);
  -moz-box-shadow: 0 0 5px #600000;
  -webkit-box-shadow: 0 0 5px #600000;
  box-shadow: 0px 0px 5px #600000;
}

.osdMainTextContainer {
  -webkit-box-align: center;
  -webkit-align-items: baseline;
  align-items: center;
  margin: 0 1em 0 0;
}

.upNextDialog-poster-img {
  border: 1px solid #300000 !important;
}

.upNextDialog-poster-img:hover {
  border: 2px solid #000 !important;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  transform: scale(1.05);
  -moz-box-shadow: 0 0 5px #600000;
  -webkit-box-shadow: 0 0 5px #600000;
  box-shadow: 0px 0px 5px #600000;
}

/* =========================================================================== */
/* User Preferences Links */
a.listItem-border.emby-button {
  background-color: rgba(12, 12, 12, 0.90) !important;
  -moz-box-shadow: 0 0 2px #000 !important;
  -webkit-box-shadow: 0 0 2px #000 !important;
  box-shadow: 0px 0px 2px #000 !important;
  border-color: #000 !important;
}

a.listItem-border.emby-button:hover {
  background-color: rgba(12, 12, 12, 0.90) !important;
  border-color: #000 !important;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  transform: scale(1.05);
  -moz-box-shadow: 0 0 5px #600000 !important;
  -webkit-box-shadow: 0 0 5px #600000 !important;
  box-shadow: 0px 0px 5px #600000 !important;
  color: #900000;
}

/* =========================================================================== */
/* Emby Sliders */
.emby-slider {
  color: #990000 !important;
}

.emby-slider::-moz-range-progress {
  background: #990000 !important;
}

.emby-slider::-webkit-slider-thumb {
  background: #990000 !important;
}

.emby-slider::-moz-range-thumb {
  background: #990000 !important;
}

.emby-slider::-ms-thumb {
  background: #990000 !important;
}

.emby-slider-background-lower {
  background-color: #990000 !important;
}

.sliderBubble {
  background-color: #131313;
}

.mdl-slider-background-lower {
  background-color: #600000 !important;
}

/* Emby Toggle */
.mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__track {
  background: rgba(82, 0, 0, .5) !important;
}

.mdl-switch__input:checked+.mdl-switch__label+.mdl-switch__trackContainer>.mdl-switch__thumb {
  background: #900000 !important;
  left: 1.466em;
  -webkit-box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 0.56em 0 rgba(0, 0, 0, .12);
  box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 0.56em 0 rgba(0, 0, 0, .12);
}

.mdl-switch__input:checked:focus+.mdl-switch__label+.mdl-switch__trackContainer .mdl-switch__focus-helper {
  -webkit-box-shadow: 0 0 0 1.39em rgba(82, 0, 0, .26) !important;
  box-shadow: 0 0 0 1.39em rgba(82, 0, 0, .26) !important;
  background-color: rgba(82, 0, 0, .26) !important;
}

/* Dialog Boxes */
.dialog {
  border: 2px solid #300000 !important;
}

.actionsheetDivider {
  background: #900000 !important;
  background: rgba(116, 0, 0, .26) !important;
}

/* Plugin Cards */
/* Horizontal Scroll Button */
.scrollbuttoncontainer {
  color: #900000 !important;
  background: rgba(0, 0, 0, .8) !important;
  /* border: 2px solid #600000; */
  -webkit-box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 0.56em 0 rgba(0, 0, 0, .12) !important;
  box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 0.56em 0 rgba(0, 0, 0, .12) !important;
}

.scrollbuttoncontainer-right {
  border-right: none !important;
}

.scrollbuttoncontainer-left {
  border-left: none !important;
}

.scrollbuttoncontainer:hover {
  transition: all 0.3s ease-out !important;
  transform: scale(1.05) !important;
  background: rgba(0, 0, 0, .9) !important;
}

/* ===============================================================  */
.cardBox:hover {
  -moz-box-shadow: 0 0 5px #600000;
  -webkit-box-shadow: 0 0 5px #600000;
  box-shadow: 0px 0px 5px #600000;
}

button.raised.button-submit.btnHeaderPremiere.headerButton.emby-button {
  display: none;
}
/* ===============================================================  */
.padded-top-page, .page-windowScroll {
  padding-top: 6.5em!important;
  padding-top: calc(6.5em + env(safe-area-inset-top,0))!important;
}
/* ===============================================================  */
/* Toast Popup */
.toast {
  max-inline-size: min(90ch,90vw) !important;
  /* max-inline-size: 50%; */
  text-align: center !important;
}