/*.entity-list-chart-item-v2 {
	.transition(opacity, 100ms, linear);
	.box-sizing();
	//.clearfix;
	width: 100%;
	color: @black;
	position: relative;
	background-color: @white;
	display: flex;
	flex-direction: column;
	//padding: 13px 12px;
	padding: 8px 12px;

	@media @bp_1024 {
		flex-direction: row;
		padding-left: 0;
		padding-right: 0;
		justify-content: space-between;
	}

	&.beatport,
	&.festival,
	&.spotify {
		
		.entity {

			figure {
				width: 53px; //55px;
				height: 53px; //55px;
			}

			.stats {
				flex: unset;
			}
		}

		.col-rank-section {
			padding: 8px;
			position: relative;
			border-width: 1px;

			@media @bp_768 {
				width: 25%;
				min-width: 25%;
				max-width: 25%;
			}

			@media @bp_1024 {
				width: 90px;
				min-width: 90px;
				max-width: none;
			}
		}

		.column-primary {

			@media @bp_768 {
				align-items: center;
			}
			
			@media @bp_1024 {
				flex: 1 0 50%;
			}

			@media @bp_1200 {
				flex: 1 0 40%;
			}

			.col-rank {
				align-self: flex-start;
				padding-top: 4px;
			}
		}

		.column-secondary {

			@media @bp_1024 {
				flex: 1 0 50%;
			}

			@media @bp_1200 {
				flex: 1 0 60%;
			}

			.col-rank-section {
				flex: 1;
			}
		}
	}

	&.track,
	&.playlist {

		@media @bp_768 {
			padding-top: 10px;
			padding-bottom: 10px;
		}

		.column-primary,
		.column-secondary {
			
			@media @bp_768 {
				min-height: 66px;
			}
		}
	}

	&.track {

		.column-primary {
	
			@media @bp_1024 {
				flex: 1 0 40%;
			}
		}

		.column-secondary {

			@media @bp_1024 {
				flex: 1 0 60%;
			}
		}
	}

	&.playlist {

		.column-primary {
	
			@media @bp_1024 {
				flex: 1 0 50%;
			}

			@media @bp_1400 {
				flex: 1 0 60%;
			}
		}

		.column-secondary {

			@media @bp_1024 {
				flex: 1 0 50%;
			}

			@media @bp_1400 {
				flex: 1 0 40%;
			}
		}
	}

	&.festival {

		.entity {

			figure {
				width: 76px; //78px;
			}
		}
	}

	&.spotify {

		&.playlist {

			.column-secondary {

				.col-rank-section {

					&:nth-child(2),
					&:nth-child(3) {

						@media @bp_768 {
							max-width: 120px;
						}
					}
				}
			}
		}
	}

	&.beatport {

		&.track {
			@media @bp_768 {
				padding-top: 2px;
				padding-bottom: 2px;
			}

			.column-primary,
			.column-secondary {
				
				@media @bp_768 {
					min-height: 82px;
				}
			}

			.column-primary {

				.col-rank {

					@media @bp_768 {
						padding-top: 14px;
					}
				}
			}
		}
	}

	&.beatport-track {
		padding: 10px 12px;
	}

	&.active {
		background-color: @indigo-2;

		.column-secondary {

			.col-rank-section {
				border-color: #A0AEB4;
			}
		}

		.col-rank-section {

			&.active {
				background-color: @indigo-2;

				&:before {
					background-color: @indigo-2;
					bottom: -30px;
					border-bottom: solid 17px @indigo-1;
				}
			}

			.rank {

				&.active {
					background-color: @indigo-2;
				}
			}
		}
	}

	.column-primary {
		display: flex;
		flex-direction: column;

		@media @bp_768 {
			flex-direction: row;
			flex: 1;
		}
	}

	.column-secondary {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		@media @bp_1024 {
			flex-wrap: nowrap;
		}
	}

	.col {
		.box-sizing();
		display: flex;
		flex-direction: column;
	}

	.col-rank {
		flex-direction: row;

		@media @bp_768 {
			width: 90px;
			min-width: 90px;
			max-width: 90px;
			padding: 0 10px;
			flex-direction: column;
		}

		strong {
			.font-size(15);
			line-height: 20px;
			display: block;
			font-weight: 400;
			padding-top: 2px;
		}

		.value-change {
			margin-top: 5px;
			margin-left: 12px;

			@media @bp_768 {
				margin-left: 0;
			}
		}

		.change {
			.font-size(10);
			display: block;
			color: @grey-1;
			white-space: nowrap;
			margin-left: 20px;

			@media @bp_768 {
				margin-left: 0;
			}

			&.down {

				&:before {
					border-left: 4px solid transparent;
					border-right: 4px solid transparent;
					border-top: 6px solid @red;
				}
			}

			&.up {

				&:before {
					border-left: 4px solid transparent;
					border-right: 4px solid transparent;
					border-bottom: 6px solid @green;
				}
			}

			&:before {
				content: "";
				width: 0;
				height: 0;
				display: inline-block;
				vertical-align: middle;
				margin-right: 4px;
			}
		}
	}

	.col-entity {
		flex-grow: 1;
	}

	.primary-stats {

		.rank {

			strong {
				color: @black;
			}
		}
	}

	.secondary-stats {

		.rank {
			color: @grey-1;

			strong {
				color: @black;
			}
		}
	}

	.col-rank-section {
		border-left: 1px solid @white-2;
		padding: 36px 8px 0 8px;
		justify-content: space-between;
		background-repeat: no-repeat;
		background-position: left 8px top;
		width: 50%;
		min-width: 50%;
		margin-top: 16px;
		background-size: 16px;
		position: relative;

		&:after {
			content: "";
			width: 16px;
			height: 16px;
			position: absolute;
			left: 8px;
			top: 2px;
			background-size: 16px;
			background-repeat: no-repeat;
			background-position: left center;
		}

		@media @bp_360 {
			width: 33.33%;
			min-width: 33.33%;
		}

		@media @bp_768 {
			width: auto;
			min-width: 0;
			flex: 1;
		}

		@media @bp_1024 {
			margin-top: 0;
			width: 80px;
			min-width: 80px;
		}

		@media @bp_1280 {
			width: 90px;
			min-width: 90px;
			background-position: left 15px top;
		}

		@media @bp_1400 {
			width: 100px;
			min-width: 100px;
		}

		&.active {
			position: relative;
			background-color: @indigo-1;

			&:before {

				@media @bp_1024 {
					.prevent-click;
					content: "";
					position: absolute;
					top: -13px;
					left: -1px;
					right: 0;
					bottom: -21px;
					background-color: @indigo-1;
					z-index: 0;
					border-left: 1px solid @black;
				}
			}
		}

		&.viberate {

			&:after {
				background-image: url('../images/svg/viberate-color.svg');
			}
		}

		&.instagram {

			&:after {
				background-image: url('../images/svg/instagram-color.svg');
			}
		}

		&.twitter {

			&:after {
				background-image: url('../images/svg/twitter-color.svg');
			}
		}

		&.youtube {

			&:after {
				background-image: url('../images/svg/youtube-color.svg');
			}
		}

		&.shazam {

			&:after {
				background-image: url('../images/svg/shazam-color.svg');
			}
		}

		&.soundcloud {

			&:after {
				background-image: url('../images/svg/soundcloud-color.svg');
			}
		}

		&.spotify {

			&:after {
				background-image: url('../images/svg/spotify-color.svg');
			}
		}

		&.deezer {

			&:after {
				background-image: url('../images/svg/deezer-color.svg');
			}
		}

		&.tiktok {

			&:after {
				background-image: url('../images/svg/tiktok-color.svg');
			}
		}

		.rank {
			position: relative;

			&.active {

				strong {
					.font-size(14);
					font-weight: 500;
				}

				&:before {
					content: "";
					position: absolute;
					left: -8px;
					top: 2px;
					margin-top: 1px;
					width: 0;
					height: 0;
					border-top: 4px solid transparent;
					border-bottom: 4px solid transparent;
					border-left: 4px solid @black;

					@media @bp_1280 {
						//left: -15px;
					}
				}
			}

			strong,
			span {
				display: block;
				line-height: 16px;

				&.clamp-lines-1 {
					.clamp-lines(1);
				}
				
				&.clamp-lines-2 {
					.clamp-lines(2);
				}
			}
		}
	}

	.rank {
		.font-size(12);
		line-height: 16px;
		color: @grey-1;
		letter-spacing: 0;

		&.active {
			background-color: @indigo-1;

			&:before {
				left: -8px;
			    border-top: 4px solid transparent;
				border-bottom: 4px solid transparent;
				border-left: 4px solid #000;
			}

			strong {
				.font-size(15);
				font-weight: 400;
			}
		}

		strong,
		span {
			vertical-align: middle;
			display: inline;
		}

		strong {
			font-weight: 400;
			color: @black;
			height: auto;
		}

		span {
			.font-size(10);
			display: block;
			padding-top: 2px;
		}

		img {
			vertical-align: top;
			margin-right: 3px;
		}
	}

	.entity {
		display: flex;
		flex-direction: row;
		margin-top: 10px;

		@media @bp_768 {
			margin-top: 0;
		}

		.btn-play-track {
			margin-left: 16px;
		}

		figure {
			border: 1px solid #E8ECED;
			width: 118px; //120px
			height: 118px; //120px
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		article {
			display: flex;
			flex-direction: column;
			padding-left: 16px;
			padding-right: 16px;
			justify-content: flex-start;
			padding-top: 2px;
		}

		a {
			color: inherit;
		}

		h3 {
			.font-size(15);
			//.clamp-lines(1);
			line-height: 18px;
			font-weight: 500;
			word-break: break-all;

			display: flex;
			flex-direction: row;
			align-items: center;

			a {
				.clamp-lines(1);
			}

			.mini-badges {
				padding-right: 12px;
			}
		}

		.rank {
			.font-size(10);
			.clamp-lines(1);

			img {
				vertical-align: middle;
			}

			strong {
				vertical-align: unset;
			}
		}

		.stats {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-top: 4px;
		}

		.artists {
			.clamp-lines(1);
			.font-size(12);
			color: @grey-1;
			line-height: 1;
		}
	}

	.value-change {

		&:before {
			background-size: 9px;
			width: 14px;
			height: 9px;
		}
	}
} OLD*/


.entity-list-chart-item-v2 {
	.transition(opacity, 100ms, linear);
	.box-sizing();
	//.clearfix;
	width: 100%;
	color: @black;
	position: relative;
	background-color: @white;
	display: flex;
	flex-direction: column;
	//padding: 13px 12px;
	padding: 16px 12px;

	@media @bp_1024 {
		flex-direction: row;
		padding-left: 0;
		padding-right: 0;
		justify-content: space-between;
	}

	&.beatport,
	&.festival,
	&.spotify {
		
		.entity {

			figure {
				width: 53px; //55px;
				height: 53px; //55px;
			}

			.stats {
				flex: unset;
			}
		}

		.col-rank-section {
			padding: 8px;
			position: relative;
			border-width: 1px;

			@media @bp_768 {
				width: 25%;
				min-width: 25%;
				max-width: 25%;
				padding-top: 12px;
			}

			@media @bp_1024 {
				width: 90px;
				min-width: 90px;
				max-width: none;
			}
		}

		.column-primary {

			@media @bp_768 {
				align-items: center;
			}
			
			@media @bp_1024 {
				flex: 1 0 50%;
			}

			@media @bp_1200 {
				flex: 1 0 40%;
			}
		}

		.column-secondary {

			@media @bp_1024 {
				flex: 1 0 50%;
			}

			@media @bp_1200 {
				flex: 1 0 60%;
			}

			.col-rank-section {
				flex: 1;
			}
		}
	}

	&.track {

		.column-primary {
	
			@media @bp_1024 {
				flex: 1 0 40%;
			}
		}

		.column-secondary {

			@media @bp_1024 {
				flex: 1 0 60%;
			}
		}
	}

	&.playlist {

		.column-primary {
	
			@media @bp_1024 {
				flex: 1 0 50%;
			}

			@media @bp_1400 {
				flex: 1 0 60%;
			}
		}

		.column-secondary {

			@media @bp_1024 {
				flex: 1 0 50%;
			}

			@media @bp_1400 {
				flex: 1 0 40%;
			}
		}
	}

	&.festival {

		.entity {

			figure {
				width: 76px; //78px;
			}
		}
	}

	&.spotify {

		&.playlist {

			.column-secondary {

				.col-rank-section {

					&:nth-child(2),
					&:nth-child(3) {

						@media @bp_768 {
							max-width: 120px;
						}
					}
				}
			}
		}
	}

	&.beatport {

		&.track {

			.column-primary,
			.column-secondary {
				
				@media @bp_768 {
					min-height: 66px;
				}
			}

			.column-primary {

				.col-rank {

					@media @bp_768 {
						padding-top: 5px;
					}
				}
			}

			.col-rank-section {

				@media @bp_768 {
					justify-content: center;
				}
			}
		}

		&:not(.track) {

			.column-secondary {

				.col-rank-section {

					&:nth-child(1) {

						@media @bp_768 {
							max-width: 50px;
						}
					}
				}
			}
		}
	}

	&.beatport-track {
		padding: 10px 12px;
	}

	&.artist-airplay {

		.entity {

			figure {
				width: 56px;
				height: 56px;
			}
		}

		.column-secondary {

			.col-rank-section {
				padding-top: 12px;

				@media @bp_768 {
					min-width: 120px;
					max-width: 120px;
				}
			}
		}
	}

	&.active {
		background-color: @indigo-2;

		.column-secondary {

			.col-rank-section {
				border-color: #A0AEB4;
			}
		}

		.col-rank-section {

			&.active {
				background-color: @indigo-2;

				&:before {
					background-color: @indigo-2;
					bottom: -30px;
					border-bottom: solid 17px @indigo-1;
				}
			}

			.rank {

				&.active {
					background-color: @indigo-2;
				}
			}
		}
	}

	.column-primary {
		.box-sizing;
		display: flex;
		flex-direction: column;

		@media @bp_768 {
			flex-direction: row;
			flex: 1;
		}
	}

	.column-secondary {
		.box-sizing;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		@media @bp_1024 {
			flex-wrap: nowrap;
			margin: -8px 0;
		}
	}

	.col {
		.box-sizing();
		display: flex;
		flex-direction: column;
	}

	.col-rank {
		flex-direction: row;

		@media @bp_768 {
			width: 90px;
			min-width: 90px;
			max-width: 90px;
			padding: 0 10px;
			flex-direction: column;
			align-self: flex-start;
		}

		strong {
			.font-size(15);
			line-height: 20px;
			display: block;
			font-weight: 400;
			padding-top: 2px;
		}

		.value-change {
			margin-top: 5px;
			margin-left: 12px;

			@media @bp_768 {
				margin-left: 0;
			}

			&:before {
				background-size: 8px;
				height: 8px;
				width: 14px;
			}
		}
	}

	.col-entity {
		flex-grow: 1;
	}

	.primary-stats {

		.rank {

			strong {
				color: @black;
			}
		}
	}

	.secondary-stats {

		.rank {
			color: @grey-1;

			strong {
				color: @black;
			}
		}
	}

	.col-rank-section {
		border-left: 1px solid @white-2;
		padding: 36px 8px 8px 8px;
		justify-content: space-between;
		background-repeat: no-repeat;
		background-position: left 8px top;
		width: 50%;
		min-width: 50%;
		margin-top: 16px;
		background-size: 16px;
		position: relative;

		&:after {
			content: "";
			width: 16px;
			height: 16px;
			position: absolute;
			left: 8px;
			top: 12px;
			background-size: 16px;
			background-repeat: no-repeat;
			background-position: left center;
		}

		@media @bp_360 {
			width: 33.33%;
			min-width: 33.33%;
		}

		@media @bp_768 {
			width: auto;
			min-width: 0;
			flex: 1;
		}

		@media @bp_1024 {
			margin-top: 0;
			width: 80px;
			min-width: 80px;
		}

		@media @bp_1280 {
			width: 90px;
			min-width: 90px;
			background-position: left 15px top;
		}

		@media @bp_1400 {
			width: 100px;
			min-width: 100px;
		}

		&.active {
			position: relative;
			background-color: @indigo-1;

			&:before {

				@media @bp_1024 {
					.prevent-click;
					content: "";
					position: absolute;
					top: -13px;
					left: -1px;
					right: 0;
					bottom: -21px;
					background-color: @indigo-1;
					z-index: 0;
					border-left: 1px solid @black;
				}
			}
		}

		&.viberate {

			&:after {
				background-image: url('../images/svg/viberate-color.svg');
			}
		}

		&.instagram {

			&:after {
				background-image: url('../images/svg/instagram-color.svg');
			}
		}

		&.twitter {

			&:after {
				background-image: url('../images/svg/twitter-color.svg');
			}
		}

		&.youtube {

			&:after {
				background-image: url('../images/svg/youtube-color.svg');
			}
		}

		&.shazam {

			&:after {
				background-image: url('../images/svg/shazam-color.svg');
			}
		}

		&.soundcloud {

			&:after {
				background-image: url('../images/svg/soundcloud-color.svg');
			}
		}

		&.spotify {

			&:after {
				background-image: url('../images/svg/spotify-color.svg');
			}
		}

		&.deezer {

			&:after {
				background-image: url('../images/svg/deezer-color.svg');
			}
		}

		&.tiktok {

			&:after {
				background-image: url('../images/svg/tiktok-color.svg');
			}
		}

		.rank {
			position: relative;

			&.active {

				strong {
					.font-size(15);
					font-weight: 300;
				}

				&:before {
					content: "";
					position: absolute;
					left: -8px;
					top: 2px;
					margin-top: 1px;
					width: 0;
					height: 0;
					border-top: 4px solid transparent;
					border-bottom: 4px solid transparent;
					border-left: 4px solid @black;

					@media @bp_1280 {
						//left: -15px;
					}
				}
			}

			strong,
			span {
				display: block;
				line-height: 16px;

				&.clamp-lines-1 {
					.clamp-lines(1);
				}
				
				&.clamp-lines-2 {
					.clamp-lines(2);
				}
			}
		}
	}

	.rank {
		.font-size(12);
		line-height: 16px;
		color: @grey-1;
		letter-spacing: 0;

		&.active {
			background-color: @indigo-1;

			&:before {
				left: -8px;
			    border-top: 4px solid transparent;
				border-bottom: 4px solid transparent;
				border-left: 4px solid #000;
			}

			strong {
				.font-size(15);
				font-weight: 400;
			}
		}

		strong,
		span {
			vertical-align: middle;
			display: inline;
		}

		strong {
			font-weight: 400;
			color: @black;
			height: auto;
		}

		span {
			.font-size(10);
			display: block;
			padding-top: 2px;
		}

		img {
			vertical-align: top;
			margin-right: 3px;
		}
	}

	.entity {
		display: flex;
		flex-direction: row;
		margin-top: 10px;

		@media @bp_768 {
			margin-top: 0;
		}

		.btn-play-track {
			margin-left: 16px;
		}

		figure {
			border: 1px solid #E8ECED;
			width: 114px; //120px
			height: 114px; //120px
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		article {
			display: flex;
			flex-direction: column;
			padding-left: 16px;
			padding-right: 16px;
			justify-content: flex-start;
			padding-top: 2px;
		}

		a {
			color: inherit;
		}

		h3 {
			.font-size(15);
			//.clamp-lines(2);
			line-height: 18px;
			font-weight: 500;
			word-break: break-word;

			display: flex;
			flex-direction: row;
			align-items: center;

			a {
				.clamp-lines(1);
			}

			.mini-badges {
				padding-right: 12px;
			}
		}

		.rank {
			.font-size(10);
			.clamp-lines(1);

			img {
				vertical-align: middle;
			}

			strong {
				vertical-align: unset;
			}
		}

		.stats {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-top: 4px;
		}

		.artists {
			.clamp-lines(1);
			.font-size(12);
			color: @grey-1;
			line-height: 1;
		}
	}
}