@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;
}

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);
}

.cardOverlayContainer {
	border-radius: var(--rounding) !important;
}

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

.actionSheetMenuItem:hover {
    border-radius: 0 !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;
}

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

/*Pages the have single unit height taskbar*/
@media all and (min-width: 100em){
  #indexPage,
  #moviesPage,
  #tvRecommendedPage,
  #musicRecommendedPage {
    margin-top: 68px;
    padding-top: 0px !important;
    overflow-y: scroll;
  }
}

/*Pages the have two unit height taskbar*/
@media all and (max-width: 100em){
  #indexPage,
  #moviesPage,
  #tvRecommendedPage,
  #musicRecommendedPage {
    margin-top: 130px;
    padding-top: 0.5em !important;
    overflow-y: scroll;
  }
}

.force-scroll {
    overflow-y: auto;
    overflow-x: auto;
}

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

.emby-textarea {
  font-family: monospace;
  font-size: 10pt;
}

.skinHeader.semiTransparent {
  background: rgba(32, 32, 32, 0.7);
  backdrop-filter: blur(18px) !important;
}

.detailPageWrapperContainer {
  background: rgba(32, 32, 32, 0.4);
  backdrop-filter: blur(18px);
}

.detailPageSecondaryContainer {
  margin: 0;
}

.backdropImage {filter: blur(18px) saturate(120%) contrast(120%) brightness(120%);}

#loginPage {background: url(https://i.imgur.com/9vL4iNf.png) !important;}
:root {--rounding: 15px;}