:root{
	--alert-width: 250px;

	--notive-width: 250px;
	--notive-height: 40px;
	--notive-icon: 50px;
}

.rsAlert{
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 99;
	background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center
}
.rsAlert > div{
	text-align: center;
	width: var(--alert-width);
	background-color: white;
	padding: 10px;
	padding-bottom: 0px;
	border-radius:  8px;
	border: 1px solid var(--color-primary-primary);
}
.rsAlert > div > *{
	list-style-type: none;
	width: 100%;
	float: left;
	margin-top: 10px;
	border: none;
	outline: none;
}
.rsAlert > div > i{
	font-size: 80px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.rsAlert > div > p{
	font-size: 14px;
	line-height: 16px;
	margin-bottom: 10px;
}
.rsAlert > div > input{
	border-bottom: 2px solid var(--color-primary-border);
	height: 30px;
	line-height: 30px;
	margin-top: 0px;
	padding: 0px 10px;
	width: calc(100% - 20px);
}
.rsAlert > div > input:focus{
	border-color: var(--color-primary);
}
.rsAlert > div > ul{
	margin-top: 0px;
}
.rsAlert > div > ul > li{
	float: left;
	font-size: 12.5px;
	height: 20px;
	line-height: 20px;
	white-space: nowrap;
	padding: 5px 10px;
	margin: 5px 5px 5px 0px;
	border-radius: 4px;
	color: var(--color-primary);
	cursor: pointer;
}
.rsAlert > div > ul > li:hover{
	background-color: rgba(0, 0, 0, 0.03);
}
#rsNotives{
	position: fixed;
	bottom: 0px;
	right: 0px;
	max-width: var(--notive-width);
	height: auto;
  z-index: 99;
}
#rsNotives > div{
	position: relative;
	float: left;
	margin-bottom: 10px;
	overflow: hidden;
	padding: 10px;
	padding-left: var(--notive-icon);
	width: calc(var(--notive-width) - (var(--notive-icon) + 11px));
	min-height: var(--notive-height);
	max-height: 400px;
	overflow-y: auto;
	cursor: pointer;
}
#rsNotives > div.notive{
	color: var(--color-blue);
	background-color: var(--color-blue-o);
	border: 1px solid var(--color-blue);
	border-right: none;
	border-radius: 4px 0px 0px 4px;
}
#rsNotives > div.notive > p{
	line-height: 15px;
	font-size: 12px;
}
#rsNotives > div.notive:before{
	position: absolute;
	top: 10px;
	left: 0px;
	width: var(--notive-icon);
	text-align: center;
	font-size: 28px;
	line-height: 30px;
}
#rsNotives > div.notive:not(.fa):before{
	content: '\f05a';
}
#rsNotives > div.notive.success{
	color: var(--color-green);
	border-color: var(--color-green);
	background-color: var(--color-green-o);
}
#rsNotives > div.notive.success:not(.fa):before{
	content: '\f00c';
}
#rsNotives > div.notive.warning{
	color: var(--color-yellow);
	border-color: var(--color-yellow);
	background-color: var(--color-yellow-o);
}
#rsNotives > div.notive.warning:not(.fa):before{
	content: '\f071';
}
#rsNotives > div.notive.error{
	color: var(--color-red);
	border-color: var(--color-red);
	background-color: var(--color-red-o);
}
#rsNotives > div.notive.error:not(.fa):before{
	content: '\f188';
}