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

.v7#site-holder
{
	div#atlas ul.indicator-column a.see-more-topics
	{
		color: @accent-color;
		font: bold 14px @title-font;
		.padding-left-right(0, 0);

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

	div#divider
	{
		border-bottom: 1px solid #c8d7df;
		width: 925px;
		padding-bottom: 40px;
		.margin-left-right(-15px, 0);
		.padding-left-right(15px, 0);

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

		&.no-border
		{
			border-bottom: none;
		}

		small
		{
			font-size: 14px;
			font-weight: normal;
			color: #292929;
		}

		a
		{
			border-bottom: none;
			font-weight: bold;

			&.button
			{
				padding: 10px 25px;
				font-size: 14px;
				color: white;
			}
		}

		h1
		{
			margin: 0;
			font-size: 30px;
			font-weight: bold;
			font-style: normal;
			line-height: 1.13;
			letter-spacing: -0.2px;
			color: #353d40;
			margin-bottom: 30px;
		}

		div.flag a.button
		{
			padding: 8px 0;
			font-size: 14px;
			min-width: 140px;
			max-width: 220px;
			text-align: center;
			color: white;
		}

		div
		{
			ul li
			{
				&.end-of-group
				{
					margin-bottom: 0;
				}

				&.start-of-group
				{
					margin-top: 0;
				}
			}

			li
			{
				font-size: 14px;
				color: #292929;
				line-height: 24px;

				span
				{
					color: #6993a9;
					font-weight: normal;
				}
			}
		}
	}

	div.nomargin#divider
	{
		.margin-left-right(-15px, 0);
		.padding-left-right(15px, 0);

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

		div ul li
		{
			width: 450px;
		}
	}

	div#atlas.new div#menu-holder ul#atlas-tabs
	{
		font-size: 18px;

		li
		{
			&.top-topic
			{
				font-weight: normal;

				h2
				{
					font-weight: normal;
					font-size: 14px;
				}
			}

			&:after
			{
				border-bottom: none;
			}
		}

		a
		{
			text-decoration: none;
			color: #292929;
		}
	}

	div#atlas.new
	{
		div.atlas-tab-content
		{
			border-left: 1px solid #c8d7df;
			box-shadow: none;
			padding-left: 15px;
			box-sizing: border-box;

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

div#atlas-header > span.like-header
{
	display: inline-block;
	margin-bottom: 15px;
	font-size: 1.5em;
	font-family: @title-font;
	clear: left;
	font-weight: bold;
}

div#atlas
{
	h2
	{
		margin: 0 0 15px;
	}

	table.knoema-table tbody td
	{
		a, a:visited
		{
			color: @accent-color;
		}
	}

	ul.indicator-column
	{
		position: relative;

		a.see-more-topics
		{
			color: #008030;
			text-decoration: none;
			font: bold .9em @title-font;
			display: inline-block;
			.padding-left-right(15px, 0);
			position: relative;
			top: -10px;

			i
			{
				position: relative;
				top: 1px;
				left: 5px;
				font-size: 80%;
			}

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

				i
				{
					top: 0px;
					left: -5px;

					&:before
					{
						content: "\f053"; // changing class fa-chevron-left to right
					}
				}
			}
		}
	}
}

div#tables-holder
{
	h3
	{
		&.h3-scale, &.h3-growth
		{
			display: none;
		}
	}

	table.knoema-table.compare
	{
		width: 100%;
		margin: 0 0 30px 0;

		a
		{
			color: @accent-color;
			direction: ltr;
			unicode-bidi: embed;
		}

		thead
		{
			font-size: 11pt;

			th
			{
				text-transform: uppercase;
				background: #f0f0ec;
				color: #353d40;
				font-size: 16px;
				font-weight: bold;
				padding-left: 10px;
				height: 30px;

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

				&.indicator
				{
					font-size: 16px;

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

		th
		{
			text-align: right;
			font-weight: normal;

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

			&.indicator
			{
				width: 210px;
				text-align: left;

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

		th, td
		{
			font-size: 16px;

			&:last-child
			{
				padding-right: 10px;

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

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

		td
		{
			padding-bottom: 10px;
			text-align: right;
			vertical-align: middle;

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

			span
			{
				font-weight: normal;
				display: block;

				&.scale-change
				{
					display: none;
				}
			}
		}

		tbody
		{
			td
			{
				height: 32px;
			}
		}

		.small, .no-data
		{
			font-size: 14px;
			color: #6993a9;
		}

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

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

div#divider
{
	border-bottom: 1px solid #EEE;
	width: 910px;
	padding-top: 5px;
	padding-bottom: 20px;
	min-height: 195px;

	small
	{
		font-weight: bold;
		color: #888;
	}

	a
	{
		text-decoration: none;
		border-bottom: 1px dotted @accent-color;
		display: inline-block;

		&.button
		{
			padding: 4px 12px;
			font-size: 9pt;
			text-decoration: none;
			border: none;
		}
	}

	h1
	{
		margin: 0;
		font-weight: normal;
		font-size: 18pt;
		font-family: @title-font;
		margin-bottom: 7px;
	}

	div.flag
	{
		float: left;
		width: 252px;
		margin-left: -5px;
		background: url(/Img/v2/atlas/default-datasource.png) 75px center no-repeat;
		background-position-y: 30px;

		a.button
		{
			margin: 10px 0 5px 5px;

			html[dir='rtl'] &
			{
				margin: 10px 5px 5px 0px;
			}
		}

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

	div
	{
		overflow: hidden;

		img.flag, div.flag_img
		{
			width: 227px;
			height: 151px;
			float: left;
			margin: 5px 20px 5px 5px;
			box-shadow: 0 0 5px 0px #999;
			display: inline-block;

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

		ul
		{
			float: left;
			margin-bottom: 0;

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

			&:first-child
			{
				margin-right: 10px;

				li
				{
					width: 342px;
				}

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

			li
			{
				font-size: 10.5pt;
				width: 305px;

				&.end-of-group
				{
					margin-bottom: 5px;
				}

				&.start-of-group
				{
					margin-top: 5px;
				}
			}
		}

		li
		{
			span
			{
				display: inline-block;
				margin-right: 10px;
				font-weight: bold;

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

			a
			{
				background: none;
				font-size: 100%;
				padding: 0;
				color: @accent-color;
			}

			img
			{
				width: 10px;
				height: 10px;
				margin-right: 5px;

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

div.nomargin#divider
{
	margin-left: 0;

	div ul li
	{
		width: 440px;
	}
}

div.nopadding#divider
{
	margin-left: 0;
	min-height: 0;
	padding-bottom: 0;
}

ul#indicators div li
{
	float: left;
	width: 300px;
}

div#hash-related-pages div#home-box h3
{
	font: 12pt @text-font;
}

div#atlas.new
{
	div#menu-holder
	{
		width: 200px;
		margin-right: 0 !important;
		float: left;
		padding-top: 20px;

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

		ul
		{
			li
			{
				margin-right: 2em;
				margin-left: 0;

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

		ul#atlas-tabs
		{
			margin: 0;
			font-size: 18px;

			li
			{
				display: block;
				padding-bottom: .5em;
				margin-right: 0;
				width: 200px;

				h2
				{
					border-left: 5px solid transparent;
					padding-left: .5em;
					display: inline-block;
					margin: 0;
					font-size: 100%;
					font-weight: bold;

					html[dir='rtl'] &
					{
						border-right: 5px solid transparent;
						border-left: 0;
						.padding-left-right(0, .5em);
					}

					&.active
					{
						border-left-color: @accent-color;
						border-bottom: 0 !important;

						html[dir='rtl'] &
						{
							border-right-color: @accent-color;
						}
					}
				}

				&:after
				{
					display: block;
					width: 100%;
					content: "";
					border-bottom: 1px dotted #ccc;
					height: .5em;
				}

				&.top-topic
				{
					font-size: smaller;
					font-weight: normal;
					margin-left: 1em;
					width: 180px;

					&:after
					{
						border-bottom: 0;
					}
				}

				&.last
				{
					padding-bottom: 0;
				}
			}
		}
	}

	div#atlas-tab-content
	{
		position: static !important;
	}

	div.atlas-tab-content
	{
		width: 680px;
		margin-left: 0;
		padding-left: 20px;
		padding-top: 20px;
		min-height: 600px;
		box-shadow: inset 3px 0px 3px -2px rgb(215, 215, 215);
		overflow: hidden;
		html.no-boxshadow &
		{
			border-left: 2px solid rgb(215, 215, 215);
			width: 678px;
		}

		html[dir='rtl'] &
		{
			margin-left: 10px;
			.padding-left-right(0, 20px);
			box-shadow: inset -3px 0px 3px -2px #d7d7d7;
			float: left;
		}

		html.no-boxshadow[dir='rtl'] &
		{
			border-left: none;
			border-right: 2px solid rgb(215, 215, 215);
		}

		div#home-box
		{
			clear: none;
		}

		p.atlas-banner
		{
			display: table-cell;
			vertical-align: middle;
		}
	}
}

html[dir='rtl'] #atlas-result-item
{
	div .new#atlas div.atlas-tab-content
	{
		margin-left: -10px;
	}
}