.bg-img {
    background-image: url("/static/img/unknown.svg");
    min-width: 130px;
    min-height: 130px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 80% 100%;
}

.hover, .btn-player {
    transition: transform 250ms ease-in-out, opacity 250ms ease-in-out;
}

.hover:hover, .btn-player:hover {
    transform: scale(1.04);
    opacity: 0.9;
}

.hover .show-hover {
    opacity: 0;
    transition: opacity 250ms ease-in-out;
}

.hover:hover .show-hover {
    opacity: 1;
}

.pb-container {
    padding-bottom: 10em;
}

.off {
    filter: grayscale(1);
}

.w-play {
    min-width: 2.5rem;
}

.btn-player {
    font-size: 1.25rem;
    line-height: 0;
    padding: 0.25rem;
    margin: 0 0.25rem 0 0.25rem;
}

.btn-player#play {
    font-size: 1.75rem;
    padding: 0;
}

.btn-player#mute {
    font-size: 1.5rem;
}

#loop > span {
    font-size: 0.75rem;
    top: 90%;
    left: 90%;
    display: none;
}

#loop.one > span {
    display: block;
}

#image {
    max-height: 3rem;
    max-width: 3rem;
    min-height: 2rem;
    min-width: 2rem;
    background-image: url("/static/img/unknown.svg");
}

#toast {
    bottom: 8em;
}

#toast, .context-menu {
    z-index: 1080;
}

#loading {
    transition: opacity 0.1s;
}

#container {
	animation: fadeIn 0.25s;
  	opacity: 1;
}

@keyframes fadeIn {
  from {
  	opacity: 0;
  }
  to {
 	opacity: 1;
  }
}

[data-page] {
    cursor: pointer;
}

img:not(.no-fit) {
    object-fit: contain;
}

/*
#slider {
    --buffered: 0%;
}
#slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, rgba(var(--bs-secondary-rgb), 0.6) 0%, rgba(var(--bs-secondary-rgb), 0.6) var(--buffered), var(--bs-secondary) var(--buffered), var(--bs-secondary) 100%);
}
#slider::-moz-range-track {
    background: linear-gradient(to right, rgba(var(--bs-secondary-rgb), 0.6) 0%, rgba(var(--bs-secondary-rgb), 0.6) var(--buffered), var(--bs-secondary) var(--buffered), var(--bs-secondary) 100%);
}
*/

@media (min-width: 576px) {
    .bg-img {
        min-width: 160px;
        min-height: 160px;
    }

    .btn-player#play {
        font-size: calc(1.375rem + 1.5vw);
    }
}

@media (min-width: 768px) {
    .bg-img {
        min-width: 190px;
        min-height: 190px;
    }
}

@media (min-width: 1200px) {
    .btn-player#play {
        font-size: 2.5rem;
    }
}