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

@off-white: #f0f0ec;

.go-premium
{
	padding: 25px 20px 10px 20px;

	h1
	{
		font: bold 1.5em @title-font;
		text-align: center;
		width: 650px;
		margin: 10px auto 0 auto;
	}

	h2
	{
		text-align: center;
		margin: 10px 0 0 0;

		span
		{
			color: @accent-color;
			font-size: 22pt !important; // it's for atlas.
		}
	}

	.hint
	{
		color: gray;
		margin: 0 0 35px 0;
		font: normal 0.9em @title-font;
		text-align: center;
	}

	a
	{
		color: @accent-color;
		font: 0.9em @title-font;
	}


	.option
	{
		text-align: left;
		vertical-align: top;

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

		span
		{
			display: inline-block;
			margin: 10px 10px 0 0;
			float: left;
			width: 24px;
			height: 0;
			border-bottom: solid 1px #6993a9;

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

		p
		{
			margin: 0 0 5px 40px;
			font-family: @title-font;
			font-size: 16px;

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

	.plan-description
	{
		display: inline-block;

		h3
		{
			font: bold 30px @title-font;
			margin: 0 0 20px;
			text-align: left;
			color: black;

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

		h4
		{
			font: bold 12pt @title-font;
			margin: 0;
			text-align: center;

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

		ul
		{
			list-style-type: none;
			margin: 0;
			padding: 0;
			width: 420px;
		}

		& > p
		{
			font-size: 18px;
			font-weight: bold;
			width: 420px;
		}
	}

	.context
	{
		margin: 15px 0;

		#title
		{
			font: bold 14pt @title-font;
			margin-bottom: 5px;
		}

		#caption
		{
			color: gray;
			font: 9.5pt @title-font;
		}
	}

	.announcement
	{
		width: 470px;
		box-sizing: border-box;
		padding: 0 0 20px 0;
		vertical-align: top;
		display: inline-block;

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

		li
		{
			display: block;
			margin: 5px 0;
			padding-bottom: 5px;
		}

		p
		{
			color: #353d40;
		}
	}

	.education
	{
		background-color: #e0f4f8;

		div
		{
			width: 940px;
			height: 80px;
			.margin-left-right(-20px, 0);
			padding-top: 23px;
			box-sizing: border-box;
			background-repeat: no-repeat;
			.hires("/img/v4/premium/banner", "jpg");
			font-size: 18px;
			text-align: center;

			a
			{
				display: inline-block;
				color: @accent-color;
				font-weight: bold;
				font-size: 14px;
				text-decoration: none;
				background: white;
				border-radius: 2px;
				padding: 8px 15px;
				.margin-left-right(10px, 0);
			}

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

				a
				{
					.margin-left-right(0, 10px);
				}
			}
		}
	}

	#chat
	{
		margin-top: 40px;
		margin-bottom: 20px;
		text-align: center;

		p
		{
			font: bold 12pt @title-font;
			text-align: center;
			margin: 0;
		}

		a
		{
			color: #1e77bd;
			display: inline-block;
			text-align: center;
			margin: 15px auto 0 auto;
			padding: 10px 20px;
			text-decoration: none;
			font: normal 12pt @title-font;
			border-radius: 4px;
		}
	}

	.purchase
	{
		margin: 0;
		width: 437px;
		min-height: 420px;
		display: inline-block;
		padding: 25px 45px;

		&#register-form
		{
			padding: 0 0 0 28px;

			div.form.register
			{
				width: 420px;

				div.tabs
				{
					width: 420px;
					background: #f7f7f7;
					height: 60px;
				}

				label
				{
					font-size: 16px;
					width: 390px;

					& + p
					{
						font-size: 14px;
					}
				}

				input.text-box
				{
					width: 420px;
					box-sizing: border-box;
					margin-top: 0;
					background: #c8d7df;
					font-size: 18px;
					color: #292929;
					border: 0;
					border-radius: 0;
					padding: 10px 15px;
					height: 50px;

					&::placeholder 
					{ /* Chrome, Firefox, Opera, Safari 10.1+ */
						color: #646464!important;
						opacity: 1; /* Firefox */
					}

					&:-ms-input-placeholder 
					{ /* Internet Explorer 10-11 */
						color: #646464!important;
					}

					&::-ms-input-placeholder 
					{ /* Microsoft Edge */
						color: #646464!important;
					}

				}

				p
				{
					font-size: 14px;
				}

				&.size-50, .size-100
				{
					width: auto;
				}
			}
		}

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

	.benefits
	{
		margin-top: 20px;
		padding-bottom: 20px;

		> h3
		{
			font: bold 12.5pt @title-font;
			margin: 10px 0 40px 0;
			text-align: center;
		}

		.col1, .col2
		{
			display: inline-block;
			width: 400px;
			margin: 0 0 30px 0;
		}

		.col2
		{
			.padding-left-right(60px, 0);

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

	.billing
	{
		h2
		{
			text-align: left;
			margin: 20px 0 0 0;
			font: bold 1.1em @title-font;
		}

		p
		{
			font-size: 9pt;
		}
	}

	&.history
	{
		h2
		{
			text-align: left;
			font: bold 1.1em @title-font;
			margin: 20px 0;
			color: black;

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

		table
		{
			margin-top: 10px;

			tr
			{
				border-bottom: 1px solid #eaeaea;
			}

				tr:nth-child(odd)
				{
					background-color: white;
				}

			th
			{
				color: @accent-color;
				padding-left: 0;
			}

			td
			{
				padding-left: 0;
				font-size: 0.9em;

				img
				{
					width: 32px;
					vertical-align: middle;
				}

				.credit-transaction
				{
					color: red;
				}
			}
		}

		ol
		{
			margin: 0;
			list-style-type: decimal;

			li
			{
				margin-top: 5px;
			}
		}

		a
		{
			&.back
			{
				text-decoration: none;
				unicode-bidi: embed;
			}

			&.dataset
			{
				display: inline-block;
			}
		}

		b
		{
			.margin-left-right(10px, 0);
			font: bold 0.9em @title-font;

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

		p
		{
			font-size: 0.9em;
		}

		.purchase
		{
			width: 350px;
			padding: 0;
			box-shadow: none;
			display: block;

			.update-credit-card-btn
			{
				border-radius: 3px;
				display: inline-block;
				text-align: center;
				padding: 8px 25px;
				margin: 25px 0 10px 0;
				font: bold 0.95em @title-font;
				background-color: #5DA90B;
				text-decoration: none;
			}

			#update-card-done i
			{
				.margin-left-right(0, 5px);

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

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

	&.thankyou
	{
		.announcement
		{
			display: none;
		}

		.purchase
		{
			width: 100%;
			min-height: 20px;
			box-shadow: none;
		}

		#premium-thankyou-container
		{
			text-align: center;

			p
			{
				margin: 5px 0;
				font: 0.9em @title-font;
			}

			.back
			{
				border-radius: 3px;
				display: inline-block;
				text-align: center;
				padding: 10px 25px;
				margin: 15px 0 10px 0;
				font: bold 11pt @title-font;
			}
		}

		.plan-description ul li
		{
			display: inline-block;
			vertical-align: top;
		}

		.option
		{
			width: 255px;
			text-align: center;
			margin: 10px 20px;

			span
			{
				float: none;
				display: block;
				margin: auto;

				html[dir='rtl'] &
				{
					float: none;
					margin: auto;
				}
			}

			p
			{
				margin: 0;


				&.title
				{
					font-weight: bold;
					margin: 10px 0;
				}

				&.text
				{
					font-size: 0.8em;

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

			hr
			{
				display: none;
			}
		}
	}

	a.premium-btn
	{
		width: 236px;
		border-radius: 3px;
		display: inline-block;
		padding: 14px 0;
		margin: 15px 0 10px 0;
		font: normal 19px @title-font;
		color: white;
		text-align: center;
		text-transform: uppercase;
		box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.24);
	}

	.business, .individual
	{
		display: none;

		&.selected
		{
			display: block;

			&.one-month-pass
			{
				display: none;
			}
		}
	}

	.method.business
	{
		display: none;
	}

	.price
	{
		text-align: center;
		margin: 10px 0 0 0;
		font-weight: bold;
		font-size: 1.1em;

		&.subscriber
		{
			display: none;
		}

		span
		{
			color: @accent-color;
			font-size: 1.8em;
		}
	}

	.period
	{
		margin: 0 0 35px 0;
		font: normal 0.9em @title-font;
		text-align: center;
	}

	&.landing
	{
		padding: 0;

		.wrap
		{
			width: 940px;
			margin: auto;
		}

		.premium-tabs, .tab-content, .testimonials
		{
			display: none !important;
		}

		.education
		{
			margin: 0 auto;

			div
			{
				margin: auto;

				html[dir='rtl'] &
				{
					margin: auto;
				}
			}
		}

		#chat
		{
			background-color: #6993a9;
			height: 360px;
			margin: 20px 0 0;
			padding: 80px 0 0;
			.hires('/Img/v7/bg-transparent');
			background-position: center;

			h3
			{
				font-size: 36px;
				font-weight: bold;
				text-align: center;
				color: white;
				text-transform: uppercase;
			}

			p
			{
				margin-top: 15px;
				font-size: 24px;
				font-weight: normal;
				text-align: center;
				color: white;
			}

			a
			{
				width: 236px;
				height: 56px;
				font-size: 19px;
				padding: 15px 0;
				margin-top: 35px;
				box-sizing: border-box;
				background-color: white;

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

		.header-bg
		{
			height: 135px;
			width: 100%;
			.hires('/img/v7/bg-gray', "jpg", @backgroundSize: 578px 482px);
			background-color: #353c40;
			background-size: 578px 482px;
			padding-top: 20px;
			margin-bottom: 30px;

			.dark-gradient
			{
				width: 100%;
				height: 155px;
				top: 70px;
			}

			h1,
			p
			{
				width: 940px;
				text-align: left;
				z-index: 1;
				position: relative;

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

			h1
			{
				color: #fff;
				font-size: 56px;
				font-weight: normal;
				margin: 0 auto;
			}

			p
			{
				color: #fff;
				font-size: 16px;
				margin: 0 auto;
				margin-top: 10px;
			}
		}

		div#register-form > h2
		{
			font-size: 28px;
			margin: 0;
			margin-bottom: 15px;
			text-align: left;

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

.data-source-activate-premium,
.data-source-activate-signup
{
	background-color: @off-white;
	padding: 5px 10px;
	margin-bottom: 20px;

	div
	{
		vertical-align: middle;
		width: 420px;
		display: inline-block;
		.margin-left-right(0, 20px);

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

		img
		{
			width: 80px;
			height: 80px;
			display: inline-block;
			vertical-align: middle;
			float: left;
			.margin-left-right(0, 10px);

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

		em
		{
			width: 48px;
			height: 48px;
			display: inline-block;
			vertical-align: middle;
			float: left;
			.hires("/img/v2/dsbrowser/v3/ico-globe-activate-premium");
			.margin-left-right(0, 8px);

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

		span
		{
			position: relative;
			top: 5px;
		}
	}

	.activate
	{
		padding: 5px 10px;
		text-decoration: none;
		font: bold 0.9em @title-font;
		border-radius: 3px;
		display: inline-block;
		position: relative;
		top: 2px;
		text-transform: uppercase;
	}
}

@media all and (min-width: 1440px)
{
	.with-media#site-holder .data-source-activate-premium,
	.with-media#site-holder .data-source-activate-signup
	{
		text-align: center;
		overflow: hidden;
		.margin-left-right(0, 10px);

		div
		{
			width: 100%;

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

			span
			{
				top: 5px;
				display: block;
				text-align: left;

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

			em
			{
				margin-top: 5px;
				.margin-left-right(5px, 16px);

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

		.activate
		{
			margin-top: 15px;
			margin-bottom: 10px;
		}

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

.send-receipt
{
	p
	{
		font: 1.1em @title-font;
		font-weight: bold;
		margin-top: 0;
		margin-bottom: 40px;
	}

	input
	{
		padding: 6px;
		width: 165px;
		font-size: .8em;
		border: 1px solid #ccc;
		.margin-left-right(0, 5px);

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

	.ui-button
	{
		padding: 7px 24px !important;
		display: inline-block;
		font-size: 0.8em;
		font-weight: bold;
		width: 60px;
	}

	div
	{
		display: none;
		color: red;
		font-size: 10pt;
		margin-top: 3px;
	}
}

.wrap-academic
{
	width: 700px;
	margin: 0 auto;

	input.ui-button
	{
		font-size: 14px;
		padding-top: 3px;
		text-align: center;
		width: 100px;
		height: 34px;
		float: right;

		&[disabled]
		{
			cursor: default;
			background-color: #999;
		}

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

	a
	{
		color: @accent-color;
		text-decoration: underline;
		font: normal 10pt @title-font;
		outline: none;

		&.find-university
		{
			display: inline-block;
			margin-top: 17px;
			text-decoration: none;
			border-bottom: 1px dotted;

			&.hidden
			{
				display: none;
			}
		}
	}

	span.error
	{
		display: block;
		color: #c13a3f;
		font-size: 9pt;
		margin-top: 10px;
	}

	.text
	{
		width: 100%;
		padding: 5px;
		border: 1px solid #9bd2fe;
		box-sizing: border-box;
		font-size: 14px;
		height: 34px;

		&.verification
		{
			width: 580px;
		}
	}
}