﻿

/*********** NOTIFICATIONS & POPUPS  ***********/
.bar-notification-container {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 1000;
	width: 350px;
	line-height: 16px;
	color: #fff;
	opacity: 0.95;
	z-index: 9999999999;
	transform: translate(-50%,-50%);
}

.bar-notification.success {
	background-color: #4bb07a;
}

.bar-notification.error {
	background-color: #e4444c;
}

.bar-notification.warning {
	background-color: #f39c12;
}

.bar-notification {
	position: relative;
	display: none;
	padding: 15px 25px 15px 10px;
}

	.bar-notification .content {
		margin: 0 25px 0 0;
	}

		.bar-notification .content a {
			color: #fff;
			text-decoration: underline;
		}

	.bar-notification .close {
		position: absolute;
		top: 0;
		right: 0;
		width: 32px;
		height: 32px;
		margin: 7px;
		    background: #fff;
    cursor: pointer;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
	}

.popup-notification {
	border-radius: 5px;
	padding: 3px;
	margin: 5px 0;
}

	.popup-notification.success {
		border: 2px rgba( 75,176,122,.5) solid;
	}

	.popup-notification.error {
		border: 2px rgba( 228,68,76,.5) solid;
	}

	.popup-notification.warning {
		border: 2px rgba( 243,156,18,.5) solid;
	}

.noscript {
	border-bottom: 1px solid #333;
	background-color: #ff9;
	padding: 30px 15px;
	text-align: center;
	line-height: 22px;
	color: #444;
}

.bar-notification .content {
	color: #fff;
}

.ajax-loading-block-window {
	position: fixed;
	top: 50%;
	left: 50%;
	z-index: 999;
	width: 32px;
	height: 32px;
	margin: -16px 0 0 -16px;
}

	.ajax-loading-block-window .block-window-loader {
		width: 40px;
		height: 40px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -13px;
		margin-left: -13px;
		border-radius: 60px;
		animation: loader 0.8s linear infinite;
		-webkit-animation: loader 0.8s linear infinite;
	}


		 .bar-notification.warning { position: relative; display: none; padding: 60px 10px 60px 10px; font-size: 18px; text-align: center; }
     .bar-notification.warning .content { margin: 0; line-height: initial; }
    .bar-notification.success .content a { text-decoration: none; color: #337ab7; }


.fade-in {
    animation: fadeInAnimation 0.4s ease-in-out forwards;
}

@keyframes fadeInAnimation {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

