.section-countries-landing {
	.box-sizing;
	padding: 0;
	min-height: calc(~'100vh - 50px');
	display: flex;

	@media @bp_1024 {
		min-height: calc(~'100vh - 74px');
	}

	.section-main {
		display: flex;
		flex: 1;
	}

	.page {
		width: 100%;
		padding: 0 12px;
		display: flex;
		max-width: @layout-grid-max-width;

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

	.country-landing-sidebar {
		display: flex;
		flex-direction: column;
		flex: 1;

		@media @bp_768 {
			position: absolute;
			left: 12px; //32px;
			top: 32px;
			bottom: 100px;
			width: 270px;
			z-index: 1;
		}

		@media @bp_1200 {
			left: 16px;
		}
	}

	.country-landing-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		background-color: @white;
		align-items: flex-end;
		padding: 16px 24px;
		margin: 12px 0 2px 0;

		@media @bp_768 {
			margin: 0 0 15px 0;
		}

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

		.counter {
			.font-size(11);
			color: #808080;
			display: flex;
			line-height: 1;
			margin-left: 6px;
		}
	}

	.country-landing-countries-list {
		background-color: @white;
		display: flex;
		flex-direction: column;
		flex: 1;
		position: relative;

		.countries-list {
			position: absolute;
			top: 24px;
			bottom: 0;
			left: 0;
			right: 0;
			overflow: hidden;
			overflow-y: auto;
			scrollbar-width: thin;

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

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

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

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

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

		.zero-state {
			.font-size(12);
			text-align: center;
			line-height: 16px;
			line-height: 16px;
		}

		.item {
			padding: 0 24px;
			cursor: pointer;

			@media @bp_768 {
				padding: 0;
				margin: 0 8px;
			}

			&:hover {

				@media @bp_768 {

					.row {
						background-color: @indigo-2;
					}
				}
			}

			&.active {

				.row {
					background-color: @indigo-2;
				}
			}

			&:last-child {
				
				.row {
					border-bottom: 0;
				}
			}
		}

		.row {
			.box-sizing;
			display: flex;
			flex-direction: row;
			flex-wrap: nowrap;
			align-items: center;
			color: #808080;
			border-bottom: 1px solid #ebebeb;
			height: 40px;
			padding: 0 24px 0 8px;

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

		.number {
			.font-size(10);
			min-width: 30px;
			max-width: 30px;
		}

		.country-info {
			display: flex;
			flex: 1;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

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

		.country-title {
			display: block;
		}

		.flag {
			width: 20px;
			height: auto;
			border: 1px solid #E8ECED;
		}

		.counter {
			.font-size(10);
			display: flex;
			flex: 0 1 auto;
			line-height: 1;
			margin-left: 6px;
			white-space: nowrap;
			padding-left: 8px;
		}

		h3 {
			.font-size(12);
			.clamp-lines(1);
			color: @black;
			font-weight: 500;
			padding-left: 8px;
		}
	}

	.map-embed {
		display: none;
		cursor: grab;

		@media @bp_768 {
			display: flex;
			position: absolute;
			top: 0;
			right: 32px;
			bottom: 0;
			left: 0; //334px;
			z-index: 0;
			justify-content: center;
			align-items: center;
		}

		*,
		*:focus {
			outline: none;
		}

		text {
			.prevent-click;
		}

		path {

			&:hover {
				cursor: pointer;
			}
		}
	}

	.pro-search {
		display: none;

		@media @bp_768 {
			display: block;
			padding: 20px 24px;
		}

		&.loading {

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

			.search-wrapper {

				&:before {
					.opacity(1);
					top: 6px;
					right: 32px;
					background-image: url('../images/svg/loader-ani-black.svg');
				}
			}
		}

		.pro-search-input {
			background-color: #f6f6f6;
			border-color: #f6f6f6;
			background-size: 15px;
			background-position: right 12px center;
			background-image: url('../images/svg/search.svg');
			padding: 0 60px 0 20px;
			height: 30px;
		}

		.results {
			top: 31px;
			background-color: #f6f6f6;

			.result-item {
				.text-overflow;
				padding: 8px 20px;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
			}
		}
	}
}

.global-map-tooltip-wrapper {
	height: 50px;
}

.global-map-tooltip {

	td {
		vertical-align: middle;
		height: 50px;
	}

	img {
		border: 1px solid #E8ECED;
	}

	.country-name {
		.font-size(14);
		padding-left: 16px;
		line-height: 18px;
		max-width: 300px;
		font-weight: 500;
		display: block;
	}
}

.country-landing-popup {
	.box-shadow(0 0 3px 0 rgba(0,0,0,0.2));
	background-color: @white;
	padding: 15px 24px;
	position: absolute;
	display: none;
	z-index: 3;

	&.show {
		display: inline-block;
	}

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

	h3 {
		.font-size(14);
		font-weight: 500;
		line-height: 18px;
		padding: 3px 0 5px 0;
		white-space: nowrap;

		a {
			color: @black;
		}
	}

	.flag {
		width: 35px;
		height: 25px;
		display: inline-block;
		max-width: none;
		border: 1px solid #E8ECED;
	}

	.country-info {
		padding-left: 12px;
	}

	.stat-value {
		.font-size(12);
		display: block;
		color: @grey-1;
	}

	.btn-txt {
		font-weight: 500;
		margin-top: 5px;
	}
}