/*!
 * jQuery Noti plugin
 * 
 * This program is free software: you can redistribute it and/or modify it under
 * the terms of the GNU General Public License as published by the Free Software
 * Foundation, either version 3 of the License, or (at your option) any later
 * version.
 * 
 * This program is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
 * PARTICULAR PURPOSE. See the GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License along with
 * this program. If not, see <https://www.gnu.org/licenses/>.
 * 
 * author: sizeof(cat) <sizeofcat AT riseup DOT net> http://sizeof.cat
 * url: http://sizeof.cat/project/jquery-noti/
 * copyright: 2016-2025
 * version: 1.1.0
 * license: GPLv3
 */
#notis {
	position: fixed;
	top: 20px;
	right: 20px;
	width: 280px;
	z-index: 9999;
}

#notis .noti {
	padding: 10px;
	margin-bottom: 20px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font: normal 12px/17px sans-serif;
	border: 1px solid rgba(0, 0, 0, 0.7); 
	border-radius: 6px;
	box-shadow: rgba(0, 0, 0, 0.8) 0 2px 13px,
		rgba(0, 0, 0, 0.6) 0 -3px 13px,
		rgba(255, 255, 255, 0.5) 0 1px 0 inset;
	position: relative;
	cursor: default;
	user-select: none;
	overflow: hidden;
}

.noti-pop {
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	animation-name: noti-pop;
	animation-timing-function: ease-in;
}

.noti-remove {
	animation-iteration-count: 1; 
	animation-timing-function: ease-in-out;
	animation-duration: 0.3s; 
	animation-name: noti-remove;
}

#notis .noti.click {
	cursor: pointer;
}

#notis .noti .hide {
	position: absolute;
	background: #000;
	right: 0;
	top: 0;
	padding: 5px 15px;
	border-radius-topright: 6px;
	border-left: 1px solid rgba(255, 255, 255, 0.5);
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	cursor: pointer;
	display: none;
}

#notis .noti .hide:hover {
	color: #ccc;
}

#notis .noti .right,
#notis .noti .left {
	width: 79%;
	height: 100%;
	float: left;
}

#notis .noti .time {
	font-size: 9px;
	position: relative;
}

#notis .noti .right .time {
	margin-left: 19px;
}

#notis .noti .time strong {
	color: #ccc;
}

#notis .noti .left {
	width: 48px;
}

#notis .noti .right .inner {
	padding-left: 10px;
}

#notis .noti .left .icon {
	width: 100%;
	height: 48px;
	position: relative;
}

#notis .noti h2 {
	margin: 0 0 5px 0;
	font-size: 14px;
	color: #fff;
}

@keyframes noti-pop { 
	from { 
		transform: scale(.1); 
		opacity: 0 
	} 
	80% { 
		transform: scale(1.05); 
		opacity: 1 
	} 
	to { 
		transform: scale(1); 
	}
}

@keyframes noti-remove { 
	from {
		opacity: 1; 
	} 
	100% { 
		right: -223px; 
		opacity: 0; 
	}
}