@pro-content-module-padding: 24px;

.pro {
	padding-top: 33px;

	&.charts {
		padding-top: 0px;
	}

	.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;
			}
		}
	}

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

		&.beatport {
			height: 24px;

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

			article {
				height: 24px;
				padding-left: 44px;
			}
		}

		figure {
			width: 40px;
			height: 40px;
			position: absolute;
			left: 0;
			top: 0;
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
		}

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

			a {
				color: @black;
			}
		}

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

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

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

	.flag {
		margin-right: 2px;
		vertical-align: middle;
		line-height: 1;
		border: 1px solid #d8d8d8;
	}

	.sidebar-module {
		background-color: @white;
		padding: 18px;

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

		.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-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-navigation {

		@media @bp_768 {
			position: sticky;
			//top: 33px;
			top: 84px;
			z-index: 1;
		}

		.menu {
			
		}

		.item {
			padding-top: 20px;

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

			&.active {

				a {
					color: @black;
				}
			}
		}

		a {
			font-weight: 500;
			color: @grey-1;

			&:hover {
				color: @black;
			}
		}
	}

	.sidebar-suggested-actions {
	}

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

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

			* {
				outline: none;
			}
		}

		.more-info {
			.font-size(0);
			//position: absolute;
			//right: 24px;
			//top: 50%;
			//margin-top: -9px;
			display: inline-block;
			z-index: 1;
			line-height: 1;
			margin-left: 10px;
			position: relative;
			text-transform: none;

			@media @bp_768 {
				right: 0;
			}

			&:hover {

				article {
					display: block;
				}
			}

			&:before {
				.font-size(10);
				.rounded-corners(50%);
				color: @white;
				background-color: @black;
				width: 16px;
				height: 16px;
				display: inline-block;
				content: "i";
				text-align: center;
				line-height: 16px;
				font-weight: bold;
				cursor: pointer;
			}

			article {
				.font-size(10);
				line-height: 14px;
				padding: 12px;
				display: none;
				position: absolute;
				right: 24px;
				top: 0;
				color: @white;
				background-color: @black;
				width: 230px;
			}
		}

		.graph {
			padding-top: 30px;
		}

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

		.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%;
			
			@media @bp_880 {
				padding: 5%;
			}

			@media @bp_1024 {
				padding: 0;
			}

			@media @bp_1200 {
				padding: 15px calc(~'5% - '@pro-content-module-padding);
			}

			@media @bp_1440 {
				padding: 15px calc(~'5.55% - '@pro-content-module-padding);
			}

			&.twitter {

				.item {

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

			.list-grid {
				margin: -@layout-gutter-mobile/2;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
			}

			.item {
				.box-sizing;
				width: 100%;
				padding: @layout-gutter-mobile/2;
				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 {
			.box-sizing;
			background-color: @white;
			width: 100%;
			position: relative;
			display: flex;
			flex: 1;
			flex-direction: column;

			&.artist,
			&.beatport {

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

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

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

			&.beatport {

				.artist,
				.publisher,
				time {
					.font-size(12);
				}

				.artist {
					padding-top: 5px;
				}
			}
		
			figure {
				height: 168px;
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			article {
				padding: 12px 16px;
			}

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

			a {
				color: @black;
			}

			.country {
				.font-size(10);
				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(12);
				line-height: 18px;
				font-weight: 500;
				line-height: 1;

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

					&:hover {
						.text-decoration-ink;
					}
				}
			}

			.genres {
				.font-size(10);
				text-transform: uppercase;

				.genre {
					line-height: 16px;
				}
			}

			.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;
				}
			}

			.value-change {
				.font-size(10);
				background-color: @blue;
				color: @white;
				display: block;
				text-transform: uppercase;
				letter-spacing: 1px;
				padding: 8px 2px;
				text-align: center;

				&.down,
				&.up {

					&:after {
						border-left: 8px solid transparent;
						border-right: 8px solid transparent;
						border-top: 12px solid @red;
						margin-bottom: -8px;
					}
				}

				&.up {

					&:after {
						border-bottom: 12px solid @green;
						border-top: 0;
						margin-bottom: 0;
					}
				}

				&:after {
					content: "";
					border-bottom: 8px solid transparent;
					border-top: 8px solid transparent;
					border-left: 12px solid @yellow;
					width: 0;
					height: 0;
					display: inline-block;
					margin-bottom: -4px;
					margin-left: 4px;
				}
			}
		}

		.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;
			margin-bottom: -2px;

			&.most-popular-overview {
				padding-left: 40px;
				position: relative;

				@media @bp_480 {
					padding-left: 54px;
				}

				&.twitter {

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

				&.instagram {

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

				&:before {
					position: absolute;
					left: 0;
					top: 0;
					bottom: 0;
					width: 40px;
					display: block;
					background-position: center;
					background-repeat: no-repeat;

					@media @bp_480 {
						width: 54px;
						background-size: 28px;
					}
				}

				.item {
					width: 100%;
					padding-top: 18px;
					padding-bottom: 18px;

					@media @bp_360 {
						width: 50%;
					}

					&:nth-child(1),
					&:nth-child(2),
					&:nth-child(3),
					&:nth-child(4) {
						border-left: 2px solid @white-1;
					}

					&:nth-child(2) {

						&:after {
							content: "";
							position: absolute;
							border-left: 2px solid @white-1;
							right: -2px;
							top: 0;
							bottom: 0;
						}
					}
				}
			}

			&.connections {

				.item {
					width: 100%;

					@media @bp_360 {
						width: 50%;
					}

					@media @bp_1200 {
						width: 20%;
					}

					&:nth-child(3),
					&:nth-child(4),
					&:nth-child(5) {

						@media @bp_600 {
							width: 33.33%;
						}

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

					&:nth-child(4) {

						@media @bp_600 {
							border-left: 2px solid @white-1;
						}
					}
				}
			}

			&.music {
					
				.item {
					width: 100%;

					@media @bp_600 {
						width: 50%;
					}

					&:nth-child(1) {
						border-left: 0;
					}

					&:nth-child(2) {
						border-left: 0;

						@media @bp_600 {
							border-left: 2px solid @white-1;
						}
					}
				}

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

			&.fanbase {

				.item {

					@media @bp_880 {
						width: 25%;
					}

					@media @bp_1200 {
						width: 14.28%;
					}

					&:nth-child(4) {

						@media @bp_880 {
							border-left: 2px solid @white-1;
						}
					}

					&:nth-child(5) {

						@media @bp_880 {
							border-left: 0;
						}

						@media @bp_1200 {
							border-left: 2px solid @white-1;
						}
					}

					&:nth-child(7) {

						@media @bp_880 {
							border-left: 2px solid @white-1;
						}
					}
				}
			}

			&.6-max {

				.item {

					@media @bp_880 {
						width: 33.33%;
					}

					@media @bp_1200 {
						width: 16.66%;
					}

					&:nth-child(4) {

						@media @bp_880 {
							border-left: 2px solid @white-1;
						}
					}

					&:nth-child(5) {

						@media @bp_880 {
							border-left: 0;
						}

						@media @bp_1200 {
							border-left: 2px solid @white-1;
						}
					}

					&:nth-child(7) {

						@media @bp_880 {
							border-left: 2px solid @white-1;
						}
					}
				}
			}

			.item {
				.box-sizing;
				width: 50%;
				padding: @pro-content-module-padding;
				border-bottom: 2px solid @white-1;
				border-left: 2px solid @white-1;

				@media @bp_600 {
					width: 33.33%;
				}

				@media @bp_1200 {
					width: 16.66%;
				}

				&:nth-child(1) {
					border-left: 0;
				}

				&:nth-child(2) {
				}

				&:nth-child(3) {
					border-left: 0;

					@media @bp_600 {
						border-left: 2px solid @white-1;
					}
				}

				&:nth-child(4) {

					@media @bp_600 {
						border-left: 0;
					}

					@media @bp_1200 {
						border-left: 2px solid @white-1;
					}
				}

				&:nth-child(5) {
					border-left: 0;

					@media @bp_600 {
						border-left: 2px solid @white-1;
					}
				}

				&:nth-child(6) {
				}

				&:nth-child(7) {
					border-left: 0;

					@media @bp_1200 {
						border-left: 2px solid @white-1;
					}
				}

				&:last-child {
					position: relative;

					@media @bp_1200 {

						&:after {
							content: none;
						}
					}

					&:after {
						content: "";
						position: absolute;
						border-left: 2px solid @white-1;
						right: -2px;
						top: 0;
						bottom: 0;
					}
				}
			}

			.channel-overview {

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

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

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

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

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

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

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

				h3 {
					.font-size(9);
					line-height: 20px;
					text-transform: uppercase;
					color: @grey-1;
					font-weight: 500;
					background-repeat: no-repeat;
					background-position: left center;
				}

				.stats {
					padding-top: 15px;
					display: inline-block;

					strong {
						font-weight: 500;

						&.large {
							//.font-size(20);
						}

						span {
							.font-size(12);
						}
					}

					label {
						.font-size(10);
						color: #808080;
						display: block;
						line-height: 18px;
					}
				}
			}
		}

		.list-channel-graphs {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: -@layout-gutter-mobile/2;

			@media @bp_1300 {
				//padding-left: calc(~'10% - '@pro-content-module-padding);
				//padding-right: calc(~'10% - '@pro-content-module-padding);
			}

			.item {
				.box-sizing;
				width: 100%;
				padding: @layout-gutter-mobile/2;

				@media @bp_360 {
					width: 50%;
				}

				@media @bp_600 {
					width: 25%;
				}

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

		.graph-tooltip {
			.box-shadow(0px 1px 2px rgba(0,0,0,0.15));
			line-height: 1;
			background-color: rgba(255,255,255,0.9);
			color: @black;
			padding: 8px;
			display: inline-block;

			label {
				.font-size(9);
				text-transform: uppercase;
				color: @grey-1;
				display: inline-block;
				width: 40px;
				letter-spacing: 1px;
			}

			.value {
				.font-size(9);
				font-weight: 600;
				letter-spacing: 1px;
			}
		}

		.graph-module {
			border: 2px solid @white-2;

			&.instagram {
					
				h3 {

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

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

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

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

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

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

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

			header {
				border-bottom: 2px solid @white-2;
				padding: 12px;
				position: relative;

				strong {
					.font-size(12);
					line-height: 16px;
					display: block;
					text-align: right;
					font-weight: 500;
				}

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

			article {
				padding: 12px;
			}

			h3 {
				.font-size(0);
				display: inline-block;
				position: absolute;
				left: 12px;
				top: 12px;
			}
		}

		.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: 2px;
		position: relative;
		padding: 18px 24px;

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

		.left {
			position: relative;
		}

		.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;
			}
		}

		h2,
		h3 {
			.font-size(20);
			font-weight: 500;

			@media @bp_768 {
				display: inline-block;
				vertical-align: middle;
			}
		}

		h3 {
			.font-size(14);
		}

		.two-liner {
			.font-size(10);
			line-height: 14px;
			color: #808080;
			border-left: 2px solid @white-1;
			padding-left: 15px;
			padding-right: 30px;
			margin: 6px 0;

			@media @bp_768 {
				margin-left: 0;
				display: inline-block;
				vertical-align: middle;
			}

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

			br {
				display: none;

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

		.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;
				//padding-right: 30px;
				margin: 0;
			}

			.btn {
				margin-right: 12px;

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

			.btn-filter-tag {
				vertical-align: middle;

				&.shazam,
				&.youtube {

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

				&.shazam {

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

				&.youtube {

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

				&.disabled {
					.opacity(0.2);

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

				&:disabled {
					.prevent-click;
				}
			}
		}
	}

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

		& + .pro-content-module-article {
			margin-top: 2px;
		}

		&.noise {
			background-image: url(../images/gif/noise-animated-bright.gif);
			background-repeat: repeat;
			background-size: 400px;
			background-position: center 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');
				}
			}
		}
	}

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


	}

	.artist-info-and-stats-and-network {
		margin-bottom: 24px;

		@media @bp_1024 {
			display: flex;
			flex-direction: row;
			align-items: stretch;
			margin-bottom:  @layout-gutter-tablet;
		}

		&.condensed {

			&.v2 {
				display: flex;
				flex-direction: column;

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

				.artist-card {
					flex: 1;
				}

				.explore-charts,
				.related-pages {
					.box-sizing;
					width: 100%;
					padding: 0;
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-top: 24px;

					@media @bp_768 {
						padding: 0 12px;
					}

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

					.pro-content-module-article {
						display: flex;
						flex-direction: column;
						flex: 1;
						justify-content: center;
					}

					h3 {

						br {
							display: block;
						}
					}

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

						&.border {
							//.clamp-lines(1);
							max-width: 100%;
							color: inherit;
							padding-top: 6px;
							padding-bottom: 6px;

							span {
								.clamp-lines(1);
							}

							&:hover {
								color: @white;

								.flag {
									border-color: @white;
								}
							}

							.flag {
								margin-left: 0;
								margin-right: 4px;
							}
						}
					}
				}

				.explore-charts {

					@media @bp_1200 {
						padding-right: 24px;
					}
				}

				.col {
					.box-sizing;

					&:first-child {

						@media @bp_1200 {
							width: 50%;
							padding-right: 12px;
							display: flex;
						}
					}

					&:last-child {
						margin-top: 0;

						@media @bp_768 {
							display: flex;
							flex: 1;
							flex-direction: row;
							margin-left: -12px;
							margin-right: -12px;
						}
						
						@media @bp_1200 {
							width: 50%;
							padding-left: 12px;
							margin: 0;
						}
					}
				}
			}

			@media @bp_1024 {
				display: block;
			}

			@media @bp_1200 {
				display: flex;
				flex-direction: row;
				align-items: stretch;
				margin-bottom:  @layout-gutter-tablet;
			}

			.col {

				&:first-child {

					@media @bp_1024 {
						width: 100%;
						padding-right: 0;
					}

					@media @bp_1200 {
						width: 70%;
						padding-right: 12px;
					}
				}

				&:last-child {

					@media @bp_1024 {
						width: 100%;
						padding-left: 0;
						margin-top: @layout-gutter-tablet;
					}
					
					@media @bp_1200 {
						width: 30%;
						padding-left: 12px;
						margin-top: 0;
					}
				}
			}

			.coming-soon {
				.font-size(10);
				line-height: 1;
				position: absolute;
				right: 24px;
				top: 12px;
				background-color: @grey;
				color: @white;
				text-transform: uppercase;
				padding: 4px 12px;

				@media @bp_1200 {
					right: auto;
					left: 24px;
				}
			}

			.artist-info {

				.pro-content-module-article {

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

			.artist-card {

				@media @bp_1200 {
					width: 70%;
				}
			
				figure {

					@media @bp_768 {
						width: 200px;
						height: 200px;
						min-height: 200px;
					}
				}

				h3 {

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

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

			.explore-charts,
			.related-pages {
				padding: 24px;
				text-align: center;

				@media @bp_1024 {
					width: 30%;
				}

				.pro-content-module-article {

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

				h3 {

					@media @bp_1024 {
						.font-size(12);
						max-width: none;
					}

					br {

						@media @bp_880 {
							display: none;
						}
					}
				}
			}

			.network {
				position: relative;
				padding-top: 24px;

				@media @bp_1200 {
					padding-top: 34px;
				}

				header,
				ul {
					.opacity(0.3);
					.prevent-click();
				}

				.card-micro {

					article {
						position: relative;
						width: 100%;
						max-width: 100%;
						padding-right: 80px;
					}
				}

				.role {
					.font-size(10);
					color: @grey-1;
					background-color: transparent;
					line-height: 1;
				}

				.btn-message {
					.font-size(10);
					line-height: 1;
					position: absolute;
					right: 12px;
					top: 12px;
					background-color: @black;
					color: @white;
					text-transform: uppercase;
					padding: 4px;
					background-position: left 4px center;
					background-repeat: no-repeat;
					background-size: 12px;
					background-image: url('../images/svg/email-white.svg');
					padding-left: 20px;
					position: absolute;
					right: 0;
					top: 50%;
					margin-top: -8px;
				}

				.role {

				}
			}

		}

		&.beatport {

			.artist-card {

				figure {

					@media @bp_480 {
						min-height: 240px;
					}

					@media @bp_768 {
						min-height: 240px;
						width: 240px;
					}
				}
			}
		}

		.col {
			.box-sizing;

			&:first-child {
			
				@media @bp_1024 {
					width: 60%;
					padding-right: @layout-gutter-tablet/2;
					display: flex;
					flex-direction: column;
				}
			}

			&:last-child {
			
				@media @bp_1024 {
					width: 40%;
					padding-left: @layout-gutter-tablet/2;
					display: flex;
					flex-direction: column;
				}
			}
		}

		.artist-info,
		.explore-charts {

			@media @bp_1024 {
				display: flex;
				flex: 1;
			}

			.pro-content-module-article {

				@media @bp_1024 {
					flex: 1;
				}
			}
		}


		.stats-and-network {
			margin-top: @layout-gutter-tablet;

			@media @bp_1024 {
				margin-top: 0;
				display: flex;
				flex-direction: column;
				flex: 1;
			}

			.pro-content-module-article {

				@media @bp_1024 {
					flex: 1;
				}
			}
		}
	}

	.artist-info {

		.pro-content-module-article {
			padding: 0;
		}

		.artist-card {
			background-color: @white;

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

			figure {
				width: 100%;
				padding-top: 100%;
				position: relative;
				background-size: cover;
				background-repeat: no-repeat;
				background-position: center;

				@media @bp_480 {
					padding-top: 0;
					width: 33.33%;
					min-height: 212px;
				}

				@media @bp_768 {
					min-height: 248px;
					width: 248px;
				}
			}

			article {
				padding: 12px 24px;

				@media @bp_480 {
					width: 66.66%;
				}

				@media @bp_768 {
					flex: 1;
				}
			}

			h3 {
				.font-size(20);
				.clamp-lines(1);
				line-height: 28px;
				font-weight: 500;

				& + .rankings {
					margin-top: 10px;
				}
			}

			.btn-save {
				position: absolute;
				top: 0;
				right: 0;
				background-color: transparent;
			}

			.badges {
				padding: 6px 0;
			}

			.badge.long {
				.font-size(12);
				padding: 9px 20px 9px 40px;
				width: auto;
				font-weight: 500;
				letter-spacing: 0.5px;
				text-transform: uppercase;
				font-family: @suiss-int;
				height: auto;
				margin: 6px 12px 6px 0;

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

				&:before {
					content: none;
				}
			}

			.flag {
				margin-left: 4px;
			}

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

				td {
					padding: 3px 0;
				}

				.rank {
					text-align: right;
					position: relative;
					padding-right: 45px;
					
					&.down,
					&.up {

						&:after {
							border-left: 8px solid transparent;
							border-right: 8px solid transparent;
							border-top: 12px solid @red;
							top: 7px;
							right: 10px;
						}
					}

					&.up {

						&:after {
							border-bottom: 12px solid @green;
							border-top: 0;
						}
					}

					&:after {
						content: "";
						border-bottom: 8px solid transparent;
						border-top: 8px solid transparent;
						border-left: 12px solid @yellow;
						width: 0;
						height: 0;
						display: inline-block;
						position: absolute;
						right: 12px;
						top: 5px;
					}
				}
			}
		}
	}

	.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 {

		.pro-content-module-article {

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				align-items: center;
				padding-top: 80px;
				padding-bottom: 80px;
			}
		}

		.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;

			@media @bp_640 {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				padding-top: 40px;
			}

			@media @bp_1024 {
				width: 75%;
				padding-left: 60px;
				padding-top: 0;
				max-width: 740px;
				margin: 0 auto;
			}

			@media @bp_1300 {
				padding: 0 30px;
			}
		}

		.item {
			.box-sizing;
			text-align: center;padding-top: 30px;

			@media @bp_640 {
				padding-top: 0;
			}
		}

		.meter {
			margin: 0 auto;
			width: 180px;

			@media @bp_768 {
				width: 150px;
			}

			@media @bp_1200 {
				width: 180px;
			}

			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/career-health-gauge-poor.svg');
				}
			}

			&.fair {

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

			&.good {

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

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

				.needle {
					display: none;
				}

				&:after {
					.font-size(20);
					color: @black;
					text-align: center;
					content: "N/A";
					position: absolute;
					top: 75px;
					left: 0;
					right: 0;

					@media @bp_768 {
						top: 61px;
					}

					@media @bp_1200 {
						top: 75px;
					}
				}

				&:before {
					content: url('../images/svg/career-health-gauge-zero.svg');
				}
			}
		}

		.needle {
			.transform-origin(right, center);
			position: absolute;
			right: 50%;
			top: 100%;
			width: 50%;
			height: 6px;
			margin-top: -6px;
			background-color: @black;
			z-index: 2;
		}

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

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

			@media @bp_768 {
				padding: 30px;
				width: 600px;
				left: 0;
				right: auto;
			}

			&.show {
				display: block;
			}

			.col-1 {

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

			.col-2 {

				@media @bp_768 {
					padding-left: 40px;
					flex: 1 1 auto;
				}
			}

			article {
				.font-size(12);

				@media @bp_768 {
					.font-size(13);
					display: flex;
					flex-direction: row;
					justify-content: space-between;
				}
			}

			h4 {
				.font-size(18);
				line-height: 24px;
				border-bottom: 2px solid @white;
				font-weight: 500;
				padding-bottom: 8px;
				margin-bottom: 14px;

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

			table {
				width: 100%;
				margin-top: 20px;
				color: @grey-1;

				@media @bp_768 {
					margin-top: 10px;
				}
			}

			tbody {

				tr {

					&.active {

						td {
							color: @white;
							font-weight: bold;
						}
					}
				}

				td {
					.font-size(12);
					background-color: transparent;
					padding: 4px;
					text-align: center;
					position: relative;

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

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

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

			.btn-solid {
				text-transform: uppercase;
				letter-spacing: 2px;

				&:hover {
					background-color: @white;
					color: @black;
				}
			}
		}
	}

	.fame-meter {

		.graph {
			padding: 0;

			> div > div:last-child svg > g > g:last-child {
				.prevent-click;
			}

			.marker {
				/*.transform-origin(center, center);
				.transition(all, 200ms, ease-out);
				cursor: pointer;

				&:hover {
					.scale(1.3);
				}*/
			}
		}

		.swiper-main {
			padding-top: 5px;
			padding-bottom: 5px;

			.card {
				cursor: pointer;

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

			.swiper-container {

				@media @bp_768 {
					padding: 0 50px;
				}

				@media @bp_1200 {
					padding: 0 70px;
				}

				@media @bp_1300 {
					padding: 0 90px;
				}

				@media @bp_1366 {
					padding: 0 120px;
				}
			}

			.swiper-button-next,
			.swiper-button-prev {

				@media @bp_768 {
					width: 50px;
				}

				@media @bp_1200 {
					width: 70px;
				}

				@media @bp_1300 {
					width: 90px;
				}

				@media @bp_1366 {
					width: 120px;
				}
			}
		}
	}

	.beatport-performance {

		.swiper-main {
			padding-top: 5px;
			padding-bottom: 5px;

			.card {
				cursor: pointer;

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

			.swiper-container {

				@media @bp_768 {
					padding: 0 50px;
				}

				@media @bp_1200 {
					padding: 0 70px;
				}

				@media @bp_1300 {
					padding: 0 90px;
				}

				@media @bp_1366 {
					padding: 0 120px;
				}
			}

			.swiper-button-next,
			.swiper-button-prev {

				@media @bp_768 {
					width: 50px;
				}

				@media @bp_1200 {
					width: 70px;
				}

				@media @bp_1300 {
					width: 90px;
				}

				@media @bp_1366 {
					width: 120px;
				}
			}
		}
	}

	.charts-overview,
	.music-overview,
	.events-overview,
	.country-overview,
	.beatport-overview,
	.beatport-positions,
	.fanbase-distribution,
	.fanbase-growth,
	.beatport-health,
	.fanbase-channels-distribution,
	.engagement-channels-distribution,
	.engagement,
	.artist-connections,
	.top-signature-tracks,
	.beatport-tracks-overview,
	.most-popular,
	.events-by-subgenres,
	.top-subgenres,
	.track-chart-genres,
	.top-performing,
	.beatport-genres,
	.genre-overview {

		.pro-content-module-article {
			padding: 0;
		}
	}

	.track-chart {

		.custom-select {
			display: inline-block;
			width: 150px;
			vertical-align: middle;
			margin-right: 12px;

			.selected-wrapper {
				height: 22px;

				&:after {
					height: 22px;
					top: 0;
				}
			}

			.selected-option {
				.font-size(12);
				padding-top: 0;
				height: 22px;
				line-height: 22px;
			}

			label {
				display: none;
			}
		}

		.artist {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			padding-right: 20px;

			.artist-name {
				//.clamp-lines(1);
				.text-overflow;
				max-width: 150px;
			}

			.country {
				flex: 0 1 50px;
				margin-left: 4px;
			}
		}
	}

	.top-artists-by-fanbase,
	.top-artists-by-engagement {

		.list-entities {

			@media @bp_1200 {
				padding-left: 0;
				padding-right: 0;
			}

			h4 {
				.font-size(12);
				text-align: center;
				font-weight: 500;
				padding-bottom: 20px;
				text-transform: uppercase;

				&:before {
					content: "";
					display: inline-block;
					vertical-align: text-top;
					margin-right: 4px;
					background-position: left center;
					background-repeat: no-repeat;
					background-size: contain;
				}

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

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

				&.soundcloud {
									
					&:before {
						//content: url('../images/svg/soundcloud-color.svg');
						background-image: url('../images/svg/soundcloud-color.svg');
						width: 27px;
						height: 12px;
					}
				}

				&.youtube {
					
					&:before {
						//content: url('../images/svg/youtube-color.svg');
						background-image: url('../images/svg/youtube-color.svg');
						width: 20px;
						height: 15px;
					}
				}

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

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

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

			.item {
				.box-sizing;

				@media @bp_600 {
					width: 50%;
				}

				@media @bp_1024 {
					width: 33.33%;
				}

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

		.pro-card {

			.value-change {

				&:after {
					content: none;
				}
			}
		}
	}

	.festivals-overview {

		.pro-content-module-article {

			&:not(.noise) {
				padding: 0;
			}
		}
	}

	.most-popular {

		.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 {

			th,
			td {
				.font-size(10);
				padding-top: 8px;
				padding-bottom: 8px;
				vertical-align: middle;
				color: @black;
			}

			th {
				font-weight: 500;
				border-top: 2px solid #f6f6f5;

				@media @bp_1024 {
					border-top: 0;
				}
			}

			tr {

				&:last-child {

					td {
						border-bottom: 0;
					}
				}

				&.active {

					&.green {
						
						td {
							background-color: @green;
							color: @white;
						}
					}

					&.yellow {
						
						td {
							background-color: @yellow;
							color: @white;
						}
					}

					&.red {
						
						td {
							background-color: @red;
							color: @white;
						}
					}
				}
			}
		}
	}

	.fanbase-distribution {
	}

	.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;
				}
			}

			&.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 {
	}

	.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;
				}
			}
		}
	}

	.music-overview {

		.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%;

		&.live-performance {

			.col {
			.box-sizing;

				&:first-child {
				
					@media @bp_1200 {
						width: 40%;
					}
				}

				&: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;

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

		.pro-table-wrapper {
			border-right: 2px solid @white-1;
			border-bottom: 2px solid @white-1;
			padding: 24px 0 20px 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: 50%;
					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: 50%;
					padding-left: @layout-gutter-tablet/2 + @layout-gutter-tablet;
				}
			}
		}
	}

	.map-country-popup {
		.font-size(12);
		width: 100%;
		background-color: #1F1F1F;
		color: @white;
		padding: 12px;
		display: inline-block;
		width: 180px;

		p {

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

		h4 {
			.font-size(14);
			font-weight: 500;
			padding-bottom: 0;
		}

		.stats {
			padding-top: 20px;

			.item {

				&.youtube {
					
					&:before {
						content: url('../images/svg/youtube-white.svg');
					}
				}

				&.spotify {
					
					&:before {
						content: url('../images/svg/spotify-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;
				}
			}
		}
	}

	.tracks-on-charts,
	.top-videos-and-tracks {

		.pro-content-module-article {
			.clearfix;
		}

		.pro-table-wrapper {

			&.loading {
				position: relative;
				height: 510px;

				&:before {
					background-color: @white;
				}
			}
		}

		thead {

			th {
				color: @black;
				
				@media @bp_768 {
					.font-size(13);
					line-height: 13px;
				}
			}
		}
	}

	.beatport-health {

		.beatport-health-performance,
		.beatport-rank {
			.font-size(12);
			color: @grey-2;
			line-height: 16px;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 40px;

			p {
				padding-top: 10px;
				padding-bottom: 0;
				margin-bottom: 0;
			}
		}

		.beatport-rank {
			padding-top: 38px;
		}

		.health-performance-meter {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 162px;
		}

		.health-performance-labels {
			color: @grey-1;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 162px;
			padding-top: 10px;
		}

		.perf-square {
			.box-sizing();
			width: 18px;
			height: 18px;
			border: 1px solid @black;

			&.active {
				border-color: @green;
				background-color: @green;
			}
		}

		.stats-table {

			th,
			td {
				padding: 6px 12px;
			}

			th {
				.font-size(14);
				font-weight: 500;
				text-align: left;
			}

			td {
				.font-size(12);
				border-top: 2px solid #f6f6f5;
				text-align: left;
				color: @grey-1;
			}
		}
	}

	.beatport-tracks-overview {

		.tracks-overview {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-bottom: -2px;

			.item {
				.box-sizing;
				width: 100%;
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				border-bottom: 2px solid @white-1;

				@media @bp_360 {
					width: 50%;
				}

				@media @bp_768 {
					width: 33.33%;
				}

				@media @bp_1024 {
					width: 20%;
				}

				&:first-child {
					
					@media @bp_360 {
						border-bottom: 2px solid @white-1;
					}

					@media @bp_1024 {
						border-bottom: 0;
					}
				}

				&:nth-child(2) {

					@media @bp_360 {
						border-bottom: 2px solid @white-1;
						border-left: 2px solid @white-1;
					}

					@media @bp_1024 {
						border-bottom: 0;
					}
				}

				&:nth-child(3) {

					@media @bp_360 {
						border-bottom: 2px solid @white-1;
					}

					@media @bp_768 {
						border-left: 2px solid @white-1;
						border-bottom: 2px solid @white-1;
					}

					@media @bp_1024 {
						border-bottom: 0;
					}
				}

				&:nth-child(4) {

					@media @bp_360 {
						border-bottom: 2px solid @white-1;
					}

					@media @bp_600 {
						border-left: 2px solid @white-1;
					}

					@media @bp_768 {
						border-left: 0;
						border-bottom: 0;
					}

					@media @bp_1024 {
						border-left: 2px solid @white-1;
					}
				}

				&:nth-child(5) {
					border-bottom: 0;

					@media @bp_360 {
						border-right: 2px solid @white-1;
					}

					@media @bp_768 {
						border-left: 2px solid @white-1;
						width: calc(~'33.33% + 2px');
					}

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

		.stats {
			.box-sizing;
			width: 100%;
			padding: 24px;

			&:last-child {
				border-top: 1px solid @white-1;

				@media @bp_768 {
					border-top: 2px solid @white-1;
				}
			}

			h3 {
				.font-size(20);
				font-weight: 500;
				padding-bottom: 15px;

				@media @bp_768 {
					display: inline-block;
					vertical-align: middle;
				}
			}

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

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

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

				span {
					.font-size(14);
				}
			}

			label {
				.font-size(10);
				color: #808080;
				display: block;
				line-height: 18px;
			}

			> span {
				.font-size(14);
			}
		}
	}

	.beatport-health-stats {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: -2px;
		text-align: center;

		.row {
			display: flex;
		}

		.item {
			.box-sizing;
			width: 100%;
			padding: @pro-content-module-padding;
			border-bottom: 2px solid @white-1;
			display: flex;
			flex-direction: column;

			&:nth-child(1) {
				border-left: 0;

				@media @bp_768 {
					width: 50%;
				}

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

			&:nth-child(2) {
				border-left: 0;

				@media @bp_768 {
					width: 50%;
					border-left: 2px solid @white-1;
				}

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

			&:nth-child(3) {
				border-left: 0;
				padding: 0;

				@media @bp_768 {
					width: 100%;
					border-left: 2px solid @white-1;
				}

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

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

			@media @bp_600 {
				width: 50%;
				padding-top: 0;
			}

			strong {
				.font-size(30);
				color: @black;
				font-weight: 500;
				line-height: 39px;
				display: block;
				padding-bottom: 10px;

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

			label {
				.font-size(12);
				color: #808080;
				display: block;
				line-height: 18px;
			}
		}
	}

	.beatport-track-performance {

		.beatport-track-details {

			.col-4 {

				h4 {
					padding-left: 0;
				}
			}
		}
	}

	.beatport-genres {

		.pro-content-module-article {

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				flex: 1 0 auto;
			}
		}

		.col {
			.box-sizing;

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

			&.col-1 {
				padding: 0 24px;
				justify-content: center;

				@media @bp_1024 {
					width: 60%;
				}

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

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

				@media @bp_1024 {
					width: 40%;
				}

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

		tbody {

			tr {

				&.active {

					td {
						color: @black;
						background-image: url(../images/gif/noise-animated-bright.gif);
						background-repeat: repeat;
						background-size: 400px;
						background-position: center center;
						border-color: @white-1;
					}
				}
			}
		}

		.pro-table.table-bars {

			.genre {
				.clamp-lines(1);
				text-transform: uppercase;
			}

			td {

				&:first-child {
					width: 200px;
					white-space: normal; 
				}

				&:last-child {
					width: auto;
				}
			}
		}

		.genre-details {
			text-align: center;
			padding-bottom: 24px;
			
			@media @bp_1024 {
				padding-bottom: 20px;
			}

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

			.pro-mini-table {
				max-width: 240px;
				margin: 10px auto 0 auto;
			}
		}
	}

	.beatport-track-details {
		.font-size(12);

		@media @bp_768 {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin: 0 -12px;
		}

		.col {
			.box-sizing;

			@media @bp_768 {
				padding: 12px;
			}

			&.col-1 {

				@media @bp_768 {
					width: 40%;
				}

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

			&.col-2 {

				@media @bp_768 {
					width: 60%;
				}

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

			&.col-3,
			&.col-4 {

				@media @bp_768 {
					width: 50%;
				}

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

		h3 {
			.font-size(16);
			font-weight: 500;
			line-height: 20px;
		}

		h4 {
			.font-size(12);
			font-weight: 500;
			padding-bottom: 10px;
			padding-left: 12px;

			@media @bp_768 {
				//padding-left: 24px;
			}
		}

		.artists,
		.genres {
			padding-top: 15px;
			line-height: 1;
		}

		.graph {
			padding-top: 0;
		}

		.list-of-artists {

			.item {
				padding-top: 6px;

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

		.card-micro {

			h3 {
				.font-size(12);
				line-height: 1;
			}
		}
	}

	.beatport-positions {

		.pro-content-module-article {
			padding: 0;

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

		.col {
			.box-sizing;
			
			@media @bp_1200 {
				width: 50%;
				flex: 1;
			}

			&:first-child {
				border-bottom: 2px solid @white-1;

				@media @bp_1200 {
					border-bottom: 0;
					border-right: 1px solid @white-1;
				}
			}

			&:last-child {

				@media @bp_1200 {
					border-bottom: 0;
					border-left: 1px solid @white-1;
				}
			}
		}

		.pro-table {

			th {
				.font-size(16);
				line-height: 18px;
				color: @black;
				padding-top: 12px;
				padding-bottom: 12px;
				font-weight: 500;
			}

			td {
				color: @black;

				&:first-child {
					white-space: nowrap;
					width: 10px;
				}
			}
		}
		
		.beatport-entity {
			display: flex;
			flex-direction: row;

			.photo {
				width: 50px;
				height: 50px;
			}

			.info {
				display: flex;
				flex: 1;
				height: 50px;
				flex-direction: column;
				padding-left: 12px;
				justify-content: space-between;
			}

			h4 {
				.clamp-lines(1);
				.font-size(16);
				font-weight: 500;
			}

			.row {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				line-height: 1;
			}

			.genre,
			.artist {
				.clamp-lines(1);
				max-width: 48%;
			}

			.genre {
				color: @grey-1;
				text-align: right;
			}
		}

		.rank {

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

		.value-change {
			.font-size(12);
			display: block;
			text-transform: uppercase;
			letter-spacing: 1px;
			padding: 8px 2px;
			text-align: left;

			&.down,
			&.up {

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

			&.up {

				&:before {
					border-bottom: 12px solid @green;
					border-top: 0;
					margin-bottom: 0;
				}
			}

			&:before {
				content: "";
				border-bottom: 8px solid transparent;
				border-top: 8px solid transparent;
				border-left: 12px solid @yellow;
				width: 0;
				height: 0;
				display: inline-block;
				margin-bottom: -8px;
				margin-right: 4px;
			}
		}
	}

	.top-countries {
		width: 100%;

		.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 {
			border-right: 2px solid @white-1;
			border-bottom: 2px solid @white-1;
			padding: 24px 0 20px 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;
				}
			}

			&: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 {
					width: 14px;
					height: 14px;
					margin-left: 6px;
					margin-right: 0;
					vertical-align: top;
				}
			}
		}
	}

	.events-overview {

		.graph {

			svg + div > div {
				box-shadow: none !important;
				background: transparent !important;
				padding: 0 !important;
				border-radius: 0 !important;
			}
		}
	}

	.artist-connections-sorted,
	.artist-beatport-network,
	.label-network {

		.pro-content-module-article {
			padding-bottom: 0;
			padding-top: 0;
		}

		.pro-table-wrapper {
			max-height: 528px;
			scrollbar-width: thin;
			overflow: hidden;
			overflow-y: auto;

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

			&::-webkit-scrollbar-button {
				//background: @grey;
			}

			&::-webkit-scrollbar-track-piece {
				background: @white-2;
			}

			&::-webkit-scrollbar-thumb {
				background: @grey;
			}
		}

		.div-table {
			padding: 10px 24px;

			.div {
				position: relative;
			}
		}
	}

	.top-artists-performing {

		.pro-content-module-article {
			padding-top: 0;
			padding-bottom: 0;
		}

		.pro-table-wrapper {
			max-height: 663px;
			scrollbar-width: thin;
			overflow: hidden;
			overflow-y: auto;

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

			&::-webkit-scrollbar-button {
				//background: @grey;
			}

			&::-webkit-scrollbar-track-piece {
				background: @white-2;
			}

			&::-webkit-scrollbar-thumb {
				background: @grey;
			}
		}

		.pro-table {

			&.table-top-performing-artists {

				thead {
					background-color: @white;
				}
			
				th {
					padding-top: 24px;
					position: sticky;
					top: 0;
					background-color: @white;
					z-index: 1;
					border-bottom: 0;

					&:last-child {

						> label {
							text-align: center;
							display: block;
						}
					}

					&:before {
						content: "";
						position: absolute;
						left: 0;
						right: 0;
						bottom: 0;
						width: 100%;
						height: 2px;
						background-color: #f6f6f5;
					}
				}
			}
		}
	}

	.top-hashtags {

		.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;
			}

			&:first-child {
				border-bottom: 2px solid @white-1;

				@media @bp_1200 {
					border-bottom: 0;
					border-right: 2px solid @white-1;
				}
			}
		}

		.hashtags-list {
			line-height: 16px;
			padding-top: 20px;

			.hashtag {
				.text-decoration-ink;
				.font-size(12);
				font-weight: 500;
				display: inline-block;
				padding: 10px 30px 10px 0;

				@media @bp_768 {
					padding-right: 45px;
				}

				@media @bp_1024 {
					padding-right: 60px;
				}
			}
		}
	}

	.days-on-charts-and-tracks-over-time {

		.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/2;
					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/2;
				}
			}
		}

		.col-content {
			padding: @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-legend {
			padding-top: 20px;

			@media @bp_600 {
				padding-top: 0;
				padding-left: 20px;
				display: flex;
				flex-shrink: 0;
				flex-direction: column;
			}
		}

		.graph {
			padding-top: 10px;

			svg + div > div {
				background: transparent !important;
				border-radius: 0px !important;
				box-shadow: none !important;
				padding: 0 !important;
			}
		}

		.legend {

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

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

				&:nth-child(1) label:before {
					background-color: #454545;
				}

				&:nth-child(2) label:before {
					background-color: #634FD1;
				}
			}

			label {
				.font-size(10);
				line-height: 15px;
				font-weight: 500;
				position: relative;
				padding-left: 15px;
				text-transform: uppercase;
				letter-spacing: 2px;

				&:before {
					content: "";
					position: absolute;
					top: 3px;
					left: 0;
					width: 8px;
					height: 8px;
				}
			}
		}
	}

	.events-detected-and-next {

		.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/2;
					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/2;
				}
			}
		}

		.col-content {
			padding: @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-legend {
			padding-top: 20px;

			@media @bp_600 {
				padding-top: 0;
				padding-left: 20px;
				display: flex;
				flex-shrink: 0;
				flex-direction: column;
			}
		}

		.graph {
			padding-top: 10px;

			svg + div > div {
				background: transparent !important;
				border-radius: 0px !important;
				box-shadow: none !important;
				padding: 0 !important;
			}
		}

		.legend {

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

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

				&:nth-child(1) label:before {
					background-color: @grey-1;
				}

				&:nth-child(2) label:before {
					background-color: @blue;
				}
			}

			label {
				.font-size(10);
				line-height: 15px;
				font-weight: 500;
				position: relative;
				padding-left: 15px;
				text-transform: uppercase;
				letter-spacing: 2px;

				&:before {
					content: "";
					position: absolute;
					top: 3px;
					left: 0;
					width: 8px;
					height: 8px;
				}
			}
		}

		.next-events {
			padding-bottom: 0;

			ul {
				padding-top: 20px;
				margin: 0 -@pro-content-module-padding;
			}

			.item {
				padding: 8px @pro-content-module-padding;
				border-top: 2px solid @white-1;
			}
		}

		.event-card {
			display: flex;
			flex-direction: row;
			position: relative;
			height: 48px;

			.date {
				width: 48px;
				height: 48px;
				position: absolute;
				left: 0;
				top: 0;

				time {
					width: 48px;
					height: 48px;
					display: block;
					background-color: @black;
					color: @white;
					text-align: center;
					text-transform: uppercase;

					.day {
						.font-size(20);
						line-height: 20px;
						padding-top: 9px;
						display: block;
					}

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

			article {
				padding: 4px 0 4px 63px;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				flex: 1;
			}

			h3 {
				.font-size(14);
				.clamp-lines(1);
				overflow: hidden;
				line-height: 18px;
				font-weight: 500;
				color: @black;
			}

			a {
				color: @black;
			}

			.place {
				.font-size(12);
				.clamp-lines(1);
				overflow: hidden;
				line-height: 16px;
				font-weight: 400;
				color: @grey-1;
			}
		}
	}

	.top-events-and-festivals {

		.pro-content-module-article {
			padding: 0;
			//background-color: transparent;

			&.noise {
				padding: @pro-content-module-padding;
			}

			@media @bp_1024 {
				display: flex;
				flex-direction: row;
				flex-wrap: nowrap;
				background-color: transparent;
			}
		}

		.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/2;
					display: flex;
					flex-direction: column;
					border-right: 1px solid @white-1;
					margin-right: 12px;
				}
			}

			&:last-child {
				
				@media @bp_1024 {
					display: flex;
					flex-direction: column;
					width: 50%;
					border-left: 1px solid @white-1;
					margin-left: 12px;
					//padding-left: @layout-gutter-tablet/2;
				}
			}
		}

		.col-content {
			padding: @pro-content-module-padding;
			background-color: @white;
			width: 100%;

			@media @bp_1024 {
				display: flex;
				flex-direction: column;
				flex: 1;
				width: auto;
				padding-top: 0;
			}
		}

		.pro-table {

			&.table-top-performing-artists {
				//border-top: 2px solid @white-1;
				//margin-top: 20px;

				th {

					&:first-child,
					&:last-child {
						width: 50%;
					}
				}
			}
		}
	}

	.artist-connections,
	.top-signature-tracks {

		.pro-content-module-article {

			&.noise {
				padding: @pro-content-module-padding;
			}
		}
	}

	.artist-connections-distribution {

		.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/2;
					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/2;
				}
			}
		}

		.col-content {
			padding: @pro-content-module-padding;
			background-color: @white;
			width: 100%;

			@media @bp_1024 {
				display: flex;
				flex-direction: column;
				flex: 1;
				width: auto;
			}
		}
	}

	.rising-artists {

		h4 {
			.font-size(16);
			text-align: center;
			font-weight: 500;
			padding-bottom: 20px;
		}
	}

	.events-overview-stats {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: -2px;

		&.for-country {

			.item {

				@media @bp_600 {
					width: 50%;
				}

				@media @bp_1200 {
					width: 25%;
				}

				&:nth-child(1) {
					border-left: 0;

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

				&:nth-child(2) {
					border-left: 0;

					@media @bp_600 {
						border-left: 2px solid @white-1;
					}
				}

				&:nth-child(3) {
					border-left: 0;

					@media @bp_600 {
						border-left: 2px solid @white-1;
					}
				}

				&:nth-child(4) {

					@media @bp_600 {
						border-left: 2px solid @white-1;
					}

					@media @bp_1200 {
						border-left: 2px solid @white-1;
					}
				}
			}

		}

		.item {
			.box-sizing;
			width: 100%;
			padding: @pro-content-module-padding;
			border-bottom: 2px solid @white-1;
			display: flex;

			@media @bp_600 {
				width: 50%;
			}

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

			&:nth-child(1) {
				border-left: 0;

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

			&:nth-child(2) {
				border-left: 0;

				@media @bp_600 {
					border-left: 2px solid @white-1;
				}
			}

			&:nth-child(3) {
				border-left: 0;

				@media @bp_600 {
					border-left: 2px solid @white-1;
				}
			}

			&:nth-child(4) {

				@media @bp_600 {
					border-left: 2px solid @white-1;
				}

				@media @bp_1200 {
					border-left: 2px solid @white-1;
				}
			}
		}

		.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 {
				.font-size(20);
				font-weight: 500;
				line-height: 18px;
				display: block;
				padding-bottom: 10px;

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

			label {
				.font-size(10);
				color: #808080;
				display: block;
				line-height: 18px;
			}

			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: 500;
				text-transform: uppercase;
			}
		}

		.percent {
			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;
			border-bottom: 2px solid @white-1;
			display: flex;

			@media @bp_600 {
				width: 50%;
			}

			@media @bp_1200 {
				width: 25%;
			}

			&:nth-child(1) {
				border-left: 0;
			}

			&:nth-child(2) {
				border-left: 0;

				@media @bp_600 {
					border-left: 2px solid @white-1;
				}
			}

			&:nth-child(3) {
				border-left: 0;

				@media @bp_600 {
					border-left: 2px solid @white-1;
				}
			}

			&:nth-child(4) {

				@media @bp_600 {
					border-left: 2px solid @white-1;
				}

				@media @bp_1200 {
					border-left: 2px solid @white-1;
				}
			}
		}

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

			strong {
				.font-size(20);
				font-weight: 500;
				line-height: 18px;
				display: block;
				padding-bottom: 10px;

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

			label {
				.font-size(10);
				color: #808080;
				display: block;
				line-height: 18px;
			}

			span {
				.font-size(14);
			}
		}
	}

	.beatport-overview-stats {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: -2px;

		.row {
			display: flex;
		}

		.item {
			.box-sizing;
			width: 100%;
			padding: @pro-content-module-padding;
			border-bottom: 2px solid @white-1;
			display: flex;

			&:nth-child(1) {
				border-left: 0;

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

			&:nth-child(2) {
				border-left: 0;

				@media @bp_1024 {
					border-left: 2px solid @white-1;
					width: 25%;
				}

				@media @bp_1200 {
					border-left: 2px solid @white-1;
				}
			}

			> div {
				width: 100%;
			}
		}

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

			@media @bp_600 {
				width: 33.33%;
			}

			strong {
				.font-size(20);
				font-weight: 500;
				line-height: 18px;
				display: block;
				padding-bottom: 10px;

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

			label {
				.font-size(10);
				color: #808080;
				display: block;
				line-height: 18px;
			}

			span {
				.font-size(14);
			}
		}
	}

	.beatport-network-overview-stats {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-bottom: -2px;

		.row {
			display: flex;
		}

		.item {
			.box-sizing;
			width: 100%;
			padding: @pro-content-module-padding;
			border-bottom: 2px solid @white-1;
			display: flex;

			&:nth-child(1) {
				border-left: 0;

				@media @bp_1024 {
					width: 50%;
				}

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

			&:nth-child(2) {
				border-left: 0;

				@media @bp_1024 {
					border-left: 2px solid @white-1;
					width: 50%;
				}

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

			&:nth-child(3) {
				border-left: 0;

				@media @bp_1024 {
					border-right: 2px solid @white-1;
					width: calc(~'50% + 2px');
				}

				@media @bp_1200 {
					width: 30%;
					border-left: 2px solid @white-1;
					border-right: 0;
				}
			}

			> div {
				width: 100%;
			}
		}

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

			@media @bp_600 {
				width: 50%;
			}

			strong {
				.font-size(20);
				font-weight: 500;
				line-height: 18px;
				display: block;
				padding-bottom: 10px;

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

			label {
				.font-size(10);
				color: #808080;
				display: block;
				line-height: 18px;
			}

			span {
				.font-size(14);
			}
		}
	}

	.top-posts {
		position: relative;
		z-index: 1;
		
		.card {
			border: 1px solid @white-1;
		}

		.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 {

		h2 {
			.font-size(20);
			font-weight: 500;

			@media @bp_768 {
				display: inline-block;
				vertical-align: middle;
			}
		}
	}

	.events-by-subgenres,
	.top-subgenres {

		.pro-table-wrapper {
			margin: 0;
		}
	}

	.top-subgenres {

		.sort {
			width: 230px;
			padding-bottom: 30px;

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

			.selected-wrapper {
				background-color: @white-1;
				text-align: left;
			}

			label {
				.font-size(10);
				text-transform: uppercase;
				display: block;
				color: @black-1;
				text-align: left;
			}

			.results {
				text-align: left;
			}
		}
	}

	/***********************************************/

	.pro-table-wrapper {
		margin: 0 -@pro-content-module-padding;
	}

	.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: #1F1F1F;
							color: @white;
							border-color: #1F1F1F;
						}

						.country {
							color: @white;
						}
					}

					&:hover {

						&:not(.active) {

							td {
								background-color: @white-2;
								border-color: @white-2;
							}
						}
					}
				}
			}
		}

		&.table-audience-map {

			th {
				.font-size(10);
				line-height: 15px;
			}

			.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;
				}

				&:nth-child(3) {
					width: 12%;
				}

				&:nth-child(4) {
					width: 12%;
				}

				&:nth-child(5) {
					width: 100px;
				}

				&:nth-child(6) {
					width: 80px;
				}

				&:nth-child(7) {
					width: 100px;
				}
			}
		}

		&.table-tracks-on-charts {
		}

		&.table-top-videos-and-tracks {
		}

		&.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: 10px;
					padding-right: 10px;
					justify-content: center;
				}
			}

			th {

				&:last-child {
					//text-align: center;
				}
			}

			.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: 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%;
				}

				.good,
				.fair,
				.poor {
					align-items: center;

					&:before {
						content: "";
						.rounded-corners(50%);
						display: inline-block;
						width: 10px;
						height: 10px;
						margin-right: 5px;
						vertical-align: middle;
					}
				}

				.good {

					&:before {
						background-color: @green;
					}
				}

				.fair {

					&:before {
						background-color: @yellow;
					}
				}

				.poor {

					&:before {
						background-color: @red;
					}
				}
			}
		}

		&.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 {
					width: 10px;
				}
			}
		}

		&.table-bars {
			color: @black;

			td {
				display: block;

				@media @bp_768 {
					display: table-cell;
				}

				&:first-child {
					line-height: 13px;
					border-bottom-width: 0;

					@media @bp_768 {
						border-bottom-width: 2px;
						white-space: nowrap;
					}
				}

				&:last-child {
					width: 100%;
					padding-left: 24px;
					padding-right: 175px;

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

			label {

				&.channel {

					&:before {
						width: 40px;
						text-align: center;
					}
				}
			}

			.main-genre {
				display: block;
				color: @grey-1;
			}
	
			.pro-bar {
				position: relative;
				background-color: @black-1;
				height: 20px;

				span {
					position: absolute;
					white-space: nowrap;
					left: 12px;
					color: @black;

					@media @bp_768 {
						left: 100%;
						margin-left: 10px;
						color: @black-1;
					}
				}

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

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

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

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

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

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

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

				&.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;
				}
			}
		}

		&.table-beatport-charts {

			&.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) {
						white-space: normal;

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

					&:nth-child(3),
					&:nth-child(4),
					&:nth-child(5) {
						white-space: nowrap;
					}
				}

				small {
					.font-size(10);
					line-height: 1;
					display: block;
				}
			}

			&.label-network {
			}

			label {

				&.channel {
					text-transform: none;
					line-height: 1;

					&:not(.sortable) {
						padding-left: 26px;

						&:before {
							position: absolute;
							left: 0;
							top: 0;
						}
					}
				}
			}

			tbody {

				tr {

					&.active {

						td {
							color: @black;
							background-image: url(../images/gif/noise-animated-bright.gif);
							background-repeat: repeat;
							background-size: 400px;
							background-position: center center;
							border-color: @white-1;
						}
					}
				}
			}

			td,
			th {
				padding: 10px;

				&:first-child {
					padding-left: @pro-content-module-padding;
					width: 30%;
				}

				&:nth-child(2),
				&:nth-child(3),
				&:nth-child(4),
				&:nth-child(5),
				&:nth-child(6) {
					padding-left: 10px;
					padding-right: 10px;
					white-space: nowrap;
				}

				&:last-child {
					text-align: left;
					white-space: nowrap;
				}
			}

			th {

				&:first-child {
					//padding-left: 66px;
				}
			}
		}
	
		&.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;
			}
		}

		th,
		td {
			text-align: left;
			padding: 10px;
			border-bottom: 2px solid @white-1;
			vertical-align: middle;

			&:first-child {
				padding-left: @pro-content-module-padding;
			}

			&:last-child {
				padding-right: @pro-content-module-padding;
			}
		}

		th {
			padding-top: 5px;
			padding-bottom: 20px;
			font-weight: 500;
			vertical-align: top;
		}

		a {
			color: inherit;
		}

		.zero-state {

			td {
				.prevent-click;
				font-weight: 500;
				text-align: center;
				color: @black;
				padding-top: 60px;
				padding-bottom: 60px;
				border-bottom: 0;
			}
		}

		.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 {
			position: relative;
			line-height: 1;
			display: inline-block;

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

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

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

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

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

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

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

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

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

			&.channel {
				display: block;
				text-transform: uppercase;
				line-height: unset; 

				&.sortable {
					margin-left: 25px;
					text-transform: normal;
					cursor: pointer;
					position: relative;
					display: inline-block;
					padding-right: 20px;

					&:before {

						@media @bp_768 {
							position: absolute;
							left: -25px;
							top: 0;
						}
					}

					&:after {
						margin-left: 0;
						position: absolute;
						right: 0;
						top: 0;

						@media @bp_768 {
							margin-left: 5px;
						}
					}

					br {
						display: none;

						@media @bp_768 {
							display: block;
						}
					}
				}
				
				&:before {
					vertical-align: top;
					line-height: 1;
					display: inline-block;

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

			&.sortable {
				cursor: pointer;
				position: relative;
				display: inline-block;
				padding-right: 20px;

				&.active,
				&:hover {
					color: @black;

					&:after {
						border-top-color: @black;
						border-bottom-color: @black;
						background-image: url('../images/svg/sort-default-arrows-black.svg');
					}
				}

				&:after {
					content: "";
					width: 0;
					height: 0;
					margin-left: 5px;
					display: inline-block;
					position: absolute;
					right: 0;
					top: -2px;
					width: 14px;
					height: 14px;
					background-position: center;
					background-repeat: no-repeat;
					background-size: 20px;
					background-image: url('../images/svg/sort-default-arrows.svg');
				}
			}

			&.asc,
			&.desc {
				cursor: pointer;
				position: relative;
				display: inline-block;
				padding-right: 20px;

				&:after {
					content: "";
					width: 0;
					height: 0;
					margin-left: 5px;
					display: inline-block;
					position: absolute;
					right: 0;
					top: 0;
					border-left: 8px solid transparent;
					border-right: 8px solid transparent;
					border-top: 12px solid @grey-1;
					background: none;
				}
			}

			&.asc {

				&:after {
					border-bottom: 12px solid @grey-1;
					border-top: 0;
				}
			}
		}

		.label-search {
			.font-size(12);
			position: relative;

			.search-input {
				.font-size(12);
				.box-sizing;
				height: 20px;
				border: 0;
				width: 100%;
				padding: 0 18px 0 4px;
				background-color: @white;
				background-repeat: no-repeat;
				background-position: right center;
				background-image: url('../images/svg/search.svg');
				background-size: 12px;
				border-bottom: 1px solid @black;
			}

			.results {
				.font-size(11);
				display: none;
				position: absolute;
				top: 21px;
				left: 0;
				max-width: 250px;
				max-height: 200px;
				background-color: @white-1;
				overflow: hidden;
				overflow-y: auto;
				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(12);
		text-align: right;
		padding: 20px @pro-content-module-padding 0 0;

		.btn-pagination {
			border: 0;
			width: 12px;
			height: 20px;
			vertical-align: middle;
		}

		label {
			color: @grey-1;
		}

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

		strong {
			font-weight: 500;
			padding: 0 5px;
		}
	}

	.pro-mini-table {
		.font-size(12);
		border: 1px solid @white;
		width: 100%;
		text-align: left;

		tr {

			&:not(:last-child) {

				td {
					position: relative;
					line-height: 14px;
					padding-top: 10px;
					padding-bottom: 10px;

					&:after {
						content: "";
						position: absolute;
						left: 12px;
						right: 12px;
						bottom: 0px;
						height: 1px;
						background-color: @white;
					}

					&:last-child {

						&:after {
							left: -50px;
						}
					}
				}
			}
		}

		td {
			padding: 8px 12px;

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

			&:last-child {
				text-align: right;
				white-space: nowrap;
				padding-left: 6px;
			}
		}
	}
}