.preview .grupo.tocando {
	min-height: 150px;
}
.preview .lista {
	list-style-type: none;
}

.preview .grupo {
	position: relative;
}

.preview .sessao {
	width: 50px;
	height: auto;
}

.preview .grupo .item {
	margin-bottom: 20px;
}

.preview .sessao .texto {
	width: 300px;
}

.preview .grupo .lista .item .wave {
	overflow: hidden;
	width: 100%;
	height: 50px;
	background-size: 100% 50px;
	background-position: center;
	background-image: url(../img/onda_dark.png);
	transition: 0.3s;
}
.preview .grupo:not(.tocando) .lista .item:hover .wave {
	background-image: url(../img/onda_light.png);
}

.preview .grupo.tocando .lista .wave {
	background-image: url(../img/onda_amarela.png);
}

.preview .sessao .texto span {
	cursor: default;
	margin: auto;
	padding: 5px 10px;
	background-color: #000000;
	color:#333333;
	font-size: 16px;
	line-height: 16px;
	/*margin-bottom: 20px;*/
	border-radius: 5px;
	background-color: #080808;
	transform:  translateX(-50%) translateY(-50%) rotate(-90deg);
	position: absolute;
	top: 45%;
	left: 25px;
}
	.preview .grupo:hover .sessao .texto span {
		color: #ffffff;
		background-color:#1A1A1A;
	}

.preview .lista .item .fundo {
	height: 55px;
	border-radius: 5px;
	margin-left: 70px;
	transition: 0.3s;
}
.preview .lista .item:hover .fundo {
	padding-left: 10px;
	background-color: rgba(50,50,50,0.2);
}

.preview .lista .faixa {
	color: #808080;
}
.preview .lista .artista {
	color: #ffffff;
}

.preview .lista .texto_midia .faixa {
	color: #808080;
}
.preview .lista .texto_midia .artista {
	color: #F8CB6E;
}

.preview .lista .tempo {
	width: 50px;
	height: 20px;
	border-radius: 5px;
	border: 1px solid #333333;
	color:#ffffff;
	font-size: 11px;
	/*line-height: 16px;*/
	text-align: center;
	/*vertical-align: middle;*/
}
.preview .lista .tempo-atual {
	width: 60px;
	height: 30px;
	border-radius: 5px;
	border: 1px solid #333333;
	color:#ffffff;
	font-size: 15px;
	line-height: 1.7em;
	text-align: center;
	/*vertical-align: middle;*/
}

.preview .lista .botoes {
	border-left: solid 1px #333333;
	width: auto;
}
	.preview .lista .botoes .botao {
		cursor: pointer;
		margin:10px;
		width: 35px;
		height: 35px;
		background-size: 30px;
		background-repeat: no-repeat;
		background-position: center;
	}
		.preview .lista .botoes .botao.config {
			filter: invert(0.6);
			background-image: url(../img/icones24/clock.png);
		}
			.preview .lista .botoes .botao.config.ativo {
				background-image: url(../img/icones24/clock-fill.png);
			}
			.preview .lista .botoes .botao.config:not(.ativo):hover {
				filter: invert(0.8);
			}

		.preview .lista .botoes .botao.check {
			filter: invert(0.6);
			background-image: url(../img/icones24/check-circle.png);
		}
			.preview .lista .botoes .botao.check.ativo {
				background-image: url(../img/icones24/check-circle.png);
			}
			.preview .lista .botoes .botao.check:not(.ativo):hover {
				filter: invert(0.8);
			}

		.preview .lista .botoes .botao.lock {
			filter: invert(0.6);
			background-image: url(../img/icones24/check-circle.png);
		}
			.preview .lista .botoes .botao.lock.ativo {
				background-image: url(../img/icones24/lock-fill.png);
			}
			.preview .lista .botoes .botao.lock:hover {
				filter: invert(0.8);
			}

.preview .lista .fundo img {
	width: auto;
	height: 55px;
	border-radius: 5px;
}

.preview .lista .icone {
	float: left;
	width: 55px;
	height: 55px;
	margin-right: 15px;
	background-image: url(../img/icones/preview/play_dark.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: 0.3s;
}
:not(.pagina) .preview .lista .icone {
	#background-image: url(../img/icones/preview/play_branco.png);
}
.preview .tocando .lista .ativo .icone  {
	width: 55px;
	height: 55px;
	background-image: url(../img/icones/preview/play_amarelo.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: 0.3s;
}
.preview :not(.tocando) .lista .item:hover .icone, .preview .lista .ativo .icone  {
	width: 55px;
	height: 55px;
	background-image: url(../img/icones/preview/play_branco.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: 0.3s;
}
:not(.pagina) .preview :not(.tocando) .lista .item:hover .icone, .preview .lista .ativo .icone  {
	background-image: url(../img/icones/preview/play_dark.png);
}

.preview .botoes i {
	color: rgba(255, 255, 255, 0.6);
	font-size: 1.1em;
	transition: 0.3s;
	cursor: pointer;
}
.preview .botoes i:hover {
	color: rgba(255, 255, 255, 0.8);
}

.toggle-block.ativo .bi.bi-check-circle {
	display: none;
}
.toggle-block:not(.ativo) .bi.bi-lock-fill {
	display: none;
}