* {
  scrollbar-color: var(--hover-background) var(--second-background);
}

::-moz-selection {
  background: var(--main-color);
  color: var(--main-background);
  text-shadow: none;
}

::selection {
  background: var(--main-color);
  color: var(--main-background);
  text-shadow: none;
}

.mdl-slider-background-upper {
  background-color: var(--dimmer-text);
}

.mdl-slider::-webkit-slider-thumb {background-color: var(--main-color);}
.mdl-slider::-moz-range-thumb {background-color: var(--main-color);}

.navMenuOption-selected,
.listItemButton:focus,
.iconOsdProgressInner,
.mdl-slider-background-lower {
  background-color: var(--main-color);
}

.iconOsdProgressOuter,
.mdl-slider-background-flex,
.formDialogHeader:not(.formDialogHeader-clear),
.formDialogFooter:not(.formDialogFooter-clear),
.cardBox:not(.visualCardBox) .cardPadder {
  background-color: var(--hover-background);
}

.backgroundContainer,
.formDialogHeader,
.detailRibbon,
.dialog,
.dashboardGeneralForm,
html {
  color: var(--main-text);
  background-color: var(--main-background);
}

.logoScreenSaver,
.detailPageSecondaryContainer {
  background-color: var(--second-background) !important;
}

.sliderBubble,
.skinHeader:not(.osdHeader),
.nowPlayingBar {
  color: var(--main-text);
  background-color: var(--second-background) !important;
}

.nowPlayingBarSecondaryText {
  color: var(--dimmer-text);
}

.mainDrawer,
.cardBox,
.paperList {
  background: var(--main-background);
}

.playstatebutton-icon-played,
.ratingbutton-icon-withrating {
  color: var(--red-color);
}

.emby-input,
.emby-textarea,
.emby-select {
  background: var(--second-background);
  border-color: var(--second-background);
}

.emby-input:focus,
.emby-textarea:focus,
.emby-select-withcolor:focus {
  border-color: var(--main-color) !important;
}

.emby-checkbox:checked + span + .checkboxOutline,
.itemProgressBarForeground {
  color: var(--main-text);
  background-color: var(--main-color);
  border-color: var(--main-color);
}

.toast,
.fab,
.raised {
  color: var(--main-text) !important;
  background-color: var(--second-background) !important;
}

.paper-icon-button-light:hover:not(:disabled),
.listItem:hover,
.listItem:focus,
.navMenuOption:hover,
.navMenuOption:focus {
  color: var(--main-color) !important;
  background-color: var(--hover-background);
}

.listItemIcon:not(.listItemIcon-transparent) {
  color: var(--main-text);
  background-color: var(--second-background) !important;
}

.notifications {
  color: var(--blue) !important;
}

.notification_important {
  color: var(--red-color) !important;
}

.button-submit,
.button-submit:focus,
.button-alt,
.button-alt:focus,
.submit,
.submit:focus,
#btnAddPerson,
#btnAddPerson:focus,
.btnAddTrigger,
.btnAddTrigger:focus,
.btnAddUser,
.btnAddUser:focus {
  color: var(--main-background);
  background: var(--main-color);
}

.cardText-secondary {
  color: var(--dimmer-text);
}

.button-cancel,
.button-cancel:focus {
  color: var(--main-color);
  background: var(--main-background);
}

#btnShutdown,
#deviceDeleteAll,
.btnDeleteImage,
.btnResetPassword {
  color: var(--main-background);
  background: var(--red-color);
}

.btnRefresh {
  background: var(--main-color);
  color: var(--main-background);
}

.backgroundContainer.withBackdrop,
.backdropContainer,
.backgroundContainer {
  background: var(--main-background);
}

.inputLabelFocused,
.selectLabelFocused,
.textareaLabelFocused,
.button-link,
.button-flat:focus,
.button-flat:hover,
.itemAction:focus,
.emby-tab-button-active>.emby-button-foreground,
.emby-button-foreground:focus,
.mdl-slider,
.headerRight,
.headerLeft,
.button-link,
.upNextDialog-countdownText {
  color: var(--main-color);
}

.MuiButtonBase-root,
.MuiSvgIcon-root,
.listItemButton,
.checkboxListLabel,
.lnkMediaFolder,
.sessionAppName,
.sessionNowPlayingInfo,
.sessionNowPlayingTime {
  color: var(--main-text) !important;
}

.Mui-selected {
  background-color: var(--main-background) !important;
}

.MuiPaper-root,
.MuiBox-root,
.MuiTableContainer-root,
.MuiTableRow-root,
.MuiTableCell-root,
.MuiTableFooter-root,
.MuiList-root {
  background-color: var(--second-background);
  border-color: var(--hover-background) !important;
  outline-color: var(--main-color);
}

.MuiToolbar-root,
.collapseContent {
  background-color: var(--main-background);
}

.indicator {
  background-color: var(--main-color);
  color: var(--main-background);
}

.playedIndicator {
  background-color: var(--green-color);
  color: var(--main-background);
}

.alphaPickerRow, .devices-subheader {
  color: var(--dimmer-text);
}

.buttonActive,
.button-accent-flat,
.metadataSidebarIcon,
.layout-tv .paper-icon-button-light.show-focus:focus {
  color: var(--main-color) !important;
}

.emby-button.show-focus:focus {
  background: var(--main-color) !important;
}

.sectionTitle,
.cardText,
.pageTitle,
.detailSectionContent,
.trackSelections,
.emby-input,
.checkboxLabel,
.itemDetailsGroup,
.checkboxOutline,
.emby-textarea,
.emby-select,
.label,
.selectLabel,
.sidebarHeader,
.listItem,
.listItemBodyText,
.MuiMenuItem-root,
.dashboardGeneralForm,
.dashboardSections,
.navMenuOption,
.inputLabel,
.content-primary,
.itemName,
.paper-icon-button-light,
.emby-button-foreground,
.iconOsd .iconOsdIcon,
.upNextContainer,
legend {
  color: var(--main-text);
}

.fieldDescription,
.secondary {
  color: var(--dimmer-text) !important;
}

.listItem-border {
  border-color: var(--hover-background) !important;
}

.checkboxOutline .checkboxIcon-checked,
.sessionAppName,
.sessionNowPlayingInfo {
  color: var(--main-background);
}

.osdTextContainer, .osdTimeText {
  color: var(--main-text);
}

/* this has to be background, not background-color for some reason */
div[role=presentation].jstree-wholerow-clicked {
  background: var(--hover-background) !important;
}

.jstree-hovered,
.jstree-clicked,
.jstree-wholerow-hovered {
  color: var(--main-text) !important;
  background-color: var(--hover-background) !important;
}

.mdl-spinner__layer {
  border-color: var(--main-color);
}

.infoBanner {
  color: var(--main-text);
  background: var(--second-background);
}

.iconOsd,
.cardContent.defaultCardBackground {
  background-color: var(--second-background);
}

.itemProgressBar.playbackProgress .itemProgressBarForeground {
  background-color: var(--main-color) !important;
}

.itemProgressBar.backgroundProgress .itemProgressBarForeground {
  background-color: var(--hover-background) !important;
}

.nowPlayingInfoControls {
  padding-left: 10px;
}