#etatsystem{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height:100%;
	z-index: 1000000;

	--etat_color_txt:white;
	
	--etat_color_start:rgb(125, 164, 223);
	--etat_color_anim1:rgba(125,164,223,0);
	--etat_color_anim2:rgba(92,123,170,0.7105217086834734);

	--etat_color_finish:rgb(32, 146, 32);
	--etat_color_error:rgb(255, 0, 0);
	--etat_color_warring:rgb(237, 168, 20);

	--etat_color_ombre:rgba(119, 119, 119, 0.5);
}
#etatsystem>div{
	position: absolute;
	bottom: 10px;
	width: 200px;
	height:30px;
	z-index: 0;
	
	box-shadow: 0px 0px 10px 4px var(--etat_color_ombre);
	-moz-box-shadow: 0px 0px 10px 4px var(--etat_color_ombre);
	-webkit-box-shadow: 0px 0px 10px 4px var(--etat_color_ombre);
	
	border-radius: 4px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	overflow: hidden;
}
#etatsystem>div[class="start"]{
	right: -200px;
	background-color: var(--etat_color_start);
	
	animation-name: animation_in;
	animation-fill-mode: forwards;
	animation-timing-function: ease-in;
	animation-duration: 0.1s;
	animation-iteration-count:1;
	animation-direction:normal;
}
#etatsystem>div[class="finish"]{right: 10px;background-color: var(--etat_color_finish);}
#etatsystem>div[class="error"]{right: 10px;background-color: var(--etat_color_error);}
#etatsystem>div[class="warring"]{right: 10px;background-color: var(--etat_color_warring);}
#etatsystem>div>p{
	position: absolute;
	top: 0px;
	left: 0px;
	width: calc(100% - 2*10px);
	height: 100%;
	z-index: 1;
	padding-left: 10px;
	padding-right: 10px;

	line-height: 32px;
	font-family: arial;
	font-size: 10px;
	font-weight: bolder;
	text-transform: uppercase;
	color: var(--etat_color_txt);
}
#etatsystem>div>div{
	position: absolute;
	top: 0px;
	left: -30px;
	width: 30px;
	height: 100%;
	z-index: 0;
}
#etatsystem>div[class="start"]>div{

	background: var(--etat_color_start);
	background: -moz-linear-gradient(90deg, var(--etat_color_anim1) 0%, var(--etat_color_anim2) 50%, var(--etat_color_anim1) 100%);
	background: -webkit-linear-gradient(90deg, var(--etat_color_anim1) 0%, var(--etat_color_anim2) 50%, var(--etat_color_anim1) 100%);
	background: linear-gradient(90deg, var(--etat_color_anim1) 0%, var(--etat_color_anim2) 50%, var(--etat_color_anim1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#7da4df",endColorstr="#7da4df",GradientType=1);
	
	animation-name: animation_etat;
	animation-timing-function: ease-in-out;
	animation-duration: 0.5s;
	animation-iteration-count:infinite;
	animation-direction:alternate;
}
@keyframes animation_in {from {right: -210px;;}to{right:10px;}}
@keyframes animation_etat {from {left:-30px;}to{left:calc(100% + 30px);}}