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

@slate-blue: #6993a9;
@mercury: #e2e2e2;
@alabaster: #f7f7f7;
@sky: #c8d7df;

.subscriptions
{
	h2
	{
		font: 16pt @title-font;
		margin: 10px 0;
		a
		{
			color: #222;
		}
	}

	h3
	{
		font: bold 12pt @title-font;
		margin: 20px 0 10px 0;
		border-bottom: none;
	}

	p
	{
		font-size: 10.5pt;

		a
		{
			color: @accent-color;
		}
	}

	#data-alerts, #update-alerts
	{
		p
		{
			margin: 0;
		}
	}

	.subscription
	{
		border-bottom: 1px dotted #eaeaea;

		img
		{
			border: 1px solid #eaeaea;
			float: left;
			height: 50px;
			margin: 10px 10px 0 0;

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

		.img
		{
			height: 50px;
			width: 50px;
			background-position: center center;
			background-repeat: no-repeat;
			background-size: contain;
			display: inline-block;
			float: left;
			margin: 10px 10px 0 0;

			&.page
			{
				background-image: url(/img/v2/shared/page.png);
			}

			&.dataset
			{
				background-image: url(/img/v2/shared/dataset.png);
			}

			&.presentation
			{
				background-image: url(/img/v2/shared/presentation.png);
			}

			.preview
			{
				height: 50px;
				width: 50px;
			}

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

		a
		{
			text-decoration: none;
			font: bold 10.5pt @title-font;
			color: @accent-color;

			&.follow
			{
				display: inline-block;
				background-color: @accent-color;
				color: white;
				font: bold 9pt @title-font;
				padding: 4px 5px;
				border-radius: 3px;
				float: right;

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

				i
				{
					margin: 0 5px 0 0;

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

		.user
		{
			height: 70px;
		}

		.resource
		{
			height: 70px;
		}

		.tag
		{
			padding: 15px 0;
		}

		&.data-alert, &.update-alert
		{
			padding: 15px 0;
			font: 10pt @title-font;

			p
			{
				margin: 5px 0;
			}
		}

		.settings
		{
			color: #666;
			font: italic 9.5pt @title-font;
			margin-top: 5px;

			a.edit-alert
			{
				font: normal 9pt @title-font;
				border-bottom: 1px dotted #0077ca;
				.margin-left-right(5px, 0);

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

		.title
		{
			padding: 10px 0 0 10px;

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

			span
			{
				font-size: 9pt;
			}
		}
	}

	.notifications
	{
		font-size: 10.5pt;
		margin: 20px 0;

		> form > div
		{
			margin: 10px 0;
		}
	}
}

.data-alert
{
    .error-message
    {
        display: block;
        font-size: 10pt;
        color: #C13A3F;
        margin: 10px auto 10px;
    }

    &.form
    {
        .data-alert-radiobtn-item
        {
            margin-bottom: 5px;
        }

        input.text-box
        {
            background-color: @alabaster;
            border: 1px solid @mercury;
            color: #000;
            font-size: 14px;
            line-height: 18px;
            letter-spacing: 0.17px;
            font-family: @title-font;
            padding: 6px 7px;
            width: 100%;
            box-sizing: border-box;
            height: auto;

            &:focus
            {
                outline: 0;
                -webkit-appearance: none;
            }

            &::selection
            {
                background-color: @sky;
            }

            &::-moz-selection
            {
                background-color: @alabaster;
            }
        }

        label
        {
            font-weight: normal;

            &.alert-label
            {
                display: block !important;
                font-size: 14px;
                font-family: @title-font;
                font-weight: bold;
                margin: 10px 0 5px;
                line-height: 1.43;
                color: @slate-blue;
                text-transform: uppercase;
            }
        }
    }

    select.alert-select
    {
        font: 10.5pt @title-font;
        padding: 5px;
        margin-bottom: 10px;
    }
}

.email-subscriptions
{
	h2
	{
		font: 22px @title-font;
		margin: 10px 0;

		a
		{
			color: #222;
		}
	}

	h3, h4, label
	{
		font: bold 19px @title-font;
		margin: 20px 0 10px;
		border-bottom: none;
	}

	h4, label, p
	{
		font-size: 16px;
	}

	label
	{
		margin-left: 5px;

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

	p
	{
		margin-top: 5px;
		margin-left: 20px;

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