﻿.dont-leave-hint-background {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0, 0.5);
}

#dontLeaveHint .ns-box {
	position: absolute;
	width: 330px;
	border-radius: 2px;
	background-color: #1C7EBC;
	z-index: 5;
	color: rgba(250,251,255,0.95);
	top: 0 !important;
	right: -20px;
	left: -345px;
}

.ns-box-inner {
	padding: 18px 22px 22px;
}

.ns-box:after {
	content: '';
	position: absolute;
	border: 10px solid transparent;
	border-left-color: #1C7EBC;
	right: -20px;
	bottom: auto;
	top: 26px;
}

.ns-close {
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjIuODIyMjIyMm1tIiAgIGhlaWdodD0iMi44MjIyMjIybW0iICAgdmlld0JveD0iMCAwIDkuOTk5OTk5NiAxMCIgICBpZD0ic3ZnMzU1NyIgICB2ZXJzaW9uPSIxLjEiICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45MSByMTM3MjUiICAgc29kaXBvZGk6ZG9jbmFtZT0ic2VycHRvb2x0aXAuc3ZnIj4gIDxkZWZzICAgICBpZD0iZGVmczM1NTkiIC8+ICA8c29kaXBvZGk6bmFtZWR2aWV3ICAgICBpZD0iYmFzZSIgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIgICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiICAgICBpbmtzY2FwZTp6b29tPSI3LjkxOTU5NTkiICAgICBpbmtzY2FwZTpjeD0iMTEuNzU2NTQ3IiAgICAgaW5rc2NhcGU6Y3k9IjE5Ljc1NjEyMSIgICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJweCIgICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIgICAgIHNob3dncmlkPSJmYWxzZSIgICAgIGZpdC1tYXJnaW4tdG9wPSIwIiAgICAgZml0LW1hcmdpbi1sZWZ0PSIwIiAgICAgZml0LW1hcmdpbi1yaWdodD0iMCIgICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIiAgICAgaW5rc2NhcGU6d2luZG93LWhlaWdodD0iMTAxNyIgICAgIGlua3NjYXBlOndpbmRvdy14PSIxOTEyIiAgICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIgLz4gIDxtZXRhZGF0YSAgICAgaWQ9Im1ldGFkYXRhMzU2MiI+ICAgIDxyZGY6UkRGPiAgICAgIDxjYzpXb3JrICAgICAgICAgcmRmOmFib3V0PSIiPiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+ICAgICAgICA8ZGM6dHlwZSAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4gICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPiAgICAgIDwvY2M6V29yaz4gICAgPC9yZGY6UkRGPiAgPC9tZXRhZGF0YT4gIDxnICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIgICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiICAgICBpZD0ibGF5ZXIxIiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTM5Ni4zNjc4OCwtNDkzLjEwMDgpIj4gICAgPHBhdGggICAgICAgc3R5bGU9ImZpbGw6IzU3NTc1NztmaWxsLW9wYWNpdHk6MSIgICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIgICAgICAgZD0ibSAzOTYuMzY3ODgsNDk0LjM5NTk4IGMgMC40MTM3MiwtMC4zMDEyIDEuMjMxMDgsLTAuOTAzNjEgMS42NDQ4LC0xLjE5NDc4IDEuMTIwMDgsMS4xNTQ2MiAyLjI0MDE2LDIuMzA5MjQgMy4zNjAyNSwzLjQ2Mzg2IDEuMjQxMTcsLTEuMTk0NzggMi40NzIyNSwtMi4zODk1NiAzLjcxMzQyLC0zLjU2NDI2IDAuMzIyOSwwLjM3MTQ5IDAuOTU4NjIsMS4xMjQ1IDEuMjgxNTMsMS40OTU5OCAtMS4xODA2MywxLjE1NDYyIC0yLjM2MTI1LDIuMzE5MjggLTMuNTQxODgsMy40ODM5NCAxLjE3MDU0LDEuMTU0NjIgMi4zNTExNiwyLjMwOTI0IDMuNTMxNzksMy40NzM5IC0wLjMxMjgyLDAuMzgxNTIgLTAuOTI4MzYsMS4xNTQ2MSAtMS4yNDExNywxLjU0NjE4IC0xLjI1MTI2LC0xLjE5NDc4IC0yLjQ4MjM0LC0yLjM5OTYgLTMuNzMzNiwtMy41OTQzOCAtMS4xNjA0NSwxLjE2NDY2IC0yLjMyMDg5LDIuMzQ5NCAtMy40ODEzNCwzLjUyNDEgLTAuNDk0NDUsLTAuNDgxOTMgLTAuOTg4OSwtMC45NjM4NiAtMS40NzMyNiwtMS40MzU3NCAxLjE4MDYzLC0xLjE2NDY2IDIuMzcxMzUsLTIuMzI5MzIgMy41NTE5NywtMy40OTM5OCAtMS4yMTA5LC0xLjIzNDk0IC0yLjQxMTcsLTIuNDY5ODggLTMuNjEyNTEsLTMuNzA0ODIgeiIgICAgICAgaWQ9InBhdGgyOTgtOC00NyIgLz4gIDwvZz48L3N2Zz4=);
	background-size: cover;
	background-repeat: no-repeat;
	width: 10px;
	height: 10px;
	position: absolute;
	right: 6px;
	top: 5px;
	overflow: hidden;
	text-indent: 100%;
	cursor: pointer;
}

.ns-box-inner span {
	font-size: 18px;
	color: rgba(250,251,255,0.95);
}

.ns-box-inner p {
	font-size: 16px;
	margin-top: 10px;
	color: rgba(250,251,255,0.95);
}

/* Slide */
.ns-effect-slide {
	background-color: rgba(65,95,118,0.8);
	top: auto;
	bottom: 30px;
}

.ns-none {
	display: none;
}

/* Fly up */
.ns-effect-genie {
	top: -137px;
	right: 0;
	background-color: #1C7EBC;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2), 0 1px 6px rgba(0,0,0,0.3);
	text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

	.ns-effect-genie.ns-show,
	.ns-effect-genie.ns-hide {
		-webkit-animation-name: animGenie;
		animation-name: animGenie;
		-webkit-animation-duration: 0.4s;
		animation-duration: 0.4s;
	}

@-webkit-keyframes animGenie {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,calc(200% + 30px),0) scale3d(0,1,1);
		-webkit-animation-timing-function: ease-in;
	}

	40% {
		opacity: 0.5;
		-webkit-transform: translate3d(0,0,0) scale3d(0.02,1.1,1);
		-webkit-animation-timing-function: ease-out;
	}

	70% {
		opacity: 0.6;
		-webkit-transform: translate3d(0,-40px,0) scale3d(0.8,1.1,1);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
	}
}

@keyframes animGenie {
	0% {
		opacity: 0;
		-webkit-transform: translate3d(0,calc(200% + 30px),0);
		-webkit-animation-timing-function: ease-in;
		transform: translate3d(0,calc(200% + 30px),0);
		animation-timing-function: ease-in;
	}

	40% {
		opacity: 0.5;
		-webkit-transform: translate3d(0,0,0);
		-webkit-animation-timing-function: ease-out;
		transform: translate3d(0,0,0);
		animation-timing-function: ease-out;
	}

	70% {
		opacity: 0.6;
		-webkit-transform: translate3d(0,-40px,0);
		transform: translate3d(0,-40px,0);
	}

	100% {
		opacity: 1;
		-webkit-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
}
