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

div.search-result-item
{
	padding-bottom: 7px;
	padding-top: 5px;
}

.facts-finder
{
	div.search-filters-container
	{
		float: right;

		div.filter-container
		{
			margin-top: 5px;
			margin-bottom: 0px;
		}
	}

	div.footer
	{
		&.left-aligned-footnote, &.right-aligned-footnote
		{
			text-align: center;
		}
	}

	div.action-bar
	{
		background-color: #254c67;
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 8%;
		text-align: center;

		img.logo
		{
			width: 80%;
			margin-top: 13%;
		}

		h2
		{
			font: bold 120% @title-font;
			margin-top: 3%;
			color: white;
		}
	}

	div.text
	{
		position: absolute;
		left: 8%;
		bottom: 0;
		top: 0;
		width: 32%;
		background-color: whitesmoke;

		div.input
		{
			position: absolute;
			width: 95%;
			top: 0;
			display: block;
			font-family: @text-font;
			border: none;
			outline: 2px solid #D7E9F5;
			outline-offset: -2px;
			padding: 1%;
			line-height: 1.7;
			margin: 2%;
			background-color: white;
			overflow-y: auto;

			&.default
			{
				color: #c0c0c0;
				font: 120% @title-font;
				padding-top: 70%;
				text-align: center;
			}
		}

		div.numbers-model
		{
			position: absolute;
			width: 100%;
			bottom: 0;
			padding-left: 3%;
			padding-right: 3%;
		}

		&.flavor-layout0
		{
			div.input
			{
				bottom: 0;
			}

			div.numbers-model
			{
				height: 0;
				display: none;
			}
		}

		&.flavor-layout1
		{
			div.input
			{
				bottom: 50px;
			}

			div.numbers-model
			{
				height: 50px;
			}
		}

		&.flavor-layout3
		{
			div.input
			{
				bottom: 50px;
			}

			div.numbers-model
			{
				height: 50px;
			}
		}

		.highlight0
		{
			background-color: #CCCC00;
		}
		.highlight1
		{
			background-color: #FFFF00;
		}
		.highlight2
		{
			background-color: #FFFF33;
		}
		.highlight3
		{
			background-color: #FFFF66;
		}
		.highlight4
		{
			background-color: #FFFF99;
		}
		.highlight5
		{
			background-color: #FFFFCC;
		}
	}

	.numbers-model
	{
		display: inline-block;

		#numbers-model-switch
		{
			position: absolute;
			left: 0;
			padding-right: 5px;
			margin-left: 2%;
		}

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

		.sw-label
		{
			margin-right: 5px;
			cursor: default;
		}

		#relation-weight-cutoff-title
		{
			display: inline-block;
			position: absolute;
			cursor: default;
			top: 3px;
		}

		#relation-weight-cutoff-slider
		{
			display: inline-block;
			position: absolute;
			left: 218px;
			right: 20px;

			a
			{
				outline: none;
				&:focus
				{
					outline: none;
				}
			}

			select
			{
				display: none;
			}

			.ui-slider-horizontal
			{
				display: inline-block;
				position: absolute;
				right: 20px;
				left: 142px;
				top: 9px;
			}
		}
	}

	div.results
	{
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		left: 40%;
		font: 10pt @text-font;
		overflow-y: auto;

		h2.fact-group-header-text
		{
			font: bold 125% @title-font;
			margin: 8px 0 7px 0;
			display: inline-block
		}

		div.facts
		{
			margin: 20px;
		}

		div.fact-tmpl
		{
			display: inline-block;
			vertical-align: top;
			box-sizing: border-box;

			&.empty
			{
				background-color: #F9F9F9;
				border: 1px dotted #c0c0c0;
			}

			&.country
			{
				width: 120px;
				height: 90px;
				max-height: 90px;
				margin: 1% 1% 1% 0;
				border: none;
				text-align: center;

				&.empty
				{
					background: url(/img/v4/factfinder/region-bg.png) repeat-x left top;
					background-size: 100% 100%;
				}
			}

			&.topic
			{
				&:last-child
				{
					span
					{
						display: none;
					}
				}
				span
				{
					margin-right: 5px;
				}
				div
				{
					display: inline-block;
				}
				&.empty
				{
					width: 97%;
					margin: 0 1% 0 0;
					min-height: 20px;
				}
			}

			&.number
			{
				width: 48%;
				margin: 0 1% 30px 0;

				&.empty
				{
					min-height: 60px;
				}
			}

			&.chart
			{
				width: 100%;
				margin-right: 1%;
				min-height: 200px;
				height: inherit;
				margin-bottom: 5px;
				overflow: hidden;
				position: relative;

				&.voting
				{
					border: 1px dotted #c0c0c0;
				}
			}
		}

		.fact-group
		{
			.countries
			{
				padding: 0 0 20px 0;
				min-width: 900px;
			}

			&.topics
			{
				margin-top: 5px;
			}

			&.numbers
			{
				margin-top: 15px;
			}
		}

		.topic div.topic
		{
			font: 11.5pt @title-font;
		}

		.number div.fact
		{
			font: 11.5pt @title-font;
			cursor: pointer;
			width: 100%;

			span.text
			{
				text-transform: capitalize;

				&.number
				{
					font-weight: bold;
					color: @accent-color;
					font-size: large;
				}
			}
		}

		.country div.fact
		{
			width: 100%;
			height: inherit;

			a
			{
				text-decoration: none;

				img
				{
					width: 100%;
					height: 70%;
					box-shadow: 0 0px 2px 1px #eaeaea;
				}

				span
				{
					color: @accent-color;
					display: block;
					font: bold 10pt @title-font;
				}
			}
		}

		.chart
		{
			a.gadget-title
			{
				cursor: auto;
			}

			.edit_pane .gadget-menu-body a.embed
			{
				display: none;
			}

			div.chart-group
			{
				height: 100%;

				div.nav
				{
					text-align: right;
					font: bold 100% @title-font;
					color: @accent-color;
					position: relative;
					top: 5px;
					right: 0px;
					z-index: 10;

					span
					{
						margin-right: 10px;
						&.enable
						{
							cursor: pointer;
						}

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

				div.slider
				{
					position: relative;
					width: 5000px;
					height: 100%;
				}
			}

			div.fact
			{
				height: inherit;
				width: 900px;
				position: relative;
				display: inline-block;
			}
		}

		.topics
		{
			display: none;

			.active
			{
				display: initial;
			}
		}

		#tables-holder
		{
			table.knoema-table.compare
			{
				thead
				{
					background: #ebebeb;

					th
					{
						font-weight: bold;
						height: 40px;

						&:first-child
						{
							font-size: 1em;
						}

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

						img
						{
							width: 36px;
							height: 24px;
						}

						span
						{
							display: inline-block;
							vertical-align: super;
							margin-left: 10px;
						}
					}
				}

				tbody
				{
					tr:nth-child(odd)
					{
						background: none;
					}

					tr:nth-child(even)
					{
						background: #f5f5f5;
					}

					th.indicator.long
					{
						width: 350px;
					}
				}

				th:first-child
				{
					padding-left: 20px;
				}

				td:last-child
				{
					padding-right: 20px;
				}

				td,
				th
				{
					padding-top: 5px;
					padding-bottom: 5px;
				}
			}
		}
	}
}