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

#analytics
{
	&, & .ui-widget
	{
		font: 11pt @text-font;
	}

	margin: 0 10px;

	#user-totals, #top-users-queries, #top-pages, #top-datasets
	{
		>div
		{
			padding: 10px 20px;
		}
	}

	.title
	{
		margin: 0 0 12px 0;
		font: 11pt @title-font;
	}

	.no-data
	{
		display: inline-block;
		margin-top: .5em;
	}

	#user-totals
	{
		>div
		{
			display: inline-block;
			width: 195px;
			vertical-align: top;
			color: white;

			&#users-total
			{
				background-color: #0098E8;
				margin-right: 5px;

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

			&#users-active
			{
				background-color: #288C00;
				margin-right: 5px;

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

			&#users-new
			{
				background-color: #D79600;
			}

			.value
			{
				>div
				{
					display: inline-block;

					&.num
					{
						font-size: 34px;
					}

					&.pct
					{
						font-size: 24px;
						margin-left: .5em;

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

	table.knoema-table
	{
		margin-top: 4px;

		tbody
		{
			tr
			{
				height: 37px;

				&:nth-child(odd)
				{
					background-color: #EBFAFF;
				}

				td
				{
					font: 11pt @text-font;
					padding: 0 12px;

					&:first-child
					{
						color: #0098E8;
					}

					&.count
					{
						word-break: normal;
					}
				}
			}
		}
	}

	#top-users-queries
	{
		margin-top: 8px;
		display: table;
		border-spacing: 9px 0;
		margin-left: -9px;

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

		>div
		{
			border: 1px solid #0098E8;
			display: table-cell;
			vertical-align: top;

			&#top-users
			{
				width: 193px;

				ul
				{
					list-style: none;
					margin: 0;
					padding: 0;

					li
					{
						margin: 12px 0;

						img
						{
							vertical-align: middle;
							margin-right: .5em;

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

						a
						{
							color: #0098E8;
						}
					}
				}
			}

			&#top-queries
			{
				width: 437px;

				.title
				{
					margin-bottom: 4px;
				}
			}
		}
	}

	.tabs
	{
		border-radius: 0;

		>.title
		{
			display: inline-block;
			vertical-align: top;
			margin-bottom: 0;
			margin-right: .5em;
			padding: 5px 0;

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

		>ul
		{
			border: none;
			list-style: none;
			padding: 0;
			margin: 0;
			display: inline-block;
			vertical-align: top;
			line-height: 1.231;
			font: 11pt @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: #0098e8;
					padding: 5px 1em;
					background-color: #e6e6e6;
					text-decoration: none;
					display: inline-block;
					line-height: normal;
					font: bold .9em @title-font;
				}

				&.ui-state-active a
				{
					text-decoration: none;
					font-weight: bold;
					background-color: #0077CA;
					color: white;
				}
			}
		}

		>div
		{
			padding: 0;
		}
	}

	#top-pages
	{
		>div
		{
			border: 1px solid #0098E8;
			margin-top: 8px;
			width: 681px;
			padding-bottom: 0;
			min-height: 390px;

			>div
			{
				margin-top: 10px;

				.no-data
				{
					margin-top: -10px;
				}
			}

			div.grid-view ul
			{
				margin-top: 0;
				text-align: justify;

				.stretch
				{
					width: 100%;
					display: inline-block;
					font-size: 0;
					line-height: 0;
					height: 20px;
				}

				li
				{
					margin: 0;
					padding-bottom: 0;

					a
					{
						padding: 10px;

						&.empty
						{
							background: transparent;
							border: none;
						}
					}

					span
					{
						height: auto;
						line-height: 20px;
						background-color: #0077CA;
						color: white;
						width: 192px;
						font-size: 9.5pt;
						text-align: left;
						padding: 0 5px;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-bottom: 0;

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

					&:hover > a[href]
					{
						box-shadow: none;
					}
				}
			}
		}
	}


	#top-datasets
	{
		>div
		{
			border: 1px solid #0098E8;
			margin-top: 8px;
			width: 681px;
			min-height: 217px;

			.knoema-table a
			{
				color: #0098e8;
			}
		}
	}

	#statistics-dataset-status
	{
		margin-top: 10px;
		
		span
		{
			margin-top: 7px;
		}
	}
}