.icon-info-purple {background-image: url(../img/icon-info-purple.png);}
.icon-info-yellow {background-image: url(../img/icon-info-yellow.png);}
.icon-warning {background-image: url(../img/icon-warning.png);}

.notification-overlay,
.confirmation-overlay
{
	background: rgba(0,0,0,.7);
	position: fixed;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 550;
}
	.notification,
	.confirmation
	{
		width: calc(90% - 40px);
		max-width: 600px;
		display: inline-table;
		vertical-align: middle;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #def7ff;
		padding: 20px;
		box-shadow: 4px 4px 2px -1px rgba(0,0,0,.6);
		text-align: center;
	}
		.notification-icon,
		.confirmation-icon
		{
			display: inline-block;
			vertical-align: middle;
			width: 64px;
			height: 64px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: contain;
			margin: 0 0 10px 0;
		}
		.notification-message,
		.confirmation-message
		{
			display: inline-block;
			vertical-align: middle;
			width: calc(100% - 90px);
			margin: 0 0 10px 20px;
			font-size: 13px;
			font-weight: bold;
			color: #6b7084;
			text-align: left;
			color: #000;
		}
		.notification-ok,
		.confirmation-confirm
		{
			background: #2bd753;
			border: 1px solid #2cae4a;
			color: #fff;
			padding: 6px 20px;
			border-radius: 1px;
			font-size: 13px;
			text-align: center;
			cursor: pointer;
		}
		.notification-ok
		{
			display: inline;
			text-align: center;
			cursor: pointer;
		}
		.confirmation-confirm
		{
			float: left;
			margin: 0 0 0 calc(50% - 99px);
		}
		.notification-ok:hover,
		.confirmation-confirm:hover
		{
			background: #45ea6c;
		}
		.confirmation-cancel
		{
			background: #f9a2a2;
			border: 1px solid #be6868;
			color: #333;
			float: left;
			margin: 0 0 0 30px;
			padding: 6px 20px;
			border-radius: 1px;
			font-size: 13px;
			text-align: center;
			cursor: pointer;
		}
		.confirmation-cancel:hover
		{
			background: #ffc5c5;
		}