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

.plan
{
	display: inline-block;

	.icon
	{
		width: 60px;
		height: 60px;
		display: inline-block;
		vertical-align: top;

		&.premium
		{
			background: url(/Img/v4/premium/icon_premium.png);
		}

		&.non-premium
		{
			background: url(/Img/v4/premium/icon_no_premium.png);
		}
	}

	.details
	{
		display: inline-block;
		vertical-align: top;
		font: 0.9em @title-font;
		color: gray;
		.margin-left-right(15px, 0);

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

		.expiry
		{
			display: block;
			margin: 5px 0;
		}

		.name
		{
			color: black;
			font: bold 11pt @title-font;
			display: block;
		}

		a
		{
			font: bold 0.9em @title-font;
			color: @accent-color;
			border-bottom: 1px dotted @accent-color;
			text-decoration: none;
			margin-right: 10px;

			&.cancel, &.activate
			{
				display: inline-block;
				padding: 3px 8px;
				color: white;
				border-radius: 3px;
				text-decoration: none;
				border-bottom: none;
				margin-top: 3px;
				.margin-left-right(0, 5px);

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

			&.cancel
			{
				background-color: @accent-color;
			}

			&.activate
			{
				background-color: #5da90b;
			}
		}
	}
}

.dlg-cancel 
{
	.ui-dialog-title
	{
		font-family: @title-font;
		padding-bottom: 10px;
	}

	.ui-widget-content
	{
		font-size: 10pt;
	}

	.ui-state-disabled
	{
		padding: 0 !important;
	}
}