#notes
{
	cursor: default;
	pointer-events: none;
	position: fixed;
	right: 0;
	bottom: 1.5em;
	transition: height .45s ease-in-out;
	webkit-transition: height .45s ease-in-out;
	width: 100%;
	z-index: 999999;
}
#notes .note-item
{
	
	align-content: flex-end;
	align-items: flex-end;
	justify-content: flex-end;
	float: right;
	clear: both;
	backface-visibility: hidden;
	color: #fff;
	display: flex;
	display: -moz-flex;
	display: -ms-flex;
	display: -ms-flexbox;
	display: -webkit-box;
	display: -webkit-flex;
	font: inherit;
	line-height: 1.25em;
	margin: 0 auto 1em auto;
	max-height: 12em;
	max-width: 25em;
	moz-align-items: flex-start;
	moz-backface-visibility: hidden;
	moz-transform: translateZ(0);
	moz-user-select: none;
	ms-backface-visibility: hidden;
	ms-flex-align: start;
	ms-flex-line-pack: start;
	ms-transform: translateZ(0);
	ms-user-select: none;
	opacity: 1;
	o-user-select: none;
	padding: .95em 1em;
	pointer-events: auto;
	transform: translateZ(0);
	transition: all .2s linear;
	user-select: none;
	webkit-align-content: flex-start;
	webkit-align-items: flex-start;
	webkit-backface-visibility: hidden;
	webkit-box-align: start;
	webkit-touch-callout: none;
	webkit-transform: translateZ(0);
	webkit-transition: all .2s linear;
	webkit-user-select: none;
	width: 50vw;
	will-change: opacity, transform;
	z-index: 2;
}
@media all and (max-width: 30em)
{
	#notes .note-item
	{
		max-width: none;
		width: 75vw;
	}
}
#notes .note-item[data-show="false"]
{
	margin-bottom: 0 !important;
	max-height: 0 !important;
	opacity: 0 !important;
	pointer-events: none;
}
#notes .note-item[data-type="info"]
{
	background-color: #375e97;
}
#notes .note-item[data-type="warn"]
{
	animation: shake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	background-color: #ffca00;
	webkit-animation: shake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	    color: #32363a;
}
#notes .note-item[data-type="error"]
{
	animation: shake 0.54s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
	background-color: #ec3f17;
	webkit-animation: shake 0.54s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
#notes .note-item[data-type="success"]
{
	background-color: #019f2e;
}
#notes .note-item .note-item-text
{
	flex: auto;
	max-width: calc(100% - 1.25em);
	max-width: -webkit-calc(100% - 1.25em);
	moz-flex: auto;
	ms-flex: auto;
	padding-right: .5em;
	webkit-flex: auto;
}
#notes .note-item .note-item-text a{
	color: #FFF;
	text-decoration: none;
	border-bottom: 1px dashed #FFF;
}
#notes .note-item .note-item-btn
{
	background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiB4bWw6c3BhY2U9InByZXNlcnZlIiBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTguMyw1LjcxTDE4LjMsNS43MWMtMC4zOS0wLjM5LTEuMDItMC4zOS0xLjQxLDBMMTIsMTAuNTlMNy4xMSw1LjdjLTAuMzktMC4zOS0xLjAyLTAuMzktMS40MSwwbDAsMCBjLTAuMzksMC4zOS0wLjM5LDEuMDIsMCwxLjQxTDEwLjU5LDEyTDUuNywxNi44OWMtMC4zOSwwLjM5LTAuMzksMS4wMiwwLDEuNDFoMGMwLjM5LDAuMzksMS4wMiwwLjM5LDEuNDEsMEwxMiwxMy40MWw0Ljg5LDQuODkgYzAuMzksMC4zOSwxLjAyLDAuMzksMS40MSwwbDAsMGMwLjM5LTAuMzksMC4zOS0xLjAyLDAtMS40MUwxMy40MSwxMmw0Ljg5LTQuODlDMTguNjgsNi43MywxOC42OCw2LjA5LDE4LjMsNS43MXoiLz48L3N2Zz4=) no-repeat 0 0/contain;;
	cursor: pointer;
	border: none;
	height: 1.25em;
	transition: opacity .2s;
	webkit-transition: opacity .2s;
	width: 1.25em;
    position: absolute;
    top: 0.95em;
}
#notes .note-item .note-item-btn:hover
{
	opacity: .6;
}
@keyframes shake
{
	10%, 90%
	{
		ms-transform: translate3d(-1px, 0, 0);
		transform: translate3d(-1px, 0, 0);
		webkit-transform: translate3d(-1px, 0, 0);
	}
	20%, 80%
	{
		ms-transform: translate3d(2px, 0, 0);
		transform: translate3d(2px, 0 0);
		webkit-transform: translate3d(2px, 0, 0);
	}
	30%, 50%, 70%
	{
		ms-transform: translate3d(-4px, 0, 0);
		transform: translate3d(-4px, 0, 0);
		webkit-transform: translate3d(-4px, 0, 0);
	}
	40%, 60%
	{
		ms-transform: translate3d(4px, 0, 0);
		transform: translate3d(4px, 0, 0);
		webkit-transform: translate3d(4px, 0, 0);
	}
}
@-webkit-keyframes shake
{
	10%, 90%
	{
		webkit-transform: translate3d(-1px, 0, 0);
	}
	20%, 80%
	{
		webkit-transform: translate3d(2px, 0, 0);
	}
	30%, 50%, 70%
	{
		webkit-transform: translate3d(-4px, 0, 0) t;
	}
	40%, 60%
	{
		webkit-transform: translate3d(4px, 0, 0);
	}
}