html 
{
height: 100%;
overflow: auto;
padding: 0;
margin: 0;
}
body
{
height: 100%;
margin: 0px;
padding: 0px;
outline: 0px;
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
background-image: url("Images/People.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: center;
background-color: black;
background-size: contain;
}

td, th { text-align: left; color: white;}

.box 
{
	position: absolute ;
	left: 40% ;
	top: 5% ;
	width: 25% ;	
}

.box-title
{
Top: 0%;
background-color: Blue;
text-align: center;
border: 1px solid #ddd;
border-radius: 5px;
padding: 6px;
}

h1.box-title
{
color: White;
font-size: medium;
text-align: center;
font-weight: normal;
}

p.box-title
{
color: White;
font-size: small;
text-align: center;
font-weight: normal;
}

.box-button 
{
width: 60%;
height: 3vh;
margin-top: 0.8vh;
border: 1px solid #ddd;
border-radius: 5px;
background-color: green;
color: white;
text-align: center;
cursor: pointer;
font-size: medium;
font-weight: bold;
}

.box-button a
{
color: white;
text-align: center;
cursor: pointer;
font-size: medium;
font-weight: bold;
}

.box-button p
{
color: white;
text-align: center;
font-size: medium;
font-weight: bold;
}

.box-button a:hover
{
  text-decoration: underline;
  color: HotPink;
}

.box-register
{
  text-align:center;
  font-size: small ;
  color: white;
}
.box-register a
{
  text-decoration:none;
  font-size: small ;
  color: white;
}
.box-register a:hover
{
  text-decoration: underline;
  color: HotPink;
}

.box-input 
{
  width: 60%;
  height: 3vh;
  vertical-align: middle;
  margin-top: 0.5vh;
  font-size: small;
  font-weight: normal;  
  background-color: Blue;
  color: White;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
}

.box-input img
{
	float: right;
	margin-top: 0.2vh;
	margin-right: 0.2vh;
	height: 20px;
	cursor: pointer;
	background-color: transparent;
}

.box-input:focus 
{
	color: White;
}

input
{
	width: 12vw;
	margin-top: 0.5vh;
	border: none;
	background-color: transparent;
	color: White;
	outline: none;
	vertical-align: middle;
}

input::placeholder 
{
  color: PowderBlue ;
  text-align: left ;
}

.box-input_1 
{
  width: 60%;
  height: 3vh;
  margin-top: 0.5vh;
  font-size: small;
  font-weight: normal;
  background-color: Green;
  color: White;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
}	

.Error_Message
{
width: 60%;
height: 5vh;
margin-top: 2vh;
border: 1px solid #ddd;
border-radius: 5px;
background-color: purple ;
}

p.Error_Message
{
color: white ;
font-size: medium;
text-align: center ;
}

.sucess
{
	position: absolute ;
	left: 40% ;
	top: 20% ;
	width: 24% ;
	border: 1px solid #c4c4c4 ;
	border-radius: 5px ;
	background-color: Blue ;
	margin: auto ;
	text-align: center ;
    font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
	font-size: medium;
}
.sucess h1
{
	text-decoration: none;
	color: White;
	font-size: small ;
	font-weight: normal ;
}

.sucess caption
{
	text-decoration: none;
	color: WhiteSmoke;
	font-size: small ;
	font-weight: bold ;
}
.sucess td
{
	text-decoration: none ;
	color: WhiteSmoke ;
	font-size: small ;
	text-align: left ;
}
.sucess p
{
	text-decoration: none ;
	color: WhiteSmoke ;
	font-size: small ;
	text-align: Center ;
}
.sucess a
{
   text-decoration: none;
	font-weight: normal ;
	font-size: small ;
	color: White;
	cursor: pointer;
}
.sucess a:hover
{
   text-decoration: underline;
   color: HotPink;
}

.sucess_1
{
	position: absolute ;
	left: 40% ;
	top: 40% ;
	width: 25% ;
	margin: auto ;
}

#warning
{
position: absolute ;
left: 40% ;
top: 40% ;
width: 15% ;
margin: 0px;
padding: 0px;
outline: 0px;
opacity: 1.0 ;
vertical-align: middle;
}

#warning p
{
	color: White;
	font-weight: none;
 	text-align: center;
}

#warning img
{
	float: left;
	height: 40px;
	animation: blink 1s;
    animation-iteration-count: infinite;
}

dialog
{
position: absolute ;
left: 40% ;
top: 50% ;
width: 15% ;
margin: 0px;
padding: 0px;
outline: 0px;
background-color: Gray ;
opacity: 0.5 ;
}

dialog p
{
color: White ;
background: Blue;
text-align: center;
font-weight: bold ;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
dialog img {
    animation: blink 2s;
    animation-iteration-count: infinite;
}

#table_membres
{
	position: absolute;
    left: 40%;
    top: 30%;
	width: 34vw;
	margin-bottom: 18vh;
	margin: auto;
	font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
	font-size: small;
	text-align: center; 
	color: white;
	padding: 6px;
}

caption a
{
   color: white;
   font-size: small;
}

caption a:hover
{
   text-decoration: underline hotpink;
   color: hotpink;
   
}

caption, tfoot {height: 2vh;}

tbody 
{
	position:absolute;
	max-height: 32vh;
	overflow-y: scroll;
}

tbody tr:nth-child(odd) {  background-color: #00008B; }
tbody tr:nth-child(even){  background-color: #0000FF; }

tfoot
{ 
	position: absolute; 
	margin-top: 32.4vh; 
	z-index: -1; 
}

tbody, tfoot, caption 
{
width: 34vw;
border: 1px solid #c4c4c4 ;
border-radius: 8px ;
background-color: #483D8B;
}

td, th { text-align: left;}

th:nth-child(1), td:nth-child(1) {width: 2vw;}
th:nth-child(2), td:nth-child(2) {width: 2vw;}
th:nth-child(3), td:nth-child(3) {width: 8vw;}
th:nth-child(4), td:nth-child(4) {width: 8vw;}
th:nth-child(5), td:nth-child(5) {width: 14vw;}

tbody, tfoot, caption {border-top: solid 1px;}
tfoot, caption {background-color: #483D8B;}

tbody a
{
   font-size: small;
   color: white;
   text-decoration: none;
   cursor: pointer;
}
tbody a:hover
{
   text-decoration: underline hotpink;
   color: hotpink;
}
tbody a:active 
{
	background-color: hotpink;
	color: white;
}