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

@royal-blue: #2050be;
@charcoal-grey: #222240;
@slate-blue: #6080c0;
@brownish-grey: #606060;
@light-gray: #292929;
@accent-color-hover: #1b44a2;

.social-network-button(@left: 0)
{
	margin-right: 5px;
	vertical-align: middle;
	display: inline-block;
	background: url(/img/v4/icon_login.png) @left 0;
	width: 18px;
	height: 18px;
	border: none;
	cursor: pointer;

	&:hover, &.off
	{
		background-position-y: -18px;
	}
}

body.fullscreen div#site-main
{
	width: 940px;
}

div.top-margin#site-main
{
	padding-top: 0;
}

.user-profile
{
	padding: 0;

	&.public
	{
		margin: 10px 8px 0;

		.social-buttons
		{
			margin: 0;
		}

		.feed
		{
			padding: 0;

			&.component-block
			{
				width: calc(~"100% + 30px");
				.bidi-margin-left(-15px);
			}
		}
	}

	.v7 &
	{
		margin-top: 20px;
	}

	.dsbrowser
	{
		height: 100%;
	}

	.visualizations
	{
		ul.tabs
		{
			display: inline-block;
		}
	}

	.list
	{
		margin-top: 15px;
		.margin-left-right(-15px, -15px);
	}

	.filter-block
	{
		position: relative;
		margin-left: -4px;
		font: 14px @title-font;

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

		&.filter-block-hidden
		{
			display: none;
		}

		.filter-block-wrapper
		{
			text-align: right;

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

		.select-list-title
		{
			margin-left: 4px;
			margin-right: 4px;
		}

		.filter-item
		{
			display: inline-block;

			&.filter-item-hidden
			{
				display: none;
			}

			select
			{
				width: 225px;
				border: 1px solid lightgray;
				border-radius: 2px;
				background-color: #f0f9fe;
				padding: 5px;
			}
		}
	}

	.select-list
	{
		display: inline-block;
		vertical-align: top;
		margin-top: -7px;

		&.select-list-items-hidden
		{
			.select-list-items
			{
				display: none;
			}
		}

		.select-list-selected-item
		{
			display: inline-block;
			position: relative;
			top: 6px;
			height: 20px;
			border: 1px solid lightgray;
			border-radius: 2px;
			background-color: #f0f9fe;

			.content
			{
				display: inline-block;
				width: 200px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow-x: hidden;
				.padding-left-right(5px, 20px);

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

			.arrow
			{
				position: absolute;
				top: 4px;
				right: 5px;
				width: 13px;
				height: 13px;
				background-image: url('/img/v6/page/gadgets/ico-arrow-down.svg');
				background-repeat: no-repeat;

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

		.select-list-items
		{
			position: absolute;
			top: 8px;
			max-height: 120px;
			padding: 0;
			width: 225px;
			z-index: 9;
			background-color: white;
			border: 1px solid lightgray;
			text-overflow: ellipsis;
			overflow-x: hidden;
			overflow-y: auto;
			list-style: none;

			li
			{
				padding: 2px 20px 2px 5px;
				height: 20px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow-x: hidden;
				cursor: pointer;

				html[dir='rtl'] &
				{
					padding: 2px 5px 2px 20px;
				}

				&.select-list-item-checked
				{
					background-color: #f0f9fe;
					.hires('/img/v5/ico-check', 'png', contain);
					background-repeat: no-repeat;
					background-position-x: right;
					background-position-y: center;

					html[dir='rtl'] &
					{
						background-position-x: left;
					}
				}

				&:hover
				{
					background-color: #d3effd;
				}

				&:first-child
				{
					.padding-left-right(5px, 5px);
					cursor: default;

					&:hover
					{
						background-color: white;
					}
				}

				.select-all, .deselect-all
				{
					font: bold 12px @title-font;
					color: @accent-color;
					cursor: pointer;
					margin-top: 2px;
				}

				.select-all
				{
					float: left;

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

				.deselect-all
				{
					float: right;

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

	h2
	{
		margin-top: 0;
		font: normal 18pt @title-font;
	}

	h3
	{
		font: normal 16pt @title-font;
		margin: 5px 0;
	}

	.userpic
	{
		height: 50px;
		margin-bottom: 30px;

		div
		{
			width: 50px;
			height: 50px;
			float: left;
			margin: 4px 10px 0 0;
			background: url(https://fbcdn-profile-a.akamaihd.net/static-ak/rsrc.php/v2/yo/r/UlIqmHJn-SK.gif);

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

		h3
		{
			padding: 0;
			margin: 0;
			font: bold 16pt @title-font;
		}

		ul
		{
			margin-top: 5px;
			padding: 0;
			list-style: none;

			li
			{
				display: inline-block;
				margin-right: 3px;

				a.facebook
				{
					.social-network-button();
				}

				a.twitter
				{
					.social-network-button(-38px);
				}


				&.google
				{
					.social-network-button(-19px);
				}

				&.linkedin
				{
					.social-network-button(-57px);
				}
			}
		}
	}

	.tabs
	{
		list-style-type: none;
		padding: 0 0 0 30px;
		margin: 0 0 15px 0;

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

		.v7 &
		{
			padding: 0 0 0 60px;

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

		li
		{
			display: inline;
			margin-right: 20px;
			cursor: pointer;
			font: bold 11.5pt @title-font;

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

			.v7 &
			{
				margin-right: 50px;

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

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

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

		&.small
		{
			li
			{
				font: 12px @title-font;
				color: @royal-blue;
				border-bottom: none;

				.v7 &
				{
					font: 14px @title-font;
					color: @brownish-grey;
				}

				&.active
				{
					font-weight: bold;
					color: black;

					.v7 &
					{
						color: @charcoal-grey;
					}
				}

				.failed-pages
				{
					display: inline-block;
					color: white;
					background: #bd1e1e;
					text-align: center;
					vertical-align: bottom;
					margin-left: 5px;
					font: 9px @title-font;
					min-width: 15px;
					height: 15px;
					line-height: 15px;
					border-radius: 8px;

					&.oval
					{
						padding: 0 7px;
					}

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

					.v7 &
					{
						font: 11px @title-font;
						min-width: 18px;
						height: 18px;
						line-height: 18px;
						border-radius: 9px;
					}
				}
			}
		}
	}

	.tab
	{
		display: none;

		&.small
		{
			padding: 0 30px 30px;
			position: relative;

			.tag-filter-container
			{
				display: none;
				position: absolute;
				top: -44px;
				right: 30px;

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

				.tag-filter-title
				{
					font: 14px @title-font;
					color: @brownish-grey;
				}

				.tag-filter
				{
					font: 14px @title-font;
					color: rgba(0, 0, 0, 0.87);
					max-width: 270px;
					margin-left: 10px;
					padding: 0 25px 0 5px;
					background-position: right 5px center;
					width: auto;

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

			.text-filter
			{
				font: 14px @title-font;
				height: 36px;
				width: 100%;
				border: solid 1px #e6e6e6;
				border-radius: 4px;
				.padding-left-right(10px, 10px);
				box-sizing: border-box;
				margin-top: 5px;
			}

			.upgrade-pages
			{
				margin-top: 20px;

				.slate-blue
				{
					height: 12px;
					font: 14px @title-font;
					color: @brownish-grey;
					padding-left: 20px;

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

					.mtl-checkbox-bg
					{
						top: 3px;
					}
				}

				a
				{
					background-image: url(/Img/v7/dsviewer/ico-information.svg);
					height: 16px;
					width: 16px;
					display: inline-block;
					outline: none;
					margin-bottom: -3px;
					margin-left: 5px;

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



			&.downloads
			{
				table
				{
					width: ~"calc(100% - 20px)";
					margin: 20px 10px 10px;
				}

				th
				{
					font: bold 16px @title-font;
					color: black;
				}

				td
				{
					font: 14px @title-font;
					color: @light-gray;
				}

				th, td
				{
					padding: 16px 10px;
				}

				tbody tr:nth-child(odd)
				{
					background-color: #f5f5f5;
				}
			}

			&.updates
			{
				h4
				{
					font: 14px @title-font;
					color: @brownish-grey;
					margin-top: 30px;
					margin-bottom: 0;
				}

				.no-items-message
				{
					margin-top: 15px;
				}
			}
		}

		&.big
		{
			.no-items-message
			{
				font: 14px @title-font;
				color: @brownish-grey;
			}

			&.visualizations .small.personal .list-item
			{
				h5
				{
					width: 212px;
				}
			}

			&.apps,
			&.api
			{
				padding: 0 20px 20px;
				position: relative;

				.app-tab-description
				{
					font: 14px @title-font;
					color: #8c8c8c;
					width: 80%;
				}

				.create-app
				{
					display: block;
					position: absolute;
					top: 0;
					right: 20px;
					font: bold 14px @title-font;
					text-transform: uppercase;
					text-decoration: none;
					outline: none;
					color: white;
					background: @accent-color;
					padding: 11px 20px;
					border-radius: 2px;

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

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

				.no-items-message
				{
					margin-top: 20px;
				}

				table
				{
					margin: 20px 0 10px;
				}

				th
				{
					font: bold 16px @title-font;
					color: black;
				}

				td
				{
					font: 14px @title-font;
					color: @light-gray;

					a
					{
						text-decoration: none;
						outline: none;
						color: @light-gray;

						&:hover
						{
							color: @royal-blue;
						}
					}
				}

				th, td
				{
					padding: 16px 10px;
				}

				tbody tr:nth-child(odd)
				{
					background-color: #f5f5f5;
				}
			}
		}
	}

	#customize-feed
	{
		text-decoration: underline;
		font-size: 10pt;
		float: right;

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

	.dashboard
	{
		div#page-description, div#page-body
		{
			margin: 0;
		}
	}

	.grid-view
	{
		ul
		{
			li
			{
				margin-left: 50px;

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

				&.first
				{
					margin-left: 0;

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

				&:hover
				{
					img
					{
						display: block;
					}
				}

				span
				{
					font: 10.5pt @title-font;
				}

				img
				{
					display: none;
					width: 26px;
					height: 26px;
					cursor: pointer;
					position: absolute;
					top: -10px;
					left: 165px;
					border: none;
					z-index: 1;
				}
			}
		}
	}

	.dsbrowser2
	{
		div.bread-crumb, div#dsbrowser-tabs
		{
			display: none;
		}

		.personal-section-items
		{
			margin: 0;
		}
	}

	#shortcuts-dialog
	{
		display: none;
	}
}

.user-resources
{
	margin: 0 -15px;

	.header
	{
		box-sizing: border-box;
		padding-top: 33px;
		height: 120px;

		.icon
		{
			display: inline-block;
			width: 24px;
			height: 24px;
			background-image: url("/img/v7/shared/resources.svg");
			margin-left: 28px;

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

		h1
		{
			display: inline-block;
			font: bold 32px @title-font;
			color: @charcoal-grey;
			margin: 0 0 0 8px;

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

		.description
		{
			font: 14px @title-font;
			color: @slate-blue;
			margin-top: 7px;
			margin-left: 60px;

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

	.stat
	{
		padding-left: 5px;
		background-color: white;
		clear: both;

		.v7 &
		{
			background-color: #f5f5f5;
			padding-left: 35px;

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

		.stat-item
		{
			h4
			{
				font: 14px @title-font;
				color: @royal-blue;
				margin: 0;
				display: inline-block;

				.v7 &
				{
					color: @brownish-grey;
					font-weight: bold;
				}
			}

			a
			{
				display: inline-block;
				vertical-align: top;
				text-decoration: none;
				outline: none;
				font-size: 0.9em;
				padding: 13px 25px 16px;
			}

			span
			{
				font: 14px @title-font;
				color: #a0a0a0;

				&.left-bracket
				{
					margin-left: 5px;

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

			&.big
			{
				display: inline-block;
				vertical-align: top;

				&.active
				{
					a
					{
						.v7 &
						{
							border-bottom: 3px solid @slate-blue;
						}

						h4
						{
							font-weight: bold;
							color: black;

							.v7 &
							{
								color: @charcoal-grey;
							}
						}
					}
				}
			}
		}
	}
}

#gadget-bin table.timeseries tbody tr td:first-child .check
{
	display: none;
}

.form.change-password
{
	.input-block
	{


		.mtl-textbox
		{
			width: 100%;

			input[type=text],
			input[type=password]
			{
				border-top: none;
				border-left: none;
				border-right: none;
			}
		}
	}

	.field-validation-error
	{
		display: inline-block;
		margin: 10px 0;
	}

	.old-password
	{
		overflow: hidden;
		margin: 10px 0;

		.field-validation-error
		{
			float: left;
			margin-bottom: 0;

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

	.input-validation-error
	{
		display: block;
		margin-bottom: 1px;
	}

	#password-meter
	{
		width: 100%;

		.text,
		.meter
		{
			width: 100%;

			.password-meter-strong
			{
				width: 100%;
			}
		}
	}

	input[data-val-required]
	{
		width: 100%;
		box-sizing: border-box;
		border: none;
		border-bottom: 1px solid;
		outline: 0;
		padding: 5px 0;
	}

	label
	{
		font: 400 12px @title-font;
		color: #6893a8;
	}
}

#site-holder #site-main.my-resources
{
	padding: 0 15px 15px 15px;

	.user-profile
	{
		margin: 10px -15px -15px;
	}
}

.notification-tooltip
{
	.tooltip-inner
	{
		max-width: 230px;
		float: right;
		border-radius: 2px;
		background-color: @charcoal-grey;
		opacity: .9;
		font-size: 12px;
		font-weight: normal;
		color: white;

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

.loadingPaged
{
	width: 100%;
	text-align: center;
}