*{
	--danger-color: #dc3545 !important;
	--danger-hover-color: #bd2130 !important;
	--safe-color: #28a745 !important;
	--safe-hover-color: #1e7e34 !important;
	--dark-color: #343a40 !important;
	--dark-hover-color: #121416 !important;
	--media-player-controller-height: 12vh;
}

.media-button {
	width: 32px;
	height: 32px;
	border-radius: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	opacity: 0.9;
	-webkit-transition: -webkit-transform 2s;
	transition: transform 2s ease;
}

.media-button:hover {	
	/*transform: rotate(360deg);*/	
	opacity: 1;
	/*color: gray;*/
}
.media-button.danger:hover{	
	/*transform: rotate(360deg);*/	
	color: green;
}
.media-button.safe:hover{	
	/*transform: rotate(360deg);*/	
	color: green;
}

.media-player-controller{
	height: var(--media-player-controller-height);
}

.media-playlist-button{
	width: calc(var(--media-player-controller-height)*16/9)
}


.dark {
	color: var(--dark-color);

}
.dark:hover, a.dark:hover,a.dark:focus,button.dark:hover,button.dark:focus {
	color: var(--dark-hover-color) !important;
}

.danger {
	color: var(--danger-color);

}
.danger:hover, a.danger:hover,a.danger:focus,button.danger:hover,button.danger:focus {
	color: var(--danger-hover-color) !important;
}

.safe {
	color: var(--safe-color)

}
.safe:hover, a.safe:hover,a.safe:focus,button.safe:hover,button.safe:focus {
	color: var(--safe-hover-color)
}

.media-controls-pane {
	position: fixed;
	bottom: 5px;
	width: 100%;
	height: auto;
	margin: auto;
	background-color: whitesmoke;
}

.preview-thumb {
	width: 200px;
	height: auto;
	margin-right: 0.5em;
}

.img-thumb {
	width: 40vw;
	height: auto;
	margin-right: 0.5em;
}
.img-thumb-card {
	width: 100%;
	height: auto;
	margin-right: 0.5em;
}

.search-item{
	width: 100%;
}

.search-thumb {
	width: 36px;
	height: 36px;
}

.text-playlist-title{
	margin: 0;	
	max-lines: 2;
	font-weight: 550;
	line-height: initial;
}
.text-playlist-des{	
	margin: 0;
	font-size: smaller;
	max-width: l;
}
.text-playlist-channel{		
	margin: 0;
	font-size: smaller;
	max-width: l;
	font-weight: 400;
}

.playlist-item-:hover .item-menu {
	display: block;
}
.item-menu- {
	display: none;
}

.brand-thumb {
	width: auto;
	height: 36px;
}

.suggestion-thumb {
	width: 96px;
	height: auto;
	margin-right: 0.5em;
}

.cast-box {
	width: 100%;
}

.playlist-detail-box {
	width: 100%;
}

.backdrop-blur{
	backdrop-filter: blur(2px) !important;
}

a.bg-lighter:focus,
a.bg-lighter:hover,
button.bg-lighter:focus,
button.bg-lighter:hover {
	background-color: #dae0e5 !important
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 420px) {
	.img-thumb  {
		width: 40vw;
	}
	.img-thumb-card {
		width: 100%;
	}
}
@media only screen and (max-width: 600px) {
	.preview-thumb {
		width: 250px;	
	}
	.img-thumb  {
		width: 128px;
		height: auto;
		margin-right: 0.5em;
	}
	.img-thumb-card {
		width: 100%;
	}
	.search-thumb {
		width: 24px;
		height: 24px;
	}
}
.mini-playlist-box-sm{
	height: 100% ;
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.preview-thumb {
		width: 350px;	
	}
	.img-thumb  {
		width: 128px;
		height: auto;
		margin-right: 0.5em;
	}
	.img-thumb-card {
		width: 100%;
	}
	.search-item{
		width: 50%;
	}
	.suggestion-thumb  {
		width: 300px;
		height: auto;
		margin-right: 0.5em;
	}

	.search-thumb {
		width: 24px;
		height: 24px;
	}
	.media-button {
		width: 36px;
		height: 36px;
	}
	.cast-box {
		width: 75% !important;
	}
	.playlist-detail-box {
		width: 75% !important;
	}
}

@media only screen and (max-width: 767px) {
	.mini-playlist-box-sm {
		top: 30vh !important;
		bottom: 1vh !important;
		z-index: 10000 !important;		
		position: absolute !important;
		height: auto;
	}
	.video-renderer-box {
		-height:clamp(60%,30vh,50vh);
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.preview-thumb {
		width: 350px;	
	}
	.img-thumb  {
		margin-right: 1em;
	}
	.search-item{
		width: 50%;
	}
	.search-thumb {
		width: 36px;
		height: 36px;
	}
	.media-button {
		width: 48px;
		height: 48px;
	}
	.cast-box {
		width: 60% !important;
	}
	.playlist-detail-box {
		width: 60% !important;
	}
}

/* Larger landscape tablets, 820px and up) */
@media only screen and (min-width: 820px) {
	.search-item{
		width: calc(100%/3);
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 990px) {
	.preview-thumb {
		width: 400px;	
	}
	.img-thumb  {
		margin-right: 1em;
	}
	.search-thumb {
		width: 36px;
		height: 36px;
	}
	.cast-box {
		width: 50% !important;
	}
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.preview-thumb {
		width: 450px;	
	}
	.img-thumb  {
		margin-right: 1em;
	}
	.search-item{
		width: calc(100%/4);
	}
	.search-thumb {
		width: 48px;
		height: 48px;
	}
	.media-button {
		width: 50px;
		height: 50px;
	}
	.cast-box {
		width: 40% !important;
	}
}