@import "../mixins.less";

.dashboard
{
	padding-bottom: 40px;

	h2
	{
		font-size: 1.6em;
		text-align: center;
		margin: 60px 0 20px 0;
	}

	h3
	{
		font-size: 1.1em;
		margin: 20px auto;
		text-align: center;

		span
		{
			font-weight: bold;
			font-size: 1.5em;
		}
	}

	#timezone
	{
		width: 700px;
		margin: auto;
		background-color: #f7f7f7;
		text-align: center;
		font-size: 0.9em;

		> div
		{
			display: inline;
		}

		.icon
		{
			display: inline-block;
			vertical-align: middle;
			margin: 0 20px;
			width: 64px;
			height: 64px;
			.hires2('/img/bot/ico-timezone');
		}

		a
		{
			color: #12A812;
			margin-right: 20px;
			margin-left: 5px;

			.arrow
			{
				display: inline-block;
				vertical-align: middle;
				margin-left: 3px;
				width: 0;
				height: 0;
				border-style: solid;
				border-width: 5px 4px 0 4px;
				border-color: #12A812 transparent transparent transparent;
			}
		}

		#report-time-setting
		{
			display: none;
		}
	}

	#messengers
	{
		text-align: center;
	}

	#digest, #notifications
	{
		padding-bottom: 20px;
		margin-top: 30px;
		margin-bottom: 30px;
	}

	#save
	{
		padding: 10px 30px;
		font-weight: bold;
	}

	table
	{
		width: 750px;
		margin: auto;

		tr
		{
			cursor: pointer;
		}

		th, td
		{
			padding: 8px;
			border-bottom: 1px solid #f4f4f4;
			height: 34px;
			vertical-align: top;

			&.loading
			{
				background-position: center right;
				background-size: 15px 15px;
			}

			&.notification
			{
				max-width: 500px;
				min-width: 500px;

				p
				{
					margin: 0;
					color: gray;
					position: relative;
					top: 6px;

					strong
					{
						font-weight: normal;

						&:first-child
						{
							font-size: 1.3em;
							font-weight: bold;
							color: #222;
						}
					}
				}

				&.collapsed
				{
					> p
					{
						display: none;

						&:first-child
						{
							display: block;

							&:after
							{
								content: '';
								display: inline-block;
								vertical-align: middle;
								margin-left: 5px;
								width: 0;
								height: 0;
								border-style: solid;
								border-width: 5px 4px 0 4px;
								border-color: #12A812 transparent transparent transparent;
							}
						}
					}
				}

				&.expanded
				{
					> p
					{
						&:first-child:after
						{
							display: none;
						}

						&:last-child:after
						{
							content: '';
							display: inline-block;
							vertical-align: middle;
							margin-left: 5px;
							width: 0;
							height: 0;
							border-style: solid;
							border-width: 0 4px 5px 4px;
							border-color: transparent transparent #12A812 transparent;
						}

						strong:first-child
						{
							font-weight: normal;
							font-size: 1em;
						}

						&.cut
						{
							display: none;
						}
					}
				}
			}

			&.delete
			{
				max-width: 70px;
				min-width: 70px;
				text-align: right;

				a
				{
					text-decoration: none;
					color: #fff;
					background-color: #e42929;
					padding: 3px 10px;
					border-radius: 3px;
					font-size: 0.9em;
					position: relative;
					top: 6px;
				}
			}

			span
			{
				display: inline-block;
			}

			.dots
			{
				background: url(/img/bot/dots.png);
				width: 6px;
				height: 10px;
				display: inline-block;
			}

			.query
			{
				position: relative;
				top: 9px;
				width: 210px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow-x: hidden;
			}
		}

		th
		{
			text-align: left;
			max-width: 300px;
			min-width: 300px;
			font-weight: normal;
		}
	}

	.tutorial
	{
		text-align: center;
	}

	#digest-tutorial
	{
		.hires2('/img/bot/Yodatai-Dashboard-3');
		width: 520px;
		height: 420px;
		margin: auto;
	}

	.messenger
	{
		display: inline-block;
		vertical-align: middle;
		margin: 20px;
		border: 1px solid #ccc;
		border-radius: 30px;
		width: 150px;
		text-decoration: none;
		color: #222;
		font-weight: bold;
		padding: 5px;
	}

	#integrations
	{
		text-align: center;

		& > a
		{
			display: inline-block;
		}

		.source
		{
			display: inline-block;
			margin-right: 30px;
			border: 1px solid #e7e9e9;
			border-radius: 5px;
			padding: 20px 30px;
			margin: 10px 20px;
			vertical-align: top;
			position: relative;

			&.ready:before
			{
				position: absolute;
				top: 5px;
				right: 5px;
				color: #12A811;
				font-size: 20px;
				content: "\f00c";
				font-family: 'FontAwesome';
			}

			span
			{
				width: 100px;
				height: 50px;
				display: block;
				line-height: 50px;
				color: @yodatai-green-btn;
				text-shadow: 0 1px 0 rgba(0,0,0,.2);
			}

			&.amplitude span
			{
				background: url('/img/bot/amplitude.png') no-repeat center center;
				background-size: contain;
			}
		}
	}
}

.mobile
{
	h2
	{
		margin: 30px 0 20px 0;
	}

	h3
	{
		padding: 0 5px;
	}

	.dashboard > div
	{
		margin: 0 10px;
	}

	#messengers
	{
		margin: 0;
		padding-top: 10px;
	}

	.messenger
	{
		margin: 20px 0;
		width: 90px;
		font-weight: normal;
		font-size: 0.8em;

		span
		{
			background-size: contain;
			background-repeat: no-repeat;
			width: 16px;
			height: 16px;
		}
	}

	#digest, #notifications
	{
		padding-bottom: 0;

		p
		{
			top: 0;
		}
	}

	#digest-tutorial, #notifications-tutorial
	{
		width: 300px;
		height: 250px;
		background-size: contain;
	}

	table
	{
		width: 100%;

		th
		{
			width: 100px;
		}

		th, td
		{
			padding: 3px;

			.query
			{
				width: 100px;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow-x: hidden;
				top: 0;
			}

			&.notification
			{
				width: 200px;
			}

			.dots, .channel-ico
			{
				display: none;
			}

			&.delete
			{
				width: 1px;
				text-align: right;
				padding: 3px 0;

				a
				{
					span
					{
						display: none;
					}

					display: inline-block;
					font: normal normal normal 14px/1 FontAwesome;
					font-size: inherit;
					text-rendering: auto;
					-webkit-font-smoothing: antialiased;
					width: 16px;
					color: #e42929;
					background: none;
					padding: 0;

					&:before
					{
						content: "\f014";
					}
				}
			}
		}
	}

	#timezone
	{
		width: 100%;

		.icon
		{
			width: 30px;
			height: 30px;
			margin: 0 10px;
		}

		a
		{
			margin-right: 0;
		}

		> div
		{
			white-space: nowrap;
		}

		&.long
		{
			padding: 0 0 10px;

			.icon
			{
				float: left;
				width: 64px;
				height: 64px;
				margin: 0 10px;
			}

			> div
			{
				display: block;
				padding: 10px 0 0 0;
			}
		}
	}
}

.select2-container
{
	.selection
	{
		display: none;
	}
}

.select2-dropdown
{
	border: none;
}

.select2-search--dropdown
{
	padding: 5px 0;
}

.select2-container--default .select2-results > .select2-results__options
{
	max-height: 220px;
}

.splashscreen .title
{
	font-weight: bold;
}