.sound-pack{
	--base-color: #e6e6e6;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding: 1.25em;
	border: 1px solid var(--base-color);
	border-radius: 0.5em;
	margin-bottom:1em;
}
.theme-dark .sound-pack{
	--base-color: #666;
}
@media (prefers-color-scheme: dark){
	html:not(.theme-light) .sound-pack{
		--base-color: #666;
	}
}
.sound-pack.cached{
	border-color: #a6a6a6;
}
.sound-pack.review{
	border-color: #ff9900;
}
.sound-pack.testing{
	border-color: #ff6060;
}
.sound-pack.loading{
	animation: packload 2s linear infinite;
}
@keyframes packload{
	0%{
		border-color: var(--base-color);
	}
	50%{
		border-color: var(--accent-color);
	}
	100%{
		border-color: var(--base-color);
	}
}

.sp-container{
	display:flex;
	align-items:stretch;
	flex-direction:column-reverse;
	padding: 0px 2em;
	--sp-riser: 0.05;
}
.sp-main{
	padding: 1em;
}
.sp-right{
	display:flex;
	flex-direction:column;
	gap:1em;
}
.sp-right-container{
	display:flex;
	flex-direction:column;
	gap:1em;
	
	padding: 1em;
	border-radius:0.5em;
	background-color:rgba(0,0,0,var(--sp-riser));
}
@media(min-width:768px) {
	.sp-container{
		align-items:flex-start;
		flex-direction:row;
	}
	.sp-main{
		flex-grow:1;
		flex-basis:70%;
	}
	.sp-right{
		flex-grow:1;
		flex-shrink:1;
		flex-basis:30%;
	}
}
@media(min-width:992px){
	.sp-container{
		align-items:flex-start;
		flex-direction:row;
		padding: 0px 6em;
	}
	.sp-main{
		flex-grow:1;
		flex-basis:75%;
	}
	.sp-right{
		flex-grow:1;
		flex-shrink:1;
		flex-basis:25%;
	}
}
.theme-dark .sp-container{
	--sp-riser: 0.25;
}
@media (prefers-color-scheme: dark){
	html:not(.theme-light) .sp-container{
		--sp-riser: 0.25;
	}
}
.sp-tags{
	display:flex;
	gap:0.5em;
}
.sp-tags div{
	padding: 0 1em;
	border-radius:0.75em;
	background-color:rgba(0,0,0,var(--sp-riser));
}
.sp-tags div.tag-pending{
	color:var(--red-color);
}
.sp-description{
	margin-top:1em;
}

.text-muted{
	opacity:0.5;
}
.pack-details{
	flex:1;
}

.popover-shade{
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:rgba(0,0,0,0.25);
	opacity:0;
	z-index:2;
	display:none;
}
.filter-box{
	position:fixed;
	top:0;
	right:-300px;
	bottom:0;
	z-index:3;
}
.filter-box .sp-right-container{
	height:100%;
	border-radius:0;
	background-color:var(--white-color);
}
@media(min-width:768px) {
	.filter-box{
		margin-top: 1em;
		position: sticky;
		top: 1em;
		z-index:0;
	}
	.filter-box .sp-right-container{
		height:auto;
		border-radius:0.5em;
		background-color:rgba(0,0,0,var(--sp-riser));
	}
}

#sound-pack-list.safari .sound-pack[type='single'] .test-button{
	display:none;
}
#sound-pack-list .sound-pack .safari-warning{
	display:none;
}
#sound-pack-list.safari .sound-pack[type='single'] .safari-warning{
	display:block;
}