.notifications i { font-size: 30px; }
li.notifications { position: relative; }
.notifications .num-notifications.has-notifications { background: darkred; display: block; }
.notifications .num-notifications { position: absolute; right: calc(50% - 19px); top: 11px; height: 18px; width: 18px; display: block;  z-index: 102; border-radius: 10px; font-size: 16px; padding-top: 4px; color: #fff; text-align: center; background-color: #ccc; }

.notifications .num-notifications .number { line-height: 10px; font-weight: bold; font-family: Arial, sans-serif;;}
.notifications-list {  color: #000; background-color: #fff; max-width: 500px; min-width: 350px; width: 90%; margin: 0 auto; position: relative; }
.notifications-list .notification-header, div.survey-popup .popup-header, div.tips-popup .popup-header { padding: 10px 20px; background-color: #333; color: #fff; text-align: center; font-family: Arial, sans-serif;; }
.notifications-list .notification-inside { background-color: #fff; color: #000; text-align: left; font-family: Arial, sans-serif;; font-size: 16px; }
.notifications-list .notification { cursor: pointer; }
.notifications-list .notification i.opened { display: none; }
.notifications-list .notification.is-read i.opened { display: inline; }
.notifications-list .notification.is-read i.unopened { display: none; }
.mfp-close-btn-in .mfp-close { color: #fff; }

div.survey-popup, div.tips-popup {  color: #000; background-color: #fff; max-width: 900px; min-width: 350px; width: 90%; margin: 0 auto; position: relative; max-height: 90%; margin-top: 100px; }
div.survey-popup .popup-content, div.tips-popup .popup-content { background-color: #fff; color: #000; text-align: left; font-family: Arial, sans-serif;; font-size: 16px; padding: 30px; }
div.survey-popup .popup-content p, div.tips-popup .popup-content p, div.tips-popup .popup-content ul li  { color: #000; }



.notification
{
	position: relative;
	width: 100%;
	float: left;
	border-top: 1px solid #000;
	padding: 5px 8px;
	background-color: rgba(34, 167, 240, 0.15);
}

.is-read > .notification-title
{
	font-weight: normal;

}
.notification.is-read { background-color: rgba(0,0,0,0); }

.notification-header
{
	position: relative;
	float: left;
	padding: 10px 15px;
	text-align: center;
	font-weight: bold;
	font-family: Arial, sans-serif;
	line-height: 14px; 
	color: white;
	background-color: #4A0E70;
	font-size: 14px;
	width: 100%;
}

.notification-title
{
	position: relative;
	text-align: left;
	width: 100%;
	font-size: 14px;
	padding: 5px 10px;
	box-sizing: border-box;
	font-weight: bold;
	font-family: Arial, sans-serif;;
}

.clear { clear: both; }
.notification-title .title { float: left; }
.notification-title .date { float: right; }
.notification-title .remove-notification { float: right; width: 15px; height: 15px; color: #000; margin-top: 0; margin-left: 10px;  }
.notification {
	-webkit-transition: left 1s ease, opacity 1s ease;
	transition: left 1s ease, opacity 1s ease;
}
.notification.removed { opacity: 0; }
.notification.deleted { display: none; }
.notification-content, .notification-content-sim
{
	clear: both;
	position: relative;
	text-align: left;
	width: 100%;
	padding: 7px 20px 15px 20px;
	font-size: 13px;
	line-height: 15px;
	box-sizing: border-box;
	display: none;
	font-family: Arial, sans-serif;;
}
.notification-content-sim { display: block; padding-top: 15px !important; }

.show-notification-content
{
	display: block !important;
}

/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}


.notification-container .notifications { display: none !important; }