/*
This file styles jellyfin and can be imported by adding:
@import url("https://bocken.org/other/jellyfin.css");
under Server -> General -> Custom CSS Code
*/
/* jellyscrub default: width: 15vw, annoying for smaller screen sizes */
.chapterThumbContainer{
     width: min(80vw, 500px, 50vh);
}
/* Attempt to change accent color */

:root{
--nord0: #2E3440;
--blue: #5E81AC;
--lightblue: #81A1C1;
--swiper-theme-color: var(--blue);
}

.selectionCommandsPanel,
.countIndicator, .fullSyncIndicator, .mediaSourceIndicator, .playedIndicator,
.itemProgressBarForeground,
.mdl-slider-background-lower,
.iconOsdProgressInner{
  background-color: var(--blue);
}
.mdl-slider,
.emby-tab-button:hover{
    color: var(--blue);
}
@media (hover: hover) and (pointer: fine){
.paper-icon-button-light:hover:not(:disabled) {
   color: var(--lightblue);
   background-color: rgba(var(--blue), 0.2);
}
}

/* Loading spinner */
.mdl-spinner__layer{
 border-color: var(--blue);
}

/* volume and timeline button color */
/* Need to be separate to apply*/
input[type="range"]::-moz-range-thumb{
   background-color: var(--blue);
}
input[type="range"]::-webkit-slider-thumb{
   background-color: var(--blue);
}

.listItemIcon:not(.listItemIcon-transparent),
.navMenuOption-selected,
.button-submit,
.defaultCardBackground1,
.defaultCardBackground2,
.defaultCardBackground3,
.defaultCardBackground4,
.defaultCardBackground5,
.emby-checkbox:checked + span + .checkboxOutline, .itemProgressBarForeground
{
    background-color: var(--blue) !important;
}
.button-link,
.button-flat:hover{
   color: var(--blue);
}
.emby-checkbox:checked + span + .checkboxOutline{
border-color: var(--blue);
}
.btnUserRating:hover,
.cardOverlayButton:has(.favorite):hover{
    color: #BF616A !important;
}

.emby-input:focus, .emby-textarea:focus{
 border-color: var(--blue);
}
.emby-select-withcolor:focus{
    border-color: var(--blue) !important;
}
.listItemIcon:not(.listItemIcon-transparent),
.navMenuOption-selected,
.button-submit,
.defaultCardBackground1,
.defaultCardBackground2,
.defaultCardBackground3,
.defaultCardBackground4,
.defaultCardBackground5,
.emby-checkbox:checked + span + .checkboxOutline, .itemProgressBarForeground,
.taskProgressInner
{
    background-color: var(--blue) !important;
}

#divRunningTasks > p > progress + span,
div.taskProgressOuter + span{
    color: var(--blue) !important;
}
progress[value] {
    background-color: var(--blue);
}
progress[value]::-webkit-progress-value {
   background-color: var(--blue);
}

/* For Mozilla-based browsers (Firefox) */
progress[value]::-moz-progress-bar {
   background-color: var(--blue);
}

.skinHeader,
.mainDrawer{
  background: var(--nord0);
}
.card{
transition: 200ms;
}
.card:hover{
scale: 1.05;
}

.listItem{
   transition: 200ms;
   overflow: visible;
}
.listItem:hover {
    scale: 1.02;
}
@media (max-width: 64em){
.listItemImageButton, .listItemIndicators {
    font-size: initial !important;
}
}
.emby-scroller{
   overflow: visible !important;
}