@import '../default.less';
@import '../mixins.less';
//DON'T ADD IMPORTS, ABOVE ARE TO MAKE INTELLISENSE WORK

@off-white: #f0f0ec;
@sky: #c8d7df;
@white-smoke: #f5f5f5;
@charcoal-grey: #353d40;
@checkbox-input-label: #292929;
@grass-green: #81c45c;
@slate-blue: #6993a9;

div#search-pager a
{
	html[dir='rtl'] &
	{
		float: right;
	}
}

span.search-metadata-item,
span.search-metadata-item-gray
{
	color: gray;
	font: 9pt @title-font;

	&.unit
	{
		color: gray;
		font-size: 9pt;
		font-style: italic;
	}
}

span.found-dimension,
span.search-metadata-value,
span.search-metadata-value-gray
{
	color: gray;
	font: 9.5pt @title-font;
	font-style: normal;

	a
	{
		color: gray;
		white-space: nowrap;
		text-overflow: ellipsis;
		max-width: 420px;
		overflow: hidden;
		position: inherit;
		top: 3px;
	}

	&.found-single
	{
		a
		{
			max-width: 600px;
		}
	}

	&.black
	{
		color: black;
	}
}

span.found-dimension
{
	&.black
	{
		color: black;
		display: inline-block;
		width: 85%;

		a
		{
			color: black;
		}
	}

	.dimension-name
	{
		font-weight: bold;
		margin-right: 6px;
	}

	.elements-separator
	{
		margin-right: 6px;
	}

	.more-count
	{
		margin-left: 6px;
	}
}

div#full-search-results
{
	margin-top: 15px;
}

div#full-search-results, div.search-result-item
{
	#named-entity-result-item
	{
		max-width: 910px;
	}

	div.time-frequency
	{
		font-family: @title-font;
		font-size: 9pt;
		word-spacing: -3px;

		html[dir='rtl'] &
		{
			.margin-left-right(10px, 0);
		}

		label
		{
			font-size: 14px;
			margin-right: 4px;
			cursor: default;

			html[dir='rtl'] &
			{
				.margin-left-right(4px, 0);
			}
		}

		span
		{
			font-size: 12px;
			cursor: pointer;
			padding: 4px 9px;
			border-right: 1px solid #0090E7;

			&.checked
			{
				background-color: @accent-color;
				color: white;
			}

			&.unchecked
			{
				background-color: #E1dfda;
				color: #666;
			}

			&:first-of-type
			{
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
			}

			&:last-of-type
			{
				border-right-width: 0;
				border-top-right-radius: 3px;
				border-bottom-right-radius: 3px;
			}
		}
	}
}

div.search-filters-container
{
	div.filter-container
	{
		margin-top: 20px;
		margin-bottom: 20px;

		div.left-container
		{
			float: left;

			html[dir='rtl'] &
			{
				float: right;
			}

			ul.dynamic-filters
			{
				padding: 0;
				margin: 2px 0 0 0;
				height: 19px;

				li
				{
					display: inline-block;
					font: bold 10pt @title-font;
					.margin-left-right(0, 15px);

					&.active a
					{
						color: black;
						text-decoration: none;
					}

					a
					{
						color: @accent-color;
						font-size: 10pt;
					}


					html[dir='rtl'] &
					{
						.margin-left-right(15px, 0);
					}
				}
			}

			div.fixed-filters
			{
				div.fixed-filter-container
				{
					margin: 15px 15px 0 0;
					height: 22px;

					html[dir='rtl'] &
					{
						.margin-left-right(15px, 0);
					}

					& > label, & > div
					{
						float: left;

						html[dir='rtl'] &
						{
							float: right;
						}
					}

					label
					{
						font-size: 14px;
						margin-right: 4px;
						margin-top: 2px;
						cursor: default;

						html[dir='rtl'] &
						{
							.margin-left-right(4px, 0);
						}
					}

					div.time-frequency
					{
						display: inline-block;
						margin-left: 15px;

						html[dir='rtl'] &
						{
							.margin-left-right(0, 15px);
						}

						label
						{
							html[dir='rtl'] &
							{
								direction: rtl;
								unicode-bidi: embed;
							}
						}
					}

					div.chzn-container
					{
						max-width: 200px;
					}

					label.timeseries-filter
					{
						margin-right: 4px;
						margin-left: 15px;

						html[dir='rtl'] &
						{
							.margin-left-right(4px, 15px);
						}
					}
				}
			}
		}

		.best-result
		{
			&:after
			{
				content: ' ';
				display: block;
			}
		}
	}
}

.search#site-main
{
	clear: both;
	vertical-align: top;

	.formatted-title
	{
		em
		{
			font-style: initial;
			background-color: fade(@accent-color, 20%);
		}
	}

	.title-background
	{
		background-color: @accent-color;
	}

	.instant-caption
	{
		vertical-align: top;
		text-transform: uppercase;
		color: gray;
		font-size: 0.9em;
		display: inline-block;

		strong
		{
			color: #222;
		}

		&.left-container
		{
			.margin-left-right(0, 4px);

			html[dir='rtl'] &
			{
				.margin-left-right(4px, 0);
			}
		}
	}

	a.instant-caption
	{
		vertical-align: top;
		color: @accent-color;
		text-decoration: none;
		font-weight: bold;
	}

	div.see-also
	{
		margin-top: 12px;
	}

	div.instant-answer, div.see-also
	{
		&.left-container
		{
			max-width: 415px;

			a.instant-caption
			{
				.margin-left-right(0, 2px);

				html[dir='rtl'] &
				{
					.margin-left-right(2px, 0);
				}
			}

			ul.dynamic-filters
			{
				.margin-left-right(15px, 0);

				html[dir='rtl'] &
				{
					.margin-left-right(0, 15px);
				}
			}
		}

		&.right-container
		{
			float: right;

			html[dir='rtl'] &
			{
				float: left;
			}

			a.instant-caption
			{
				.margin-left-right(2px, 0);

				html[dir='rtl'] &
				{
					.margin-left-right(0, 2px);
				}
			}
		}
	}

	.dynamic-filters
	{
		margin: 0;
		padding: 0;
		list-style: none;
		display: inline;

		li
		{
			vertical-align: bottom;
			display: inline;
		}
	}
}

.search-by-url-title
{
	font: bold 1em Arial;
	word-wrap: break-word;
	color: #222;
	text-decoration: none;
}

.search-by-url-subtitle
{
	font: italic 8pt Arial;
	word-wrap: break-word;
	color: #222;
}

div.block-all-results
{
	display: inline-block;
	margin-bottom: 14px;
	font-size: 12px;

	a.block-all-results
	{
		color: black;
		text-decoration: none;
	}

	a, img, span
	{
		vertical-align: middle;
	}
}

div.block-results
{
	display: inline-block;

	a.block-result
	{
		color: black;
		text-decoration: none;
	}
}

.block-message
{
	color: #ff0000;
	display: none;
}

.block-message-delimeter
{
	display: none;
}

.blocked-result
{
	&.block-all-results
	{
		.block-message, .block-message-delimeter
		{
			display: inline;
		}

		img.block-all-results
		{
			display: none;
		}

		a.block-all-results
		{
			text-decoration: underline;
		}
	}

	&.search-by-url-collapsed-result
	{
		div.search-by-url-result
		{
			div.search-by-url-left
			{
				a.search-by-url-title
				{
					color: #c0c0c0;
				}

				span.search-by-url-subtitle
				{
					color: #c0c0c0;
				}
			}

			div.search-by-url-right
			{
				a.search-by-url-value
				{
					color: #c0c0c0;
				}
			}
		}

		div.search-by-url-buttons
		{
			.block-message, .block-message-delimeter
			{
				display: inline;
			}

			img.block-result
			{
				display: none;
			}

			a.block-result
			{
				text-decoration: underline;
			}
		}
	}
}

div.country-search-results, div.link-search-results
{
	margin-bottom: 10px;

	ul
	{
		list-style-type: none;
		padding: 0;
		margin: 10px 0 0 0;

		li
		{
			margin: 0 21px 10px 0;
			display: inline-block;
			text-align: center;
			vertical-align: top;

			a
			{
				display: inline-block;
				width: 100%;
				text-decoration: none;
				color: #8c8c8c;
				font-size: 9pt;

				&:hover
				{
					color: @accent-color;

					img
					{
						border-color: @accent-color;
						opacity: 1;
					}
				}

				img
				{
					display: block;
					width: 90px;
					height: 60px;
					border: 1px solid #f0f0f0;
					opacity: 0.8;
				}

				span
				{
					display: inline-block;
					width: 90px;
				}
			}
		}
	}
}

div.link-search-results
{
	.logo
	{
		background-image: url(/Img/v2/atlas/default-datasource.png);
		background-size: 90px 60px;
		height: 60px;
		width: 90px;
		border: solid 1px #f0f0f0;

		div
		{
			background-size: 90px 60px;
			height: 60px;
			width: 90px;
		}
	}

	a:hover .logo
	{
		border-color: @accent-color;
	}

	p
	{
		margin: 0;
		text-align: left;
	}

	.container
	{
		float: left;
	}

	.description
	{
		margin-left: 120px;
		font-size: 0.8em;
	}

	.source-button
	{
		padding: 3px;
	}
}

div.list-search-results
{
	div.list-result-items
	{
		margin-top: 5px;
		margin-bottom: 15px;

		div.list-result-item
		{
			a, a:visited
			{
				color: #1a3c58;
				font-family: @text-font;
				font-size: 1em;
				font-style: normal;
			}
		}
	}
}

div.search-by-url-result-item
{
	position: relative;
	margin-bottom: 30px;
	padding-left: 0;
	padding-top: 7px;
	clear: left;

	hr
	{
		margin: 6px 9px 6px 0;
	}

	div.search-by-url-result
	{
		margin-right: 10px;

		& > div
		{
			margin-bottom: 5px;
			display: table;
			width: 100%;

			.search-by-url-left
			{
				display: table-cell;
			}

			.search-by-url-right
			{
				display: table-cell;
				vertical-align: middle;

				.search-by-url-value
				{
					float: right;
					font-size: 14pt;
					font-family: Arial;
					font-weight: bold;
					color: #222;
				}

				.search-by-url-move
				{
					float: right;
					margin-left: 5px;
				}
			}
		}
	}

	div.search-by-url-preview
	{
		div.search-by-url-preview-host
		{
			position: relative;
			left: -14px;
			margin-right: -7px;
		}

		div.search-by-url-source
		{
			text-align: center;
			margin-right: 10px;
		}
	}

	div.search-by-url-buttons
	{
		font-size: 12px;
		margin-right: 9px;

		a, img, span
		{
			vertical-align: middle;
		}

		div.voting
		{
			display: inline-block;
			float: right;
		}
	}

	a.more
	{
		color: black;
		text-decoration: none;
	}

	.add-to-gadgetbin
	{
		display: none;
	}
}

div.tag-result-item
{
	position: relative;

	html[dir='rtl'] &
	{
		.padding-left-right(0px, 21px);
	}

	div.grid-view
	{
		li
		{
			display: inline-block;
			position: relative;
			margin-left: 30px;
			margin-bottom: 15px;
			vertical-align: top;

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

				html[dir='rtl'] &
				{
					margin-right: 0px;
				}
			}

			html[dir='rtl'] &
			{
				.margin-left-right(0px, 30px);
			}
		}
	}
}

.search-show-more-results-button, #show-more-single-results
{
	max-width: 910px;

	&.wide-more
	{
		max-width: initial;
	}

	span
	{
		font-size: 1em;
		font-weight: bold;
		display: block;
		margin-left: auto;
		margin-right: auto;
		max-width: 26%;
		text-decoration: none;
		text-align: center;
		padding: 10px 20px 10px 20px;
		cursor: pointer;
		border-radius: 3px;
		font-family: 'PT Sans', Trebuchet MS;
		margin-bottom: 40px;
	}
}

#search-show-no-relevant-results
{
	font: bold 1em @title-font;
	color: @accent-color;
	text-decoration: underline;
	cursor: pointer;
}

div.search-result-item
{
	position: relative;
	padding-bottom: 30px;
	padding-top: 7px;
	margin-left: -15px;
	padding-left: 15px;
	margin-right: -15px;
	padding-right: 15px;

	&.grouped-dataset-content
	{
		.search-result-item
		{
			padding-bottom: 20px;

			.contrast-small-button &
			{
				padding-bottom: 0;
			}
		}

		&.active
		{
			padding-top: 7px;
			padding-bottom: 0px;
			margin-bottom: 0px;
		}

		div.grouped-dataset
		{
			&.active
			{
				padding: 0px 15px;
				background-color: #f9f9f9;
				margin-left: -15px;
				margin-right: -15px;
				margin-bottom: 15px;
			}

			div.relevant-search-visualizations
			{
				.group-more-button
				{
					background-color: #f0f0f0;
					color: @accent-color;
					padding: 10px;
					font-size: 11pt;
					font-weight: bold;
					text-decoration: none;
					margin: 0px;
					cursor: pointer;
					border-radius: 3px;
					font-family: @title-font;

					span
					{
						.margin-left-right(0, 5px);

						html[dir='rtl'] &
						{
							.margin-left-right(5px, 0);
						}
					}

					.contrast-small-button &
					{
						float: right;
						font-size: 10pt;
						background-color: transparent;
						padding: 0;
						position: relative;
						top: -15px;
						font-weight: normal;
						color: #0000cc;

						html[dir='rtl'] &
						{
							float: left;
						}

						span
						{
							border-bottom: 1px dotted;
						}
					}
				}
			}
		}

		&.group-show-more
		{
			span.group-show-more
			{
				display: inline-block;
			}

			span.group-hide-more
			{
				display: none;
			}

			div.grouped-dataset-contents
			{
				display: none;
			}
		}

		&.group-hide-more
		{
			span.group-show-more
			{
				display: none;
			}

			span.group-hide-more
			{
				margin-bottom: 20px;
				display: inline-block;
			}

			div.grouped-dataset-contents
			{
				display: block;
			}
		}

		&.group-no-more.group-show-more
		{
			div.relevant-search-visualizations
			{
				display: none;
			}

			div.grouped-dataset-contents
			{
				display: none;
			}
		}

		&.group-no-more.group-hide-more
		{
			div.relevant-search-visualizations
			{
				display: none;
			}

			div.grouped-dataset-contents
			{
				display: none;
			}
		}
	}

	div#atlas-result-item
	{
		overflow: hidden;
		min-width: 910px;
		.margin-left-right(-20px, -25px);

		div#chart
		{
			width: 100%;
		}

		html[dir='rtl'] &
		{
			margin-right: 0;
		}

		.premium#atlas
		{
			.page-name
			{
				display: inline-block;
				color: #777;
			}

			#buttons-container
			{
				display: inline-block;
			}
		}
	}

	div.page-image
	{
		width: 180px;
		height: 110px;
		background: url(/img/v2/shared/page.png) #FFFFFF no-repeat center;
		border: 1px solid #c0c0c0;
		float: left;
		vertical-align: top;

		html[dir='rtl'] &
		{
			float: right;
		}
	}

	div.presentation-image
	{
		width: 180px;
		height: 110px;
		background: url(/img/v2/shared/presentation.png) #FFFFFF no-repeat center;
		border: 1px solid #c0c0c0;
		float: left;
		vertical-align: top;

		html[dir='rtl'] &
		{
			float: right;
		}
	}

	div.page-image, div.presentation-image
	{
		&:hover
		{
			box-shadow: 0px 0px 5px 3px #00b4ff;
		}

		div
		{
			width: 180px;
			height: 110px;
		}
	}

	div.page-result-description
	{
		margin-left: 10px;
		width: 430px;
		float: left;
		vertical-align: top;

		html[dir='rtl'] &
		{
			float: right;
			.margin-left-right(0px, 10px);
		}
	}

	div.datapoints-result-values
	{
		float: left;
		height: 220px;
		margin-right: 30px;
		text-align: center;
		overflow: visible;

		html[dir='rtl'] &
		{
			float: right;
		}

		div.datapoints-result-last-value
		{
			a
			{
				font-size: 24pt;
				text-decoration: none;
			}
		}

		div.datapoints-result-unit
		{
			font-size: 9pt;
		}

		div.datapoints-result-change
		{
			font-size: 16pt;
		}

		div.datapoints-result-change-year
		{
			font-size: 9pt;
		}
	}

	div.datapoints-result-preview
	{
		float: right;

		html[dir='rtl'] &
		{
			float: left;
		}

		div.datapoints-result-preview-host
		{
			height: 200px;
		}

		div.datapoints-result-source
		{
			text-align: center;
		}
	}

	.small-img-background-position(@xposition)
	{
		background-position: -@xposition*30px 0;
	}

	div.switch-gadget
	{
		margin-right: 12px;

		html[dir='rtl'] &
		{
			.margin-left-right(12px, 0);
		}

		a
		{
			height: 30px;
			width: 30px;
			background-image: url('/img/v2/dsbrowser/smaller-gadget-images-5.png?v=1');
			display: inline-block;
			cursor: pointer;
			background-color: white;
			margin-top: 4px;
			margin-bottom: 1px;

			&.active
			{
				background-color: #e5f1fa;
			}

			&.disable
			{
				filter: alpha(opacity=30);
				opacity: 0.3;
				cursor: default;
			}

			&[data-gadget-type="line"]
			{
				.small-img-background-position(0);
			}

			&[data-gadget-type="infocard"]
			{
				.small-img-background-position(19);
			}

			&[data-gadget-type="table"]
			{
				.small-img-background-position(11);
			}

			&[data-gadget-type="ranking"]
			{
				.small-img-background-position(12);
			}

			&[data-gadget-type="map"]
			{
				.small-img-background-position(9);
			}
		}
	}

	div.search-result-preview
	{
		a.ui-button
		{
			padding: 4px 12px;

			&.timeseries-browse
			{
				margin-left: 17px;
				margin-top: 5px;

				html[dir='rtl'] &
				{
					.margin-left-right(0px, 17px);
				}
			}
		}
	}

	div.search-result-preview-host
	{
		position: relative;
		width: 100%;
		height: 200px;

		&.one-value
		{
			&.line
			{
				height: 300px;
			}

			&.one-timeseries
			{
				height: 210px;
			}
		}
	}

	&.premium div.search-result-preview,
	&.premium-open div.search-result-preview
	{
		position: relative;

		.preview-helper
		{
			top: 0;
			left: 0;
			right: 0;
			bottom: 20px;
			position: absolute;
			z-index: 3;
		}

		div.search-result-preview-host
		{
			filter: gray;
			filter: grayscale(100%);
		}

		.add-to-gadgetbin
		{
			display: none;
		}
	}

	div.dataset-result-metadata
	{
		margin-top: 3px;

		table
		{
			.metadata-value
			{
				width: 170px;
				vertical-align: top;
				padding-right: 10px;

				&.uploaded-by
				{
					display: none;
				}

				&.dataset-date-range
				{
					width: 280px;
				}
			}

			.metadata-value-source
			{
				width: inherit;
				vertical-align: top;
				padding-right: 10px;
			}
		}
	}

	div.dataset-result-description
	{
		margin-top: 8px;

		span
		{
			word-wrap: break-word;
		}
	}

	div.search-view
	{
		div.search-view-compact
		{
			width: 210px;
		}
	}

	div.search-timeseries
	{
		div.same-title-top
		{
			height: 40px;

			div.header
			{
				float: left;

				html[dir='rtl'] &
				{
					float: right;
				}
			}

			div.filter
			{
				float: right;
				margin-top: 1em;
				height: 23px;
				vertical-align: bottom;

				html[dir='rtl'] &
				{
					float: left;
				}

				div
				{
					vertical-align: middle;
				}

					div.sources
					{
						display: inline-block;

						span
						{
							color: black;
							font-family: @text-font;
							font-size: 14px;
						}

						select.datasets
						{
							margin-right: 6px;
							max-width: 600px;

							html[dir='rtl'] &
							{
								.margin-left-right(6px, 0);
							}
						}
					}

					div.search-frequency
					{
						display: inline-block;

						div.time-frequency
						{
							display: inline-block;

							div.time-frequency
							{
								margin-right: 10px;
								margin-bottom: 4px;

								label
								{
									html[dir='rtl'] &
									{
										direction: rtl;
										unicode-bidi: embed;
									}
								}
							}
						}
					}
			}
		}

		div.one-different-dimension-top
		{
			height: 35px;

			div.header
			{
				float: left;

				html[dir='rtl'] &
				{
					float: right;
				}
			}

			div.filter
			{
				float: right;

				html[dir='rtl'] &
				{
					float: left;
				}
			}
		}
	}

	&.one-timeseries-result
	{
		&.two
		{
			div.search-timeseries
			{
				display: inline-block;
				width: 450px;

				&:first-of-type
				{
					margin-right: 5px;
				}
			}
		}
	}

	&.dataset-content
	{
		div.dataset-content-top
		{
			height: 35px;

			div.header
			{
				float: left;

				html[dir='rtl'] &
				{
					float: right;
				}
			}

			div.filter
			{
				float: right;

				html[dir='rtl'] &
				{
					float: left;
				}

				div.search-frequency
				{
					display: inline-block;
					vertical-align: top;
					margin-top: 10px;

					div.time-frequency
					{
						margin-right: 10px;
						margin-bottom: 4px;

						label
						{
							html[dir='rtl'] &
							{
								direction: rtl;
								unicode-bidi: embed;
							}
						}
					}
				}

				div.switch-gadget
				{
					display: inline-block;
				}
			}

			.add-to-gadgetbin
			{
				float: right;
				margin: 8px 2px;

				html[dir=rtl] &
				{
					float: left;
				}
			}
		}
	}

	&.partner-content
	{
		.partner-teaser
		{
			position: absolute;
			top: -20px;
			left: -10px;

			html[dir='rtl'] &
			{
				left: auto;
				right: -10px;
			}

			display: inline;
			text-transform: uppercase;
			font-weight: bold;
			background-color: #f0f9fe;
			padding: 10px 20px;
		}

		img.partner-logo
		{
			display: inline-block;
			vertical-align: top;
			width: 15%;
			min-width: 160px;
			max-width: 320px;
			margin-top: 30px;
			.margin-left-right(0, 30px);

			html[dir='rtl'] &
			{
				.margin-left-right(30px, 0);
			}
		}

		.search-result-title
		{
			color: @accent-color;
			font-size: 1.125em;
			font-weight: bold;
			margin-top: 0;
			margin-bottom: 5px;
		}

		.dataset-content-top
		{
			position: relative;
			display: inline-block;
			width: 77%;
			min-height: 150px;
		}

		.dataset-result-content
		{
			display: inline-block;
			position: absolute;
			width: 70%;
		}

		.dataset-result-description
		{
			display: inline-block;
			margin-left: 71%;
			margin-top: 0;
			font-size: 0.85em;

			html[dir=rtl] &
			{
				margin-left: initial;
				margin-right: 71%;
			}

			p
			{
				margin: 1px;
			}

			.morecontent
			{
				display: none;
			}

			.morelink
			{
				display: block;
				user-select: none;
			}
		}

		a.ui-button.lead-button
		{
			display: block;
			width: 110px;
			margin: auto;
			margin-top: 20px;
			padding: 8px 24px;
			border-radius: 2px;
			background: #f0f0f0;
			text-decoration: none;
			color: @accent-color;
			font-weight: bold;
			font-size: 1.125em;
		}

		table.partner-data
		{
			white-space: nowrap;
			font-family: @title-font;

			td
			{
				padding: 12px 0 12px 0;
				border: none;

				&.name
				{
					max-width: 260px;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 0.95em;
					.padding-left-right(0, 10px);

					html[dir=rtl] &
					{
						.padding-left-right(10px, 0);
					}

					&.region
					{
						background-repeat: no-repeat;
						background-size: 30px 20px;
						.padding-left-right(50px, 0);
						background-position: left center;

						html[dir=rtl] &
						{
							.padding-left-right(0, 50px);
							background-position: right center;
						}
					}
				}

				&.value
				{
					max-width: 200px;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 1.3em;
					font-weight: bold;
					color: #383838;
					padding: 0 0;

					span
					{
						.margin-left-right(10px, 0);

						html[dir='rtl'] &
						{
							.margin-left-right(0, 10px);
						}

						font-size: 0.65em;
						font-weight: normal;
						color: #8c8c8c;
					}
				}
			}
		}
	}

	&.concept-result
	{
		h1
		{
			font-family: @title-font;
			font-size: 1.5em;
		}

		h3
		{
			font-family: @title-font;
		}

		.cards
		{
			height: 100px;
			margin-top: 1em;
			display: none;
		}

		.widget
		{
			padding: 0;
			font-family: @title-font;
			font-size: 1.5em;
			display: none;

			.value
			{
				font-size: 1.8em;
				font-weight: bold;
			}

			ul
			{
				padding: 0;
				font-size: .55em;
				list-style: none;
				margin: 0 0 1em;

				li
				{
					display: inline;
					color: #8c8c8c;
				}
			}
		}

		table.rankings
		{
			width: 100%;
			margin-top: 1.5em;
			font-family: @title-font;

			&.hidden
			{
				display: none;
			}

			caption
			{
				font: bold 1.2em @title-font;
				text-align: left;
				border-bottom: 1px solid #c8c8c8;
				padding-bottom: .5em;

				em
				{
					vertical-align: middle;
					margin: 0 10px;
					display: inline-block;
					width: 7px;
					height: 17px;
					background-image: url('/img/v2/dsbrowser/arrow-filter.png');
					background-repeat: no-repeat;
				}

				span
				{
					cursor: pointer;
				}

				.next
				{
					opacity: .3;
				}

				h4
				{
					display: inline;
				}
			}

			tr.data-row
			{
				cursor: pointer;

				&:hover
				{
					background: #f4f4f4;
				}
			}

			tr.chart
			{
				display: none;
			}

			td
			{
				padding: 15px 0 15px 0;
				border-bottom: 1px solid #f4f4f4;

				&.name
				{
					width: 42%;
					padding-left: 10px;
					font-size: .9em;

					&.region
					{
						.padding-left-right(40px, 0);
						background-repeat: no-repeat;
						background-size: 30px 20px;
						background-position: left center;

						html[dir=rtl] &
						{
							.padding-left-right(0, 40px);
							background-position: right center;
						}
					}
				}

				&.value
				{
					font-size: 16pt;
					font-weight: bold;
					color: #383838;
					padding: 5px 0;
					width: 58%;

					span
					{
						.margin-left-right(10px, 0);

						html[dir=rtl] &
						{
							.margin-left-right(10px, 0);
						}

						font-size: 10pt;
						font-weight: normal;
						color: #8c8c8c;
					}
				}

				&.more
				{
					padding-right: 10px;

					a
					{
						text-decoration: none;
						font-size: .9em;

						&:hover
						{
							text-decoration: underline;
							color: @accent-color;
						}
					}
				}
			}

			&.premium
			{
				.external-link
				{
					color: #777 !important;
					text-decoration: none;

					.fa.fa-lock
					{
						display: inline;
					}
				}

				tr.chart
				{
					filter: gray;
					filter: grayscale(100%);

					td
					{
						position: relative;

						.preview-helper
						{
							width: 100%;
							position: absolute;
							z-index: 3;
							top: 15px;
							bottom: 15px;
						}
					}
				}
			}

				&.premium .external-link .fa.fa-lock
				{
					display: inline;
				}
		}

		.add-to-gadgetbin
		{
			float: right;
			position: relative;
			z-index: 2;

			html[dir=rtl] &
			{
				float: left;
			}
		}

		.gadgetbin-column
		{
			position: relative;

			.add-to-gadgetbin
			{
				position: absolute;
				top: .2em;
				right: 5px;

				html[dir=rtl] &
				{
					right: auto;
					left: 5px;
				}
			}
		}
	}

	&.premium
	{
		div.search-frequency,
		div.switch-gadget
		{
			filter: gray;
			filter: grayscale(100%);
		}

		.external-link
		{
			color: #777 !important;
			text-decoration: none;

			.fa.fa-lock
			{
				display: inline;
			}
		}
	}

	&.premium-open
	{
		div.search-frequency,
		div.switch-gadget
		{
			filter: gray;
			filter: grayscale(100%);
		}

		.external-link .fa.fa-lock
		{
			display: inline;
		}

		.add-to-gadgetbin
		{
			display: none;
		}
	}
}

div.tag-result-item,
div.search-result-item
{
	a.tag-result-title,
	a.search-result-title,
	a.page-result-title,
	a.dataset-result-title,
	a.atlas-result-title,
	h3.gadget-title,
	a.search-one-result-title
	{
		font: bold 1em @title-font;
		color: @accent-color;
		text-decoration: none;

		.contrast-small-button &
		{
			font: bold 1.125em @title-font;
			color: #00c;
		}

		&.active
		{
			color: black;
			text-decoration: none;
		}

		&:hover
		{
			text-decoration: underline;
		}

		span.search-result-arrow
		{
			display: inline-block;
			width: 10px;
			height: 10px;
			margin-left: 5px;
			background: url('/img/v4/site-search-bullet.png') no-repeat;
		}

		&.active
		{
			span.search-result-arrow
			{
				background: url('/img/v4/site-search-bullet-active.png') no-repeat;
			}
		}
	}

	.contrast-small-button &.premium .external-link
	{
		color: #777;

		&.dataset-result-title
		{
			color: @accent-color;
		}
	}
}

div.tag-result-item,
div.search-result-item,
div.single-series-chart
{
	div.search-result-components
	{
		font-family: @text-font;
		font-size: 13px;
		font-style: normal;
		margin-top: 0px;
		clear: both;

		a
		{
			font-family: @text-font;
			font-size: 13px;
			font-style: normal;
			text-decoration: underline;
			border-bottom: none;
		}

		span
		{
			display: block;
		}
	}
}

div#named-entity-dashboard
{
	div#dashboard-buttons
	{
		text-align: left;

		html[dir='rtl'] &
		{
			text-align: right;
		}

		a.button
		{
			margin-right: 10px;
			margin-bottom: 5px;
			margin-top: 5px;
			padding: 12px 28px;
			font-size: 16px;
			font-family: @title-font;
			background: @accent-color;
			color: white;
			text-decoration: none;
			box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3);
			border-radius: 2px;
			text-transform: uppercase;
			font-weight: normal;
			display: inline-block;

			&:first-child
			{
				html[dir='rtl'] &
				{
					margin-right: 0px;
				}
			}
			}
		}

	h1#page-header-title
	{
		font-family: @title-font;
		font-size: 24px;
		font-weight: normal;
	}

	div#page-description
	{
		margin: 0;
	}
}

/*TODO Why we need styles for .embed-dialog in each component*/
div.embed-dialog
{
	display: none;

	div
	{
		border-top: 1px solid #AAAAAA;
		padding-top: 8px;
	}

	textarea
	{
		resize: none;
		width: 370px;
		height: 70px;
		margin: 8px 0px;
	}
}

// Ontology dialog
div.search-ontologyitem
{
	div.search-ontologyitem-query
	{
		a
		{
			color: #1a3c58;
			text-decoration: none;
			border-bottom: 1px dashed #1a3c58;

			&.selected
			{
				background-color: yellow;
			}
		}
	}
}

#search-dataalert-subscribe
{
	padding: 10px;
	font-family: @title-font;
	font-size: 1em;
	margin: 10px auto 20px;
	min-height: 70px;
	background-color: #eff8e5;

	span#dataalert-subscribe, span#dataalert-save
	{
		padding: 6px 32px;
		font-size: 10.5pt;
		font-weight: bold;
		display: inline-block;
	}

	p
	{
		font-weight: bold;
		margin: 7px auto 13px;
	}

	#step1
	{
		text-align: center;

		p span
		{
			color: @accent-color;
		}
	}

	#step2
	{
		text-align: center;
		display: none;

		#dataalert-form
		{
			display: inline-block;

			.data-alert.form
			{
				float: left;
				margin-right: 10px;
				line-height: 24px;

				html[dir='rtl'] &
				{
					float: right;
				}

				.alert-label
				{
					font-size: 10pt;
					margin-right: 5px;

					html[dir='rtl'] &
					{
						.margin-left-right(5px, 0);
					}
				}

				.alert-select
				{
					font-size: 10pt;
					margin-right: 10px;

					html[dir='rtl'] &
					{
						.margin-left-right(10px, 0);
					}
				}
			}
		}
	}

	#step3
	{
		display: none;
		text-align: center;

		h3
		{
			margin: 7px auto;
		}

		p
		{
			font-weight: normal;

			a
			{
				color: @accent-color;
			}
		}
	}
}

div.dataset-result-keyword-search-info-caption
{
	font: bold 15pt @title-font;
	padding: 0 0 15px 0;
}

span#more-keyword-search-datasets
{
	background-color: @accent-color;
	color: white;
	padding: 8px;
	font-size: 10pt;
	font-weight: bold;
	text-decoration: none;
	margin: 0 0 20px 0;
	display: inline-block;
	cursor: pointer;
	border-radius: 3px;
	font-family: 'PT Sans', Trebuchet MS;
}

div#site-main.search
{
	overflow: hidden;
}

#search-results-with-filters
{
	display: inline-block;

	#search-results-caption
	{
		display: none;
	}

	&:after
	{
		content: " ";
		display: block;
		height: 0;
		clear: both;
	}

	width: 100%;

	.with-sidebar &
	{
		width: 76%;
	}

	.search-results
	{

		table.search-timeseries
		{
			font-size: 11pt;
			text-align: left;
			margin-bottom: 20px;

			html[dir=rtl] & td,
			html[dir=rtl] & th
			{
				text-align: right;
			}

			tbody
			{
				tr
				{
					&:nth-child(2n+1)
					{
						background-color: #f9f9f9;
					}

					&:hover
					{
						background-color: #f9f9f9;
						cursor: pointer;

						td.gadgetbin-column
						{
							.add-to-gadgetbin
							{
								display: inline-block;
							}
						}
					}

					td
					{
						padding: 8px 3px;
						vertical-align: top;

						a
						{
							color: @accent-color;
						}

						.single-series-chart
						{
							position: absolute;
							padding: 0 0 0;
							z-index: 1;

							.single-chart-container
							{
								height: 200px;
							}
						}

						&.gadgetbin-column
						{
							position: relative;
							padding: 0 12px;

							.add-to-gadgetbin
							{
								padding: 0;
								display: none;
								position: absolute;
								top: .2em;
								right: 5px;

								&.added
								{
									display: inline-block;
								}

								html[dir=rtl] &
								{
									right: auto;
									left: 5px;
								}
							}
						}
					}

					&.premium-open td.gadgetbin-column, &.premium-open:hover td.gadgetbin-column
					{
						.add-to-gadgetbin
						{
							display: none;
						}
					}

					&.premium
					{
						td
						{
							.preview-helper
							{
								width: 100%;
								position: absolute;
								z-index: 3;
								top: 10px;
								bottom: 0;
							}

							.single-chart-container
							{
								filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
								filter: gray;
								filter: grayscale(100%);
							}

							&.gadgetbin-column .add-to-gadgetbin
							{
								display: none;
							}
						}
					}

					&.expanded
					{
						background-color: transparent;

						.external-link.result-url
						{
							position: absolute;
							font-weight: bold;
							box-sizing: border-box;
							.padding-left-right(0, 90px);

							i
							{
								left: -16px !important;
								top: 3px !important;
							}

							html[dir='rtl'] &
							{
								text-align: right;
								right: 0;
								.padding-left-right(90px, 0);

								i
								{
									left: -16px !important;
									top: 3px !important;
								}
							}
						}

						td:first-child
						{
							background: white;
						}

						td:nth-child(n+2)
						{
							visibility: hidden;

							&.gadgetbin-column
							{
								visibility: initial;
							}
						}

						h2
						{
							margin: 0;
						}

						.search-results-premium-popup.with-meta
						{
							left: 201px;
							top: 20px;

							html[dir='rtl'] &
							{
								left: initial;
								right: 201px;
							}
						}

						.dataset-attributes
						{
							display: block;
							list-style: none;
							padding: 0;
							margin: 0 0 20px;

							li
							{
								display: inline-block;
								font-size: 12px;
								margin-right: 50px;
								color: gray;

								a
								{
									color: inherit;
								}

								html[dir='rtl'] &
								{
									.margin-left-right(50px, 0);
									float: right;
								}
							}
						}

						.metadata
						{
							display: none;
							width: 200px;
							float: left;
							padding: 0 15px 10px 0;
							height: 200px;
							border-right: 1px solid #ccc;
							box-sizing: border-box;
							overflow: hidden;

							h3
							{
								text-transform: uppercase;
								margin: 0 0 10px 0;
							}

							ul
							{
								list-style: none;
								padding: 0;
								margin: 0;
								font-size: 14px;
								height: 170px;
								overflow: hidden;
							}

							li
							{
								margin-bottom: 10px;
							}

							span
							{
								display: block;
								font-weight: bold;
							}

							html[dir='rtl'] &
							{
								float: right;
								padding: 0 0 10px 15px;
								border-left: 1px solid #ccc;
								border-right: 0;
								text-align: right;
							}
						}

						.single-chart-container
						{
							float: left;
						}
					}
				}
			}

			.premium .external-link
			{
				color: #777;
				text-decoration: none;

				.fa.fa-lock
				{
					display: inline;
				}
			}

			.premium-open .external-link .fa.fa-lock
			{
				display: inline;
			}
		}
	}
}

#search-sidebar
{
	float: right;
	position: relative;
	z-index: 2;

	html[dir=rtl] &
	{
		float: left;
	}

	min-height: 224px;
	background-color: white;
	margin-top: 7px;

	.sidebar-overlap &
	{
		border-left: 1px solid rgba(0, 0, 0, .15);
		box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, .175);
	}

	width: 0px;
	margin-right: -16px;

	.with-sidebar &
	{
		width: 24%;
		margin-right: -15px;
	}

	#search-sidebar-inner
	{
		margin-top: -7px;
		padding: 0 15px 15px 15px;
		display: none;

		.with-sidebar &
		{
			display: block;
		}
	}

	.toggler
	{
		font-size: 16px;
		background-color: white;
		border-top-left-radius: 4px;
		border-bottom-left-radius: 4px;
		box-shadow: -2px 0px 6px -1px rgba(0, 0, 0, .175);
		left: -22px;
		border: 1px solid rgba(0, 0, 0, .15);
		border-right: 1px solid white;
		width: 20px;
		height: 48px;
		position: absolute;
		top: 120px;
		cursor: pointer;
		text-align: center;
		display: none;

		.sidebar-overlap &
		{
			display: block;
		}

		span
		{
			margin: 15px 2px;
		}

		.fa
		{
			color: #222;
			position: relative;
			top: 1px;
			display: inline-block;
			font-style: normal;
			font-weight: 400;
			line-height: 1;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;

			&.fa-chevron-left
			{
				display: block;

				.with-sidebar &
				{
					display: none;
				}
			}

			&.fa-chevron-right
			{
				display: none;

				.with-sidebar &
				{
					display: block;
				}
			}
		}
	}
}

#back-to-top
{
	z-index: 2;
}

#search-facet-filters
{
	margin-top: 40px;
	padding: 0 10px;
	vertical-align: top;
	background-color: #f6f6f6;
	width: 100%;
	box-sizing: border-box;
	position: relative;
	display: inline-block;
	font-family: @title-font;
	font-size: 10pt;

	#reset-facet-filters
	{
		float: right;
		text-decoration: underline;
		color: @accent-color;
		top: -40px;
		position: relative;
		left: -80px;

		html[dir=rtl] &
		{
			float: left;
			left: auto;
			right: -80px;
		}
	}

	.search-filters-container
	{
		li
		{
			display: inline-block;
		}
	}

	.filter-item
	{
		margin-top: 1.33em;

		&.reset
		{
			margin-top: .33em;
		}

		h4
		{
			margin-bottom: 0.2em;
		}

		ul
		{
			list-style: none;
			padding-left: 0;
			padding-right: 0;
			margin-top: 0;

			input[type="button"], input[type="button"]:focus, input[type="button"]:active
			{
				/* Remove all decorations to look like normal text */
				background: none;
				border: none;
				display: inline;
				margin: 0;
				padding: 0;
				outline: none;
				outline-offset: 0;
				/* Additional styles to look like a link */
				cursor: pointer;
				text-decoration: underline;
				font: normal 10pt @title-font;
				color: #222; /*@accent-color;*/
				text-decoration: none;
				text-align: inherit;
				white-space: normal;

				&.active
				{
					color: black;
					text-decoration: none;
				}

				&:hover
				{
					/*text-decoration: underline;*/
					color: @accent-color;
				}

				&.selected
				{
					font-weight: bold;
					color: @accent-color;
				}
			}
				/* Remove extra space inside buttons in Firefox */
				input[type="button"]::-moz-focus-inner,
				button::-moz-focus-inner
				{
					border: none;
					padding: 0;
				}

			&.expanded li.more
			{
				display: list-item;
			}

			li
			{
				padding: .2em 0 .2em 1.33em;
				text-indent: -1.33em;

				&.more
				{
					display: none;
				}

				html[dir=rtl] &
				{
					padding-left: 0;
					padding-right: 1.33em;
				}

				&[data-level="1"]
				{
					padding-left: 2.33em;

					html[dir=rtl] &
					{
						padding-left: 0;
						padding-right: 2.33em;
					}
				}

				&[data-level="2"]
				{
					padding-left: 3.33em;

					html[dir=rtl] &
					{
						padding-left: 0;
						padding-right: 3.33em;
					}
				}

				&[data-level="3"]
				{
					padding-left: 4.33em;

					html[dir=rtl] &
					{
						padding-left: 0;
						padding-right: 4.33em;
					}
				}

				&[data-level="4"]
				{
					padding-left: 5.33em;

					html[dir=rtl] &
					{
						padding-left: 0;
						padding-right: 5.33em;
					}
				}

				input[type="button"].disabled, .disabled
				{
					&, &:hover, &:focus, &:active
					{
						opacity: .5;
						text-decoration: none;
						cursor: default;
						color: #222;
					}
				}

				label
				{
					&:hover, &.active
					{
						color: @accent-color;
					}

					&.queryRegions.active
					{
						color: #222;
						font-weight: normal;
					}

					&.active
					{
						font-weight: bold;
					}

					&.disabled
					{
						color: #222;
					}

					input[type="checkbox"]
					{
						vertical-align: middle;

						& + .checkmark
						{
							display: none;
						}
					}

					span
					{
						margin-left: 5px;
						font-size: 9pt;
						color: #929292;
					}
				}
			}
		}
	}
}

.tabs
{
	border-radius: 0;

	> ul
	{
		border: none;
		list-style: none;
		padding: 0;
		margin: 0;
		display: inline-block;
		vertical-align: top;
		line-height: 1.231;
		font: 10pt @title-font;
		float: right;

		html[dir='rtl'] &
		{
			float: left;
		}

		li
		{
			border: none;
			background: none;
			display: inline-block;
			vertical-align: baseline;
			float: none;
			position: inherit;
			margin: 0;

			&:first-child a
			{
				border-top-left-radius: 2px;
				border-bottom-left-radius: 2px;

				html[dir='rtl'] &
				{
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					border-top-right-radius: 2px;
					border-bottom-right-radius: 2px;
				}
			}

			&:last-child a
			{
				border-top-right-radius: 2px;
				border-bottom-right-radius: 2px;

				html[dir='rtl'] &
				{
					border-top-left-radius: 2px;
					border-bottom-left-radius: 2px;
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
				}
			}

			a
			{
				float: none;
				color: @accent-color;
				padding: 5px 1em;
				background-color: #e6e6e6;
				text-decoration: none;
				display: inline-block;
				line-height: normal;
				font: bold 1em @title-font;
			}

			&.active a
			{
				text-decoration: none;
				font-weight: bold;
				background-color: @accent-color;
				color: white;
			}
		}
	}

	> div
	{
		padding: 0;
	}
}

#search-training
{
	display: none;
	background: white;

	.container
	{
		overflow-y: auto;
		padding: 0.5em 0;
		max-height: 600px;
		width: 100%;
	}

	tr
	{
		&.not-found
		{
			td > *
			{
				opacity: .6;
			}
		}

		&.found
		{
			cursor: pointer;
		}

		&.selected
		{
			background: @accent-color;
			color: white;
		}

		th, td
		{
			padding: 0 8px;

			&.score, &.position
			{
				text-align: center;
				position: relative;
			}
		}

		.headerSortUp, .headerSortDown
		{
			background: none;
		}

		td.score .remove-result
		{
			display: none;
			opacity: 1;
			font-size: 1.5em;
			cursor: pointer;
		}

		&:hover
		{
			td.score
			{
				& > *
				{
					display: none;
				}

				& > .remove-result
				{
					display: inline-block;

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

.search-result-item.selected
{
	border: 2px solid @accent-color;
	border-radius: 3px;

	.search-result-item.selected &
	{
		border: none;
	}
}

.search-panel
{
	margin-top: 25px;
	background: white;

	.container
	{
		overflow-y: auto;
		padding: .5em 0;
	}

	.search-panel-header
	{
		min-height: 1px;
		margin-bottom: 1.5em;
		font: normal 10pt @title-font;

		#search-training&
		{
			margin-bottom: 2.5em;
		}

		.search-gain
		{
			display: block;
			float: left;

			html[dir='rtl'] &
			{
				float: right;
			}
		}

		label
		{
			input[type=checkbox]
			{
				vertical-align: -0.15em;
			}
		}
	}
}

.search-panel-button-link
{
	/* Remove all decorations to look like normal text */
	background: none;
	border: none;
	display: inline;
	margin: 0;
	padding: 0;
	outline: none;
	outline-offset: 0;
	/* Additional styles to look like a link */
	cursor: pointer;
	text-decoration: underline;
	font: normal 10pt @title-font;
	color: @accent-color;
	text-align: inherit;
	white-space: normal;

	&:hover
	{
		color: @accent-color;
	}

	display: block;
	margin-right: 0;
	margin-left: auto;

	html[dir='rtl'] &
	{
		margin-right: auto;
		margin-left: 0;
	}
}

#search-results-with-filters.wide-result
{
	div.instant-answer
	{
		&.left-container
		{
			max-width: 615px;
		}
	}
}

div.search-teaser.partner-content
{
	margin-left: 0;

	> div.title
	{
		display: none;
	}

	div.see-also
	{
		margin-top: 0;
		margin-bottom: 10px;
	}

	.content
	{
		border: 1px solid #d9edf8;
		clear: both;
		margin: 40px 0;
	}

	div.search-result-item
	{
		padding-bottom: 0;

		div.search-result-preview-host
		{
			height: initial;
		}
	}
}

.search-teaser
{
	.margin-left-right(-15px, 0);

	html[dir='rtl'] &
	{
		.margin-left-right(0, -15px);
	}

	.title
	{
		background-color: #f0f9fe;
		font-weight: bold;
		text-transform: uppercase;
		display: inline-block;
		padding: 10px 20px;
		cursor: pointer;

		&[data-type=instant]
		{
			cursor: default;
		}
	}

	.content
	{
		border-top: 1px solid #d9edf8;
		padding: 20px 25px;
	}

	.search-show-more-results-button
	{
		display: inline-block;

		span
		{
			max-width: none;
			padding: 8px 16px;
		}
	}

	#show-more-single-results
	{
		display: none;
	}

	.grouped-dataset .relevant-search-visualizations
	{
		display: none;
	}

	.search-result-components
	{
		display: none;
	}

	.dataset-result-description.dimensions-info
	{
		display: none;
	}
}

#search-teaser-instant,
#search-teaser-datasets,
#search-teaser-timeseries,
#search-teaser-visualizations
{
	a
	{
		color: @accent-color;
	}

	.search-show-more-results-button
	{
		span
		{
			margin-bottom: 20px;
		}
	}
}

#search-teaser-timeseries
{
	.search-timeseries tr
	{
		&:nth-child(2n+1)
		{
			background-color: #fff;
		}

		td, th
		{
			font-size: 0.9em;
		}
	}
}

.external-link .fa.fa-lock
{
	display: none;
}

.premium
{
	&.external-link
	{
		color: #777 !important;
		text-decoration: none;

		.fa.fa-lock
		{
			display: inline;
		}
	}
}

.premium-open.external-link .fa.fa-lock
{
	display: inline;

	.add-to-gadgetbin
	{
		display: none;
	}
}

.premium-content-filter
{
	.hide &
	{
		display: none;
	}

	width: 100%;
	background: #F0FAFC;
	padding: 15px 20px;
	font: bold 1em @title-font;
	height: 30px;
	overflow: hidden;
	margin: 20px 0 40px -15px;

	html[dir='rtl'] &
	{
		margin: 20px -15px 40px 0;
	}

	div
	{
		float: left;
		display: inline-block;
		font-size: 1.1em;
		margin-top: 3px;

		html[dir='rtl'] &
		{
			float: right;
		}
	}

	ul
	{
		display: inline-block;
		font-weight: normal;
		font-size: .8em;
		list-style: none;
		padding: 0;
		margin: 0;
		.margin-left-right(15px, 0);

		li
		{
			display: inline-block;
			text-align: center;
			border: 1px solid @accent-color;
			cursor: pointer;
			color: @accent-color;
			padding: 3px 5px;

			&:first-child
			{
				border-top-left-radius: 2px;
				border-bottom-left-radius: 2px;
				border-right-width: 0px;
			}

			&:last-child
			{
				border-top-right-radius: 2px;
				border-bottom-right-radius: 2px;
				border-left-width: 0px;
			}

			&.active
			{
				background: @accent-color;
				color: white;
			}

			html[dir='rtl'] &
			{
				&:first-child
				{
					border-top-right-radius: 2px;
					border-bottom-right-radius: 2px;
					border-left-width: 0;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					border-right-width: 1px;
				}

				&:last-child
				{
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
					border-left-width: 1px;
					border-top-left-radius: 2px;
					border-bottom-left-radius: 2px;
					border-right-width: 0;
				}
			}
		}

		html[dir='rtl'] &
		{
			padding: 0;
			.margin-left-right(0, 15px);
		}
	}

	.ui-button
	{
		background: #090;
		color: white;
		display: inline-block;
		float: right;
		padding: 5px 10px;
		text-decoration: none;
		.margin-left-right(0, 15px);
		border-radius: 2px;
		font-size: 1em;
		font-weight: bold;

		html[dir='rtl'] &
		{
			float: left;
		}
	}
}

.search-filters-container .sticky
{
	width: 100%;
	position: fixed;
	left: 0px;
	z-index: 4;
	top: 0px;
	padding: 0;
	box-sizing: border-box;
	border-bottom: 1px solid #ccc;

	&.hide
	{
		display: none;
	}

	.premium-content-filter
	{
		margin: 0;
		box-sizing: border-box;
		height: 60px;

		.ui-button
		{
			.margin-left-right(0, 0);

			html[dir='rtl'] &
			{
				.margin-left-right(0, 0);
			}
		}
	}
}

#search-results-premium-popup,
.search-results-premium-popup
{
	display: none;
	position: absolute;
	z-index: 10;
	font-family: @title-font;
	font-size: .9em;
	text-align: center;

	.content
	{
		background: white;
		border-radius: 2px;
		padding: 20px;
		box-shadow: 0px 0px 10px rgba(0,0,0,0.4);
		text-align: initial;

		html[dir='rtl'] &
		{
			text-align: right;
		}
	}

	span
	{
		display: block;
		font-weight: bold;
	}

	a
	{
		color: @accent-color;
	}

	.ui-button
	{
		margin-top: 15px;
		background: #090;
		color: white;
		display: block;
		padding: 5px 10px;
		text-decoration: none;
		border-radius: 2px;
		font-size: 1em;
		font-weight: bold;
	}

	.subscriber
	{
		margin-bottom: 0;
		max-width: 230px;

		span
		{
			display: inline;
			white-space: nowrap;
			font-weight: normal;
		}
	}

	&.timeseries-popup
	{
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		display: block;

		.content
		{
			width: 200px;
			margin-left: ~'calc(50% - 100px)';
			margin-top: 40px;

			.ui-button
			{
				color: white;
				&:visited
				{
					color: white;
			}
			}

			html[dir='rtl'] &
			{
				margin-right: ~'calc(50% - 100px)';
				margin-left: 0;
			}
		}
	}
}

.more-with-premium
{
	display: inline-block;
	font-size: .9em;
	padding: 0 1em;

	a
	{
		color: #090;
		font-weight: bold;

		&:visited
		{
			color: #090;
		}
	}

	&.light
	{
		font-weight: normal;
		font-size: .8em;

		.ui-button
		{
			float: none !important;
			color: white;
			&:visited
			{
				color: white;
			}
			margin-right: 0;
		}
	}
}

.remote-data-state
{
	text-align: center;
	position: relative;
	top: 50%;
	transform: translateY(-50%);

	p
	{
		margin: .5em;
	}

	.confirm-read-remote-data
	{
		margin-top: .8em;
		border-radius: 2px;
		font-size: 85%;
	}
}

.search span.add-to-gadgetbin
{
	display: inline-block;
	width: 28px;
	height: 28px;
	.hires('/Img/v6/favorites', 'png?v=1');
	background-size: cover;
	background-position: -28px 0;
	cursor: pointer;

	&.added
	{
		background-position: 0 0;
	}

	&.adding
	{
		background-image: none;
	}

	.premium &
	{
		display: none;
	}
}

#thumbnail-gadget
{
	position: absolute;
	left: 10000px;
	top: 0;
	width: 360px;
	height: 220px;

	html[dir='rtl'] &
	{
		left: auto;
		right: 10000px;
	}

	.loading
	{
		display: none;
	}
}

.with-premium#site-main
{
	.search-result-item
	{
		position: relative;
		.padding-left-right(25px, 15px);

		&.dataset-content
		{
			.padding-left-right(30px, 15px);

			.fa.fa-lock
			{
				left: 11px;
			}
		}

		.grouped-dataset-content &
		{
			.padding-left-right(15px, 15px);
		}

		html[dir='rtl'] &
		{
			.padding-left-right(15px, 25px);

			.grouped-dataset-content &
			{
				.padding-left-right(15px, 15px);
			}

			&.dataset-content
			{
				.padding-left-right(15px, 30px);

				.fa.fa-lock
				{
					left: initial;
					right: 11px;
				}
			}
		}

		.fa.fa-lock
		{
			position: absolute;
			left: 5px;
			top: 10px;

			html[dir='rtl'] &
			{
				left: initial;
				right: 5px;
			}
		}

		#atlas-result-item .fa.fa-lock
		{
			top: 24px;
			left: 3px;

			html[dir='rtl'] &
			{
				left: initial;
				right: 3px;
			}
		}
	}

	.search-teaser.timeseries .content
	{
		.padding-left-right(30px, 25px);

		html[dir='rtl'] &
		{
			.padding-left-right(25px, 30px);
		}

		.search-timeseries
		{
			.margin-left-right(0, 0);

			html[dir='rtl'] &
			{
				.margin-left-right(0, 0);
			}
		}
	}

	.search-teaser.datasets
	{
		.search-result-item
		{
			.padding-left-right(20px, 15px);

			.fa.fa-lock
			{
				left: 0;
			}

			html[dir='rtl'] &
			{
				.padding-left-right(15px, 20px);

				.fa.fa-lock
				{
					right: 0;
				}
			}
		}
	}

	.search-timeseries
	{
		.margin-left-right(10px, 0);

		html[dir='rtl'] &
		{
			.margin-left-right(0, 10px);
		}
	}
}

#search-results-with-filters .search-results table.search-timeseries tbody tr td:first-child
{
	position: relative;

	.fa.fa-lock
	{
		position: absolute;
		left: -15px;
		top: 10px;

		html[dir='rtl'] &
		{
			left: initial;
			right: -15px;
		}
	}
}

@left-right-margin: 47px;
@dropdown-width: 160px;

/*below search styles add restriction on widths of header/footer/site-main 
	so don't apply these to .v7-portal class & let portals enforce their own widths*/
#site-holder.search.v7
{
	background-color: @off-white;

	&, #site-header
	{
		width: 100%;
		min-width: 940px;
	}

	div#site-main.search
	{
		background: @off-white;
		box-shadow: none;
		width: inherit;
		padding: 0;
		margin: auto;

		div#site-search
		{
			background-color: #fff;
			padding: 20px 0 0 0;

			form
			{
				width: 940px;

				div.search-filters-container
				{
					div.filter-container
					{
						background-color: white;
					}
				}
			}
		}
	}

	#search-wrapper
	{
		.search-teaser
		{
			> *
			{
				max-width: 940px;
				margin-left: ~'calc((100% - 940px)/2)';

				html[dir="rtl"] &
				{
					margin-left: 0;
					margin-right: ~'calc((100% - 940px)/2)';
				}
			}

			&.instant
			{
				div.see-also.right-container
				{
					margin-right: ~'calc((100% - 940px)/2)';

					html[dir="rtl"] &
					{
						margin-right: 0;
						margin-left: ~'calc((100% - 940px)/2)';
					}
				}
			}

			&.timeseries, &.datasets
			{
				background: white;
			}
		}
	}

	.with-sidebar
	{
		#search-wrapper
		{
			width: 940px;
			margin-bottom: 20px;

			#search-sidebar
			{
				width: 220px;
				margin: 82px 0px 0px 15px;

				html[dir="rtl"] &
				{
					.margin-left-right( 0px; 15px);
				}
			}

			#home-content
			{
				width: 700px;
			}
		}
	}
	/*all premium styles below, doesn't apply to portals. Is this premium style still relevant?*/
	.with-premium
	{
		&#site-main
		{
			.search-timeseries
			{
				margin-left: 0;
				margin-right: 0;
			}

			.search-teaser.timeseries .content
			{
				padding-left: 0px;
				padding-right: 0px;
			}

			.search-result-item
			{
				#atlas-result-item, #named-entity-result-item
				{
					.margin-left-right(-15px; 0);

					html[dir='rtl'] &
					{
						.margin-left-right(5px; -15px);
					}

					.fa.fa-lock
					{
						top: 30px;
						left: 10px;

						html[dir='rtl'] &
						{
							left: auto;
							right: 15px;
						}
					}
				}

				&.concept-result, &.dataset-content, &.partner-content
				{
					.padding-left-right(10px; 15px);

					html[dir='rtl'] &
					{
						.padding-left-right(15px; 10px);
					}
				}
			}
		}
	}

	div.search-result-item div#atlas-result-item .premium#atlas .page-name
	{
		.padding-left-right(25px; 0);

		html[dir='rtl'] &
		{
			.padding-left-right(0; 30px);
		}
	}

	.with-premium#site-main
	{
		#search-sidebar
		{
			margin-top: 196px;
		}
	}

	div.sticky
	{
		.premium-content-filter
		{
			width: 100%;
		}
	}

	.more-with-premium, .premium-content-filter
	{
		font: normal 14px @title-font;

		a.ui-button
		{
			text-transform: uppercase;
			font: bold 14px @title-font;
			min-width: 185px;
			padding: 11px 10px;
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
			color: @charcoal-grey;

			&:visited
			{
				color: @charcoal-grey;
			}
		}
	}

	.more-with-premium
	{
		a.ui-button
		{
			.margin-left-right(5px; 5px);
		}
	}

	.premium-content-filter
	{
		background-color: @off-white;
		.margin-left-right(0, 0);
		width: ~"calc(100% - 30px)";
		padding: 15px 15px;

		> div
		{
			margin-top: -4px;
		}

		.premium-content-caption
		{
			text-transform: uppercase;
			font: normal 18px @title-font;
		}

		ul.buttons li
		{
			text-transform: uppercase;
			font: bold 16px @title-font;
			border: 1px solid @sky;
			color: @charcoal-grey;
			background-color: #ffffff;
			min-width: 33px;
			padding: 9px 10px;

			&.active
			{
				background-color: @accent-color;
				color: #ffffff;
			}
		}

		a.ui-button
		{
			text-transform: uppercase;
			font: bold 14px @title-font;
			width: 200px;
			padding: 11px 0;
			margin-top: -5px;
			box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
		}
	}

	.with-sidebar
	{

		.premium-content-filter
		{
			width: 885px;
		}

		div.sticky
		{
			.premium-content-filter
			{
				width: 100%;
			}
		}
	}
}

#site-holder.search.v7-portal
{
	div#site-main div#site-search
	{
		padding: 20px 10px 0px;

		form
		{
			width: 100%;
		}
	}

	#search-wrapper
	{
		padding: 0 10px;

		#home-content
		{
			background: none;
			padding: 0;
		}
	}

	.with-sidebar
	{
		#search-wrapper
		{
			#search-sidebar
			{
				width: 220px;
				margin: 82px 0px 0px 15px;

				html[dir="rtl"] &
				{
					.margin-left-right( 0px; 15px);
				}
			}

			#home-content
			{
				width: ~"calc(100% - 220px - 20px)";
				background: none;
				padding: 0;
			}
		}
	}
}

#site-holder.search.v7, #site-holder.search.v7-portal
{
	#full-search-results
	{
		margin-top: 0;
		padding: 0;
	}
	/*WTF is this*/
	/*div
	{
		width: ~"calc(100% - 230px)";
	}*/
	#search-results-with-filters
	{
		.search-results
		{
			.search-timeseries
			{
				div.search-results-premium-popup
				{
					div.content
					{
						padding: 20px;
						min-width: 260px;
						font: normal 13px @title-font;
						text-align: center;

						a.ui-button
						{
							background-color: @grass-green;
							color: @charcoal-grey;

							&:visited
							{
								color: @charcoal-grey;
							}
						}

						.subscriber
						{
							max-width: initial;
						}
					}
				}

				tbody tr td:first-child .fa.fa-lock
				{
					left: 4px;

					html[dir='rtl'] &
					{
						left: auto;
						right: 4px;
					}
				}
			}
		}
	}

	#search-results-premium-popup
	{
		.content
		{
			a.ui-button
			{
				text-transform: uppercase;
			}
		}
	}

	div#product-promotion
	{
		.product-promo
		{
			width: 100%;
		}
	}

	div.search-result-item
	{
		div.switch-gadget
		{
			a
			{
				background-image: url('/img/v7/dsviewer/smaller-gadget-images-5.png?v=1')
			}
		}
	}
	/*need #site-search inside #site-main for theme like cfi.knoema.org (Haiti open data)*/
	div#site-main div#site-search
	{
		margin: 0;
		text-align: center;
		position: relative;
		width: auto;
		height: 87px;

		form
		{
			display: inline-block;
			position: relative;
			margin-bottom: 12px;
			text-align: left;

			html[dir='rtl'] &
			{
				text-align: right;
			}

			div#search-progress
			{
				right: 8px;
				top: 8px;

				html[dir='rtl'] &
				{
					right: auto;
					left: 8px;
				}
			}


			#site-search-button
			{
				.hires('/Img/v7/search/ico-search', @backgroundSize: 20px 20px);
				background-repeat: no-repeat;
				background-position: right 15px top 10px;
				background-color: initial;
				color: transparent;
				overflow: hidden;
				text-indent: 100%;
				white-space: nowrap;
				width: 38px;
				height: 40px;
				padding: 0px;
				right: -9px;
				top: auto;
				position: absolute;
				display: block;
				z-index: 1;

				html[dir='rtl'] &
				{
					background-position: left 15px top 10px;
					right: auto;
					left: -5px; //the center of magnifier should be aligned with loading circle, it's defferent for RTL
				}
			}

			input#search-query
			{
				background: none;
				background-color: white;
				border: 1px solid @sky;
				width: 888px;
				height: 38px;
				display: inline-block;
				position: relative;
				padding: 0 40px 0 10px;
				box-sizing: content-box;

				html[dir='rtl'] &
				{
					padding: 0 10px 0 40px;
				}

				&.dropdown-shown
				{
					width: ~"calc(100% - @{dropdown-width} + 2px - 50px)"; //50px - padding
					margin-left: @dropdown-width - 2px;

					html[dir='rtl'] &
					{
						.margin-left-right(0, @dropdown-width - 2px);
					}
				}
			}

			div.search-filters-container
			{
				div.filter-container
				{
					margin-top: 12px;
					margin-bottom: 0;

					.left-container
					{
						max-width: none;
					}

					.search-tip
					{
						font-size: 12px;
						color: @slate-blue;
						.margin-left-right(9px, auto);

						html[dir=rtl] &
						{
							.margin-left-right(auto, px);
						}

						&::before
						{
							content: "";
							.hires2('/Img/v7/search/ico-arrow-tip');
							display: inline-block;
							width: 14px;
							height: 14px;
						}
					}
				}
			}
		}
	}

	div.see-also
	{
		div.instant-caption
		{
			font: normal 14px @title-font;
			color: @slate-blue;
		}

		ul.dynamic-filters
		{
			li
			{
				font: normal 14px @title-font;
				color: @accent-color;

				a
				{
					font: normal 14px @title-font;
					color: @accent-color;
				}
			}
		}
	}

	.search-results
	{
		div.instant-answer.left-container
		{
			max-width: 940px;
		}
	}

	#update-alert-dialog #subscribe-for-alerts
	{
		.ui-button-text
		{
			line-height: 40px;
		}
	}

	#search-wrapper
	{
		margin: auto;

		.search-teaser
		{
			margin: auto;
			display: block;
			width: 100%;
			padding: 20px 0;

			.title
			{
				background-color: inherit;
				padding: 12px 0;
				font-size: 21px;
				font-weight: bold;
				font-style: normal;
				font-stretch: normal;
				line-height: 1.29;
				letter-spacing: normal;
				color: @charcoal-grey;
				display: inline-block;
				line-height: 35px;

				em
				{
					margin: auto 16px;
					width: 27px;
					height: 27px;
					display: inline-block;
					vertical-align: text-bottom;
				}
			}

			.content
			{
				border: none;
				padding: 0;
				margin: auto;

				.search-show-more-results-button
				{
					width: 240px;
					height: 40px;

					span
					{
						margin-bottom: auto;
						font-size: 14px;
					}
				}

				div.search-result-item
				{
					padding: 0;
					margin: 0;
				}
			}

			&.instant
			{
				div.see-also.right-container
				{
					display: inline-block;
					text-align: right;
					margin-top: 25px;
				}

				#update-alert-dialog
				{
					box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
				}

				.title em
				{
					.hires('/Img/v7/search/ico-instant');
					width: 32px;
					height: 35px;
				}

				.content
				{
					div.search-result-item
					{
						padding: 30px;
						background: white;
						margin: 0;
						margin-bottom: 20px;
						box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

						div#atlas-result-item, div#named-entity-result-item
						{
							.margin-left-right(0, 0);
							min-width: initial;
							max-width: initial;
						}

						&.partner-content
						{
							.partner-teaser
							{
								background-color: inherit;
								color: #6993a9;
								font-size: 24px;
								position: initial;
								margin: auto;
							}

							div.search-result-preview-host
							{
								height: initial;
								margin: 20px;
							}

							a.ui-button.lead-button
							{
								text-transform: uppercase;
								background-color: @accent-color;
								color: #ffffff;
								font: bold 18px @title-font;
							}
						}

						&.concept-result
						{
							.add-to-gadgetbin
							{
								float: none;
							}
						}
					}
				}
			}

			&.timeseries
			{

				.title em
				{
					.hires2('/Img/v7/search/ico-timeseries');
				}

				.content
				{
					margin-top: 2px;
				}
			}

			&.visualizations
			{
				.title
				{
					em
					{
						.hires2('/Img/v7/search/ico-visualizations');
					}
				}
			}

			&.datasets
			{
				margin-bottom: 0;

				.title
				{
					margin-bottom: 4px;

					em
					{
						width: 28px;
						.hires2('/Img/v7/search/ico-datasets');
					}
				}

				.content
				{
					box-shadow: 0 0px 6px 0 rgba(0, 0, 0, 0.16);
					margin-bottom: 60px;

					div.search-result-item
					{
						padding: 30px;
						background: white;

						&.grouped-dataset-content.group-show-more
						{
							margin-bottom: auto;
							box-shadow: none;
						}

						.search-result-item
						{
							background: none;
							padding: 0;
						}

						.dataset-result-metadata
						{
							table
							{
								.metadata-value
								{
									width: 200px;

									&.dataset-date-range
									{
										width: 280px;
									}
								}
							}

							.search-metadata-item-gray,
							.search-metadata-value-gray,
							.search-metadata-value-gray a
							{
								font-size: 14px;
								color: @slate-blue;
							}
						}

						&:nth-child(2n)
						{
							background-color: #f5f5f5;
						}

						.dataset-result-title
						{
							font-size: 18px;
						}

						span.add-to-gadgetbin
						{
							float: left;
							margin: auto 15px auto -15px;

							html[dir=rtl] &
							{
								float: right;
								margin: auto -15px auto 15px;
							}
						}

						div.dataset-result-description, .search-result-components, .dataset-result-metadata
						{
							.margin-left-right(30px, auto);

							html[dir=rtl] &
							{
								.margin-left-right(auto, 30px);
							}
						}

						.dataset-result-description
						{
							.more-link
							{
								cursor: pointer;
								color: @accent-color;
								font-weight: bold;
								white-space: nowrap;

								&::after
								{
									content: "\00a0";
									display: inline-block;
									width: 12px;
									height: 12px;
									.hires2('/Img/v7/chevron-right');
									margin: auto 5px;
									vertical-align: middle;
									background-size: 84%;
								}
							}
						}
					}

					.search-show-more-results-button
					{
						position: absolute;
						margin-top: 20px;
					}
				}

				.dataset-content-top, .gadgetbin-column
				{
					.add-to-gadgetbin
					{
						float: left;
						margin: auto;

						html[dir="rtl"]
						{
							float: right;
						}
					}
				}
			}
		}

		#home-content
		{
			#search-results
			{
				#search-empty-msg
				{
					width: 940px;
					margin: auto;
				}
			}

			#search-results-with-filters
			{
				#search-results-caption
				{
					display: none;
					margin: 35px auto 14px auto;
					padding: 0;

					span
					{
						display: inline-block;
						vertical-align: top;
						text-transform: uppercase;
						font: bold 21px @title-font;
						color: @charcoal-grey;
					}

					em
					{
						margin: auto 15px;
						width: 27px;
						height: 27px;
						display: inline-block;

						&.timeseries
						{
							.hires2('/Img/v7/search/ico-timeseries');
						}

						&.visualizations
						{
							.hires2('/Img/v7/search/ico-visualizations');
						}

						&.datasets
						{
							width: 28px;
							.hires2('/Img/v7/search/ico-datasets');
						}
					}
				}
			}
		}

		#search-sidebar
		{
			display: none;
		}
	}

	.with-sidebar
	{
		#search-wrapper
		{
			#search-sidebar
			{
				box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
				position: relative;
				display: inline-block;
				vertical-align: top;
				float: none;

				#search-sidebar-inner
				{
					padding: 0;
					margin: 0;

					#search-facet-filters
					{
						margin: 0;
						background-color: #ffffff;
						padding: 0;

						.filters-caption
						{
							margin: 13.5px 10px;
							padding: 0;
							display: inline-block;
							text-transform: uppercase;
							color: @slate-blue;
							font: bold 18px @title-font;
						}

						#reset-facet-filters
						{
							text-decoration: none;
							width: 20px;
							height: 18px;
							display: inline-block;
							.hires2('/img/v7/search/ico-reset');
							float: none;
							position: relative;
							top: -5px;
							left: auto;
							font-size: 0px;
							border: none;

							html[dir="rtl"] &
							{
								right: auto;
							}
						}

						.filter-item
						{
							margin: auto;

							&.reset
							{
								display: inline;

								ul
								{
									display: inline;

									li
									{
										display: inline;
									}
								}
							}

							ul
							{
								li
								{
									margin-top: 0px;
									.margin-left-right(8px, 8px);
									padding: 0.2em 1.33em 0.2em 1.33em;

									&:first-child
									{
										margin-top: 5px;
									}

									label
									{
										color: @checkbox-input-label;
										font-size: 14px;
										line-height: 1.29;

										span
										{
											color: @slate-blue;
											font-size: 14px;

											&.label-text
											{
												font-size: 14px;
												color: #292929;
												top: -1px;
												position: relative;
												margin: 0;
												padding: 0;
												left: 4px;
												padding: 0;

												html[dir='rtl'] &
												{
													left: auto;
													right: 4px;
												}
											}
										}

										input[type="checkbox"]
										{
											opacity: 0;
											z-index: 1;

											& + .checkmark
											{
												display: inline-block;
												.hires("/img/v7/dsviewer/memberlist-member");
												background-position: -36px 0;
												width: 12px;
												height: 12px;
												position: relative;
												left: -15px;
												vertical-align: middle;
												margin: 0;
												margin-right: -10px;
												top: -2px;

												html[dir='rtl'] &
												{
													left: auto;
													right: -15px;
													.margin-left-right(-10px, 0);
												}
											}

											&:checked + .checkmark
											{
												background-position: -24px 0;
											}
										}
									}

									input[type="button"]
									{
										color: @slate-blue;
									}
								}
							}

							.filter-title
							{
								margin: auto;
								text-transform: uppercase;
								background-color: @off-white;
								color: @charcoal-grey;
								line-height: 30px;
								letter-spacing: -0.1px;
								padding-left: 10px;
								padding-right: 10px;
								font-size: 16px;

								.filter-title-delimiter
								{
									display: none;
								}
							}
						}
					}
				}
			}

			#home-content
			{
				display: inline-block;

				#search-results-with-filters
				{
					width: 100%;

					#search-results
					{
						box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

						&.visualizations
						{
							box-shadow: none;

							#search-dataalert-subscribe
							{
								box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
							}
						}

						&.timeseries
						{
							box-shadow: none;
						}

						&.datasets
						{
							margin-bottom: 80px;
							box-shadow: none;

							div.search-result-item.grouped-dataset-content,
							.ungrouped-dataset div.search-result-item
							{
								margin: auto;
								background-color: #fff;
								margin-bottom: 20px;
								box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

								a.dataset-result-title, .search-result-title
								{
									color: @accent-color;
									font: bold 18px @title-font;
								}

								span.add-to-gadgetbin
								{
									float: left;
									margin: auto 15px auto auto;

									html[dir=rtl] &
									{
										float: right;
										margin: auto auto auto 15px;
									}
								}

								div.dataset-result-description, .search-result-components, .dataset-result-metadata
								{
									.margin-left-right(45px, auto);

									html[dir=rtl] &
									{
										.margin-left-right(auto, 45px);
									}
								}

								.dataset-result-description
								{
									.more-link
									{
										cursor: pointer;
										color: @accent-color;
										font-weight: bold;
										white-space: nowrap;

										&::after
										{
											content: "\00a0";
											display: inline-block;
											width: 12px;
											height: 12px;
											.hires2('/Img/v7/chevron-right');
											margin: auto 5px;
											vertical-align: middle;
											background-size: 84%;
										}
									}
								}

								.dataset-result-metadata
								{
									table
									{
										.metadata-value
										{
											width: 200px;

											&.dataset-date-range
											{
												width: 280px;
											}
										}
									}
								}

								.search-metadata-item-gray, .search-metadata-value-gray, .search-metadata-value-gray a
								{
									font-size: 14px;
									color: @slate-blue;

									&.external-link
									{
										color: @slate-blue;
									}
								}

								.found-dimension a
								{
									white-space: normal;
									color: @accent-color;
									text-decoration: none;
								}

								.group-more-button
								{
									color: @slate-blue;
									float: none;
									top: 10px;
									font-size: 10pt;
									font-weight: normal;
									background-color: transparent;
									padding: 0;
									margin-left: 45px;

									html[dir=rtl] &
									{
										.margin-left-right(auto, 45px);
									}

									span
									{
										border-bottom: none;
									}
								}

								div.dataset-content-top
								{
									.add-to-gadgetbin
									{
										float: left;
										margin: auto;
										.margin-left-right(auto; 15px);

										html[dir="rtl"] &
										{
											.margin-left-right(15px; auto);
										}
									}

									.header
									{
										width: ~"calc(100% - 43px);"
									}

									div.time-frequency
									{
										margin-top: -5px;
									}
								}

								div.grouped-dataset.active
								{
									background-color: inherit;
								}

								.grouped-dataset-contents
								{
									.search-result-preview
									{
										margin-top: 18px;
										margin-bottom: 18px;
									}

									.header
									{
										.search-metadata-item.unit
										{
											font-size: 14px;
											color: @slate-blue;
										}
									}
								}
							}

							.ungrouped-dataset div.search-result-item
							{
								padding-top: 15px;
							}

							.search-show-more-results-button.wide-more
							{
								margin-top: 20px;
							}
						}

						.search-show-more-results-button, #show-more-single-results
						{
							width: 240px;
							height: 40px;
							white-space: nowrap;

							span
							{
								text-transform: uppercase;
								font: bold 14px @title-font;
								padding: 11px 20px;
								margin-left: 0;
								margin-bottom: auto;
								max-width: none;

								html[dir="rtl"] &
								{
									.margin-left-right(auto, 0);
								}
							}
						}
					}
				}
			}
		}
	}

	.no-search-results
	{
		#search-wrapper
		{
			width: 940px;
			margin: auto;

			#search-results
			{
				box-shadow: none;
			}

			#search-sidebar
			{
				display: none;
			}
		}
	}

	.with-sidebar #search-results.timeseries,
	#search-teaser-timeseries
	{
		table.search-timeseries
		{
			background-color: white;
			font-size: 16px;
			line-height: 1.5;
			box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
			width: 100%;

			th, td
			{
				padding: 13px 15px 13px 0;
				font-size: 16px;

				html[dir="rtl"] &
				{
					padding: 13px 0 13px 15px;
				}
			}

			thead
			{
				th
				{
					height: 20px;
					text-transform: uppercase;
					color: @charcoal-grey;

					&.star
					{
						width: 42px;
					}

					&.range
					{
						width: 106px;
					}

					&.dataset
					{
						width: 25%;
					}

					&.source
					{
						width: 12%;
					}
				}
			}

			tbody
			{
				tr
				{
					&:nth-child(2n+1)
					{
						background-color: @white-smoke;
					}

					&:nth-child(2n)
					{
						background-color: #fff;
					}

					td
					{
						> a
						{
							text-decoration: none;

							&.data-resource-url,
							&.metadata-value-source
							{
								color: @slate-blue;
							}
						}

						&.gadgetbin-column
						{
							.add-to-gadgetbin
							{
								display: inline-block;
								top: auto;
								right: 14px;

								html[dir='rtl'] &
								{
									left: 14px;
									right: auto;
								}
							}
						}
					}

					&.expanded
					{
						background-color: white;

						td:nth-child(n + 2)
						{
							visibility: visible;
							color: white;

							a
							{
								color: white;

								em
								{
									background-color: white;
								}
							}
						}

						.single-series-chart
						{
							overflow: hidden;
							padding: 0 20px 0 57px;

							html[dir=rtl] &
							{
								.padding-left-right(20px, 57px);
							}

							.dataset-attributes
							{
								border-top: 1px solid @sky;
								margin-top: 16px;
								padding-top: 16px;
								height: 48px;
							}

							.metadata
							{
								width: 180px;
							}
						}

						.external-link.result-url
						{
							color: @accent-color;
							left: auto;
							right: auto;
						}

						.dataset-attributes li
						{
							color: @slate-blue;
						}
					}
				}
			}
		}
	}

	#search-results.visualizations,
	#search-wrapper .search-teaser.visualizations .content,
	#search-wrapper .search-teaser.instant .content
	{
		div.search-result-item
		{
			padding: 30px;
			background: white;
			margin: 0;
			margin-bottom: 20px;
			box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);

			.resource-wide
			{
				span.add-to-gadgetbin
				{
					float: left;
					vertical-align: middle;
					margin: -2px 10px auto -5px;

					html[dir=rtl] &
					{
						float: right;
						.margin-left-right(10px, -5px);
					}
				}

				a.result-title
				{
					color: @accent-color;
					font: bold 18px @title-font;
				}

				div.statistics
				{
					margin-top: 5px;
					.margin-left-right(30px; auto);

					html[dir=rtl] &
					{
						.margin-left-right(auto; 30px);
					}
				}
			}

			a.search-result-title
			{
				color: @accent-color;
				font: bold 18px @title-font;
			}

			span.search-metadata-item.unit,
			span.search-metadata-item-gray.unit,
			.footer
			{
				font-size: 14px;
				color: @slate-blue;
				font-weight: normal;

				a
				{
					text-decoration: none;
					font-weight: normal;
				}
			}

			div.dataset-content-top
			{
				.add-to-gadgetbin
				{
					float: left;
					margin: 4px 15px auto -15px;

					html[dir="rtl"] &
					{
						float: right;
						margin: 4px -15px auto 15px;
					}
				}

				.header
				{
					margin-top: 6px;
					width: ~"calc(100% - 43px - 115px)";
				}

				div.time-frequency
				{
					margin-top: -5px;
				}
			}

			div.search-result-preview.one-different-dimension
			{
				padding-top: 15px;
			}
		}
	}

	#search-results
	{
		#atlas
		{
			#chart
			{
				width: 100%;
			}

			.description
			{
				width: auto;
			}
		}
	}

	#site-search-examples
	{
		display: none;
	}

	.instant-caption
	{
		color: @accent-color;
		font: bold 18px @title-font;

		&.left-container
		{
			color: @slate-blue;
			font-weight: normal;

			strong
			{
				color: @slate-blue;
			}
		}
	}

	.query-dropdown
	{
		display: inline-block;
		width: @dropdown-width;
		position: absolute;
		left: 0;
		top: 0;

		html[dir='rtl'] &
		{
			left: auto;
			right: 0;
		}

		.query-dropdown-button
		{
			display: inline-block;
			width: 100%;
			padding: 10px;
			height: 40px;
			cursor: pointer;
			background-color: #f7f7f7;
			color: @slate-blue;
			border: 1px solid @sky;
			font: normal 16px @title-font;
			position: relative;
			box-sizing: border-box;
			outline: none;
			text-decoration: none;
			text-align: left;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;

			html[dir='rtl'] &
			{
				text-align: right;
			}

			&::after
			{
				content: '';
				width: 11px;
				height: 6px;
				display: inline-block;
				background-repeat: no-repeat;
				.hires('/Img/v7/search/ico-arrow-pulldown');
				position: absolute;
				right: 5px;
				top: 17px;

				html[dir='rtl'] &
				{
					left: 5px;
					right: auto;
				}
			}
		}

		.query-dropdown-menu
		{
			display: none;
			position: absolute;
			background: #fff;
			text-align: left;
			width: @dropdown-width;
			box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
			box-sizing: border-box;
			z-index: 2; //gadget-container with z-index 1
			html[dir='rtl'] &
			{
				text-align: right;
			}

			&.show
			{
				display: block;
			}

			.query-dropdown-item
			{
				display: block;
				width: 100%;
				color: @slate-blue;
				padding: 11px 9px;
				text-decoration: none;
				box-sizing: border-box;
				position: relative;
				font-size: 16px;

				&:hover
				{
					background-color: @sky;
					color: @charcoal-grey;
				}

				&.selected::after
				{
					content: '';
					width: 15px;
					height: 11px;
					display: inline-block;
					background-repeat: no-repeat;
					.hires('/Img/v7/search/ico-check-slate-blue');
					position: absolute;
					right: 5px;
					top: 15px;

					html[dir='rtl'] &
					{
						left: 5px;
						right: auto;
					}
				}
			}
		}
	}
}