/**
 * @desc display custom user notifications
 * @author Dominik Kressler
 * @version 1.4.4
 */

 :root {
	--njs-bgcolor: #0CACC4;
	--njs-bgcolor-success: rgb(62, 148, 54);
	--njs-color-success: #fff;
	--njs-bgcolor-error: rgb(151, 39, 39);
	--njs-color-close: #fff;
	--njs-color: #fff;
	--njs-border-radius: 3px;
	--njs-pos-bottom: 1rem;
	--njs-pos-left: 2.5rem;
	--njs-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.35);
}

.custom-notification-area {
	position: fixed;
	bottom: var(--njs-pos-bottom);
	left: var(--njs-pos-left);
	pointer-events: none;
	z-index: 99;
	display: block;
}
@media (min-width: 960px) {
	.custom-notification-area {
		left: 3.75rem;
   }
}
.custom-notification-area > :not(:first-child):not(.hide).transition-in {
	margin-top: .6rem;
}
.custom-notification-area .notification {
	display: block;
	position: relative;
	pointer-events: all;
	overflow: hidden;
	padding: 20px;
	background: var(--njs-bgcolor);
	font-size: 1rem;
	line-height: 1.375rem;
	box-shadow: var(--njs-box-shadow);
	transform-origin: left center;
	visibility: hidden;
	opacity: 0;
	max-height: none;
	max-width: min(80vw, 355px);
	width: calc(100dvw * 100% - var(--njs-pos-left));
	height: 0;
	box-sizing: border-box;
	margin-left: -6.25rem;
	color: var(--njs-color);
	border-radius: var(--njs-border-radius);
}
.notification:not(.hide) { 
	transition: 300ms all ease-in-out 
}
.custom-notification-area .notification .note-content {
	padding: 1rem;
	display: block;
}
.custom-notification-area .notification.transition-in {
	visibility: visible;
	opacity: 1;
	max-height: 9999999px;
	height: auto;
	margin-left: 0;
}
.custom-notification-area .notification a {
	color: var(--njs-color);
}
.custom-notification-area .notification.success {
	background: var(--njs-bgcolor-success);
}
.custom-notification-area .notification.success, 
.custom-notification-area .notification.success .close {
	color: var(--njs-color-success);
}
.custom-notification-area .error {
	background: var(--njs-bgcolor-error);
}
.custom-notification-area .notification.success p, 
.custom-notification-area .notification.error p {
	margin-bottom: 0.313rem;
}
.custom-notification-area .notification.success p + ul, 
.custom-notification-area .notification.error p + ul {
	margin-top: 0.313rem;
}
.custom-notification-area .close {
	position: absolute;
	top: 0;
	right: 0;
	padding-top: 0.313rem;
	padding-right: 0.5rem;
	cursor: pointer;
	color: var(--njs-color-close);
	font-size: 1.2rem;
}
.custom-notification-area .notification.hide {
	margin-left: -6.25rem;
	opacity: 0;
	visibility: hidden;
	height: 0;
}

.notification-visually-hidden {
    clip: rect(0 0 0 0); 
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap; 
    width: 1px;
}
.notification-badge {
    position: fixed;
    bottom: 3rem;   
	margin-bottom: 150px;    
    /* left: 2rem;          */
    background: #0CACC4;
    color: #fff;
    border: none;
    border-radius: 6px;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    z-index: 99 !important;   
}
.notification-badge.hide {
    display: none;
}
#info-popup > note-content > h3{
	color: #fff;
}