@pro-content-module-padding: 24px;
@stats-border-color: #D5DDE0;

.pro-content-navigation {
	.transition(box-shadow, 200ms, linear);
	.box-shadow(0 0 15px 0 rgba(0,0,0,0.08)); //REMOVE THIS WHEN JS is DONE
	position: sticky;
	z-index: 3;
	top: -1px;
	//border-bottom: 12px solid @white-1;

	&.is-sticky {
		.box-shadow(0 0 15px 0 rgba(0,0,0,0.08));
	}

	& + .pro-content-module {
		//margin-top: 24px;
		margin-top: 32px;
	}

	& + .pro-section {
		padding-top: 20px;

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

	&.mobile-only {
		margin: 0 -10px;

		@media @bp_768 {
			display: none;
		}
	}

	&.fullscreen {
		top: -60px;

		@media @bp_1024 {
			top: -120px;
		}

		&.sticky {

			h1 {

				@media @bp_1024 {
					.font-size(24);
					background-color: @white;
					position: absolute;
					bottom: -42px;
					left: 0;
					text-align: left;
					max-width: 30%;
					position: absolute;
					z-index: 1;
				}
			}
		}

		.main-menu,
		.sub-menu {
			position: relative;
			overflow-y: hidden;
			overflow-x: auto;

			@media @bp_768 {
				overflow: visible;
			}

			&:before {

				@media @bp_768 {
					.prevent-click;
					content: "";
					position: absolute;
					top: 0;
					left: -200%;
					bottom: 0;
					right: -200%;
					background-color: @white;
					z-index: -1;
				}
			}

			ul {
				justify-content: center;
			}
		}
	}

	&.rock {

		.pro-content-navigation-title {
			background-color: @rock;
		}
	}

	&.country {

		.pro-content-navigation-title {
			background-color: @country;
		}
	}

	&.pop {

		.pro-content-navigation-title {
			background-color: @pop;
		}
	}

	&.hip-hop {

		.pro-content-navigation-title {
			background-color: @hip-hop;
		}
	}

	&.rnb {

		.pro-content-navigation-title {
			background-color: @rnb;
		}
	}

	&.latin {

		.pro-content-navigation-title {
			background-color: @latin;
		}
	}

	&.electronic {

		.pro-content-navigation-title {
			background-color: @electronic;
		}
	}

	&.rock {

		.pro-content-navigation-title {
			background-color: @rock;
		}
	}

	&.metal {
		
		.pro-content-navigation-title {
			background-color: @metal;
		}
	}

	&.punk {

		.pro-content-navigation-title {
			background-color: @punk;
		}
	}

	&.jazz {

		.pro-content-navigation-title {
			background-color: @jazz;
		}
	}

	&.reggae {

		.pro-content-navigation-title {
			background-color: @reggae;
		}
	}

	&.blues {

		.pro-content-navigation-title {
			background-color: @blues;
		}
	}

	&.classical {

		.pro-content-navigation-title {
			background-color: @classical;
		}
	}

	&.religious {

		.pro-content-navigation-title {
			background-color: @religious;
		}
	}

	&.european {

		.pro-content-navigation-title {
			background-color: @european;
		}
	}

	&.asian {

		.pro-content-navigation-title {
			background-color: @asian;
		}
	}

	&.middle-eastern {

		.pro-content-navigation-title {
			background-color: @middle-eastern;
		}
	}

	&.african {

		.pro-content-navigation-title {
			background-color: @african;
		}
	}

	.pro-content-navigation-title {
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 24px;
		background-color: @grey;
		position: relative;

		@media @bp_1024 {
			height: 120px;
		}

		&:before {
			.prevent-click;
			content: "";
			position: absolute;
			top: 0;
			left: -200%;
			bottom: 0;
			right: -200%;
			background-color: inherit;
			z-index: -1;
		}

		h1 {
			.font-size(18);
			.box-sizing;
			line-height: 1;
			font-weight: 500;
			text-align: center;
			position: relative;
			padding: 0 24px;

			@media @bp_1024 {
				.font-size(30);
			}	

			span {
				.clamp-lines(1);
				line-height: 1;
			}
		}
	}

	.main-menu {
		background-color: @white;
		padding: 12px 24px;
		overflow-y: hidden;
		overflow-x: auto;
		scrollbar-width: thin;

		@media @bp_768 {
			padding: 18px 24px;
		}

		@media @bp_1024 {
			overflow: visible;
		}

		&::-webkit-scrollbar {
			height: 5px;
		}

		&::-webkit-scrollbar-button {
			//background: #000;
		}

		&::-webkit-scrollbar-track-piece {
			background: #eee;
		}

		&::-webkit-scrollbar-thumb {
			background: #ccc;
		}

		.item {
			position: relative;

			&.active {

				&:after {
					content: "";
					position: absolute;
					left: -4px;
					right: -4px;
					bottom: -12px;
					height: 2px;
					background-color: @red;
					display: inline-block;
					z-index: 1;

					@media @bp_768 {
						bottom: -18px;
					}

					@media @bp_1024 {
						bottom: -20px;
					}
				}
			}
		}
	}

	.sub-menu {
		border-top: 2px solid @white-1;
		background-color: @white;
		padding: 6px 24px;
		overflow-y: visible;
		overflow-x: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;

		@media @bp_1024 {
			overflow-x: unset;
		}

		.btn {
			.font-size(12);
			letter-spacing: 1px;
			line-height: 1;
			font-weight: 500;
			text-transform: uppercase;
			color: @grey-1;
			white-space: nowrap;
			align-items: center;
			height: 28px;

			@media @bp_768 {
				letter-spacing: 2px;
			}

			&:hover {
				color: @blue;
			}
		}

		.pro-search {
			display: none;

			@media @bp_1024 {
				display: flex;
				flex: 0 1 210px;
				min-width: 210px;
			}

			.pro-search-wrapper,
			.search-wrapper {
				width: 100%;
			}
			
			.pro-search-input {
				background-color: #F6F6F6;
				border-color: #F6F6F6;
				height: 28px;
				width: 100%;
			}

			.results {
				border-top: 1px solid @white;
				background-color: #F6F6F6;

				.result-item {
					padding: 4px 8px;
					cursor: pointer;

					&:hover {
						background-color: #eee;
					}
				}
			}
		}

		ul {
			align-items: center;

			@media @bp_768 {
				flex: 1 0;
			}
		}
	}

	ul {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;

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

		.item {
			margin-right: 12px;

			@media @bp_768 {
				margin-right: 32px;
			}

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				margin: 0;
				padding-right: 24px;

				@media @bp_1024 {
					padding-right: 0;
				}
			}

			&.active {

				.btn {

					&:not([disabled]):not(.disabled) {
						color: @black;
					}
				}
			}
		}
	}
}

.value-change {
	.font-size(12);
	display: block;
	text-transform: uppercase;
	letter-spacing: 1px;
	text-align: left;
	line-height: 1;
	font-weight: 500;
	color: #707580;

	&.none {

		&:before {
			background-image: none;
		}
	}

	&.down {
		color: #E02020;

		&:before {
			background-image: url('../images/svg/icon-rankchange-down.svg');
		}
	}

	&.up {
		color: #4E9800;

		&:before {
			background-image: url('../images/svg/icon-rankchange-up.svg');
		}
	}

	&:before {
		content: "";
		background-image: url('../images/svg/icon-rankchange-same.svg');
		background-position: left center;
		background-repeat: no-repeat;
		background-size: 10px;
		width: 16px;
		height: 10px;
		display: inline-block;
		vertical-align: baseline;
	}
}

.pro-v2 {
	padding-top: 33px;

	@green: #68e2ac; //#6be2ad;
	@red: #f87e8e; //#f87e90;
	@yellow: #ffe76e; //#FFE45D;

	&.country,
	&.genres {
		//padding-top: 0;
		margin-top: -65px;
		padding-top: 65px;

		.layout-grid-content {
			max-width: 1116px;
			margin: 0 auto;
		}
	}

	&.artist,
	&.beatport,
	&.audience {
		//margin-top: -65px;
		//padding-top: 98px;
		padding-top: 36px;
	}

	.pro-paywall-v2 {
		.font-size(12);
		line-height: 18px;
		text-align: center;
		padding: 30px;
		background-color: @white;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 24px;


		@media @bp_768 {
			.font-size(15);
			line-height: 24px;
			padding: 40px;
		}

		h2 {
			.font-size(28);
			line-height: 32px;
			font-weight: 500;

			@media @bp_768 {
				.font-size(36);
				line-height: 48px;
			}

			& + p {

				@media @bp_768 {
					max-width: 60%;
				}
			}
		}

		.floater {
			.box-sizing;
			.enable-click;
			background-color: @white;
			width: 100%;
			max-width: 450px;
			padding: 32px;

			@media @bp_768 {
				padding: 44px;
			}

			&.loading {
				position: relative;

				&:before {
					z-index: 10;
				}

				&:after {
					z-index: 9;
				}

			}

			&.forgot-password {

				@media @bp_768 {
					min-height: 370px;
				}
			}

			&.log-in {

				.divider {
					margin-top: 6px;
				}
			}

			h2 {
				.font-size(20);
				font-weight: 600;
				padding-bottom: 12px;
				letter-spacing: 0.4px;

				@media @bp_768 {
					.font-size(28);
					padding-bottom: 26px;
				}

				& + p {
					padding-top: 0;
					margin-top: 0;
					max-width: 100%;
				}
			}

			.top-benefits {
				.font-size(12);
				line-height: 18px;
				padding-bottom: 16px;

				@media @bp_768 {
					.font-size(14);
					line-height: 24px;
					padding-bottom: 26px;
				}

				li {
					margin-top: 4px;
					background-position: left top 4px;
					background-repeat: no-repeat;
					background-size: 12px;
					background-image: url('../images/svg/checkmark-red.svg');
					padding-left: 22px;

					@media @bp_768 {
						padding-left: 30px;
						background-size: 15px;
						margin-top: 6px;
						background-position: left top 6px;
					}

					&:first-child {
						margin-top: 0;
					}
				}
			}

			.actions {
				overflow: hidden;

				.item {
					.font-size(0);
					padding: 6px 0;
					line-height: 1;
				}

				.divider {
					.font-size(10);
					display: inline-block;
					position: relative;
					padding: 0 16px;
					text-transform: uppercase;
					color: #929699;
					line-height: 1;

					@media @bp_768 {
						.font-size(12);
						height: 14px;
					}

					&:before,
					&:after {
						content: "";
						position: absolute;
						top: 50%;
						margin-top: -1px;
						height: 1px;
						background-color: #E7E7E7;
					}

					&:before {
						right: 100%;
						left: -300px;
					}

					&:after {
						left: 100%;
						right: -300px;
					}
				}
			}

			.switcher {
				.font-size(11);
				display: block;
				font-weight: 400;
				color: #808080;
				padding-top: 8px;

				@media @bp_768 {
					.font-size(12);
				}

				a {
					.text-decoration-ink;
					color: #808080;

					&.blue {
						text-decoration: none;
						color: @blue;

						&:hover,
						&:active {
							color: @blue-roll;
						}
					}
				}
			}

			.btn-back {
				.font-size(0);
				background-position: left center;
				background-repeat: no-repeat;
				background-size: 12px;
				background-image: url('../images/svg/arrow-back-red.svg');
				width: 22px;
				height: 16px;
				margin-right: 6px;
				vertical-align: middle;
				margin-top: -2px;

				@media @bp_768 {
					background-size: 16px;
				}
			}

			.form-row {
				padding: 11px 0;

				&.has-error {

					input[type="text"],
					input[type="email"],
					input[type="password"] {
						border-color: @red;
					}

					.error-msg {
						display: block;
					}
				}
			}

			.error-msg {
				padding-top: 13px;
				line-height: 1;
				margin-bottom: -8px;

				&.general {
					text-align: center;
					padding: 6px 0;
				}
			}

			.password-wrapper {
				position: relative;

				.btn-password-toggle {
					position: absolute;
					top: 0;
					right: 0;
					z-index: 1;
				}
			}
		

			input[type="text"],
			input[type="email"],
			input[type="password"] {
				.box-sizing;
				.font-size(12);
				border: 1px solid #E0E3E5;
				width: 100%;
				height: 40px;
				color: @black;
				line-height: 1;
				padding: 0 24px;
				background-color: @white;
				color: @black;

				@media @bp_768 {
					.font-size(14);
					height: 50px;
					background-size: 25px;
				}
			}
		}
	}

	.pro-paywall {
		.font-size(12);
		line-height: 18px;
		text-align: center;
		padding: 30px;

		@media @bp_768 {
			.font-size(15);
			line-height: 24px;
			padding: 40px;
		}

		h2 {
			.font-size(28);
			line-height: 32px;
			font-weight: 500;

			@media @bp_768 {
				.font-size(36);
				line-height: 48px;
			}

			@media @bp_1024 {

			}
		}

		figure {
			margin-top: 15px;
		}

		.feature-animation {
			position: relative;
			display: inline-block;

			.animation-wrapper {
				position: absolute;
				top: 6.8%;
				left: 14.8%;
				width: 70.5%;
				overflow: hidden;
				height: 82%;
			}

			.animation-element {
				
				&.pw-artist {
					.animation(paywall-animation-artist 30s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-festival {
					.animation(paywall-animation-festival 30s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-audience {
					.animation(paywall-animation-audience 12s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-label {
					.animation(paywall-animation-label 30s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-beatport {
					.animation(paywall-animation-beatport 30s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-artist-chart {
					.animation(paywall-animation-artist-chart 20s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-beatport-chart {
					.animation(paywall-animation-beatport-chart 20s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-country {
					.animation(paywall-animation-country 30s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-compare-artists {
					.animation(paywall-animation-compare-artists 30s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-genre {
					.animation(paywall-animation-genre 30s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-label-chart {
					.animation(paywall-animation-label-chart 25s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-spotify {
					.animation(paywall-animation-artist-spotify 25s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-spotify-chart {
					.animation(paywall-animation-spotify-chart 25s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}

				&.pw-festival-chart {
					.animation(paywall-animation-festival-chart 25s cubic-bezier(0.770, 0.000, 0.175, 1.000) 1s infinite);
				}
			}
		}

		.buttons {
			.font-size(0);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 30px 0;

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

			.btn {
				margin: 8px;
				width: 254px;

				@media @bp_768 {
					padding: 17px;
				}
			}
		}
	}

	.more-info {
		.font-size(0);
		display: inline-block;
		z-index: 1;
		line-height: 1;
		margin-left: 6px;
		position: relative;
		text-transform: none;

		@media @bp_768 {
			right: 0;
		}

		&.up {

			&:before {
				.rounded-corners(0);
				background-image: url('../images/svg/icon-trend-up.svg');
			}
		}

		&.down {

			&:before {
				.rounded-corners(0);
				background-image: url('../images/svg/icon-trend-down.svg');
			}
		}

		&.wide {
			
			> article {
				width: 200px;

				@media @bp_768 {
					width: 250px;
				}
			}
		}

		&.text-align-left {

			> article {
				text-align: left;
			}
		}

		&:hover {

			> article {
				display: block;
			}
		}

		&:before {
			.font-size(10);
			.rounded-corners(50%);
			color: @white;
			width: 12px;
			height: 12px;
			display: inline-block;
			content: "";
			text-align: center;
			cursor: pointer;
			background-repeat: no-repeat;
			background-position: center;
			background-size: 12px;
			background-image: url('../images/svg/icon-help-tooltip.svg');
		}

		> article {
			.box-shadow(0 2px 8px 0 rgba(0,0,0,0.08));
			//.box-shadow(0 0 4px 0 rgba(190,203,208,0.5));
			.font-size(12);
			.rounded-corners(2px);
			.box-sizing;
			line-height: 20px;
			padding: 12px;
			display: none;
			position: absolute;
			right: 24px;
			top: 0;
			color: @black;
			background-color: @white;
			width: 192px;
			text-align: center;

			ul {
				padding: 10px 0 10px 20px;

				li {
					list-style-type: disc;
				}
			}

			table {
				width: 100%;

				.card-micro {
					max-width: 170px;
				}

				thead {

					td {
						border-bottom: 1px solid #A0AEB4;
						padding-bottom: 12px;
					}
				}

				td {

					&.r {
						text-align: right !important;
					}
				}
			}
		}

		.info-title {
			border-bottom: 1px solid #A0AEB4;
			margin-bottom: 5px;
		}
	}

	.btn-filter-tag {
		vertical-align: middle;
		color: @blue;
		border-color: @blue;
		font-weight: 500;
		border-width: 1px;
		line-height: 22px;
		padding: 0 12px;
		letter-spacing: 0.5px;

		&.small {
			.font-size(10);
		}

		&.active {
			.prevent-click();
			background-color: @blue;
			border-color: @blue;
			color: @white;

			&:hover {
				background-color: @blue;
				border-color: @blue;
				color: @white;
			}
		}

		&.shazam,
		&.youtube,
		&.instagram,
		&.tiktok {

			&:before {
				content: "";
				width: 16px;
				height: 16px;
				display: inline-block;
				margin-right: 6px;
				background-repeat: no-repeat;
				background-size: contain;
				background-position: center;
				vertical-align: middle;
				background-size: 16px;
			}
		}

		&.shazam {

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

		&.youtube {

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

		&.instagram {

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

		&.tiktok {

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

		&.remove {
			background-image: url('../images/svg/close-blue.svg');
			background-size: 9px;
			background-repeat: no-repeat;
			background-position: right 10px center;
			padding-right: 28px;
			border-color: @indigo-2;
			color: @black;

			&:hover {
				background-image: url('../images/svg/close-blue.svg');
				border-color: @blue-roll;
				color: @black;
			}
		}

		&.disabled,
		&:disabled {
			.opacity(1);
			color: #D5DDE0;
			border-color: #D5DDE0;

			&:hover {
				background-color: @white;
				border-color: #D5DDE0;
				color: #D5DDE0;
			}

			&:before {
				.grayscale;
				.opacity(0.25);
			}
		}

		&:hover {
			background-color: transparent;
			border-color: @blue-roll;
			color: @blue-roll;
		}
	}

	.custom-tooltip {
		.font-size(12);
		//.box-shadow(0px 1px 2px rgba(0,0,0,0.15));
		//background-color: @white;
		padding: 6px;
		line-height: 1;

		&.rock {
			
			&:before {
				background-color: @rock;
			}
		}

		&.country {
			text-transform: none;
			
			&:before {
				background-color: @country;
			}
		}

		&.pop {
			
			&:before {
				background-color: @pop;
			}
		}

		&.hip-hop {
			
			&:before {
				background-color: @hip-hop;
			}
		}

		&.rnb {
			
			&:before {
				background-color: @rnb;
			}
		}

		&.latin {
			
			&:before {
				background-color: @latin;
			}
		}

		&.electronic {
			
			&:before {
				background-color: @electronic;
			}
		}

		&.rock {
			
			&:before {
				background-color: @rock;
			}
		}

		&.metal {
			
			&:before {
				background-color: @metal;
			}
		}

		&.punk {
			
			&:before {
				background-color: @punk;
			}
		}

		&.jazz {
			
			&:before {
				background-color: @jazz;
			}
		}

		&.reggae {
			
			&:before {
				background-color: @reggae;
			}
		}

		&.blues {
			
			&:before {
				background-color: @blues;
			}
		}

		&.classical {
			
			&:before {
				background-color: @classical;
			}
		}

		&.religious {
			
			&:before {
				background-color: @religious;
			}
		}

		&.european {
			
			&:before {
				background-color: @european;
			}
		}

		&.asian {
			
			&:before {
				background-color: @asian;
			}
		}

		&.middle-eastern {
			
			&:before {
				background-color: @middle-eastern;
			}
		}

		&.african {
			
			&:before {
				background-color: @african;
			}
		}

		&.other {
			
			&:before {
				background-color: #ddd;
			}
		}

		&:before {
			.rounded-corners(50%);
			content: "";
			width: 8px;
			height: 8px;
			vertical-align: middle;
			display: inline-block;
			margin-right: 8px;
			background-color: @grey-1;
		}
	}

	.pro-section-title {
		.font-size(12);
		line-height: 28px;
		font-weight: 500;
		color: @grey-1;
		text-transform: uppercase;
		padding: 66px 0 12px 0;
	}

	.btn-solid {
		min-width: 180px;

		&.black {

			&:hover {
				background-color: #333;
				color: @white;
			}
		}
	}

	.btn-text {
		.font-size(12);
		letter-spacing: 2px;
		font-weight: 500;
		padding-bottom: 2px;

		&:after {
			margin-top: 0px;
		}

		&:hover {
			padding-bottom: 2px;

			@media @bp_768 {
				padding-bottom: 2px;
			}
		}
	}

	.avg-pos-percent {
		.box-sizing;
		position: relative;
		padding: 0 20px 15px 20px;
		max-width: 280px;

		& + .avg-pos-percent {
			margin-top: 10px;
		}

		&.mini {
			padding: 0;

			.scale {

				.line {
					margin-top: -1px;
					left: 0;
					right: 0;
				}

				label {
					display: none;
				}
			}

			.bars {
				height: 33px;

				.bar-item {

					&:first-child,
					&:last-child {

						&:empty {
							
							&:before {
								content: none;
							}
						}
					}

					.bar {
						border: 0;
					}
				}
			}
		}

		.scale {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			z-index: 0;

			.line {
				.horizontal(#B4DEC1, #258145);
				position: absolute;
				top: 50%;
				left: 20px;
				right: 20px;
				margin-top: -9px;
				height: 3px;

				/*&:before,
				&:after {
					content: "";
					position: absolute;
					left: 0;
					top: -3px;
					bottom: -3px;
					width: 1px;
					background-color: #258145;
				}

				&:after {
					left: auto;
					right: 0;
					background-color: #B4DEC1;
				}*/
			}

			label {
				.font-size(10);
				position: absolute;
				bottom: 0;
				left: 0;
				color: @grey-1;
				letter-spacing: 0;

				& + label {
					left: auto;
					right: 0;
				}
			}
		}

		.bars {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			height: 43px;
		}

		/*.bar-item-loop(@i) when (@i > 0) {
			&:nth-child(@{i}) {
				
				.bar {
					background-color: lighten(#258145, 3%*@i);
				}
			}
			.bar-item-loop(@i - 1);
		}*/

		.bar-item {
			.box-sizing;
			width: 10%;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100%;

			&:first-child {

				&:empty {
					
					&:before {
						content: "";
						border-left: 1px solid #258145;
						position: absolute;
						left: 0;
						top: 50%;
						height: 9px;
						margin-top: -4px;
					}
				}

				.bar {
					background-color: #2C864B; //#298449;
				}
			}

			&:nth-child(2) {

				.bar {
					background-color: #3A8F57; //#30884F;
				}
			}

			&:nth-child(3) {

				.bar {
					background-color: #499964; //#378D55;
				}
			}

			&:nth-child(4) {

				.bar {
					background-color: #57A170; //#3E925B;
				}
			}

			&:nth-child(5) {

				.bar {
					background-color: #65AB7D; //#459661;
				}
			}

			&:nth-child(6) {

				.bar {
					background-color: #74B489; //#4D9B67;
				}
			}

			&:nth-child(7) {

				.bar {
					background-color: #82BD95; //#539F6D;
				}
			}

			&:nth-child(8) {

				.bar {
					background-color: #90C7A2; //#5BA474;
				}
			}

			&:nth-child(9) {

				.bar {
					background-color: #9FD0AE; //#62A97A;
				}
			}

			&:nth-child(10) {

				.bar {
					background-color: #ADDABB; //#69AE80;
				}
			}

			/*&:nth-child(11) {

				.bar {
					background-color: #70B286;
				}
			}

			&:nth-child(12) {

				.bar {
					background-color: #77B68C;
				}
			}

			&:nth-child(13) {

				.bar {
					background-color: #7EBB92;
				}
			}

			&:nth-child(14) {

				.bar {
					background-color: #85C099;
				}
			}

			&:nth-child(15) {

				.bar {
					background-color: #8DC49F;
				}
			}

			&:nth-child(16) {

				.bar {
					background-color: #94C9A5;
				}
			}

			&:nth-child(17) {

				.bar {
					background-color: #9BCEAB;
				}
			}

			&:nth-child(18) {

				.bar {
					background-color: #A3D3B2;
				}
			}

			&:nth-child(19) {

				.bar {
					background-color: #A9D7B8;
				}
			}*/

			&:last-child {

				&:empty {
					
					&:before {
						content: "";
						border-left: 1px solid #B4DEC1;
						position: absolute;
						right: 0;
						top: 50%;
						height: 9px;
						margin-top: -4px;
					}
				}

				.bar {
					background-color: #B1DCBE;
					border-right: 0;
				}
			}

			.bar {
				.box-sizing;
				width: 100%;
				border-right: 1px solid @white;
			}
		}
	}

	.meter {
		margin: 0 auto;
		width: 100%;
		max-width: 270px;
		margin-top: -10px;

		h3 {
			.font-size(12);
			font-weight: 500;
			line-height: 16px;
			padding-top: 10px;
			display: inline-block;

			@media @bp_640 {
				padding-top: 20px;
			}

			br {
				display: none;

				@media @bp_768 {
					display: block;
				}
			}
		}

		.more-info {
			position: absolute;
			top: 10px;
			right: -25px;

			@media @bp_768 {
				top: 20px;
			}
		}

		.gauge {
			position: relative;
			width: 100%;
			line-height: 1;

			&.poor {

				&:before {
					content: url('../images/svg/chart-health-meter-poor.svg');
				}
			}

			&.fair {

				&:before {
					content: url('../images/svg/chart-health-meter-fair.svg');
				}
			}

			&.good {

				&:before {
					content: url('../images/svg/chart-health-meter-good.svg');
				}
			}

			&.zero-state {
				.grayscale();
				padding: 0;

				.needle {
					display: none;
				}

				&:before {
					content: url('../images/svg/chart-health-meter.svg');
				}
			}
		}

		.needle {
			.transform-origin(right, center);
			position: absolute;
			right: 50%;
			bottom: 4px;
			width: 44%;
			height: 6px;
			margin-top: -6px;
			z-index: 2;
			content: url('../images/svg/chart-health-meter-needle.svg');
		}
	}

	.flag {
		width: 15px;
		height: auto;
		margin-right: 2px;
		vertical-align: middle;
		line-height: 1;
		border: 1px solid @blue-grey;
	}

	.card-micro {
		position: relative;
		height: 40px;
		display: flex;
		align-items: center;

		&.beatport, {
			height: 32px;

			h3 {
				color: @black;
			}

			figure {
				width: 30px; //32px;
				height: 30px; //32px;

				& + .article {
					padding-left: 48px;
				}
			}

			article {
				//height: 32px;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}
		}

		&.artist,
		&.label,
		&.user,
		&.song,
		&.festival,
		&.station {
			height: 50px;
			margin: 4px 0;

			h3 {
				color: @black;
			}

			figure {
				width: 48px; //50px;
				height: 48px; //50px;
			}

			article {
				height: 50px;
				padding-left: 66px;
			}
		}

		&.station {

			article {
				justify-content: center;
			}

			h3 {
				display: flex;
				align-items: center;

				em {
					.clamp-lines(1);
					font-style: normal;
					white-space: normal;
				}

				.country-flag {
					width: 65px;
					min-width: 65px;
					text-transform: uppercase;
					color: @grey-1;
					display: flex;
					align-items: center;

					img {
						margin-left: 12px;
					}
				}
			}

			.spins {
				.font-size(12);
				color: @grey-1;
				padding-top: 6px;
				line-height: 1;
			}
		}

		&.label {

			.genre {
				.clamp-lines(1);
				line-height: 1;
			}
		}

		&.song {

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

			article {

				a {
					max-width: none;
				}

				h3 {
					.text-overflow;
				}
			}

			time {
				.font-size(10);
				line-height: 1;
				color: @grey-1;
				display: block;
				padding-top: 2px;
			}
		}

		&.playlist {
			height: 32px;

			figure {
				width: 30px; //32px;
				height: 30px; //32px;

				& + .article {
					padding-left: 48px;
				}
			}

			article {
				height: 32px;

				a {
					max-width: none;
				}

				h3 {
					.text-overflow;
				}
			}
		}

		&.user {
			margin: 8px 0;

			h3 {
				.clamp-lines(2);
			}

			article {
				height: 50px;
				position: relative;
				padding-right: 8px;
				padding-left: 58px;
			}

			.job-title {
				.font-size(10);
				.clamp-lines(1);
				line-height: 1;
			}

			.btn-pro-txt {

			}

			.btn-contact-user {
				position: absolute;
				right: 0;
				top: 50%;
				margin-top: -7px;
			}
		}

		&.artist {

			article {
				height: 42px;
			}

			.country {
				color: @grey-1;
			}

			.row {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
			}

			.hot {
				margin-left: 8px;
			}
		}

		a,
		figure {

			& + article {
				padding-left: 48px;
			}
		}

		figure {
			border: 1px solid @blue-grey;
			width: 38px; //40px;
			height: 38px; //40px
			position: absolute;
			left: 0;
			top: 0;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;

			&.country {
				background-color: @country;
			}

			&.pop {
				background-color: @pop;
			}

			&.hip-hop {
				background-color: @hip-hop;
			}

			&.rnb {
				background-color: @rnb;
			}

			&.latin {
				background-color: @latin;
			}

			&.electronic {
				background-color: @electronic;
			}

			&.rock {
				background-color: @rock;
			}

			&.metal {
				background-color: @metal;
			}

			&.punk {
				background-color: @punk;
			}

			&.jazz {
				background-color: @jazz;
			}

			&.reggae {
				background-color: @reggae;
			}

			&.blues {
				background-color: @blues;
			}

			&.classical {
				background-color: @classical;
			}

			&.religious {
				background-color: @religious;
			}

			&.european {
				background-color: @european;
			}

			&.asian {
				background-color: @asian;
			}

			&.middle-eastern {
				background-color: @middle-eastern;
			}

			&.african {
				background-color: @african;
			}

			&.other {
				background-color: #ddd;
			}
		}

		article {
			.box-sizing;
			width: 100%;
			height: 40px;
			display: flex;
			flex-direction: column;
			justify-content: space-around;

			a {
				color: @black;
				display: inline-block;
				max-width: calc(~'100% - 30px');
				vertical-align: middle;
			}

			.btn-play-track {
				display: inline-block;
				vertical-align: middle;
				margin-left: 8px;
			}
		}

		h3 {
			.font-size(12);
			.clamp-lines(1);
			padding: 0;
			line-height: 16px;
			font-weight: 500;
			word-break: break-all;
		}

		.country {
			.font-size(10);
			color: #808080;
		}

		.btn-link-outside {
			.font-size(0);
			width: 16px;
			height: 16px;
			min-width: 16px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 32px;
			background-image: url('../images/svg/icon-link.svg');
			margin-left: 8px;
		}
	}

	.country {
		text-transform: uppercase;
		line-height: 1;
		white-space: nowrap;
	}

	.btn-play-tutorial,
	.btn-how-to-use-this {
		color: @blue;
		letter-spacing: 2px;

		&:hover {
			color: @blue-roll;
		}
	}

	.btn-how-to-use-this {
		display: inline-block;
		text-align: right;
	}

	.graph-tooltip {
		.font-size(12);
		background-color: @white;
		line-height: 1;
		color: @black;
		padding: 8px 24px 8px 12px;
		display: inline-block;

		&.has-shadow {
			.box-shadow(0 2px 8px 0 rgba(0,0,0,0.08));
			//.box-shadow(0 0 4px 0 rgba(190,203,208,0.5));
		}

		label {
			white-space: nowrap;
			position: relative;
		}

		.year {
			.font-size(10);
			color: @grey-1;
			display: block;
			padding-bottom: 10px;
		}

		.circle {
			.rounded-corners(50%);
			width: 8px;
			height: 8px;
			display: inline-block;
			margin-right: 6px;
			position: absolute;
			left: 0;
			top: 4px;

			& + .label-title {
				padding-left: 16px;
			}
		}

		.label-title {

			time {
				.box-sizing;
				.font-size(10);
				color: #494C52;
				display: inline-block;
				padding-right: 6px;
				min-width: 45px;

			}
		}

		> .country + .channel-value {
			margin-top: 16px;
		}

		.label-title {
			
			&.genre {
				.text-overflow;
				display: inline-block;
				max-width: 125px;
				vertical-align: middle;
			}
		}

		.channel-value {
			line-height: 1;

			img {
				vertical-align: middle;
				margin-right: 2px;
			}

			.percent {
				padding-left: 10px;
			}
		}

		.percent {
			color: @grey-1;
			display: inline-block;
		}

		td {
			padding: 4px;

			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;
			}
		}

		.data-table-wrapper {
			max-width: 300px;

			.paddster {
				padding: 0 12px 24px 12px;
			}

			table {
				width: 100%;
			}

			.card-micro {
				//max-width: 170px;
				max-width: 100%;
			}

			thead {

				td {
					border-bottom: 1px solid #A0AEB4;
					padding-bottom: 12px;
				}
			}

			tr {

				&:hover {
					cursor: default;
					background-color: transparent;

					th,
					td {
						background-color: transparent;
					}
				}
			}	

			td {
				padding-left: 12px;
				padding-right: 12px;
				border-bottom: 1px solid #e8eced;

				&.r {
					text-align: right !important;
				}
			}
		}
	}

	.graph-legend {
		padding-top: 16px;

		.legend {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
			padding-top: 20px;
		}

		.item {
			.font-size(0);
			line-height: 1;

			&:first-child {
				padding-right: 24px;
			}

			&:last-child {
				padding-right: 0;
			}
		}

		label {
			.font-size(10);
			line-height: 15px;
			position: relative;
		}

		.value {
			.font-size(12);
			padding-left: 16px;
			position: relative;
			
			&.other {
				color: @grey-1;
			}

			&.country {
				.font-size(12);
				text-transform: none;
				
				&:before {
					background-color: @country;
				}
			}

			&.pop {
				
				&:before {
					background-color: @pop;
				}
			}

			&.hip-hop {
				
				&:before {
					background-color: @hip-hop;
				}
			}

			&.rnb {
				
				&:before {
					background-color: @rnb;
				}
			}

			&.latin {
				
				&:before {
					background-color: @latin;
				}
			}

			&.electronic {
				
				&:before {
					background-color: @electronic;
				}
			}

			&.rock {
				
				&:before {
					background-color: @rock;
				}
			}

			&.metal {
				
				&:before {
					background-color: @metal;
				}
			}

			&.punk {
				
				&:before {
					background-color: @punk;
				}
			}

			&.jazz {
				
				&:before {
					background-color: @jazz;
				}
			}

			&.reggae {
				
				&:before {
					background-color: @reggae;
				}
			}

			&.blues {
				
				&:before {
					background-color: @blues;
				}
			}

			&.classical {
				
				&:before {
					background-color: @classical;
				}
			}

			&.religious {
				
				&:before {
					background-color: @religious;
				}
			}

			&.european {
				
				&:before {
					background-color: @european;
				}
			}

			&.asian {
				
				&:before {
					background-color: @asian;
				}
			}

			&.middle-eastern {
				
				&:before {
					background-color: @middle-eastern;
				}
			}

			&.african {
				
				&:before {
					background-color: @african;
				}
			}

			&.other {
				
				&:before {
					background-color: #ddd;
				}
			}

			&.male {
				
				&:before {
					background-color: @male;
				}
			}

			&.female {
				.font-size(12);
				text-transform: none;
				
				&:before {
					background-color: @female;
				}
			}

			&:before {
				.rounded-corners(50%);
				content: "";
				width: 8px;
				height: 8px;
				position: absolute;
				left: 0;
				top: 2px;
				background-color: @grey-1;
			}

			.percentage {
				color: @grey-1;
				margin-left: 6px;
			}
		}

		.percentage {
			color: @grey-1;
		}

		.circle {
			.rounded-corners(50%);
			width: 8px;
			height: 8px;
			display: inline-block;
			margin-right: 8px;

			& + .label-title {
				padding-left: 16px;
			}
		}

		.label-title {
			
			&.genre {
				.text-overflow;
				display: inline-block;
				max-width: 125px;
				vertical-align: middle;
			}
		}
	}

	.sidebar-modules-wrapper {
		background-color: @white-1;
		position: relative;
		z-index: 1;
	}

	.sidebar-module {
		.font-size(12);
		line-height: 16px;
		background-color: @white;
		color: @grey-1;

		& + .sidebar-module {
			margin-top: 8px;
		}

		&.sidebar-search {
			padding: 0;

			@media @bp_768 {
				position: sticky;
				top: 396px;
			}

			.toolbar-filter-search {
				padding: 0;
				height: auto;

				&.open {

					.results {
						display: block;
					}
				}

				.search-wrapper {
					margin: 0;
					//padding: 0 12px;

					&.loading {

						&:before {
							.opacity(1);
						}
					}

					&:before {
						right: 30px;
					}

					.search-input {
						background-color: @white;
						background-image: url(../images/svg/search.svg);
					}
				}

				.results {
					display: none;
					padding-left: 12px;
				}
			}
		}

		.sidebar-module-content-article {
			padding: 16px @pro-content-module-padding;
		}

		.sidebar-module-content-footer {
			padding: 0px @pro-content-module-padding 8px @pro-content-module-padding;
		}

		.sidebar-module-title {
			.font-size(12);
			line-height: 16px;
			color: @black;
			padding-bottom: 10px;
			font-weight: 500;

			span {
				font-weight: 400;
			}
		}

		.update-profile {
			padding-bottom: 40px;
			
			h3 {
				.font-size(14);
				line-height: 18px;
				font-weight: 500;
				padding-bottom: 16px;
			}
		}

		.btn-solid.border {
			padding-right: 6px;
			padding-left: 6px;
		}

		.similar-artists {

			> h3 {
				.font-size(14);
				line-height: 18px;
				font-weight: 500;
				padding-bottom: 16px;
			}

			a {
				color: @black;
			}

			.item {
				padding: 10px 0;
				border-bottom: 2px solid @white-1;

				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					border-bottom: 0;
					padding-bottom: 0;
				}
			}
		}

		.btn-solid {
			min-width: 0;
		}
	}

	.sidebar-find-city {
		margin-top: 16px;
		position: relative;
		z-index: 1;

		.more-info {
			z-index: 2;

			article {
				right: auto;
				left: -120px;
				top: 20px;
				width: 220px;
			}
		}
	}

	.sidebar-entity-info {
		background-color: transparent;
		z-index: 3;

		.sidebar-module-content-article {
			padding: 0 0 10px 0;

			@media @bp_768 {
				padding-bottom: 0;
			}
		}

		.entity-info {
			background-color: @white;
			margin: 0 -10px;
			padding: 8px 10px;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;

			@media @bp_768 {
				margin: 0;
				padding: 0;
				display: block;
			}

			&.festival-card,
			&.venue-card {

				figure {

					@media @bp_768 {
						background-position: center;
						padding-top: 80%;
					}
				}
			}

			&.festival-card {

				h3 {
					.clamp-lines(1);

					@media @bp_768 {
						.clamp-lines(none);
						display: inline-block;
					}
				}
			}

			&.venue-card {

				.event-tonight {
					display: none;

					@media @bp_768 {
						.font-size(10);
						text-transform: uppercase;
						font-weight: 500;
						color: @green;
						line-height: 1;
						display: inline-block;
						padding: 8px;
						background-color: @white;
						position: absolute;
						right: 0;
						bottom: 16px;
					}
				}
			}

			&.horizontal {
				
				@media @bp_768 {
					display: flex;
					flex-direction: row;
				}				

				figure {

					@media @bp_768 {
						width: 64px;
						height: 64px;
						min-width: 50px;
						padding-top: 0;
						position: static;
					}

					@media @bp_1200 {
						width: 88px;
						height: 88px;
						min-width: 88px;
					}
				}

				article {
					display: flex;
					flex: 1;
				}

				.title {

					h3 {
						.font-size(15);
						.clamp-lines(2);
						word-break: break-word;
						line-height: 1;
						padding: 0 16px;

						@media @bp_1200 {
							.font-size(20);
							line-height: 26px;
						}
					}
				}
			}

			.mini-badges {
				.box-shadow(0 2px 8px 0 rgba(0,0,0,0.08));
				.rounded-corners(13px);
				border: 1px solid #F6F6F5;
				position: absolute;
				bottom: -12px;
				right: 8px;
				height: 26px;
				background-color: @white;
				display: inline-flex;
				align-items: center;
				padding: 0 12px;
				z-index: 1;

				* {
					margin: 0 2px;
				}

				.mini-badge {

					&:first-child {
						margin-left: 0;
					}

					&:last-child {
						margin-right: 0;
					}
				}

				.claimed-icon {
					margin: 0;

					& + .mini-badge {
						margin-left: 12px;
					}
				}
			}

			.title {
				display: flex;
				flex-direction: row;

				@media @bp_768 {
					display: block;
				}

				h3 {
					overflow-wrap: break-word;
					word-wrap: break-word;
					word-break: break-word;
				}
			}

			article {
				display: flex;
				flex: 1;
				flex-direction: column;
			}
		}

		.genres-info {
			display: flex;
			flex-direction: row;
			margin-top: -5px;
			padding-bottom: 12px;
			display: none;

			@media @bp_768 {
				display: flex;
			}

			label {
				color: @grey-1;
				padding-left: 8px;
				width: 75px;
			}

			.genres {
				color: @black;

				span {
					display: block;
					line-height: 1;
					padding-bottom: 5px;
				}
			}
		}

		.entity-ranking {
			background-color: @white;
			margin-top: 15px;
			padding-bottom: 10px;

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

		.btn-mobile-follow {
			.font-size(12);
			text-transform: uppercase;
			color: @blue;
			text-align: right;
			white-space: nowrap;
			font-weight: 500;
			letter-spacing: 1px;
			width: 90px;
			min-width: 90px;

			@media @bp_768 {
				display: none;
			}
		}

		figure {
			width: 50px;
			height: 50px;
			min-width: 50px;
			min-height: 50px;
			background-position: center top;
			background-repeat: no-repeat;
			background-size: cover;

			@media @bp_768 {
				width: 100%;
				min-width: 0;
				min-height: 0;
				height: auto;
				width: auto;
				padding-top: 100%;
				position: relative;
			}
		}

		h3 {
			.font-size(18);
			.clamp-lines(2);
			line-height: 20px;
			padding: 0 10px 0 16px;
			font-weight: 500;
			color: @black;
			overflow-wrap: break-word;
			word-wrap: break-word;
			word-break: break-word;

			@media @bp_768 {
				.clamp-lines(none);
				.font-size(24);
				overflow: visible;
				display: inline-block;
				line-height: 28px;
				padding: 20px 8px 16px 8px;
			}
		}

		h4 {
			.font-size(12);
			line-height: 16px;
			color: @black;
			padding: 16px @pro-content-module-padding 10px @pro-content-module-padding;
			font-weight: 500;
			border-top: 1px solid @white-1;

			img {
				margin-right: 6px;
			}
		}

		.claimed-icon {
			width: 12px;

			@media @bp_768 {
				width: 16px;
			}
		}

		.dates {
			padding-left: 16px;
			display: flex;
			flex-direction: row;
			padding-top: 4px;

			@media @bp_768 {
				padding-left: 8px;
				display: block;
			}

			time {
				.font-size(10);
				padding-left: 0;
				padding-bottom: 0;

				@media @bp_768 {
					.font-size(12);
					padding-bottom: 12px;
				}
			}
		}

		time {
			.font-size(12);
			color: @black;
			display: block;
			padding: 0px 8px 12px 8px;
			line-height: 1;

			&:last-child {

				@media @bp_768 {
					padding-bottom: 8px;
				}
			}
		}

		.location-info {
			.font-size(10);
			color: @black;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			padding: 4px 8px 0 16px;

			@media @bp_768 {
				.font-size(12);
				padding: 0 8px 12px 8px;
			}

			.location {
				.clamp-lines(1);
			}
		}

		.rankings {
			.font-size(12);
			color: @grey-1;

			td {
				padding: 3px;

				@media @bp_1300 {
					padding: 3px 6px;
				}

				&:first-child {
					padding-left: 21px;
				}

				&:last-child {
					padding-right: 21px;
				}
			}

			.rank {
				color: @black;
				text-align: right;
				white-space: nowrap;
			}

			.value-change {
				display: inline-block;
				white-space: nowrap;
			}

			.genre {
				.clamp-lines(1);
				word-break: break-all;
			}
		}
	}

	.sidebar-action-buttons {
		display: none;

		@media @bp_768 {
			display: block;
		}
		
		.sidebar-module-content-article {
			padding-left: 8px;
			padding-right: 8px;
		}

		.btn {
			width: 100%;
			font-weight: 500;

			& + .btn {
				margin-top: 16px;
			}
		}
	}

	.sidebar-unlock-content {
		padding: 0;
		display: none;

		@media @bp_768 {
			display: block;
			margin-bottom: 8px;
		}

		.btn-txt {
			.font-size(12);
			font-weight: 500;
			padding: 8px 12px;
		}
	}

	.sidebar-social {
		display: none;

		&:after { //PRELOAD ROLLOVER IMAGES
			position: absolute;
			width: 0;
			height: 0;
			overflow:hidden;
			z-index:-1;
			content: url(../images/svg/icon-link-facebook-color.svg)
					 url(../images/svg/icon-link-twitter-color.svg)
					 url(../images/svg/icon-link-instagram-color.svg)
					 url(../images/svg/icon-link-soundcloud-color.svg)
					 url(../images/svg/icon-link-songkick-color.svg)
					 url(../images/svg/icon-link-spotify-color.svg)
					 url(../images/svg/icon-link-youtube-color.svg)
					 url(../images/svg/icon-link-beatport-color.svg)
					 url(../images/svg/icon-link-linkedin-color.svg)
					 url(../images/svg/icon-link-mixcloud-color.svg)
					 url(../images/svg/icon-link-gigatools-color.svg)
					 url(../images/svg/icon-link-eventbrite-color.svg)
					 url(../images/svg/icon-link-skiddle-color.svg)
					 url(../images/svg/icon-link-ticketmaster-color.svg)
					 url(../images/svg/icon-link-tiktok-color.svg)
					 url(../images/svg/icon-link-tumblr-color.svg)
					 url(../images/svg/icon-link-googleplaymusic-color.svg)
					 url(../images/svg/icon-link-bandsintown-color.svg)
					 url(../images/svg/icon-link-itunes-color.svg)
					 url(../images/svg/icon-link-shazam-color.svg)
					 url(../images/svg/icon-link-deezer-color.svg)
					 url(../images/svg/icon-link-homepage-color.svg)
					 url(../images/svg/icon-link-tidal-color.svg)
					 url(../images/svg/icon-link-napster-color.svg)
					 url(../images/svg/icon-link-amazonmusic-color.svg)
					 url(../images/svg/icon-link-bandcamp-color.svg)
					 url(../images/svg/icon-link-eventim-color.svg); 
		}

		@media @bp_768 {
			display: block;
		}

		.social-icon {
			.transition(transform, 150ms, ease-out);
			width: 16px;
			height: 16px;
			background-size: 16px;
			background-position: center;

			&:hover {
				.scale(1.4);
			}
		}

		.social-list {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: flex-start;
			margin: -4px -8px;
		}

		.item {
			.box-sizing;
			padding: 4px 8px;
			width: 16.66%;
			overflow: visible;
		}

		.actions {
			margin: 0 -12px;
		}

		.btn-pro {
			.box-sizing;
			width: 100%;
			font-weight: 500;
			margin-top: 16px;
		}
	}

	.sidebar-stuff-i-do {
		display: none;

		@media @bp_768 {
			display: block;
		}

		p {
			padding: 0;
			margin: 0;
		}
	}

	.sidebar-downloads {
		display: none;

		@media @bp_768 {
			display: block;
		}

		.item {
			padding: 2px 0;
		}

		a {
			color: @grey-1;

			&:after {
				content: url('../images/svg/icon-download-pro.svg');
				margin-left: 8px;
				display: inline-block;
				vertical-align: middle;
			}

			&:hover,
			&:active {

				&:after {
					content: url('../images/svg/icon-download-pro-roll.svg');
				}
			}
		}
	}

	.sidebar-editions {
		display: none;

		@media @bp_768 {
			display: block;
		}

		tr {

			&:last-child {

				td {
					padding-bottom: 0;
				}
			}
		}

		td {
			padding: 0 0 4px 0;

			&:last-child {
				color: @black;
				padding-left: 8px;
			}
		}
	}

	.sidebar-facts {
		display: none;

		@media @bp_768 {
			display: block;
		}

		tr {

			&:last-child {

				td {
					padding-bottom: 0;
				}
			}
		}

		td {
			padding: 0 0 4px 0;

			&:last-child {
				color: @black;
				padding-left: 8px;
			}
		}
	}

	.sidebar-opening-hours {
		display: none;

		@media @bp_768 {
			display: block;
		}

		.sidebar-module-content-footer {
			text-align: right;
		}

		.opening-hours-table {

			&.show {

				tr {

					td {
						display: table-cell;
					}
				}
			}
		}

		tr {

			&.today {

				td {
					display: table-cell;
				}
			}

			&:last-child {

				td {
					padding-bottom: 0;
				}
			}

			td {
				display: none;
			}
		}

		td {
			padding: 0 0 4px 0;

			&:last-child {
				color: @black;
				padding-left: 8px;
			}

			strong {
				font-weight: 500;
			}
		}

		.tag-close {
			.font-size(10);
			font-weight: 500;
			line-height: 1;
			color: @red;
			padding: 7px 8px;
			text-transform: uppercase;
			background-color: #F8F9FD;
			display: inline-block;
		}
	}

	.sidebar-venue-info {
		display: none;

		@media @bp_768 {
			display: block;
		}

		tr {

			&:last-child {

				td {
					padding-bottom: 0;
				}
			}
		}

		td {
			padding: 0 0 4px 0;
			vertical-align: top;
			line-height: 20px;

			&:last-child {
				color: @black;
				padding-left: 8px;
			}
		}

		.row {
			line-height: 14px;
			padding-top: 3px;

			& + .row {
				padding-top: 6px;
			}
		}

		.row-country {
			display: flex;
			align-items: center;
			justify-content: flex-start;
		}

		.row-address {
			color: #707580;
		}
	}

	.sidebar-tickets {
		display: none;

		@media @bp_768 {
			display: block;
		}

		.ticket-links {

			a {
				.text-decoration-ink;
				color: @blue-roll;

				&:hover,
				&:active {
					color: @blue;
				}
			}
		}
	}

	.sidebar-connected-users {
		display: none;

		@media @bp_768 {
			display: block;
		}

		.sidebar-module-content-footer {
			text-align: right;
		}

		.item {
			border-top: 1px solid @blue-grey;

			&:first-child {
				border: 0;
			}
		}
	}

	.sidebar-suggested-actions {
	}

	.pro-content-module {
		position: relative;
		z-index: 1;
		
		& + .pro-content-module {
			margin-top: 32px;
		}

		.stats {
			.box-sizing;
			width: 100%;
			padding-top: 15px;
			display: inline-block;

			strong {
				.font-size(22);
				font-weight: 300;
				line-height: 24px;
				display: block;

				sup {
					top: -7px;
					vertical-align: middle;
				}
			}

			label {
				.font-size(10);
				color: @grey-1;
				display: inline-block;
				line-height: 14px;
				margin-top: 16px;
				letter-spacing: 0px;
			}

			.highlight {
				line-height: 16px;
				//background-color: @indigo-2;
				
				.inline {
					display: inline;
					background-color: @indigo-2;
				}
			}
		}

		.map-embed {
			width: 100%;
			position: relative;

			* {
				outline: none;
			}
		}

		.graph {
			position: relative;
			padding-top: 30px;
			width: 100%;

			svg {

				.highcharts-tooltip {
					.opacity(0) !important;
				}
			}

			text.highcharts-credits {
				display: none;
			}

			.highcharts-data-labels {

				span {
					min-width: 20px;
				}
			}

			.center-label {
				.font-size(12);
				.prevent-click;
				line-height: 16px;
				text-align: center;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding: 20%;


				strong {
					.font-size(22);
					line-height: 24px;
					font-weight: 400;
					display: block;
					padding-bottom: 6px;
				}
			}
		}

		.pro-content-module-subtitle {
			.font-size(14);
			line-height: 18px;
			font-weight: 500;

			@media @bp_768 {
				.font-size(15);
				line-height: 22px;
			}

			&.channel {
				.font-size(10);
				color: @grey-1;
				text-transform: uppercase;
				margin-left: -12px;
				font-weight: 400;

				&:before {
					content: "";
					width: 16px;
					height: 16px;
					display: inline-block;
					vertical-align: middle;
					margin-right: 6px;
					background-size: 16px;
					background-position: left center;
					background-repeat: no-repeat;
				}
			}

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

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

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

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

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

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

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

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

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

			.more-info {
				vertical-align: middle;
			}
		}

		.selected-entity-details {

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.pro-content-module-subtitle {
				.font-size(12);
			}

			.col {
				.box-sizing;

				&:first-child {
					padding-bottom: 24px;
				
					@media @bp_1024 {
						padding-bottom: 0;
						width: 50%;
						padding-right: @layout-gutter-tablet/2;
						display: flex;
						flex: 1;
					}
				}

				&:last-child {
				
					@media @bp_1024 {
						width: 45%;
						padding-left: @layout-gutter-tablet/2;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		.list-entities {
			.box-sizing;
			width: 100%;
			padding: 0 @pro-content-module-padding;
			
			.list-grid {
				margin: -8px;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}

			.item {
				.box-sizing;
				width: 100%;
				padding: 8px;
				display: flex;
				flex-direction: column;
				flex: 0 1 auto;

				@media @bp_600 {
					width: 50%;
				}

				@media @bp_1024 {
					width: 33.33%;
				}

				@media @bp_1200 {
					width: 25%;
				}
			}

			.pro-content-module-subtitle {
				padding-bottom: 30px;

				@media @bp_1200 {
					padding-bottom: 40px;
				}
			}

			.zero-state {
				padding-left: 0;
				padding-right: 0;
				text-align: center;
			}
		}

		/*.pro-card-stats {
			.font-size(12);
			margin: 8px;
			color: @grey-1;

			.row {
				display: flex;
				align-items: center;
				justify-content: space-between;
				flex-wrap: wrap;
			}

			.social-follow {
				margin: 4px;

				&:last-child {
					margin-right: 0;
				}

				&.disabled {
					.grayscale;
					.opacity(.2);
				}
			}

			&.channel {
				padding-left: 24px;
				background-position: left top 2px;
				background-repeat: no-repeat;
				background-size: 16px;

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

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

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

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

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

				&.facebook {
					background-image: url('../images/svg/icon-link-facebook-color.svg');
				}

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

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

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

				&.beatport {
					background-image: url('../images/svg/icon-link-beatport-color.svg');
				}
			}

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

		.pro-card {
			.box-sizing;
			background-color: @white;
			width: 100%;
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: column;

			&.artist,
			&.beatport,
			&.festival,
			&.deezer,
			&.venue,
			&.media,
			&.event,
			&.spotify,
			&.video {
				border: 1px solid @indigo-2;

				header {
					.box-sizing;
					display: flex;
					flex-direction: row;
					padding: 16px 8px;
					align-items: center;
					position: relative;
					z-index: 1;
					background-color: @white;
					min-height: 64px;

					.thumb {
						width: 32px;
						height: 32px;
						margin-right: 8px;
					}

					a {
						display: flex;
						flex-direction: row;
						align-items: center;
					}

					+ figure,
					+ a {
						border-top: 1px solid @indigo-2;
					}
				}

				figure {
					height: auto;
					padding-top: 100%;
					border-bottom: 1px solid @indigo-2;
					position: relative;
				}

				article {
					padding: 16px;
				}

				h4 {
					.font-size(12);
					.clamp-lines(2);
					font-weight: 500;
					line-height: 16px;
				}

				h3 {
					.clamp-lines(1);
					.font-size(12);
					font-weight: 500;
					line-height: 16px;
				}

				.country {
					padding: 10px 0 8px 0;
				}
			}

			&.festival,
			&.event,
			&.venue {

				figure {
					padding-top: 70%;
				}

				.country {
					.font-size(10);
					color: @grey-1;
					text-transform: uppercase;
					padding: 4px 0 2px 0;
				}

				.type-and-capacity {
					.font-size(10);
					.clamp-lines(1);
					color: @grey-1;
					text-transform: uppercase;
				}

				.event-date {
					margin: 10px 0 2px 0;
				}
			}

			&.video {

				&.active {

					figure {

						&:before {
							background-image: url('../images/svg/pause-yt-white.svg');
						}
					}
				}

				figure {
					position: relative;
					padding-top: 56.6%;
					cursor: pointer;
			
					&:before {
						content: "";
						position: absolute;
						top: 0;
						right: 0;
						bottom: 0;
						left: 0;
						background-position: center;
						background-repeat: no-repeat;
						background-size: 32px;
						background-image: url('../images/svg/play-yt-white.svg');
					}
				}

			}

			&.beatport,
			&.deezer {

				h3 {
					line-height: 22px;
				}

				.artist,
				.publisher,
				time {
					color: #707580;
					line-height: 20px;
				}

				time {
					.font-size(10);
					line-height: 18px;
					display: block;
				}

				.artist,
				.publisher {
					.clamp-lines(1);
					.font-size(12);
				}
			}

			&.spotify,
			&.deezer,
			&.video,
			&.beatport {

				&.alt {

					h3 {
						.font-size(15);
						.clamp-lines(2);
					}

					.artist,
					.publisher {
						margin-top: 5px;
						.font-size(15);
					}
				}
			}

			&.media {

				time {
					.font-size(10);
					line-height: 18px;
					display: block;
					color: @grey-1;
				}

				figure {
					height: 254px;
					padding-top: 0;
				}
			}

			&.spotify {

				&.playlist {

					figure {
						height: auto;
						padding-top: 100%;

						&:hover {

							&:before {
								background-color: @blue;
								background-image: url('../images/svg/icon-link-white.svg');
							}
						}

						&:before {
							.rounded-corners(50%);
							.font-size(0);
							border: 1px solid @blue;
							background-color: @white;
							position: relative;
							content: "";
							text-transform: uppercase;
							width: 32px;
							height: 32px;
							min-width: 32px;
							font-weight: 600;
							letter-spacing: 2px;
							background-image: url('../images/svg/icon-link.svg');
							background-repeat: no-repeat;
							background-position: center;
							background-size: 100%;
							position: absolute;
							top: 50%;
							left: 50%;
							margin: -16px 0 0 -16px;
						}
					}
				}

				.artist,
				.track,
				.genres {
					.font-size(12);
					.clamp-lines(1);
					line-height: 16px;
					color: @grey-1;
					margin-top: 4px;
				}

				time {
					.font-size(10);
					line-height: 18px;
					display: block;
					color: #707580;
					margin-top: 2px;
				}
			}

			&.instagram {

				.embed-wrapper {
					top: 0; //-54px;
					left: -1px;
					right: -2px;
				}

				.instagram-media,
				iframe {
					.box-shadow(none) !important;
					min-width: 0 !important;
					margin-top: -54px !important;
					margin-bottom: -45px !important;
					border: 0 !important;
					border-radius: 0 !important;
				}
			}

			&.twitter {

				.embed-wrapper {
					cursor: pointer;
					left: -6px;
					top: -12px;
					right: -2px;
				}
			}

			&.tiktok {

				.embed-wrapper {
					top: -20px;
				}
			}

			&.show-details {
				.box-shadow(none);
				border: 0;
				background-color: transparent;
				border-top: 1px solid @black;
				margin-top: -4px;

				&:before {
					.box-shadow(0 0 15px 0 rgba(0,0,0,0.08));
					.prevent-click;
					content: "";
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: -32px;
					background-color: @indigo-2;
					z-index: -2;
				}

				&:after {
					content: "";
					position: absolute;
					top: -11px;
					left: 50%;
					margin-left: -6px;
					width: 0;
					height: 0;
					border-style: solid;
					border-width: 0 8px 10px 8px;
					border-color: transparent transparent @black transparent;
				}

				& + .pro-card-stats {
					position: relative;
					margin-top: 1px;

					&:before {
						.prevent-click;
						content: "";
						position: absolute;
						border-top: 1px solid @white-1;
						top: 0;
						left: -8px;
						right: -8px;
						bottom: -10px;
						background-color: @indigo-2;
						z-index: -1;

					}
				}
			}

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

				header {
					background-color: @indigo-2;
				}
			}

			.rank-wrapper {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				flex: 1;

				&.multiple {

					.rank-item {
						display: flex;
						flex-direction: row;
						align-items: center;
						white-space: nowrap;

						&:first-child {

							.rank-label {
								//padding-left: 25px;

								&:before {
									position: relative;
									//left: -25px;
									padding-right: 10px;
								}
							}

							.rank {

								strong {
									margin: 0;
								}
							}
						}

						&:last-child {

							.rank-label {

								&:before {
									display: none;
								}
							}
						}

						.rank {
							line-height: 1;
							margin-left: 6px;
						}
					}
				}

				

				.rank-label {
					.font-size(10);
					position: relative;
					line-height: 1;
					color: @grey-1;

					&.viberate {
								
						&:before {
							background-image: url('../images/svg/viberate-color.svg');
							width: 16px;
							height: 16px;
						}
					}

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

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

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

					&.tiktok {
						.font-size(0);
								
						&:before {
							background-image: url('../images/svg/tiktok-color.svg');
						}
					}

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

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

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

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

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

					&.facebook {
						
						&:before {
							background-image: url('../images/svg/facebook-color.svg');
							width: 8px;
						}
					}

					&:before {
						content: "";
						width: 16px;
						height: 16px;
						display: inline-block;
						vertical-align: middle;
						margin-right: 6px;
						background-size: 16px;
						background-position: left center;
						background-repeat: no-repeat;
					}
				}

				.rank {
					white-space: nowrap;

					label {
						.font-size(10);
						color: @grey-1;
						vertical-align: middle;
						display: inline-block;
						padding-right: 8px;
					}

					strong,
					.value-change {
						display: inline-block;
						vertical-align: middle;
					}

					strong {
						.font-size(15);
						font-weight: 400;
						margin-right: 8px;
					}
				}
			}

			.btn-pro-txt {
				padding: 14px;
			}

			.btn-play-track {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -16px 0 0 -16px;
				background-color: @white;
			}

			.btn-link-outside {
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -16px 0 0 -16px;
				background-color: @white;

				&:hover,
				&.active {
					background-color: @blue;
				}
			}

			.swiper-container {
				width: 100%;
				height: 100%;
				margin: 0;
				padding: 0;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;

				&:hover {

					.swiper-button-prev,
					.swiper-button-next {
						display: block;
					}
				}

				.swiper-slide {
					width: 100%;
					height: 100%;
					background-size: cover;
					background-repeat: no-repeat;
					background-position: center;
				}

				.swiper-button-prev,
				.swiper-button-next {
					display: none;
					width: 20px;
					top: 0;
					bottom: 0;
					height: auto;
					background-color: transparent;

					&:before {
						background-size: 8px;
						top: 0;
						bottom: 0;
						left: 0;
						right: 0;
						width: auto;
						height: auto;
						margin: 0;
					}
				}

				.swiper-button-prev {
					left: 0;
					right: auto;
					
					&:before {
						background-image: url('../images/svg/chevron-left-white.svg');
					}
				}

				.swiper-button-next {
					right: 0;
					left: auto;
					
					&:before {
						background-image: url('../images/svg/chevron-right-white.svg');
					}
				}

				.swiper-pagination-bullet {
					width: 8px;
					height: 8px;
					border-width: 1px;
				}

				.img {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background-position: center;
					background-size: cover;
					background-repeat: no-repeat;
				}
			}

			.embed-wrapper {
				display: block;
				overflow: hidden;
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
			}
		
			figure {
				height: 168px;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				position: relative;
				z-index: 0;
				overflow: hidden;
			}

			article {
				display: flex;
				flex-direction: column;
				flex: 1;
				padding: 12px 16px;

				& + .btn-card-action {
					margin-top: -12px;
				}
			}

			h3 {
				.clamp-lines(1);
				.font-size(14);
				font-weight: 500;
			}

			a {
				color: @black;
			}

			.country {
				.font-size(12);
				color: @grey-1;
				padding: 2px 0;
			}

			.type-and-capacity {
				.font-size(10);
				.clamp-lines(1);
				text-transform: uppercase;
				font-weight: 500;
			}

			.event-date {
				.clamp-lines(1);
				.font-size(10);
				margin: 5px 0;
				color: @grey-1;
				text-transform: normal;

				span {
					text-transform: uppercase;
				}
			}

			.lineup,
			.genres {
				.font-size(10);
				line-height: 16px;
				line-height: 1;

				a {
					.clamp-lines(1);
					line-height: 18px;
					color: @blue;

					&:hover {
						color: @blue-roll;
					}
				}

				.artist {

					a {
						color: @grey-1;

						&:hover {
							color: #999;
						}
					}
				}
			}

			.genres {
				.font-size(12);
				.clamp-lines(1);
				color: @grey-1;

				.genre {
					line-height: 16px;
					display: inline-block;
				}
			}

			.btn-see-upcoming-event {
				.font-size(10);
				background-color: @blue;
				color: @white;
				display: block;
				text-transform: uppercase;
				letter-spacing: 1px;
				padding: 8px 2px;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;

				& + article {
					padding-bottom: 46px;
				}
			}
		}*/

		.selected-entity-info {
			.box-sizing;
			.font-size(12);
			background-color: @black;
			color: @white;
			width: 100%;
			padding: 24px;

			@media @bp_1300 {
				max-width: 90%;
				padding-left: 12.5%;
				padding-right: 12.5%;
			}

			header {
				position: relative;

				h3 {
					.font-size(12);
					.clamp-lines(2);
					line-height: 18px;
					font-weight: 500;
				}

				.btn-play {
					display: inline-block;
					background-size: 12px;
					position: absolute;
					z-index: 1;
					left: 0;

					@media @bp_1300 {
						left: -35px;
						top: 0;
					}

					&.active {
						background-size: 8px;
					}

					& + h3 {
						padding-left: 35px;

						@media @bp_1300 {
							padding-left: 0;
						}
					}
				}

				& + .info {
					padding-top: 20px;
				}
			}

			.country-and-channel {
				font-weight: 500;
				text-transform: uppercase;
				padding: 15px 0 5px 0;
			}

			.country {
				display: inline;
				padding-right: 20px;

				img {
					margin-right: 1px;
				}
			}

			.channel {
				display: inline;

				img {
					vertical-align: middle;
					margin-right: 2px;
				}
			}

			.info {
				margin: 0;
				padding-top: 10px;
			}

			label {
				display: inline-block;
				color: @grey-1;
			}

			.pro-table {
				margin-top: 20px;
			}

			th,
			td {
				padding: 10px;
				border-bottom: 2px solid #1f1f1f;
				vertical-align: middle;

				&:first-child {
					padding-left: 0;
				}

				&:last-child {
					padding-right: 0;
				}
			}

			th {
				.font-size(10);
				font-weight: 500;
				border-top: 2px solid #1f1f1f;
			}

			td,
			.country {
				color: @white;
			}
		}

		.channels-overview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			&.most-popular-overview {
				position: relative;
				border-left: 1px solid @stats-border-color;

				.item {
					width: 100%;
					padding-top: 12px;
					padding-bottom: 12px;
					border: 0;

					@media @bp_360 {
						width: 50%;
					}

					&:first-child {
						width: 100%;
						padding-bottom: 0;
					}

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

						@media @bp_360 {
							padding-top: 4px;
							padding-bottom: 0;
						}
					}
				}

				.channel-overview {

					.stats {

						label {
							margin-top: 8px;
						}
					}
				}
			}

			&.connections {
				margin: -12px 0;

				.item {
					width: 100%;
					margin: 12px 0;

					@media @bp_360 {
						width: 50%;
					}

					@media @bp_768 {
						width: 25%;
					}
				}
			}

			&.charts {
				margin: -12px 0;

				.item {
					margin: 12px 0;
				}
			}

			&.music,
			&.festival-channels-overview {
					
				.item {
					width: 100%;

					@media @bp_600 {
						width: 50%;
					}
				}

				.stats {
					.box-sizing;
					width: 49%;
				}
			}

			&.fanbase {

				.item {

					@media @bp_880 {
						width: 25%;
					}

					@media @bp_1200 {
						width: 14.28%;
					}
				}
			}

			&.max-6 {

				.item {

					@media @bp_880 {
						width: 33.33%;
					}

					@media @bp_1200 {
						width: 16.66%;
					}
				}
			}

			&.max-9 {
				margin: -12px 0;

				.item {
					margin: 12px 0;

					@media @bp_880 {
						width: 33.33%;
					}

					@media @bp_1200 {
						width: 11.11%;
					}
				}
			}

			.item {
				.box-sizing;
				width: 50%;
				padding: 14px 20px 10px 20px;
				border-left: 1px solid @stats-border-color;

				@media @bp_600 {
					width: 33.33%;
				}

				@media @bp_1200 {
					width: 16.66%;
				}
			}

			.channel-overview {

				&.total {

					h3 {
						.font-size(15);
						font-weight: 500;
						text-transform: none;
						color: @black;
						padding-left: 0;
						margin-left: 0;
					}
				}

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

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

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

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

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

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

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

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

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

				&.facebook {
					
					h3 {
						background-image: url('../images/svg/facebook-color.svg');
						background-size: 8px;
						padding-left: 16px;
					}
				}

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

				&.disabled {
					.opacity(0.5);

					h3 {
						.grayscale;
					}
				}

				h3 {
					.font-size(10);
					line-height: 20px;
					text-transform: uppercase;
					color: @grey-1;
					font-weight: 400;
					background-repeat: no-repeat;
					background-position: left center;
					background-size: 16px;
					padding-left: 24px;
					margin-left: -12px;
				}

				/*.stats {
					.box-sizing;
					width: 100%;
					padding-top: 15px;
					display: inline-block;

					strong {
						.font-size(20);
						font-weight: 500;
						line-height: 18px;
						display: block;
						color: #454545;

						@media @bp_768 {
							.font-size(22);
							font-weight: 400;
						}

						@media @bp_1024 {
							line-height: 28px;
							padding-bottom: 0;
						}
					}

					label {
						.font-size(10);
						color: #707580;
						display: inline-block;
						line-height: 18px;
						margin-top: 18px;
					}
				}*/
			}
		}

		.list-channel-graphs {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -12px 0;

			.item {
				.box-sizing;
				width: 100%;
				padding: @layout-gutter-mobile/2;
				border-left: 1px solid @stats-border-color;
				margin: 12px 0;

				@media @bp_768 {
					width: 50%;
				}

				@media @bp_1024 {
					width: 33.33%;
				}
			}
		}

		.graph-module {

			&.instagram {
					
				h3 {

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

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

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

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

			&.bandsintown {
						
				h3 {
					
					&:before {
						background-image: url('../images/svg/bandsintown-color.svg');
					}
				}
			}

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

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

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

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

			&.facebook {
				
				h3 {
					
					&:before {
						background-image: url('../images/svg/facebook-color.svg');
						width: 8px;
					}
				}
			}

			header {
				padding: 12px;
				position: relative;

				strong {
					.font-size(22);
					line-height: 24px;
					display: block;
					text-align: right;
					font-weight: 300;
				}

				label {
					.font-size(10);
					line-height: 12px;
					color: @grey-1;
					display: block;
					text-align: right;
					padding-top: 5px;
				}
			}

			article {
				padding: 12px;
			}

			h3 {
				.font-size(10);
				color: @grey-1;
				display: inline-block;
				position: absolute;
				font-weight: 400;
				left: 12px;
				top: 12px;
				text-transform: uppercase;
				margin-left: -16px;

				&:before {
					content: "";
					width: 16px;
					height: 16px;
					display: inline-block;
					vertical-align: middle;
					margin-right: 8px;
					background-size: 16px;
					background-repeat: no-repeat;
					background-position: left center;
				}
			}

			.graph {
				padding-top: 0;
			}
		}

		.zero-state {
			.font-size(12);
			font-weight: 500;
			//text-align: center;
			color: @black;
			font-weight: 500;
			padding: 20px 24px;
			border-bottom: 0;
		}
	}

	.pro-content-module-header {
		background-color: @white;
		margin-bottom: 0;
		position: relative;
		padding: 24px 24px 16px 24px;

		@media @bp_768 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			flex-wrap: wrap;
		}

		.row {
			width: 100%;

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

			&:first-child {

				.filters {
					margin-top: 0;
				}
			}

			& + .row {

				@media @bp_768 {
					display: flex;
					flex-direction: row;
					justify-content: flex-end;
				}

			}

			&.space-between {

				@media @bp_768 {
					justify-content: space-between;
				}
			}
		}

		.left {
			position: relative;

			@media @bp_768 {
				//max-width: 80%;
			}

			@media @bp_1024 {
				//max-width: 90%;
			}

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			.filters {

				@media @bp_1200 {
					width: auto;
					margin-top: 0
				}
			}
		}

		.right {
			align-items: center;

			@media @bp_768 {
				position: relative;
				text-align: right;
				display: flex;
				flex-direction: row;
				flex-shrink: 0;
				flex-grow: 1;
				justify-content: flex-end;
				flex-wrap: wrap;
			}

			& + .right {
				width: 100%;
			}
		}

		.sort {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding-top: 12px;

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

			.sort-wrapper {
				display: flex;
				flex-direction: row;
				align-items: center;

				label {
					.font-size(12);
					color: @grey-1;
					white-space: nowrap;
					padding-right: 8px;
				}
			}
		}

		h2,
		h3 {
			.font-size(20);
			font-weight: 500;
			line-height: 30px;

			@media @bp_768 {
				.font-size(22);
				display: inline-block;
				vertical-align: middle;
				line-height: 32px;
			}
		}

		h2 {
			margin-right: 15px;

			@media @bp_1200 {
				//max-width: 50%;
				display: flex;
				flex: 1 0 auto;
			}

			&.small {
				.font-size(15);

				& + .two-liner {

					&:before {
						top: 0;
						bottom: 0;
					}
				}
			}

			br {
				display: none;

				@media @bp_1200 {
					display: block;
				}
			}
		}

		h3 {
			.font-size(14);
		}

		.two-liner {
			.font-size(10);
			line-height: 14px;
			color: #707580;
			border-left: 0;
			padding-left: 15px;
			padding-right: 30px;
			margin: 6px 0;
			position: relative;

			@media @bp_768 {
				.font-size(12);
				line-height: 16px;
				vertical-align: middle;
			}

			@media @bp_1200 {
				//max-width: 580px;
				display: flex;
				flex: 1 1 auto;
			}

			@media @bp_1200 {
				display: inline-block;
			}

			br {
				display: none;
			}

			a {
				color: @blue;
				.text-decoration-ink;

				&:hover {
					color: @blue-roll;
				}
			}

			&:before {
				content: "";
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				width: 1px;
				background-color: #A0AEB4;

				@media @bp_1200 {
					top: -10px;
					bottom: -10px;
				}
			}
		}

		.more-info {
			display: none;
			.font-size(0);
		}

		.filters {
			.font-size(0);
			line-height: 1;
			display: block;
			vertical-align: middle;
			margin: 5px 0;

			@media @bp_768 {
				//display: inline-block;
				display: flex;
				//padding-right: 30px;
				margin: 20px 0 0 0;
				//width: 100%;
				text-align: right;
			}

			&.left {
				text-align: left;
			}

			.btn {
				margin-right: 8px;

				&:last-child {
					margin-right: 0;
				}
			}

			.pro-custom-checkbox {

				& + label {
					.font-size(10);
					color: @blue;
					text-transform: uppercase;

					img {
						margin-left: 4px;
						display: inline-block;
					}
				}
			}
		}
	}

	.pro-content-module-article {
		background-color: @white;
		padding: (@pro-content-module-padding - 2px) @pro-content-module-padding 16px @pro-content-module-padding;

		& + .pro-content-module-footer {
			padding-top: 0;
		}

		&.loading {
			
			&:before {
				z-index: 9;
			}
		}

		&.noise {
			background-image: url(../images/gif/noise-animated-bright.gif);
			background-repeat: repeat;
			background-size: 400px;
			background-position: center center;
		}

		.map-legend {
			text-align: center;
		}

		.swiper-main {
			margin: 0 -@pro-content-module-padding;

			.swiper-container {
				padding: 0 @pro-content-module-padding;
			}

			.swiper-button-prev,
			.swiper-button-next {
				display: block;
				top: 0;
				bottom: 0;
				height: auto;
				width: 24px;
				background-color: @white;
				
				&:before {
					background-size: 14px;
					height: auto;
					width: auto;
					background-position: center;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					margin: 0;
				}
			}

			.swiper-button-prev {
				left: 0;
				right: auto;
				
				&:before {
					background-image: url('../images/svg/chevron-left.svg');
				}
			}

			.swiper-button-next {
				right: 0;
				left: auto;
				
				&:before {
					background-image: url('../images/svg/chevron-right.svg');
				}
			}
		}

		.chart-subtitle {
			.font-size(15);
			line-height: 22px;
			font-weight: 500;
			padding: 24px 0;
		}
	}

	.pro-content-module-footer {
		text-align: right;
		background-color: @white;
		padding: 10px 24px;

		&.two-cols {
			background-color: transparent;
			padding: 0;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			&.bp-1024 {

				@media @bp_1024 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				.col {

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

					&:first-child {

						@media @bp_1024 {
							display: flex;
							margin-bottom: 0;
							margin-right: 4px;
						}
					}

					&:last-child {

						@media @bp_1024 {
							margin-left: 4px;
						}
					}
				}
			}

			&.bp-1200 {

				@media @bp_1200 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}

				.col {

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

					&:first-child {

						@media @bp_1200 {
							display: flex;
							margin-bottom: 0;
							margin-right: 4px;
						}
					}

					&:last-child {

						@media @bp_1200 {
							margin-left: 4px;
						}
					}
				}
			}

			.col {
				.box-sizing;
				background-color: @white;
				padding: 0 24px;
				padding: 10px @pro-content-module-padding;

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

				&:first-child {
					display: none;
					margin-bottom: 8px;

					@media @bp_1200 {
						display: flex;
						margin-bottom: 0;
						margin-right: 4px;
					}
				}

				&:last-child {

					@media @bp_1200 {
						margin-left: 4px;
					}
				}
			}
		}
	}

	.pro-sidebar-filters {

		.item {
			padding: 4px 0;

			&.has-divider {
				border-bottom: 1px solid @blue-grey;
				padding-bottom: 12px;
				margin-bottom: 12px;
			}

			&.disabled {
				.prevent-click;
				color: #D5DDE0;

				.flag {
					.opacity(0.25);
				}

				input[type="checkbox"],
				input[type="radio"] {

					&.pro-custom-checkbox,
					&.pro-custom-radio {

						& + label {
							color: #D5DDE0;

							&:before {
								border-color: #D5DDE0;
							}
						}
					}
				}
			}
		}

		.pro-custom-radio,
		.pro-custom-checkbox {

			& + label {
				.text-overflow;
				display: block;
			}
		}
	}

	.section {
		padding: 32px 0;

		& + .section {
			margin-top: 32px;
		}

		&.section-hot-this-week {
			position: relative;
			z-index: 1;

			.item {
				width: 100%;

				@media @bp_768 {
					width: 33.33%;
				}
			}

			.card-video {

				article {
					padding-right: 12px;
				}
			}
		}

		&.section-top-videos {

			.swiper-main {

				.swiper-container {

					@media @bp_768 {
						padding-bottom: 0;
					}
				}
			}
		}

		&.section-editors-pick.v3.white {

			.section-main {

				@media @bp_768 {
					padding-top: 0;
					padding-bottom: 0;
				}
			}
		}

		&.section-events {
		}

		&.section-promo {
			padding-bottom: 0;

			@media @bp_1024 {
				padding-bottom: @section_spacer_tablet_landscape;
			}

			@media @bp_1200 {
				padding-bottom: @section_spacer_desktop;
			}
		}

		&.section-media {

			.swiper-slide {

				@media @bp_1440 {
					min-width: 300px;
					min-height: 300px;
				}
			}
		}
	}

	.explore-charts {

		.pro-content-module-article {

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}
		
		h3 {
			padding-bottom: 10px;

			@media @bp_1024 {
				max-width: 58.33%;
			}

			br {
				display: none;

				@media @bp_1024 {
					display: block;
				}
			}
		}
	}

	.stats-and-network {

		.stats {

			@media @bp_480 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			@media @bp_1024 {
				flex-direction: column;
			}

			@media @bp_1200 {
				flex-direction: row;
			}

			.btn-solid {

				@media @bp_480 {
					align-self: flex-start;
				}
			}

			.item {
				padding-top: 20px;

				&:first-child {
					padding-top: 0;
				}
			}

			h4 {
				.font-size(14);
				font-weight: 500;
				line-height: 18px;
				padding-left: 35px;
				background-repeat: no-repeat;

				&.views {
					background-image: url('../images/svg/views.svg');
					background-position: left center;
					background-size: 24px;
				}

				&.favourites {
					background-image: url('../images/svg/heart-active.svg');
					background-position: left 4px center;
					background-size: 16px;
				}
			}

			label {
				.font-size(9);
				line-height: 12px;
				color: @grey-1;
				text-transform: uppercase;
				display: block;
				padding-top: 6px;
				padding-left: 35px;
			}

			.btn-solid {
				margin-top: 20px;

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

				@media @bp_1024 {
					margin-top: 20px;
				}

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

		.network {

			header  {
				padding-bottom: 22px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				h3 {
					.font-size(12);
					font-weight: 500;
					line-height: 18px;
					text-transform: uppercase;
					color: @grey-1;
					letter-spacing: 2px;
				}
			}

			ul {
				margin: 0 -24px;
			}

			.item {
				padding: 10px 24px;
				border-bottom: 2px solid @white-1;

				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					border-bottom: 0;
					padding-bottom: 0;
				}
			}

			.card-micro {
				height: 32px;
				flex-direction: row;
				justify-content: space-between;

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

				article {
					height: 32px;
					padding-left: 42px;
					width: auto;
					min-width: 120px;
					padding-top: 2px;
					justify-content: space-between;

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

				h3 {
					.font-size(10);
					padding-right: 30px;
				}

				.roles {
					justify-content: center;
					text-align: left;
					min-width: 100px;
					max-width: 100px;

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

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

					.role {
						.font-size(10);
						color: #808080;
						line-height: 1;
					}
				}
			}
		}
	}

	.career-health {
		position: relative;
		z-index: 2;

		.pro-content-module-article {

			@media @bp_768 {
				padding-top: @pro-content-module-padding *2;
				padding-bottom: @pro-content-module-padding*2;
			}

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
		}

		.explainer {
			.font-size(12);
			line-height: 16px;
			position: relative;

			@media @bp_1024 {
				width: 25%;
			}

			> .btn {
				margin-top: 10px;

				@media @bp_1024 {
					margin-top: 30px;
				}
			}
		}

		.meters  {
			.box-sizing;
			.font-size(12);
			text-align: left;

			@media @bp_768 {
				display: flex;
				flex: 1;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.artist-health-meter {
			.font-size(12);
			color: @grey-1;
			line-height: 16px;
			display: flex;
			flex-direction: column;
			align-items: center;
			max-width: 270px;

			@media @bp_768 {
				flex: 1;
			}

			@media @bp_1024 {
				flex: 1;
				padding-left: 30px;
				padding-right: 30px;
			}

			p {
				padding-bottom: 0;
				margin-bottom: 0;
			}

			> article {
				text-align: left;

				@media @bp_768 {
					padding-left: 12px;
				}
			}

			.description {
				padding-top: 10px;
			}

			.pro-content-module-subtitle {
				.font-size(15);
				color: @black;
				line-height: 22px;
				font-weight: 500;
				padding: 40px 0 0 0;
			}
		}

		.item {
			.box-sizing;
			text-align: center;

			@media @bp_768 {
				width: 33%;
			}

			@media @bp_1024 {
				width: 33.33%;
			}
		}

		.more-info-wrapper {
			position: relative;
			height: 30px;
		}

		.career-health-similar {
			.box-sizing();
			background-color: @white;
			color: @grey-1;
			padding: 10px;
			z-index: 3;
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			max-width: 600px;
			flex-direction: column;

			@media @bp_768 {
				padding: 30px;
				max-width: 700px;
				left: 0;
				right: auto;
				flex-direction: row;
			}

			@media @bp_1024 {
				width: 700px;
				padding: 114px 56px;
			}

			@media @bp_1200 {
				max-width: 900px;
				width: 900px;
				padding: 114px 56px;
			}

			&.fixed {
				position: fixed;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				max-width: none;
				flex: 1;

				article {
					background-color: @white;
					position: relative;
					max-width: 600px;
				}

				&:before {
					content: "";
					position: fixed;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					background-color: rgba(0,0,0,0.75);
					z-index: 0;
				}
			}

			&.show {
				.box-shadow;
				display: flex;
				z-index: 20;
			}

			.btn-close {
				position: absolute;
				right: 0;
				top: 0;
				width: 38px;
				height: 38px;
				background-size: 10px;
				background-image: url('../images/svg/close-pro-grey.svg');
			}

			article {
				.font-size(12);
				line-height: 16px;

				@media @bp_1024 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;
					flex: 1;
				}
			}

			.col-1 {

				@media @bp_1024 {
					flex: 1 0 240px;
					max-width: 240px;
				}
			}

			.col-2 {

				@media @bp_1024 {
					padding-left: 40px;
					flex: 1 1 auto;
				}
			}

			h4 {
				.font-size(18);
				line-height: 24px;
				font-weight: 500;
				padding-bottom: 8px;
				color: @black;
			}

			table {
				width: 100%;
				margin-top: 20px;
				color: @grey-1;

				@media @bp_1024 {
					margin-top: 10px;
				}
			}

			tbody {

				tr {

					&.active {

						td {
							color: @black;
						}
					}
				}

				td {
					.font-size(12);
					padding: 4px 12px;
					position: relative;

					&:first-child {
						text-align: right;
						width: 50px;
						white-space: nowrap;
					}

					&:last-child {
						text-align: right;
						white-space: nowrap;
						width: 10px;
					}
				}
			}

			.artist {
				display: flex;
				flex-direction: row;
				align-items: center;

				figure {
					min-width: 24px;
					width: 24px;
					height: 24px;
					background-position: center top;
					background-repeat: no-repeat;
					background-size: cover; 
				}

				h3 {
					.font-size(12);
					.clamp-lines(1);
					padding-left: 18px;
					color: @black;
				}
			}

			.btn-pro {
				margin-top: 15px;
			}
		}
	}

	.fame-meter {

		.pro-content-module-header {

			h2 {

				@media @bp_1200 {

				}
			}
		}

		.graph {
			padding: 0;
		}

		.pro-card {

			&.media {
				margin-top: 16px;

				figure {
					height: auto;
					padding-top: 100%;
				}
			}

			&.selected {
				margin-top: 0;

				header {
					
					& + figure {
						padding-top: calc(~'100% + 32px');
					}
				}
			}
		}

		.swiper-main {
			padding-top: 5px;
			padding-bottom: 5px;

			.swiper-container {
				padding: 0 40px;

				@media @bp_768 {
					padding: 0 64px;
				}
			}

			.swiper-button-next,
			.swiper-button-prev {
				width: 40px;

				@media @bp_768 {
					width: 64px;
				}

				&:before {
					background-image: url(../images/svg/chevron-right-blue.svg);
					background-size: 8px;
				}
			}

			.swiper-button-prev {

				&:before {
					background-image: url(../images/svg/chevron-left-blue.svg);
					background-size: 8px;
				}
			}
		}
	}

	.beatport-performance {

		.pro-content-module-header {

			& + .pro-content-module-article {
				padding-top: 10px;
			}
		}

		.graph {
			padding-top: 0;
		}

		.pro-zero-state {
			margin-top: @pro-content-module-padding;
		}

		.swiper-main {
			padding-top: 5px;
			padding-bottom: 5px;

			.swiper-container {
				padding: 0 40px;

				@media @bp_768 {
					padding: 0 64px;
				}
			}

			.swiper-button-next,
			.swiper-button-prev {
				width: 40px;

				@media @bp_768 {
					width: 64px;
				}

				&:before {
					background-image: url(../images/svg/chevron-right-blue.svg);
					background-size: 8px;
				}
			}

			.swiper-button-prev {

				&:before {
					background-image: url(../images/svg/chevron-left-blue.svg);
					background-size: 8px;
				}
			}
		}
	}

	.beatport-positions,
	.popular-artists-in-country,
	.artist-connections-distribution,
	.audience-gender-and-age,
	.top-artists-performing-in-country,
	.engagement-channels-distribution,
	.top-signature-tracks,
	.track-chart-genres,
	.top-performing {

		.pro-content-module-article {
			padding: 0;
		}
	}

	.festivals-lineup-artists {
		position: relative;
		z-index: 2;
		overflow: visible;

		.pro-table-wrapper {

			@media @bp_1024 {
				overflow: visible;
			}
		}

		.pro-table {

			tr {
				position: relative;

				&:nth-child(1) {
					
					.more-info {
						z-index: 8;
					}
				}

				&:nth-child(2) {
					
					.more-info {
						z-index: 7;
					}
				}

				&:nth-child(3) {
					
					.more-info {
						z-index: 6;
					}
				}

				&:nth-child(4) {
					
					.more-info {
						z-index: 5;
					}
				}

				&:nth-child(5) {
					
					.more-info {
						z-index: 4;
					}
				}

				&:nth-child(6) {
					
					.more-info {
						z-index: 3;
					}
				}

				&:nth-child(7) {
					
					.more-info {
						z-index: 2;
					}
				}

				&:nth-child(8) {
					
					.more-info {
						z-index: 1;
					}
				}
			}

			th,
			td {

				&:first-child {
					width: 260px;
				}

				&:last-child {

					.two-tone {
						max-width: 250px;

						.second {
							overflow: visible;
							white-space: normal;
						}
					}
				}
			}

			.more-info {

				> article {
					text-align: left;
					width: 300px;
					bottom: 0;
					top: auto;

					@media @bp_1024 {
						bottom: auto;
						top: 0;
					}
				}

				.info-title {
					.font-size(12);
					font-weight: 500;
					padding-bottom: 10px;
				}

				.item {
					padding: 4px 0;
					border-top: 1px solid @blue-grey;

					&:first-child {
						border: 0;
					}
				}
			}

			.value.two-tone {
				
				.festivals {
					.clamp-lines(1);
					white-space: normal;
				}

				.more-info {
					min-width: 20px;
				}
			}

			.card-micro {

				&.artist {
					width: 260px;
				}

				&.festival {

					.country {
						.text-overflow;
						color: @grey-1;
					}
				}
			}
		}
	}

	.track-chart {

		h2 {

			&.channel {

				&:before {
					content: "";
					display: inline-block;
					vertical-align: middle;
					background-position: left center;
					background-repeat: no-repeat;
					background-size: 16px;
					margin-right: 12px;
					width: 16px;
					height: 26px;
				}

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

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

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

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

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

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

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

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

		}

		.card-micro {

			&.beatport {

				article {
					padding-left: 0;
				}
			}
		}

		.artist {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding-right: 20px;
			width: 150px;

			@media @bp_1200 {
				width: 180px;
			}

			.artist-name {
				.text-overflow;
				max-width: 110px;

				@media @bp_1200 {
					max-width: 140px;
				}

				@media @bp_1300 {
					max-width: 160px;
				}
			}

			.country {
				flex: 0 1 50px;
				margin-left: 8px;
				color: @grey-1;

				.flag {
					margin-right: 4px;
				}
			}
		}
	}

	.top-artists-by {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-header {

			.filters {
				margin-top: 0;
			}
		}

		.pro-content-module-article {
			padding-top: 0;
			padding-bottom: 40px;
		}

		.list-entities {

			@media @bp_1200 {
				padding-left: 0;
				padding-right: 0;
			}

			.item {
				.box-sizing;

				@media @bp_600 {
					width: 50%;
				}

				@media @bp_1024 {
					width: 33.33%;
				}

				@media @bp_1200 {
					width: 16.66%;
				}
			}
		}
	}

	.most-popular {

		&.most-popular-festivals {

			&.pro-content-module {
				margin-top: 8px;
			}
		}

		.pro-content-module-article {

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.col {
			.box-sizing;
			padding-left: 0;
			padding-right: 0;

			&:first-child {
			
				@media @bp_1024 {
					display: flex;
					width: 50%;
				}
			}

			&:last-child {
			
				@media @bp_1024 {
					display: flex;
					width: 50%;
				}
			}
		}

		.pro-table-wrapper {
			width: 100%;
		}

		.pro-table {

			td {
				padding-top: 7px;
				padding-bottom: 7px;
			}
		}
	}

	.fanbase-distribution {

		.pro-content-module-article {

			@media @bp_1024 {
				display: flex;
				flex: 1;
				flex-direction: row;
			}

			.col {

				&.col-1 {
					.box-sizing;
					display: flex;
					flex-direction: row;
					justify-content: space-between;

					@media @bp_1024 {
						width: 40%;
						padding-right: 24px;
					}

					@media @bp_1200 {
						width: 45%;
					}
				}

				&.col-2 {

					@media @bp_1024 {
						width: 60%;
						padding-left: 24px;
					}

					@media @bp_1200 {
						width: 55%;
						padding-left: 40px;
					}

					@media @bp_1300 {
						padding-left: 60px;
					}
				}
			}
		}

		.channels-overview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -4px;
			flex: 1;
			justify-content: flex-start;
			max-width: 496px;

			.item {
				padding: 4px;
				display: flex;
				border: 0;

				@media @bp_768 {
					flex: 0 1 160px;
				}

				&.active {

					.channel-overview {
						background-color: @indigo-2;
						border-color: @indigo-2;
					}
				}
			}

			.channel-overview {
				border: 1px solid @indigo-2;
				padding: 12px;
				text-align: center;
				width: 100%;

				h3 {
					.font-size(10);
					font-weight: 400;
					display: inline-block;
				}
				
				.stats {

					label {
						margin-top: 10px;
					}
				}
			}
		}

		.graph {
			width: 100%;
			height: 350px;
			padding-top: 0;
		}
	}

	.related-analytics-pages {
		.font-size(12);
		text-align: center;
		line-height: 16px;

		h2 {
			.font-size(22);
			font-weight: 500;
			line-height: 24px;
			padding: 12px 0;
		}

		p {

			@media @bp_768 {
				max-width: 60%;
				margin-left: auto;
				margin-right: auto;
			}
		}

		.buttons {

			@media @bp_768 {
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			.btn {
				margin: 12px;
				font-weight: 500;

				> span {
					.text-overflow;
					display: block;
					max-width: 200px;
				}
			}
		}
	}

	.channels-percentages {

		&.genres {

			.percentage {
				text-align: right;

				&:before {
					content: none;
				}

				/*&:hover {

					h4 {
						display: block;
						position: absolute;
						bottom: 50%;
						margin-bottom: -6px;
						right: 4px;
						color: @white;
						background-color: @black;
					}
				}*/
			}

			h4 {
				.font-size(14);
				display: block;
				background-color: transparent;
				color: @black;
				position: relative;
				bottom: 0;
				right: 0;
				margin: 4px 4px 0 0;
				text-transform: none;
			}
		}

		h3 {
			.font-size(12);
			color: @white;
			background-color: @black;
			font-weight: 500;
			padding: 5px @pro-content-module-padding;

			.growth {
				.font-size(10);
				font-weight: 400;
				display: block;

				@media @bp_480 {
					float: right;
				}
			}
		}

		h4 {
			.user-select(none);
			.font-size(9);
			display: none;
			position: absolute;
			bottom: 50%;
			margin-bottom: -6px;
			right: 4px;
			color: @white;
			background-color: @black;
			padding: 2px;
			font-weight: 400;
			line-height: 1;
			white-space: nowrap;
		}

		.percentages {
			.font-size(0);
			height: 31px;
			overflow: hidden;
		}

		.percentage {
			.font-size(0);
			height: 31px;
			display: inline-block;
			float: left;
			background-repeat: no-repeat;
			background-position: left 10px center;
			position: relative;

			&:before {
				content: "";
				display: inline-block;
				height: 31px;
				width: 10px;
				vertical-align: middle;
			}

			&:after {
				display: inline-block;
				vertical-align: middle;
			}

			&:hover {

				h4 {
					display: block;
				}
			}

			&.instagram {
				background-color: @instagram;
				
				&:after {
					content: url('../images/svg/instagram-white.svg');
					width: 16px;
					height: 16px;
				}
			}

			&.twitter {
				background-color: @twitter;
				
				&:after {
					content: url('../images/svg/twitter-white.svg');
					width: 18px;
					height: 16px;
				}
			}

			&.soundcloud {
				background-color: @soundcloud;
								
				&:after {
					content: url('../images/svg/soundcloud-white.svg');
					width: 27px;
					height: 12px;
				}
			}

			&.youtube {
				background-color: @youtube;
				
				&:after {
					content: url('../images/svg/youtube-white.svg');
					width: 20px;
					height: 15px;
				}
			}

			&.bandsintown {
				background-color: @bandsintown;
				
				&:after {
					content: url('../images/svg/bandsintown-white.svg');
					width: 20px;
					height: 15px;
				}
			}

			&.shazam {
				background-color: @shazam;
				
				&:after {
					content: url('../images/svg/shazam-white.svg');
					width: 16px;
					height: 16px;
				}
			}

			&.spotify {
				background-color: @spotify;
				
				&:after {
					content: url('../images/svg/spotify-white.svg');
					width: 16px;
					height: 16px;
				}
			}

			&.deezer {
				background-color: @deezer;
				
				&:after {
					content: url('../images/svg/deezer-white.svg');
					width: 24px;
					height: 16px;
				}
			}

			&.rock {
				background-color: @rock;
			}

			&.country {
				background-color: @country;
			}

			&.pop {
				background-color: @pop;
			}

			&.hip-hop {
				background-color: @hip-hop;
			}

			&.rnb {
				background-color: @rnb;
			}

			&.latin {
				background-color: @latin;
			}

			&.electronic {
				background-color: @electronic;
			}

			&.rock {
				background-color: @rock;
			}

			&.metal {
				background-color: @metal;
			}

			&.punk {
				background-color: @punk;
			}

			&.jazz {
				background-color: @jazz;
			}

			&.reggae {
				background-color: @reggae;
			}

			&.blues {
				background-color: @blues;
			}

			&.classical {
				background-color: @classical;
			}

			&.religious {
				background-color: @religious;
			}

			&.european {
				background-color: @european;
			}

			&.asian {
				background-color: @asian;
			}

			&.middle-eastern {
				background-color: @middle-eastern;
			}

			&.african {
				background-color: @african;
			}

			&.other {
				background-color: #ddd;
			}

			&:first-child {
				background-position: left @pro-content-module-padding center;
			}
		}
	}

	.fanbase-channels {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-header {
			padding-top: 16px;

			.filters {
				margin-top: 0;
			}
		}

		.pro-content-module-article {
			padding-top: 0;
		}
	}

	.fanbase-vs-engagement {

		.pro-content-module-article {

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.col {

				.graph {

					div:first-child {

						svg {
							overflow: visible !important;
						}
					}
				}
			}
		}

		.col {
			.box-sizing;

			&:first-child {
				padding-bottom: 24px;
			
				@media @bp_1024 {
					padding-bottom: 0;
					width: 50%;
					padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
				}
			}

			&:last-child {
			
				@media @bp_1024 {
					width: 50%;
					padding-left: @layout-gutter-tablet/2 + @layout-gutter-tablet;
				}
			}
		}

		.pro-content-module-article {

			.graph-tooltip {

				label {
					width: auto;
				}
			}

			.graph {

				> div:first-child {
					z-index: 1;
					position: relative;

					> div {
						overflow: visible !important;

						.highcharts-container {
							overflow: visible !important;
						}
					}
				}
			}
		}
	}

	.radio-stations {

		.pro-table {

			.card-micro {
				min-width: 180px;
			}

			td {

				&:nth-child(2) {
					width: 100px;
				}

				&:nth-child(3) {
					width: 140px;
				}

				&:nth-child(4) {
					width: 160px;
				}

				&:nth-child(5),
				&:nth-child(6) {
					white-space: nowrap;
				}

				&:nth-child(5) {

					@media @bp_1200 {
						width: 80px;
					}
				}
			}
		}
	}

	.tracks-on-the-radio,
	.radio-stations {

		&.pro-content {
			overflow: visible;
		}

		.pro-table-wrapper {

			@media @bp_768 {
				overflow: visible;
			}
		}

		.value-tooltip {

			.tooltip-article {
				width: 200px;

				@media @bp_768 {
					width: 350px;
				}
			}
		}
	}

	.latest-radio-plays {

		.pro-table {

			.card-micro {
				min-width: 180px;
			}

			th {

				&:nth-child(1) {
					white-space: nowrap;
				}
			}

			td	{

				&:nth-child(1) {
					width: 200px;

					@media @bp_1400 {
						width: 290px;
					}
				}

				&:nth-child(2) {
					width: 140px;
				}

				&:nth-child(3) {
					width: 140px;
				}

				&:nth-child(4) {
					width: 140px;
				}

				&:nth-child(5),
				&:nth-child(6) {
					white-space: nowrap;
					width: 10px;
				}
			}
		}
	}

	.festival-channel-overview {

		.pro-content-module-article {
			padding-top: 0;
		}
	}

	.beatport-overview {

		.beatport-overview-stats {

			.item {

				&:last-child {
					//border-left: 0;

					@media @bp_1024 {
						margin: 0 -4px 0 4px;
					}
				}
			}
		}

		.pro-table {

			td {
				white-space: nowrap;
			}
		}
	}

	.beatport-charts-overview {

		.beatport-overview-stats {

			.item {

				&:nth-child(2) {
					border: 0;
				}
			}
		}
	}

	.music-overview {

		.row {
			display: flex;
		}

		.stats {
			width: 50%;
		}

		.disclaimer {
			.font-size(9);
			.prevent-click;
			font-style: italic;
			color: @grey-1;
			line-height: 10px;
			padding-top: 5px;
			margin-bottom: -10px;
		}
	}

	.audience-map {
		width: 100%;

		&.monthly-audience-map {

			.col {

				&:first-child {

					@media @bp_1200 {
						margin-top: -44px;
					}
				}
			}
		}

		&.instagram-audience-insights,
		&.monthly-audience-map {

			.map-country-popup {
				padding-bottom: 0;

				.top-country-stats {

					td,
					th {

						&:nth-child(2),
						&:nth-child(3) {
							width: 50px;
							text-align: left;
							padding-right: 0;
							padding-left: 0;
						}
					}

					tbody {

						td {

							img {
								margin-right: 4px;
							}
						}
					}
				}
			}
		}

		&.live-performance {

			.col {
				.box-sizing;
				flex-direction: column;

				&:first-child {
					text-align: right;
				
					@media @bp_1200 {
						width: 40%;
					}
				}

				&:nth-child(2) {

				}

				&:last-child {
				
					@media @bp_1200 {
						width: 60%;
					}
				}
			}

			.table-audience-map {

				.channel-value {
					padding-left: 0;
				}
			}
		}

		.pro-content-module-article {
			padding-top: 0;
			padding-bottom: 0;
			padding-bottom: 40px;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.pro-table-wrapper {
			//padding: 24px 0 20px 0;
			padding: 24px 0 0 0;
			
			@media @bp_1200 {
				border-bottom: 0;
				display: flex;
				//flex: 1;
				flex-direction: column;
			}
		}

		.col {
			.box-sizing;

			&:first-child {
				padding-bottom: 24px;
			
				@media @bp_1200 {
					padding-bottom: 0;
					width: 40%;
					padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
					display: flex;
					flex-direction: column;
				}
			}

			&:last-child {
				display: flex;
				justify-content: center;
				align-items: center;
				flex: 1;
			
				@media @bp_1200 {
					width: 60%;
					padding-left: 0;
				}
			}
		}

		.value {

			&.city {
				.clamp-lines(1);
				color: @black;
			}
		}

		.map-legend {
			padding-top: 12px;
		}

		.map-country-popup {

			.city {
				text-transform: none;
				display: inline-block;
				margin-right: 12px;
			}

			.country {
				.font-size(12);

				.flag {
					vertical-align: top;
				}
			}
		}
	}

	.artist-genres-over-time {
		z-index: 1;
		
		.pro-content-module-article {

			@media @bp_1024 {
				display: flex;
				flex: 1;
				flex-direction: row;
			}
		}

		.graph {
			.box-sizing;
			display: flex;
			flex-direction: column;
			justify-content: center;

			@media @bp_1024 {
				flex: 1;
			}
		}

		.graph-legend {
			display: flex;
			justify-content: center;
			
			@media @bp_1024 {
				padding-left: 24px;
				white-space: nowrap;
				flex: 0 0 150px;
				justify-content: flex-start;
				min-width: 150px;
			}

			.legend {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				@media @bp_1024 {
					flex-direction: column;
					flex-wrap: nowrap;
					align-items: flex-start;
				}

				.item {
					margin: 8px;
					padding: 0;
					white-space: nowrap;

					&:first-child {
						padding: 0;
					}
				}
			}
		}
	}

	.country-live-performance {
		width: 100%;

		.value {

			&.city {
				.clamp-lines(1);
				color: @black;
			}
		}

		.table-audience-map {

			.channel-value {
				padding-left: 0;
			}
		}

		.pro-content-module-article {
			padding-top: 0;
			padding-bottom: 0;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.pro-table-wrapper {
			padding: 24px 0 0 0;
			
			@media @bp_1200 {
				border-bottom: 0;
				display: flex;
				flex: 1;
				flex-direction: column;
			}
		}

		.col {
			.box-sizing;
			padding-bottom: 16px;
			
			@media @bp_1200 {
				flex-direction: column;
			}

			&:first-child {
				text-align: right;
			
				@media @bp_1200 {
					width: 40%;
					padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
					display: flex;
				}
			}

			&:last-child {
				display: flex;
				justify-content: center;
				align-items: center;
			
				@media @bp_1200 {
					width: 60%;
					padding-left: @layout-gutter-tablet/2 + @layout-gutter-tablet;
				}
			}
		}
	}

	.top-50-most-connected-artists {
		width: 100%;

		.pro-content-module-article {
			padding-top: 0;

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.pro-table-wrapper {
			.box-sizing;
			padding: 24px 0 0 0;
			width: 100%;
		}

		.pro-table {

			th {

				&:nth-child(4),
				&:nth-child(5),
				&:nth-child(6) {
					text-align: center;

					label {

						&.channel {
							display: inline-block;
							width: 16px;
							height: 16px;
							margin: 0 auto;
							padding-left: 0;
						}
					}
				}
			}
		}

		.col {
			.box-sizing;
			
			@media @bp_1024 {
				flex-direction: column;
			}

			&:first-child {
				text-align: right;
				padding-bottom: 24px;
			
				@media @bp_1024 {
					padding-bottom: 0;
					flex: 1 0 auto;
					//width: 70%;
					//padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
					display: flex;
				}
			}

			& + .col {
			//&:last-child {
				display: flex;
				justify-content: center;
				align-items: center;
			
				@media @bp_1024 {
					width: 30%;
					padding-left: @layout-gutter-tablet + @layout-gutter-tablet;
				}
			}
		}
	}

	.top-100-popular {
		width: 100%;

		.pro-content-module-header {

			h2 {
				.font-size(15);
			}
		}

		.pro-content-module-article {
			padding-top: 0;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.col {
			.box-sizing;

			&:first-child {
				padding-bottom: 24px;
			
				@media @bp_1200 {
					padding-bottom: 0;
					width: 50%;
					padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
					display: flex;
					flex-direction: column;
				}
			}

			&:last-child {
				display: flex;
				justify-content: center;
				align-items: center;
			
				@media @bp_1200 {
					width: 50%;
					padding-left: @layout-gutter-tablet/2 + @layout-gutter-tablet;
				}
			}
		}

		.pro-table {

			td {

				&:first-child {
					text-align: right;
					white-space: nowrap;
				}
			}
		}
	}

	.map-country-popup {
		.font-size(12);
		background-color: @white;
		color: @black;
		padding: 12px;
		padding-bottom: 4px;
		display: inline-block;
		width: auto;
		box-shadow: 0 0 4px 0 rgba(190,203,208,0.5);

		p {

			&:last-child {
				margin-bottom: 0;
				padding-bottom: 0;
			}
		}

		h4 {
			.font-size(14);
			font-weight: 500;
			padding-bottom: 0;
		}

		tr {

			&.total {

				td {
					padding-bottom: 8px;
				}
			}
		}

		td,
		th {
			vertical-align: top;
			padding-right: 6px;
			padding-left: 6px;

			&:first-child {
				white-space: nowrap;
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;
			}
		}

		th {
			.font-size(10);
			color: @grey-1;
			font-weight: 400;
			padding-bottom: 8px;
			padding-top: 0;
		}

		.stats {
			padding-top: 8px;

			.item {

				&.youtube {
					
					&:before {
						content: url('../images/svg/youtube-white.svg');
					}
				}

				&.spotify {
					
					&:before {
						content: url('../images/svg/spotify-white.svg');
					}
				}

				&.bandsintown {
					
					&:before {
						content: url('../images/svg/bandsintown-white.svg');
					}
				}

				&.instagram {
					
					&:before {
						content: url('../images/svg/instagram-white.svg');
					}
				}

				&:before {
					display: inline-block;
					vertical-align: text-bottom;
					margin-right: 6px;
					width: 16px;
					height: 16px;
				}
			}
		}

		.top-country-stats {

			label {
				margin-top: 0;
			}
		}

	}

	.audience-brand-affinity {

		.web-grid {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			position: relative;

			&:before {
				content: "";
				position: absolute;
				bottom: 0;
				right: 0;
				top: 0;
				width: 1px;
				background-color: @white;
				z-index: 1;
			}

			&:after {
				content: "";
				position: absolute;
				left: 0;
				bottom: 0;
				right: 0;
				height: 1px;
				background-color: @white;
				z-index: 1;
			}

			.item {
				.box-sizing;
				flex: 0 1 33.33%;

				@media @bp_768 {
					flex: 0 1 20%;
				}

				&:nth-child(3n+3) {

					.item-logo {
						border-right: 0;

						@media @bp_768 {
							border-right: 1px solid @stats-border-color;
						}
					}
				}

				&:nth-child(3n+5) {

					.item-logo {

						@media @bp_768 {
							border-right: 0;
						}
					}
				}
			}

			.item-logo {
				position: relative;
				padding-top: 100%;
				border-bottom: 1px solid @stats-border-color;
				border-right: 1px solid @stats-border-color;

				figure {
					position: absolute;
					top: 0;
					right: 0;
					bottom: 0;
					left: 0;
					display: flex;
					justify-content: center;
					align-items: center;

					img {
						max-width: 70%;
					}
				}
			}
		}
	}

	.tracks-on-charts,
	.top-videos-and-tracks {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding-bottom: 16px;

			& + .pro-content-module-article {
				padding-bottom: 40px;
			}
		}

		.filters {

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

		.card-micro {

			&.beatport {
				max-width: 360px;
			}
		}

		.pro-table {

			&.table-tracks-on-charts {

				td,
				th {

					&:first-child {
						width: 10px;
					}

					&:nth-child(2) {
						text-align: center;
					}
				}
			}
		}

		.pro-content-module-article {

			& + .pro-content-module-article {
				padding-top: 0;
			}
		}
	}

	.beatport-health {
		position: relative;
		z-index: 1;

		&.v2 {
			
			.pro-content-module-article {
				padding: 0;
				background-color: transparent;

				.col {

					&:first-child {
						text-align: center;
						padding-top: 24px;

						.col-content {
							margin: 0 auto;
							display: inline-block;
							text-align: left;
						}
					}

					&:last-child {

						@media @bp_1200 {
							margin-left: 4px;
						}

						.col-content {
							
							@media @bp_768 {
								display: flex;
								flex-direction: row;
							}

							width: 100%;
						}
					}
				}
			}

			.pro-content-module-article,
			.pro-content-module-footer {
				background-color: transparent;

				@media @bp_1200 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
			}

			.pro-content-module-footer {
				padding: 0;

				.col {

					&:first-child {
						display: none;

						@media @bp_1200 {
							display: flex;
						}
					}
				}
			}

			.col {
				.box-sizing;
				background-color: @white;
				padding: 0 24px;
				padding-bottom: 24px;
				
				@media @bp_1200 {
					flex: 0 1 33.33%;
				}

				&:last-child {
					
					@media @bp_1200 {
						flex: 0 1 66.66%;
					}
				}

				&:first-child {
					margin-bottom: 8px;

					@media @bp_1200 {
						margin-bottom: 0;
						margin-right: 4px;
					}
				}

				&:last-child {

					@media @bp_1200 {
						margin-left: 4px;
					}
				}

			}

			.item {
				.box-sizing;
				width: 100%;
				padding: 16px 0;
				display: flex;
				flex-direction: column;

				&:nth-child(1) {			

					@media @bp_768 {
						width: 50%;
						padding-right: @pro-content-module-padding/2;
					}

					@media @bp_1200 {
						width: 50%;
						padding-right: @pro-content-module-padding*2;
					}
				}

				&:nth-child(2) {

					@media @bp_768 {
						padding-left: @pro-content-module-padding/2;
						width: 50%;
					}

					@media @bp_1200 {
						width: 50%;
						padding-left: @pro-content-module-padding*2;
					}
				}
			}
		}

		.beatport-health-performance,
		.beatport-rank {
			.font-size(12);
			color: @grey-1;
			line-height: 16px;
			display: flex;
			flex-direction: column;
			align-items: center;
			max-width: 270px;

			@media @bp_768 {
				flex: 1;
			}

			p {
				padding-bottom: 0;
				margin-bottom: 0;
			}

			article {
				text-align: left;
			}

			.pro-content-module-subtitle {
				.font-size(15);
				color: @black;
				line-height: 22px;
				font-weight: 500;
				padding: 40px 0 0 0;
			}
		}

		.beatport-rank {
			align-items: flex-start;
			justify-content: space-between;

			.pro-content-module-subtitle {
				padding-top: 32px;
			}

			.stats-wrapper {
				text-align: left;
				width: 100%;
			}

			.stats {
				.box-sizing;
				display: inline-block;

				& + .stats {
					padding-top: 16px;
				}

				strong {
					display: inline-block;
					padding-bottom: 10px;
					vertical-align: middle;
					color: @black;

					@media @bp_1024 {
						padding-bottom: 0;
					}
				}

				label {
					.text-overflow;
					display: block;
					margin-top: 10px;
				}

				.value-change {
					display: inline-block;
					vertical-align: middle;
					margin-left: 15px;
				}
			}
		}

		.stats-table {

			th,
			td {

				&:first-child {

					@media @bp_1200 {
						width: 40%;
					}
				}

				&:last-child {
					color: @black;
				}
			}

			.active {

				td {
					color: @black;
					padding-top: 18px;
					padding-bottom: 18px;

					&:last-child {
						.font-size(15);
						font-weight: 500;
					}
				}
			}

			.genre {
				.clamp-lines(1);
				color: @grey-1;
				height: 12px;
			}
		}
	}

	.festival-health {
		position: relative;
		z-index: 1;
			
		.pro-content-module-article {
			padding: 0;
			background-color: transparent;

			.col {

				&:first-child {
					text-align: center;
					padding-top: 24px;

					.col-content {
						margin: 0 auto;
						display: inline-block;
						text-align: left;

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

				&:last-child {
					padding-top: 24px;

					@media @bp_1200 {
						padding-top: 32px;
						margin-left: 4px;
					}

					.col-content {
						width: 100%;
					}
				}
			}
		}

		.pro-content-module-article,
		.pro-content-module-footer {
			background-color: transparent;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.pro-content-module-footer {
			padding: 0;

			.col {

				&:first-child {
					display: none;

					@media @bp_1200 {
						display: flex;
						flex: 0 1 66.66%;
					}
				}
			}
		}

		.col {
			.box-sizing;
			background-color: @white;
			padding: 0 24px;
			padding-bottom: 24px;
			
			@media @bp_1200 {
				flex: 0 1 66.66%;
			}

			&:last-child {
				
				@media @bp_1200 {
					flex: 0 1 33.33%;
				}
			}

			&:first-child {
				margin-bottom: 8px;

				@media @bp_1200 {
					margin-bottom: 0;
					margin-right: 4px;
				}
			}

			&:last-child {

				@media @bp_1200 {
					margin-left: 4px;
				}
			}

		}

		.item {
			.box-sizing;
			width: 100%;
			padding: 16px 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			&:nth-child(1) {			

				@media @bp_768 {
					width: 50%;
					padding-right: @pro-content-module-padding/2;
				}

				@media @bp_1200 {
					width: 50%;
					//padding-right: @pro-content-module-padding*2;
				}
			}

			&:nth-child(2) {

				@media @bp_768 {
					padding-left: @pro-content-module-padding/2;
					width: 50%;
				}

				@media @bp_1200 {
					width: 50%;
					//padding-left: @pro-content-module-padding*2;
				}
			}
		}

		.festival-health-performance {
			.font-size(12);
			color: @grey-1;
			line-height: 16px;
			display: flex;
			flex-direction: column;
			align-items: center;
			max-width: 270px;

			@media @bp_768 {
				flex: 1;
			}

			p {
				padding-bottom: 0;
				margin-bottom: 0;
			}

			article {
				text-align: left;
			}

			.description {
				padding-top: 10px;
			}

			.pro-content-module-subtitle {
				.font-size(15);
				color: @black;
				line-height: 22px;
				font-weight: 500;
				padding: 40px 0 0 0;
			}
		}

		.stats-table {

			th,
			td {

				&:first-child {

					@media @bp_1200 {
						width: 40%;
					}
				}

				&:last-child {
					color: @black;
				}
			}

			.active {

				td {
					color: @black;
					padding-top: 18px;
					padding-bottom: 18px;

					&:last-child {
						.font-size(15);
						font-weight: 500;
					}
				}
			}

			.genre {
				.clamp-lines(1);
				color: @grey-1;
			}
		}
	}

	.airplay-general-overview {

		& + .beatport-performance {

			&.pro-content-module {
				margin-top: 8px;
			}
		}

		.pro-content-module-article + .pro-content-module-article {
			margin-top: 8px;
		}

		.airplay-overview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -12px 0;

			.item {
				.box-sizing;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				border-left: 1px solid @stats-border-color;
				margin: 12px 0;

				@media @bp_768 {
					width: 50%;
				}

				@media @bp_1024 {
					width: 25%;
				}
			}
		}

		.airplay-overview-secondary {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -12px 0;

			.item {
				.box-sizing;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				border-left: 1px solid @stats-border-color;
				margin: 12px 0;

				@media @bp_768 {
					width: 33.33%;
				}

				@media @bp_1200 {
					width: 22%;
				}

				@media @bp_1400 {
					width: 19.44%;
				}

				&:first-child {

					@media @bp_768 {
						width: 100%;
					}

					@media @bp_1200 {
						width: 34%;
					}

					@media @bp_1400 {
						width: 41.66%;
					}
				}
			}

			ul {
				padding: 14px 24px 10px 24px;
			}

			li {
				.font-size(12);
				padding: 10px 0 0 0;
				display: flex;
				justify-content: space-between;

				&:first-child {
					.font-size(22);
					padding-top: 0;

					strong {
						font-weight: 300;
					}

					.country-flag {
						font-weight: 300;
						color: @black;
					}
				}

				strong {
					.clamp-lines(1);
					margin-right: 6px;
					font-weight: 400;

					& + .country-flag {
						.font-size(12);
						width: 50px;
						min-width: 50px;
					}
				}
			}

			.country-flag {
				text-transform: uppercase;
				color: @grey-1;
			}
		}

		.row {

			@media @bp_768 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.avg-pos-percent-wrapper {
				display: flex;
				flex: 1 0 auto;
				flex-direction: column;
			}
		}

		h3 {
			.font-size(15);
			line-height: 22px;
			font-weight: 500;
			padding: 12px @pro-content-module-padding 0 @pro-content-module-padding;

			@media @bp_768 {
				display: inline-block;
				vertical-align: middle;
			}
		}

		.stats {
			.box-sizing;
			width: 100%;
			padding: 12px @pro-content-module-padding @pro-content-module-padding @pro-content-module-padding;

			& + .stats {
				padding-top: 0;
			}

			.more-info {
				vertical-align: middle;
			}

			label {
				margin-top: 10px;
			}
		}
	}

	.spotify-general-overview {

		.spotify-overview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -12px 0;

			.item {
				.box-sizing;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				border-left: 1px solid @stats-border-color;
				margin: 12px 0;

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

					@media @bp_768 {
						width: 33.33%;
					}

					@media @bp_1200 {
						width: 20%;
					}
				}

				&:nth-child(4) {

					@media @bp_768 {
						width: 100%;
					}

					@media @bp_1200 {
						width: 40%;
					}
				}
			}
		}

		.row {

			@media @bp_768 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.avg-pos-percent-wrapper {
				display: flex;
				flex: 1 0 auto;
				flex-direction: column;
			}
		}

		h3 {
			.font-size(15);
			line-height: 22px;
			font-weight: 500;
			padding: 12px @pro-content-module-padding 0 @pro-content-module-padding;

			@media @bp_768 {
				display: inline-block;
				vertical-align: middle;
			}
		}

		.stats {
			.box-sizing;
			width: 100%;
			padding: 12px @pro-content-module-padding @pro-content-module-padding @pro-content-module-padding;

			& + .stats {
				padding-top: 0;
			}

			.more-info {
				vertical-align: middle;
			}

			label {
				margin-top: 10px;
			}
		}
	}

	.spotify-playlists-overview {

		.playlists-overview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -12px 0;

			.item {
				.box-sizing;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				border-left: 1px solid @stats-border-color;
				margin: 12px 0;

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

					@media @bp_768 {
						width: 33.33%;
					}

					@media @bp_1200 {
						width: 20%;
					}
				}

				&:nth-child(2) {
					border-left: 0;
				}

				&:nth-child(4) {

					@media @bp_768 {
						width: 100%;
					}

					@media @bp_1200 {
						width: 40%;
					}
				}
			}
		}

		.row {

			@media @bp_768 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.stats-wrapper {
				display: flex;
				flex-direction: column;
			}

			.avg-pos-percent-wrapper {
				display: flex;
				flex: 1 0 auto;
				flex-direction: column;
				max-width: 280px;
			}
		}

		h3 {
			.font-size(15);
			line-height: 22px;
			font-weight: 500;
			padding: 12px @pro-content-module-padding 0 @pro-content-module-padding;

			@media @bp_768 {
				display: inline-block;
				vertical-align: middle;
			}
		}

		.stats {
			.box-sizing;
			width: 100%;
			padding: 12px @pro-content-module-padding @pro-content-module-padding @pro-content-module-padding;
	
			& + .stats {
				padding-top: 0;
			}

			.more-info {
				vertical-align: middle;
			}

			label {
				margin-top: 10px;
			}
		}
	}

	.festival-industry-connections {

		.festivals-overview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -12px 0;

			.item {
				.box-sizing;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				border-left: 1px solid @stats-border-color;
				margin: 12px 0;

				@media @bp_360 {
					width: 50%;
				}

				@media @bp_768 {
					width: calc(~'33.33% - 2px');
				}

				@media @bp_1024 {
					width: 20%;
				}
			}
		}

		h3 {
			.font-size(15);
			line-height: 22px;
			font-weight: 500;
			padding: 12px @pro-content-module-padding 0 @pro-content-module-padding;

			@media @bp_768 {
				display: inline-block;
				vertical-align: middle;
			}
		}

		.stats {
			.box-sizing;
			width: 100%;
			padding: 12px @pro-content-module-padding;

			& + .stats {
				padding-top: 0;
			}

			.more-info {
				vertical-align: middle;
			}

			label {
				margin-top: 10px;
			}
		}
	}

	.mentions-fron-industry-professionals {

		.channels-overview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -12px 0;

			.item {
				.box-sizing;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				border-left: 1px solid @stats-border-color;
				margin: 12px 0;

				@media @bp_360 {
					width: 50%;
				}

				@media @bp_768 {
					width: calc(~'33.33% - 2px');
				}

				@media @bp_1024 {
					width: 20%;
				}
			}
		}
	}

	.beatport-tracks-overview {

		.tracks-overview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -12px 0;

			.item {
				.box-sizing;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				border-left: 1px solid @stats-border-color;
				margin: 12px 0;

				@media @bp_360 {
					width: 50%;
				}

				@media @bp_768 {
					width: calc(~'33.33% - 2px');
				}

				@media @bp_1024 {
					width: 20%;
				}
			}
		}

		h3 {
			.font-size(15);
			line-height: 22px;
			font-weight: 500;
			padding: 12px @pro-content-module-padding 0 @pro-content-module-padding;

			@media @bp_768 {
				display: inline-block;
				vertical-align: middle;
			}
		}

		.stats {
			.box-sizing;
			width: 100%;
			padding: 12px @pro-content-module-padding;

			& + .stats {
				padding-top: 0;
			}

			.more-info {
				vertical-align: middle;
			}

			label {
				margin-top: 10px;
			}
		}
	}

	.beatport-health-stats {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		text-align: center;

		.row {
			display: flex;
		}

		.item {
			.box-sizing;
			width: 100%;
			padding: 16px 0;
			display: flex;
			flex-direction: column;

			&:nth-child(1) {

				@media @bp_768 {
					width: 50%;
					padding-right: @pro-content-module-padding*2;
					padding-left: @pro-content-module-padding*2;
				}

				@media @bp_1200 {
					width: 33.33%;
				}
			}

			&:nth-child(2) {
				border-top: 1px solid #D5DDE0;

				@media @bp_768 {
					width: 50%;
					border-top: 0;
					border-left: 1px solid #D5DDE0;
					padding-left: @pro-content-module-padding*2;
				}

				@media @bp_1200 {
					width: 33.33%;
					padding-right: @pro-content-module-padding*2;
				}
			}

			&:nth-child(3) {

				@media @bp_768 {
					width: 100%;
				}

				@media @bp_1200 {
					width: 33.33%;
					padding-left: @pro-content-module-padding*2;
				}
			}
		}
	}

	.beatport-genres {

		.pro-content-module-article {
			padding-top: 0;

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				flex: 1 0 auto;
				padding-bottom: 30px;
			}
		}

		.col {
			.box-sizing;

			@media @bp_1024 {
				display: flex;
				flex-direction: column;
			}

			&.col-1 {
				padding: 0 @pro-content-module-padding 60px 0;
				justify-content: flex-start;

				@media @bp_1024 {
					width: 70%;
					//padding-bottom: 0;
					padding-bottom: 24px;
					min-height: 201px;
				}
			}

			&.col-2 {
				background-color: @indigo-1;
				padding: 0 0 @pro-content-module-padding 0;

				@media @bp_1024 {
					width: 30%;
					margin: 0;
					padding: 0;
				}
			}
		}

		.pro-table-wrapper {
			overflow: visible;
		}

		.pro-table.table-bars {

			.genre {
				.clamp-lines(1);
			}

			tr {
				cursor: pointer;

				&:nth-child(1) {

					.pro-bar {
						background-color: #ADCD4D;
					}
				}

				&:nth-child(2) {

					.pro-bar {
						background-color: #B9D467;
					}
				}

				&:nth-child(3) {

					.pro-bar {
						background-color: #C7D98E;
					}
				}

				&:nth-child(4) {

					.pro-bar {
						background-color: #DDE8BB;
					}
				}

				&:nth-child(5) {

					.pro-bar {
						background-color: #E9F0D2;
					}
				}

				&.scale {
					cursor: default;

					td {
						height: 0px;
					}
				}
			}		
		}

		.genre-details {
			padding: 24px;
			
			@media @bp_1024 {
				padding-bottom: 20px;
			}

			h3 {
				.font-size(16);
				font-weight: 500;
				line-height: 18px;
				padding-bottom: 24px;
			}

			td {
				white-space: nowrap;
			}
		}
	}

	.beatport-track-details {
		.font-size(12);
		background-color: @indigo-1;
		padding: 24px;

		@media @bp_1024 {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 12px;
		}

		&.loading {
			position: relative;

			&:before {
				background-image: url('../images/svg/loader-ani-black.svg');
				background-color: @indigo-1;
			}
		}

		.col {
			.box-sizing;

			@media @bp_1024 {
				padding: 12px;
			}

			&.col-1 {

				@media @bp_1024 {
					width: 50%;
				}
			}

			&.col-2 {
				padding-top: 30px;

				@media @bp_1024 {
					width: 45%;
					padding-top: 12px;
				}
			}
		}

		.title-wrapper {
			display: flex;
			flex-direction: column;

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

			h3 {
				.text-overflow;
				padding-right: 30px;
			}

			.buttons {
				margin-top: 10px;
				display: flex;
				flex-direction: row;
				flex: 1 1 auto;

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

		.btn-play-track + .btn-buy-track {
			margin-left: 20px;
		}

		h3 {
			.font-size(15);
			font-weight: 500;
			line-height: 20px;
		}

		h4 {
			.font-size(12);
			font-weight: 600;
		}

		.row {
			display: flex;
			flex-direction: row;
			padding-top: 16px;
			align-items: center;
			justify-content: flex-start;

			.country,
			.item-stats {
				padding-right: 48px;
			}
		}

		.item-stats {

			label {
				color: @grey-1;
			}
		}

		.artists,
		.genres {
			padding-top: 15px;
			line-height: 1;
		}

		.genres {
			.clamp-lines(1);
			color: @grey-1;
		}

		.graph {
			padding-top: 12px;
		}

		.channel {
			.font-size(12);
			position: relative;
			line-height: 1;
			display: inline-block;
			vertical-align: middle;
			text-transform: uppercase;

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

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

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

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

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

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

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

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

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

			&.facebook {
				
				&:before {
					background-image: url('../images/svg/facebook-color.svg');
					width: 8px;
					background-size: 8px;
				}
			}

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

			&:before {
				content: "";
				width: 16px;
				height: 16px;
				margin-right: 6px;
				display: inline-block;
				background-size: 16px;
				background-repeat: no-repeat;
				background-position: left center;
				vertical-align: middle;
			}
		}

		.list-of-artists {

			.item {
				padding-top: 6px;

				&:first-child {
					padding-top: 0;
				} 
			}
		}

		.card-micro {

			h3 {
				.font-size(12);
				line-height: 1;
			}
		}

		.track-stats {

			@media @bp_480 {
				display: flex;
				flex-direction: row;
				margin: 0 -12px;
			}

			.item {
				padding-top: 30px;
			}

			.item:first-child:nth-last-child(1) {
				width: 100%;
			}

			.item:first-child:nth-last-child(2),
			.item:first-child:nth-last-child(2) ~ .item {

				@media @bp_480 {
					width: 50%;
					padding-left: 12px;
					padding-right: 12px;
				}
			}
		}

		.pro-table {
			width: 100%;

			label {
				.clamp-lines(2);
				font-weight: 400;
				color: @black;
			}

			.value {
				color: @black;
			}

			.country {
				color: @grey-1;
			}

			tr {

				&:last-child {

					td {
						border: 0;
					}
				}
			}

			th {
				border-color: #A0AEB4;
			}

			td {
				padding-top: 5px;
				padding-bottom: 5px;
			}
		}
	}

	.beatport-positions {

		.pro-content-module-article,
		.pro-content-module-footer {
			background-color: transparent;

			@media @bp_1280 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.pro-content-module-footer {
			padding: 0;

			.col {

				&:first-child {
					display: none;

					@media @bp_1200 {
						display: flex;
					}
				}
			}
		}

		.col {
			.box-sizing;
			background-color: @white;
			padding: 0 24px;
			padding-bottom: 24px;
			
			@media @bp_1280 {
				flex: 0 1 50%;
			}

			&:first-child {
				margin-bottom: 8px;

				@media @bp_1280 {
					margin-bottom: 0;
					margin-right: 4px;
				}
			}

			&:last-child {

				@media @bp_1280 {
					margin-left: 4px;
				}
			}
		}

		.pro-table-wrapper + .pro-table-wrapper {
			margin-top: 20px;
		}

		.pro-table {

			th {

				&:nth-child(3) {
					//width: 30%;
				}
			}

			td {
				color: @black;
				padding-top: 8px;
				padding-bottom: 8px;

				&:first-child,
				&:last-child {
					white-space: nowrap;
					width: 10px;
				}

				&:nth-child(2) {
					width: 50%;
				}
			}
		}
		
		.beatport-entity {
			display: flex;
			flex-direction: row;
			min-width: 210px;

			figure {
				border: 1px solid @blue-grey;
			}

			.photo {
				width: 48px;
				height: 48px;
				min-width: 48px;
				min-height: 48px;
			}

			.info {
				display: flex;
				flex: 1;
				height: 50px;
				flex-direction: column;
				padding-left: 12px;
				justify-content: center;
			}

			h4 {
				.clamp-lines(1);
				.font-size(12);
				font-weight: 500;
				line-height: 1;
				height: 12px;
			}

			.row {
				display: flex;
				flex-direction: row;
				line-height: 1;
				padding-top: 4px;
			}

			.song-info {
				line-height: 1;

				.title-wrapper {
					display: inline-block;
					max-width: calc(~'100% - 30px');
					vertical-align: middle;
				}

				.btn-play-track {
					display: inline-block;
					vertical-align: middle;
					margin-left: 8px;
				}
			}

			.artist {
				.clamp-lines(1);
				color: #707580;
				line-height: 1;
				height: 12px;
			}
		}

		.genre {
			.clamp-lines(1);
			color: #707580;
		}

		.play-track {
			display: flex;
			justify-content: center;
			//align-items: center;
			padding-top: 7px;
			padding-left: 10px;
		}

		.rank {
			text-align: right;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-end;
			width: 54px;

			strong {
				.font-size(12);
				font-weight: 400;
				line-height: 1;
				display: inline-block;
				padding-right: 8px;
			}

			.value-change {
				text-align: left;
				display: inline-block;
				width: 30px;
			}
		}

		.btn-buy {
			color: @blue;
			text-transform: uppercase;
			font-weight: 600;
		}
	}

	.beatport-track-performance {

		.pro-content-module-article {

			& + .pro-content-module-article {
				padding-top: 0;
			}
		}

		.beatport-track-details {

			.pro-table {

				th label {
					white-space: nowrap;
					display: block;
				}

				td {

					@media @bp_768 {
						white-space: nowrap;
					}
				}
			}
		}
	}

	.airplay-by-cities,
	.tracks-on-the-radio {

		.pro-content-module-article {

			& + .pro-content-module-article {
				padding-top: 0;
			}
		}

		.track-stats {
			flex-direction: column;

			h3 {
				.font-size(12);
				font-weight: 500;
				line-height: 20px;
				padding-left: 12px;
				padding-top: 20px;

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

				strong {
					display: inline-block;
					font-weight: 500;
					margin-right: 8px;
				}

				span {
					color: @grey-1;
				}
			}

			.row {
				display: flex;
				flex-direction: row;

				.item {
					padding-top: 0;
				}
			}
		}
	}

	.popular-artists-in-country,
	.artist-connections-distribution,
	.festival-industry-connections-by-something {

		.pro-content-module-article {
			background-color: transparent;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.col {
			.box-sizing;
			background-color: @white;
			padding: 0 24px 24px 24px;
			
			@media @bp_1200 {
				flex: 0 1 50%;
			}

			&:first-child {
				margin-bottom: 8px;

				@media @bp_1200 {
					margin-bottom: 0;
					margin-right: 4px;
				}
			}

			&:last-child {

				@media @bp_1200 {
					margin-left: 4px;
				}
			}
		}

		.pro-table.table-bars {

			td {

				&:last-child {

					@media @bp_768 {
						padding-right: 90px;
					}
				}
			}

			.bar-scale {

				@media @bp_768 {
					padding-right: 90px;
				}
			}
		}

		.genre {
			.clamp-lines(1);
			color: #707580;
		}

		.country {
			padding-right: 12px;
		}
	}

	.festival-industry-connections-by-something {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding: 0;
		}

		.pro-table.table-bars {

			td {

				&:last-child {

					@media @bp_768 {
						padding-right: 130px;
					}
				}
			}

			.bar-scale {

				@media @bp_768 {
					padding-right: 130px;
				}
			}
		}
	}

	.top-countries {
		width: 100%;

		.pro-content-module-article {
			padding-top: 0;
			//padding-bottom: 0;  //comment this

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.pro-table-wrapper {
			//padding: 24px 0 20px 0; //comment this
			padding: 24px 0 0 0; //uncomment this
			
			@media @bp_1200 {
				border-bottom: 0;
				display: flex;
				flex-direction: column;
				flex: unset;
			}
		}

		.col {
			.box-sizing;

			&:first-child {
				padding-bottom: 24px;
			
				@media @bp_1200 {
					padding-bottom: 0;
					width: 40%;
					padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
					display: flex;
					flex-direction: column;
				}
			}

			&:last-child {
				display: flex;
				justify-content: center;
				align-items: center;
			
				@media @bp_1200 {
					width: 60%;
					padding-left: 0;
				}
			}
		}

		.map-country-popup {

			.country {
				.font-size(16);

				.flag {
					vertical-align: top;
				}
			}

			td {
				vertical-align: top;

				&:first-child {
					white-space: nowrap;
					padding-right: 12px;
				}
			}

			.top-cities-row {
				.font-size(10);
				line-height: 12px;

				td {
					padding-top: 12px;
				}

				span {
					color: @grey-1;
				}
			}
		}
	}

	.airplay-by-country {
		width: 100%;
		position: relative;
		z-index: 2;

		.pro-content-module-article {
			padding-top: 0;
			//padding-bottom: 0;  //comment this

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.pro-table-wrapper {
			//padding: 24px 0 20px 0; //comment this
			padding: 24px 0 0 0; //uncomment this
			
			@media @bp_1200 {
				border-bottom: 0;
				display: flex;
				flex-direction: column;
				flex: unset;
			}
		}

		.col {
			.box-sizing;

			&:first-child {
				padding-bottom: 24px;
			
				@media @bp_1200 {
					padding-bottom: 0;
					padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
					display: flex;
					flex-direction: column;
					max-width: 450px;
					width: 450px;
					margin-top: -40px;
				}
			}

			&:last-child {
				display: flex;
				justify-content: center;
				align-items: center;
			
				@media @bp_1200 {
					flex: 1;
					padding-left: 0;
				}
			}
		}

		.map-country-popup {
			max-width: 240px;

			.row {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.country {
				.font-size(12);

				.flag {
					vertical-align: top;
				}
			}
		}

		.airplay-stats-table {
			width: 100%;

			th {
				.font-size(12);
				color: @black;
				text-align: left;
				padding: 8px 3px 0 3px;
			}

			td {
				.font-size(10);
				vertical-align: top;
				padding: 4px 3px;
				line-height: 1;

				&:first-child,
				&:last-child {
					white-space: nowrap;
					width: 10px;
				}
			}

			.clamp-line-1 {
				.clamp-lines(1);
			}
		}
	}

	.top-countries-by-spotify {
		width: 100%;

		.pro-content-module-article {
			padding-top: 0;
			padding-bottom: 40px;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.pro-table-wrapper {
			padding: 24px 0 0 0;
			
			@media @bp_1200 {
				border-bottom: 0;
				display: flex;
				flex: 1;
				flex-direction: column;
			}
		}

		.col {
			.box-sizing;

			&:first-child {
				padding-bottom: 24px;
			
				@media @bp_1200 {
					padding-bottom: 0;
					width: 40%;
					padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
					display: flex;
					flex-direction: column;
				}
			}

			&:last-child {
				display: flex;
				justify-content: center;
				align-items: center;
			
				@media @bp_1200 {
					width: 60%;
					padding-left: 0;
				}
			}
		}
	}

	.country-entity-overview {

		&.track-chart-genres-overview {

			.pro-content-module-article {

				.col {

					&.col-1 {
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;

						@media @bp_1200 {
							width: 60%;
						}
					}

					&.col-2 {

						@media @bp_1200 {
							width: 40%;
						}
					}
				}
				
				.graph {
					width: 60%;
				}

				.graph-legend {
					width: 40%;
					padding-top: 0;
				}
			}

			.graph {
				padding-top: 0;
				position: relative;
				min-height: 250px;

				@media @bp_768 {
					min-height: 330px;
				}
			}
		}

		.pro-content-module-article {

			@media @bp_1200 {
				display: flex;
				flex: 1;
				flex-direction: row;
			}

			.col {

				&.col-1 {
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: flex-start;

					@media @bp_1200 {
						width: 40%;
					}
				}

				&.col-2 {

					@media @bp_1200 {
						width: 60%;
					}
				}
			}

			.graph,
			.graph-legend {
				.box-sizing;
				display: flex;
				flex-direction: column;
				width: 50%;
				justify-content: center;
			}

			.graph {
				padding-top: 0;
			}
		}

		.graph-legend {
			padding-left: 24px;

			.overview {
				padding-bottom: 16px;

				strong {
					.font-size(22);
					font-weight: 400;
					display: block;
				}

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

			.legend {
				.font-size(12);
				flex-direction: column;
				align-items: flex-start;

				.item {
					line-height: 1;
					padding-bottom: 12px;
					position: relative;

					&:last-child {
						padding-bottom: 0;
					}
				}
			}
		}
	}

	.artist-connections-sorted,
	.artist-beatport-network,
	.label-network,
	.spotify-fans,
	.festival-connections-sorted,
	.artists-mentioning-festival {

		.pro-content-module-article {
			padding-top: 0;
			padding-bottom: 40px;
		}

		.div-table {
			padding: 10px 24px;

			.div {
				position: relative;
			}
		}
	}

	.spotify-fans {

		.pro-table-wrapper {

			@media @bp_1024 {
				overflow: visible;
			}
		}
	}

	.top-10-tracks {

		.pro-content-module-article {
			padding-bottom: 40px;
		}

		.value {

			&.artists {
				.clamp-lines(1);
				max-width: 250px;
			}
		}
	}

	.artist-beatport-network,
	.label-network {

		.pro-table-wrapper {

			@media @bp_768 {
				overflow: visible;
			}
		}

		.pro-table {

			.more-info {

				> article {
					text-align: left;
					width: 300px;
				}

				.info-title {
					.font-size(12);
					font-weight: 500;
					padding-bottom: 10px;
				}

				.item {
					padding: 4px 0;
					border-top: 1px solid @blue-grey;

					&:first-child {
						border: 0;
					}
				}
			}
		}

		.card-micro {

			&.song {
				width: 260px;

				.artists {
					.text-overflow;
				}
			}
		}
	}

	.festival-connections-sorted,
	.artists-mentioning-festival {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-header {

			.filters {
				margin-top: 0;
			}
		}
	}

	.artists-mentioning-festival {

		.pro-table {

			td,
			th {

				&:nth-child(4) {
					text-align: center;
					white-space: nowrap;
				}

				.value {

					img {
						margin: 0 12px;
					}
				}
			}
		}
	}

	.top-artists-performing {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding-top: 0;
		}
	}

	.top-hashtags {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding: 0;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.col {
			.box-sizing;
			padding: @pro-content-module-padding;
			
			@media @bp_1200 {
				width: 50%;
				flex: 1;
			}
		}

		.pro-content-module-subtitle {

			&.hash {

				&.instagram {

					&:before {
						color: @instagram;
					}
				}

				&.twitter {

					&:before {
						color: @twitter;
					}
				}

				&.tiktok {

					&:before {
						color: @tiktok;
					}
				}

				&:before {
					content: "#";
					background: none;
				}
			}

			&.mention {

				&.instagram {

					&:before {
						color: @instagram;
					}
				}

				&.twitter {

					&:before {
						color: @twitter;
					}
				}

				&.tiktok {

					&:before {
						color: @tiktok;
					}
				}

				&:before {
					content: "@";
					background: none;
				}
			}

			&:before {
				.font-size(22);
				display: inline-block;
				vertical-align: middle;
				margin-right: 2px;
				font-weight: 500;
			}

			time {
				.font-size(12);
				font-weight: 400;
				color: @grey-1;
				display: inline;
				position: relative;
				padding-left: 18px;
				margin-left: 18px;

				&:before {
					content: "";
					position: absolute;
					left: 0;
					top: -4px;
					bottom: -4px;
					display: inline-block;
					width: 1px;
					background-color: #A0AEB4;
				}
			}
		}

		.hashtags-list {
			padding-top: 20px;
			line-height: 24px;

			.hashtag {
				.font-size(22);
				color: @grey-1;
				font-weight: 300;
				display: inline-block;
				padding: 10px 30px 10px 0;

				@media @bp_768 {
					padding-right: 32px;
				}
			}
		}
	}

	.playlists-over-time {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding: 0;
			background-color: transparent;

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}

			.col {
				.box-sizing;
				display: flex;
				flex: 1 1 auto;
				
				&:first-child {
					padding-bottom: @layout-gutter-tablet;
				
					@media @bp_1024 {
						padding-bottom: 0;
						width: 50%;
						padding-right: @layout-gutter-tablet/6;
						display: flex;
						flex-direction: column;
					}

					&:nth-last-child(1) {
						width: 100%;
						padding-right: 0;
						padding-left: 0;
					}
				}

				&:last-child {
					
				
					@media @bp_1024 {
						display: flex;
						flex-direction: column;
						width: 50%;
						padding-left: @layout-gutter-tablet/6;
					}
				}
			}

			.pro-zero-state {
				margin-top: @pro-content-module-padding;
			}

			.col-content {
				padding: @pro-content-module-padding @pro-content-module-padding 0 @pro-content-module-padding;
				background-color: @white;
				width: 100%;

				@media @bp_1024 {
					display: flex;
					flex-direction: column;
					flex: 1;
					width: auto;
				}
			}
		}

		.graph {
			padding-top: 10px;
		}
	}

	.playlists-reach {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding: 0;
			background-color: transparent;

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}

			.col {
				.box-sizing;
				display: flex;
				flex: 1 1 auto;

				&:first-child {
					padding-bottom: @layout-gutter-tablet;
				
					@media @bp_1024 {
						padding-bottom: 0;
						width: 60%;
						padding-right: @layout-gutter-tablet/6;
						display: flex;
						flex-direction: column;
					}

					&:nth-last-child(1) {
						width: 100%;
						padding-right: 0;
						padding-left: 0;
					}
				}

				&:last-child {
				
					@media @bp_1024 {
						display: flex;
						flex-direction: column;
						width: 40%;
						padding-left: @layout-gutter-tablet/6;
					}
				}
			}

			.pro-zero-state {
				margin-top: @pro-content-module-padding;
			}

			.col-content {
				padding: @pro-content-module-padding @pro-content-module-padding 0 @pro-content-module-padding;
				background-color: @white;
				width: 100%;
				padding-bottom: 40px;

				@media @bp_1024 {
					display: flex;
					flex-direction: column;
					flex: 1;
					width: auto;
				}
			}
		}

		.graph {
			padding-top: 10px;
		}
	}

	.spotify-followers-and-monthly-listeners {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding-top: 0;

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.col {

				.graph {

					div:first-child {

						svg {
							overflow: visible !important;
						}
					}
				}
			}
		}

		.col {
			.box-sizing;

			&:first-child {
				padding-bottom: 24px;
			
				@media @bp_1024 {
					padding-bottom: 0;
					width: 50%;
					padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
				}

				@media @bp_1200 {
					width: 60%;
				}
			}

			&:last-child {
			
				@media @bp_1024 {
					width: 50%;
					padding-left: @layout-gutter-tablet/2 + @layout-gutter-tablet;
				}

				@media @bp_1200 {
					width: 40%;
				}
			}
		}

		.pro-content-module-article {

			.graph-tooltip {

				label {
					width: auto;
				}
			}

			.graph {

				> div:first-child {
					z-index: 1;
					position: relative;

					> div {
						overflow: visible !important;

						.highcharts-container {
							overflow: visible !important;
						}
					}
				}
			}
		}
	}

	.spotify-growth-and-popularity {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding: 0;
			background-color: transparent;

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}

			.col {
				.box-sizing;
				display: flex;
				flex: 1 1 auto;
				
				&:first-child {
					padding-bottom: @layout-gutter-tablet;
				
					@media @bp_1024 {
						padding-bottom: 0;
						width: 50%;
						padding-right: @layout-gutter-tablet/6;
						display: flex;
						flex-direction: column;
					}

					&:nth-last-child(1) {
						width: 100%;
						padding-right: 0;
						padding-left: 0;
					}
				}

				&:last-child {
					
				
					@media @bp_1024 {
						display: flex;
						flex-direction: column;
						width: 50%;
						padding-left: @layout-gutter-tablet/6;
					}
				}
			}

			.pro-zero-state {
				margin-top: @pro-content-module-padding;
			}

			.col-content {
				padding: @pro-content-module-padding @pro-content-module-padding 0 @pro-content-module-padding;
				background-color: @white;
				width: 100%;

				@media @bp_1024 {
					display: flex;
					flex-direction: column;
					flex: 1;
					width: auto;
				}
			}
		}

		.graph {
			padding-top: 10px;
		}
	}

	.spotify-monthly-listeners-distribution {

		.pro-content-module-article {
			padding-top: 0;

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

		.col {
			.box-sizing;

			&:first-child {
				padding-bottom: 24px;
			
				@media @bp_1024 {
					padding-bottom: 0;
					width: 50%;
					padding-right: @layout-gutter-tablet/2 + @layout-gutter-tablet;
				}

				@media @bp_1200 {
					width: 40%;
				}
			}

			&:last-child {
			
				@media @bp_1024 {
					width: 50%;
					padding-left: @layout-gutter-tablet/2 + @layout-gutter-tablet;
				}

				@media @bp_1200 {
					width: 60%;
				}
			}
		}

		.pro-table-pagination {
			padding-bottom: 40px;
		}
	}

	.spotify-playlists-by-genre {

		.pro-content-module-article {
			padding: 0;
			background-color: transparent;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}

			.col {
				.box-sizing;
				display: flex;
				flex: 1 1 auto;
				
				&:first-child {
					padding-bottom: @layout-gutter-tablet;
				
					@media @bp_1200 {
						padding-bottom: 0;
						width: 50%;
						padding-right: @layout-gutter-tablet/6;
						display: flex;
						flex-direction: column;
					}

					&:nth-last-child(1) {
						width: 100%;
						padding-right: 0;
						padding-left: 0;
					}
				}

				&:last-child {
				
					@media @bp_1200 {
						display: flex;
						flex-direction: column;
						width: 50%;
						padding-left: @layout-gutter-tablet/6;
					}
				}
			}

			.pro-zero-state {
				margin-top: @pro-content-module-padding;
			}

			.col-content {
				padding: @pro-content-module-padding @pro-content-module-padding 0 @pro-content-module-padding;
				background-color: @white;
				width: 100%;

				@media @bp_1200 {
					display: flex;
					flex-direction: column;
					flex: 1;
					width: auto;
				}
			}

			.pro-table {

				th {

					&:nth-child(1) {
						width: 40%;
					}

					&:nth-child(2) {
						width: 44%;
					}

					&:nth-child(3) {
						width: 16%;
					}
				}

				td {
				
					&:nth-child(1) {
						width: 40%;
					}

					&:nth-child(2),
					&:nth-child(3) {
						width: 22%;
					}

					&:nth-child(4) {
						width: 16%;
					}
				}
			}
		}

		.pro-content-module-subtitle {
			padding-bottom: 24px;
		 }

		.pro-table-pagination {
			padding-bottom: 40px;
		}

		.graph-wrapper {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex: 1;

			@media @bp_1200 {
				flex-direction: row;
				justify-content: space-evenly;
			}
		}

		.graph {
			width: 280px;
			height: 280px;
			padding-top: 0;
			display: flex;
			justify-content: center;
			align-items: center;

			@media @bp_360 {
				width: 320px;
				height: 320px;
			}

			@media @bp_768 {
				width: 360px;
				height: 360px;
			}

			@media @bp_1200 {
				width: 320px;
				height: 320px;
			}

			@media @bp_1300 {
				width: 360px;
				height: 360px;
			}

			img {
				max-width: 100%;
				max-height: 100%;
			}
		}

		.graph-legend {
			text-align: center;
			padding-bottom: 12px;
			white-space: nowrap;
			padding-top: 0;

			@media @bp_1200 {
				display: flex;
				flex: 0 1 25%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding-bottom: 0;
			}

			.legend {
				text-align: left;
				margin: 0 auto;
				display: inline-block;
				padding-top: 0
			}

			.item {
				padding-bottom: 12px;

				&:last-child {
					padding-bottom: 0;
				}
			}

			label {

				@media @bp_768 {
					.font-size(12);
				}
			}
		}

		.card-micro article a {
			max-width: 100%;
		}
	}

	.days-on-charts-and-tracks-over-time {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding: 0;
			background-color: transparent;

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}

			.col {
				.box-sizing;
				display: flex;
				flex: 1 1 auto;
				
				&:first-child {
					padding-bottom: @layout-gutter-tablet;
				
					@media @bp_1024 {
						padding-bottom: 0;
						width: 50%;
						padding-right: @layout-gutter-tablet/6;
						display: flex;
						flex-direction: column;
					}

					&:nth-last-child(1) {
						width: 100%;
						padding-right: 0;
						padding-left: 0;
					}
				}

				&:last-child {
					
				
					@media @bp_1024 {
						display: flex;
						flex-direction: column;
						width: 50%;
						padding-left: @layout-gutter-tablet/6;
					}
				}
			}

			.pro-zero-state {
				margin-top: @pro-content-module-padding;
			}

			.col-content {
				padding: @pro-content-module-padding @pro-content-module-padding 0 @pro-content-module-padding;
				background-color: @white;
				width: 100%;

				@media @bp_1024 {
					display: flex;
					flex-direction: column;
					flex: 1;
					width: auto;
				}
			}
		}

		.graph-header {

			@media @bp_600 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.graph {
			padding-top: 10px;

			svg + div > div {
				background: transparent !important;
				border-radius: 0px !important;
				box-shadow: none !important;
				padding: 0 !important;
			}
		}
	}

	.events-detected-and-next {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			background-color: transparent;
			padding: 0;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.col {
			.box-sizing;
			background-color: @white;
			padding: @pro-content-module-padding;
			
			@media @bp_1200 {
				flex: 0 1 50%;
			}

			&:first-child {
				margin-bottom: 8px;

				@media @bp_1200 {
					margin-bottom: 0;
					margin-right: 4px;
				}
			}

			&:last-child {

				@media @bp_1200 {
					margin-left: 4px;
				}
			}
		}

		.graph-header {

			@media @bp_600 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.graph {
			padding-top: 10px;

			svg + div > div {
				background: transparent !important;
				border-radius: 0px !important;
				box-shadow: none !important;
				padding: 0 !important;
			}
		}

		.graph-legend {
			
			.item {

				&:first-child {
					color: @grey-1;
				}
			}
		}

		.next-events {
			padding-bottom: 0;

			ul {
				padding-top: 20px;
			}

			.item {
				padding: 8px 16px;
				border-bottom: 1px solid @stats-border-color;
			}

			p {
				text-align: right;
			}

			.btn-txt.blue {
				.font-size(10);
				font-weight: 500;
				letter-spacing: 2px;

				&:hover {
					color: @blue-roll;
					text-decoration: none;
				}
			}
		}

		.event-card {
			display: flex;
			flex-direction: row;
			position: relative;
			align-items: center;

			.date {
				width: 40px;
				height: 40px;

				time {
					width: 40px;
					height: 40px;
					display: block;
					background-color: #494C52;
					color: @white;
					text-align: center;
					text-transform: uppercase;

					.day {
						.font-size(18);
						line-height: 20px;
						padding-top: 4px;
						display: block;
					}

					.month {
						.font-size(12);
						line-height: 13px;
						display: block;
					}
				}
			}

			.event-title {
				display: flex;
				align-items: center;

				.icon-festival {
					width: 16px;
					min-width: 16px;
					margin-left: 8px;
				}
			}

			article {
				padding: 0 0 0 16px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
			}

			h3 {
				.font-size(12);
				.clamp-lines(1);
				overflow: hidden;
				line-height: 18px;
				font-weight: 400;
				color: @black;
			}

			a {
				color: @black;
			}

			.place {
				.font-size(10);
				.clamp-lines(1);
				overflow: hidden;
				line-height: 16px;
				font-weight: 400;
				color: @grey-1;

				.country {
					display: inline-block;
					margin-left: 4px;
				}
			}

			.type-and-capacity {
				.font-size(10);
				.clamp-lines(1);
				color: @grey-1;
				text-transform: uppercase;
			}
		}
	}

	.top-artists-performing-in-country {

		.pro-content-module-article {
			background-color: transparent;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}
		}

		.col {
			.box-sizing;
			background-color: @white;
			padding: 0 @pro-content-module-padding 16px @pro-content-module-padding;
			
			@media @bp_1200 {
				flex: 0 1 50%;
			}

			&:first-child {
				margin-bottom: 8px;

				@media @bp_1200 {
					margin-bottom: 0;
					margin-right: 4px;
				}
			}

			&:last-child {

				@media @bp_1200 {
					margin-left: 4px;
				}
			}
		}

		.pro-table.table-bars {

			td {

				&:last-child {

					@media @bp_768 {
						padding-right: 80px;
					}
				}
			}

			.bar-scale {

				@media @bp_768 {
					padding-right: 80px;
				}
			}
		}

		.genre {
			.clamp-lines(1);
			color: #707580;
		}

		.country {
			padding-right: 12px;
		}
	}

	.top-signature-tracks {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding-bottom: 40px;
		}

		.pro-content-module-header {

			h2 {
				.font-size(15);
			}

			.two-liner {

				&:before {
					top: 0;
					bottom: 0;
				}
			}
		}
	}

	.signature-artists {

		.pro-content-module-article {
			padding-bottom: 40px;
		}

		.list-entities {
			padding: 0;
		}
	}

	.signature-festivals {

		&.country-analytics {

			.pro-content-module-header {

				h2 {
					.font-size(15);
				}
			}

			&.pro-content-module {
				margin-top: 8px;
			}
		}

		.pro-content-module-header {

			.two-liner {

				&:before {
					top: 0;
					bottom: 0;
				}
			}
		}	

		.pro-content-module-article {
			padding: 0 0 @pro-content-module-padding 0;
		}
	}

	.audience-gender-and-age {

		.pro-content-module-article {
			padding: 0;
			background-color: transparent;

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}
		}

		.col {
			.box-sizing;
			background-color: @white;
			padding: 0 24px;
			width: 100%;
			
			@media @bp_1200 {
				flex: 0 1 50%;
			}

			&:first-child {
				margin-bottom: 8px;

				@media @bp_1200 {
					margin-bottom: 0;
					margin-right: 4px;
				}
			}

			&:last-child {

				@media @bp_1200 {
					margin-left: 4px;
				}
			}
		}

		.graph-wrapper {
			display: flex;
			flex-direction: column;

			@media @bp_1200 {
				flex-direction: row;
				justify-content: space-evenly;
			}
		}

		.graph {
			width: 100%;
			min-height: 250px;
			padding-top: 0;
			padding-bottom: 0;

			@media @bp_1200 {
				width: 60%;
			}
		}

		.graph-legend {
			text-align: center;
			padding-bottom: 12px;

			@media @bp_1200 {
				display: flex;
				flex: 0 1 35%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				padding: 0;
			}

			.legend {
				.font-size(12);
				flex-direction: column;
				align-items: flex-start;
				text-align: left;
				margin: 0 auto;
				display: inline-block;
				padding-top: 0;

				.item {
					line-height: 1;
					padding-bottom: 12px;
					position: relative;

					&:last-child {
						padding-bottom: 0;
					}
				}
			}

			.value {
				.font-size(12);
				padding-left: 16px;
				position: relative;
				white-space: nowrap;
			}
		}

		.pro-table-wrapper {
			overflow: visible;
		}
	}

	.artist-connections-distribution {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding: 0;
			background-color: transparent;

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
			}
		}

		.col {
			.box-sizing;
			display: flex;
			flex: 1 1 auto;
			
			&:first-child {
				padding-bottom: @layout-gutter-tablet;
			
				@media @bp_1024 {
					width: 50%;
					padding-right: @layout-gutter-tablet;
					display: flex;
					flex-direction: column;
					margin-right: 4px;
					margin-bottom: 0;
				}

				&:nth-last-child(1) {
					width: 100%;
					padding-right: 0;
					padding-left: 0;
					margin: 0;
				}
			}

			&:last-child {
				
			
				@media @bp_1024 {
					display: flex;
					flex-direction: column;
					width: 50%;
					padding-left: @layout-gutter-tablet;
					padding-bottom: 0;
					margin-left: 4px;
				}
			}
		}

		.col-content {
			padding: @pro-content-module-padding 0 0 0;
			background-color: @white;
			width: 100%;

			@media @bp_1024 {
				display: flex;
				flex-direction: column;
				flex: 1;
				width: auto;
			}
		}

		.chart-subtitle {
			padding-top: 0;
		}

		.pro-table-wrapper {
			overflow: visible;
		}
	}

	.top-spotify-playlists,
	.most-played-tracks-on-spotify {

		.pro-content-module-article {
			padding: 0 0 40px 0;
		}

		h4 {
			.font-size(16);
			text-align: center;
			font-weight: 500;
			padding-bottom: 20px;
		}
	}

	.top-spotify-playlists {

		.list-entities {

			.item {

				@media @bp_1200 {
					width: 16.66%;
				}
			}
		}
	}

	.rising-artists {

		.pro-content-module-article {
			padding: 0 0 40px 0;
		}

		h4 {
			.font-size(16);
			text-align: center;
			font-weight: 500;
			padding-bottom: 20px;
		}
	}

	.in-the-spotlight {

		.pro-content-module-article {
			padding: 0 0 40px 0;
		}

		.list-entities {

			.item {

				@media @bp_1200 {
					width: 16.66%;
				}
			}
		}
	}

	.events-overview-stats {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;

		&.for-country,
		&.for-events {
			margin: -12px 0;

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

			.item {
				margin: 12px 0;

				@media @bp_600 {
					width: 50%;
				}

				@media @bp_768 {
					width: 33.33%
				}

				&:nth-child(1) {

					@media @bp_768 {
						width: 33.33%
					}
				}
			}

			li {

				&:first-child {
					.font-size(22);

					strong {
						font-weight: 300;
					}
				}

				&:last-child {

					strong {
						color: @grey-1;
					}
				}

				strong {
					margin-right: 6px;
					font-weight: 400;
				}
			}
		}

		&.for-country-track-chart-genres {

			@media @bp_768 {
				margin: -12px 0;
			}

			.item {

				@media @bp_600 {
					width: 50%;
					margin: 12px 0;
				}

				@media @bp_768 {
					width: 50%
				}

				@media @bp_1200 {
					//width: 25%;
					width: 50%;
				}

				&:nth-child(1) {

					@media @bp_768 {
						width: 50%
					}
				}
			}

			li {

				&:first-child {

					strong {
						.font-size(22);
					}
				}

				&:last-child {

					strong {
						color: @grey-1;
					}
				}

				strong {
					font-weight: 300;
					margin-right: 6px;
				}
			}
		}

		.item {
			.box-sizing;
			width: 100%;
			padding: 14px 20px 10px 20px;
			display: flex;
			border-left: 1px solid @stats-border-color;
			flex-direction: column;

			@media @bp_600 {
				width: 50%;
			}

			@media @bp_1200 {
				//width: 25%;
				width: 22%;
			}

			&:nth-child(1) {

				@media @bp_1200 {
					width: 34%;
				}
			}
		}

		.general-stats {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
		}

		.stats {
			.box-sizing;
			width: 49%;
			padding-top: 15px;
			display: inline-block;

			strong {

				@media @bp_1024 {
					line-height: 28px;
					padding-bottom: 0;
				}
			}

			span {
				.font-size(14);
			}
		}

		ul {
			.font-size(12);
			line-height: 16px;
			padding-top: 20px;

			li {
				padding-top: 10px;

				&:first-child {
					padding-top: 0;
				}
			}

			strong {
				font-weight: 300;
			}
		}

		.percent {
			.font-size(12);
			color: @grey-1;
		}
	}

	.country-overview-stats {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: -2px;

		.item {
			.box-sizing;
			width: 100%;
			padding: @pro-content-module-padding;
			display: flex;
			border-left: 1px solid @stats-border-color;

			@media @bp_600 {
				width: 50%;
			}

			@media @bp_1200 {
				width: 25%;
			}
		}
	}

	.beatport-overview-stats {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: -12px;

		@media @bp_1024 {
			margin: 0;
		}

		.row {
			display: flex;
		}

		.item {
			.box-sizing;
			width: 100%;
			padding: 12px @pro-content-module-padding;
			display: flex;
			border-left: 1px solid @stats-border-color;
			margin: 12px;
			flex-direction: column;

			@media @bp_1024 {
				margin: 0;
			}

			&:nth-child(1) {

				@media @bp_1024 {
					width: 50%;
				}
			}

			&:nth-child(2) {

				@media @bp_1024 {
					width: 50%;
				}
			}

			> div {
				width: 100%;
			}
		}
	}

	.beatport-network-overview-stats {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: -12px 0;

		.row {
			display: flex;
		}

		.item {
			.box-sizing;
			width: 100%;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			border-left: 1px solid @stats-border-color;
			padding: 12px @pro-content-module-padding;
			margin: 12px 0;

			@media @bp_768 {
				width: 50%;
			}

			@media @bp_1200 {
				width: 33.33%;
			}

			> div {
				width: 100%;
			}
		}

		.stats {
			.box-sizing;
			width: 100%;
			padding-top: 15px;
			display: inline-block;

			@media @bp_600 {
				width: 50%;
			}		
		}
	}

	.top-live-performances {

		.pro-content-module-article {
			padding: 0 0 40px 0;
		}
	}

	.top-posts {
		position: relative;
		z-index: 1;

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-article {
			padding: 0 0 40px 0;
		}
		
		.pro-card-embed {
			border: 1px solid @white-1;
			overflow: hidden;
			width: 100%;

			&.twitter {

				article {
					margin-top: -16px;
				}
			}

			header {
				.box-sizing();
				padding: 16px 20px;
				background-color: @white;
				height: 64px;
				position: relative;
				z-index: 2;
				border-bottom: 1px solid @white-1;

				strong {
					.font-size(14);
					font-weight: 500;
					line-height: 18px;
					text-transform: none;
				}

				time {
					.font-size(10);
					color: #808080;
					display: block;
					text-transform: none;
				}
			}

			article {
				display: block;
				overflow: hidden;
				overflow-y: auto;
				max-height: 505px;
				scrollbar-width: thin;
				min-height: 200px;
				position: relative;
				height: 100%;

				&:before {
					.font-size(12);
					line-height: 16px;
					content: "Content is no longer available.";
					color: @grey;
					text-align: center;
					position: absolute;
					top: 80px;
					left: 20px;
					right: 20px;
					z-index: 0;
				}

				&::-webkit-scrollbar {
					width: 5px;
				}

				&::-webkit-scrollbar-button {
					//background: #000;
				}

				&::-webkit-scrollbar-track-piece {
					background: #eee;
				}

				&::-webkit-scrollbar-thumb {
					background: #ccc;
				}

				> div {
					position: relative;
					z-index: 1;
				}
			}

			blockquote.twitter-tweet {
				.font-size(12);
				line-height: 16px;
			}

			blockquote.twitter-tweet p {
				.font-size(12);
				line-height: 16px;
			}

			.twitter-wrapper {
				margin: 0 -2px;
				position: relative;

				&:after {
					content: "";
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					height: 4px;
					background-color: white;
				}
			}	

			.instagram-media,
			iframe {
				.box-shadow(none) !important;
				min-width: 0 !important;
				margin-top: -54px !important;
				margin-bottom: -45px !important;
				border: 0 !important;
				border-radius: 0 !important;
			}

			.SandboxRoot,
			.EmbeddedTweet,
			.twtr-tweet-text {
				.font-size(10) !important;
			}
		}
	}

	.pro-zero-state {
		.font-size(12);
		text-align: center;
		line-height: 16px;
		padding: @pro-content-module-padding 0;
		line-height: 16px;
		color: @grey-1;
		width: 100%;

		h2,
		h4 {
			.font-size(22);
			font-weight: 500;
			line-height: 24px;
			padding: 12px 0;
			color: @black;
		}

		p {
			color: @black;

			@media @bp_768 {
				max-width: 60%;
				margin-left: auto;
				margin-right: auto;
			}
		}

		.buttons {

			@media @bp_768 {
				display: flex;
				flex-direction: row;
				justify-content: center;
			}

			.btn {
				margin: 12px;

				> span {
					.text-overflow;
					display: block;
					max-width: 200px;
				}
			}
		}
	}

	.events-by-subgenres,
	.top-subgenres {

		.pro-table-wrapper {
			margin: 0;
		}
	}

	.top-subgenres {
		position: relative;
		z-index: 2;
		overflow: visible;

		.pro-table.table-bars {

			tr {
				cursor: pointer;

				&:nth-child(1) {

					.pro-bar {
						//.opacity(1);

						&:after {
							.opacity(0);
						}
					}
				}

				&:nth-child(2) {

					.pro-bar {
						//.opacity(0.9);

						&:after {
							.opacity(0.1);
						}
					}
				}

				&:nth-child(3) {

					.pro-bar {
						//.opacity(0.8);

						&:after {
							.opacity(0.2);
						}
					}
				}

				&:nth-child(4) {

					.pro-bar {
						//.opacity(0.7);

						&:after {
							.opacity(0.3);
						}
					}
				}

				&:nth-child(5) {

					.pro-bar {
						//.opacity(0.6);

						&:after {
							.opacity(0.4);
						}
					}
				}

				&:nth-child(6) {

					.pro-bar {
						//.opacity(0.5);

						&:after {
							.opacity(0.5);
						}
					}
				}

				&:nth-child(7) {

					.pro-bar {
						//.opacity(0.4);

						&:after {
							.opacity(0.6);
						}
					}
				}

				&:nth-child(8) {

					.pro-bar {
						//.opacity(0.3);

						&:after {
							.opacity(0.7);
						}
					}
				}

				&:nth-child(9) {

					.pro-bar {
						//.opacity(0.25);

						&:after {
							.opacity(0.75);
						}
					}
				}

				&:nth-child(10) {

					.pro-bar {
						//.opacity(0.2);
						
						&:after {
							.opacity(0.8);
						}
					}
				}

				&.scale {
					cursor: default;

					td {
						//height: 0px;
					}
				}

				.pro-bar {
					
					&:after {
						.opacity(0);
						content: "";
						position: absolute;
						left: 0;
						top: 0;
						right: 0;
						bottom: 0;
						background-color: @white;
					}
				}
			}		
		}
	}

	.top-channels {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-header {

			.filters {
				margin-top: 0;
			}
		}

		.pro-content-module-article {
			padding-top: 0;
		}

		.pro-table {

			&.table-bars {

				td {

					&:first-child {
						text-align: left;
					}
				}
			}
		}
	}

	.top-tracks-on-beatport-charts {

		.pro-content-module-article {
			padding-top: 0;
		}
	}

	.spotify-playlist-listing {

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-header {

			.filters {
				margin-top: 0;
			}
		}

		.pro-content-module-article {
			padding-top: 0;
		}

		.card-micro article a {
			max-width: 100%;
		}
	}

	.spotify-track-listing {

		xxxx

		&.pro-content-module {
			margin-top: 8px;
		}

		.pro-content-module-header {

			.filters {
				margin-top: 0;
			}
		}

		.pro-content-module-article {
			padding-top: 0;

			& + .pro-content-module-article {
				padding-bottom: 40px;
			}
		}

		.pro-table {

			.row {
				display: flex;
				flex-direction: row;
				align-items: center;
				flex: 1;
			}
		}

		.track-stats {

			@media @bp_480 {
				flex-direction: column;
				margin: 0;
			}

			@media @bp_1200 {
				flex-direction: row;
				margin: 0 -12px;
			}

			.item:first-child:nth-last-child(1) {
				width: 100%;
			}

			.item:first-child:nth-last-child(2),
			.item:first-child:nth-last-child(2) ~ .item {

				@media @bp_480 {
					width: 100%;
					padding-left: 0;
					padding-right: 0;
				}

				@media @bp_1200 {
					width: 50%;
					padding-left: 12px;
					padding-right: 12px;
				}
			}

			.pro-table {

				th {
					white-space: nowrap;
				}

				td {

					&:last-child {
						white-space: nowrap;
					}
				}
			}

			.track {
				.clamp-lines(1);
				white-space: normal;
				max-width: none;
			}
		}
	}



	/***********************************************/

	.pro-table-wrapper {
		overflow: hidden;
		overflow-x: auto;
		scrollbar-width: thin;

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-button {
			//background: #000;
		}

		&::-webkit-scrollbar-track-piece {
			background: #eee;
		}

		&::-webkit-scrollbar-thumb {
			background: #ccc;
		}
	}

	.pro-table {
		.box-sizing;
		.font-size(12);
		color: @grey-1;
		width: 100%;

		&.sticky-header {

			th,
			.thead {
				padding-top: 20px;
				position: sticky;
				top: 0;
				background-color: @white;
				z-index: 1;

				&:after {
					content: "";
					height: 2px;
					position: absolute;
					left: 0;
					right: 0;
					bottom: -2px;
					background-color: @white-1;
				}
			}
		}

		&.table-selectable {

			>tbody {

				>tr {
					cursor: pointer;

					&.active {

						> td {
							background-color: @indigo-2;
							color: @black;
						}
					}

					&:hover {

						&:not(.active) {

							> td {
								background-color: @indigo-1;
							}
						}
					}
				}
			}
		}

		&:not(.table-selectable) {

			&.active-sort-col-1 {

				th:nth-child(1),
				td:nth-child(1) {
					color: @black;
				}
			}

			&.active-sort-col-2 {

				th:nth-child(2),
				td:nth-child(2) {
					color: @black;
				}
			}

			&.active-sort-col-3 {

				th:nth-child(3),
				td:nth-child(3) {
					color: @black;
				}
			}

			&.active-sort-col-4 {

				th:nth-child(4),
				td:nth-child(4) {
					color: @black;
				}
			}

			&.active-sort-col-5 {

				th:nth-child(5),
				td:nth-child(5) {
					color: @black;
				}
			}

			&.active-sort-col-6 {

				th:nth-child(6),
				td:nth-child(6) {
					color: @black;
				}
			}

			&.active-sort-col-7 {

				th:nth-child(7),
				td:nth-child(7) {
					color: @black;
				}
			}

			&.active-sort-col-8 {

				tbody th:nth-child(8),
				tbody td:nth-child(8) {
					color: @black;
				}
			}
		}

		&.table-audience-map {

			td {
				padding-top: 5px;
				padding-bottom: 5px;

				&:first-child {
					text-align: right;
					width: 5px;
				}

				.country {
					min-width: 60px;
				}
			}

			.channel-value {
				padding-left: 25px;
			}
		}

		&.table-signature-festivals {

			.card-micro {

				h3 {
					color: black;

					@media @bp_768 {
						.font-size(14);
					}
				}
			}

			th {

				@media @bp_1200 {
					white-space: nowrap;
				}

				&:last-child {
					text-transform: uppercase;
				}
			}

			.channel-value {
				padding-left: 25px;
			}
		}

		&.table-track-charts {

			td,
			th {

				&:first-child {
					width: 10px;
					text-align: right;
				}

				&:nth-child(3) {
					width: 12%;
				}

				&:nth-child(4) {
					width: 12%;
				}

				&:nth-child(5) {
					width: 100px;
				}

				&:nth-child(6) {
					width: 60px;
				}

				&:nth-child(7) {
					width: 100px;
				}
			}

			td {

				&:nth-child(2) {
					color: @black;
				}
			}

			th {
				@media @bp_1200 {
					white-space: nowrap;
				}
			}

			.peak-date,
			.time-on-chart {
				white-space: nowrap;
			}
		}

		&.table-top-performing-artists {

			td,
			th {
				padding: 10px;

				&:first-child {
					padding-left: @pro-content-module-padding;
					width: 35%;
				}

				&:nth-child(2) {
					white-space: nowrap;
				}

				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(5) {
					padding-left: 12px;
					padding-right: 12px;
					justify-content: center;
				}
			}

			th {

				&:last-child {
					text-align: center;
				}
			}

			.genre {
				.box-sizing;
				.font-size(10);
				.text-overflow;
				text-transform: uppercase;
				color: #808080;
				display: inline-block;
				padding: 15px 20px 0px 0;

				strong {
					.font-size(16);
					font-weight: 500;
					display: block;
					color: @black;
				}
			}

			.career-health-status {
				display: flex;
				flex-direction: row;
				padding-top: 10px;

				label,
				div {
					display: flex;
					width: 33.33%;
					justify-content: center;
				}

				.good,
				.fair,
				.poor {
					align-items: center;
					line-height: 1;

					&:before {
						content: "";
						.rounded-corners(50%);
						display: inline-block;
						width: 12px;
						height: 12px;
						margin-right: 8px;
						vertical-align: middle;
					}
				}

				.good {

					&:before {
						background-color: #68E2AC;
					}
				}

				.fair {

					&:before {
						background-color: #FFE45D;
					}
				}

				.poor {

					&:before {
						background-color: #F97F8F;
					}
				}
			}
		}

		&.table-connections-by-popularity {

			.tr {
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 2px solid @white-1;
			}

			.ReactVirtualized__Grid {
				outline: 0;
			}

			.ReactVirtualized__Table__Grid {

				.tr {
				
					&:hover {
						background-color: @white-2;
					}
				}
			}

			.td,
			.th {
				.font-size(9);
				padding: 10px;
				display: flex;

				&:first-child {
					.font-size(10);
					padding-left: @pro-content-module-padding;
					flex: 1 0 20%;
				}

				&:nth-child(2) {
					flex: 1 0 25%;
				}

				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(5) {
					padding-left: 10px;
					padding-right: 10px;
					justify-content: center;
				}

				&:nth-child(3) {
					flex: 0 0 50px;

					@media @bp_1200 {
						flex: 0 0 105px;
					}
				}

				&:nth-child(4) {
					flex: 0 0 70px;

					@media @bp_1200 {
						flex: 0 0 134px;
					}
				}

				&:nth-child(5) {
					flex: 0 0 50px;

					@media @bp_1200 {
						flex: 0 0 108px;
					}
				}

				&:last-child {
					padding-right: @pro-content-module-padding;
				}
			}

			.value {
				color: @black;

				@media @bp_768 {
					.font-size(14);
				}
			}

			.th {
				padding-top: 20px;
				padding-botom: 20px;
			}

			.td,
			td {
				position: relative;

				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(5) {

					&:before {
						content: "";
						position: absolute;
						width: 2px;
						left: 0;
						top: 10px;
						bottom: 10px;
						background-color: @white-1;
					}
				}
			}

			.td {

				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(5) {

					&:before {
						top: 0;
						bottom: 0;
					}
				}
			}

			th {
				.font-size(9);
				padding-top: 20px;

				&:first-child {
					.font-size(10);
				}
			}

			.card-micro {

				h3 {
					color: black;

					@media @bp_768 {
						.font-size(14);
					}
				}
			}

			.channel {
				.font-size(0);
				white-space: nowrap;
				text-align: center;
				display: block;
				margin-right: 0;

				&.viberate {
					text-align: left;
				}

				@media @bp_1200 {
					.font-size(9);
					text-align: left;
					margin-right: 6px;
				}
			}

			.genre {
				.box-sizing;
				.font-size(10);
				.text-overflow;
				text-transform: uppercase;
				color: #808080;
				display: inline-block;
				padding: 10px 20px 10px 0;
				
				@media @bp_1024 {
					width: 33.33%;
				}

				&:last-child {
					padding-right: 0;
				}

				strong {
					.font-size(16);
					font-weight: 500;
					display: block;
					color: @black;
				}
			}

			.following {
				text-align: center;
				//padding-left: 10px;
			}
		}

		&.table-top-countries {

			td {

				&:first-child {
					text-align: right;
					width: 10px;
				}

				.country {
					min-width: 80px;
				}
			}

			th {
				white-space: nowrap;
			}
		}

		&.table-most-mentioned {

			.card-micro {
				min-width: 250px;
			}

			.mentionees {
				.clamp-lines(1);
				max-width: 350px;
				line-height: 1;
				color: @black;
			}
		}

		&.table-bars {
			color: @black;
			position: relative;

			&.has-label-y {

				> tbody {

					> tr {

						> td {

							&:first-child {
								padding-left: 20px;
							}
						}
					}
				}
			}

			&.countries {

				tr {

					&:nth-child(1) {

						.pro-bar {
							background-color: #494C52;
						}
					}

					&:nth-child(2) {

						.pro-bar {
							background-color: #5b5e63; //#707580;
						}
					}

					&:nth-child(3) {

						.pro-bar {
							background-color: #6d7075; //#88929D;
						}
					}

					&:nth-child(4) {

						.pro-bar {
							background-color: #7f8186; //#A0AEB4;
						}
					}

					&:nth-child(5) {

						.pro-bar {
							background-color: #929497; //#BECBD0;
						}
					}

					&:nth-child(6) {

						.pro-bar {
							background-color: #a4a5a8; //@blue-grey;
						}
					}

					&:nth-child(7) {

						.pro-bar {
							background-color: #b6b7ba; //#F6F6F5;
						}
					}
				}		
			}

			&.age-and-gender {

				td {
					.font-size(10);
					color: @grey-1;

					&:last-child {
						padding-right: 30px;
					}
				}

				.bar-scale {
					padding-right: 30px;
				}

				.pro-bar {
					background-color: @male;
					cursor: pointer;

					&:hover {

						.pro-bar-tooltip {
							display: block;
						}
					}

					.sub-pro-bar {
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						background-color: @female;
						margin: 0;
					}
				}
			}

			&.table-bars-selectable {

				tr {

					&:not(.scale) {

						&:hover {
							background-color: @indigo-1;
						}
					}
				}
			}

			.pro-bar-tooltip {
				.box-shadow;
				display: none;
				background-color: @white;
				padding: 12px 18px;
				position: absolute;
				top: 28px;
				left: 40px;
				z-index: 1;

				label {
					.font-size(10);
					color: @grey-1;
					padding-bottom: 12px;
					display: block;
				}

				.total {

					td {
						padding-bottom: 12px !important;
					}
				}

				td {
					.font-size(12);
					border: 0;
					text-align: left;
					width: auto;
					padding: 4px 6px;
					line-height: 1;

					&:first-child {
						border: 0;
						width: auto;
						color: @black;
						text-align: left;
						padding: 4px 6px;
						padding-left: 0;
					}

					&:last-child {
						padding: 4px 6px;
						padding-right: 0;
					}
				}
			}

			tfoot {
				position: absolute;
				left: -10px;
				top: 0;
				bottom: 0;

				td,
				td:first-child {
					border: 0;
				}
				
				.label-y {
					display: none;

					@media @bp_768 {
						display: flex;
						align-items: center;
						justify-content: center;
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						text-align: center;
						width: 20px;

						span {
							.rotate(-90);
							.transform-origin;
							display: inline-block;
						}
					}
				}
			}

			tr {

				&.active {

					td {
						color: @black;
						background-color: @indigo-2;
					}

					.pro-bar {
						color: @black;
					}
				}

				&.scale {

					td {
						border: 0;
						padding-top: 0;
						padding-bottom: 0;
						position: relative;
						height: 40px;

						&:first-child {
							display: none;

							@media @bp_768 {
								display: table-cell;
							}
						}

						&:last-child {
							border-top: 1px solid @blue-grey;
							border-left: 0;
						}
					}
				}
			}

			td {
				display: block;
				width: 100%;
				border-bottom: 1px solid transparent;
				padding: 8px 0;

				@media @bp_768 {
					display: table-cell;
				}

				&:first-child {
					white-space: normal;
					padding-left: 0;

					@media @bp_768 {
						//width: 200px;
						width: 10px;
						text-align: right;
						border-right: 1px solid @blue-grey;
						white-space: nowrap;
						padding-right: 12px;
					}
				}

				&:last-child {
					width: 100%;
					border-bottom: 1px solid @blue-grey;
					padding-top: 0;

					@media @bp_768 {
						padding-left: 0;
						padding-top: 8px;
						border-bottom: 0;
						width: auto;
						padding-right: 150px;
					}
				}
			}

			label {

				&.channel {
					.font-size(10);
					position: relative;
					line-height: 1;
					display: inline-block;
					vertical-align: middle;
					color: @grey-1;
					text-transform: uppercase;

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

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

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

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

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

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

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

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

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

					&.facebook {
						
						&:before {
							background-image: url('../images/svg/facebook-color.svg');
							width: 8px;
							background-size: 8px;
						}
					}

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

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

			.main-genre {
				display: block;
				color: @grey-1;
			}

			.genre {
				line-height: 1;

				small {
					.font-size(10);
					color: @grey-1;
					display: block;
					line-height: 1;
					padding-top: 3px;
				}
			}

			.bar-scale {
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				height: 30px;

				@media @bp_768 {
					padding-right: 150px;
				}

				.scale-item {
					position: relative;

					&:not(first-child) {

						span {
							width: 50px;
							margin-right: -25px;
							text-align: center;
						}
					}

					&:before {
						content: "";
						position: absolute;
						top: 0;
						left: 0;
						height: 4px;
						width: 1px;
						background-color: @blue-grey;
					}

					span {
						.font-size(10);
						position: absolute;
						right: 100%;
						top: 10px;
						color: @grey-1;
					}
				}
			}
	
			.pro-bar {
				position: relative;
				background-color: @black-1;
				height: 24px;
				line-height: 24px;

				@media @bp_768 {
					color: @grey-1;
				}

				span {
					position: absolute;
					white-space: nowrap;
					left: 12px;

					@media @bp_768 {
						left: 100%;
						margin-left: 10px;
					}
				}

				&.instagram {
					background-color: @instagram;
				}

				&.twitter {
					background-color: @twitter;
				}

				&.soundcloud {
					background-color: @soundcloud;
				}

				&.youtube {
					background-color: @youtube;
				}

				&.bandsintown {
					background-color: @bandsintown;
				}

				&.shazam {
					background-color: @shazam;
				}

				&.spotify {
					background-color: @spotify;
				}

				&.deezer {
					background-color: @deezer;
				}

				&.rock {
					background-color: @rock;
				}

				&.country {
					.font-size(12);
					background-color: @country;
					text-transform: none;
					padding-right: 0;
				}

				&.pop {
					background-color: @pop;
				}

				&.hip-hop {
					background-color: @hip-hop;
				}

				&.rnb {
					background-color: @rnb;
				}

				&.latin {
					background-color: @latin;
				}

				&.electronic {
					background-color: @electronic;
				}

				&.rock {
					background-color: @rock;
				}

				&.metal {
					background-color: @metal;
				}

				&.punk {
					background-color: @punk;
				}

				&.jazz {
					background-color: @jazz;
				}

				&.reggae {
					background-color: @reggae;
				}

				&.blues {
					background-color: @blues;
				}

				&.classical {
					background-color: @classical;
				}

				&.religious {
					background-color: @religious;
				}

				&.european {
					background-color: @european;
				}

				&.asian {
					background-color: @asian;
				}

				&.middle-eastern {
					background-color: @middle-eastern;
				}

				&.african {
					background-color: @african;
				}

				&.other {
					background-color: #ddd;
				}
			}
		}

		&.table-airplay-by-cities {

			td {

				&:first-child {
					text-align: right;
					width: 10px;
					white-space: nowrap;
				}

				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(5),
				&:nth-child(6), {
					width: 100px;

					@media @bp_1400 {
						width: 150px;
					}
				}
			}
		}

		&.table-beatport-charts {

			.pro-content-module-article {
				padding-top: 0;
			}

			&.top-tracks {

				td,
				th {

					&:nth-child(2),
					&:nth-child(3) {
						width: 15%;
						white-space: normal;

						.value {
							.clamp-lines(1);
						}
					}
				}
			}

			&.performance {

				td,
				th {

					&:nth-child(2),
					&:nth-child(4),
					&:nth-child(7), {
						width: 15%;
						white-space: normal;

						.value {
							.clamp-lines(1);
						}
					}
				}
			}

			&.artist-network {

				td,
				th {

					&:nth-child(2),
					&:nth-child(3),
					&:nth-child(4),
					&:nth-child(5) {
						white-space: nowrap;
					}
				}

				small {
					.font-size(10);
					line-height: 1;
					display: block;
				}

				.more-info {
					bottom: 1px;
					vertical-align: middle;
				}
			}

			&.fans-on-network {

				&.active-sort-col-4 {

					th:nth-child(3) {
						background-color: @indigo-1;
					}

					th:nth-child(4) {
						background-color: transparent;
					}
				}

				td,
				th {

					&:nth-child(2),
					&:nth-child(3),
					&:nth-child(4),
					&:nth-child(5) {
						white-space: nowrap;
					}
				}

				th {

					&:last-child {
						text-align: center;

						label {
							text-align: left;
						}
					}
				}

				td {

					&:last-child {
						text-align: center;
						white-space: nowrap;
					}
				}

				small {
					.font-size(10);
					line-height: 1;
					display: block;
				}

				.more-info {

					> article {
						text-align: left;
						width: 300px;
					}

					.info-title {
						.font-size(12);
						font-weight: 500;
						padding-bottom: 10px;
					}

					.item {
						padding: 4px 0;
						border-top: 1px solid @blue-grey;

						&:first-child {
							border: 0;
						}
					}
				}
			}

			&.label-network {

				.more-info {
					bottom: 1px;
					vertical-align: middle;

					> article {
						text-align: left;
						width: 300px;
					}

					.info-title {
						.font-size(12);
						font-weight: 500;
						padding-bottom: 10px;
					}

					.item {
						padding: 4px 0;
						border-top: 1px solid @blue-grey;

						&:first-child {
							border: 0;
						}
					}
				}
			}

			label {

				&.channel {
					text-transform: none;
					line-height: 1;

					&:not(.sortable) {
						padding-left: 26px;

						&:before {
							position: absolute;
							left: 0;
							top: 0;
						}
					}
				}
			}

			td,
			th {

				&:first-child {
					width: 30%;
				}

				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(5),
				&:nth-child(6) {
					white-space: nowrap;
				}

				&:last-child {
					text-align: left;
					white-space: nowrap;
				}
			}
		}

		&.table-playlists-spotify {

			.value {

				&.track,
				&.artist {
					.text-overflow;
					max-width: 130px;
				}

				sup {
					margin-right: 5px;
				}
			}
		}

		&.table-top-videos-and-tracks {

			td {

				&:first-child {
					text-align: right;
				}
			}
		}

		&.table-tracks-spotify {

			&.active-sort-col-7 {

				tr:not(.active) {

					td:nth-child(8) {
						background-color: @indigo-1;
					}

					td:nth-child(7) {
						background-color: transparent;
					}
				}
			}

			th {

				&:nth-child(6) {
					white-space: nowrap;

					.more-info {

						article {
							white-space: normal;
						}
					}
				}
			}

			td {

				&:nth-child(6) {
					width: 10px;
					white-space: nowrap;
				}
			}

			.value {

				&.artist {
					.text-overflow;
					max-width: 130px;
				}

				.value-change {
					display: inline-block;
					vertical-align: middle;
					margin-left: 8px;

					&:before {
						background-size: 8px;
					}
				}
			}
		}
	
		&.active-sort-col-1 {

			th:nth-child(1),
			td:nth-child(1) {
				background-color: @indigo-1;
			}
		}

		&.active-sort-col-2 {

			th:nth-child(2),
			td:nth-child(2) {
				background-color: @indigo-1;
			}
		}

		&.active-sort-col-3 {

			th:nth-child(3),
			td:nth-child(3) {
				background-color: @indigo-1;
			}
		}

		&.active-sort-col-4 {

			th:nth-child(4),
			td:nth-child(4) {
				background-color: @indigo-1;
			}
		}

		&.active-sort-col-5 {

			th:nth-child(5),
			td:nth-child(5) {
				background-color: @indigo-1;
			}
		}

		&.active-sort-col-6 {

			th:nth-child(6),
			td:nth-child(6) {
				background-color: @indigo-1;
			}
		}

		&.active-sort-col-7 {

			th:nth-child(7),
			td:nth-child(7) {
				background-color: @indigo-1;
			}
		}

		&.active-sort-col-8 {

			tbody th:nth-child(8),
			tbody td:nth-child(8) {
				background-color: @indigo-1;
			}
		}

		tr {

			&.active {

				&.green {
					
					td {
						background-color: #68e2ac;
						color: @black;
					}
				}

				&.yellow {
					
					td {
						background-color: @yellow;
						color: @black;
					}
				}

				&.red {
					
					td {
						background-color: @red;
						color: @black;
					}
				}
			}
		}

		th,
		td {
			text-align: left;
			padding: 4px 12px;
			border-bottom: 1px solid @blue-grey;
			vertical-align: middle;

			&:first-child {
				padding-left: @pro-content-module-padding/2;
			}

			&:last-child {
				padding-right: @pro-content-module-padding/2;
			}

			.more-info {
				white-space: normal;
			}

			sup {
				vertical-align: middle;
			}
		}

		th {
			.box-sizing;
			padding-top: 16px;
			padding-bottom: 16px;
			font-weight: 400;
			line-height: 1;
			vertical-align: middle;
			color: @black;
			border-bottom: 1px solid #A0AEB4;
			letter-spacing: 0px;
			min-height: 56px;

			label {
				line-height: 16px;
			}

			.more-info {
				vertical-align: middle;
				z-index: 3;
			}
		}

		td {

			&.nowrap {
				white-space: nowrap;
			}

			&.r {
				text-align: right;
			}

			&.c {
				text-align: center;
			}

			&.l {
				text-align: left;
			}
		}

		a {
			color: inherit;
		}

		.clamp-line-1 {
			.clamp-lines(1);
		}

		label {
			position: relative;
			line-height: 1;
			display: inline-block;

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

			&.viberate {
						
				&:before {
					background-image: url('../images/svg/viberate-color.svg');
					width: 16px;
					height: 16px;
				}
			}

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

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

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

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

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

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

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

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

			&.facebook {
				padding-left: 16px;
				
				&:before {
					background-image: url('../images/svg/facebook-color.svg');
					background-size: 8px;
				}
			}

			&.channel {
				display: block;
				padding-left: 24px;

				&.sortable {
					cursor: pointer;

					&:after {
						margin-left: 0;
						position: absolute;
						right: 0;
						top: 50%;

						@media @bp_768 {
							margin-left: 5px;
						}
					}

					br {
						display: none;

						@media @bp_768 {
							display: block;
						}
					}
				}
				
				&:before {
					content: "";
					display: inline-block;
					position: absolute;
					left: 0;
					top: 50%;
					margin-top: -8px;
					width: 16px;
					height: 16px;
					background-size: 16px;
					background-position: left center;
					background-repeat: no-repeat;

					@media @bp_768 {
						margin-right: 6px;
					}
				}
			}

			&.sortable {
				.user-select(none);
				cursor: pointer;
				position: relative;
				padding-right: 20px;

				&:hover {

					&:after {
						border-top-color: @blue-roll;
						border-bottom-color: @blue-roll;
					}
				}

				&:after {
					content: "";
					width: 0;
					height: 0;
					margin-left: 5px;
					display: inline-block;
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -3px;
					width: 0px;
					height: 0px;
					border-left: 5px solid transparent;
					border-right: 5px solid transparent;
					border-top: 6px solid @blue;
				}
			}

			&.asc,
			&.desc {
				cursor: pointer;
			}

			&.asc {

				&:after {
					border-bottom: 6px solid @blue;
					border-top: 0;
				}
			}

			.beta {
				.font-size(9);
				line-height: 9px;
				text-transform: uppercase;
				color: @white;
				display: inline-block;
				text-align: center;
				padding: 0 2px;
				height: 12px;
				line-height: 12px;
				background-color: #707580;
				bottom: 6px;
				position: relative;
				margin-left: 4px;
			}
		}

		.zero-state {

			td {
				.prevent-click;
				font-weight: 500;
				text-align: center;
				color: @black;
				padding-top: 60px;
				padding-bottom: 60px;
				border-bottom: 0;
			}
		}

		.value {

			&.two-tone {
				max-width: 150px;

				&.channel-value {
					padding-left: 0;
				}

				.first {
					color: @black;
				}

				.second,
				.festivals {
					.text-overflow;
					color: @grey-1;
				}
			}

			.row {
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}

			&.channel-value {
				padding-left: 24px;
			}
		}

		.country {
			.font-size(0);
			color: @black;

			@media @bp_768 {
				.font-size(12);
			}
		}

		.track {
			.text-overflow;
			max-width: 200px;
		}

		.channel {
			.font-size(0);

			@media @bp_768 {
				.font-size(12);
			}

			img {
				vertical-align: middle;
				margin-right: 2px;
			}
		}

		.label-search {
			.font-size(12);
			position: relative;

			.search-input {
				.font-size(12);
				.box-sizing;
				border: 0;
				height: 24px;
				width: 100%;
				padding: 0 18px 4px 4px;
				background-color: transparent;
				background-repeat: no-repeat;
				background-position: right center;
				background-image: url('../images/svg/search-pro-table.svg');
				background-size: 16px;
				border-bottom: 1px solid #A0AEB4;
			}

			.results {
				.font-size(11);
				display: none;
				position: absolute;
				top: 25px;
				left: 0;
				max-width: 250px;
				max-height: 200px;
				background-color: @white-1;
				overflow: hidden;
				overflow-y: auto;
				z-index: 1;
				white-space: nowrap;

				&.show {
					display: block;
				}

				&::-webkit-scrollbar {
					width: 5px;
				}

				&::-webkit-scrollbar-button {
					//background: @grey;
				}

				&::-webkit-scrollbar-track-piece {
					background: @black-1;
				}

				&::-webkit-scrollbar-thumb {
					background: @grey;
				}

				li {
					padding: 4px;
					cursor: pointer;
					line-height: 1;

					&:hover {
						background-color: @grey;
					}

					span {
						.text-overflow;
						display: block;
					}
				}

				&.show {
					display: block;
				}
			}
		}
	}
}

.pro-table-pagination {
	.font-size(10);
	text-align: right;
	padding: 16px 0 0 0;

	.btn-pagination {
		.rounded-corners(9999px);
		.box-sizing;
		font-size: inherit;
		color: @blue;
		border: 0;
		padding: 0 4px;
		width: auto; //20px;
		height: 20px;
		min-width: 20px;
		vertical-align: middle;
		margin: 0;
		font-weight: 600;
		line-height: 1;
			
		&:disabled,
		&.disabled {
			.opacity(1);
			.prevent-click();
			cursor: default;
			color: #D5DDE0;
		}

		&.active {
			background-color: @blue;
			color: @white;
		}

		&:hover {
			background-color: #6889e2;
			color: @white;
		}

		&.prev,
		&.next {
			.font-size(0);
			background-size: 5px;
		}

		&.prev {
			background-image: url('../images/svg/chevron-left-blue.svg');

			&.disabled,
			&:disabled {
				background-image: url('../images/svg/chevron-left-disabled.svg');
			}

			&:hover {
				background-image: url('../images/svg/chevron-left-blue-roll.svg');
				background-color: transparent;
			}
		}

		&.next {
			background-image: url('../images/svg/chevron-right-blue.svg');

			&.disabled,
			&:disabled {
				background-image: url('../images/svg/chevron-right-disabled.svg');
			}

			&:hover {
				background-image: url('../images/svg/chevron-right-blue-roll.svg');
				background-color: transparent;
			}
		}

	}

	label {
		font-size: inherit;
		color: @grey-1;
		display: inline-block;
		vertical-align: middle;
	}
}

.pro-search {
	.font-size(12);

	&.loading {

		&:before,
		&:after {
			content: none;
		}

		.search-wrapper {

			&:before {
				.prevent-click;
				.opacity(0.5);
				content: "";
				position: absolute;
				right: 8px;
				top: 4px;
				width: 16px;
				height: 16px;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 16px;
				background-image: url('../images/svg/loader-ani-black.svg');
				z-index: 1;
			}
		}
	}

	.zero-state {
		.prevent-click;
		color: @grey-1 !important;
		text-align: center;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.country {
		.text-overflow;
		text-transform: none;
	}

	.search-wrapper {
		position: relative;
	}

	.pro-search-input {
		.font-size(12);
		.box-sizing;
		border: 0;
		height: 24px;
		width: 100%;
		padding: 0 26px 0 32px;
		background-color: transparent;
		background-repeat: no-repeat;
		background-position: left 8px center;
		background-image: url('../images/svg/search-pro-table.svg');
		background-size: 16px;
		border: 1px solid @stats-border-color;

		&:disabled {
			background-image: url('../images/svg/lock-disabled.svg');
			background-repeat: no-repeat;
			background-position: right 8px center;
			background-size: 10px;
		}
	}

	.results {
		.font-size(12);
		display: none;
		position: absolute;
		top: 25px;
		left: 0;
		right: 0;
		max-height: 200px;
		background-color: @white;
		overflow: hidden;
		overflow-y: auto;
		white-space: nowrap;
		z-index: 1;
		text-align: left;

		&.show {
			display: block;
		}

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-button {
			//background: @grey;
		}

		&::-webkit-scrollbar-track-piece {
			background: @black-1;
		}

		&::-webkit-scrollbar-thumb {
			background: @grey;
		}

		.result-item {
			padding: 4px 0;
			line-height: 1;

			&.disabled {
				.prevent-click;
				color: #D5DDE0;

				.flag {
					.opacity(0.25);
				}

				input[type="checkbox"],
				input[type="radio"] {

					&.pro-custom-checkbox,
					&.pro-custom-radio {

						& + label {
							color: #D5DDE0;

							&:before {
								border-color: #D5DDE0;
							}
						}
					}
				}
			}

			label {
				//.clamp-lines(1);
				.text-overflow;
				display: block;
			}

			.city-row {
				color: @black;
				display: flex;
				padding: 0 8px;
				justify-content: space-between;
				align-items: center;

				.city-name {
					.text-overflow;
					flex: 1;
				}

				.country-flag {
					.font-size(10);
					width: 45px;
					min-width: 45px;
					text-transform: uppercase;
				}
			}
		}

		&.show {
			display: block;
		}
	}
}

input[type="checkbox"],
input[type="radio"] {

	&.pro-custom-checkbox,
	&.pro-custom-radio {
		position: absolute;
		z-index: -1;
		left: -100px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		height: 1px;
		width: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
	}

	&.pro-custom-checkbox + label,
	&.pro-custom-radio + label {
		.font-size(12);
		line-height: 16px;
		min-height: 16px;
		text-transform: none;
		position: relative;
		padding-left: 24px;
		display: inline-block;
		background-repeat: no-repeat;
		background-position: 0 0;
		vertical-align: middle;
		cursor: pointer;
		color: @black;

		&:before {
			.box-sizing();
			content: "";
			position: absolute;
			left: 0;
			top: 0;
			width: 16px;
			height: 16px;
			border: 1px solid @blue;
		}

		&:after {
			.box-sizing();
			content: "";
			left: 0;
			left: 0;
			width: 16px;
			height: 16px;
			position: absolute;
			background-size: 12px;
			background-repeat: no-repeat;
			background-position: center;
		}
	}

	&.pro-custom-radio + label {

		&:before {
			.rounded-corners(50%);
		}
	}

	&.pro-custom-checkbox:disabled + label,
	&.pro-custom-radio:disabled + label {
		.opacity(0.15);
	}

	&.pro-custom-checkbox:checked + label,
	&.pro-custom-radio:checked + label {
	
		&:after {
			background-image: url('../images/svg/checkmark-blue.svg');
		}
	}

	&.pro-custom-radio:checked + label {

		&:after {
			.rounded-corners(50%);
			left: 4px;
			top: 4px;
			width: 8px;
			height: 8px;
			background: @blue;
		}
	}
}

.pro-custom-select {
	.box-sizing();
	.font-size(12);
	line-height: 18px;
	letter-spacing: 0.5px;
	width: 100%;
	position: relative;
	color: @black-1;
	z-index: 2;

	&.charts {
		.font-size(10);
		.user-select(none);
		background-color: @white;
		text-transform: uppercase;
		width: 280px;

		@media @bp_360 {
			width: 300px;
		}

		.selected-wrapper {
			border-color: @blue;
			height: 30px;

			span {
				padding-left: 40px;
			}
		}

		.selected-option {
			height: 30px;
			line-height: 30px;
			padding: 0;
			text-transform: uppercase;
			color: @blue;

			span {
				padding-right: 30px;
				display: block;
				font-weight: 500;
				padding-left: 40px;
			}
		}

		.results {
			top: 31px;
			text-transform: uppercase;
			max-height: none;
			border: 1px solid @blue;
			border-top: 0;
			padding-top: 0;

			&:before {
				content: "";
				position: absolute;
				height: 1px;
				background-color: @blue;
				top: 0;
				left: 16px;
				right: 16px;
			}

			li {
				padding-left: 40px;
				color: @black;

				&.active,
				&:hover {
					color: @blue;
				}

				&.disabled {
					.opacity(0.2);
					.grayscale;
				}
			}
		}
	}

	&.channels {
		.user-select(none);
		background-color: @white;
		width: 230px;

		.selected-wrapper {

			span {
				padding-left: 40px;
			}
		}

		.selected-option {

			span {
				padding-right: 30px;
				display: block;
				font-weight: 500;
				padding-left: 40px;
			}
		}

		.results {
			top: 33px;
			text-transform: uppercase;
			max-height: none;
			border: 1px solid @blue;
			border-top: 0;
			padding-top: 0;

			&:before {
				content: "";
				position: absolute;
				height: 1px;
				background-color: @blue;
				top: 0;
				left: 16px;
				right: 16px;
			}

			li {
				padding-left: 40px;
				color: @black;

				&.active,
				&:hover {
					color: @blue;
				}
			}
		}
	}

	&.open {

		.blocker {
			display: block;
		}

		.selected-wrapper {

			&:after {
				.rotate(180deg);
			}
		}

		.results {
			display: block;
		}
	}

	.blocker {
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		display: none;
	}

	.selected-wrapper {
		border: 1px solid @blue;
		padding-right: 20px;
		height: 32px;

		&:after {
			content: "";
			position: absolute;
			top: 50%;
			right: 16px;
			background: none;
			width: 0; 
			height: 0; 
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-top: 5px solid @blue;
			margin-top: -3px;
		}

		span {
			background-size: 16px;
		}

		> label {
			.font-size(10);
			letter-spacing: 0.5px;
			text-transform: none;
		}
	}

	.selected-option {
		.box-sizing();
		.font-size(10);
		.text-overflow;
		position: absolute;
		top: 1;
		right: 20px;
		left: 0;
		height: 32px;
		line-height: 32px;
		color: @blue;
		text-transform: uppercase;
		cursor: pointer;
		outline: 0;
		text-align: left;
		background-position: left center;
		background-repeat: no-repeat;
		text-transform: uppercase;

		&.placeholder {
			color: @grey-1;
			font-weight: 500;

			& + label {
				display: none;
			}
		}

		span {
			text-align: left;
			background-position: left 16px center;
			background-repeat: no-repeat;
		}
	}

	.results {
		.font-size(10);
		.box-sizing();
		padding-top: 10px;
		color: @grey-1;
		display: none;
		background-color: @white;
		position: absolute;
		overflow: hidden;
		overflow-y: auto;
		max-height: 205px;
		top: 34px;
		left: 0;
		right: 0;
		z-index: 1;
		scroll-behavior: smooth;
		scrollbar-width: thin;
		text-transform: uppercase;

		&::-webkit-scrollbar {
			width: 5px;
		}

		&::-webkit-scrollbar-button {
			//background: #000;
		}

		&::-webkit-scrollbar-track-piece {
			background: #ddd;
		}

		&::-webkit-scrollbar-thumb {
			background: #4b4b4b;
		}
	}

	.disclaimer {
		position: absolute;
		right: -20px;
		top: 50%;
		margin-top: -6px;
		display: inline-block;
	
		.more-info {
			display: inline-block;
		}
	}


	li {
		padding: 8px 16px;
		background-position: left 16px center;
		background-repeat: no-repeat;
		background-size: 16px;

		&:hover,
		&.active {
			color: blue;
			cursor: pointer;
		}
	}

	.reset-field {
		.font-size(0);
		background-image: url('../images/svg/close.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 12px;
		display: inline-block;
		width: 32px;
		height: 20px;
		vertical-align: middle;
		margin-left: 5px;
		border-left: 2px solid @black;
	}

	.btn-expand-toggle {
		.font-size(0);
		.transition(transform, 150ms, ease-in-out);
		width: 24px;
		height: 24px;
		margin-top: -3px;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid #4e63ce;
		background-image: url('../images/svg/chevron-down.svg');
		background-repeat: no-repeat;
		background-position: center;
		background-size: 12px;
		position: absolute;
		right: 4px;
		top: 0;
		z-index: 1;

		&.active {
			.rotate(180deg);
		}
	}

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

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

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

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

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

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

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

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

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

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

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

	.facebook {
		background-image: url('../images/svg/facebook-color.svg');
		background-size: 8px;
		background-position: left 20px center;
	}
}

.mini-badges {
	display: flex;
	flex-direction: row;
	align-items: center;

	&:empty {
		display: none !important;
	}

	*,
	.btn {
		margin: 2px;
	}

	.claimed-icon {
		min-width: 16px;
		width: 16px;
		margin-left: 12px;

		& + .mini-badge {
			margin-left: 12px;
		}
	}

	.mini-badge {

		&:first-child {
			margin-left: 12px;
		}

		&:last-child {
			margin-right: 0;
		}
	}
}

.mini-badge {
	.font-size(9);
	text-transform: uppercase;
	display: inline-flex;
	padding: 0 4px;
	height: 15px;
	line-height: 14px;
	white-space: nowrap;
	color: @white;
	align-items: center;

	&.festival {
		.rounded-corners(9999px);
		background-color: #F9CFDC;
		color: @black;
		padding: 0 8px;
		height: 23px;
	}

	&.hot {
		background-color: @red;
	}

	&.black {
		background-color: @black;
	}

	&.spotify {
		background-color: @spotify;
	}

	&.beatport {
		background-color: @beatport;
	}
}

.pro-tag {
	.rounded-corners(12px);
	.clamp-lines(1);
	.font-size(10);
	height: 23px;
	display: inline-flex;
	align-items: center;
	line-height: 1;
	line-height: 11px;
	text-transform: uppercase;
	background-color: #F6F6F5;
	padding: 0 8px;
	letter-spacing: 0.5px;
	white-space: nowrap;

	&.shazam,
	&.youtube,
	&.instagram,
	&.tiktok,
	&.twitter {

		&:before {
			content: "";
			width: 15px;
			height: 15px;
			display: inline-block;
			margin-right: 6px;
			background-repeat: no-repeat;
			background-size: contain;
			background-position: center;
			vertical-align: middle;
			background-size: 15px;
		}
	}

	&.shazam {

		&.active {

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

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

	&.youtube {

		&.active {

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

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

	&.instagram {

		&.active {

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

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

	&.tiktok {

		&.active {

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

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

	&.twitter {

		&.active {

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

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

	&.btn {
		padding: 0 8px;

		&:disabled,
		&.disabled {
			border-color: #D5DDE0;
			color: #D5DDE0;
			background-color: @white;

			&:hover,
			&:active,
			&.active {
				border-color: #D5DDE0;
				color: #D5DDE0;
				background-color: @white;
			}
		}
	}

	&.tag-timeframe  {
		border: 1px solid @blue;
		background-color: @white;
		color: @blue;

		&:hover {
			border-color: @blue-roll;
			color: @blue-roll;;
		}

		&.active,
		&:active {
			color: @white;
			background-color: @blue;
		}

		&.active {

			&:hover {
				border-color: @blue;
				color: @white;
				background-color: @blue;
			}
		}
	}

	&.border {
		border: 1px solid @blue;
	}

	&.tag-country {
		flex: 0 0 auto;
	}

	&.remove {
		background-image: url('../images/svg/icon-close-blue.svg');
		background-size: 9px;
		background-repeat: no-repeat;
		background-position: right 12px center;
		padding-right: 32px;

		&:hover {
			background-image: url('../images/svg/icon-close-blue-roll.svg');
		}
	}

	&.media-tag-viberate {
		background-color: @viberate-lower;
	}

	&.media-tag-clipping {
		background-color: #B8F4F1;
	}

	&.media-tag-added-by-artist {
		background-color: #E8F3FF;
	}

	em {
		.clamp-lines(1);
		font-style: normal;
		white-space: normal;
	}

	.flag {
		margin-right: 4px;
	}
}

.pro-event-date-calendar {
	width: 88px;
	height: 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: @white;
	text-align: center;
	text-transform: uppercase;

	&.small {
		width: 50px;
		height: 50px;

		.day {
			.font-size(20);
			line-height: 22px;
		}

		.year {
			.font-size(8);
			line-height: 12px;
		}

		.month {
			.font-size(10);
			line-height: 14px;
		}
	}

	&.past {

		.event-date-header {
			background-color: #D5DDE0;
		}
		
		.month,
		.day,
		.year {
			color: @grey-1;
		}

		.day {
			.font-size(22);
			line-height: 30px;
		}
	}

	.event-date-header {
		width: 100%;
		background-color: @grey-1;
		color: @white;
		font-weight: 500;
	}

	.event-date-body {
		display: flex;
		flex: 1;
		width: 100%;
		color: @black;
		font-weight: 500;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-color: @white-1;
	}

	.day {
		.font-size(28);
		line-height: 34px;
		font-weight: 500;
		display: block;
	}

	.year {
		.font-size(12);
		line-height: 20px;
		font-weight: 400;
		display: block;
		color: @grey-1;
	}

	.month {
		.font-size(15);
		line-height: 24px;
		font-weight: 500;
		display: block;
	}
}

.pro-card {
	.box-sizing;
	background-color: @white;
	width: 100%;
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;

	&.artist,
	&.beatport,
	&.festival,
	&.deezer,
	&.venue,
	&.media,
	&.event,
	&.spotify,
	&.video,
	&.article,
	&.track,
	&.station {
		border: 1px solid @indigo-2;

		header {
			.box-sizing;
			display: flex;
			flex-direction: row;
			padding: 16px 8px;
			align-items: center;
			position: relative;
			z-index: 1;
			background-color: @white;
			min-height: 64px;

			.thumb {
				width: 32px;
				height: 32px;
				margin-right: 8px;
			}

			a {
				display: flex;
				flex-direction: row;
				align-items: center;
			}

			+ figure,
			+ a {
				border-top: 1px solid @indigo-2;
			}
		}

		figure {
			height: auto;
			padding-top: 100%;
			border-bottom: 1px solid @indigo-2;
			position: relative;
		}

		article {
			padding: 16px;
		}

		h4 {
			.font-size(12);
			.clamp-lines(2);
			font-weight: 500;
			line-height: 16px;
		}

		h3 {
			.clamp-lines(1);
			.font-size(12);
			font-weight: 500;
			line-height: 16px;
		}

		.country {
			padding: 10px 0 8px 0;
		}
	}

	&.station {

		.country {
			padding: 6px 0 8px 0;
			display: flex;
			align-items: center;
		}

		.rank-wrapper {

			.rank-label {
				
				&:before {
					content: none;
				}
			}
		}
	}

	&.festival,
	&.event,
	&.venue,
	&.article {

		figure {
			padding-top: 70%;
		}

		.country {
			.font-size(10);
			color: @grey-1;
			text-transform: uppercase;
			padding: 4px 0 2px 0;
		}

		.type-and-capacity {
			.font-size(10);
			.clamp-lines(1);
			color: @grey-1;
			text-transform: uppercase;
		}

		.event-date {
			margin: 10px 0 2px 0;
		}
	}

	&.track {

		.rank-wrapper {

			.rank-label {
				line-height: 16px;

				&:before {
					content: none;
				}
			}
		}

		.artist,
		.track,
		.genres {
			.font-size(12);
			.clamp-lines(1);
			line-height: 16px;
			color: @grey-1;
			margin-top: 4px;
		}

		time {
			.font-size(10);
			line-height: 18px;
			display: block;
			color: #707580;
			margin-top: 2px;
		}
	}

	&.article {

		.article-info {
			line-height: 16px;
			display: flex;
			align-items: center;
			padding-bottom: 8px;

			@media @bp_768 {
				padding-bottom: 16px;
			}

			@media @bp_1024 {
				padding-bottom: 24px;
			}

			@media @bp_1200 {
				padding-bottom: 32px;
			}

			.source {
				.font-size(10);
				color: @black;
				margin-right: 4px;
			}

			time {
				.font-size(10);
				color: @grey-1;
				margin: 0 4px;
			}

			.pro-tag {
				margin-left: 4px;
			}
		}
	}

	&.video {

		&.active {

			figure {

				&:before {
					background-image: url('../images/svg/pause-yt-white.svg');
				}
			}
		}

		figure {
			position: relative;
			padding-top: 56.6%;
			cursor: pointer;
	
			&:before {
				content: "";
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-position: center;
				background-repeat: no-repeat;
				background-size: 32px;
				background-image: url('../images/svg/play-yt-white.svg');
			}
		}
	}

	&.beatport,
	&.deezer {

		h3 {
			line-height: 22px;
		}

		.artist,
		.publisher,
		time {
			color: #707580;
			line-height: 20px;
		}

		time {
			.font-size(10);
			line-height: 18px;
			display: block;
		}

		.artist,
		.publisher {
			.clamp-lines(1);
			.font-size(12);
		}
	}

	&.spotify,
	&.deezer,
	&.video,
	&.beatport {

		&.alt {

			article {
				padding-left: 8px;
				padding-right: 8px;
			}

			h3 {
				.font-size(15);
				.clamp-lines(2);
				line-height: 24px;
			}

			.artist,
			.publisher {
				margin-top: 5px;
				.font-size(15);
			}
		}
	}

	&.media {

		time {
			.font-size(10);
			line-height: 18px;
			display: block;
			color: @grey-1;
		}

		figure {
			height: 254px;
			padding-top: 0;
		}
	}

	&.pro-section-media {
		.box-shadow(0 2px 8px 0 rgba(0,0,0,0.08));
		position: relative;
		padding-top: 100%;
		height: auto;

		figure {
			height: auto;
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}
	}

	&.spotify {

		&.playlist {

			figure {
				height: auto;
				padding-top: 100%;

				&:hover {

					&:before {
						background-color: @blue;
						background-image: url('../images/svg/icon-link-white.svg');
					}
				}

				&:before {
					.rounded-corners(50%);
					.font-size(0);
					border: 1px solid @blue;
					background-color: @white;
					position: relative;
					content: "";
					text-transform: uppercase;
					width: 32px;
					height: 32px;
					min-width: 32px;
					font-weight: 600;
					letter-spacing: 2px;
					background-image: url('../images/svg/icon-link.svg');
					background-repeat: no-repeat;
					background-position: center;
					background-size: 100%;
					position: absolute;
					top: 50%;
					left: 50%;
					margin: -16px 0 0 -16px;
				}
			}
		}

		.artist,
		.track,
		.genres {
			.font-size(12);
			.clamp-lines(1);
			line-height: 16px;
			color: @grey-1;
			margin-top: 4px;
		}

		time {
			.font-size(10);
			line-height: 18px;
			display: block;
			color: #707580;
			margin-top: 2px;
		}
	}

	&.instagram {

		.embed-wrapper {
			top: 0; //-54px;
			left: -1px;
			right: -2px;
		}

		.instagram-media,
		iframe {
			.box-shadow(none) !important;
			min-width: 0 !important;
			margin-top: -54px !important;
			margin-bottom: -45px !important;
			border: 0 !important;
			border-radius: 0 !important;
		}
	}

	&.twitter {

		.embed-wrapper {
			cursor: pointer;
			left: -6px;
			top: -12px;
			right: -2px;
		}
	}

	&.tiktok {

		.embed-wrapper {
			top: -20px;
		}
	}

	&.show-details {
		.box-shadow(none);
		border: 0;
		background-color: transparent;
		border-top: 1px solid @black;
		margin-top: -4px;

		&:before {
			.box-shadow(0 0 15px 0 rgba(0,0,0,0.08));
			.prevent-click;
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: -32px;
			background-color: @indigo-2;
			z-index: -2;
		}

		&:after {
			content: "";
			position: absolute;
			top: -11px;
			left: 50%;
			margin-left: -6px;
			width: 0;
			height: 0;
			border-style: solid;
			border-width: 0 8px 10px 8px;
			border-color: transparent transparent @black transparent;
		}

		& + .pro-card-stats {
			position: relative;
			margin-top: 1px;

			&:before {
				.prevent-click;
				content: "";
				position: absolute;
				border-top: 1px solid #ddd;
				top: -10px;
				left: -8px;
				right: -8px;
				bottom: -10px;
				background-color: @indigo-2;
				z-index: -1;

			}
		}
	}

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

		header {
			background-color: @indigo-2;
		}
	}

	&.pro-card-featured {
		border: 0;

		&.event {

			figure {

				figcaption {
					.prevent-click();
					position: absolute;
					z-index: 1;
					left: 8px;
					bottom: 8px;
					right: 8px;
				}
			}

			article {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				@media @bp_768 {
					padding: 24px 24px 12px 24px;
				}
			}

			.article-top {
				display: flex;
				flex-direction: column;

				h3 {
					.clamp-lines(10);
					.font-size(15);
					line-height: 22px;

					@media @bp_768 {
						.font-size(22);
						line-height: 30px;
					}
				}
			}

			.article-bottom {
				display: flex;
				flex-direction: column;
				border-top: 1px solid #E8ECED;
				padding-top: 8px;
				margin-top: 12px;

				h4 {
					.clamp-lines(1);
					.font-size(12);
					line-height: 20px;
				}
			}

			.pro-date-event-calendar {

				@media @bp_768_max {
					width: 50px;
					height: 50px;

					.day {
						.font-size(20);
						line-height: 22px;
					}

					.year {
						.font-size(8);
						line-height: 12px;
					}

					.month {
						.font-size(10);
						line-height: 14px;
					}
				}
			}

			.artist,
			.location {
				.font-size(10);
				line-height: 14px;
				color: @grey-1;
				display: flex;
				align-items: center;
				margin-top: 8px;

				@media @bp_768 {
					.font-size(12);
					line-height: 16px;
				}

				.flag {
					width: 21px;
					height: auto;
					margin-right: 8px;
					vertical-align: middle;
					line-height: 1;
					border: 1px solid @blue-grey;
				}
			}

			.artist {
				.font-size(12);
				line-height: 16px;

				@media @bp_768 {
					.font-size(15);
					line-height: 24px;
				}
			}

			.tags {
				padding-top: 10px;
			}

			.swiper-container {

				.swiper-button-prev,
				.swiper-button-next {
					display: block;
				}
			}

			.swiper-pagination {
				display: none;
			}
		}

		&.article {

			article {
				display: flex;
				flex-direction: column;

				@media @bp_768 {
					padding: 24px 24px 12px 24px;
				}
			}

			h3 {
				.clamp-lines(4);
				.font-size(15);
				line-height: 22px;

				@media @bp_768 {
					.font-size(22);
					line-height: 30px;
				}
			}

			.caption {
				.clamp-lines(2);
				.font-size(12);
				line-height: 18px;
				color: @grey-1;
				padding-bottom: 0;
				margin-bottom: 0;

				@media @bp_768 {
					.font-size(15);
					line-height: 24px;
				}
			}
		}

		&.video {

			article {

				@media @bp_768_max {
					padding-left: 8px;
					padding-right: 8px;
				}
			}
		}

		figure {
			border: 0;
		}

		h3 {
			.font-size(10);
			line-height: 15px;

			@media @bp_768 {
				.font-size(22);
				line-height: 30px;
			}
		}

		.tags {
			.font-size(0);
			margin: -4px;

			.pro-tag {
				margin: 4px;
			}
		}

		.swiper-container {

			.swiper-pagination-bullet {
				.rounded-corners(50%);
				width: 8px;
				height: 8px;
				border-width: 1px;
			}

			.swiper-button-prev,
			.swiper-button-next {
				.box-shadow(0 2px 8px 0 rgba(0,0,0,0.08));
				.rounded-corners(50%);
				width: 24px;
				height: 24px;
				top: 50%;
				margin-top: -12px;
				background-color: @white;
				background-repeat: no-repeat;
				background-size: 8px;

				&.swiper-button-disabled {
					.opacity(.2);
				}

				&:before {
					content: none;
				}

				&:after { //PRELOAD ROLLOVER IMAGES
					position: absolute;
					width: 0;
					height: 0;
					overflow: hidden;
					z-index: -1;
					content: url(../images/svg/chevron-left-blue-roll.svg)
							 url(../images/svg/chevron-right-blue-roll.svg); 
				}
			}

			.swiper-button-prev {
				left: 8px;
				background-position: left 7px center;
				background-image: url('../images/svg/chevron-left-blue.svg');

				&:hover {
					background-image: url('../images/svg/chevron-left-blue-roll.svg');
				}
			}

			.swiper-button-next {
				right: 8px;
				background-position: right 7px center;
				background-image: url('../images/svg/chevron-right-blue.svg');

				&:hover {
					background-image: url('../images/svg/chevron-right-blue-roll.svg');
				}
			}
		}
	}

	.figure-tags {
		position: absolute;
		right: 16px;
		top: 16px;
	}

	.channel-info {
		display: flex;
		align-items: center;
		margin-top: 8px;

		.channel-avatar {
			.rounded-corners(50%);
			overflow: hidden;
			padding: 0;
			width: 26px;
			height: 26px;
			min-width: 26px;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;

			@media @bp_768 {
				width: 40px;
				height: 40px;
				min-width: 40px;
			}

			&:before {
				content: none;
			}
		}

		.channel-title {
			.font-size(10);
			line-height: 15px;
			color: @grey-1;
			padding-left: 8px;
			font-weight: 500;

			@media @bp_768 {
				.font-size(15);
				line-height: 24px;
				padding-left: 16px;
			}

			a {
				.clamp-lines(1);
				color: inherit;
			}
		}
	}

	.rank-wrapper {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex: 1;

		&.multiple {

			.rank-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				white-space: nowrap;

				&:first-child {

					.rank-label {
						//padding-left: 25px;

						&:before {
							position: relative;
							//left: -25px;
							padding-right: 10px;
						}
					}

					.rank {

						strong {
							margin: 0;
						}
					}
				}

				&:last-child {

					.rank-label {

						&:before {
							display: none;
						}
					}
				}

				.rank {
					line-height: 1;
					margin-left: 6px;
				}
			}
		}

		

		.rank-label {
			.font-size(10);
			position: relative;
			line-height: 1;
			color: @grey-1;

			&.viberate {
						
				&:before {
					background-image: url('../images/svg/viberate-color.svg');
					width: 16px;
					height: 16px;
				}
			}

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

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

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

			&.tiktok {
				.font-size(0);
						
				&:before {
					background-image: url('../images/svg/tiktok-color.svg');
				}
			}

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

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

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

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

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

			&.facebook {
				
				&:before {
					background-image: url('../images/svg/facebook-color.svg');
					width: 8px;
				}
			}

			&:before {
				content: "";
				width: 16px;
				height: 16px;
				display: inline-block;
				vertical-align: middle;
				margin-right: 6px;
				background-size: 16px;
				background-position: left center;
				background-repeat: no-repeat;
			}
		}

		.rank {
			white-space: nowrap;

			label {
				.font-size(10);
				color: @grey-1;
				vertical-align: middle;
				display: inline-block;
				padding-right: 8px;
			}

			strong,
			.value-change {
				display: inline-block;
				vertical-align: middle;
			}

			strong {
				.font-size(15);
				font-weight: 400;
				margin-right: 8px;
			}
		}
	}

	.btn-pro-txt {
		padding: 14px;
	}

	.btn-play-track {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -16px 0 0 -16px;
		background-color: @white;
	}

	.btn-link-outside {
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -16px 0 0 -16px;
		background-color: @white;

		&:hover,
		&.active {
			background-color: @blue;
		}
	}

	.swiper-container {
		width: 100%;
		height: 100%;
		margin: 0;
		padding: 0;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;

		&:hover {

			.swiper-button-prev,
			.swiper-button-next {
				display: block;
			}
		}

		.swiper-slide {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;
		}

		.swiper-button-prev,
		.swiper-button-next {
			display: none;
			width: 20px;
			top: 0;
			bottom: 0;
			height: auto;
			background-color: transparent;

			&:before {
				background-size: 8px;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				width: auto;
				height: auto;
				margin: 0;
			}
		}

		.swiper-button-prev {
			left: 0;
			right: auto;
			
			&:before {
				background-image: url('../images/svg/chevron-left-white.svg');
			}
		}

		.swiper-button-next {
			right: 0;
			left: auto;
			
			&:before {
				background-image: url('../images/svg/chevron-right-white.svg');
			}
		}

		.swiper-pagination-bullet {
			width: 8px;
			height: 8px;
			border-width: 1px;
		}

		.img {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}
	}

	.embed-wrapper {
		display: block;
		overflow: hidden;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
	}

	figure {
		height: 168px;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		z-index: 0;
		overflow: hidden;
	}

	article {
		display: flex;
		flex-direction: column;
		flex: 1;
		padding: 12px 16px;

		& + .btn-card-action {
			margin-top: -12px;
		}
	}

	h3 {
		.clamp-lines(1);
		.font-size(14);
		font-weight: 500;
	}

	a {
		color: @black;
	}

	.country {
		.font-size(12);
		color: @grey-1;
		padding: 2px 0;
	}

	.type-and-capacity {
		.font-size(10);
		.clamp-lines(1);
		text-transform: uppercase;
		font-weight: 500;
	}

	.event-date {
		.clamp-lines(1);
		.font-size(10);
		margin: 5px 0;
		color: @grey-1;
		text-transform: normal;

		span {
			text-transform: uppercase;
		}
	}

	.lineup,
	.genres {
		.font-size(10);
		line-height: 16px;
		line-height: 1;

		a {
			.clamp-lines(1);
			line-height: 18px;
			color: @blue;

			&:hover {
				color: @blue-roll;
			}
		}

		.artist {

			a {
				color: @grey-1;

				&:hover {
					color: #999;
				}
			}
		}
	}

	.genres {
		.font-size(12);
		.clamp-lines(1);
		color: @grey-1;

		.genre {
			line-height: 16px;
			display: inline-block;
		}
	}

	.btn-see-upcoming-event {
		.font-size(10);
		background-color: @blue;
		color: @white;
		display: block;
		text-transform: uppercase;
		letter-spacing: 1px;
		padding: 8px 2px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;

		& + article {
			padding-bottom: 46px;
		}
	}
}

.pro-card-stats {
	.font-size(12);
	margin: 8px;
	color: @grey-1;

	.row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.social-follow {
		margin: 4px;

		&:last-child {
			margin-right: 0;
		}

		&.disabled {
			.grayscale;
			.opacity(.2);
		}
	}

	&.channel {
		padding-left: 24px;
		background-position: left top 2px;
		background-repeat: no-repeat;
		background-size: 16px;

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

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

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

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

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

		&.facebook {
			background-image: url('../images/svg/icon-link-facebook-color.svg');
		}

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

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

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

		&.beatport {
			background-image: url('../images/svg/icon-link-beatport-color.svg');
		}
	}

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

	.channel-info {
		display: flex;
		align-items: center;

		.channel-avatar {
			.rounded-corners(50%);
			overflow: hidden;
			padding: 0;
			width: 26px;
			height: 26px;
			min-width: 26px;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;

			@media @bp_768 {
				width: 40px;
				height: 40px;
				min-width: 40px;
			}

			&:before {
				content: none;
			}
		}

		.description {
			padding-left: 8px;

			@media @bp_768 {
				padding-left: 16px;
			}
		}

		.channel-title {
			.font-size(10);
			line-height: 15px;
			color: @black;
			font-weight: 500;

			@media @bp_768 {
				.font-size(12);
				line-height: 20px;
			}

			a {
				.clamp-lines(1);
				color: inherit;
			}
		}

		.country-and-genres {
			.clamp-lines(1);
			.font-size(10);
			line-height: 15px;
			color: @grey-1;

			@media @bp_768 {
				.font-size(12);
				line-height: 20px;
			}
		}
	}
}

.pro-entity-card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;

	&.festival,
	&.venue {

		&.horizontal {

			.actions {
				right: calc(~'100% - (158px - 8px)');
			}

			figure {
				width: 158px;
				min-width: 158px;
				padding-top: 0;
			}
		}

		figure {
			padding-top: 75%; /* 4:3 aspect ratio */
		}
	}

	&.horizontal {
		flex-direction: row;

		.actions {
			right: calc(~'100% - (110px - 8px)');
		}

		.swiper-container {
			display: none;
		}

		figure {
			padding-top: 0;
			width: 110px;
			height: 110px;
			min-width: 110px;
		}

		article {
			.box-sizing;
			padding: 8px 16px;
		}

		.bottom {
			padding-top: 0;			
		}

		h3 {
			.clamp-lines(2);
			line-height: 22px;
		}

		.tags {
			max-height: 32px;
		}

		.bottom {
			margin-top: auto;
		}

		.event-date {
			left: 8px;
			bottom: 8px;
		}
	}

	&.active {

		article {
			background-color: @indigo-2;
		}
	}

	.actions {
		.font-size(0);
		position: absolute;
		right: 8px;
		top: 8px;
		z-index: 1;
		line-height: 1;
		margin: 0 -2px;

		* {
			margin: 0 2px;
		}
	}

	.swiper-container {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: 0;
		padding: 0;
		z-index: 0;

		&:hover {

			.swiper-button-prev,
			.swiper-button-next {
				display: block;
			}
		}

		.swiper-slide {
			width: 100%;
			height: 100%;
			background-size: cover;
			background-repeat: no-repeat;
			background-position: center;

			.img {
				position: absolute;
				width: 100%;
				height: 100%;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}
		}

		.swiper-button-prev,
		.swiper-button-next {
			.rounded-corners(50%);
			background-color: @white;
			display: none;
			width: 16px;
			height: 16px;
			top: 50%;
			margin-top: -8px;

			&:before {
				background-size: 5px;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				width: auto;
				height: auto;
				margin: 0;
			}
		}

		.swiper-button-prev {
			left: 8px;
			right: auto;
			
			&:before {
				background-image: url('../images/svg/icon-left-arrow-blue.svg');
				background-position: 4px center;
			}

			&:hover {

				&:before {
					background-image: url('../images/svg/icon-left-arrow-blue-roll.svg');
				}
			}
		}

		.swiper-button-next {
			right: 8px;
			left: auto;
			
			&:before {
				background-image: url('../images/svg/icon-right-arrow-blue.svg');
				background-position: 6px center;
			}

			&:hover {

				&:before {
					background-image: url('../images/svg/icon-right-arrow-blue-roll.svg');
				}
			}
		}

		.swiper-pagination {
			bottom: 2px;
		}

		.swiper-pagination-bullet {
			.rounded-corners(50%);
			width: 8px;
			height: 8px;
			border-width: 1px;
		}
	}

	.mini-badges {
		.box-shadow(0 2px 8px 0 rgba(0,0,0,0.08));
		.rounded-corners(13px);
		position: absolute;
		z-index: 1;
		bottom: -12px;
		right: 8px;
		height: 26px;
		background-color: @white;
		display: inline-flex;
		align-items: center;
		padding: 0 10px;

		.mini-badge {
			margin: 0 2px;

			&:first-child {
				margin-left: 0;
			}

			&:last-child {
				margin-right: 0;
			}
		}

		.claimed-icon {
			margin: 0;

			& + .mini-badge {
				margin-left: 12px;
			}
		}
	}

	.tags {
		.font-size(12);
		color: @grey-1;
		display: flex;
		align-items: center;
		margin: -4px;
		flex-wrap: wrap;
		max-height: 64px;
		overflow: hidden;
		text-transform: uppercase;

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

		> .flag {
			margin-right: 4px;
		}
	}

	.pro-tag {
		margin: 4px;
		color: @black;
	}

	figure {
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		position: relative;
		padding-top: 100%;
		background-color: @black;
		color: @white;
		display: flex;
		flex-direction: column;
	}

	article {
		display: flex;
		flex: 1;
		flex-direction: column;
		color: @black;
		background-color: @white;
		padding: 20px 8px 16px 8px;
		//overflow: hidden;

		.bottom {
			padding-top: 20px;
		}
	}

	.festival-date {
		.font-size(12);
		line-height: 1;
		color: @grey-1;
		display: block;
		padding-top: 12px;
	}

	a {
		color: inherit;
	}

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

	.event-date {
		width: 50px;
		height: 50px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #494C52;
		color: @white;
		text-align: center;
		text-transform: uppercase;
		position: absolute;
		left: 20px;
		bottom: 20px;

		.day {
			.font-size(18);
			line-height: 24px;
			font-weight: 500;
			display: block;
		}

		.month {
			.font-size(12);
			line-height: 16px;
			font-weight: 500;
			display: block;
		}
	}

	.event-venue {
		.clamp-lines(1);
		.font-size(12);
		line-height: 16px;
		color: #707580;
	}
}

.pro-card-video {
	width: 100%;
	position: relative;
	cursor: pointer;

	&.active {

		figcaption {

			&:after {
				background-image: url('../images/svg/pause-yt-white.svg');
			}
		}
	}

	.zero-state,
	.compare-zero-state {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	figure {
		position: relative;
		padding-top: 56.25%;
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
		width: 100%;
	}

	figcaption {
		padding: 16px;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: flex-end;

		&:before {
			.vertical-flip(rgba(0,0,0,0.6), rgba(0,0,0,0));
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
		}

		&:after {
			content: "";
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 32px;
			background-image: url('../images/svg/play-yt-white.svg');
		}

		h4 {
			.font-size(15);
			font-weight: 500;
			line-height: 24px;
			color: @white;
		}
	}
}

.pro-card-article {
	.box-shadow(0 2px 8px 0 rgba(0,0,0,0.08));
	.box-sizing();
	position: relative;
	background-repeat: no-repeat;
	text-align: left;
	width: 100%;

	figure {
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
	}

	.figure-tags {
		position: absolute;
		right: 16px;
		top: 16px;
	}

	article {
		.font-size(12);
		position: relative;
		padding: 12px 8px;
		background-color: @white;

		a {
			color: inherit;
		}
	}

	h3 {
		.font-size(15);
		line-height: 24px;
		font-weight: 500;
	}
}

.pro-card-article-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 8px;
	height: 32px;

	time {
		.font-size(12);
		line-height: 20px;
		color: @grey-1;
		display: block;
	}

	.author {
		.text-overflow;
		.font-size(12);
		display: block;
		padding-left: 40px;
		position: relative;
		line-height: 20px;
		height: 32px;
		color: @black;
		display: flex;
		align-items: center;


		img {
			.rounded-corners(50%);
			width: 32px;
			height: 32px;
			position: absolute;
			left: 0;
			top: 0;
		}

		a {
			color: inherit;
		}
	}
}

.value-tooltip {
	position: relative;
	display: inline-block;
	z-index: 1;

	@media @bp_768 {
		right: 0;
	}

	&.wide {
		
		.tooltip-article {
			width: 200px;

			@media @bp_768 {
				width: 250px;
			}
		}
	}

	&.text-align-left {

		.tooltip-article {
			text-align: left;
		}
	}

	&:hover {

		.tooltip-article {
			display: block;
		}
	}

	.tooltip-label {
		position: relative;

		&:after {
			content: "";
			position: absolute;
			height: 1px;
			left: -4px;
			right: -4px;
			bottom: 0;
			display: inline-block;
			background-image: linear-gradient(to right, #4E63CE 33%, rgba(78,99,206,0) 0%);
			background-position: bottom;
			background-size: 3px 1px;
			background-repeat: repeat-x;
		}

		&:before {
			content: "";
			left: -5px;
			right: -5px;
			bottom: -5px;
			top: -5px;
			z-index: -1;
			position: absolute;
			display: inline-block;
		}
	}

	.tooltip-article {
		.box-shadow(0 2px 8px 0 rgba(0,0,0,0.08));
		.font-size(12);
		.rounded-corners(2px);
		.box-sizing;
		line-height: 20px;
		padding: 12px;
		display: none;
		position: absolute;
		right:  calc(~'100% + 5px');
		top: 0;
		color: @black;
		background-color: @white;
		width: 192px;
		text-align: center;
		white-space: normal;

		ul {
			padding: 10px 0 10px 20px;

			li {
				list-style-type: disc;
			}
		}

		table {
			width: 100%;

			.card-micro {
				//max-width: 170px;
				max-width: 100%;
			}

			thead {

				td {
					border-bottom: 1px solid #A0AEB4;
					padding-bottom: 12px;
				}
			}

			tr {

				&:hover {
					cursor: default;
					background-color: transparent;

					th,
					td {
						background-color: transparent;
					}
				}
			}	

			td {

				&.r {
					text-align: right !important;
				}
			}
		}

		.tooltip-title {
			border-bottom: 1px solid #A0AEB4;
			margin-bottom: 5px;
		}
	}

}