#notifications{
	position: fixed;
	outline: none;
	z-index: 96;
	display:none;
}

body[loggedin=false] #notifications, body[loggedin=false] #notifianchor{
	display:none
}

#notifianchor{
	position: fixed;
	right: 22px;
	bottom: 60px;
	width: 50px;
	height: 50px;
	font-family: sans-serif;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	outline: none;
	cursor: pointer;
	z-index: 97;
	text-align: center;
	-webkit-transition:color 0.5s;
	font-size: 34px;
	color: #B7B7B7;
	backface-visibility: hidden; 
}

#notifianchor div {
	width:100%;
	height:100%;
}

#notifianchor:hover{
	color: rgb(137, 137, 139);
}


#notifianchor div:after {
	background: url('../../images/globe-icon-gray.svg');
	opacity: 0.7;
	background-size: contain;
	background-repeat: no-repeat;
	content: '';
	padding: 14px;
	margin-left: 10px;
	position: absolute;
	left: 3px;
	top: 10px;
	background-color:white;
	border-radius:10px
}

#notifianchor:hover div:after {
	background-color:transparent;
}

#notifianchor div.alert:before {
	content: attr(data-before);
	background: rgb(255, 44, 44);
	border: 1px solid #EBEBEB;
	border-radius: 4px;
	font-size: 11px;
	position: absolute;
	z-index: 1;
	color: #fff;
	padding: 1px 5px;
	font-weight: bold;
	top: 2px;
	right: 4px;
}
#notifianchor div.alert:after, #notifianchor.na-active div:after {
	background: url('../../images/globe-icon.svg');
	opacity: 1;
	background-size: contain;
	background-color:transparent;
}
#notificontent {
	position: fixed;
	right: 25px;
	bottom: 68px;
	/* height: calc(100% - 104px); */
	height: calc(100% - 170px);
	width: 330px;
	background: #fefefe;
	box-shadow: -1px 0px 5px #cecece;
	border-bottom-right-radius: 16px;
}

/*
#notificontent:after {
	content: '';
	width: 0;
	height: 0;
	border-left: 8px solid #cecece;
	border-top: 8px solid transparent;
	border-bottom: 8px solid transparent;
	display: block;
	position: absolute;
	bottom: 25px;
	right: -8px;
}
*/

#notifilist {
	margin: 0 5px 0 0;
	overflow-y: scroll;
	height: calc(100% - 70px);
	overflow-x: hidden;
	padding: 0 0.5rem 1rem 0;
}
/* Let's get this party started */
#notifilist::-webkit-scrollbar {
    width: 7px;
}
 
/* Track */
#notifilist::-webkit-scrollbar-track {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
/* Handle */
#notifilist::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(100,100,100,0.8);
}
#notifilist::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(100,100,100,0.4); 
}

#notifilist li {
	margin: 0 0 16px 0;
	border-bottom: 1px solid #CECECE;
	font-size: 13px;
	padding:10px;
	padding-left:15px
}

#notifilist li:hover {
	background-color:#f4f4f4
}

#notifilist li .date {
	color:#a3a3a3;
	margin-bottom:5px
}

#notifiempty {
	border:0;
	color:#505050;
	text-align:center;
	padding:20px;
}

.notifili-del{
	padding: 10px;
}
li.new:after {
	content: ' new';
	font-style: italic;
	color: #9D9B9B;
}

#notifititle {
	background-color: #3773A3;
	background:linear-gradient(#3773A3,#3783B4);
	padding: 10px;
	font-size: 10pt;
	margin-bottom: 10px;
	color: white;
	cursor:pointer;
}

@media all and (max-width: 830px){
	#notifications {
		position: fixed;
		outline: none;
		z-index: 96;
		width: 100%;
		height: 100%;
		padding: 85px 20px 50px 20px;
	}
	#notificontent{
		height: 100%;
		width:100%;
		position:static;
		max-width: none;
		border-radius:5px;
		box-shadow:none;
	}
	#notifianchor{
		position: fixed;
		right: 3px;
		bottom: 0;
		width:35px;
		height:35px;
	}
	#notifianchor div:after {
		box-shadow:none;
		background-color:transparent;
		left: 0;
		top: 5px;
		margin-left:0;
	}
	#notifititle {
		display:none;
	}
	#notifilist {
		height:100%;
	}
}