theme.css

/* Electric cyan color scheme */

:root {--accent: 187, 241, 221;}          /* BBF1DD */
:root {--accent-off: 107, 138, 127;}      /* 6B8A7F */
:root {--dark: 27, 36, 33;}               /* 1B2421 */   /* used for some details where a color too dark or too light wouldn't be ideal*/
:root {--darkest: 21, 28, 25;}            /* 151C19 */   /* used for field's bg, text color when accent/accent-off becomes the bg color, etc */
:root {--dark-highlight: 64, 83, 76;}     /* 40534C */   /* lighter than dark, used for dark highlights. BG in login page, etc */
:root {--dark-apparent: 32, 41, 37;}      /* 202925 */   /* Only used in mobile layout. It is the color of the gradient over the backdrop image. must be its own value bc the color of the background color is the result of overlays. so just use a color picker on the background color in settings and put the value here */

:root {--white: 243, 242, 243;}           /* F3F2F3 */   /* used for the BG of the play button */
:root {--white-off: 207, 221, 233;}       /* CFDDE9 */   /* used for the BG of the AppleTV-esque bar */

:root {--jade-green: 0, 172, 111;}        /* 00AC6F */   /* used for watched check */
:root {--honey-yellow: 255, 194, 85;}     /* FFC255 */   /* used for the rating star color */
:root {--cherry-red: 212, 51, 83;}        /* D43353 */   /* used for the shutdown button */

/* some colors are hardcoded. search for "hardcoded" to find most of them */

:root {--rounding: 12px;}
:root {--rounding-alt: 9px;}
:root {--rounding-large: 24px;}
:root {--rounding-circle: 100px;}

/*Style backdrop*/
.backdropImage {
  filter: blur(12px) saturate(120%) contrast(120%) brightness(40%);
}

.card.show-animation:focus>.cardBox {
  -webkit-transform:scale(1.1);
  transform:scale(1.1);
}

/* JF Font */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap'); body, h1, h2, h3, h4 {
  font-family: 'Quicksand', sans-serif;
}


/*  ###### Desktop Layout ##### */


.layout-desktop .detailLogo {
  left: 5%;
  background-position: left;
}

.detailLogo {
	height: 16vh;
	position: absolute;
	right: 25vw;
	top: 10vh;
	width: 34em;
}

.layout-desktop .itemBackdrop {
  background-attachment: scroll;
  background-position: center;
  background-image: none !important;
  background-size: cover;
  height: 100vh;
  position: relative;
}

.layout-desktop .detailPageWrapperContainer {
  margin-top: -71vh;
  /* inicial: 73 */
}

.layout-desktop .detailImageContainer .card,
.layout-desktop .itemTags {
  display: none;
}

.detailsGroupItem.writersGroup,
.detailsGroupItem.studiosGroup {
  display: none;
}

.layout-desktop .detailPagePrimaryContainer,
.layout-desktop .detailPageContent {
  padding-left: 5%;
}

.layout-desktop .detailPagePrimaryContent {
  width: 45%;
}

.layout-desktop .detailPagePrimaryContainer {
  display: inline-table;
  z-index: 2;
  left: 5%;
}

.layout-desktop .detailPageSecondaryContainer {
  margin: 0 0 0em 0 !important;
  padding-bottom: 0em !important;
}

.layout-desktop .itemDetailsGroup {
  margin-top: 0;
  padding-bottom: 0vh !important;
}

.layout-desktop a.overview-expand.emby-button {
  margin: none;
  padding: none;
}


.layout-desktop .itemName.originalTitle {
  display: none;
}

.layout-desktop .itemName,
.layout-mobile .itemName {
  font-weight: normal;
}

.infoWrapper {
  margin-bottom: 3vh;
}

/* hides trailes tab */
button.emby-tab-button:nth-child(3) {
  display: none;
}

/* Hides track selection box */

.trackSelections {
    display: none;
}

/* header transparent */

.skinHeader.semiTransparent {
    background-color: transparent;
}

.skinHeader-withBackground {
    background-color: transparent;
}

/* Prominent play button */

.layout-desktop .btnPlay {
    background-color: rgb(var(--white));
    color: rgb(var(--darkest)) !important;
    margin-right: 3vw !important;
    border-radius: 14px !important;
}

.layout-desktop .btnPlay:hover {
  background-color: rgba(var(--accent));
  color: rgb(var(--darkest)) !important;
}

.layout-desktop .mainAnimatedPages .paging {
  margin-right: 1em !important;
}

.layout-desktop .detailPagePrimaryContainer .mainDetailButtons .btnPlay::after {
  content: attr(title);
  margin: 1px 11px 0 2px;
  color: rgba(var(--darkest));
} 

.layout-desktop .detailPagePrimaryContainer .mainDetailButtons {
  margin: 0em 0;
} 

.layout-desktop div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
	margin: 0;
	padding-bottom: .2em;
	padding-top: 1em;
}

.layout-desktop .material-icons.detailButton-icon.play_arrow {
  color: rgba(var(--darkest));
}

.layout-desktop .btnPlay.detailButton {
  flex-direction: row;
}

.layout-desktop .listViewUserDataButtons {
  display: none;
}

/* Hide shuffle and replay buttons in media page */

.btnShuffle, .btnReplay {
  display: none;
}

/* change Rating star, color */
.starIcon {
    color: rgba(var(--honey-yellow), 0.8);
}


/* Resize cast, scenes and similar movies */

.layout-desktop #castContent .card.overflowPortraitCard {
font-size:95%!important;
width: 13.6em !important;
}

.layout-tv #castContent .card.overflowPortraitCard {
    font-size: 90%!important;
    width: 13em !important;
    margin-left: -1.6vw !important;
    height: 30vh;
}

.layout-desktop #similarCollapsible .card.overflowPortraitCard{
  width: 14.6em !important;
}

.layout-desktop #scenesContent .card.itemAction.chapterCard{
  width: 29.1em !important;
}


/* scene chapters rounded overlay  */
.chapterCard .innerCardFooter {
  background: rgba(var(--dark), 0.5);
  color: rgba(var(--accent), 0.9);
  backdrop-filter: blur(5px);
	width: 50%;
	margin: 0 auto;
	position: absolute;
	bottom: 7px;
	left: 7px;
	padding: 1px;
	border-radius: 5.5px !important;
}

/* Increase title font size */
.detailPagePrimaryContainer {
    font-size: 115% !important;
}

/* increases font size of "Show more" button */
a.overview-expand.emby-button {
	font-size: 110%;
}

/* Add padding to description*/
.layout-desktop .detailSectionContent {
 /*   margin-top: 1.25vw !important; */
    padding: 0vw 0vw 0.25vw 1vw !important;
}

/* makes description and tagline bold */
.detailSectionContent .tagline {
  font-weight: bold;
  font-size: 125% !important;
  margin-bottom: 0.3vh;
}

.detailSectionContent .detail-clamp-text, .detailSectionContent .overview {
  font-weight: bold;
  font-size: 125% !important;
  margin-top: 0.4em;
}

/* hide imdb, tmdb trakt links */
.itemExternalLinks {
  display: none;
}

/* Rounded left drawer buttons */
.navMenuOption,
.navMenuOption:hover,
.navMenuOption-selected {
    border-radius: var(--rounding-alt) !important;
    width: 85% !important;
    margin: auto !important;
    text-align: center !important;
    height: 45px !important;
    margin-top: 4px !important; 
    margin-bottom: 4px !important; 
}
.navMenuOption,
.navMenuOption-selected {
    width: 86% !important;
}

.navMenuOption:hover {
    width: 89% !important;
}

.navMenuOption:hover:not(.navMenuOption-selected) {
    backdrop-filter: blur(4px);
    background-color: rgba(var(--accent), 0.85);
    color: rgba(var(--darkest));
}

/* Selected Custom button color */ 
.navMenuOption-selected {
    background: rgba(var(--accent), 0.7) !important;
    color: rgba(var(--darkest)) !important;
    backdrop-filter: blur(50px) !important;
}


/* change button hover color */
.raised:hover, .fab:hover, a[data-role="button"]:hover {
  background: rgba(var(--accent), 0.95) !important;
}

/* hover background in settings */
#myPreferencesMenuPage .listItem:hover {
  color: rgba(var(--darkest)) !important;
  background: rgba(var(--accent),0.8) !important;
}

[dir="ltr"] #myPreferencesMenuPage .listItemIcon {
	margin: 0px 0.25em 0px 0.5em;
}

/* makes Activity and Paths boxes in settings have padding */
.listItem:not(.listItem-button) {
    margin: 0.6em;
    padding-left: 1em;
}

.listItem:hover:not(.listItem-button) {
    transition: 0.2s;
    background: rgba(var(--dark));
    margin: 0.6em;
}

.paperList:not(.listItem-button) {
  padding: 0.6em;
  border-radius: var(--rounding-large);
}

/* Fixes server info padding issue post 10.9.x in Dashboard*/
.serverInfo.paperList {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  padding-left: 1.65em;
}

/* Themes Dashboard sidebar from 10.9.x */
.css-4yt2of {
	background-color: rgb(var(--darkest));
	color: rgb(var(--accent));
}

.css-37qkju {
  color: inherit;
}

.css-54jp7k {
  color: inherit;
}

.css-139vfv2 {
	background-color: rgba(var(--darkest),1);
	color: rgb(var(--white));
	background-image: linear-gradient(rgba(var(--accent), 0.1), rgba(var(--accent), 0.1));
}

#server-subheader,
#devices-subheader, 
#livetv-subheader,
#advanced-subheader {
  color: rgba(var(--accent),0.7);
}

.css-17c09up {
	border-radius: var(--rounding);
	margin: 0.35em;
}

.css-17c09up.Mui-selected {
	background-color: rgba(var(--accent), 1) !important;
	color: rgb(var(--darkest)) !important;
	border-radius: var(--rounding);
	margin: 0.35em;
}

.css-17c09up:hover,
.css-17c09up.Mui-selected:hover {
	background-color: rgba(var(--accent), 0.85) !important;
	color: rgb(var(--darkest)) !important;
	border-radius: var(--rounding);
	margin: 0.35em;
}


.css-1ip8vbj {
	border-radius: var(--rounding);
	margin: 0.35em;
}

.css-1ip8vbj.Mui-selected {
	background-color: rgba(var(--accent), 1);
	color: rgb(var(--darkest));
	border-radius: var(--rounding);
	margin: 0.35em;
}

.css-1ip8vbj:hover,
.css-1ip8vbj.Mui-selected:hover {
	background-color: rgba(var(--accent), 0.85) !important;
	color: rgb(var(--darkest)) !important;
	border-radius: var(--rounding);
	margin: 0.35em;
}

/* adds padding to icons in Settings > Activity */
.listItemIcon:not(.listItemIcon-transparent) {
	margin: 0 0.2em 0 0.1em;
}

/* adds padding to server info in Settings > Dashboard 
#serverName, #versionNumber, #operatingSystem, #architecture {
  padding-left: 1em;
}
*/

/* fixes the above applying rounding to the checkboxlist in settings */
.checkboxList.paperList {
  border-radius: var(--rounding);
}

/* themes header bar in Dashboard added in 10.9.x */
.css-fknfom {
  background-image: linear-gradient(rgba(var(--accent), 0.08), rgba(var(--accent), 0.08));
	color: rgb(var(--accent));
	background-color: rgba(var(--darkest),.8);
	backdrop-filter: blur(7px);
}

.css-nc0a08 {
	min-height: 64px;
}

/* themes Dashboard User menu - 10.9.x */

.css-192q3pc {
	background-color: rgb(var(--accent-off));
	color: rgb(var(--dark));
}

.css-1ilo2kq {
	border-radius: var(--rounding-large);
	background-image: linear-gradient(rgba(var(--accent), 0.08), rgba(var(--accent), 0.08));
	color: rgb(var(--accent));
	background-color: rgba(var(--darkest),.9);
	backdrop-filter: blur(7px);
}

.css-1ilo2kq .css-37qkju {
/*	color: rgb(var(--accent)); */
}

.css-r8u8y9 {
	margin: 16px;
	padding: 0px;
}

.css-122sjhb {
	border-radius: var(--rounding-alt);
	padding: 12px 16px;
}

.css-122sjhb:hover {
	background-color: rgba(var(--accent), 0.75);
	color: rgb(var(--darkest));
}


/* Dashboard Devices > Activity */

.css-195jjve {
	background-color: rgba(var(--accent), 1);
}

.css-1jmiiw3 {
	border-color: rgba(var(--accent),.25);
	border-radius: var(--rounding);
	color: rgb(var(--accent));
}

.css-1jmiiw3 .MuiDataGrid-withBorderColor {
	border-color: rgba(var(--accent),.25);
}

.css-18gtl5v {
	color: inherit;
}

.css-8vq3cg.Mui-selected {
	color: rgb(var(--accent));
	background-color: rgba(var(--accent), 0.2);
}

.css-8vq3cg {
	border-radius: var(--rounding-alt);
	border: 1px solid rgba(var(--accent), 0.12);
	color: rgb(var(--accent));
}

.css-5y4e7x.Mui-selected:hover {
	background-color: rgba(var(--accent), 0.2);
}

.css-5y4e7x.Mui-selected {
	background-color: rgba(var(--accent), 0.4);
}

.css-ntyfco {
	color: rgb(var(--accent));
}

.css-1xiho4e {
	color: rgb(var(--darkest));
	background-color: rgb(var(--cherry-red));
}

.css-6ci2yv {
	color: rgb(var(--accent));
}

.css-8xlzg4 {
	border-radius: var(--rounding-large);
	background-image: linear-gradient(rgba(var(--accent), 0.08), rgba(var(--accent), 0.08));
	color: rgb(var(--accent));
	background-color: rgba(var(--darkest),.9);
	backdrop-filter: blur(7px);
	box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 5px 2px, rgba(0, 0, 0, 0.14) 0px 1px 1px 1px, rgba(0, 0, 0, 0.12) 0px 5px 3px 0px;
}

.css-5n0m2r {
	padding: 0px 0px;
}

.css-xfvph6 {
	color: rgb(var(--accent));
}

/* Dashboard Devices > DLNA */

.css-1fv02xh {
	color: rgb(var(--darkest));
	background-color: rgb(var(--accent));
	border-radius: var(--rounding-alt);
}

.css-77wcaa .MuiAlert-icon {
	color: rgb(var(--accent));
}

.css-77wcaa {
	border-radius: var(--rounding);
	background-color: rgb(var(--darkest));
	color: rgba(var(--accent),.75);
}

.css-1fv02xh:hover {
	background-color: rgba(var(--accent),.75);
}

/* Search bar in Plugins */

#pluginsPage .inputContainer .emby-input {
  width: 50%;
}

#pluginsPage .inputLabel, #pluginsPage .inputLabelUnfocused {
  margin-top: 1em;
  margin-bottom: 1.6em;
  margin-left: 1em;
}

/* Themes missing scheduled tasks entries */
.dashboardDocument .paper-icon-button-light {
	color: rgb(var(--accent-off));
}

.secondary.listItemBodyText > span:nth-child(1) {
  color: rgb(var(--cherry-red)) !important;
}

.secondary.listItemBodyText > div:nth-child(1) > span:nth-child(2) {
  color: rgb(var(--accent-off)) !important;
}

.taskProgressOuter {
	background: rgba(var(--accent),.15);
}

#divRunningTasks > p {
	padding-left: 1em;
}

#divRunningTasks > p:nth-child(odd) > progress:nth-child(2) {
	background-color: rgb(var(--dark-highlight)) !important;
}

#divRunningTasks > p:nth-child(even) > progress:nth-child(2) {
	background-color: rgb(var(--dark-highlight)) !important;
}

/* changes color of user profile  */

.devicesList .cardImage {
	filter: invert();
	opacity: 0.65;
	color: rgb(var(--accent)) !important;
}

/* Inverts color of SessionApp icon, but does't look good agains dark BGs
.sessionNowPlayingInnerContent .sessionAppInfo:not(sessionDeviceName) {
	filter: invert();
	opacity: 0.65;
} */

/* changes color of active device text in settings > dashboard  and adds padding*/
#dashboardPage .sessionNowPlayingInnerContent {
  color: rgb(var(--accent));
  padding: 1em;
}

/* changes color of darken overlay in Activity devices */
.darkenContent {
	background: rgba(var(--darkest),.55);
}

/* progressbar bg was dark gray */
#dashboardPage .backgroundProgress > div {
	background-color: transparent;
	display: none;   /*  this may break something? */
}

/* changes colors of icons inside cards (eg: person icon inside card images without pictures) */
.cardImageIcon {
  color: rgb(var(--dark));
}



/* #### Accentlist #### */

.emby-button.show-focus:focus {
  background: rgba(var(--accent),0.5) !important;
}
.paper-icon-button-light.show-focus:focus {
    color: rgba(var(--accent)) !important;
}

/*Title text buttons*/
button-flat:hover {
    color: rgba(var(--accent)) !important;
}

.raised:hover, 
.fab:hover,
a[data-role="button"]:hover {
  background: rgba(var(--accent),0.5) !important;
}

.subtitleappearance-preview {
  background: linear-gradient(140deg,rgb(var(--accent)),#111) !important;
  border-radius: var(--rounding);
}

.navMenuOption-selected {
  color: rgba(var(--accent));
}
.mdl-slider-background-lower {
  background-color: rgba(var(--accent));
}   

progress::-moz-progress-bar {
  background-color: rgba(var(--accent),0.75);
}
progress::-webkit-progress-value {
  background-color: rgba(var(--accent),0.75);
}
.taskProgressInner {
  background: rgba(var(--accent),0.75) !important;
}

#dashboardPage .playbackProgress > div {
    background-color: rgba(var(--accent), 0.75) !important;
}
#dashboardPage .transcodingProgress > div {
    background-color: rgba(var(--accent), 0.35) !important;
}

.mdl-slider-background-lower {
  background-color: rgb(var(--accent));
}
.mdl-slider::-moz-range-thumb {
  background: rgb(var(--accent));
}
.mdl-slider::-ms-thumb {
  background: rgb(var(--accent));
}
.mdl-slider::-webkit-slider-thumb {
  background: rgb(var(--accent));
}
.iconOsdProgressInner {
  background: rgb(var(--accent));
}

.paper-icon-button-light:hover,
.raised.homeLibraryButton:hover,
.button-flat:hover,
.playstatebutton-icon-played,
.ratingbutton-icon-withrating,
.paper-icon-button-light:hover:not(:disabled),
.emby-tab-button:hover,
.selectLabelFocused,
.inputLabelFocused,
.textareaLabelFocused,
.buttonActive,
.button-link {
  color: rgba(var(--accent)) !important;
}

#itemDetailPage .button-link {color: inherit !important;}


/* rounds hover menu options */
.navMenuOption:hover, .actionSheetMenuItem:hover {
  background-color: rgba(var(--accent),0.75) !important;
	color: rgba(var(--darkest), 1) !important;
	border-radius: var(--rounding) !important;
}
.actionSheetMenuItem:hover .listItemBodyText.secondary {
  color: rgba(var(--darkest), .85);
}

.navMenuOption:hover {
  background: rgba(var(--accent),0.75) !important;
}


./* increases size and changes color of check boxes */

.checkboxOutline {
  border: 0.25em solid;
  top: 4px;
}

.checkboxOutline, .multiSelectCheckboxOutline {
  border-color: rgba(var(--accent)) !important;
}

#chkSubtitle .checkboxOutline {
  border-color: rgba(var(--accent)) !important;
  border: 0.25em solid;
	background: none;
}

.emby-checkbox:checked {
  background-color: rgba(var(--accent)) !important;
  font-size: 120% !important;
}

.mdl-radio__focus-circle {
	background: var(--accent) !important;
}

.mdl-radio__circles svg {
	color: rgba(var(--accent),.7) !important;
}

.mdl-radio__circles:hover svg {
	color: rgba(var(--accent),.8) !important;
}

.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__outer-circle {
	color: rgba(var(--accent),1) !important;
}

.mdl-radio.show-focus .mdl-radio__button:focus+.mdl-radio__circles .mdl-radio__inner-circle {
	color: rgba(var(--accent),1) !important;
}

/* changes color of checkboxes, text areas and selection panels */
.emby-checkbox:checked + span + .checkboxOutline {
	border: 0.01em solid rgba(var(--accent)) !important;
	background-color: rgba(var(--accent)) !important;
}

.upNextDialog-countdownText {
  color: rgba(var(--accent));
}

.mdl-spinner__layer-1 {
  border-color: rgba(var(--accent));
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
  background: rgba(var(--accent), 0.5);
}
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
  background: rgba(var(--accent));
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--accent),0.8) !important;
}
* {
  scrollbar-color: rgba(var(--accent),0.8) #0000 !important;
}



/* #### Rounding #### */



/*Rounded corners on pretty much everything*/

progress {
  border-radius: var(--rounding);
}
progress::-webkit-progress-bar {
  border-radius: var(--rounding);
}
progress::-moz-progress-bar {
  border-radius: var(--rounding);
}
progress::-webkit-progress-value {
  border-radius: var(--rounding);
}
.taskProgressOuter,
.taskProgressInner {
  border-radius: var(--rounding) !important;
}
.formDialogHeader {
  border-top-left-radius: var(--rounding);
  border-top-right-radius: var(--rounding);
}
.formDialogFooter {
  border-bottom-left-radius: var(--rounding);
  border-bottom-right-radius: var(--rounding);
}

/* rounds and add a dark blur to media cover/thumbs on hover */
.cardOverlayContainer {
	border-radius: var(--rounding) !important;
	background: rgba(var(--accent-off),.42);
}

.missingIndicator, 
.unairedIndicator,
.detailTable,
.primaryImageWrapper > img,
.toast,
.cardContent,
.sessionNowPlayingInnerContent, 
.listItem,
.listItem:hover, 
.cardImage,
.fab,
.raised,
.itemSelectionPanel,
.cardContent-button, 
.cardContent-shadow, 
.itemDetailImage, 
.cardImageContainer,
.cardPadder,
.listItemImage,
.listItemButton,
.headerButton,
.innerCardFooter,
.blurhash-canvas,
.dialog,
.countIndicator,
.playedIndicator,
.listItemIcon,
.listItem-border,
.button-flat,
.visualCardBox,
.emby-select-withcolor,
.chapterThumbTextContainer,
.chapterThumbContainer,
.chapterThumb,
.emby-input, 
.emby-textarea, 
.emby-select-withcolor,
.nowPlayingPageImage,
.upNextDialog-poster-img,
.upNextContainer {
  border-radius: var(--rounding) !important;
}


/* Makes check boxes circular */
.checkboxOutline, .multiSelectCheckboxOutline {
  border-radius: var(--rounding-circle) !important;
}

fieldset {
  border-radius: var(--rounding);
}
.osdPoster img {
  border-radius: var(--rounding); border: none;
}
.mdl-slider::-moz-range-thumb {
  border-radius: var(--rounding);
}
.mdl-slider::-ms-thumb {
  border-radius: var(--rounding);
}
.mdl-slider::-webkit-slider-thumb {
  border-radius: var(--rounding);
}

div[data-role="controlgroup"] a[data-role="button"]:first-child {
	border-bottom-left-radius: var(--rounding);
	border-top-left-radius: var(--rounding);
}
div[data-role="controlgroup"] a[data-role="button"]:last-child {
	border-bottom-right-radius: var(--rounding);
	border-top-right-radius: var(--rounding);
}
#dashboardPage .cardContent, #dashboardPage .sessionNowPlayingInnerContent {
    border-radius: var(--rounding) var(--rounding) 0 0 !important;
}
#divVirtualFolders .cardImageContainer, #divVirtualFolders .cardContent {
    border-radius: var(--rounding) var(--rounding) 0 0 !important;
}
#userProfilesPage .cardImage, #userProfilesPage .cardContent {
    border-radius: var(--rounding) var(--rounding) 0 0 !important;
}


/* Fix rounding issue on media poster in media page */
.cardBox:not(.visualCardBox) .cardPadder,
.cardContent-shadow {
  box-shadow:0 .0725em .29em 0 rgba(0,0,0,0)
}


/* indicator corner */



/*Card indicators style corner*/

.cardIndicators,
.listItemIndicators {
  right: 0;
  top: 0;
}
.innerCardFooter {
/*  border-radius: 0px var(--rounding) !important; */  /* conflicts with my edits of the progress bar */
/*  box-shadow: 1px 0px 5px 2px rgba(var(--dark),0.5);  */
}
.countIndicator, .playedIndicator {
  border-radius: 0px var(--rounding) !important;
  box-shadow: -1px 1px 5px 1px rgba(var(--darkest),.5);
}
.countIndicator {
  background: rgba(var(--accent),1);
}
.playedIndicator {
  background: rgba(var(--darkest), 1)
}

.mediaSourceIndicator {
  left: 0;
  top: 0;
}
.mediaSourceIndicator {
  border-radius: var(--rounding) 0px !important;
  box-shadow: -1px 1px 5px 1px rgba(var(--darkest),.5);
  background: rgba(0,0,0,0.5)
}

.countIndicator, .playedIndicator {
  background: rgba(var(--accent), 1) !important;
  color: rgba(var(--darkest), 1) !important;
  font-weight: bold;
}

/* fix for changes in 10.9.x */
[dir="ltr"] .cardIndicators {
  right: 0em;
}



/* colorful */


/*Colors for Title ribbon */
.layout-desktop .detailRibbon {
    background: rgba(0, 0, 0, 0);
}
/* Item backdrop overlay color */
.itemBackdrop::after {
  background: rgba(0,0,0,0) !important;
}

/*Accenting*/

.preload {
    background-color: black;
}
.backgroundContainer {
    background-color: rgba(var(--accent),0.17) !important;
}
.formDialogHeader,
.formDialogFooter {
    background-color: rgba(var(--accent),0.15) !important;
    backdrop-filter: blur(25px);
}
/*Fix footers/headers displaying on small pop-ups*/
.formDialogFooter-clear,
.formDialogHeader-clear,
.innerCardFooterClear {
    background-color: transparent !important;
}

.button-flat:hover {
	background: rgba(var(--accent),0.25);
}

.dashboardSection h3 {
	margin-bottom: 0.5em;
	margin-top: .5em;
	margin-left: .6em;
	margin-right: .6em;
}

.paper-icon-button-light:hover, .paper-icon-button-light:hover:not(:disabled) {
  background-color: rgba(var(--accent),0.25) !important;
}

.cardOverlayFab-primary:hover {
	-webkit-transform: scale(1.4);
	transform: scale(1.4);
	transition: .2s;
}

.navMenuOption-selected {
  color: var(--dark);
}

.subtitleappearance-preview {
  background: linear-gradient(140deg,rgba(var(--accent)),#111) !important;
}
.navMenuOption-selected, .selectionCommandsPanel {
    background: rgba(var(--accent), 0.8) !important;
}
.raised,
.fab,
a[data-role="button"] {
  background: rgba(var(--accent), 0.8) !important;
	transition: all 0.2s !important;
}

/*Various box-shadows, might be related to glowstyle*/
.cardBox:not(.visualCardBox) .cardPadder, .cardContent-shadow {
    box-shadow: none !important;
}
/* glow around text on AppleTV-esque bar */
body, h1, h2, h3, h4, .textActionButton, .emby-button-foreground  {
  text-shadow: 0px 0px 4px rgba(0,0,0,.6) !important;
}
.blurhashed {
	box-shadow: 1px 1px 4px 0px rgba(var(--darkest),.3) !important;
}

/*Dash and general UI styling*/
.paperList, .visualCardBox {
    background-color: rgba(var(--darkest), 1);
}
.navMenuOption-selected {
    color: var(--dark);
}
progress {
    background: rgba(0, 0, 0, 0.5) !important;
}

/*Colors for loading spinner, placeholders, scroll bars*/
.mdl-spinner__layer-1 {border-color: rgba(var(--accent), 1);}
.mdl-spinner__layer-2 {border-color: rgba(var(--accent), .8);}
.mdl-spinner__layer-3 {border-color: rgba(var(--accent), .6);}
.mdl-spinner__layer-4 {border-color: rgba(var(--accent), .5);}


/* changes colors of Active devices cards in settings > dashboard */
.defaultCardBackground1 {
	background-color: rgba(var(--dark-highlight), 1);
}
.defaultCardBackground2 {
	background-color: rgba(var(--dark-highlight), 1);
}
.defaultCardBackground3 {
	background-color: rgba(var(--dark-highlight), 1);
}
.defaultCardBackground4 {
	background-color: rgba(var(--dark-highlight), 1);
}
.defaultCardBackground5 {
	background-color: rgba(var(--dark-highlight), 1);
}

/*Syncplay*/
@-webkit-keyframes pulse {
 0% {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),.3)
 }
 70% {
  -webkit-transform:scale(1);
  transform:scale(1);
  color:rgba(var(--accent),0);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 60px rgba(var(--accent),0)
 }
 to {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),0);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 0 rgba(var(--accent),0)
 }
}
@keyframes pulse {
 0% {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),.3)
 }
 70% {
  -webkit-transform:scale(1);
  transform:scale(1);
  color:rgba(var(--accent),0);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 60px rgba(var(--accent),0)
 }
 to {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),0);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 0 rgba(var(--accent),0)
 }
}
@-webkit-keyframes infinite-pulse {
 0% {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),.3)
 }
 70% {
  -webkit-transform:scale(1);
  transform:scale(1);
  color:rgba(var(--accent),.6);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 60px rgba(var(--accent),0)
 }
 to {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),0)
 }
}
@keyframes infinite-pulse {
 0% {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),.3)
 }
 70% {
  -webkit-transform:scale(1);
  transform:scale(1);
  color:rgba(var(--accent),.6);
  background:rgba(var(--accent),0);
  box-shadow:0 0 0 60px rgba(var(--accent),0)
 }
 to {
  -webkit-transform:scale(.95);
  transform:scale(.95);
  color:rgba(var(--accent),.7);
  background:rgba(var(--accent),.3);
  box-shadow:0 0 0 0 rgba(var(--accent),0)
 }
}

/* Syncplay theming*/
.syncPlayIconCircle {
  color: rgba(var(--accent),1) !important;
  text-shadow: none !important;
}

/* Red shutdown button */
#btnShutdown {
    background: rgba(var(--cherry-red)) !important;
    color: rgba(var(--darkest)) !important;
}

/*Remove divider on list items*/
.listItem-border {
    border: 0 !important;
}

/* Green played check icon */
.playstatebutton-icon-played {
  color: rgba(var(--jade-green), 1) !important;
}

/* white dialog Backdrop */

.dialogBackdropOpened {
	opacity: 0.2;
}

.dialogBackdrop {
	background-color: rgb(var(--darkest));
}

.tmla-mask {
	background-color: rgba(249,249,249,0.2);  /* hardcoded */
}




/* floating */




/* Floating progressbar edit - from JellyFlix theme */

.itemProgressBar {
  backdrop-filter: blur(4px);
  background: rgba(var(--white-off),.35) !important;
  height: 10px;
  border-radius: 30px;
}

.layout-mobile .itemProgressBar {
  height: 8px;
}

/* don't apply the blur inside Settings > Dashboard as it broke things for some reason */
#dashboardPage .itemProgressBar {
  backdrop-filter: none;
}



.itemProgressBarForeground {
  background: rgb(var(--accent));
  border-radius: var(--rounding-circle);

}

 .innerCardFooter {
	width: calc(100% - 24px);
	margin: 0 auto;
	position: absolute;
	bottom: 12px;
}




/* glossy */




@supports (backdrop-filter: blur(15px)) {
  .dialog,
  .mainDrawer,
  .toast,
  .appfooter {
    backdrop-filter: blur(15px);
    background-color: rgba(var(--darkest), 0.75) !important;
  }
  #itemDetailPage .itemProgressBar,
  #dashboardPage .backgroundProgress > div {
    backdrop-filter: blur(4px);
  }
  @media all and (max-width: 70em){
    .cardOverlayButtonIcon {
     /* background-color: rgba(var(--darkest), 0.35) !important; */
    }
    .cardOverlayButtonIcon {
    /* backdrop-filter: blur(4px); */
    }
  }
  .indicator {
    backdrop-filter: blur(2px);
  }
  
  .paper-icon-button-light:hover:not(.headerButtonRight) {
    backdrop-filter: blur(4px);
  }
}




/* Episode List */




/*Size episode preview images in a normal way*/
.listItemImage.listItemImage-large.itemAction.lazy {
  transition: filter 0.2s
}
.listItemImageButton-icon {
  padding: 0;
}

.listItemImageButton {
  margin: auto; 
  font-size: 1.6em !important;
}

/* CSS rules for screen sizes larger than 110em */
@media all and (min-width: 105.01em){
  .listItemImage.listItemImage-large.itemAction.lazy {
    height: 190px;
    width: 338px;
  }
  .listItem-content {
    height: 200px;
  }
}
/* CSS rules for screen sizes between 80em and 110em */
@media all and (min-width: 80em) and (max-width: 105em) {
  .listItemImage.listItemImage-large.itemAction.lazy {
    height: 127px;
    width: 225px;
  }
  .listItem-content {
    height: 133px;
  }
  .layout-desktop .sectionTabs {
    width: auto !important;
    align-self: center !important;
    margin-top: -4em;
  }
}

/* CSS rules for screen sizes less than 80em */
@media all and (max-width: 79.99em){
  .listItemImage.listItemImage-large.itemAction.lazy {
    height: 80px;
    width: 106px;
    }
  .listItem-content {
    height: 85px;
    }
  .secondary.listItem-overview.listItemBodyText {
    height: 2.5em; 
    margin: 0;
  }
  .layout-desktop .sectionTabs {
    width: auto !important;
    align-self: center !important;
    margin-top: -4em;
  }
}

.missingIndicator, .unairedIndicator {
    background: #AAAAAA;   /* hardcoded */
    padding: .3em .6em;
    color: rgba(var(--darkest));
}


/* #### login frame #### */




/*Narrow the login form, size according to display size (bigger on mobile)*/
#loginPage .readOnlyContent,
#loginPage form {
  max-width: 22em;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
  margin-top: 8em
}

/*Hide "manual" and "forgot" buttons}*/
#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
  display: none
}

#loginPage .padded-left.padded-right.padded-bottom-page {
    margin-left: auto;
    margin-right: auto;
    background: rgba(var(--dark-highlight),.33);
    backdrop-filter: blur(1px);
    width: 24em;
    border-radius: var(--rounding-large);
}
#loginPage .squareCard {
    width: 33%;
}
#loginPage form {
    padding-top: 4em;
}

#loginPage .sectionTitle{
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 1.2em !important;
}
#loginPage {
  background: url(https://i.imgur.com/NzrSCuv.png) !important;   /* previously https://i.imgur.com/9vL4iNf.png https://i.imgur.com/T4zHTDI.jpeg */
  background-size: cover !important;
}

#loginPage .pageTitleWithDefaultLogo {
  display: none !important;
}

/* margin to Jellyfin logo */
.pageTitle {
	margin: 0 0 0 .15em;
}

/* #### Media Player #### */


/* hide volume bar in media player */

.osdVolumeSliderContainer {
	-webkit-flex-grow: 1;
	flex-grow: 1;
	width: 9em;
	display: none;
}

.osdVolumeSlider.mdl-slider.mdl-js-slider.mdl-slider-hoverthumb {
  display: none;
}

.volumeButtons {
	display: flex;
	margin: 0 1em 0 .29em;
	margin-right: 0px;
}


/* Hide extra buttons in media player */


.btnPreviousChapter, .btnNextChapter, .btnRewind, .btnFastForward, .btnPreviousTrack, .buttons.focuscontainer-x .btnUserRating {
  display: none;
}


/* increase player header and bottom icon sizes */

.osdHeader .headerTop {
	max-height: 3em;
	pointer-events: all;
	font-size: 125%;
}

.videoOsdBottom .buttons {
  flex-wrap:wrap;
  padding:.25em 0 0;
  font-size: 125%;
}

/* increase header bar icon sizes */
.layout-desktop .headerTop {
 font-size: 125%;
}

/* increases sidebar icon sizes to match above */
.layout-desktop .drawerContent {
	font-size: 110%;
}

.mainDrawer-scrollContainer {
	font-size: 110%;
	margin-top: .35em;
}


/* turns slider bubble into same thickness as play bar*/
.mdl-slider::-moz-range-thumb {
  border-radius:50%;
  height:0.8em;
  -moz-transition:.2s;
  transition:.2s;
  width:0.8em
}


.mdl-slider::-webkit-slider-thumb {
  -webkit-appearance:none;
  border-radius:50%;
  height:0.8em;
  pointer-events:none;
  -webkit-transition:.2s;
  transition:.2s;
  width:0.8em
}


/* turns slider bubble into white rectangle on hover */
.mdl-slider-hoverthumb:hover::-moz-range-thumb {
  transform:scale(0.75, 2.3);
  border-radius:70%/17%;
  background-color:white;
}
.mdl-slider.show-focus:focus::-moz-range-thumb {
  transform:scale(0.75, 2.3);
  border-radius:70%/17%;
  background-color:white;
}


.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
  -webkit-transform:scale(0.7, 2.3);
  transform:scale(0.75, 2.3);
  border-radius:70%/17%;
  background-color:white;
}
.mdl-slider.show-focus:focus::-webkit-slider-thumb {
  -webkit-transform:scale(0.75, 2.3);
  transform:scale(0.7, 2.3);
  border-radius:70%/17%;
  background-color:white;
}


/* round and blur progress bar */
.mdl-slider-background-flex {
  background:hsla(0,0%,100%,.3);
  border:0;
  display:-webkit-flex;
  display:flex;
  height:.8em;
  left:0;
  margin-top:-.39em;
  overflow:hidden;
  padding:0;
  top:50%;
  width:100%;
  border-radius: 12px !important;
  backdrop-filter: blur(9px) !important
}

/* hides playbar markers */
.sliderMarker.watched {
	background-color: transparent;
}

.sliderMarker.unwatched {
/*	background-color: rgba(var(--white-off),.35) !important; */
	background-color: transparent;  /* setting it to transparent bc it keeps flickering, even on the default JF theme */
}

/* round playbar buffer */

.mdl-slider-background-upper {
  background:#666;
  background:hsla(0,0%,100%,.4);
  bottom:0;
  left:0;
  position:absolute;
  top:0;
  width:0;
  border-radius: 12px
}








/* dialogs */
.dialog, .mainDrawer, .appfooter {
	backdrop-filter: blur(21px);
	background-color: rgba(var(--dark), 0.75) !important;
	box-shadow: 0 0 1.9vh #000;
}
.dialog, .appfooter {
	border-radius: var(--rounding-large) !important;
}
.mainDrawer {
	border-top-right-radius: var(--rounding-large) !important;
	border-bottom-right-radius: var(--rounding-large) !important;
}

.toast {
  backdrop-filter: blur(21px);
	background-color: rgba(var(--accent-off), 0.75) !important;
	color: rgba(var(--darkest), 1) !important;
	text-shadow: 0px 0px 4px rgba(0,0,0,0) !important;
	font-weight: bold;
  box-shadow: 0 0 1.9vh #000;
}

.actionSheetContent {
	padding: 0.4em 0 !important;
	margin-left: 0.75em !important;
	margin-right: 0.75em !important;
	margin-top: 0.35em !important;
	margin-bottom: 0.35em !important;
}

.navMenuOption-selected, .selectionCommandsPanel {
	color: rgba(var(--darkest), 1) !important;
	background-color: rgba(var(--accent), 0.55) !important;
	backdrop-filter: blur(4px);
}

.raised, .fab, a[data-role="button"] {
  background: rgba(var(--accent), 0.75) !important;
  color: rgba(var(--darkest), 1) !important;
}

div[data-role="controlgroup"] a.ui-btn-active {
	background: rgb(var(--accent)) !important;
	color: rgba(var(--darkest), 1) !important;
}

/* changes the color of icons in various places such as settings > activity, settings> notifications, subtitle results, etc*/
#peopleList .material-icons.listItemIcon.person, 
#listGenres .material-icons.listItemIcon.live_tv,
#listStudios .material-icons.listItemIcon.live_tv,
#listTags .material-icons.listItemIcon.live_tv,
#repositories .listItemIcon:not(.listItemIcon-transparent),
#dlnaProfilesPage .listItemIcon:not(.listItemIcon-transparent),
#homeScreenPreferencesPage .material-icons.listItemIcon.folder_open,
.subtitleList .material-icons.listItemIcon.closed_caption,
.subtitleResults .material-icons.listItemIcon.closed_caption {
  background: rgba(var(--accent-off), 1) !important;
  color: rgba(var(--darkest), 1) !important;
}

/* fixes alignment of download and delete icons in edit subtitle screen */
.subtitleList, .btnDelete.listItemButton.paper-icon-button-light,
.subtitleResults .btnDownload.listItemButton.paper-icon-button-light {
  margin-right: 1em;
}

/* moves dialogs up 
.dialogContainer {
	top: -110px;
}*/


/* rounds and pads episode list */

.layout-desktop #childrenContent .listItem {
	padding-left: 1em !important;
	padding-right: 0.5em !important;
	padding-top: 0.7em !important;
	padding-bottom: 0.7em !important;
	border-radius: 28px !important;
}

#childrenContent .listItem:hover:not(.listItem-button) {
	background-color: rgba(var(--darkest),0.6);
	backdrop-filter: blur(6px);
}

/* collapsable menu */
.collapseContent {
	background-color: rgba(var(--darkest),0.96);
	border-radius: var(--rounding-alt);
	margin-top: 9px;
}

.mdl-radio__circles {
	border-radius: 50%;
	height: 1.78em;
	margin-right: 1.54em;
	width: 1.78em;
}



/*Improve some menu alignments*/
.navMenuOptionText {
    margin-top: 0;
}
.formDialogHeaderTitle {
  margin-left: 1em;
}
.formDialogContent {
  margin-bottom: 1.1em;  /* previously 6.2 */
}
.dialogContentInner {
  padding: .5em 1em 1em;
  padding-right: 1em;
  padding-left: 1em;
}
.listItem-indexnumberleft {
  margin: 1em;
}

/* adds padding to entries in Settings > Dashboard: Activity, Settings > Activity, etc. 
.listItem:not(.listItem-button.actionSheetMenuItem.emby-button) {
  padding-left: 1em;
}
*/

/* Removes above padding from Settings > Dashboard: Path */
div.dashboardSection:nth-child(3) > div:nth-child(2) .listItem {
  padding-left: 0em;
}


.activeSession .backdropCard .backdropCard-scalable {
    padding: 0.8em;
}

/* makes progressbar in the Settings > Dashboard nicer */
#dashboardPage .activeSession .backgroundProgress, .activeSession .playbackProgress, .activeSession .transcodingProgress {
	bottom: 0.6em;
	height: 8px;
	left: 0.7em;
	position: absolute;
	right: 0.7em;
	width: 94%;
}

#dashboardPage .itemProgressBar {
  background: rgba(var(--dark-highlight),.35) !important;
}

.dialogContainer .focuscontainer {
	border-radius: var(--rounding-large) !important;
}

/* adds top padding to right click dialogs 
.dialogContainer .focuscontainer.actionsheet-not-fullscreen.actionSheet.centeredDialog {
	padding-top: 5.5px;
}
*/

.formDialogContent.smoothScrollY {
	padding-bottom: 3em;
	padding-top: 2em;
}

/* fixes for right click menus post 10.9.x */
[dir="ltr"] .listItem {
	padding: 0.55em .45em .55em .45em;
	text-align: left;
}

/* recolors icons in Settings > Activities, Notifications and Scheduled Tasks*/
#dashboardPage .listItemIcon, #serverActivityPage .listItemIcon {
  background-color: rgba(var(--accent-off)) !important;
  color: rgba(var(--darkest)) !important;
}

.listItemIcon.material-icons.notifications_active {
  background-color: rgba(var(--accent-off)) !important;
  color: rgba(var(--darkest)) !important;
}
.notifications_off {
  background-color: rgba(var(--accent-off),.44) !important;
  color: rgba(var(--darkest)) !important;
}

.material-icons.listItemIcon.schedule {
  background-color: rgba(var(--accent-off)) !important;
  color: rgba(var(--darkest)) !important;
}

#dashboardPage .notification_important {
  background-color: rgba(var(--cherry-red),.75) !important;
  color: rgba(var(--darkest)) !important;
}




/* fields no border */



/*No borders, background highlights*/
.infoBanner {
    background: rgba(var(--accent), 0.15) !important;
}
fieldset {
    border: 1px solid rgba(var(--accent), 0.3);
}

.emby-input,
.emby-textarea,
.emby-select-withcolor {
  border: none !important;
  background-color: rgba(var(--darkest)); 
}

.checkboxOutline {
  border: 0.22em solid rgba(var(--accent-off)) !important;

}

#itemDetailPage .emby-select-withcolor {
  background: rgba(0, 0, 0, 0.2);
}

/*Change look of in-focus fields: text areas and selection panels */
 .itemSelectionPanel {
	border: 0.01em solid rgba(var(--accent)) !important;
	background-color: rgba(var(--accent),.2) !important;
	padding: 0.5em;
}

.itemSelectionCount {
  color: rgba(var(--darkest)) !important;
}

.emby-textarea {
	background-color: rgba(var(--darkest)) !important;
	color: rgba(var(--accent)) !important;
}

.emby-textarea:focus {
	border-color: rgba(var(--accent),.9) !important;
	background-color: rgba(var(--darkest)) !important;
}

.emby-input:focus {
	border-color: rgba(var(--accent),.9) !important;
	background-color: rgba(var(--darkest)) !important;
}


.emby-select-withcolor:focus {
	border-color: rgba(var(--accent),.9) !important;
	background-color: rgba(var(--darkest)) !important;
}

.emby-select-withcolor {
	background-color: rgba(var(--darkest)) !important;
	color: white;
}

.emby-input {
  background-color: rgba(var(--darkest)) !important;
	color: white;
}

.checkboxIcon {
	color: rgba(var(--dark)) !important;
	font-size: 1.4em;
	margin-right: 1px;
	margin-top: 2px;
}

/* increases size of check boxes */
.checkboxList > .emby-checkbox-label {
	display: flex;
	margin: 0.5em 0.5em 0.4em 0.4em;
	font-size: 120%;
}

.emby-checkbox-label {
  padding: 0 0 0 3em;
}

/* padding to fields */

.emby-input,
.emby-textarea,
.emby-select {
   
  padding: calc(0.8em - 4.5px) !important;
}

/* fixes audio/subtitle selector arrow in media page */
.trackSelections .selectContainer .selectArrowContainer .selectArrow {
	margin-top: 4px;
}






/* Removes hover bg from right headerbar */

.headerRight .paper-icon-button-light:hover, .headerRight .paper-icon-button-light:hover:not(:disabled) {
      background-color: transparent !important;
}

.headerRight .paper-icon-button-light:focus, .headerRight .paper-icon-button-light:focus:not(:disabled) {
      background-color: transparent !important;
}


/* Mobile fixes */
.layout-mobile .headroom--unpinned {
    transform: translateY(-50%);
}


/* AppleTV-esque bar */


/* Transparent header bar */
.skinHeader {
    background-color: transparent !important;
}
.layout-desktop .skinHeader {
    padding-top: 1.5em !important;
    padding-bottom: 1.5em !important;
}

/* Button height */
.headerRight,
.layout-desktop .emby-tab-button {
    height: 45px !important;
}

/* fixes issue with text no being centered */
.emby-tab-button {
  display: inline-flex;
}

/* Rounded header buttons */

.headerTabs,
.headerRight {
    background-color:rgba(var(--white-off), 0.35) !important;
    border-radius: var(--rounding-circle) !important;
    color: rgba(var(--darkest)) !important;
    backdrop-filter: blur(50px) !important;
}

.homeLibraryText, .emby-button-foreground {
	color: rgb(var(--darkest));
}

#indexPage .homeLibraryButton, .emby-tab-button {
	background: transparent !important;
	min-width: 0 !important;
	max-width: 50vw !important;
  width: fit-content !important;
}

.layout-desktop .itemsContainer, .layout-desktop .emby-tabs-slider {
	margin: 0 !important;
}

.layout-desktop .homeLibraryButton, .layout-desktop .emby-tab-button {
	margin: .5em !important;
}

.raised:hover .homeLibraryText, .emby-tab-button:hover .emby-button-foreground {
	color: rgb(var(--darkest)) !important;
	transition: 100ms;
}

#indexPage .homeLibraryButton:hover, .emby-tab-button:hover {
	background-color: rgba(var(--accent),.5) !important;
	border-radius: var(--rounding-circle) !important;
}

.raised.homeLibraryButton.emby-button:hover, .emby-tab-button:hover, .homeLibraryButton:focus {
	outline: none !important;
	box-shadow: none !important;
}

.emby-tab-button:hover::after {
  background: unset !important;
}

.emby-tab-button-active {
  background-color: rgb(var(--accent)) !important;
  border-radius: var(--rounding-circle) !important;
}




.cardOverlayButtonIcon {
  color: rgb(var(--accent));
}

.cardOverlayFab-primary {
  background-color: #00000000;
}
.cardOverlayContainer > .cardOverlayFab-primary {
	background-color: transparent;
}


.cardOverlayContainer .paper-icon-button-light:hover,
.cardOverlayContainer .paper-icon-button-light:hover:not(:disabled) {
  color: rgba(var(--dark)) !important;
}

/* hides card overlay buttons (watched, favorites, etc) */
.cardOverlayButton-br {
	display: none;
}

.adminDrawerLogo img { content: url(https://i.imgur.com/wHaGTm4.png) !important; } imgLogoIcon { content: url(https://i.imgur.com/wHaGTm4.png) !important; } .pageTitleWithLogo { background-image: url(https://i.imgur.com/wHaGTm4.png) !important; } /* dark variant https://i.imgur.com/QXXfCCs.png */


/* Support for Jellyscrub plugin */

.chapterThumbTextContainer {
    background: rgba(var(--dark),0.5) !important;
}

/* fixes issue with Movies > Genres hover boxes */
.sectionTitleTextButton > .sectionTitle {
	margin-bottom: .35em;
	margin-top: .35em;
	margin-left: .6em;
	margin-right: .6em;
}

.sectionTitleTextButton > .material-icons.chevron_right {
  display: none;
}

/* centers section title button's text in home page caused by the above */
.homePage .sectionTitleTextButton {
  left: -.6em;
}

/* Playback info tweaks */
.playerStats {
	background: rgba(var(--dark),0.75);
	border-radius: var(--rounding);
	color: rgba(var(--accent),1);
	backdrop-filter: blur(7px);
	top: 8em;
}

.playerStats-stat-value {
	color: rgba(var(--accent),.65);
}

.playerStats-closeButton {
	color: rgb(var(--accent));
	position: absolute;
	right: .25em;
	top: 0.4em;
	z-index: 1;
}

.playerStats-stats {
	padding: 1.8em 2.7em 2.6em 2.4em;
	font-size: 110%;
}


#childrenCollapsible .padded-right {
	padding-right: 38%;
}

/* Moves TV shows Up Next to bottom right */
.layout-desktop .nextUpSection {
	border-radius: 34px;
	margin-left: 66%;
	margin-right: -30vw;
	margin-top: 15.5vh;
	margin-bottom: 1vh;
	padding-left: 2.5em;
	margin-right: 2.5em;
	background-color: rgba(var(--darkest),.8);
	padding-top: .3em;
	backdrop-filter: blur(4px);
	position: absolute;
	/* margin-left: 1.5vw; */
}

.cardBox-bottompadded {
	margin-bottom: 1.5em !important;
}

.cardText.cardTextCentered.cardText-first .itemAction.textActionButton{
	margin-top: 0.8em;
}

.layout-desktop .nextUpSection .card.overflowBackdropCard.card-hoverable.card-withuserdata {
	right: 0.7em;
	position: relative;
}

.layout-desktop .nextUpSection .cardBox-bottompadded {
	margin-bottom: 1.3em !important;
}




/*#####################################################################################################################
            LAYOUT MOBILE

######################################################################################################################*/

.layout-mobile .headerHomeButton,
/* .layout-mobile .headerCastButton, */
.layout-mobile .headerSyncButton {
  display: none;
}

.layout-mobile .mainDrawerButton {
  display: block !important;
}

.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
  background: none;
  background-color: rgba(10, 80, 160, 0.75);
}

.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
  background: none;
  background-color: rgba(190, 80, 10, 0);
}

.layout-mobile .emby-button-foreground {
  top: 0px !important;
}


.layout-mobile .sectionTabs {
	padding-left: 0.4em !important;
	padding-right: 0.4em !important;
	width: auto;
	align-self: center;
}

.pageTitle {
  margin-top: auto;
  margin-bottom: auto;
}

.layout-mobile .emby-tab-button {
	padding: 0.9em 0.95em;
	margin-top: 0.4em;
	margin-bottom: 0.4em;
}


/* Seccion Peliculas/Series */

.layout-mobile .itemTags,
.layout-mobile .itemName.originalTitle,
.layout-mobile .trackSelections,
.layout-mobile .itemExternalLinks,
.layout-mobile .writersGroup,
.layout-mobile .studiosGroup,
#seriesAirTime {
  display: none;
}

/* Quitamos imagen de poster */
.layout-mobile .detailImageContainer .card,
.layout-mobile .detailImageContainer .card.backdropCard,
.layout-mobile .detailImageContainer .card.portraitCard,
.layout-mobile .detailImageContainer .card.squareCard {
  top: auto;
  display: none !important;
}

.layout-mobile .detailImageContainer .card.portraitCard {
  display: none !important;
}

/* Mostrando Logo y posicionandolo */
.layout-mobile .detailLogo {
  display: block;
  width: 15em;
  left: 5%;
  top: 18vh;
}

/* Mismo color de fondo a franja gris */
.detailRibbon {
  background: rgba(32, 32, 32, 0);  /* hardcoded */
}

/* Sipnosis tamano de 5 lineas */
.detail-clamp-text {
  -webkit-line-clamp: 4;
}


.layout-mobile .infoWrapper {
  padding-left: 0;
  margin-top: 6em;
}

.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .mainDetailButtons,
.layout-mobile .parentName {
  text-align: left;
}

.layout-mobile .itemMiscInfo,
.layout-mobile .itemName,
.layout-mobile .mainDetailButtons,
.layout-mobile .parentName {
  justify-content: left;
  text-align: left;
}


/* moviendo a la Izq Contenedor de botones de pelicula*/
.layout-mobile .mainDetailButtons {
  padding-left: 0;
}

/* arregalndo padding y margin y aumentando tamano de fanart y agregando degradado */
.layout-mobile .itemBackdrop {
  background-size: contain;
  height: 29vh;
  /*30*/

}

/* overlay on top of backdrop in mobile layout */
.layout-mobile .itemBackdrop::before {
  content: '';
  right: 0;
  left: 0;
  bottom: 0;
  height: 29vh;
  position: absolute;
  z-index: -1;
  background-image:linear-gradient(to top, rgba(var(--dark-apparent),1) 9.5%, rgba(var(--dark-apparent),0.6) 12%, rgba(var(--dark-apparent),0) 14%), linear-gradient(to bottom, rgba(var(--dark-apparent),1) 1%, rgba(var(--dark-apparent),0) 7%);
}

.layout-mobile .itemBackdrop {
	background-size: contain;
	margin-top: calc(45px + 0.2em);
	z-index: -1;
	content: '';
}

.layout-mobile .detailPageWrapperContainer {
  top: -5em;
}

.layout-mobile .infoWrapper {
  margin-top: 0;
}

.layout-mobile .detailPageSecondaryContainer {
  margin: 0 0 0em 0;
  padding-top: 0.5em;
}

.layout-mobile .overview-expand {
  padding: 0 1em 0.3em 1em;
}

/* play button */
.layout-mobile .mainDetailButtons {
  margin-top: 1.5em;
}

.layout-mobile .btnPlay {
    background-color: rgb(var(--white));
    color: rgb(var(--darkest)) !important;
    margin-right: 2.7em !important;
    border-radius: 14px !important;
}

.layout-mobile .libraryPage .btnPlay {
    margin-right: 1em !important;
}


.layout-mobile .btnPlay::after {
  content: attr(title);
  margin: 0 10px 0 2px;
}

.layout-mobile .btnPlay.detailButton {
  flex-direction: row;
}

.layout-mobile .mainAnimatedPages .paging {
  margin-right: .5em !important;
}

.layout-mobile .sectionTitleTextButton > .sectionTitle {
	margin-bottom: .35em !important;
	margin-top: -.15em !important;
	margin-left: .6em !important;
	margin-right: .6em !important;
}

.layout-mobile .btnShuffle,
.layout-desktop .btnShuffle {
  display: none;
}

.layout-mobile .material-icons.detailButton-icon.play_arrow {
  color: rgb(var(--darkest)) !important;
}

.layout-mobile .listViewUserDataButtons {
  display: none;
}

.layout-mobile .listItem-content {
  display: block;
}

/* fixes placement of episodes titles */
.layout-mobile .listItem-content .listItemBody {
	left: 110px;
	position: relative;
	bottom: 88px;
	max-width: 64%;
}

.layout-mobile .listItem-bottomoverview {
  font-size: 100%;
  margin-bottom: .1em;
  margin-top: 0.5em;
}


#childrenContent .listItem {
	padding-left: 1em !important;
	padding-right: 1em !important;
	padding-top: 1em !important;
	padding-bottom: 1em !important;
	border-radius: 24px !important;
}

.layout-mobile .listItem-content .listItemImage-large {
  height: 30vw;
  width: 86vw;
}

.layout-mobile .listItem-content .listItemImage-large .listItemImageButton,
.listItemIndicators {
  font-size: 1em !important;
}



.layout-mobile .detailPagePrimaryContent {
  position: relative;
  /* margin-top: 1em; */
}

.layout-mobile .detailPagePrimaryContainer {
	display: block;
  padding: 1.5rem 1.15rem 1rem;
	position: relative;
}

/* Animation of disappearing headerbars in mobile layout */
.layout-mobile .headroom--unpinned {
 transform: translateY(-115%);
 transition: transform 0.3s ease-in-out;
}

.headroom--pinned {
 transition: transform 0.3s ease-in-out;
}

.listItemImageButton {
  color: rgb(var(--accent));
  background: rgba(0, 0, 0, 0);
}

.layout-mobile .headerRight {
	height: 40px !important;
}

/* adds padding to custom css box */
#txtCustomCss {
  padding: 1em !important;
}

/* changes color of library scan percentage */
#divRunningTasks > p:nth-child(odd) > span:nth-child(3){
  color: rgba(var(--accent),1) !important;
}

#divRunningTasks > p:nth-child(even) > span:nth-child(3){
  color: rgba(var(--accent),1) !important;
}

/* fixes elector arrow's wrong placement */
.selectArrow {
	margin-top: 1.1em;
}


/* tweaks playback chapter thumbs */

.chapterThumbTextContainer {
	background-color: rgba(var(--dark),.7) !important;
	width: 50%;
	margin: 0 auto;
	position: absolute;
	margin-bottom: 7px;
	border-radius: 5.5px !important;
	margin-left: 7px;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 5px;
  padding-bottom: 2px;
}

.sliderBubble {
background-color: transparent;
}

.chapterThumbContainer,
.chapterThumb {
background-color: transparent !important;
margin-bottom: -5px;
}

.chapterThumbText {
  color: rgba(var(--accent),.8) !important;
}

.chapterThumbText-dim {
	color: rgba(var(--accent),.7) !important;
	opacity: 1;
}

@media (max-width: 32em) {
  .layout-mobile .detailImageContainer .card {
	  display: none;
  }
}

.layout-mobile [dir="ltr"] .infoWrapper {
  padding-left: 0% !important;
  padding-top: 5% !important;
}

.layout-mobile .detailImageContainer .card, .layout-mobile .detailImageContainer .card.backdropCard, .layout-mobile .detailImageContainer .card.squareCard {
	top: auto;
	display: none;
}

.detailImageContainer .card .cardBox {
	margin: 0;
	display: none;
}

.layout-mobile .mainDrawer {
	width: 65% !important;
}



/* Makes posters larger in the Library view and Home screen */
@media (min-width: 31.25em) {
.layout-desktop  .portraitCard, .layout-desktop .smallBackdropCard, .layout-desktop .squareCard {
	  width: 33.3333333333%;
  }
}

@media (min-width: 43.75em) {
.layout-desktop  .portraitCard, .layout-desktop .squareCard {
	  width: 25%;
  }
}

@media (min-width: 50em) {
.layout-desktop  .portraitCard, .layout-desktop .squareCard {
	  width: 20%;
  }
.layout-desktop  .overflowPortraitCard, .layout-desktop .overflowSquareCard {
	  width: 15vw;
  }
}

@media (min-width: 75em) {
.layout-desktop .portraitCard, .layout-desktop .squareCard {
	  width: 16.6666666667%;
  }
.layout-desktop .overflowPortraitCard, .layout-desktop .overflowSquareCard {
	  width: 14.4vw;
  }
}

@media (min-width: 87.5em) {
.layout-desktop .portraitCard, .layout-desktop .smallBackdropCard, .layout-desktop .squareCard {
	  width: 14%;
  }
.layout-desktop .overflowPortraitCard, .layout-desktop .overflowSquareCard {
	  width: 13.3vw;
  }
}

@media (min-width: 100em) {
.layout-desktop .overflowPortraitCard, .layout-desktop .overflowSquareCard {
	  width: 11.8vw;
  }
}

@media (min-width: 120em) {
.layout-desktop .overflowPortraitCard, .layout-desktop .overflowSquareCard {
	  width: 11.41vw;
  }
}