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

#braintreeDataFrame
{
	display: none;
}

.credit-card.v7
{
	.warning
	{
		padding: 16px 49px 16px 22px;
		font: bold 18px @title-font;
		background-color: #ffffd8;
		color: #353d40;
		
		html[dir='rtl'] &
		{
			.padding-left-right(49px, 22px);
		}

	}

	form
	{
		label
		{
			display: none;
			font: bold 18px @title-font;
			color: #353d40;

			&[for=expiry]
			{
				display: block;
				margin-top: 13px;
			}

			&[for=cvv]
			{
				display: none;
			}
		}

		select
		{
			font: 18px @title-font;
			height: 60px;
			width: 180px;
			vertical-align: top;
			color: #292929;
			background: #c8d7df;
			border: none;
			border-radius: 0;
			.margin-left-right(0, 11px);
			background-image: url(/Img/v7/shared/input-arrow.svg);
			margin-right: 11px;
			background-repeat: no-repeat;
			background-size: 19px 10px;
			background-position: 136px 25px;
			-webkit-appearance: none;
			-moz-appearance: none;
			.padding-left-right(28px,28px);

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

			&#year
			{
				width: 136px;
				.padding-left-right(28px,28px);
				background-position: 92px 25px;
				.margin-left-right(0, 11px);

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

		select::-ms-expand
		{
			opacity: 0;
		}

		input
		{
			font-size: 18px;
			font-family: @title-font;
			color: #292929;
			border: none;
		}

			input[type=text]
			{
				display: inline-block;
				padding: 5px 25px;
				width: 437px;
				height: 60px;
				box-sizing: border-box;
				background: #c8d7df;
				border: none;
				border-radius: 0;

				&::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;
				}

				&#cvv
				{
					width: 99px;
					float: none;
					margin-right: 0;

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

	p.note
	{
		color: #292929;
		font-size: 16px;
		margin-top: 15px;
	}

	.plans
	{
		margin-bottom: 15px;

		.plan
		{
			padding: 15px 10px;
			border: none;
			border-radius: 0;
			background: #f7f7f7;
		}
	}
}

.credit-card
{
	min-height: 350px;

	.cards
	{
		margin-top: 10px;
		margin-bottom: 10px;

		span
		{
			display: inline-block;
			width: 80px;
			height: 40px;
			.margin-left-right(0, 10px);
			background-color: #f0f0ec;

			&.blue-background
			{
				background-color: #016fd0;
			}

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

			background-repeat: no-repeat;
			background-position: center;

			&#visa
			{
				.hires("/img/v7/professional/ico-visa", "png", contain);
			}

			&#mastercard
			{
				.hires("/img/v7/professional/ico-mastercard", "png", contain);
			}

			&#american-express
			{
				.hires("/img/v7/professional/ico-american-express", "png", contain);
			}

			&#discover
			{
				.hires("/img/v7/professional/ico-discover", "png", contain);
			}

			&#jcb
			{
				.hires("/img/v7/professional/ico-jcb", "png", contain);
			}

			&#paypal
			{
				.hires("/img/v7/professional/ico-paypal", "png", contain);
			}
		}
	}

	.warning
	{
		padding: 10px;
		font: .8em @title-font;
		background-color: #FFF1AD;
		margin-top: 5px;

		&.monthly .monthly
		{
			display: block;
		}

		&.monthly .annual
		{
			display: none;
		}

		&.annual .monthly
		{
			display: none;
		}

		&.annual .annual
		{
			display: block;
		}
	}

	form
	{
		label
		{
			display: block;
			font: bold .8em @title-font;
			color: #666;
			margin: 10px 0 3px 0;

			&[for=cvv]
			{
				margin-top: -18px;
				margin-bottom: 0px;
				float: right;

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

		p
		{
			&.csv-hint
			{
				width: 10px;
				height: 10px;
				background: url(/img/business/question.png) no-repeat center center;
				cursor: pointer;
				position: relative;
				display: inline-block;
				float: right;
				right: -45px;

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

				&:hover span
				{
					opacity: 1;
					display: block;
				}

				span
				{
					display: none;
					position: absolute;
					margin-left: 20px;
					padding: 7px 10px;
					background-color: #fff;
					box-shadow: 0 0 10px 1px #ccc;
					width: 150px;
					opacity: 0;
					color: #666666;
					font: 0.7em @title-font;
				}
			}

			&.failed-hint
			{
				color: #CC0000;
			}
		}

		select
		{
			font: .8em @title-font;
			padding: 5px 8px;
			height: 37px;
			width: 120px;
			border: 1px solid #9BD2FE;
			border-radius: 3px;
			vertical-align: top;

			&#year
			{
				width: 80px;
				.margin-left-right(5px, 30px);

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

		input
		{
			font-size: .8em;
		}

		input[type=text]
		{
			display: inline-block;
			padding: 5px 8px;
			border: 1px solid #9BD2FE;
			border-radius: 3px;
			width: 350px;
			height: 36px;
			box-sizing: border-box;

			&#cvv
			{
				width: 50px;
				float: right;
				.margin-left-right(0, 3px);

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

		.checkboxes, .terms-of-use, #no-account
		{
			display: none;
		}
	}

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

	.promo
	{
		input[type=text]
		{
			width: 150px;
			font-weight: bold;
		}
	}

	#add-promo-code
	{
		text-decoration: none;
		border-bottom: 1px dotted;
		display: inline-block;
		margin-top: 10px;
		color: @accent-color;
	}

	#cancel-promo-code
	{
		display: none;
	}

	.plans
	{
		margin-top: 15px;

		.plan
		{
			display: block;
			padding: 5px 10px;
			margin-top: 10px;
			cursor: pointer;
			border: 1px solid #eaeaea;
			border-radius: 5px;

			strong
			{
				text-transform: uppercase;
			}

			.title
			{
				display: inline-block;
				color: #353d40;
				font-size: 18px;

				input
				{
					position: relative;
					top: 10px;
					margin: 0 15px;

					&:after
					{
						content: " ";
						position: relative;
						top: -4px;
						left: -3px;
						display: inline-block;
						width: 22px;
						height: 22px;
						.hires("/Img/v7/shared/radiobutton-inactive");

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

					&:checked:after
					{
						.hires("/Img/v7/shared/radiobutton-active");
					}
				}

				label
				{
					font-weight: normal;
					color: black;
					display: inline-block;
					margin-left: 5px;
					margin-top: 5px;
					cursor: pointer;

					span
					{
						font-weight: bold;
					}
				}
			}

			.price
			{
				display: inline-block;
				float: right;
				color: #292929;
				font: 12px @title-font;
				margin-top: 3px;
				text-align: right;

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

				span
				{
					display: block;
					font: bold 24px @title-font;
					color: #6993a9;
				}
			}

			.total
			{
				font: 16px @title-font;
				color: #292929;
				margin: 0 50px;
				margin-bottom: 5px;
			}

			&.no-radio
			{
				input[type=radio], i
				{
					display: none;
				}

				.total
				{
					margin-left: 5px;
				}
			}

			&.one-month-pass .price
			{
				margin-top: 10px;
			}
		}
	}
}

.users
{
	margin-bottom: 20px;

	> div
	{
		background-color: #f0f9fe;
		padding: 15px;
		border-radius: 3px;
		font-size: 0.9em;

		.row
		{
			padding: 10px;

			.item
			{
				display: inline-block;
			}

			.value
			{
				display: inline-block;
				float: right;

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

			&.dashed
			{
				border-bottom: 1px dashed #c0c0c0;
				padding-bottom: 10px;

				.value
				{
					margin-top: 5px;
				}
			}

			&.total
			{
				font-weight: bold;
				border-top: 1px dashed gray;
				padding-top: 10px;
				margin-top: 10px;
			}

			&.discount
			{
				display: none;
			}

			input[type=text]
			{
				margin-left: 10px;
				border: 1px solid #9BD2FF;
				padding: 5px;
				border-radius: 3px;
				width: 30px;
			}
		}
	}
}

.payment-method
{
	font-size: 0.9em;
	margin-bottom: 20px;

	input[type="radio"]
	{
		.margin-left-right(0, 10px);

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

	label
	{
		unicode-bidi: embed;
	}

	label[for="credit-card"]
	{
		.margin-left-right(0, 20px);
	}
}

.method.invoice
{
	margin-top: 20px;
	font-size: 0.9em;

	> form > div
	{
		margin: 15px 0;

		label
		{
			display: block;
			margin-bottom: 3px;
		}

		input
		{
			display: inline-block;
			padding: 5px 8px;
			border: 1px solid #9bd2fe;
			border-radius: 3px;
			box-sizing: border-box;
			height: 36px;
			font-size: 1em;
			width: 100%;
		}
	}

	.validator
	{
		font-size: 0.9em;
	}

	.premium-btn
	{
		margin-top: 0;
		font-size: 0.95em;
	}
}

.validator
{
	display: none;

	&.invalid, &.invalid-required
	{
		display: block;
		font: bold 0.8em @title-font;
		color: #CC0000;
		margin: 3px 0;
	}
}

.chzn-container
{
	max-width: initial !important;

	.chzn-single
	{
		width: 332px;
		border: 1px solid #9bd2fe !important;
		padding: 8px;
		border-radius: 3px;
		background-color: #fff;
		box-shadow: none;

		span
		{
			font-size:1.15em;
		}

		div
		{
			border-left: none;
			background: none;
			width: 22px;

			b
			{
				background-position: 4px 2px;
			}
		}
	}

	.chzn-drop
	{
		width: 348px !important;

		input
		{
			width: 325px !important;
			height: 30px !important;
		}
	}
}

.business
{
	.credit-card p.maintenance-break-message
	{
		font-size: 1.1em;
		text-align: center;
		line-height: 2em;
		margin-bottom: 280px;

		a
		{
			font-size: 1em;
		}
	}

	&.selected
	{
		.credit-card p.maintenance-break-message
		{
			margin-bottom: 50px;
		}
	}
}