/* GENERAL STYLES..*/
body {
    background-color: #526981;
	color:#c8ced1;
	font-family: 'Montserrat', sans-serif;
	font-weight:400;
}
article {
   position:relative;
   left: 50px;
}

.clsDetail{
	padding-left:60px;
}
.barre_statut{
	width:10%;
	border: 1px solid;
	border-color:white;
	border-radius:2px;
	padding-left:5px;
	opacity:0.5;
}
.brief{
	color:red;
}
#section1{
    background-color: #777177;
	border: 2px solid;
	border-color:white;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
	padding-left:20px;
	padding-top:10px;
	padding-bottom:10px;
	width:50%;
}

#control{
    	background-color: white;
	border: 2px solid;
	border-color:white;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
	padding-left:20px;
	padding-top:10px;
	padding-bottom:10px;
	position:absolute;
	top:90%;
	left:90%;
	width:5%;

}



#letest{
	height:5%;
	width:98%;
	z-index:3;
    	background-color: grey;
	border: 1px solid;
	border-color:lightgrey;
	color:red;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
	padding-left: 4px;
	margin-left:4px;
	padding-top:4px;
	padding-bottom:1px;
	position:fixed;
/*	animation-name:vscroll;
	animation-duration:5s;
	-moz-animation-iteration-count: 3;
  	-webkit-animation-iteration-count: 3;
  	animation-iteration-count: 3;
	animation-timing-function:linear;*/
}
.letest{
	width:98%;
    	background-color: grey;
	border: 1px solid;
	border-color:lightgrey;
	color:white;
    -webkit-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
	padding-left: 4px;
	margin-left:4px;
	padding-top:4px;
	padding-bottom:1px;
/*	  -webkit-user-select: none;   Chrome all / Safari all 
  -moz-user-select: none;     /* Firefox all 
  -ms-user-select: none;      /* IE 10+ 
  user-select: none;          /* Likely future */    
/*	animation-name:vscroll;
	animation-duration:5s;
	-moz-animation-iteration-count: 3;
  	-webkit-animation-iteration-count: 3;
  	animation-iteration-count: 3;
	animation-timing-function:linear;*/
}

@keyframes hscroll {
from {left: 100%;}
to {left: -300%;}
}
@keyframes detailsalpha {
from {opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes  hscroll {
from {left: 0px;}
to {left: -2000%;}
}

@keyframes vscroll {
from {top: 50%;}
to {top: -500%;}
}
@keyframes vscroll2 {
from {top: 50%;}
to {top: -600%;}
}
.play {
  animation-play-state: running;
}
.pause {
  animation-play-state: paused;
}
.refais {
  animation-play-state: initial;
}
.cache {
  visibility: hidden;
}
.montre {
  visibility: visible;
}
.ralentis {
  animation-duration: animation-duration+200s;
}
@keyframes colorchange {
	0% {background-color:red;}
	100% {background-color:white;}
}
@keyframes detailszoomin {
	0% {left:50%; width:45%;top:57%;height:40%;}
	100% {left:1%;width:99%;top:1%;height:99%;}
}
@keyframes detailszoomout {
	0% {left:30%;width:65%;top:37%;height:60%;}
	100% {left:50%; width:45%;top:57%;height:40%;}
}
#section2{
    background-color: #777177;
	border: 2px solid;
	border-color:white;
	border-radius:20px;
	padding-left:20px;
	padding-top:10px;
	padding-bottom:10px;
	width:50%;
}


#barre_statut {
	width:100%;
	display:flex;
	flex-direction:row;
	flex-wrap:wrap;
/*	animation-name:hscroll;
	animation-duration:92s;
	animation-iteration-count:10;
	animation-timing-function:linear;*/
	position:fixed;
	top:1%;
}

#vertical1 {
left:45%;
width:45%;
display:flex;
flex-direction:column;
flex-wrap:wrap;
background-color: rgb(120,120,120);
	position:fixed;
}
#detail_liste{
    background-color: grey;
   	position:fixed;
	border: 2px solid;
	border-color:grey;
	border-radius:20px;
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	border-radius:10px;
	top:4%;
	height:94%;
	left:4%;
	width:94%;
	z-index:10;
/*	animation-name:detailszoomin;
	animation-duration:0.5s;
/*	animation-iteration-count:1; 
	animation-fill-mode: forwards;
	animation-timing-function:linear;*/

}
#num{
width:3%;
}
#boutonSearch{
width:2%;
align:right;
}
#detail_liste_1
{
	top:5%;
	height:10%;
	left:5%;
	width:80%;
	border: 1px solid;
	border-color:white;
	border-radius:10px;
	padding-left:5px;
	padding-top:5px;
	overflow:auto;
	opacity:0;
	animation-name:detailsalpha;
	animation-duration:1s;
/*	animation-iteration-count:1; */
	animation-fill-mode: forwards;
	animation-timing-function:linear;	
}
#detail_liste_2
{
	top:16%;
	height:20%;
	left:10%;
	width:90%;
	border: 1px solid;
	border-color:white;
	border-radius:10px;
	padding-left:5px;
	padding-top:5px;
	overflow:auto;
	opacity:0;
	animation-name:detailsalpha;
	animation-duration:1s;
	animation-delay:1s;
/*	animation-iteration-count:1; */
	animation-fill-mode: forwards;
	animation-timing-function:linear;
}
#detail_liste_3
{
	top:15%;
	height:65%;
	left:10%;
	width:95%;
	border: 1px solid;
	border-color:white;
	border-radius:10px;
	padding-left:5px;
	padding-top:5px;
	overflow:auto;
	opacity:0;
	animation-name:detailsalpha;
	animation-duration:2s;
	animation-delay:2s;
/*	animation-iteration-count:1; */
	animation-fill-mode: forwards;
	animation-timing-function:linear;
	}
#detail_liste_zoom
{
	top:90%;
	height:5%;
	padding-left:2%; 
	margin-left:70%;
	width:4%;
	border: 1px solid;
	border-color:white;
	border-radius:10px;
	position:absolute;

}
#detail_liste_close
{
	top:90%;
	height:5%;
	padding-left:2%; 
	margin-left:80%;
	width:4%;
	border: 1px solid;
	border-color:white;
	border-radius:10px;	
	position:absolute;

}
#ChoixListes
{
	position:absolute;
	top:15%;
	height:30%;
	padding-left:2%; 
	margin-left:2%;
	width:30%;
	border: 1px solid;
	border-color:white;
	border-radius:10px;
	z-index:5;
	background-color:darkred;
}
#ChoixListes_X
{
	position:absolute;
	top:80%;
	left:80%;
	height:10%;
	width:5%;
	padding-left:2%; 
	margin-left:2%;
	border: 1px solid;
	border-color:white;
	border-radius:10px;
	background-color:blue;
}
#ChoixListes_O
{
	position:absolute;
	top:80%;
	left:70%;
	height:10%;
	width:5%;
	padding-left:2%; 
	margin-left:2%;
	border: 1px solid;
	border-color:white;
	border-radius:10px;
	background-color:green;
}
.elt_time{
	/*width:20%;*/
	border: 1px solid;
	border-color:white;
	border-radius:5px;
	color:black;
	text-align:center;
	background-color: lightgrey;
}
#element{
	/*width:20%;*/
	border: 1px solid;
	border-color:darkgrey;
	border-radius:5px;
	color:black;
	text-align:center;
	background-color: Yellow;
	opacity:0.5;
}
#EcranDeVeille{
	border: 1px solid;
	border-color:darkgrey;
	border-radius:5px;
	color:black;
	left:0%;
	top:0%;
	width:100%;
	height:100%;
	text-align:center;
	/*opacity:0.5;*/
	z-index:10;
	position:absolute;
	background-color: #F2F2F2;
	/*#F2F2F2  #CEF6F5*/
}
#EDVImage{
	left:5%;
	top:5%;
	width:90%;
	height:90%;
	opacity:0.9;
	position:absolute;
}
#EDVTexte{
	left:10%;
	top:15%;
	width:90%;
	height:90%;
	overflow:auto;
	color:black;
	font-weight:800;
	text-align:center;
	position:absolute;
}
#EDVClose{
		left:90%;
		top:90%;
		width:5%;
		height:2%;
		transition: width 1s height1s;
		transition-duration:1s;
		border: 1px solid;
		border-color:darkgrey;
		border-radius:5px;
		position:absolute;
		background-color:#0A9BA2;
}
#vid1 {
	left:2%;
	width:32%;
	top:2%;
	height:45%;
	background-color: grey;
	position:fixed;
	overflow:auto;
	z-index:5;
}
#vid2 {
	left:60%;
	width:32%;
	top:40%;
	height:45%;
	background-color: grey;
	position:fixed;
	overflow:auto;
	z-index:5;
}
#vid3 {
	left:15%;
	width:32%;
	top:20%;
	height:45%;
	position:fixed;
	z-index:2;
	border: 1px solid;
	border-color:lightblue;
	border-radius:10px;
}
.elt_bleu{
	/*width:20%;*/
	border: 1px solid;
	border-color:lightblue;
	border-radius:5px;
	color:black;
	text-align:center;
	background-color: lightblue;
	opacity:0.5;
}
.elt_vert{
	/*width:20%;*/
	border: 1px solid;
	border-color:lightgreen;
	border-radius:5px;
	color:black;
	text-align:center;
	background-color: lightgreen;
	opacity:0.5;
}
#Submit{
	background-color: lightgrey;
	color:black;
	font-family: 'Montserrat', sans-serif;
	font-weight:100;
	width:80%;
	height:5%;
	border: 2px solid;
	border-color:white;
    	-webkit-border-radius: 5px;
    	-ms-border-radius: 5px;
    	border-radius: 5px;	
}
#Submit2{
	background-color: lightgrey;
	color:black;
	font-family: 'Montserrat', sans-serif;
	font-weight:100;
	width:80%;
	height:5%;
	border: 2px solid;
	border-color:white;
    	-webkit-border-radius: 5px;
    	-ms-border-radius: 5px;
    	border-radius: 5px;	
}
aside:hover {background-color: blue;}
.letest:hover {background-color: darkblue; opacity:0.8;}
.barre_statut:hover { opacity:1; background-color: white; color: blue; cursor:default;}
.letest::click {background-color: green; }
#detail_liste_close:hover {background-color: blue;}
#detail_liste_zoom:hover {background-color: darkblue;}
#detail_liste_1:hover {background-color: black;}
#detail_liste_2:hover {background-color: black;}
#detail_liste_3:hover {background-color: black;}
#XML1:hover {cursor:help;}
#ChoixListes_O:hover {cursor:crosshair;}
#ChoixListes_X:hover {cursor:crosshair;}
#EDVClose:hover {width:10%;height:5%;}
::-webkit-scrollbar {
      width: 15px;
}
::-webkit-scrollbar-track {
      background-color: #b46868;
} /* the new scrollbar will have a flat appearance with the set background color */
 
::-webkit-scrollbar-thumb {
      background-color: rgba(200, 0, 0, 0.2); 
} /* this will style the thumb, ignoring the track */
 
::-webkit-scrollbar-button {
      background-color: #7c2929;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::-webkit-scrollbar-corner {
      background-color: red;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */
::scrollbar {
      width: 15px;
}
::scrollbar-track {
      background-color: #b46868;
} /* the new scrollbar will have a flat appearance with the set background color */
 
::scrollbar-thumb {
      background-color: rgba(200, 0, 0, 0.2); 
} /* this will style the thumb, ignoring the track */
 
::scrollbar-button {
      background-color:blue;
} /* optionally, you can style the top and the bottom buttons (left and right for horizontal bars) */
 
::scrollbar-corner {
      background-color: red;
} /* if both the vertical and the horizontal bars appear, then perhaps the right bottom corner also needs to be styled */