<style type="text/css">

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
height: 100%;
}

body {
height: 100%;
margin: 0;
padding: 10px;
font-family: "Helvetica Neue", helvetica, arial;
display: grid;
justify-items: center;
align-items: center;
background-color: #eee;
}

#main-holder {
width: 500px;
height: 400px;
display: grid;
justify-items: center;
align-items: center;
background-color: white;
border-radius: 7px;
box-shadow: 0px 0px 2px 2px gray;
}

#login-error-msg-holder {
width: 100%;
height: 100%;
display: grid;
justify-items: center;
align-items: center;
}

#login-error-msg {
width: 60%;
text-align: center;
line-height: 1.5em;
margin: 0;
padding: 5px;
font-size: 12px;
font-weight: bold;
color: red;
opacity: 0;
}

#error-msg-second-line {
display: block;
}

#login-form {
 align-self: flex-start;
display: grid;
justify-items: center;
align-items: center;
}

.login-form-field::placeholder {
color: #9a9a9a;
}

.login-form-field {
border: none;
border-bottom: 1px solid #3a3a3a;
margin-bottom: 10px;
border-radius: 3px;
outline: none;
padding: 0px 0px 5px 5px;
}

#login-form-submit {
width: 100%;
padding: 8px;
border: none;
border-radius: 5px;
color: white;
font-weight: bold;
background-color: #3a3a3a;
cursor: pointer;
outline: none;
}

#main-holder{}
#plateforme{}
#plateforme{display:none}

#d, #user, #pseudo, #type {

color: blue;
font-size: 14px;
font-weight: bold;
}

#log1 {
color: #888;
font-size: 14px;
text-align: right;
}

#tab1 {
display: inline-block;
padding: 13px 10px;
border: 1px solid #4CAF50;
width: 225px;
height: 104px;
}

#container {
position: relative;
width: 940px;
}
 #container:after {
content: "";
display: block;
clear: both;
height: 0;
}

#menu {
position: relative;
float: left;
width: 100%;
padding: 0 20px;
border-radius: 3px;
box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0
rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);
background: #ccc;
}

#menu, #menu ul {
list-style: none;
}

#menu > li {
float: left;
position: relative;
border-right: 1px solid rgba(0,0,0,.1);
box-shadow: 1px 0 0 rgba(255,255,255,.25);
perspective: 1000px;
}

#menu > li:first-child {

border-left: 1px solid rgba(255,255,255,.25);
box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}

#menu a {
display: block;
position: relative;
z-index: 10;
padding: 13px 20px 13px 20px;
text-decoration: none;
color: rgba(75,75,75,1);
line-height: 1;
font-weight: 600;
font-size: 14px;
letter-spacing: -.05em;
background: transparent;
text-shadow: 0 1px 1px rgba(255,255,255,.9);
transition: all .25s ease-in-out;
}

#menu > li:hover > a {

background: #333;
color: rgba(0,223,252,1);
text-shadow: none;
}

#menu li ul {
 position: absolute;
left: 0;
z-index: 1;
width: 200px;
padding: 0;
opacity: 0;
visibility: hidden;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: transparent;
overflow: hidden;
transform-origin: 50% 0%;
}

#menu li:hover ul {
padding: 15px 0;
background: #333;
opacity: 1;
visibility: visible;
box-shadow: 1px 1px 7px rgba(0,0,0,.5);
animation-name: swingdown;
animation-duration: 1s;
animation-timing-function: ease;

@keyframes swingdown {
0% {
opacity: .99999;
transform: rotateX(90deg);
}

30% {
transform: rotateX(-20deg) rotateY(5deg);
animation-timing-function: ease-in-out;
}

65% {
transform: rotateX(20deg) rotateY(-3deg);
animation-timing-function: ease-in-out;
}

100% {
transform: rotateX(0);
animation-timing-function: ease-in-out;
}
}

#menu li li a {
padding-left: 15px;
font-weight: 400;
color: #ddd;
text-shadow: none;
border-top: dotted 1px transparent;
border-bottom: dotted 1px transparent;
transition: all .15s linear;
}
 #menu li li a:hover {
color: rgba(0,223,252,1);
border-top: dotted 1px rgba(255,255,255,.15);
border-bottom: dotted 1px rgba(255,255,255,.15);
background: rgba(0,223,252,.02);
}

.content {
background-color: #fff;
border-radius: 4px;
box-sizing: border-box;
color: #666;
font-size: 1em;
line-height: 1.4em;
margin-top: 10px;
padding: 20px;
width: 938px;
outline: dashed 1px black;
}

.content ul {
margin: .5em 2em;
padding: 0;
}

.child {
background-color: #ddd;
border-radius: 8px;
box-sizing: border-box;
color: #666;
font-size: 1em;
line-height: 1.4em;
margin: auto; auto;
margin-top: 20px;
padding: 5px;
width: 100%;
max-width: 550px;
}

.child1 {
background-color: #fff;
border-radius: 4px;
box-sizing: border-box;
color: #666;
font-size: 1em;
line-height: 1.2em;
margin: auto; auto;
margin-top: 10px;
width: 100%;
}

#one {}
#two {}
#three {}
#four {}
#five {}
#six {}
#seven{}
#two, #three, #four, #five, #six, #seven{display:none}

ul {
color: #666;
font-size: 14px;
text-align: justify;
}

label {
display: block;
width: 330px;
float: left;
text-align: right;
color: #333;
font-size: 14px;
padding-top: 2px;
margin-left: 10px;
margin-right: 2px;
}

.w3-border {
border: 1px solid #ccc;
border-top-color: rgb(204, 204, 204);
border-top-style: solid;
border-top-width: 1px;
}

.w3-round {
border-radius: 4px;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}

.w3-input {
padding: 4px;
padding-top: 4px;
padding-right: 4px;
padding-bottom: 4px;
padding-left: 4px;
border: none;
border-bottom: 1px solid #ccc;
width: 150px;
margin: 1px;
}

.w3-input1 {
color: #191970;
font-size: 13px;
font-weight: bold;
}

.button, .button1, .button2, .button3, .button4, .button5,

.button6, .button7, .button8, .button9, .button10 {
background-color: #9c04aa;
color: white;
font-size: 12px;
font-weight: bold;
 padding: 6px 25px;
margin-top: 4px;
border-radius: 5px;
border: none;
word-spacing: 10px;
text-align: center;
cursor: pointer;
}

#progressbar {
position: relative;
text-align: left;
display: none;
top: 20%;
left: 45%;
transform: translate(-50%, -50%);
background: #ddd;
height: 25px;
width: 295px;
border-radius: 10px;
border: 1px solid blue;
}

#myprogressBar {
font-weight: bolder;
font-size: 12px;
color: #fff;
height: 100%;
background: linear-gradient(to left,rgb(253, 2, 140),rgb(240, 199, 230));
border-radius: 10px;
display: grid;
place-items: center;
box-shadow: 0 0 3px -5px rgb(253, 2, 140), 0px 3px 150px rgb(253, 2, 140);
transition: width .5s ease;
}

.progresstext {
font-family: ProximaNova-Reg, Arial, Helvetica, sans-serif;
text-align: justify;
color: #444;
font-size: 13px;
line-height: 18px;
margin: auto 15px; auto 15px;
}

.alrt {
font-size:16px;
font-weight:bold;
color:green;
text-align:center;
width:20%;
}
#alrt {
width:350px;
height:30px;
}

.modal {
display:none;
 position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}

.modal-content {
background-color: #fefefe;
margin: 1% auto 5% auto;
border: 1px solid #888;
width: 50%;
}
.modal-alert {
background-color: #eee;
margin: 15% auto 5% auto;
border: 1px solid #888;
width: 330px;
height: 130px;
border-radius: 8px;
}
.alerttext {
font-family: ProximaNova-Reg, Arial, Helvetica, sans-serif;
text-align: justify;
color: #555;
font-size: 13px;
line-height: 20px;
padding: 15px 10px 15px 10px;
font-weight: 350;
}

.animate {
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s
}
@-webkit-keyframes animatezoom {
from {-webkit-transform: scale(0)}
to {-webkit-transform: scale(1)}
}
@keyframes animatezoom {
from {transform: scale(0)}
to {transform: scale(1)}
}

.cr {
background-color: #fff;
border-radius: 4px;
box-sizing: border-box;
color: #666;
font-size: 1em;
line-height: 1.4em;
width: 938px;
outline: dashed 1px black;
margin-bottom: 40px;
padding: 5px 5px;
}
 #cr {
color: #888;
font-size: 12px;
line-height: 1.2em;
text-align: center;
}

#imgadmin {
width: 97px;
height: 104px;
}

.accuiel {
display: none;
}
.accuielFixed {
display: none;
}

.accuiel {
position: absolute;
display: block;
top: 0;
}
.accuielFixed {
position: fixed;
display: block;
top: 95%;
left: 46%;
}

</style