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

ul.group-switch
{
	list-style: none;
	width: 100%;
	text-align: center;
	padding: 0;

	li
	{
		display: inline-block;

		a
		{
			text-decoration: none;
			border: 1px solid lighten(@accent-color, 10%);
			display: inline-block;
			color: lighten(@accent-color, 10%);
			background: #fff;
			font: normal 15px 'PT Sans';
			padding: 5px 1em;
			width: 70px;

			&.active
			{
				color: #fff;
				background: lighten(@accent-color, 10%);
			}

			&.country
			{
				border-left: none;
				border-right: none;
			}

			&.topic
			{
				border-top-right-radius: 2px;
				border-bottom-right-radius: 2px;
			}

			&.text
			{
				border-top-left-radius: 2px;
				border-bottom-left-radius: 2px;
			}
		}
	}
}

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

		&.number
		{
			display: block;
			width: 100%;
			margin: 0 10px 30px 0;
			box-sizing: border-box;

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

			& > table
			{
				width: 100%;
				font-family: @title-font;

				&.no-items
				{
					display: none;
				}

				& > caption
				{
					font: bold 1.2em @title-font;
					text-align: left;
					border-bottom: 1px solid #c4e2f7;
					padding: .5em 0 .5em 40px;
					background-repeat: no-repeat;
					background-size: 30px 20px;
					background-position: left center;
					cursor: pointer;

					&.no-padding
					{
						padding-left: 0;
					}

					& a
					{
						float: right;
						color: @accent-color;
						font-weight: normal;
						font-size: .8em;
						text-decoration: none;
					}
				}

				& > tbody
				{
					&.spoiler-items
					{
					}

					&.cutted-items
					{
						display: none;
					}

					& > tr
					{
						display: none;
						background-color: #fff;

						&:hover
						{
							td
							{
								&.hide-fact
								{
									div
									{
										display: block;
									}
								}
							}
						}

						td
						{
							padding: 5px 0;
							border-top: 6px solid #f5f5f5;

							&.name
							{
								width: 310px;
								padding-left: 10px;
								font-size: 13px;

								span
								{
									font-size: 7pt;
									font-weight: lighter;
									display: inline-block;
									color: #8c8c8c;
								}

								a:hover
								{
									text-decoration: none;
								}
							}

							&.more
							{
								width: 150px;
							}

							&.other
							{
								position: relative;
								text-align: right;
								width: 80px;

								.other-sources
								{
									color: lighten(@accent-color, 10%);

									img
									{
										margin-left: 5px;
										margin-bottom: -2px;
									}
								}

								.source-menu
								{
									display: none;
									cursor: default;
									position: absolute;
									text-align: left;
									top: 32px;
									z-index: 10000;
									right: -13px;
									overflow: visible;
									display: none;
									cursor: pointer;
									font-size: 17px;

									.arrow-holder
									{
										z-index: 100;

										.arrow
										{
											height: 6px;
											width: 10px;
											display: block;
											position: relative;
											top: 2px;
											padding: 0px;
											padding-left: 32px;
											margin: 0px;
											background-repeat: no-repeat;
											background-position: right -3px;
											.hires('/Img/v2/page/gadgets/gadget-dropdown-menu_new_triangle');

											@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2ppx), only screen and (min-device-pixel-ratio: 2)
											{
												height: 12px;
												width: 18px;
												top: 4px;
											}
										}
									}

									.source-menu-body
									{
										padding: 5px 0;
										border: 1px solid #cccccc;
										-moz-box-shadow: 0px 1px 5px 1px #cecece;
										-webkit-box-shadow: 0px 1px 5px 1px #cecece;
										box-shadow: 0px 1px 5px 1px #cecece;
										background-color: white;

										a
										{
											width: auto;
											padding: 5px 15px 6px 10px;
											height: 14px;
											font-size: 12px;
											font-family: @title-font;
											vertical-align: middle;
											text-decoration: none;
											color: @accent-color;
											display: block;
											white-space: nowrap;

											em
											{
												font-size: 13px;
												color: #888d96;
											}

											&:hover
											{
												color: @accent-color;
												background-color: #dcf5ff;

												html[data-community='True'] &
												{
													background-color: #dedede;
												}

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

							&.td-value
							{
								color: #8c8c8c;
								vertical-align: top;
							}

							&.hide-fact
							{
								width: 50px;

								div
								{
									display: none;
									height: 20px;
									width: 20px;
									margin-left: 15px;
									.hires('/img/v6/factfinder/ico-delete');
								}
							}

							span
							{
								font-size: 10pt;
								font-weight: normal;
								display: inline-block;

								&.value
								{
									font-size: 23px;
									font-weight: bold;
									margin-right: 5px;
									color: black;
								}
							}

							a
							{
								outline: none;
								text-decoration: none;
								color: black;

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

						&.premium td .external-link
						{
							color: #777;

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

				& > tfoot
				{
					td
					{
						position: relative;
					}

					.group-item-btn
					{
						width: 100%;
						height: 40px;

						a
						{
							display: block;
							width: 140px;
							margin: 40px auto 0;
							padding: 7px 18px;
							color: lighten(@accent-color, 10%);
							background-color: #fff;
							cursor: pointer;
							text-decoration: none;

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

							img
							{
								margin: 0 10px -1px 0;
							}
						}
					}

					.show-all-btn
					{
						position: absolute;
						top: -40px;
						background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #f5f5f5 45%, #f5f5f5 100%);
					}

					.collapse-btn
					{
						display: none;

						a
						{
							margin-top: 10px;
							width: 71px;
						}
					}
				}

				tr.primary
				{
					cursor: pointer;
				}

				tr.secondary
				{
					font-size: 50%;

					td
					{
						padding-left: 10px;
					}

					div
					{
						display: none;
						height: 50px;
						margin-right: 20px;
						cursor: pointer;

						&.active
						{
							border-bottom: 5px solid @accent-color;
						}

						span
						{
							display: block;
						}
					}
				}

				tr.data
				{
					& > td
					{
						border-bottom: none;
					}

					.visualization
					{
						height: 200px !important;
					}

					.maximize-restriction-container
					{
						position: relative;
					}

					.tables,
					.history,
					.cards
					{
						padding: 0 15px;
						box-sizing: border-box;
					}

					.history
					{
						position: relative;
						margin-bottom: 1.5em;

						.edit_pane
						{
							.gadget-title
							{
								left: 35px;
							}
						}
					}

					.tables
					{
						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
								{
									filter: gray;
									filter: grayscale(100%);
									position: relative;

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

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

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

									&.region
									{
										padding-left: 40px;
										background-repeat: no-repeat;
										background-size: 30px 20px;
										background-position: left center;
									}
								}

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

									span
									{
										margin-left: 10px;
										font-size: 10pt;
										font-weight: normal;
										color: #8c8c8c;
									}
								}

								&.more
								{
									padding-right: 15px;
								}
							}
						}
					}

					.factfinder-gadget-menu
					{
						p
						{
							font-size: 12px;
							color: @accent-color;
							margin: 0 0 5px 7px;
						}

						a
						{
							text-decoration: none;
						}

						.export-icon
						{
							height: 20px;
							width: 21px;
							background-image: url(/Img/business/format_export_icons_sprite-small.png);
							background-repeat: no-repeat;
							margin: 0 10px -5px 5px;

							&.pdf
							{
								background-position: -42px 0;
							}

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

							&.xlsx
							{
								background-position: -21px 0;
							}

							&.png
							{
								background-position: -63px 0;
							}
						}
					}

					.preview-helper
					{
						display: none;
					}

					&.premium,
					&.premium-open
					{
						.preview-helper
						{
							position: absolute;
							z-index: 3;
							top: 0;
							bottom: 0;
							left: 10px;
							right: 10px;
							display: initial;
						}

						.cards,
						.history
						{
							filter: gray;
							filter: grayscale(100%);
							position: relative;
						}
					}
				}
			}
		}

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

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

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

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

		ul
		{
			padding: 0;
			font-size: .9em;
			list-style: none;
			margin: 0 0 .6em;

			li
			{
				display: inline;
			}
		}
	}

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

	.gadgetbin-column
	{
		display: none;
	}

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

.hide-result-popup
{
	font: bold 20px @title-font;
	margin: 20px 0;

	&.optional-part
	{
		margin: 0;
		padding-top: 20px;
		border-top: 1px solid #f5f5f5;

		span
		{
			display: block;
			font-size: 14px;
			font-weight: normal;
			color: #505050;
			margin: 5px 0 2px;
		}

		label
		{
			display:block;
			margin: 8px 0;
			font-size: 14px;
			font-weight: normal;

			&.other
			{
				margin-left: 23px;
			}

			input
			{
				margin-right: 10px;
			}
		}

		textarea
		{
			width: 367px;
			height: 50px;
			border: 1px solid lighten(@accent-color, 10%);
			margin-left: 23px;
			resize: none;
		}
	}
}