/*============================================================================
 Copyright © 2020 Messages Popup Modal (MPM) Extension. All rights reserved.
 MageBees.com | Capacity Web Solutions Pvt. Ltd.
/*============================================================================*/

/* Messages Popup Modal */
.page.messages  { position:fixed; left:0; top:0; margin:0 auto; padding:0; text-align:left; width:100%; z-index:9999; pointer-events:none; }
.page.messages .message{ position:inherit; font-size:14px; margin:0; padding:25px 40px 25px 25px; -ms-flex-align:center; align-items:center; display:-webkit-box; display:-moz-box; display:-webkit-flex; display:-ms-flexbox; display:flex; border-radius:0; background:#e5efe5; z-index:999; -webkit-box-shadow:0px 0px 3px 0px rgba(32,33,36,0.28); box-shadow:0px 0px 3px 0px rgba(32,33,36,0.28); }
.page.messages .messages .message:before{ content:''; position:fixed; top:0; bottom:0; left:0; right:0; background-color:rgba(0,0,0,0.5); z-index:-1; }
.page.messages div[data-bind="scope: 'messages'"] { position:relative; }
.page.messages div[data-bind="html: message.text"] { position:relative; padding-left:35px; }

/* Success feedback is a non-modal toast.  Its visible body lets pointer input
   pass through; only controls inside the toast remain interactive. */
.page.messages .message { pointer-events:auto; }
.page.messages .message-success.message {
	position:relative;
	box-sizing:border-box;
	width:calc(100% - 24px);
	max-width:520px;
	min-height:76px;
	margin:12px 12px 0 auto !important;
	padding:20px 56px 20px 22px !important;
	justify-content:flex-start !important;
	border:1px solid #d9e5db;
	border-radius:8px;
	box-shadow:0 8px 24px rgba(32,33,36,.16);
	pointer-events:auto;
}
.page.messages .messages .message-success.message:before { display:none; }
.page.messages .messages .message-success.message:after { display:none !important; content:none !important; }
.page.messages .message-success.message > :first-child {
	flex:1 1 auto;
	min-width:0;
	padding-left:36px;
	line-height:1.4;
	text-align:left;
}
.page.messages.Top .message-success.message > :first-child:before {
	top:50% !important;
	transform:translateY(-50%);
}
.page.messages .message-success.message a,
.page.messages .message-success.message .mpm-message-close { pointer-events:auto; }
.page.messages .mpm-message-close {
	position:absolute;
	top:10px;
	right:10px;
	display:flex;
	width:34px;
	height:34px;
	padding:0;
	align-items:center;
	justify-content:center;
	border:0;
	border-radius:50%;
	background:transparent;
	box-shadow:none !important;
	color:#0e8f30;
	font-family:Arial,sans-serif;
	font-size:25px;
	font-weight:400;
	line-height:1;
	text-align:center;
	cursor:pointer;
	appearance:none;
}
.page.messages .mpm-message-close:before,
.page.messages .mpm-message-close:after { display:none !important; content:none !important; }
.page.messages .mpm-message-close:hover { background:#edf8f0; color:#087323; }
.page.messages .mpm-message-close:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

/* Close Button Popup */
.page.messages .message-error.message:after{ color:#b30000; }
.page.messages .message-notice.message:after{ color:#c07600;top: 90px !important;}
.page.messages .message-warning.message:after{ color:#6f4400; }

/* Top Messages Popup */
.page.messages.Top { top:0; right:0; padding:0; text-align:center; width:100% !important; }
.page.messages.Top .message{ -ms-flex-pack:center; justify-content:center; }
/* Top Left Messages Popup */
.page.messages.TopLeft { top:0; left:0; right:auto; }
/* Top Right Messages Popup */
.page.messages.TopRight { top:0; left:auto; right:0; }

/* Bottom Messages Popup */
.page.messages.Bottom { top:auto; bottom:0; right:0; padding:0; text-align:center; width:100% !important; }
.page.messages.Bottom .message{ -ms-flex-pack:center; justify-content:center; }
/* Bottom Left Messages Popup */

.page.messages.BottomLeft { top:auto; bottom:0; }

/* Bottom Right Messages Popup */

.page.messages.BottomRight { top:auto; bottom:0; left:auto; right:0; }

/* Middle Messages Popup */
.page.messages.Middle { left:0; right:0; top:50%; margin-top:-30px; padding: 0 10px; }
/* Middle Left Messages Popup */
.page.messages.MiddleLeft { left:0; right:auto; top:50%; }
/* Middle Right Messages Popup */
.page.messages.MiddleRight { left:auto; right:0; top:50%; }

/* Messages Alert Icon */
.page.messages .message.error > :first-child:before { content:'\e61f'; color:#b30000; }
.page.messages .message.notice > :first-child:before { content:'\e602'; color:#c07600; }
.page.messages .message.warning > :first-child:before{ content:'\e602'; color:#6f4400; }

/* Messages Shopping Cart Link */
.page.messages .message a { color:#006bb4; font-weight:bold; border:none; outline:none; }
.page.messages .message a:hover { text-decoration:underline; }
.page.messages .message-success.message a{ color:#0b2e13; }
.page.messages .message-error.message a{ color:#491217; }
.page.messages .message-notice.message a{ color:#533f03; }
.page.messages .message-warning.message a{ color:#533f03; }


/*============================================================================
  Responsive CSS
/*============================================================================*/
@media only screen and (max-width:767px) {
	div.page.messages { width:100% !important; }
	.page.messages .message{ padding:16px 32px 16px 16px; font-size:14px !important; }
	.page.messages .message-success.message { width:calc(100% - 20px); min-height:68px; margin:10px !important; padding:16px 48px 16px 16px !important; }
	.page.messages .message-success.message > :first-child { padding-left:32px; }
	.page.messages .mpm-message-close { top:7px; right:7px; }
	.page.messages .message.success > :first-child:before, 
	.page.messages .message.error > :first-child:before, 
	.page.messages .message.notice > :first-child:before, 
	.page.messages .message.warning > :first-child:before { top:0; font-size:22px; line-height:22px; }
	.page.messages div[data-bind="html: message.text"]{ padding-left:30px; }
	.page.messages .messages .message:after { top:13px; right:0; font-size:15px; }
}